/* ==========================================================================
   Brio — hand-built stylesheet (Phase 2 replica of briodev.com)
   Sections: fonts · tokens · reset · typography · layout · nav · hero
   ========================================================================== */

/* ---- Fonts (self-hosted, from the supplied source families) --------------
   Roboto Serif: variable font subset to Latin, axes limited to the weights the
   site uses (300–400) plus optical sizing. 3.7MB TTF -> 112KB woff2.
   Opening Hours Sans: supplied woff2, used as-is.                            */
@font-face { font-family:"Roboto Serif"; src:url("/assets/fonts/RobotoSerif-Variable.woff2") format("woff2-variations");
  font-display:swap; font-style:normal; font-weight:300 400 }
@font-face { font-family:"Opening Hours Sans"; src:url("/assets/fonts/OpeningHoursSans-Regular.woff2") format("woff2");
  font-display:swap; font-style:normal; font-weight:400 }
/* Metric-matched fallbacks, shown only until the webfonts load. Both map to
   local Arial with size-adjust + ascent/descent overrides derived from each
   webfont's hhea metrics ÷ the measured Arial width ratio, so the swap causes
   no reflow. Headings fall back to a sans (Arial) on purpose -- sans->serif
   reads less jarring than serif->serif. */
@font-face { font-family:"Roboto Serif Placeholder"; src:local("Arial"),local("Helvetica Neue"),local("Helvetica");
  ascent-override:86.22%; descent-override:22.69%; line-gap-override:0.00%; size-adjust:107.52% }
@font-face { font-family:"Opening Hours Sans Placeholder"; src:local("Arial"),local("Helvetica Neue"),local("Helvetica");
  ascent-override:97.01%; descent-override:21.78%; line-gap-override:19.80%; size-adjust:101.02% }

/* ---- Design tokens ------------------------------------------------------- */
:root{
  /* color */
  --c-white:#F5F5F7; --c-blue:#333952; --c-light-gray:#626366;
  --c-dark-gray:#27272B; --c-black:#1D1D20;
  --c-white-a10:rgba(245,245,247,.10); --c-white-a20:rgba(245,245,247,.20);
  --c-hairline:rgba(0,0,0,.07);

  /* gradient */
  --g-hero:linear-gradient(180deg,#1D1D20 0%,#333952 100%);
  --g-contact:linear-gradient(180deg,#1D1D20 0%,#333952 100%);
  --g-footer:linear-gradient(180deg,#333952 0%,#333952 100%);
  --g-whyus-card:linear-gradient(180deg,#333952 0%,#1D1D20 100%);

  /* type */
  --font-serif:"Roboto Serif","Roboto Serif Placeholder",Arial,sans-serif;
  --font-sans:"Opening Hours Sans","Opening Hours Sans Placeholder",Arial,sans-serif;
  --font-inter:"Inter",sans-serif; /* separator glyphs only */

  /* layout */
  --content-max:1200px; --content-max-monitor:1440px;
  --pad-x:80px;

  /* radii */
  --r-chip:10px; --r-card:24px; --r-button:40px; --r-arrow:100px;

  /* motion */
  --ease:cubic-bezier(.44,0,.56,1);
  --t-ui:.2s; --t-text:.4s; --t-nav:.3s; --t-slider:.35s;
  /* Framer's FAQ transition: spring, bounce .2 (damping ratio .8), sampled as
     a linear() curve. Slightly quicker than Framer's .4s, and the first peak
     is placed at ~62% of the timeline so the small bounce-back (+1.5%) reads
     over the last 120ms instead of being compressed into the final frames. */
  --t-faq:.32s;
  --spring-faq:linear(0, 0.0302, 0.1048, 0.2043, 0.3144, 0.4254, 0.5306, 0.626,
    0.7097, 0.781, 0.8401, 0.8879, 0.9255, 0.9544, 0.9759, 0.9914, 1.002,
    1.0089, 1.0129, 1.0147, 1.0152, 1.0146, 1.0134, 1.0118, 1.0101, 1.0085,
    1.0069, 1.0055, 1.0042, 1.0032, 1.0023, 1.0016, 1);
  /* Hero appear uses the same bounce-0.2 spring (Framer drives every spring
     with one solver; the curve is time-normalised, so it holds at 1s too). */
  --t-appear:1s;
  --spring-appear:var(--spring-faq);
  /* Scroll reveal: quicker than before and springy to match Framer's non-hero
     reveals -- 40px lift on the bounce-0.2 spring (its 1.5% overshoot = the
     ~0.6px Framer overshoots on 40px travel). */
  --t-reveal:.7s;
}

/* ---- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--c-black);color:var(--c-white);
  font-family:var(--font-sans);
  font-feature-settings:"blwf" 1,"cv09" 1,"cv03" 1,"cv04" 1,"cv11" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}

/* ---- Typography presets (min-width / mobile-first) ----------------------- */
.h1{font-family:var(--font-serif);font-weight:300;font-size:32px;line-height:104%;letter-spacing:-2.8px}
.h2{font-family:var(--font-serif);font-weight:300;font-size:30px;line-height:32px;letter-spacing:-2.2px}
.h3{font-family:var(--font-serif);font-weight:400;font-size:24px;line-height:28px;letter-spacing:-1.75px}
.h4{font-family:var(--font-serif);font-weight:400;font-size:20px;line-height:24px;letter-spacing:-1px}
.body-lg{font-family:var(--font-sans);font-weight:400;font-size:16px;line-height:22px}
.body-sm{font-family:var(--font-sans);font-weight:400;font-size:14px;line-height:20px}
.caption{font-family:var(--font-sans);font-weight:400;font-size:12px;line-height:16px}

/* Roboto Serif is a variable font with an optical-size axis. Browsers default to
   font-optical-sizing:auto, which at display sizes picks opsz≈54 and renders
   noticeably narrower — the hero headline would wrap to 4 lines instead of 5.
   The original site used a single static instance, so pin one optical size. */
.h1,.h2,.h3,.h4{font-optical-sizing:none;font-variation-settings:"opsz" 16}

/* Even out ragged line lengths on headings (Chrome/Safari/FF all support it;
   older browsers just ignore it and keep the default greedy wrap). */
.h1,.h2,.h3{text-wrap:balance}

@media (min-width:810px){
  .h1{font-size:44px;line-height:100%;letter-spacing:-3.1px}
  .h2{font-size:32px;line-height:34px;letter-spacing:-2.5px}
  .h3{font-size:26px;line-height:30px;letter-spacing:-2px}
  .h4{font-size:20px;line-height:24px;letter-spacing:-1px}
  .body-lg{font-size:16px;line-height:24px}
}
@media (min-width:1200px){
  .h1{font-size:54px;line-height:100%;letter-spacing:-3.5px}
  .h2{font-size:40px;line-height:42px;letter-spacing:-2.5px}
  .h3{font-size:30px;line-height:34px;letter-spacing:-2.2px}
  .h4{font-size:22px;line-height:26px;letter-spacing:-1.1px}
  .body-lg{font-size:18px;line-height:24px}
  .body-sm{font-size:16px;line-height:22px}
}

/* ---- Layout system: full-bleed section + centered content ---------------- */
.section{width:100%}
.content{max-width:var(--content-max);margin-inline:auto;width:100%}
/* Monitor tier: widen the content column (and everything keyed off the token,
   incl. the hero) from 1200 to 1440 so all sections share the same margins. */
@media (min-width:1920px){ :root{--content-max:var(--content-max-monitor)} }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:20px}
.nav__logo{width:116px;height:32px;flex-shrink:0}
/* Desktop: the menu wrapper is transparent (links flow inline); the divider
   only exists for the mobile expanded panel. */
.nav__menu{display:contents}
/* Beat the later `.sep{display:flex}` rule -- the divider only shows in the
   mobile expanded panel, never in the inline desktop bar. */
.nav .nav__sep{display:none}
.nav__links{display:flex;align-items:center;gap:20px}
.nav__links a{color:var(--c-white)}
/* Hamburger: hidden until the mobile breakpoint. Framer renders it as a 36px
   rounded-10 tile on white/10%, two bars that cross into an X when open. */
.nav__toggle{display:none;flex:none;width:36px;height:36px;padding:0;border:0;
  border-radius:10px;background:var(--c-white-a10);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav__toggle span{display:block;width:16px;height:1.5px;border-radius:1px;
  background:var(--c-white);transition:transform .3s var(--ease),opacity .3s var(--ease)}
body.nav-open .nav__toggle span:first-child{transform:translateY(2.75px) rotate(45deg)}
body.nav-open .nav__toggle span:last-child{transform:translateY(-2.75px) rotate(-45deg)}
/* Mobile menu: the panel is revealed top-to-bottom (clip only) so the links
   and divider stay put and are uncovered in place -- matching Framer, where the
   menu content does not translate; only the panel sweeps down behind the bar. */
@keyframes menu-reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes menu-hide{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@media (prefers-reduced-motion:reduce){ .nav__toggle span{transition:none} }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--c-black) 0%,var(--c-blue) 100%);
  border-bottom:1px solid rgba(0,0,0,.07)}
/* Full-bleed at any width: viewport-wide plus Framer's fixed overflow inset
   (vw + 364px below the monitor tier, vw + 140px at/above it), centered.
   object-fit:cover keeps the pattern's scale matched to Framer's. */
.hero__bg{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:calc(100% + 364px);max-width:none;height:1010px;
  pointer-events:none;z-index:0;object-fit:cover}
@media (min-width:1920px){ .hero__bg{width:calc(100% + 140px)} }
.hero__inner{position:relative;z-index:1;padding:24px var(--pad-x);min-height:930px;
  display:flex;flex-direction:column}
.hero__content{max-width:var(--content-max);margin-inline:auto;width:100%;
  display:flex;flex-direction:column;margin-top:180px;gap:96px;align-items:flex-start}
.hero__headline{display:flex;flex-direction:column;gap:40px;align-items:flex-start}
.hero__title{max-width:var(--content-max)}
.hero__social{align-self:flex-end;width:644px;max-width:100%;
  display:flex;flex-direction:column;gap:24px;align-items:stretch}

/* pill button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:14px 24px;border-radius:var(--r-button);background:var(--c-white-a10);
  color:var(--c-white);overflow:hidden;
  transition:background .25s var(--ease),padding-right .25s var(--ease)}
.btn:hover{background:var(--c-white-a20)}

/* Hover-revealed arrow — Framer's "Arrow Small Right", masked so it takes
   currentColor. Collapsed to zero width (the -6px margin cancels the flex gap)
   and wiped in from the left, matching Framer's clip-on-layout-grow. */
.btn__icon{flex:none;width:0;height:16px;margin-left:-6px;
  background-color:currentColor;
  -webkit-mask:url("/assets/svg/arrow-small-right.svg") no-repeat left center/16px 16px;
  mask:url("/assets/svg/arrow-small-right.svg") no-repeat left center/16px 16px;
  transition:width .25s var(--ease),margin-left .25s var(--ease)}
.btn--arrow:hover,.btn--arrow:focus-visible{padding-right:22px}
.btn--arrow:hover .btn__icon,.btn--arrow:focus-visible .btn__icon{width:16px;margin-left:0}
@media (prefers-reduced-motion:reduce){
  .btn,.btn__icon{transition:none}
}

/* partner logos */
.partners__label{--sep-w:64px;display:flex;align-items:center;justify-content:center;gap:12px;
  color:var(--c-white);white-space:nowrap}
@media (min-width:810px){ .partners__label{--sep-w:80px} }
@media (min-width:1200px){ .partners__label{--sep-w:100px} }
.partners__sep{flex:0 0 var(--sep-w);width:var(--sep-w);display:flex;align-items:center;gap:4px}
.partners__label .dot{color:var(--c-white);font-family:var(--font-sans);font-size:12px;line-height:1}
.partners__label .line{flex:1;height:0;border-top:1px dashed var(--c-white)}
.partners__grid{display:grid;grid-template-columns:repeat(5,100px);column-gap:36px;row-gap:8px;justify-content:flex-end}
.partners__logo{width:100px;height:40px;display:flex;align-items:center;justify-content:center}
.partners__logo img{display:block;width:auto;height:auto}

/* Hero appear -- the page's only opacity-based appear, replicating Framer's
   three hero animations: fade (opacity .001 -> 1) with a 10px lift on the
   bounce-0.2 spring over 1s, at Framer's per-element delays. The headline is
   intentionally not animated -- Framer renders it immediately on load. */
@keyframes hero-appear{
  from{opacity:.001;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.hero__headline .btn,
.partners__label,
.partners__grid{animation:hero-appear var(--t-appear) var(--spring-appear) both}
.hero__headline .btn{animation-delay:.5s}   /* Framer 1frgey */
.partners__label{animation-delay:.8s}        /* Framer 1cbd3y5 */
.partners__grid{animation-delay:.8s}         /* Framer 1juww9c */
@media (prefers-reduced-motion:reduce){
  .hero__headline .btn,.partners__label,.partners__grid{animation:none}
}

/* Headline text effect (Framer's separate "Text Effect", not the appear
   system): fade + de-blur + 10px lift. Per Line with 0 stagger -- Framer
   splits to per-character spans but animates every line in lockstep (verified
   first/mid/last chars move identically), so a single block animation on the
   h1 is exact. Ease In Out cubic-bezier(.44,0,.56,1), 0.4s, no delay. */
@keyframes hero-title{
  from{opacity:0;filter:blur(4px);transform:translateY(10px)}
  to{opacity:1;filter:blur(0);transform:none}
}
.hero__title{animation:hero-title .4s cubic-bezier(.44,0,.56,1) both}
@media (prefers-reduced-motion:reduce){ .hero__title{animation:none} }

/* ==========================================================================
   Shared separator (✦——✦)
   ========================================================================== */
/* Framer draws this as one run of 16px Inter text: U+2726, then hyphens
   repeated to fill, then U+2726. Measured off that build at 16px: hyphen
   advance 7.36px, ink 5.28px, stroke 1.30px; star ink 11.5px square.
   The stars stay real glyphs (U+2726 isn't in Inter's subsets, so it falls
   back to the system sans exactly as Framer's does). The hyphen run is a
   masked gradient band, which reproduces the dash rhythm and stroke weight
   exactly -- a dashed border can't hit either. */
.sep{--sep-fs:16px;--sep-ink:5.28px;--sep-period:7.36px;--sep-stroke:1.3px;
  --sep-color:var(--c-light-gray);
  display:flex;align-items:center;gap:2px;width:100%;height:20px}
.sep__dot{color:var(--sep-color);font-family:var(--font-inter);font-size:var(--sep-fs);line-height:1}
.sep__line{flex:1;height:2px;
  background:linear-gradient(to bottom,
    transparent 0 calc((2px - var(--sep-stroke)) / 2),
    var(--sep-color) calc((2px - var(--sep-stroke)) / 2) calc((2px + var(--sep-stroke)) / 2),
    transparent calc((2px + var(--sep-stroke)) / 2) 2px);
  -webkit-mask:repeating-linear-gradient(to right,#000 0 var(--sep-ink),
    transparent var(--sep-ink) var(--sep-period));
  mask:repeating-linear-gradient(to right,#000 0 var(--sep-ink),
    transparent var(--sep-ink) var(--sep-period))}
/* In-card variant: same component at 12px instead of 16px, so every metric
   scales by 12/16. Framer renders it 15px tall. */
.sep--sm{--sep-fs:12px;--sep-ink:3.96px;--sep-period:5.52px;--sep-stroke:0.98px;height:15px}
/* Attribution variant: white, fixed 40px, dashes then a single trailing star. */
.sep--author{--sep-color:var(--c-white);width:40px;flex:none}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{padding:140px var(--pad-x)}
/* Two equal half-width blocks stacked vertically, not side by side: the lead
   paragraph sits top-left, the follow-up block bottom-right. */
/* Two paragraphs: first top-left, second bottom-right. On desktop each is
   half the column minus 40px, so the horizontal space between them is a fixed
   80px at any width (they never share a row). Tablet 70%, mobile 100%. */
.about__grid{display:flex;flex-direction:column;gap:40px}
.about__grid > *{width:calc(50% - 40px)}
.about__grid > *:nth-child(2){align-self:flex-end}
.about__col{display:flex;flex-direction:column;gap:24px}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services{padding:32px var(--pad-x) 140px}
/* Separator spacing measured off the Framer build at 1440px: 172px of air
   above it, 128px below. The 64px flex gap covers title->card; the
   separator adds 64px more beneath itself to reach 128. */
.services__content{display:flex;flex-direction:column;align-items:center;gap:64px}
.services__content > .sep{margin-bottom:64px}
.services__title{max-width:640px;text-align:center}
/* Card + button are one stack with no gap, the button flush under the card.
   Width is 55% of the content column (not a fixed px), which is how it's set
   in Framer -- at the 1200px desktop column that resolves to the 660px the
   reference build renders, and it tracks the column at every other size. */
/* Card/CTA stack narrows in tiers: full width on mobile, 70% on tablet,
   55% on desktop. (min-width:1200 comes last so it wins at desktop.) */
.services__stack{width:100%;display:flex;flex-direction:column}
@media (min-width:810px){ .services__stack{width:70%} }
@media (min-width:1200px){ .services__stack{width:55%} }
.services__card{background:var(--c-dark-gray);border-radius:var(--r-card);
  padding:32px;display:flex;flex-direction:column;gap:32px}
.services__item{display:flex;flex-direction:column;gap:8px;text-align:center;align-items:center}
.services__item .body-sm{color:var(--c-white)}

.services__cta{position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:center;gap:10px;padding:32px;border-radius:var(--r-card);
  color:var(--c-white);
  background:linear-gradient(180deg,rgb(29,29,32) 0%,rgb(50,56,81) 100%)}
/* Texture bleeds 31px past each edge and is vertically centred, per Framer's
   left/right:-31px + top:50% + aspect-ratio 1.3793. */
.services__cta-bg{position:absolute;left:-31px;right:-31px;top:50%;
  transform:translateY(-50%);aspect-ratio:1.3793103448275863 / 1;z-index:0;
  pointer-events:none;
  background:url("/assets/images/dZ8gK1s7UsynF5H23zNiE2oNis-w2280.png") center/cover no-repeat;
  transition:opacity .25s var(--ease)}
.services__cta-label{position:relative;z-index:1}
.services__cta-icon{position:relative;z-index:1;flex:none;width:0;height:24px;
  margin-left:-10px;background-color:currentColor;
  -webkit-mask:url("/assets/svg/arrow-small-right.svg") no-repeat left center/24px 24px;
  mask:url("/assets/svg/arrow-small-right.svg") no-repeat left center/24px 24px;
  transition:width .25s var(--ease),margin-left .25s var(--ease)}
.services__cta:hover .services__cta-bg,
.services__cta:focus-visible .services__cta-bg{opacity:.5}
.services__cta:hover .services__cta-icon,
.services__cta:focus-visible .services__cta-icon{width:24px;margin-left:0}
@media (prefers-reduced-motion:reduce){
  .services__cta-bg,.services__cta-icon{transition:none}
}

/* ==========================================================================
   METRICS
   ========================================================================== */
.metrics{padding:140px var(--pad-x) 120px}
/* 3:5 split -- on the 1200px column that is Framer's 420 / 80 / 700. */
.metrics__grid{display:flex;gap:80px;align-items:flex-start}
.metrics__left{flex:3;display:flex;flex-direction:column;gap:40px}
.metrics__author{display:flex;align-items:center;gap:8px;color:var(--c-white)}
.metrics__right{flex:5;display:flex;flex-direction:column;gap:40px}

.stats{display:flex;flex-direction:column;gap:12px}
.stats__label{color:var(--c-white)}
.stats__card{background:var(--c-dark-gray);border-radius:16px;padding:20px;
  display:flex;flex-direction:column;gap:12px}
.stat{display:flex;align-items:center;gap:0}
/* Description centres in the space left between the number and the icon. */
.stat__num{flex:none;padding:2.5px;margin:-2.5px;
  background-image:linear-gradient(0deg,rgb(102,109,138) 0%,rgb(245,245,247) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat__desc{flex:1;text-align:center;color:var(--c-white)}
.stat__icon{flex:none;width:20px;height:20px;background-color:var(--c-white);
  -webkit-mask:var(--icon) no-repeat center/20px 20px;
  mask:var(--icon) no-repeat center/20px 20px}
/* Framer splits each rule into two half-width runs, so the stars meet in the middle. */
.stat-sep{display:flex;gap:0}
.stat-sep .sep{width:50%}

/* ==========================================================================
   STEPS / CAROUSEL
   ========================================================================== */
.steps{padding:120px var(--pad-x) 96px}
.steps__content{display:flex;flex-direction:column;gap:80px}
/* No clipping: cards are allowed to run past the content column and off
   the side of the screen. html{overflow-x:hidden} stops the page from
   gaining a horizontal scrollbar. */
.slider{position:relative}
.slider__track{display:flex;gap:24px}
/* Dark-grey fill with a black -> blue gradient laid over it, the gradient's
   opacity stepping 20/40/60/80% across the four cards. */
.slide{position:relative;flex:0 0 370px;min-height:454px;
  border-radius:var(--r-card);padding:32px;
  display:flex;flex-direction:column;gap:120px;
  background-color:var(--c-dark-gray);
  background-image:linear-gradient(180deg,
    rgba(29,29,32,var(--slide-o)) 0%, rgba(51,57,82,var(--slide-o)) 100%);
  transition:transform .35s var(--ease)}
.slide--1{--slide-o:.2;z-index:1}
.slide--2{--slide-o:.4;z-index:2}
.slide--3{--slide-o:.6;z-index:3}
.slide--4{--slide-o:.8;z-index:4}
/* align-self keeps the img at its intrinsic width; without it the flex
   stretch blows it out to the full 306px column and the SVG centres
   its artwork inside, which reads as an indent. */
.slide__icon{flex:none;align-self:flex-start;width:auto;height:140px}
.slide__text{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.slider__controls{display:flex;gap:12px;margin-top:20px}
@media (prefers-reduced-motion:reduce){ .slide{transition:none} }
.slider__arrow{width:40px;height:40px;border-radius:var(--r-arrow);background:var(--c-white-a10);
  color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease)}
.slider__arrow svg{flex:none}
.slider__arrow:hover{background:var(--c-white-a20)}
.slider__arrow:disabled{opacity:.3;cursor:default}

/* ==========================================================================
   WHY US + FAQ
   ========================================================================== */
.why{padding:80px var(--pad-x) 140px}
.why__content{display:flex;flex-direction:column;align-items:center;gap:64px;padding-bottom:300px;position:relative}
/* The card and the "Got more questions" line are one block: the line sits
   outside the card, 16px below it. */
.why__intro{width:60%;display:flex;flex-direction:column;align-items:center;gap:16px}
.why__card{width:100%;background:var(--g-whyus-card);border-radius:var(--r-card);padding:40px;
  display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
.why__heading{max-width:512px}
.why__card .body-sm{color:var(--c-white)}
.why__more{color:var(--c-light-gray);text-align:center}
/* The orbit block is the positioning context for the FAQ cards; it spans the
   full content column so the card offsets track it. */
.why__orbit{position:relative;width:100%;height:320px;display:flex;justify-content:center}
.orbit{width:320px;height:320px;opacity:.9}

/* No border/outline -- Framer's card is a flat fill. */
/* Block flow, not flex: display:flex on <details> promotes the hidden content
   slot to a flex item, which adds a phantom 16px gap while collapsed.
   The 16px inset lives on <summary>, not on the card, so the whole collapsed
   card is a click target rather than just the text row. */
.faq{position:absolute;width:340px;background:var(--c-dark-gray);border:0;
  border-radius:16px;padding:0;display:block}
.faq summary{cursor:pointer;list-style:none;color:var(--c-white);padding:16px;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
/* Wrapper exists so its height can be animated; overflow:hidden also makes it
   a BFC, so the answer's margins stay inside the measured height. */
.faq__body{overflow:hidden}
.faq__body .sep{width:calc(100% - 32px);margin-inline:16px}
.faq__a{margin:16px}
.faq__q{flex:1}
.faq__icon{flex:none;width:20px;height:20px;color:var(--c-white)}
.faq__icon svg{width:20px;height:20px}
/* Driven by .is-open, not [open]: the attribute is held until the close
   animation ends, so keying off it would delay the icon swap on close. */
.faq__cross{display:none}
.faq.is-open .faq__plus{display:none}
.faq.is-open .faq__cross{display:block}
.faq__a{color:var(--c-white)}
/* Offsets are percentages of the content column: 22px and 82px at 1200px.
   Left/right mirrored, so the pairs move apart as the column narrows. */
.faq--1{left:1.8333%;top:223px}
.faq--2{right:1.8333%;top:193px}
.faq--3{left:6.8333%;top:503px}
.faq--4{right:6.8333%;top:463px}

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.contact{background:var(--g-contact);padding:40px var(--pad-x) 140px}
/* Full-width rule above the grid; the grid's 120px padding-top is the gap. */
.contact__content{display:flex;flex-direction:column}
/* 3:5 split -- on the 1200px column that is Framer's 390 / 160 / 650. */
.contact__grid{display:flex;gap:160px;align-items:flex-start;padding-top:120px}
.contact__copy{flex:3;display:flex;flex-direction:column;gap:12px;align-items:stretch}
.contact__form{flex:5;display:flex;flex-direction:column;gap:24px}
.field-row{display:flex;gap:24px}
.field{flex:1;display:block}
.field--full{width:100%}
/* Framer pins the controls at 14/20 rather than letting Body Small step up to
   16/22 on desktop, so the size is fixed here. */
/* display:block -- as inline-level elements they sit on a line box, which adds
   a few px of descender space under the textarea. */
.field input,.field select,.field textarea{display:block;width:100%;height:40px;background:transparent;
  border:0;border-bottom:1px solid var(--c-white);color:var(--c-white);
  font-size:14px;line-height:20px;padding:0;outline:none;resize:none}
.field textarea{height:140px;padding-top:10px}
/* Browser autofill (Chrome's "quick suggest") otherwise repaints the field
   with a near-white background and black text. Keep it transparent with white
   text so an autofilled field looks identical to a hand-typed one: the long
   background-color transition prevents the autofill fill from ever painting,
   and -webkit-text-fill-color overrides the forced black text. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill{
  -webkit-text-fill-color:var(--c-white);
  caret-color:var(--c-white);
  transition:background-color 100000s ease 0s}
.field input::placeholder,.field textarea::placeholder{color:var(--c-white)}
.field select{color:var(--c-white);appearance:none;padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F5F5F7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;background-size:20px 20px}
.field select option{color:#000}
.contact__submit-row{display:flex;align-items:center;justify-content:flex-end;gap:16px}
/* order/auto-margin keeps the submit button flush right even though the
   status span follows it in the DOM. */
.form-note{color:var(--c-white);order:-1;margin-right:auto}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--g-footer);padding:40px var(--pad-x) 64px}
.footer__grid{display:flex;flex-direction:column;gap:20px}
.footer__row{display:flex;justify-content:space-between;align-items:flex-start}
/* Fixed size, not fluid: the wordmark is an asset at its export dimensions. */
.footer__logo{flex:none;display:block;width:536px;max-width:100%}
.footer__logo img{display:block;width:100%;height:auto}
.footer__info{display:flex;gap:24px;align-items:flex-start}
.footer__contact{flex:none;width:220px;display:flex;flex-direction:column;gap:40px}
.footer__block{display:flex;flex-direction:column;gap:4px}
.footer__social{flex:none;width:100px;display:flex;flex-direction:column;gap:12px}
/* Framer underlines these with a 1px bottom border on a wrapper the height of
   the line box, not with text-decoration -- so it clears descenders. Drawn on
   a pseudo so the rule stays out of layout; both ancestors are column flex, so
   align-self shrink-wraps the link to its text. */
.footer__link{position:relative;align-self:flex-start}
.footer__link::after{content:"";position:absolute;inset:0;
  border-bottom:1px solid var(--c-white);pointer-events:none}
.footer__label,.footer__copy{color:var(--c-white)}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
/* Displacement only -- appear effects slide into place, they never fade. */
.reveal{transform:translateY(40px);transition:transform var(--t-reveal) var(--spring-appear)}
.reveal.in{transform:none}
@media (prefers-reduced-motion:reduce){.reveal{transform:none;transition:none}}

/* ==========================================================================
   RESPONSIVE (tablet / phone)
   ========================================================================== */
@media (max-width:1199px){
  /* Tablet page margin: 48px (matches Framer). */
  :root{--pad-x:48px}
  /* Tablet section spacing (vertical padding), per Framer. */
  .about{padding:104px var(--pad-x)}
  .services{padding:32px var(--pad-x) 104px}
  .metrics{padding:104px var(--pad-x)}
  .steps{padding:104px var(--pad-x) 80px}
  .why{padding:40px var(--pad-x) 104px}
  .contact{padding:40px var(--pad-x) 104px}
  .contact__grid{gap:80px}
  .metrics__grid{gap:64px}
  .why__intro{width:70%}
  /* Tablet + mobile: one field per row (no side-by-side pairs). 24px matches
     the form's row gap so every field is evenly spaced. */
  .field-row{flex-direction:column;gap:24px}
  .footer__grid{gap:8px}
  .footer__logo{width:347px}
  .footer__contact{width:200px;gap:24px}
  .footer__social{width:80px}
}
/* Tablet FAQ: keep the absolute spread (stacking is mobile-only), with Framer's
   310px cards. At --pad-x 48 the content column is viewport-96 -- exactly
   Framer's FAQ context -- so the cards fit: pair 1/2 at the column edges, pair
   3/4 inset 24px, same as Framer. */
@media (min-width:810px) and (max-width:1199px){
  /* Tighter nav-to-headline gap on tablet. */
  .hero__content{margin-top:160px}
  /* Partner logos: 32px gap on tablet (36px on desktop). The grid narrows to
     628px; match hero__social so the label stays aligned with the logos. */
  .partners__grid{column-gap:32px}
  .hero__social{width:628px}
  .faq{width:310px}
  .faq--1{left:0;top:267px}
  .faq--2{right:0;top:227px}
  .faq--3{left:24px;top:527px}
  .faq--4{right:24px;top:487px}
  /* Separator -> headline gap is 80px on tablet (128 on desktop). Flex gap
     stays 64; trim the separator's own margin so 16 + 64 = 80. */
  .services__content > .sep{margin-bottom:16px}
  /* Inside the card, item<->divider gap is 24px on tablet (32 on desktop/mobile). */
  .services__card{gap:24px}
  /* Headline is 50% of the content column on tablet (max-width off so % wins). */
  .services__title{width:50%;max-width:none}
  /* Metric row <-> divider gap is 8px on tablet (12 on desktop). */
  .stats__card{gap:8px}
  /* Step card number <-> text gap is 104px on tablet (120 on desktop). */
  .slide{gap:104px}
  /* Gap between step cards is 20px on tablet (24 on desktop). */
  .slider__track{gap:20px}
  /* About paragraphs widen to 70% on tablet (50% on desktop). */
  .about__grid > *{width:70%}
  /* Contact divider <-> content gap is 80px on tablet (120 on desktop). */
  .contact__grid{padding-top:80px}
  /* Copy:form fill = 0.7:1 on tablet (0.6:1 / 3:5 on desktop) -- gives the
     copy column more width. 7:10 == 0.7. */
  .contact__copy{flex:7}
  .contact__form{flex:10}
}
@media (max-width:809px){
  /* Mobile page margin: 16px (matches Framer). */
  :root{--pad-x:16px}
  /* Cap every content column at 390px, centred, exactly like Framer's mobile
     layout -- the content sits mid-screen and never grows past 390, with the
     16px side margin kicking in only once the viewport drops below ~422px. */
  :root{--content-max:390px}
  /* Mobile section spacing (vertical padding), per Framer. */
  .about{padding:80px var(--pad-x)}
  .services{padding:32px var(--pad-x) 80px}
  .metrics{padding:80px var(--pad-x)}
  .steps{padding:80px var(--pad-x) 64px}
  .why{padding:40px var(--pad-x) 80px}
  .contact{padding:40px var(--pad-x) 80px}
  /* Only here do the cards stack in flow -- guarantees no overlap when the
     column is too narrow for two side by side. */
  .why__orbit{height:auto;flex-direction:column;align-items:center;gap:12px}
  .faq{position:static;width:100%;max-width:420px;margin-top:12px}
  .why__content{padding-bottom:80px}
  /* ---- Mobile nav: hamburger replaces the inline links ---- */
  .nav__toggle{display:flex}
  .nav__menu{display:none}
  /* Keep the logo + X above the sliding panel; .nav is the stacking context. */
  .nav{z-index:20}
  .nav__logo,.nav__toggle{position:relative;z-index:2}
  /* Opened menu: a solid dark panel fixed to the top of the screen that slides
     down from behind the nav bar. Max-width 422 (the 390 content column + 16px
     each side), centred, rounded bottom -- matches Framer's mobile menu. Inside,
     top to bottom: the ✦——✦ divider then the links stacked left-aligned. */
  body.nav-open .nav__menu{display:block;position:fixed;top:0;left:0;right:0;z-index:1;
    width:100%;max-width:422px;margin-inline:auto;
    padding:70px 16px 16px;border-radius:0 0 24px 24px;background:rgb(29,29,32);
    animation:menu-reveal .35s var(--ease) both}
  /* 16px of air above and below the divider (padding-top places it 16px under
     the bar; margin-bottom sets the gap to the first link). */
  body.nav-open .nav__sep{display:flex;margin-bottom:16px}
  body.nav-open .nav__links{display:flex;flex-direction:column;align-items:flex-start;gap:0}
  body.nav-open .nav__links li{width:100%}
  body.nav-open .nav__links a{display:block;padding:12px 0}
  /* Closing: play the reveal in reverse (panel clips back up) and flip the X
     back to a hamburger in step. .nav-closing is added on close and dropped on
     animationend (main.js). */
  body.nav-open.nav-closing .nav__menu{animation:menu-hide .35s var(--ease) both}
  body.nav-open.nav-closing .nav__toggle span:first-child,
  body.nav-open.nav-closing .nav__toggle span:last-child{transform:none}
  @media (prefers-reduced-motion:reduce){ body.nav-open .nav__menu{animation:none} }
  /* ---- Mobile hero: centered headline + button, tighter nav->headline gap.
     Framer centres the whole hero block and caps the headline at 390px. ---- */
  /* 8px above the nav (was 24); add it back to the content margin so the
     headline stays put at y=160. */
  .hero__inner{padding-top:8px}
  .hero__content{margin-top:96px;align-items:center}
  .hero__headline{align-items:center;gap:32px}
  .hero__title{max-width:390px;text-align:center}
  .hero__social{align-self:center}
  /* Partner logos wrap and centre instead of the fixed 5-col grid (which ran
     off-screen left). ~3 per row at this width, centred. */
  .partners__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px}
  /* Contact divider -> content gap: 80px on mobile too (base is 120). */
  .contact__grid{padding-top:80px}
  /* Mobile: both paragraphs full width, no stagger. */
  .about__grid{gap:32px}
  .about__grid > *{width:100%}
  .about__grid > *:nth-child(2){align-self:stretch}
  /* In column direction align-items controls width; flex-start would
     shrink-wrap the copy and form instead of filling the column. */
  .metrics__grid,.contact__grid{flex-direction:column;align-items:stretch}
  .metrics__grid{gap:140px}
  .why__intro{width:100%}
  .slide{flex-basis:280px;min-height:400px;gap:64px}
  /* Gap between step cards 20px; trim the outline number a touch. */
  .slider__track{gap:20px}
  .slide__icon{height:120px}
  .footer__grid{gap:40px}
  .footer__row{flex-direction:column;gap:40px}
  .footer__contact{width:220px;gap:40px}
  .footer__social{width:100px}
}