:root{
    --cream:#faf8f2;
    --cream-2:#f4f1e8;
    --navy:#16303f;
    --navy-soft:rgba(22,48,63,.62);
    --navy-faint:rgba(22,48,63,.34);
    --rule:rgba(22,48,63,.13);
    --teal:#2e7d7b;
    --mint:#7fb3a3;
    --cyan:#5fd4c4;
    --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    --gut:clamp(1.5rem,5vw,5.5rem);
    --maxw:1240px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
  body{
    background:var(--cream);color:var(--navy);
    font-family:var(--sans);font-weight:300;
    font-size:clamp(1rem,.95rem + .2vw,1.0625rem);line-height:1.65;
    overflow-x:hidden;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

  /* micro-label */
  .lab{
    font-family:var(--mono);font-size:.6875rem;font-weight:400;
    letter-spacing:.14em;text-transform:uppercase;color:var(--navy-faint);
  }

  /* ---------- nav ---------- */
  nav{
    position:fixed;inset:0 0 auto 0;z-index:50;
    background:color-mix(in srgb,var(--cream) 82%,transparent);
    backdrop-filter:blur(12px);
    border-bottom:1px solid transparent;transition:border-color .4s;
  }
  nav.stuck{border-bottom-color:var(--rule)}
  .nav-in{
    max-width:var(--maxw);margin:0 auto;padding:1.15rem var(--gut);
    display:flex;align-items:center;justify-content:space-between;gap:2rem;
  }
  /* the logo is a full lockup (mark + wordmark) — it carries the name, so no text beside it */
  .brand{display:flex;align-items:center;text-decoration:none}
  /* the mark's ribbon dominates the lockup's height, so the wordmark needs the extra px to stay legible */
  .brand img{height:46px;width:auto;display:block}
  @media(max-width:720px){.brand img{height:36px}}
  .nav-links{display:flex;align-items:center;gap:2.25rem}
  .nav-links a{
    font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--navy-soft);text-decoration:none;transition:color .2s;
  }
  .nav-links a:hover{color:var(--navy)}
  @media(max-width:720px){.nav-links a:not(.btn-sm){display:none}}
  .btn-sm{
    border:1px solid var(--rule);border-radius:999px;padding:.5rem 1.05rem;
    transition:border-color .2s,color .2s;
  }
  .btn-sm:hover{border-color:var(--navy);color:var(--navy)}

  /* ---------- hero ---------- */
  header{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:9rem 6rem}
  #flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  /* keeps the streamlines off the copy — flow stays legible where it resolves, right of the text */
  .veil{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(125% 95% at 6% 52%,
      var(--cream) 0 40%, rgba(250,248,242,.88) 56%, rgba(250,248,242,0) 86%);
  }
  .hero-in{position:relative;z-index:2}
  h1{
    font-weight:300;letter-spacing:-.035em;line-height:1.02;
    font-size:clamp(2.6rem,1.2rem + 5.6vw,6rem);max-width:16ch;
  }
  h1 em{font-style:normal;color:var(--teal)}
  .hero-sub{
    margin-top:2.25rem;max-width:46ch;color:var(--navy-soft);
    font-size:clamp(1.0625rem,1rem + .35vw,1.3rem);line-height:1.55;
  }
  .hero-cta{margin-top:3rem;display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap}
  .btn{
    display:inline-flex;align-items:center;gap:.7rem;
    background:var(--navy);color:var(--cream);text-decoration:none;
    font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
    padding:.95rem 1.6rem;border-radius:999px;
    transition:transform .25s cubic-bezier(.2,.7,.3,1),background .25s;
  }
  .btn:hover{background:var(--teal);transform:translateY(-2px)}
  .btn svg{width:13px;height:13px;transition:transform .25s}
  .btn:hover svg{transform:translateX(3px)}
  .hero-note{max-width:30ch}

  .scroll-hint{
    position:absolute;left:var(--gut);bottom:2.25rem;z-index:2;
    display:flex;align-items:center;gap:.7rem;
  }
  .scroll-hint i{display:block;width:1px;height:30px;background:linear-gradient(var(--navy-faint),transparent);animation:drop 2.4s ease-in-out infinite}
  @keyframes drop{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

  /* ---------- sections ---------- */
  section{padding-block:clamp(5rem,10vw,9.5rem);position:relative}
  .rule{height:1px;background:var(--rule);max-width:var(--maxw);margin-inline:auto}
  .sec-head{display:grid;grid-template-columns:minmax(0,10rem) 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
  @media(max-width:820px){.sec-head{grid-template-columns:1fr;gap:1.25rem}}
  h2{
    font-weight:300;letter-spacing:-.03em;line-height:1.12;
    font-size:clamp(1.85rem,1.2rem + 2.1vw,3.15rem);max-width:20ch;
  }
  .lede{margin-top:1.75rem;max-width:54ch;color:var(--navy-soft);font-size:1.0625rem}

  /* the gap — pull quote */
  .gap-q{
    font-weight:300;letter-spacing:-.025em;line-height:1.25;
    font-size:clamp(1.5rem,1rem + 2.1vw,2.6rem);max-width:24ch;
  }
  .gap-q b{font-weight:300;color:var(--teal)}
  .gap-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);margin-top:3.5rem}
  @media(max-width:820px){.gap-grid{grid-template-columns:1fr}}
  .gap-grid p{color:var(--navy-soft)}

  /* process */
  .steps{margin-top:4rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
  @media(max-width:820px){.steps{grid-template-columns:1fr}}
  .step{background:var(--cream);padding:2.25rem 1.75rem 2.75rem;position:relative;transition:background .35s}
  .step:hover{background:var(--cream-2)}
  .step .n{font-family:var(--mono);font-size:.6875rem;color:var(--teal);letter-spacing:.1em}
  .step h3{margin-top:1.4rem;font-weight:400;font-size:1.15rem;letter-spacing:-.015em}
  .step p{margin-top:.7rem;font-size:.9375rem;color:var(--navy-soft);line-height:1.6}

  /* build */
  /* explicit tracks, not auto-fit: 4 cards must never orphan into a row of dead cells */
  .builds{margin-top:3.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
  @media(max-width:1080px){.builds{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.builds{grid-template-columns:1fr}}
  /* click-to-expand cards; the open card is the 'selected' state and takes the navy look */
  .build{
    background:var(--cream);color:var(--navy);padding:2rem 1.75rem;min-height:180px;
    display:flex;flex-direction:column;position:relative;
    font:inherit;text-align:left;border:none;width:100%;cursor:pointer;
    transition:background .35s;
  }
  .build:hover{background:var(--cream-2)}
  .build:focus-visible{outline:2px solid var(--teal);outline-offset:-3px}
  .build .tag{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);transition:color .35s}
  /* fixed offset, not margin-top:auto — bottom-anchoring misaligns headings when blurbs wrap differently */
  .build h3{margin-top:2.6rem;font-weight:400;font-size:1.0625rem;letter-spacing:-.01em}
  .build p{margin-top:.5rem;font-size:.875rem;color:var(--navy-soft);line-height:1.55}
  /* caret affordance: '+' rotates toward '×' when open */
  .build-caret{
    position:absolute;top:1.55rem;right:1.55rem;
    font-family:var(--mono);font-weight:400;font-size:1.15rem;line-height:1;color:var(--navy-faint);
    transition:transform .35s,color .35s;
  }
  .build.open .build-caret{transform:rotate(45deg);color:var(--cyan)}
  .build-detail p{font-size:.875rem;color:var(--navy-soft);line-height:1.6}
  /* collapse the detail only when JS is on, so a no-JS visitor still reads it (progressive enhancement) */
  .js .build-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.3,1)}
  .js .build.open .build-wrap{grid-template-rows:1fr}
  .js .build-detail{overflow:hidden;min-height:0}
  .js .build.open .build-detail p{margin-top:1.15rem}
  /* selected/open card — reuse of the existing navy treatment. placed after :hover so it wins */
  .build.open{background:var(--navy);color:var(--cream)}
  .build.open p{color:rgba(250,248,242,.66)}
  .build.open .tag{color:var(--cyan)}
  .build.open .build-detail p{color:rgba(250,248,242,.78)}

  /* cta */
  .cta{background:var(--navy);color:var(--cream);border-radius:2px}
  .cta h2{max-width:18ch}
  .cta .lede{color:rgba(250,248,242,.66)}
  .cta .lab{color:rgba(250,248,242,.4)}
  .cta .btn{background:var(--cream);color:var(--navy)}
  .cta .btn:hover{background:var(--cyan);color:var(--navy)}
  .cta-inner{padding:clamp(3rem,7vw,6rem) clamp(1.5rem,5vw,5rem)}

  footer{padding-block:3rem 4rem;border-top:1px solid var(--rule)}
  .foot{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
  .foot a{color:var(--navy-soft);text-decoration:none}
  .foot a:hover{color:var(--navy)}

  /* reveal — progressive enhancement.
     Scoped to .js so the page renders fully without JS (crawlers, JS off, script errors)
     rather than sitting blank waiting on an observer that may never fire. */
  .js .rv{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
  .js .rv.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .js .rv{opacity:1;transform:none}
  }