/* ==========================================================================
   ericalowery.com — personal landing page (v4: the customer journey)
   Tokens · base · chrome (nav, colour field, journey line) · sections in page
   order · reveals · responsive · reduced motion.
   Type scale is deliberately compact — more of the page per screen.
   ========================================================================== */

/* --- fonts ---------------------------------------------------------------- */
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/Poppins-300.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/Poppins-700.woff2") format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Caveat-400.woff2") format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Caveat-600.woff2") format("woff2")}

/* --- tokens --------------------------------------------------------------- */
:root{
--blue-50:#eff2fa;--blue-100:#d7dff4;--blue-200:#adbeeb;--blue-300:#8198da;--blue-400:#4e70d0;
--blue-500:#3153af;--blue-600:#25418d;--blue-700:#1c326e;--blue-800:#132453;--blue-900:#0c193b;
--corn:var(--blue-300);
--paper:#f6f4ee;--paper-100:#eeebe3;--paper-200:#d1ccc2;--paper-300:#b2ac9f;
--n-400:#90897a;--n-500:#6e695e;--n-600:#58544b;--n-700:#45423a;--ink:#23201a;
--gold:#e18c14;--gold-300:#eebf63;--gold-700:#8f5307;
--font:"Poppins",system-ui,-apple-system,sans-serif;--hand:"Caveat","Poppins",cursive;
--wrap:1240px;--gut:clamp(16px,3.2vw,50px);
--ease:cubic-bezier(.22,.61,.36,1);--expo:cubic-bezier(.16,1,.3,1);
--bg:var(--paper);--fg:var(--ink);--fg-2:var(--n-500);--fg-3:var(--n-400);
--line:var(--paper-200);--rule:color-mix(in oklab,var(--corn) 42%,var(--paper-200));--acc:var(--blue-600)
}
.t-dark{--bg:var(--blue-900);--fg:var(--paper);--fg-2:var(--blue-200);--fg-3:#7b8bb5;--line:#26355c;--rule:#2c3d68;--acc:var(--corn)}

/* --- base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{position:relative;margin:0;background:var(--paper);color:var(--n-700);font-family:var(--font);font-weight:400;font-size:clamp(14.5px,.92vw,16px);line-height:1.62;-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:clip}
h1,h2,h3{margin:0;color:var(--fg);font-weight:600;line-height:1.02;letter-spacing:-.035em}
h1{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.04}
h2{font-size:clamp(1.5rem,2.7vw,2.35rem)}
h3{font-size:clamp(.98rem,1.1vw,1.08rem);line-height:1.3;letter-spacing:-.015em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--blue-100);color:var(--blue-900)}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sec{position:relative;z-index:1;background:transparent;color:var(--fg-2)}
.sec.t-dark{background:var(--blue-900)}
.sec.pad{padding:clamp(60px,8.5vh,104px) 0}
.hairline{border-top:1px solid var(--rule)}
.mask{display:block;overflow:hidden;border-radius:6px;background:var(--paper-100)}

/* --- shared type ---------------------------------------------------------- */
.eye{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.eye .n{font-variant-numeric:tabular-nums;color:var(--acc)}
.eye i{display:block;width:28px;height:1px;background:var(--corn);opacity:.9;transform-origin:left;transition:transform .9s var(--expo) .15s}
.anim .eye i{transform:scaleX(0)}
.eye.in i{transform:none}
.lead{margin-top:18px;font-size:clamp(.96rem,1.08vw,1.08rem);font-weight:300;line-height:1.7;color:var(--fg-2);max-width:58ch}
.big{font-size:clamp(1.1rem,1.75vw,1.45rem);font-weight:300;line-height:1.44;letter-spacing:-.018em;color:var(--fg)}
.sm{font-size:.8125rem;color:var(--fg-3)}
.hand{margin-top:16px;font-family:var(--hand);font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.15;color:var(--blue-500);transform:rotate(-1.8deg)}
.t-dark .hand{color:var(--corn)}
figcaption{margin-top:10px;font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}

/* --- word-stagger headlines --------------------------------------------- */
h2 .w{display:inline-block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em;vertical-align:bottom}
.anim h2 .w>span{transform:translateY(115%);transition:transform .9s var(--expo)}
h2.in .w>span{transform:none}

/* --- buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 27px;border-radius:999px;background:var(--blue-700);color:var(--paper);font-size:.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:background .35s var(--ease),color .35s var(--ease),transform .18s var(--ease)}
.btn:hover{background:var(--blue-500)}
.btn:active{transform:scale(.98)}
.btn .arw{transition:transform .35s var(--expo)}
.btn:hover .arw{transform:translateX(4px)}
.btn--sm{padding:10px 18px;font-size:.625rem}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-300);color:var(--ink)}

/* --- chrome: colour field ----------------------------------------------- */
#field{position:fixed;inset:0;z-index:-2;background:var(--paper);will-change:background-color}

/* --- chrome: the customer journey --------------------------------------- */
/* the line lives in a reserved strip beside the content, never over it */
/* the thread needs room to fall: a generous left channel it sweeps across.
   The curve lives entirely inside this, which is what keeps it off the copy. */
/* even gutters both sides — the thread lives in the left one */
.rail-lane .wrap{padding-left:max(var(--gut),78px);padding-right:max(var(--gut),78px)}
@media (max-width:860px){.rail-lane .wrap{padding-left:max(var(--gut),58px);padding-right:max(var(--gut),58px)}}
.rail-lane .band{padding-left:0}
/* above the sections: the dark ones paint their own background, so a lower
   layer would hide the line from Proof onward */
#journey{position:absolute;top:0;left:0;width:100%;z-index:4;pointer-events:none;overflow:visible;mix-blend-mode:normal}
#journey .track{fill:none;stroke:var(--corn);stroke-width:1.1;stroke-linecap:round;opacity:.34}
@media (max-width:860px){#journey .track{stroke-width:.9}#ball{r:5}}
#journey .ghost{fill:none;stroke:var(--corn);stroke-width:1.1;stroke-linecap:round;stroke-dasharray:1.5 5;opacity:.2}
#journey .cup{fill:none;stroke:var(--corn);stroke-width:1.3;stroke-linecap:round;opacity:0}
#journey .cupring{fill:none;stroke:var(--corn);stroke-width:1.3;opacity:.55}
#ball{fill:var(--blue-400);opacity:0}
#journey .gate{stroke:var(--corn);stroke-width:1.2;stroke-linecap:round;opacity:.34;transition:transform .6s var(--expo),opacity .6s var(--ease)}
/* the gears take the gold as the head reaches them, and hold it after */
#journey .gear{fill:none;stroke:var(--corn);stroke-width:1;opacity:.3;transition:stroke .55s var(--ease)}
#journey .gear-t{stroke:var(--corn);stroke-width:1;stroke-linecap:round;opacity:.3;transition:stroke .55s var(--ease)}
#journey .gearg.passed .gear,#journey .gearg.passed .gear-t{stroke:var(--gold)}
#journey .domino{fill:none;stroke:var(--corn);stroke-width:1.1;opacity:.36;transition:transform .55s var(--expo)}
.reduced #ball{display:none}

/* --- chrome: nav -------------------------------------------------------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px var(--gut);border-bottom:1px solid transparent;transition:padding .4s var(--ease),background .5s var(--ease),border-color .5s var(--ease)}
.nav.stuck{padding:10px var(--gut);background:rgba(246,244,238,.85);backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);border-bottom-color:var(--rule)}
.nav.stuck.on-dark{background:rgba(12,25,59,.76);border-bottom-color:#26355c}
.nav__mark{display:flex;align-items:center;gap:10px;font-size:.6875rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;color:var(--ink);transition:color .5s var(--ease)}
/* the same cornflower as the ball travelling the page */
.nav__mark b{display:block;width:6px;height:6px;border-radius:50%;background:var(--blue-400);flex:0 0 auto;transition:background .5s var(--ease)}
.nav.on-dark .nav__mark{color:var(--paper)}
.nav.on-dark .nav__mark b{background:var(--gold)}
.nav.on-dark .btn{background:var(--paper);color:var(--blue-900)}
.nav.on-dark .btn:hover{background:var(--corn);color:var(--blue-900)}

/* --- icon links (nav + footer) ------------------------------------------- */
.navlinks{display:flex;align-items:center;gap:6px}
/* No disc, no ring — just the glyph. At the very top it sits on the hero's
   dark photo corner, so it is white there; once the nav sticks onto paper it
   becomes royal, and over the navy sections it goes light cornflower. */
.iconlink{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--paper);background:transparent;box-shadow:none;filter:drop-shadow(0 1px 3px rgba(20,16,10,.45));transition:color .35s var(--ease),background .35s var(--ease),transform .25s var(--ease),filter .35s var(--ease)}
.iconlink svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.iconlink svg .fill{fill:currentColor;stroke:none}
.iconlink:hover{color:var(--corn)}
/* stuck on paper: royal glyph, no ground */
.nav.stuck .iconlink{color:var(--blue-600);filter:none}
.nav.stuck .iconlink:hover{color:var(--blue-800)}
.iconlink:active{transform:scale(.94)}
/* over the navy sections: light cornflower glyph, still no ground */
/* both selectors carry four classes so this always outranks .nav.stuck */
.nav.on-dark:not(.stuck) .iconlink,.nav.on-dark.stuck .iconlink{color:var(--blue-200);background:transparent;box-shadow:none;filter:none}
.nav.on-dark:not(.stuck) .iconlink:hover,.nav.on-dark.stuck .iconlink:hover{color:var(--paper)}
.foot__icons .iconlink{color:var(--gold);background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.foot__icons .iconlink:hover{background:rgba(225,140,20,.16);color:var(--gold-300)}

/* --- 01 hero ------------------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:104px 0 56px;overflow:hidden}
/* the bookshelf reads as the room she is in, not a portrait: full-bleed on the
   right, dissolving to nothing before it reaches the copy */
.hero__wash{position:absolute;top:0;right:0;width:min(54%,700px);height:100%;object-fit:cover;object-position:58% 24%;z-index:-1;filter:saturate(.9) contrast(1.02);
-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.42) 20%,rgba(0,0,0,.88) 46%,#000 68%);
mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.42) 20%,rgba(0,0,0,.88) 46%,#000 68%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 34%,rgba(246,244,238,.72) 52%,rgba(246,244,238,.22) 70%,transparent 84%)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);width:100%;position:relative;z-index:1}
.hero h1{max-width:15ch}
/* the hero copy overlaps the bookshelf wash, so it uses darker ink than the
   page-wide muted tokens (which are tuned for bare paper) */
.hero .lead{max-width:44ch;color:var(--n-700)}
.hero__eye{color:var(--n-600)}
.hero h1 em{font-style:normal;color:var(--blue-500)}
.hero h1 em.scrambling{color:var(--corn)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px}
.hero__cue{display:flex;align-items:center;gap:10px;font-size:.5625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3)}
.hero__cue i{display:block;width:1px;height:24px;background:linear-gradient(var(--corn),transparent);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);transform-origin:top;opacity:.45}50%{transform:scaleY(1);opacity:1}}
.hero__fig{margin:0;justify-self:end;width:100%;max-width:clamp(220px,26vw,330px)}
.hero__fig .mask{box-shadow:0 0 0 1px var(--rule),0 26px 50px -34px rgba(12,25,59,.5)}
.hero__fig img{width:100%;aspect-ratio:1 / 1;max-height:44svh;object-fit:cover;object-position:50% 26%;filter:saturate(.96)}

/* --- 02 the problem ------------------------------------------------------ */
.problem h2{max-width:20ch}
.problem .big{font-size:clamp(.98rem,1.5vw,1.2rem);line-height:1.5}
.problem__cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,72px);margin-top:clamp(24px,3.5vh,42px);align-items:start}
.problem__turn{font-size:clamp(.96rem,1.15vw,1.06rem);font-weight:300;line-height:1.66;color:var(--fg-2);padding-left:18px;border-left:2px solid var(--corn)}

/* --- 03 how I work ------------------------------------------------------- */
.steps{list-style:none;margin:clamp(24px,3.5vh,42px) 0 0;padding:0;border-top:1px solid var(--rule);counter-reset:s}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.6vw,38px);padding:clamp(16px,2.2vh,26px) 0;border-bottom:1px solid var(--rule);transition:padding-left .55s var(--expo),background .4s var(--ease)}
.step__n{font-size:.625rem;font-weight:500;letter-spacing:.18em;color:var(--blue-600);padding-top:5px;font-variant-numeric:tabular-nums}
.step h3{transform-origin:left center;transition:color .5s var(--ease),transform .55s var(--expo)}
.step p{margin-top:7px;max-width:56ch;font-weight:300;color:var(--fg-2)}
.step.on{padding-left:16px;background:linear-gradient(90deg,var(--blue-50),transparent 70%)}
.step.on .step__n{color:var(--blue-600)}
.step.on h3{color:var(--blue-700);transform:scale(1.08)}

/* --- 04 how I think ----------------------------------------------------- */
.lenses{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(24px,3.5vh,42px)}
.lenscard{padding:17px 17px 19px;border-radius:12px;background:color-mix(in oklab,var(--corn) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--corn) 40%,transparent);transition:background .45s var(--ease),box-shadow .45s var(--ease),transform .6s var(--expo)}
.lenscard:hover{background:color-mix(in oklab,var(--corn) 16%,transparent);box-shadow:inset 0 0 0 1px var(--corn)}
.lenscard b{display:block;font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-600)}
.lenscard h3{margin:8px 0 6px;color:var(--blue-700)}
.lenscard p{font-size:.8125rem;font-weight:300;color:var(--fg-2)}

@media (max-width:1000px){.lenses{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lenses{grid-template-columns:1fr}}

/* --- 05 what drives me -------------------------------------------------- */
/* photo left, copy right */
/* the photo column is sized to the photo, so the copy sits right beside it
   instead of across an empty half-column */
.drives__grid{display:grid;grid-template-columns:clamp(250px,31vw,420px) minmax(0,1fr);gap:clamp(28px,3.4vw,54px);align-items:stretch}
.drives__grid > div{display:flex;flex-direction:column;justify-content:center}
.drives h2{max-width:16ch}
.drives__body{margin-top:18px;font-size:clamp(.88rem,1.05vw,1rem);font-weight:300;line-height:1.72;color:var(--fg-2);max-width:none}
.drives__kicker{margin-top:18px;font-family:var(--hand);font-size:clamp(1.15rem,1.75vw,1.5rem);line-height:1.24;color:var(--blue-500);max-width:none}
.drives .sm{margin-top:clamp(24px,3vh,38px)}
.drives{overflow:hidden}
.drives__fig{margin:0}
.drives__fig .mask{box-shadow:0 0 0 1px var(--rule)}
.drives__fig{max-width:100%;justify-self:stretch;position:relative;min-height:clamp(300px,34vw,460px)}
.drives__fig .mask{position:absolute;inset:0}
.drives__fig img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(.94)}

/* --- transitional bands (parallax, no captions) ------------------------- */
.band{position:relative;z-index:1;overflow:hidden}
/* the pause before the numbers is full-height: it is also the only text-free
   window wide enough for the paper→navy change to happen unseen */
.band--b{height:clamp(120px,20svh,200px)}

/* --- 06 what I believe -------------------------------------------------- */
.believe{overflow:hidden}
/* the gaps double as corridors for the journey line, so keep them >=28px */
.beliefs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,38px);margin-top:clamp(24px,3.4vh,44px)}
.belief{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 20px 24px;border-radius:14px;background:color-mix(in oklab,var(--paper) 78%,transparent);box-shadow:inset 0 0 0 1px var(--rule);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:transform .6s var(--expo),box-shadow .5s var(--ease),background .5s var(--ease)}
.belief:hover{box-shadow:inset 0 0 0 1px var(--corn),0 20px 40px -30px rgba(12,25,59,.5)}
.belief b{font-size:.625rem;font-weight:500;letter-spacing:.18em;color:var(--blue-600);font-variant-numeric:tabular-nums}
.belief b::after{content:"";display:block;width:22px;height:1px;margin-top:9px;background:var(--corn)}
.belief p{font-size:clamp(.98rem,1.32vw,1.18rem);font-weight:500;line-height:1.34;letter-spacing:-.018em;color:var(--fg)}
.belief:hover p{color:var(--blue-700)}

/* --- 07 why me ---------------------------------------------------------- */
.why__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,4vw,64px);align-items:center}
.why h2{max-width:12ch}
.why{overflow:hidden}
/* leaves a clear right-hand channel for the journey line to keep running down */
.why__fig{margin:0;justify-self:end;width:100%;max-width:clamp(260px,33vw,392px)}
.why__fig .mask{position:relative;box-shadow:0 0 0 1px var(--rule)}
.why__fig img{width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;object-position:50% 34%;filter:saturate(.94)}
.why__shot2{position:absolute;inset:0;height:100%!important;opacity:0;object-position:50% 30%}
.why__body{margin-top:20px;font-size:clamp(1rem,1.35vw,1.2rem);font-weight:300;line-height:1.68;color:var(--fg-2);max-width:52ch}
.why__kicker{margin-top:20px;font-size:clamp(1.1rem,1.75vw,1.5rem);font-weight:600;letter-spacing:-.028em;line-height:1.2;color:var(--blue-600);max-width:26ch}

/* --- 08 featured work --------------------------------------------------- */
.works{margin-top:clamp(24px,3.5vh,42px);border-top:1px solid var(--rule)}
.workrow{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.6vw,38px);padding:clamp(18px,2.4vh,28px) 0;border-bottom:1px solid var(--rule);align-items:start;transition:padding-left .55s var(--expo),background .4s var(--ease)}

.workrow__n{font-size:.625rem;font-weight:500;letter-spacing:.18em;color:var(--blue-600);padding-top:6px;font-variant-numeric:tabular-nums}
.workrow h3{font-size:clamp(1.05rem,1.5vw,1.3rem);transition:color .5s var(--ease)}

.workrow__s{margin-top:6px;font-weight:300;color:var(--fg-2)}
.workrow__tags{display:flex;flex-wrap:wrap;gap:7px;padding-top:5px}
.workrow__tags span{padding:5px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--corn) 42%,transparent);font-size:.6875rem;color:var(--n-500);background:transparent;transition:background-color .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
.workrow__tags span.filled{background-color:color-mix(in oklab,var(--corn) 20%,transparent);color:var(--blue-700);box-shadow:inset 0 0 0 1px var(--corn)}

/* --- 09 proof ----------------------------------------------------------- */
.proof__grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,.58fr);gap:clamp(26px,4vw,64px);align-items:center;margin-top:clamp(24px,3.5vh,42px)}
.stats{display:grid;gap:0}
/* the number sits centred between the rules; the label's last line sits on the
   number's baseline, so a two-line label no longer throws the row off */
.stat{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,28px);align-items:end;padding:clamp(26px,3.4vh,38px) 0}
.stat__note{position:absolute;top:clamp(14px,2vh,22px);left:0;font-style:normal;font-size:.625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--corn)}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--corn);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--expo)}
.stat.in::before{transform:none}
.stat__v{display:flex;align-items:baseline;gap:1px;font-size:clamp(2rem,4.4vw,3.4rem);font-weight:700;line-height:.9;letter-spacing:-.05em;color:var(--fg);font-variant-numeric:tabular-nums}
.stat__v i{font-style:normal;font-size:.4em;font-weight:500;color:var(--corn);align-self:flex-start;padding-top:.2em}
.stat__l{font-size:.8125rem;font-weight:300;line-height:1.5;color:var(--fg-2);max-width:46ch;padding-bottom:.14em}
.proof__fig{margin:0}
.proof__fig .mask{box-shadow:0 0 0 1px #2c3d68}
.proof__fig img{width:100%;aspect-ratio:4 / 5;object-fit:cover;filter:saturate(.92)}
.proof__line{margin-top:clamp(30px,4.5vh,58px);font-weight:300;color:var(--fg-2)}
.marq{margin-top:16px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq__t{display:flex;gap:clamp(26px,3.4vw,48px);width:max-content;will-change:transform}
.marq__t.run{animation:marq var(--marq-dur,34s) linear infinite}
.marq span{font-size:clamp(1rem,1.9vw,1.6rem);font-weight:500;letter-spacing:-.028em;color:var(--corn);white-space:nowrap;opacity:.6;transition:opacity .4s var(--ease),color .4s var(--ease)}
.marq span:hover{opacity:1;color:var(--paper)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--marq-shift,50%)))}}

/* --- 10 where I fit ----------------------------------------------------- */
.fit__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px);margin-top:clamp(22px,3vh,38px)}
.fit__cols h3{font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding-bottom:14px}
.fit__cols ul{list-style:none;margin:0;padding:0}
.fit__cols li{position:relative;padding:14px 0 14px 26px;font-size:.9375rem;font-weight:300;transform-origin:left center;transition:color .4s var(--ease),padding-left .45s var(--expo),transform .5s var(--expo)}
/* best fit: a filled, ticked, cornflower panel */
.fit__yes{padding:clamp(20px,2.6vh,28px) clamp(18px,2vw,26px);border-radius:14px;background:color-mix(in oklab,var(--corn) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--corn) 46%,transparent)}
.fit__yes h3{color:var(--corn);border-bottom:1px solid color-mix(in oklab,var(--corn) 40%,transparent)}
.fit__yes li{color:var(--paper);border-bottom:1px solid color-mix(in oklab,var(--corn) 20%,transparent)}
.fit__yes li:last-child{border-bottom:0}
.fit__yes li::before{content:"";position:absolute;left:2px;top:22px;width:9px;height:5px;border-left:1.5px solid var(--corn);border-bottom:1.5px solid var(--corn);transform:rotate(-45deg)}
.fit__yes li:hover{padding-left:32px}
/* not a fit: unfilled, dashed, quiet, struck on hover */
.fit__not{padding:clamp(20px,2.6vh,28px) clamp(18px,2vw,26px);border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
.fit__not h3{color:var(--fg-3);border-bottom:1px dashed var(--line)}
.fit__not li{color:var(--fg-3);border-bottom:1px dashed color-mix(in oklab,var(--line) 70%,transparent)}
.fit__not li:last-child{border-bottom:0}
.fit__not li::before{content:"";position:absolute;left:2px;top:24px;width:10px;height:1px;background:var(--fg-3);opacity:.7}
.fit__not li:hover{color:var(--fg-2);text-decoration:line-through;text-decoration-color:var(--fg-3)}

/* --- 11 get in touch ---------------------------------------------------- */
.proof{border-top:2px solid var(--corn)}
.contact{overflow:hidden;border-top:1px solid color-mix(in oklab,var(--corn) 42%,transparent)}
/* fills from the left as you scroll — a progress bar in feel, not in function */
.contact::before{content:"";position:absolute;top:0;left:0;width:min(62%,760px);height:3px;background:var(--corn);transform-origin:left center;transform:scaleX(var(--fill,.04));will-change:transform}
.contact h2{max-width:26ch}
.contact__row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:clamp(78px,11vh,130px)}
.contact__link{font-size:.875rem;color:var(--corn);border-bottom:1px solid color-mix(in oklab,var(--corn) 55%,transparent);transition:color .3s var(--ease),border-color .3s var(--ease)}
.contact__link:hover{color:var(--paper);border-bottom-color:var(--paper)}
.contact__block{height:clamp(56px,7vh,84px);margin-top:clamp(34px,5vh,64px);background:var(--corn);will-change:transform}

/* --- footer ------------------------------------------------------------- */
.foot{position:relative;z-index:1;background:var(--ink);color:var(--paper-100);padding:clamp(52px,7vh,88px) 0 clamp(34px,4.5vh,52px)}
.foot__top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:clamp(20px,3vh,32px)}
.foot__mark{display:inline-flex;color:var(--paper)}
/* the same cornflower as the ball and the favicon */
.foot__mark b{background:var(--blue-400)}
.foot__eye{margin:0;color:var(--paper-300);font-size:.6875rem}
.foot__eye i{background:rgba(129,152,218,.3);opacity:1}
.anim .foot__eye i,.foot__eye i{transform:none}
.foot__st{font-size:clamp(1.5rem,3.4vw,2.7rem);font-weight:600;letter-spacing:-.035em;line-height:1.05;color:var(--paper);max-width:18ch}
/* heading left, button right, on one band */
.foot__band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.foot__icons{margin-top:clamp(20px,3vh,30px)}
/* below the divider: copyright left, disciplines right */
.foot__base{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;justify-content:space-between;margin-top:clamp(28px,4.5vh,50px);padding-top:20px;border-top:1px solid rgba(129,152,218,.3)}
.foot__row>a{font-size:.875rem;color:var(--corn);border-bottom:1px solid color-mix(in oklab,var(--corn) 50%,transparent)}
.foot__row>a:hover{color:var(--paper);border-bottom-color:var(--paper)}
.foot__actions{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;margin-top:clamp(18px,3vh,30px)}
.foot__legal{font-size:.6875rem;letter-spacing:.02em;color:var(--n-400)}
.foot__fine{font-size:.6875rem;color:var(--n-400)}

/* --- the thread touching things ----------------------------------------- */
/* whatever the head is level with lights up: the same treatment the numbered
   steps already had, extended to every list on the page */
.belief.lit{box-shadow:inset 0 0 0 1px var(--corn),0 20px 40px -30px rgba(12,25,59,.5)}
.belief.lit p{color:var(--blue-700)}
.lenscard__ico{display:block;margin-bottom:12px;color:var(--corn);transition:color .45s var(--ease)}
.lenscard__ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lenscard:hover .lenscard__ico{color:var(--gold)}
.workrow.lit{padding-left:16px;background:linear-gradient(90deg,var(--blue-50),transparent 75%)}
.workrow.lit h3{color:var(--blue-700)}
.stat.lit .stat__v{color:var(--corn)}
.stat.lit .stat__l{color:var(--paper)}
.fit__cols li.lit{color:var(--fg);padding-left:26px;transform:scale(1.07)}
.fit__yes li.lit{color:var(--paper)}
#link{stroke:var(--corn);stroke-width:1;opacity:0;transition:opacity .5s var(--ease)}

/* the close: the thread lands ON the button, which sits above the line */
.contact__row{position:relative;z-index:8}
#contactCta{position:relative;z-index:8;transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease),transform .35s var(--expo);background:var(--blue-500);color:var(--paper)}
#contactCta.charged{background:var(--gold);color:var(--ink);box-shadow:0 0 0 6px rgba(225,140,20,.16),0 10px 30px -12px rgba(225,140,20,.5)}
#contactCta.pulse{animation:charge .9s var(--ease)}
@keyframes charge{0%{box-shadow:0 0 0 0 rgba(238,191,99,.6),0 10px 30px -12px rgba(225,140,20,.5)}60%{box-shadow:0 0 0 18px rgba(238,191,99,0),0 10px 30px -12px rgba(225,140,20,.5)}100%{box-shadow:0 0 0 6px rgba(225,140,20,.16),0 10px 30px -12px rgba(225,140,20,.5)}}

/* --- footer's quiet secondary CTA + its modal ---------------------------- */
/* the Get in touch CTA's shape and type, outlined instead of filled: same pill
   radius, same padding and label treatment, no fill and no shadow */
.foot__cta{display:inline-flex;align-items:center;padding:14px 26px;border:1px solid rgba(129,152,218,.5);border-radius:999px;background:none;box-shadow:none;color:var(--corn);font-size:.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:border-color .35s var(--ease),color .35s var(--ease),background-color .35s var(--ease)}
.foot__cta:hover{border-color:var(--corn);color:var(--paper);background-color:rgba(129,152,218,.08)}
.foot__cta:active{background-color:rgba(129,152,218,.14)}
.foot__cta .arw{transition:transform .35s var(--expo)}
.foot__cta:hover .arw{transform:translateX(4px)}

.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(16px,4vw,40px)}
.modal[hidden]{display:none}
.modal__scrim{position:absolute;inset:0;background:rgba(12,25,59,.58);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .45s var(--ease)}
.modal__card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,34px);align-items:start;width:min(680px,100%);max-height:88svh;overflow:auto;padding:clamp(26px,3.2vw,38px);border-radius:20px;background:var(--paper);box-shadow:0 40px 90px -40px rgba(12,25,59,.6),inset 0 0 0 1px var(--paper-200);opacity:0;transform:scale(.97) translateY(8px);transition:opacity .45s var(--ease),transform .5s var(--expo)}
.modal.open .modal__scrim{opacity:1}
.modal.open .modal__card{opacity:1;transform:none}
.modal__x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--n-500);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.modal__x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.modal__x:hover{background:var(--paper-100);color:var(--ink)}
.modal__fig{margin:0;width:clamp(96px,13vw,128px)}
.modal__fig img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 0 0 1px var(--paper-200)}
.modal__body h2{font-size:clamp(1.35rem,2.4vw,1.85rem);margin-bottom:14px}
.modal__body p{font-size:clamp(.94rem,1.1vw,1.02rem);font-weight:300;line-height:1.72;color:var(--n-600);max-width:46ch}
@media (max-width:640px){
  .modal{place-items:end center;padding:0}
  .modal__card{grid-template-columns:1fr;justify-items:center;text-align:left;width:100%;max-height:92svh;border-radius:20px 20px 0 0;padding:30px 22px 38px}
  .modal__card{transform:translateY(18px)}
  .modal__body p{max-width:none}
}
@media (prefers-reduced-motion:reduce){.modal__scrim,.modal__card{transition:none}}

/* --- reveals ------------------------------------------------------------ */
/* while the thread measures the page, reveal transforms are neutralised so it
   sees final positions. Applied and removed inside one synchronous pass, so
   nothing is ever painted in this state. */
.measuring .rv,.measuring .rv-s,.measuring .rv-f,.measuring .rv-l,.measuring .rv-r{transform:none!important;opacity:1!important;clip-path:none!important}
.anim .rv{opacity:0;transform:translateY(18px)}
.anim .rv-l{transform:translate(-26px,10px)}
.anim .rv-r{transform:translate(26px,10px)}
.anim .rv-s{transform:scale(.97);opacity:0}
.rv-s.in{transition:opacity 1.5s var(--ease),transform 1.5s var(--expo)}
.anim .rv-f{opacity:0;transform:none}
.rv-f.in{opacity:1;transition:opacity 1.25s var(--ease)}
.anim .rv-f img{transform:scale(1.06)}
.rv-f.in img{transform:none;transition:transform 1.9s var(--expo)}
.backdrop{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;opacity:0;z-index:-1;will-change:transform,opacity;transition:opacity 1.6s var(--ease)}
.backdrop{transition:opacity 2s var(--ease)}
.backdrop.in{opacity:.12}
.contact__backdrop.in{opacity:.2}
.anim .rv-s .mask{clip-path:inset(0 0 100% 0)}
.rv-s.in .mask{clip-path:inset(0 0 0 0);transition:clip-path 1.5s var(--expo)}
.rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .9s var(--expo)}
.rv:nth-child(2).in{transition-delay:.05s}
.rv:nth-child(3).in{transition-delay:.1s}
.rv:nth-child(4).in{transition-delay:.15s}

/* --- responsive --------------------------------------------------------- */

@media (max-width:1000px){
  .beliefs{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .beliefs{grid-template-columns:1fr}
  .why__fig{justify-self:start;max-width:320px;margin-top:22px}
  /* single column: the copy leads, so the eyebrow is never separated from its
     own heading by the photo */
  .drives__grid > div{order:1}
  .drives__fig{order:2;justify-self:start;max-width:240px;position:static;min-height:0}
  .drives__fig .mask{position:static}
  .drives__fig img{height:auto;aspect-ratio:4 / 5}
  .drives__grid{align-items:start}
  .hero__grid,.problem__cols,.drives__grid,.why__grid,.proof__grid,.fit__cols{grid-template-columns:1fr}
  .hero{min-height:0;padding:112px 0 48px}
  .hero__fig{max-width:300px}
  .scatter figure:nth-child(1),.scatter figure:nth-child(4){transform:none}
  .workrow{grid-template-columns:auto 1fr}
  .workrow__tags{grid-column:2}
  .stat{grid-template-columns:1fr;gap:6px}
}
@media (max-width:560px){
  .workrow{grid-template-columns:1fr}
  .workrow__tags{grid-column:auto}
  .scatter{grid-template-columns:1fr 1fr}
}

/* --- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  /* the thread never runs here, so the tag pills must ship in their end state
     rather than waiting for a scroll tick that is skipped */
  .workrow__tags span{background-color:color-mix(in oklab,var(--corn) 20%,transparent);color:var(--blue-700);box-shadow:inset 0 0 0 1px var(--corn)}
  .marq__t{animation:none}
  #ball{display:none}
}

/* --- composed transforms -------------------------------------------------
   Reveal, layout offset and hover lift share the transform property, so they
   are composed from one custom property here, AFTER the reveal rules, rather
   than fighting each other in the cascade.
   ---------------------------------------------------------------------- */
.belief,.lenscard{--off:0px}
.anim .belief,.anim .lenscard{opacity:0;transform:translateY(16px)}
.belief.in,.lenscard.in{opacity:1;transition:opacity .8s var(--ease),transform .7s var(--expo),box-shadow .5s var(--ease),background .5s var(--ease)}
/* the only owner of transform for these cards: the stepped stagger plus the
   scroll-driven bounce. Declaring the bounce on the bare .belief selector was
   dead — the reveal rules outrank it for the element's whole lifetime. */
.belief.in{transform:translate(calc(var(--nx,0) * 1px),calc(var(--off) + var(--b,0) * 1px))}
.belief.in:nth-child(2){--off:18px}
.belief.in:nth-child(3){--off:36px}
.belief.in:hover{transform:translate(calc(var(--nx,0) * 1px),calc(var(--off) + var(--b,0) * 1px - 5px))}
.lenscard.in{transform:none}
.lenscard.in:hover{transform:translateY(-3px)}
@media (max-width:860px){.belief.in:nth-child(2),.belief.in:nth-child(3){--off:0px}}
@media (prefers-reduced-motion:reduce){.belief,.lenscard{opacity:1!important}}

/* ==========================================================================
   MOBILE ONLY (<=860px). Nothing here may affect the desktop layout.
   ========================================================================== */
@media (max-width:860px){
  /* the hero wash becomes its own image box above the copy */
  .hero{display:flex;flex-direction:column;justify-content:center;padding:96px 0 44px}
  /* JS moves this node between the eyebrow and the headline; every masking
     property is cleared so no gradient survives from the desktop treatment */
  .hero__wash{position:static;width:100%;height:auto;
    aspect-ratio:5 / 4;max-height:38svh;margin:clamp(14px,2.2vh,20px) 0 clamp(18px,3vh,26px);
    border-radius:10px;object-position:56% 22%;
    -webkit-mask:none!important;mask:none!important;
    -webkit-mask-image:none!important;mask-image:none!important;
    box-shadow:0 0 0 1px var(--rule)}

  /* the head strikes these through as it passes, and the strike stays */
  .fit__not li.struck{color:var(--fg-3);text-decoration:line-through;
    text-decoration-color:color-mix(in oklab,var(--fg-3) 70%,transparent);
    transition:text-decoration-color .5s var(--ease),color .5s var(--ease)}

  /* rubber-band overscroll must not flash paper below the ink footer */
  html{background:var(--ink)}
}