/* ============================================================
     SEMANTIC DESIGN TOKENS
     Hex values live ONLY in these two blocks. Nothing below
     hardcodes a colour.
     ============================================================ */
  :root{
    /* surfaces */
    --surface-page:#ECE5D5;
    --surface-elevated:#F4EFE1;
    --surface-inverse:#1F1D1B;
    --surface-action:#0D5C5C;
    --surface-header:rgba(31,29,27,.88);
    --surface-contrast:#ECE5D5;

    /* text */
    --text-primary:#1F1D1B;
    --text-secondary:#56524A;
    --text-on-inverse:#ECE5D5;
    --text-on-inverse-dim:rgba(236,229,213,.68);
    --text-on-action:#ECE5D5;
    --text-on-action-dim:rgba(236,229,213,.76);
    --text-on-contrast:#1F1D1B;
    --text-action:#0D5C5C;

    /* actions */
    --action-primary:#0D5C5C;
    --action-hover:#094A4A;
    --text-on-action-primary:#ECE5D5;

    /* accents + lines */
    --accent-editorial:#7A2E3D;
    --border-subtle:rgba(31,29,27,.16);
    --border-on-inverse:rgba(236,229,213,.16);
    --border-on-action:rgba(236,229,213,.36);

    /* focus */
    --focus-ring:#0D5C5C;
    --focus-on-inverse:#ECE5D5;
    --focus-on-action:#F4EFE1;

    /* spacing */
    /* spacing: large steps reduced ~18% from the previous scale */
    --s1:8px; --s2:16px; --s3:22px; --s4:30px; --s5:46px;
    --s6:66px; --s7:92px; --s8:122px;
  }

  /* Dark mode is a re-resolution of the same tokens, not an inversion.
     The page stays warm charcoal, the hero and About lift slightly,
     the CTA band keeps its deep teal so the action reads the same. */
  @media (prefers-color-scheme:dark){
    :root{
      --surface-page:#1F1D1B;
      --surface-elevated:#2A2824;
      --surface-inverse:#2A2824;
      --surface-action:#0D5C5C;
      --surface-header:rgba(42,40,36,.90);
      --surface-contrast:#ECE5D5;

      --text-primary:#ECE5D5;
      --text-secondary:#A8A29A;
      --text-on-inverse:#ECE5D5;
      --text-on-inverse-dim:rgba(236,229,213,.68);
      --text-on-action:#ECE5D5;
      --text-on-action-dim:rgba(236,229,213,.76);
      --text-on-contrast:#1F1D1B;
      --text-action:#7AB8B8;

      --action-primary:#7AB8B8;
      --action-hover:#ECE5D5;
      --text-on-action-primary:#1F1D1B;

      --accent-editorial:#B89AA8;
      --border-subtle:rgba(236,229,213,.18);
      --border-on-inverse:rgba(236,229,213,.16);
      --border-on-action:rgba(236,229,213,.36);

      --focus-ring:#7AB8B8;
      --focus-on-inverse:#ECE5D5;
      --focus-on-action:#F4EFE1;
    }
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--surface-page)}
  body{background:var(--surface-page);color:var(--text-primary);
    font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
    font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

  /* Instrument Serif is reserved for the five display moments only:
     H1, the two section H2s, the performance question, the CTA H2. */
  h1,.serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
    letter-spacing:-.022em;line-height:1.04}

  :focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}

  .wrap{width:min(1120px,100% - 44px);margin-inline:auto}
  @media(min-width:768px){.wrap{width:min(1120px,100% - 128px)}}

  .eb{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
    letter-spacing:.22em;text-transform:uppercase}

  /* shared button */
  .btn{display:inline-flex;align-items:center;justify-content:center;
    min-height:52px;padding:0 26px;background:var(--action-primary);
    color:var(--text-on-action-primary);text-decoration:none;border:0;cursor:pointer;
    font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
    letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
    transition:background .16s ease}
  .btn:hover{background:var(--action-hover)}

  /* ---------- sticky header ---------- */
  header{position:sticky;top:0;z-index:30;background:var(--surface-header);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:66px}
  .hd .eb{color:var(--text-on-inverse-dim);white-space:nowrap}
  .hd .btn{min-height:44px;padding:0 18px;font-size:11px}
  header :focus-visible{outline-color:var(--focus-on-inverse)}
  @media(max-width:600px){.hd .eb{font-size:10px;letter-spacing:.12em}
    .hd .btn{padding:0 14px;font-size:10px}}

  /* ---------- 1. hero ---------- */
  .stuck{background:var(--surface-inverse);color:var(--text-on-inverse);padding:var(--s6) 0}
  @media(min-width:768px){.stuck{padding:var(--s8) 0 var(--s7)}}
  .stuck h1{font-size:clamp(40px,7.2vw,86px);max-width:15ch;color:var(--text-on-inverse)}
  .say{margin-top:var(--s4);max-width:46ch}
  .say p{font-size:clamp(18px,1.9vw,21px);line-height:1.5;color:var(--text-on-inverse-dim)}
  .hero-cta{margin-top:var(--s5)}
  .stuck :focus-visible{outline-color:var(--focus-on-inverse)}

  /* recognition statements: not links, no arrows, no destination affordance */
  .rows-intro{margin-top:var(--s5);font-size:clamp(17px,1.8vw,19px);font-weight:500;
    color:var(--text-on-inverse-dim)}
  .rows{margin-top:var(--s3);border-top:1px solid var(--border-on-inverse)}
  .row{padding:var(--s3) 0;border-bottom:1px solid var(--border-on-inverse)}
  .row .t{display:block;font-size:clamp(19px,2.2vw,26px);font-weight:500;
    line-height:1.35;letter-spacing:-.008em;color:var(--text-on-inverse)}

  /* ---------- 2. approach + services ---------- */
  .simple{padding:var(--s6) 0}
  @media(min-width:768px){.simple{padding:var(--s8) 0}}
  .simple .eb{color:var(--text-secondary)}
  .simple h2{margin-top:var(--s3);font-size:clamp(32px,4.8vw,60px);max-width:16ch}

  .q{margin-top:var(--s6);padding-left:var(--s3);border-left:2px solid var(--accent-editorial)}
  @media(min-width:768px){.q{padding-left:var(--s4)}}
  .q p{font-size:clamp(26px,3.6vw,42px);line-height:1.14;letter-spacing:-.02em;max-width:21ch}

  .six-lead{margin-top:var(--s5);font-size:16px;color:var(--text-secondary);max-width:52ch}
  .six{margin-top:var(--s3);display:flex;flex-wrap:wrap;align-items:baseline}
  .six span{font-size:clamp(18px,1.9vw,21px);font-weight:500;letter-spacing:-.004em;
    display:inline-flex;align-items:baseline}
  .six span:not(:last-child)::after{content:"/";color:var(--text-action);opacity:.6;
    font-weight:400;margin:0 clamp(11px,1.4vw,17px)}

  .ways-head{margin-top:var(--s6);font-size:clamp(19px,2vw,22px);font-weight:600;
    letter-spacing:-.008em}
  .ways{margin-top:var(--s3);border-top:1px solid var(--border-subtle)}
  .way{display:grid;gap:6px;padding:var(--s4) 0;border-bottom:1px solid var(--border-subtle)}
  @media(min-width:820px){.way{grid-template-columns:minmax(260px,.6fr) 1fr;
    gap:var(--s4);align-items:baseline}}
  /* all four services carry equal weight */
  .way h3{font-size:clamp(18px,1.95vw,21px);font-weight:600;line-height:1.3;
    letter-spacing:-.008em;color:var(--text-primary)}
  .way p{color:var(--text-secondary);font-size:16px;line-height:1.55;max-width:46ch}

  .built{margin-top:var(--s5);font-size:clamp(21px,2.4vw,29px);font-weight:500;
    line-height:1.28;letter-spacing:-.012em;max-width:30ch;color:var(--text-action)}
  .quick{margin-top:var(--s3);font-size:15px;line-height:1.6;
    color:var(--text-secondary);max-width:52ch}

  /* ---------- 3. about ---------- */
  .about{background:var(--surface-elevated);padding:var(--s6) 0}
  @media(min-width:768px){.about{padding:var(--s7) 0}}
  .about .eb{color:var(--text-secondary)}
  .about h2{margin-top:var(--s3);font-size:clamp(27px,3.6vw,44px);max-width:22ch;line-height:1.14}
  .bio{margin-top:var(--s4);max-width:62ch}
  .bio p{font-size:16px;line-height:1.72;color:var(--text-secondary)}
  .bio p+p{margin-top:var(--s2)}

  /* ---------- 4. cta ---------- */
  .talk{background:var(--surface-action);color:var(--text-on-action);padding:var(--s6) 0}
  @media(min-width:768px){.talk{padding:var(--s7) 0}}
  .talk .eb{color:var(--text-on-action-dim)}
  .talk h2{margin-top:var(--s3);font-size:clamp(32px,5vw,64px);max-width:16ch;
    color:var(--text-on-action)}
  .talk .sub{margin-top:var(--s3);font-size:clamp(18px,2vw,21px);
    color:var(--text-on-action-dim);max-width:38ch}
  .talk :focus-visible{outline-color:var(--focus-on-action)}

  form{margin-top:var(--s5);max-width:640px}
  .fields{display:grid;gap:var(--s3)}
  @media(min-width:640px){.fields{grid-template-columns:1fr 1fr}
    .fields .full{grid-column:1/-1}}
  label span{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
    font-weight:500;letter-spacing:.16em;text-transform:uppercase;
    color:var(--text-on-action-dim);margin-bottom:8px}
  input,textarea{width:100%;padding:12px 2px;background:transparent;
    color:var(--text-on-action);border:0;border-bottom:1px solid var(--border-on-action);
    border-radius:0;font-family:'Inter Tight',sans-serif;font-size:17px;line-height:1.5;
    transition:border-color .2s ease}
  input{min-height:48px}
  textarea{min-height:112px;resize:vertical;display:block}
  input:hover,textarea:hover,input:focus,textarea:focus{border-bottom-color:var(--text-on-action)}
  .talk .btn{margin-top:var(--s4);min-height:56px;
    background:var(--surface-contrast);color:var(--text-on-contrast)}
  .talk .btn:hover{background:var(--surface-elevated);color:var(--text-on-contrast)}
  .talk .btn:disabled{opacity:.55;cursor:default}
  .talk .btn:disabled:hover{background:var(--surface-contrast)}

  /* honeypot: visually removed but still in the DOM for bots */
  .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

  .cf-turnstile{margin-top:var(--s4);min-height:65px}

  .form-status{margin-top:var(--s3);font-size:15px;line-height:1.5;max-width:46ch}
  .form-status.ok{color:var(--text-on-action)}
  .form-status.err{color:var(--text-on-action);
    padding-left:var(--s2);border-left:2px solid var(--border-on-action)}

  footer{background:var(--surface-action);color:var(--text-on-action-dim);padding:0 0 var(--s4)}
  .ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:var(--s1);padding-top:var(--s5);border-top:1px solid var(--border-on-action);font-size:13px}
  footer a{color:var(--text-on-action-dim);text-decoration:none;display:inline-flex;
    align-items:center;min-height:44px;transition:color .18s ease}
  footer a:hover{color:var(--text-on-action)}
  footer :focus-visible{outline-color:var(--focus-on-action)}