/* 77 Media · motion redesign v3 (Sept 2026). Phone first.
   Loads after the inline stylesheet, so equal-specificity rules here win. */

:root{
  --font-sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --hair:rgba(10,1,28,.10);
  --hair-2:rgba(10,1,28,.16);
  --hair-on-dark:rgba(255,255,255,.12);
  --ease-out-2:cubic-bezier(.22,1,.36,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --dur:.9s;
}
body{overflow-x:clip}

/* =========================================================
   1 · Global type and motion system
   ========================================================= */
.serif{background:none;-webkit-text-fill-color:currentColor;color:var(--purple-deep);padding-inline:.03em .08em}
.h2{font-size:clamp(32px,5vw,58px);font-weight:800;letter-spacing:-.034em;line-height:1.04;text-wrap:balance}
.h3{font-weight:700;letter-spacing:-.02em}
.lede{font-size:clamp(16px,1.7vw,19px);line-height:1.7;color:var(--text-muted)}
.section{padding-block:clamp(64px,9vw,140px)}
.section-head{margin-bottom:clamp(36px,4.5vw,64px)}

/* numbered eyebrows, Shopify's index counter idea */
main{counter-reset:sec}
.section{counter-increment:sec}
.eyebrow{gap:12px;font-size:11.5px;letter-spacing:.14em;color:var(--purple-deep)}
.eyebrow::before{content:counter(sec,decimal-leading-zero);width:auto;height:auto;background:none;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.02em;font-family:var(--font-serif);font-size:15px;font-style:italic;color:var(--purple)}

/* the house reveal: one recipe, slower and softer than before */
.r{transform:translate3d(0,28px,0);transition:opacity var(--dur) var(--ease-out-2),transform var(--dur) var(--ease-out-2);transition-delay:var(--d,0ms)}
.r--scale{transform:translate3d(0,24px,0) scale(.97)}

/* word-by-word masked line reveal for headlines (JS splits into .w > .w__i) */
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.1em .06em .18em;margin:-.1em -.06em -.18em}
.split .w__i{display:inline-block;transform:translateY(112%);transition:transform 1s var(--ease-out-2);transition-delay:calc(var(--i,0) * 45ms)}
.split.is-in .w__i{transform:none}

/* buttons: respond on press */
.btn{transition:transform .18s var(--ease-out-2),background-color .25s var(--ease-out-2),box-shadow .25s var(--ease-out-2)}
.btn:active{transform:scale(.97)}
.btn--ghost{background:rgba(255,255,255,.6);border-color:var(--hair);color:var(--ink)}

/* dotted underline on nav and text links */
.nav__link{text-underline-offset:.4em;text-decoration-thickness:1px}
.nav__link:hover{text-decoration:underline dotted var(--purple);background:transparent;color:var(--ink)}

/* =========================================================
   2 · Nav: quiet glass, no spinning border
   ========================================================= */
.nav__inner{background-image:none;background:transparent;border:1px solid transparent;animation:none;box-shadow:none}
.nav.is-scrolled .nav__inner{background-image:none;background:rgba(255,255,255,.72);border:1px solid var(--hair);animation:none;
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 8px 30px rgba(10,1,28,.06)}
.navmail{background-image:none;background:rgba(255,255,255,.8);border:1px solid var(--hair);animation:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.section.why{background:transparent;position:relative;z-index:1;padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(28px,4vw,56px)}
.nav.is-dark .nav__inner{background:transparent;border-color:transparent}
.nav.is-dark.is-scrolled .nav__inner{background:rgba(20,8,44,.62);border-color:var(--hair-on-dark)}
.nav.is-dark .nav__link{color:rgba(255,255,255,.78)}
.nav.is-dark .nav__link:hover{color:#fff}
.nav.is-dark .nav__lead img,.nav.is-dark .nav__logo{filter:invert(1) hue-rotate(180deg) brightness(1.4)}
.nav.is-dark .navmail{background:rgba(255,255,255,.9)}

/* =========================================================
   4 · Cards: flat, hairline, cursor glow
   ========================================================= */
.svc,.pcard,.case,.tstm__card,.hiw__card,.form,.audit,.work__cta,.pricing__honest,.faq__aside{
  box-shadow:none;border:1px solid var(--hair);border-radius:22px}
.svc{background:#fff}
.pcard{background:#fff}
.pcard--popular{background:linear-gradient(180deg,var(--lavender-tint),#fff 50%);border-color:var(--purple);box-shadow:0 24px 60px rgba(130,78,235,.14)}
.audit,.work__cta,.pricing__honest{background:var(--lavender-tint)}
.tstm__card,.hiw__card,.form{background:#fff}
.glow{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s var(--ease-out-2);
  padding:1px;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(130,78,235,.65),transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.has-glow{position:relative}
.has-glow:hover .glow{opacity:1}
.hiw__step{border-radius:16px}
.hiw__step.is-active{background:#fff;border-color:var(--hair);box-shadow:none}
.faq__item{border-bottom:1px dotted var(--hair-2)}
.faq__q{font-weight:600;letter-spacing:-.015em}

/* =========================================================
   5 · Results as the dark chapter (Shopify theme flip)
   ========================================================= */

/* =========================================================
   6 · Phone: carousels and the sticky call-to-action
   ========================================================= */
@media (max-width:767px){
  .svc-grid,.pcards,.cases,.team-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:4px var(--gutter) 22px;margin-inline:calc(-1 * var(--gutter));scrollbar-width:none;touch-action:pan-x pan-y}
  .svc-grid::-webkit-scrollbar,.pcards::-webkit-scrollbar,.cases::-webkit-scrollbar,.team-grid::-webkit-scrollbar{display:none}
  .svc,.pcard,.case{flex:0 0 84%;scroll-snap-align:center}
  .tcard{flex:0 0 62%;scroll-snap-align:center}
  .svc-grid>*,.pcards>*,.cases>*,.team-grid>*{--d:0ms}
  .pcards{align-items:flex-start}
  .swipe-hint{display:flex;justify-content:center;gap:6px;margin-top:-6px;color:var(--text-subtle);font-size:12px;font-weight:600}
  .swipe-hint i{display:inline-block;width:16px;height:2px;border-radius:2px;background:var(--hair-2);margin-top:8px}
}

/* =========================================================
   7 · Desktop section index (Shopify's numbered sidebar)
   ========================================================= */
.sindex{display:none}
@media (min-width:1400px){
  .sindex{position:fixed;left:28px;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:10px;counter-reset:si;
    opacity:0;transition:opacity .5s var(--ease-out-2)}
  .sindex.is-on{opacity:1}
  .sindex a{counter-increment:si;display:flex;align-items:baseline;gap:10px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--text-subtle);text-decoration:none;
    transition:color .3s var(--ease-out-2)}
  .sindex a::before{content:counter(si,decimal-leading-zero);font-family:var(--font-serif);font-style:italic;font-size:13px;color:var(--purple);opacity:.7}
  .sindex a span{position:relative}
  .sindex a span::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
    background:linear-gradient(90deg,var(--purple-deep) 1px,transparent 1px) 0 0/3px 1px repeat-x;
    clip-path:inset(0 100% 0 0);transition:clip-path .35s ease-in-out .1s}
  .sindex a.is-active{color:var(--ink)}
  .sindex a.is-active span::after,.sindex a:hover span::after{clip-path:inset(0)}
  .sindex.is-dark a{color:rgba(255,255,255,.55)}
  .sindex.is-dark a.is-active{color:#fff}
  .sindex.is-dark a span::after{background:linear-gradient(90deg,#fff 1px,transparent 1px) 0 0/3px 1px repeat-x}
}

/* =========================================================
   8 · Preferences
   ========================================================= */
@media (hover:none){.glow{display:none}}
@media (prefers-reduced-motion:reduce){
  .r--stage,.r,.r--scale{transform:none}
  .split .w__i{transform:none;transition:none}
}
@media (prefers-reduced-transparency:reduce){
  .hero__pill,.hero__proof>div,.btn--ghost,.nav__inner,.navmail,.shell{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.97)}
}

/* construction guides in the sky (drawn once on load) */
.sky .guides{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sky .guides line{fill:none;stroke:var(--purple-deep);stroke-opacity:.13;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s cubic-bezier(.34,.22,.47,.84)}
.sky .guides .g-dash{stroke-opacity:.2}
.sky .guides.is-drawn line{stroke-dashoffset:0}
.sky .guides.is-drawn .g-dash{stroke-dasharray:.006 .006}
.sky .guides .g-desk,.sky .guides .g-solid{display:none}
@media (min-width:1024px){.sky .guides .g-desk,.sky .guides .g-solid{display:block}}
@media (prefers-reduced-motion:reduce){.sky .guides line{transition:none;stroke-dashoffset:0}}
.swipe-hint{display:none}

/* ---- pass 2 fixes ---- */
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--purple);border-radius:2px;font:inherit}
.section-head .eyebrow::before{content:counter(sec,decimal-leading-zero);width:auto;height:auto;background:none;font-family:var(--font-serif);font-style:italic;font-size:15px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--purple)}
.section.quotes{counter-increment:none}
.svc-grid + .swipe-hint{display:none !important}

/* =========================================================
   3 · Hero v5: the Fora hero, one to one, in a dusk-purple palette
   ========================================================= */
.hero--v5{position:relative;padding-top:clamp(96px,22vw,120px);padding-bottom:0;overflow:hidden;text-align:center;color:var(--ink);}
.hero--v5 .hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:3}

/* 9 Sep 2026 · two orphaned declaration blocks removed from here. Both had lost their
   selector and their opening brace in an earlier edit, so they read as `...;filter:blur(30px)}`
   and `...;transition:...}` with nothing opening them — malformed CSS that every browser has
   always discarded by skipping to the next `}`. They were leftovers of the sky-and-hills design
   dropped on 7 Sep: no element on any page carries `hill`, `sky` or `hero__glow`, and the only
   `.hill` rule left is a reduced-motion override for the same dead class. Nothing rendered
   changes; site.css is now brace-balanced, which is also what let the production build minify
   it without appearing to lose a declaration. */

.hero__pill{display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;padding:7px 12px 7px 9px;border:1px solid rgba(10,1,28,.12);border-radius:999px;
  background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.hero--v5 .hero__h1{margin:0;font-size:clamp(28px,7.2vw,56px);font-weight:800;line-height:1.06;letter-spacing:-.038em;color:var(--ink);text-wrap:balance;max-width:none}
.hero--v5 .serif{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;background:linear-gradient(100deg,var(--purple-deep),var(--purple) 55%,#9E76F2);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-inline:.06em .1em}
.hero__pill-mark{width:18px;height:18px;border-radius:6px;background:var(--purple);display:inline-grid;place-items:center;color:#fff;font-size:10px;font-weight:800;letter-spacing:-.05em}
.hero--v5 .hero__pill b{font-weight:600;color:var(--purple-deep)}
.hero--v5 .hero__h1 br{display:inline}
.hero--v5 .hero__lede{display:block;margin:18px auto 0;max-width:68ch;font-size:clamp(14.5px,1.15vw,16px);line-height:1.55;color:rgba(255,243,240,.74);text-align:center}
.brd{display:none}
@media (min-width:900px){.brd{display:inline}}
.hero--v5 .hero__cta{margin-top:30px;padding:0;gap:10px;justify-content:center}
.hero--v5 .hero__cta .btn{flex:none;min-height:48px;padding:0 24px;border-radius:999px}
.hero--v5 .btn--ghost{background:rgba(255,255,255,.55);border-color:rgba(10,1,28,.12);color:var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero--v5 .btn--ghost:hover{background:rgba(255,255,255,.8)}

.hero__proof{display:flex;flex-wrap:nowrap;justify-content:center;gap:0;margin:26px 0 0;width:100%;max-width:640px;background:none;border:0;border-radius:0;overflow:visible}
.hero__proof>div{background:none;padding:0 clamp(8px,2.4vw,20px);margin:0;min-width:0;border-left:1px solid rgba(10,1,28,.14);text-align:center}
.hero__proof>div:first-child{border-left:0}
.hero__proof dt{font-size:clamp(15px,4.2vw,22px);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.hero__proof dd{margin:4px 0 0;font-size:clamp(9.5px,2.5vw,12px);line-height:1.25;color:rgba(10,1,28,.62);font-weight:500;white-space:nowrap}
/* Hero split (6 Sep 2026), after 21st.dev glassmorphism-trust-hero: copy and buttons left, a glass trust panel on
   the right carrying our own screen (the shell), the figures as the reference's stat rows, and two status chips.
   The panel sits above the front ridge (z 5 over the hills' 4) so the landscape shows through the glass. */
.hero--v5 .hero__inner{display:grid;grid-template-columns:minmax(0,1fr);max-width:1500px;gap:clamp(28px,5vw,56px);align-items:center;justify-items:stretch;text-align:left;z-index:6}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0}
.hero--v5 .hero__h1{text-align:left;max-width:none}
.hero__line{display:block;white-space:nowrap}
.hero--v5 .hero__lede{margin:20px 0 0;max-width:52ch;text-align:left;color:#332748;font-size:clamp(15px,1.2vw,17.5px)}
.hero--v5 .hero__lede strong{color:var(--ink);font-weight:700}
.hero--v5 .hero__cta{justify-content:flex-start;margin-top:28px}
.hero__panel{position:relative;width:100%;min-width:0;color:var(--ink);text-align:left}
.hero__panel>*{position:relative}
.hero__panel-glow{display:none}
.hero__panel .hero__stage{margin:0}
.hero__panel .shell{grid-template-columns:52px minmax(0,1fr);min-height:0;border-radius:20px;border-bottom:1px solid rgba(255,255,255,.16);-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);box-shadow:0 30px 80px rgba(40,18,90,.28)}
.hero__panel .shell__side{padding:14px 8px}
.hero__panel .shell__brand{display:none}
.hero__panel .shell__search{position:static;margin:0 0 6px}
.hero__panel .shell__nav{padding:0 8px}
.hero__panel .shell__nav span{display:none}
.hero__panel .pane{min-height:430px;padding:30px 18px 32px}
.hero__panel .pane__tiles{gap:6px;margin-top:12px}
.hero__panel .pane__bio{display:none}
.hero__panel .pane__pill{height:38px;font-size:13px;margin-top:12px}
.hero__panel .tile{padding:8px 6px 7px}
.hero__panel .tile__l{font-size:8.5px;letter-spacing:.04em}
.hero__panel .tile__v{font-size:12px}
.hero__panel .tile__ring b{font-size:12px;letter-spacing:-.03em}
.hero__panel .tile__ring small{font-size:8px}
.hero__panel .tile--ring{gap:5px}
.hero__panel .tile--ring svg{width:28px;height:28px}
.hero__panel .tile__logos{gap:4px}
.hero__panel .tile__logos span{width:19px;height:19px;border-radius:6px}
.hero__panel .tile__logos svg{width:11px;height:11px}
.hero__panel .tile__bars{height:20px}
@media (min-width:768px){
  .hero__panel .shell{grid-template-columns:172px minmax(0,1fr)}
  .hero__panel .shell__side{padding:18px 12px}
  .hero__panel .shell__search{width:100%;justify-content:start;padding-left:10px;color:rgba(255,255,255,.5)}
  .hero__panel .shell__nav{padding:0 10px}
  .hero__panel .shell__nav span{display:inline}
}
/* Right column as the reference: two stacked glass cards. Card 2 = "Trusted by": title, then each client as a small mark
   plus a bold wordmark, 50% grey until hovered, 48px apart, 40s loop, 20/80 side mask. */
/* Badge pills above the headline, after the reference's badge */
.hero__badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid rgba(10,1,28,.12);background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:7px 12px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(10,1,28,.72);line-height:1}
.hero__right{display:flex;flex-direction:column;gap:24px;min-width:0}
.hero__trusted{position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);padding:32px 0;text-align:left}
.hero__trusted-t{margin:0 0 24px;padding:0 32px;font-size:16px;font-weight:500;color:rgba(10,1,28,.55)}
.hero__trusted .hero__logos{position:relative;display:flex;overflow:hidden;margin-top:0;width:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.hero__trusted .hero__logos-track{display:flex;flex:none;overflow:visible;-webkit-mask-image:none;mask-image:none;align-items:center;gap:48px;width:max-content;padding:0 16px;white-space:nowrap;animation:marquee var(--duration,40s) linear infinite;will-change:transform}
.hero__logo{display:flex;align-items:center;gap:8px;opacity:.5;filter:grayscale(1);cursor:default;transition:opacity .25s ease,transform .25s ease,filter .25s ease}
.hero__logo:hover{opacity:1;filter:none;transform:scale(1.05)}
.hero__logo img{width:26px;height:26px;object-fit:contain;flex:none}
.hero__logo span{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1}
@media (prefers-reduced-motion:reduce){.hero__logos-track{animation:none}}
@media (prefers-reduced-transparency:reduce){.hero__trusted{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.96)}}
/* entrance as the reference: 0.8s fade and slide-up, staggered by --d */
.hero--v5 .hero__inner .r{--dur:.8s;transform:translate3d(0,20px,0)}
.hero--v5 .hero__inner .r.is-in{transform:none}
@media (max-width:1023px){
  .hero--v5{padding-bottom:56px}
  .hero__panel{max-width:560px}
  .hero--v5 .hero__lede{display:block}
}
@media (max-width:767px){
  .hero--v5 .hero__lede{display:none}
  .hero__panel .tile{padding:7px 5px 6px}
  .hero__panel .tile--ring{gap:4px}
  .hero__panel .tile--ring svg{width:24px;height:24px}
  .hero__panel .tile__ring b{font-size:11px}
  .hero__panel .tile__ring small{font-size:7.5px}
}
@media (min-width:1024px){
  .hero--v5{padding-top:clamp(96px,9vw,120px);padding-bottom:clamp(60px,6vw,96px)}
  .hero--v5 .hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
  .hero--v5 .hero__h1{font-size:clamp(40px,3.4vw,54px)}
  .hero__panel{margin-top:12px}
}

/* the screen */
.hero__stagewrap{position:relative;z-index:2;width:100%;max-width:1000px;margin:clamp(40px,7vw,76px) auto 0;padding-inline:var(--gutter);will-change:transform}
.hero__stage{position:relative;width:100%;margin:0 auto}
.r--stage{transform:translate3d(0,48px,0) scale(.98)}
.r--stage.is-in{transform:none}
.shell{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);min-height:440px;border-radius:18px 18px 0 0;overflow:hidden;color:#fff;text-align:left;
  background:rgba(26,14,46,.72);border:1px solid rgba(255,255,255,.16);border-bottom:0;box-shadow:0 30px 80px rgba(70,28,160,.22);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  -webkit-mask-image:linear-gradient(#000 62%,transparent 100%);mask-image:linear-gradient(#000 62%,transparent 100%)}
.shell__side{display:flex;flex-direction:column;gap:4px;padding:18px 10px;border-right:1px solid rgba(255,255,255,.08)}
.shell__search{width:36px;height:36px;display:grid;place-items:center;color:rgba(255,255,255,.6);margin-bottom:8px}
.shell__search svg{width:16px;height:16px}
.shell__brand{display:none;height:16px;width:60px;border-radius:5px;background:rgba(255,255,255,.14);margin:8px 0 18px 4px}
.shell__nav{position:relative;display:flex;align-items:center;gap:10px;height:34px;padding:0 8px;border-radius:8px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.72);letter-spacing:-.005em;white-space:nowrap;transition:color .4s var(--ease-out-2),background .4s var(--ease-out-2)}
.shell__nav svg{width:16px;height:16px;flex:none;opacity:.85}
.shell__nav span{display:none}
.shell__nav.is-active{color:#fff;background:rgba(255,255,255,.08)}
.shell__main{position:relative;padding:10px 10px 0 10px;min-width:0}
.pane{position:relative;height:100%;min-height:420px;border-radius:14px;overflow:hidden;display:grid;place-items:center;padding:40px 18px 46px}
.pane__bg{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease-in-out;
  background:
    linear-gradient(112deg,var(--g1) 0%,var(--g2) 30%,var(--g3) 58%,var(--g4) 100%);
  background-size:260% 260%;animation:waveMove 18s ease-in-out infinite alternate}
.pane__bg::before{content:"";position:absolute;inset:-20%;background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.6) 46%,rgba(255,255,255,.1) 52%,transparent 66%);
  background-size:220% 220%;animation:waveStreak 11s ease-in-out infinite alternate;mix-blend-mode:screen;filter:blur(10px)}
.pane__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 100%,rgba(0,0,0,.35),transparent 70%)}
.pane__bg.is-on{opacity:1}
@keyframes waveMove{from{background-position:0% 30%}to{background-position:100% 70%}}
@keyframes waveStreak{from{background-position:0% 0%;transform:rotate(-4deg)}to{background-position:100% 100%;transform:rotate(4deg)}}
.pane__gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
.pane::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 60% at 50% 45%,rgba(20,8,40,.22),transparent 70%),linear-gradient(180deg,transparent 55%,rgba(20,8,40,.35))}
.pane__center{z-index:1}
.pane__gl.is-on{opacity:1}
.pane.has-gl .pane__bg{opacity:0 !important}
.pane__center{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:460px;width:100%}
/* the sidebar timer under the active item (Fora's feature-tab progress bar) */
.shell__nav.is-active::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:2px;background:rgba(255,255,255,.45);transform-origin:left;animation:navTimer 3.4s linear forwards}
@keyframes navTimer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* infographic tiles */
.pane__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:460px;margin-top:16px}
.tile{position:relative;min-width:0;padding:10px 10px 9px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left;color:#fff;overflow:hidden;
  opacity:0;transform:translateY(10px);animation:tileIn .7s var(--ease-out-2) forwards;animation-delay:calc(var(--i,0) * 90ms + 120ms)}
@keyframes tileIn{to{opacity:1;transform:none}}
.tile__l{display:block;font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.tile__v{display:block;margin-top:3px;font-size:14px;font-weight:700;letter-spacing:-.02em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile__bars{display:flex;align-items:flex-end;gap:3px;height:26px;margin-top:8px}
.tile__bars i{flex:1;border-radius:2px 2px 1px 1px;background:rgba(255,255,255,.55);height:var(--h,40%);transform-origin:bottom;animation:barUp .8s var(--ease-out-2) both;animation-delay:calc(var(--k,0) * 60ms + 300ms)}
.tile__bars i:last-child{background:#fff}
@keyframes barUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.tile__logos{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tile__logos span{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#1B1030}
.tile__logos svg{width:14px;height:14px}
.tile--ring{display:flex;align-items:center;gap:8px}
.tile--ring svg{width:44px;height:44px;flex:none;transform:rotate(-90deg)}
.ring__bg{fill:none;stroke:rgba(255,255,255,.25);stroke-width:4}
.ring__fg{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:calc(113 - 113 * var(--p,0));transition:stroke-dashoffset 1.1s var(--ease-out-2) .3s}
.tile__ring{display:flex;flex-direction:column;min-width:0}
.tile__ring b{font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.tile__ring small{font-size:9.5px;color:rgba(255,255,255,.8);line-height:1.2}
.tile--ring.no-ring svg{display:none}
@media (max-width:767px){.pane__bio{display:none}.pane__tiles{gap:6px}.tile{padding:8px 7px 7px}.tile__l{font-size:8.5px;letter-spacing:.04em}.tile__v{font-size:12px}.tile__ring b{font-size:12.5px}.tile__ring small{font-size:8.5px}.tile--ring{gap:6px}.tile--ring svg{width:32px;height:32px}.tile__logos{gap:4px}.tile__logos span{width:19px;height:19px;border-radius:6px}.tile__logos svg{width:11px;height:11px}.tile__bars{height:20px}}
.pane__avatar{width:38px;height:38px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-size:15px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.pane__name{margin-top:14px;font-size:17px;font-weight:600;letter-spacing:-.015em;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.pane__meta{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.25)}
.pane__faces{display:flex}
.pane__faces i{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(0,0,0,.35);margin-left:-6px;background:var(--c)}
.pane__faces i:first-child{margin-left:0}
.pane__pill{margin-top:14px;width:100%;max-width:420px;height:44px;border-radius:999px;background:rgba(255,255,255,.86);color:#111;display:grid;place-items:center;font-size:14px;font-weight:600;letter-spacing:-.01em}
.pane__bio{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.9);text-align:left;max-width:420px;text-shadow:0 1px 10px rgba(0,0,0,.3)}

@media (min-width:768px){
  .shell{grid-template-columns:230px minmax(0,1fr);min-height:520px}
  .shell__side{padding:22px 16px}
  .shell__brand{display:block}
  .shell__search{position:absolute;left:200px;top:20px;margin:0}
  .shell__nav{padding:0 10px}
  .shell__nav span{display:inline}
  .pane{min-height:500px;padding:44px 40px 56px}
}
@media (min-width:1024px){
  .hero--v5{padding-top:clamp(96px,9vw,120px)}
  .hero--v5 .hero__h1{font-size:clamp(40px,4.1vw,62px)}
  .shell{min-height:560px}
}
@media (max-width:767px){.hero--v5 .hero__lede{display:none}.hero--v5 .hero__cta{margin-top:22px}}
@media (prefers-reduced-motion:reduce){.pane__bg,.pane__bg::before{animation:none}.hill{transition:none;--hy:0px}}

/* =========================================================
   3b · Trusted by: the lukacho Marquee component, in CSS
   (full width · overflow hidden · py-5 · track flex w-max, logos duplicated once ·
    animation marquee var(--duration,30s) linear infinite → translateX(-50%) ·
    item mx-[4rem] · logo h-[28px] w-auto, 140px wide on phone)
   ========================================================= */
.trusted{position:relative;z-index:2;width:100%;background:transparent;color:var(--ink);padding:clamp(8px,1.5vw,20px) 0 clamp(28px,3.5vw,56px);text-align:center;overflow:hidden}
.trusted__label{margin:0 0 clamp(10px,1.5vw,18px);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-subtle)}
.mq{position:relative;display:flex;width:100%;max-width:var(--wrap);margin:0 auto;padding:12px var(--gutter);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq__track{display:flex;width:max-content;animation:marquee var(--duration,30s) linear infinite;will-change:transform}
.mq__item{position:relative;height:100%;width:fit-content;margin:0 4rem;display:flex;align-items:center;justify-content:flex-start;flex:none}
.mq__item img{display:block;height:38px;width:auto;max-width:190px;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.9}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (max-width:639px){.mq__item{margin:0 2rem}.mq__item img{height:30px;max-width:140px}}
@media (prefers-reduced-motion:reduce){.mq__track{animation:none}}

/* Shopify card entrance: fade with a soft ease-out-back settle, 75ms stagger set by JS */
.why-card.r,.svc.r,.tcard.r,.pcard.r,.case.r,.tstm__card.r,.hiw__card.r{
  transform:translate3d(0,18px,0) scale(.94);
  transition:opacity .52s cubic-bezier(.25,.46,.45,.94),transform .9s cubic-bezier(.34,1.56,.64,1);transition-delay:var(--d,0ms)}
.why-card.r.is-in,.svc.r.is-in,.tcard.r.is-in,.pcard.r.is-in,.case.r.is-in,.tstm__card.r.is-in,.hiw__card.r.is-in{transform:none}
.why-card__visual,.svc__deck,.tcard__stage{transition:opacity .3s ease-out}

@media (prefers-reduced-motion:reduce){.lc{transition:none}}

/* =========================================================
   9 · Footer v2: the CodeRabbit layout, 77 Media colours
   ========================================================= */
.footer--v2{position:relative;background:#0A011C;color:#CCC5E0;border-top:1px solid rgba(255,255,255,.08);padding:clamp(44px,6vw,80px) 0 26px;overflow:hidden}
.footer__head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:clamp(34px,4vw,56px)}
.footer__headr{display:flex;align-items:center;gap:18px}
.footer__loc{font-size:13px;color:#8F86A6}
.footer--v2 .footer__social{display:flex;gap:10px;margin:0}
.footer__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 24px}
.footer--v2 .footer__ct{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#B999FF;font-weight:700;margin:0 0 16px}
.footer--v2 .footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.footer--v2 .footer__col a{color:#CCC5E0;text-decoration:none;font-size:15px;transition:color .25s}
.footer--v2 .footer__col a:hover{color:#fff;text-decoration:underline dotted;text-underline-offset:.3em}
.footer--v2 .footer__addr{font-style:normal;font-size:15px;line-height:1.5;color:#CCC5E0;margin:0 0 14px}
.footer--v2 .footer__btns{display:flex;flex-wrap:wrap;gap:8px}
.footer__col--nl .nl__form{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.footer__col--nl .nl__input{flex:1 1 170px;min-height:44px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;padding:0 14px;font:inherit;font-size:14px}
.footer__col--nl .nl__input::placeholder{color:#8F86A6}
.footer__col--nl .nl__btn{min-height:44px;padding:0 16px;border-radius:10px;background:#fff;color:#0A011C;font-size:14px}
.footer__col--nl .nl__ok{margin:10px 0 0;font-size:13px;color:#7CF2B4}
.footer__nlnote{font-size:12.5px;line-height:1.5;color:#8F86A6;margin:12px 0 0}
.footer__mark{margin-top:clamp(44px,7vw,96px);font-size:clamp(78px,19.2vw,282px);font-weight:800;letter-spacing:-.055em;line-height:.82;text-align:left;color:transparent;
  -webkit-text-stroke:1.5px rgba(158,118,242,.9);white-space:nowrap;overflow:hidden;user-select:none;
  -webkit-mask-image:linear-gradient(180deg,#000 25%,rgba(0,0,0,.12) 100%);mask-image:linear-gradient(180deg,#000 25%,rgba(0,0,0,.12) 100%)}
.footer--v2 .footer__bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.08);padding-top:22px;margin-top:26px;font-size:13px;color:#8F86A6}
.footer--v2 .footer__legal{display:flex;gap:18px;flex-wrap:wrap}
.footer--v2 .footer__legal a{color:#CCC5E0;text-decoration:underline dotted;text-underline-offset:.3em;font-size:13px}
@media (min-width:900px){.footer__grid{grid-template-columns:1fr 1fr 1.1fr 1.5fr;gap:40px 32px}}
@media (max-width:640px){.footer__head{flex-direction:column;align-items:flex-start}.footer__mark{-webkit-text-stroke-width:1px}}

/* =========================================================
   10 · Deep mode (reversible: remove class "deep" from <body>)
   One fixed sky behind the whole page; every section is a
   translucent sheet that slides over it and recedes as it leaves.
   ========================================================= */
.deep .deepbg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#C6B3F0 0%,#D6C5F4 35%,#EEDCF0 62%,#DCC6EE 100%)}
.deep .deepbg__glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.8;will-change:transform;animation:deepDrift var(--dd,42s) ease-in-out infinite alternate}
.deep .deepbg__glow--a{top:6%;left:-12%;width:62vw;height:62vw;background:rgba(255,216,234,.95);--dd:44s}
.deep .deepbg__glow--b{top:38%;right:-18%;width:58vw;height:58vw;background:rgba(158,118,242,.42);--dd:52s;animation-delay:-20s}
.deep .deepbg__glow--c{bottom:-24%;left:16%;width:74vw;height:52vw;background:rgba(255,238,246,.95);--dd:48s;animation-delay:-9s}
@keyframes deepDrift{from{transform:translate3d(-4%,-3%,0) scale(1)}to{transform:translate3d(5%,6%,0) scale(1.12)}}
.deep main{position:relative;z-index:1}
.deep .skyzone,.deep .hero--v5,.deep .flowzone{background:transparent}
.deep .flowbg{display:none}
.deep .section,.deep .trusted{position:relative;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  border:1px solid rgba(255,255,255,.9);border-radius:clamp(22px,3vw,40px);margin:0 clamp(10px,2vw,28px) clamp(14px,2vw,28px);
  box-shadow:0 30px 80px rgba(60,20,140,.10);transform-origin:50% 0;will-change:transform,opacity}
.deep .section.why{background:rgba(255,255,255,.8)}
.deep .trusted{padding-inline:0}
.deep .footer{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.deep .deepbg__glow{animation:none}.deep .section,.deep .trusted{transform:none !important;opacity:1 !important}}

/* =========================================================
   Testimonials (6 Sep 2026), after 21st.dev testimonial-card: a sticky left column (badge, heading,
   four stat cards, two buttons) and, on the right, the owners' cards stacking under each other as
   the page scrolls (each card sticky, 24px lower than the one before).
   ========================================================= */
.section.quotes{overflow:visible}
.tst{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.tst__left{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.tst__badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:1px solid var(--hair);background:rgba(10,1,28,.04);padding:5px 12px;font-size:14px;color:var(--text-subtle)}
.tst__badge i{width:8px;height:8px;border-radius:50%;background:#22C4A0}
.tst__left .h2{margin:0}
.tst__sub{margin:0;font-size:18px;line-height:1.55;color:var(--text-subtle);max-width:44ch}
.tst__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;margin-top:6px}
.tst__stat{border:1px solid var(--hair);background:rgba(10,1,28,.03);border-radius:14px;padding:18px 14px;text-align:center}
.tst__n{margin:0;font-size:clamp(26px,2.4vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tst__l{margin:6px 0 0;font-size:14px;color:var(--text-subtle)}
.tst__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.tst__cards{display:flex;flex-direction:column;gap:18px;min-height:calc(100vh + 300px)}
.tst__card{position:sticky;top:calc(104px + var(--i,0) * 24px);background:#fff;border:1px solid var(--hair);border-radius:18px;padding:24px;box-shadow:0 12px 40px rgba(10,1,28,.08)}
.tst__head{display:flex;align-items:center;gap:16px}
.tst__av{width:56px;height:56px;flex:none;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;letter-spacing:-.02em}
.tst__name{margin:0;font-size:18px;font-weight:600;color:var(--ink)}
.tst__role{margin:2px 0 0;font-size:14px;color:var(--text-subtle)}
.tst__rating{display:flex;align-items:center;gap:8px;margin:16px 0}
.tst__rating b{font-size:16px;color:var(--ink)}
.tst__stars{display:flex;gap:2px;color:#F5B301}
.tst__quote{margin:0;font-size:16.5px;line-height:1.6;color:var(--text-subtle)}
@media (min-width:1024px){
  .tst{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tst__left{position:sticky;top:104px}
}
@media (max-width:520px){
  .tst__stats{gap:10px}
  .tst__stat{padding:14px 10px}
  .tst__card{padding:20px}
}

/* =========================================================
   How it works (6 Sep 2026): 21st.dev mac-book-neo-hero, its CSS verbatim except for two adaptations the page
   needs: the stage is sticky inside a 600vh track (the reference fixes it to a whole-page spacer), the loader sits
   inside the stage, and the title block clears the site's own nav.
   ========================================================= */
.fsh-root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#1d1d1f;background:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,system-ui,Arial,sans-serif;position:relative;height:600vh;margin-top:clamp(-140px,-14vw,-60px)}
.approach .section-head{margin-bottom:0;position:relative;z-index:2}
.fsh-stage{z-index:1;background:transparent;width:100%;height:100vh;position:sticky;top:0;overflow:hidden}
.fsh-loader{z-index:100;background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:1.25rem;transition:opacity .5s;display:flex;position:absolute;inset:0}
.fsh-loader-done{pointer-events:none;opacity:0}
.fsh-loader-text{letter-spacing:.08em;text-transform:uppercase;color:#6e6e73;font-size:.78rem}
.fsh-loader-track{background:#e8e8ed;border-radius:2px;width:min(220px,60vw);height:2px;overflow:hidden}
.fsh-loader-fill{background:#1d1d1f;width:0;height:100%;transition:width .15s ease-out;display:block}
.fsh-canvas-wrap{z-index:1;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}
.fsh-canvas{object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:auto;max-width:100%;height:106vh;transform:translateY(-4vh);transform-origin:50% 50%;display:block}
.fsh-copy{text-align:center;z-index:3;pointer-events:none;padding-top:clamp(6.5rem,13vh,9rem);position:absolute;inset:0 0 auto}
.fsh-title{letter-spacing:-.045em;color:#1d1d1f;margin:1.1rem 0 0;font-size:clamp(3rem,9vw,7rem);font-weight:600;line-height:.95;font-family:inherit}
.fsh-title-dark{-webkit-text-fill-color:transparent;color:#0000;background:linear-gradient(#1d1d1f,#1d1d1f 55%,#5a5a64);-webkit-background-clip:text;background-clip:text}
.fsh-title-rainbow{-webkit-text-fill-color:transparent;color:#0000;background:linear-gradient(120deg,#ff8a8a,#ffd166 25%,#8ad5ff 55%,#c89bff 80%,#ff8a8a) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;animation:8s linear infinite fsh-shimmer}
.fsh-sub{color:#6e6e73;max-width:38ch;margin:1rem auto 0;font-size:clamp(1rem,1.4vw,1.25rem);font-weight:400;transition:opacity .3s,transform .3s}
.fsh-sub-hidden{opacity:0;transform:translateY(-6px)}
.fsh-cards{z-index:5;pointer-events:none;position:absolute;inset:0}
.fsh-card{--c:#1d1d1f;opacity:0;filter:blur(8px);will-change:transform,opacity;width:min(380px,34vw);transition:opacity .52s cubic-bezier(.2,.7,.2,1),transform .62s cubic-bezier(.2,.8,.2,1),filter .52s;position:absolute;bottom:clamp(1.5rem,5vh,3rem);left:clamp(1.25rem,3.5vw,3rem);transform:translateY(28px) scale(.96)}
.fsh-card-active{opacity:1;filter:blur(0);transition-delay:80ms;transform:translateY(0) scale(1)}
.fsh-card-prev{opacity:0;filter:blur(8px);transform:translateY(-28px) scale(.96)}
@media (max-width:640px){.fsh-card{width:auto;bottom:1.25rem;left:1rem;right:1rem}}
.fsh-card-inner{isolation:isolate;background:#fff;border-radius:24px;padding:1.75rem 1.75rem 1.5rem;position:relative;overflow:hidden;box-shadow:0 1px 2px #14141e0a,0 12px 28px -10px #14141e1a,0 40px 80px -30px #14141e2e}
.fsh-card-glow{aspect-ratio:1;background:radial-gradient(circle,var(--c),transparent 70%);filter:blur(30px);opacity:.45;z-index:-1;pointer-events:none;border-radius:50%;width:70%;position:absolute;top:-40%;right:-40%}
.fsh-card-head{justify-content:space-between;align-items:center;margin-bottom:1.25rem;display:flex}
.fsh-card-num{letter-spacing:.12em;color:#6e6e73;font-variant-numeric:tabular-nums;font-size:.78rem;font-weight:600}
.fsh-card-num strong{color:#1d1d1f;font-weight:700}
.fsh-card-icon{background:var(--c);color:#fff;width:38px;height:38px;box-shadow:0 6px 14px -6px var(--c),inset 0 1px #ffffff40;border-radius:12px;place-items:center;font-size:1.05rem;display:grid}
.fsh-card-title{letter-spacing:-.022em;color:#1d1d1f;font-size:1.45rem;font-weight:600;line-height:1.12;margin:0;font-family:inherit}
.fsh-card-desc{color:#6e6e73;margin:.6rem 0 0;font-size:.96rem;line-height:1.55}
.fsh-card-foot{align-items:center;gap:.85rem;margin-top:1.4rem;display:flex}
.fsh-ticks{flex:1;gap:5px;display:flex}
.fsh-tick{background:#00000012;border-radius:3px;flex:1;height:3px;position:relative;overflow:hidden;display:block}
.fsh-tick>span{background:var(--c);transform-origin:0;position:absolute;inset:0;transform:scaleX(0);display:block}
.fsh-card-label{white-space:nowrap;letter-spacing:.08em;text-transform:uppercase;color:#6e6e73;font-variant-numeric:tabular-nums;font-size:.72rem}
.fsh-progress{z-index:4;background:#e8e8ed;height:2px;position:absolute;bottom:0;left:0;right:0}
.fsh-progress-fill{background:linear-gradient(90deg,#ff8a8a,#ffd166,#8ad5ff,#c89bff);width:0;height:100%;transition:width 75ms linear;display:block}
@keyframes fsh-shimmer{0%{background-position:0%}to{background-position:200%}}
@media (prefers-reduced-motion:reduce){.fsh-title-rainbow{animation:none}}
.fsh-root.is-static{height:auto}
.fsh-root.is-static .fsh-stage{position:static;height:auto;overflow:visible;padding-top:16px}
.fsh-root.is-static .fsh-canvas-wrap,.fsh-root.is-static .fsh-copy{position:static;display:block}
.fsh-root.is-static .fsh-canvas{height:auto;max-height:60vh;margin:0 auto}
.fsh-root.is-static .fsh-cards{position:static;display:grid;gap:14px;padding:0 var(--gutter) 24px}
.fsh-root.is-static .fsh-card{position:static;opacity:1;filter:none;transform:none;width:auto}
.fsh-root.is-static .fsh-loader,.fsh-root.is-static .fsh-progress{display:none}

/* Service cards (6 Sep 2026): live fans the three tiles on hover; the mobile pass (commit 999d8ff) fanned them on
   scroll-in instead, which on a pointer device leaves hover nothing to do. Pointer devices rest the tiles in live's
   folded pose and fan on hover; touch devices keep the scroll-in fan. */
@media (hover:hover){
  .svc.is-seen .svc__tile--3{transform:rotate(6deg) translate(16px,5px);box-shadow:0 8px 20px rgba(10,1,28,.10)}
  .svc.is-seen .svc__tile--2{transform:rotate(-5deg) translate(-16px,3px);box-shadow:0 9px 22px rgba(10,1,28,.12)}
  .svc.is-seen .svc__tile--1{transform:rotate(-1deg);box-shadow:0 14px 30px rgba(10,1,28,.16)}
  .svc.is-seen .svc__t::before{transform:scaleX(0)}
  .svc.is-seen:hover .svc__tile--3{transform:rotate(11deg) translate(52px,-5px);box-shadow:0 16px 32px rgba(10,1,28,.16)}
  .svc.is-seen:hover .svc__tile--2{transform:rotate(-10deg) translate(-52px,-3px);box-shadow:0 16px 32px rgba(10,1,28,.16)}
  .svc.is-seen:hover .svc__tile--1{transform:rotate(0) translateY(-10px) scale(1.03);box-shadow:0 22px 40px rgba(10,1,28,.20)}
  .svc.is-seen:hover .svc__t::before{transform:scaleX(1)}
}

/* Our screen on the photographed laptops (6 Sep 2026): a 1000x625 surface carrying the four step visuals, mapped by a
   perspective matrix onto the display quad of the current frame (assets/v2/hiw-quads.js), sitting above the frame and
   below the cards; hidden on frames where no lid is open. */
.fsh-screen{position:absolute;left:0;top:0;width:1000px;height:625px;transform-origin:0 0;z-index:2;opacity:0;transition:opacity .08s linear;pointer-events:none;will-change:transform;backface-visibility:hidden}
.fsh-screen.is-on{opacity:1}
.fsh-screen__inner{position:absolute;inset:0;background:#fff;overflow:hidden;border-radius:12px;font-family:var(--font-sans)}
.fsh-screen__bar{position:absolute;top:0;left:0;right:0;height:44px;display:flex;align-items:center;gap:12px;padding:0 22px;background:#F4F0FB;border-bottom:1px solid var(--hair);font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-subtle);z-index:2}
.fsh-screen__bar i{width:10px;height:10px;border-radius:50%;background:var(--c,var(--purple));flex:none}
.fsh-screen .hiw__panel{position:absolute;inset:0;display:grid;place-items:center;padding:60px 40px 30px;opacity:0;transform:scale(.97);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.fsh-screen .hiw__panel.is-active{opacity:1;transform:none}
.fsh-screen .hiw__card{transform:scale(1.9);transform-origin:center}
.fsh-root.is-static .fsh-screen{display:none}


/* =========================================================
   10 · Services stack: fora.so "What you get" (sticky cards, copy left, the hero screen right)
   ========================================================= */
.sstk{position:relative;display:flex;flex-direction:column;gap:48px;max-width:1180px;margin-inline:auto}
.sstk__card{position:sticky;top:112px;height:clamp(520px,calc(100vh - 168px),620px);z-index:1}
.sstk__wrap{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#fff;border:1px solid var(--hair);border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(40,18,90,.10);will-change:transform}
.sstk__copy{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(28px,3.4vw,52px)}
.sstk .svc__tag{margin-top:0}
.sstk .svc__t{margin:18px 0 0;font-size:clamp(24px,2.4vw,34px);line-height:1.12}
.sstk .svc__d{margin:14px 0 0;font-size:clamp(15px,1.15vw,17px);color:var(--text-muted);max-width:46ch}
.sstk .svc__do{flex:0 0 auto;margin-top:18px}
.sstk .svc__do li{font-size:15px}
.sstk .svc__stats{margin-top:22px}
.sstk__link{margin-top:22px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:700;color:var(--purple-deep);text-decoration:none}
.sstk__link svg{width:15px;height:15px;transition:transform .35s var(--ease-out-2)}
.sstk__link:hover svg{transform:translateX(4px)}
.sstk__media{position:relative;min-width:0;padding:14px 14px 14px 0;transform-origin:center}
/* 9 Sep 2026 · THE CARD NITIN PHOTOGRAPHED. This rule used to set `mask-image:none`,
   to drop the fade the base .shell has. But the mask is also the only thing that makes
   iOS Safari clip a COMPOSITED child: `overflow:hidden` plus `border-radius` does not,
   which is the long-standing bug already in WORKING-RULES. The workspace pane is 518px
   inside a 328px shell — it is meant to crop like a window — and the deck and stat tiles
   inside it carry transforms, so on his phone they printed straight over the card's own
   copy while Chrome clipped them and showed nothing wrong.
   A solid mask clips exactly like the fade one and looks like nothing at all. */
.sstk__media .shell{height:100%;min-height:0;grid-template-columns:52px minmax(0,1fr);border-radius:18px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);box-shadow:0 18px 50px rgba(40,18,90,.22)}
.sstk__media .shell__side{padding:14px 8px}
.sstk__media .shell__brand{display:none}
.sstk__media .shell__search{position:static;margin:0 0 6px}
.sstk__media .shell__nav{padding:0 8px}
.sstk__media .shell__nav span{display:none}
.sstk__media .pane{height:100%;min-height:0;padding:28px 18px 30px}
.sstk__media .pane__bio{display:none}
.sstk__media .pane__tiles{gap:6px;margin-top:12px}
.sstk__media .pane__pill{height:38px;font-size:13px;margin-top:12px}
.sstk__media .tile{padding:8px 6px 7px}
.sstk__media .tile__l{font-size:8.5px;letter-spacing:.04em}
.sstk__media .tile__v{font-size:12px}
.sstk__media .tile__ring b{font-size:12px;letter-spacing:-.03em}
.sstk__media .tile__ring small{font-size:8px}
.sstk__media .tile--ring{gap:5px}
.sstk__media .tile--ring svg{width:28px;height:28px}
.sstk__media .tile__logos{gap:4px}
.sstk__media .tile__logos span{width:19px;height:19px;border-radius:6px}
.sstk__media .tile__logos svg{width:11px;height:11px}
.sstk__media .tile__bars{height:20px}
@media (min-width:1100px){
  .sstk__media .shell{grid-template-columns:150px minmax(0,1fr)}
  .sstk__media .shell__side{padding:16px 10px}
  .sstk__media .shell__search{width:100%;justify-content:start;padding-left:10px;color:rgba(255,255,255,.5)}
  .sstk__media .shell__nav{padding:0 10px}
  .sstk__media .shell__nav span{display:inline}
}
@media (max-width:767px){
  .sstk{gap:16px}
  .sstk__card{position:relative;top:auto;height:auto;z-index:auto}
  .sstk__wrap{grid-template-columns:minmax(0,1fr)}
  .sstk__media{order:-1;height:340px;padding:12px 12px 0}
  .sstk__copy{padding:22px 20px 26px}
}
@media (prefers-reduced-motion:reduce){.sstk__wrap,.sstk__media{transform:none !important;opacity:1 !important}}