/* ════════════════════════════════════════════════════════════════ ECHO · LANDING v2 — brand-aligned. Super-white, clinical, elite. Paper + ink. Two ink moments (wedge, manifesto). No accent color. ════════════════════════════════════════════════════════════════ */ :root{ /* brand scale comes from echo-brand.css (--n0…--n6, --ink, --hair) */ --shell:1180px; --serif:'Instrument Serif',Georgia,serif; --ease:cubic-bezier(.22,.61,.36,1); /* contextual ink levels — remapped inside .inkblock */ --c-text:var(--ink); --c-mute:var(--n6); --c-faint:var(--n5); --c-ghost:var(--n4); --c-hair:var(--hair); --c-hair2:#D8D8D4; --c-surface:var(--n0); --c-raise:var(--n1); /* tweakables */ --dots-a:.5; --wdth:115%; /* v5 — breathing: sections get markedly more vertical air */ --sec-pad:clamp(118px,12vw,188px); } *{box-sizing:border-box;margin:0;padding:0} /* ROOT SCROLLER — html: NO overflow, NO height (proven scaffold). body{overflow-x:clip} only. Document sits at natural height. */ html{scroll-behavior:smooth} html,body{margin:0;padding:0} body{ background:var(--n0);color:var(--ink); font-family:var(--text);font-size:16.5px;line-height:1.6;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:clip; } ::selection{background:var(--n3)} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} button{font:inherit;color:inherit} /* ── engineering dot-grid (fixed, light surfaces only) ── */ .dots{ position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--dots-a); background-image:radial-gradient(circle,#DCDCD8 1px,transparent 1.2px); background-size:26px 26px;background-position:13px 13px; } /* ── display + helpers ── */ .disp{font-family:var(--sans);font-stretch:var(--wdth);font-variation-settings:'wdth' 115;letter-spacing:-.028em} @supports (font-stretch:115%){.disp{font-variation-settings:normal}} .serif-i{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0} .shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 44px} section{position:relative;z-index:1} .sec{padding:var(--sec-pad) 0;position:relative} .sec.bg-mist{background:var(--n2)} .sec.bg-paper{background:var(--n1);border-top:1px solid var(--c-hair);border-bottom:1px solid var(--c-hair)} .sec.topline{border-top:1px solid var(--c-hair)} /* ── ink scope · dark editorial moments ── */ .inkblock{ background:var(--ink);color:#F7F6F2; --c-text:#F7F6F2; --c-mute:rgba(247,246,242,.62); --c-faint:rgba(247,246,242,.40); --c-ghost:rgba(247,246,242,.22); --c-hair:rgba(247,246,242,.13); --c-hair2:rgba(247,246,242,.18); --c-surface:#1B1B1F; --c-raise:#222227; position:relative;z-index:1; } .inkblock .grain{ position:absolute;inset:0;pointer-events:none;opacity:.05;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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* tweak: all-light theme — ink moments become paper */ body.all-light .inkblock{ background:var(--n1);color:var(--ink); border-top:1px solid var(--hair);border-bottom:1px solid var(--hair); --c-text:var(--ink);--c-mute:var(--n6);--c-faint:var(--n5);--c-ghost:var(--n4); --c-hair:var(--hair);--c-hair2:#D8D8D4;--c-surface:var(--n0);--c-raise:var(--n0); } body.all-light .inkblock .grain{display:none} /* ── section head · spec-sheet opening ── */ .sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(54px,6.2vw,84px); border-top:1px solid var(--c-hair);padding-top:16px} .sec-no{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--c-ghost)} .sec-title{font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.24em;color:var(--c-text);text-transform:uppercase} .sec-meta{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-faint)} /* ── pulse dot (monochrome signal) ── */ .live-dot{width:7px;height:7px;border-radius:50%;background:var(--c-text);position:relative;flex:none} .live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--c-text);opacity:.5; animation:pulse 2.8s var(--ease) infinite} @keyframes pulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(3.2);opacity:0}} /* ── buttons ── */ .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:15px;font-weight:500; letter-spacing:-.01em;padding:15px 28px;border-radius:100px;border:1px solid transparent;cursor:pointer; transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease), transform .35s var(--ease),box-shadow .35s var(--ease); white-space:nowrap} .btn .mag{display:inline-flex;align-items:center;gap:10px} .btn.solid{background:var(--ink);color:var(--n0)} .btn.solid:hover{background:var(--ink-2);transform:translateY(-2px);box-shadow:0 16px 36px -16px rgba(20,20,23,.5)} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--n3)} .btn.ghost:hover{border-color:var(--ink)} .btn .arw{transition:transform .35s var(--ease);display:inline-block} .btn:hover .arw{transform:translateX(4px)} /* buttons on ink surfaces invert */ .inkblock .btn.solid{background:#F7F6F2;color:var(--ink)} .inkblock .btn.solid:hover{background:#FFFFFF;box-shadow:0 16px 36px -16px rgba(0,0,0,.65)} .inkblock .btn.ghost{color:var(--c-text);border-color:var(--c-hair2)} .inkblock .btn.ghost:hover{border-color:var(--c-text)} body.all-light .inkblock .btn.solid{background:var(--ink);color:var(--n0)} body.all-light .inkblock .btn.ghost{color:var(--ink);border-color:var(--n3)} body.all-light .inkblock .btn.ghost:hover{border-color:var(--ink)} /* ════════ NAV ════════ */ .nav{position:fixed;top:0;left:0;right:0;z-index:40;height:68px;display:flex;align-items:center; transition:background .5s var(--ease),border-color .5s var(--ease); border-bottom:1px solid transparent} .nav.scrolled{background:rgba(255,255,255,.74);backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);border-bottom-color:var(--hair)} .nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;max-width:var(--shell);margin:0 auto;padding:0 44px} .brand{display:flex;align-items:center;gap:12px;justify-self:start;color:var(--ink);transition:color .4s var(--ease)} .brand svg{width:23px;height:23px;display:block} .brand .wm{font-family:var(--sans);font-weight:300;letter-spacing:.34em;font-size:14.5px;padding-left:4px} .nav-links{justify-self:center;display:flex;align-items:center;gap:30px} .nav-links a{font-family:var(--text);font-size:14px;color:var(--n6);transition:color .3s var(--ease);position:relative;white-space:nowrap} .nav-links a .ix{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:3px;height:3px;border-radius:50%; background:var(--ink);opacity:0;transition:opacity .3s var(--ease)} .nav-links a:hover,.nav-links a.active{color:var(--ink)} .nav-links a.active .ix{opacity:1} .nav-cta{justify-self:end} .nav-cta a{font-family:var(--sans);font-weight:500;font-size:13.5px;color:var(--n0);background:var(--ink); padding:9px 18px;border-radius:100px;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);white-space:nowrap} .nav-cta a:hover{background:var(--ink-2);transform:translateY(-1px)} /* nav over ink sections — flips to light-on-dark */ .nav.on-ink .brand{color:#F7F6F2} .nav.on-ink .nav-links a{color:rgba(247,246,242,.62)} .nav.on-ink .nav-links a:hover,.nav.on-ink .nav-links a.active{color:#F7F6F2} .nav.on-ink .nav-links a .ix{background:#F7F6F2} .nav.on-ink .nav-cta a{background:#F7F6F2;color:var(--ink)} .nav.on-ink .nav-cta a:hover{background:#FFFFFF} .nav.on-ink.scrolled{background:rgba(20,20,23,.7);border-bottom-color:rgba(247,246,242,.1)} @media(max-width:820px){.nav-links{display:none}} /* ════════ HERO ════════ */ .hero{padding:clamp(152px,16vw,204px) 0 clamp(104px,11vw,152px);position:relative;overflow:hidden} .hero .hero-grid{position:relative;z-index:3} /* ambient atmosphere — slow drifting light + faint engineering grid (ink only) */ .hero .atmos{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .hero .atmos::before{content:"";position:absolute;width:62vw;height:62vw;max-width:880px;max-height:880px; left:44%;top:14%;border-radius:50%;will-change:transform; background:radial-gradient(circle,rgba(247,246,242,.065),rgba(247,246,242,0) 62%); animation:atmosDrift 32s ease-in-out infinite alternate} @keyframes atmosDrift{from{transform:translate(-12%,-6%) scale(1)}to{transform:translate(10%,13%) scale(1.14)}} .hero .atmos::after{content:"";position:absolute;inset:-60px;will-change:transform; background-image:radial-gradient(circle,rgba(247,246,242,.05) 1px,transparent 1.4px); background-size:32px 32px; -webkit-mask-image:radial-gradient(ellipse 70% 58% at 58% 34%,#000,transparent 78%); mask-image:radial-gradient(ellipse 70% 58% at 58% 34%,#000,transparent 78%); animation:gridDrift 46s linear infinite} @keyframes gridDrift{to{transform:translate(32px,32px)}} body.all-light .hero .atmos{display:none} /* hero lines · a drifting field of vertical hairlines + one slow vertical sweep */ .hero .hero-lines{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;display:none; -webkit-mask-image:radial-gradient(ellipse 82% 76% at 58% 42%,#000 38%,transparent 86%); mask-image:radial-gradient(ellipse 82% 76% at 58% 42%,#000 38%,transparent 86%)} body.hero-lines-on .hero .hero-lines{display:block} body.all-light .hero .hero-lines{display:none} body.hero-nogrid .hero .atmos::after{display:none} .hero .hero-lines::before{content:"";position:absolute;inset:-2px;will-change:background-position; background-image:repeating-linear-gradient(90deg,transparent 0 119px,rgba(247,246,242,.05) 119px 120px); animation:lineDrift 40s linear infinite} @keyframes lineDrift{to{background-position:120px 0}} .hero .hero-lines .sweep{position:absolute;top:0;bottom:0;left:0;width:1px;will-change:transform,opacity; background:linear-gradient(180deg,transparent,rgba(247,246,242,.55),transparent); box-shadow:0 0 22px 1px rgba(247,246,242,.12); animation:lineSweep 26s var(--ease) infinite} @keyframes lineSweep{ 0%{transform:translateX(10vw);opacity:0} 14%{opacity:.7} 86%{opacity:.7} 100%{transform:translateX(88vw);opacity:0} } .hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(64px,7vw,92px);align-items:center} .eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:10.5px; letter-spacing:.18em;text-transform:uppercase;color:var(--c-mute);margin-bottom:30px;white-space:nowrap} .h1{font-family:var(--sans);font-weight:640;font-size:clamp(54px,6.6vw,92px);line-height:.98;letter-spacing:-.03em} .h1 .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em} .h1 .line > span{display:block;transform:translateY(112%);transition:transform 1s var(--ease)} .loaded .h1 .line > span{transform:translateY(0)} .loaded .h1 .line:nth-child(2) > span{transition-delay:.1s} .loaded .h1 .line:nth-child(3) > span{transition-delay:.2s} .hero-sub{font-size:18.5px;line-height:1.55;color:var(--c-mute);max-width:44ch;margin:28px 0 36px} .hero-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap} /* film card — an ink object */ .film-wrap{position:relative;cursor:pointer;transition:transform .35s var(--ease)} .film-wrap .regframe{inset:-16px} .film{position:relative;border-radius:16px;background:linear-gradient(150deg,#222228 0%,var(--ink) 72%); box-shadow:0 44px 110px -42px rgba(0,0,0,.7); aspect-ratio:4/3.05;overflow:hidden;cursor:pointer;color:#F7F6F2} .inkblock .film{border:1px solid rgba(247,246,242,.13)} body.all-light .inkblock .film{border:none} .film .fgrain{position:absolute;inset:0;opacity:.4;mix-blend-mode:screen;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")} .film .tick{position:absolute;width:11px;height:11px;pointer-events:none} .film .tick::before{content:"";position:absolute;left:5px;top:0;width:1px;height:11px;background:rgba(247,246,242,.3)} .film .tick::after{content:"";position:absolute;top:5px;left:0;height:1px;width:11px;background:rgba(247,246,242,.3)} .film .tick.tl{top:14px;left:14px}.film .tick.tr{top:14px;right:14px} .film .tick.bl{bottom:14px;left:14px}.film .tick.br{bottom:14px;right:14px} .film image-slot.poster{position:absolute;inset:0;width:100%;height:100%;z-index:0} .film .scrim{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(20,20,23,.22) 0%,rgba(20,20,23,.04) 38%,rgba(20,20,23,.58) 100%)} .film .fgrain{z-index:1} .film .tick,.film .fig,.film .play,.film .ftime,.film .wave{z-index:2} .film .fig{position:absolute;top:20px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9.5px; letter-spacing:.16em;text-transform:uppercase;color:rgba(247,246,242,.42)} .film .fig b{color:rgba(247,246,242,.8);font-weight:400} .film .play{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%; border:1px solid rgba(247,246,242,.22);background:rgba(247,246,242,.06);display:grid;place-items:center; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); transition:transform .4s var(--ease),background .4s var(--ease)} /* breathing signal — the media is alive even at rest */ .film .play::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none; border:1px solid rgba(247,246,242,.34);animation:playPulse 3.6s var(--ease) infinite} @keyframes playPulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.7);opacity:0}} .film:hover .play{transform:translate(-50%,-50%) scale(1.1);background:rgba(247,246,242,.13)} .film .play svg{width:20px;height:20px;margin-left:3px;fill:#F7F6F2} .film .ftime{position:absolute;left:50%;top:calc(47% + 58px);transform:translateX(-50%);font-family:var(--mono); font-size:10.5px;letter-spacing:.06em;color:rgba(247,246,242,.6);white-space:nowrap} .film .wave{position:absolute;left:0;right:0;bottom:0;height:46px;display:flex;align-items:flex-end;gap:3px; padding:0 18px 14px;justify-content:center} .film .wave i{width:3px;background:rgba(247,246,242,.22);border-radius:2px;height:var(--peak,30%); animation:wvIdle 2.6s var(--ease) infinite alternate;animation-delay:var(--d,0s)} @keyframes wvIdle{from{height:calc(var(--peak,30%) * .34);opacity:.45}to{height:var(--peak,30%);opacity:.82}} .playing-wave i{animation:wv 1s var(--ease) infinite alternate;animation-delay:var(--d,0s)} /* ════════ WEDGE · light statement after the ink hero ════════ */ .wedge{min-height:clamp(460px,64vh,720px);display:flex;align-items:center;justify-content:center;text-align:center; position:relative;overflow:hidden} .wedge-in{max-width:1020px;padding:clamp(80px,10vw,120px) 44px;position:relative;z-index:1} .wedge .wkick{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--c-faint);display:block;margin-bottom:34px} .wedge .wtick{position:absolute;width:11px;height:11px;pointer-events:none} .wedge .wtick::before{content:"";position:absolute;left:5px;top:0;width:1px;height:11px;background:var(--n4)} .wedge .wtick::after{content:"";position:absolute;top:5px;left:0;height:1px;width:11px;background:var(--n4)} .wedge .wtick.tl{top:28px;left:28px}.wedge .wtick.tr{top:28px;right:28px} .wedge .wtick.bl{bottom:28px;left:28px}.wedge .wtick.br{bottom:28px;right:28px} .wedge h2{font-family:var(--sans);font-stretch:var(--wdth);font-weight:560; font-size:clamp(36px,5vw,66px);line-height:1.1;letter-spacing:-.03em} .wedge .grey{color:var(--c-faint);display:block;margin-bottom:.12em} .wedge .white{color:var(--c-text)} .wedge .you{font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:normal;position:relative;padding:0 .04em} .wedge .you .ul{position:absolute;left:0;right:0;bottom:.02em;height:2px;background:var(--c-text); transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .3s} .wedge.in .you .ul{transform:scaleX(1)} /* ════════ SEE IT WORK · pinned horizontal ════════ */ .work-pin{position:relative} .work-sticky{position:sticky;top:0;height:clamp(620px,100vh,920px);display:flex;flex-direction:column; justify-content:center;overflow:hidden;padding-top:48px} .work-pin .sec-head{margin-bottom:26px} .work-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px} .work-head-row h2{font-family:var(--sans);font-stretch:var(--wdth);font-weight:600; font-size:clamp(28px,3.3vw,42px);letter-spacing:-.025em;line-height:1.06;max-width:14em} .work-arrows{display:flex;gap:8px} .work-arrows button{width:42px;height:42px;border-radius:50%;border:1px solid var(--n3);background:var(--n0); color:var(--n6);display:grid;place-items:center;cursor:pointer;transition:border-color .3s,color .3s} .work-arrows button:hover:not(:disabled){border-color:var(--ink);color:var(--ink)} .work-arrows button:disabled{opacity:.3;cursor:default} .work-arrows svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6} .work-prog{height:1px;background:var(--n3);margin-bottom:28px;position:relative} .work-prog i{position:absolute;left:0;top:-0.5px;height:2px;background:var(--ink);width:8%;transition:width .12s linear} .work-viewport{overflow:hidden;position:relative} /* edge fade — cards dissolve into the surface on the right: “there’s more” */ .work-pin.inkblock{--wf0:rgba(20,20,23,0);--wf1:#141417} body.all-light .work-pin.inkblock{--wf0:rgba(250,250,250,0);--wf1:#FAFAFA} .work-fade{position:absolute;top:0;right:0;bottom:0;width:118px;pointer-events:none;z-index:3; background:linear-gradient(90deg,var(--wf0),var(--wf1) 82%); transition:opacity .45s var(--ease)} .work-viewport.at-end .work-fade{opacity:0} .work-track{display:flex;gap:22px;width:max-content;will-change:transform; padding-left:max(44px,calc((100vw - var(--shell))/2 + 44px));padding-right:60px} .work-card{flex:none;width:440px;border:1px solid var(--n3);border-radius:14px; background:var(--n0);color:var(--ink);padding:28px;display:flex;flex-direction:column;gap:22px; --c-text:var(--ink);--c-mute:var(--n6);--c-faint:var(--n5);--c-ghost:var(--n4);--c-hair:var(--hair);--c-hair2:#D8D8D4; box-shadow:0 1px 0 rgba(20,20,23,.02); transition:border-color .45s var(--ease),box-shadow .45s var(--ease)} .work-card:hover{border-color:var(--n4);box-shadow:0 24px 56px -34px rgba(20,20,23,.25)} .work-card .wc-cap{display:flex;gap:16px;align-items:flex-start} .work-card .wc-fig{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--n5);padding-top:5px;white-space:nowrap} .work-card .wc-fig b{color:var(--ink);font-weight:400} .work-card h3{font-family:var(--sans);font-weight:600;font-size:20px;letter-spacing:-.015em;line-height:1.18} .work-card .wc-d{font-size:14.5px;color:var(--n6);line-height:1.5;margin-top:7px} .work-card .wc-vis{flex:none;height:380px;border-radius:9px;background:var(--n1); border:1px solid var(--hair);overflow:hidden;position:relative} /* dark product-true screens inside the cards */ .wc-vis.dk{background:#141417;border-color:#26262B; --c-text:#F7F6F2;--c-mute:rgba(247,246,242,.6);--c-faint:rgba(247,246,242,.4); --c-ghost:rgba(247,246,242,.22);--c-hair:rgba(247,246,242,.1);--c-hair2:rgba(247,246,242,.16)} .wc-vis.dk .dev-bar{color:rgba(247,246,242,.4)} .wc-vis.dk .dev-bar .r i{background:rgba(247,246,242,.18)} .wc-vis.dk .mk-h .lab{color:rgba(247,246,242,.4)} .wc-vis.dk .mk-h .ti{color:#F7F6F2} .wc-vis.dk .wkstrip span{background:#1B1B1F;border-color:rgba(247,246,242,.1);color:rgba(247,246,242,.45)} .wc-vis.dk .wkstrip span.dn{background:#17171A;color:rgba(247,246,242,.22)} .wc-vis.dk .wkstrip span.td{background:#F7F6F2;color:#141417;border-color:#F7F6F2} .wc-vis.dk .coachline{background:#1B1B1F} .wc-vis.dk .coachline p{color:rgba(247,246,242,.6)} .wc-vis.dk .coachline b{color:#F7F6F2} .wc-vis.dk .plan-row{background:#1B1B1F;border-color:rgba(247,246,242,.08)} .wc-vis.dk .plan-row .day{color:rgba(247,246,242,.35)} .wc-vis.dk .plan-row .body .t{color:#F7F6F2} .wc-vis.dk .plan-row .body .s{color:rgba(247,246,242,.5)} .wc-vis.dk .chat-head{border-bottom-color:rgba(247,246,242,.1)} .wc-vis.dk .chat-head .nm{color:#F7F6F2} .wc-vis.dk .chat-head .sub{color:rgba(247,246,242,.4)} .wc-vis.dk .bub.them{background:#1B1B1F;border-color:rgba(247,246,242,.08);color:#F7F6F2} .wc-vis.dk .bub.you{background:#F7F6F2;color:#141417} .wc-vis.dk .typing i{background:rgba(247,246,242,.35)} .wc-vis.dk .swapcard{background:#1B1B1F;border-color:rgba(247,246,242,.14)} .wc-vis.dk .swapcard .sl{color:rgba(247,246,242,.4)} .wc-vis.dk .swapcard .from{color:rgba(247,246,242,.35)} .wc-vis.dk .swapcard .arr{color:rgba(247,246,242,.3)} .wc-vis.dk .swapcard .to{color:#F7F6F2} .wc-vis.dk .saved{background:#1B1B1F;color:rgba(247,246,242,.5)} .wc-vis.dk .voice .vtop{color:rgba(247,246,242,.5)} .wc-vis.dk .voice .nm{color:#F7F6F2} .wc-vis.dk .voice .vstat{color:rgba(247,246,242,.5)} .wc-vis.dk .vwave i{background:rgba(247,246,242,.65)} .wc-vis.dk .voice .vq{color:rgba(247,246,242,.55)} .wc-vis.dk .rings::before{border-color:rgba(247,246,242,.16)} .wc-vis.dk .rings::after{border-color:rgba(247,246,242,.3)} .wc-vis.dk image-slot{background:#1B1B1F} /* real product screenshot */ .wc-vis.shot{background:#141417;border-color:#26262B} .wc-vis.shot img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block} @media(max-height:840px){.work-card .wc-vis{height:330px}} /* work on ink — white cards on a black stage */ .inkblock .work-arrows button{background:transparent;border-color:var(--c-hair2);color:var(--c-mute)} .inkblock .work-arrows button:hover:not(:disabled){border-color:#F7F6F2;color:#F7F6F2} .inkblock .work-prog{background:rgba(247,246,242,.14)} .inkblock .work-prog i{background:#F7F6F2} .inkblock .work-card{border-color:rgba(247,246,242,.1);box-shadow:0 44px 96px -48px rgba(0,0,0,.85)} body.all-light .work-pin.inkblock .work-card{border-color:var(--n3);box-shadow:0 1px 0 rgba(20,20,23,.02)} /* fallback: plain horizontal scroll (small screens / reduced motion) */ .work-pin.no-pin{height:auto !important} .work-pin.no-pin .work-sticky{position:static;height:auto;padding-top:0;overflow:visible} .work-pin.no-pin .work-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} .work-pin.no-pin .work-viewport::-webkit-scrollbar{display:none} .work-pin.no-pin .work-track{transform:none !important;padding-bottom:8px} .work-pin.no-pin .work-card{scroll-snap-align:center} @media(max-width:560px){.work-card{width:312px}} /* device + mock primitives — light */ .dev{position:absolute;inset:0;display:flex;flex-direction:column;font-family:var(--text)} .dev-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 8px;font-family:var(--mono); font-size:9px;letter-spacing:.1em;color:var(--n5)} .dev-bar .r{display:flex;gap:6px;align-items:center} .dev-bar .r i{width:14px;height:5px;border-radius:2px;background:var(--n3)} .mk-h{padding:4px 18px 12px} .mk-h .lab{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--n5)} .mk-h .ti{font-family:var(--sans);font-weight:500;font-size:17px;margin-top:5px;letter-spacing:-.01em} /* coach line + week strip (mirrors the trainee app) */ .coachline{display:flex;gap:10px;align-items:center;margin:0 18px 12px;padding:9px 11px;background:var(--n2);border-radius:9px} .coachline image-slot{width:30px;height:30px;flex:none} .coachline p{font-size:11.5px;line-height:1.45;color:var(--n6)} .coachline b{font-weight:500;color:var(--ink);font-style:normal} .wkstrip{display:flex;gap:5px;padding:0 18px 12px} .wkstrip span{flex:1;text-align:center;font-family:var(--mono);font-size:8px;letter-spacing:.04em;color:var(--n6); padding:5px 0;border:1px solid var(--hair);border-radius:5px;background:var(--n0)} .wkstrip span.dn{background:var(--n2);color:var(--n4)} .wkstrip span.td{background:var(--ink);color:var(--n0);border-color:var(--ink)} .plan{padding:2px 18px;display:flex;flex-direction:column;gap:9px;overflow:hidden} .plan-row{display:flex;align-items:center;gap:13px;border:1px solid var(--hair);border-radius:8px;padding:12px 13px; background:var(--n0);transition:background .5s var(--ease),border-color .5s var(--ease)} .plan-row .day{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--n5);width:30px;flex:none} .plan-row .body .t{font-family:var(--sans);font-weight:500;font-size:13.5px;letter-spacing:-.01em} .plan-row .body .s{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--n6);margin-top:3px} .plan-row.done{opacity:.45} .plan-row.swap{border-color:var(--ink);background:var(--n2)} /* expandable workouts (plan card) */ .wo{border:1px solid rgba(247,246,242,.09);border-radius:8px;background:#1B1B1F;overflow:hidden} .wo-head{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;background:none;border:0; cursor:pointer;font-family:var(--sans);text-align:left;color:#F7F6F2} .wo-head .wt{font-weight:500;font-size:13px;letter-spacing:-.01em} .wo-head .wm2{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em; text-transform:uppercase;color:rgba(247,246,242,.45)} .wo-head .chev{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;flex:none; color:rgba(247,246,242,.45);transition:transform .35s var(--ease)} .wo.open .wo-head .chev{transform:rotate(180deg)} .wo-body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)} .wo.open .wo-body{max-height:170px} .wo-body .ex{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px; border-top:1px solid rgba(247,246,242,.06);font-size:12px;color:rgba(247,246,242,.85)} .wo-body .ex span:last-child{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em; text-transform:uppercase;color:rgba(247,246,242,.45);white-space:nowrap} /* chat replay */ .chat-head .replay{margin-left:auto;width:28px;height:28px;border-radius:50%;border:1px solid rgba(247,246,242,.18); background:none;display:grid;place-items:center;cursor:pointer;color:rgba(247,246,242,.55); transition:color .3s var(--ease),border-color .3s var(--ease)} .chat-head .replay:hover{color:#F7F6F2;border-color:rgba(247,246,242,.5)} .chat-head .replay svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} /* chat — a conversation with the coach */ .chat-head{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--hair)} .chat-head image-slot{width:32px;height:32px;flex:none} .chat-head .nm{display:block;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:-.01em} .chat-head .sub{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--n5);margin-top:2px} .chat{padding:12px 16px 14px;display:flex;flex-direction:column;gap:9px;justify-content:flex-end;flex:1;min-height:0;overflow:hidden} .bub{max-width:84%;padding:9px 12px;border-radius:12px;font-size:12.5px;line-height:1.42;opacity:0;transform:translateY(8px); transition:opacity .5s var(--ease),transform .5s var(--ease)} .bub.show{opacity:1;transform:none} .bub.them{align-self:flex-start;background:var(--n0);border:1px solid var(--hair);border-bottom-left-radius:4px} .bub.you{align-self:flex-end;background:var(--ink);color:var(--n1);border-bottom-right-radius:4px} .typing{display:inline-flex;gap:4px;align-items:center;height:14px} .typing i{width:5px;height:5px;border-radius:50%;background:var(--n4);animation:typ 1.2s var(--ease) infinite} .typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s} @keyframes typ{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .swapcard{align-self:stretch;display:flex;flex-direction:column;gap:6px;border:1px solid var(--n3);background:var(--n0); border-radius:9px;padding:9px 12px;opacity:0;transform:translateY(8px); transition:opacity .5s var(--ease),transform .5s var(--ease)} .swapcard.show{opacity:1;transform:none} .swapcard .sl{font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--n5)} .swapcard .row{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap} .swapcard .from{color:var(--n5);text-decoration:line-through;white-space:nowrap} .swapcard .arr{color:var(--n4)} .swapcard .to{font-weight:500} .saved{align-self:center;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--n6);background:var(--n2);border-radius:100px;padding:6px 12px;opacity:0;transform:translateY(8px); transition:opacity .5s var(--ease),transform .5s var(--ease)} .saved.show{opacity:1;transform:none} /* onboarding · intake → profile build → package match (card 1) */ .ob-flow{justify-content:flex-start;gap:7px;padding:11px 16px 11px;overflow:hidden} .ob-note,.ob-match{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .ob-note.show,.ob-match.show{opacity:1;transform:none} .ob-note{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;margin:1px 0 2px; font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-faint)} .ob-note .dotmk{width:5px;height:5px;border-radius:50%;background:var(--c-mute);flex:none} .ob-ml{display:block;font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-faint);margin-bottom:7px} .ob-match{align-self:stretch;margin-top:2px;border:1px solid rgba(247,246,242,.16);border-radius:10px; background:#1B1B1F;padding:10px 12px;display:flex;flex-direction:column;gap:6px} .ob-mrow{display:flex;align-items:center;gap:10px} .ob-mt{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:-.01em;color:#F7F6F2;line-height:1.12} .ob-mchk{margin-left:auto;width:21px;height:21px;border-radius:50%;background:#F7F6F2;display:grid;place-items:center;flex:none} .ob-mchk svg{width:11px;height:11px;stroke:#141417;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .ob-chips{display:flex;flex-wrap:wrap;gap:5px} .ob-chip{font-family:var(--mono);font-size:8.5px;letter-spacing:.04em;text-transform:uppercase; border:1px solid var(--c-hair2);border-radius:100px;padding:4px 9px;color:var(--c-mute)} /* voice — a live call with the coach */ .voice{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px} .voice .vtop{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--n6)} .voice .vtop .live{display:inline-flex;gap:7px;align-items:center} .voice .vmid{display:flex;flex-direction:column;align-items:center;gap:9px} .voice .rings{position:relative;width:100px;height:100px;display:grid;place-items:center} .voice .rings image-slot{width:84px;height:84px} .voice .rings::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--n3)} .voice .rings::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--n4); animation:ring 3s var(--ease) infinite} @keyframes ring{0%{transform:scale(.94);opacity:.7}100%{transform:scale(1.3);opacity:0}} .voice .nm{font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:-.01em} .voice .vstat{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--n6)} .vwave{display:flex;align-items:center;justify-content:center;gap:3px;height:34px} .vwave i{width:3px;border-radius:2px;background:var(--n6);height:20%;animation:wv 1s var(--ease) infinite alternate} @keyframes wv{from{height:14%}to{height:90%}} .voice .vq{font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.5;color:var(--n6);text-align:center; max-width:30ch;margin:0 auto} .cons{position:absolute;inset:0;display:flex;flex-direction:column;font-family:var(--text)} .cons-top{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--hair)} .cons-top .dt{width:9px;height:9px;border-radius:50%;border:1px solid var(--n3)} .cons-top .ti{margin-left:8px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--n5)} .cons-body{flex:1;display:grid;grid-template-columns:84px 1fr;min-height:0} .cons-side{border-right:1px solid var(--hair);padding:14px 12px;display:flex;flex-direction:column;gap:13px} .cons-side .si{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--n5)} .cons-side .si.on{color:var(--ink)} .cons-main{padding:14px 16px;display:flex;flex-direction:column;gap:9px;overflow:hidden} .cons-stat{display:flex;gap:22px;padding-bottom:6px} .cons-stat .cs .n{font-family:var(--sans);font-weight:600;font-size:21px;letter-spacing:-.02em} .cons-stat .cs .l{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--n5);margin-top:2px} .ath{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--hair)} .ath .av{width:26px;height:26px;border-radius:50%;background:var(--n2);border:1px solid var(--hair);flex:none} .ath .who{font-family:var(--sans);font-weight:500;font-size:12.5px} .ath .meta{font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--n5);margin-top:1px} .ath .tag{margin-left:auto;font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--n6); display:inline-flex;align-items:center;gap:6px} /* ════════ SCALE · pinned stage, chapters travel ════════ */ .scale-pin{position:relative;background:var(--n1);border-top:1px solid var(--c-hair);border-bottom:1px solid var(--c-hair)} .scale-sticky{position:sticky;top:0;height:clamp(560px,100vh,900px);display:flex;flex-direction:column; justify-content:center;padding-top:40px;overflow:hidden} .scale-pin .sec-head{margin-bottom:clamp(28px,3.5vw,44px)} .scale-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:72px;align-items:center} .scale-left{position:static} .scale-left h2{font-family:var(--sans);font-stretch:var(--wdth);font-weight:560; font-size:clamp(32px,3.8vw,46px);line-height:1.05;letter-spacing:-.03em;max-width:11em} .scale-stage{margin-top:clamp(30px,3.6vw,46px)} /* constellation · orbital — one coach, athletes in orbit */ .constellation{position:relative;width:320px;height:260px} .constellation svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .constellation svg ellipse{fill:none;stroke:var(--n3);stroke-dasharray:3 7;stroke-width:1} .constellation svg .orb2{transform-origin:160px 130px;animation:orbit 80s linear infinite} @keyframes orbit{to{transform:rotate(360deg)}} .constellation .cnode,.constellation .cdot{position:absolute;transform:translate(-50%,-50%);border-radius:50%} .constellation .cdot{width:7px;height:7px;background:var(--n4)} .constellation .cdot.sm{width:5px;height:5px;background:var(--n3)} .cc-wrap{position:absolute;left:160px;top:130px;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%} .cc-wrap::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--n4); animation:ring 3.4s var(--ease) infinite} .cc-wrap image-slot{display:block;width:72px;height:72px;border-radius:50%;border:2px solid var(--n0); box-shadow:0 10px 26px -10px rgba(20,20,23,.3);background:var(--n2)} image-slot.ca{width:28px;height:28px;border:1.5px solid var(--n0);background:var(--n2); box-shadow:0 4px 12px -4px rgba(20,20,23,.25)} .const-cap{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--n5); display:block;margin-top:16px;text-align:center;width:320px} @media(max-height:800px){.constellation,.const-cap{display:none}} .scale-vp{overflow:hidden;position:relative;height:clamp(360px,56vh,540px); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%)} .scale-right{will-change:transform;padding-top:18px} .chapter{padding:clamp(34px,4vw,48px) 0;border-top:1px solid var(--n3);display:grid; grid-template-columns:190px 1fr;gap:42px;align-items:center;transition:opacity .5s var(--ease)} .chapter .stat{font-family:var(--sans);font-stretch:118%;font-weight:680; font-size:clamp(48px,5vw,72px);line-height:.88;letter-spacing:-.045em;font-variant-numeric:tabular-nums} .chapter .stat small{font-size:.42em;font-weight:650;letter-spacing:-.02em} .chapter:first-child{border-top:0;padding-top:0} .scale-right.focus .chapter{opacity:.32} .scale-right.focus .chapter.on{opacity:1} .chapter .ch-b .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--n5)} .chapter .ch-b h3{font-family:var(--sans);font-weight:600;font-size:22px;letter-spacing:-.015em;margin:13px 0 9px;line-height:1.2} .chapter .ch-b p{font-size:15.5px;color:var(--n6);line-height:1.55;max-width:30em} @media(max-width:920px){.scale-grid{grid-template-columns:1fr;gap:44px} .scale-stage{display:none}.chapter{grid-template-columns:1fr;gap:14px}} /* fallback: no pin on small/short viewports */ .scale-pin.no-pin{height:auto !important;padding:var(--sec-pad) 0} .scale-pin.no-pin .scale-sticky{position:static;height:auto;padding-top:0;overflow:visible;display:block} .scale-pin.no-pin .scale-vp{overflow:visible;height:auto;-webkit-mask-image:none;mask-image:none} .scale-pin.no-pin .scale-right{transform:none !important;padding-top:0} /* ════════ TRUST ════════ */ .trust-lead .eb{font-family:var(--text);font-size:15px;color:var(--n6);margin-bottom:20px;display:block} .trust-lead h2{font-family:var(--sans);font-stretch:var(--wdth);font-weight:560; font-size:clamp(34px,4.2vw,52px);line-height:1.05;letter-spacing:-.03em;max-width:15em} .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--n3); border:1px solid var(--n3);overflow:hidden;margin-top:clamp(44px,5.5vw,64px)} .tile{background:var(--n0);padding:clamp(26px,2.8vw,34px) clamp(24px,2.4vw,30px) clamp(30px,3.2vw,38px); display:flex;flex-direction:column;gap:17px;transition:background .4s var(--ease)} .tile:hover{background:var(--n1)} .tile .tt{display:flex;align-items:center;justify-content:space-between} .tile .tn{font-family:var(--mono);font-size:10.5px;color:var(--n4);letter-spacing:.12em} .tile .glyph{width:28px;height:28px;color:var(--n5);transition:color .4s var(--ease)} .tile:hover .glyph{color:var(--ink)} .tile .glyph svg{width:28px;height:28px;display:block;stroke:currentColor;fill:none;stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round} .tile h4{font-family:var(--sans);font-weight:600;font-size:16.5px;letter-spacing:-.01em;line-height:1.25} .tile p{font-size:14px;color:var(--n6);line-height:1.5} @media(max-width:820px){.trust-grid{grid-template-columns:1fr}} /* ════════ HOW · spec-sheet columns + the loop ════════ */ .how-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink); position:relative;padding-bottom:62px} .how-net{position:absolute;left:0;top:0;pointer-events:none;overflow:visible} .how-net path{fill:none;stroke:var(--n4);stroke-width:1;transition:stroke-dashoffset .9s var(--ease)} .how-loop-lab{position:absolute;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--n6);background:var(--n1);padding:3px 12px;transform:translate(-50%,-50%);opacity:0; transition:opacity .6s var(--ease);pointer-events:none;white-space:nowrap;z-index:1} .how-loop-lab.show{opacity:1} .how-loop-lab.breathe{animation:labBreath 4.6s ease-in-out infinite} @keyframes labBreath{0%,100%{opacity:.5}50%{opacity:1}} .how-net path.flash{animation:netFlash 1.05s var(--ease)} @keyframes netFlash{0%{stroke:var(--n4)}38%{stroke:var(--ink)}100%{stroke:var(--n4)}} .how-replay{align-self:center;margin-left:14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--n3); background:var(--n0);color:var(--n6);display:grid;place-items:center;cursor:pointer; transition:color .3s var(--ease),border-color .3s var(--ease)} .how-replay:hover{color:var(--ink);border-color:var(--ink)} .how-replay svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .how-intro{font-family:var(--sans);font-stretch:var(--wdth);font-weight:600; font-size:clamp(30px,4vw,54px);letter-spacing:-.03em;line-height:1.03;max-width:17ch; margin-bottom:clamp(46px,5.4vw,76px);text-wrap:balance} .how-col{padding:clamp(30px,3.2vw,44px) clamp(26px,3vw,38px) 8px;border-left:1px solid var(--n3); transition:opacity .5s var(--ease);display:flex;flex-direction:column} .how-col:first-child{border-left:0;padding-left:0} .how-col .gn{font-family:var(--sans);font-stretch:var(--wdth);font-weight:700; font-size:clamp(66px,7.2vw,112px);line-height:.82;letter-spacing:-.045em;display:block; color:transparent;-webkit-text-stroke:1.4px var(--n4);transition:color .5s var(--ease),-webkit-text-stroke .5s var(--ease)} .how-col.on .gn{color:var(--ink);-webkit-text-stroke:1.4px var(--ink)} .how-col h3{font-family:var(--sans);font-weight:600;font-size:clamp(21px,2.4vw,27px);letter-spacing:-.02em; line-height:1.14;margin:28px 0 12px;max-width:12em} .how-col p{font-size:clamp(15px,1.45vw,16.5px);color:var(--n6);line-height:1.55;max-width:26em;margin-bottom:28px} /* loop playback states */ #hv1 .tk{opacity:0;transition:opacity .35s var(--ease)} #hv1 .hv-row.done .tk{opacity:1} #hv1 .hv-bar i{width:0;transition:width 1s var(--ease)} #hv1.fill .hv-bar i{width:100%} #hv2 .gen{opacity:0;transform:translateY(7px);transition:opacity .45s var(--ease),transform .45s var(--ease)} #hv2 .gen.show{opacity:1;transform:none} #hv3 .hv-quote{min-height:60px} #hv3 .b.solid{transition:box-shadow .35s var(--ease)} #hv3 .b.solid.sent{box-shadow:0 0 0 3px rgba(247,246,242,.18)} /* the engine — three distinct instruments, one baseline */ .how-col .hv{margin-top:auto;min-height:252px;border-radius:9px;background:#141417;border:1px solid #26262B; padding:15px;display:flex;flex-direction:column;gap:8px;justify-content:space-between} /* 01 · brain net — sources converge into the model */ .b-net{position:relative;width:300px;height:150px;margin:2px auto;flex:none;max-width:100%} .b-net > svg{position:absolute;inset:0;width:100%;height:100%} .b-net > svg line{stroke:rgba(247,246,242,.13);stroke-width:1} .b-net .chip{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:7.5px; letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:rgba(247,246,242,.38); border:1px solid rgba(247,246,242,.12);border-radius:100px;padding:4px 9px;background:#141417; transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)} .b-net .chip.lit{color:#F7F6F2;border-color:rgba(247,246,242,.4);background:#1B1B1F} .b-net .b-core{position:absolute;left:150px;top:75px;transform:translate(-50%,-50%);width:46px;height:46px; border-radius:50%;border:1px solid rgba(247,246,242,.25);background:#1B1B1F;display:grid;place-items:center} .b-net .b-core svg{width:18px;height:18px;display:block} .b-net .b-core .cring{position:absolute;inset:-6px;width:auto;height:auto;transform:rotate(-90deg)} .b-net .b-core .cring circle{fill:none;stroke:#F7F6F2;stroke-width:1.5;stroke-dasharray:154;stroke-dashoffset:154; transition:stroke-dashoffset 1s var(--ease)} #hv1.fill .b-core .cring circle{stroke-dashoffset:0} .wd.swap{border-color:rgba(247,246,242,.5)} /* 02 · week grid — a plan, not a template */ .wctx{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,246,242,.5); background:#1B1B1F;border:1px solid rgba(247,246,242,.08);border-radius:7px;padding:8px 11px} .wkgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .wd{background:#1B1B1F;border:1px solid rgba(247,246,242,.07);border-radius:6px; display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 11px; transition:border-color .4s var(--ease)} .wd .d{font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;color:rgba(247,246,242,.35)} .wd .w{font-family:var(--mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:#F7F6F2; opacity:0;transition:opacity .4s var(--ease)} .wd.rest .w{color:rgba(247,246,242,.3)} .wd.fill .w{opacity:1} .wd.fill{border-color:rgba(247,246,242,.18)} /* 03 · rules ledger — corrections compound */ .rules{display:flex;flex-direction:column;gap:6px} .rule{display:flex;align-items:center;gap:9px;background:#1B1B1F;border:1px solid rgba(247,246,242,.07); border-radius:7px;padding:8px 11px;font-size:12px;color:rgba(247,246,242,.85)} .rule .tk{margin-left:auto;font-family:var(--mono);font-size:8.5px;color:rgba(247,246,242,.45)} .rule.new{opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease); border-color:rgba(247,246,242,.22)} .rule.new.show{opacity:1;transform:none} @media(max-width:820px){.how-col .hv{height:auto;margin-top:24px;min-height:0}} .how-col .hv.hv-shot{padding:0;gap:0;overflow:hidden} .hv-shot img{width:100%;height:280px;object-fit:cover;object-position:center top;display:block} .hv-shot .hv-cap{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase; color:rgba(247,246,242,.5);padding:10px 13px;border-top:1px solid rgba(247,246,242,.08)} .hv .hv-lab{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase; color:rgba(247,246,242,.4);display:flex;justify-content:space-between;align-items:center;margin-bottom:3px} .hv .hv-row{display:flex;align-items:center;gap:9px;background:#1B1B1F;border:1px solid rgba(247,246,242,.07); border-radius:7px;padding:9px 11px;font-size:12px;color:#F7F6F2} .hv .hv-row .tk{margin-left:auto;font-family:var(--mono);font-size:8.5px;color:rgba(247,246,242,.45); letter-spacing:.08em;text-transform:uppercase;white-space:nowrap} .hv .hv-row.big{font-size:13.5px;padding:12px 13px} .hv .hv-quote{background:#1B1B1F;border:1px solid rgba(247,246,242,.1);border-radius:9px;padding:12px 13px; font-size:13px;line-height:1.5;color:#F7F6F2} .hv .hv-btns{display:flex;gap:8px;margin-top:2px} .hv .hv-btns .b{flex:1;text-align:center;font-family:var(--sans);font-weight:500;font-size:12px; padding:9px 0;border-radius:100px} .hv .hv-btns .b.ghost{border:1px solid rgba(247,246,242,.22);color:rgba(247,246,242,.7)} .hv .hv-btns .b.solid{background:#F7F6F2;color:#141417} .hv .hv-bar{height:2px;background:rgba(247,246,242,.12);border-radius:2px;margin-top:6px;position:relative} .hv .hv-bar i{position:absolute;left:0;top:0;bottom:0;width:68%;background:#F7F6F2;border-radius:2px} .hv .hv-note{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,246,242,.45)} .hv .hv-why{border:1px dashed rgba(247,246,242,.22);border-radius:7px;padding:8px 11px;font-size:11.5px; line-height:1.45;color:rgba(247,246,242,.62)} .hv .hv-input{display:flex;align-items:center;gap:2px;background:#1B1B1F;border:1px solid rgba(247,246,242,.16); border-radius:100px;padding:9px 13px;font-size:12px;color:#F7F6F2} .hv .hv-input .cur{width:1px;height:13px;background:#F7F6F2;animation:blink 1.1s steps(1) infinite;flex:none} @keyframes blink{50%{opacity:0}} .hv .hv-learned{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:8.5px; letter-spacing:.1em;text-transform:uppercase;color:rgba(247,246,242,.55);padding:2px 1px} @media(max-width:820px){.how-grid{grid-template-columns:1fr;border-top:0} .how-col{border-left:0;border-top:1px solid var(--n3);padding-left:0;padding-bottom:26px} .how-col:first-child{border-top:1px solid var(--ink)}} /* ════════ MANIFESTO · ink moment ════════ */ .mani{padding:var(--sec-pad) 0} .mani .m-no{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-faint); display:block;margin-bottom:clamp(36px,4.5vw,54px)} .mani .m-lead{font-family:var(--sans);font-stretch:var(--wdth);font-weight:560; font-size:clamp(34px,4.8vw,58px);line-height:1.08;letter-spacing:-.028em;color:var(--c-text);max-width:17em} .mani .m-lead .serif-i{font-stretch:normal} .mani .m-body{font-size:clamp(19px,1.9vw,24px);line-height:1.5;color:var(--c-mute);margin-top:clamp(24px,2.6vw,34px);max-width:29em} .mani .m-kicker{font-family:var(--sans);font-weight:600;font-size:clamp(22px,2.5vw,32px);line-height:1.25; letter-spacing:-.02em;color:var(--c-text);margin-top:clamp(24px,2.6vw,34px);max-width:23em} .mani .m-sign{margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid var(--c-hair)} .mani .m-sign .lab{display:block;font-size:15px;color:var(--c-mute);margin-bottom:22px} .mani .m-flist{display:flex;gap:clamp(28px,4.5vw,64px);flex-wrap:wrap} .mani .mf{display:flex;align-items:center;gap:14px} .mani .mf image-slot{width:52px;height:52px;flex:none;border:1px solid var(--c-hair2);background:var(--c-raise)} .mani .mf .fn{display:block;font-family:var(--sans);font-weight:600;font-size:15.5px;letter-spacing:-.01em;color:var(--c-text)} .mani .mf .fd{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-faint);margin-top:5px} /* ════════ EARLY ACCESS ════════ */ .access-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .access-left .ab{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--n5); display:block;margin-bottom:24px} .access-left h2{font-family:var(--sans);font-stretch:var(--wdth);font-weight:640; font-size:clamp(34px,4.4vw,56px);line-height:1.02;letter-spacing:-.032em} .access-left p{font-size:17.5px;color:var(--n6);margin-top:24px;max-width:24em;line-height:1.55} .form-card{position:relative;border:1px solid var(--n3);border-radius:14px;background:var(--n0);padding:32px; box-shadow:0 36px 90px -44px rgba(20,20,23,.28)} .field{display:flex;flex-direction:column;gap:9px;margin-bottom:18px} .field label{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--n5)} .field input,.field select{font-family:var(--text);font-size:15px;color:var(--ink);background:var(--n1); border:1px solid var(--n3);border-radius:8px;padding:13px 14px;outline:none;transition:border-color .3s,background .3s} .field select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' stroke='%236C6C67' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center;background-size:11px} .field input::placeholder{color:var(--n4)} .field input:focus,.field select:focus{border-color:var(--ink);background:var(--n0)} .form-card .btn.solid{width:100%;justify-content:center;margin-top:6px} .form-card .fine{display:block;text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.1em; text-transform:uppercase;color:var(--n5);margin-top:16px} @media(max-width:820px){.access-grid{grid-template-columns:1fr;gap:40px}} /* ════════ FOOTER ════════ */ .foot{border-top:1px solid var(--hair);padding:64px 0 0;overflow:hidden;position:relative;background:var(--n0)} .foot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap} .foot .l{display:flex;flex-direction:column;gap:14px;max-width:24em} .foot .l .bm{display:flex;align-items:center;gap:11px} .foot .l .bm svg{width:21px;height:21px} .foot .l .bm .wm{font-family:var(--sans);font-weight:300;letter-spacing:.34em;font-size:13.5px;padding-left:3px} .foot .l .tag{font-size:14.5px;color:var(--n6)} .foot .r{display:flex;flex-direction:column;gap:16px;align-items:flex-end} .foot .r nav{display:flex;gap:24px} .foot .r nav a{font-size:14px;color:var(--n6);transition:color .3s;white-space:nowrap} .foot .r nav a:hover{color:var(--ink)} .foot .r .cr{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--n5)} .foot-wm{font-family:var(--sans);font-stretch:var(--wdth);font-weight:700;font-size:22vw;line-height:.74; letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px var(--n3);margin:44px 0 -3.2vw;white-space:nowrap; text-align:center;user-select:none;pointer-events:none} /* ── registration frame · spec-sheet hairline on ink stages ── */ .regframe{position:absolute;inset:22px;border:1px solid var(--c-hair);pointer-events:none;z-index:0} .regframe i{position:absolute;width:11px;height:11px} .regframe i::before{content:"";position:absolute;left:5px;top:0;width:1px;height:11px;background:var(--c-ghost)} .regframe i::after{content:"";position:absolute;top:5px;left:0;height:1px;width:11px;background:var(--c-ghost)} .regframe i.tl{top:-6px;left:-6px}.regframe i.tr{top:-6px;right:-6px} .regframe i.bl{bottom:-6px;left:-6px}.regframe i.br{bottom:-6px;right:-6px} /* ── reveal ── */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal.settled{opacity:1;transform:none;transition:none} .hero-settled .h1 .line > span{transform:none;transition:none} .wedge.settled .you .ul{transform:scaleX(1);transition:none} /* ── tweaks: display width standard ── */ body.wdth-standard{--wdth:100%} body.wdth-standard .disp,body.wdth-standard .wedge h2{font-variation-settings:normal} @media(max-width:880px){ .hero-grid{grid-template-columns:1fr;gap:44px} .shell{padding:0 26px}.nav-in{padding:0 26px} .work-track{padding-left:26px} } @media(prefers-reduced-motion:reduce){ *{animation:none !important;scroll-behavior:auto !important} .reveal{opacity:1;transform:none;transition:none} .h1 .line > span{transform:none} .wedge .you .ul{transform:scaleX(1)} .live-dot::after{display:none} } /* ════════════════════════════════════════════════════════════════ MOBILE · v4 — burger nav, full-screen menu, phone layout polish ════════════════════════════════════════════════════════════════ */ /* ── burger button ── */ .nav-burger{display:none;justify-self:end;width:44px;height:44px;border:none;background:none; cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent} .nav-burger .bz{position:absolute;left:11px;width:22px;height:1.5px;border-radius:2px;background:var(--ink); transition:transform .42s var(--ease),opacity .3s var(--ease),background .42s var(--ease)} .nav-burger .bz:nth-child(1){top:19px;transform:translateY(-4px)} .nav-burger .bz:nth-child(2){top:19px;transform:translateY(4px)} .nav.on-ink .nav-burger .bz{background:#F7F6F2} body.menu-open .nav-burger .bz{background:var(--ink)} body.menu-open .nav-burger .bz:nth-child(1){transform:translateY(0) rotate(45deg)} body.menu-open .nav-burger .bz:nth-child(2){transform:translateY(0) rotate(-45deg)} /* ── full-screen menu ── */ .m-menu{position:fixed;inset:0;z-index:35;background:var(--n0); opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s var(--ease)} body.menu-open .m-menu{opacity:1;visibility:visible} .m-menu::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:radial-gradient(circle,#DCDCD8 1px,transparent 1.2px); background-size:26px 26px;background-position:13px 13px} .m-menu-in{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between; gap:32px;padding:104px 26px 40px;max-width:560px;margin:0 auto} .m-links{display:flex;flex-direction:column;border-top:1px solid var(--hair)} .m-links a{display:flex;align-items:center;gap:18px;padding:21px 4px;border-bottom:1px solid var(--hair); color:var(--ink);opacity:0;transform:translateY(14px); transition:opacity .55s var(--ease),transform .55s var(--ease);-webkit-tap-highlight-color:transparent} body.menu-open .m-links a{opacity:1;transform:none} body.menu-open .m-links a:nth-child(1){transition-delay:.05s} body.menu-open .m-links a:nth-child(2){transition-delay:.1s} body.menu-open .m-links a:nth-child(3){transition-delay:.15s} body.menu-open .m-links a:nth-child(4){transition-delay:.2s} body.menu-open .m-links a:nth-child(5){transition-delay:.25s} .m-links .mn{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--n4);width:22px;flex:none} .m-links .ml{font-family:var(--sans);font-stretch:var(--wdth);font-variation-settings:'wdth' 115; font-weight:560;font-size:clamp(27px,8.4vw,36px);letter-spacing:-.02em;line-height:1} @supports (font-stretch:115%){.m-links .ml{font-variation-settings:normal}} .m-links .mar{margin-left:auto;color:var(--n4);font-size:19px;transition:transform .3s var(--ease)} .m-links a:active{color:var(--n6)} .m-links a:active .mar{transform:translateX(5px);color:var(--ink)} .m-foot{display:flex;flex-direction:column;gap:18px;opacity:0;transform:translateY(14px); transition:opacity .55s var(--ease) .3s,transform .55s var(--ease) .3s} body.menu-open .m-foot{opacity:1;transform:none} .m-foot .btn.solid{width:100%;justify-content:center;padding:17px 28px;font-size:15.5px} .m-tag{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:var(--n5);text-align:center} /* ── show burger / lock scroll at tablet & below ── */ @media(max-width:820px){ .nav-burger{display:flex;align-items:center;justify-content:center;grid-column:3;justify-self:end} .nav-cta{display:none} body.menu-open{overflow:hidden} body.menu-open .nav{background:transparent;border-bottom-color:transparent} body.menu-open .nav .brand,body.menu-open .nav.on-ink .brand{color:var(--ink)} body.menu-open .nav.on-ink .nav-burger .bz{background:var(--ink)} } /* ── phone layout (≤600) ── */ @media(max-width:600px){ :root{--sec-pad:clamp(66px,12vw,92px)} .shell{padding:0 22px} .nav-in{padding:0 22px} .nav{height:62px} /* hero */ .hero{padding:clamp(122px,30vw,150px) 0 60px} .hero-grid{gap:38px} .eyebrow{white-space:normal;letter-spacing:.13em;line-height:1.7;margin-bottom:24px} .h1{font-size:clamp(42px,12.5vw,60px);line-height:1} .hero-sub{font-size:16.5px;margin:22px 0 30px;max-width:38ch} .hero-cta{flex-direction:column;align-items:stretch;gap:11px} .hero-cta .btn{width:100%;justify-content:center;padding:16px 24px;font-size:15.5px} .film-wrap .regframe{inset:-10px} /* wedge */ .wedge{min-height:auto;padding:clamp(78px,20vw,118px) 0} .wedge-in{padding:0 22px} .wedge .wtick{display:none} .wedge h2{font-size:clamp(32px,8.6vw,44px)} .wedge .wkick{margin-bottom:26px} /* see it work — horizontal swipe */ .work-sticky{padding-top:8px} .work-pin .sec-head{margin-bottom:22px} .work-head-row{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:18px} .work-head-row h2{font-size:clamp(26px,7.5vw,34px);max-width:none} .work-arrows{align-self:flex-end} .work-arrows button{width:44px;height:44px} .work-track{padding-left:22px;padding-right:30px} .work-fade{width:48px} /* scale */ .scale-pin .sec-head{margin-bottom:30px} .scale-left h2{font-size:clamp(30px,8vw,42px);max-width:none} .chapter{padding:30px 0} .chapter .stat{font-size:clamp(46px,15vw,62px)} .chapter .ch-b h3{font-size:20px} .chapter .ch-b p{font-size:15px} /* trust */ .trust-lead h2{font-size:clamp(30px,8vw,42px)} .tile{padding:26px 22px 30px} /* how */ .how-col h3{font-size:21px} .how-col .gn{font-size:clamp(60px,18vw,88px)} /* manifesto */ .mani .m-flist{gap:22px 32px} .mani .mf image-slot{width:46px;height:46px} /* early access */ .access-left h2{font-size:clamp(32px,8.4vw,46px)} .access-left p{font-size:16.5px} .form-card{padding:24px} .field{margin-bottom:16px} .field input,.field select{font-size:16px} /* ≥16px avoids iOS zoom-on-focus */ /* footer */ .foot{padding-top:52px} .foot-top{flex-direction:column;gap:32px} .foot .r{align-items:flex-start;gap:18px} .foot .r nav{flex-wrap:wrap;gap:16px 22px} .foot-wm{font-size:30vw;margin:36px 0 -4.6vw} } /* ── very small (≤380) ── */ @media(max-width:380px){ .shell{padding:0 18px} .nav-in{padding:0 18px} .work-track{padding-left:18px} .h1{font-size:clamp(38px,12.5vw,52px)} .hero-sub{font-size:16px} } /* ════════════════════════════════════════════════════════════════ v5 · FULL-BLEED PLATES — monochrome image moments (the breathing) Three distinct treatments so the rhythm never repeats: · .plate--cinema full-bleed ink, signature image, copy lower-left · .plate--triptych paper, three tall B&W detail frames · .plate--band split: image + statement, lead-in to manifesto Every dropped image is forced monochrome via ::part(image) so the page stays true to the brand's no-colour rule. ════════════════════════════════════════════════════════════════ */ .plate{position:relative;overflow:hidden;isolation:isolate} /* force every photo to brand monochrome + register the empty state on dark */ .plate image-slot::part(image){filter:grayscale(1) contrast(1.04) brightness(.96)} .plate .ptick{position:absolute;width:12px;height:12px;pointer-events:none;z-index:3} .plate .ptick::before{content:"";position:absolute;left:5.5px;top:0;width:1px;height:12px;background:rgba(247,246,242,.34)} .plate .ptick::after{content:"";position:absolute;top:5.5px;left:0;height:1px;width:12px;background:rgba(247,246,242,.34)} .plate .ptick.tl{top:26px;left:26px}.plate .ptick.tr{top:26px;right:26px} .plate .ptick.bl{bottom:26px;left:26px}.plate .ptick.br{bottom:26px;right:26px} .plate .pfig{position:absolute;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase} .plate .pgrain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%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)' opacity='.45'/%3E%3C/svg%3E")} /* ── CINEMA · full-bleed ink ── */ .plate--cinema{background:#0E0E11;color:#F7F6F2;height:clamp(580px,94vh,1040px);display:flex;align-items:flex-end} .plate--cinema .pslot{position:absolute;inset:0;z-index:0} .plate--cinema .pslot image-slot{width:100%;height:100%;display:block;color:rgba(247,246,242,.4)} .plate--cinema image-slot::part(frame){background:#15151A;border-radius:0} .plate--cinema image-slot::part(ring){border-color:rgba(247,246,242,.16)} .plate--cinema .pslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:60% 40%;display:block;filter:contrast(1.04) brightness(.99)} .plate--cinema .pscrim{position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(58% 48% at 100% 100%, rgba(14,14,17,.88), rgba(14,14,17,0) 66%), linear-gradient(180deg,rgba(14,14,17,.46) 0%,rgba(14,14,17,.04) 32%,rgba(14,14,17,.10) 60%,rgba(14,14,17,.82) 100%)} .plate--cinema .pfig{top:30px;left:50%;transform:translateX(-50%);color:rgba(247,246,242,.5)} .plate--cinema .pin2{position:relative;z-index:3;width:100%;max-width:var(--shell);margin:0 auto; padding:0 44px clamp(56px,7vw,104px)} .plate--cinema .pover{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:rgba(247,246,242,.62);display:block;margin-bottom:26px} .plate--cinema .pstmt{font-family:var(--sans);font-stretch:var(--wdth);font-weight:560; font-size:clamp(38px,5.4vw,76px);line-height:1.0;letter-spacing:-.032em;max-width:15ch;text-wrap:balance} .plate--cinema .pstmt .serif-i{font-stretch:normal} /* ── TRIPTYCH · paper, three detail frames ── */ .plate--triptych{background:var(--n1);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair); padding:var(--sec-pad) 0} .plate--triptych .thead{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(40px,4.6vw,60px)} .plate--triptych .thead .pover{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--n4)} .plate--triptych .thead h2{font-family:var(--sans);font-stretch:var(--wdth);font-weight:560; font-size:clamp(30px,3.7vw,48px);line-height:1.04;letter-spacing:-.03em;max-width:16ch} .plate--triptych .thead .tmeta{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--n5);white-space:nowrap} .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)} .tcell{position:relative} .tcell .tframe{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--n2);border:1px solid var(--hair)} .tcell .tframe image-slot{width:100%;height:100%;display:block;color:var(--n5)} .tcell .tframe image-slot::part(frame){background:var(--n2);border-radius:0} .tcell .tframe image-slot::part(ring){border-color:var(--n4)} .tcell .tframe .ptick::before{background:rgba(20,20,23,.28)} .tcell .tframe .ptick::after{background:rgba(20,20,23,.28)} .tcell .tcap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:16px} .tcell .tcap .tn{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--n4)} .tcell .tcap .tt{font-family:var(--sans);font-weight:560;font-size:clamp(16px,1.5vw,19px);letter-spacing:-.01em} @media(max-width:760px){.tgrid{grid-template-columns:1fr;gap:34px;max-width:440px;margin:0 auto} .tcell .tframe{aspect-ratio:16/11}} /* ── BAND · split image + statement (lead-in to manifesto) ── */ .plate--band{background:var(--n0);border-top:1px solid var(--hair)} .plate--band .bgrid{display:grid;grid-template-columns:1.05fr .95fr;min-height:clamp(440px,64vh,720px)} .plate--band .bimg{position:relative;overflow:hidden;background:#0E0E11} .plate--band .bimg image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;color:rgba(247,246,242,.4)} .plate--band .bimg image-slot::part(frame){background:#15151A;border-radius:0} .plate--band .bimg image-slot::part(ring){border-color:rgba(247,246,242,.16)} .plate--band .bimg .ptick::before,.plate--band .bimg .ptick::after{background:rgba(247,246,242,.34)} .plate--band .btxt{display:flex;flex-direction:column;justify-content:center; padding:clamp(48px,6vw,96px) clamp(40px,5vw,84px)} .plate--band .btxt .pover{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--n5);display:block;margin-bottom:24px} .plate--band .btxt .pstmt{font-family:var(--sans);font-stretch:var(--wdth);font-weight:560; font-size:clamp(30px,3.6vw,50px);line-height:1.06;letter-spacing:-.03em;max-width:14ch;text-wrap:balance} .plate--band .btxt .pstmt .serif-i{font-stretch:normal} @media(max-width:820px){.plate--band .bgrid{grid-template-columns:1fr} .plate--band .bimg{min-height:clamp(320px,52vh,440px)}} /* ════════ TRUST v5 · the ledger (six one-line guarantees) ════════ */ .ledger{list-style:none;margin:clamp(30px,3.4vw,48px) 0 0;padding:0; border-top:1px solid var(--ink);column-count:2;column-gap:clamp(40px,5vw,76px)} .lrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,1.8vw,28px); padding:clamp(15px,1.7vw,22px) 2px;border-bottom:1px solid var(--hair);break-inside:avoid; transition:padding-left .45s var(--ease)} .lrow .lno{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--n4); transition:color .4s var(--ease)} .lrow .lg{font-family:var(--sans);font-stretch:var(--wdth);font-weight:560; font-size:clamp(19px,2vw,27px);letter-spacing:-.02em;line-height:1.05} .lrow .lglyph{width:23px;height:23px;color:var(--n4);justify-self:end;transition:color .4s var(--ease)} .lrow .lglyph svg{width:23px;height:23px;display:block;stroke:currentColor;fill:none;stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round} .lrow:hover{padding-left:12px} .lrow:hover .lno{color:var(--ink)} .lrow:hover .lglyph{color:var(--ink)} @media(max-width:620px){.ledger{column-count:1}.lrow .lg{font-size:clamp(19px,5.6vw,26px)}} /* ════════ SEE IT WORK v5 · stacked cards (sticky pile + glass) ════════ */ .work-stack{padding:var(--sec-pad) 0 calc(var(--sec-pad) + 20px);position:relative} .ws-head{position:sticky;top:0;z-index:6; padding-top:calc(68px + clamp(12px,1.4vw,20px));padding-bottom:clamp(18px,2vw,26px); margin-bottom:clamp(20px,2.4vw,30px); background:var(--ink);border-bottom:1px solid rgba(247,246,242,.1)} .ws-head .sec-head{margin-bottom:clamp(18px,2vw,26px);border-top:0;padding-top:0} .ws-intro{font-family:var(--sans);font-stretch:var(--wdth);font-weight:600; font-size:clamp(26px,3.1vw,42px);letter-spacing:-.026em;line-height:1.04;max-width:18ch; color:var(--c-text)} .wstack{display:flex;flex-direction:column;gap:clamp(26px,3vw,46px);position:relative} /* luminous shapes behind the STACK ONLY (not the header) so the frosted cards have real light to refract — this is what makes it read as glass */ .wstack::before{content:"";position:absolute;inset:-30px 0;z-index:0;pointer-events:none; background: radial-gradient(38% 26% at 22% 14%, rgba(247,246,242,.26), transparent 72%), radial-gradient(46% 34% at 84% 50%, rgba(247,246,242,.18), transparent 72%), radial-gradient(40% 28% at 46% 88%, rgba(247,246,242,.15), transparent 72%)} .wstack .work-card{position:sticky;top:var(--ws-top,206px);z-index:1;width:auto;max-width:none;flex:initial;border-radius:18px; background:rgba(32,32,36,.46); -webkit-backdrop-filter:blur(32px) saturate(1.4) brightness(1.18);backdrop-filter:blur(32px) saturate(1.4) brightness(1.18); border:1px solid rgba(247,246,242,.16); --c-text:#F7F6F2;--c-mute:rgba(247,246,242,.62);--c-faint:rgba(247,246,242,.4);color:#F7F6F2; display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(28px,4vw,60px);align-items:center; padding:clamp(30px,3.4vw,50px); box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 40px 90px -38px rgba(0,0,0,.8)} .wstack .work-card .wc-fig{color:rgba(247,246,242,.5)} .wstack .work-card .wc-fig b{color:#F7F6F2} .wstack .work-card .wc-vis.dk,.wstack .work-card .wc-vis.shot{border-color:rgba(247,246,242,.14)} .wstack .work-card:nth-child(2){top:calc(var(--ws-top,206px) + 16px)} .wstack .work-card:nth-child(3){top:calc(var(--ws-top,206px) + 32px)} .wstack .work-card:nth-child(4){top:calc(var(--ws-top,206px) + 48px)} .wstack .work-card:nth-child(5){top:calc(var(--ws-top,206px) + 64px)} .wstack .work-card:hover{border-color:rgba(247,246,242,.3); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 50px 100px -36px rgba(0,0,0,.85)} .wstack .work-card .wc-cap{flex-direction:column;align-items:flex-start;gap:clamp(16px,1.9vw,24px)} .wstack .work-card .wc-fig{padding-top:0} .wstack .work-card h3{font-size:clamp(23px,2.3vw,32px);line-height:1.12;max-width:14ch} .wstack .work-card .wc-d{font-size:clamp(15px,1.4vw,17px);margin-top:10px;max-width:30ch;color:rgba(247,246,242,.62)} .wstack .work-card .wc-vis{height:clamp(360px,46vh,470px)} .wstack .work-card:first-child .wc-vis{height:clamp(412px,52vh,500px)} @media(max-width:880px){ .ws-head{position:static;padding-top:0;-webkit-backdrop-filter:none;backdrop-filter:none;background:none} .wstack{gap:22px} .wstack .work-card,.wstack .work-card:nth-child(2),.wstack .work-card:nth-child(3),.wstack .work-card:nth-child(4),.wstack .work-card:nth-child(5){ position:static;top:auto;grid-template-columns:1fr;gap:24px; box-shadow:0 24px 60px -34px rgba(0,0,0,.5)} .wstack .work-card .wc-vis{height:340px} .wstack .work-card:first-child .wc-vis{height:412px} } /* ════════ HOW IT WORKS v5 · one engine on top, three steps beneath ════════ */ .how-engine{position:relative;overflow:hidden;color:#F7F6F2; background:#141417;border:1px solid #26262B;border-radius:16px; margin:clamp(6px,1.4vw,18px) 0 clamp(44px,5vw,68px); padding:clamp(24px,3vw,40px) clamp(26px,3.4vw,52px) clamp(20px,2.4vw,30px)} .how-engine::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 60% at 50% -12%, rgba(247,246,242,.06), transparent 60%)} .he-head{display:flex;justify-content:space-between;align-items:baseline; margin-bottom:clamp(22px,2.6vw,34px);position:relative;z-index:1} .he-htag{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#F7F6F2} .he-hmeta{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,246,242,.4)} .he-grid{display:grid;grid-template-columns:1.05fr 60px .9fr 60px 1.05fr;align-items:center; gap:clamp(12px,1.6vw,22px);position:relative;z-index:1} .he-tag{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:rgba(247,246,242,.55);margin-bottom:14px} .he-tag--center{margin:14px 0 0;text-align:center;color:#F7F6F2} .he-chips{display:flex;flex-direction:column;gap:7px} .he-chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase; color:rgba(247,246,242,.72);border:1px solid rgba(247,246,242,.14);border-radius:100px; padding:7px 13px;background:rgba(247,246,242,.03);text-align:center; animation:heChip 5.4s var(--ease) infinite} .he-chip:nth-child(2){animation-delay:.5s}.he-chip:nth-child(3){animation-delay:1s} .he-chip:nth-child(4){animation-delay:1.5s}.he-chip:nth-child(5){animation-delay:2s}.he-chip:nth-child(6){animation-delay:2.5s} @keyframes heChip{0%,100%{border-color:rgba(247,246,242,.12);color:rgba(247,246,242,.6)} 50%{border-color:rgba(247,246,242,.32);color:#F7F6F2}} .he-flow{position:relative;height:14px} .he-flow::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px; background:repeating-linear-gradient(90deg,rgba(247,246,242,.2) 0 4px,transparent 4px 9px)} .he-dot{position:absolute;top:50%;width:5px;height:5px;border-radius:50%;background:#F7F6F2;margin-top:-2.5px; box-shadow:0 0 8px 1px rgba(247,246,242,.5);animation:heFlow 2.8s var(--ease) infinite} @keyframes heFlow{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}} .he-zone--model{display:flex;flex-direction:column;align-items:center} .he-core{position:relative;width:clamp(66px,7vw,90px);height:clamp(66px,7vw,90px);display:grid;place-items:center} .he-mark{width:42%;height:42%;position:relative;z-index:2} .he-mark path{fill:#F7F6F2} .he-core::before{content:"";position:absolute;inset:0;border-radius:50%; border:1px solid rgba(247,246,242,.2);background:rgba(247,246,242,.02)} .he-spin{position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(247,246,242,.22);animation:heSpin 16s linear infinite} @keyframes heSpin{to{transform:rotate(360deg)}} .he-ping{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(247,246,242,.45);animation:hePing 3.6s var(--ease) infinite} @keyframes hePing{0%{transform:scale(.92);opacity:.7}100%{transform:scale(1.55);opacity:0}} .he-sub{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,246,242,.42);margin-top:5px} .he-out{border:1px solid rgba(247,246,242,.12);border-radius:10px;padding:12px 13px;background:rgba(247,246,242,.03)} .he-out-ctx{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,246,242,.5)} .he-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:9px 0} .he-week span{aspect-ratio:1;display:grid;place-items:center;font-family:var(--mono);font-size:8px; border:1px solid rgba(247,246,242,.1);border-radius:4px;color:rgba(247,246,242,.7)} .he-week span.hot{background:#F7F6F2;color:#141417;border-color:#F7F6F2} .he-week span.rest{color:rgba(247,246,242,.28)} .he-out-note{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,246,242,.42)} .he-steer{position:relative;margin-top:clamp(20px,2.4vw,32px);height:38px;display:flex;align-items:center;justify-content:center;z-index:1} .he-steer-line{position:absolute;left:6%;right:6%;top:50%;height:1px; background:repeating-linear-gradient(90deg,rgba(247,246,242,.22) 0 4px,transparent 4px 10px)} .he-steer-dot{position:absolute;top:50%;width:6px;height:6px;border-radius:50%;background:#F7F6F2;margin-top:-3px; box-shadow:0 0 9px 1px rgba(247,246,242,.5);animation:heSteer 6.5s linear infinite} @keyframes heSteer{0%{left:94%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:6%;opacity:0}} .he-steer-lab{position:relative;z-index:1;background:#141417;padding:0 14px; font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,246,242,.58)} .how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.6vw,52px); border-top:1px solid var(--c-hair);padding-top:clamp(30px,3.4vw,46px)} .how-step{display:flex;gap:clamp(14px,1.6vw,20px);align-items:flex-start} .how-step .hs-n{font-family:var(--sans);font-stretch:var(--wdth);font-weight:700; font-size:clamp(26px,2.8vw,38px);line-height:.9;letter-spacing:-.03em;color:var(--ink);flex:none; font-variant-numeric:tabular-nums} .how-step h3{font-family:var(--sans);font-weight:600;font-size:clamp(18px,1.9vw,22px);letter-spacing:-.015em; line-height:1.2;margin-bottom:9px} .how-step p{font-size:15px;color:var(--n6);line-height:1.55;max-width:30ch} @keyframes heFlowV{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}} @media(prefers-reduced-motion:reduce){ .he-chip,.he-dot,.he-spin,.he-ping,.he-steer-dot{animation:none} } @media(max-width:860px){ .he-grid{grid-template-columns:1fr;gap:20px} .he-flow{height:22px} .he-flow::before{left:50%;right:auto;top:0;bottom:0;width:1px;height:100%; background:repeating-linear-gradient(180deg,rgba(247,246,242,.2) 0 4px,transparent 4px 9px)} .he-dot{left:50%!important;margin-left:-2.5px;margin-top:0;animation:heFlowV 2.8s var(--ease) infinite} .he-zone--model{align-items:flex-start} .he-tag--center{text-align:left} .he-core{margin-left:0} .how-steps{grid-template-columns:1fr;gap:22px} } /* grain off in the work section — it was the cause of the header "rectangle" */ .work-stack .grain{display:none} /* ════════ HOW v5.2 · merged compact engine (steps live inside the diagram) ════════ */ .he-htag{display:inline-flex;align-items:center;gap:9px} .he-hmark{width:15px;height:15px;display:block} .he-hmark path{fill:#F7F6F2} .he-stages{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:stretch; gap:clamp(8px,1.2vw,16px);position:relative;z-index:1} .he-stage{display:flex;flex-direction:column} .he-sh{display:flex;gap:clamp(10px,1.2vw,14px);align-items:flex-start; margin-bottom:clamp(14px,1.8vw,20px);min-height:54px} .he-num{font-family:var(--sans);font-stretch:var(--wdth);font-weight:700;font-size:clamp(22px,2.5vw,32px); line-height:.85;letter-spacing:-.03em;color:#F7F6F2;flex:none} .he-k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase; color:rgba(247,246,242,.45);margin-bottom:5px} .he-sb h4{font-family:var(--sans);font-weight:600;font-size:clamp(14px,1.45vw,17px);letter-spacing:-.012em; line-height:1.18;color:#F7F6F2} .he-arrow{position:relative;align-self:center;height:14px;min-width:30px} .he-arrow::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:1px; background:repeating-linear-gradient(90deg,rgba(247,246,242,.2) 0 4px,transparent 4px 9px)} .he-adot{position:absolute;top:50%;width:5px;height:5px;border-radius:50%;background:#F7F6F2;margin-top:-2.5px; box-shadow:0 0 8px 1px rgba(247,246,242,.5);animation:heFlow 2.8s var(--ease) infinite} .he-rules{display:flex;flex-direction:column;gap:7px} .he-rule{display:flex;align-items:center;justify-content:space-between;gap:8px; font-family:var(--mono);font-size:9px;letter-spacing:.03em;text-transform:uppercase;color:rgba(247,246,242,.68); border:1px solid rgba(247,246,242,.12);border-radius:8px;padding:8px 11px;background:rgba(247,246,242,.03)} .he-rule i{font-style:normal;color:rgba(247,246,242,.5)} .he-rule--new{border-color:rgba(247,246,242,.3);color:#F7F6F2;animation:heChip 4.2s var(--ease) infinite} @media(max-width:860px){ .he-stages{grid-template-columns:1fr;gap:6px} .he-sh{min-height:0} .he-arrow{align-self:start;height:20px;min-width:0;margin-left:6px} .he-arrow::before{left:50%;right:auto;top:0;bottom:0;width:1px;height:100%; background:repeating-linear-gradient(180deg,rgba(247,246,242,.2) 0 4px,transparent 4px 9px)} .he-adot{left:50%!important;margin-left:-2.5px;margin-top:0;animation:heFlowV 2.8s var(--ease) infinite} } /* Manifesto · a coach portrait beside the words */ .mani .mani-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(44px,6vw,92px);align-items:center} .mani .mani-copy{min-width:0} .mani-grid .mani-sign{grid-column:1 / -1;margin-top:clamp(34px,4vw,54px)} .mani-portrait{position:relative} .mani-portrait .mp-frame{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden; background:#15151A;border:1px solid var(--c-hair2)} .mani-portrait image-slot{width:100%;height:100%;display:block;color:rgba(247,246,242,.4)} .mani-portrait image-slot::part(frame){background:#15151A;border-radius:0} .mani-portrait image-slot::part(image){filter:grayscale(1) contrast(1.05)} .mani-portrait image-slot::part(ring){border-color:rgba(247,246,242,.16)} .mani-portrait .ptick{position:absolute;width:12px;height:12px;z-index:2;pointer-events:none} .mani-portrait .ptick::before{content:"";position:absolute;left:5.5px;top:0;width:1px;height:12px;background:rgba(247,246,242,.34)} .mani-portrait .ptick::after{content:"";position:absolute;top:5.5px;left:0;height:1px;width:12px;background:rgba(247,246,242,.34)} .mani-portrait .ptick.tl{top:14px;left:14px} .mani-portrait .ptick.br{bottom:14px;right:14px} .mani-portrait .mp-cap{display:block;margin-top:14px;font-family:var(--mono);font-size:9px;letter-spacing:.16em; text-transform:uppercase;color:var(--c-faint)} @media(max-width:860px){ .mani .mani-grid{grid-template-columns:1fr;gap:clamp(36px,7vw,52px)} .mani-portrait{max-width:380px} }