/* ═══════════════════════════════════════════════════════════════ MANZAR LABS — style.css Consumes the shared spine (assets/css/manzar-system.css, linked before this file in index.html ): tokens, nav, switcher, curtain, buttons, eyebrow, notch, ghost numeral, card. This sheet only extends that system with Labs-specific layout and components (menu drawer, hero, ticker, service blocks, work grid, footer …). Type is General Sans + Tanker (Fontshare, loaded in ) and self-hosted Instrument Serif italic — no local Archivo/Inter. ═══════════════════════════════════════════════════════════════ */ :root{ /* Thin local aliases onto the shared tokens, kept only so the rest of this file's existing declarations don't need a mechanical rename. Every value below resolves to a shared token — nothing here is a hardcoded brand color. See MANZAR-SYSTEM.md §1. */ --bg: var(--ink); --bg2: var(--ink-2); --card: var(--panel); --card2: var(--ink-2); --line2: var(--line-2); --txt: var(--fg); --mut: var(--soft); --dim: var(--mut); --sig: var(--acc); --ease: var(--e-inout); --ease-out:var(--e-out); /* bone-tinted stroke weights for the ghost numerals (§3.7 uses a filled low-opacity numeral; Labs' outline treatment is kept as the site's own variant, retinted onto the same bone RGB). */ --stroke: rgba(233,230,221,.14); --stroke-2: rgba(233,230,221,.28); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:auto} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} body{ background:var(--ink); color:var(--txt); font-family:var(--body); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } ::selection{background:var(--sig);color:var(--ink)} :focus{outline:none} :focus-visible{outline:2px solid var(--sig);outline-offset:3px;border-radius:6px} /* film grain over everything */ body::after{ content:"";position:fixed;inset:-50%;z-index:2000;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity:.07;animation:grain 9s steps(10) infinite; } @keyframes grain{ 0%,100%{transform:translate(0,0)}10%{transform:translate(-3%,-2%)}20%{transform:translate(2%,3%)} 30%{transform:translate(-2%,1%)}40%{transform:translate(3%,-3%)}50%{transform:translate(-1%,2%)} 60%{transform:translate(2%,-1%)}70%{transform:translate(-3%,3%)}80%{transform:translate(1%,-2%)}90%{transform:translate(-2%,-3%)} } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer} main{position:relative;z-index:2;background:var(--bg)} main::after{content:"";display:block;height:2px} /* ── shared bits ──────────────────────────────────────────── */ .section{padding:clamp(90px,12vh,150px) var(--pad)} /* .pill mirrors the shared .mz-eyebrow geometry exactly (same box model, same mz-pulse keyframe from manzar-system.css) so an eyebrow chip on Labs and one on Studio are pixel-identical. */ .pill{ box-sizing:border-box; display:inline-flex;align-items:center;gap:10px; border:1px solid var(--line);border-radius:var(--r-pill); padding:8px 16px;font-family:var(--mono);font-weight:500;font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--soft); } .pill i{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none;font-style:normal;animation:mz-pulse 2.4s ease-in-out infinite} .pill-center{margin:0 auto;display:flex;width:max-content} .giant{ font-family:var(--disp); font-weight:600; font-size:clamp(54px,10.5vw,168px); line-height:.92;letter-spacing:-.055em; margin:26px 0 0; } .giant-center{text-align:center} .giant-sm{font-size:clamp(40px,6.4vw,96px)} .serif{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--txt)} /* buttons — pixel-identical to the shared .mz-btn geometry (§3.4): pill, 52px tall, padding 0 8px 0 26px, 38px chip, chip rotates 45° on hover. Class names kept as .btn/.btn-light/.btn-ghost so every existing instance in this file's markup keeps working unchanged. */ .btn{ box-sizing:border-box; position:relative;display:inline-flex;align-items:center;gap:14px; height:52px;padding:0 8px 0 26px;border-radius:var(--r-pill); font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:0; white-space:nowrap;cursor:pointer; transition:transform .35s var(--e-out); will-change:transform; } .btn-label{display:inline-block;padding:0;transition:transform .35s var(--e-out)} .btn-chip{ flex:none;width:38px;height:38px;border-radius:50%;margin-right:0; display:grid;place-items:center; transition:transform .35s var(--e-out),background-color .3s,color .3s; } .btn-light{background:var(--bone);color:var(--ink)} .btn-light .btn-chip{background:var(--ink);color:var(--bone)} .btn-ghost{background:transparent;border:1px solid var(--line-2);color:var(--fg)} .btn-ghost .btn-chip{background:var(--fg);color:var(--ink)} .btn:hover .btn-chip{transform:rotate(45deg)} .btn:hover .btn-label{transform:translateX(2px)} .btn-light:hover .btn-chip{background:var(--acc);color:var(--bone)} .btn-ghost:hover .btn-chip{background:var(--acc);color:var(--bone)} /* ── preloader ────────────────────────────────────────────── */ .preloader{ position:fixed;inset:0;z-index:3000;background:var(--ink); display:flex;align-items:center;justify-content:center; } /* Matches .pre-logo on the Studio page so both worlds open on the same mark at the same size. Change one, change the other. */ .preloader-logo{ width:min(72vw,760px);height:auto;will-change:transform,opacity; /* entrance runs off CSS, not GSAP: main.js is a classic script at the end of body, so a JS-driven fade-in let the mark paint at full opacity for a frame before snapping back to 0. Same reasoning as .pre-logo on the Studio page. */ opacity:0;transform:translateY(14px); animation:preloader-logo-in .6s cubic-bezier(.16,1,.3,1) .05s forwards; } @keyframes preloader-logo-in{to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .preloader-logo{animation:none;opacity:1;transform:none} } .preloader-count{ position:absolute;right:var(--pad);bottom:26px; font-family:var(--disp);font-weight:500;font-size:14px;color:var(--dim); font-variant-numeric:tabular-nums; } /* ── nav ──────────────────────────────────────────────────── */ /* Header nav now uses the shared .mz-nav markup + component CSS from manzar-system.css (§3.1) — see index.html. Nothing Labs-specific left to style here; the old .nav/.nav-logo-tab/.nav-back rules are retired along with the bespoke nav markup they served. */ /* ── menu drawer ──────────────────────────────────────────── */ .menu-scrim{ position:fixed;inset:0;z-index:990;background:rgba(0,0,0,.55); opacity:0;pointer-events:none;transition:opacity .5s; } .menu-scrim.is-on{opacity:1;pointer-events:auto} .menu{ position:fixed;top:0;right:0;bottom:0;z-index:995; width:min(430px,92vw); background:var(--ink-2);border-left:1px solid var(--line); transform:translateX(102%); transition:transform .7s var(--ease); display:flex;flex-direction:column;justify-content:space-between; padding:90px 48px 44px; } .menu.is-on{transform:translateX(0)} .menu-close{ position:absolute;top:22px;right:22px;width:40px;height:40px; border:1px solid var(--line2);border-radius:50%; display:grid;place-items:center;color:var(--mut); transition:color .3s,border-color .3s,transform .5s var(--ease-out); } .menu-close:hover{color:var(--bone);border-color:var(--bone);transform:rotate(90deg)} .menu-nav{display:flex;flex-direction:column} .menu-link{ font-family:var(--disp);font-weight:600; font-size:clamp(34px,4.6vh,46px);letter-spacing:-.03em; color:var(--dim);padding:7px 0; display:flex;align-items:baseline;gap:16px; transition:color .35s,transform .45s var(--ease-out); } .menu-num{font-family:var(--body);font-size:11px;font-weight:500;color:var(--dim);letter-spacing:.1em} .menu-link:hover{color:var(--bone);transform:translateX(10px)} .menu-link:hover .menu-num{color:var(--sig)} /* staggered entrance when drawer opens */ .menu .menu-link{opacity:0;translate:26px 0;transition:color .35s,transform .45s var(--ease-out),opacity .5s,translate .6s var(--ease-out)} .menu.is-on .menu-link{opacity:1;translate:0 0} .menu.is-on .menu-link:nth-child(1){transition-delay:0s,0s,.12s,.12s} .menu.is-on .menu-link:nth-child(2){transition-delay:0s,0s,.17s,.17s} .menu.is-on .menu-link:nth-child(3){transition-delay:0s,0s,.22s,.22s} .menu.is-on .menu-link:nth-child(4){transition-delay:0s,0s,.27s,.27s} .menu.is-on .menu-link:nth-child(5){transition-delay:0s,0s,.32s,.32s} .menu.is-on .menu-link:nth-child(6){transition-delay:0s,0s,.37s,.37s} .menu-foot{display:flex;flex-direction:column;gap:6px} .menu-city{font-size:13px;color:var(--mut);display:flex;justify-content:space-between;font-variant-numeric:tabular-nums} .menu-mail{ margin-top:14px;font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.01em; transition:color .3s; } .menu-mail:hover{color:var(--sig)} /* ── hero ─────────────────────────────────────────────────── */ .hero{height:165vh;position:relative} .hero-shell{ position:sticky;top:0;height:100svh;overflow:hidden; /* centre, not 50% 100%: shrinking from the bottom edge put the whole 10vh of inset above the image and none below it, which read as one heavy top border rather than a card easing back. Centred, the inset is even on all four sides. */ transform-origin:50% 50%; background:var(--ink); } .hero-media{position:absolute;inset:0} .hero-fallback{ position:absolute;inset:0; background: radial-gradient(120% 90% at 78% 38%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 55%), radial-gradient(90% 80% at 20% 80%,color-mix(in srgb,var(--fg) 10%,transparent),transparent 65%), var(--ink); } .hero-img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transform:scale(1.12)} .hero-video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transform:scale(1.06)} @media (prefers-reduced-motion:reduce){.hero-video{display:none}} .hero-shade{ position:absolute;inset:0; background: linear-gradient(90deg,rgba(11,10,8,.92) 0%,rgba(11,10,8,.55) 34%,rgba(11,10,8,.05) 62%), linear-gradient(0deg,rgba(11,10,8,.88) 0%,transparent 34%), linear-gradient(180deg,rgba(11,10,8,.5) 0%,transparent 22%); } /* The shell hard-clips the photo to a rounded rect as it insets. Against --ink that cut only showed where the image was lighter than the page, so the hero read as a rectangle pasted on top rather than sitting in it. This dissolves the outer band into the page colour so there is no edge to see. --feather is driven by the same ScrollTrigger as the shrink: 0 at full bleed, 1 at full inset. */ .hero-feather{ position:absolute;inset:0;pointer-events:none; opacity:var(--feather,0); background: linear-gradient(to right, var(--ink), rgba(11,10,8,0) 7%), linear-gradient(to left, var(--ink), rgba(11,10,8,0) 7%), linear-gradient(to bottom, var(--ink), rgba(11,10,8,0) 9%), linear-gradient(to top, var(--ink), rgba(11,10,8,0) 9%); } .hero-grid{position:absolute;inset:0;pointer-events:none} .hero-grid i{ position:absolute;top:0;bottom:0;width:1px; background:linear-gradient(180deg,transparent,rgba(233,230,221,.13) 18%,rgba(233,230,221,.13) 82%,transparent); } .hero-grid i:nth-child(1){left:28%} .hero-grid i:nth-child(2){left:50%} .hero-grid i:nth-child(3){left:72%} .hero-grid .plus{ position:absolute;color:rgba(233,230,221,.5);font-family:var(--body); font-weight:300;font-size:15px;transform:translate(-50%,-50%)} .plus.p1{left:28%;top:64%} .plus.p2{left:72%;top:64%} .plus.p3{left:50%;top:30%} .hero-inner{ position:relative;height:100%; display:flex;flex-direction:column;justify-content:flex-end; padding:0 var(--pad) 40px; } .hero-title{ font-family:var(--disp);font-weight:700; font-size:clamp(76px,19vw,300px); line-height:.86;letter-spacing:-.06em; margin-bottom:4vh; } .hero-title .st-char{will-change:transform} .hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px} .hero-col-left{max-width:520px} .hero-sub{ font-family:var(--disp);font-weight:600;font-size:clamp(19px,2vw,26px); letter-spacing:-.02em;line-height:1.1;margin-bottom:26px; } .hero-clients{display:flex;align-items:center;gap:14px;margin-bottom:20px} .hero-avatars{display:flex} .hero-avatars span{ width:38px;height:38px;border-radius:50%; display:grid;place-items:center; font-size:10.5px;font-weight:600;letter-spacing:.03em; border:1.5px solid var(--ink);margin-left:-9px; } .hero-avatars span:first-child{margin-left:0;background:linear-gradient(135deg,var(--panel),var(--ink-2));color:var(--soft)} .hero-avatars span:nth-child(2){background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 32%,var(--panel)),var(--ink-2));color:var(--bone)} .hero-avatars span:nth-child(3){background:linear-gradient(135deg,var(--panel),var(--ink-2));color:var(--soft)} .hero-clients-copy{display:flex;flex-direction:column;line-height:1.15} .hero-clients-copy strong{font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:-.02em} .hero-clients-copy em{font-style:normal;font-size:12px;color:var(--mut)} .hero-blurb{color:var(--soft);max-width:340px;font-size:14.5px;margin-bottom:30px} .hero-ctas{display:flex;align-items:center;gap:22px} .hero-socials{display:flex;gap:8px} .hero-socials a{ width:38px;height:38px;border-radius:50%; border:1px solid rgba(233,230,221,.25); display:grid;place-items:center;color:var(--fg); background:rgba(11,10,8,.25);backdrop-filter:blur(6px); transition:background .3s,color .3s,transform .45s var(--ease-out),border-color .3s; } .hero-socials a:hover{background:var(--bone);color:var(--ink);border-color:var(--bone);transform:translateY(-3px)} .hero-scrollcue{ position:absolute;left:50%;bottom:14px;transform:translateX(-50%); width:1px;height:44px;overflow:hidden; } .hero-scrollcue span{ position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--bone)); animation:cue 1.8s var(--ease) infinite; } @keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}} /* ── ticker ───────────────────────────────────────────────── */ .ticker{ border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:20px 0;overflow:hidden;position:relative;z-index:3;background:var(--bg); } .ticker-track,.xmarq-track{ display:flex;align-items:center;gap:34px;width:max-content; will-change:transform; } .ticker-track span{ font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.01em; color:var(--mut);white-space:nowrap;text-transform:uppercase; } .ticker-track span.tick-hl{color:var(--txt)} .ticker-track b,.xmarq-track b{color:var(--sig);font-size:9px;flex:none} /* ── mission ──────────────────────────────────────────────── */ .mission-top{ display:grid;grid-template-columns:minmax(200px,290px) 1fr; gap:clamp(30px,5vw,80px);position:relative;align-items:start; } .mission-fig{ border-radius:16px;overflow:hidden;position:relative;aspect-ratio:4/2.55; margin-top:10px; } .mission-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)} .mission-fig:hover img{transform:scale(1.06)} .mission-fig-fallback{position:absolute;inset:0;background: radial-gradient(90% 90% at 30% 40%,color-mix(in srgb,var(--fg) 8%,transparent),transparent 60%), radial-gradient(60% 70% at 75% 65%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 60%),var(--panel)} .mission-fig figcaption{ position:absolute;left:12px;bottom:10px;font-size:10.5px;color:rgba(233,230,221,.75); letter-spacing:.06em;font-variant-numeric:tabular-nums; } .mission-head{ font-family:var(--disp);font-weight:600; font-size:clamp(30px,4.2vw,62px); letter-spacing:-.035em;line-height:1.04; max-width:20ch; } .mission-head .line-b{color:var(--dim)} .mission-head span{display:block} .mission-blurb{color:var(--mut);max-width:480px;margin:30px 0 34px;font-size:15.5px} .mission-blurb .serif{font-size:1.15em} .mission-glyph{ position:absolute;right:0;top:8%;width:clamp(140px,20vw,300px);color:var(--panel); pointer-events:none; } .stats{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px;margin-top:clamp(70px,10vh,120px); border-top:1px solid var(--line);padding-top:clamp(40px,6vh,70px); } .stat-big{ font-family:var(--disp);font-weight:600; /* stepped down from 8.6vw when the row went from three figures to four — "99.9%" at the old size no longer fits a quarter-width cell */ font-size:clamp(54px,7vw,116px); letter-spacing:-.05em;line-height:1; font-variant-numeric:tabular-nums; } .stat-big i{font-style:normal;color:var(--acc)} .stat-big em{font-style:normal} .stat p{color:var(--mut);font-size:13px;margin-top:14px;line-height:1.5} /* ── notch divider ────────────────────────────────────────── */ /* Section dividers now use the shared .mz-notch (§3.6) directly in the markup — same trapezoid-dip hairline shape as Studio, pixel for pixel. */ /* ── services intro ───────────────────────────────────────── */ .services-intro{padding-bottom:20px} .services-intro-sub{color:var(--mut);max-width:420px;margin-top:26px} /* ── svc shared ───────────────────────────────────────────── */ .svc{padding:clamp(80px,11vh,140px) var(--pad)} .svc-head{position:relative;margin-bottom:clamp(48px,7vh,90px)} .svc-ghost{ position:absolute; font-family:var(--disp);font-weight:700; font-size:clamp(180px,30vw,460px); letter-spacing:-.06em;line-height:.8; color:transparent;-webkit-text-stroke:1px var(--stroke); top:50%;left:0;transform:translateY(-50%); pointer-events:none;user-select:none; background:linear-gradient(180deg,var(--panel),var(--ink-2)); -webkit-background-clip:text;background-clip:text; } .svc:nth-of-type(even) .svc-ghost{left:auto;right:0} .svc-title{ position:relative; font-family:var(--disp);font-weight:600; font-size:clamp(40px,6.6vw,98px); letter-spacing:-.05em;line-height:.96; padding-top:clamp(60px,12vh,150px); } .svc-sub{position:relative;color:var(--mut);max-width:430px;margin-top:22px;font-size:15px} /* ══════════════ 01 · THE JOURNEY RAIL (.jr) ══════════════ Five stops on one hairline. The rail behind the nodes fills with the accent as the section scrolls (--fill is written by main.js from a scrubbed ScrollTrigger), so the path advances with the reader instead of sitting there as a diagram. No hover state is required to read it: a founder skimming once gets the whole shape. */ .jr{ /* --fill is written by main.js in stop units (0-5), not percent, so the per-stop maths below stays unitless — you cannot divide by a % in CSS. It defaults to 5 so the rail reads complete without JS. */ --fill:5; list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(18px,2.2vw,34px); } /* a column, so the "you leave with" rule can bottom-align across all five stops however long each sentence runs */ .jr-stop{position:relative;display:flex;flex-direction:column;padding-top:34px} /* the rail — one line drawn per stop so it stays glued to the grid */ .jr-stop::before{ content:"";position:absolute;top:5px;left:0;right:calc(-1 * clamp(18px,2.2vw,34px)); height:1px;background:var(--line-2); } .jr-stop:last-child::before{right:0} /* the filled portion, clipped to this stop's share of the whole rail */ .jr-stop::after{ content:"";position:absolute;top:5px;left:0;right:calc(-1 * clamp(18px,2.2vw,34px)); height:1px;background:var(--acc);transform-origin:0 50%; transform:scaleX(clamp(0,calc(var(--fill) - var(--i)),1)); } .jr-stop:last-child::after{right:0} .jr-stop:nth-child(1){--i:0} .jr-stop:nth-child(2){--i:1} .jr-stop:nth-child(3){--i:2} .jr-stop:nth-child(4){--i:3} .jr-stop:nth-child(5){--i:4} /* Nodes are lit by default so the rail is coherent wherever the scrub never runs (no JS, no GSAP, reduced motion). main.js adds .is-scrubbed only when it is actually going to drive them, and from then on a node lights when the fill reaches it. */ .jr-node{ position:absolute;top:0;left:0;z-index:2; width:11px;height:11px;border-radius:50%; border:1px solid var(--acc);background:var(--acc); transition:border-color .5s,background .5s,box-shadow .5s; } .jr.is-scrubbed .jr-node{border-color:var(--line-2);background:var(--ink);box-shadow:none} .jr.is-scrubbed .jr-stop.is-lit .jr-node{ border-color:var(--acc);background:var(--acc); box-shadow:0 0 0 5px color-mix(in srgb,var(--acc) 14%,transparent); } .jr-when{ display:block;font-family:var(--mono);font-size:11px;letter-spacing:.13em; text-transform:uppercase;color:var(--soft);transition:color .5s; } .jr.is-scrubbed .jr-when{color:var(--mut)} .jr.is-scrubbed .jr-stop.is-lit .jr-when{color:var(--soft)} .jr-stop h4{ margin-top:12px;font-family:var(--disp);font-weight:600; font-size:clamp(21px,1.85vw,27px);letter-spacing:-.03em;line-height:1.1; } .jr-stop p{margin-top:12px;margin-bottom:20px;color:var(--soft);font-size:14.5px;line-height:1.62} .jr-get{ display:block;margin-top:auto;padding-top:14px;border-top:1px solid var(--line); font-size:13.5px;line-height:1.45;color:var(--fg); } .jr-get::before{ content:"You leave with";display:block;margin-bottom:5px; font-family:var(--mono);font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--mut); } /* one quiet line for what actually gets built */ .jr-foot{ margin-top:clamp(40px,6vh,70px);padding-top:18px;border-top:1px solid var(--line); display:flex;align-items:baseline;gap:18px;flex-wrap:wrap; font-size:14px;color:var(--soft); } .jr-foot span{ font-family:var(--mono);font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--mut);flex:none; } /* 02 accordion */ .acc{border-top:1px solid var(--line)} .acc-item{border-bottom:1px solid var(--line)} .acc-row{ width:100%;display:grid; grid-template-columns:52px 1fr auto 48px; align-items:center;gap:20px; padding:26px 0;text-align:left; } .acc-num{color:var(--dim);font-size:13px;font-variant-numeric:tabular-nums} .acc-name{ font-family:var(--disp);font-weight:600; font-size:clamp(19px,2.5vw,32px);letter-spacing:-.025em; transition:color .3s,transform .5s var(--ease-out); } .acc-row:hover .acc-name{transform:translateX(8px)} .acc-count{color:var(--dim);font-size:12.5px;letter-spacing:.03em;font-variant-numeric:tabular-nums} .acc-chip{ width:44px;height:44px;border:1px solid var(--line2);border-radius:50%; position:relative;transition:transform .55s var(--ease),background .35s,border-color .35s; } .acc-chip::before,.acc-chip::after{ content:"";position:absolute;top:50%;left:50%;background:currentColor; transform:translate(-50%,-50%);transition:transform .4s var(--ease); } .acc-chip::before{width:14px;height:1.5px} .acc-chip::after{width:1.5px;height:14px} .acc-item.is-open .acc-chip{transform:rotate(180deg);background:var(--bone);border-color:var(--bone);color:var(--ink)} .acc-item.is-open .acc-chip::after{transform:translate(-50%,-50%) scaleY(0)} .acc-body{ display:grid;grid-template-columns:minmax(240px,420px) 1fr; gap:clamp(24px,4vw,60px);align-items:center; overflow:hidden;max-height:0;opacity:0; transition:max-height .8s var(--ease),opacity .6s,padding .6s; } .acc-item.is-open .acc-body{max-height:360px;opacity:1;padding-bottom:34px} .acc-media{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9.6} .acc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .acc-fallback{position:absolute;inset:0} .af-1{background:radial-gradient(100% 100% at 25% 20%,color-mix(in srgb,var(--fg) 8%,transparent),transparent 60%),radial-gradient(70% 70% at 80% 80%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 55%),var(--ink-2)} .af-2{background:radial-gradient(100% 100% at 70% 25%,color-mix(in srgb,var(--fg) 7%,transparent),transparent 60%),var(--ink-2)} .af-3{background:radial-gradient(100% 100% at 45% 75%,color-mix(in srgb,var(--acc) 15%,transparent),transparent 55%),radial-gradient(80% 90% at 85% 15%,color-mix(in srgb,var(--fg) 6%,transparent),transparent 60%),var(--ink-2)} .acc-body p{color:var(--mut);max-width:460px;font-size:14.5px} /* 04 design systems */ .ds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .ds-card{ border:1px solid var(--line);border-radius:20px;background:var(--card); padding:28px 24px;min-height:230px;display:flex;flex-direction:column; transition:border-color .4s,transform .6s var(--ease-out),background .4s; } .ds-card:hover{transform:translateY(-6px);border-color:var(--line2);background:var(--card2)} .ds-i{ font-family:var(--disp);font-weight:600;font-size:26px;color:var(--acc); margin-bottom:auto; } .ds-card h4{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.015em;margin:18px 0 8px} .ds-card p{color:var(--mut);font-size:13px} /* ══════════════ VELOCITY (.vel) ══════════════ The dated track is deliberately not the .jr rail: .jr is scrubbed by main.js and reads as a process, while this reads as a calendar. Four static columns, each hung off a hairline with a short accent tick, so the week numbers carry the section without any motion at all. */ .vel-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,5vw,70px);align-items:end} .vel-sub{color:var(--mut);max-width:540px;font-size:15px;line-height:1.66} .vel-track{ list-style:none;margin:clamp(48px,7vh,86px) 0 0;padding:0; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.4vw,36px); } .vel-step{position:relative;padding-top:30px;border-top:1px solid var(--line)} /* the tick doubles the hairline for 38px — the same "one stop on a line" cue the .jr rail uses, held still */ .vel-step::before{content:"";position:absolute;top:-1px;left:0;width:38px;height:1px;background:var(--acc)} .vel-wk{ font-family:var(--mono);font-weight:500;font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--acc); } .vel-step h3{ font-family:var(--disp);font-weight:600; font-size:clamp(19px,2vw,26px);letter-spacing:-.022em;line-height:1.14; margin:13px 0 0; } .vel-step p{margin-top:13px;color:var(--soft);font-size:14.5px;line-height:1.62} .vel-why{ margin-top:clamp(56px,8vh,100px);border-top:1px solid var(--line); padding-top:clamp(30px,4.4vh,50px); display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(20px,4vw,50px); } .vel-why-lab{ font-family:var(--mono);font-weight:500;font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--dim); } .vel-why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,46px)} .vel-why-grid h4{ font-family:var(--disp);font-weight:600;font-size:18px; letter-spacing:-.018em;color:var(--txt); } .vel-why-grid h4 i{ font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em; color:var(--acc);margin-right:11px;vertical-align:1.5px; } .vel-why-grid p{margin-top:11px;color:var(--mut);font-size:14px;line-height:1.64;max-width:54ch} .vel-foot{ margin-top:clamp(44px,6vh,74px);border-top:1px solid var(--line);padding-top:22px; color:var(--mut);font-size:14px;line-height:1.6;max-width:70ch; } .vel-foot span{ display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--dim);margin-bottom:10px; } .vel-foot-link{margin-left:8px;color:var(--sig);border-bottom:1px solid transparent;transition:border-color .4s} .vel-foot-link:hover{border-bottom-color:var(--sig)} /* ══════════════ AI (.ai) ══════════════ The transcript panel is plain markup: four

s in a column, alternate sides, no script. The gated reply is the only one that borrows the accent on its border — the point of the whole picture is that one message stopped. */ .ai-lead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,72px);align-items:center} .ai-copy h4{ font-family:var(--disp);font-weight:600; font-size:clamp(24px,2.9vw,38px);letter-spacing:-.028em;line-height:1.12; } .ai-copy p{margin-top:18px;color:var(--soft);font-size:15px;line-height:1.66;max-width:56ch} .ai-copy .btn{margin-top:30px} .ai-chat{ border:1px solid var(--line);border-radius:20px;background:var(--card); padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:12px; } .ai-chat-bar{ display:flex;align-items:center;gap:9px; font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--dim);padding-bottom:15px;border-bottom:1px solid var(--line);margin-bottom:4px; } .ai-dot{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none;animation:mz-pulse 2.4s ease-in-out infinite} .ai-msg{ font-size:14px;line-height:1.58;border-radius:15px;padding:13px 16px; max-width:90%;border:1px solid var(--line); } .ai-msg--in{align-self:flex-end;background:var(--card2);color:var(--txt);border-bottom-right-radius:5px} .ai-msg--out{align-self:flex-start;background:transparent;color:var(--mut);border-bottom-left-radius:5px} .ai-msg b{color:var(--txt);font-weight:600} .ai-msg--gate{border-color:color-mix(in srgb,var(--acc) 42%,var(--line))} .ai-cite{ display:block;margin-top:11px;font-family:var(--mono);font-size:10px; letter-spacing:.09em;text-transform:uppercase;color:var(--dim); } .ai-msg--gate .ai-cite{color:var(--acc)} .ai-list{ list-style:none;margin:clamp(46px,6.5vh,84px) 0 0;padding:clamp(28px,4vh,46px) 0 0; border-top:1px solid var(--line); display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.6vw,36px); } .ai-list h5{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.018em;color:var(--txt)} .ai-list p{margin-top:11px;color:var(--mut);font-size:13.5px;line-height:1.62} /* same footnote grammar as .vel-foot / .reg-note — a labelled aside under the section, not a card competing with the transcript */ .ai-proof{ margin-top:clamp(40px,5.5vh,66px);border-top:1px solid var(--line);padding-top:22px; color:var(--mut);font-size:14px;line-height:1.62;max-width:74ch; } .ai-proof span{ display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--dim);margin-bottom:10px; } .ai-proof b{color:var(--txt);font-weight:600} .ai-proof-link{margin-left:8px;color:var(--sig);border-bottom:1px solid transparent;transition:border-color .4s;white-space:nowrap} .ai-proof-link:hover{border-bottom-color:var(--sig)} /* ══════════════ REGULATED (.reg) ══════════════ */ .reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px)} .reg-card{ border:1px solid var(--line);border-radius:20px;background:var(--card); padding:clamp(26px,3vw,44px); transition:border-color .4s,background .4s,transform .6s var(--ease-out); } .reg-card:hover{transform:translateY(-6px);border-color:var(--line2);background:var(--card2)} .reg-kind{ font-family:var(--mono);font-weight:500;font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--acc); } .reg-card h4{ font-family:var(--disp);font-weight:600; font-size:clamp(21px,2.3vw,30px);letter-spacing:-.026em;line-height:1.14;margin:16px 0 0; } .reg-card > p{margin-top:15px;color:var(--soft);font-size:14.5px;line-height:1.64} .reg-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0} .reg-tags li{ border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 13px; font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut); } .reg-how{ list-style:none;margin:clamp(42px,6vh,76px) 0 0;padding:clamp(28px,4vh,46px) 0 0; border-top:1px solid var(--line); display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2.2vw,30px); } .reg-n{ display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em; color:var(--acc);margin-bottom:14px; } .reg-how h5{font-family:var(--disp);font-weight:600;font-size:16.5px;letter-spacing:-.018em;line-height:1.22;color:var(--txt)} .reg-how p{margin-top:10px;color:var(--mut);font-size:13.5px;line-height:1.6} .reg-note{ margin-top:clamp(40px,5.5vh,66px);border-top:1px solid var(--line);padding-top:22px; color:var(--mut);font-size:14px;line-height:1.62;max-width:74ch; } .reg-note span{ display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--dim);margin-bottom:10px; } /* ══════════════ WORK · THE MACHINE (.mach) ══════════════ A laptop drawn, not rendered: chassis in ink and hairlines, an abstracted key grid instead of keycaps. The lid hinges on --open (scrubbed to scroll), the screen holds one live iframe, and --tint is the loaded project's brand colour, which lights the bloom behind the lid, the spill on the desk and the bezel. Taking control rotates the machine square to camera — as much a fix as a flourish, since an iframe inside a rotated element renders soft. */ .mach{ /* --open and --lift are plain numbers, not lengths: GSAP tweens a custom property as a raw value, so the unit has to be applied in the calc() below or the scrubbed hinge writes an invalid transform. */ --open:0; /* lid angle in degrees: -92 closed, 0 open */ --lift:0; /* how far the machine still has to rise, in px */ --tilt:7deg; /* resting camera angle */ --sw:min(1080px,100%);/* screen width */ --tint:var(--acc); position:relative; /* the wings hang off this */ margin-top:clamp(36px,5vh,56px); } .work-lede{ max-width:58ch;margin:26px auto 0;text-align:center; color:var(--soft);font-size:15.5px;line-height:1.62; } /* ── the stage ────────────────────────────────────────────── */ .mach-stage{position:relative;padding:clamp(10px,2vh,26px) 0} /* the room light, coloured by whatever is loaded */ .mach-glow{ position:absolute;left:50%;top:4%;z-index:0; width:min(1240px,100%);height:74%;transform:translateX(-50%); background:radial-gradient(52% 54% at 50% 44%,color-mix(in srgb,var(--tint) 26%,transparent),transparent 72%); filter:blur(64px);opacity:.42;pointer-events:none; transition:opacity .9s,background .9s; } .mach.is-live .mach-glow{opacity:.8} /* ── the plate ──────────────────────────────────────────── A still of the machine, with the live page warped onto its screen by plate.js. The page is authored at a fixed pixel size and mapped with a projective transform, so it lands on the glass whatever size the image renders at. Swapping machines is an image plus four corners. */ .plate{position:relative;z-index:1;margin:0 auto;width:min(1440px,104%)} /* The plate used to be a photograph on a seamless black field, and the page is ink (#0B0A08) — eleven levels apart and slightly cooler, which is enough to read as a black rectangle sitting on the page rather than a machine standing in it. It was being hidden with an edge feather, which softened the symptom and left the middle wrong. The surround is now knocked out of the file itself: the black was flood-filled from the borders and written to alpha, so the machine has no background at all and the page shows through — whatever colour the page happens to be. The tinted room light behind it is .mach-glow. */ .plate-img{ width:100%;height:auto;display:block; } .mach-screen{ position:absolute;top:0;left:0;z-index:2; transform-origin:0 0; /* the matrix3d is written by JS */ overflow:hidden;background:var(--ink); backface-visibility:hidden; } /* ── the screen ──────────────────────────────────────────── */ .mach-frame{ position:absolute;inset:0;width:100%;height:100%;border:0; opacity:0;transition:opacity .7s; pointer-events:none; /* until the cursor rests on it */ } .mach.is-ready .mach-frame{opacity:1} .mach.is-live .mach-frame{pointer-events:auto} /* Discoverability: the screen is live on hover, but nothing said so. Sits over the glass, ignores the pointer, and clears the moment you take control or the frame refuses to load. */ .mach-hint{ position:absolute;left:50%;bottom:clamp(10px,4%,26px);z-index:5; transform:translateX(-50%); display:inline-flex;align-items:center;gap:9px; padding:9px 15px;border-radius:100px; background:color-mix(in srgb,var(--ink) 72%,transparent); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid rgba(233,230,221,.16); font-family:var(--body);font-size:12.5px;font-weight:500;letter-spacing:-.01em; color:rgba(233,230,221,.82);white-space:nowrap; pointer-events:none; opacity:0;transition:opacity .5s var(--e-out),transform .5s var(--e-out); } .mach.is-ready .mach-hint{opacity:1} .mach.is-live .mach-hint, .mach.is-cold .mach-hint{opacity:0;transform:translateX(-50%) translateY(6px)} .mach-hint i{ font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:rgba(233,230,221,.5); padding:2px 7px;border-radius:5px;background:rgba(233,230,221,.09); } /* the whole machine reads as pressable while it is only loaded */ .mach.is-ready .plate{cursor:pointer} .mach.is-live .plate{cursor:default} .mach-poster{ position:absolute;inset:0; background: radial-gradient(80% 74% at 26% 18%,color-mix(in srgb,var(--tint) 40%,transparent),transparent 66%), radial-gradient(70% 66% at 80% 88%,color-mix(in srgb,var(--tint) 20%,transparent),transparent 62%), var(--ink-2); opacity:1;transition:opacity .7s,background .7s; } .mach.is-ready .mach-poster{opacity:0} .mach.is-cold .mach-poster{opacity:1} .mach.is-cold .mach-frame{opacity:0} /* the reel threading through the gate */ .mach-thread{ position:absolute;top:0;left:0;right:0;height:3px;z-index:3;overflow:hidden; background:color-mix(in srgb,var(--fg) 8%,transparent); } .mach-thread::after{ content:"";position:absolute;top:0;left:0;width:32%;height:100%; background:linear-gradient(90deg,transparent,var(--tint),transparent); animation:mach-thread 1.15s ease-in-out infinite; } @keyframes mach-thread{0%{transform:translateX(-100%)}100%{transform:translateX(412%)}} .mach.is-ready .mach-thread,.mach.is-cold .mach-thread{opacity:0;transition:opacity .4s} /* glass: one raking highlight, pulled back once you are working in it */ .mach-glare{ position:absolute;inset:0;z-index:4;pointer-events:none; background:linear-gradient(122deg, color-mix(in srgb,var(--fg) 8%,transparent) 0%, transparent 24%,transparent 60%, color-mix(in srgb,var(--fg) 5%,transparent) 100%); transition:opacity .7s; } .mach.is-live .mach-glare{opacity:.2} .mach-cold{ position:absolute;left:0;right:0;bottom:0;z-index:5; display:none;gap:14px;justify-content:center;align-items:baseline; padding:30px;font-size:24px;color:var(--soft); background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--ink) 88%,transparent) 40%); } .mach-cold b{font-weight:500;color:var(--fg)} .mach.is-cold .mach-cold{display:flex} /* ── the readout ─────────────────────────────────────────── */ .mach-hud{ position:relative;z-index:2; display:flex;align-items:center;justify-content:center;gap:14px; margin-top:clamp(10px,1.6vh,20px); } .mach-led{ width:6px;height:6px;border-radius:50%;flex:none; background:color-mix(in srgb,var(--fg) 24%,transparent); transition:background .5s,box-shadow .5s; } .mach.is-live .mach-led{ background:var(--tint);box-shadow:0 0 0 4px color-mix(in srgb,var(--tint) 18%,transparent); animation:mz-pulse 1.9s ease-in-out infinite; } .mach-status{ font-family:var(--mono);font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--mut);transition:color .5s; } .mach.is-live .mach-status{color:var(--fg)} .mach-exit{ display:inline-flex;align-items:center;gap:9px; font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--fg);border:1px solid var(--line-2);border-radius:var(--r-pill); padding:6px 13px;opacity:0;transform:translateY(4px);pointer-events:none; transition:opacity .45s,transform .45s var(--e-out),background .3s,border-color .3s; } .mach-exit i{ font-style:normal;padding:2px 6px;border-radius:5px; background:color-mix(in srgb,var(--fg) 13%,transparent);color:var(--soft); } .mach-exit:hover{background:var(--tint);border-color:var(--tint);color:var(--ink)} .mach.is-live .mach-exit{opacity:1;transform:none;pointer-events:auto} /* ── the slate ───────────────────────────────────────────── */ .mach-slate{ display:grid;align-items:end;gap:clamp(12px,2vw,28px); grid-template-columns:auto minmax(0,1fr) auto; margin-top:clamp(26px,4vh,42px); transition:opacity .6s; } .mach-idx{ align-self:start;padding-top:8px; font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--mut); font-variant-numeric:tabular-nums; } .mach-idx i{font-style:normal;padding:0 5px;color:var(--line-2)} .mach-title{ font-family:var(--disp);font-weight:600; font-size:clamp(26px,3.1vw,42px);letter-spacing:-.035em;line-height:1; } .mach-meta{ margin-top:9px;font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--tint);transition:color .6s; } .mach-line{margin-top:12px;color:var(--soft);font-size:14.5px;max-width:52ch} .mach-open{ display:inline-flex;align-items:center;gap:9px;white-space:nowrap; border:1px solid var(--line-2);border-radius:var(--r-pill); padding:9px 16px;font-size:13px;color:var(--fg);margin-bottom:4px; transition:background .35s,color .35s,border-color .35s; } .mach-open:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)} .mach-open svg{transition:transform .4s var(--e-out)} .mach-open:hover svg{transform:translate(2px,-2px)} /* ── the wings ─────────────────────────────────────────── An index, not an app drawer. No fills, no halos, no thumbnails — a hairline, a number and a name, with the accent doing one job: marking which reel is loaded. Restraint is the whole point; the machine is the only thing in this section allowed to be loud. */ .mach-wing{ position:absolute;top:50%;z-index:4; display:flex;flex-direction:column; width:clamp(150px,12.5vw,196px); transform:translateY(-50%); pointer-events:none; transition:opacity .6s; } .mach-wing--l{left:clamp(2px,1vw,26px)} .mach-wing--r{right:clamp(2px,1vw,26px);text-align:right} .reel{ position:relative;pointer-events:auto;text-align:inherit; display:block;padding:14px 0 15px; border-top:1px solid var(--line); transition:opacity .4s; opacity:.55; } .mach-wing .reel:last-child{border-bottom:1px solid var(--line)} .reel:hover,.reel:focus-visible{opacity:.92} .reel.is-on{opacity:1} /* the marker: a rule that grows along the top edge in the reel's colour */ .reel::after{ content:"";position:absolute;top:-1px;left:0;right:0;height:1px; background:var(--tint); transform:scaleX(0);transform-origin:0 50%; transition:transform .6s var(--e-out); } .mach-wing--r .reel::after{transform-origin:100% 50%} .reel.is-on::after{transform:scaleX(1)} .reel-art{display:none} /* the thumbnails are gone */ .reel-body{display:block} .reel-n{ display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em; color:var(--mut);transition:color .4s; } .reel.is-on .reel-n{color:var(--tint)} .reel-name{ display:block;margin-top:7px; font-family:var(--disp);font-weight:600; font-size:clamp(15px,1.15vw,18px);letter-spacing:-.02em;line-height:1.15; color:var(--soft);transition:color .4s; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .reel:hover .reel-name,.reel.is-on .reel-name{color:var(--fg)} .reel-meta{ display:block;margin-top:5px; font-family:var(--mono);font-size:9.5px;letter-spacing:.15em; text-transform:uppercase;color:var(--mut); } /* the one line that reaches for the machine */ .reel-tether{ position:absolute;top:50%;height:1px;width:clamp(14px,1.6vw,30px); background:linear-gradient(90deg,var(--tint),transparent); opacity:0;transform:scaleX(.2);transform-origin:0 50%; transition:opacity .4s,transform .55s var(--e-out); } .mach-wing--l .reel-tether{left:100%} .mach-wing--r .reel-tether{ right:100%;left:auto;transform-origin:100% 50%; background:linear-gradient(270deg,var(--tint),transparent); } .reel.is-on .reel-tether{opacity:.8;transform:scaleX(1)} .mach.is-live .mach-wing{opacity:.28} .work-cta{display:flex;justify-content:center;margin-top:46px} /* ── crossing marquees ────────────────────────────────────── */ .xmarq{position:relative;height:340px;overflow:hidden;display:grid;place-items:center;z-index:3;background:var(--bg)} .xmarq-band{ position:absolute;left:-5%;right:-5%;padding:20px 0;overflow:hidden; } .xmarq-dark{transform:rotate(-6deg);background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .xmarq-light{transform:rotate(6deg);background:var(--bone);color:var(--ink)} .xmarq-track span{ font-family:var(--disp);font-weight:600;font-size:clamp(17px,1.9vw,26px); letter-spacing:-.01em;white-space:nowrap; } .xmarq-dark .xmarq-track span{color:var(--dim)} .xmarq-dark .xmarq-track b{color:var(--line-2)} .xmarq-light .xmarq-track b{color:var(--sig)} /* ── studio / capability statement ─────────────────────────── No third-party quotes here — the invented testimonials were removed (fabricated names/companies). This is a first-person statement of how the studio works, next to the arch photo. */ .studio-grid{ display:grid;grid-template-columns:minmax(280px,460px) 1fr; gap:clamp(36px,6vw,90px);align-items:center; } .studio-fig{ position:relative;overflow:hidden; border-radius:300px 300px 22px 22px; aspect-ratio:4/4.9; } .studio-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)} .studio-fig:hover img{transform:scale(1.05)} .studio-fallback{position:absolute;inset:0;background: radial-gradient(90% 70% at 55% 30%,color-mix(in srgb,var(--fg) 9%,transparent),transparent 60%), radial-gradient(70% 60% at 40% 80%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 58%),var(--panel)} .studio-statement{position:relative;margin-top:34px;max-width:520px} .studio-statement p{ font-family:var(--disp);font-weight:600; font-size:clamp(21px,2.6vw,32px);letter-spacing:-.025em;line-height:1.26; color:var(--fg); } .studio-statement p+p{margin-top:18px;font-family:var(--body);font-weight:400;font-size:15.5px;letter-spacing:0;color:var(--soft);line-height:1.6} /* ── commitments ledger (.cmt) ───────────────────────────────── Replaces the old .team card grid (three faceless bios). This reads as a contract rider, not a card wall: one hairline per clause, the numeral out in the margin, and the risk each clause retires held in its own right-hand column — so a skimmer can read that column alone, top to bottom, and still get the whole argument. Deliberately not another rounded card: the page already spends .team's old geometry on .work, .faq and .studio. */ .cmt-head{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(24px,5vw,80px);align-items:end; } .cmt-sub{color:var(--mut);max-width:540px;font-size:15px;line-height:1.66} .cmt-list{list-style:none;margin:clamp(44px,6vh,70px) 0 0;padding:0;border-top:1px solid var(--line)} .cmt-row{ display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,210px); gap:clamp(18px,3vw,48px);align-items:start; padding:clamp(26px,3.2vh,38px) 0; border-bottom:1px solid var(--line); transition:border-color .5s; } .cmt-row:hover{border-color:var(--line2)} .cmt-n{ font-family:var(--mono);font-size:11px;letter-spacing:.13em; color:var(--dim);padding-top:8px;transition:color .45s; } .cmt-row:hover .cmt-n{color:var(--sig)} .cmt-body h3{ font-family:var(--disp);font-weight:600; font-size:clamp(19px,2.05vw,27px);letter-spacing:-.03em;line-height:1.2; max-width:24ch; } .cmt-body p{margin-top:12px;color:var(--soft);font-size:14.5px;line-height:1.64;max-width:64ch} /* the skim column: label above, the risk itself below */ .cmt-risk{display:block;padding-top:8px;font-size:13.5px;line-height:1.45;color:var(--fg)} .cmt-risk::before{ content:"Risk it retires";display:block;margin-bottom:5px; font-family:var(--mono);font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--mut); } /* same quiet closing line as .jr-foot under the rail */ .cmt-foot{ margin-top:clamp(34px,4.5vh,54px); display:flex;align-items:baseline;gap:18px;flex-wrap:wrap; font-size:14px;color:var(--soft); } .cmt-foot span{ font-family:var(--mono);font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--mut);flex:none; } .cmt-foot-link{color:var(--sig);border-bottom:1px solid transparent;transition:border-color .4s} .cmt-foot-link:hover{border-bottom-color:var(--sig)} /* ── faq ──────────────────────────────────────────────────── */ .faq{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.35fr);gap:clamp(40px,6vw,100px);align-items:start} .faq-note{ margin-top:50px;border:1px solid var(--line);border-radius:18px; background:var(--card);padding:28px;max-width:360px; } .faq-note p{color:var(--mut);font-size:14px} .faq-note-meta{display:flex;flex-direction:column;gap:2px;margin-top:22px} .faq-note-meta span{font-size:10.5px;letter-spacing:.14em;color:var(--dim)} .faq-note-meta strong{font-family:var(--disp);font-weight:600;font-size:18px} .faq-list{display:flex;flex-direction:column;gap:12px} .faq-item{ border:1px solid var(--line);border-radius:16px;overflow:hidden; background:var(--card); transition:background .5s,border-color .5s; } .faq-q{ width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px; padding:22px 26px;text-align:left; font-family:var(--disp);font-weight:600;font-size:clamp(16px,1.6vw,20px);letter-spacing:-.015em; color:var(--txt);transition:color .4s; } .faq-x{position:relative;width:16px;height:16px;flex:none} .faq-x::before,.faq-x::after{ content:"";position:absolute;top:50%;left:50%;background:currentColor; transform:translate(-50%,-50%);transition:transform .45s var(--ease); } .faq-x::before{width:15px;height:1.6px} .faq-x::after{width:1.6px;height:15px} .faq-a{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s} .faq-a p{padding:0 26px 24px;color:var(--mut);font-size:14px;max-width:560px;transition:color .4s} .faq-item.is-open{background:var(--bone);border-color:var(--bone)} .faq-item.is-open .faq-q{color:var(--ink)} .faq-item.is-open .faq-a{max-height:200px;opacity:1} .faq-item.is-open .faq-a p{color:rgba(11,10,8,.66)} .faq-item.is-open .faq-x::after{transform:translate(-50%,-50%) scaleY(0)} /* ── contact ──────────────────────────────────────────────── */ .contact{ display:grid;grid-template-columns:1fr minmax(320px,560px); gap:clamp(40px,6vw,90px);position:relative;overflow:hidden; } .contact-map{ position:absolute;inset:0;pointer-events:none;opacity:.8; background-image:radial-gradient(rgba(233,230,221,.16) 1px,transparent 1.4px); background-size:26px 26px; -webkit-mask-image:radial-gradient(75% 85% at 38% 55%,#000 0%,transparent 68%); mask-image:radial-gradient(75% 85% at 38% 55%,#000 0%,transparent 68%); } .contact-left{position:relative} .contact-lines{margin-top:40px} .contact-mail{ font-family:var(--disp);font-weight:600; font-size:clamp(21px,2.6vw,34px);letter-spacing:-.025em; position:relative;display:inline-block; } .contact-mail::after{ content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:100%; background:var(--sig);transform:scaleX(0);transform-origin:right; transition:transform .55s var(--ease); } .contact-mail:hover::after{transform:scaleX(1);transform-origin:left} .contact-phone{color:var(--mut);margin-top:14px;font-size:14px;font-variant-numeric:tabular-nums} .contact-phone span{color:var(--dim);margin:0 6px} .contact-cities{display:flex;gap:38px;margin-top:44px} .contact-cities p{display:flex;flex-direction:column;font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums} .contact-cities b{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--txt);margin-bottom:4px} .contact-form{ position:relative;background:var(--card); border:1px solid var(--line);border-radius:22px; padding:clamp(26px,3vw,40px); display:flex;flex-direction:column;gap:18px; } .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .contact-form label{ display:flex;flex-direction:column;gap:8px; font-family:var(--disp);font-weight:600;font-size:13.5px;letter-spacing:.01em; } .contact-form input,.contact-form select,.contact-form textarea{ background:var(--ink-2);border:1px solid var(--line);border-radius:12px; padding:13px 15px;color:var(--txt);font-family:var(--body);font-size:14px; outline:none;transition:border-color .3s,background .3s;resize:vertical; appearance:none;-webkit-appearance:none; } .contact-form select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239c9c9c' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center; } .contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--dim)} .contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--sig);background:var(--ink-2)} .contact-form input.is-bad{border-color:#e5484d} .btn-submit{justify-content:space-between;margin-top:6px} .form-ok{display:none;color:#2ec27e;font-size:13px} .form-ok.is-on{display:block} /* ── footer ─────────────────────────────────────────────────────────── Ported verbatim from the main site's footer (index.html