:root{ --ground:#573D4D; --accent:#9BDB85; --ink:#f5d9c7; /* 7.17:1 — titles, thesis lines, before-numbers (warm, Oct 2026) */ --body:#DCCFD6; /* 6.39:1 — running text */ --mute:#C0ACB6; /* 4.50:1 — micro labels, captions, secondary */ --dim:var(--body); /* legacy alias */ --on-accent:#171216; --strip:#DAD4D8; --strip-ink:#171216; --hair:rgba(255,255,255,.17); --scale:1; --gap:150px; --grain:.45; --speed:.85s; --rail:64px; --pad:clamp(22px,4.4vw,72px); --mono:'JetBrains Mono',ui-monospace,Menlo,monospace; --sans:'Archivo',Helvetica,Arial,sans-serif; --micro:var(--mono); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--ground);color:var(--ink); font-family:var(--sans);font-weight:400; -webkit-font-smoothing:antialiased; /* clip, not hidden — `hidden` would make body a scroll container and kill position:sticky */ overflow-x:clip; } img{max-width:100%;display:block;-webkit-user-drag:none;user-drag:none} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* ── grain ── */ #grain{position:fixed;inset:0;z-index:60;pointer-events:none; background-image:var(--grainimg);background-size:170px 170px; opacity:var(--grain);mix-blend-mode:overlay} /* ── left rail ── */ #rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:50; border-right:1px solid var(--hair);background:var(--ground); display:flex;flex-direction:column;align-items:center;justify-content:space-between; padding:22px 0;font-family:var(--micro);font-size:10px;letter-spacing:.16em;color:var(--mute)} #rail .vert{writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap} #rail .nm{writing-mode:vertical-rl;color:var(--ink);letter-spacing:.26em;font-weight:500} body[data-rail="off"] #rail{display:none} /* ── top-right menu ── */ /* ── the menu ─────────────────────────────────────────────────────── One pane of glass. Closed it is a circle with a white hamburger in the corner; pressing it stretches the same pane into a full-height drawer. Width/height/top/right all animate, so the glass never cross-fades — it grows out of the corner and pins itself to the edge. */ #menu{position:fixed;top:16px;right:16px;z-index:56; width:56px;height:56px;border-radius:28px;overflow:hidden; background:rgba(0,0,0,.23); -webkit-backdrop-filter:blur(17px) saturate(90%); backdrop-filter:blur(17px) saturate(90%); transition:width .58s cubic-bezier(.22,1.28,.36,1), height .58s cubic-bezier(.22,1.28,.36,1), top .58s cubic-bezier(.22,1.28,.36,1), right .58s cubic-bezier(.22,1.28,.36,1), border-radius .5s cubic-bezier(.22,1.28,.36,1); will-change:width,height} /* flush to the top-right corner when open, so 100dvh really is the screen */ #menu.open{top:0;right:0;width:min(320px,100vw);height:100vh;height:100dvh; border-radius:50px 0 0 50px} #menubtn{position:absolute;top:0;right:0;z-index:2;width:56px;height:56px;padding:0; display:grid;place-items:center;background:none;border:0;cursor:pointer} #menubtn .bars{position:relative;display:block;width:20px;height:11px} #menubtn .bars i{position:absolute;left:0;width:20px;height:1.5px;border-radius:2px; background:#fff; transition:transform .42s cubic-bezier(.22,1.28,.36,1)} #menubtn .bars i:nth-child(1){top:0} #menubtn .bars i:nth-child(2){top:9.5px} #menu.open #menubtn .bars i:nth-child(1){transform:translateY(4.75px) rotate(45deg)} #menu.open #menubtn .bars i:nth-child(2){transform:translateY(-4.75px) rotate(-45deg)} #menulist{position:absolute;left:0;right:0;top:54px;z-index:1; display:flex;flex-direction:column;padding:0 clamp(26px,3.4vw,44px) 20px; font-family:var(--sans);font-size:1.8rem;font-weight:600; letter-spacing:-.09em;line-height:1.14; visibility:hidden;transition:visibility 0s .45s} #menu.open #menulist{visibility:visible;transition:visibility 0s} #menulist a{display:block;padding:.46em 0;color:rgba(255,255,255,.74); border-bottom:1px solid rgba(255,255,255,.10); opacity:0;transform:translateY(10px); transition:opacity .4s, transform .5s cubic-bezier(.22,1.15,.36,1), color .2s} #menulist a:last-child{border-bottom:0} #menulist a:hover{color:#fff} #menulist a.on{color:#fff} #menulist a.on::after{content:"";display:inline-block;width:7px;height:7px;border-radius:4px; background:var(--accent);margin-left:12px;vertical-align:middle} #menu.open #menulist a{opacity:1;transform:none} #menu.open #menulist a:nth-child(1){transition-delay:.13s} #menu.open #menulist a:nth-child(2){transition-delay:.19s} #menu.open #menulist a:nth-child(3){transition-delay:.25s} #menu.open #menulist a:nth-child(4){transition-delay:.31s} @media (max-width:760px){ #menu{top:12px;right:12px;width:48px;height:48px;border-radius:24px} /* a lid that drops from the top instead of a side drawer */ #menu.open{top:0;right:0;width:100%;height:320px;border-radius:0 0 20px 20px} #menubtn{width:48px;height:48px} #menulist{top:46px;padding:0 22px 22px;font-size:1.6rem} } @media (prefers-reduced-motion:reduce){ #menu,#menulist a,#menubtn .bars i{transition:none} } .page{padding-left:var(--rail);transition:padding-left .3s} body[data-rail="off"] .page{padding-left:0} @media (max-width:760px){ #rail{display:none!important} .page{padding-left:0!important} } .wrap{padding-left:var(--pad);padding-right:var(--pad);max-width:1240px;margin:0 auto} section{padding-block:calc(var(--gap) * .5)} /* ── reveal ── */ .rv{opacity:1;transform:none} body.js .rv{opacity:0;transform:translateY(22px); transition:opacity var(--speed) cubic-bezier(.22,.8,.3,1), transform var(--speed) cubic-bezier(.22,.8,.3,1)} body.js .rv.in{opacity:1;transform:none} body.js .rv.d1{transition-delay:.07s} body.js .rv.d2{transition-delay:.14s} body.js .rv.d3{transition-delay:.21s} body.js .rv.d4{transition-delay:.28s} @media (prefers-reduced-motion:reduce){ body.js .rv{opacity:1!important;transform:none!important;transition:none!important} } /* ── hero ── */ .hero{padding-top:clamp(70px,11vh,140px);padding-bottom:calc(var(--gap) * .42)} .lock{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px} .lock .big{font-size:calc(clamp(46px,8.6vw,104px) * var(--scale));font-weight:400; line-height:.98;letter-spacing:-.035em;color:var(--ink)} .lock .sm{font-family:var(--micro);font-size:calc(13px * var(--scale));color:var(--mute);letter-spacing:.04em} .tagline{font-size:calc(clamp(21px,2.5vw,30px) * var(--scale));font-weight:300;line-height:1.3; letter-spacing:-.012em;color:var(--dim);max-width:26ch;margin:34px 0 0;text-wrap:balance} .tagline b{font-weight:500;color:var(--ink)} /* the four disciplines are the qualifying line — out of the micro type */ .disciplines{font-size:calc(17px * var(--scale));line-height:1.55;color:var(--body); max-width:36ch;margin:28px 0 0} .disciplines i{font-style:normal;color:var(--mute);padding:0 .2em} .hero .metaline{margin-top:26px} /* ── the hero reads like a dictionary entry: the lockup is the headword, everything else is the definition column beside it. Phones keep the plain stack. ── */ @media (min-width:880px){ .herofix .hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); column-gap:clamp(30px,4.2vw,68px);align-items:start} .herofix .hero .lock{grid-column:1;grid-row:1 / span 3;align-self:start} .herofix .hero .tagline, .herofix .hero .disciplines, .herofix .hero .metaline{grid-column:2;max-width:38ch} .herofix .hero .tagline{grid-row:1;margin-top:.35em; border-left:1px solid var(--hair);padding-left:clamp(20px,2.2vw,34px)} .herofix .hero .disciplines{grid-row:2;padding-left:clamp(20px,2.2vw,34px)} .herofix .hero .metaline{grid-row:3;padding-left:clamp(20px,2.2vw,34px)} } .metaline{font-family:var(--micro);font-size:calc(11px * var(--scale));letter-spacing:.13em; text-transform:uppercase;line-height:2.1;color:var(--mute);margin:42px 0 0} /* ── hero video ─────────────────────────────────────────────────────────── A tall track (.herostage) with one pinned screen (.herofix) inside it. Scroll distance through the track = video time. Sticky, not scroll-jacking: the wheel is never intercepted, the screen just holds still while you pass. --heroscroll is how many EXTRA screens the hero holds before the page moves on. 0 = one screen: you scroll and the next section comes straight up while the word falls back and dissolves behind it. */ :root{ --heroscroll:0 } .herostage{position:relative;margin-left:calc(var(--rail) * -1); width:calc(100% + var(--rail)); /* it is a
, so cancel the global section padding — 75px of it would show above the pinned screen */ padding-block:0; height:calc(100vh + var(--heroscroll) * 100vh)} @supports (height:100svh){ .herostage{height:calc(100svh + var(--heroscroll) * 100svh)} } .herofix{position:sticky;top:0;height:100vh;overflow:hidden; padding-left:var(--rail); display:flex;flex-direction:column;justify-content:center} @supports (height:100svh){ .herofix{height:100svh} } @media (max-width:760px){ .herostage{margin-left:0;width:100%} .herofix{padding-left:0} } .herovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; z-index:0;background:var(--ground);pointer-events:none} /* a scrim so the lockup holds up over the brightest frames */ /* the copy sits left, so the scrim darkens the left — same move as the case cards, where the gradient lives on the side the text crosses */ .heroveil{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to right, rgba(36,23,31,.72), rgba(36,23,31,.44) 34%, rgba(36,23,31,.14) 64%, rgba(36,23,31,.04))} @media (max-width:880px){ .heroveil{background:linear-gradient(to top, rgba(36,23,31,.70), rgba(36,23,31,.40) 55%, rgba(36,23,31,.16))} } .herofix .hero{position:relative;z-index:2;width:100%;padding-top:0;padding-bottom:0; animation:heroin .7s cubic-bezier(.22,.8,.3,1) both} /* pure CSS, no JS dependency — the first screen is never blank */ @keyframes heroin{from{opacity:0;transform:translate3d(0,14px,0)} to{opacity:1;transform:none}} .scrollcue{position:absolute;left:50%;bottom:24px;z-index:2;margin:0; transform:translateX(-50%);font-family:var(--micro);font-size:10px; letter-spacing:.3em;text-transform:uppercase;color:var(--mute);pointer-events:none} .scrollcue::after{content:"";display:block;width:1px;height:26px;margin:10px auto 0; background:linear-gradient(var(--mute),transparent)} /* no video, or a browser that will not seek: fall back to a plain hero */ .herostage.novid{height:auto;margin-left:0;width:100%} .herostage.novid .herofix{position:static;height:auto;padding-left:0;overflow:visible} .herostage.novid .herovid,.herostage.novid .heroveil,.herostage.novid .scrollcue{display:none} .herostage.novid .hero{animation:none;opacity:1!important;transform:none!important; padding-top:clamp(70px,11vh,140px);padding-bottom:calc(var(--gap) * .42)} @media (prefers-reduced-motion:reduce){ .herostage{height:auto;margin-left:0;width:100%} .herofix{position:static;height:auto;padding-left:0;overflow:visible} .herovid{position:relative;height:auto;aspect-ratio:16/9} .heroveil{display:none} .herofix .hero{animation:none;opacity:1!important;transform:none!important; padding-top:clamp(40px,6vh,80px);padding-bottom:calc(var(--gap) * .42)} .scrollcue{display:none} } /* ── hero: the 3D word ────────────────────────────────────────────── Transparent canvas — the Grainient ground in #bg and the grain layer above it are what you see behind the letters, same as every other section. It sits under the lockup and never eats a click. */ .hero3d{position:fixed;inset:0;z-index:0;pointer-events:none;background:transparent} body.no-hero3d .hero3d{display:none} .hero3d canvas{display:block;width:100%;height:100%} /* no WebGL, or reduced motion: the word is dropped and the hero collapses to the plain lockup — the same fallback the video used to take */ .herostage.novid .hero3d{display:none} @media (prefers-reduced-motion:reduce){ .herostage{height:auto} .herofix{position:relative;min-height:0} .hero3d{display:none} } /* ── phones: the hero is only as tall as its copy ── A full-screen pinned hero left ~200px of empty ground and a "Scroll" cue under the metaline, pushing the client strip below the fold. On a phone the stage collapses to its content: the lockup keeps its spot on the 3D word (the word's centre sits at 26% of the screen, see layout() in hero3d.js), and the client strip follows straight after the metaline. */ @media (max-width:760px){ .herostage{height:auto} .herofix{position:relative;height:auto;overflow:visible; justify-content:flex-start; padding-top:calc(26vh + 7.5vw);padding-bottom:36px} @supports (height:100svh){ .herofix{height:auto;padding-top:calc(26svh + 7.5vw)} } .scrollcue{display:none} } /* ── client strip ── */ .striplab{font-family:var(--micro);font-size:calc(10px * var(--scale));letter-spacing:.24em; text-transform:uppercase;color:var(--accent);margin:0 0 20px} /* inside the light client strip the sage reads as neon — match the logos */ .clients .striplab{color:var(--strip-ink);opacity:.82;text-align:center} .clients{background:var(--strip); background:color-mix(in srgb, var(--strip) 40%, transparent); color:var(--strip-ink);padding:34px 0 36px;overflow:hidden} .clients .wrap{padding-left:0;padding-right:0} /* a seamless marquee: two identical runs, translated exactly one run's width. Each item carries its own right margin so the seam has no extra gap. */ .loop{position:relative;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .loop-track{display:flex;align-items:center;width:max-content; animation:loopscroll 38s linear infinite} .loop:hover .loop-track{animation-play-state:paused} @keyframes loopscroll{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}} @media (prefers-reduced-motion:reduce){ .loop-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto} } /* ── case cards ── */ /* the case card, as drawn in Figma: the headline block sits ON the image, and the note drops below it on the opposite side. */ .case{display:grid;grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(14px,1.8vw,26px);row-gap:clamp(24px,3vw,40px);align-items:center} .case .eyebrow{grid-column:1/-1;grid-row:1;margin:0} .case .media{grid-column:1 / span 7;grid-row:2} .case .lead {grid-column:6 / span 7;grid-row:2;z-index:2;position:relative} .case.flip .eyebrow{text-align:right} .case.flip .media{grid-column:6 / span 7} .case.flip .lead {grid-column:1 / span 7;text-align:right} .case.flip .note{margin-left:auto} /* the block itself, not just the text */ /* a soft scrim so the headline reads over a light frame as well as a dark one */ /* The scrim lives on the photo, not behind the text: a gradient inside the image fades out within the frame, so its outer edge is the image's own edge and there is no floating rectangle. It darkens the side the headline actually crosses: the text column starts inside the frame's right edge on a standard card, and inside its left edge on a flipped one. */ .case .media .px{position:relative} .case .media .px::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to left, rgba(22,14,19,.80), rgba(22,14,19,.52) 20%, rgba(22,14,19,.18) 38%, rgba(22,14,19,0) 54%)} .case.flip .media .px::after{ background:linear-gradient(to right, rgba(22,14,19,.80), rgba(22,14,19,.52) 20%, rgba(22,14,19,.18) 38%, rgba(22,14,19,0) 54%)} @media (max-width:880px){ .case .media .px::after{display:none} } /* portrait on desktop, landscape on a phone — the source files are one of each, so each one names the crop centre it needs in the frame it doesn't already fit */ .case .media img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover} .case .media img.h-milky{object-position:54% center} /* keeps the card and the scoop */ @media (max-width:880px){ .case .media img{aspect-ratio:4/3} .case .media img.h-milky{object-position:center} .case .media img.h-oros{object-position:center 55%} /* keeps the hem, drops ceiling */ } /* the client wordmark above the headline — same CSS-mask trick as the client bar, so it takes --ink whatever colour the source PNG is */ .caselogo{display:block;background-color:var(--ink);opacity:.92;margin:0 0 20px; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:left center;mask-position:left center; -webkit-mask-size:contain;mask-size:contain} .case.flip .caselogo{margin-left:auto; -webkit-mask-position:right center;mask-position:right center} @media (max-width:880px){ .case.flip .caselogo{margin-left:0; -webkit-mask-position:left center;mask-position:left center} } @media (max-width:880px){ .case{grid-template-columns:minmax(0,1fr);row-gap:26px} .case .eyebrow,.case .media,.case .lead, .case.flip .eyebrow,.case.flip .media,.case.flip .lead{ grid-column:1/-1;grid-row:auto;text-align:left} .case.flip .note{margin-left:0} .case .lead::before{display:none} } /* parallax: JS writes --y, CSS composes it so the reveal transform never fights it */ .px{transform:translate3d(0,var(--y,0px),0);will-change:transform} @media (prefers-reduced-motion:reduce){ .px{transform:none} } .eyebrow{font-family:var(--micro);font-size:calc(10px * var(--scale));letter-spacing:.34em; text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 20px} .case h2{font-size:calc(clamp(28px,3.7vw,48px) * var(--scale));font-weight:300;line-height:1.1; letter-spacing:-.026em;color:var(--ink);margin:0 0 26px;text-wrap:balance} .statlist{font-family:var(--micro);font-size:calc(13px * var(--scale));line-height:2.1; color:var(--body);font-variant-numeric:tabular-nums;margin:0 0 24px} .statlist b{font-weight:500;color:var(--accent)} .statlist .was{color:var(--mute)} .statlist .ar{color:var(--mute);padding:0 .4em} /* ── home case numbers: the same label | value rows as the case pages, set larger so the results carry the card. Values in accent; a before→after row keeps the before in ink, like the BFCM table. ── */ .homefigs{margin:0 0 30px;border-top:1px solid var(--hair)} .homefigs .fg{padding:15px 0} .homefigs .k{text-align:left;line-height:1.5} .homefigs .v{font-size:calc(clamp(28px,3.1vw,42px) * var(--scale));line-height:1} .homefigs .v > b{font-weight:300;color:var(--accent)} .homefigs .vb{color:var(--ink)} .homefigs .vd b{font-weight:300} .case p.note{font-size:calc(16px * var(--scale));line-height:1.62;color:var(--body); max-width:40ch;margin:0 0 30px} .chip{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--on-accent); font-weight:700;font-size:calc(15px * var(--scale));letter-spacing:.01em;padding:13px 24px; will-change:transform;transition:transform .18s ease} .adgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px} .adgrid img{aspect-ratio:1;object-fit:cover;width:100%} /* ── proof band ── */ .band{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)} .band .kicker{font-size:calc(clamp(27px,3.6vw,44px) * var(--scale));font-weight:300;line-height:1.13; letter-spacing:-.026em;color:var(--ink);margin:0 0 34px;max-width:20ch;text-wrap:balance} .nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:0 0 52px} @media (max-width:900px){ .nums{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px} } @media (max-width:560px){ .nums{grid-template-columns:minmax(0,1fr);gap:22px} } .nums .k{font-family:var(--micro);font-size:calc(10px * var(--scale));letter-spacing:.14em; text-transform:uppercase;color:var(--mute);margin:0 0 10px} .nums .v{display:flex;align-items:baseline;white-space:nowrap; font-size:calc(clamp(20px,2.3vw,32px) * var(--scale));font-weight:300;letter-spacing:-.03em; font-variant-numeric:tabular-nums;line-height:1.1} .nums .v .was{color:var(--mute)} .nums .v .ar{color:var(--mute);padding:0 .18em} /* a chapter that reports two results rather than four reads at the same size as the four-up rows; the value is the result, so it takes accent */ .nums.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:740px} .nums.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1020px} @media (max-width:760px){ .nums.three{grid-template-columns:minmax(0,1fr)} } .nums.three .v{color:var(--accent)} @media (max-width:560px){ .nums.two{grid-template-columns:minmax(0,1fr)} } .nums.two .v{color:var(--accent)} .band .foot{font-size:calc(16px * var(--scale));line-height:1.62;color:var(--body);max-width:52ch;margin:44px 0 0} /* ── before / after slider ── */ .ba{position:relative;overflow:hidden;user-select:none;touch-action:pan-y;cursor:ew-resize; background:#2b2126;aspect-ratio:16/9} .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center; pointer-events:none;-webkit-user-drag:none;user-drag:none} .ba .after{clip-path:inset(0 0 0 var(--sx,50%))} .ba .bar{position:absolute;top:0;bottom:0;left:var(--sx,50%);width:2px;background:var(--accent); transform:translateX(-1px);pointer-events:none} .ba .knob{position:absolute;top:50%;left:var(--sx,50%);width:46px;height:46px;border-radius:50%; background:var(--accent);transform:translate(-50%,-50%);pointer-events:none; display:flex;align-items:center;justify-content:center;gap:3px} .ba .knob i{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent} .ba .knob i:first-child{border-right:6px solid var(--on-accent)} .ba .knob i:last-child{border-left:6px solid var(--on-accent)} .ba .tag{position:absolute;bottom:14px;font-family:var(--micro);font-size:10px;letter-spacing:.2em; text-transform:uppercase;padding:6px 11px;background:rgba(0,0,0,.55);color:#fff;pointer-events:none} .ba .tag.l{left:14px} .ba .tag.r{right:14px} .ba:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .bacap{font-family:var(--micro);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--mute);margin:16px 0 0} /* ── personal ── */ /* a cluster, not a grid — the pieces overlap and come forward on hover or tap */ .personal{position:relative;aspect-ratio:13/10;margin-top:calc(var(--gap) * .3)} .personal .ph{position:absolute;margin:0;cursor:pointer; transition:z-index 0s .2s, filter .45s ease} .personal .ph .px{transition:scale .55s cubic-bezier(.2,.8,.3,1), box-shadow .55s ease; scale:1;display:block} .personal .ph img{width:100%;display:block} .personal .ph:hover,.personal .ph.on{z-index:20;transition:z-index 0s} .personal .ph:hover .px,.personal .ph.on .px{scale:1.075; box-shadow:0 26px 60px -18px rgba(12,8,11,.7)} .personal .p1{left:1%; top:2%; width:29%; z-index:4} .personal .p2{left:22%; top:38%; width:33%; z-index:6} .personal .p3{left:36%; top:2%; width:32%; z-index:3} .personal .p4{left:65%; top:16%; width:26%; z-index:5} .personal .p5{left:44%; top:40%; width:28%; z-index:7} /* Phones and small tablets: one row that scrolls sideways. Every photo is the same height; portraits keep their own width, landscapes are capped so one never fills more than the screen. The row bleeds to the screen edges and the next photo always peeks in at the right, so it reads as swipeable. Parallax and the tap-to-lift from the desktop cluster are switched off. */ @media (max-width:880px){ .personal{position:static;aspect-ratio:auto;display:flex;gap:10px; --h:min(72vw,420px); overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1); padding:0 var(--pad) 4px;scroll-padding-inline:var(--pad); scrollbar-width:none} .personal::-webkit-scrollbar{display:none} /* a trailing spacer so the last photo can snap to the left edge too */ .personal::after{content:"";flex:0 0 1px} .personal .ph{position:static;flex:0 0 auto;width:auto!important;height:var(--h); scroll-snap-align:start;cursor:default} .personal .ph.rv{opacity:1!important;transform:none!important} .personal .ph .px{height:100%;transform:none!important;scale:1!important;box-shadow:none!important} .personal .ph img{height:100%;width:auto;max-width:calc(100vw - var(--pad) * 2 - 36px); object-fit:cover} } /* ── tools ── */ .tools{display:grid;grid-template-columns:170px minmax(0,1fr);gap:clamp(18px,3vw,44px)} @media (max-width:820px){ .tools{grid-template-columns:minmax(0,1fr)} .tools > div:first-child{display:none} } .tools dl{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px 26px;margin:0} .tools dt{font-family:var(--micro);font-size:calc(10px * var(--scale));letter-spacing:.16em; text-transform:uppercase;color:var(--mute);padding-top:4px} .tools dd{margin:0;font-size:calc(17px * var(--scale));line-height:1.5;color:var(--body)} .tools dd em{font-style:normal;color:var(--mute)} /* ── contact ── */ .contact{border-top:1px solid var(--hair); padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,64px)} .contact h2{font-size:calc(clamp(38px,6vw,76px) * var(--scale));font-weight:300;line-height:1; letter-spacing:-.035em;color:var(--accent);margin:0 0 22px} .contact .said{font-size:calc(18px * var(--scale));line-height:1.55;color:var(--body); max-width:40ch;margin:0 0 40px} .links{display:flex;flex-wrap:wrap;gap:12px 14px} .links a{font-family:var(--micro);font-size:calc(12px * var(--scale));letter-spacing:.14em; text-transform:uppercase;border:1px solid var(--accent);color:var(--accent); padding:13px 20px;transition:.2s} .links a:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .colophon{font-family:var(--micro);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--mute);margin:64px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px} .made{font-family:var(--micro);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:14px 0 0} .made a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s} .made a:hover{border-bottom-color:var(--accent)} /* ── client logos (CSS mask = one colour, whatever the source logo is) ── */ /* width/height come from --w/--h, set per logo in js/site.js, so --logo-k can shrink the whole row on small screens */ .marks i{display:block;flex:0 0 auto;width:calc(var(--w) * var(--logo-k, 1)); height:calc(var(--h) * var(--logo-k, 1)); margin-right:calc(58px * var(--logo-k, 1));background-color:var(--strip-ink);opacity:.82; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain;transition:opacity .2s} .marks i:hover{opacity:1} @media (max-width:760px){ .marks i{--logo-k:.6} } /* ── case page ── */ .crumb{display:flex;justify-content:space-between;align-items:baseline;gap:20px; font-family:var(--micro);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--mute);padding-top:30px} .crumb a:hover{color:var(--accent)} .ctitle{padding-top:clamp(46px,7vh,90px)} .ctitle h1{font-size:calc(clamp(34px,5.6vw,74px) * var(--scale));font-weight:300;line-height:1.06; letter-spacing:-.032em;color:var(--ink);margin:22px 0 0;max-width:17ch;text-wrap:balance} /* a title over the scope list: reads as a heading without competing with the chapter heads further down the page */ .rolehead{font-size:calc(clamp(20px,2.1vw,27px) * var(--scale));font-weight:300; letter-spacing:-.022em;line-height:1.15;color:var(--ink);margin:0 0 26px} .role{display:grid;grid-template-columns:210px minmax(0,1fr);gap:13px 30px;margin:0; padding-top:34px;border-top:1px solid var(--hair)} @media (max-width:680px){ .role{grid-template-columns:minmax(0,1fr);gap:4px 0} .role dd{margin-bottom:14px} } .role dt{font-family:var(--micro);font-size:calc(11px * var(--scale));letter-spacing:.13em; text-transform:uppercase;color:var(--accent);padding-top:3px} .role dd{margin:0;font-size:calc(16px * var(--scale));line-height:1.5;color:var(--body)} .chap{display:grid;grid-template-columns:170px minmax(0,1fr);gap:clamp(18px,3vw,44px)} @media (max-width:820px){ .chap{grid-template-columns:minmax(0,1fr)} } .chap .no,.vrow .no{font-family:var(--micro);font-size:calc(10px * var(--scale));letter-spacing:.26em; text-transform:uppercase;color:var(--accent);padding-top:9px} /* one vertical clip standing beside the chapter it belongs to */ .vrow{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(22px,3.4vw,56px);align-items:center;margin-top:calc(var(--gap) * .3)} .vrow .vplay{aspect-ratio:9/16} .vrow .no{display:block;padding-top:0;margin:0 0 16px} .vrow h3{font-size:calc(clamp(24px,2.7vw,36px) * var(--scale));font-weight:300;line-height:1.13; letter-spacing:-.026em;color:var(--ink);margin:0 0 18px;text-wrap:balance} .vrow p.copy{font-size:calc(16.5px * var(--scale));line-height:1.6;color:var(--body);margin:0} .vrow .figs{font-family:var(--micro);font-size:calc(13px * var(--scale));line-height:2; color:var(--body);font-variant-numeric:tabular-nums;margin:22px 0 0} .vrow .figs b{font-weight:500;color:var(--accent)} @media (max-width:900px){ .vrow{grid-template-columns:minmax(0,1fr)} .vrow .vplay{max-width:300px} .vrow .vcopy{order:-1} } .chap h3{font-size:calc(clamp(27px,3.6vw,44px) * var(--scale));font-weight:300;line-height:1.13; letter-spacing:-.026em;color:var(--ink);margin:0 0 24px;max-width:20ch;text-wrap:balance} .chap p{font-size:calc(17.5px * var(--scale));line-height:1.6;color:var(--body);max-width:56ch;margin:0 0 18px} .chap p.q{color:var(--mute)} .chap .figs{font-family:var(--micro);font-size:calc(13px * var(--scale));line-height:2; color:var(--body);font-variant-numeric:tabular-nums;margin:24px 0 0} .chap .figs b{font-weight:500;color:var(--accent)} .credit{font-family:var(--micro);font-size:calc(11px * var(--scale));line-height:1.9;color:var(--mute); margin:20px 0 0;padding-top:16px;border-top:1px solid var(--hair);max-width:56ch} /* a credit that only applies to the after frame: it holds its space so the page does not jump, and appears with it */ .bax .credit.aft{opacity:0;visibility:hidden;transition:opacity .34s ease} .bax[data-s="1"] .credit.aft{opacity:1;visibility:visible} /* on a reversed block the picture sits right, so its credit follows it */ @media (min-width:901px){ .credit.right{margin-left:auto;max-width:340px} } .big-q,.chap p.big-q{font-size:calc(clamp(27px,3.7vw,47px) * var(--scale));font-weight:300;line-height:1.16; letter-spacing:-.028em;color:var(--ink);margin:0 0 24px;max-width:24ch;text-wrap:balance} .line,.chap p.line{font-size:calc(clamp(24px,3.4vw,42px) * var(--scale));font-weight:300;letter-spacing:-.028em; line-height:1.2;margin:30px 0 0} .line .a{color:var(--ink)} .line .b{color:var(--accent)} .pairwrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:34px 0 0} @media (max-width:760px){ .pairwrap{grid-template-columns:minmax(0,1fr)} } .pairwrap figure{margin:0} .pairwrap figcaption{font-family:var(--micro);font-size:10px;letter-spacing:.2em;text-transform:uppercase; margin-top:10px;color:var(--mute)} .pairwrap .nw figcaption{color:var(--accent)} .metatable{font-family:var(--micro);font-size:calc(12.5px * var(--scale));line-height:2.1; color:var(--ink);font-variant-numeric:tabular-nums;margin:28px 0 0;overflow-x:auto} .metatable .lbl{color:var(--mute)} .nextcase{border-top:1px solid var(--hair);display:flex;justify-content:space-between; align-items:flex-end;gap:24px;flex-wrap:wrap} .nextcase .lb{font-family:var(--micro);font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--mute);margin:0 0 10px} /* the next case announces itself with its own wordmark and its headline, the same pair the home page uses for that card */ .nextcase a.nx{display:inline-block;color:var(--ink)} .nextcase .nxlogo{margin:0 0 13px;opacity:.9;transition:background-color .2s} .nextcase a.nx:hover .nxlogo{background-color:var(--accent)} .nextcase .nxt{display:block;font-size:calc(17px * var(--scale));font-weight:300; line-height:1.35;color:var(--body);max-width:36ch;transition:color .2s} .nextcase a.nx:hover .nxt{color:var(--accent)} .nextcase .nxt i{font-style:normal;color:var(--mute);padding-left:.4em} .ba.sq{aspect-ratio:1/1} .ba.tall{aspect-ratio:3/4} .ba.wide{aspect-ratio:3/2} .route{display:none} .route.on{display:block} /* ── results at a glance: a KPI row, bars animate in on scroll ── One hue, two shades: baseline recessive, result in accent. No categorical palette here, so identity is carried by the row label, never by colour. */ .kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto auto auto; /* shared rows, so the three */ column-gap:clamp(30px,4.4vw,76px);row-gap:46px; /* plots line up across tiles */ margin:0 0 clamp(40px,5vw,64px)} .kpi .tile{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0} @media (max-width:980px){ .kpi{grid-template-columns:minmax(0,1fr);grid-template-rows:none} .kpi .tile{display:block;grid-row:auto;grid-template-rows:none} } .kpi .k{font-family:var(--micro);font-size:calc(10px * var(--scale));letter-spacing:.15em; text-transform:uppercase;color:var(--mute);margin:0 0 16px} .kpi .kval{font-size:calc(clamp(38px,5vw,64px) * var(--scale));font-weight:300;letter-spacing:-.04em; line-height:1.02;color:var(--accent);margin:0 0 24px;font-variant-numeric:tabular-nums; align-self:start} .kpi .kval.pair{font-size:calc(clamp(24px,2.9vw,40px) * var(--scale));white-space:nowrap} .kpi .kval.pair i{font-style:normal;color:var(--mute);padding:0 .1em} .kpi .plot{display:grid;gap:11px} .kpi .row{display:grid;grid-template-columns:minmax(52px,auto) minmax(0,1fr) minmax(0,auto); align-items:center;gap:13px} .kpi .rl,.kpi .rn{font-family:var(--micro);font-size:calc(10px * var(--scale));letter-spacing:.1em; color:var(--mute);white-space:nowrap} .kpi .row.on .rn{color:var(--ink)} .kpi .track{position:relative;height:10px;background:rgba(255,255,255,.085);border-radius:0 4px 4px 0} .kpi .bar{display:block;height:100%;width:0;border-radius:0 4px 4px 0;background:var(--mute); transition:width 1.05s cubic-bezier(.22,.8,.3,1) var(--d,0s)} .kpi .bar.hi{background:var(--accent)} .kpi.in .bar{width:var(--w)} .kpi .mlab{font-family:var(--micro);font-size:calc(10px * var(--scale));letter-spacing:.1em; color:var(--mute);margin:13px 0 0} @media (prefers-reduced-motion:reduce){ .kpi .bar{transition:none} } /* ── the closing invitation ── */ .cta{border-top:1px solid var(--hair)} .cta h2{font-size:calc(clamp(40px,7vw,92px) * var(--scale));font-weight:300;line-height:.98; letter-spacing:-.04em;color:var(--ink);margin:0 0 24px} .cta p{font-size:calc(18px * var(--scale));line-height:1.55;color:var(--body);max-width:42ch;margin:0 0 38px} /* ── route change: a curtain sweeps up from the bottom and exits through the top ── */ /* The sage lives on ::before, never on #curtain itself. iOS Safari 26 tints its status bar and toolbar from the background-color of any fixed layer touching the screen edge -- even at scaleY(0) or visibility:hidden -- but it ignores pseudo-elements. That sampling was the sage band on phones. */ #curtain{position:fixed;inset:0;z-index:90;pointer-events:none;background:transparent; transform:scaleY(0);transform-origin:bottom; transition:transform .44s cubic-bezier(.68,0,.28,1)} #curtain::before{content:"";position:absolute;inset:0;background:var(--accent)} #curtain span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); font-family:var(--micro);font-size:11px;letter-spacing:.34em;text-transform:uppercase; color:var(--on-accent);opacity:0;transition:opacity .2s} /* hidden between route changes as well */ #curtain{visibility:hidden} #curtain.up,#curtain.down{visibility:visible} #curtain.up{transform:scaleY(1)} #curtain.up span{opacity:.55} #curtain.down{transform:scaleY(0);transform-origin:top} @media (prefers-reduced-motion:reduce){ #curtain{display:none} } /* ── before / after, one independent state per section ── */ .bax{position:relative} .ba2{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:clamp(22px,3.4vw,56px);align-items:center} .ba2-side{max-width:520px} .ba2.wide{grid-template-columns:minmax(0,1fr)} /* left-aligned like every other panel, and never upscaled far past native. 840px read too large next to the numbers under it — 70% of that. */ .ba2.wide .ba2-stage.bleed{max-width:588px} .ba2.wide .ba2-side{display:block;margin-top:30px} /* at 588px the stage leaves a column free, so the chapter and its copy sit beside it instead of above and under it; the numbers still run full width */ @media (min-width:901px){ .ba2.wide{grid-template-columns:minmax(0,588px) minmax(0,1fr);align-items:center} .ba2.wide .ba2-side{margin-top:0;align-self:center} .ba2.wide .nums{grid-column:1/-1} } /* .rev swaps the two columns so the picture side alternates down the page. Desktop only — stacked, every block reads image-under-text regardless. */ @media (min-width:901px){ .ba2.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)} .ba2.wide.rev{grid-template-columns:minmax(0,1fr) minmax(0,588px)} .ba2.rev .ba2-stage{order:2} .ba2.rev .ba2-side{order:1} .ba2.rev .nums{order:3} .ba2.card.rev .ba2-stage{margin-left:auto} /* a capped card hugs its own edge */ .vrow.rev{grid-template-columns:minmax(0,1fr) minmax(0,300px)} .vrow.rev .vplay{order:2} .vrow.rev .vcopy{order:1} } /* on a phone a column that carries the heading stacks above the image, so the section still opens with its title */ @media (max-width:900px){ .ba2 .ba2-side.head{order:-1;margin-top:0;margin-bottom:30px} } /* the section title in the narrower side column: smaller than a full-width chapter head, still unmistakably the title */ .ba2-side h3{font-size:calc(clamp(24px,2.7vw,36px) * var(--scale));font-weight:300;line-height:1.13; letter-spacing:-.026em;color:var(--ink);margin:0 0 18px;text-wrap:balance} .ba2-side p.intro{font-size:calc(16.5px * var(--scale));line-height:1.6;color:var(--body);margin:0 0 30px} /* a chapter that is only its label — the content sits beside the image below */ .chap.lab{margin-bottom:6px} @media (max-width:900px){ .ba2{grid-template-columns:minmax(0,1fr)} } .ba2-stage{position:relative;overflow:hidden;background:#2b2126;touch-action:pan-y;cursor:pointer;outline-offset:3px} .ba2-stage img{width:100%;display:block;pointer-events:none;-webkit-user-drag:none;user-drag:none} /* the after frame wipes in from the right instead of cross-fading */ /* Before keeps a sliver of the after frame showing at the right, with the handle parked on it, so there is always something behind to find. After shows in full; the handle stays, pinned inside the left edge, so you can always tap back. */ .ba2-stage{--sliver:12%} .ba2-stage img.aft{position:absolute;inset:0;height:100%;object-fit:cover; clip-path:inset(0 0 0 calc(100% - var(--sliver))); transition:clip-path .62s cubic-bezier(.65,0,.35,1)} .bax[data-s="1"] .ba2-stage img.aft{clip-path:inset(0 0 0 0)} .ba2-stage .edge{position:absolute;top:0;bottom:0;left:calc(100% - var(--sliver));width:2px; background:var(--accent);pointer-events:none;opacity:1;z-index:1; transition:left .62s cubic-bezier(.65,0,.35,1)} /* the handle: what a drag bar would look like, so the image reads as one */ .ba2-stage .edge::after{content:'';position:absolute;top:50%;left:50%;width:38px;height:38px; transform:translate(-50%,-50%);border-radius:999px; background-color:var(--accent);background-repeat:no-repeat;background-position:center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='12' viewBox='0 0 19 12' fill='none' stroke='%23171216' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 1.8 2.7 6l3.8 4.2M12.5 1.8 16.3 6l-3.8 4.2'/%3E%3C/svg%3E"); box-shadow:0 3px 18px rgba(0,0,0,.45)} .bax[data-s="1"] .ba2-stage .edge{left:0} /* On After the knob sits half over the image's left edge, half outside it, so the stage must not clip it. The images clip themselves (clip-path), so nothing else spills. A full-bleed stage on a phone touches the screen edge, so there the knob tucks inside instead. */ .ba2-stage{overflow:visible} .ba2-stage .edge::after{transition:transform .62s cubic-bezier(.65,0,.35,1)} @media (max-width:900px){ .bax[data-s="1"] .ba2-stage.bleed .edge::after{transform:translate(8px,-50%)} } /* on scroll-in the handle pulls further in to show more of the after frame, then settles back to its resting sliver -- it never leaves */ .ba2-stage.peek .edge{animation:edgepeek 2s cubic-bezier(.5,0,.28,1) both} .ba2-stage.peek img.aft{animation:clippeek 2s cubic-bezier(.5,0,.28,1) both} @keyframes edgepeek{0%,100%{left:calc(100% - var(--sliver))} 40%,60%{left:63%}} @keyframes clippeek{0%,100%{clip-path:inset(0 0 0 calc(100% - var(--sliver)))} 40%,60%{clip-path:inset(0 0 0 63%)}} @media (hover:hover) and (pointer:fine){ .bax[data-s="0"] .ba2-stage:hover .edge{left:calc(100% - var(--sliver) - 7%);transition:left .38s ease} .bax[data-s="0"] .ba2-stage:hover img.aft{clip-path:inset(0 0 0 calc(100% - var(--sliver) - 7%))} .bax[data-s="1"] .ba2-stage:hover .edge{left:7%;transition:left .38s ease} .bax[data-s="1"] .ba2-stage:hover .edge::after{transform:translate(-50%,-50%)} .bax[data-s="1"] .ba2-stage:hover img.aft{clip-path:inset(0 0 0 7%)} } @media (prefers-reduced-motion:reduce){ .ba2-stage.peek .edge,.ba2-stage.peek img.aft{animation:none} } .ba2-stage .stamp{position:absolute;left:0;top:0;z-index:2;font-family:var(--micro);font-size:10px; letter-spacing:.2em;text-transform:uppercase;padding:6px 12px; background:rgba(0,0,0,.62);color:#fff;pointer-events:none;transition:.3s} .bax[data-s="1"] .ba2-stage .stamp{background:var(--accent);color:var(--on-accent)} @media (prefers-reduced-motion:reduce){ .ba2-stage img.aft,.ba2-stage .edge{transition:none} } /* a tall screenshot card sits in a narrow column so it doesn't tower */ /* a tall card keeps the same column as every other panel; only the image is capped */ .ba2.card .ba2-stage{max-width:340px} /* the account grid goes edge to edge on a phone — it is unreadable inset */ @media (max-width:900px){ .ba2.card .ba2-stage{max-width:340px} .ba2-stage.bleed{width:100vw;margin-left:50%;transform:translateX(-50%)} } .ba2-figs{display:grid;margin:0 0 24px;transition:opacity .3s} .ba2[data-figs="after"] .ba2-figs{opacity:0;visibility:hidden} .bax[data-s="1"] .ba2[data-figs="after"] .ba2-figs{opacity:1;visibility:visible} .ba2-figs .fg{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:baseline; gap:14px;padding:12px 0;border-bottom:1px solid var(--hair)} .ba2-figs .k{font-family:var(--micro);font-size:calc(10px * var(--scale));letter-spacing:.15em; text-transform:uppercase;color:var(--mute)} .ba2-figs .v{display:flex;align-items:baseline;justify-content:flex-end;white-space:nowrap; font-size:calc(clamp(20px,2.1vw,28px) * var(--scale));font-weight:300;letter-spacing:-.03em; font-variant-numeric:tabular-nums;line-height:1.05} /* "1.20" in the before state, "1.20 → 3.40" in the after, the delta in accent */ .vd{display:flex;align-items:baseline;color:var(--accent)} .vd i{font-style:normal;opacity:.6;padding:0 .34em 0 .42em;font-size:.82em} .nums .vd i{padding:0 .3em 0 .4em} /* problem on the before, insight on the after — the pair is the intro */ .ba2-copy.duo{display:grid} .ba2-copy.duo > div{grid-area:1/1;transition:opacity .34s ease, transform .34s ease} .ba2-copy.duo p{grid-area:auto;max-width:none;transition:none} .ba2-copy.duo .ca{opacity:0;transform:translateY(10px);pointer-events:none} .bax[data-s="1"] .ba2-copy.duo .cb{opacity:0;transform:translateY(-10px);pointer-events:none} .bax[data-s="1"] .ba2-copy.duo .ca{opacity:1;transform:none;pointer-events:auto} .ba2-copy.duo .lab{font-family:var(--micro);font-size:calc(11px * var(--scale));letter-spacing:.24em; text-transform:uppercase;color:var(--accent);margin:0 0 18px} .ba2-copy.duo .big{font-size:calc(clamp(21px,2.3vw,30px) * var(--scale));font-weight:300;line-height:1.18; letter-spacing:-.026em;color:var(--ink);margin:0 0 18px;max-width:23ch;text-wrap:balance} .ba2-copy.duo .sub{font-size:calc(16.5px * var(--scale));line-height:1.6;color:var(--mute);max-width:44ch} .ba2-copy.duo .pay{font-size:calc(clamp(19px,2.1vw,27px) * var(--scale));font-weight:300; letter-spacing:-.022em;line-height:1.3;margin:24px 0 0} .ba2-copy.duo .pay .a{color:var(--ink)} .ba2-copy.duo .pay .b{color:var(--accent)} /* the PDP pair is shown, not explained — keep it small */ .ba2-dual.compact{max-width:840px} .ba2-copy{display:grid} .ba2-copy p{grid-area:1/1;margin:0;font-size:calc(16px * var(--scale));line-height:1.6; color:var(--body);max-width:46ch;transition:opacity .34s ease, transform .34s ease} .ba2-copy .ca{opacity:0;transform:translateY(9px)} .bax[data-s="1"] .ba2-copy .cb{opacity:0;transform:translateY(-9px)} .bax[data-s="1"] .ba2-copy .ca{opacity:1;transform:none} .ba2-tag{font-family:var(--micro);font-size:calc(10px * var(--scale));letter-spacing:.2em; text-transform:uppercase;color:var(--mute);margin:0 0 14px} .bax[data-s="1"] .ba2-tag{color:var(--accent)} /* first-run coach mark — dims the first pair until you touch it */ .coach{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center; background:rgba(18,12,16,.55);opacity:0;visibility:hidden;pointer-events:none; transition:opacity .55s ease, visibility .55s} .ba2-stage.coached .coach{opacity:1;visibility:visible} .coach span{font-family:var(--micro);font-size:calc(11px * var(--scale));letter-spacing:.18em; text-transform:uppercase;color:#fff;text-align:center;line-height:1.9; border:1px solid rgba(255,255,255,.42);border-radius:999px;padding:13px 22px; background:rgba(0,0,0,.34);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .ba2-stage.coached .coach span{animation:coachfloat 2.6s ease-in-out .3s infinite} @keyframes coachfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} @media (prefers-reduced-motion:reduce){ .ba2-stage.coached .coach span{animation:none} } /* desktop + mobile shown together — equal heights, widths from their own aspect */ .ba2-dual{display:grid;grid-template-columns:16fr 5fr;gap:14px;align-items:start} .ba2-dual .dsk{aspect-ratio:4/3} .ba2-dual .mob{aspect-ratio:5/12} .ba2-dual .ba2-stage img{width:100%;height:100%;object-fit:cover;object-position:top center} @media (max-width:700px){ .ba2-dual{grid-template-columns:minmax(0,1fr);gap:18px;justify-items:center} .ba2-dual .ba2-stage{width:100%} .ba2-dual .mob{width:56%} } /* == about ================================================================== two columns: portrait (placeholder until img/portrait.jpg exists) + copy, then a text-only timeline. Nothing here overlaps .chap, so no specificity trap — but any display class used on a

inside .chap still needs the `.cls,.chap p.cls{}` double selector. */ .route[data-route="about"]{padding-top:44px} /* the portrait bleeds off the left edge of the page. --bleed is the distance from the wrap's content edge back to the page edge (padding + centring). */ .abt{--bleed:calc(var(--pad) + max(0px, (100vw - var(--rail) - 1240px) / 2)); display:grid;grid-template-columns:minmax(0,33%) minmax(0,1fr); gap:clamp(26px,4vw,72px);align-items:start;margin-top:calc(var(--gap) * .3)} @media (max-width:880px){ .abt{grid-template-columns:minmax(0,1fr)} } .portrait{position:relative;margin:0 0 0 calc(-1 * var(--bleed));width:calc(100% + var(--bleed)); aspect-ratio:833/1192;overflow:hidden;background:rgba(255,255,255,.055)} .portrait img{width:100%;height:100%;object-fit:cover} .portrait .ph-lab{display:none} /* drop img/portrait.jpg in and the placeholder disappears by itself */ .portrait.ph-empty .ph-lab{display:block;position:absolute;left:0;right:0;top:50%; transform:translateY(-50%);text-align:center;font-family:var(--micro); font-size:calc(10px * var(--scale));letter-spacing:.24em;text-transform:uppercase; color:var(--mute)} @media (max-width:880px){ .portrait{width:calc(80% + var(--bleed))} } .abt-copy p{font-size:calc(17.5px * var(--scale));line-height:1.62;color:var(--body); max-width:56ch;margin:0 0 20px} .abt-copy p.lead-p{font-size:calc(clamp(21px,2.4vw,30px) * var(--scale));font-weight:300; line-height:1.26;letter-spacing:-.022em;color:var(--ink);max-width:24ch; margin:0 0 30px;text-wrap:balance} .abt-copy p:last-child{margin-bottom:0} /* ── about: the same story at two lengths ──────────────────────────── One track, a thumb that slides between two equal halves. Without JS both panels show, so the page still reads. .abt-copy p is (0,0,1,1), so the question needs p.ask — a bare .ask would lose to it. */ .abt-copy p.ask{font-size:calc(clamp(27px,3.6vw,44px) * var(--scale));font-weight:300; line-height:1.13;letter-spacing:-.02em;color:var(--ink); max-width:18ch;margin:0 0 clamp(18px,2vw,26px);text-wrap:balance} /* equal halves, so the thumb is exactly half the track — no measuring */ .vtog{position:relative;display:inline-grid;grid-template-columns:1fr 1fr; width:min(100%,430px);border:1px solid var(--hair);border-radius:999px; padding:4px;margin:0 0 clamp(26px,3vw,38px)} .vthumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px); background:var(--accent);border-radius:999px; transition:transform .44s cubic-bezier(.22,1.2,.36,1)} .vtog[data-ver="long"] .vthumb{transform:translateX(100%)} .vbtn{position:relative;z-index:1;font-family:var(--micro); font-size:calc(13px * var(--scale));letter-spacing:.05em; color:var(--body);background:none;border:0;border-radius:999px; padding:11px 10px;cursor:pointer;white-space:nowrap; transition:color .25s} .vbtn:hover{color:var(--ink)} .vbtn.on{color:var(--on-accent);font-weight:600} .vbtn.on:hover{color:var(--on-accent)} /* "The Director's Cut" is a long label — give it room on small phones */ @media (max-width:420px){ .vbtn{font-size:calc(11.5px * var(--scale));letter-spacing:.02em;padding:11px 6px} } @media (prefers-reduced-motion:reduce){ .vthumb{transition:none} } .ver[hidden]{display:none} .ver{animation:verin .42s cubic-bezier(.22,.8,.3,1) both} @keyframes verin{from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none}} /* the short one is the one most people read — give it a little more air */ #ver-short p{font-size:calc(19.5px * var(--scale));line-height:1.55;color:var(--ink);max-width:52ch} @media (prefers-reduced-motion:reduce){ .ver{animation:none} } /* timeline: year rail + role, second line recessive */ .tl{margin:0;padding-top:30px;border-top:1px solid var(--hair)} .tl .yr{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 30px; align-items:baseline;padding:16px 0;border-bottom:1px solid var(--hair)} @media (max-width:680px){ .tl .yr{grid-template-columns:minmax(0,1fr);gap:3px;padding:14px 0} } .tl dt{font-family:var(--micro);font-size:calc(11px * var(--scale));letter-spacing:.11em; color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap} .tl dd{margin:0;font-size:calc(16.5px * var(--scale));line-height:1.45;color:var(--ink)} .tl dd i{display:block;font-style:normal;color:var(--mute);margin-top:4px; font-size:calc(14px * var(--scale));line-height:1.5} .route[data-route="oros"]{padding-top:44px} .wrap{max-width:1240px} .route[data-route="milky"]{padding-top:44px} /* ad walls — the argument tested, not one hero image */ .wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:34px 0 0} .wall img{aspect-ratio:1;object-fit:cover;width:100%} .wall.vert{margin-top:14px} .wall.vert img,.wall.vert video{aspect-ratio:9/16} .wall video,.shots video{width:100%;display:block;object-fit:cover;background:#2b2126} .shots video{aspect-ratio:2/1} /* click to load — nothing downloads until you ask for it */ .vplay{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer; background:#2b2126;overflow:hidden;line-height:0} .wall.vert .vplay{aspect-ratio:9/16} .shots .vplay{aspect-ratio:2/1} .vplay img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.3,1), filter .35s ease} .vplay:hover img{transform:scale(1.03);filter:brightness(.88)} .vplay .pb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:58px;height:58px;border-radius:50%;background:rgba(18,12,16,.55); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.5); display:flex;align-items:center;justify-content:center; transition:background .25s ease, transform .25s ease} .vplay:hover .pb{background:var(--accent);border-color:var(--accent);transform:translate(-50%,-50%) scale(1.06)} .vplay .pb::after{content:"";width:0;height:0;margin-left:4px; border-top:10px solid transparent;border-bottom:10px solid transparent; border-left:16px solid #fff;transition:border-left-color .25s ease} .vplay:hover .pb::after{border-left-color:var(--on-accent)} .vplay .dur{position:absolute;right:10px;bottom:10px;font-family:var(--micro);font-size:10px; letter-spacing:.12em;color:#fff;background:rgba(0,0,0,.55);padding:4px 8px} /* ── animated ground: one fullscreen fragment shader behind everything ── */ /* no background-color here: iOS Safari tints its status bar and toolbar with the colour of any fixed layer touching the screen edge, which read as a flat mauve band cutting the page off. body already paints the ground underneath. */ #bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:transparent} #bg canvas{width:100%;height:100%;display:block} .page{position:relative;z-index:1} #rail{background:rgba(87,61,77,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} body[data-bg="off"] #bg canvas{display:none} /* screenshots keep their own proportions */ .shots{display:grid;grid-template-columns:minmax(0,1fr);gap:18px; max-width:840px;margin:34px 0 0} .shots img{width:100%;height:auto} @media (max-width:820px){ .wall{grid-template-columns:repeat(2,minmax(0,1fr))} .wall.vert{grid-template-columns:repeat(2,minmax(0,1fr))} } /* panel rhythm: after a chapter header, and between stacked panels */ .chap + .bax{margin-top:calc(var(--gap) * .3)} .chap + .nums{margin-top:calc(var(--gap) * .3)} .bax + .bax{margin-top:calc(var(--gap) * .62)} .sub{margin-top:calc(var(--gap) * .58)} /* ── background frames ── #bg, #hero3d and #grain live inside empty fixed frames and are absolutely positioned in them. iOS Safari paints its status bar and toolbar solid (cropping the page) when it finds a fixed layer touching the screen edge, but it ignores absolutely positioned children. On phones the frame stops short of the edges and the layers inside bleed 160px past the screen, so the gradient, grain and 3D word run on under the bars like the page does. hero3d.js measures against innerHeight, so the word keeps its place and scroll speed however tall its canvas is. */ .fixwrap{position:fixed;inset:0;pointer-events:none;background:transparent} .fixwrap.under{z-index:0} /* the grain blends with the page under it, so the blend sits on the frame: inside the frame it would only have transparency to blend with */ .fixwrap.over{z-index:60;mix-blend-mode:overlay} .fixwrap > #grain{mix-blend-mode:normal} .fixwrap > #bg,.fixwrap > .hero3d,.fixwrap > #grain{position:absolute;inset:0} /* Phones, tested on an iPhone: a fixed layer that reaches under Safari's bars (even as an absolutely positioned child) makes Safari paint the bars solid and crop the page. So the frames stay inside the screen and the page runs under the bars on its own; what is left is the edge where the gradient and grain stop. That edge is feathered out over 56px so it melts into the plain ground instead of reading as a cut. */ @media (max-width:760px){ .fixwrap{top:6px;bottom:4px; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%)} } /* ══ KOJA (personal project) ═══════════════════════════════════════ */ /* home card: Koja's own wordmark through the same mask trick as the client logos. Embedded as a PNG like they are (drawn from img/koja-logo.svg at 448x280), so it cannot go missing or get stuck in a browser cache the way a separate file can. */ .caselogo.kojalogo{width:112px;height:70px; --kojamark:url(data:image/png;base64,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); -webkit-mask-image:var(--kojamark);mask-image:var(--kojamark)} .case .media img.h-koja{object-position:center 40%} /* the four tools the card leads with — tags, not numbers */ .toolline{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding-top:20px;border-top:1px solid var(--hair)} .toolline span{font-family:var(--micro);font-size:calc(11px * var(--scale));letter-spacing:.12em; text-transform:uppercase;color:var(--accent);border:1px solid rgba(155,219,133,.45);padding:7px 11px} /* tool chips on the case page: AI tools in accent, everything else quiet */ .t{display:inline-block;font-family:var(--micro);font-size:calc(10.5px * var(--scale));letter-spacing:.12em; text-transform:uppercase;color:var(--mute);border:1px solid var(--hair);padding:6px 10px;white-space:nowrap} .t.ai{color:var(--accent);border-color:rgba(155,219,133,.5)} /* real app screens in a row — phones keep their own rounded corners */ .phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,22px);margin:34px 0 0} .phones img{width:100%;display:block;border-radius:clamp(14px,2.2vw,30px); box-shadow:0 18px 40px rgba(18,10,16,.35)} @media (max-width:760px){ .phones{grid-template-columns:repeat(2,minmax(0,1fr))} } /* lessons: a short list, the rule in ink and the reason in body */ .learn{list-style:none;margin:0;padding:0;max-width:60ch} .learn li{font-size:calc(17px * var(--scale));line-height:1.55;color:var(--body); padding:16px 0;border-top:1px solid var(--hair)} .learn li:last-child{border-bottom:1px solid var(--hair)} .learn b{font-weight:500;color:var(--ink)} .nextcase .nxlogo.kojanx{width:80px;height:50px} .chap .ts{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0} .phones video{width:100%;display:block;border-radius:clamp(14px,2.2vw,30px);aspect-ratio:9/19.5;object-fit:cover; box-shadow:0 18px 40px rgba(18,10,16,.35);background:#17131f} .phones img{aspect-ratio:9/19.5;object-fit:cover} /* the finished ads: two verticals, not a full row of four */ .wall.vert.ads{grid-template-columns:repeat(3,minmax(0,300px));gap:18px} @media (max-width:760px){ .wall.vert.ads{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} } /* ══ "closer look" — one dark panel: steps on the left, the picture on the right ══ */ .lk-title{font-size:calc(clamp(30px,4.4vw,58px) * var(--scale));font-weight:300;letter-spacing:-.03em;line-height:1.05; color:var(--ink);margin:0 0 clamp(22px,3vw,40px)} .look{--panel:#1b1419;position:relative;display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr); gap:clamp(20px,3vw,48px);align-items:center;background:var(--panel);border-radius:28px; padding:clamp(28px,4vw,56px) clamp(22px,3.4vw,52px) clamp(28px,4vw,56px) clamp(64px,6vw,96px); min-height:clamp(560px,56vw,720px);overflow:hidden} .lk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;position:relative;z-index:2} .lk-item{max-width:100%} .lk-pill{display:inline-flex;align-items:center;gap:13px;border:0;cursor:pointer;text-align:left; background:rgba(255,255,255,.085);color:var(--ink);border-radius:999px;padding:12px 22px 12px 14px; font:500 calc(16px * var(--scale))/1.2 var(--sans);letter-spacing:-.005em;transition:background-color .2s} .lk-pill:hover{background:rgba(255,255,255,.15)} .lk-pill:focus-visible,.lk-arr:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .lk-n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid rgba(155,219,133,.7);color:var(--accent); display:inline-flex;align-items:center;justify-content:center;font:500 10px/1 var(--micro);letter-spacing:.02em} /* the open step: the pill gives way to a card */ .lk-card{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.2,.7,.2,1)} .lk-card > div{overflow:hidden;min-height:0} .lk-item.on .lk-pill{display:none} .lk-item.on .lk-card{grid-template-rows:1fr;background:rgba(255,255,255,.085);border-radius:26px} .lk-card p{margin:0;padding:22px 26px 0;font-size:calc(16px * var(--scale));line-height:1.5;color:var(--body)} .lk-card b{font-weight:600;color:var(--ink)} .lk-card .lk-tools{display:flex;flex-wrap:wrap;gap:7px;padding:16px 26px 22px} /* up / down */ .lk-arrows{position:absolute;left:clamp(14px,1.6vw,26px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:3} .lk-arr{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:var(--ink); font:400 15px/1 var(--sans);cursor:pointer;transition:background-color .2s,opacity .2s;padding:0 0 3px} .lk-arr.down{padding:3px 0 0} .lk-arr:hover{background:rgba(255,255,255,.2)} .lk-arr:disabled{opacity:.3;cursor:default;background:rgba(255,255,255,.1)} /* the stage: every picture gets the same treatment so mixed screenshots read as one set */ .lk-stage{position:relative;align-self:stretch;min-height:420px} .lk-stage::before{content:"";position:absolute;inset:-20% -30% -20% -10%;pointer-events:none; background:radial-gradient(60% 55% at 55% 50%, rgba(120,78,104,.42), rgba(27,20,25,0) 70%)} .lk-img{position:absolute;left:50%;top:50%;max-width:100%;max-height:100%;width:auto;height:auto; transform:translate(-50%,-50%) scale(.97);opacity:0;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)} .lk-img.on{opacity:1;transform:translate(-50%,-50%) scale(1)} .lk-img.wide{border-radius:14px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px rgba(0,0,0,.45)} .lk-img.phone{max-height:96%;border-radius:clamp(22px,2.6vw,38px);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 60px rgba(0,0,0,.5)} .lk-img.bare{border-radius:14px} /* tools: coloured words, not buttons */ .lk-card .lk-tools{display:flex;flex-wrap:wrap;gap:6px 18px;padding:14px 26px 22px} .lk-tools .t{border:0;border-radius:0;padding:0;font-size:calc(11px * var(--scale));letter-spacing:.14em} .lk-count{display:none} @media (max-width:900px){ /* Apple's phone layout: the picture owns the panel, one card sits along the bottom, and half-round arrows peek in from the left and right edges. No list — you step through with the arrows or a swipe. */ .look{display:flex;flex-direction:column;gap:14px;min-height:min(640px,150vw);padding:16px 0 20px;border-radius:22px} .lk-stage{order:-1;flex:1 1 auto;min-height:250px;height:auto;margin:30px 16px 0} .lk-list{display:block;margin:0 46px} .lk-item{display:none} .lk-item.on{display:block} .lk-item.on .lk-card{border-radius:24px;background:rgba(255,255,255,.1)} .lk-card p{padding:20px 22px 0;font-size:15.5px} .lk-card .lk-tools{padding:12px 22px 20px} .lk-arrows{display:block;position:static;transform:none} .lk-arr{position:absolute;bottom:52px;width:40px;height:56px;padding:0;background:rgba(255,255,255,.12); font-size:17px;display:flex;align-items:center;z-index:3} .lk-arr.up{left:0;border-radius:0 28px 28px 0;justify-content:flex-start;padding-left:9px} .lk-arr.down{right:0;border-radius:28px 0 0 28px;justify-content:flex-end;padding-right:9px} .lk-arr span{display:block;transform:rotate(-90deg)} .lk-arr:disabled{opacity:0;pointer-events:none} .lk-count{display:block;position:absolute;top:18px;right:20px;font:400 10px/1 var(--micro);letter-spacing:.14em;color:var(--mute);z-index:3} } @media (prefers-reduced-motion:reduce){ .lk-card,.lk-img{transition:none} } .lk-title{margin-top:calc(var(--gap) * .42)} .wipnote{font-size:calc(15px * var(--scale));line-height:1.5;color:var(--mute);margin:calc(var(--gap) * .3) 0 0} /* ── header font (Oct 2026) ───────────────────────────────────────── Rubik Mono One on real titles only: the name, page titles (case pages, home case cards, About, Let's chat) and section titles (the line under "01 · …" and the KPI band title). Sentence-style sub-headlines — the before/after captions, "One afternoon", pull quotes, step titles — stay in Archivo so they read as copy. The face has a single weight (400). */ :root{--display:'Rubik Mono One',var(--sans)} .lock .big,.lock .big *, .ctitle h1,.case h2,.cta h2,.contact h2, .chap h3,.band .kicker{font-family:var(--display);font-weight:400} /* Sentence-style headlines keep the original white; only the real titles (above) and the rest of --ink take the warm #f5d9c7. */ :root{--ink-copy:#ffffff} .ba2-copy .big,.ba2-copy .pay .a,.ba2-copy.duo .big,.ba2-copy.duo .pay .a,.line .a, .ba2-side h3,.vrow h3, .big-q,.chap p.big-q,.line,.chap p.line, .abt-copy p.ask,.rolehead,.lk-title{color:var(--ink-copy)}