/* ==========================================================================
   MŌ — MASTER STYLESHEET                                   assets/style.css
   One system for every page. Same brand, same language, different composition.

   1.  Fonts
   2.  Design tokens            ← change colours / type / spacing HERE
   3.  Base + reset
   4.  Typography system
   5.  Layout (wrap, sections, tones, blue texture)
   6.  Components (nav, buttons, links, eyebrow, dot, rules)
   7.  Compositions — HOME (hero, logo strip, paths, testimonials, the Mō way, roots, meet, closer, footer)
   7b. Compositions — ABOUT (hero, credentials, story, learning curve, journey, impact, close)
   7c. Compositions — BUSINESS (stop/start hero, ground, engagements, signature, lens, booking builder)
   7d. Compositions — PEOPLE (still-water hero, the question, offers, work-on, experience, gentle conversation starter)
   7e. Compositions — ON STAGE (muted video hero, format rows, topics marquee, event inquiry)
   7f. Compositions — ROOTS METHOD (self-drawing roots, the idea, four steps, the lens, branches, belief)
   7g. Compositions — CONTACT (24-hour dial, message composer, direct channels)
   8.  Responsive
   9.  Motion + accessibility
   ========================================================================== */


/* 1. FONTS ================================================================
   Avenir = voice. AC Safe = small hand-made accent labels.
   Drop licensed files into assets/fonts/ (see README there).
   Until then: installed Avenir → Avenir Next → Nunito Sans → Montserrat…  */

@font-face{font-family:"Avenir Mo";font-weight:300;font-style:normal;font-display:swap;
  src:local("Avenir Light"),local("Avenir-Light"),
      url("fonts/Avenir-Light.woff2") format("woff2"),url("fonts/Avenir-Light.woff") format("woff");}
@font-face{font-family:"Avenir Mo";font-weight:400;font-style:normal;font-display:swap;
  src:local("Avenir Book"),local("Avenir-Book"),local("AvenirNext-Regular"),
      url("fonts/Avenir-Book.woff2") format("woff2"),url("fonts/Avenir-Book.woff") format("woff");}
@font-face{font-family:"Avenir Mo";font-weight:500;font-style:normal;font-display:swap;
  src:local("Avenir Medium"),local("Avenir-Medium"),local("AvenirNext-Medium"),
      url("fonts/Avenir-Medium.woff2") format("woff2"),url("fonts/Avenir-Medium.woff") format("woff");}
@font-face{font-family:"Avenir Mo";font-weight:700;font-style:normal;font-display:swap;
  src:local("AvenirNext-Bold"),local("Avenir Heavy"),local("Avenir-Heavy"),
      url("fonts/Avenir-Heavy.woff2") format("woff2"),url("fonts/Avenir-Heavy.woff") format("woff");}
@font-face{font-family:"Avenir Mo";font-weight:800;font-style:normal;font-display:swap;
  src:local("Avenir Heavy"),local("Avenir-Heavy"),local("AvenirNext-Heavy"),
      url("fonts/Avenir-Heavy.woff2") format("woff2"),url("fonts/Avenir-Heavy.woff") format("woff");}
@font-face{font-family:"Avenir Mo";font-weight:900;font-style:normal;font-display:swap;
  src:local("Avenir Black"),local("Avenir-Black"),local("AvenirNext-Heavy"),
      url("fonts/Avenir-Black.woff2") format("woff2"),url("fonts/Avenir-Black.woff") format("woff");}
@font-face{font-family:"AC Safe";font-weight:400;font-style:normal;font-display:swap;
  src:local("AC Safe"),url("fonts/ACSafe.woff2") format("woff2"),url("fonts/ACSafe.woff") format("woff");}


/* 2. DESIGN TOKENS ======================================================== */

:root{
  /* brand colour — official guideline */
  --blue:#0044C3;            /* VIVID BLUE  */
  --ink:#272528;             /* DARK GREY   */
  --grey:#D1D0CB;            /* LIGHT GREY  */
  --paper:#F6F6F6;           /* WHITE GREY  */
  --yellow:#FFD06C;          /* pastel yellow — small accent only (swatch value; the printed hex in the guide is a typo) */

  /* supporting tints (derived, never new hues) */
  --blue-pale:#C9D6F1;       /* the pale circle from the bio deck */
  --blue-20:#CCDAF3;         /* blue ramp: the learning curve deepens step by step */
  --blue-40:#99B5E7;
  --blue-60:#6691DB;
  --blue-80:#336ACF;
  --night:#050409;           /* the photo's own black — hero background that melts into the stage photo */
  --paper-warm:#E4E3DF;      /* light grey lifted toward white — paper-like section */
  --white:#FFFFFF;

  /* lines */
  --line-ink:rgba(39,37,40,.22);
  --line-light:rgba(246,246,246,.28);

  /* type */
  --font-sans:"Avenir Mo","Avenir Next","Avenir","Nunito Sans","Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-accent:"AC Safe",var(--font-sans);

  --fs-body:1.0625rem;                             /* 17 */
  --fs-lead:clamp(1.15rem,1.55vw,1.45rem);
  --fs-label:.75rem;                               /* 12 */
  --fs-hero:clamp(2.4rem,9vw,9rem);
  --fs-xl:clamp(2.1rem,5.4vw,5.6rem);              /* big statements */
  --fs-l:clamp(1.9rem,4.3vw,4.3rem);               /* section statements */
  --fs-title:clamp(2rem,4.2vw,4.1rem);             /* path titles */
  --fs-m:clamp(1.5rem,3.1vw,3.1rem);               /* section headings */

  /* spacing + layout */
  --gutter:clamp(20px,4.6vw,72px);
  --maxw:1360px;
  --col-gap:clamp(16px,2vw,32px);
  --section-y:clamp(96px,12vw,176px);
  --nav-h:84px;

  /* motion */
  --ease:cubic-bezier(.2,.7,.1,1);
}


/* 3. BASE + RESET ========================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
dl,dd{margin:0}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--blue);color:var(--white)}


/* 4. TYPOGRAPHY SYSTEM ==================================================== */

/* Display voice: Avenir Black, capitals, tight. Every headline uses this. */
h1,h2,h3,.display{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.035em;
  line-height:.94;
  text-wrap:balance;
}
.display--xl{font-size:var(--fs-xl)}
.display--l{font-size:var(--fs-l)}
.display--m{font-size:var(--fs-m)}

.lead{font-size:var(--fs-lead);line-height:1.5;font-weight:700}
.body{font-size:var(--fs-body);line-height:1.6}
.body--soft{opacity:.82}

/* micro label — AC Safe accent, tracked, small */
.label{
  font-family:var(--font-accent);
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1.4;
}


/* 5. LAYOUT =============================================================== */

.wrap{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}

.section{
  position:relative;
  padding-block:var(--section-y);
  overflow:hidden;overflow:clip;
  isolation:isolate;
}

/* tones — set colour + background together so text always has contrast */
.is-paper{background:var(--paper);color:var(--ink)}
.is-warm {background:var(--paper-warm);color:var(--ink)}
.is-ink  {background:var(--ink);color:var(--paper)}
.is-night{background:var(--night);color:var(--white)}
.is-blue {
  background:var(--blue) url("img/blue-texture.jpg") center/cover no-repeat;
  color:var(--white);
}

/* 12-col helper for editorial compositions */
.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}


/* 6. COMPONENTS =========================================================== */

/* — visually hidden, still read by screen readers — */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* — skip link — */
.skip{
  position:fixed;left:16px;top:-80px;z-index:100;
  background:var(--yellow);color:var(--ink);
  padding:12px 18px;font-weight:700;
}
.skip:focus{top:16px}

/* — the yellow full stop: Mō's small signature accent — */
.dot{
  display:inline-block;
  width:.19em;height:.19em;margin-left:.035em;
  border-radius:50%;background:var(--yellow);
  overflow:hidden;text-indent:-99em;white-space:nowrap;   /* keeps the "." for screen readers, shows a circle */
  vertical-align:baseline;
}

/* — Mō wordmark inside a headline: the real logo drawing, sized to the capitals — */
.mo-mark{
  display:inline-block;
  height:.75em;width:auto;aspect-ratio:538 / 292;
  vertical-align:-.02em;
}

/* — arrow glyph (thin, long, like the reference) — */
.arrow{width:34px;height:10px;flex:none;transition:transform .45s var(--ease);overflow:visible}

/* — eyebrow: small tracked label + short rule — */
.eyebrow{
  display:flex;align-items:center;gap:20px;
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
}
.eyebrow::after{content:"";width:clamp(48px,9vw,132px);height:1px;background:currentColor;opacity:.45}

/* — buttons — rectangular, tracked caps, arrow — */
.btn{
  display:inline-flex;align-items:center;gap:20px;
  padding:20px 30px;
  border:1px solid transparent;
  background:var(--white);color:var(--ink);
  font-size:var(--fs-label);
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1;
  transition:background-color .3s,color .3s,border-color .3s;
}
.btn:hover .arrow,.btn:focus-visible .arrow{transform:translateX(9px)}
.btn:hover{background:var(--ink);color:var(--white)}
.btn--blue{background:var(--blue);color:var(--white)}
.btn--blue:hover{background:var(--ink)}
.btn--ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.7)}
.btn--ghost:hover{background:var(--white);color:var(--blue);border-color:var(--white)}

/* — text link: tracked caps, underline, arrow — */
.link{
  display:inline-flex;align-items:center;gap:16px;
  padding-bottom:10px;
  border-bottom:1px solid currentColor;
  font-size:var(--fs-label);
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
}
.link:hover .arrow,.link:focus-visible .arrow{transform:translateX(9px)}

/* — navigation — */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  height:var(--nav-h);
  color:var(--white);
  transition:background-color .35s,color .35s,box-shadow .35s;
}
.nav__inner{
  width:min(100% - 2*var(--gutter),1560px);margin-inline:auto;height:100%;
  display:flex;align-items:center;gap:clamp(32px,5vw,84px);
}
.nav__logo{display:block;width:64px;color:inherit;position:relative;z-index:2}
.nav__logo svg{width:100%;height:auto}
.nav__links{display:flex;gap:clamp(22px,3vw,48px)}
.nav__links a{
  position:relative;display:block;padding-block:8px;
  font-size:.9375rem;font-weight:500;letter-spacing:.005em;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__lang{                                      /* EN / عربي switch */
  position:relative;z-index:2;flex:none;margin-inline-start:auto;
  padding:10px 16px;border:1px solid currentColor;
  font-size:.875rem;font-weight:700;line-height:1;
  transition:opacity .3s;
}
.nav__lang:hover{opacity:.65}
.nav__lang ~ .nav__toggle{margin-left:0;margin-inline-start:-18px}
.nav.is-solid{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--line-ink)}
.nav.is-solid .nav__logo{color:var(--blue)}

.nav--dark{color:var(--ink)}                       /* nav over a light hero */
.nav--dark .nav__logo{color:var(--blue)}

.nav__toggle{display:none;position:relative;z-index:2;width:44px;height:44px;margin-left:auto}
.nav__toggle span{
  position:absolute;left:10px;right:10px;height:2px;background:currentColor;
  transition:transform .4s var(--ease),top .4s var(--ease);
}
.nav__toggle span:nth-child(1){top:16px}
.nav__toggle span:nth-child(2){top:26px}
.nav.is-open .nav__toggle span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav.is-open .nav__toggle span:nth-child(2){top:21px;transform:rotate(-45deg)}


/* 7. COMPOSITIONS — HOME ================================================== */

/* ---- 01 HERO ---------------------------------------------------------- */
.hero{
  min-height:100vh;min-height:100svh;
  display:grid;place-items:center;
  text-align:center;
  padding:calc(var(--nav-h) + 24px) var(--gutter) 72px;
}
.hero__desc{
  font-size:clamp(.875rem,1.15vw,1.0625rem);
  font-weight:500;
  opacity:.92;
  margin-bottom:clamp(22px,3.2vw,40px);
  text-wrap:balance;
}
.hero__title{font-size:var(--fs-hero);line-height:.92;letter-spacing:-.032em;white-space:nowrap}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.05em}
.hero__title .line>span{display:block;transform:translateY(108%);animation:rise 1s var(--ease) forwards}
.hero__title .line:nth-child(1)>span{animation-delay:.12s}
.hero__title .line:nth-child(2)>span{animation-delay:.24s}
.hero__title .line:nth-child(3)>span{animation-delay:.36s}
.hero__benefit{
  max-width:34ch;margin:clamp(20px,2.6vw,30px) auto 0;
  font-size:var(--fs-lead);line-height:1.45;opacity:.92;
}
.hero__cta{margin-top:clamp(36px,5vw,64px);display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.hero__trust{
  margin-top:clamp(20px,2.6vw,28px);
  font-size:.8125rem;font-weight:700;letter-spacing:.04em;opacity:.8;
}
.hero__desc,.hero__benefit,.hero__cta,.hero__trust{opacity:0;animation:fade .9s ease .75s forwards}
.hero__benefit{animation-delay:.85s}
.hero__cta{animation-delay:.95s}
.hero__trust{animation-delay:1.1s}

/* ---- ENTRY GATE (first-visit segmentation) ------------------------------ */
.gate{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(5,4,9,.72);
  backdrop-filter:blur(6px);
}
.gate[hidden]{display:none}
.gate__panel{
  position:relative;
  width:min(100%,560px);
  padding:clamp(32px,4vw,56px);
  background:var(--ink);color:var(--paper);
  border:1px solid rgba(255,255,255,.12);
}
.gate__close{
  position:absolute;top:18px;right:18px;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;line-height:1;color:var(--paper);opacity:.6;
}
.gate__close:hover{opacity:1}
.gate__eyebrow{opacity:.7}
.gate__title{margin-top:16px;font-size:clamp(1.8rem,3.4vw,2.6rem)}
.gate__sub{margin-top:10px;font-size:.9375rem;opacity:.75}
.gate__options{display:grid;gap:12px;margin-top:clamp(28px,3vw,36px)}
.gate__opt{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,24px);
  border:1px solid rgba(255,255,255,.22);
  transition:border-color .25s,background-color .25s;
}
.gate__opt:hover{border-color:var(--yellow);background:rgba(255,255,255,.04)}
.gate__opt-label{display:block;font-size:1.0625rem;font-weight:800}
.gate__opt-sub{display:block;margin-top:4px;font-size:.8125rem;opacity:.68;font-weight:500}
.gate__opt .arrow{flex:none}
.gate__skip{
  display:block;margin:20px auto 0;
  font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.55;
  text-decoration:underline;text-underline-offset:3px;
}
.gate__skip:hover{opacity:.85}
body.gate-open{overflow:hidden}

/* ---- TRUST STATS (quick proof strip) ----------------------------------- */
.trustbar__row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,32px);
  padding-block:clamp(8px,1vw,12px);
}
.tstat{
  padding-right:clamp(16px,2vw,28px);
  border-right:1px solid var(--line-ink);
}
.tstat:last-child{border-right:0}
.tstat__num{
  font-size:clamp(1.9rem,3.4vw,3rem);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--blue);
}
.tstat__num span{font-size:.55em}
.tstat__label{margin-top:8px;font-size:.8125rem;font-weight:600;line-height:1.35;opacity:.78;max-width:16ch}
@media (max-width:760px){
  .trustbar__row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .tstat:nth-child(2){border-right:0}
}

/* ---- COLLABORATIONS & IMPACT — logo strip ----------------------------- */
.proof{
  --logo-h:56px;
  padding-block:clamp(26px,3vw,40px);
  border-bottom:1px solid var(--line-ink);
}
.proof__inner{display:flex;align-items:center;padding-left:var(--gutter)}
.proof__label{
  flex:none;
  padding-right:clamp(20px,2.6vw,40px);
  border-right:1px solid var(--line-ink);
  line-height:1.7;
}
.proof__marquee{
  flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.proof__track{display:flex;width:max-content;animation:proof-scroll 80s linear infinite}
.proof__marquee:hover .proof__track{animation-play-state:paused}
.proof__list{display:flex;align-items:center;flex:none}
.proof__item{flex:none;padding-inline:clamp(26px,3.6vw,56px)}
.proof__item img{
  display:block;max-width:none;width:auto;
  height:calc(var(--logo-h) * var(--k,1));
  filter:grayscale(1) brightness(var(--b,.6));opacity:var(--o,.55);   /* one quiet tone… */
  transition:filter .35s,opacity .35s;
}
.proof__item img:hover{filter:none;opacity:1}          /* …full colour on hover */

@keyframes proof-scroll{to{transform:translateX(-50%)}}

/* ---- 02 THREE PATHS --------------------------------------------------- */
.proof + .paths{padding-top:clamp(72px,9vw,128px)}
.paths__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px 32px;
  padding-bottom:clamp(28px,3.4vw,48px);
}
.paths__title{font-size:var(--fs-l)}

.path{
  position:relative;isolation:isolate;
  display:grid;
  grid-template-columns:6rem minmax(0,1.15fr) minmax(0,1fr) 14.5rem;
  column-gap:clamp(20px,3vw,48px);
  align-items:start;
  padding-block:clamp(30px,3.6vw,54px);
  border-top:1px solid var(--line-ink);
  transition:color .35s;
}
.path:last-child{border-bottom:1px solid var(--line-ink)}
.path::before{                                     /* the blue fill that rises on hover */
  content:"";position:absolute;inset:0 -24px;z-index:-1;     /* fill bleeds past the text edge */
  background:var(--blue);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .6s var(--ease);
}
.path:hover,.path:focus-within{color:var(--white)}
.path:hover::before,.path:focus-within::before{transform:scaleY(1)}

.path__num{
  display:flex;align-items:center;gap:12px;
  padding-top:.9em;
  font-family:var(--font-accent);font-size:var(--fs-label);font-weight:700;letter-spacing:.2em;
}
.path__num::after{content:"";width:28px;height:1px;background:currentColor}
.path__name{font-size:var(--fs-title);transition:transform .6s var(--ease)}
.path:hover .path__name,.path:focus-within .path__name{transform:translateX(14px)}
.path__line{font-size:var(--fs-lead);font-weight:700;line-height:1.35;margin-bottom:14px;padding-top:.25em}
.path__desc{max-width:44ch;opacity:.82}
.path__cta{align-self:end;justify-self:end}
.path__cta::after{content:"";position:absolute;inset:0}   /* whole row is the link */

/* ---- TESTIMONIALS — a line of voices with a playhead: the card in the middle lights up -- */
.voices{padding-block:clamp(72px,9vw,130px)}
.voices__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px}
.voices__title{margin-top:clamp(20px,2.4vw,32px);font-size:var(--fs-xl)}
.voices__ctl{display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.voices__count{font-size:var(--fs-label);font-weight:800;letter-spacing:.22em}
.voices__count span{font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:900;letter-spacing:-.03em;color:var(--blue)}
.voices__toggle{
  padding:12px 18px;border:1px solid var(--ink);
  font-size:var(--fs-label);font-weight:800;letter-spacing:.2em;text-transform:uppercase;line-height:1;
  transition:background-color .3s,color .3s;
}
.voices__toggle:hover{background:var(--ink);color:var(--white)}
.voices__rows{
  position:relative;margin-top:clamp(44px,5vw,72px);
  background:linear-gradient(var(--line-ink),var(--line-ink)) center top / 1px 100% no-repeat;        /* the playhead line */
}
.voices__rows::before{                                                                                /* …and its dot */
  content:"";position:absolute;z-index:2;left:50%;top:-22px;width:10px;height:10px;margin-left:-5px;
  border-radius:50%;background:var(--yellow);
}
.voices__row{
  overflow:hidden;padding-block:20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.voices__track{display:flex;width:max-content;animation:proof-scroll 130s linear infinite}
.voices__row:hover .voices__track,.voices.is-paused .voices__track{animation-play-state:paused}
.voices__list{display:flex;flex:none;align-items:flex-start;gap:clamp(16px,2vw,24px);padding-right:clamp(16px,2vw,24px)}
.tcard{
  --f:0;                                            /* 0 = far from the playhead, 1 = right under it (set by script) */
  position:relative;flex:none;
  width:calc(clamp(300px,30vw,440px) * var(--w,1));
  display:flex;flex-direction:column;gap:22px;
  padding:clamp(24px,2.4vw,36px);
  background:var(--paper);color:var(--ink);border-top:3px solid var(--blue);
  opacity:calc(.5 + var(--f) * .5);
  transform:translateY(calc(var(--f) * -12px)) scale(calc(.94 + var(--f) * .06));
  transition:background-color .7s ease,color .7s ease,border-color .7s ease;
}
.tcard::before{content:"\201C";display:block;height:.5em;font-size:4.4rem;font-weight:900;line-height:.72;color:var(--blue);transition:color .7s ease}
.tcard__quote{font-size:clamp(1.05rem,1.35vw,1.3rem);font-weight:500;line-height:1.45}
.tcard__quote[lang="ar"]{font-size:clamp(1.15rem,1.5vw,1.45rem);line-height:1.7}
.tcard mark{                                        /* the phrase that matters gets underlined as the card reaches the playhead */
  color:inherit;padding-inline:.04em;
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 100% / 0% .14em;
  transition:background-size 1s var(--ease) .2s;
}
.tcard [dir="rtl"] mark,.tcard[dir="rtl"] mark{background-position:100% 100%}
.tcard__tr{padding-top:14px;border-top:1px solid var(--line-ink);font-size:.9375rem;line-height:1.5;opacity:.8;transition:border-color .7s ease}
.tcard__tr small{display:block;margin-top:8px;font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.tcard__who{display:grid;gap:2px;padding-top:6px}
.tcard__who strong{font-size:.75rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.tcard.is-focus{background:var(--blue);color:var(--white);border-top-color:var(--yellow)}
.tcard.is-focus::before{color:var(--yellow)}
.tcard.is-focus mark{background-size:100% .14em}
.tcard.is-focus .tcard__tr{border-top-color:rgba(255,255,255,.4)}
.tcard[data-sample]::after{
  content:"Sample";position:absolute;top:14px;right:14px;padding:4px 8px;
  border:1px dashed currentColor;font-size:.6875rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.65;
}

/* ---- PRESS & APPEARANCES (photo marquee: TV, stage, awards) ------------ */
.press{padding-block:clamp(56px,7vw,96px)}
.press__head{margin-bottom:clamp(28px,3.4vw,44px)}
.press__title{margin-top:clamp(14px,1.8vw,24px);font-size:var(--fs-xl);max-width:15ch}
.press__marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.press__track{display:flex;width:max-content;animation:proof-scroll 110s linear infinite}
.press__marquee:hover .press__track{animation-play-state:paused}
.press__list{display:flex;align-items:flex-start;flex:none;gap:clamp(14px,1.6vw,22px);padding-right:clamp(14px,1.6vw,22px)}
.pcard{
  position:relative;flex:none;overflow:hidden;
  width:clamp(150px,15vw,222px);aspect-ratio:.8;
  background:var(--ink);
}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pcard:hover img{transform:scale(1.07)}
.pcard::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(5,4,9,.85) 0%,rgba(5,4,9,.22) 46%,rgba(5,4,9,0) 64%);
}
.pcard__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:1;padding:14px 15px;
  font-size:.8125rem;font-weight:800;line-height:1.25;letter-spacing:-.005em;color:var(--white);
}

/* ---- HOW WE WORK (process, justifies the price) ------------------------ */
.howwework__title{margin-top:clamp(14px,1.8vw,22px);font-size:var(--fs-l);max-width:18ch}
.howwework__steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,28px);
  margin-top:clamp(40px,5vw,64px);
}
.howwework__step{padding-top:clamp(20px,2.4vw,28px);border-top:2px solid var(--ink)}
.howwework__num{display:block;font-size:.8125rem;font-weight:800;letter-spacing:.14em;opacity:.55}
.howwework__name{margin-top:clamp(10px,1.2vw,16px);font-size:clamp(1.3rem,2vw,1.9rem)}
.howwework__desc{margin-top:10px;font-size:.9375rem;line-height:1.5;opacity:.8;max-width:28ch}
@media (max-width:760px){
  .howwework__steps{grid-template-columns:1fr;gap:28px}
}

/* ---- PACKAGES & PRICING (the offer) ------------------------------------ */
.packages__head{max-width:46ch}
.packages__title{margin-top:clamp(14px,1.8vw,22px);font-size:var(--fs-l)}
.packages__sub{margin-top:clamp(16px,2vw,24px);font-size:var(--fs-lead);line-height:1.5;opacity:.86;max-width:40ch}

.packages__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(44px,5.6vw,72px);
}
.pkg{
  display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);
  padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,28px);
  border:1px solid rgba(255,255,255,.22);
  position:relative;
}
.pkg__tier{font-size:var(--fs-label);font-weight:800;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.pkg__num{
  display:flex;align-items:baseline;gap:10px;
  font-size:clamp(2.6rem,4.4vw,4.2rem);font-weight:900;letter-spacing:-.04em;line-height:.9;
}
.pkg__num span{font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.pkg__price{
  padding-top:clamp(10px,1.2vw,16px);border-top:1px solid rgba(255,255,255,.22);
  font-size:clamp(1.3rem,1.9vw,1.7rem);font-weight:800;letter-spacing:-.02em;
}
.pkg__price span{display:block;margin-top:4px;font-size:.8125rem;font-weight:600;letter-spacing:.02em;text-transform:none;opacity:.72}
.pkg__save{
  align-self:flex-start;
  padding:5px 12px;
  background:var(--yellow);color:var(--ink);
  font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.pkg__desc{font-size:.9375rem;line-height:1.45;opacity:.82;min-height:2.8em}
.pkg__cta{margin-top:auto;justify-content:center}

.pkg--best{
  background:var(--blue);border-color:var(--blue);
}
.pkg--best .pkg__price{border-top-color:rgba(255,255,255,.35)}
.pkg--best .pkg__save{background:var(--white);color:var(--blue)}
.pkg__badge{
  position:absolute;top:0;right:clamp(20px,2.2vw,28px);
  padding:7px 14px;
  background:var(--yellow);color:var(--ink);
  font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  transform:translateY(-50%);
}
.pkg--rec{border-color:var(--yellow)}
.pkg__badge--rec{background:var(--ink);color:var(--yellow);border:1px solid var(--yellow)}

.packages__prompt{
  margin-top:clamp(20px,2.2vw,28px);
  font-size:.9375rem;line-height:1.5;opacity:.85;
}
.packages__prompt .link{margin-inline:6px;font-size:.75rem}

/* ---- FOR BUSINESS (biztrack) -------------------------------------------- */
.biztrack__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(44px,5.6vw,72px);
}
.biz-offer{
  display:flex;flex-direction:column;gap:clamp(14px,1.6vw,18px);
  padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,28px);
  border:1px solid rgba(255,255,255,.22);
  position:relative;
}
.biz-offer--rec{border-color:var(--yellow)}
.biz-offer__name{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.18;letter-spacing:-.02em;text-transform:none}
.biz-offer .pkg__cta{margin-top:auto}
@media (max-width:1000px){
  .biztrack__grid{grid-template-columns:1fr}
}

.packages__foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 40px;
  margin-top:clamp(36px,4vw,56px);
  padding-top:clamp(28px,3vw,40px);
  border-top:1px solid rgba(255,255,255,.22);
}
.packages__included{display:grid;gap:10px;font-size:.9375rem}
.packages__included li{padding-left:22px;position:relative;opacity:.9}
.packages__included li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:1.5px;background:var(--yellow)}
.packages__trust{max-width:30ch;font-size:.8125rem;font-weight:600;line-height:1.5;opacity:.72;text-align:right}

.packages__note{
  margin-top:clamp(28px,3vw,40px);
  padding-top:clamp(18px,2vw,26px);border-top:1px solid rgba(255,255,255,.14);
  max-width:72ch;font-size:.8125rem;line-height:1.5;opacity:.6;
}

@media (max-width:1000px){
  .packages__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .packages__trust{text-align:left;max-width:none}
}
@media (max-width:560px){
  .packages__grid{grid-template-columns:1fr}
}

/* ---- PACKAGES: 5-up grid (Discovery + bundles), dual CTA, pay row ------- */
.packages__grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.pkg--discovery{border-color:var(--yellow);background:rgba(255,208,108,.07)}
.pkg__alt{margin-top:-6px;text-align:center;font-size:.8125rem;line-height:1.4;opacity:.78}
.pkg__alt a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.packages__pay{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  margin-top:clamp(24px,2.6vw,34px);
  font-size:.8125rem;opacity:.8;
}
.packages__pay strong{opacity:1;font-weight:700}
.paymarks{display:flex;flex-wrap:wrap;gap:8px}
.paymark{
  display:inline-flex;align-items:center;
  padding:4px 11px;
  border:1px solid rgba(255,255,255,.28);
  font-size:.75rem;font-weight:700;letter-spacing:.02em;
}
.packages__impact{
  margin-top:14px;
  font-size:.8125rem;line-height:1.55;opacity:.75;max-width:62ch;
}
@media (max-width:1000px){
  .packages__grid--5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .packages__grid--5{grid-template-columns:1fr}
}


/* ---- 03 THE MŌ WAY ---------------------------------------------------- */
.moway__disc{
  position:absolute;z-index:-1;
  width:min(70vw,1000px);aspect-ratio:1;border-radius:50%;
  background:var(--blue);
  right:-17vw;bottom:-14%;
}
.moway__statement{font-size:var(--fs-xl);margin-top:clamp(28px,3.4vw,48px);letter-spacing:-.04em}
.moway__cols{margin-top:clamp(64px,9vw,140px);row-gap:56px}
.moway__close{
  grid-column:1 / span 5;align-self:end;
  font-size:clamp(.95rem,1.7vw,1.6rem);
  font-weight:300;
  letter-spacing:.3em;
  line-height:2;
  text-transform:uppercase;
}
.moway__body{
  grid-column:7 / -1;
  border-left:1px solid var(--line-light);
  padding-left:clamp(24px,3.4vw,56px);
  display:grid;gap:clamp(18px,1.8vw,26px);
  max-width:56ch;
}
.moway__body p:nth-child(1){font-size:var(--fs-lead);font-weight:700;line-height:1.4}
.moway__body p:nth-child(4){font-size:var(--fs-lead);font-weight:700;line-height:1.4;margin-top:clamp(6px,1vw,14px)}
.moway__cta{grid-column:7 / -1;padding-left:clamp(24px,3.4vw,56px)}

/* ---- 04 THE ROOTS METHOD™ -------------------------------------------- */
.roots{color:var(--blue)}
.roots__statement{font-size:var(--fs-l);margin-top:clamp(28px,3.4vw,48px)}
.roots__why{
  font-size:clamp(4.6rem,27vw,26rem);
  font-weight:900;
  line-height:.78;
  letter-spacing:-.05em;
  text-align:right;
  text-transform:uppercase;
  margin-top:clamp(24px,3.4vw,52px);
  margin-right:-.03em;
  padding-bottom:.06em;
}
.roots__why .q{color:transparent;-webkit-text-stroke:clamp(2px,.42vw,7px) var(--blue)}
.roots__list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap);
  margin-top:clamp(40px,5vw,72px);
}
.roots__list li{
  border-top:1px solid var(--blue);
  padding-top:18px;
  font-size:clamp(1.05rem,2vw,1.9rem);
  font-weight:800;line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;
}
.roots__cta{display:flex;justify-content:flex-end;margin-top:clamp(36px,4.4vw,60px)}

/* ---- 05 MEET MŌ ------------------------------------------------------- */
.meet__grid{align-items:center}
.meet__figure{
  grid-column:1 / span 5;
  width:100%;max-width:540px;
  aspect-ratio:1;
  justify-self:start;
}
.meet__figure img{width:100%;height:100%;object-fit:cover}
.meet__text{
  grid-column:7 / -1;
  display:grid;justify-items:start;gap:clamp(22px,2.6vw,36px);
}
.meet__title{font-size:clamp(3rem,8.2vw,8.4rem);letter-spacing:-.045em;color:var(--blue)}
.meet__intro{font-size:var(--fs-lead);line-height:1.5;font-weight:500;max-width:34ch}

/* ---- 06 FINAL CTA ----------------------------------------------------- */
.closer__ring{
  position:absolute;z-index:-1;
  width:min(72vw,980px);aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.34);
  right:-20vw;top:-24%;
}
.closer__title{font-size:clamp(2.5rem,7.6vw,8.2rem);letter-spacing:-.045em;line-height:.92}
.closer__foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:40px 48px;
  margin-top:clamp(48px,6vw,96px);
}
.closer__text{max-width:44ch;font-size:var(--fs-lead);line-height:1.5;font-weight:500}
.closer__actions{display:flex;flex-wrap:wrap;gap:16px}
.closer__stage{display:inline-flex;margin-top:clamp(28px,3.2vw,40px);color:inherit;opacity:.82}
.closer__stage:hover{opacity:1}

/* ---- FOOTER ----------------------------------------------------------- */
.footer{background:var(--ink);color:var(--paper);padding-block:clamp(32px,4vw,52px)}
.footer__inner{
  width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;
}
.footer__logo{width:48px;color:var(--paper)}
.footer__logo svg{width:100%;height:auto}
.footer__links{display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.6vw,36px);font-size:.875rem;font-weight:500}
.footer__links a{opacity:.75;transition:opacity .25s}
.footer__links a:hover{opacity:1}
.footer__social{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.875rem;font-weight:700}
.footer__social a{display:inline-flex;align-items:center;gap:8px;padding-block:4px;opacity:.92;transition:opacity .25s}
.footer__social a:hover{opacity:1}
.footer__social .arrow{width:18px;height:auto;transform:rotate(-45deg)}
.footer__social a:hover .arrow,.footer__social a:focus-visible .arrow{transform:rotate(-45deg) translateX(3px)}
.footer__copy{font-size:.8125rem;opacity:.6}


/* 7b. COMPOSITIONS — ABOUT ================================================= */

/* ---- HERO ------------------------------------------------------------- */
.about-hero{
  padding-block:calc(var(--nav-h) + 40px) clamp(56px,7vw,110px);
  min-height:100vh;min-height:100svh;
  display:grid;align-items:center;
}
.about-hero__wrap{position:relative;z-index:1}                       /* text sits above the photo */
.about-hero__text{max-width:720px}
.about-hero__desc{
  font-size:var(--fs-label);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(246,246,246,.78);
  margin-bottom:clamp(22px,3vw,40px);
}
.about-hero__title{font-size:clamp(3rem,8.8vw,7.4rem);line-height:.9;letter-spacing:-.045em;color:var(--white);white-space:nowrap}
.about-hero__title .line{display:block;overflow:hidden;padding-bottom:.05em}
.about-hero__title .line>span{display:block;transform:translateY(108%);animation:rise 1s var(--ease) forwards}
.about-hero__title .line:nth-child(1)>span{animation-delay:.1s}
.about-hero__title .line:nth-child(2)>span{animation-delay:.22s}
.about-hero__title .line:nth-child(3)>span{animation-delay:.34s}
.about-hero__id{margin-top:clamp(28px,3.4vw,52px);display:grid;gap:8px;opacity:0;animation:fade .9s ease .8s forwards}
.about-hero__name{font-size:clamp(1.3rem,2.1vw,2rem);font-weight:800;letter-spacing:-.015em;line-height:1.15}
.about-hero__tag{font-size:var(--fs-lead);font-weight:500;max-width:28ch;line-height:1.4;color:rgba(246,246,246,.86)}

/* the stage photo fills the right side; its edges dissolve into the same black as the section */
.about-hero__figure{
  position:absolute;z-index:0;top:0;right:0;bottom:0;
  width:min(62vw,calc(100vh * .75));
  width:min(62vw,calc(100svh * .75));                                  /* the photo is 3:4 */
}
.about-hero__figure img{
  width:100%;height:100%;object-fit:cover;object-position:30% 20%;
  opacity:0;animation:fade 1.2s ease .3s forwards;
}
.about-hero__figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, var(--night) 0%, rgba(5,4,9,.55) 8%, rgba(5,4,9,0) 25%),
    linear-gradient(180deg, var(--night) 0%, rgba(5,4,9,0) 14%),
    linear-gradient(0deg, var(--night) 0%, rgba(5,4,9,0) 10%);
}

/* ---- CREDENTIALS ------------------------------------------------------ */
.creds__lead{
  max-width:22em;margin-top:clamp(24px,3vw,40px);
  font-size:clamp(1.8rem,3.9vw,3.9rem);font-weight:900;line-height:1.02;letter-spacing:-.04em;text-wrap:balance;
}
.creds__lead mark{                                  /* the two things that matter get underlined as the line appears */
  color:inherit;padding-inline:.02em;
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 97% / 100% .1em;
  transition:background-size 1.1s var(--ease) .4s;
}
.js .creds__lead:not(.is-in) mark{background-size:0 .1em}
.creds__bento{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);
  margin-top:clamp(36px,4.6vw,64px);
}
.credrow{
  grid-column:1 / span 7;
  display:grid;grid-template-columns:minmax(0,.45fr) minmax(0,1fr);align-items:center;gap:clamp(18px,2.4vw,36px);
  padding:clamp(22px,2.6vw,40px);
  border:1px solid rgba(255,255,255,.42);
}
.credrow__big{font-size:clamp(2.1rem,4.4vw,4.6rem);font-weight:900;line-height:.92;letter-spacing:-.05em}
.credrow__title{font-size:clamp(1.2rem,1.9vw,1.85rem);line-height:1.08;letter-spacing:-.025em}
.credrow__sub{margin-top:10px;font-size:var(--fs-lead);font-weight:500;line-height:1.4;opacity:.92}
.cred{
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  padding:clamp(26px,3vw,48px);
  border:1px solid rgba(255,255,255,.42);
}
.cred--seal{grid-column:8 / -1;grid-row:1 / span 3}
.cred__seal{align-self:center;width:clamp(220px,26vw,380px);height:auto;aspect-ratio:1;color:var(--white);overflow:visible}
.cred__seal text{font-family:var(--font-sans)}
.seal__ring{transform-origin:150px 150px;animation:seal-spin 70s linear infinite}
.cred__title{font-size:var(--fs-m);line-height:.98;max-width:16ch}
.cred__sub{margin-top:14px;font-size:var(--fs-lead);font-weight:500;line-height:1.4}
.cred__issuer{margin-top:12px;font-size:var(--fs-label);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow)}

/* ---- STORY ------------------------------------------------------------ */
.story__grid{row-gap:56px}
.story__quote{grid-column:1 / span 6;font-size:var(--fs-l);letter-spacing:-.04em;color:var(--blue)}
.story__mark{display:block;font-size:1.7em;line-height:.62;height:.46em;margin-bottom:.1em}
.story__body{grid-column:8 / -1;display:grid;gap:clamp(18px,1.8vw,26px);align-content:start;padding-top:.4em}
.story__body .lead{font-weight:500}
.story__body strong{font-weight:800}

/* ---- THE LEARNING CURVE ---------------------------------------------- */
.curve__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.curve__title{font-size:var(--fs-xl)}
.curve__sub{font-size:var(--fs-lead);line-height:1.4;max-width:22ch}
.curve__sub b{display:block;color:var(--blue);font-weight:800}
.steps{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;
  margin-top:clamp(88px,9vw,140px);
}
.step{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  padding:clamp(16px,1.6vw,26px);
  min-height:calc(250px + var(--i) * clamp(46px,5vw,76px));
}
.step:nth-child(1){background:var(--blue-20);color:var(--ink)}
.step:nth-child(2){background:var(--blue-40);color:var(--ink)}
.step:nth-child(3){background:var(--blue-60);color:var(--ink)}
.step:nth-child(4){background:var(--blue-80);color:var(--white)}
.step:nth-child(5){background:var(--blue);color:var(--white)}
.step__num{font-size:clamp(2.4rem,4.6vw,4.6rem);font-weight:900;letter-spacing:-.05em;line-height:.9}
.step__title{font-size:clamp(.98rem,1.45vw,1.4rem);line-height:1.06;letter-spacing:-.02em}
.step__org{margin-top:12px;font-weight:700;font-size:.9375rem;line-height:1.35}
.step__loc{font-size:.875rem;opacity:.85}
.step__walker{position:absolute;left:clamp(14px,1.6vw,26px);bottom:100%;height:clamp(78px,8vw,118px);width:auto}

/* ---- THE JOURNEY ------------------------------------------------------ */
.journey__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.journey__title{font-size:var(--fs-xl)}
.journey__lede{font-size:var(--fs-lead);line-height:1.4;max-width:24ch;opacity:.88}
.timeline{position:relative;margin-top:clamp(56px,7vw,110px)}
.stage{
  --pad:clamp(20px,2.8vw,42px);
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:start;
  padding-block:var(--pad);
}
.stage::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line-light)}
.stage:first-child::before{top:calc(var(--pad) + 28px)}
.stage:last-child::before{bottom:auto;height:calc(var(--pad) + 28px)}
.stage__node{
  grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;
  display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--ink);border:1.5px solid var(--paper);
  font-size:.8125rem;font-weight:800;letter-spacing:.06em;
}
.stage__body{grid-row:1;max-width:30rem;min-width:0}
.stage:nth-child(odd) .stage__body{grid-column:1;justify-self:end;text-align:right;padding-right:clamp(16px,3vw,52px)}
.stage:nth-child(even) .stage__body{grid-column:3;padding-left:clamp(16px,3vw,52px)}
.stage__title{font-size:clamp(1.6rem,3vw,3rem);line-height:.96}
.stage__org{margin-top:12px;color:var(--blue-pale);font-weight:700}
.stage__text{margin-top:12px;font-size:var(--fs-lead);line-height:1.45;opacity:.9}
.stage--final .stage__node{background:var(--blue);border-color:var(--blue)}
.stage--final .stage__body{background:var(--blue);padding:clamp(22px,2.4vw,36px);margin-left:clamp(16px,3vw,52px)}
.stage--final .stage__text{opacity:1}
.stage--final .stage__cta{margin-top:24px}

/* ---- QUANTIFIED IMPACT ------------------------------------------------ */
.stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(32px,4vw,56px);
  border-top:1px solid var(--line-ink);border-left:1px solid var(--line-ink);
}
.stat{
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  min-height:clamp(220px,20vw,300px);
  padding:clamp(22px,2.4vw,38px);
  border-right:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink);
}
.stat__num{font-size:clamp(3.4rem,7.4vw,7.6rem);font-weight:900;letter-spacing:-.055em;line-height:.85;color:var(--blue)}
.stat__label{font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.15}
.stat__note{opacity:.82;font-size:.9375rem;margin-top:4px}
.stat--lead{background:var(--blue);color:var(--white)}
.stat--lead .stat__num{color:var(--white)}
.stats__note{margin-top:28px;max-width:60ch;font-size:var(--fs-lead);line-height:1.5}

.reach{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:44px;
  margin-top:clamp(72px,9vw,140px);
}
.reach__intro{grid-column:1 / span 7}
.reach__title{font-size:var(--fs-l);color:var(--blue)}
.reach__sub{margin-top:16px;font-size:var(--fs-lead);font-weight:500}
.reach__nums{grid-column:8 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-content:end}
.reach__nums li{display:grid;gap:10px;align-content:end;justify-items:start}
.reach__big{font-size:clamp(3rem,6vw,6rem);font-weight:900;letter-spacing:-.05em;line-height:.85;color:var(--blue)}
.reach__inf{width:clamp(58px,6.6vw,104px);height:auto;color:var(--blue)}
.reach__cap{font-size:var(--fs-label);font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1.4}
.reach__list{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 32px;
  padding-top:22px;border-top:1px solid var(--line-ink);
  font-size:.9375rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}

/* ---- CLOSE ------------------------------------------------------------ */
.about-close{text-align:center}
.about-close__mark{
  position:absolute;z-index:-1;left:50%;top:50%;
  width:min(92vw,1180px);height:auto;transform:translate(-50%,-50%);
  color:var(--white);opacity:.06;
}
.about-close__title{font-size:clamp(2.3rem,5.4vw,5.8rem);letter-spacing:-.04em;line-height:.96}
.about-close__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:clamp(36px,5vw,72px)}

@keyframes seal-spin{to{transform:rotate(360deg)}}

@media (max-width:1180px){
  .about-hero__title{font-size:7.4vw}
  .about-hero__text{max-width:42vw}
}

@media (max-width:1000px){
  .about-hero{display:block;min-height:0;padding-bottom:0}
  .about-hero__text{max-width:none;padding-bottom:8px}
  .about-hero__figure{position:relative;top:auto;right:auto;bottom:auto;width:100%;aspect-ratio:3 / 4;max-height:640px}
  .about-hero__figure img{object-position:28% 25%}
  .about-hero__figure::after{
    background:linear-gradient(180deg, var(--night) 0%, rgba(5,4,9,.6) 16%, rgba(5,4,9,0) 34%);
  }
  .about-hero__title{font-size:clamp(3rem,15vw,5.4rem)}

  .credrow,.cred--seal{grid-column:1 / -1}
  .cred--seal{grid-row:auto}
  .credrow{grid-template-columns:1fr;gap:12px}

  .story__quote,.story__body{grid-column:1 / -1}

  .steps{grid-template-columns:1fr;gap:10px;margin-top:clamp(96px,22vw,150px)}
  .step{min-height:0;width:calc(68% + var(--i) * 8%);gap:26px}
  .step__walker{height:clamp(84px,20vw,118px)}

  .stage::before{left:28px}
  .stage{grid-template-columns:56px minmax(0,1fr);column-gap:18px}
  .stage__node{grid-column:1;justify-self:start}
  .stage:nth-child(odd) .stage__body,.stage:nth-child(even) .stage__body{
    grid-column:2;justify-self:start;text-align:left;padding:0
  }
  .stage--final .stage__body{padding:22px;margin-left:0}

  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reach__intro,.reach__nums{grid-column:1 / -1}
  .reach__list{justify-content:flex-start}
}

@media (max-width:640px){
  .stats{grid-template-columns:1fr}
  .stat{min-height:0}
  .reach__nums{grid-template-columns:repeat(3,auto);justify-content:space-between}
}


/* 7c. COMPOSITIONS — BUSINESS ============================================== */

/* ---- HERO: stop / start -------------------------------------------------- */
.biz-hero{
  min-height:100vh;min-height:100svh;
  display:grid;grid-template-rows:1fr auto;
  padding-block:calc(var(--nav-h) + 40px) clamp(24px,3vw,44px);
}
.biz-hero__main{align-self:center;padding-block:clamp(24px,4vw,56px)}
.biz-hero__title{display:grid;gap:clamp(18px,2.4vw,36px)}
.biz-hero__stop{
  font-size:clamp(1.1rem,2.7vw,2.7rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;
  color:rgba(255,255,255,.8);
  opacity:0;animation:fade .8s ease .1s forwards;
}
.strike{                                             /* the old way gets crossed out — drawn once, left to right */
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 58% / 0 .085em;
  animation:strike 1.1s var(--ease) 1s forwards;
}
.biz-hero__start{
  font-size:clamp(2.5rem,8vw,8.4rem);line-height:.9;letter-spacing:-.05em;
  color:var(--white);max-width:11em;
  opacity:0;animation:fade .9s ease .35s forwards;
}
.biz-hero__cta{margin-top:clamp(28px,3.4vw,48px);opacity:0;animation:fade .9s ease .9s forwards}
.biz-hero__pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap)}
.biz-hero__pillars li{
  padding-top:14px;border-top:1px solid rgba(255,255,255,.55);
  font-size:clamp(1rem,1.7vw,1.6rem);font-weight:800;letter-spacing:-.01em;
}
.biz-hero__lens{margin-top:20px;color:rgba(255,255,255,.88)}
@keyframes strike{to{background-size:100% .085em}}

/* ---- THE BUSINESS QUESTION: above ground / below ground ----------------- */
.ground__top{padding-bottom:clamp(64px,8vw,120px)}
.ground__title{font-size:var(--fs-l);max-width:16ch;margin-top:clamp(24px,3vw,40px)}
.ground__lead{margin-top:clamp(32px,4vw,56px);font-size:var(--fs-lead);font-weight:700}
.ground__row{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:40px;
  margin-top:18px;align-items:end;
}
.symptoms{grid-column:1 / span 8;border-bottom:1px solid var(--line-ink)}
.symptoms li{
  padding:clamp(10px,1.2vw,18px) 0;border-top:1px solid var(--line-ink);
  font-size:clamp(1.5rem,3.1vw,3.2rem);font-weight:900;line-height:1;letter-spacing:-.035em;text-transform:uppercase;
}
.ground__response{grid-column:9 / -1;margin:0;font-size:var(--fs-lead);line-height:2.1}
.ground__response em{
  font-style:normal;font-weight:700;
  display:inline-block;line-height:1.3;padding:.1em .55em;margin-block:.12em;
  border:1px solid var(--ink);
}
.loop{display:inline-block;width:1.5em;height:1.5em;margin-left:.5em;vertical-align:-.42em;color:var(--blue)}

.ground__bottom{position:relative;padding-top:clamp(112px,12vw,190px);text-align:center}
.ground__bottom::before{                             /* the line that goes underground */
  content:"";position:absolute;left:50%;top:0;width:1px;height:clamp(72px,8vw,120px);
  background:rgba(255,255,255,.6);
}
.ground__bottom::after{
  content:"";position:absolute;left:50%;top:0;width:11px;height:11px;border-radius:50%;
  background:var(--white);transform:translateX(-50%);
}
.ground__else{font-size:var(--fs-lead);font-weight:700;color:rgba(246,246,246,.92)}
.ground__question{
  margin:clamp(16px,2vw,28px) auto 0;max-width:12em;
  font-size:clamp(2.6rem,8.2vw,8.6rem);font-weight:900;line-height:.92;letter-spacing:-.05em;text-transform:uppercase;
  text-wrap:balance;
}

/* ---- HOW MŌ WORKS: one-shot + partnership ------------------------------- */
.engage__title{font-size:var(--fs-xl)}
.offer{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:32px;
  margin-top:clamp(40px,5vw,72px);padding-top:clamp(32px,4vw,56px);
  border-top:1px solid var(--line-ink);
}
.offer__intro{grid-column:1 / span 5}
.offer__num{font-size:var(--fs-label);font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
.offer__title{font-size:var(--fs-m);margin-top:18px;max-width:14ch}
.offer__glyph{margin-top:clamp(28px,3vw,44px);width:clamp(110px,13vw,190px);height:auto;color:var(--blue)}
.offer__facts{grid-column:7 / -1;display:grid;gap:clamp(22px,2.4vw,34px);align-content:start}
.offer__facts dt,.signature__facts dt{
  font-size:var(--fs-label);font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin-bottom:8px;
}
.offer__facts dd{font-size:var(--fs-lead);line-height:1.5;max-width:50ch}
.offer__cta{justify-self:start;margin-top:8px}
.months{display:flex;max-width:34rem}
.months li{flex:1;display:grid;grid-template-columns:auto 1fr;grid-template-rows:56px auto;align-items:center}
.months li:not(:last-child)::after{content:"";grid-column:2;grid-row:1;height:1px;background:var(--line-ink);margin-inline:10px}
.months__dot{
  grid-column:1;grid-row:1;
  width:calc(var(--d) * 44px);height:calc(var(--d) * 44px);border-radius:50%;background:var(--blue);
}
.months__label{grid-column:1 / -1;grid-row:2;font-size:var(--fs-label);font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.chips-static{display:flex;flex-wrap:wrap;gap:8px}
.chips-static li{
  padding:9px 12px;border:1px solid var(--ink);
  font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;
}
.offer__note{margin-top:16px;font-size:1rem;line-height:1.5;opacity:.85;max-width:44ch}

/* ---- SIGNATURE TRAINING: pill vs. needle -------------------------------- */
.signature .eyebrow{color:var(--white)}
.signature__pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;margin-top:clamp(28px,4vw,52px)}
.sig-tile{
  display:flex;flex-direction:column;justify-content:space-between;gap:36px;
  min-height:clamp(260px,28vw,400px);padding:clamp(24px,3vw,44px);
}
.sig-tile--old{border:1px solid var(--line-light);color:rgba(246,246,246,.62)}
.sig-tile--new{background:var(--blue);color:var(--white)}
.sig-tile__icon{width:clamp(130px,16vw,250px);height:auto}
.sig-tile__text{font-size:var(--fs-l);font-weight:900;line-height:.94;letter-spacing:-.04em;text-transform:uppercase;max-width:9ch}
.sig-or{
  align-self:center;z-index:1;margin-inline:-26px;
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--paper);color:var(--ink);
  font-size:.75rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
.signature__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);margin-top:clamp(40px,5vw,72px)}
.signature__facts dt{color:var(--blue-pale)}
.signature__facts dd{font-size:var(--fs-body);line-height:1.6;max-width:40ch}
.signature__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;
  margin-top:clamp(36px,4vw,56px);padding-top:24px;border-top:1px solid var(--line-light);
}

/* ---- WHAT I WORK ON ----------------------------------------------------- */
.work__title{font-size:var(--fs-xl);margin-top:clamp(24px,3vw,40px);color:var(--blue)}
.work__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);margin-top:clamp(48px,6vw,88px)}
.work__grid li{padding:26px 0 clamp(32px,4vw,56px);border-top:1px solid var(--line-ink);transition:border-color .3s}
.work__grid li:hover{border-top-color:var(--blue)}
.work__grid h3{font-size:clamp(1.4rem,2.4vw,2.3rem);line-height:1;letter-spacing:-.03em;margin-bottom:14px;transition:color .3s}
.work__grid li:hover h3{color:var(--blue)}
.work__grid p{max-width:44ch;font-size:var(--fs-lead);line-height:1.5}

/* ---- THE ROOTS LENS ------------------------------------------------------ */
.lens__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:center}
.lens__ring{
  grid-column:1 / span 5;justify-self:start;
  position:relative;width:100%;max-width:440px;aspect-ratio:1;
  display:grid;place-items:center;
  border:3px solid var(--blue);border-radius:50%;color:var(--blue);
}
.lens__ring::after{                                  /* magnifier handle */
  content:"";position:absolute;left:85.4%;top:85.4%;
  width:36%;height:clamp(16px,2.2vw,28px);background:var(--blue);
  transform-origin:0 50%;transform:translateY(-50%) rotate(45deg);
}
.lens__why{font-size:clamp(3.4rem,7.2vw,7.6rem);font-weight:900;line-height:.8;letter-spacing:-.06em;text-transform:uppercase}
.lens__body{grid-column:7 / -1}
.lens__title{font-size:var(--fs-l);margin-top:clamp(24px,3vw,40px)}
.lens__lead{margin-top:20px;font-size:var(--fs-lead);line-height:1.5;max-width:36ch}
.strata{margin-top:clamp(28px,3.4vw,48px)}
.strata li{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(16px,1.8vw,24px) clamp(18px,2vw,30px);
  font-size:clamp(1.15rem,2vw,1.8rem);font-weight:800;letter-spacing:-.02em;
}
.strata li .arrow{transform:rotate(90deg);width:28px;flex:none}
.strata li:nth-child(1){background:var(--blue-20)}
.strata li:nth-child(2){background:var(--blue-40)}
.strata li:nth-child(3){background:var(--blue-80);color:var(--white)}
.strata li:nth-child(4){background:var(--blue);color:var(--white)}
.lens__cta{margin-top:clamp(28px,3vw,44px)}

/* logo strip: framed when it sits between two light sections */
.proof--framed{border-top:1px solid var(--line-ink)}

/* ---- FINAL CTA + THE SMART BOOKING BUILDER ------------------------------ */
.talk__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:48px;align-items:start}
.talk__copy{grid-column:1 / span 6}
.talk__title{font-size:var(--fs-l)}
.talk__lead{margin-top:clamp(24px,3vw,40px);font-size:var(--fs-lead);line-height:1.5;max-width:38ch}
.talk__say{margin-top:clamp(24px,3vw,40px);font-size:var(--fs-m);font-weight:900;line-height:.98;letter-spacing:-.035em;text-transform:uppercase;max-width:17ch}

.builder{
  grid-column:7 / -1;
  display:grid;gap:clamp(22px,2.4vw,32px);
  padding:clamp(22px,3vw,44px);
  background:var(--paper);color:var(--ink);
}
.builder__group{border:0;padding:0;margin:0;min-width:0}
.builder__label{padding:0;margin-bottom:14px;font-size:var(--fs-label);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;display:block}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 16px;border:1px solid var(--ink);
  font-size:.9375rem;font-weight:700;line-height:1.25;cursor:pointer;
  transition:background-color .25s,color .25s,border-color .25s;
}
.chip span::before{content:"";flex:none;width:11px;height:11px;border:1.5px solid currentColor}
.chip input[type="radio"] + span::before{border-radius:50%}
.chip:hover input:not(:checked) + span{border-color:var(--blue);color:var(--blue)}
.chip input:checked + span{background:var(--blue);border-color:var(--blue);color:var(--white)}
.chip input:checked + span::before{background:var(--yellow);border-color:var(--yellow)}
.builder :focus-visible{outline-color:var(--blue)}
.builder__preview{
  min-height:4.8em;padding:6px 0 6px 16px;border-left:3px solid var(--blue);
  font-size:1.0625rem;line-height:1.55;
}
.builder .btn{justify-self:start}

/* floating pill: appears after the hero, leaves when the booking builder is on screen */
.cta-pill{
  position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:40;
  opacity:0;transform:translateY(140%);pointer-events:none;
  transition:opacity .4s ease,transform .5s var(--ease),background-color .3s;
}
.cta-pill.is-visible{opacity:1;transform:none;pointer-events:auto}

@media (max-width:1000px){
  .biz-hero__pillars{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .symptoms,.ground__response{grid-column:1 / -1}
  .offer__intro,.offer__facts{grid-column:1 / -1}
  .offer__title{max-width:none}
  .signature__pair{grid-template-columns:1fr}
  .sig-or{margin:-26px auto;justify-self:center}
  .sig-tile--old{padding-bottom:clamp(56px,10vw,72px)}
  .sig-tile--new{padding-top:clamp(56px,10vw,72px)}
  .signature__facts{grid-template-columns:1fr;gap:28px}
  .work__grid{grid-template-columns:1fr}
  .lens__ring{grid-column:1 / -1;max-width:300px;margin-bottom:72px}
  .lens__body{grid-column:1 / -1}
  .talk__copy,.builder{grid-column:1 / -1}
}
@media (max-width:560px){
  .chip span{padding:11px 14px}
  .cta-pill{left:16px;right:16px;justify-content:space-between}
}


/* 7d. COMPOSITIONS — PEOPLE (calm, warm, unhurried) ======================== */

/* ---- HERO: still water --------------------------------------------------- */
.ppl-hero{
  min-height:100vh;min-height:100svh;
  display:grid;align-items:center;
  padding-block:calc(var(--nav-h) + 48px) clamp(56px,7vw,110px);
}
.ppl-hero__wrap{position:relative;z-index:1}
.ppl-hero__title{display:grid;gap:.1em;max-width:13em;font-size:clamp(2.3rem,6vw,6.4rem);font-weight:800;line-height:.94;letter-spacing:-.045em}
.ppl-hero__calm{color:var(--ink);opacity:0;animation:fade 1.2s ease .2s forwards}
.ppl-hero__inside{                                    /* comes into focus, slowly — like noticing something */
  color:var(--blue);
  opacity:0;filter:blur(14px);
  animation:focus 1.8s ease 1.1s forwards;
}
.ppl-hero__areas,.ppl-hero__lead,.ppl-hero__cta{opacity:0;animation:fade 1.1s ease 2s forwards}
.ppl-hero__areas{margin-top:clamp(28px,3.4vw,52px);font-size:var(--fs-label);font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.ppl-hero__lead{margin-top:14px;font-size:var(--fs-lead);font-weight:500}
.ppl-hero__cta{margin-top:clamp(26px,3vw,40px);animation-delay:2.3s}
@keyframes focus{to{opacity:1;filter:blur(0)}}

.ripples{
  position:absolute;z-index:0;right:-8vw;top:52%;
  width:min(64vw,880px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;
}
.ripples i{
  position:absolute;inset:0;border:1px solid var(--blue);border-radius:50%;
  opacity:0;transform:scale(.12);
  animation:ripple 12s ease-out infinite;
}
.ripples i:nth-child(2){animation-delay:2.4s}
.ripples i:nth-child(3){animation-delay:4.8s}
.ripples i:nth-child(4){animation-delay:7.2s}
.ripples i:nth-child(5){animation-delay:9.6s}
.ripples b{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--blue)}
@keyframes ripple{0%{opacity:0;transform:scale(.1)}10%{opacity:.55}100%{opacity:0;transform:scale(1)}}

/* ---- THE QUESTION: a conversation between the voice you show and the one you don't --- */
.pq__title{display:grid;gap:.12em;max-width:19em;font-size:var(--fs-l);font-weight:800}
.pq__calm{color:var(--ink)}
.pq__but{color:var(--blue)}
.pq__keys{display:flex;gap:clamp(18px,2.4vw,32px);margin-top:clamp(24px,3vw,36px);font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.pq__keys span{display:flex;align-items:center;gap:8px}
.pq__keys span::before{content:"";width:9px;height:9px;flex:none}
.pq__keys span:first-child::before{background:var(--paper-warm);border:1px solid var(--ink)}
.pq__keys span:last-child::before{background:var(--blue)}
.pq__dialogue{display:grid;gap:clamp(14px,1.8vw,20px);margin-top:clamp(32px,4vw,56px)}
.pq__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.2vw,36px);align-items:start}
.pq__say,.pq__think{
  padding:clamp(16px,1.9vw,24px) clamp(18px,2.1vw,26px);
  font-size:clamp(1.0625rem,1.5vw,1.3rem);font-weight:600;line-height:1.35;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.pq__say{justify-self:start;max-width:36ch;background:var(--paper-warm);font-style:italic}
.pq__say::before{content:"\201C";margin-right:.08em;opacity:.5}
.pq__say::after{content:"\201D";margin-left:.08em;opacity:.5}
.pq__think{justify-self:end;max-width:36ch;background:var(--blue);color:var(--white);text-align:right}
.js .pq__say,.js .pq__think{opacity:0;transform:translateY(12px)}
.js .pq__say.is-in,.js .pq__think.is-in{opacity:1;transform:none}
.js .pq__think{transition-delay:.3s}
.pq__turn{
  margin:clamp(56px,7vw,100px) auto 0;max-width:30ch;text-align:center;
  font-size:clamp(1.35rem,2.5vw,2.3rem);font-weight:500;line-height:1.35;
}
.pq__begin{
  margin-top:clamp(28px,3.4vw,48px);text-align:center;color:var(--blue);
  font-size:clamp(2.3rem,7vw,7.2rem);font-weight:900;line-height:.94;letter-spacing:-.045em;text-transform:uppercase;text-wrap:balance;
}

/* ---- HOW YOU CAN WORK WITH MŌ ------------------------------------------ */
.pwith__title{font-size:var(--fs-xl)}
.poffer{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:32px;
  margin-top:clamp(40px,5vw,72px);padding-top:clamp(32px,4vw,56px);border-top:1px solid var(--line-ink);
}
.poffer__intro{grid-column:1 / span 5}
.poffer__num{font-size:var(--fs-label);font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
.poffer__title{margin-top:18px;font-size:clamp(1.5rem,2.6vw,2.5rem);line-height:1.04;letter-spacing:-.03em}
.poffer__facts{grid-column:7 / -1;display:grid;gap:clamp(22px,2.4vw,34px);align-content:start}
.poffer__facts dt{font-size:var(--fs-label);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.poffer__facts dd{font-size:var(--fs-lead);line-height:1.5;max-width:50ch}
.poffer__cta{justify-self:start;margin-top:8px}
.formats{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:none}
.fmt{display:grid;gap:10px;align-content:start;padding:20px 20px 24px;background:var(--paper)}
.fmt__glyph{height:32px;width:auto;color:var(--blue)}
.fmt__name{font-size:var(--fs-label);font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.fmt__desc{font-size:.9375rem;line-height:1.5}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:9px 14px;background:var(--blue-20);font-size:.8125rem;font-weight:700;line-height:1.2}

/* ---- WHAT I WORK ON ----------------------------------------------------- */
.pwork__title{font-size:var(--fs-xl);margin-top:clamp(24px,3vw,40px);color:var(--blue);max-width:14ch}
.pwork__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(48px,6vw,88px);
  border-top:1px solid var(--line-ink);border-left:1px solid var(--line-ink);
}
.pwork__grid li{
  min-height:clamp(210px,19vw,270px);padding:clamp(24px,3vw,44px);
  border-right:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink);
  transition:background-color .5s ease;
}
.pwork__grid li::before{content:"";display:block;width:10px;height:10px;border-radius:50%;background:var(--blue);margin-bottom:22px}
.pwork__grid li:hover{background:var(--blue-20)}
.pwork__grid h3{font-size:clamp(1.25rem,2vw,1.85rem);line-height:1.02;letter-spacing:-.03em;margin-bottom:14px}
.pwork__grid p{font-size:var(--fs-body);line-height:1.6;max-width:30ch}

/* ---- APP SCREENSHOT GALLERY (catchy real-screen previews) --------------- */
.appshots{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2vw,28px);
  margin-top:clamp(48px,6vw,88px);
}
.appshot{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}
.appshot__frame{
  position:relative;overflow:hidden;
  height:clamp(260px,26vw,340px);
  background:var(--paper-warm);
  border:1px solid var(--line-ink);
  display:flex;align-items:flex-start;justify-content:center;
  transition:transform .4s var(--ease);
}
.appshot:hover .appshot__frame{transform:translateY(-4px)}
.appshot__frame img{width:100%;height:100%;object-fit:contain;object-position:top center}
.appshot__cap strong{display:block;margin-bottom:5px;font-size:1.0625rem;font-weight:800;letter-spacing:-.01em}
.appshot__cap span{display:block;font-size:.875rem;line-height:1.45;opacity:.78}
@media (max-width:1000px){
  .appshots{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .appshots{grid-template-columns:1fr}
  .appshot__frame{height:clamp(260px,70vw,380px)}
}

/* ---- THE MŌ EXPERIENCE -------------------------------------------------- */
.pexp{background:var(--blue-20);color:var(--ink)}
.pexp__title{font-size:var(--fs-xl);margin-top:clamp(24px,3vw,40px);max-width:17ch}
.pexp__text{display:grid;gap:14px;margin-top:clamp(28px,3.4vw,48px);max-width:46ch;font-size:var(--fs-lead);line-height:1.5}
.creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vw,36px);list-style:none;padding:0}
.creds li{padding:7px 14px;border:1px solid var(--ink);font-size:.8125rem;font-weight:700;letter-spacing:.01em}
.grow{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:var(--col-gap);
  margin-top:clamp(56px,7vw,110px);
}
.grow li{display:grid;gap:20px;justify-items:start;align-content:end}
.grow__dot{display:block;width:calc(var(--s) * clamp(96px,15vw,220px));aspect-ratio:1;border-radius:50%;background:var(--blue)}
.grow__word{display:flex;align-items:center;gap:14px;font-size:clamp(1.05rem,1.8vw,1.7rem);font-weight:900;letter-spacing:-.02em;text-transform:uppercase}
.grow li:not(:last-child) .grow__word::after{
  content:"";width:34px;height:10px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cpath d='M0 5h32M27 .8 32 5l-5 4.2' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cpath d='M0 5h32M27 .8 32 5l-5 4.2' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.js .grow .grow__dot{transform:scale(.45);opacity:0;transition:transform 1.5s var(--ease),opacity 1.1s ease;transition-delay:calc(var(--i) * .3s)}
.js .grow.is-in .grow__dot{transform:none;opacity:1}

/* ---- FINAL: a comfortable way to begin ---------------------------------- */
.pfinal__sun{
  position:absolute;z-index:-1;width:min(70vw,900px);aspect-ratio:1;border-radius:50%;
  background:var(--blue-20);opacity:.75;right:-14vw;top:-24%;
}
.pfinal__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:48px;align-items:start}
.pfinal__copy{grid-column:1 / span 6}
.pfinal__title{font-size:var(--fs-l);font-weight:800}
.pfinal__soft{margin-top:clamp(24px,3vw,40px);font-size:var(--fs-m);font-weight:500;line-height:1.15;letter-spacing:-.02em}
.pfinal__why{
  margin-top:clamp(18px,2vw,28px);color:var(--blue);
  font-size:clamp(2.4rem,6vw,6rem);font-weight:900;line-height:.92;letter-spacing:-.045em;text-transform:uppercase;
}
.builder--soft{background:var(--white)}
.builder__private{font-size:.8125rem;line-height:1.5;opacity:.72;max-width:44ch}

/* pfinal on an is-blue section (people.html): the warm-background accent colors
   (blue-on-blue text, pale-blue sun) go invisible — override for this context */
.is-blue .pfinal__sun{background:rgba(255,255,255,.14)}
.is-blue .pfinal__why{color:var(--yellow)}

@media (max-width:1000px){
  .ripples{width:110vw;right:-40vw;opacity:.8}
  .pq__row{grid-template-columns:1fr}
  .pq__say{justify-self:stretch}
  .pq__think{justify-self:stretch;text-align:left}
  .poffer__intro,.poffer__facts{grid-column:1 / -1}
  .pwork__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfinal__copy,.pfinal__grid .builder{grid-column:1 / -1}
}
@media (max-width:640px){
  .formats{grid-template-columns:1fr}
  .pwork__grid{grid-template-columns:1fr}
  .pwork__grid li{min-height:0}
  .grow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  .grow__dot{width:calc(var(--s) * 34vw)}
  .grow li:nth-child(2) .grow__word::after{display:none}
}


/* 7e. COMPOSITIONS — ON STAGE (video, spotlight, the event inquiry) ========== */

/* full-bleed muted video (hero + closing) */
.bgvideo{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.stage-hero__shade{
  position:absolute;z-index:-1;inset:0;
  background:
    linear-gradient(0deg,var(--night) 0%,rgba(5,4,9,.9) 24%,rgba(5,4,9,.42) 58%,rgba(5,4,9,.2) 100%),
    linear-gradient(180deg,rgba(5,4,9,.72) 0%,rgba(5,4,9,0) 24%),
    rgba(0,40,150,.34);
}

/* ---- HERO ---------------------------------------------------------------- */
.stage-hero{
  min-height:100vh;min-height:100svh;
  display:grid;align-items:end;
  padding-block:calc(var(--nav-h) + 40px) clamp(40px,5vw,72px);
}
.stage-hero__wrap{position:relative}
.vid-toggle{
  position:absolute;z-index:2;right:var(--gutter);bottom:clamp(28px,4vw,52px);
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  color:var(--white);border:1px solid rgba(255,255,255,.55);background:rgba(5,4,9,.35);
  transition:background-color .3s,border-color .3s;
}
.vid-toggle:hover{background:rgba(255,255,255,.18);border-color:var(--white)}
.vid-toggle svg{width:18px;height:18px}
.vid-toggle__play{display:none}
.vid-toggle.is-paused .vid-toggle__pause{display:none}
.vid-toggle.is-paused .vid-toggle__play{display:block}
.stage-hero__title{
  max-width:11em;font-size:clamp(2.4rem,6.3vw,6.8rem);line-height:.92;letter-spacing:-.045em;color:var(--white);
  text-wrap:balance;opacity:0;animation:fade 1.1s ease .2s forwards;
}
.stage-hero__kinds{
  margin-top:clamp(20px,2.6vw,36px);
  font-size:var(--fs-label);font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  opacity:0;animation:fade 1s ease .9s forwards;
}
.stage-hero__not{
  margin-top:clamp(16px,2vw,26px);
  font-size:clamp(1.25rem,2.5vw,2.4rem);font-weight:800;line-height:1.08;letter-spacing:-.025em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
  opacity:0;animation:fade 1s ease 1.3s forwards;
}
.stage-hero__not strong{color:var(--white);font-weight:900}
.stage-hero__cta{margin-top:clamp(26px,3vw,40px);opacity:0;animation:fade 1s ease 1.7s forwards}

/* ---- HOW MŌ SHOWS UP: editorial rows, same language as Home ------------- */
.show__title{font-size:var(--fs-xl)}
.showrows{margin-top:clamp(40px,5vw,72px);border-bottom:1px solid var(--line-ink)}
.showrow{
  --ga:var(--blue);--gb:var(--white);                     /* glyph accent / on-accent: they swap on hover */
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start;
  padding-block:clamp(30px,3.6vw,54px);
  border-top:1px solid var(--line-ink);
  transition:color .35s;
}
.showrow::before{                                          /* the blue fill that rises on hover */
  content:"";position:absolute;inset:0 -24px;z-index:-1;background:var(--blue);
  transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);
}
.showrow:hover,.showrow:focus-within{color:var(--white);--ga:var(--white);--gb:var(--blue)}
.showrow:hover::before,.showrow:focus-within::before{transform:scaleY(1)}
.showrow__title{grid-column:1 / span 5;font-size:var(--fs-title);transition:transform .6s var(--ease)}
.showrow:hover .showrow__title,.showrow:focus-within .showrow__title{transform:translateX(14px)}
.showrow__body{grid-column:6 / span 4}
.showrow__desc{max-width:36ch;font-size:var(--fs-lead);line-height:1.5}
.showrow__for{margin-top:clamp(20px,2vw,28px)}
.showrow__for .label{margin-bottom:12px}
.showrow .chips-static li{border-color:currentColor}
.showrow__side{grid-column:10 / -1;display:grid;justify-items:end;align-content:space-between;gap:28px;align-self:stretch}
.show__glyph{width:clamp(120px,12vw,190px);height:auto;color:inherit;overflow:visible}
.g-fill{fill:currentColor}
.g-line{fill:none;stroke:currentColor}
.g-acc{fill:var(--ga)}
.g-accline{fill:none;stroke:var(--gb)}
.g-accln{fill:none;stroke:var(--ga)}
.showrow__cta::after{content:"";position:absolute;inset:0}   /* whole row is the link */

/* ---- TOPICS: a marquee that never quite stops --------------------------- */
.topics{padding-block:clamp(72px,9vw,130px)}
.topics__marquee{margin-top:clamp(32px,4vw,56px);overflow:hidden}
.topics__track{display:flex;width:max-content;animation:proof-scroll 90s linear infinite}
.topics__marquee:hover .topics__track{animation-play-state:paused}
.topics__list{display:flex;flex:none}
.topics__list li{
  display:flex;align-items:center;flex:none;white-space:nowrap;
  font-size:clamp(3rem,9vw,9rem);font-weight:900;line-height:1.05;letter-spacing:-.05em;text-transform:uppercase;
}
.topics__list li::after{content:"";width:.16em;height:.16em;margin-inline:.45em;border-radius:50%;background:var(--yellow)}
.topics__list li:nth-child(even){color:transparent;-webkit-text-stroke:clamp(1.5px,.2vw,3px) var(--white)}
.topics__note{margin-top:clamp(28px,3.4vw,48px);font-size:var(--fs-lead);font-weight:500}

/* ---- THE EVENT INQUIRY -------------------------------------------------- */
.inquiry__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:48px;align-items:start}
.inquiry__side{grid-column:1 / span 4;position:sticky;top:calc(var(--nav-h) + 24px)}
.inquiry__title{font-size:var(--fs-l);margin-top:clamp(24px,3vw,40px)}
.progress{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-top:clamp(32px,4vw,56px)}
.progress__num{font-size:clamp(3.4rem,7vw,7rem);font-weight:900;line-height:.85;letter-spacing:-.05em;color:var(--blue)}
.progress__of{font-size:var(--fs-lead);font-weight:700}
.progress__bar{position:relative;flex-basis:100%;height:3px;margin-top:14px;background:var(--line-ink)}
.progress__bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--blue);transition:width .6s var(--ease)}

.inquiry__form{grid-column:6 / -1}
.q{padding-block:clamp(24px,3vw,40px);border-top:1px solid var(--line-ink)}
.q__num{font-size:var(--fs-label);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.q__ask{display:block;margin:10px 0 16px;font-size:var(--fs-lead);font-weight:700;line-height:1.35}
.q__input{
  display:block;width:100%;padding:12px 0;
  font:inherit;font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.35;color:var(--ink);
  background:transparent;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;outline:0;
  transition:border-color .25s,box-shadow .25s;
}
.q__input::placeholder{color:rgba(39,37,40,.4)}
.q__input:focus{border-bottom-color:var(--blue);box-shadow:0 1.5px 0 var(--blue)}
.q__area{min-height:6.5em;resize:vertical}
.q__date{max-width:18rem;color-scheme:light}
.q .chips{margin-top:18px}
.q__input + .chips{margin-top:22px}
.q__sub{display:grid;gap:2px;margin-top:22px}
.q__sub span{font-size:var(--fs-label);font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.q__pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.q__err{margin-top:12px;font-size:.875rem;font-weight:800;color:var(--blue)}
.q--invalid .q__input{border-bottom-width:3px;border-bottom-color:var(--blue)}
.q--invalid .chip span{border-color:var(--blue)}
.inquiry__actions{padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--line-ink)}
.inquiry__done{grid-column:6 / -1;padding:clamp(28px,4vw,56px);background:var(--blue);color:var(--white)}
.inquiry__done-title{font-size:var(--fs-l)}
.inquiry__done-text{margin-top:18px;max-width:40ch;font-size:var(--fs-lead);line-height:1.5}
.inquiry__done-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,40px)}
.inquiry__done .btn--blue{background:var(--white);color:var(--ink)}
.inquiry__done .btn--blue:hover{background:var(--ink);color:var(--white)}
.inquiry__done .btn:not(.btn--blue){background:transparent;color:var(--white);border-color:rgba(255,255,255,.7)}

/* ---- FINAL CTA ---------------------------------------------------------- */
.stage-close{min-height:80vh;min-height:80svh;display:grid;align-items:center;text-align:center;padding-block:var(--section-y)}
.stage-close__shade{
  background:radial-gradient(closest-side at 50% 50%,rgba(5,4,9,.5),rgba(5,4,9,.86)),rgba(0,40,150,.42);
}
.stage-close__wrap{position:relative}
.stage-close__title{
  max-width:14em;margin:0 auto clamp(28px,4vw,52px);
  font-size:clamp(2.3rem,6.4vw,6.6rem);line-height:.94;letter-spacing:-.045em;text-wrap:balance;
}

@media (max-width:1000px){
  .showrow__title,.showrow__body,.showrow__side{grid-column:1 / -1}
  .showrow{row-gap:22px}
  .showrow::before{inset:0 -16px}
  .showrow__side{grid-template-columns:auto auto;justify-content:space-between;align-items:end;justify-items:start}
  .show__glyph{width:clamp(100px,28vw,150px)}
  .inquiry__side{grid-column:1 / -1;position:static}
  .inquiry__form,.inquiry__done{grid-column:1 / -1}
}
@media (max-width:560px){
  .q__pair{grid-template-columns:1fr}
}


/* 7f. COMPOSITIONS — THE ROOTS METHOD (roots that draw, a descent in four steps) */

/* the root drawings (generated line-art; they draw themselves) */
.roots-svg{position:absolute;z-index:0;inset:0;width:100%;height:100%;pointer-events:none;color:var(--blue)}
.roots-svg path{
  fill:none;stroke:currentColor;stroke-linecap:butt;
  stroke-dasharray:1 1;stroke-dashoffset:1;
  animation:draw 2.8s var(--ease) var(--d,0s) forwards;
}
.roots-svg .r0{opacity:.85}
.roots-svg .r1{opacity:.66}
.roots-svg .r2{opacity:.5}
.roots-svg .r3{opacity:.4}
.roots-svg circle{fill:currentColor;opacity:0;animation:fade .9s ease calc(var(--d,0s) + 2.3s) forwards}
.roots-svg--final{color:var(--blue-60);opacity:.72}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---- HERO ---------------------------------------------------------------- */
.rm-hero{
  min-height:100vh;min-height:100svh;display:grid;align-items:center;
  padding-block:calc(var(--nav-h) + 48px) clamp(56px,7vw,110px);
}
.rm-hero__wrap{position:relative;z-index:1}
.rm-hero__title{
  max-width:9.5em;font-size:clamp(2.5rem,6.3vw,6.8rem);line-height:.92;letter-spacing:-.05em;color:var(--blue);
  text-wrap:balance;opacity:0;animation:fade 1.1s ease .2s forwards;
}
.rm-hero__tag{
  display:flex;align-items:center;gap:16px;margin-top:clamp(28px,3.4vw,52px);
  font-size:var(--fs-label);font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  opacity:0;animation:fade 1s ease 1.2s forwards;
}
.rm-hero__mark{height:clamp(40px,4.2vw,60px);width:auto}
.rm-hero__own{
  margin-top:18px;font-size:clamp(1.25rem,2.4vw,2.2rem);font-weight:800;line-height:1.1;letter-spacing:-.025em;text-transform:uppercase;
  opacity:0;animation:fade 1s ease 1.6s forwards;
}

/* ---- THE IDEA: five things we see, one thing underneath ----------------- */
.idea__title{display:grid;gap:.08em;max-width:18em;font-size:var(--fs-l)}
.idea__muted{color:var(--ink);opacity:.5}
.idea__blue{color:var(--blue)}
.idea__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:clamp(40px,5vw,72px)}
.idea__list li{
  display:flex;align-items:flex-end;min-height:clamp(96px,9vw,132px);padding:clamp(16px,1.8vw,26px);
  border:1px solid var(--ink);
  font-size:clamp(1rem,1.7vw,1.6rem);font-weight:900;line-height:1.04;letter-spacing:-.02em;text-transform:uppercase;
}
.idea__surface{margin-top:clamp(22px,2.6vw,34px);text-align:center;font-size:var(--fs-lead);font-weight:700}
.idea__lines{display:block;width:100%;height:clamp(70px,8vw,120px);margin-top:0;color:var(--blue)}
.idea__lines path{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke}
.idea__node{display:block;width:14px;height:14px;margin:-7px auto 0;border-radius:50%;background:var(--blue)}
.idea__way{margin-top:8px;text-align:center;font-size:var(--fs-lead);font-weight:700}
.idea__because{
  max-width:14em;margin:clamp(48px,6vw,96px) auto 0;text-align:center;color:var(--blue);
  font-size:var(--fs-xl);font-weight:900;line-height:.94;letter-spacing:-.045em;text-transform:uppercase;text-wrap:balance;
}

/* ---- THE FOUR STEPS: a line that descends as you scroll ------------------ */
.method .eyebrow{color:var(--white)}
.steps4{position:relative;margin-top:clamp(40px,5vw,72px);padding-left:clamp(44px,5.4vw,84px);--p:1}
.js .steps4{--p:0}
.steps4::before,.steps4::after{content:"";position:absolute;left:6px;top:0;width:1px}
.steps4::before{bottom:0;background:var(--line-light)}
.steps4::after{height:calc(var(--p) * 100%);background:var(--white);transition:height .2s linear}
.step4{
  position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:center;
  padding-block:clamp(20px,3vw,44px);border-top:1px solid var(--line-light);
}
.step4:first-child{border-top:0}
.step4__node{
  position:absolute;left:calc(-1 * clamp(44px,5.4vw,84px));top:50%;width:13px;height:13px;margin-top:-6px;
  border-radius:50%;border:1.5px solid var(--white);background:var(--ink);transition:background-color .4s;
}
.step4__word{
  grid-column:1 / span 7;
  font-size:clamp(3rem,8.6vw,9.4rem);font-weight:900;line-height:.86;letter-spacing:-.06em;text-transform:uppercase;
  transition:opacity .5s;
}
.step4__q{grid-column:8 / -1;font-size:clamp(1.3rem,2.4vw,2.2rem);font-weight:500;line-height:1.2;transition:opacity .5s}
.js .step4:not(.is-on) .step4__word,.js .step4:not(.is-on) .step4__q{opacity:.2}
.step4.is-on .step4__node{background:var(--white)}
.method__mantra{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:clamp(48px,6vw,88px);
  font-size:clamp(1.4rem,3vw,3rem);font-weight:900;letter-spacing:-.03em;text-transform:uppercase;
}
.method__mantra .arrow{width:clamp(30px,3.4vw,48px)}
.method__small{margin-top:24px;font-size:var(--fs-lead);line-height:1.5;opacity:.9}

/* ---- THE LENS BEHIND EVERYTHING ---------------------------------------- */
.lensx__title{display:grid;gap:.06em;max-width:16em;margin-top:clamp(24px,3vw,40px);font-size:var(--fs-l)}
.lensx__not{color:transparent;-webkit-text-stroke:clamp(1.2px,.16vw,2.5px) var(--ink)}
.lensx__is{margin-top:.35em;color:var(--blue)}
.lensx__grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:center;
  margin-top:clamp(56px,7vw,110px);
}
.lensx__rings{grid-column:1 / span 5;width:100%;max-width:460px;height:auto;overflow:visible}
.lensx__rings .ring{fill:none;stroke:var(--blue);stroke-width:1.5;transition:stroke-width .3s,fill .3s}
.lensx__rings .core{fill:var(--blue)}
.lensx__text{grid-column:7 / -1}
.lensx__whether{font-size:var(--fs-lead);font-weight:700}
.lensx__who{margin-top:16px;border-bottom:1px solid var(--line-ink)}
.lensx__who li{
  padding:12px 0;border-top:1px solid var(--line-ink);
  font-size:clamp(1.5rem,3vw,3rem);font-weight:900;line-height:1;letter-spacing:-.035em;text-transform:uppercase;
  transition:color .3s,padding-left .4s var(--ease);
}
.lensx__who li:hover{color:var(--blue);padding-left:14px}
/* hovering a listener lights its ring (person = innermost, audience = outermost) */
.lensx:has(.lensx__who li:nth-child(1):hover) .ring-5,
.lensx:has(.lensx__who li:nth-child(2):hover) .ring-4,
.lensx:has(.lensx__who li:nth-child(3):hover) .ring-3,
.lensx:has(.lensx__who li:nth-child(4):hover) .ring-2,
.lensx:has(.lensx__who li:nth-child(5):hover) .ring-1{stroke-width:6;fill:rgba(0,68,195,.08)}
.lensx__remains{margin-top:clamp(36px,4vw,56px);font-size:var(--fs-lead);font-weight:700}
.lensx__why{font-size:clamp(4.5rem,13vw,13rem);font-weight:900;line-height:.82;letter-spacing:-.06em;text-transform:uppercase;color:var(--blue)}
.lensx__and{margin-top:22px;font-size:var(--fs-lead);font-weight:700}
.lensx__behind{max-width:12em;font-size:var(--fs-l);font-weight:900;line-height:.94;letter-spacing:-.04em;text-transform:uppercase}

/* ---- WHERE IT SHOWS UP: four branches ---------------------------------- */
.tm{margin-left:.05em;font-size:.42em;letter-spacing:0;vertical-align:.95em}
.br__title{max-width:16ch;font-size:var(--fs-xl)}
.branches{
  position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap);
  margin-top:clamp(56px,7vw,110px);padding-top:56px;
}
.branches::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--ink)}
.branch{position:relative;padding-top:26px}
.branch::before{content:"";position:absolute;left:0;top:-56px;width:1px;height:70px;background:var(--ink)}
.branch::after{
  content:"";position:absolute;left:-6px;top:8px;width:13px;height:13px;border-radius:50%;
  background:var(--blue);transition:transform .4s var(--ease);
}
.branch:hover::after{transform:scale(1.7)}
.branch__title{font-size:clamp(1.6rem,2.6vw,2.6rem);line-height:.98;letter-spacing:-.03em}
.branch__desc{margin:14px 0 24px;max-width:30ch;font-size:var(--fs-body);line-height:1.6}

/* ---- THE MŌ BELIEF ------------------------------------------------------ */
.belief__mark{
  position:absolute;z-index:-1;right:-5vw;top:50%;height:min(130%,980px);width:auto;
  transform:translateY(-50%);filter:brightness(0) invert(1);opacity:.1;
}
.belief__title{max-width:13em;margin-top:clamp(24px,3vw,40px);font-size:var(--fs-xl)}
.belief__lines{display:grid;gap:12px;margin-top:clamp(40px,5vw,72px)}
.belief__lines p{font-weight:800;line-height:1.05;letter-spacing:-.03em}
.belief__lines p:nth-child(1){font-size:clamp(1.25rem,2vw,1.9rem);opacity:.9}
.belief__lines p:nth-child(2){font-size:clamp(1.6rem,3vw,2.8rem)}
.belief__lines p:nth-child(3){font-size:clamp(1.9rem,3.9vw,4rem);font-weight:900;text-transform:uppercase;text-wrap:balance;max-width:16em}

/* ---- FINAL -------------------------------------------------------------- */
.rm-final{min-height:80vh;min-height:80svh;display:grid;align-items:center;padding-block:var(--section-y)}
.rm-final__wrap{position:relative;z-index:1}
.rm-final__title{margin-bottom:clamp(28px,4vw,52px);font-size:clamp(3rem,10vw,10.5rem);line-height:.9;letter-spacing:-.055em}
.js .rm-final:not(.is-in) .roots-svg path,.js .rm-final:not(.is-in) .roots-svg circle{animation-play-state:paused}

@media (max-width:1000px){
  .idea__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .idea__list li:last-child{grid-column:1 / -1}
  .idea__lines{display:none}
  .idea__node{margin-top:28px}
  .step4__word,.step4__q{grid-column:1 / -1}
  .step4__q{margin-top:10px}
  .lensx__rings{grid-column:1 / -1;max-width:340px;margin-bottom:56px}
  .lensx__text{grid-column:1 / -1}
  .branches{grid-template-columns:1fr;row-gap:44px;padding-top:0;padding-left:30px}
  .branches::before{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .branch{padding-top:0}
  .branch::before{display:none}
  .branch::after{left:-30px;top:8px}
}
@media (max-width:1000px){
  .roots-svg--hero{opacity:.45}
}
@media (max-width:520px){
  .idea__list{grid-template-columns:1fr}
}


/* 7g. COMPOSITIONS — CONTACT ================================================ */
.btn--line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--white)}

/* ---- HERO + the 24-hour dial -------------------------------------------- */
.ct-hero{
  min-height:88vh;min-height:88svh;display:grid;align-items:center;
  padding-block:calc(var(--nav-h) + 48px) clamp(56px,7vw,100px);
}
.ct-hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:48px;align-items:center}
.ct-hero__copy{grid-column:1 / span 7}
.ct-hero__title{
  max-width:8em;font-size:clamp(2.8rem,8vw,8.6rem);line-height:.9;letter-spacing:-.05em;color:var(--white);
  opacity:0;animation:fade 1s ease .2s forwards;
}
.ct-hero__lead{margin-top:clamp(20px,2.4vw,32px);max-width:32ch;font-size:var(--fs-lead);line-height:1.5;opacity:0;animation:fade 1s ease .8s forwards}
.ct-hero__quick{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,40px);opacity:0;animation:fade 1s ease 1.2s forwards}
.ct-dial{grid-column:9 / -1;position:relative;width:100%;max-width:380px;justify-self:end;color:var(--white)}
.ct-dial svg{display:block;width:100%;height:auto}
.ct-dial__arc{stroke-dasharray:1 1;stroke-dashoffset:1;animation:draw 2.6s var(--ease) .5s forwards}
.ct-dial__num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(4rem,9vw,8rem);font-weight:900;letter-spacing:-.06em;line-height:1;
}
.ct-dial__num small{margin-left:.06em;font-size:.3em;letter-spacing:0;font-weight:800}

/* ---- WRITE YOUR MESSAGE ------------------------------------------------- */
.ct-write__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:40px;align-items:start}
.ct-write__side{grid-column:1 / span 4}
.ct-write__title{margin-top:clamp(24px,3vw,40px);font-size:var(--fs-l)}
.ct-ctx{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,3vw,40px)}
.ct-ctx li{padding:9px 14px;background:var(--blue-20);font-size:.8125rem;font-weight:700;line-height:1.25}
.ct-form{grid-column:6 / -1;display:grid;gap:clamp(22px,2.6vw,36px)}
.ct-field{padding-top:clamp(18px,2.2vw,28px);border-top:1px solid var(--line-ink)}
.ct-area{min-height:9em}
.ct-hint{margin-top:10px;font-size:.875rem;opacity:.72}
.ct-send{display:flex;flex-wrap:wrap;gap:12px}
.ct-note{max-width:52ch;font-size:.875rem;line-height:1.5;opacity:.75}

/* ---- OTHER WAYS --------------------------------------------------------- */
.ct-ways__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:56px;align-items:start}
.ct-ways__main{grid-column:1 / span 8}
.ct-ways__title{max-width:14ch;font-size:var(--fs-l)}
.crows{margin-top:clamp(32px,4vw,56px);border-bottom:1px solid var(--line-ink)}
.crow{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label arrow" "value arrow";
  align-items:center;column-gap:24px;row-gap:8px;
  padding-block:clamp(20px,2.4vw,34px);border-top:1px solid var(--line-ink);
  transition:color .35s;
}
.crow::before{
  content:"";position:absolute;inset:0 -24px;z-index:-1;background:var(--blue);
  transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);
}
.crow:hover,.crow:focus-visible{color:var(--white)}
.crow:hover::before,.crow:focus-visible::before{transform:scaleY(1)}
.crow__label{grid-area:label;font-size:var(--fs-label);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);transition:color .35s}
.crow:hover .crow__label,.crow:focus-visible .crow__label{color:var(--blue-pale)}
.crow__value{grid-area:value;font-size:clamp(1.5rem,3.4vw,3.2rem);font-weight:900;line-height:1;letter-spacing:-.035em;overflow-wrap:anywhere}
.crow .arrow{grid-area:arrow;width:44px}
.crow:hover .arrow,.crow:focus-visible .arrow{transform:translateX(9px)}
.ct-where{grid-column:9 / -1;position:sticky;top:calc(var(--nav-h) + 24px)}
.ct-where__city{margin-top:clamp(18px,2vw,28px);font-size:var(--fs-m);font-weight:900;line-height:.98;letter-spacing:-.035em;text-transform:uppercase}
.ct-where__addr{margin:14px 0 24px;font-size:var(--fs-lead);font-weight:500;line-height:1.4}

@media (max-width:1000px){
  .ct-hero__copy{grid-column:1 / -1}
  .ct-dial{grid-column:1 / -1;max-width:230px;justify-self:start}
  .ct-write__side,.ct-form{grid-column:1 / -1}
  .ct-ways__main,.ct-where{grid-column:1 / -1}
  .ct-where{position:static}
  .crow::before{inset:0 -16px}
}


/* 8. RESPONSIVE =========================================================== */

@media (max-width:1180px){
  .path{grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1fr)}
  .path__cta{grid-column:2 / -1;justify-self:start;margin-top:28px}
}

@media (max-width:900px){
  :root{--nav-h:72px}

  /* nav → full-screen menu */
  .nav__logo{width:56px}
  .nav__toggle{display:block}
  .nav__links{
    position:fixed;inset:0;z-index:1;
    flex-direction:column;justify-content:center;gap:6px;
    padding:calc(var(--nav-h) + 16px) var(--gutter) 48px;
    background:var(--blue) url("img/blue-texture.jpg") center/cover no-repeat;
    color:var(--white);
    opacity:0;visibility:hidden;
    transition:opacity .35s,visibility .35s;
  }
  .nav__links a{font-size:clamp(2rem,9vw,3rem);font-weight:900;letter-spacing:-.03em;text-transform:uppercase;padding-block:6px}
  .nav__links a::after{display:none}
  .nav.is-open{color:var(--white);background:transparent;box-shadow:none}
  .nav.is-open .nav__logo{color:var(--white)}
  .nav.is-open .nav__links{opacity:1;visibility:visible}
  html.menu-open{overflow:hidden}

  .hero{padding-bottom:56px}
  .hero__title{font-size:clamp(2.3rem,10.4vw,5rem)}

  .path{grid-template-columns:1fr;row-gap:14px;padding-block:32px}
  .path::before{inset:0 -16px}
  .path__num{padding-top:0}
  .path__cta{grid-column:auto;justify-self:start;margin-top:20px}

  .moway__cols{row-gap:44px}
  .moway__close,.moway__body,.moway__cta{grid-column:1 / -1}
  .moway__body{border-left:0;border-top:1px solid var(--line-light);padding-left:0;padding-top:28px}
  .moway__cta{padding-left:0}
  .moway__disc{width:120vw;right:-50vw;bottom:-72vw}
  .br-d{display:none}

  .roots__list{grid-template-columns:1fr;row-gap:22px}
  .roots__cta{justify-content:flex-start}

  .meet__grid{row-gap:0}
  .meet__text{grid-column:1 / -1;order:-1;padding-bottom:44px}
  .meet__figure{grid-column:1 / -1;justify-self:center;max-width:440px}

  .closer__ring{width:130vw;right:-70vw;top:-8%}
}

@media (max-width:700px){
  .proof{--logo-h:44px}
  .proof__inner{flex-direction:column;align-items:flex-start;gap:18px;padding-left:0}
  .proof__label{padding:0 var(--gutter);border-right:0}
  .proof__marquee{width:100%}
  .proof__label br{display:none}
}

@media (max-width:520px){
  .link{white-space:normal}
  .btn{padding:18px 22px;gap:14px}
  .hero__cta{flex-direction:column;align-items:center}
  .hero__cta .btn{width:min(100%,264px);justify-content:space-between}
  .closer__actions{flex-direction:column;align-items:stretch}
  .closer__actions .btn{justify-content:space-between}
}


/* 9. MOTION + ACCESSIBILITY =============================================== */

@keyframes rise{to{transform:none}}
@keyframes fade{to{opacity:1}}

/* WHY? — the one scroll moment on the page */
.js .roots__why{opacity:0;transform:translateY(7%);transition:opacity .9s ease,transform 1.1s var(--ease)}
.js .roots__why.is-in{opacity:1;transform:none}

:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.is-blue :focus-visible,.is-ink :focus-visible,.nav :focus-visible,.footer :focus-visible{outline-color:var(--yellow)}
.nav--dark :focus-visible,.nav.is-solid :focus-visible{outline-color:var(--blue)}       /* light nav → blue ring */
.nav.is-open :focus-visible{outline-color:var(--yellow)}                         /* full-screen blue menu → yellow ring */
.path:focus-within{outline:0}
.path__cta:focus-visible{outline:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .hero__title .line>span{transform:none}
  .hero__desc,.hero__cta{opacity:1}
  .js .roots__why{opacity:1;transform:none}
  .proof__track{animation:none;width:100%}
  .proof__list[aria-hidden="true"]{display:none}
  .proof__list{flex:1 1 auto;flex-wrap:wrap;justify-content:center;row-gap:20px}
  .proof__marquee{-webkit-mask-image:none;mask-image:none}
  .about-hero__title .line>span{transform:none}
  .about-hero__id{opacity:1}
  .about-hero__figure img{opacity:1}
  .biz-hero__stop,.biz-hero__start,.biz-hero__cta{opacity:1}
  .strike{background-size:100% .085em}
  .ppl-hero__calm,.ppl-hero__inside,.ppl-hero__areas,.ppl-hero__lead,.ppl-hero__cta{opacity:1;filter:none}
  .ripples i{animation:none;opacity:.28}
  .ripples i:nth-child(1){transform:scale(.24)}
  .ripples i:nth-child(2){transform:scale(.44)}
  .ripples i:nth-child(3){transform:scale(.64)}
  .ripples i:nth-child(4){transform:scale(.82)}
  .ripples i:nth-child(5){transform:scale(1)}
  .js .grow .grow__dot{transform:none;opacity:1}
  .stage-hero__title,.stage-hero__kinds,.stage-hero__not,.stage-hero__cta{opacity:1}
  .topics__track{animation:none;width:100%}
  .topics__list[aria-hidden="true"]{display:none}
  .topics__list{flex:1 1 auto;flex-wrap:wrap;row-gap:.1em}
  .topics__list li{font-size:clamp(1.8rem,5vw,4rem);white-space:normal}
  .rm-hero__title,.rm-hero__tag,.rm-hero__own{opacity:1}
  .roots-svg path{animation:none;stroke-dashoffset:0}
  .roots-svg circle{animation:none;opacity:1}
  .js .step4 .step4__word,.js .step4 .step4__q{opacity:1}
  .steps4{--p:1}
  .voices__track{animation:none;width:100%}
  .press__track{animation:none;width:100%}
  .press__list[aria-hidden="true"]{display:none}
  .press__list{flex:1 1 auto;flex-wrap:wrap;justify-content:center;row-gap:14px}
  .press__marquee{-webkit-mask-image:none;mask-image:none}
  .voices__list[aria-hidden="true"]{display:none}
  .voices__list{flex:1 1 auto;flex-wrap:wrap}
  .voices__row{-webkit-mask-image:none;mask-image:none}
  .voices__toggle,.voices__count,.voices__rows::before{display:none}
  .voices__rows{background:none}
  .tcard{opacity:1;transform:none}
  .tcard mark{background-size:100% .14em}
  .ct-hero__title,.ct-hero__lead,.ct-hero__quick{opacity:1}
  .ct-dial__arc{animation:none;stroke-dashoffset:0}
  .cta-pill{transition:none}
  .seal__ring{animation:none}
}


/* 10. "WHY." — THE CURIOSITY COMPANION ====================================
   One small presence that rides along the whole site. Built entirely by
   assets/companion.js; this is only its look. Sits opposite the cta-pill
   (bottom-LEFT) so the two never compete.                                 */

.mo-companion{
  position:fixed;left:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:45;
  display:flex;align-items:flex-end;gap:0;
  opacity:0;transform:translateY(26px) scale(.82);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
  font-family:var(--font-sans);
}
.mo-companion.is-in{opacity:1;transform:none}
.mo-companion.is-ar{left:auto;right:clamp(14px,2vw,26px)}

.mo-companion__dot{
  position:relative;width:52px;height:52px;border-radius:50%;border:0;padding:0;
  background:var(--blue);cursor:pointer;flex:none;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .3s var(--ease),box-shadow .3s;
  animation:moFloat 4.6s ease-in-out infinite;
}
.mo-companion__dot:hover{transform:scale(1.08)}
.mo-companion__dot:active{transform:scale(.94)}
.mo-companion__dot:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

.mo-companion__ring{
  position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--yellow);
  opacity:0;animation:moPulse 2.8s ease-out infinite;pointer-events:none;
}

.mo-companion__face{position:relative;width:100%;height:100%;display:block}
.mo-companion__body{fill:var(--blue)}
.mo-companion__leaf{fill:none;stroke:var(--yellow);stroke-width:3.4;stroke-linecap:round}
.mo-companion__eye{fill:#fff}
.mo-companion__mouth{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}

.mo-companion__close{
  position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--line-ink);background:var(--white);color:var(--ink);
  font-size:9px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.6);transition:opacity .25s,transform .25s;
}
.mo-companion__dot:hover + .mo-companion__close,
.mo-companion:hover .mo-companion__close,
.mo-companion__close:focus-visible{opacity:1;transform:none}

.mo-companion__bubble{
  position:absolute;left:62px;bottom:6px;max-width:min(62vw,280px);
  background:var(--ink);color:var(--white);font-size:.84rem;line-height:1.35;
  padding:9px 13px;border-radius:12px 12px 12px 3px;
  width:max-content;box-shadow:0 8px 20px rgba(0,0,0,.22);
  opacity:0;transform:translateY(6px) scale(.96);transform-origin:0 100%;
  transition:opacity .28s var(--ease),transform .28s var(--ease),background-color .25s,color .25s;
  pointer-events:none;white-space:normal;
}
.mo-companion.is-ar .mo-companion__bubble{left:auto;right:62px;border-radius:12px 12px 3px 12px;transform-origin:100% 100%}
.mo-companion.is-talking .mo-companion__bubble{opacity:1;transform:none}

/* tone awareness — glow + ring + bubble shift so "Why" always reads against its section */
.mo-companion[data-tone="ink"] .mo-companion__ring,
.mo-companion[data-tone="night"] .mo-companion__ring{border-color:var(--yellow);opacity:0}
.mo-companion[data-tone="night"] .mo-companion__dot,
.mo-companion[data-tone="ink"] .mo-companion__dot{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 8px 22px rgba(0,0,0,.4)}
.mo-companion[data-tone="paper"] .mo-companion__dot,
.mo-companion[data-tone="warm"] .mo-companion__dot{box-shadow:0 6px 16px rgba(39,37,40,.18)}
.mo-companion[data-tone="blue"] .mo-companion__body{fill:var(--ink)}
.mo-companion[data-tone="blue"] .mo-companion__dot{background:var(--white);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.mo-companion[data-tone="ink"] .mo-companion__bubble,
.mo-companion[data-tone="night"] .mo-companion__bubble{background:var(--white);color:var(--ink)}
.mo-companion[data-tone="blue"] .mo-companion__eye{fill:var(--white)}
.mo-companion[data-tone="blue"] .mo-companion__mouth{stroke:var(--white)}

/* minimized — tucked to a quiet dot, one tap brings it back */
.mo-companion.is-min .mo-companion__dot{width:30px;height:30px;animation:none;opacity:.55}
.mo-companion.is-min .mo-companion__dot:hover{opacity:1}
.mo-companion.is-min .mo-companion__ring,
.mo-companion.is-min .mo-companion__close,
.mo-companion.is-min .mo-companion__bubble{display:none}

@keyframes moFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes moPulse{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}

.mo-companion.is-calm .mo-companion__dot,
.mo-companion.is-calm .mo-companion__ring{animation:none}
.mo-companion.is-calm .mo-companion__bubble{transition:opacity .2s}

@media (max-width:560px){
  .mo-companion__dot{width:46px;height:46px}
  .mo-companion__bubble{font-size:.8rem;max-width:min(58vw,220px)}
}
@media print{.mo-companion{display:none}}

/* 11. SCROLL CUE — a seed, falling, on every front page ==================== */
.scrollcue{
  position:absolute;left:50%;bottom:clamp(18px,3vw,34px);z-index:1;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-decoration:none;color:inherit;opacity:.68;
  font-size:.6875rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  transition:opacity .3s ease;
}
.scrollcue:hover,.scrollcue:focus-visible{opacity:1}
.scrollcue__line{position:relative;width:1px;height:42px;background:currentColor;opacity:.4}
.scrollcue__seed{position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;background:currentColor;animation:seedFall 2.4s ease-in-out infinite}
@keyframes seedFall{0%{top:-2px;opacity:0}18%{opacity:1}82%{opacity:1}100%{top:40px;opacity:0}}
.scrollcue--inline{position:static;transform:none;margin:clamp(32px,4vw,52px) auto 0}
@media (prefers-reduced-motion: reduce){.scrollcue__seed{animation:none;top:18px;opacity:.8}}
@media (max-width:640px){.scrollcue{display:none}}
@media print{.scrollcue{display:none}}

/* 12. CASE STUDY (business.html) — a case, not a pitch ===================== */
.case__grid{display:grid;grid-template-columns:4fr 8fr;gap:var(--col-gap);align-items:start}
.case__industry{margin-top:14px;font-size:clamp(1.3rem,2vw,1.8rem);font-weight:800;letter-spacing:-.02em;max-width:12ch}
.case__note{margin-top:16px;font-size:.8125rem;line-height:1.55;opacity:.62;max-width:26ch}
.case__steps{display:grid;gap:clamp(18px,2.2vw,26px);border-top:1px solid var(--line-ink);padding-top:clamp(22px,2.6vw,32px)}
.case__steps li{display:grid;grid-template-columns:9em 1fr;gap:20px;align-items:baseline}
.case__k{font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.case__steps p{font-size:var(--fs-lead);line-height:1.5;max-width:52ch}
.case__result{
  margin-top:clamp(26px,3vw,38px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--line-ink);
  font-size:clamp(1.15rem,1.9vw,1.55rem);font-weight:700;letter-spacing:-.01em;max-width:52ch;
}
@media (max-width:1000px){
  .case__grid{grid-template-columns:1fr;gap:clamp(24px,3vw,36px)}
  .case__steps li{grid-template-columns:1fr;gap:8px}
}