:root { --ink: #0b0b0d; --ink-2: #151517; --ink-3: #1c1c1f; --line: rgba(255,255,255,0.1); --line-strong: rgba(255,255,255,0.2); --text: #ece9e4; --text-soft: #a19d95; --text-soft-2: #6f6b64; --accent: #ff4d2e; --accent-2: #ff7a5c; --accent-dim: rgba(255,77,46,0.14); --max: 1180px; --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif; --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; } * { box-sizing: border-box; } html { /* scroll-behavior: smooth removed — it made scrollIntoView() a no-op in Chrome and broke the on-load scroll to a #hash. Smooth scrolling for in-page anchor clicks is handled in JS instead (see the fragment-nav IIFE). */ /* No overflow-x here. Setting overflow-x:hidden on the root forces overflow-y to compute as `auto`, turning into a scroll container nested inside 's (which had the same problem) — the actual cause of the janky mobile scroll. */ overscroll-behavior-x: none; } body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; /* No overflow-x. It was `clip` to contain a horizontal bleed that no longer exists (verified: zero page overflow on desktop and mobile). `overflow` on can also stop a nested horizontal scroller (the Work strip) from taking touch/programmatic scroll on iOS Safari. */ width: 100%; max-width: 100%; position: relative; overflow-wrap: break-word; overscroll-behavior-x: none; } /* Film-grain overlay — the single biggest "cheap vector vs. real atmosphere" fix. position:absolute (not fixed) so it scrolls with the page instead of forcing a full-viewport repaint every scroll frame — that fixed layer was a real mobile scroll-jank cause. body is position:relative, so this still covers the whole document. */ body::after { content: ""; position: absolute; inset: 0; z-index: 999; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 0.94; margin: 0 0 0.4em; text-transform: uppercase; text-wrap: balance; letter-spacing: -0.01em; } p { margin: 0 0 1em; } a { color: inherit; } img, svg { max-width: 100%; display: block; } ::selection { background: var(--accent); color: #fff; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; width: 100%; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 10px 16px; z-index: 200; font-weight: 700; text-decoration: none; } .skip-link:focus { left: 16px; top: 16px; } .eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent-2); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; border: 1px solid rgba(255,122,92,0.35); background: rgba(255,77,46,0.06); padding: 7px 14px; border-radius: 2px; width: fit-content; } .eyebrow .br { color: rgba(255,122,92,0.5); font-weight: 400; } /* ---------- Header ---------- */ header { position: sticky; top: 0; z-index: 100; background: rgba(11,11,13,0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; max-width: var(--max); margin: 0 auto; } .brand { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--text); text-decoration: none; letter-spacing: 0.01em; text-transform: uppercase; display: flex; align-items: center; gap: 9px; } .brand .mark { color: var(--accent); } .brand-mark { display: block; width: auto; flex: none; } .brand .brand-mark { height: 26px; } .brand-mark .bm-bracket { stroke: var(--accent); stroke-width: 4; stroke-linecap: butt; } .brand-mark .bm-w { stroke: var(--text); stroke-width: 5.2; stroke-linejoin: miter; stroke-linecap: butt; } .brand-word { display: inline-block; line-height: 1; } .brand .tag { margin-left: 1px; } .brand .tag { font-family: var(--font-mono); font-size: 10px; color: var(--text-soft-2); letter-spacing: 0.12em; text-transform: uppercase; } .nav-links { display: flex; gap: 34px; align-items: center; } .nav-links a { color: var(--text-soft); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: color 0.15s; } .nav-links a:not(.nav-cta) { position: relative; padding-bottom: 3px; } .nav-links a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.28s cubic-bezier(0.16,1,0.3,1); } .nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); } .nav-links a:hover { color: var(--text); } .nav-cta { background: var(--accent); color: #fff !important; padding: 10px 20px; border-radius: 2px; font-weight: 700 !important; text-transform: uppercase; font-size: 13px !important; letter-spacing: 0.03em; } .nav-cta:hover { background: var(--accent-2) !important; } .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: 1px solid var(--line-strong); border-radius: 2px; cursor: pointer; padding: 0; margin-left: 12px; flex-shrink: 0; } .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { display: none; flex-direction: column; padding: 8px 28px 20px; background: rgba(11,11,13,0.98); border-bottom: 1px solid var(--line-strong); } .mobile-menu.open { display: flex; } .mobile-menu a { color: var(--text); text-decoration: none; font-family: var(--font-display); font-size: 22px; text-transform: uppercase; letter-spacing: 0.01em; padding: 16px 0; border-bottom: 1px solid var(--line); } .mobile-menu a:last-child { border-bottom: none; } .mobile-menu .mobile-cta { color: var(--accent); } @media (max-width: 760px) { .nav { padding: 16px 20px; } .brand { font-size: 21px; } .brand .brand-mark { height: 20px; } .nav-links { display: none; } .nav-toggle { display: flex; margin-left: 0; } /* backdrop-filter recomputes as content scrolls under the sticky header — a real scroll-jank cost on mobile GPUs. Swap it for a near-opaque solid on small screens. */ header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11,11,13,0.96); } .hero-meta { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ---------- Hero: full-bleed real photo, not a CSS shape ---------- */ .hero { position: relative; min-height: 92vh; display: flex; /* flex-start, not flex-end: the headline is large and the content block can exceed the viewport. flex-end would push the overflow up behind the sticky header. The block is instead dropped down over the photo with .hero-inner padding-top. */ align-items: flex-start; overflow: hidden; } .hero-photo { position: absolute; top: -70px; left: 0; right: 0; height: calc(100% + 140px); z-index: 0; background-image: url("/hero-desk.jpg"); background-size: cover; background-position: 30% 38%; will-change: transform; } /* Text sits over the image's own dark negative space (right side) — the lamp/laptop stay fully visible, unscrimmed */ .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent 0%, transparent 44%, rgba(11,11,13,0.4) 62%, rgba(11,11,13,0.72) 100%), linear-gradient(0deg, rgba(11,11,13,0.85) 0%, rgba(11,11,13,0.25) 24%, transparent 46%); } .hero-glow { position: absolute; z-index: 1; inset: -15% -10%; pointer-events: none; background: radial-gradient(ellipse 35% 40% at 92% 82%, rgba(255,77,46,0.32), transparent 62%); filter: blur(50px); mix-blend-mode: screen; } .hero-inner { position: relative; z-index: 2; padding-top: clamp(92px, 12vh, 132px); padding-bottom: 44px; width: 100%; } .hero-text { margin-left: auto; max-width: 760px; } .hero h1 { text-align: right; } @media (max-width: 900px) { .hero-text { margin-left: 0; max-width: 100%; width: 100%; } .hero h1 { text-align: left; max-width: 100%; margin-right: 0; } .hero-copy { grid-template-columns: 1fr; width: 100%; } .hero-copy .rule-v { display: none; } .hero-copy p.lead { max-width: 100%; } } .hero-tagline { font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); letter-spacing: 0.06em; margin-bottom: 10px; } .hero h1 { font-size: clamp(52px, 9.2vw, 134px); line-height: 0.9; color: var(--text); margin-bottom: 0; margin-right: -3vw; max-width: 16ch; text-shadow: 0 4px 60px rgba(0,0,0,0.5); padding-top: 0.15em; } .hero h1 .accent-word { color: var(--accent-2); } .hero-copy { max-width: 620px; margin-top: 22px; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; } .hero-copy .rule-v { width: 3px; background: var(--accent); align-self: stretch; margin-top: 4px; } .hero-copy p.lead { font-size: 17px; color: var(--text-soft); max-width: 46ch; } .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 26px; border-radius: 2px; font-weight: 700; font-size: 14.5px; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; border: 1px solid transparent; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); } .btn-ghost { border-color: var(--line-strong); color: var(--text); } .btn-ghost:hover { border-color: var(--text); } .btn-circle { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; font-size: 18px; transition: all 0.15s; flex-shrink: 0; } .btn-circle:hover { border-color: var(--accent); color: var(--accent-2); transform: translateY(-1px) rotate(8deg); } /* ---------- Hero: free site review form ---------- */ .review-form { margin-top: 26px; max-width: 440px; background: rgba(15,15,17,0.9); border: 1px solid var(--line-strong); border-radius: 4px; padding: 22px 22px 20px; } .review-form-head { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 8px; } .review-form-sub { font-size: 13.5px; color: var(--text-soft); line-height: 1.5; margin: 0 0 16px; } .rf-fields { display: flex; flex-direction: column; gap: 12px; } .rf-field { display: flex; flex-direction: column; gap: 6px; } .rf-field span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft-2); } .rf-field input { font-family: var(--font-body); font-size: 14.5px; color: var(--text); background: rgba(255,255,255,0.04); border: 1px solid var(--line-strong); border-radius: 3px; padding: 11px 13px; width: 100%; transition: border-color 0.15s; } .rf-field input::placeholder { color: var(--text-soft-2); } .rf-field input:focus { outline: none; border-color: var(--accent); } .rf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .rf-submit { margin-top: 16px; width: 100%; justify-content: center; cursor: pointer; border: none; font-family: var(--font-body); } .rf-submit[disabled] { opacity: 0.6; cursor: default; } .rf-status { font-size: 13px; margin: 12px 0 0; min-height: 1.1em; } .rf-status.ok { color: var(--accent-2); } .rf-status.err { color: #ff6b6b; } .rf-alt { font-size: 12.5px; color: var(--text-soft-2); margin: 12px 0 0; } .rf-alt a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px; } .rf-alt a:hover { color: var(--accent-2); } @media (max-width: 900px) { .review-form { max-width: 100%; } } .hero-meta { position: relative; z-index: 2; display: flex; gap: 0; margin-top: 40px; background: rgba(11,11,13,0.82); backdrop-filter: blur(6px); border-radius: 3px; padding: 0 20px; } .hero-meta .m { flex: 1; padding: 18px 0; border-right: 1px solid var(--line-strong); padding-right: 24px; padding-left: 4px; } .hero-meta .m:first-child { padding-left: 0; } .hero-meta .m:last-child { border-right: none; padding-right: 0; } .hero-meta .m .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 6px; } .hero-meta .m .v { font-size: 15px; font-weight: 600; color: var(--text); } @media (max-width: 900px) { .hero { min-height: unset; padding-top: 100px; width: 100%; display: block; } /* The hero box is much taller than wide on mobile (all the stacked copy) — if the photo covered the whole thing, `cover` would blow it up massively to fill that shape. Cap the photo to a sane band at the top instead; everything below sits on solid ground. */ .hero-glow { inset: auto; top: 0; left: 0; right: 0; height: 68vh; } /* Real portrait crop of the same source photo, not the wide 16:9 file stretched/cropped. Extra top/bottom buffer (unlike the glow above) so the parallax scroll effect has real image to shift into — without it, shifting this would expose a hard edge. */ .hero-photo { inset: auto; left: 0; right: 0; top: -40px; height: calc(58vh + 80px); background-image: url("/hero-desk-mobile.jpg"); background-position: 50% 20%; /* Bottom-edge mask as a second, independent line of defence (see .hero-scrim note below) — fades the photo to transparent before its own box boundary, so even if the scrim's coverage were ever off, there's no raw-image-to-flat-colour cliff. */ -webkit-mask-image: linear-gradient(180deg, black 0%, black 62%, transparent 100%); mask-image: linear-gradient(180deg, black 0%, black 62%, transparent 100%); } /* Real cause of the harsh line, found from an actual phone screenshot (mobile Safari's address bar collapses on scroll, which changes what `vh` resolves to *live*, in real time, as you scroll — not just once on load): .hero-scrim used its own separate `top:0; height:58vh` while .hero-photo used `top:-40px; height:calc(58vh + 80px)`. Both are vh-based but by different formulas, so they don't recompute in lockstep — the ~70px gap between them isn't fixed, it drifts as Safari's toolbar collapses, which is exactly why the seam got worse while scrolling instead of staying constant. Fix: give the scrim the *exact* same top/height formula as the photo, so they're always pixel-for-pixel co-extensive no matter what `vh` evaluates to at any instant. */ .hero-scrim { inset: auto; left: 0; right: 0; top: -40px; height: calc(58vh + 80px); background: linear-gradient(0deg, var(--ink) 0%, rgba(11,11,13,0.35) 55%, rgba(11,11,13,0.1) 100%); } .hero-inner { padding-top: 0; padding-bottom: 44px; } .hero-text { padding-top: 22vh; } /* Full-bleed + top fade, not a flat box: the box was narrower than the viewport (bounded by .wrap's 28px padding) with photo visible either side, and its top edge sat slightly above the scrim's own bottom edge — cutting a hard line across photo that was still ~90% visible there. Bleeding to the viewport edge and fading the top in removes both hard edges instead of just relocating them. */ .hero-copy { /* A single 36px linear fade was mathematically smooth but perceptually a hard edge — 36px is only ~108 real device px on a 3x phone, too fast a ramp against the photo's own local contrast there. Eased multi-stop curve over ~190px (slow start, faster middle, slow finish) reads as an actual gradient instead of a cutoff. */ background: linear-gradient(180deg, rgba(11,11,13,0) 0, rgba(11,11,13,0.12) 45px, rgba(11,11,13,0.38) 95px, rgba(11,11,13,0.7) 145px, var(--ink) 190px, var(--ink) 100%); padding: 4px 28px 0; margin: 0 -28px; /* an earlier mobile rule sets width:100% (of the padded container) — override it here so the negative margin actually grows the box instead of just shifting it, or the gutter just relocates to one side instead of disappearing. */ width: calc(100% + 56px); } .hero-meta { flex-direction: column; width: 100%; padding: 0 16px; background: var(--ink); } .hero-meta .m { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 14px; padding-left: 0; margin-bottom: 4px; width: 100%; } } /* ---------- Section shared ---------- */ /* No per-section divider rule — the eyebrow label + vertical rhythm carry the separation. Full-width hairlines between every section read as clutter. */ section { padding: 92px 0; } /* Clear the sticky header (~81px) when a section is jumped to via #hash */ section[id] { scroll-margin-top: 88px; } .hero { padding-top: 0; padding-bottom: 0; } /* Spec strip — the four stats, lifted out of the hero so the hero stays headline + line + form */ .stat-strip { padding: 30px 0; border-bottom: 1px solid var(--line); } .stat-strip .hero-meta { margin-top: 0; } @media (max-width: 900px) { .stat-strip { padding: 8px 0 20px; } .stat-strip .hero-meta { padding: 0; } } .section-head { max-width: 680px; margin-bottom: 44px; } .section-head h1, .section-head h2 { font-size: clamp(32px, 4.4vw, 54px); } .section-head p { color: var(--text-soft); font-size: 16.5px; margin: 0; } @media (max-width: 640px) { section { padding: 58px 0; } .section-head { margin-bottom: 30px; } } /* ---------- Problem: editorial list ---------- */ .problem-list { border-top: 1px solid var(--line); } .problem-row { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .problem-row .idx { font-family: var(--font-display); font-size: 44px; color: var(--accent); font-weight: 700; line-height: 1; } .problem-row h4 { font-size: 21px; margin-bottom: 6px; text-transform: none; } .problem-row p { color: var(--text-soft); font-size: 15px; margin: 0; max-width: 62ch; } .problem-row:last-child { border-bottom: none; } @media (max-width: 640px) { .problem-row { grid-template-columns: 1fr; gap: 8px; } } /* ---------- What you get / How it works — two warm ember zones (behind #get and #process), each built from --accent over --ink and bleeding into the neighbouring sections (matching 0.05 alpha at every seam) so they fade in above and out below with no edge anywhere. #work sits between the two, so it carries a tail at both its top and its bottom with a cool gap in the middle. Eyebrows and accents stay standard here — same orange treatment as every other section. */ #get, #process { background: linear-gradient(180deg, rgba(255,77,46,0.05) 0%, rgba(255,77,46,0.11) 22%, rgba(255,77,46,0.19) 50%, rgba(255,77,46,0.11) 78%, rgba(255,77,46,0.05) 100%); } #problem { background: linear-gradient(180deg, transparent 48%, rgba(255,77,46,0.05) 100%); } #work { background: linear-gradient(180deg, rgba(255,77,46,0.05) 0%, transparent 38%, transparent 62%, rgba(255,77,46,0.05) 100%); } #pricing { background: linear-gradient(180deg, rgba(255,77,46,0.05) 0%, transparent 42%); } .get-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .get-item { background: var(--ink-2); border: 1px solid var(--line); padding: 28px 24px; border-radius: 5px; box-shadow: 0 16px 40px -20px rgba(0,0,0,0.6); } .get-item .k { font-family: var(--font-mono); font-size: 11px; color: var(--accent-2); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; } .get-item h4 { font-size: 19px; text-transform: none; margin-bottom: 8px; } .get-item p { color: var(--text-soft); font-size: 14px; margin: 0; } @media (max-width: 900px) { .get-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .get-grid { grid-template-columns: 1fr; } } /* ---------- Process: editorial rows ---------- */ .process-row { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .process-row:first-child { border-top: 1px solid var(--line); } .process-row:last-child { border-bottom: none; } .process-row .pnum { font-family: var(--font-display); font-size: 30px; color: rgba(255,77,46,0.55); } .process-row h3 { font-size: 20px; text-transform: none; display: inline; margin-right: 12px; } .process-row p { display: inline; color: var(--text-soft); font-size: 15px; margin: 0; } @media (max-width: 640px) { .process-row { grid-template-columns: 1fr; gap: 4px; } } /* ---------- Work: one full-width featured build ---------- */ .work-feature { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: center; } .work-feature-visual { border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7); background: var(--ink-2); } .browser-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #0e241d; border-bottom: 1px solid rgba(243,237,225,0.12); } .browser-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(243,237,225,0.25); } .browser-bar .url { margin-left: 8px; font-family: var(--font-mono); font-size: 10px; color: rgba(243,237,225,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .work-feature-shot { display: block; } .work-feature-shot img { display: block; width: 100%; height: auto; } .work-feature-body { display: flex; flex-direction: column; align-items: flex-start; } .work-feature-body .tag-note { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-2); background: var(--accent-dim); border: 1px solid rgba(255,77,46,0.3); padding: 4px 10px; border-radius: 2px; margin-bottom: 16px; } .work-feature-body h3 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 12px; } .work-feature-body > p { color: var(--text-soft); font-size: 15px; line-height: 1.6; margin-bottom: 18px; } .work-feature-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 9px; } .work-feature-list li { position: relative; padding-left: 20px; font-size: 14px; color: var(--text-soft); } .work-feature-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; background: var(--accent); border-radius: 1px; } .work-feature-body .btn { font-size: 13.5px; } @media (max-width: 860px) { .work-feature { grid-template-columns: 1fr; gap: 26px; } } /* ---------- Pricing ---------- */ .price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .price-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: 5px; padding: 30px 26px; } .price-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft-2); margin-bottom: 12px; } .price-figure { font-family: var(--font-display); font-size: clamp(40px, 6vw, 58px); line-height: 1; color: var(--text); margin-bottom: 16px; } .price-figure .price-pre { font-family: var(--font-mono); font-size: 0.3em; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-soft); vertical-align: 0.5em; margin-right: 4px; } .price-figure .price-per { font-size: 0.36em; color: var(--text-soft); letter-spacing: 0.02em; } .price-note { color: var(--text-soft); font-size: 14px; line-height: 1.55; margin: 0; max-width: 42ch; } .price-foot { margin-top: 28px; color: var(--text-soft-2); font-size: 13.5px; line-height: 1.6; max-width: 62ch; } /* Condensed pricing teaser on the homepage — full detail lives on /pricing/ */ .price-teaser { max-width: 640px; } .price-teaser-figures { display: flex; flex-wrap: wrap; gap: 14px 48px; margin-bottom: 20px; } .price-teaser-figures > div { display: flex; flex-direction: column; gap: 6px; } .price-teaser-figures .price-pre { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-soft); } .price-teaser-figures .price-big { font-family: var(--font-display); font-size: clamp(38px, 5.5vw, 54px); line-height: 1; color: var(--text); } .price-teaser-figures .price-per { font-size: 0.34em; color: var(--text-soft); } .price-teaser > p { color: var(--text-soft); font-size: 15px; line-height: 1.6; max-width: 52ch; margin: 0 0 22px; } @media (max-width: 640px) { .price-grid { grid-template-columns: 1fr; } .price-teaser-figures { gap: 16px 32px; } } /* ---------- About: split-light portrait sitting behind the words ---------- */ #about { position: relative; overflow: hidden; } .about-layout { position: relative; min-height: 600px; } .about-glow-warm, .about-glow-cool { position: absolute; z-index: 2; pointer-events: none; mix-blend-mode: screen; filter: blur(48px); } .about-glow-warm { right: 6%; bottom: -30px; width: min(44%, 520px); height: 60%; background: radial-gradient(ellipse 48% 44% at 44% 64%, rgba(255,92,52,0.4), rgba(255,77,46,0.08) 44%, transparent 72%); } .about-glow-cool { right: -2%; top: 4%; width: min(40%, 470px); height: 72%; background: radial-gradient(ellipse 52% 50% at 58% 40%, rgba(120,165,230,0.4), rgba(96,150,224,0.1) 40%, transparent 74%); } .about-figure { position: absolute; right: -3%; top: 0; bottom: 0; z-index: 1; width: min(46%, 560px); margin: 0; pointer-events: none; } .about-figure img { position: absolute; right: 0; bottom: -40px; height: calc(100% + 90px); width: auto; max-width: none; filter: brightness(1.22) contrast(1.02) saturate(1.03); /* radial feathers the sides/top; the linear layer forces the bottom to fade out so the photo's own bottom edge never shows as a hard cut. */ -webkit-mask-image: radial-gradient(ellipse 78% 80% at 52% 40%, #000 24%, transparent 90%), linear-gradient(to top, transparent 2%, #000 22%); -webkit-mask-composite: source-in; mask-image: radial-gradient(ellipse 78% 80% at 52% 40%, #000 24%, transparent 90%), linear-gradient(to top, transparent 2%, #000 22%); mask-composite: intersect; } .about-body { position: relative; z-index: 3; max-width: 540px; } #about h2 { font-size: clamp(40px, 7vw, 92px); line-height: 0.86; letter-spacing: -0.018em; text-shadow: 0 2px 30px rgba(0,0,0,0.5), 0 0 70px rgba(255,77,46,0.16), 0 0 90px rgba(96,150,224,0.1); } #about h2 .accent-word { color: var(--accent-2); } .about-copy { display: flex; gap: 20px; margin-top: 28px; } .about-rule { width: 3px; flex-shrink: 0; margin-top: 6px; border-radius: 2px; background: linear-gradient(var(--accent), #6096e0); } #about p { color: #b4b0a7; font-size: 15.5px; line-height: 1.64; max-width: 44ch; } .about-tagline { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft-2); } @media (prefers-reduced-motion: no-preference) { @keyframes about-warm { 0%, 100% { opacity: 0.82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } @keyframes about-cool { 0%, 100% { opacity: 0.58; transform: scale(1.04); } 50% { opacity: 0.82; transform: scale(1); } } .about-glow-warm { animation: about-warm 8s ease-in-out infinite; } .about-glow-cool { animation: about-cool 8s ease-in-out infinite; } } @media (max-width: 820px) { .about-layout { min-height: 0; } .about-figure { position: absolute; left: 50%; right: auto; top: 12px; bottom: auto; transform: translateX(-50%); width: auto; height: 384px; } .about-figure img { position: static; height: 100%; bottom: auto; right: auto; -webkit-mask-image: radial-gradient(ellipse 72% 66% at 50% 42%, #000 48%, transparent 84%); mask-image: radial-gradient(ellipse 72% 66% at 50% 42%, #000 48%, transparent 84%); } .about-glow-warm { left: 50%; right: auto; transform: translateX(-50%); top: 90px; bottom: auto; width: 78%; height: 300px; filter: blur(40px); } .about-glow-cool { right: -4%; top: 20px; width: 60%; height: 260px; filter: blur(40px); } #about h2 { font-size: clamp(36px, 12vw, 52px); } .about-copy { margin-top: 224px; } } /* ---------- CTA band ---------- */ /* No overflow:hidden — it was clipping the blurred glow into a hard horizontal edge top and bottom. The glow now extends past the section vertically and fades out on its own; inset is 0 left/right so nothing bleeds sideways. */ .cta-band { text-align: center; position: relative; } .cta-band::before { content: ""; position: absolute; inset: -45% 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 58% 50% at 50% 44%, rgba(255,77,46,0.26), transparent 72%); filter: blur(64px); } .cta-band .wrap { position: relative; z-index: 1; max-width: 640px; } .cta-band h2 { font-size: clamp(34px, 5.5vw, 64px); } .cta-band p { color: var(--text-soft); font-size: 16.5px; margin-bottom: 32px; } .cta-band .cta-row { justify-content: center; } /* Bottom qualifying form, sits in the CTA band */ .enquiry-form { text-align: left; margin: 0 auto; max-width: 520px; } .ef-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ef-grid .rf-field select { font-family: var(--font-body); font-size: 14.5px; color: var(--text); background: rgba(255,255,255,0.04); border: 1px solid var(--line-strong); border-radius: 3px; padding: 11px 34px 11px 13px; width: 100%; transition: border-color 0.15s; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236f6b64' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; } .ef-grid .rf-field select:focus { outline: none; border-color: var(--accent); } .ef-grid .rf-field option { background: var(--ink-2); color: var(--text); } .enquiry-form .ef-submit { margin-top: 16px; width: 100%; justify-content: center; cursor: pointer; border: none; font-family: var(--font-body); } .enquiry-form .ef-submit[disabled] { opacity: 0.6; cursor: default; } .ef-status { font-size: 13px; margin: 12px 0 0; min-height: 1.1em; text-align: left; } .ef-status.ok { color: var(--accent-2); } .ef-status.err { color: #ff6b6b; } .ef-alt { font-size: 12.5px; color: var(--text-soft-2); margin: 12px 0 0; text-align: left; } .ef-alt a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px; } .ef-alt a:hover { color: var(--accent-2); } @media (max-width: 560px) { .ef-grid { grid-template-columns: 1fr; } } footer { padding: 64px 0 28px; border-top: 1px solid var(--line); } .footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 40px; align-items: start; } .footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .footer-brand { font-family: var(--font-display); color: var(--text); font-weight: 700; font-size: 18px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px; } .footer-brand .brand-mark { height: 16px; } .footer-about p { font-size: 13.5px; color: var(--text-soft); line-height: 1.6; max-width: 36ch; margin: 0; } .footer-loc { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft-2); border: 1px solid var(--line-strong); padding: 3px 8px; border-radius: 2px; } .footer-head { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft-2); margin-bottom: 4px; } .footer-col a { color: var(--text-soft); text-decoration: none; font-size: 13.5px; transition: color 0.15s ease; } .footer-col a:hover { color: var(--accent-2); } .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 52px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-soft-2); } @media (max-width: 680px) { footer { padding: 48px 0 24px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; } .footer-about { grid-column: 1 / -1; } .footer-bottom { margin-top: 36px; } } /* ---------- /customise/ — demo customiser ("Design studio" direction) ---------- */ /* No overflow:hidden here — it would break the sticky preview. The glow is sized to stay inside the section box so it can't cause horizontal overflow. */ #customise { position: relative; } #customise::before { content: ""; position: absolute; top: 0; right: 0; width: min(64%, 760px); height: 540px; /* farthest-side keeps the ending shape tied to THIS box at any size, so the fade always completes toward the interior edges (left/bottom) instead of being clipped into a hard line the way a fixed-px gradient was on mobile. The top/right edges sit on the section/viewport edge, so a hard stop there is invisible. */ background: radial-gradient(ellipse farthest-side at 86% 8%, rgba(255,77,46,0.17), transparent 70%); pointer-events: none; } #customise .wrap { position: relative; z-index: 1; } #customise .accent-word { color: var(--accent-2); } /* staggered entrance — plain CSS, gated for reduced-motion below */ .cx-in { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .cx-in { animation: cx-rise 0.8s cubic-bezier(0.16,1,0.3,1) both; animation-delay: var(--d, 0s); } @keyframes cx-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } } .cx-layout { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 52px; align-items: start; margin-top: 8px; } .cx-controls { display: flex; flex-direction: column; gap: 32px; } .cx-block { display: flex; flex-direction: column; gap: 12px; } .cx-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft-2); } .cx-opt { color: rgba(255,255,255,0.28); letter-spacing: 0.06em; } .cx-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .cx-swatch { display: flex; align-items: center; gap: 9px; padding: 11px 12px; background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--text-soft); font-family: var(--font-body); font-size: 13px; text-align: left; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .cx-swatch .cx-dot { width: 14px; height: 14px; border-radius: 3px; flex: none; background: var(--c, linear-gradient(135deg, var(--accent), #6096e0)); } .cx-swatch-auto .cx-dot { background: linear-gradient(135deg, var(--accent), #6096e0); } .cx-swatch:hover { border-color: var(--text-soft-2); color: var(--text); transform: translateY(-2px); } .cx-swatch:active { transform: translateY(0); } .cx-swatch[aria-pressed="true"] { border-color: var(--accent); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,77,46,0.28), 0 0 24px -8px rgba(255,77,46,0.45); } .cx-finetune { align-self: flex-start; background: none; border: none; padding: 2px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .cx-wheel { border: 1px dashed var(--line-strong); border-radius: 4px; padding: 24px; } .cx-soon { margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-soft-2); text-align: center; } .cx-font-sample { background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 6px; padding: 20px 20px 18px; } .cx-font-word { display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 0.95; font-size: clamp(30px, 5vw, 40px); color: var(--text); overflow-wrap: anywhere; } .cx-font-name { display: block; font-size: 13px; color: var(--text-soft); margin-top: 8px; } .cx-fonts { display: flex; flex-wrap: wrap; gap: 8px; } .cx-font { padding: 9px 14px; background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--text-soft); font-family: var(--font-body); font-size: 12.5px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .cx-font:hover { border-color: var(--text-soft-2); color: var(--text); transform: translateY(-1px); } .cx-font[aria-pressed="true"] { border-color: var(--accent); color: var(--text); } .cx-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .cx-style { display: flex; flex-direction: column; gap: 5px; padding: 14px 13px; background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 4px; text-align: left; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; } .cx-style strong { font-family: var(--font-display); text-transform: uppercase; font-size: 15px; color: var(--text); } .cx-style span { font-size: 11.5px; color: var(--text-soft); line-height: 1.35; } .cx-style:hover { border-color: var(--text-soft-2); transform: translateY(-2px); } .cx-style:active { transform: translateY(0); } .cx-style[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,77,46,0.28), 0 0 24px -8px rgba(255,77,46,0.45); } .cx-style[aria-pressed="true"] span { color: var(--text-soft); } .cx-text { font-family: var(--font-body); font-size: 14px; color: var(--text); background: rgba(255,255,255,0.04); border: 1px solid var(--line-strong); border-radius: 3px; padding: 11px 13px; width: 100%; resize: vertical; transition: border-color 0.15s; } .cx-text::placeholder { color: var(--text-soft-2); } .cx-text:focus { outline: none; border-color: var(--accent); } /* Preview panel — a screen on a desk: sticky, tilted, floating, warm glow behind */ .cx-preview-wrap { position: sticky; top: 100px; } .cx-preview-wrap::before { content: ""; position: absolute; /* no negative left/right — that overflowed the viewport on narrow screens. Smaller blur radius (was 60px): an animated blur that large forces the compositor to re-rasterise a big surface every frame — real jank on a mid-range phone, and it froze headless capture. 34px reads the same. */ inset: -12% 0 -16% 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 48% at 55% 42%, rgba(255,92,52,0.34), transparent 70%); filter: blur(34px); } .cx-preview { --cx-accent: #ff4d2e; --cx-bg: #14100f; --cx-fg: #f0ede8; --cx-muted: #a49f97; --cx-font: var(--font-display); --cx-radius: 4px; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; box-shadow: 0 60px 110px -40px rgba(0,0,0,0.85); background: var(--ink-2); transform: perspective(1700px) rotateY(-7deg) rotateX(2.5deg); transform-origin: center; } @media (prefers-reduced-motion: no-preference) { /* Only the frame floats — a pure translateY on a composited layer, cheap. The glow is a static presence, NOT animated: pulsing opacity on a blur(34px) pseudo-element forced a full re-blur every frame, which pegged the renderer. The float alone carries the life. */ .cx-preview { animation: cx-float 8s ease-in-out infinite; } @keyframes cx-float { 0%, 100% { transform: perspective(1700px) rotateY(-7deg) rotateX(2.5deg) translateY(0); } 50% { transform: perspective(1700px) rotateY(-7deg) rotateX(2.5deg) translateY(-14px); } } } .cx-frame { background: var(--cx-bg); color: var(--cx-fg); padding: 0 0 18px; } .cx-frame-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); } .cx-frame-logo { font-family: var(--cx-font); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: 15px; } .cx-frame-navlinks { display: flex; gap: 16px; margin-left: auto; margin-right: 4px; } .cx-frame-navlinks span { font-size: 11px; color: var(--cx-muted); } .cx-frame-cta { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--cx-accent); color: #fff; padding: 7px 12px; border-radius: var(--cx-radius); white-space: nowrap; } .cx-frame-hero { padding: 26px 18px 24px; } .cx-frame-kicker { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cx-accent); margin-bottom: 10px; } .cx-frame-h1 { font-family: var(--cx-font); font-weight: 800; text-transform: uppercase; line-height: 0.98; font-size: clamp(26px, 3.4vw, 40px); } .cx-frame-sub { color: var(--cx-muted); font-size: 13px; margin-top: 12px; max-width: 34ch; line-height: 1.5; } .cx-frame-btn { display: inline-block; margin-top: 18px; background: var(--cx-accent); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 11px 18px; border-radius: var(--cx-radius); } .cx-frame-trust { margin-top: 16px; font-size: 11px; letter-spacing: 0.03em; color: var(--cx-muted); } .cx-frame-star { color: var(--cx-accent); } .cx-frame-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 18px 0; } .cx-frame-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--cx-radius); padding: 12px 12px 13px; } .cx-frame-card b { display: block; font-family: var(--cx-font); text-transform: uppercase; font-size: 12.5px; margin-bottom: 3px; } .cx-frame-card span { font-size: 11px; color: var(--cx-muted); line-height: 1.35; } .cx-frame-foot { display: flex; justify-content: space-between; gap: 12px; margin: 20px 18px 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); font-family: var(--cx-font); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.08em; color: var(--cx-muted); } .cx-preview-note { margin: 12px 0 0; font-size: 12px; color: var(--text-soft-2); } .cx-finish { margin-top: 52px; max-width: 640px; } .cx-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; } .cx-submit { font-size: 13.5px; } .cx-finish-note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-soft-2); } @media (max-width: 900px) { /* No overflow clip here. Setting only overflow-x made overflow-y compute to `auto`, which turned #customise into a scroll box and clipped the glow at top: -90px into a hard full-width line. The ::before is sized to stay inside the section instead, so nothing overflows. */ #customise::before { top: 0; right: 0; width: min(94%, 540px); height: 340px; } .cx-layout { grid-template-columns: 1fr; gap: 36px; } .cx-preview-wrap { position: static; } /* Flat on a phone — the 3D tilt overflows and reads wrong on a small screen — but not dead: a small vertical float stays. Glow is static (see the desktop note above — animating it re-blurs every frame). */ .cx-preview { transform: none; border-radius: 6px; } .cx-preview-wrap::before { inset: -6% 0 -9% 0; filter: blur(30px); opacity: 0.7; } .cx-styles { grid-template-columns: 1fr; } @media (prefers-reduced-motion: no-preference) { .cx-preview { animation: cx-float-flat 8s ease-in-out infinite; } @keyframes cx-float-flat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } } } @media (max-width: 560px) { .cx-swatches { grid-template-columns: 1fr; } .cx-fields { grid-template-columns: 1fr; } .cx-frame-cards { grid-template-columns: 1fr; } /* the mock's own header would cramp at panel width on a phone */ .cx-frame-navlinks { display: none; } .cx-frame-foot { flex-wrap: wrap; } } /* ---------- Hero load-in (fires once on page load, not scroll) ---------- */ @media (prefers-reduced-motion: no-preference) { .load-in { opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .load-in.is-visible { opacity: 1; transform: translateY(0); } } /* ---------- Hover detail (desktop / real pointer only — no phantom sticky-hover on touch) ---------- */ @media (hover: hover) and (pointer: fine) { .get-item { transition: background-color 0.2s ease, transform 0.2s ease; } .get-item:hover { background-color: var(--ink-2); transform: translateY(-3px); } .work-feature-visual { transition: transform 0.3s ease, box-shadow 0.3s ease; } .work-feature-visual:hover { transform: translateY(-5px); box-shadow: 0 55px 90px -30px rgba(0,0,0,0.8); } .problem-row { transition: padding-left 0.2s ease; } .problem-row:hover { padding-left: 8px; } .problem-row:hover .idx { color: var(--accent-2); } .process-row { transition: padding-left 0.2s ease; } .process-row:hover { padding-left: 8px; } .process-row:hover .pnum { color: var(--accent-2); } .hero-meta .m { transition: transform 0.2s ease; } .hero-meta .m:hover { transform: translateY(-3px); } .hero-meta .m:hover .v { color: var(--accent-2); } .brand { transition: opacity 0.15s ease; } .brand:hover { opacity: 0.82; } .btn-primary { position: relative; overflow: hidden; } .btn-primary::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.28), transparent 65%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .btn-primary:hover::before { opacity: 1; } .btn, .nav-cta { will-change: transform; } } /* ---------- Scroll reveal ---------- */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; filter: blur(6px); transform: translateY(56px) scale(0.96) rotate(var(--tilt, 0deg)); transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1), filter 0.85s ease; } .reveal.is-visible { opacity: 1; filter: blur(0); transform: translateY(0) scale(1) rotate(var(--tilt, 0deg)); } .reveal-stagger > * { opacity: 0; filter: blur(5px); transform: translateY(46px) scale(0.95) rotate(var(--tilt, 0deg)); transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1), filter 0.75s ease; } .reveal-stagger.is-visible > * { opacity: 1; filter: blur(0); transform: translateY(0) scale(1) rotate(var(--tilt, 0deg)); } .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.16s; } .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.32s; } .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.48s; } }