/* Trim Tab: blocks added in the premium pass (pages, intro, new layouts) */

/* intro: logo underline draws once per visit, then the curtain lifts */
.intro{display:none}
.intro-on .intro{display:grid;place-items:center;position:fixed;inset:0;z-index:100;background:var(--paper);transition:transform 1s var(--ease)}
.intro__inner{position:relative;clip-path:inset(0 100% 0 0);animation:introDraw 1.1s .15s var(--ease) forwards}
.intro__logo{width:clamp(180px,22vw,300px);height:auto}
.intro-done .intro{transform:translateY(-100%)}
@keyframes introDraw{to{clip-path:inset(0 0 0 0)}}

/* active page in the menu */
[data-page="services"] [data-nav="services"]::after,
[data-page="approach"] [data-nav="approach"]::after{transform:scaleX(1)}

/* inner page opening */
.page-hero{padding:clamp(48px,6vw,96px) 0 clamp(64px,8vw,120px)}
.page-hero__grid{display:grid;grid-template-columns:1fr minmax(0,440px);gap:clamp(40px,6vw,120px);align-items:end;margin-bottom:clamp(48px,6vw,88px)}
.page-hero h1{font-size:clamp(52px,7.4vw,136px);font-weight:600;line-height:.96;letter-spacing:-.045em}
.page-hero__grid p{color:var(--muted);font-size:var(--lead);line-height:1.45}
.page-hero .why__grid{align-items:start}
.page-hero .why__text h1{margin-bottom:8px}
.service__title h2{font-size:clamp(28px,3.2vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1.02}
.service__title{transition:transform .45s var(--ease)}
.service:hover .service__title{transform:translateX(8px)}
.service{scroll-margin-top:100px}

/* services on the home page: sticky title, scrolling list */
.svc{padding:var(--section) 0}
.svc__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,120px)}
.svc__sticky{position:sticky;top:120px}
.svc__label{color:var(--muted);margin-bottom:clamp(32px,4vw,56px)}
.svc h2{font-size:clamp(40px,4.8vw,84px);line-height:.98;letter-spacing:-.04em;max-width:10ch}
.svc__sticky>p:not(.label){color:var(--muted);font-size:var(--lead);line-height:1.45;margin:28px 0 32px;max-width:34ch}
.svc__list{list-style:none;display:flex;flex-direction:column;gap:clamp(56px,7vw,112px)}
.svc__item a{display:block;text-decoration:none}
.svc__media{aspect-ratio:4/3}
.svc__media img{transition:transform 1.2s var(--ease)}
.svc__item a:hover .svc__media img{transform:scale(1.04)}
.svc__text{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-top:20px;border-bottom:1px solid var(--line);padding-bottom:18px;background:linear-gradient(var(--coral),var(--coral)) 0 100%/0 2px no-repeat;transition:background-size .5s var(--ease)}
.svc__item a:hover .svc__text{background-size:100% 2px}
.svc__text h3{font-size:clamp(24px,2.4vw,38px);letter-spacing:-.03em;line-height:1.05}
.svc__text p{color:var(--muted);font-size:16px;text-align:right}

/* short version of the models block */
.models--short .models__statement{max-width:18ch}
.models--short .model__sub{margin-bottom:0}

/* photo-only moment */
.stillframe{position:relative;margin:0}
.stillframe__img{aspect-ratio:21/9;max-height:88svh;width:100%}
.stillframe--short .stillframe__img{aspect-ratio:21/8}
.stillframe__img img{width:100%;height:100%;object-fit:cover}
.stillframe__cap{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-top:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.stillframe__cap .label{color:var(--muted)}
.stillframe__line{font-size:clamp(20px,1.8vw,28px);letter-spacing:-.015em;font-weight:500}

/* what I bring */
.bring{padding:clamp(72px,8vw,120px) 0 var(--section)}
.bring__title{font-size:clamp(40px,5vw,88px);line-height:1;letter-spacing:-.04em;max-width:16ch}
.bring__intro{color:var(--muted);font-size:var(--lead);line-height:1.45;max-width:46ch;margin:28px 0 clamp(56px,7vw,100px)}
.bring__grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.bring__grid li{padding:28px clamp(20px,2.5vw,40px) 40px 0;border-bottom:1px solid var(--line)}
.bring__grid li:not(:nth-child(3n+1)){padding-left:clamp(20px,2.5vw,40px);border-left:1px solid var(--line)}
.bring__grid h3{display:flex;align-items:center;gap:14px;font-size:clamp(20px,1.7vw,26px);letter-spacing:-.015em;margin-bottom:10px}
.bring__grid p{color:var(--muted);font-size:16px;padding-left:23px;max-width:38ch}
/* each strength carries the brand square; hovering a cell turns it into the tab and warms the cell */
.bring__grid li{position:relative;transition:background-color .5s var(--ease)}
.bring__grid h3::before{content:"";flex:none;width:9px;height:9px;box-sizing:border-box;border:1.5px solid var(--ink);transition:transform .8s cubic-bezier(.34,1.4,.64,1),background-color .35s var(--ease),border-color .35s var(--ease)}
.bring__grid li:nth-child(1) h3::before{background:var(--coral);border-color:var(--coral);transform:rotate(-28deg)}
.bring__grid li:nth-child(6) h3::before{background:var(--turquoise);border-color:var(--turquoise)}
.bring__grid li:hover h3::before{background:var(--coral);border-color:var(--coral);transform:rotate(-28deg)}
.bring__grid li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.bring__grid li:hover::after{transform:scaleX(1)}

/* 404 */
.notfound{min-height:calc(100svh - 76px - 1px);display:flex;align-items:center}
.notfound .wrap{width:100%}
.notfound__text{color:var(--muted);font-size:var(--lead);margin:24px 0 clamp(48px,6vw,80px)}
.notfound__links{display:flex;gap:32px;flex-wrap:wrap;margin-top:28px}

@media (max-width:1000px){
  .bring__grid{grid-template-columns:1fr 1fr}
  .bring__grid li:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .bring__grid li:nth-child(even){padding-left:clamp(20px,2.5vw,40px);border-left:1px solid var(--line)}
}
@media (max-width:820px){
  .page-hero__grid,.svc__grid{grid-template-columns:1fr;gap:24px}
  .svc__sticky{position:static;margin-bottom:24px}
  .svc__text{flex-direction:column;gap:6px}
  .svc__text p{text-align:left}
  .stillframe__img,.stillframe--short .stillframe__img{aspect-ratio:4/3}
  .stillframe__cap{flex-direction:column;gap:6px}
  .bring__grid{grid-template-columns:1fr}
  .bring__grid li,.bring__grid li:nth-child(even){padding:22px 0 26px;border-left:0}
}
.page-hero+.services{padding-top:0}



/* why trim tab: rudder diagram (tab turns, rudder swings, course draws) */
.why .link{display:inline-block;margin-top:32px}
.rudder{background:var(--white) radial-gradient(circle,#E2DFD8 1px,transparent 1.4px) 0 0/22px 22px;border:1px solid var(--line);padding:clamp(20px,3vw,40px)}
.rudder svg{width:100%;height:auto}
.rudder figcaption{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid var(--line);margin-top:16px;padding-top:14px;font-size:var(--small);color:var(--muted)}
.rudder__arm{transform-box:view-box;transform-origin:70px 180px;transform:rotate(-9deg)}
.rudder__tab{transform-box:fill-box;transform-origin:0% 50%;transform:rotate(-28deg)}
.rudder__course{stroke-dasharray:1;stroke-dashoffset:0}
.js .rudder__tab{transform:rotate(0);transition:transform .9s var(--ease) .3s}
.js .rudder__arm{transform:rotate(0);transition:transform 1.2s var(--ease) 1s}
.js .rudder__course{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) 1.6s}
.js .rudder.in .rudder__tab{transform:rotate(-28deg)}
.js .rudder.in .rudder__arm{transform:rotate(-9deg)}
.js .rudder.in .rudder__course{stroke-dashoffset:0}
.js .rudder figcaption span{opacity:.35;transition:opacity .4s var(--ease)}
.js .rudder.in figcaption span{opacity:1}
.js .rudder.in figcaption span:nth-child(1){transition-delay:.3s}
.js .rudder.in figcaption span:nth-child(2){transition-delay:1s}
.js .rudder.in figcaption span:nth-child(3){transition-delay:1.8s}
@media (prefers-reduced-motion:reduce){
  .js .rudder__tab{transform:rotate(-28deg)!important}
  .js .rudder__arm{transform:rotate(-9deg)!important}
  .js .rudder__course{stroke-dashoffset:0!important}
  .js .rudder figcaption span{opacity:1!important}
}

/* legal page */
.legal{padding:0 0 var(--section)}
.legal__grid{display:grid;grid-template-columns:minmax(0,260px) minmax(0,720px);gap:clamp(40px,8vw,160px)}
.legal__toc{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:10px}
.legal__toc .label{color:var(--muted);margin-bottom:8px}
.legal__toc a{text-decoration:none;color:var(--muted);font-size:15px;transition:color .2s var(--ease)}
.legal__toc a:hover{color:var(--ink)}
.legal__body h2{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.02em;line-height:1.2;margin:56px 0 16px;scroll-margin-top:100px}
.legal__body h2:first-child{margin-top:0}
.legal__body p,.legal__body li{color:var(--ink-80);font-size:17px;line-height:1.7}
.legal__body p+p{margin-top:14px}
.legal__body ul{margin:14px 0 0;padding-left:20px}
.legal__body li+li{margin-top:8px}
.legal__body b{color:var(--ink);font-weight:600}
.footer__legal{display:flex;gap:28px}
.footer__legal{align-items:baseline}
.footer__legal a{font-size:14px;color:var(--paper)}
@media (max-width:820px){
  .legal__grid{grid-template-columns:1fr}
  .legal__toc{position:static}
}

/* booking page: our layout around the Calendly calendar */
.book{padding:clamp(48px,6vw,96px) 0 var(--section)}
.book__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,112px);align-items:start}
.book__info{position:sticky;top:120px}
.book .book__title{font-size:clamp(48px,6vw,104px);font-weight:300;line-height:.94;letter-spacing:-.05em;max-width:none}
.book__title .line{display:block}
.book__title .line+.line{font-weight:600;letter-spacing:-.055em}
.book__lead{font-size:var(--lead);line-height:1.45;color:var(--muted);margin:28px 0 clamp(44px,4.4vw,64px);max-width:34ch}
/* steps as a quiet timeline: brand squares on one hairline; the first square is the turned tab */
.book__steps{list-style:none;position:relative;padding-left:32px}
.book__steps::before{content:"";position:absolute;left:4px;top:10px;bottom:10px;width:1px;background:var(--line)}
.book__steps li{position:relative;display:grid;gap:6px;padding:0 0 30px}
.book__steps li::before{content:"";position:absolute;left:-32px;top:4px;width:9px;height:9px;box-sizing:border-box;border:1.5px solid var(--ink);background:var(--paper)}
.book__steps li:first-child::before{background:var(--coral);border-color:var(--coral);transform:rotate(-28deg)}
.book__steps .label{font-size:12px;color:var(--ink)}
.book__steps p{font-size:16px;color:var(--ink-80);line-height:1.55;max-width:40ch}
/* calendar sits on a soft sheet that matches Calendly's own background, so it reads as one surface */
.book__panel{background:#FAFAFA;border:1px solid var(--line);box-shadow:0 40px 80px -48px rgba(38,50,56,.35)}
.book__panel-top,.book__panel-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px clamp(20px,2vw,28px)}
.book__panel-top{border-bottom:1px solid #ECEAE6}
.book__panel-top .label{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.book__panel-top .label::before{content:"";width:8px;height:8px;background:var(--turquoise)}
.book__clock{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.book__clock i{width:6px;height:6px;border-radius:50%;background:var(--coral)}
.book__calendar{min-width:300px;height:700px}
.book__panel-foot{position:relative;border-top:1px solid #ECEAE6;font-size:14px;color:var(--muted);flex-wrap:wrap}
.book__panel-foot p:first-child{display:flex;gap:18px}
.book__panel-foot p:first-child span{display:inline-flex;align-items:center;gap:8px}
.book__panel-foot p:first-child span::before{content:"";width:6px;height:6px;border:1.5px solid var(--muted);box-sizing:border-box}
.book__email{display:inline-flex;font-size:14px;color:var(--ink)}
.book__panel-foot .cta__toast{left:auto;right:clamp(20px,2vw,28px)}
.book__fallback{padding:40px 24px}
@media (max-width:1000px){
  .book__grid{grid-template-columns:1fr}
  .book__info{position:static}
}
@media (max-width:520px){
  .book__panel-top,.book__panel-foot{flex-direction:column;align-items:flex-start;gap:6px}
  .book__calendar{height:780px;min-height:0}
}
/* free Calendly can't be recoloured, so we take the blue out to sit with the brand */
.book__calendar iframe{filter:grayscale(1) contrast(1.06) brightness(.98)}

/* footer wordmark: letters rise from behind the brand line and fade into the dark */
.footer__brand{margin:clamp(56px,7vw,120px) 0 clamp(32px,4vw,56px)}
.footer__word{display:block;width:100%;height:auto;overflow:visible}
.footer__letters{transform-box:view-box}
.footer__bar{transform-box:fill-box;transform-origin:0 50%}
.js .footer__letters{transform:translateY(520px);transition:transform 1.6s var(--ease)}
.js .footer__bar{transform:scaleX(0);transition:transform 1.3s var(--ease) .5s}
.js .footer__tab{clip-path:inset(-30% 100% -30% 0);transition:clip-path 1s var(--ease) 1.5s}
.js .footer__brand.in .footer__letters{transform:none}
.js .footer__brand.in .footer__bar{transform:none}
.js .footer__brand.in .footer__tab{clip-path:inset(-30% 0 -30% 0)}
@media (prefers-reduced-motion:reduce){
  .js .footer__letters,.js .footer__bar{transform:none!important}
  .js .footer__tab{clip-path:none!important}
}

/* turquoise = the new course: small marks for results, never next to coral as an equal */
.service__get .label,.change__top .label{color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.service__get .label::before,.change__top .label::before{content:"";width:9px;height:9px;flex:none;box-sizing:border-box;border:1.5px solid var(--ink);background:transparent;transition:transform .7s cubic-bezier(.34,1.56,.64,1),background-color .35s var(--ease),border-color .35s var(--ease)}
.steps::before{background:linear-gradient(90deg,var(--ink) 0 41.5%,var(--turquoise) 41.5% 100%)}
@media (max-width:1000px){
  .steps::before{background:var(--ink)}
}

/* label row: both labels sit on one baseline */
.models__top{align-items:baseline}
.models__label,.models__link{line-height:1.4}

/* ways to work: columns line up row by row, like a quiet comparison */
.models__grid{grid-template-rows:repeat(4,auto)}
.models--short .models__grid{grid-template-rows:repeat(3,auto)}
.model{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;padding-top:0;padding-bottom:0}
.models--short .model{grid-row:span 3}
.model>*{padding-top:clamp(20px,2vw,28px)}
.model__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:clamp(28px,3vw,40px)}
.model__name{margin-bottom:0}
.model__fact{font-size:14px;color:#8F9A9F;text-align:right}
.model__sub{margin-bottom:0;max-width:24ch;padding-top:clamp(32px,3.4vw,52px)}
.model__body{color:#AEB6BA}
.model__fit{margin-top:clamp(28px,3vw,40px);padding-bottom:clamp(40px,5vw,72px);border-top:1px solid #42525A;font-size:15px;color:#C9CED0;line-height:1.55}
.model__fit .label{display:inline-flex;align-items:center;gap:10px;color:#8F9A9F;font-size:12px;margin-bottom:10px}
.model__fit .label::before{content:"";width:9px;height:9px;flex:none;box-sizing:border-box;border:1.5px solid rgba(244,242,238,.7);transition:transform .7s cubic-bezier(.34,1.56,.64,1),background-color .35s var(--ease),border-color .35s var(--ease)}
.model:hover .model__fit .label::before{transform:rotate(-28deg);background:var(--coral);border-color:var(--coral)}
@media (max-width:820px){
  .models__grid,.models--short .models__grid{grid-template-rows:none}
  .model,.models--short .model{grid-row:auto;grid-template-rows:none}
}
.model__fit p:not(.label){max-width:34ch;text-wrap:balance}
.model:nth-child(2) .model__fit p:not(.label){max-width:none;text-wrap:wrap}
.nowrap{white-space:nowrap}

/* What changes: each card plays in turn, the dash draws, then the line rises */
.js .changes__grid .change{transition-delay:calc(var(--d,0) * 160ms)}
.change__top .label::before{background:var(--turquoise);border-color:var(--turquoise)}
.change:hover .change__top .label::before,.change:focus-within .change__top .label::before{transform:rotate(-28deg);background:var(--coral);border-color:var(--coral)}
.js .change h3{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease) calc(var(--d,0) * 160ms + .5s),transform 1s var(--ease) calc(var(--d,0) * 160ms + .5s)}
.js .change.in h3{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .change h3{transition:none;opacity:1;transform:none}
}

/* why trim tab options: technical drawing (bp), scroll-pinned drawing, annotated photo */
.opt-bar{background:var(--ink);color:#fff;padding:16px 0}
.opt-bar .label{color:#fff}
.bp{margin:0}
.bp svg{width:100%;height:auto;max-height:78vh;overflow:visible}
.bp__label{font:500 12px var(--font);letter-spacing:.06em;text-transform:uppercase;fill:var(--muted)}
.bp__label--tab{fill:var(--coral)}
.bp__meta{font:400 11px var(--font);letter-spacing:.04em;fill:var(--muted)}
.bp__deg{font:500 11px var(--font);fill:var(--ink)}
.bp__rudder{transform-box:view-box;transform-origin:260px 452px;transition:transform 1.4s var(--ease)}
.bp__tab{transform-box:view-box;transform-origin:260px 540px;transition:transform 1s var(--ease)}
.bp__ship{transform-box:view-box;transform-origin:260px 330px;transition:transform 1.6s var(--ease)}
.bp__course,.bp__arc{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease)}
.bp__label--new,.bp__deg{opacity:0;transition:opacity .6s var(--ease)}
[data-step="1"] .bp__tab,[data-step="2"] .bp__tab,[data-step="3"] .bp__tab{transform:rotate(25deg)}
[data-step="1"] .bp__rudder .bp__arc,[data-step="2"] .bp__rudder .bp__arc,[data-step="3"] .bp__rudder .bp__arc{stroke-dashoffset:0}
[data-step="1"] .bp__deg--tab,[data-step="2"] .bp__deg--tab,[data-step="3"] .bp__deg--tab{opacity:1}
[data-step="2"] .bp__rudder,[data-step="3"] .bp__rudder{transform:rotate(-12deg)}
[data-step="2"] .bp__arc--rudder,[data-step="3"] .bp__arc--rudder{stroke-dashoffset:0}
[data-step="2"] .bp__deg--rudder,[data-step="3"] .bp__deg--rudder{opacity:1}
[data-step="3"] .bp__course{stroke-dashoffset:0;transition-duration:1.8s}
[data-step="3"] .bp__label--new{opacity:1;transition-delay:1s}
.bp-steps{list-style:none;margin-top:40px;border-top:1px solid var(--line)}
.bp-steps li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);color:var(--muted);opacity:.45;transition:opacity .6s var(--ease),color .6s var(--ease)}
.bp-steps li span{font-size:var(--small);color:var(--muted);min-width:1.2em}
.bp-steps li.on{opacity:1;color:var(--ink)}
.bp-steps li.on span{color:var(--coral)}
.bp-steps--big li{font-size:var(--body);line-height:1.5;padding:18px 0;display:grid;grid-template-columns:2.2em 1fr}
.bp-steps--big b{font-weight:600;display:block;font-size:var(--lead);margin-bottom:2px}
.bp-scroll{height:300vh;position:relative;background:var(--paper)}
.bp-scroll__pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:80px}
.bp-scroll .sec-top{margin-bottom:clamp(24px,3vw,48px)}
.bp-scroll .why__grid{align-items:center}
.bp-scroll .bp svg{max-height:calc(100vh - 200px);width:auto;margin-inline:auto}
.bp-scroll h2{font-size:clamp(32px,3.4vw,52px)}
.bp-scroll .bp-steps{margin-top:28px}
.bp-scroll__note{color:var(--muted);margin-top:28px;max-width:40ch}
.wake{position:relative;margin:0}
.wake picture,.wake img{display:block;width:100%;height:auto}
.wake__lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.wake__old{stroke:#fff;stroke-dasharray:4 7;opacity:.85}
.wake__new{stroke:var(--coral);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease) .8s}
.wake circle{fill:var(--coral)}
.wake.in .wake__new{stroke-dashoffset:0}
.wake__tag{position:absolute;font:500 12px var(--font);letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:6px 10px;background:rgba(38,50,56,.55);backdrop-filter:blur(6px)}
.wake__tag--old{right:3%;top:53%}
.wake__tag--new{right:3%;top:22%;background:var(--coral);opacity:0;transition:opacity .6s var(--ease) 2.2s}
.wake.in .wake__tag--new{opacity:1}
.wake__fig{display:block;margin-top:14px;font-size:var(--small);color:var(--muted)}
@media (max-width:820px){
  .bp-scroll{height:auto}
  .bp-scroll__pin{position:static;height:auto;padding:var(--section) 0}
}
@media (prefers-reduced-motion:reduce){
  .bp__rudder,.bp__tab,.bp__ship,.bp__course,.bp__arc,.wake__new{transition:none!important}
}

/* D: words grow. Small move, bigger shift, whole system; scroll sets --k1..--k3 */
.grow{height:320vh;position:relative;background:var(--paper)}
.grow__pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:76px;overflow:hidden}
.grow .sec-top{margin-bottom:clamp(20px,2.4vw,40px)}
.grow__intro{display:grid;grid-template-columns:1fr minmax(0,440px);gap:48px;align-items:end;margin-bottom:clamp(28px,4vh,56px)}
.grow__intro h2{font-size:var(--h2);line-height:1;letter-spacing:-.03em}
.grow__intro p{color:var(--muted);line-height:1.5}
.grow__rows{list-style:none;position:relative;padding-left:clamp(28px,3vw,48px)}
.grow__row{display:grid;grid-template-columns:clamp(96px,10vw,150px) 1fr;align-items:baseline;gap:24px;padding:clamp(10px,1.6vh,20px) 0;border-top:1px solid var(--line)}
.grow__row .label{color:var(--muted)}
.grow__row p{letter-spacing:-.02em;transform-origin:0 100%}
.grow__row[data-row="1"] p{font-size:clamp(18px,1.5vw,22px);line-height:1.4}
.grow__row[data-row="2"] p{font-size:clamp(26px,2.8vw,44px);line-height:1.15;letter-spacing:-.025em}
.grow__row[data-row="3"] p{font-size:clamp(56px,9.6vw,168px);line-height:.92;letter-spacing:-.045em;font-weight:600}
.grow__row[data-row="3"] .label{color:var(--coral)}
.js .grow__row{opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 40px))}
.js .grow__row[data-row="1"]{--k:var(--k1,1);opacity:calc(var(--k1,1) - var(--k3,0) * .5)}
.js .grow__row[data-row="2"]{--k:var(--k2,1);opacity:calc(var(--k2,1) - var(--k3,0) * .5)}
.js .grow__row[data-row="3"]{--k:var(--k3,1)}
.js .grow__row[data-row="3"] p{transform:scale(calc(.4 + .6 * var(--k3,1)))}
.grow__rail{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line)}
.grow__rail i{position:absolute;inset:0;background:var(--coral);transform-origin:50% 0;transform:scaleY(var(--rail,1))}
.grow__rail::before{content:"";position:absolute;left:-4px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--coral)}
.grow__foot{display:flex;justify-content:space-between;gap:24px;align-items:baseline;margin-top:clamp(20px,3vh,40px);color:var(--muted);opacity:var(--k3,1)}
@media (max-width:820px){
  .grow{height:auto}
  .grow__pin{position:static;height:auto;padding:var(--section) 0}
  .grow__intro{grid-template-columns:1fr;gap:20px}
  .grow__row{grid-template-columns:1fr;gap:8px}
  .grow__foot{flex-direction:column}
}
.grow__pin>.wrap{width:100%}

/* E: dark stage. The name, one paragraph, and the brand lever drawn under the last line */
.turn{position:relative;background:var(--ink);color:var(--paper)}
.turn::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.turn__pin{padding:var(--section) 0;overflow:hidden}
.turn__pin>.wrap{width:100%}
.turn__top{display:grid;grid-template-columns:1fr minmax(0,420px);gap:48px;align-items:start;margin-bottom:clamp(48px,6vw,96px)}
.turn__top .label{color:rgba(244,242,238,.5)}
.turn__why{color:rgba(244,242,238,.62);font-size:15px;line-height:1.6}
.turn__why b{display:block;color:var(--paper);font-weight:500;font-size:var(--lead);margin-bottom:8px;letter-spacing:-.01em}
.turn__lever{--tabw:clamp(40px,4vw,64px);position:relative;display:block;height:2px;margin-top:clamp(14px,1.4vw,22px);margin-right:var(--tabw)}
.turn__track{position:absolute;inset:0;background:rgba(244,242,238,.14)}
.turn__bar{position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,242,238,.9) 0%,var(--paper) 62%,var(--coral) 100%);transform-origin:0 50%;transform:scaleX(1)}
.js .turn__bar{transform:scaleX(0);transition:transform .8s cubic-bezier(.16,1,.3,1) .5s}
.js .turn.in .turn__bar{transform:none}
.turn__tab{position:absolute;left:100%;top:0;width:var(--tabw);height:2px;background:var(--coral);border-radius:2px;transform-origin:0 50%;transform:rotate(0) scaleX(0);transition:transform 1.1s cubic-bezier(.34,1.56,.64,1)}
.turn__hinge{position:absolute;left:100%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--coral);transform:scale(0);transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.turn__hinge::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid var(--coral);opacity:0;transform:scale(.4)}
.turn.is-done .turn__tab{transform:rotate(-16deg) scaleX(1);transition-delay:.15s}
.turn.is-done .turn__hinge{transform:scale(1)}
.turn.is-done .turn__hinge::after{animation:hingePulse 1.6s cubic-bezier(.16,1,.3,1) .2s}
@keyframes hingePulse{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(2.2)}}
.turn__foot{max-width:34ch;font-size:clamp(22px,2.1vw,34px);font-weight:300;line-height:1.38;letter-spacing:-.018em;color:rgba(244,242,238,.72);text-wrap:pretty}
.turn__job{display:block;width:fit-content;max-width:100%;margin-top:clamp(20px,2vw,32px);color:var(--paper);font-weight:400}
.js .turn__foot{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease) .1s,transform .6s var(--ease) .1s}
.js .turn.in .turn__foot{opacity:1;transform:none}
@media (max-width:820px){
  .turn__top{grid-template-columns:1fr;gap:16px}
  .turn__foot{font-size:21px}
}

/* scene finale: the tab flicks and a soft coral glow opens behind the hinge */
.turn__hinge::before{content:"";position:absolute;left:50%;top:50%;width:min(50vw,560px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,115,89,.22),rgba(255,115,89,.07) 45%,transparent 72%);transition:opacity 1.6s cubic-bezier(.16,1,.3,1),transform 2.2s cubic-bezier(.16,1,.3,1)}
.turn.is-done .turn__hinge::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
.turn__pin{isolation:isolate}
@media (prefers-reduced-motion:reduce){
}

/* What changes: before → after. The old state is struck through in coral, then the new one rises; cursor spotlight on hover */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.change{--ez:cubic-bezier(.16,1,.3,1);overflow:hidden;isolation:isolate}
.change::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,115,89,.07),transparent 60%);transition:opacity .5s var(--ez)}
.change:hover::after{opacity:1}
.change:hover{background:var(--white)}
.change__before{margin-top:clamp(28px,3vw,48px);font-size:16px;line-height:1.5;color:var(--muted);max-width:26ch}
.change__was{background:linear-gradient(var(--coral),var(--coral)) 0 58%/0% 1.5px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .6s var(--ez),color .5s var(--ez)}
.change:hover .change__was,.change:focus-within .change__was{background-size:100% 1.5px;color:#9AA3A7;transition:background-size .9s var(--ez),color .6s var(--ez) .2s}
.js .change__before{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ez) calc(var(--d,0) * 80ms + .15s),transform .6s var(--ez) calc(var(--d,0) * 80ms + .15s)}
.js .change.in .change__before{opacity:1;transform:none}
@media (hover:none){ .js .change.in .change__was{background-size:100% 1.5px;color:#9AA3A7;transition:background-size 1s var(--ez) calc(var(--d,0) * 160ms + 1.1s),color .8s var(--ez) calc(var(--d,0) * 160ms + 1.1s)} }
.js .change h3{transition-delay:calc(var(--d,0) * 80ms + .25s)}
.js .change.in:hover h3{transition-delay:0s}
.change h3{transition:transform .8s var(--ez),opacity .8s var(--ez)}
.js .change.in:hover h3{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){
  .js .change__before{opacity:1;transform:none;transition:none}
  .change__was{transition:none!important}
}
.cta__title .line{display:block}
.cta__title .line+.line{font-weight:600;letter-spacing:-.055em}

/* Approach hero: the name as a headline, closed by the brand lever, then the brief's two paragraphs */
.why-hero .why-hero__title{font-size:clamp(64px,12vw,210px);font-weight:300;letter-spacing:-.055em;line-height:.9;max-width:none}
.why-hero__title .line{display:block}
.why-hero__title .line+.line{font-weight:600;letter-spacing:-.06em}
.why-hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,120px);margin-top:clamp(36px,4vw,64px)}
.why-hero__lead{font-size:clamp(22px,2vw,30px);line-height:1.35;letter-spacing:-.015em;max-width:30ch}
.why-hero__body p{color:var(--ink-80);line-height:1.6;max-width:52ch}
.why-hero__note{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:var(--small);color:var(--muted)!important}
@media (max-width:820px){ .why-hero__grid{grid-template-columns:1fr} }
.start__label{white-space:nowrap}
/* services: each practice keeps its own brand colour on the square (matches the hero tags); hover turns it into the tab */
.service .service__get .label::before{border:0}
#leadership-programs .service__get .label::before{background:var(--coral)}
#team-sessions .service__get .label::before{background:var(--yellow)}
#talent-systems .service__get .label::before{background:var(--turquoise)}
.service:hover .service__get .label::before{transform:rotate(-28deg)}
/* models on phones: plain stacked blocks with even rhythm (no shared subgrid rows, so no empty gaps) */
@media (max-width:820px){
  .models__statement{font-size:clamp(30px,8vw,40px);max-width:none;margin:56px 0}
  .models__grid,.models--short .models__grid{display:block;grid-template-rows:none}
  .model,.models--short .model,.model:first-child{display:flex;flex-direction:column;padding:28px 0 32px;border-left:0;border-top:1px solid #42525A}
  .model>*{padding-top:0}
  .model__head{padding-top:0}
  .model__sub{padding-top:20px;max-width:none;font-size:22px;text-wrap:balance}
  .model__body{padding-top:14px;font-size:15px}
  .model__fit{margin-top:24px;padding-top:20px;padding-bottom:0}
  .model__fit p:not(.label),.model:nth-child(2) .model__fit p:not(.label){max-width:none;text-wrap:pretty}
  .js .model.in .model__fit .label::before{transform:rotate(-28deg);background:var(--coral);border-color:var(--coral);transition-delay:.6s}
}
/* Services "Getting started" stands alone, so it drops the gap meant for sitting under "How it works" */
.process--start{padding-top:clamp(56px,7vw,110px)}
.process--start .start{margin-top:0}
@media (max-width:820px){
  .process--start{padding:56px 0 72px}
  .start{padding-top:28px;gap:24px}
  .start__list li>p:last-child{max-width:none}
}

/* Jana's round 1 */
/* hero: what she offers sits right under the headline */
.hero__head{margin:auto 0;padding:clamp(48px,6vw,104px) 0 clamp(36px,4vw,64px)}
.hero .hero__head h1{margin:0;padding:0}
.hero__what{margin-top:clamp(24px,2.6vw,40px);font-size:clamp(19px,1.55vw,24px);line-height:1.45;letter-spacing:-.01em;color:var(--ink-80);max-width:46ch}
.hero__copy p.hero__built{color:var(--ink);font-size:clamp(19px,1.45vw,23px);line-height:1.4;letter-spacing:-.01em;max-width:24ch}
.hero__built::before{content:"";display:inline-block;width:9px;height:9px;margin-right:12px;vertical-align:.15em;background:var(--coral);transform:rotate(-28deg)}

/* services on home: no photos, one row per practice with its brand square */
.svc__list{gap:0;border-top:1px solid var(--line)}
.svc__text{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:clamp(18px,2vw,32px);padding:clamp(28px,3.2vw,52px) 0}
.svc__text h3{font-size:clamp(30px,3.4vw,56px);font-weight:500;letter-spacing:-.035em;transition:transform .5s var(--ease)}
.svc__text p{max-width:22ch}
.svc__mark{width:12px;height:12px;align-self:center;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.svc__mark--coral{background:var(--coral)}
.svc__mark--yellow{background:var(--yellow)}
.svc__mark--turquoise{background:var(--turquoise)}
.svc__item a:hover .svc__mark{transform:rotate(-28deg)}
.svc__item a:hover .svc__text h3{transform:translateX(6px)}
.svc__sticky{top:140px}

/* section break: a hairline with the turned tab at its centre */
.divider{display:flex;align-items:center;gap:20px;padding-top:var(--section);padding-bottom:0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line);transform-origin:100% 50%}
.divider::after{transform-origin:0 50%}
.divider span{width:11px;height:11px;flex:none;background:var(--coral);transform:rotate(-28deg)}
.js .divider::before,.js .divider::after{transform:scaleX(0);transition:transform .8s cubic-bezier(.16,1,.3,1) .1s}
.js .divider span{scale:0;transition:scale .5s cubic-bezier(.34,1.56,.64,1)}
.js .divider.in::before,.js .divider.in::after{transform:none}
.js .divider.in span{scale:1}
@media (max-width:820px){
  .svc__text{grid-template-columns:auto 1fr;row-gap:6px}
  .svc__text p{grid-column:2;text-align:left}
}
@media (prefers-reduced-motion:reduce){ .js .divider::before,.js .divider::after{transform:none} .js .divider span{scale:1} }
@media (max-width:820px){ .svc__text p{max-width:none} }

/* testimonial: one client voice, quiet type, the turned tab opens the quote */
.voice{padding:var(--section) 0}
.voice__grid{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,6vw,120px)}
.voice__label{color:var(--muted);padding-top:.6em}
.voice__quote{position:relative;font-size:clamp(22px,2.1vw,34px);font-weight:400;line-height:1.38;letter-spacing:-.018em;max-width:36ch;text-wrap:pretty}
.voice__quote::before{content:"";position:absolute;left:calc(-1 * clamp(24px,2.4vw,40px));top:.55em;width:11px;height:11px;background:var(--coral);transform:rotate(-28deg)}
.voice__who{display:flex;flex-direction:column;gap:2px;margin-top:clamp(32px,3.4vw,52px);padding-top:20px;border-top:1px solid var(--line);max-width:36ch;font-size:var(--small);color:var(--muted);line-height:1.5}
.voice__who b{color:var(--ink);font-weight:600;font-size:16px;margin-bottom:4px}
@media (max-width:820px){
  .voice__grid{grid-template-columns:1fr;gap:24px}
  .voice__label{padding-top:0}
  .voice__quote{font-size:21px;padding-left:24px}
  .voice__quote::before{left:0;top:.5em;width:9px;height:9px}
}
.voice__label{white-space:nowrap}
.divider--top{padding-top:clamp(8px,1vw,16px)}

/* round 2: both hero lines carry the coral square; no lone words at line ends */
.hero__lead::before{content:"";display:inline-block;width:9px;height:9px;margin-right:12px;vertical-align:.15em;background:var(--coral);transform:rotate(-28deg)}
.hero__lead,.svc__text p,.service__title p{text-wrap:balance}
.page-hero h1{text-wrap:balance}
.cta__foot{grid-template-columns:1.3fr 1fr auto}
.cta__email{white-space:nowrap;word-break:normal}
@media (max-width:1000px){ .cta__foot{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .cta__foot{grid-template-columns:1fr} }
/* testimonials carousel: slides stack in one cell, so the block keeps the height of the
   longest quote and nothing below it moves. Switching is one soft crossfade: the old quote
   drifts out, the new one drifts in from the side, the name follows a beat later. */
.voice__list{min-width:0}
.voice__track{--spring:cubic-bezier(.22,1,.36,1);display:grid;outline-offset:8px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.voice__body{grid-area:1/1;margin:0;pointer-events:none}
.voice__body.is-active{pointer-events:auto}
.voice__body>*{opacity:0;transform:translate3d(calc(var(--from,1) * 28px),0,0);filter:blur(6px);transition:opacity .45s var(--spring),transform .8s var(--spring),filter .6s var(--spring)}
.voice__body.is-leaving>*{transform:translate3d(calc(var(--from,1) * -28px),0,0);transition-duration:.35s,.6s,.4s}
.voice__body.is-active>*{opacity:1;transform:none;filter:none;transition-delay:.12s}
.voice__body.is-active>.voice__who{transition-delay:.22s}
.voice__nav{display:flex;align-items:center;gap:20px;margin-top:clamp(28px,3vw,44px)}
.voice__nav[hidden]{display:none}
.voice__btn{width:48px;height:48px;display:grid;place-items:center;background:none;border:1px solid var(--line);color:var(--ink);cursor:pointer;transition:background-color .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease)}
.voice__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .5s var(--spring,var(--ease))}
.voice__btn:hover:not(:disabled){background:var(--coral);border-color:var(--coral)}
.voice__btn[data-prev]:hover:not(:disabled) svg{transform:translateX(-3px)}
.voice__btn[data-next]:hover:not(:disabled) svg{transform:translateX(3px)}
.voice__btn:active:not(:disabled) svg{transform:scale(.88)}
.voice__btn:disabled{opacity:.35;cursor:default}
.voice__count{display:inline-flex;align-items:baseline;gap:.3em;font-size:var(--small);color:var(--muted);font-variant-numeric:tabular-nums}
.voice__now{display:inline-block;overflow:hidden;height:1.5em;line-height:1.5}
.voice__now b{display:inline-block;color:var(--ink);font-weight:600}
.voice__now b.is-rolling{animation:voiceRoll .55s cubic-bezier(.22,1,.36,1)}
@keyframes voiceRoll{from{transform:translateY(calc(var(--from,1) * 100%));opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .voice__body>*{transform:none!important;filter:none!important;transition:opacity .2s linear!important}
  .voice__now b.is-rolling{animation:none}
}

/* why trim tab, simplified: the name and the ship on the left, the paragraph and the lever on the right */
.turn__pin>.wrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,120px);align-items:start}
.turn__top{display:block;margin:0}
.turn__top .label{margin-bottom:clamp(24px,2.6vw,40px)}
.turn__why{font-size:16px;line-height:1.6;max-width:36ch}
.turn__why b{font-size:clamp(36px,4.2vw,68px);font-weight:500;letter-spacing:-.04em;line-height:1;margin-bottom:clamp(18px,2vw,28px)}
.turn__foot{margin-top:clamp(52px,6.4vw,104px)}
@media (max-width:820px){
  .turn__pin>.wrap{grid-template-columns:1fr;gap:40px}
  .turn__foot{margin-top:0}
}
.turn__why b{white-space:nowrap}

/* the lever under "My job…": a hairline that draws in, then the coral tab bends up. No dot, no glow */
.turn__lever{--tabw:clamp(64px,6vw,104px);height:1px;margin-top:clamp(18px,1.8vw,28px);margin-right:var(--tabw)}
.turn__track{background:rgba(244,242,238,.12)}
.turn__bar{background:linear-gradient(90deg,rgba(244,242,238,.55),var(--paper) 70%,var(--coral))}
.js .turn__bar{transition:transform 1.1s cubic-bezier(.65,0,.35,1) .45s}
.turn__flag{position:absolute;left:100%;bottom:-.5px;width:var(--tabw);height:calc(var(--tabw) * .24);overflow:visible}
.turn__flag path{fill:none;stroke:var(--coral);stroke-width:1.5px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.js .turn__flag path{stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.16,1,.3,1)}
.js .turn.is-done .turn__flag path{stroke-dashoffset:0}
.turn__tab,.turn__hinge{display:none}
.turn__lever{height:1.5px}
.turn__flag{bottom:calc(var(--tabw) * -.01 + .25px)}
.turn__flag{bottom:calc(var(--tabw) * -.01 + 1px)}