/* ============================================================ FirstFold Studio — public property v2 "Heavy cotton proofing paper under warm morning studio light, moving like a precise typesetter." The newspaper theme is retired; the paper, the fold, and the red proofing mark remain. Every label is plain client language. ============================================================ */ /* ---------- Self-hosted variable typefaces (no remote fonts) ---------- */ @font-face { font-family: "Newsreader"; src: url("fonts/newsreader-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("fonts/newsreader-italic-var.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; } @font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Spline Sans Mono"; src: url("fonts/spline-sans-mono-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { /* Crisp, SF-like display face for headings (self-hosted, no remote fetch) */ font-family: "Inter"; src: url("fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --paper: #F8F5EE; --paper-deep: #EFEADE; --paper-raise: #FDFBF6; --ink: #1A1712; --ink-muted: #5A5344; --ink-faint: rgba(26, 23, 18, 0.16); --ink-hairline: rgba(26, 23, 18, 0.28); --red: #C2391D; --red-deep: #A62F16; --red-on-ink: #E8836A; /* the one accent allowed on ink surfaces */ --ok: #3A6B35; /* functional only: verified / already in place */ --paper-on-ink: #F4F0E6; --muted-on-ink: #B0A794; --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif; --font-sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif; --font-mono: "Spline Sans Mono", "Cascadia Code", Consolas, monospace; /* Headings: real SF on Apple, self-hosted Inter everywhere else */ --font-display: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; --ease-paper: cubic-bezier(0.16, 1, 0.3, 1); --pad-x: clamp(20px, 5vw, 76px); /* The bounded reading column. Above --content-max + 2*76px of viewport, the shared gutter token grows so every section, the top bar, and the footer center one --content-max column; backgrounds keep bleeding full-width. Mobile/tablet never reach the media query, so nothing changes there. */ --content-max: 1480px; --topbar-h: calc(64px + env(safe-area-inset-top, 0px)); /* folds in the iOS status-bar safe area so the bar fills it; 64px on desktop/non-notch */ } /* Ultra-wide containment: one centered content column everywhere. */ @media (min-width: 1632px) { :root { --pad-x: calc((100vw - var(--content-max)) / 2); } } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Paint the root canvas paper. Safari iOS (bottom URL bar) does NOT propagate the background over the top safe strip above the sticky top bar, so it rendered transparent and showed through. Colouring itself fixes the gap and also makes the overscroll/rubber-band areas paper. */ background-color: var(--paper); /* iOS Safari auto-inflates text by heuristics, and it scales small text more than large text — which unevenly distorts the tiny top-bar wordmark vs the huge preloader wordmark and throws off the dock's measured width ratio. Pin it so text renders at its declared size on every platform. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { /* Reserve the flow space the now-fixed .topbar vacated (must equal the bar height: hero min-height is calc(100svh - var(--topbar-h)), so 64px padding + that hero == a full first screen, identical to the old sticky layout). */ padding-top: var(--topbar-h); background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--red); color: var(--paper-on-ink); } /* paper grain — the surface is a material, not a color */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.032; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } a { color: inherit; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -48px; z-index: 120; background: var(--ink); color: var(--paper-on-ink); font-family: var(--font-mono); font-size: 13px; padding: 10px 16px; text-decoration: none; transition: top 0.2s var(--ease-paper); } .skip-link:focus-visible { top: 12px; } /* ============================================================ Top bar — one persistent, calm bar on every page ============================================================ */ .topbar { /* FIXED, not sticky. Safari-iOS repositions a sticky bar every frame on its async scroll thread; as the bottom URL bar collapses mid-gesture the visual viewport resizes and the sticky layer lags a few px below top:0, exposing a transparent strip that shows the scrolled content beneath. A fixed bar is anchored to the layout viewport and is never repositioned per-frame, so the gap cannot open. Chrome-iOS (WKWebView) and Android never desynced and fixed behaves identically for them. */ position: fixed; top: 0; left: 0; right: 0; z-index: 70; /* Promote to a stable GPU layer so iOS composites it in sync (also prevents the classic iOS fixed-header flicker). No ancestor carries a transform, so this creates no containing-block trap. */ transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; justify-content: space-between; align-items: center; /* wrap only under extreme text zoom on narrow screens: the action drops to a second row rather than hiding or overflowing */ flex-wrap: wrap; gap: 0 16px; min-height: var(--topbar-h); /* Top padding = the iOS status-bar inset (needs viewport-fit=cover in the meta). The bar's paper background fills the safe strip that was showing the page, while the bar's content stays below the status bar. 0 on desktop. */ padding: env(safe-area-inset-top, 0px) var(--pad-x) 0; background: var(--paper); border-bottom: 1px solid var(--ink-hairline); transition: box-shadow 0.3s var(--ease-paper); } .topbar.is-scrolled { box-shadow: 0 1px 0 rgba(26, 23, 18, 0.06), 0 10px 28px rgba(26, 23, 18, 0.07); } /* (Removed) An earlier .topbar::before paper panel could not work: as a descendant of the sticky bar it shared the same async-displaced layer and lagged in lockstep, so the strip re-opened above it. The real fix is structural — sticky -> fixed, above. */ /* The wordmark is a static, proportional copy of the finished loader lockup (same structure, weights, ratios and red) so the cover can dock onto it pixel-for-pixel. layoutBrand (main.js) sets the measured widths + fold left. */ .brand { display: inline-flex; align-items: center; text-decoration: none; } .brand-lockup { --bmark: 1.32rem; position: relative; display: block; width: calc(var(--bmark) * 3.267); /* glyph-measured ratio; JS refines the header copy */ height: calc(var(--bmark) * 1.94); /* First + rule + full-size Studio */ } .brand-lockup .bw { position: absolute; top: 0; display: block; font-family: var(--font-serif); font-optical-sizing: none; /* linear scaling so the dock morph matches exactly */ font-size: var(--bmark); line-height: 0.9; letter-spacing: -0.062em; white-space: nowrap; color: var(--ink); } .bw-first { left: 0; font-weight: 710; } .bw-fold { left: calc(var(--bmark) * 1.8229); font-style: italic; font-weight: 430; } /* static ratio; JS refines */ .brand-rule { position: absolute; left: 0; top: calc(var(--bmark) * 0.78); width: 100%; height: calc(var(--bmark) * 0.045); min-height: 1px; background: #9f2616; } .brand-studio { position: absolute; left: 0; top: calc(var(--bmark) * 0.92); width: 100%; text-align: center; font-family: var(--font-serif); font-optical-sizing: none; font-style: italic; font-weight: 550; font-size: var(--bmark); /* Studio matches First exactly — the avatar lockup */ line-height: 1; letter-spacing: -0.045em; color: var(--ink); } /* No optical sizing on the lockup text (loader + wordmark) so glyphs scale linearly and the dock morph matches width AND height at any screen size. */ #preloader .word, #preloader .studio-line { font-optical-sizing: none; } /* ...but iOS Safari ignores font-optical-sizing:none and lets opsz track the font-size, so the large loader "Studio" and the small menu-bar "Studio" land on different optical instances and the docked Studio comes out smaller. (The wordmark self-corrects because the dock scale is measured from First+Fold; the Studio is sized independently and does not.) Pin opsz to 18 — the value that font-optical-sizing:none resolves to on Chrome/Android, so nothing changes there — to force one instance everywhere. wght is restated because font-variation-settings resets unlisted axes. */ .bw-first, #preloader .word-first { font-variation-settings: "opsz" 18, "wght" 710; } .bw-fold, #preloader .word-fold { font-variation-settings: "opsz" 18, "wght" 430; } .brand-studio, #preloader .studio-line { font-variation-settings: "opsz" 18, "wght" 550; } .footer-brand em { font-style: italic; font-weight: 500; } .brand:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; } .topbar-right { display: flex; align-items: center; gap: clamp(9px, 1.6vw, 16px); } /* The one persistent conversion action: visible at every width, on every page, styled as a stamped instruction rather than a nav link. */ .topbar-cta { --cta-o1: #F4864E; /* light orange (top-left) */ --cta-o2: #DA4A20; /* mid */ --cta-o3: #BB3A1A; /* dark orange (bottom-right) */ display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px 0 14px; border-radius: 999px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #fff; text-decoration: none; white-space: nowrap; background: linear-gradient(118deg, var(--cta-o1) 0%, var(--cta-o2) 56%, var(--cta-o3) 100%); box-shadow: 0 6px 18px -1px rgba(216, 74, 32, 0.5), 0 2px 7px rgba(216, 74, 32, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.28); transition: transform 0.18s var(--ease-paper), box-shadow 0.2s var(--ease-paper), filter 0.2s var(--ease-paper); } .topbar-cta:hover { filter: brightness(1.05) saturate(1.04); box-shadow: 0 9px 26px -1px rgba(216, 74, 32, 0.58), 0 3px 9px rgba(216, 74, 32, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.34); } .topbar-cta:active { transform: translateY(1px); } .topbar-cta:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 3px; } .cta-label { line-height: 1; padding-top: 1px; } .cta-ico { display: inline-flex; flex: none; } .cta-bolt svg { width: 14px; height: 14px; } .cta-go svg { width: 23px; height: 23px; } /* the bolt jiggles briefly every few seconds to draw the eye */ .cta-bolt { transform-origin: 50% 55%; animation: ctaBolt 5.5s var(--ease-paper) infinite; } @keyframes ctaBolt { 0%, 84%, 100% { transform: rotate(0) scale(1); } 86.5% { transform: rotate(-13deg) scale(1.14); } 89% { transform: rotate(11deg) scale(1.16); } 91.5% { transform: rotate(-7deg) scale(1.09); } 94% { transform: rotate(4deg) scale(1.04); } 97% { transform: rotate(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .cta-bolt { animation: none; } } /* The hamburger — a folded pair of rules, not a boxed “Menu” */ .menu-btn { display: none; /* no-JS cannot open the overlay; the fallback nav serves instead */ align-items: center; gap: 10px; background: none; border: none; color: var(--ink); cursor: pointer; padding: 12px 0 12px 12px; min-height: 44px; } html.menu-ready .menu-btn { display: flex; } html.menu-ready .masthead-nav { display: none; } /* Desktop: show the primary sections inline in the bar and drop the hamburger. Phones keep the hamburger — this nav stays hidden below 900px. */ .topbar-nav { display: none; } @media (min-width: 900px) { html.menu-ready .topbar-nav { display: flex; gap: clamp(20px, 2.4vw, 34px); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; } html.menu-ready .topbar-nav a { text-decoration: none; border-bottom: 1px solid transparent; padding: 4px 0; transition: border-color 0.2s var(--ease-paper), color 0.2s var(--ease-paper); } html.menu-ready .topbar-nav a:hover { border-bottom-color: var(--ink); } html.menu-ready .topbar-nav a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } html.menu-ready .menu-btn { display: none; } } .menu-btn-box { display: inline-flex; flex-direction: column; gap: 5px; width: 24px; } .menu-btn-line { display: block; width: 24px; height: 2px; background: var(--ink); transition: background 0.2s var(--ease-paper); } .menu-btn:hover .menu-btn-line { background: var(--red-deep); } .menu-btn:active .menu-btn-line { background: var(--red); } .menu-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; } /* No-JS fallback navigation — plain, visible, complete */ .masthead-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 32px); padding: 12px var(--pad-x); border-bottom: 1px solid var(--ink-hairline); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; overflow-x: auto; scrollbar-width: none; } .masthead-nav::-webkit-scrollbar { display: none; } .masthead-nav a { text-decoration: none; white-space: nowrap; flex-shrink: 0; padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease-paper), color 0.2s var(--ease-paper); } .masthead-nav a:hover { border-bottom-color: var(--ink); } .masthead-nav a:active { color: var(--red); } .masthead-nav a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } .masthead-nav .nav-cta { color: var(--red-deep); border-bottom-color: var(--red-deep); } .masthead-nav .nav-cta:hover { color: var(--red); border-bottom-color: var(--red); } /* ============================================================ The menu — a full paper surface, keyboard-safe ============================================================ */ .m-menu { position: fixed; inset: 0; z-index: 80; background: var(--paper); display: flex; flex-direction: column; overflow-y: auto; } .m-menu[hidden] { display: none; } html.js .m-menu { opacity: 0; transform: translateY(-10px); } html.js .m-menu.is-open { opacity: 1; transform: none; transition: opacity 0.3s var(--ease-paper), transform 0.3s var(--ease-paper); } body.menu-open { overflow: hidden; } .m-menu-inner { display: flex; flex-direction: column; min-height: 100%; padding: 0 var(--pad-x) clamp(28px, 5vh, 56px); } .m-menu-head { display: flex; justify-content: space-between; align-items: center; min-height: var(--topbar-h); padding-top: env(safe-area-inset-top, 0px); /* clear the status bar like the top bar */ border-bottom: 1px solid var(--ink-hairline); } .mini-brand { font-family: var(--font-serif); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; } .mini-brand em { font-style: italic; font-weight: 500; } /* the one lockup, scaled per context */ .mini-brand .brand-lockup { --bmark: 1rem; } .footer-brand .brand-lockup { --bmark: 1.7rem; } .menu-close { display: flex; align-items: center; gap: 10px; background: none; border: none; color: var(--ink); cursor: pointer; padding: 12px 0 12px 12px; min-height: 44px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } .menu-close-x { position: relative; width: 20px; height: 20px; } .menu-close-x::before, .menu-close-x::after { content: ""; position: absolute; left: 0; top: 9px; width: 20px; height: 2px; background: var(--ink); transition: background 0.2s var(--ease-paper), transform 0.25s var(--ease-paper); } .menu-close-x::before { transform: rotate(45deg); } .menu-close-x::after { transform: rotate(-45deg); } .menu-close:hover .menu-close-x::before, .menu-close:hover .menu-close-x::after { background: var(--red-deep); } .menu-close:hover { color: var(--red-deep); } .menu-close:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; } .m-menu-nav { flex-grow: 1; padding-top: clamp(20px, 4vh, 44px); } .m-menu-nav ol { list-style: none; max-width: 880px; } .m-menu-nav li { border-bottom: 1px solid var(--ink-faint); } .m-menu-nav ol a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline; gap: 14px; padding: clamp(14px, 2.6vh, 24px) 4px; text-decoration: none; transition: background 0.2s var(--ease-paper), color 0.2s var(--ease-paper), padding-left 0.2s var(--ease-paper); } .m-menu-nav ol a:hover, .m-menu-nav ol a:focus-visible { background: var(--ink); color: var(--paper-on-ink); padding-left: 16px; } .m-menu-nav ol a:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; } .m-menu-nav ol a:active { background: var(--red-deep); color: var(--paper-on-ink); } .mn-no { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--red); } .m-menu-nav ol a:hover .mn-no, .m-menu-nav ol a:focus-visible .mn-no, .m-menu-nav ol a:active .mn-no { color: var(--red-on-ink); } .mn-label { font-family: var(--font-serif); font-size: clamp(1.7rem, 3vw, 2.9rem); font-weight: 600; letter-spacing: -0.018em; line-height: 1.05; } .mn-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); } .m-menu-nav ol a:hover .mn-meta, .m-menu-nav ol a:focus-visible .mn-meta, .m-menu-nav ol a:active .mn-meta { color: var(--muted-on-ink); } /* staggered settle for the rows */ html.js .m-menu-nav li { opacity: 0; transform: translateY(8px); } html.js .m-menu.is-open .m-menu-nav li { opacity: 1; transform: none; transition: opacity 0.4s var(--ease-paper), transform 0.4s var(--ease-paper); } html.js .m-menu.is-open .m-menu-nav li:nth-child(2) { transition-delay: 0.04s; } html.js .m-menu.is-open .m-menu-nav li:nth-child(3) { transition-delay: 0.08s; } html.js .m-menu.is-open .m-menu-nav li:nth-child(4) { transition-delay: 0.12s; } html.js .m-menu.is-open .m-menu-nav li:nth-child(5) { transition-delay: 0.16s; } .m-menu-cta { margin-top: clamp(20px, 4vh, 36px); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .m-menu-foot { margin-top: clamp(24px, 5vh, 48px); padding-top: 18px; border-top: 1px solid var(--ink-hairline); display: flex; justify-content: space-between; align-items: baseline; gap: 12px 32px; flex-wrap: wrap; } .m-menu-foot-links { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; } .m-menu-foot-links a { text-decoration: none; border-bottom: 1px solid transparent; padding: 4px 0; transition: border-color 0.2s var(--ease-paper), color 0.2s var(--ease-paper); } .m-menu-foot-links a:hover { border-bottom-color: var(--ink); } .m-menu-foot-links a:active { color: var(--red); } .m-menu-foot-links a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } .m-menu-foot-line { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-muted); } /* ============================================================ Buttons & text links ============================================================ */ .btn { display: inline-block; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; text-align: center; padding: 16px 28px; border: 1px solid transparent; cursor: pointer; transition: background 0.2s var(--ease-paper), color 0.2s var(--ease-paper), border-color 0.2s var(--ease-paper), transform 0.2s var(--ease-paper), box-shadow 0.2s var(--ease-paper); } .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .btn-primary { background: var(--red); color: var(--paper-on-ink); box-shadow: 0 1px 0 rgba(26,23,18,0.2), 0 6px 18px rgba(194,57,29,0.22); } .btn-primary:hover { background: var(--red-deep); transform: translateY(-1px); box-shadow: 0 2px 0 rgba(26,23,18,0.2), 0 10px 24px rgba(194,57,29,0.28); } .btn-primary:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(26,23,18,0.2); } .btn-primary:disabled, .btn-primary[disabled] { background: var(--ink-muted); box-shadow: none; transform: none; cursor: default; } .btn-ghost { border-color: var(--ink-hairline); color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--paper-on-ink); border-color: var(--ink); } .btn-ghost:active { background: var(--red-deep); border-color: var(--red-deep); color: var(--paper-on-ink); } .text-link { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-deep); text-decoration: underline; text-underline-offset: 4px; transition: color 0.2s var(--ease-paper); } .text-link:hover { color: var(--red); } .text-link:active { color: var(--ink); } .text-link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } /* ============================================================ Shared section grammar ============================================================ */ section { padding: clamp(44px, 5.5vw, 76px) var(--pad-x); } .eyebrow, .kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); } .section-head { margin-bottom: clamp(40px, 5vw, 64px); } .section-head .kicker { margin-bottom: 14px; } h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4.6vw, 3.7rem); line-height: 1.02; letter-spacing: -0.022em; max-width: 24ch; } .friction { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-muted); margin-top: 14px; } /* proof list under the CTAs — marker in front, staggered reveal that begins only once the preloader has lifted (main.js adds .is-in on html.pl-done). */ .hero-proof { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 9px; max-width: 178px; /* keeps the list in the left column, clear of the graphic */ } .hero-proof li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.3; color: var(--ink); } .hero-proof li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 13px; height: 2px; background: var(--red); } /* Transition (not animation) so the resting state is a declared opacity:1 — the list can never get stuck hidden. Staggered via transition-delay. */ .hero-proof li { transition: opacity 0.55s var(--ease-paper), transform 0.55s var(--ease-paper); } .hero-proof.is-armed li { opacity: 0; transform: translateY(9px); } .hero-proof.is-in li { opacity: 1; transform: none; } .hero-proof.is-in li:nth-child(1) { transition-delay: 0.10s; } .hero-proof.is-in li:nth-child(2) { transition-delay: 0.24s; } .hero-proof.is-in li:nth-child(3) { transition-delay: 0.38s; } .hero-proof.is-in li:nth-child(4) { transition-delay: 0.52s; } @media (prefers-reduced-motion: reduce) { .hero-proof li { transition: none; } .hero-proof.is-armed li, .hero-proof.is-in li { opacity: 1; transform: none; } } /* ============================================================ Home hero — the typed profession moment ============================================================ */ .hero-home { --hero-rear-x: 0px; --hero-rear-y: 0px; --hero-mid-x: 0px; --hero-mid-y: 0px; --hero-front-x: 0px; --hero-front-y: 0px; --hero-geo-x: 0px; --hero-geo-y: 0px; --hero-tilt-x: 0deg; --hero-tilt-y: 0deg; position: relative; isolation: isolate; min-height: min(calc(100svh - var(--topbar-h)), 1280px); overflow: clip; padding: clamp(72px, 11vh, 140px) var(--pad-x) clamp(80px, 9vw, 128px); } .hero-copy { position: relative; z-index: 4; width: min(100%, 980px); } .hero-home .eyebrow { display: block; margin-bottom: clamp(24px, 3.5vw, 40px); } .hero-title { font-family: var(--font-display); font-weight: 620; font-optical-sizing: auto; font-size: clamp(2.7rem, 7.1vw, 6.3rem); line-height: 1.06; letter-spacing: -0.03em; } /* Every line break in the headline is declared with a responsive
, so the fixed words hold one composition per breakpoint and typing can only ever change glyphs inside the profession's own line. */ .hero-typeline { display: block; } .hbr { display: none; } @media (min-width: 641px) { .hbr-d { display: inline; } } @media (max-width: 640px) { .hbr-m { display: inline; } } .typed { color: var(--red); } /* The profession types inside a fixed-width slot sized to the longest word, so the trailing period — and the whole composition — never shift. */ .ht-word { position: relative; display: inline-block; } .ht-measure { visibility: hidden; } .ht-live { position: absolute; left: 0; top: 0; white-space: nowrap; } .ht-dot { color: var(--ink); } /* the period is typed with the word but stays black */ .caret { display: inline-block; width: 0.055em; min-width: 3px; height: 0.78em; margin: 0 0.02em 0 0.05em; background: var(--red); transform: translateY(0.08em); } .caret[hidden] { display: none; } .caret.is-blinking { animation: caretBlink 1.1s steps(1, end) infinite; } @keyframes caretBlink { 50% { opacity: 0; } } .hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ink-muted); max-width: 52ch; margin-top: clamp(24px, 3.5vw, 40px); } .hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 44px); } /* A professional institution rendered as a paper architectural maquette. The three generated cutouts are independent depth planes; the drafting geometry stays code-native so it remains crisp at every viewport. */ .hero-architecture { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: clamp(500px, 49vw, 760px); margin: 0; pointer-events: none; perspective: 1200px; contain: layout paint; } .hero-geometry { position: absolute; z-index: 0; top: 4%; right: 0; width: 64%; height: 58%; border-left: 1px solid rgba(26, 23, 18, 0.08); background: linear-gradient(to right, transparent 49.8%, rgba(26, 23, 18, 0.075) 50%, transparent 50.2%), linear-gradient(to bottom, transparent 30%, rgba(26, 23, 18, 0.07) 30.2%, transparent 30.4%, transparent 61%, rgba(26, 23, 18, 0.07) 61.2%, transparent 61.4%); transform: translate3d(var(--hero-geo-x), var(--hero-geo-y), 0); transition: transform 180ms var(--ease-paper); will-change: transform; } .hero-geo-circle, .hero-geo-diagonal, .hero-geo-grid { position: absolute; display: block; } .hero-geo-circle { top: 25%; left: 13%; width: clamp(88px, 10vw, 142px); aspect-ratio: 1; border: 1px solid rgba(26, 23, 18, 0.09); border-radius: 50%; } .hero-geo-diagonal { inset: 0; background: linear-gradient(117deg, transparent 0 61%, rgba(194, 57, 29, 0.15) 61.1% 61.3%, transparent 61.4%); } .hero-geo-grid { top: 27%; right: 0; width: 43%; height: 34%; opacity: 0.42; background-image: radial-gradient(circle, rgba(26, 23, 18, 0.2) 0 0.65px, transparent 0.75px); background-size: 7px 7px; mask-image: linear-gradient(to bottom left, #000 0 48%, transparent 84%); } .hero-depth-stage { position: absolute; z-index: 1; inset: 7% -4% -7% 0; transform-style: preserve-3d; transform: rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y)); transform-origin: 70% 64%; transition: transform 180ms var(--ease-paper); will-change: transform; } .hero-depth-layer { position: absolute; display: block; max-width: none; height: auto; user-select: none; transform-origin: 50% 85%; transition: transform 180ms var(--ease-paper), filter 180ms var(--ease-paper); will-change: transform; } .hero-depth-rear { z-index: 1; right: 3%; bottom: 2%; width: 57%; transform: translate3d(var(--hero-rear-x), var(--hero-rear-y), -35px); filter: drop-shadow(10px 22px 24px rgba(26, 23, 18, 0.09)); } .hero-depth-mid { z-index: 2; right: 24%; bottom: 12%; width: 43%; transform: translate3d(var(--hero-mid-x), var(--hero-mid-y), 8px); filter: drop-shadow(13px 25px 24px rgba(26, 23, 18, 0.13)); } .hero-depth-front { z-index: 3; right: -38%; bottom: -2%; width: 116%; transform: translate3d(var(--hero-front-x), var(--hero-front-y), 46px); filter: drop-shadow(16px 27px 28px rgba(26, 23, 18, 0.15)); } .hero-home[data-depth-active="pointer"] .hero-depth-layer, .hero-home[data-depth-active="pointer"] .hero-depth-stage, .hero-home[data-depth-active="pointer"] .hero-geometry { transition-duration: 90ms; } /* settle-in on load — gated so no-JS renders everything instantly */ html.js .hero-home .eyebrow, html.js .hero-home .hero-title, html.js .hero-home .hero-sub, html.js .hero-home .hero-actions, html.js .hero-home .friction, html.js .hero-home .hero-architecture { opacity: 0; transform: translateY(12px); animation: heroSettle 0.7s var(--ease-paper) forwards; } html.js .hero-home .hero-title { animation-delay: 0.06s; } html.js .hero-home .hero-sub { animation-delay: 0.14s; } html.js .hero-home .hero-actions { animation-delay: 0.2s; } html.js .hero-home .friction { animation-delay: 0.26s; } html.js .hero-home .hero-architecture { animation-delay: 0.16s; } @keyframes heroSettle { to { opacity: 1; transform: none; } } /* ============================================================ The fold — the one divider that stays ============================================================ */ .fold-line { position: relative; height: 56px; /* The crease sits at the very top edge so the hero blocks meet it and look like they rise out of the dashed line; the fold shadow falls away below into the next section. */ background: linear-gradient(to bottom, rgba(26,23,18,0.12) 0%, rgba(255,255,255,0.5) 6%, var(--paper-deep) 60%, var(--paper-deep) 100%); } .fold-line::after { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1px dashed var(--ink-hairline); } .fold-label { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 1; background: var(--paper); border: 1px solid var(--ink-hairline); padding: 6px 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; max-width: calc(100vw - 40px); overflow: hidden; text-overflow: ellipsis; } /* ============================================================ The fold scene — poster + stanza by default; JS pins and types the copy with scroll. Frame loading stays windowed. ============================================================ */ .scene { background: var(--ink); padding: 0; } .scene-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; } .scene-fallback, .scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .scene-canvas { display: none; } .scene-scrim { position: absolute; inset: auto 0 0 0; height: 68%; background: linear-gradient(to top, rgba(26, 23, 18, 0.84) 0%, rgba(26, 23, 18, 0.56) 45%, transparent 100%); } /* A soft darkening that follows the active line so the copy stays legible over any frame. It lives on a full-stage layer, so its radial falloff is never clipped — only its centre (--glow-y) and opacity move, both driven by JS. */ .scene-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(72% 30% at 50% var(--glow-y, 50%), rgba(14, 12, 9, 0.68) 0%, rgba(14, 12, 9, 0.44) 38%, rgba(14, 12, 9, 0) 72%); } /* The copy. By default (no-JS / reduced motion) it reads as a lower-third stanza over the poster; every beat holds its full wrapped height with an invisible sizer, so the typed overlay never shifts the box. */ .scene-copy { position: absolute; top: 56%; left: var(--pad-x); right: var(--pad-x); bottom: auto; text-align: left; } .scene-beat { position: relative; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.35rem, 3.4vw, 2.5rem); line-height: 1.22; letter-spacing: -0.015em; color: var(--paper-on-ink); max-width: 26ch; text-shadow: 0 1px 14px rgba(26, 23, 18, 0.6); } .scene-beat + .scene-beat { margin-top: 0.42em; } .beat-size { display: block; visibility: hidden; } .beat-type { position: absolute; inset: 0; } .scene-caret { display: inline-block; width: 0.05em; min-width: 3px; height: 0.72em; margin-left: 0.06em; background: var(--red-on-ink); transform: translateY(0.06em); } .scene-caret[hidden] { display: none; } .scene-label { display: none; } /* live mode: pinned just below the top bar; each line appears alone at its own station (top → middle → bottom), types, then fades before the next. JS drives per-scroll opacity, the caret, and the darkening's centre. */ html.js .scene-live { height: 240vh; } /* longer track (was 180): deliberate drag, denser frames */ html.js .scene-live .scene-pin { position: sticky; top: var(--topbar-h); height: calc(100svh - var(--topbar-h)); } html.js .scene-live .scene-canvas { display: block; } html.js .scene-live .scene-fallback.scene-hidden { visibility: hidden; } /* one line at a time — centred, enlarged, parked at its own station */ html.js .scene-live .scene-copy { inset: 0; left: 0; right: 0; top: 0; text-align: center; } html.js .scene-live .scene-beat { position: absolute; left: 50%; max-width: min(90vw, 20ch); margin: 0; font-size: clamp(1.9rem, 7.6vw, 3.4rem); line-height: 1.16; text-align: center; opacity: 0; /* JS sets per-scroll opacity */ } html.js .scene-live .scene-beat.beat-top { top: 16%; transform: translateX(-50%); } html.js .scene-live .scene-beat.beat-mid { top: 50%; transform: translate(-50%, -50%); } html.js .scene-live .scene-beat.beat-bottom { bottom: 16%; transform: translateX(-50%); } html.js .scene-live .scene-label { display: block; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-on-ink); white-space: nowrap; z-index: 2; } /* ============================================================ Work — the proof board ============================================================ */ .work { background: var(--paper-deep); padding-top: clamp(36px, 4.5vw, 64px); } .work-stamp { display: inline-block; position: relative; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--ink); color: var(--ink); } .stamp-live { background: var(--ink); color: var(--paper-on-ink); } .stamp-demo { border-style: dashed; } .stamp-client { border-style: solid; } /* ----- the lead showcase: Virtual Tax ----- */ .showcase { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 64px); align-items: center; padding-bottom: clamp(56px, 7vw, 96px); } @media (min-width: 821px) { .showcase-copy { border-left: 1px solid var(--ink-hairline); padding-left: clamp(24px, 3vw, 48px); } } .showcase-copy .work-stamp { margin-bottom: 16px; } .showcase-copy h3 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 600; letter-spacing: -0.018em; line-height: 1.04; margin-bottom: 12px; } .showcase-meta { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 20px; } .showcase-note { max-width: 44ch; margin-bottom: 14px; } .showcase-why { color: var(--ink-muted); font-size: 15.5px; max-width: 44ch; padding-left: 14px; border-left: 2px solid var(--red); margin-bottom: 24px; } /* Pending state — a truthful proof slate that quotes the live build. No fake pixels; the real site is one click away. */ .showcase-media { position: relative; min-width: 0; } /* Imported Virtual Tax device mockup (). It renders on a 1086x1448 canvas with transparent dead space above the monitor (271px) and below the phone (325px). Crop each to a third (keep 90 / 108) by clipping the surplus with negative margins — the mockup config/geometry is untouched. -180.7px/1086 = -16.64%, -216.7px/1086 = -19.95% (margins are width-relative). */ .showcase-media { overflow: hidden; } .showcase-media .vt-mockup { display: block; width: 100%; background: transparent; margin-top: -16.64%; margin-bottom: -19.95%; } .showcase-slate { position: relative; background: var(--ink); color: var(--paper-on-ink); padding: clamp(28px, 4.5vw, 64px) clamp(24px, 4vw, 56px); box-shadow: 0 1px 0 rgba(26,23,18,0.3), 0 22px 52px rgba(26,23,18,0.22); display: flex; flex-direction: column; gap: clamp(18px, 2.5vw, 28px); min-height: clamp(320px, 34vw, 480px); justify-content: center; } /* a folded corner — the sheet is real material */ .showcase-slate::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 clamp(22px, 3vw, 34px) clamp(22px, 3vw, 34px) 0; border-color: var(--paper-deep) var(--paper-deep) rgba(244, 240, 230, 0.14) rgba(244, 240, 230, 0.14); } .slate-flag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-on-ink); } .slate-quote { font-family: var(--font-display); font-style: italic; font-weight: 480; font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.16; letter-spacing: -0.015em; max-width: 20ch; } .slate-quote cite { display: block; margin-top: 16px; font-family: var(--font-mono); font-style: normal; font-size: 11px; font-weight: 400; letter-spacing: 0.08em; line-height: 1.7; text-transform: uppercase; color: var(--muted-on-ink); max-width: 44ch; } .slate-note { font-size: 14.5px; line-height: 1.6; color: var(--muted-on-ink); max-width: 46ch; padding-top: 16px; border-top: 1px solid rgba(244, 240, 230, 0.16); } .slate-link { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-on-ink); text-decoration: underline; text-underline-offset: 4px; transition: color 0.2s var(--ease-paper); } .slate-link:hover { color: var(--red-on-ink); } .slate-link:active { color: var(--muted-on-ink); } .slate-link:focus-visible { outline: 2px solid var(--red-on-ink); outline-offset: 3px; } /* Ready state — Codex flips data-assets="ready" once the generated device frames and local recordings exist (see research/fable-v2-asset-manifest.md). The video is composited INTO a photoreal device asset; nothing here draws hardware in CSS — the frame image ships from image generation. */ /* the slate stays for no-JS visitors even after assets land; only the script (which can actually start the recordings) swaps it out */ html.js .showcase-media[data-assets="ready"] .showcase-slate { display: none; } .device { display: none; } .showcase-media[data-assets="ready"] .device { display: block; margin: 0; } /* The device pair is one composed product shot, not a display with an accessory: the display carries the scene and the phone stands in front of its lower-right corner (phone ≈ 58% of the display's height, top edge near the display's midline). The stage reserves exactly the phone's true overhang — 36% of its width past the display's right bezel — and its forward drop — 22% of its width below the display's base — so the pair's bounding box IS the stage and the group reads centered as one object. */ .showcase-media[data-assets="ready"] .showcase-stage { position: relative; --phone-w: clamp(112px, 17.5%, 168px); padding: 8px calc(var(--phone-w) * 0.36) calc(var(--phone-w) * 0.22) 0; } /* one key light, upper left: both devices cast layered contact + ambient shadows down-right onto the same implied desk plane */ .device-mac { position: relative; width: 100%; filter: drop-shadow(0 2px 5px rgba(26, 23, 18, 0.10)) drop-shadow(10px 26px 44px rgba(26, 23, 18, 0.16)); } .device-shell { position: relative; display: block; transform-origin: 50% 100%; transition: transform 0.7s var(--ease-paper); } .device-shell > .device-frame { position: relative; z-index: 2; display: block; width: 100%; height: auto; pointer-events: none; } /* the recording sits behind the transparent screen cut of the frame asset; the quad is set by CSS variables recorded in the asset manifest */ .device-screen { position: absolute; z-index: 1; left: var(--screen-x, 0%); top: var(--screen-y, 0%); width: var(--screen-w, 100%); height: var(--screen-h, 100%); overflow: hidden; background: var(--ink); } .device-screen video, .device-screen img { display: block; width: 100%; height: 100%; object-fit: cover; } .device-phone { position: absolute; right: 0; bottom: 0; width: var(--phone-w, 150px); z-index: 3; filter: drop-shadow(0 2px 4px rgba(26, 23, 18, 0.14)) drop-shadow(14px 24px 34px rgba(26, 23, 18, 0.30)); } /* Showcase-film emphasis: the script mirrors the film's chapters (data-chapters on the stage) into data-focus. Emphasis is physical only — the focused device stands a step forward off the shared desk plane; the other simply rests. Both hardware frames and both screens stay fully opaque at all times. Absent chapters, nothing here applies — the stage stays calm. */ .showcase-stage[data-focus="desktop"] .device-mac .device-shell { transform: translateY(-4px) scale(1.008); } .showcase-stage[data-focus="phone"] .device-phone .device-shell { transform: translateY(-6px) scale(1.03); } /* condensed showcase copy: problem → three improvements → live link */ .showcase-lead { max-width: 44ch; margin-bottom: 12px; } .showcase-improvements { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; line-height: 1.5; color: var(--red-deep); margin-bottom: 18px; } /* a small, familiar media control inside the presentation — not a competing CTA */ .showcase-controls { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: flex; align-items: center; } .showcase-media[data-assets="pending"] .showcase-controls, html:not(.js) .showcase-controls { display: none; } .media-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: rgba(26, 23, 18, 0.6); border: 1px solid rgba(244, 240, 230, 0.55); color: var(--paper-on-ink); cursor: pointer; transition: background 0.2s var(--ease-paper), border-color 0.2s var(--ease-paper); } .media-toggle:hover { background: var(--ink); border-color: var(--ink); } .media-toggle:active { background: var(--red-deep); border-color: var(--red-deep); } .media-toggle:focus-visible { outline: 2px solid var(--red-on-ink); outline-offset: 3px; } .mt-ico { display: block; } .media-toggle[aria-pressed="false"] .mt-ico { /* play triangle */ width: 0; height: 0; border-left: 12px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; } .media-toggle[aria-pressed="true"] .mt-ico { /* pause bars */ width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; } /* pointer drift — restrained: the pair shifts like objects on a desk, the phone a step nearer the camera (JS lerps --mx/--my) */ @media (pointer: fine) and (min-width: 821px) { html.js .showcase-media[data-assets="ready"] .device-mac { transform: translate(calc(var(--mx, 0) * 4px), calc(var(--my, 0) * 3px)); } html.js .showcase-media[data-assets="ready"] .device-phone { transform: translate(calc(var(--mx, 0) * 8px), calc(var(--my, 0) * 5px)); } html.js .showcase-slate { transform: translate(calc(var(--mx, 0) * 4px), calc(var(--my, 0) * 3px)); } } /* ----- work by sector: one panel at a time, tabs are the tap controls ----- */ .sector-tabs { display: flex; gap: 8px; flex-wrap: wrap; border-top: 2px solid var(--ink); padding-top: 16px; margin-bottom: clamp(20px, 3vw, 28px); } .sector-tab { background: none; border: 1px solid var(--ink-hairline); color: var(--ink-muted); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 15px; min-height: 40px; cursor: pointer; transition: color 0.2s var(--ease-paper), border-color 0.2s var(--ease-paper), background 0.2s var(--ease-paper); } .sector-tab:hover { color: var(--ink); border-color: var(--ink); } .sector-tab[aria-pressed="true"] { color: var(--paper-on-ink); background: var(--ink); border-color: var(--ink); } .sector-tab:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } .sector-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 3vw, 30px); align-items: center; } .sector-panel + .sector-panel { margin-top: clamp(28px, 5vw, 44px); } html.js .sectors .sector-panel { margin-top: 0; } html.js .sectors .sector-panel:not(.is-active) { display: none; } .sector-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); color: var(--paper-on-ink); border: 1px solid var(--ink-hairline); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; padding: clamp(18px, 3vw, 28px); } .sector-frame.sf-wip { background: var(--paper-deep); color: var(--ink); } .sf-geo { position: absolute; top: -30%; right: -12%; width: 62%; aspect-ratio: 1; border: 1px solid rgba(244, 240, 230, 0.16); border-radius: 50%; pointer-events: none; } .sf-wip .sf-geo { border-color: var(--ink-faint); } .sf-name { position: relative; font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1; } .sf-status { position: relative; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-on-ink); } .sf-wip .sf-status { color: var(--ink-muted); } .sf-status.is-live { color: var(--red-on-ink); } .sector-stamp { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); } .sector-stamp.is-live { color: var(--ok); } .sector-info h3 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 600; letter-spacing: -0.015em; margin: 8px 0 10px; } .sector-info p { color: var(--ink-muted); max-width: 48ch; margin-bottom: 14px; } .sector-links { display: flex; gap: 22px; flex-wrap: wrap; } @media (min-width: 821px) { .sector-panel { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 56px); } } /* ----- supporting rows: the index that summons clippings ----- */ .work-index { list-style: none; border-top: 2px solid var(--ink); } .work-index li { border-bottom: 1px solid var(--ink-hairline); } .work-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 24px; gap: 8px 20px; align-items: center; padding: 24px 10px; margin: 0 -10px; text-decoration: none; transition: background-color 0.25s var(--ease-paper); } .work-row:hover { background-color: rgba(248, 245, 238, 0.65); } .work-row:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; background-color: rgba(248, 245, 238, 0.65); } .work-row:active { background-color: rgba(248, 245, 238, 0.9); } .work-index-no { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; color: var(--ink-muted); transition: color 0.25s var(--ease-paper); } .work-row:hover .work-index-no, .work-row:focus-visible .work-index-no { color: var(--red); } .work-row-body { min-width: 0; } .work-row-title-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .work-row-title-line h3 { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -0.012em; line-height: 1.1; } .work-row .work-stamp { font-size: 9.5px; padding: 3px 7px; } .work-row-note { font-size: 15px; color: var(--ink-muted); max-width: 52ch; margin-top: 6px; } .work-row-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; } .work-row .work-arrow { font-size: 18px; color: var(--ink); transition: transform 0.25s var(--ease-paper), color 0.25s var(--ease-paper); } .work-row:hover .work-arrow, .work-row:focus-visible .work-arrow { transform: translateX(6px); color: var(--red); } /* inline proof: always present without JS or fine pointers; the summoned clipping replaces it only when the follower can actually run */ .work-thumb { display: block; width: 100%; max-width: 520px; height: auto; margin-top: 14px; border: 1px solid var(--ink-hairline); background: var(--paper); } @media (pointer: fine) and (min-width: 821px) { html.js .work-thumb { display: none; } } .work-index-hint { display: none; } @media (pointer: fine) and (min-width: 821px) { html.js .work-index-hint { display: block; text-align: right; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin: 12px 2px 0; } } /* the clipping — a cursor-following capture in a paper frame */ .work-clip { position: fixed; top: 0; left: 0; z-index: 60; width: clamp(300px, 24vw, 430px); background: var(--paper-raise); padding: 9px 9px 0; box-shadow: 0 1px 0 rgba(26,23,18,0.28), 0 10px 24px rgba(26,23,18,0.18), 0 30px 70px rgba(26,23,18,0.32); opacity: 0; pointer-events: none; will-change: transform; transition: opacity 0.18s var(--ease-paper); } .work-clip.on { opacity: 1; } .work-clip img { display: block; width: 100%; height: auto; clip-path: inset(0 0 100% 0); transition: clip-path 0.5s var(--ease-paper); } .work-clip.on img { clip-path: inset(0 0 0 0); } .work-clip-cap { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); padding: 9px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (pointer: coarse), (max-width: 820px) { .work-clip { display: none; } } /* ============================================================ Services — three columns, plain names ============================================================ */ .service-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink-hairline); } .service-col { padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 48px); } .service-col + .service-col { border-left: 1px solid var(--ink-hairline); } .service-col:first-child { padding-left: 0; } .service-col:last-child { padding-right: 0; } .service-col h3 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.05; margin-bottom: 12px; } .service-col p { color: var(--ink-muted); } .service-no { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; color: var(--red); margin-bottom: 16px; } /* ============================================================ AI visibility ============================================================ */ /* Services as outcomes — one shared architectural cross-section highlights the layer for the selected outcome. All copy stays visible, so no-JS reads the three outcomes as a plain list and the stage defaults to the first. */ .outcomes { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4vw, 40px); align-items: start; } .outcomes-stage { min-width: 0; } .oc-cross { display: flex; flex-direction: column; gap: 8px; border-top: 2px solid var(--ink); padding-top: 12px; } .oc-floor { display: flex; align-items: center; min-height: clamp(58px, 12vw, 80px); padding: 0 16px; background: var(--paper-deep); border: 1px solid var(--ink-hairline); border-left: 3px solid transparent; transition: background 0.35s var(--ease-paper), border-color 0.35s var(--ease-paper), transform 0.35s var(--ease-paper); } .oc-floor-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); transition: color 0.35s var(--ease-paper); } .outcomes[data-active="trust"] .oc-floor[data-layer="trust"], .outcomes[data-active="found"] .oc-floor[data-layer="found"], .outcomes[data-active="care"] .oc-floor[data-layer="care"] { background: var(--paper-raise); border-left-color: var(--red); transform: translateX(3px); } .outcomes[data-active="trust"] .oc-floor[data-layer="trust"] .oc-floor-tag, .outcomes[data-active="found"] .oc-floor[data-layer="found"] .oc-floor-tag, .outcomes[data-active="care"] .oc-floor[data-layer="care"] .oc-floor-tag { color: var(--red-deep); } .outcome-list { list-style: none; display: flex; flex-direction: column; } .outcome-btn { width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--ink-hairline); padding: 18px 0; cursor: pointer; display: flex; flex-direction: column; gap: 6px; color: inherit; } .outcome-name { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.05; transition: color 0.2s var(--ease-paper); } .outcome-desc { color: var(--ink-muted); max-width: 46ch; } .outcome-btn[aria-pressed="true"] .outcome-name { color: var(--red-deep); } .outcome-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } @media (min-width: 821px) { .outcomes { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 72px); } } /* ---- AI visibility: a looping ad-beat stage (typed headlines, a live AI query, the engine cycle, and the ink "invisible" beat). Centered, theatrical. ---- */ .ai { display: block; background: var(--paper-deep); text-align: center; } .ai > .kicker { justify-content: center; } /* the standing question — always on; the brand keeps turning inside it */ .ai-headline { margin: clamp(20px, 3.4vh, 34px) auto 0; max-width: 21ch; font: 650 clamp(30px, 5.2vw, 62px)/1.06 var(--font-display); letter-spacing: -0.028em; color: var(--ink); } .ai-hl-brand { white-space: nowrap; } .ai-hl-swap { display: inline-flex; align-items: center; gap: 0.2em; margin-left: 0.26em; vertical-align: -0.06em; transition: opacity 0.36s var(--ease-paper), transform 0.36s var(--ease-paper); } .ai-hl-swap.is-roll { opacity: 0; transform: translateY(0.38em); } .ai-hl-logo { width: 0.84em; height: 0.84em; } .ai-hl-q { color: var(--red); } .ai-stage { position: relative; max-width: 760px; margin: clamp(18px, 3vh, 30px) auto 0; min-height: clamp(190px, 27vh, 260px); } .ai-beat { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s; } .ai-beat.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease, transform .4s ease; } .ai-head { margin: 0; max-width: 17ch; font: 620 clamp(24px, 4.6vw, 42px)/1.1 var(--font-display); letter-spacing: -0.022em; color: var(--ink); } .ai-red { color: var(--red); } .ai-caret { display: inline-block; width: 3px; height: .88em; margin-left: 5px; vertical-align: -0.06em; background: var(--red); animation: aiBlink 1.05s steps(2) infinite; } @keyframes aiBlink { 50% { opacity: 0; } } /* the AI chat input, typed live */ .ai-chat { display: flex; align-items: center; gap: 12px; width: min(560px, 94%); margin: 0 auto; padding: 14px 14px 14px 18px; background: #fff; border: 1px solid var(--ink-hairline); border-radius: 999px; box-shadow: 0 1px 2px rgba(26, 23, 18, 0.05), 0 20px 46px -24px rgba(26, 23, 18, 0.32); text-align: left; } .ai-chat-plus { flex: none; color: var(--ink-muted); font: 400 19px/1 var(--font-mono); } .ai-chat-q { flex: 1; min-width: 0; margin: 0; font: 400 clamp(14px, 2.4vw, 16.5px)/1.35 var(--font-mono); color: var(--ink); } .ai-chat-q .ai-caret { height: 1em; margin-left: 2px; } .ai-chat-send { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink-faint); color: #fff; transition: background-color .25s ease, transform .25s ease; } .ai-chat-send.is-live { background: var(--red); transform: scale(1.06); } /* the gut punch */ .ai-beat--invisible { background: var(--ink); border-radius: clamp(16px, 2vw, 22px); } .ai-inv { margin: 0; font: 620 clamp(24px, 4.6vw, 42px)/1.1 var(--font-display); letter-spacing: -0.022em; color: var(--paper-on-ink); } .ai-inv-word { transition: opacity 1.1s ease; } .ai-inv.is-gone .ai-inv-word { opacity: 0.14; } /* "invisible." fades into the ink */ .ai-ctarow { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: clamp(22px, 4vh, 36px); } .ai-cta-note { font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); } @media (prefers-reduced-motion: reduce) { .ai-caret { animation: none; } .ai-hl-swap { transition: none; } .ai-beat { transition: none; } } .ai-copy .kicker { margin-bottom: 14px; } .ai-copy h2 { margin-bottom: 24px; } .ai-copy p { color: var(--ink-muted); max-width: 52ch; margin-bottom: 16px; } .ai-copy .btn { margin-top: 16px; } .ai-figure { margin: 0; background: var(--paper-raise); border: 1px solid var(--ink-hairline); border-top: 2px solid var(--ink); } .ai-figure-head { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); padding: 12px 18px; border-bottom: 1px solid var(--ink-hairline); } .ai-rows { margin: 0; } .ai-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 13px 18px; border-bottom: 1px solid var(--ink-faint); } .ai-row dt { font-size: 15px; } .ai-row dd { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-muted); text-align: right; } .ai-row dd::before { content: "\2715\00a0\00a0"; /* ✕ */ color: var(--red); font-size: 11px; } .ai-verdict { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.2rem; padding: 16px 18px 4px; } .ai-figure-cap { font-family: var(--font-sans); font-style: italic; font-size: 14px; color: var(--ink-muted); padding: 8px 18px 16px; } /* AI section — analyzer-preview panel (client-language questions + status) */ .ai-scan-host { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink); padding: 13px 18px; border-bottom: 1px solid var(--ink-faint); } .ai-scan-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; } .ai-checks { list-style: none; margin: 0; } .ai-checks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 13px 18px; border-bottom: 1px solid var(--ink-faint); } .ai-check-q { font-size: 14.5px; line-height: 1.3; } .ai-check-s { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .ai-check-s.s-clear { color: var(--ok); } .ai-check-s.s-unclear { color: var(--red); } .ai-check-s.s-unavailable { color: var(--ink-muted); } /* ============================================================ Focus — one industry at a time ============================================================ */ .focus { border-bottom: 1px solid var(--ink-hairline); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .focus-copy .kicker { margin-bottom: 14px; } .focus-copy h2 { margin-bottom: 16px; } .focus-copy p { color: var(--ink-muted); max-width: 44ch; } .focus-stack { list-style: none; } .focus-item { border-top: 1px solid var(--ink-hairline); } .focus-item:last-child { border-bottom: 1px solid var(--ink-hairline); } .focus-item a, .focus-queued { display: grid; grid-template-columns: 56px 1fr auto 32px; align-items: baseline; gap: 16px; padding: 18px 8px; text-decoration: none; } .focus-queued { grid-template-columns: 56px 1fr auto; } .focus-queued .focus-name { color: var(--ink-muted); font-weight: 500; } .focus-no { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ink-muted); } .focus-live .focus-no { color: var(--red); } .focus-name { font-family: var(--font-serif); font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 600; letter-spacing: -0.01em; } .focus-status { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .focus-live .focus-status { color: var(--red); } .focus-live a { transition: background 0.25s var(--ease-paper), color 0.25s var(--ease-paper), padding-left 0.25s var(--ease-paper); } .focus-live a:hover, .focus-live a:focus-visible { background: var(--ink); color: var(--paper-on-ink); padding-left: 20px; } .focus-live a:hover .focus-status, .focus-live a:focus-visible .focus-status, .focus-live a:hover .focus-no, .focus-live a:focus-visible .focus-no { color: var(--red-on-ink); } .focus-live a:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; } .focus-live a:active { background: var(--red-deep); } .focus-live .work-arrow { font-family: var(--font-serif); font-size: 1.2rem; transform: translateX(-6px); opacity: 0; transition: transform 0.25s var(--ease-paper), opacity 0.25s var(--ease-paper); } .focus-live a:hover .work-arrow, .focus-live a:focus-visible .work-arrow { transform: translateX(0); opacity: 1; } /* ============================================================ Close — the page's most saturated moment ============================================================ */ /* ============================================================ Buying certainty — plain operational facts near the decision ============================================================ */ .certainty { background: var(--paper-deep); } .certainty .kicker { color: var(--red); } .certainty .section-head { margin-bottom: clamp(22px, 4vw, 36px); } .snap { max-width: 1080px; margin: 0 auto; display: grid; gap: 12px; } .snap-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 22px; background: radial-gradient(130% 170% at 12% 0%, #F4864E 0%, #DA4A20 48%, #BB3A1A 100%); box-shadow: 0 18px 40px -18px rgba(218, 74, 32, 0.55); color: #fff; padding: clamp(18px, 4vw, 30px) clamp(4px, 1.5vw, 16px); } .snap-band-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 0 clamp(8px, 2vw, 22px); text-align: center; } .snap-band-cell + .snap-band-cell { border-left: 1px solid rgba(255, 255, 255, 0.3); } .snap-band-cell p { margin: 0; } .snap-band-ico { display: grid; place-items: center; width: clamp(40px, 9.6vw, 56px); aspect-ratio: 1; border: 1.5px solid rgba(255, 255, 255, 0.85); border-radius: 50%; margin-bottom: 4px; } .snap-band-ico svg { width: 48%; height: 48%; } .snap-band-k { font-family: var(--font-mono); font-size: clamp(8px, 2.3vw, 10.5px); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); } .snap-band-v { font-family: var(--font-serif); font-optical-sizing: auto; font-weight: 550; font-size: clamp(1.55rem, 6.6vw, 2.3rem); line-height: 1.05; letter-spacing: -0.01em; } .snap-band-v-text { font-size: clamp(1.05rem, 4.4vw, 1.55rem); line-height: 1.2; } .snap-band-s { font-family: var(--font-serif); font-size: clamp(0.85rem, 3.4vw, 1.05rem); color: rgba(255, 255, 255, 0.92); } .snap-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .snap-tile { min-width: 0; background: #FDFBF6; border: 1px solid var(--ink-hairline); border-radius: 16px; padding: 13px 14px 14px; } .snap-tiles li:last-child:nth-child(odd) { grid-column: 1 / -1; } .snap-ico { flex: none; display: grid; place-items: center; width: 30px; aspect-ratio: 1; border-radius: 50%; background: rgba(218, 74, 32, 0.09); color: var(--red-deep); } .snap-ico svg { width: 52%; height: 52%; } .snap-note .snap-ico { width: 38px; } .snap-ico-ink { background: rgba(26, 23, 18, 0.06); color: var(--ink); } .snap-k { display: flex; align-items: center; gap: 9px; margin: 0 0 9px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-muted); } .snap-v { margin: 0; font-family: var(--font-serif); font-optical-sizing: auto; font-weight: 500; font-size: 1.05rem; line-height: 1.3; color: var(--ink); } .snap-note { display: flex; align-items: flex-start; gap: 12px; background: #FDFBF6; border: 1px solid var(--ink-hairline); border-radius: 16px; padding: 14px; } .snap-note p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); } .snap-note a { color: var(--red-deep); text-underline-offset: 2px; } @media (min-width: 880px) { .snap-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .snap-tiles li:last-child:nth-child(odd) { grid-column: span 2; } } /* embedded analyzer field in the closing (dark) section */ .close-analyze { width: 100%; max-width: 440px; margin: 2px auto 0; } .close-field { display: flex; flex-direction: column; gap: 10px; } .close-url { width: 100%; padding: 14px 16px; font-family: var(--font-sans); font-size: 16px; /* ≥16px avoids iOS focus-zoom */ line-height: 1.2; color: var(--paper-on-ink); background: rgba(244, 240, 230, 0.06); border: 1px solid var(--muted-on-ink); border-radius: 0; } .close-url::placeholder { color: var(--muted-on-ink); } .close-url:focus-visible { outline: 2px solid var(--red-on-ink); outline-offset: 2px; border-color: var(--red-on-ink); } .close-field .btn { width: 100%; } @media (min-width: 520px) { .close-field { flex-direction: row; } .close-field .btn { width: auto; white-space: nowrap; } } .close { background: var(--ink); color: var(--paper-on-ink); text-align: center; } .close-notice { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; } .close .kicker { color: var(--red-on-ink); } .close .kicker::before { background: var(--red-on-ink); } .close h2 { color: var(--paper-on-ink); } .close p { color: var(--muted-on-ink); max-width: 52ch; } .close .btn-primary { margin-top: 8px; } .close-alt { font-size: 14.5px; } .close-alt a { color: var(--paper-on-ink); text-underline-offset: 3px; transition: color 0.2s var(--ease-paper); } .close-alt a:hover { color: var(--red-on-ink); } .close-alt a:active { color: var(--muted-on-ink); } .close-alt a:focus-visible { outline: 2px solid var(--red-on-ink); outline-offset: 3px; } /* ============================================================ The studio — verifiable trust block ============================================================ */ .studio { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); } .studio-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; } .studio-copy .kicker { margin-bottom: 14px; } .studio-copy h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 14px; } .studio-copy p { color: var(--ink-muted); max-width: 44ch; } .studio-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin: 0; } .studio-facts > div { border-top: 1px solid var(--ink-hairline); padding-top: 16px; } .studio-facts dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; } .studio-facts dd { font-size: 15px; line-height: 1.55; } .studio-facts dd a { color: var(--ink); text-underline-offset: 3px; transition: color 0.2s var(--ease-paper); } .studio-facts dd a:hover { color: var(--red); } .studio-facts dd a:active { color: var(--red-deep); } .studio-facts dd a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } .studio-facts .fact-note { display: block; color: var(--ink-muted); font-size: 13.5px; margin-top: 6px; } /* ============================================================ Footer ============================================================ */ /* ============================================================ PRE-FOOTER CTA CARD + THE LEDGER FOOTER One design at every width: centered lockup, sectioned link ledger with row rules and arrows, quiet colophon. ============================================================ */ .foot-cta { padding: clamp(20px, 4vw, 36px) var(--pad-x) 0; } .foot-cta-card { max-width: 680px; margin: 0 auto; padding: clamp(36px, 9vw, 56px) clamp(22px, 6vw, 48px); background: #FDFBF6; border: 1px solid var(--ink-hairline); border-radius: 28px; text-align: center; } .foot-cta-title { margin: 0 0 14px; font-family: var(--font-serif); font-optical-sizing: auto; font-weight: 600; font-size: clamp(2.1rem, 9.5vw, 2.9rem); line-height: 1.06; letter-spacing: -0.015em; color: var(--ink); } .foot-cta-sub { margin: 0 auto 26px; max-width: 34ch; font-family: var(--font-serif); font-size: clamp(1.05rem, 4.6vw, 1.2rem); line-height: 1.45; color: var(--ink-muted); } .foot-cta-btn { --cta-o1: #F4864E; --cta-o2: #DA4A20; --cta-o3: #BB3A1A; display: inline-flex; align-items: center; justify-content: center; gap: 14px; width: min(100%, 420px); min-height: 58px; padding: 0 26px; border-radius: 999px; background: linear-gradient(135deg, var(--cta-o1), var(--cta-o2) 55%, var(--cta-o3)); box-shadow: 0 10px 26px -12px rgba(218, 74, 32, 0.55); color: #fff; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; } .foot-cta-arrow { font-family: var(--font-sans); font-size: 1.15rem; letter-spacing: 0; } .foot-cta-btn:hover { filter: brightness(1.06); } .foot-cta-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } .footer { margin-top: clamp(18px, 4vw, 28px); padding: clamp(20px, 5vw, 34px) var(--pad-x) clamp(18px, 4vw, 28px); border-top: 1px solid var(--ink-hairline); } .footer-brand { display: flex; justify-content: center; margin: 0; } .footer-nav2 { max-width: 560px; margin: 0 auto; } .footer-sec { margin: 16px 0 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; text-align: center; color: var(--ink-muted); } .footer-list { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--ink-hairline); } .footer-list li { border-bottom: 1px solid var(--ink-hairline); } .footer-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 6px; font-family: var(--font-serif); font-size: 1.16rem; color: var(--ink); text-decoration: none; } .footer-arrow { font-family: var(--font-sans); font-weight: 300; font-size: 1.05rem; color: var(--ink); } .footer-list a:hover, .footer-list a:hover .footer-arrow { color: var(--red); } .footer-list a[aria-current="page"], .footer-list a[aria-current="page"] .footer-arrow { color: var(--red-deep); } .footer-list a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .footer-addr { margin: 22px 0 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-align: center; color: var(--ink-muted); } .footer-copy { margin: 8px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; color: var(--ink-muted); } .footer-tag { margin: 6px 0 0; font-family: var(--font-serif); font-size: 0.98rem; letter-spacing: 0.05em; text-align: center; color: var(--ink-muted); } /* ============================================================ Reveals (JS-gated; visible is the default state) ============================================================ */ html.js [data-reveal] { opacity: 0; transform: translateY(14px); } html.js [data-reveal].in { opacity: 1; transform: none; transition: opacity 0.65s var(--ease-paper), transform 0.65s var(--ease-paper); } html.js .service-cols .service-col { opacity: 0; transform: translateY(12px); } html.js .service-cols.in .service-col { opacity: 1; transform: none; transition: opacity 0.6s var(--ease-paper), transform 0.6s var(--ease-paper); } html.js .service-cols.in .service-col:nth-child(2) { transition-delay: 0.12s; } html.js .service-cols.in .service-col:nth-child(3) { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { html.js .service-cols .service-col { opacity: 1; transform: none; transition: none; } } /* ============================================================ Reduced motion — finished words, parked paper, calm lists ============================================================ */ @media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1; transform: none; transition: none; } html.js .hero-home .eyebrow, html.js .hero-home .hero-title, html.js .hero-home .hero-sub, html.js .hero-home .hero-actions, html.js .hero-home .friction, html.js .hero-home .hero-architecture { animation: none; opacity: 1; transform: none; } .hero-depth-stage, .hero-depth-layer, .hero-geometry { transition: none; will-change: auto; } .caret, .scene-caret { display: none; } .caret.is-blinking { animation: none; } html.js .m-menu { opacity: 1; transform: none; transition: none; } html.js .m-menu-nav li { opacity: 1; transform: none; transition: none; } .btn, .topbar, .topbar-cta, .text-link, .slate-link, .media-toggle, .menu-btn-line, .menu-close-x::before, .menu-close-x::after, .work-row, .work-index-no, .work-row .work-arrow, .focus-live a, .masthead-nav a, .m-menu-nav ol a { transition: none; } .work-row:hover .work-arrow, .work-row:focus-visible .work-arrow { transform: none; } .btn-primary:hover { transform: none; } /* paper stays parked: no drift, no follow, no sweep — proof and links remain */ html.js .showcase-media[data-assets="ready"] .device-mac, html.js .showcase-media[data-assets="ready"] .device-phone, html.js .showcase-slate { transform: none; } /* film emphasis holds still too: no lifts, no steps forward */ .device-shell { transition: none; } .showcase-stage[data-focus="phone"] .device-phone .device-shell { transform: none; } .showcase-stage[data-focus="desktop"] .device-mac .device-shell { transform: none; } .work-clip { transition: none; } .work-clip img { clip-path: none; transition: none; } } /* ============================================================ Our Work / Industries — tabbed industry showcase ============================================================ */ .industries-head .kicker { color: var(--red); } .industries-head h2 { font-family: var(--font-display); font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.04; max-width: 17ch; } .industries-head .section-sub { margin-top: 16px; max-width: 52ch; color: var(--ink-muted); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.5; } /* ---- Tabs ---- */ .ind-tabs { position: relative; display: flex; /* wrap only under extreme text zoom at narrow widths (reflow contract); at normal sizes the three pills always fit one row */ flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px; padding: 6px; background: #ffffff; border: 1px solid var(--ink-hairline); border-radius: 999px; margin-bottom: clamp(20px, 3vw, 30px); } /* The pill's left + width are driven by JS to hug the active (content-width) tab; scaleX/scaleY carry the transient liquid squash-stretch. */ .ind-tabs-blob { position: absolute; top: 6px; left: 0; width: 10px; height: calc(100% - 12px); background: var(--ink); border-radius: 999px; z-index: 0; transform-origin: center center; will-change: transform, width; box-shadow: 0 8px 22px rgba(26, 23, 18, 0.26); } .ind-tab { position: relative; z-index: 1; flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px clamp(18px, 2.2vw, 32px); background: none; border: 0; border-radius: 999px; color: var(--ink); font-family: var(--font-mono); font-size: clamp(12px, 1.05vw, 13.5px); letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.3s ease; } .ind-tab-ico { width: 20px; height: 20px; flex: none; transition: color 0.3s ease; } .ind-tab-label { display: inline-block; text-align: left; line-height: 1.14; } .ind-tab.is-active { color: var(--paper-on-ink); } .ind-tab.is-active .ind-tab-ico { color: var(--red-on-ink, #ff6a45); } /* ---- Panel (off-white card, lifted above the paper page) ---- */ .ind-panel { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr); align-items: center; gap: clamp(20px, 3vw, 44px); padding: clamp(26px, 3.2vw, 52px); background: #ffffff; color: var(--ink); border: 1px solid var(--ink-hairline, rgba(26, 23, 18, 0.08)); border-radius: clamp(18px, 1.8vw, 24px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 30px 60px -34px rgba(26, 23, 18, 0.3), 0 10px 26px -16px rgba(26, 23, 18, 0.18); overflow: hidden; } .ind-copy { grid-column: 1; grid-row: 1; min-width: 0; } .ind-media { grid-column: 2; grid-row: 1; position: relative; min-width: 0; } /* overflow visible so the device drop-shadow isn't clipped */ /* Shadow beneath the monitor + phone. A drop-shadow follows BOTH silhouettes (not a single ellipse), and because .ind-media is overflow:visible it is never clipped by the media/video container. */ .vt-scaler { position: relative; z-index: 1; transform-origin: 50% 58%; transform: scale(0.82); filter: drop-shadow(0 22px 24px rgba(26, 23, 18, 0.28)); } /* --- 3D coverflow deck: the copy carousel + the parallax-reactive device --- */ /* CRITICAL: .ind-deck must stay clean (no overflow/filter/opacity/clip/mask) or preserve-3d flattens and the coverflow collapses. Blur/opacity live on the cards. */ .ind-deck { display: grid; perspective: 1200px; transform-style: preserve-3d; } .ind-card { grid-area: 1 / 1; transform-style: preserve-3d; backface-visibility: hidden; transform-origin: 50% 50%; } .ind-deck.is-dragging { user-select: none; } .ind-deck.is-dragging .ind-card { will-change: transform, opacity, filter; } .ind-media { perspective: 1400px; } /* perspective only — no preserve-3d, so the flat ground shadow stays painted behind the receding device */ .ind-device-parallax { position: relative; z-index: 1; transform-style: preserve-3d; will-change: transform; } @media (max-width: 720px) { .ind-deck { perspective: 900px; } } /* keep vertical page scroll + pinch-zoom on touch; horizontal is the carousel's */ .ind-panel { touch-action: pan-y pinch-zoom; } @media (prefers-reduced-motion: reduce) { .ind-device-parallax { transform: none !important; } } .ind-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-on-ink, #ff6a45); } .ind-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .ind-name { font-family: var(--font-display); font-size: clamp(1.9rem, 3.1vw, 2.9rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.01em; margin-bottom: 16px; } .ind-desc { max-width: 34ch; color: color-mix(in srgb, var(--ink) 72%, transparent); font-size: clamp(14.5px, 1.3vw, 16px); line-height: 1.55; } .ind-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 24px; } .ind-stat { display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; background: rgba(26, 23, 18, 0.04); border: 1px solid rgba(26, 23, 18, 0.1); border-radius: 12px; min-width: 0; } .ind-stat-val { font-family: var(--font-display); font-size: clamp(17px, 1.7vw, 21px); font-weight: 600; color: var(--red); } .ind-stat-label { font-size: 11px; letter-spacing: 0.01em; color: color-mix(in srgb, var(--ink) 58%, transparent); } .ind-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding-bottom: 3px; border-bottom: 1px solid color-mix(in srgb, var(--red) 45%, transparent); color: var(--red); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: gap 0.2s ease; } .ind-link:hover { gap: 12px; } /* mockup inside the dark card — crop the transparent surround (desktop) */ .ind-media .vt-mockup { display: block; width: 100%; background: transparent; margin-top: -13%; margin-bottom: -16%; } /* Mobile: an inset dark CARD (rounded + shadow), mockup spanning the card width on top, copy beneath. */ @media (max-width: 720px) { .ind-panel { grid-template-columns: 1fr; gap: 0; padding: 0; border-radius: clamp(20px, 5vw, 26px); } .ind-media { grid-column: 1; grid-row: 1; margin-bottom: 14px; } /* room for the device shadow to land before the copy */ .ind-copy { grid-column: 1; grid-row: 2; padding: clamp(20px, 5.5vw, 30px) clamp(20px, 5.5vw, 28px) clamp(26px, 7vw, 34px); } /* device silhouette fills ~94% of the card width with tight, even margins */ .ind-media .vt-mockup { width: 107.9%; margin-left: -3.03%; margin-top: -23.78%; margin-bottom: -29.02%; } /* Phone tabs: spread end-to-end so the first/last tab sit flush against the bar's inner edge — the end pills then nest with the SAME gap as top/bottom (uniform, concentric radii). Shrink the content; clip the bar so the pill's squash can never spill past the holding area. */ .ind-tabs { justify-content: space-between; gap: 7px; overflow: hidden; } .ind-tab { padding: 10px 11px; gap: 6px; font-size: 11.5px; } .ind-tab-ico { width: 16px; height: 16px; } .vt-scaler { transform: scale(0.94); filter: drop-shadow(0 14px 16px rgba(26, 23, 18, 0.26)); } } @media (max-width: 400px) { .ind-tabs { gap: 5px; } .ind-tab { padding: 9px 9px; gap: 5px; font-size: 11px; letter-spacing: 0.01em; } .ind-tab-ico { width: 15px; height: 15px; } } /* ============================================================ OTHER WORK — "The Broadsheet Reel" (flat editorial swipe carousel) ============================================================ */ .otherwork { position: relative; padding: clamp(56px, 8vh, 88px) 0; overflow: clip; --ow-wash: transparent; } .otherwork::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ow-wash); transition: background-color .18s linear; pointer-events: none; } .otherwork .section-head { padding-inline: var(--pad-x); } .ow-stage { position: relative; isolation: isolate; margin-top: clamp(20px, 4vh, 36px); } .ow-spine { position: absolute; z-index: 0; left: calc(var(--pad-x) - 6px); top: 0; writing-mode: vertical-rl; font: 500 11px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); opacity: .7; pointer-events: none; } .ow-viewport { position: relative; z-index: 1; overflow: clip; padding-left: var(--pad-x); touch-action: pan-y; -webkit-tap-highlight-color: transparent; cursor: grab; } .ow-viewport:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; } .ow-viewport.is-dragging { cursor: grabbing; } .ow-rail { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; will-change: transform; } .ow-card { flex: 0 0 calc(100vw - var(--pad-x) - 44px); max-width: 420px; opacity: calc(1 - var(--away, 0) * .45); transition: opacity .18s linear; } .ow-card[data-brand="apex"] { --bp: #F1ECDE; --bi: #1C2A3A; --ba: #264653; } .ow-card[data-brand="joshua"] { --bp: #211E1A; --bi: #F4F0E6; --ba: #C56A43; } .ow-card[data-brand="sp"] { --bp: #17130F; --bi: #EFE7D8; --ba: #C6A05A; } /* The plate is a MOUNTED PRINT: a brand-paper mat around the shot, an edition number printed on the mat above it, and a quiet caption (the live URL) below — a gallery object, not a browser widget. Layered ink shadows lift it off the page; the active plate sits proud, neighbours settle back slightly. */ .ow-plate { display: block; position: relative; background: var(--bp); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 12px; padding: 12px 12px 0; text-decoration: none; transform: translateY(calc(var(--away, 0) * -6px)) scale(calc(1 - var(--away, 0) * 0.03)); transition: transform .18s linear; box-shadow: 0 1px 2px rgba(26, 23, 18, 0.06), 0 14px 28px -18px rgba(26, 23, 18, 0.30), 0 38px 72px -30px rgba(26, 23, 18, 0.38); } .ow-plate:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } .ow-plateno { display: block; font: 600 10px/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ba); padding: 2px 2px 10px; } .ow-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 2px 12px; } .ow-url { font: 500 10.5px/1 var(--font-mono); letter-spacing: .04em; color: var(--bi); opacity: .75; } .ow-arrow { font: 500 11px/1 var(--font-mono); color: var(--ba); } .ow-stagewin { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--bi) 18%, transparent); background: color-mix(in srgb, var(--bp) 92%, var(--bi) 8%); } .ow-skel { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; color: var(--ba); } .ow-skel-nav { height: 1px; background: currentColor; opacity: .55; } .ow-skel-word { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 8vw, 40px); line-height: 1; color: var(--bi); } .ow-skel-ital { font-style: italic; } .ow-skel-caps { letter-spacing: .28em; text-transform: uppercase; font-weight: 500; } .ow-skel-line { height: 1px; background: currentColor; opacity: .4; } .ow-skel-line.short { width: 52%; } /* Shot stack: real screenshots cycle inside the plate (crossfade + slow Ken Burns push-in). The stack wrapper carries the drag parallax so the two transforms never fight. Skeleton stays beneath as the loading/failure state. */ .ow-shotstack { position: absolute; inset: 0; z-index: 1; display: block; will-change: transform; } .ow-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .75s ease; } .ow-shot.is-on { opacity: 1; animation: owKen 3.8s ease-out forwards; } @keyframes owKen { from { transform: scale(1.015); } to { transform: scale(1.085); } } @media (prefers-reduced-motion: reduce) { .ow-shot { transition: none; animation: none !important; } } .ow-meta { padding: 16px 2px 0; } .ow-kicker { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin: 0; } .ow-title { font: 600 22px/1.12 var(--font-display); color: var(--ink); margin: .5em 0 .3em; } .ow-note { font: 400 14px/1.45 var(--font-sans); color: var(--ink-muted); max-width: 30ch; margin: 0; } .ow-tags { margin: 12px 0 0; font: 500 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--ink-faint); } .ow-foot { display: flex; align-items: center; gap: 12px; margin: clamp(20px, 4vh, 30px) var(--pad-x) 0; } .ow-rule { display: flex; flex: 1; gap: 6px; } .ow-seg { flex: 1; height: 1px; background: var(--ink-hairline); position: relative; overflow: hidden; } .ow-seg::after { content: ""; position: absolute; inset: 0; background: var(--red); transform: scaleX(var(--seg, 0)); transform-origin: left; } .ow-dots { display: flex; gap: 8px; } .ow-dot { width: 8px; height: 8px; padding: 0; border: 1px solid var(--ink-hairline); border-radius: 50%; background: transparent; cursor: pointer; } .ow-dot[aria-selected="true"] { background: var(--red); border-color: var(--red); } .ow-dot:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } .ow-counter { font: 600 12px/1 var(--font-mono); color: var(--ink); margin: 0; } .ow-counter b { color: var(--red); } /* Native scroll-snap fallback — identical DOM, no custom physics */ .otherwork.is-native .ow-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .otherwork.is-native .ow-viewport::-webkit-scrollbar { display: none; } .otherwork.is-native .ow-rail { transform: none !important; } .otherwork.is-native .ow-card { scroll-snap-align: center; scroll-snap-stop: always; opacity: 1; } .otherwork.is-native .ow-plate { transform: none; } @media (prefers-reduced-motion: reduce) { .ow-card, .ow-plate, .ow-shot, .otherwork::before { transition: none; } .ow-card { opacity: 1; } } /* ============================================================ TESTIMONIALS — infinite marquee of client words ============================================================ */ .wall { position: relative; padding-top: clamp(40px, 6vw, 72px); overflow: clip; } .wall-mark { position: absolute; top: -0.12em; right: -0.04em; z-index: 0; font: 600 clamp(220px, 42vw, 420px)/1 var(--font-display); color: color-mix(in srgb, var(--red) 9%, transparent); pointer-events: none; user-select: none; } .wall .section-head { position: relative; z-index: 1; } .wall-avg { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font: 500 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); } .wall-avg-stars::before { content: "★★★★★"; font: 13px/1 var(--font-mono); letter-spacing: 2px; color: var(--red); } /* Two counter-scrolling rows; full-bleed past the section gutters, edge-faded. */ .wall-rows { position: relative; z-index: 1; display: grid; gap: 14px; margin: clamp(22px, 4vh, 36px) calc(-1 * var(--pad-x)) 0; } .wm-row { overflow: hidden; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .wm-track { display: flex; width: max-content; will-change: transform; animation: wmScroll var(--dur, 60s) linear infinite; } .wm-row[data-dir="rev"] .wm-track { animation-direction: reverse; } .wm-row.is-paused .wm-track, .wm-row:hover .wm-track { animation-play-state: paused; } .wm-set { display: flex; gap: 14px; padding-right: 14px; } @keyframes wmScroll { to { transform: translate3d(-50%, 0, 0); } } /* alternating tilt gives the strip a pinned-notes liveliness */ .wm-set .tm:nth-child(odd) { transform: rotate(0.45deg); } .wm-set .tm:nth-child(even) { transform: rotate(-0.45deg); } /* Card — company first, then stars, quote, and the person who said it. */ .tm { width: min(300px, 78vw); flex: none; break-inside: avoid; margin: 0; padding: 18px 20px 16px; background: var(--paper-raise); border: 1px solid var(--ink-hairline); border-radius: 14px; box-shadow: 0 10px 26px -18px rgba(26, 23, 18, 0.35); } .tm-co-row { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--ink-faint); } .tm-co-name { font: 600 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); } .tm-logo { width: 20px; height: 20px; flex: none; border-radius: 6px; display: grid; place-items: center; background: var(--lc, #5A5344); color: #fff; font: 600 9.5px/1 var(--font-mono); } .tm-logo[data-shape="ci"] { border-radius: 50%; } .tm-logo::after { content: attr(data-logo); } .tm-stars { --r: 5; position: relative; display: inline-block; margin-top: 12px; font: 13px/1 var(--font-mono); letter-spacing: 2px; } .tm-stars::before { content: "★★★★★"; color: var(--ink-faint); } .tm-stars::after { content: "★★★★★"; color: var(--red); position: absolute; inset: 0; width: calc(var(--r) / 5 * 100%); overflow: hidden; white-space: nowrap; } .tm-quote { margin: 10px 0 0; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.5; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; } .tm-by { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ink-faint); } .tm-face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--ink-hairline); } .tm-name { font: 600 14px/1.1 var(--font-display); color: var(--ink); } /* Fallback grid: visible masonry without JS / with reduced motion; once the marquee builds, it becomes the visually-hidden accessible source. */ .wall-grid { columns: 3 300px; column-gap: clamp(16px, 2vw, 26px); margin-top: clamp(24px, 4vh, 40px); } .wall-grid .tm { width: auto; margin-bottom: clamp(16px, 2vw, 26px); } .wall-grid.is-src { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; } @media (max-width: 900px) { .wall-grid { columns: 2 260px; } } @media (max-width: 560px) { .wall-grid { columns: 1; } } @media (prefers-reduced-motion: reduce) { .wm-track { animation: none; } .wall-rows { display: none; } /* the static grid remains the experience */ } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1080px) { .showcase { grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; } .showcase-copy { border-left: none; padding-left: 0; } } /* Phone: enlarge the Virtual Tax mockup toward the screen edges and crop the transparent surround tight. The device silhouette occupies x 60.5–1006.9, y 271.3–1124 of the 1086x1448 canvas. We full-bleed the media box to 100vw and map that silhouette + ~30px canvas padding onto it, so the monitor+phone span ~94% of the viewport with a small even side margin and minimal top/bottom dead space. width = 1086/1006.4 = 107.9%; the negative margins (all % of the 100vw media box) slide the oversized canvas so the padded silhouette fills it, and .showcase-media's overflow:hidden clips the surplus. */ @media (max-width: 640px) { .showcase-media { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .showcase-media .vt-mockup { width: 107.9%; margin-left: -3.03%; margin-top: -23.78%; margin-bottom: -29.02%; } } @media (max-width: 820px) { .ai { grid-template-columns: minmax(0, 1fr); } .ai-copy, .ai-figure { min-width: 0; } .service-cols { grid-template-columns: 1fr; border-top-width: 1px; } .service-col { padding-left: 0; padding-right: 0; } .service-col + .service-col { border-left: none; border-top: 1px solid var(--ink-hairline); } .focus { grid-template-columns: minmax(0, 1fr); gap: 28px; } .focus-item a, .focus-queued { grid-template-columns: 44px 1fr auto; } .focus-live .work-arrow { display: none; } .work-row { grid-template-columns: 36px minmax(0, 1fr) 24px; padding: 20px 6px; margin: 0 -6px; align-items: start; } .work-row .work-arrow { grid-row: 1; grid-column: 3; } .work-row-meta { grid-row: 2; grid-column: 2; margin-top: 2px; } .studio-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .studio-facts { grid-template-columns: minmax(0, 1fr); gap: 20px; } } /* The topbar CTA never hides: at narrow widths it compacts instead. The gradient, bolt and glow always stay; only the circled arrow drops below 400px so the bar stays one 64px row alongside the wordmark and menu. */ @media (max-width: 480px) { .topbar { gap: 10px; } .topbar-right { gap: 7px; } .topbar-cta { font-size: 10px; letter-spacing: 0.04em; gap: 6px; padding: 0 6px 0 12px; } .cta-bolt svg { width: 13px; height: 13px; } .cta-go svg { width: 21px; height: 21px; } } @media (max-width: 374px) { .brand { font-size: 1.2rem; } .topbar-cta .cta-go { display: none; } /* only the tightest phones drop the arrow */ .topbar-cta { font-size: 10px; letter-spacing: 0.03em; gap: 6px; padding: 0 12px; } .cta-bolt svg { width: 12px; height: 12px; } .menu-btn { padding-left: 6px; } } @media (min-width: 641px) and (max-width: 900px) { .hero-copy { width: min(100%, 760px); } .hero-architecture { right: -8vw; width: 60vw; opacity: 0.92; } .hero-depth-stage { inset: 16% -5% -5% 0; } .hero-depth-rear { width: 61%; } .hero-depth-mid { right: 25%; width: 45%; } .hero-depth-front { right: -42%; width: 122%; } } @media (max-width: 640px) { body { font-size: 16px; } section { padding-top: 80px; padding-bottom: 80px; } /* Tighten the vertical rhythm around the work + snapshot band: the 80px default left a cavernous gap between the industries card and the snapshot heading, and too much air above the industries heading. */ .ai { padding-bottom: 44px; } .work { padding-top: 24px; padding-bottom: 30px; } .certainty { padding-top: 34px; } .hero-home { min-height: max(720px, calc(100svh - var(--topbar-h))); padding-top: 36px; padding-bottom: 42px; } .hero-copy { width: 100%; } /* the lower bound is viewport-capped so 200% root-text zoom cannot push the fixed headline words past a 320px viewport (reflow contract) */ .hero-title { font-size: clamp(min(2.15rem, 10.5vw), 10vw, 3rem); } .hero-sub { max-width: 31ch; } .hero-actions { max-width: 310px; } .hero-home .friction { max-width: 22ch; } .hero-architecture { /* Full height, but a DEFINITE one (not top:0/bottom:0, which iOS Safari collapses against the min-height hero and dropped the blocks to the top). Pinned to the bottom so the blocks sit at the hero's base while the faint drafting geometry rides at the top as before. Height mirrors the hero. */ top: auto; bottom: 0; left: auto; right: 0; height: max(720px, calc(100svh - var(--topbar-h))); width: 100%; min-width: 0; max-width: none; } /* The drafting grid is the full-hero backdrop on phones — it fills the whole section behind the copy and the maquette, instead of sitting as a small cluster in the top-right corner. */ .hero-geometry { inset: 0; top: 0; width: auto; height: auto; } .hero-geo-circle { top: 8%; left: 5%; width: clamp(150px, 52vw, 260px); } .hero-geo-grid { top: 5%; right: 0; width: 66%; height: 46%; background-size: 7px 7px; } /* the maquette planes live in a fixed bottom band, tall enough for the tallest plane so iOS never clips their tops; the geometry above stays independent */ .hero-depth-stage { inset: auto 0 0 0; height: 360px; } .hero-depth-rear { right: 0; bottom: 0; width: 45%; filter: drop-shadow(6px 14px 16px rgba(26, 23, 18, 0.08)); } .hero-depth-mid { right: 0; bottom: 7%; width: 35%; filter: drop-shadow(7px 16px 17px rgba(26, 23, 18, 0.11)); } .hero-depth-front { right: 0; bottom: -2%; width: 92%; filter: drop-shadow(9px 17px 19px rgba(26, 23, 18, 0.13)); } .fold-label { font-size: 9.5px; letter-spacing: 0.12em; } .btn { padding: 14px 22px; } .ai-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } .ai-row dd { text-align: left; } .scene-copy { top: 52%; } .scene-beat { font-size: clamp(1.15rem, 5.6vw, 1.5rem); max-width: 24ch; } /* One product shot on narrow screens too. The display keeps nearly the full column; the phone is smaller (25% of the stage, ≈ 81% of the display's height) and tucks OVER the display's lower-right corner — top edge a third of the way down the display, base dropping 15% of the phone's own height past the display's base, right bezel clearing the display's by 12% of the phone's width. The stage reserves only that true drop — never a tail of empty padding below the monitor. */ .showcase-media[data-assets="ready"] .showcase-stage { --phone-w: 25%; padding: 0 calc(var(--phone-w) * 0.12) calc(var(--phone-w) * 0.30) 0; } /* the shared key light softens at hand scale */ .device-mac { filter: drop-shadow(0 1px 3px rgba(26, 23, 18, 0.10)) drop-shadow(6px 16px 26px rgba(26, 23, 18, 0.16)); } .device-phone { filter: drop-shadow(0 1px 2px rgba(26, 23, 18, 0.14)) drop-shadow(8px 14px 20px rgba(26, 23, 18, 0.30)); } html.js .scene-live .scene-label { display: none; } /* on phones the scene needs no chrome */ .mn-label { font-size: clamp(1.4rem, 6.4vw, 1.8rem); } .m-menu-nav ol a { grid-template-columns: 36px minmax(0, 1fr); row-gap: 2px; } .mn-meta { grid-column: 2; } } @media (max-width: 360px) { h1, h2, h3, .fold-label { overflow-wrap: anywhere; } .brand, .mini-brand { font-size: clamp(1.15rem, 7vw, 1.5rem); } .service-col { min-width: 0; overflow-wrap: anywhere; } .focus-item a, .focus-queued { grid-template-columns: 36px minmax(0, 1fr); } .focus-status { grid-column: 2; justify-self: start; margin-top: 4px; white-space: normal; } .studio, .studio-grid, .studio-copy { min-width: 0; overflow-wrap: anywhere; } .slate-quote { font-size: clamp(1.3rem, 7.5vw, 1.5rem); } } /* ============================================================ Preloader — "the wordmark sets itself" Motion ported verbatim from the reviewed FirstFold press study: First rises, the red press-rule draws, the italic Fold prints upside-down out of the rule (clip reveal), slides in, and flips upright on a 3D hinge; then Studio is typed. A fixed cover that preload.js drives (rAF) and lifts when the line is set. No-JS: a