:root{
    --teal-950:#0b2b31; --teal-900:#103a42; --teal-800:#17525d; --teal-700:#1d6b7a;
    --ochre:#e8a02c; --ochre-bright:#ffb839;
    --cream:#f4ecdc; --cream-dim:#dfd3ba;
    --red:#c63c29;
    --max: 1100px;
  }
  *{ box-sizing: border-box; margin: 0; padding: 0; }
  html,body{ background: var(--teal-900); color: var(--cream); }
  body{
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
  }
  a{ color: var(--ochre); text-decoration: none; border-bottom: 1px solid rgba(232,160,44,.4); transition: border-color .25s, color .25s; word-break: break-word; }
  a:hover{ color: var(--ochre-bright); border-color: var(--ochre-bright); }

  .nav{
    position: fixed; inset: 0 0 auto 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 34px; background: rgba(11,43,49,.85); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(244,236,220,.08);
  }
  .nav .logo{ font-family:'Anton'; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; color: var(--cream); border: 0; }
  .nav nav{ display: flex; gap: 28px; }
  .nav nav a{
    font-family:'Archivo'; font-weight: 500; font-size: 13px;
    text-transform: uppercase; letter-spacing: .14em; color: var(--cream); border: 0;
  }
  .nav nav a:hover{ color: var(--ochre); }
  .nav .back{
    border: 1px solid var(--cream); padding: 10px 18px; border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing:.18em; text-transform: uppercase;
    color: var(--cream); transition: all .25s;
  }
  .nav .back:hover{ background: var(--cream); color: var(--teal-900); border-color: var(--cream); }

  .hero-small{
    padding: 180px 50px 80px;
    border-bottom: 1px solid rgba(244,236,220,.12);
  }
  .hero-small .container{ max-width: var(--max); margin: 0 auto; }
  .kicker{
    font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
    color: var(--ochre); font-weight: 700;
    display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px;
  }
  .kicker::before{ content:""; width: 40px; height:1px; background: currentColor; }
  h1{
    font-family:'Anton'; font-weight: 400;
    font-size: clamp(56px, 9vw, 140px); line-height: .9;
    letter-spacing: -.01em; text-transform: uppercase; color: var(--cream);
  }
  h1 em{
    font-family:'Anton'; font-weight: 300;
    text-transform: none; letter-spacing: -.02em; color: var(--ochre);
  }

  .tabs{
    max-width: var(--max); margin: 40px auto 0; padding: 0 50px;
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  .tabs a{
    padding: 14px 24px; border-radius: 999px;
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
    border: 1px solid rgba(244,236,220,.25); color: var(--cream);
  }
  .tabs a.on, .tabs a:hover{ background: var(--ochre); border-color: var(--ochre); color: var(--teal-900); }

  .content{
    max-width: var(--max); margin: 0 auto; padding: 80px 50px 120px;
  }
  .content section + section{ margin-top: 100px; padding-top: 80px; border-top: 1px solid rgba(244,236,220,.12); }
  .content h2{
    font-family:'Anton'; font-weight: 400;
    font-size: clamp(36px, 5vw, 64px); line-height: .95;
    letter-spacing: -.01em; text-transform: uppercase; margin-bottom: 30px;
    color: var(--cream);
  }
  .content h2 em{ font-family:'Anton'; text-transform: none; color: var(--ochre); font-weight: 300; }
  .content h3{
    font-family:'Anton'; font-size: 26px; text-transform: uppercase;
    letter-spacing: .01em; margin: 56px 0 16px; color: var(--ochre);
  }
  .content h4{
    font-family:'Archivo'; font-weight: 700; font-size: 15px;
    letter-spacing: .12em; text-transform: uppercase;
    margin: 30px 0 10px; color: var(--cream);
  }
  .content p{ margin-bottom: 16px; color: var(--cream-dim); max-width: 70ch; }
  .content ul{ margin: 10px 0 20px 20px; color: var(--cream-dim); }
  .content ul li{ margin-bottom: 6px; }

  .meta-block{
    background: var(--teal-800); padding: 30px 34px; margin: 24px 0;
    border-left: 3px solid var(--ochre);
  }
  .meta-block .lbl{
    font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
    color: var(--ochre); font-weight: 700; margin-bottom: 6px;
  }
  .meta-block .v{ font-size: 18px; color: var(--cream); margin-bottom: 16px; }
  .meta-block .v:last-child{ margin-bottom: 0; }

  footer{
    background: var(--teal-950); padding: 50px; text-align: center;
    font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--cream-dim);
  }
  footer a{ color: var(--cream-dim); margin: 0 12px; border: 0; }
  footer a:hover{ color: var(--ochre); }

  @media (max-width: 900px){
    .hero-small, .content, .tabs{ padding-left: 24px; padding-right: 24px; }
    .nav{ padding: 18px 20px; }
    .nav nav{ display: none; }
  }