/* ============================================================================= SITE YOUR STORY — Cinematic build ----------------------------------------------------------------------------- Two films and a set of scenes that play over them. The landing screen is hero-sys.mp4 at full strength: no grade, no tint, no vignette, no gradient. Legibility over it comes from text-shadow on the glyphs, never from anything laid over the footage. Everything after the landing screen plays over bg-sys.mp4, which is fixed to the viewport and scrubbed by scroll (see assets/js/main.js). Sections are scenes staged on top of it, not stacked blocks with their own backgrounds. Contents: 01. Tokens 02. Reset & base 03. Typography 04. Legibility over video 05. Layout primitives 06. Motion base states 07. Cursor 08. Navigation 09. Buttons & links 10. Landing screen 11. The film environment 12. Scenes 13. Marquee 14. Services 15. Industries 16. Process 17. Stats & prose 19. Forms 20. Closing scene 21. Footer 22. Page transition 23. Legal / 404 24. Responsive 25. Reduced motion & print ========================================================================== */ /* 01. Tokens ------------------------------------------------------------- */ :root { --bg: #070707; --bg-raised: #0d0d0d; /* Pure white throughout. Readability over the films is carried by the glyph shadows in section 04 and by these levels — never by dimming the video. */ --ink: #ffffff; --ink-dim: rgba(255, 255, 255, 0.88); --ink-muted: rgba(255, 255, 255, 0.66); --ink-faint: rgba(255, 255, 255, 0.30); --accent: #c0392b; --accent-lift: #e2513c; --accent-glow: rgba(192, 57, 43, 0.30); /* A whisper of a scrim over the BACKGROUND film only (never the hero) so the content after the hero reads as the clear foreground — the copy sits above the video, not lost in it. Kept light: the film still shows through, it is just calmed a stop so the larger illuminated type dominates. Tune here. */ --film-grade: rgba(6, 8, 12, 0.42); --line: rgba(255, 255, 255, 0.16); --line-soft: rgba(255, 255, 255, 0.09); --fill: rgba(255, 255, 255, 0.04); --font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: 'Instrument Serif', 'Times New Roman', serif; /* ~8% down from 9vw/15vh. Shrinking the display face is most of what lowers the hero block: it is bottom-anchored, so a shorter headline pushes its own top down and hands the difference back to the footage. */ --fs-display: clamp(2.7rem, min(8.1vw, 13.5vh), 9rem); --fs-h1: clamp(3rem, min(7.2vw, 13vh), 7.4rem); /* Larger, more impactful scale for everything after the hero — headings and body both step up so the content reads as the foreground, not the film. The hero keeps its own sizes (.landing__title), so it is unaffected. */ --fs-h2: clamp(3.1rem, min(6.8vw, 12.5vh), 6.4rem); --fs-h3: clamp(1.9rem, 3.1vw, 3.1rem); --fs-h4: clamp(1.3rem, 1.8vw, 1.65rem); --fs-lead: clamp(1.25rem, 1.75vw, 1.75rem); --fs-body: clamp(1.08rem, 1.25vw, 1.25rem); --fs-small: 0.86rem; --fs-eyebrow: 0.72rem; --track-display: -0.045em; --track-head: -0.035em; --track-eyebrow: 0.2em; --gutter: clamp(1.25rem, 4vw, 4.5rem); --shell: 1680px; --measure: 60ch; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --dur: 0.9s; --nav-h: 84px; } /* 02. Reset & base ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 300; line-height: 1.6; letter-spacing: -0.011em; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; } button { cursor: pointer; } ul, ol { list-style: none; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 3px; } .skip-link { position: absolute; top: -100px; left: var(--gutter); z-index: 999; padding: 0.85rem 1.4rem; background: var(--ink); color: var(--bg); font-size: var(--fs-small); font-weight: 500; transition: top 0.3s var(--ease); } .skip-link:focus { top: 1rem; } .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; } /* 03. Typography --------------------------------------------------------- */ .display, .h1, .h2, .h3 { font-weight: 200; line-height: 1.02; letter-spacing: var(--track-display); text-wrap: balance; } .display { font-size: var(--fs-display); } .h1 { font-size: var(--fs-h1); } .h2 { font-size: var(--fs-h2); line-height: 1.04; } .h3 { font-size: var(--fs-h3); font-weight: 300; line-height: 1.14; letter-spacing: var(--track-head); } .h4 { font-size: var(--fs-h4); font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; } .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; } .lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.5; color: var(--ink-dim); max-width: var(--measure); letter-spacing: -0.015em; } .body { color: var(--ink-dim); max-width: var(--measure); } .eyebrow { display: flex; align-items: center; gap: 0.7rem; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-muted); } .eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--accent); flex: none; } .eyebrow--plain::before { display: none; } .accent { color: var(--accent-lift); } .dim { color: var(--ink-dim); } .muted { color: var(--ink-muted); } /* 04. Legibility over video ---------------------------------------------- */ /* The footage is never covered. Where text sits on video, the glyphs carry their own shadow instead. Measured on hero-sys.mp4: the lower fifth of the frame averages luminance 76/255 (white text ≈ 8.6:1) but contains highlights up to 155, where unshadowed white would fall to ≈2.8:1. The shadow closes that gap without dimming a single pixel of the video. */ /* Three stacked shadows rather than one: a tight dark rim that gives the glyph an edge against a bright frame, a mid halo, and a wide soft pool that lifts the whole block off busy footage. Because nothing dims the video, these carry the contrast on their own. */ /* ── The illumination stack ─────────────────────────────────────────────── Not a glow. A glow is one wide blur and it reads as neon and as haze; this is six layers with deliberately tiny radii that together make a glyph look lit rather than lit-up. 1px white the edge itself, sharpened — this is what makes the letter look crisp instead of soft, and it does most of the work 3px white the inner bloom that sits just off the stroke 8px white ambient diffusion, the only layer wide enough to be felt rather than seen 1px black a tight rim so the glyph still has an edge against a bright frame of video 4px black near separation 12px black the soft pool that lifts the whole block off the footage The dark layers are not decoration. A purely white stack lightens the backdrop immediately around each letter and LOWERS effective contrast — the type glows and becomes harder to read at the same time. Light over rim is what keeps it luminous and legible together. Defined once, shared by the inherited .film__stage rule and by anything tagged .on-film. Those two had drifted apart before, leaving services and process copy flatter than the tiles beside them. */ .on-film, .film__stage .on-film { text-shadow: 0 0 1px rgba(255, 255, 255, 0.62), 0 0 3px rgba(255, 255, 255, 0.34), 0 0 8px rgba(255, 255, 255, 0.17), 0 1px 1px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.40), 0 2px 12px rgba(0, 0, 0, 0.30); } .on-film-strong { text-shadow: 0 0 1px rgba(255, 255, 255, 0.70), 0 0 3px rgba(255, 255, 255, 0.40), 0 0 9px rgba(255, 255, 255, 0.20), 0 1px 1px rgba(0, 0, 0, 0.62), 0 1px 5px rgba(0, 0, 0, 0.46), 0 2px 14px rgba(0, 0, 0, 0.34); } /* 05. Layout primitives -------------------------------------------------- */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; } .split__aside { position: sticky; top: calc(var(--nav-h) + 2rem); } .stack > * + * { margin-top: var(--stack, 1.5rem); } .stack-lg { --stack: 2.5rem; } /* 06. Motion base states ------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } [data-reveal].is-in { opacity: 1; transform: none; } /* Clip-path wipe — the panel is uncovered rather than faded in. */ [data-reveal='wipe'] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); } [data-reveal='wipe'].is-in { clip-path: inset(0 0 0% 0); } /* Depth — arrives from behind, on a perspective plane. Only for discrete cards. Never use this on a full-width row that carries a shared divider: translating on Z under perspective scales the element HORIZONTALLY as well, so each row's rule renders a slightly different width on its way in and the dividers visibly fail to line up. */ [data-reveal='depth'] { opacity: 0; transform: perspective(1400px) translate3d(0, 60px, -220px) rotateX(7deg); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); } [data-reveal='depth'].is-in { opacity: 1; transform: perspective(1400px) translate3d(0, 0, 0) rotateX(0deg); } [data-reveal='fade'] { transform: none; } .mask { display: block; overflow: hidden; } .mask > * { display: block; transform: translateY(105%); transition: transform 1.1s var(--ease); } .mask.is-in > * { transform: none; } .line-mask { display: block; overflow: hidden; padding-bottom: 0.09em; } /* Headings stay hidden until SplitText has measured them against the real webfont — splitting against the fallback freezes one word per line. */ [data-split] { opacity: 0; } .no-js [data-split], .no-js [data-reveal], .no-js .mask > * { opacity: 1 !important; transform: none !important; clip-path: none !important; } /* 07. Cursor ------------------------------------------------------------- */ .cursor { position: fixed; top: 0; left: 0; z-index: 900; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); pointer-events: none; mix-blend-mode: difference; transform: translate3d(-50px, -50px, 0); transition: width 0.35s var(--ease), height 0.35s var(--ease), opacity 0.3s; } .cursor--ring { width: 38px; height: 38px; background: none; border: 1px solid rgba(255,255,255,0.5); mix-blend-mode: difference; } .cursor.is-hover { width: 16px; height: 16px; } .cursor--ring.is-hover { width: 76px; height: 76px; border-color: var(--accent-lift); } @media (hover: none), (pointer: coarse) { .cursor { display: none; } } /* 08. Navigation --------------------------------------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 500; height: var(--nav-h); display: flex; align-items: center; transition: transform 0.55s var(--ease), background 0.5s var(--ease); } /* Over the landing screen the bar is fully transparent — the footage shows through and the labels rely on their own shadow. */ .nav.is-stuck { background: rgba(7, 7, 7, 0.62); backdrop-filter: saturate(150%) blur(18px); -webkit-backdrop-filter: saturate(150%) blur(18px); border-bottom: 1px solid var(--line-soft); } .nav.is-stuck .brand, .nav.is-stuck .nav__link { text-shadow: none; } .nav.is-hidden { transform: translateY(-100%); } .nav__inner { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .brand { font-size: 1.02rem; font-weight: 500; letter-spacing: -0.035em; white-space: nowrap; } .brand span { color: var(--accent-lift); } .nav__links { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.6rem); } .nav__link { position: relative; font-size: 0.9rem; color: var(--ink-dim); padding-block: 0.4rem; transition: color 0.35s var(--ease); } .nav__link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease); } .nav__link:hover { color: var(--ink); } .nav__link:hover::after { transform: scaleX(1); transform-origin: left; } .nav__link[aria-current='page'] { color: var(--ink); } .nav__link[aria-current='page']::after { transform: scaleX(1); } .burger { display: none; width: 46px; height: 46px; position: relative; z-index: 2; margin-right: -10px; } .burger span { position: absolute; left: 11px; width: 24px; height: 1.5px; background: var(--ink); transition: transform 0.5s var(--ease); } .burger span:nth-child(1) { top: 19px; } .burger span:nth-child(2) { top: 26px; } .burger.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); } .burger.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); } .menu { position: fixed; inset: 0; z-index: 400; background: rgba(7, 7, 7, 0.94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); display: flex; flex-direction: column; justify-content: center; padding: var(--nav-h) var(--gutter) 3rem; clip-path: inset(0 0 100% 0); transition: clip-path 0.9s var(--ease); visibility: hidden; overflow-y: auto; } .menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; } .menu__list > li { overflow: hidden; } .menu__list a { display: block; font-size: clamp(2.2rem, 9vw, 4.2rem); font-weight: 200; letter-spacing: var(--track-display); line-height: 1.16; padding-block: 0.12em; transform: translateY(105%); transition: transform 0.8s var(--ease), color 0.35s var(--ease); } .menu.is-open .menu__list a { transform: none; } .menu__list a:hover { color: var(--accent-lift); } .menu__foot { margin-top: auto; padding-top: 3rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: var(--fs-small); color: var(--ink-muted); opacity: 0; transition: opacity 0.5s var(--ease) 0.4s; } .menu.is-open .menu__foot { opacity: 1; } .progress { position: fixed; top: 0; left: 0; z-index: 501; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; pointer-events: none; } /* 09. Buttons & links ---------------------------------------------------- */ .btn { --btn-bg: var(--ink); --btn-fg: var(--bg); position: relative; display: inline-flex; align-items: center; gap: 0.75rem; padding: 1.05rem 1.9rem; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-size: 0.92rem; font-weight: 500; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; isolation: isolate; transition: color 0.45s var(--ease), border-color 0.45s var(--ease); } /* Only hint the compositor while the magnetic effect is actually running. A standing will-change on every button keeps idle layers alive for no gain. */ .btn:hover { will-change: transform; } .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: translateY(101%); transition: transform 0.6s var(--ease); } .btn:hover::before { transform: translateY(0); } .btn:hover { color: #fff; } .btn__label { position: relative; z-index: 1; } .btn__arrow { width: 15px; height: 15px; flex: none; transition: transform 0.5s var(--ease); } .btn:hover .btn__arrow { transform: translateX(5px); } .btn--ghost { --btn-bg: rgba(255,255,255,0.06); --btn-fg: var(--ink); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btn--ghost:hover { border-color: var(--accent); } .btn--accent { --btn-bg: var(--accent); --btn-fg: #fff; } .btn--accent::before { background: var(--ink); } .btn--accent:hover { color: var(--bg); } .btn--lg { padding: 1.35rem 2.6rem; font-size: 1rem; } .btn--sm { padding: 0.72rem 1.35rem; font-size: 0.84rem; } .link { display: inline-flex; align-items: center; gap: 0.5rem; position: relative; padding-bottom: 3px; color: var(--ink); } .link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform-origin: right; transition: transform 0.55s var(--ease); } .link:hover::after { transform: scaleX(0); transform-origin: left; } /* 10. Landing screen ----------------------------------------------------- */ /* Exactly one viewport tall. Nothing from the next scene is visible until the visitor chooses to move. The video is untouched: no overlay, no gradient, no tint, no vignette, no filter. */ .landing { position: relative; /* Must out-rank .film (z-index 1). Without this the landing paints at z-index:auto while the film establishes a stacking context above it, so the fixed background video covers the entire landing screen — invisibly on desktop, where it sits at opacity 0, but still swallowing every click on the hero CTA. The film only needs to be above the page background, not above the landing screen. */ z-index: 2; height: 100svh; min-height: 100svh; overflow: hidden; isolation: isolate; background: var(--bg); } .landing__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .landing__video { width: 100%; height: 100%; object-fit: cover; object-position: center; /* Slight over-scale leaves room for the drift and mouse parallax to move within the frame without ever exposing an edge. */ transform: scale(1.05); will-change: transform; } .landing__inner { position: relative; z-index: 2; height: 100%; width: 100%; max-width: var(--shell); margin-inline: auto; /* Sits close to the lower edge so the footage owns the screen above it. The block then rises into place on the first fraction of scroll — see the entrance phase in initSceneTransition. */ /* Roughly half the gap this once had, so the block sits lower — but not zero: the entrance rise needs somewhere to travel from, and that travel is capped to exactly this gap so the CTA never crosses the fold. */ padding: 0 var(--gutter) clamp(2rem, 4.6vh, 3.5rem); display: flex; flex-direction: column; justify-content: flex-end; } .landing__title { font-size: var(--fs-display); font-weight: 200; line-height: 0.96; letter-spacing: var(--track-display); max-width: 15ch; text-wrap: balance; } .landing__foot { /* The descriptive paragraph is gone, so this is a single column and the buttons sit directly beneath the headline with no gap left behind. The block is bottom-anchored: every pixel removed from inside it lowers the headline by exactly that much. */ margin-top: clamp(0.9rem, 2vh, 1.5rem); display: flex; align-items: flex-end; } .landing__lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, 0.92); max-width: 46ch; letter-spacing: -0.015em; } .landing__actions { display: flex; gap: 0.85rem; flex-wrap: wrap; } .landing__scroll { position: absolute; z-index: 2; /* aria-hidden decoration — it overlaps the right edge of the secondary action at narrower desktop widths and must not intercept those clicks. */ pointer-events: none; right: var(--gutter); bottom: clamp(3.5rem, 9vh, 7rem); display: flex; align-items: center; gap: 0.7rem; font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.8); } .landing__scroll i { display: block; width: 1px; height: 52px; background: linear-gradient(rgba(255,255,255,0.9), transparent); transform-origin: top; animation: scrollpulse 2.4s var(--ease-io) infinite; } @keyframes scrollpulse { 0% { transform: scaleY(0); opacity: 0; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(52px); opacity: 0; } } /* --- 10b. Hero typography on bright footage -------------------------------- hero-sys.mp4 is bright exactly where the landing content sits. Measured across the whole clip, sampling the real headline / lead / CTA rectangles: white text black text desktop 2.14:1 FAIL 7.96:1 PASS AAA phone 3.45:1 FAIL 4.59:1 PASS AA So the landing screen runs black type. Everything past the landing plays over the much darker bg-sys.mp4 and stays white — this block is scoped to .landing only. The video itself is still completely untreated: no overlay, no tint. ------------------------------------------------------------------------ */ /* Illuminated white, matching the rest of the site. The hero backdrop is the brightest surface on the page (0.34 mean relative luminance behind the headline on desktop), so plain white would sit at about 2.7:1 there. The dark layers in the stack below are what carry the separation — the white layers are the bloom. Same principle as the section typography, weighted harder because this backdrop is brighter. */ .landing__title, .landing__scroll { color: #fff; text-shadow: 0 0 1px rgba(255, 255, 255, 0.70), 0 0 4px rgba(255, 255, 255, 0.45), 0 0 12px rgba(255, 255, 255, 0.24), 0 1px 1px rgba(0, 0, 0, 0.58), 0 1px 5px rgba(0, 0, 0, 0.52), 0 2px 14px rgba(0, 0, 0, 0.44), 0 4px 26px rgba(0, 0, 0, 0.34); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .landing__title { font-weight: 600; letter-spacing: -0.038em; } .landing__scroll { font-weight: 600; } .landing__scroll i { background: linear-gradient(rgba(255, 255, 255, 0.9), transparent); } /* The serif emphasis keeps its italic but must not stay lighter than the rest. */ .landing__title .serif { font-weight: 500; } /* Ghost action: a translucent white plate reads on bright footage where a white-on-white outline disappears. */ /* Follows the headline back to white so the hero reads as one set. */ .landing .btn--ghost { color: #fff; background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.55); text-shadow: 0 0 1px rgba(255, 255, 255, 0.55), 0 1px 1px rgba(0, 0, 0, 0.55), 0 1px 5px rgba(0, 0, 0, 0.42); } .landing .btn--ghost:hover { color: #fff; border-color: var(--accent); } /* Only the solid button — it has a white plate behind it, so its label stays black. Without :not() this matched the ghost too and, at equal specificity but later in the file, silently overrode the white set above. */ .landing .btn:not(.btn--ghost) { color: #000; } .landing .btn:hover { color: #fff; } /* Navigation while it sits over the landing footage. Once .is-stuck adds its dark backdrop past the fold, the bar reverts to the white set in section 08. */ body:has(.landing) .nav:not(.is-stuck) .brand, body:has(.landing) .nav:not(.is-stuck) .nav__link { color: #fff; font-weight: 500; text-shadow: 0 0 1px rgba(255, 255, 255, 0.62), 0 0 4px rgba(255, 255, 255, 0.34), 0 1px 1px rgba(0, 0, 0, 0.58), 0 1px 5px rgba(0, 0, 0, 0.46), 0 2px 14px rgba(0, 0, 0, 0.34); } body:has(.landing) .nav:not(.is-stuck) .brand span { color: var(--accent-lift); } body:has(.landing) .nav:not(.is-stuck) .burger span { background: #fff; } /* 11. The film environment ----------------------------------------------- */ /* Everything after the landing screen plays over bg-sys.mp4. The video is fixed to the viewport and its timeline is scrubbed by scroll position (assets/js/main.js), so moving down plays it forward and moving back plays it in reverse. Scenes are staged over it; none of them carry a background. */ .film { position: relative; z-index: 1; } .film__bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--bg); /* Decoration only. It should never be a click target, whatever the stacking order ends up being on a given browser. */ pointer-events: none; /* Faded in as the landing screen hands over — see the scene-transition timeline in main.js. */ opacity: 0; } .film__bg video { /* Sized in whole pixels from the container, never from viewport units — 100vw would include the scrollbar and push a strip off the right edge. */ width: 100%; height: 100%; object-fit: cover; object-position: center center; /* THE SEAM FIX. At object-fit:cover a 576x864 portrait source scales to exactly the viewport width, so the video box lands flush against the container edge. A composited layer that rounds to a fractional device pixel then exposes a one-pixel line of whatever sits behind it — the vertical strip. A permanent bleed removes the failure mode rather than masking it: the layer is always wider than its clip, so there is no edge to round against. The drift tween below animates BETWEEN 1.03 and 1.06 and never returns to 1.0, which is what made the seam flicker in and out while scrolling. The range is kept as tight as the seam allows — every extra percent is extra upscaling of an already sub-HD source. */ transform: scale(1.03) translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; } /* A whisper of darkening ONLY over the background film, never the landing screen, so body copy stays readable across the clip's brighter passages. Measured mean luminance of bg-sys.mp4 runs 69-96/255; this keeps the worst-case text contrast above 4.5:1 while leaving the motion fully visible. */ .film__grade { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--film-grade); opacity: 0; } .film__stage { position: relative; z-index: 1; /* Everything staged on the film inherits a base glyph shadow, so body copy stays readable across the clip's brighter passages without anything being laid over the footage. Elements carrying .on-film / .on-film-strong override this with their own. */ /* The glow, applied once here and inherited by everything staged on the film, which is what keeps the treatment identical in every section. Five layers, in paint order. The two white ones are the bloom — a tight 1px halo that sharpens the glyph edge, and a wide soft one that lifts the whole block off the moving footage. The three dark ones underneath do the actual contrast work. The dark layers are why this reads as luminous rather than neon: a pure white glow on its own lightens the backdrop immediately around each letter and *lowers* effective contrast. Bloom on top of a rim keeps the type separated as well as glowing. */ text-shadow: 0 0 1px rgba(255, 255, 255, 0.62), 0 0 3px rgba(255, 255, 255, 0.34), 0 0 8px rgba(255, 255, 255, 0.17), 0 1px 1px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.40), 0 2px 12px rgba(0, 0, 0, 0.30); /* Rendering quality, applied once at the root of the staged content. optimizeLegibility enables kerning and ligatures; the grayscale smoothing pair is what stops light-on-dark strokes blooming into mush. Deliberately NO translateZ(0) here. Promoting a container that spans the whole 9000px document costs a composited layer of that size, and layer promotion disables subpixel antialiasing — it would make the type worse, not sharper. Glyphs already rasterise at device resolution. */ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; } /* Readability against a moving background, without touching the footage. Small copy is the hard case: at 300 the strokes are thin enough that a passing highlight can swallow them. Body-sized text over the film steps up to 400 and pure white, while every heading keeps its original 200 weight — the editorial look is set by the large type, so nothing about the style changes. Line-height opens slightly because text over motion needs more horizontal separation to track from line to line. */ .film__stage .plate__desc, .film__stage .ind__note, .film__stage .step__body, .film__stage .tstep__body, .film__stage .prose p, .film__stage .prose li, .film__stage .lead { color: var(--ink); font-weight: 400; line-height: 1.7; } /* The lead keeps its larger size, so it needs less help — 350 would be ideal but the family ships 300/400; 400 at this size reads as intended. */ .film__stage .lead { line-height: 1.55; } .film__stage .stat__label, .film__stage .chapter, .film__stage .eyebrow, .film__stage .sindex { color: var(--ink-dim); font-weight: 500; } /* --- Gradient display type ------------------------------------------------- The large white headings carry a vertical white-to-translucent fill, so the type has depth against the moving film instead of reading as one flat slab. Two things this has to get right: 1. `text-shadow` cannot be used with `color: transparent` — the shadow is painted from the glyph outline and then shows straight THROUGH the see-through letterform. `filter: drop-shadow()` follows the composited alpha instead, so it hugs the gradient-filled glyph correctly. 2. The whole rule is behind @supports. Without the guard, any engine missing background-clip:text renders `color: transparent` literally and the headings disappear. Unsupported browsers keep flat white. The fade stops at 78% white, not 0. Composited over this footage that is ~3.4:1 at the faintest point — above the 3:1 AA threshold for large text, which is what these are. Body copy is deliberately excluded. ------------------------------------------------------------------------ */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .film__stage .h2, .film__stage .statement, .film__stage .closing__title, .film__stage .phero__title { /* Eased back to 90% at the foot. The earlier 78% made these headings read as a different white from every other element on the page; the depth is still there, the tone now matches the rest of the system. */ background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 55%, rgba(255, 255, 255, 0.90) 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* text-shadow paints from the glyph outline and would show through the transparent fill — the same glow has to be rebuilt as drop-shadows, which follow the composited alpha instead. */ text-shadow: none; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.30)) drop-shadow(0 0 9px rgba(255, 255, 255, 0.16)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.32)); } /* SplitText wraps each line in its own element; the fill must inherit down or the lines paint solid white over the parent's gradient. */ .film__stage .h2 .split-line, .film__stage .statement .split-line, .film__stage .closing__title .split-line, .film__stage .phero__title .split-line, .film__stage .h2 .serif, .film__stage .statement .serif, .film__stage .closing__title .serif { color: inherit; -webkit-text-fill-color: inherit; background: none; } } /* --- Inner-page sections ------------------------------------------------ Standard pages use a simpler rhythm than the homepage's scenes, but they sit on the same film, so none of them carry a background of their own. */ .section { position: relative; padding-block: clamp(3.5rem, 7.5vh, 6rem); } .section--tight { padding-block: clamp(3.5rem, 7vh, 6rem); } .section--flush-top { padding-top: 0; } /* Previously a solid panel. Now separated by hairlines so the film shows through continuously. */ .section--raised { border-block: 1px solid var(--line-soft); background: rgba(7, 7, 7, 0.22); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .sindex { font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-muted); } .sindex b { color: var(--accent-lift); font-weight: 500; } .shead__title { margin-top: 1.4rem; } .shead__aside { padding-bottom: 0.4rem; } .cta { position: relative; overflow: hidden; isolation: isolate; } .cta__inner { text-align: center; display: grid; justify-items: center; gap: 2.5rem; } .cta { padding-block: clamp(4rem, 9vh, 7rem); } .cta__title { font-size: clamp(2.1rem, min(5.8vw, 11vh), 5.4rem); font-weight: 200; line-height: 1.04; letter-spacing: var(--track-display); max-width: 17ch; text-wrap: balance; } .cta__mail { font-size: var(--fs-small); color: var(--ink-muted); } .cta__mail a { color: var(--ink-dim); border-bottom: 1px solid var(--line); } .cta__mail a:hover { color: var(--accent-lift); border-color: var(--accent); } @media (max-width: 640px) { .cta__inner { text-align: left; justify-items: start; } } /* 12. Scenes -------------------------------------------------------------- */ .scene { position: relative; padding-block: clamp(4.25rem, 9vh, 7.5rem); min-height: 0; display: flex; align-items: center; } .scene--tall { min-height: 0; } .scene--auto { min-height: 0; padding-block: clamp(3.75rem, 8vh, 6.5rem); } .scene__inner { width: 100%; } /* Scene marker — the chapter number, held at the top-left of each scene. */ .chapter { display: flex; align-items: baseline; gap: 1rem; font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-muted); margin-bottom: clamp(0.9rem, 2vh, 1.5rem); } .chapter b { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 200; line-height: 0.8; letter-spacing: -0.05em; color: var(--accent-lift); font-variant-numeric: tabular-nums; } .chapter span { position: relative; top: -0.15em; } .shead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: end; margin-bottom: clamp(1.9rem, 4vh, 3.25rem); } .shead__title { margin-top: 1.2rem; } .shead--center { grid-template-columns: 1fr; justify-items: center; text-align: center; } .shead--center .lead { margin-inline: auto; } .statement { font-size: clamp(2.75rem, min(7vw, 13vh), 6.2rem); font-weight: 200; line-height: 1.05; letter-spacing: var(--track-display); max-width: 19ch; text-wrap: balance; } /* 13. Marquee ------------------------------------------------------------ */ .marquee { --speed: 46s; position: relative; display: flex; overflow: hidden; padding-block: clamp(1.5rem, 3vh, 2.2rem); border-block: 1px solid var(--line-soft); user-select: none; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; flex: none; align-items: center; gap: 3.5rem; padding-right: 3.5rem; animation: marquee var(--speed) linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { display: inline-flex; align-items: center; gap: 3.5rem; font-size: clamp(1.1rem, 2vw, 1.9rem); font-weight: 300; letter-spacing: -0.03em; color: var(--ink-dim); white-space: nowrap; } .marquee__item::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } @keyframes marquee { to { transform: translateX(-100%); } } /* 14. Services ------------------------------------------------------------ */ /* Not cards on a background. Each service is a full-width plate that lifts off the film on hover, with the number and rule reacting in depth. */ .plates { border-top: 1px solid var(--line-soft); } /* Alignment rules for this grid: - Columns are fixed-width at the ends and fractional in the middle, so every row resolves to identical track positions. The numbers therefore sit on one vertical axis down the whole list. - align-items:baseline puts the number, the title and the first line of the description on a shared baseline, despite their very different sizes. (center would align their bounding boxes, which is what made the numbers read as slightly off against the titles.) - Hover moves content with transform only. The previous version animated padding-inline, which reflowed the row on every frame and shifted the dividers relative to each other mid-transition. */ .plate { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 0.92fr) 2.5rem; gap: clamp(1rem, 3vw, 3rem); align-items: baseline; padding: clamp(1.5rem, 3.2vh, 2.4rem) 0; border-bottom: 1px solid var(--line-soft); isolation: isolate; } /* The plate's own surface — revealed only on approach. Insets bleed past the row so the wash never stops short of the divider it sits against. */ .plate::before { content: ''; position: absolute; inset: 0 -1.75rem; z-index: -1; background: linear-gradient(100deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 60%, transparent); border-radius: 4px; opacity: 0; transform: translate3d(-1.5rem, 0, 0); transition: opacity 0.6s var(--ease), transform 0.75s var(--ease); } .plate:hover::before { opacity: 1; transform: translate3d(0, 0, 0); } .plate__num { font-size: var(--fs-small); color: var(--ink-muted); font-variant-numeric: tabular-nums; /* Locks the digits to the title's baseline regardless of row height. */ align-self: baseline; transition: color 0.45s var(--ease), transform 0.6s var(--ease); } .plate:hover .plate__num { color: var(--accent-lift); transform: translate3d(0, -4px, 0); } .plate__name { font-size: clamp(1.5rem, 3vw, 2.7rem); font-weight: 200; letter-spacing: var(--track-head); line-height: 1.08; transition: transform 0.65s var(--ease); } .plate:hover .plate__name { transform: translate3d(0.6rem, 0, 0); } .plate__desc { font-size: var(--fs-body); color: var(--ink-muted); line-height: 1.55; transition: color 0.45s var(--ease), transform 0.65s var(--ease); } .plate:hover .plate__desc { color: var(--ink-dim); transform: translate3d(0.3rem, 0, 0); } .plate__arrow { justify-self: end; /* The only cell that should not baseline-align — an SVG's baseline is its bottom edge, which would drop it below the row. */ align-self: center; width: 18px; height: 18px; color: var(--ink-faint); transition: transform 0.6s var(--ease), color 0.45s var(--ease); } .plate:hover .plate__arrow { transform: translate3d(5px, -5px, 0); color: var(--accent-lift); } /* --- 14b. Service showcase — glass cards ----------------------------------- Five across, two rows, all ten services visible at once. This is the only place on the site using this card language; every other section has its own. The glass is built from four stacked ingredients, which is what separates it from a flat translucent box: a diagonal white gradient for the pane itself, a backdrop blur with a saturation lift so the film behind it stays colourful, a 1px inset highlight along the top edge reading as a lit rim, and a wide soft drop shadow so the card floats rather than sits. Everything that moves is transform or opacity. Tilt, magnetic drift and the cursor-tracked sheen are driven from main.js via GSAP quickTo and two custom properties, so no frame of the interaction triggers layout. ------------------------------------------------------------------------ */ /* Carousel viewport: clips the moving track and feathers both edges so cards glide in and out of view rather than popping at a hard border. touch-action pan-y keeps vertical page scrolling native while we own horizontal drags. */ .carousel { position: relative; overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .carousel:active { cursor: grabbing; } /* Reduced-motion / no-JS fallback: a plain horizontal scroller, no auto-move. */ .carousel--static { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .carousel--static::-webkit-scrollbar { display: none; } /* The moving track — one flex row, sized to its content, translated by JS. */ .glasscards { display: flex; flex-wrap: nowrap; width: max-content; gap: clamp(0.7rem, 1vw, 1.1rem); will-change: transform; } .gcard { position: relative; /* Fixed width so a known number of cards show per breakpoint: ~5-6 on desktop (17rem into a ~1352 track), 1-2 on phones (below). */ flex: 0 0 auto; width: 17rem; scroll-snap-align: start; display: flex; flex-direction: column; min-height: clamp(11rem, 14vw, 13rem); padding: clamp(1rem, 1.35vw, 1.45rem); border-radius: 18px; isolation: isolate; overflow: hidden; background: linear-gradient(152deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0.025) 100%); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.17); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 18px 38px -20px rgba(0, 0, 0, 0.70), 0 2px 10px rgba(0, 0, 0, 0.28); transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), background 0.5s var(--ease); } .gcard:hover, .gcard:focus-visible { border-color: rgba(255, 255, 255, 0.34); background: linear-gradient(152deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.09) 42%, rgba(255, 255, 255, 0.04) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 28px 54px -22px rgba(0, 0, 0, 0.78), 0 0 26px rgba(255, 255, 255, 0.09); } /* Ambient sheen that follows the pointer. --mx/--my are set from JS. */ .gcard__sheen { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), transparent 62%); opacity: 0; transition: opacity 0.45s var(--ease); } .gcard:hover .gcard__sheen, .gcard:focus-visible .gcard__sheen { opacity: 1; } .gcard__num { font-size: 0.68rem; letter-spacing: var(--track-eyebrow); color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; transition: color 0.45s var(--ease); } .gcard:hover .gcard__num { color: var(--accent-lift); } /* The luxury face — the serif italic already in the system, at display size with a gradient fill and its own soft bloom. */ .gcard__title { margin-top: auto; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 2.05vw, 2rem); line-height: 1.06; /* Open tracking on an italic serif at display size reads as luxury; tight tracking reads as utility. */ letter-spacing: 0.012em; color: #fff; } .gcard__desc { margin-top: 0.5rem; font-family: var(--font-sans); font-size: 0.845rem; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, 0.9); /* Two to three lines, never more — the card must stay scannable. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Gradient fill for the title. Behind @supports because an engine without background-clip:text would render `color: transparent` literally and the titles would vanish; drop-shadow rather than text-shadow because a shadow painted from the glyph outline shows through a transparent fill. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .gcard__title { /* Cools at the top, warms toward the foot — the gradient is what stops the glyph reading as flat white, and the warmth is where the "expensive" impression comes from. */ background-image: linear-gradient(166deg, #ffffff 0%, #fffdfa 40%, rgba(255, 240, 222, 0.94) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; /* Four radii, warming and thinning outward: a near-white rim that sharpens the edge, a cream mid-bloom, a wide amber pool, then a dark layer for separation from the card behind it. Warm rather than pure white is the difference between illuminated and neon — no saturated hue anywhere. */ filter: drop-shadow(0 0 2px rgba(255, 250, 242, 0.62)) drop-shadow(0 0 9px rgba(255, 236, 212, 0.40)) drop-shadow(0 0 24px rgba(255, 214, 168, 0.20)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.60)); } /* The glow lifts on approach rather than switching on — the card is already brightening, so the type has to keep pace with it. */ .gcard:hover .gcard__title, .gcard:focus-visible .gcard__title { filter: drop-shadow(0 0 2px rgba(255, 250, 242, 0.80)) drop-shadow(0 0 12px rgba(255, 236, 212, 0.52)) drop-shadow(0 0 30px rgba(255, 210, 160, 0.30)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.60)); } } /* Filter transitions are cheap here — ten small text nodes, and only the hovered one animates. */ .gcard__title { transition: filter 0.5s var(--ease); } /* Fade up + slight scale + soft blur, staggered by data-stagger. */ [data-reveal='glass'] { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.965); filter: blur(7px); transition: opacity 0.75s var(--ease), transform 0.85s var(--ease), filter 0.7s var(--ease); } [data-reveal='glass'].is-in { opacity: 1; transform: none; filter: blur(0); } /* --- 14c. Reasons --------------------------------------------------------- Same hairline system as the service grid, three across, so "Why choose" occupies two rows instead of six full-width blocks. ------------------------------------------------------------------------ */ .reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); } .reason { position: relative; padding: clamp(1.35rem, 2.2vw, 2rem); background: rgba(7, 7, 7, 0.34); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; flex-direction: column; gap: 0.5rem; isolation: isolate; overflow: hidden; transition: background 0.5s var(--ease); } .reason::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 100% at 50% 120%, var(--accent-glow), transparent 70%); opacity: 0; transition: opacity 0.55s var(--ease); } .reason:hover { background: rgba(7, 7, 7, 0.16); } .reason:hover::before { opacity: 1; } .reason__num { font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); color: var(--ink-faint); font-variant-numeric: tabular-nums; transition: color 0.45s var(--ease); } .reason:hover .reason__num { color: var(--accent-lift); } .reason__title { font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 300; letter-spacing: var(--track-head); line-height: 1.2; } .reason__body { font-size: 0.92rem; line-height: 1.6; color: var(--ink-muted); max-width: 34ch; } /* --- 14d. The heart ------------------------------------------------------- Part of the typography, not an icon: sized in em so it scales with the headline, and lit by layered drop-shadows rather than a single wide blur. The pulse is deliberately almost still — one beat every few seconds. ------------------------------------------------------------------------ */ /* The heart is the final word of the sentence, so it is set like a glyph: sized in em so it tracks the headline, given a word-space of leading margin, and optically seated on the baseline rather than vertically centred — a box-centred icon sits visibly high next to lowercase text. */ .heart { display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.2em; /* Raised off the baseline by measurement, not by eye. An inline-block sits its bottom edge on the baseline, which leaves a symmetric shape like a heart hanging low next to lowercase text — its visual mass is centred, where a letter's sits on the baseline. +0.05em puts the heart's centre on the text's centre. */ vertical-align: 0.05em; color: var(--accent-lift); filter: drop-shadow(0 0 3px rgba(226, 81, 60, 0.92)) drop-shadow(0 0 12px rgba(226, 81, 60, 0.52)) drop-shadow(0 0 32px rgba(226, 81, 60, 0.26)); animation: heartbeat 5s var(--ease-io) infinite; will-change: transform; } .heart svg { width: 100%; height: 100%; display: block; fill: currentColor; } /* Almost still — one beat every five seconds. Anything faster stops reading as warmth and starts reading as an alert. */ @keyframes heartbeat { 0%, 86%, 100% { transform: scale(1); } 90% { transform: scale(1.10); } 94% { transform: scale(1.02); } } /* 15. Industries ---------------------------------------------------------- */ .inds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); } .ind { position: relative; background: rgba(7, 7, 7, 0.42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); padding: clamp(1.75rem, 3vw, 2.6rem); min-height: clamp(180px, 21vw, 230px); display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; overflow: hidden; isolation: isolate; transition: background 0.55s var(--ease), transform 0.55s var(--ease); } .ind::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 90% at 50% 100%, var(--accent-glow), transparent 70%); opacity: 0; transition: opacity 0.6s var(--ease); } /* Hovering clears the frost so the film shows through the tile. */ .ind:hover { background: rgba(7, 7, 7, 0.14); transform: translateY(-4px); } .ind:hover::before { opacity: 1; } .ind__num { font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); color: var(--ink-faint); font-variant-numeric: tabular-nums; transition: color 0.45s var(--ease); } .ind:hover .ind__num { color: var(--accent-lift); } .ind__name { font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 300; letter-spacing: var(--track-head); line-height: 1.2; } .ind__note { font-size: var(--fs-small); color: var(--ink-muted); line-height: 1.5; margin-top: 0.5rem; } /* 16. Process ------------------------------------------------------------- */ /* A vertical timeline. The rail draws itself as the scene is scrolled, and each node lights when its step arrives. */ .timeline { position: relative; padding-left: clamp(2.5rem, 6vw, 5rem); } .timeline__rail { position: absolute; left: clamp(0.75rem, 2vw, 1.6rem); top: 0.6rem; bottom: 0.6rem; width: 1px; background: var(--line-soft); } .timeline__rail::after { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--accent-lift), var(--accent)); transform: scaleY(var(--draw, 0)); transform-origin: top; } .tstep { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1rem, 3vw, 3rem); padding-block: clamp(2rem, 5.5vh, 4rem); align-items: start; } .tstep::before { content: ''; position: absolute; left: calc(clamp(2.5rem, 6vw, 5rem) * -1 + clamp(0.75rem, 2vw, 1.6rem) - 4px); top: calc(clamp(2rem, 5.5vh, 4rem) + 0.5rem); width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--ink-faint); transition: background 0.5s var(--ease), border-color 0.5s var(--ease), transform 0.5s var(--ease); } .tstep.is-lit::before { background: var(--accent-lift); border-color: var(--accent-lift); transform: scale(1.5); } .tstep__head { display: flex; align-items: baseline; gap: 1.25rem; } .tstep__num { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 200; line-height: 1; letter-spacing: -0.05em; color: var(--ink-faint); font-variant-numeric: tabular-nums; transition: color 0.5s var(--ease); } .tstep.is-lit .tstep__num { color: var(--accent-lift); } .tstep__title { font-size: clamp(1.4rem, 2.6vw, 2.3rem); font-weight: 200; letter-spacing: var(--track-head); line-height: 1.08; } .tstep__body { color: var(--ink-dim); line-height: 1.65; } /* Plain step list (used on inner pages without the rail) */ .steps { border-top: 1px solid var(--line-soft); } .step { position: relative; display: grid; grid-template-columns: clamp(4rem, 8vw, 8rem) minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1rem, 3vw, 3rem); padding-block: clamp(2rem, 5vh, 3.5rem); border-bottom: 1px solid var(--line-soft); align-items: start; } .step__num { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 200; line-height: 0.9; letter-spacing: -0.05em; color: var(--ink-faint); font-variant-numeric: tabular-nums; transition: color 0.5s var(--ease); } .step:hover .step__num { color: var(--accent); } .step__title { font-size: clamp(1.35rem, 2.4vw, 2.1rem); font-weight: 200; letter-spacing: var(--track-head); line-height: 1.1; } .step__body { color: var(--ink-dim); line-height: 1.65; } /* 18. Stats & prose ------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); } .stat { background: rgba(7, 7, 7, 0.42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 2rem); display: flex; flex-direction: column; gap: 0.6rem; } .stat__fig { font-size: clamp(2.6rem, 5.5vw, 4.5rem); font-weight: 200; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; } .stat__label { font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-muted); } .prose { max-width: var(--measure); } .prose > * + * { margin-top: 1.35rem; } .prose p { color: var(--ink-dim); line-height: 1.75; } .prose h2 { font-size: var(--fs-h3); font-weight: 300; letter-spacing: var(--track-head); color: var(--ink); margin-top: 3rem; line-height: 1.2; } .prose h3 { font-size: var(--fs-h4); font-weight: 500; color: var(--ink); margin-top: 2.25rem; } .prose ul { margin-left: 1.1rem; } .prose li { position: relative; color: var(--ink-dim); line-height: 1.75; padding-left: 1rem; } .prose li + li { margin-top: 0.6rem; } .prose li::before { content: ''; position: absolute; left: 0; top: 0.78em; width: 6px; height: 1px; background: var(--accent); } .prose a { color: var(--ink); border-bottom: 1px solid var(--accent); } .prose a:hover { color: var(--accent-lift); } .prose strong { font-weight: 500; color: var(--ink); } /* 19. Forms --------------------------------------------------------------- */ .form { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); } .field { position: relative; display: flex; flex-direction: column; gap: 0.7rem; } .field label { font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-muted); transition: color 0.35s var(--ease); } .field:focus-within label { color: var(--accent-lift); } .field input, .field select, .field textarea { width: 100%; padding: 0.9rem 0 1rem; font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 300; letter-spacing: -0.02em; color: var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; transition: border-color 0.45s var(--ease); } .field textarea { resize: vertical; min-height: 6rem; line-height: 1.5; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); } .field::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); } .field:focus-within::after { transform: scaleX(1); } .field select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='rgba(255,255,255,.4)' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.25rem center; padding-right: 2rem; } .field select option { background: #101010; color: var(--ink); } .field.has-error input, .field.has-error select { border-bottom-color: var(--accent); } .field__error { font-size: 0.78rem; color: var(--accent-lift); min-height: 1rem; } .form__note { font-size: var(--fs-small); color: var(--ink-muted); } .form__status { font-size: var(--fs-small); color: var(--accent-lift); min-height: 1.2rem; } /* 20. Closing scene -------------------------------------------------------- */ .closing { position: relative; overflow: hidden; isolation: isolate; } .closing__inner { text-align: center; display: grid; justify-items: center; gap: 2.5rem; } .closing { padding-block: clamp(5rem, 11vh, 9rem); } /* Title and its answering line are one block, with room to breathe between them while the surrounding .closing__inner keeps its own rhythm. */ .closing__statement { display: grid; gap: clamp(0.85rem, 1.9vh, 1.5rem); justify-items: center; } /* The emotional focal point of the page — larger and more substantial than any other heading. 400 rather than the site's editorial 200: this is the one line that should carry weight. */ .closing__title { font-size: clamp(2.6rem, min(8.2vw, 15vh), 7.5rem); font-weight: 400; line-height: 1.04; letter-spacing: var(--track-display); /* "We build with ❤" is short — held to one line at every size. */ max-width: 14ch; text-wrap: balance; } /* The answering line: quieter, but lit by the same system so it belongs to the composition rather than sitting under it as a caption. */ .closing__sub { font-size: clamp(1.15rem, 2vw, 1.7rem); font-weight: 300; line-height: 1.4; letter-spacing: -0.012em; color: rgba(255, 255, 255, 0.94); text-align: center; } .closing__mail { font-size: var(--fs-small); color: var(--ink-muted); } .closing__mail a { color: var(--ink-dim); border-bottom: 1px solid var(--line); } .closing__mail a:hover { color: var(--accent-lift); border-color: var(--accent); } /* The nav and footer sit outside .film__stage, so the illumination has to be handed to them explicitly — otherwise those two are the only parts of the site with flat type. The nav is excluded while it is over the black-on-video landing screen (section 10b) and while .is-stuck gives it a solid backdrop. */ .nav.is-stuck .brand, .nav.is-stuck .nav__link, .footer, .menu__list a, .menu__foot { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; } .footer { text-shadow: 0 0 1px rgba(255, 255, 255, 0.55), 0 0 3px rgba(255, 255, 255, 0.28), 0 1px 1px rgba(0, 0, 0, 0.50), 0 1px 4px rgba(0, 0, 0, 0.34); } /* 21. Footer -------------------------------------------------------------- */ .footer { position: relative; z-index: 1; border-top: 1px solid var(--line-soft); padding-block: clamp(3rem, 7vh, 5rem) 2rem; background: rgba(7, 7, 7, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .footer__top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vh, 4rem); } .footer__brand { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.035em; } .footer__brand span { color: var(--accent-lift); } .footer__blurb { margin-top: 1rem; font-size: var(--fs-small); color: var(--ink-muted); max-width: 34ch; line-height: 1.6; } .footer__head { font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.35rem; } .footer__list { display: grid; gap: 0.8rem; } .footer__list a { font-size: 0.92rem; color: var(--ink-dim); display: inline-block; transition: color 0.35s var(--ease), transform 0.45s var(--ease); } .footer__list a:hover { color: var(--ink); transform: translateX(5px); } .footer__bar { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid var(--line-soft); font-size: 0.8rem; color: var(--ink-faint); } .footer__bar a:hover { color: var(--ink-dim); } .footer__legal { display: flex; gap: 1.5rem; flex-wrap: wrap; } .footer__heart { color: var(--accent); } /* 22. Page transition ------------------------------------------------------ */ .curtain { position: fixed; inset: 0; z-index: 800; background: var(--bg); pointer-events: none; transform: scaleY(0); transform-origin: bottom; } .curtain.is-covering { pointer-events: all; transform: scaleY(1); transform-origin: bottom; transition: transform 0.6s var(--ease-io); } .curtain.is-lifting { transform: scaleY(0); transform-origin: top; transition: transform 0.75s var(--ease-io); } /* 23. Legal / 404 ---------------------------------------------------------- */ .legal { padding-top: calc(var(--nav-h) + clamp(4rem, 10vh, 8rem)); } .legal__meta { margin-top: 1.25rem; font-size: var(--fs-small); color: var(--ink-muted); } .phero { position: relative; padding: calc(var(--nav-h) + clamp(3.5rem, 10vh, 7rem)) 0 clamp(2.25rem, 5vh, 4rem); overflow: hidden; } .phero__title { margin-top: 1.5rem; max-width: 18ch; } .phero__lead { margin-top: 1.75rem; } .notfound { min-height: 100svh; display: grid; place-content: center; text-align: center; gap: 2rem; padding: var(--nav-h) var(--gutter) 4rem; position: relative; isolation: isolate; } .notfound__code { font-size: clamp(6rem, 26vw, 20rem); font-weight: 200; line-height: 0.82; letter-spacing: -0.06em; } .notfound__links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } /* 24. Responsive ----------------------------------------------------------- */ /* --- Touch devices: the film is never faded in ----------------------------- Animating opacity on a position:fixed layer containing a