/* ============================================================
   JETLAG — jetlagadvancing.com
   Design tokens and measurements mirror the original Framer build.
   ============================================================ */

:root{
  /* palette */
  --bg:#f5f4f6;
  --white:#fff;
  --ink:#1a1a1a;
  --ink-2:#212121;
  --grey-1:#383838;
  --grey-2:#8e8e8e;
  --grey-3:#a7a7a7;
  --line:#e6e6e6;
  --orange:#ff8532;
  --orange-600:#ff620a;

  /* Instrument Sans sections (workflow + faq) */
  --alt-ink:#0d0d17;
  --alt-ink-2:#1b1b25;
  --alt-body:#45454f;
  --alt-border:#e0e0e6;
  --alt-title:#141110;

  /* layout */
  --shell:1200px;
  --pad:24px;
  --radius-lg:32px;
  --radius-md:24px;
  --radius-sm:16px;

  /* type */
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --alt-sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* motion — spring(stiffness 400, damping 30, mass 1) sampled to a linear() curve.
     49 points rather than 25: the extra resolution is what reads as "smoother"
     ease-in/ease-out instead of faintly stepped, especially on the reveals. */
  --spring:linear(0,.0128,.0469,.0969,.158,.2262,.2982,.3716,.4441,.5143,.5808,.6429,.7,.7518,.7983,.8394,.8754,.9064,.9329,.9552,.9736,.9886,1.0006,1.0099,1.0169,1.022,1.0254,1.0274,1.0283,1.0283,1.0276,1.0264,1.0248,1.0229,1.0209,1.0189,1.0168,1.0148,1.0128,1.011,1.0093,1.0078,1.0064,1.0051,1.004,1.0031,1.0023,1.0016,1.001);
  --spring-ms:400ms;
  /* the nav uses a slower, critically damped spring (omega 14, no overshoot),
     measured off the original - the snappy 400ms spring reads as a snap here */
  --spring-slow:linear(0,.0638,.1972,.3464,.4858,.6052,.7023,.7787,.8373,.8815,.9143,.9385,.9561,.9688,.9779,.9844,.989,.9923,.9946,.9963,.9974,.9982,.9987,.9991,.9994);
  --spring-slow-ms:700ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6,p,figure,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
button,input{font:inherit;color:inherit}
svg{fill:currentColor}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 12px 0}
.skip:focus{left:0}

.page{display:flex;flex-direction:column;align-items:center;background:var(--bg);position:relative}
/* purely a landmark - it inherits the page's flex context so nothing shifts */
main{width:100%;display:flex;flex-direction:column;align-items:center}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}

/* ============================================================
   Reveal on scroll — opacity (+ optional 32px lift), spring easing
   ============================================================ */
/* Transitions, not animations: if the browser cannot run them the element
   still lands on its final state instead of being stuck at opacity 0. */
[data-reveal]{opacity:1}
.js [data-reveal]{
  opacity:.001;
  transform:translateY(var(--y,96px)) scale(var(--s,1));
  /* The transition lives here, on the base rule, not only on .is-in - so it
     applies the same way in both directions (entering AND leaving), which is
     what lets the reveal replay every time an element re-enters view. */
  transition:opacity var(--spring-ms) var(--spring),transform var(--spring-ms) var(--spring);
  transition-delay:calc(var(--d,0) * 70ms);
}
.js [data-reveal].is-in{
  opacity:1;
  transform:none;
}
/* will-change only while a reveal is actually animating - JS adds this class
   right before toggling .is-in and removes it on transitionend. With up to a
   few dozen of these on the page, promoting all of them to their own GPU
   layer permanently (as an earlier version did, to dodge a different bug)
   costs more in sustained scroll framerate than it saves. */
.js [data-reveal].will-animate{will-change:opacity,transform}
/* the hero fades without lifting, matching the original */
.hero [data-reveal]{--y:0px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ============================================================
   NAV
   ============================================================ */
.nav-wrap{position:sticky;top:0;z-index:20;width:100%;display:flex;justify-content:center}
.nav{
  width:100%;max-width:var(--shell);height:84px;
  padding:24px 24px 4px;margin-inline:auto;overflow:hidden;
  display:flex;align-items:flex-start;
}

/* The bar has two states. At the top of the page it sits flat on the page
   background; past 32px of scroll it collapses into a translucent pill.
   Both states are described here as transitions on the same elements. */
.nav-pill{
  /* Only two children (logo, nav-right) with justify-content:space-between -
     the single gap between them shrinks in lockstep with the pill's own
     width, every frame, with nothing to snap. Anything toggled outside this
     one width transition (an inner margin flipping auto->0, say) desyncs
     from it and reads as a jump-then-catch-up, which is the bug this avoids. */
  display:flex;align-items:center;justify-content:space-between;gap:4px;
  /* Width must be an explicit length in both states or it cannot be
     interpolated - `fit-content` would snap. JS measures both and sets
     --nav-w-open / --nav-w-stuck in px. */
  width:var(--nav-w-open,100%);height:37px;padding:0;margin-inline:auto;
  background:rgba(26,26,26,0);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  border-radius:0;
  transition:width var(--spring-slow-ms) var(--spring-slow),
             height var(--spring-slow-ms) var(--spring-slow),
             padding var(--spring-slow-ms) var(--spring-slow),
             border-radius var(--spring-slow-ms) var(--spring-slow),
             background-color var(--spring-slow-ms) var(--spring-slow);
}
.is-stuck .nav-pill{
  width:var(--nav-w-stuck,fit-content);height:56px;padding:4px;
  background:rgba(26,26,26,.5);border-radius:var(--radius-sm);
}
/* used while JS measures the two widths */
.nav-measuring .nav-pill,.nav-measuring .nav-pill *{transition:none!important}
.nav-measuring .nav-pill{width:max-content!important}

.nav-logo{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:60px;height:37px;padding:8px 10px;
  background:var(--ink);border-radius:8px;
  transition:width var(--spring-slow-ms) var(--spring-slow),
             height var(--spring-slow-ms) var(--spring-slow),
             padding var(--spring-slow-ms) var(--spring-slow),
             border-radius var(--spring-slow-ms) var(--spring-slow);
}
.is-stuck .nav-logo{width:68px;height:45px;padding:12px;border-radius:12px}
.nav-logo img{width:100%;height:auto}

/* logo | nav-right, where nav-right groups links+cta so there is exactly one
   flexible gap for justify-content:space-between to animate on .nav-pill */
.nav-right{display:flex;align-items:center;gap:4px;flex:0 0 auto}

.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  position:relative;
  padding:10px 16px;border-radius:8px;
  font-size:14px;line-height:20px;font-weight:500;color:var(--ink);
  transition:color var(--spring-slow-ms) var(--spring-slow),background-color .18s ease;
}
.is-stuck .nav-links a{color:#fff}
.nav-links a:hover{color:var(--orange)}
/* the soft dot under a link on hover, matching the original */
.nav-links a::after{
  content:"";position:absolute;left:50%;bottom:6px;
  width:4px;height:4px;border-radius:50%;background:currentColor;filter:blur(2px);
  opacity:0;transform:translate(-50%,2px) scale(.5);
  transition:opacity .25s ease,transform .3s var(--spring);
}
.nav-links a:hover::after{opacity:.8;transform:translate(-50%,0) scale(1)}

.nav-cta{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  height:36px;padding:8px 16px;background:var(--ink);border-radius:8px;
  font-size:14px;line-height:20px;font-weight:500;color:#fff;
  transition:height var(--spring-slow-ms) var(--spring-slow),
             padding var(--spring-slow-ms) var(--spring-slow),
             border-radius var(--spring-slow-ms) var(--spring-slow),
             background-color var(--spring-slow-ms) var(--spring-slow),
             color var(--spring-slow-ms) var(--spring-slow);
}
.is-stuck .nav-cta{height:48px;padding:14px 20px;border-radius:12px;background:var(--white);color:var(--ink)}
.nav-burger{display:none}
.nav-mobile{display:none}

/* hover roll-up */
.roll{display:grid;overflow:hidden;height:20px}
.roll>span{grid-area:1/1;transition:transform .32s var(--spring)}
.roll>span:last-child{transform:translateY(100%)}
a:hover>.roll>span:first-child{transform:translateY(-100%)}
a:hover>.roll>span:last-child{transform:translateY(0)}

/* ============================================================
   HERO
   ============================================================ */
.hero-section{width:100%;display:flex;justify-content:center;padding-bottom:20px}
.hero-section .shell{padding-top:24px;padding-bottom:62px}
.hero{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:40px;
  min-height:580px;padding:160px 64px 64px;
  background:var(--ink);border-radius:var(--radius-lg);
}
/* brightness(2) is what gives the chrome renders their gloss - the source
   images are deliberately dark and the filter lifts the highlights. */
.hero-wordmark,.hero-sphere,.hero-cross{
  position:absolute;z-index:3;pointer-events:none;filter:brightness(2);
}
/* The wordmark sits in a 250x250 box with object-fit:contain, so the visible
   letters are vertically centred inside it - not aligned to the box top. */
.hero-wordmark{
  top:-16px;right:57px;width:250px;height:250px;object-fit:contain;
  filter:brightness(2) drop-shadow(14px 15px 3px #000);
}
.hero-sphere{top:292px;right:-32px;width:200px;height:200px;object-fit:cover}
.hero-cross{
  top:388px;right:160px;width:306px;height:296px;object-fit:cover;
  animation:float 6s ease-in-out infinite alternate;
  /* This scrolls directly under the sticky, blurred nav bar for part of the
     page - its own filter+transform animation compounds that Chrome-specific
     ghosting if it isn't on its own layer either. */
  will-change:transform;
}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-32px)}}
@media (prefers-reduced-motion:reduce){.hero-cross{animation:none}}

.hero-copy{display:flex;flex-direction:column;gap:16px;position:relative;z-index:4;width:100%}
.hero h1{
  max-width:1000px;
  font-size:48px;line-height:56px;font-weight:700;color:#fff;letter-spacing:0;
}
.hero-body{max-width:560px;font-size:18px;line-height:28px;color:var(--line)}

.btn-hero{
  position:relative;z-index:4;display:inline-flex;align-items:center;
  height:48px;padding:14px 64px 14px 20px;
  background:rgba(255,255,255,.2);border-radius:12px;
  font-size:14px;line-height:20px;font-weight:500;color:#fff;
  transition:background-color .2s ease;
}
.btn-hero:hover{background:rgba(255,255,255,.28)}
.btn-hero-icon{
  position:absolute;right:4px;top:4px;
  width:40px;height:40px;padding:10px;border-radius:8px;
  background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;
}

/* ============================================================
   Shared section heads
   ============================================================ */
.head{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  max-width:720px;margin-inline:auto;text-align:center;
}
.head h2{font-size:48px;line-height:56px;font-weight:700;color:var(--ink)}
.head .lead{max-width:560px;font-size:18px;line-height:28px;color:var(--grey-1)}

.head-alt{max-width:640px;font-family:var(--alt-sans)}
.head-alt h2{font-family:var(--alt-sans);font-size:36px;line-height:44px;font-weight:600;color:var(--alt-ink)}
.head-alt .lead{font-family:var(--alt-sans);max-width:520px;font-size:16px;line-height:24px;color:var(--alt-body)}

/* Framer draws these borders on an inset ::after, so they add no height.
   An inset shadow reproduces that without changing the box. */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px 6px 14px;background:var(--white);border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:14px;line-height:20px;font-weight:500;color:var(--ink);
}
.pill-sm{padding:6px 14px 6px 12px;font-size:12px;line-height:18px}
.pill-alt{
  padding:2px 10px;font-family:var(--alt-sans);
  box-shadow:inset 0 0 0 1px #c9c9d2;
  font-size:14px;line-height:20px;font-weight:500;color:var(--alt-ink-2);
}

/* ============================================================
   WHY CHOOSE
   ============================================================ */
.why{
  width:100%;max-width:var(--shell);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:36px;
  padding:50px var(--pad);
}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 16px;width:100%}
.card{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:24px 32px;background:var(--white);border-radius:var(--radius-md);
}
.card-icon{width:48px;height:48px;color:var(--grey-2);flex:0 0 auto}
.card h3{font-size:24px;line-height:32px;font-weight:600;color:var(--ink)}
.card p{font-size:16px;line-height:24px;color:var(--grey-1)}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;width:100%;
  padding:32px;background:var(--white);border-radius:var(--radius-lg);
}
.stat{display:flex;flex-direction:column;gap:4px;text-align:center}
.stat-n{font-size:48px;line-height:56px;font-weight:700;color:var(--ink)}
.stat-l{font-size:18px;line-height:28px;color:var(--grey-2)}

/* ============================================================
   TEAM
   ============================================================ */
.team{width:100%;background:var(--white);padding:30px 0 50px;display:flex;justify-content:center}
.team-inner{display:flex;flex-direction:column;align-items:center;gap:64px}
.team-row{--team-gap:78px;display:flex;justify-content:center;align-items:flex-start;gap:var(--team-gap);width:100%}
.team-card{display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  flex:0 0 auto;width:clamp(180px, calc(100% - 560px - var(--team-gap)), 323px)}
.team-photo{width:100%;aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden}
.team-photo img{width:100%;height:100%;object-fit:cover}
.team-meta{display:flex;flex-direction:column;gap:4px}
.team-name{font-size:18px;line-height:24px;font-weight:600;color:var(--ink)}
.team-role{font-size:14px;line-height:20px;color:var(--grey-2)}
.team-role a:hover{color:var(--orange)}
.team-socials{display:flex;gap:16px}
.team-socials a{display:flex;color:var(--grey-2);transition:color .18s ease}
.team-socials a:hover{color:var(--orange)}
.team-socials svg{width:20px;height:20px}
.team-bio{flex:1 1 auto;min-width:0;max-width:560px;font-size:16px;line-height:24px;color:var(--grey-1)}

/* ============================================================
   WORKFLOW — stacking sticky cards
   ============================================================ */
.steps{
  width:100%;max-width:var(--shell);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:48px;
  padding:50px var(--pad) 30px;
}
.step-stack{width:100%;max-width:560px;display:flex;flex-direction:column;gap:16px}
/* Seven of these are sticky at once through this section - each already
   needs its own compositor layer as it pins/unpins, so hinting it up front
   is free rather than making Chrome repeatedly reconsider it mid-scroll. */
.step{position:sticky;top:calc(140px + var(--i) * 16px);will-change:transform}
.step-card{
  display:flex;align-items:flex-start;gap:16px;padding:32px;
  background:var(--tint);
  box-shadow:0 1px 2px rgba(9,13,3,.05),inset 0 0 0 1px var(--tint-border);
  font-family:var(--alt-sans);
}
.step-icon{width:24px;height:24px;margin-top:2px;flex:0 0 auto;color:var(--alt-ink)}
.step-card h3{font-size:18px;line-height:28px;font-weight:600;color:var(--alt-title)}
.step-card p{font-size:16px;line-height:24px;color:var(--alt-ink);margin-top:8px}
/* the original leaves the final card taller so the stack scrolls out cleanly */
.step:last-child .step-card{min-height:196px}

/* scroll-driven shrink as each card sticks (progressive enhancement) */
/* The cards stack and stay put: no shrink, no fade. The original scales them
   down as they stack, but that was explicitly not wanted here. */

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  width:100%;max-width:var(--shell);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:64px;
  padding:30px var(--pad) 48px;
}
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;width:100%}
.framed{background:var(--bg);border-radius:var(--radius-md);padding:8px}
.framed-wide{grid-column:1/-1}
.framed-in{
  display:flex;flex-direction:column;align-items:flex-start;gap:13px;
  padding:20px 24px;background:var(--white);border-radius:var(--radius-sm);height:100%;
}
.contact-icon{width:32px;height:32px;color:var(--grey-2);flex:0 0 auto}
.contact-text{display:flex;flex-direction:column;gap:8px}
.contact-text h3{font-size:18px;line-height:24px;font-weight:600;color:var(--ink)}
.contact-text p{font-size:14px;line-height:20px;color:var(--grey-1)}
.framed-in hr{width:100%;height:1px;border:0;background:var(--line);margin:0}
.contact-link{font-size:14px;line-height:20px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:transparent;transition:text-decoration-color .18s ease}
.contact-link:hover{color:var(--orange);text-decoration-color:currentColor}

.form-row{flex-direction:row;gap:96px;padding:48px}
.form-intro{display:flex;flex-direction:column;gap:24px;flex:1 1 auto;max-width:524px}
.form-intro h3{font-size:24px;line-height:32px;font-weight:600;color:var(--ink)}
.form-intro p{font-size:16px;line-height:24px;color:var(--grey-1)}

.form{display:flex;flex-direction:column;gap:24px;width:100%;max-width:420px;flex:0 0 auto}
.fields{display:flex;flex-direction:column;gap:12px;width:100%}
.field{display:flex;flex-direction:column;gap:10px;width:100%}
.field>span{font-size:12px;line-height:18px;color:var(--grey-1)}
.field input{
  width:100%;height:44px;padding:12px;
  background:var(--bg);border:1px solid transparent;border-radius:10px;
  font-size:14px;line-height:20px;color:var(--ink);
  transition:border-color .18s ease,background-color .18s ease;
}
.field input::placeholder{color:var(--grey-3)}
.field input:focus{outline:0;border-color:var(--orange-600);background:var(--white)}
.field input:user-invalid{border-color:#d64545}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn-send{
  width:100%;height:40px;padding:0;border:0;cursor:pointer;
  background:var(--ink);color:#fff;border-radius:10px;
  font-size:14px;line-height:20px;font-weight:600;
  transition:background-color .18s ease,transform .18s var(--spring);
}
.btn-send:hover{background:#000;transform:translateY(-1px)}
.btn-send[disabled]{opacity:.55;cursor:progress;transform:none}
.form-status{font-size:14px;line-height:20px;color:var(--grey-1)}
.form-status:empty{display:none}
.form-status.ok{color:#1c7a3e}
.form-status.err{color:#c03030}

/* ============================================================
   FAQ
   ============================================================ */
.faq{
  width:100%;max-width:var(--shell);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:0 var(--pad) 50px;font-family:var(--alt-sans);
}
.accordion{display:flex;flex-direction:column;gap:12px;width:100%;max-width:640px}
.acc{
  background:var(--white);border-radius:var(--radius-sm);
  box-shadow:0 1px 2px rgba(9,13,3,.05),inset 0 0 0 1px var(--alt-border);
  overflow:hidden;
}
/* A closed <details> hides its content outright, so nothing can transition -
   hence a button plus a panel, which animates reliably everywhere. */
.acc-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  padding:20px 24px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:16px;line-height:24px;font-weight:500;color:var(--alt-ink);
}
.acc-q svg{
  width:16px;height:16px;flex:0 0 auto;color:#61616b;
  transition:transform var(--spring-ms) var(--spring);
}
.acc.is-open .acc-q svg{transform:rotate(180deg)}

.acc-inner{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--spring-ms) var(--spring);
}
.acc.is-open .acc-inner{grid-template-rows:1fr}
.acc-body{
  overflow:hidden;
  opacity:0;transform:scale(.96);transform-origin:top left;
  transition:opacity var(--spring-ms) var(--spring),transform var(--spring-ms) var(--spring);
}
.acc.is-open .acc-body{opacity:1;transform:none}
.acc-body>p{padding:0 24px 20px;font-size:16px;line-height:24px;color:var(--alt-body)}
@media (prefers-reduced-motion:reduce){
  .acc-inner,.acc-body,.acc-q svg{transition:none}
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-wrap{width:100%;padding:8px;background:var(--bg)}
.footer{background:var(--ink);border-radius:var(--radius-lg);display:flex;justify-content:center;overflow:hidden}
.footer-inner{
  width:100%;max-width:var(--shell);
  display:flex;flex-direction:column;gap:40px;padding:64px var(--pad) 32px;color:#fff;
}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}
.footer-brand{display:flex;flex-direction:column;gap:16px;max-width:560px}
.footer-brand img{width:98px;height:30px;object-fit:contain;object-position:left center}
.footer-info{font-size:14px;line-height:20px;color:#fff}
.footer-info a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35);transition:text-decoration-color .18s ease}
.footer-info a:hover{color:var(--orange);text-decoration-color:var(--orange)}
.footer-nav{display:flex;flex-direction:column;gap:16px;min-width:219px}
.footer-nav-links{display:flex;flex-direction:column;gap:12px}
.footer-nav-title{font-size:14px;line-height:20px;font-weight:500;color:var(--grey-3)}
.footer-nav a{font-size:14px;line-height:20px;color:#fff;transition:color .18s ease}
.footer-nav a:hover{color:var(--orange)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:10px 0}
.footer-bottom p{font-size:14px;line-height:20px;font-weight:400;color:var(--grey-2)}
.footer-socials{display:flex;align-items:center;gap:12px}
.footer-socials a{display:flex;color:var(--grey-3);transition:color .18s ease}
.footer-socials a:hover{color:var(--orange)}
.footer-socials svg{width:20px;height:20px}

/* ============================================================
   TABLET  (810 – 1279)
   ============================================================ */
@media (max-width:1279.98px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .why{padding:50px var(--pad) 30px}
  .stats{gap:20px;padding:13px}
  .team-row{--team-gap:70px}
  .steps{padding:20px var(--pad) 0}
  .contact{gap:20px;padding:20px var(--pad) 0}
  .faq{padding:20px var(--pad)}
}

/* ============================================================
   MOBILE  (≤ 809)
   ============================================================ */
@media (max-width:809.98px){
  :root{--pad:16px}
  html{scroll-padding-top:80px}

  .nav{height:auto;padding:16px;overflow:visible}
  .nav-pill{height:auto;padding:4px;gap:8px;width:100%;background:rgba(26,26,26,.5);border-radius:var(--radius-sm)}
  .nav-logo,.is-stuck .nav-logo{width:auto;height:37px;padding:8px 10px;border-radius:8px}
  .nav-links a{color:#fff}
  .nav-logo img{width:36px}
  .nav-right{display:none}
  .nav-burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;width:37px;height:37px;padding:0 8px;
    background:none;border:0;cursor:pointer;
  }
  .nav-burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--spring),opacity .2s ease}
  .nav-burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .nav-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .nav-mobile{
    display:flex;flex-direction:column;gap:4px;margin-top:8px;padding:8px;
    background:rgba(26,26,26,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-radius:var(--radius-sm);
    animation:menu-in .3s var(--spring) both;
  }
  .nav-mobile[hidden]{display:none}
  @keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .nav-mobile a{padding:12px;border-radius:12px;font-size:14px;line-height:20px;font-weight:500;color:#fff}
  .nav-mobile a:hover{background:rgba(255,255,255,.12)}
  .nav-mobile-cta{background:var(--white);color:var(--ink)!important;text-align:center}

  .hero-section .shell{padding-bottom:0}
  .hero{min-height:0;padding:96px 32px 32px;gap:40px}
  .hero h1{font-size:24px;line-height:32px;font-weight:600}
  .hero-body{font-size:16px;line-height:24px}
  .hero-wordmark{width:150px;top:20px;right:20px}
  .hero-sphere{width:120px;height:120px;top:auto;bottom:-24px;right:-20px}
  .hero-cross{width:160px;height:155px;top:auto;bottom:-40px;right:90px}

  .why{gap:14px;padding:30px var(--pad)}
  .why-grid{grid-template-columns:1fr;gap:16px}
  .head h2{font-size:36px;line-height:44px;font-weight:600}
  .head .lead{font-size:16px;line-height:24px}
  /* the original drops the stats bar below 810px */
  .stats{display:none}

  .team{padding:30px 0}
  .team-inner{gap:32px}
  .team-row{flex-direction:column;align-items:flex-start;gap:20px}
  .team-card{width:100%}
  .team-card{width:100%;gap:20px}
  .team-photo{width:200px;height:200px}
  .team-bio{font-size:16px;line-height:24px}

  .steps{padding:30px var(--pad) 20px;gap:21px}
  .step-stack{gap:16px}
  .step{top:calc(100px + var(--i) * 12px)}

  .contact{gap:32px;padding:30px var(--pad)}
  .contact-grid{grid-template-columns:1fr;gap:16px}
  .form-row{flex-direction:column;gap:32px;padding:24px}
  .form,.form-intro{max-width:none}
  .form-intro h3{font-size:20px;line-height:28px}

  .faq{padding:0 var(--pad) 40px}

  .footer-inner{padding:40px var(--pad) 24px;gap:32px}
  .footer-top{flex-direction:column;gap:32px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px}
}