/* NOTE: the design tokens live in ONE :root block — search "Senior agency system". Two older :root blocks from earlier design eras were removed 2026-06 so there is exactly one source of truth. */ * { box-sizing: border-box; } html { background: var(--forest); height: 100%; overscroll-behavior: none; scroll-behavior: auto; -webkit-text-size-adjust: 100%; /* iOS Safari otherwise inflates body text when rotated to landscape */ text-size-adjust: 100%; } html:has(body.page-mode) { height: auto; min-height: 100%; /* The ONE scroll container in page-mode. overflow-x clip lives here (not on body) so body can stay overflow:visible — see the body.page-mode note. */ overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: auto; } body { margin: 0; background: var(--forest); color: var(--black); font-family: var(--font-body); letter-spacing: 0; height: 100%; overflow: hidden; overscroll-behavior: none; } /* Safari 26+ samples body/fixed-edge backgrounds for browser chrome tinting. Keep the document chrome forest while the actual page surfaces paint over it. */ body::before { background: var(--forest); content: ""; height: 1px; height: max(1px, env(safe-area-inset-top)); left: 0; pointer-events: none; position: fixed; right: 0; top: 0; z-index: 2147483647; } .browser-tint { background: var(--forest); height: 12px; height: max(12px, env(safe-area-inset-top)); left: 0; pointer-events: none; position: fixed; right: 0; top: 0; z-index: 31; } .brand-toggle, .menu-label, .menu-preview__giant, .preview-number, .preview-tag, .preview-service, .hero-title, .panel-eyebrow, .case-title, .section-kicker, .studio h2, .studio-signals dt, .services h2, .contact h2, .contact a { font-family: var(--font-display); } body.menu-is-open { overflow: hidden; } /* The root scroller is on every page (native + page-mode), so lock it there while the menu overlay is open — body-level overflow alone doesn't stop the page scrolling behind the menu. (Restated at the END of the file too, where it wins the source-order tie against the native-mode rules.) */ html:has(body.menu-is-open) { overflow: hidden; } main#top { background: var(--stage-bg, var(--paper)); height: 100vh; height: 100dvh; overflow: hidden; position: relative; transition: background-color 360ms linear; width: 100%; } main#top::before { box-shadow: 0 0 0 100vmax white; content: ""; inset: 3.8vw; opacity: 0; pointer-events: none; position: fixed; transform: scale(1.075); transform-origin: center; transition: opacity 680ms var(--ease), transform 620ms var(--ease), visibility 0s 420ms; visibility: hidden; z-index: 17; } body.logo-is-hovered:not(.menu-is-open) main#top::before { opacity: 1; transform: scale(1); transition-delay: 0s; visibility: visible; } a { color: inherit; text-decoration: none; } button, a { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 3px solid var(--hot); outline-offset: 6px; } .site-header { left: 0; pointer-events: none; position: fixed; right: 0; top: 0; z-index: 30; } .brand-toggle { align-items: center; background: transparent; border: 0; cursor: pointer; display: flex; height: 74px; justify-content: center; left: 50%; padding: 0; pointer-events: auto; position: absolute; top: 48px; transform: translateX(-50%); transition: transform 260ms var(--ease), width 260ms var(--ease); width: 74px; } .brand-toggle:hover { transform: translateX(-50%); } .q-logo-mark { border-radius: 50%; display: block; height: 46px; position: relative; transition: opacity 180ms var(--ease), transform 300ms var(--ease), filter 240ms var(--ease), visibility 0s; width: 46px; z-index: 2; } /* Injected animated Q (qualls-Q-anim.svg). Its artwork sits in the centre of a 2000x2000 canvas, so scale the inline svg up to fill the round badge; the circular overflow clip keeps the swirl tidy. */ .q-logo-mark > svg { display: block; width: 100%; height: 100%; transform: scale(2.1); transform-origin: center; } .brand-wordmark { display: block; height: auto; left: 50%; opacity: 0; position: absolute; top: 50%; transform: translate(-50%, -50%) scale(0.96); transition: opacity 180ms var(--ease), transform 260ms var(--ease), visibility 0s 180ms; visibility: hidden; width: 138px; z-index: 3; } /* Animated wordmark shown when the menu is open: the inline SVG is injected by JS. Attribute selector keeps the 400px width above the responsive overrides; it scales down only on narrow viewports so the centred mark never clips. */ .brand-wordmark[data-brand-wordmark] { width: 400px; max-width: 86vw; } .brand-wordmark > svg { display: block; width: 100%; height: auto; } body.logo-is-hovered:not(.menu-is-open) .q-logo-mark, body.menu-is-open .q-logo-mark { transform: scale(1.16); } body.menu-is-open .brand-toggle { width: 174px; } body.menu-is-open .q-logo-mark { opacity: 0; transform: scale(0.88); transition-delay: 0s; visibility: hidden; } body.menu-is-open .brand-wordmark { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-delay: 80ms; visibility: visible; } .slide-transition { inset: 0; opacity: 0; overflow: hidden; pointer-events: none; position: fixed; visibility: hidden; z-index: 18; } .slide-transition__plane { background: linear-gradient(90deg, var(--hot) 0 54%, var(--black) 54% 62%, var(--white) 62% 100%); clip-path: polygon(0 0, 76% 0, 100% 100%, 24% 100%); height: 150vh; left: -32vw; position: absolute; top: -25vh; transform: translate3d(-130%, 0, 0) skewX(-10deg); transform-origin: center; width: 164vw; } body[data-slide-transition="none"] .slide-transition, body[data-slide-transition="sticky-q"] .slide-transition, body.menu-is-open .slide-transition { display: none; } .menu-shell { background: var(--white); color: var(--black); display: flex; flex-direction: column; height: 100vh; height: 100dvh; /* fixed overlay tracks the CURRENT iOS viewport — 100vh left the menu foot behind the toolbar */ left: 0; opacity: 0; overflow: hidden; padding: 146px 4.8vw 0; pointer-events: none; position: fixed; right: 0; top: 0; transform: translateY(-18px); transition: opacity 360ms var(--ease), transform 360ms var(--ease), visibility 0s 360ms; visibility: hidden; z-index: 20; } body.menu-is-open .menu-shell { opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; visibility: visible; } /* ---- MENU NAV (mockup redesign) --------------------------------------------- Each item is a cell. The current page sits in a BLACK box, the hovered item in a HOT (var(--hot)) box, the rest plain on the paper. Left-aligned label + desc. */ .menu-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); /* one column per menu item — Offbrand made it six */ gap: 0; width: 100%; margin: 0 0 clamp(16px, 2.4vh, 32px); } .menu-link { display: flex; flex-direction: column; padding: clamp(16px, 2.1vh, 26px) clamp(18px, 1.7vw, 32px); min-height: clamp(130px, 16vh, 176px); color: var(--black); text-align: left; transition: background 220ms var(--ease), color 220ms var(--ease); } .menu-label { font-family: var(--font-display); font-size: clamp(1.7rem, 2.3vw, 2.5rem); font-weight: 700; line-height: 1; } .menu-description { font-family: var(--font-body); font-size: clamp(0.95rem, 1.05vw, 1.12rem); line-height: 1.3; margin-top: clamp(8px, 1.2vh, 16px); color: inherit; opacity: 0.9; } .menu-rule { border-top: 1px solid currentColor; display: block; margin-top: auto; width: 56px; opacity: 0; transition: opacity 200ms var(--ease); } .menu-link[aria-current="page"] { background: var(--black); color: var(--white); } .menu-link:hover, .menu-link:focus-visible { background: var(--hot); color: var(--white); } .menu-link[aria-current="page"] .menu-rule, .menu-link:hover .menu-rule, .menu-link:focus-visible .menu-rule { opacity: 1; } .menu-note { position: absolute; bottom: clamp(28px, 7vh, 72px); left: 50%; transform: translateX(-50%); z-index: 4; max-width: 640px; font-family: var(--font-body); font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.45; text-align: center; color: var(--white); } /* ---- MENU PREVIEW (mockup redesign) ----------------------------------------- Purple stage: a big "the [Word]" wordmark in black, a looping wireframe ring SVG centred over it, the shared note pinned to the bottom in white. */ .menu-preview { flex: 1; min-height: 0; width: 100%; position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--hot) 86%, var(--white)) 0%, var(--hot) 54%, color-mix(in srgb, var(--hot) 72%, var(--black)) 100%); } .menu-preview__slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 200ms linear, visibility 0s 200ms; } .menu-preview__slide.is-active { opacity: 1; visibility: visible; transition: opacity 160ms linear, visibility 0s; } .menu-preview__wordmark { display: flex; align-items: center; gap: 0.16em; color: var(--black); white-space: nowrap; } .menu-preview__giant { font-family: var(--font-display); font-weight: 800; font-size: clamp(5rem, 15vw, 13.5rem); line-height: 0.86; letter-spacing: -0.02em; } .menu-preview__ring { position: absolute; top: 50%; left: 50%; width: clamp(280px, 30vw, 440px); height: clamp(280px, 30vw, 440px); transform: translate(-50%, -54%); z-index: 2; pointer-events: none; } .menu-preview__ring svg, .menu-preview__ring img { display: block; width: 100%; height: 100%; } .hero { align-items: center; background: var(--slide-bg); display: flex; flex-direction: column; justify-content: center; min-height: 100vh; overflow: hidden; padding: 150px 24px 70px; position: relative; text-align: center; } .hero-media { inset: 0; pointer-events: none; position: absolute; } .hero-media { height: 100%; object-fit: cover; width: 100%; z-index: 0; } .hero::after { bottom: 0; content: ""; height: 54px; left: 50%; position: absolute; transform: translateX(-50%); width: 1px; z-index: 2; } .hero > :not(.hero-media) { position: relative; z-index: 2; } .site-slide { --slide-bg: var(--paper); --slide-fg: var(--black); --slide-line: color-mix(in srgb, var(--black) 72%, transparent); --slide-link: var(--hot); --slide-muted: var(--muted); --slide-content-opacity: 1; --slide-content-translate-y: 0vh; --slide-opacity: 0; --slide-scale-x: 1; --slide-scale-y: 1; --slide-translate-y: 0px; background: var(--slide-bg); color: var(--slide-fg); height: 100%; inset: 0; min-height: 100%; opacity: var(--slide-opacity); pointer-events: none; position: absolute; transform: translate3d(0, var(--slide-translate-y), 0) scale(var(--slide-scale-x), var(--slide-scale-y)); transform-origin: center center; transition: opacity 280ms var(--ease), transform 460ms var(--ease); visibility: hidden; width: 100%; z-index: 0; } .hero > :not(.slide-bg), .case-content, .studio > :not(.slide-bg), .services > :not(.slide-bg), .contact > :not(.slide-bg) { opacity: var(--slide-content-opacity); transform: translate3d(0, var(--slide-content-translate-y), 0); transition: opacity 260ms linear, transform 420ms var(--ease); } .site-slide.text-light, .site-slide[data-text="light"] { --slide-fg: var(--white); --slide-line: color-mix(in srgb, var(--white) 78%, transparent); --slide-muted: color-mix(in srgb, var(--white) 72%, transparent); } .site-slide.text-dark, .site-slide[data-text="dark"] { --slide-fg: var(--black); --slide-line: color-mix(in srgb, var(--black) 72%, transparent); --slide-muted: var(--muted); } body[data-slide-transition="sticky-q"] .site-slide { background: transparent; will-change: opacity, transform; } /* ---- text-scroll + background-wipe transition -------------------------------- Each slide's background layers live in .slide-bg; the text (.case-content etc.) is a sibling that scrolls past it. During a step the incoming slide sits on top and its .slide-bg is revealed by a vertical wipe (--slide-wipe) while the outgoing background stays put. The text translates via --slide-content-translate-y. */ .site-slide > .slide-bg { position: absolute; inset: 0; z-index: 0; } /* The intro line under the boot art. Only the SEAT (margin/measure) lives here — the type voice (eyebrow face, 24px, forest) is set after the display pin near the end of the file, where it can out-!important it. */ .hero-title { /* The boot comp fills the frame (object-fit:cover), so its visible bottom sits at ~74vh on every landscape height. A fixed margin would let the gap collapse on tall screens (the comp drops faster than a centred line); this vh-tracking seat holds a steady ~55px of clear floor between the dog and the tagline. */ margin-top: calc(48vh + 160px); max-width: 700px; /* keeps the line to three at 24px, no lone "fluff." */ } /* MOBILE HERO (≤760px): the vertical boot gif fills the frame (wired via in the markup); "g'day" pins to the TOP and the copy pins to the BOTTOM, per the mockup — instead of the desktop centred stack. (The hero's
spacers are desktop-only, so they're ignored here because the title/copy are absolutely placed.) Prefixed for specificity over the themed .hero rules later in the file. */ @media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) { body[data-slide-transition="native"] .hero::after { display: none; } /* drop the scroll line */ body[data-slide-transition="native"] .hero-copy br { display: none; } /* drop the desktop
spacing */ body[data-slide-transition="native"] .hero-title { position: absolute; top: auto; bottom: clamp(42px, 7svh, 80px); /* sit in the comp's clear lower space, any viewport height */ left: 0; right: 0; z-index: 2; margin: 0 auto; /* cancel the desktop margin-top:500px (it pushed the line mid-screen on tall tablets) */ padding: 0 28px; max-width: 32ch; /* phone keeps its ~4-line wrap; tablet stays a readable column */ } body[data-slide-transition="native"] .hero-copy { position: absolute; bottom: clamp(42px, 7svh, 80px); left: 0; right: 0; z-index: 2; margin: 0 auto; padding: 0 24px; max-width: 30ch; font-size: clamp(1.2rem, 5vw, 1.5rem); } } .work-stack { background: var(--slide-bg, var(--paper)); } .work-panel { --slide-bg: var(--black); --slide-fg: var(--white); background: var(--slide-bg); color: var(--slide-fg); min-height: 100vh; overflow: hidden; position: absolute; } .case-content { left: 10.8vw; max-width: min(42vw, 700px); position: absolute; /* svh, not vh: the deck frame is 100svh, so frame-internal offsets must use the same unit or iOS (where vh = toolbar-collapsed height) drifts everything down */ top: 29vh; top: 29svh; z-index: 2; } .case-content .panel-eyebrow { margin-bottom: 50px; } .case-title { font-size: clamp(4.8rem, 6.2vw, 6rem); font-weight: 750; letter-spacing: -3px; line-height: 1; margin: 0 0 54px; } .case-copy { border-top: 1px solid currentColor; font-family: var(--font-body); font-size: clamp(1.05rem, 1.45vw, 1.55rem); line-height: 1.42; margin: 0; max-width: 450px; padding-top: 32px; } /* Full-bleed photo background for a work panel (replaces the generative canvas). Sits beneath the panel-shade and the case-content (z-index 2). */ .panel-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ---------------------------------------------------------------------------- Two more homepage slide types. (a) .work-panel--plain — full-bleed image (or a solid --slide-bg colour) + text; no diagonal, no mask. Drop in a .panel-photo for an image, or omit it and set style="--slide-bg:#xxx" for a colour field. (b) .work-panel--glass — full-bleed image with a frosted-glass Q mask: a diagonal plane + the Q circle blur the image beneath (backdrop-filter) for a glass lift. Reuses the feature Q geometry; needs data-align-diagonal + a [data-q-stem]. -------------------------------------------------------------------------- */ .work-panel--plain { isolation: isolate; } .work-panel--plain .panel-photo { z-index: 0; } /* solid-colour fill for a Full Colour plain slide (the deck forces .site-slide bg transparent, so the colour needs its own layer rather than --slide-bg) */ .work-panel--plain .panel-colour { position: absolute; inset: 0; z-index: 0; } .work-panel--plain .panel-shade { z-index: 1; background: linear-gradient(95deg, color-mix(in srgb, var(--black) 62%, transparent), color-mix(in srgb, var(--black) 30%, transparent) 44%, color-mix(in srgb, var(--black) 5%, transparent) 74%); } .work-panel--plain .case-content { z-index: 2; } /* (a2) .work-panel--construct — flat token colour + the hairline brand construction (Joe's mock, 2026-06-12). The construct box uses the DECK'S OWN geometry vars, so its hairline disc sits exactly where the neighbouring slides' baked discs sit, and its corner diagonal is collinear with the wipe seam (identical box math to the Q mask weld). */ .work-panel--construct { isolation: isolate; } .work-panel--construct .panel-colour { position: absolute; inset: 0; z-index: 0; } .work-panel--construct .case-content { z-index: 2; } .work-panel--construct .slide-construct { position: absolute; z-index: 1; width: var(--q-logo-size); aspect-ratio: 1 / 1; left: calc(var(--q-cx) - var(--q-logo-size) / 2 + var(--q-logo-x)); top: calc(var(--q-cy) - var(--q-logo-size) / 2 + var(--q-logo-y)); color: color-mix(in srgb, var(--white) 28%, transparent); pointer-events: none; } /* the mock's hairline rule between title and copy (construct slide only) */ .work-panel--construct .case-copy { border-top: 1px solid color-mix(in srgb, var(--white) 38%, transparent); padding-top: 20px; } /* (c) .work-panel--imgcolour — Image + Colour diagonal: full-bleed image with a solid COLOUR half on the top-right diagonal (--feature-color), + a Q hero IMAGE on top (.case-art > .case-image — editorial Q or Q-only). --rev flips the colour half. */ /* ---- Unified surface-mask geometry (shared by Image+Colour and Image+Frost) ---- ONE fixed geometry so the masks are pixel-perfect complements: a 45deg diagonal through the circle centre + the circle, identical on every diagonal slide. */ .work-panel--imgcolour, .work-panel--glass, .work-panel--construct { isolation: isolate; /* locked mask geometry (dialed in via ?maskalign) — identical on every diagonal slide so the two masks are exact complements (the construct slide consumes the same vars to weld its hairline disc + diagonal to the deck geometry). Vertical values are svh (the deck frame's own unit): iOS vh is the toolbar-COLLAPSED height, which pushed the whole Q geometry ~18% low inside the 100svh frame on iPhones. */ /* (--q-cx, --q-cy) = where the CIRCLE sits on screen; --q-r derives from the logo size so the CSS mask circle always coincides with the art's baked disc. */ --q-cx: 64.36vw; --q-cy: 48.89svh; /* V2 TEMPLATE CONTRACT (Joe, 2026-06-12 pm): the brand line runs CORNER TO CORNER of the square canvas (x - y = 0), so --q-stem-edge is 0 by construction and never needs measuring. The baked disc sits at canvas (629.5, 570.5) r399 — i.e. offset +--q-art-circle (fraction) along (+x, -y) from canvas centre, radius --q-circle-r of the canvas. The logo box is nudged so the disc lands exactly on (--q-cx, --q-cy); the seam stays glued to the box's own corner diagonal under ANY translation (offset = lx - ly). A v1-era asset (line at -0.04875, disc centred) pins itself with inline --q-stem-edge: -0.04875; --q-logo-x: 0px; --q-logo-y: 0px on its slide. */ --q-art-circle: 0.02458; --q-circle-r: 0.3325; --q-r: calc(var(--q-circle-r) * var(--q-logo-size)); --q-logo-size: 54.01vw; --q-logo-x: calc(-1 * var(--q-art-circle) * var(--q-logo-size)); --q-logo-y: calc(var(--q-art-circle) * var(--q-logo-size)); --q-stem-edge: 0; --diag-offset: calc(var(--q-logo-x) - var(--q-logo-y) + var(--q-stem-edge) * var(--q-logo-size)); --diag-top: calc(var(--q-cx) - var(--q-cy) + var(--diag-offset)); --diag-bottom: calc(var(--q-cx) + 100svh - var(--q-cy) + var(--diag-offset)); --diag-color: polygon(var(--diag-top) 0, 100% 0, 100% 100%, var(--diag-bottom) 100%); --diag-image: polygon(0 0, var(--diag-top) 0, var(--diag-bottom) 100%, 0 100%); } /* The surface is ONE shape = diagonal-half XOR circle, drawn as two pieces: (a) the triangle with the circle punched out, (b) the circle wedge in the OTHER triangle. Together = D XOR C; --rev swaps the triangles → the exact inverse mask. Only the FILL changes per treatment (colour vs blur) — never an edge. */ .slide-surface__a, .slide-surface__b { position: absolute; inset: 0; z-index: 1; } .slide-surface__a { clip-path: var(--diag-color); -webkit-mask: radial-gradient(circle var(--q-r) at var(--q-cx) var(--q-cy), transparent 99.4%, #000 100%); mask: radial-gradient(circle var(--q-r) at var(--q-cx) var(--q-cy), transparent 99.4%, #000 100%); } .slide-surface__b { clip-path: var(--diag-image); -webkit-mask: radial-gradient(circle var(--q-r) at var(--q-cx) var(--q-cy), #000 99.4%, transparent 100%); mask: radial-gradient(circle var(--q-r) at var(--q-cx) var(--q-cy), #000 99.4%, transparent 100%); } .work-panel--rev .slide-surface__a { clip-path: var(--diag-image); } .work-panel--rev .slide-surface__b { clip-path: var(--diag-color); } /* the floating Q logo — independent, above the surface */ .q-graphic { position: absolute; left: var(--q-cx); top: var(--q-cy); width: var(--q-logo-size); height: var(--q-logo-size); transform: translate(calc(-50% + var(--q-logo-x)), calc(-50% + var(--q-logo-y))); object-fit: contain; z-index: 2; pointer-events: none; } /* Video q-graphic (Taguchi slide hero): the square mp4 has no alpha, so clip it to the brand Q disc with the shared mask; a static poster covers first paint and prefers-reduced-motion (where the video is swapped out for the still). */ .q-graphic--video, .q-graphic--motionless { -webkit-mask: url("/assets/brand/q-hero-mask.svg") center / contain no-repeat; mask: url("/assets/brand/q-hero-mask.svg") center / contain no-repeat; } .q-graphic--motionless { display: none; } @media (prefers-reduced-motion: reduce) { .q-graphic--video { display: none; } .q-graphic--motionless { display: block; } } /* Image + Colour — surface filled with a flat colour */ .work-panel--imgcolour .panel-photo { z-index: 0; } .work-panel--imgcolour .slide-surface__a, .work-panel--imgcolour .slide-surface__b { background: var(--feature-color, var(--blue)); } .work-panel--imgcolour .panel-shade { z-index: 2; background: radial-gradient(120% 90% at 0% 42%, color-mix(in srgb, var(--black) 50%, transparent), transparent 56%); } .work-panel--imgcolour .case-content { z-index: 3; } /* Image + Frost — the SAME surface-mask shape, but the surface is a BLURRED copy of the background (clip-safe, no backdrop-filter) + a milky tint; the cutout shows the sharp photo. Geometry comes from the shared locked block above; --rev handled there. */ .work-panel--glass .panel-photo { z-index: 0; } .work-panel--glass .slide-surface__a > .surface-blur, .work-panel--glass .slide-surface__b > .surface-blur { position: absolute; top: -6%; left: -6%; width: 112%; height: 112%; object-fit: cover; object-position: center; filter: blur(var(--frost-blur, 26px)) brightness(1.04) saturate(1.05); } .work-panel--glass .slide-surface__a::after, .work-panel--glass .slide-surface__b::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--white) 10%, transparent); } .work-panel--glass .panel-shade { z-index: 2; background: radial-gradient(120% 90% at 0% 42%, color-mix(in srgb, var(--black) 50%, transparent), transparent 56%); } .work-panel--glass .case-content { z-index: 3; } .panel-shade { background: linear-gradient(90deg, color-mix(in srgb, var(--black) 76%, transparent), color-mix(in srgb, var(--black) 28%, transparent) 54%, color-mix(in srgb, var(--black) 12%, transparent)); inset: 0; position: absolute; } /* Optional gradient overlay for a slide background. Add `slide-bg--gradient` to a slide's .slide-bg div to lay a left-to-right dark scrim over the background media (and Q-graphic) for text legibility — it sits above the background but below the slide text. Override --slide-bg-gradient on the slide to change angle/colour. */ .slide-bg--gradient::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--slide-bg-gradient, linear-gradient(90deg,color-mix(in srgb, var(--black) 45%, transparent) 0%, transparent 70%)); mix-blend-mode: multiply; pointer-events: none; } .work-panel:hover .panel-line, .work-panel:focus-visible .panel-line { transform: scaleX(1.6); } .panel-eyebrow { align-items: center; display: flex; font-size: 0.9rem; font-weight: 900; gap: 14px; line-height: 1; margin-bottom: 92px; } .panel-line { border-top: 1px solid currentColor; display: inline-block; transform-origin: right center; /* grow leftward on hover so the dash never rides over the label */ transition: transform 340ms var(--ease); width: 74px; } .studio, .services, .contact { background: var(--slide-bg); color: var(--slide-fg); min-height: 100vh; overflow: hidden; padding: 118px 7vw; } .studio { display: grid; gap: 42px; grid-template-columns: 1fr 1.5fr; } .section-kicker { align-items: center; display: flex; font-size: 0.9rem; font-weight: 900; gap: 18px; line-height: 1; margin: 0; } .section-kicker::before { border-top: 1px solid currentColor; content: ""; display: inline-block; width: 100px; } .studio h2, .services h2, .contact h2 { font-size: 3.5rem; font-weight: 900; line-height: 1.02; margin: 0; } .studio p:not(.section-kicker) { font-family: var(--font-body); font-size: 1.25rem; grid-column: 2; line-height: 1.65; margin: 0; max-width: 720px; } .services .section-kicker, .services h2 { margin-bottom: 42px; } .contact h2 { margin: 46px 0 40px; max-width: 820px; } .contact a { color: var(--slide-link); font-size: 1.4rem; font-weight: 900; } .studio--origin { align-content: center; display: grid; /* slimmer spacer column (Joe's 2026-06-12 mock: content sits further left so the staggered headline has room to run) */ grid-template-columns: minmax(80px, 0.13fr) minmax(0, 1fr); grid-template-rows: 1fr auto; isolation: isolate; position: absolute; } .studio--origin::before { background: linear-gradient(126deg, transparent 1% 17%, var(--aqua) 17% 33%, transparent 17% 100%); content: ""; inset: 0; opacity: 0.88; position: absolute; z-index: 0; } .studio--origin::after { content: ""; inset: 0; opacity: 0.88; position: absolute; z-index: 0; } .studio-layout, .studio-signals { position: relative; z-index: 1; } .studio-layout { align-self: center; display: grid; gap: 42px 5vw; grid-column: 1 / -1; grid-template-columns: minmax(80px, 0.13fr) minmax(0, 1fr); } .studio--origin .section-kicker { color: var(--forest); } .studio--origin h2 { font-size: clamp(4rem, 7.2vw, 8.2rem); grid-column: 2; letter-spacing: 0; line-height: 0.96; max-width: none; } /* Staggered headline (Joe's mock, 2026-06-12): each line its own block, the middle line blush and pushed deep right, the last a half-step in. */ .studio--origin h2 .studio-line { display: block; } .studio--origin h2 .studio-line:nth-child(2) { color: var(--blush); margin-left: clamp(44px, 18vw, 300px); } .studio--origin h2 .studio-line:nth-child(3) { margin-left: clamp(16px, 6.4vw, 105px); } .studio-copy { border-top: 1px solid color-mix(in srgb, var(--white) 72%, transparent); display: grid; gap: 24px; grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 940px; padding-top: 30px; } .studio--origin .studio-copy p { color: color-mix(in srgb, var(--white) 82%, transparent); font-family: var(--font-body); font-size: clamp(1rem, 1.35vw, 1.35rem); grid-column: auto; line-height: 1.5; margin: 0; max-width: none; } .studio-signals { align-self: end; border-top: 1px solid color-mix(in srgb, var(--white) 24%, transparent); display: grid; gap: 0; grid-column: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; max-width: 940px; } .studio-signals div { padding: 24px 24px 0 0; } .studio-signals div:last-child { border-right: 0; padding-right: 0; } .studio-signals dt { color: var(--white); font-size: 0.9rem; font-weight: 900; line-height: 1.05; margin-bottom: 10px; text-transform: uppercase; } .studio-signals dd { color: color-mix(in srgb, var(--white) 70%, transparent); font-family: var(--font-body); font-size: 1.03rem; line-height: 1.4; margin: 0; } .services--model { display: grid; gap: 28px; grid-template-rows: auto 1fr auto; isolation: isolate; position: absolute; } .services--model::before { background: linear-gradient(116deg, transparent 0 60%, white 60% 100%); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 0; } .services--model .section-kicker { color: var(--hot); margin: 0; } .services--model h2 { font-size: clamp(3.8rem, 8.2vw, 9.2rem); grid-column: 2; line-height: 0.9; margin: 0; max-width: 1040px; } @keyframes q-shutter-forward { 0% { transform: translate3d(-132%, 0, 0) skewX(-10deg); } 42% { transform: translate3d(-8%, 0, 0) skewX(-10deg); } 58% { transform: translate3d(8%, 0, 0) skewX(-10deg); } 100% { transform: translate3d(132%, 0, 0) skewX(-10deg); } } @keyframes q-shutter-back { 0% { transform: translate3d(132%, 0, 0) skewX(-10deg); } 42% { transform: translate3d(8%, 0, 0) skewX(-10deg); } 58% { transform: translate3d(-8%, 0, 0) skewX(-10deg); } 100% { transform: translate3d(-132%, 0, 0) skewX(-10deg); } } @keyframes slide-enter-pop { 0% { filter: saturate(0.96); transform: scale(1.035); } 62% { transform: scale(0.996); } 100% { filter: none; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .slide-transition { animation: none; } } @media (min-width: 760px) { .menu-label { font-size: 2.35rem; } } @media (min-width: 1120px) { .menu-label { font-size: 2.55rem; } } @media (min-width: 901px) and (max-height: 760px) { .brand-toggle { top: 24px; } .studio--origin, .services--model { padding-bottom: 34px; padding-top: 96px; } .studio--origin h2 { font-size: clamp(4rem, 6.8vw, 7.1rem); } .studio-copy { padding-top: 22px; } .studio-signals div { padding-top: 18px; } .services--model { gap: 18px; } .services--model h2 { font-size: clamp(4.4rem, 6.7vw, 7.1rem); } } @media (max-width: 900px) { .brand-toggle { top: 24px; } .menu-shell { overflow-y: auto; padding: 112px 28px 0; } .menu-grid { align-content: start; gap: 0; grid-template-columns: 1fr; } .menu-link { border-top: 1px solid color-mix(in srgb, var(--black) 18%, transparent); min-height: 0; padding: 18px 0; text-align: left; } .menu-link:last-child { border-bottom: 1px solid color-mix(in srgb, var(--black) 18%, transparent); } .menu-label { font-size: 3rem; } .menu-description { margin-top: 4px; } .menu-rule { display: none; } .menu-note { margin: 18px 0 28px; text-align: left; } .menu-preview { flex: 0 0 260px; margin: 0 -28px; max-height: none; min-height: 260px; width: calc(100% + 56px); } .menu-preview__giant { font-size: 5.6rem; } .preview-service { font-size: 0.95rem; padding: 10px 12px; } .hero { padding-top: 128px; } .panel-eyebrow { margin-bottom: 64px; } .case-content { left: 28px; max-width: calc(100vw - 56px); top: 36svh; } .case-content .panel-eyebrow { margin-bottom: 28px; } .case-title { font-size: clamp(4rem, 18vw, 7rem); margin-bottom: 30px; } .case-copy { font-size: 1.05rem; max-width: 540px; padding-top: 24px; } .studio { display: block; } .studio h2, .services h2, .contact h2 { font-size: 2.85rem; margin-top: 34px; } .studio p:not(.section-kicker) { margin-top: 28px; } .studio--origin { align-content: center; display: grid; grid-template-columns: 1fr; padding: 104px 28px 44px; } .studio-layout { display: block; grid-column: 1; } .studio--origin h2 { font-size: clamp(3.6rem, 13vw, 6rem); margin-top: 34px; } .studio-copy { gap: 16px; grid-column: 1; grid-template-columns: 1fr; margin-top: 28px; padding-top: 22px; } .studio--origin .studio-copy p { margin-top: 0; } .studio-signals { grid-column: 1; grid-template-columns: 1fr; margin-top: 28px; } .studio-signals div { border-bottom: 1px solid color-mix(in srgb, var(--white) 18%, transparent); border-right: 0; display: grid; gap: 12px; grid-template-columns: minmax(130px, 0.42fr) 1fr; padding: 14px 0; } .studio-signals div:last-child { border-bottom: 0; } .studio-signals dt { margin: 0; } .services--model { gap: 18px; padding: 102px 28px 34px; } .services--model h2 { font-size: clamp(3.1rem, 11vw, 5.8rem); margin: 30px 0 0; } } @media (max-width: 520px) { .brand-toggle { height: 62px; top: 18px; width: 76px; } body.menu-is-open .brand-toggle { width: 146px; } .q-logo-mark { height: 32px; width: 32px; } .brand-wordmark { width: 116px; } .case-content { top: 48svh; } .case-content .panel-eyebrow { font-size: 0.78rem; gap: 10px; margin-bottom: 20px; } .case-content .panel-line { width: 46px; } .case-title { font-size: 3.35rem; margin-bottom: 22px; } .case-copy { font-size: 1rem; line-height: 1.34; padding-top: 20px; } .panel-shade { background: color-mix(in srgb, var(--black) 62%, transparent); } .menu-preview { flex-basis: 214px; min-height: 214px; } .menu-preview__giant { font-size: 4.5rem; } .preview-number, .preview-tag { left: 28px; } .preview-service--one { right: 8%; top: 16%; } .preview-service--two { left: 8%; top: 38%; } .preview-service--three { right: 10%; top: 62%; } .studio, .services, .contact { padding: 86px 28px; } .services { padding: 86px 24px 42px; } .services .section-kicker, .services h2 { margin-bottom: 24px; } .services h2 { font-size: 2.35rem; } .studio--origin { padding: 86px 22px 28px; } .studio--origin h2 { font-size: 2.9rem; } .studio-copy { margin-top: 18px; } .studio--origin .studio-copy p { font-size: 0.98rem; line-height: 1.38; } .studio-signals { margin-top: 18px; } .studio-signals div { gap: 8px; grid-template-columns: 112px 1fr; padding: 10px 0; } .studio-signals dt { font-size: 0.72rem; } .studio-signals dd { font-size: 0.88rem; } .services--model { gap: 12px; padding: 86px 18px 22px; } .services--model .section-kicker { margin-bottom: 0; } .services--model h2 { font-size: 2.55rem; margin: 20px 0 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; } } .menu-link[aria-current="page"] { color: var(--hot); } .case-open, .page-pill { align-items: center; border: 1px solid currentColor; display: inline-flex; font-family: var(--font-eyebrow); font-size: 0.78rem; font-weight: 900; justify-content: center; letter-spacing: 0; line-height: 1; min-height: 44px; padding: 0 18px; text-transform: uppercase; transition: background 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease); width: fit-content; } .case-open { color: var(--white); margin-top: 28px; } .case-open:hover, .case-open:focus-visible, .page-pill:hover, .page-pill:focus-visible { background: currentColor; color: var(--slide-bg, var(--paper)); transform: translateY(-2px); } .page-pill--dark { color: var(--black); } body.page-mode { background: var(--forest); color: var(--black); height: auto; min-height: 100%; /* MUST stay overflow:visible. overflow-y:auto made body a second, zero- overflow scroll container nested in the html scroller, and the base body overscroll-behavior:none turned it into a scroll-chaining boundary: trackpad gestures latched onto body, found nothing to scroll, and were forbidden from chaining up to html — wheel-dead subpages in Chrome (synthetic/CDP wheel and Safari pick the html scroller, masking it). */ overflow: visible; overscroll-behavior: auto; } body.page-mode main#top { background: var(--page-bg, var(--paper)); height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; transition: none; } body.page-mode .site-header { mix-blend-mode: difference; } body.page-mode.menu-is-open .site-header { mix-blend-mode: normal; } .page-main { isolation: isolate; } .work-index-card { --case-accent: var(--hot); --case-field: var(--paper); background: linear-gradient(116deg, transparent 0 58%, color-mix(in srgb, var(--case-accent) 82%, transparent) 58% 100%), var(--case-field); color: var(--black); display: grid; grid-template-rows: auto 1fr auto auto auto; min-height: clamp(420px, 44vw, 640px); overflow: hidden; padding: clamp(24px, 3vw, 46px); position: relative; } .work-index-card:nth-child(1), .work-index-card:nth-child(4) { grid-column: span 2; min-height: clamp(520px, 54vw, 780px); } .work-index-card:nth-child(2), .work-index-card:nth-child(3), .work-index-card:nth-child(6) { color: var(--white); } .work-index-card::after { background: var(--black); content: ""; height: 8px; left: 0; position: absolute; top: 0; transform: scaleX(0.18); transform-origin: left center; transition: transform 320ms var(--ease); width: 100%; } .work-index-card img { filter: drop-shadow(0 28px 40px color-mix(in srgb, var(--black) 22%, transparent)); max-height: 78%; max-width: min(58%, 560px); object-fit: contain; position: absolute; right: clamp(24px, 5vw, 80px); top: 50%; transform: translateY(-50%) rotate(-3deg) scale(0.92); transition: transform 520ms var(--ease), filter 520ms var(--ease); width: auto; z-index: 0; } .work-index-card__number, .work-index-card__meta, .work-index-card strong, .work-index-card > span:last-child { position: relative; z-index: 1; } .work-index-card__number, .work-index-card__meta { font-family: var(--font-display); font-size: 0.82rem; font-weight: 900; line-height: 1; text-transform: uppercase; } .work-index-card__meta { align-self: end; border-top: 1px solid currentColor; max-width: 320px; padding-top: 16px; } .work-index-card strong { align-self: end; font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 7.5rem); font-weight: 900; letter-spacing: 0; line-height: 0.86; max-width: 720px; } .work-index-card > span:last-child { font-size: clamp(1.05rem, 1.5vw, 1.38rem); line-height: 1.34; margin-top: 20px; max-width: 500px; } .work-index-card:hover::after, .work-index-card:focus-visible::after { transform: scaleX(1); } .work-index-card:hover img, .work-index-card:focus-visible img { filter: drop-shadow(0 36px 48px color-mix(in srgb, var(--black) 32%, transparent)) saturate(1.12); transform: translateY(-50%) rotate(0deg) scale(1); } .page-cta h2 { font-family: var(--font-display); font-size: clamp(3.4rem, 7.6vw, 9rem); font-weight: 900; line-height: 0.9; margin: 0; } .page-cta { background: radial-gradient(circle at 82% 24%, var(--forest) 0 7px, transparent 8px), var(--paper); color: var(--black); display: grid; gap: 34px; padding: clamp(72px, 10vw, 150px) 7vw; padding-left: 150px; } .page-cta .section-kicker { color: var(--hot); } .page-cta h2 { max-width: 1080px; } @media (max-width: 900px) { body.page-mode .site-header { mix-blend-mode: normal; } .work-index-card, .work-index-card:nth-child(1), .work-index-card:nth-child(4) { grid-column: auto; min-height: 500px; padding: 28px; } .work-index-card img { max-height: 50%; max-width: 72%; } .page-cta { padding: 62px 28px; } } @media (max-width: 520px) { .work-index-card, .work-index-card:nth-child(1), .work-index-card:nth-child(4) { min-height: 460px; padding: 24px; } .work-index-card strong { font-size: clamp(2.4rem, 12vw, 4.5rem); } } /* 2026 polish pass: sleeker agency system */ body { background: var(--paper); color: var(--black); font-feature-settings: "kern" 1; text-rendering: optimizeLegibility; } body:not(.page-mode) { background: var(--black); } :focus-visible { outline: 2px solid var(--forest); outline-offset: 5px; } .brand-toggle { border-radius: 999px; height: 76px; top: 36px; width: 76px; } body.logo-is-hovered:not(.menu-is-open) .brand-toggle::before, body.page-mode .brand-toggle::before { opacity: 0.86; transform: scale(1); } body.page-mode .brand-toggle::before { opacity: 0.72; } body.menu-is-open .brand-toggle::before { opacity: 0; } .q-logo-mark { height: 42px; width: 42px; } .brand-wordmark { width: 128px; } main#top::before { border-color: var(--paper); inset: clamp(18px, 3.2vw, 46px); } .menu-shell { background: var(--white); background-size: 25vw 100%, 100% 96px, auto; padding: 132px 5vw 0; } .menu-grid { gap: clamp(14px, 2vw, 32px); max-width: 1180px; } .menu-link { min-height: 112px; } .menu-label { font-size: clamp(2rem, 3.2vw, 3.75rem); font-weight: 800; letter-spacing: 0; line-height: 0.92; } .menu-description { color: color-mix(in srgb, var(--black) 62%, transparent); font-size: 1.05rem; margin-top: 10px; } .menu-rule { margin-top: 26px; opacity: 0.3; width: 36px; } .menu-link:hover .menu-label, .menu-link:focus-visible .menu-label, .menu-link[aria-current="page"] .menu-label { transform: translateY(-5px); } .menu-note { color: color-mix(in srgb, var(--black) 68%, transparent); font-size: 1.18rem; margin-bottom: 34px; } .menu-preview { background: var(--black); box-shadow: 0 -1px 0 color-mix(in srgb, var(--black) 15%, transparent); max-height: 48vh; min-height: 320px; overflow: hidden; } .menu-preview__giant { font-size: clamp(6.8rem, 15vw, 15rem); font-weight: 800; letter-spacing: 0; } .menu-preview__slide--home { background: linear-gradient(116deg, transparent 0 58%, color-mix(in srgb, var(--hot) 76%, transparent) 58% 100%), var(--black); color: var(--white); } .preview-service { border-color: color-mix(in srgb, currentColor 56%, transparent); font-weight: 800; } .hero { justify-content: center; padding: 140px 24px 64px; } .case-open, .page-pill { border-color: color-mix(in srgb, currentColor 44%, transparent); border-radius: 999px; font-size: 0.72rem; letter-spacing: 0; min-height: 46px; padding: 0 20px; } .panel-eyebrow, .section-kicker, .work-index-card__number, .work-index-card__meta { font-size: 0.72rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } .section-kicker::before { opacity: 0.52; width: clamp(56px, 7vw, 96px); } .case-content { left: clamp(32px, 8vw, 126px); max-width: min(44vw, 680px); top: 28svh; } .case-title, .studio h2, .services h2, .contact h2 { font-weight: 800; letter-spacing: -3px; } .case-title { font-size: clamp(4rem, 6.2vw, 7.6rem); line-height: 1; margin-bottom: 34px; } .case-copy { color: color-mix(in srgb, var(--white) 84%, transparent); font-size: clamp(1.05rem, 1.35vw, 1.36rem); line-height: 1.42; max-width: 480px; padding-top: 24px; } .case-open { background: color-mix(in srgb, var(--white) 8%, transparent); color: var(--white); } .case-open:hover, .case-open:focus-visible { background: var(--white); color: var(--black); } .panel-shade { background: linear-gradient(90deg, color-mix(in srgb, var(--black) 84%, transparent), color-mix(in srgb, var(--black) 32%, transparent) 56%, color-mix(in srgb, var(--black) 6%, transparent)), linear-gradient(180deg, color-mix(in srgb, var(--black) 8%, transparent), color-mix(in srgb, var(--black) 28%, transparent)); } .studio--origin::before { opacity: 0.62; } .services--model::before { opacity: 0.75; } .studio--origin h2, .services--model h2 { font-size: clamp(3.8rem, 7.4vw, 8.6rem); line-height: 0.82; } .studio-copy { border-color: color-mix(in srgb, currentColor 28%, transparent); } body.page-mode .site-header { mix-blend-mode: normal; } .work-index-card, .work-index-card:nth-child(1), .work-index-card:nth-child(4) { background: linear-gradient(116deg, transparent 0 57%, color-mix(in srgb, var(--case-accent) 54%, transparent) 57% 100%), var(--paper); border-top: 1px solid var(--hairline-dark); color: var(--black); display: grid; grid-template-columns: minmax(64px, 0.12fr) minmax(0, 0.82fr) minmax(320px, 0.64fr); min-height: min(680px, 82vh); padding: clamp(34px, 5vw, 74px) 7vw; } .work-index-card:nth-child(2), .work-index-card:nth-child(3), .work-index-card:nth-child(6) { color: var(--white); } .work-index-card:nth-child(2), .work-index-card:nth-child(3), .work-index-card:nth-child(6) { background: linear-gradient(116deg, transparent 0 57%, color-mix(in srgb, var(--case-accent) 48%, transparent) 57% 100%), var(--black); } .work-index-card::after { background: currentColor; height: 3px; opacity: 0.38; } .work-index-card__number { grid-column: 1; grid-row: 1 / span 4; } .work-index-card__meta, .work-index-card strong, .work-index-card > span:last-child { grid-column: 2; } .work-index-card__meta { align-self: end; border-color: color-mix(in srgb, currentColor 28%, transparent); max-width: 360px; } .work-index-card strong { align-self: end; font-size: clamp(3.2rem, 6.7vw, 8.2rem); font-weight: 800; letter-spacing: 0; line-height: 0.82; max-width: 820px; } .work-index-card > span:last-child { color: color-mix(in srgb, currentColor 78%, transparent); font-size: clamp(1.05rem, 1.28vw, 1.24rem); line-height: 1.42; max-width: 520px; } .work-index-card img { align-self: center; grid-column: 3; grid-row: 1 / span 5; justify-self: end; max-height: min(480px, 62vh); max-width: min(440px, 34vw); position: static; transform: rotate(-2deg) scale(0.96); } .work-index-card:hover img, .work-index-card:focus-visible img { transform: rotate(0deg) scale(1.02); } .page-cta { background: linear-gradient(116deg, transparent 0 57%, color-mix(in srgb, var(--black) 8%, transparent) 57% 100%), var(--paper); color: var(--black); } .page-cta h2 { font-size: clamp(3rem, 6.2vw, 7.2rem); font-weight: 800; letter-spacing: 0; } @keyframes pageRise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @media (min-width: 901px) and (max-height: 760px) { .work-index-card, .work-index-card:nth-child(1), .work-index-card:nth-child(4) { min-height: 620px; } } @media (max-width: 900px) { .brand-toggle { top: 18px; } .menu-shell { background: var(--white); padding: 106px 28px 0; } .menu-label { font-size: clamp(2.85rem, 12vw, 4.2rem); } .menu-preview { min-height: 220px; } .case-content { left: 28px; max-width: calc(100vw - 56px); top: auto; bottom: 54px; } .case-title { font-size: clamp(3.2rem, 15vw, 5.6rem); } .work-index-card, .work-index-card:nth-child(1), .work-index-card:nth-child(4) { grid-template-columns: 1fr; min-height: 580px; padding: 28px 24px; } .work-index-card__number, .work-index-card__meta, .work-index-card strong, .work-index-card > span:last-child, .work-index-card img { grid-column: 1; } .work-index-card img { grid-row: 2; justify-self: end; margin: 8px 0 18px; max-height: 240px; max-width: min(74vw, 320px); } .work-index-card strong { font-size: clamp(2.85rem, 13vw, 5.2rem); grid-row: 3; } .work-index-card__meta { grid-row: 4; margin-top: 18px; } .work-index-card > span:last-child { grid-row: 5; } } @media (max-width: 520px) { .q-logo-mark { height: 34px; width: 34px; } .case-content { bottom: 38px; } .case-copy { font-size: 0.98rem; } } /* Senior agency system: editorial structure, sharper hierarchy */ :root { /* ========================================================================== PALETTE — Joe's hierarchy chart (June 2026). Each family runs big-circle → small-circle: lead with the first value, support with the second, season with the third. The micro accents are the tiny dots — punctuation, never paragraphs. Premium = mostly neutrals + one family per surface, accents earning their place. ========================================================================== */ /* Neutrals — the dominant tier (surfaces) */ --white: oklch(98.4% 0.01 82); --actual-white: #fff; /* pure white — case-hero headline/card + facts strip (Joe); --white is warm */ --off-white: color(srgb 0.97 0.97 0.97); /* neutral off-white — offbrand featured + tiles */ --paper: color(srgb 0.9617 0.9569 0.9307); --sand: #eadbc8; --paper-deep: oklch(91.5% 0.026 80); /* legacy deep paper, sand-adjacent */ /* CORE COLOURS — numbered ramps (100 lightest to 900 deepest). The ramp is the source of truth; the semantic names are anchors into it and the old shade names stay as aliases so nothing breaks. Existing brand colours are kept verbatim as steps; only the lighter/deeper steps are new. */ /* Green — primary brand family */ --green-100: #dcebe4; /* new: pale mint wash */ --green-300: #9fc6b6; /* new: light sage */ --green-500: #4f8e7d; /* was sage */ --green-700: #0f6b5f; /* was teal */ --green-900: #003129; /* was forest */ --forest: var(--green-900); /* anchor: deep green, dark CTA bands, origin story */ --teal: var(--green-700); /* alias */ --sage: var(--green-500); /* alias */ --aqua: var(--green-700); /* legacy alias */ /* Pink — soft / coral family */ --pink-100: #fdeeed; /* new: palest blush */ --pink-300: #f9dcdb; /* was blush */ --pink-500: #f7918a; /* was coral */ --pink-700: #c4716c; /* was rose */ --pink-900: #7e4744; /* new: deep rose */ --blush: var(--pink-300); /* anchor: soft pink, work hero panel, offbrand circles */ --coral: var(--pink-500); /* alias */ --rose: var(--pink-700); /* alias */ --ember: var(--pink-500); /* legacy alias */ /* Purple — accent family (500 is the vivid --hot) */ --purple-100: #ece3f8; /* new: pale lavender wash */ --purple-300: #b9a0e6; /* new: light lavender */ --purple-500: oklch(0.449422 0.247797 294.3103); /* was hot */ --purple-700: #3a1c6e; /* new: deep violet */ --purple-900: #230d3b; /* was aubergine */ --hot: var(--purple-500); /* anchor: vivid accent, links + kickers */ --aubergine: var(--purple-900); /* anchor: deep purple */ /* Micro accents — the tiny dots; use sparingly */ --blue: oklch(53% 0.238 265); --flame: #ce3a0c; --amber: #d18d0a; --sun: var(--amber); /* legacy name, now points at the chart amber */ /* Darks — type and dark surfaces */ --black: oklch(11.5% 0.014 288); --ink: oklch(15% 0.014 288); --graphite: #46414b; --muted: oklch(52% 0.018 286); --warm-muted: #c5bca5; --ink-muted: #9e9687; /* quiet warm-grey for secondary text (Joe) */ /* Client brand colours — case-study accents ONLY (Joe-specified, June 2026). The exception to the palette: each case wears its client's colour. NOTE: hero/showcase artwork still bakes the OLD colours into the image files — swap artwork and accent together when re-exporting. */ --client-tdn: #013b91; --client-taguchi: #fab517; --client-currentfuture: #0051f6; /* CF brand blue (the logo's own ground) */ --client-westfield: #e81b27; --client-ambulance: #dd3027; --client-amex: #036bca; --client-knotel: #262626; --client-andromeda: #e50084; --client-gravitas: #404bf4; /* case study not yet built — token ready */ --client-ajco: #8f93a1; /* steel from their site palette — Joe-confirmed 2026-06-12 */ --client-seadar: #0055a5; /* brand blue from Seadar's own logo SVG (Sedar_final_logo_2colour) — confirm w/ Joe */ --font-display: "Protest Strike", "Helvetica Neue", Arial, sans-serif; /* headlines */ --font-body: "Playfair Display", Georgia, "Times New Roman", serif; /* body copy */ --font-eyebrow: "Stack Sans Headline", "Helvetica Neue", Arial, sans-serif; /* eyebrows */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --rule-dark: color-mix(in srgb, var(--black) 22%, transparent); --rule-light: color-mix(in srgb, var(--white) 24%, transparent); /* Safety defaults: these are normally set per-scope (inline style="--accent:" attrs, body.page-light, [data-tone]) — the fallbacks stop a forgotten scope from producing invisible text or missing backgrounds. */ --accent: var(--hot); --step-accent: var(--ink); --surface: var(--paper); --rule: var(--rule-dark); } body { font-family: var(--font-body); text-rendering: geometricPrecision; } .menu-label, .menu-preview__giant, .hero-title, .case-title, .panel-eyebrow, .section-kicker, .studio h2, .services h2, .contact h2, .work-index-card, .proof-band, .agency-footer { font-family: var(--font-display); letter-spacing: -3px; } body.page-mode { background: var(--black); color: var(--white); min-height: 100%; } body.page-mode main#top, .page-main { background: var(--black); height: auto; min-height: 100vh; overflow: visible; } .brand-toggle { border-radius: 0; } body.page-mode .brand-toggle { top: 38px; } body.page-mode .brand-toggle::before { opacity: 0; } .brand-wordmark { width: 148px; } .menu-shell { background: var(--white); background-size: 11.111vw 100%, 100% 86px, auto; color: var(--black); padding: clamp(112px, 10vw, 156px) clamp(24px, 5vw, 76px) 0; } .menu-grid { align-items: stretch; gap: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); /* one column per menu item — Offbrand made it six */ max-width: 1460px; } .menu-link { border-left: .5px solid var(--rule-dark); justify-content: space-between; min-height: clamp(132px, 16vh, 210px); padding: clamp(16px, 1.6vw, 24px); text-align: left; transition: background 260ms var(--ease), color 180ms var(--ease), transform 260ms var(--ease); } .menu-label { font-size: clamp(1.5rem, 2.3vw, 2.5rem); font-weight: 900; line-height: 0.9; white-space: nowrap; } .menu-description { color: color-mix(in srgb, var(--black) 64%, transparent); font-size: clamp(0.94rem, 1.1vw, 1.1rem); line-height: 1.35; margin-top: 16px; max-width: 18ch; } .menu-rule { align-self: flex-start; margin-top: auto; width: 100%; } .menu-link:hover, .menu-link:focus-visible, .menu-link[aria-current="page"] { background: var(--black); color: var(--white); outline-offset: -6px; transform: translateY(-6px); } .menu-link:hover .menu-description, .menu-link:focus-visible .menu-description, .menu-link[aria-current="page"] .menu-description { color: color-mix(in srgb, var(--white) 74%, transparent); } .menu-note { font-size: clamp(1rem, 1.5vw, 1.35rem); margin: clamp(22px, 4vh, 44px) auto; max-width: 760px; } .menu-preview { border-top: .5px solid var(--rule-dark); max-width: none; min-height: 260px; } .menu-preview__slide--home { background: linear-gradient(112deg, var(--black) 0 48%, var(--hot) 48% 100%); } .menu-preview__giant { bottom: -0.24em; font-size: clamp(6.2rem, 17vw, 18rem); font-weight: 900; line-height: 0.82; } .preview-service { background: color-mix(in srgb, var(--white) 6%, transparent); border-color: currentColor; border-radius: 0; } .hero { padding: clamp(128px, 13vh, 164px) 24px 68px; } .case-open, .page-pill { align-items: center; border: 1px solid currentColor; border-radius: 0; display: inline-flex; font-weight: 900; gap: 12px; min-height: 48px; padding: 0 18px; text-transform: uppercase; transition: background 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease); } .case-open::after, .page-pill::after { content: ">"; font-size: 1.1em; line-height: 1; } .case-open:hover, .case-open:focus-visible, .page-pill:hover, .page-pill:focus-visible { transform: translateY(-3px); } .case-content { max-width: min(48vw, 780px); /* svh: must track the 100svh deck frame, not the iOS toolbar-collapsed vh (this LAYERED redefinition is what actually wins on desktop — the earlier .case-content blocks at ~566/~1805 are overridden by source order) */ top: 26svh; } .case-title { font-size: clamp(4rem, 6.2vw, 7.6rem); line-height: 1; margin-bottom: clamp(24px, 4vh, 44px); } .case-copy { border-top: 1px solid color-mix(in srgb, currentColor 42%, transparent); font-size: clamp(1.1rem, 1.45vw, 1.42rem); line-height: 1.45; padding-top: 22px; } .studio--origin h2, .services--model h2 { font-size: clamp(4.5rem, 8.8vw, 10.6rem); line-height: 0.78; } .studio-copy { font-size: clamp(1.08rem, 1.55vw, 1.42rem); } .section-kicker, .panel-eyebrow, .work-index-card__number, .work-index-card__meta, .proof-band span, .agency-footer small { font-size: 0.76rem; font-weight: 900; text-transform: uppercase; } .proof-band { background: var(--paper); color: var(--black); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .proof-band div { border-bottom: .5px solid var(--rule-dark); border-right: .5px solid var(--rule-dark); min-height: 220px; padding: clamp(24px, 4vw, 56px); } .proof-band div:last-child { border-right: 0; } .proof-band strong { display: block; font-size: clamp(1.55rem, 2.6vw, 3.4rem); font-weight: 900; line-height: 0.98; margin-top: clamp(34px, 5vw, 72px); max-width: 14ch; } .work-index-card, .work-index-card:nth-child(1), .work-index-card:nth-child(4), .work-index-card:nth-child(2), .work-index-card:nth-child(3), .work-index-card:nth-child(6) { background: linear-gradient(112deg, transparent 0 59%, color-mix(in srgb, var(--case-accent) 58%, transparent) 59% 100%), var(--paper); border-top: .5px solid var(--rule-dark); color: var(--black); display: grid; gap: clamp(18px, 2.2vw, 32px); grid-template-columns: minmax(42px, 0.1fr) minmax(0, 0.72fr) minmax(280px, 0.54fr); min-height: min(700px, 86vh); padding: clamp(34px, 6vw, 92px) clamp(24px, 7vw, 106px); position: relative; } .work-index-card:nth-child(2n) { background: linear-gradient(112deg, transparent 0 59%, color-mix(in srgb, var(--case-accent) 64%, transparent) 59% 100%), var(--black); border-top-color: var(--rule-light); color: var(--white); } .work-index-card__number { color: var(--hot); grid-column: 1; grid-row: 1 / span 5; } .work-index-card__meta { align-self: start; border-top: 1px solid color-mix(in srgb, currentColor 34%, transparent); grid-column: 2; line-height: 1.35; padding-top: 18px; } .work-index-card strong { align-self: end; font-size: clamp(4rem, 8.2vw, 10.8rem); font-weight: 900; grid-column: 2; line-height: 0.78; max-width: 840px; } .work-index-card > span:last-of-type { color: color-mix(in srgb, currentColor 78%, transparent); font-family: var(--font-body); font-size: clamp(1.08rem, 1.45vw, 1.42rem); grid-column: 2; line-height: 1.45; max-width: 620px; } .work-index-card em { align-self: end; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); display: inline-flex; font-style: normal; font-weight: 900; grid-column: 2; justify-self: start; line-height: 1; padding: 12px 14px; text-transform: uppercase; } .work-index-card img { align-self: center; grid-column: 3; grid-row: 1 / span 6; justify-self: end; max-height: min(500px, 64vh); max-width: min(440px, 32vw); object-fit: contain; transform: rotate(-1.5deg); transition: transform 320ms var(--ease); } .work-index-card:hover img, .work-index-card:focus-visible img { transform: rotate(0deg) scale(1.035); } .agency-footer { background: var(--paper); border-top: .5px solid var(--rule-dark); color: var(--black); display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: minmax(0, 0.8fr) minmax(180px, 0.28fr) minmax(240px, 0.42fr); padding: clamp(42px, 7vw, 96px) clamp(24px, 7vw, 106px) 28px; } .agency-footer a { font-size: clamp(1.45rem, 2.2vw, 2.6rem); font-weight: 900; line-height: 0.95; overflow-wrap: anywhere; } .agency-footer a:hover, .agency-footer a:focus-visible { color: var(--hot); } .agency-footer small { border-top: .5px solid var(--rule-dark); grid-column: 1 / -1; padding-top: 22px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; scroll-behavior: auto !important; transition-duration: 1ms !important; } } @media (max-width: 1040px) { .menu-grid { grid-template-columns: 1fr; } .menu-link, .menu-link:last-child { border-left: 0; border-right: 0; border-top: .5px solid var(--rule-dark); min-height: 92px; } .menu-preview { display: none; } .proof-band, .agency-footer { grid-template-columns: 1fr; } .proof-band div { border-right: 0; } } @media (max-width: 900px) { body.page-mode .brand-toggle { top: 18px; } .case-content { bottom: 46px; left: 24px; max-width: calc(100vw - 48px); top: auto; } .case-title { font-size: clamp(3.25rem, 15vw, 5.9rem); } .proof-band div { min-height: 0; } .proof-band strong { margin-top: 38px; } .work-index-card, .work-index-card:nth-child(1), .work-index-card:nth-child(4), .work-index-card:nth-child(2), .work-index-card:nth-child(3), .work-index-card:nth-child(6) { gap: 18px; grid-template-columns: 1fr; min-height: 0; padding: 34px 24px; } .work-index-card__number, .work-index-card__meta, .work-index-card strong, .work-index-card > span:last-of-type, .work-index-card em, .work-index-card img { grid-column: 1; grid-row: auto; } .work-index-card strong { font-size: clamp(3.2rem, 15vw, 5.8rem); } .work-index-card img { justify-self: start; max-height: 260px; max-width: min(78vw, 340px); } .agency-footer { padding-left: 24px; padding-right: 24px; } } @media (max-width: 520px) { .menu-shell { padding: 92px 20px 0; } .menu-link { min-height: 74px; padding: 14px 0; } .menu-label { font-size: clamp(2.1rem, 11vw, 3.8rem); } .menu-note { text-align: left; } .case-open, .page-pill { min-height: 46px; width: fit-content; } .proof-band strong { font-size: clamp(1.45rem, 8vw, 2.4rem); } .work-index-card strong { font-size: clamp(2.85rem, 13vw, 4.9rem); } .work-index-card em { line-height: 1.15; } .agency-footer { gap: 34px; } } /* ============================================================================ SUBPAGES v3 — same world as the homepage (near-black, QC accents, big type, diagonals) but each page stands on its own. The homepage is never touched. WORK — a dark cinematic scrolling "reel": giant ghost numbers, dramatic art on per-case diagonal accent fields, huge titles, alternating rhythm. ========================================================================== */ /* Theme tokens — subpages are LIGHT by default; any element marked [data-tone="dark"] flips that section to the dark world. */ body.page-light { --surface: var(--paper); --ink: var(--black); --rule: var(--rule-dark); background: var(--paper); color: var(--black); } body.page-light main#top { background: var(--paper); } [data-tone="dark"] { --surface: var(--black); --ink: var(--white); --rule: var(--rule-light); background: var(--black); color: var(--white); } /* The animated Q stays a BLACK badge everywhere (per preference) — it does not invert over dark sections. Its white Q symbol keeps it legible on dark; only the hamburger flips light (see body.nav-on-dark .menu-toggle). */ body.nav-on-dark .q-logo-mark { filter: none; } /* ---- Lede ---------------------------------------------------------------- */ .reel-lede { position: relative; display: grid; align-content: end; gap: clamp(18px, 2.6vw, 34px); min-height: 78vh; min-height: 78svh; padding: clamp(150px, 20vh, 240px) clamp(24px, 7vw, 106px) clamp(48px, 7vw, 96px); overflow: hidden; border-bottom: 1px solid var(--rule); background-color: var(--paper); } .reel-lede::before { content: ""; position: absolute; inset: 0; background-size: 8.333vw 100%, 100% 92px, auto; pointer-events: none; } .reel-lede > * { position: relative; z-index: 1; } .reel-lede .section-kicker { color: var(--forest); letter-spacing: 0.05em; text-transform: uppercase; } .reel-lede h1 { margin: 0; font-family: var(--font-display); font-size: clamp(2.8rem, 8vw, 8.5rem); font-weight: 900; line-height: 0.8; letter-spacing: 0; color: var(--forest); } .reel-lede__copy { margin: 0; max-width: 640px; font-family: var(--font-body); font-size: clamp(1.1rem, 1.6vw, 1.6rem); line-height: 1.5; color: color-mix(in srgb, var(--ink) 76%, transparent); } .reel-lede__count { font-family: var(--font-display); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 58%, transparent); } /* ---- Work page: client cards -------------------------------------------- */ /* Intro band — white, centred, with generous bottom space for the cards to overlap up into (per the listing-page mockup). */ .work-intro { position: relative; z-index: 0; display: grid; justify-items: center; gap: clamp(8px, 1vw, 14px); text-align: center; background: var(--white); padding: clamp(24px, 2.4vw, 40px) clamp(24px, 7vw, 80px) clamp(108px, 9vw, 132px); } .work-intro h2 { margin: 0; font-family: var(--font-body) !important; /* serif — override the global h1-h4 display pin */ font-weight: 400 !important; font-size: clamp(1.3rem, 2.4vw, 2.2rem); line-height: 1.04 !important; letter-spacing: -0.01em !important; color: var(--ink); } .work-intro__lead { margin: 0; font-family: var(--font-body); font-style: italic; font-size: clamp(1.15rem, 1.7vw, 1.6rem); color: var(--coral); } .work-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); /* side gutter scales with the viewport (≈250px at 1440) instead of a fixed 250px that squeezed the cards on mid-width screens */ padding: 0 clamp(24px, 17.4vw, 250px) clamp(80px, 17.4vw, 250px); margin-top: clamp(-120px, -7vw, -70px); /* pull up to overlap the white intro */ } .work-card { position: relative; display: block; overflow: hidden; isolation: isolate; container-type: inline-size; /* the title sizes off the CARD width, so narrow 2-col cards don't overflow */ border: .125px solid var(--rule-dark); color: var(--white); text-decoration: none; border-radius: 30px; transition: transform 480ms var(--ease), box-shadow 480ms var(--ease); } .work-card--tall { aspect-ratio: 4 / 5; } .work-card--wide { grid-column: 1 / -1; aspect-ratio: 9 / 3; } .work-card__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 760ms var(--ease); } /* No scrim/overlay on the work cards — the client art shows clean (Joe's call, 2026-06-10). Card text relies on the art being dark where the copy sits. */ .work-card:hover, .work-card:focus-visible { transform: translateY(-5px); box-shadow: 0 34px 72px -32px color-mix(in srgb, var(--black) 60%, transparent); } .work-card:hover .work-card__bg, .work-card:focus-visible .work-card__bg { transform: scale(1.045); } .work-card__inner { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(18px, 3vw, 40px); height: 100%; padding: clamp(26px, 3vw, 48px); } .work-card__head { display: grid; gap: clamp(6px, 0.7vw, 12px); } .work-card__client { margin: 0; /* The card title is an

, but the global type system pins every h1-h4 to Protest Strike at weight 400 (`!important`). Override both so card titles use the clean grotesque from the mockup, bold — without dropping

semantics. */ font-family: var(--font-eyebrow) !important; font-weight: 300 !important; font-size: 20px; line-height: 1; letter-spacing: -0.012em; color: var(--white); text-wrap: balance; } .work-card__sub { margin: 0; max-width: 24ch; font-family: var(--font-eyebrow); /* scales with the card's own width (cqi), so a narrow 2-col card on tablet shrinks the headline instead of overflowing; caps at the 50px desktop size */ font-size: clamp(30px, 11cqi, 50px); font-weight: 800; line-height: 1.18; color: var(--white); overflow-wrap: break-word; } .work-card__cta { align-self: start; display: inline-flex; align-items: center; padding: 0.9em 1.55em; border-radius: 999px; background: var(--white); color: var(--black); font-family: var(--font-eyebrow); font-weight: 700; font-size: clamp(0.66rem, 0.78vw, 0.78rem); letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; transition: transform 320ms var(--ease); } .work-card:hover .work-card__cta, .work-card:focus-visible .work-card__cta { transform: translateX(3px); } /* Wide cards: hold the copy to the left and scale the name up a touch */ .work-card--wide .work-card__client { font-size: 20px; } .work-feed-teaser { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: clamp(12px, 2vw, 28px); min-height: clamp(72px, 5.8vw, 92px); padding: clamp(12px, 1.5vw, 20px) clamp(20px, 4.6vw, 64px); border-radius: 999px; background: var(--teal); color: var(--actual-white); text-decoration: none; overflow: hidden; box-shadow: 0 28px 72px -42px color-mix(in srgb, var(--teal) 72%, var(--black)); transition: transform 520ms var(--ease), box-shadow 520ms var(--ease), background-color 520ms var(--ease); } .work-feed-teaser:hover, .work-feed-teaser:focus-visible { transform: translateY(-4px); background: color-mix(in srgb, var(--teal) 88%, var(--black)); box-shadow: 0 34px 86px -42px color-mix(in srgb, var(--teal) 88%, var(--black)); } .work-feed-teaser__text { min-width: 0; font-family: var(--font-eyebrow); font-size: clamp(1.34rem, 1.95vw, 2.34rem); font-weight: 300; line-height: 1.02; letter-spacing: 0; white-space: nowrap; } .work-feed-teaser__pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.34em; min-height: clamp(38px, 3.65vw, 54px); padding: 0.14em 0.62em 0.18em 0.46em; border: 2px solid var(--actual-white); border-radius: 999px; font-family: var(--font-eyebrow); font-size: clamp(1.22rem, 1.95vw, 2.28rem); font-weight: 300; line-height: 1; letter-spacing: 0; white-space: nowrap; color: var(--actual-white); overflow: hidden; transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1), background-color 620ms cubic-bezier(0.16, 1, 0.3, 1), border-color 620ms cubic-bezier(0.16, 1, 0.3, 1), color 620ms cubic-bezier(0.16, 1, 0.3, 1); } .work-feed-teaser__pill .q-inline-icon { width: 1em; height: 1em; flex: 0 0 auto; transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1); } .work-feed-teaser__pill i { display: inline-block; font-style: normal; margin-left: 0.18em; transform: translateY(-0.02em); transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1); } .work-feed-teaser__pill:hover, .work-feed-teaser:focus-visible .work-feed-teaser__pill { transform: translateX(4px); background: var(--actual-white); border-color: var(--actual-white); color: var(--teal); } .work-feed-teaser__pill:hover .q-inline-icon, .work-feed-teaser:focus-visible .work-feed-teaser__pill .q-inline-icon { transform: translateX(1px) scale(1.03); } .work-feed-teaser__pill:hover i, .work-feed-teaser:focus-visible .work-feed-teaser__pill i { transform: translate(5px, -0.02em); } /* ---- Dark CTA + footer --------------------------------------------------- */ .page-cta--dark { background: var(--forest); color: var(--ink); border-top: 1px solid var(--rule); } .page-cta--dark .section-kicker { color: var(--blush); } .page-cta--dark h2 { color: var(--ink); } .page-pill--ghost { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 50%, transparent); } .page-pill--ghost:hover, .page-pill--ghost:focus-visible { background: var(--ink); color: var(--surface); } body.page-light .agency-footer { background: var(--surface); color: var(--ink); border-top: 1px solid var(--rule); } body.page-light .agency-footer small { border-top-color: var(--rule); } /* ---- Responsive ---------------------------------------------------------- */ @media (max-width: 1040px) { .work-cards { gap: clamp(14px, 2.2vw, 22px); padding-bottom: clamp(48px, 9vw, 96px); } /* Once a wide card narrows, the cinematic 9/3 ratio gets too short for the headline + CTA and the button clipped out the bottom. Let the card grow to its content here (the bg image is absolute/cover, so it just fills taller). */ .work-card--wide { aspect-ratio: auto; min-height: clamp(200px, 30vw, 300px); } .work-card--wide .work-card__inner { height: auto; } } @media (max-width: 680px) { .work-cards { grid-template-columns: 1fr; padding-inline: clamp(16px, 6vw, 28px); } .work-feed-teaser { align-items: flex-start; flex-direction: column; gap: 20px; min-height: 0; border-radius: 34px; padding: 28px; } .work-feed-teaser__text { max-width: 12ch; font-size: clamp(2.15rem, 10vw, 3.15rem); white-space: normal; text-wrap: balance; } .work-feed-teaser__pill { align-self: flex-start; font-size: clamp(1.38rem, 6.8vw, 2.05rem); } /* every card becomes the vertical/tall format on mobile (4:5, matching the 600x750 tall artwork the swaps in for wide cards) */ .work-card--wide, .work-card--tall { grid-column: auto; aspect-ratio: 4 / 5; min-height: 0; /* drop the <=1040 wide min-height; the 4:5 ratio owns the height now */ } .work-card--wide .work-card__inner { max-width: 100%; height: 100%; /* undo the <=1040 height:auto so the inner fills the 4:5 card and the CTA anchors to the bottom, exactly like a tall card (Joe) */ } } @media (max-width: 900px) { .reel-lede { min-height: auto; padding-top: clamp(118px, 18vh, 160px); } .reel-lede h1 { font-size: clamp(3.4rem, 16vw, 6rem); } } /* ============================================================================ STUDIO + CAPABILITIES — shared dark section components (v3) ========================================================================== */ /* Big statement */ .statement { padding: clamp(64px, 11vw, 160px) clamp(24px, 7vw, 106px); border-bottom: 1px solid var(--rule); background: var(--surface); } .statement p { margin: 0; max-width: 20ch; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 5.4rem); font-weight: 900; line-height: 1; letter-spacing: 0; } /* Numbered stat grid */ .stat-grid { --q-line: color-mix(in srgb, var(--warm-muted) 62%, transparent); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--q-line); } .stat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Capabilities overview: a forest interlude between the pale opening hero and the lighter Q360 content. The dark-tone contract supplies white type and header controls while this modifier keeps every grid cell on brand green. */ .stat-grid--forest[data-tone="dark"] { --surface: var(--forest); background: var(--forest); } /* Box-grid line treatment (Joe's mockup, 2026-06-14): continuous horizontal rules, but the vertical dividers stop short of each horizontal — a gap at every crossing. Horizontals = cell border-top + grid border-bottom; verticals = an inset pseudo on every cell, removed from column 1. The verticals are a desktop detail; at the 2-up breakpoint they re-key to the 2-col layout, and drop entirely once the grid is a single column. */ .stat-grid > .stat { border-top: 1px solid var(--q-line); } .stat-grid > .stat::before { content: none; position: absolute; left: 0; top: clamp(16px, 2.2vw, 26px); bottom: clamp(16px, 2.2vw, 26px); width: 1px; background: var(--q-line); z-index: 1; } @media (min-width: 1041px) { .stat-grid > .stat::before { content: ""; } .stat-grid:not(.stat-grid--2):not(.stat-grid--4) > .stat:nth-child(3n + 1)::before { content: none; } .stat-grid--2 > .stat:nth-child(2n + 1)::before { content: none; } .stat-grid--4 > .stat:nth-child(4n + 1)::before { content: none; } } @media (min-width: 761px) and (max-width: 1040px) { .stat-grid > .stat::before { content: ""; } .stat-grid > .stat:nth-child(2n + 1)::before { content: none; } } .stat { position: relative; display: grid; align-content: start; gap: clamp(14px, 1.6vw, 24px); min-height: clamp(230px, 21vw, 330px); padding: clamp(26px, 2.8vw, 52px); background: var(--surface); overflow: hidden; isolation: isolate; transition: background 360ms var(--ease); } .stat::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--accent, var(--forest)); transform: scaleX(0.16); transform-origin: left center; transition: transform 360ms var(--ease); } .stat:hover { background: color-mix(in srgb, var(--accent, var(--forest)) 9%, var(--surface)); } .stat:hover::after { transform: scaleX(1); } .stat__num { font-family: var(--font-display); font-size: clamp(1.5rem, 2.3vw, 2.6rem); font-weight: 900; line-height: 0.8; color: var(--accent, var(--forest)); } .stat__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.45rem, 2.1vw, 2.5rem); font-weight: 900; line-height: 0.94; letter-spacing: -0.02em !important; } /* About-page principles — tighter tracking (Joe, 2026-06-13). */ .stat-grid--3 .stat__title { letter-spacing: -0.02em !important; } .stat__copy { margin: 0; max-width: 36ch; font-family: var(--font-body); font-size: clamp(1rem, 1.15vw, 1.16rem); line-height: 1.5; color: color-mix(in srgb, var(--ink) 74%, transparent); } /* Split band (big statement + supporting note) */ .split-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.6fr); gap: clamp(30px, 6vw, 100px); align-items: end; padding: clamp(68px, 11vw, 150px) clamp(24px, 7vw, 106px); /* border-bottom: 1px solid var(--rule); */ background: var(--white); } .split-band h2 { margin: 0; font-family: var(--font-display); font-size: clamp(2.1rem, 4.6vw, 5.2rem); font-weight: 900; line-height: 0.86; letter-spacing: 0; color: var(--forest); } .split-band p { margin: 0; border-top: 1px solid var(--rule); padding-top: 24px; font-family: var(--font-body); font-size: clamp(1.05rem, 1.5vw, 1.5rem); line-height: 1.5; color: color-mix(in srgb, var(--ink) 78%, transparent); } /* Signal row */ .signal-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border-bottom: 1px solid var(--rule); } .signal-row div { display: grid; align-content: start; gap: 16px; min-height: clamp(170px, 15vw, 230px); padding: clamp(26px, 3vw, 50px); background: var(--surface); } .signal-row span { font-family: var(--font-eyebrow); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; color: var(--hot); } .origin-story { font-family: var(--font-eyebrow) !important; /* !important: .page-cta h2 (clamp to 9rem) outranks this class on specificity */ font-size: clamp(1.6rem, 3.8vw, 48px) !important; font-weight: 900; letter-spacing: 0.02em; line-height: 1.54 !important; color: var(--white); max-width: 75vw; } /* About → Origin story: flat deep-green field, pink eyebrow, white statement, centred (scoped via :has so the other .page-cta--dark sections are untouched). */ .page-cta:has(.origin-story) { background: var(--forest); border-top-color: color-mix(in srgb, var(--white) 12%, transparent); justify-items: center; text-align: center; padding-inline: clamp(28px, 7vw, 120px); /* symmetric — base CTA padding is left-weighted */ } .page-cta:has(.origin-story) .section-kicker { color: var(--blush); } .page-cta:has(.origin-story) .origin-story { margin-inline: auto; /* keep the statement block centred in the green field */ } .signal-row strong { max-width: 16ch; font-family: var(--font-eyebrow); font-size: clamp(1.25rem, 1.9vw, 2.1rem); font-weight: 200; line-height: 1.14; letter-spacing: 0; } @media (max-width: 1040px) { .stat-grid, .stat-grid--3, .stat-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .stat-grid, .stat-grid--2, .stat-grid--3, .stat-grid--4, .split-band, .signal-row { grid-template-columns: 1fr; } } /* Long-headline ledes (Studio, Capabilities) read better a notch smaller */ .reel-lede--studio h1, .reel-lede--process h1 { font-size: clamp(2.4rem, 5.4vw, 5.8rem); line-height: 0.86; } .reel-lede.reel-lede--studio h1 { color: var(--aubergine); } /* ============================================================================ CAPABILITIES — sense model + QC process ========================================================================== */ .sense { background: var(--surface); /* border-bottom: 1px solid var(--rule); */ } .sense__head { display: grid; gap: 16px; padding: clamp(56px, 8vw, 110px) clamp(24px, 7vw, 106px) clamp(28px, 3.5vw, 50px); } .sense__head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(2.3rem, 5vw, 5.6rem); font-weight: 900; line-height: 0.86; letter-spacing: 0; } .sense__lead { margin: 0; max-width: 620px; font-family: var(--font-body); font-size: clamp(1.05rem, 1.4vw, 1.4rem); line-height: 1.5; color: color-mix(in srgb, var(--ink) 76%, transparent); } /* Q360 model section (Capabilities) — per Joe's mock 2026-06-13: kicker spans, display title left, the fuller brand-centred blurb right, then the lockup centred between hairlines before the four pillar columns. */ .sense__head--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; column-gap: clamp(28px, 5vw, 84px); } .sense__head--split .section-kicker { grid-column: 1 / -1; } .sense__lockup { margin-inline: clamp(24px, 7vw, 106px); padding: clamp(26px, 3.6vw, 54px) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: grid; place-items: center; } /* Same mask trick as .cap-card__q360 — the black source art, forest here. */ .sense__mark { display: block; --h: clamp(46px, 5.6vw, 82px); height: var(--h); width: calc(var(--h) * 3.339); /* 473.058 × 141.7 viewBox */ background-color: var(--forest); -webkit-mask: url("brand/q360-logo-black.svg") no-repeat center / contain; mask: url("brand/q360-logo-black.svg") no-repeat center / contain; } @media (max-width: 900px) { .sense__head--split { grid-template-columns: 1fr; } } .qc { background: var(--surface); border-bottom: 1px solid var(--rule); } .qc__head { display: grid; gap: 14px; padding: clamp(56px, 8vw, 110px) clamp(24px, 7vw, 106px) clamp(26px, 3vw, 44px); } .qc__head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 5.4rem); font-weight: 900; line-height: 0.88; letter-spacing: 0; } .qc__head p { margin: 0; font-family: var(--font-body); font-size: clamp(1.05rem, 1.3vw, 1.3rem); color: color-mix(in srgb, var(--ink) 74%, transparent); } .qc__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); } .qc__steps li { display: grid; align-content: start; gap: 10px; min-height: clamp(150px, 13vw, 200px); padding: clamp(22px, 2.4vw, 38px); background: var(--surface); } .qc__steps span { font-family: var(--font-display); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.04em; color: var(--forest); } .qc__steps strong { font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 2rem); font-weight: 900; line-height: 0.96; letter-spacing: 0; color: var(--aqua); } .qc__steps em { font-style: normal; font-family: var(--font-body); font-size: 0.98rem; line-height: 1.4; color: color-mix(in srgb, var(--ink) 66%, transparent); } /* ============================================================================ CONTACT — one bold dark moment ========================================================================== */ .contact-stage { position: relative; /* anchors the construct art in the open right space */ display: grid; gap: clamp(16px, 2.2vw, 26px); padding: clamp(140px, 18vh, 200px) clamp(24px, 7vw, 106px) clamp(44px, 6vw, 72px); } .contact-stage .section-kicker { color: var(--forest); } .contact-stage h1 { margin: 0; max-width: 16ch; font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 5.4rem); font-weight: 900; line-height: 0.86; letter-spacing: 0; color: var(--forest); } /* Hairline Q construction in the stage's open right half, white on the paper, with Joe's 3D g'day render riding the circle (per his mock). Same drawing as the about lede / deck construct slide. */ .contact-construct { position: absolute; /* Span the FULL stage: the drawing's corner diagonals run 0,0 -> bottom-right, so the top one starts at the window top and the bottom one lands just shy of the contact-details band (Joe). The square sizes itself from that span. */ top: 0; bottom: 4px; right: clamp(24px, 6vw, 90px); width: auto; aspect-ratio: 1 / 1; pointer-events: none; color: var(--actual-white); } .contact-construct__gday { position: absolute; /* The drawing's disc is centred at (52.5%, 47.5%) of the box; the render sits over it, pushed left so the script overhangs the circle like the mock, and seated 60px lower (Joe) so it doesn't crowd the window top. */ left: -8%; top: calc(47.5% + 60px); width: 96%; height: auto; transform: translateY(-52%); } @media (max-width: 1000px) { .contact-construct { display: none; } } .contact-stage__copy { margin: 0; max-width: 560px; font-family: var(--font-body); font-size: clamp(1.08rem, 1.5vw, 1.45rem); line-height: 1.5; color: color-mix(in srgb, var(--ink) 78%, transparent); } /* Contact details — the About-style signal band, with copy icons */ .contact-signals { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); } .contact-signals div { min-height: clamp(150px, 13vw, 200px); background: var(--actual-white); /* pure white cards on the warm paper (Joe) */ } .contact-signals strong { max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: clamp(1.1rem, 1.45vw, 1.55rem); } .contact-signals strong a { color: inherit; transition: color 0.2s var(--ease); } .contact-signals strong a:hover, .contact-signals strong a:focus-visible { color: var(--hot); } .copy-ic { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: transparent; cursor: pointer; color: color-mix(in srgb, var(--ink) 48%, transparent); transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); } .copy-ic svg { width: 15px; height: 15px; } .copy-ic:hover, .copy-ic:focus-visible { color: var(--hot); border-color: var(--hot); } .copy-ic__check { display: none; } .copy-ic.is-copied { color: var(--white); border-color: var(--forest); background: var(--forest); } .copy-ic.is-copied .copy-ic__copy { display: none; } .copy-ic.is-copied .copy-ic__check { display: block; } /* Friendly lead-in above the briefing tips */ .contact-lead { padding: clamp(56px, 8vw, 96px) clamp(24px, 7vw, 106px) clamp(24px, 3.4vw, 40px); } .contact-lead .section-kicker { color: var(--forest); } .contact-lead h2 { margin: 14px 0 0; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 0.96; } .contact-lead p:last-child { margin: 16px 0 0; max-width: 56ch; font-family: var(--font-body); font-size: clamp(1.04rem, 1.4vw, 1.25rem); line-height: 1.6; color: color-mix(in srgb, var(--ink) 76%, transparent); } @media (max-width: 1040px) { .contact-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .contact-signals { grid-template-columns: 1fr; } .contact-signals div { min-height: 0; } } .contact-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); padding: 0 clamp(24px, 7vw, 106px) clamp(64px, 9vw, 110px); } .contact-notes div { display: grid; align-content: start; gap: 14px; padding: clamp(24px, 2.8vw, 40px); background: var(--white); border: 1px solid var(--rule); border-radius: 18px; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); } .contact-notes div:hover { border-color: var(--forest); transform: translateY(-2px); } .contact-notes span { position: relative; padding-top: 12px; font-family: var(--font-eyebrow); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--forest); } .contact-notes span::before { content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 3px; background: var(--blush); } .contact-notes p { margin: 0; font-family: var(--font-body); font-size: clamp(1rem, 1.2vw, 1.18rem); line-height: 1.55; color: color-mix(in srgb, var(--ink) 78%, transparent); } /* ============================================================================ CASE STUDY — flip the editorial detail to the dark world ========================================================================== */ @media (max-width: 760px) { .qc__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-notes { grid-template-columns: 1fr; } } /* ============================================================================ CASE STUDY (v3) — its own dark cinematic story layout ========================================================================== */ .case { background: var(--surface); } /* ── Hero: full-bleed brand field (left) + editorial answer panel (right) ── */ .case-hero { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(320px, 1fr); align-items: stretch; min-height: 90vh; min-height: 90svh; border-bottom: 1px solid var(--rule); overflow: hidden; } .case-hero__media { position: relative; isolation: isolate; display: grid; align-content: center; padding: clamp(104px, 12vw, 168px) clamp(28px, 5vw, 88px) clamp(56px, 7vw, 96px); padding-left: clamp(40px, 10vw, 200px); padding-bottom: clamp(40px, 10vw, 200px); overflow: hidden; } .case-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } /* Legibility scrim — weighted to the lower-left where the headline sits, so the cream type reads cleanly over any brand field (incl. the lighter blue one). */ .case-hero__media::after { content: ""; position: absolute; inset: 0; z-index: -1; } /* Back link — floating white pill, top-left over the image. Vertically centred on the header icon line (the Q badge + hamburger) via translateY, so it stays put regardless of its own height; the per-breakpoint `top` matches the Q's centre. */ .case-back { position: absolute; top: 75px; left: clamp(20px, 2.6vw, 40px); transform: translateY(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 100px; background: var(--surface); color: var(--ink); font-family: var(--font-eyebrow); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 14px 34px color-mix(in srgb, var(--black) 22%, transparent); transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); } .case-back i { font-style: normal; transition: transform 220ms var(--ease); } .case-back:hover { color: var(--ink); transform: translateY(calc(-50% - 1px)); box-shadow: 0 18px 40px color-mix(in srgb, var(--black) 28%, transparent); } .case-back:hover i { transform: translateX(-4px); } .case-hero__head { position: relative; z-index: 2; display: grid; gap: clamp(16px, 1.8vw, 26px); } .case-hero__tag { font-family: var(--font-eyebrow); font-size: clamp(0.66rem, 0.86vw, 0.8rem); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in srgb, var(--white) 80%, transparent); } .case-hero h1 { margin: 0; max-width: 15ch; font-size: clamp(2.7rem, 5.8vw, 6.6rem); color: var(--actual-white); text-wrap: balance; } /* Right — the calm "answer" zone: a neutral band holding an inset white card (client mark + serif standfirst) that straddles the image / panel seam. */ .case-hero__panel { position: relative; display: grid; align-content: center; padding: clamp(40px, 4.6vw, 92px) clamp(24px, 3.4vw, 64px); background: color-mix(in srgb, var(--graphite) 8%, var(--white)); } .case-hero__card { position: relative; z-index: 4; /* lift above the brand image at the seam */ display: grid; align-content: center; gap: clamp(22px, 2.6vw, 40px); margin-left: calc(-1 * clamp(24px, 5vw, 96px)); /* straddle the image / panel seam */ padding: clamp(30px, 3vw, 56px); background: var(--actual-white); } .case-hero__logo { justify-self: start; width: auto; height: auto; max-width: min(86%, 280px); max-height: clamp(32px, 3.6vw, 46px); object-fit: contain; } .case-hero__intro { margin: 0; max-width: 26ch; font-family: var(--font-body); font-size: clamp(1.2rem, 1.55vw, 1.92rem); line-height: 1.4; color: color-mix(in srgb, var(--ink) 90%, transparent); } /* Work listing header — same split hero, wider graphic, soft-pink answer panel with a coral eyebrow (per the listing-page mockup). No back pill, no logo. */ .case-hero--work { grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); } .case-hero--work .case-hero__panel { background: var(--blush); } .case-hero--work .case-hero__card { margin-left: calc(-1 * clamp(24px, 6vw, 110px)); /* straddle the seam, clearing the large headline */ } .case-hero--work .case-hero__tag { color: var(--coral); } .case-hero--work .case-hero__intro { max-width: 24ch; color: color-mix(in srgb, var(--ink) 92%, transparent); } /* Bigger headline, inset further from the left, and nudged up (extra bottom padding lifts the vertically-centred block). */ .case-hero--work .case-hero__media { padding-left: clamp(40px, 10vw, 200px); padding-bottom: clamp(120px, 15vw, 220px); } .case-hero--work h1 { font-size: clamp(3.2rem, 8.2vw, 9.2rem); } .case-facts2 { display: grid; grid-template-columns: 0.68fr 0.68fr 0.9fr 1.15fr; /* Client / Location / Program / Capabilities */ gap: 1px; background: var(--rule); border-bottom: 1px solid var(--rule); } .case-facts2 a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; transition: color 200ms var(--ease); } .case-facts2 a:hover, .case-facts2 a:focus-visible { color: var(--hot); } /* Two ghost pills in the closing case-study CTA (program + contact) */ .case-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; } /* 2x2 facts grid on small laptops/tablets so four cells never cramp */ @media (min-width: 901px) and (max-width: 1180px) { .case-facts2 { grid-template-columns: 1fr 1fr; } } .case-facts2 div { display: grid; gap: 12px; align-content: start; min-height: clamp(140px, 12vw, 180px); padding: clamp(26px, 3vw, 48px); background: var(--actual-white); } .case-facts2 span { font-family: var(--font-eyebrow); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 50%, transparent); } .case-facts2 strong { font-family: var(--font-body); font-size: clamp(1.25rem, 1.7vw, 1.7rem); font-weight: 500; line-height: 1.2; letter-spacing: 0; } .case-outcomes { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding: clamp(64px, 9vw, 130px) clamp(24px, 7vw, 106px); border-bottom: 1px solid var(--rule); } .case-outcomes__head h2 { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(2.6rem, 5.4vw, 6rem); font-weight: 900; line-height: 0.86; letter-spacing: 0; } .case-outcomes__list { list-style: none; margin: 0; padding: 0; } .case-outcomes__list li { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2vw, 32px); align-items: baseline; padding: clamp(20px, 2.2vw, 32px) 0; border-bottom: 1px solid var(--rule); } .case-outcomes__list li:first-child { border-top: 1px solid var(--rule); } .case-outcomes__list span { font-family: var(--font-body); font-size: clamp(1.4rem, 2vw, 2rem); font-style: italic; font-weight: 400; color: var(--case-accent); } .case-outcomes__list strong { font-family: var(--font-body); font-size: clamp(1.35rem, 2.2vw, 2.3rem); font-weight: 500; line-height: 1.16; letter-spacing: -0.005em; } .case-story2 { background: var(--surface); counter-reset: beat; } .case-story2 article { display: grid; grid-template-columns: minmax(150px, 0.22fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start; padding: clamp(54px, 8vw, 104px) clamp(24px, 7vw, 106px); border-bottom: 1px solid var(--rule); } /* Numbered editorial beat label */ .case-story2__label { display: grid; gap: 12px; font-family: var(--font-display); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 54%, transparent); } .case-story2__label::before { counter-increment: beat; content: counter(beat, decimal-leading-zero); font-family: var(--font-body); font-size: clamp(1.6rem, 2.6vw, 2.6rem); font-weight: 400; font-style: italic; letter-spacing: 0; color: var(--case-accent); } .case-story2 p { margin: 0; max-width: 26ch; font-family: var(--font-body); font-size: clamp(1.45rem, 2.6vw, 2.7rem); line-height: 1.2; letter-spacing: -0.005em; text-wrap: balance; } /* Editorial pull quote */ .case-pull { --pull-pad: clamp(72px, 12vw, 180px); padding: var(--pull-pad) clamp(24px, 7vw, 106px); background: var(--surface); border-bottom: 1px solid var(--rule); } /* Pull quote with a companion cutout (case `pullArt`) — quote left, art right, the cutout's cut edge sits flush on the section's bottom rule. */ .case-pull--art { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr); gap: clamp(28px, 5vw, 80px); align-items: center; } .case-pull__art { margin: calc(-0.4 * var(--pull-pad)) 0 calc(-1 * var(--pull-pad)); align-self: end; } .case-pull__art img { display: block; width: min(100%, 620px); height: auto; margin-inline: auto; } .case-pull--podcast { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.92fr); gap: clamp(34px, 6vw, 108px); align-items: center; } .case-pull.case-pull--podcast blockquote { max-width: 15ch; } .case-pull__podcast { width: min(100%, 760px); margin: 0; justify-self: end; padding: clamp(28px, 4vw, 56px); background: color-mix(in srgb, var(--actual-white) 84%, var(--surface)); border: 1px solid color-mix(in srgb, var(--black) 5%, transparent); border-radius: clamp(28px, 4vw, 48px); box-shadow: 0 28px 70px color-mix(in srgb, var(--black) 10%, transparent); } .case-pull__podcast-frame { width: min(100%, 660px); margin-inline: auto; } .case-pull__podcast-frame iframe { display: block; width: 100%; height: 175px; max-width: 660px; border: 0; border-radius: 12px; background: transparent; } .case-pull__podcast figcaption { width: min(100%, 660px); margin: 16px auto 0; color: color-mix(in srgb, var(--ink) 62%, transparent); font-family: var(--font-body); font-size: clamp(0.95rem, 1.05vw, 1.08rem); font-style: italic; font-weight: 400; line-height: 1.4; } @media (max-width: 860px) { .case-pull--art { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 48px); } .case-pull__art { margin-top: 0; } .case-pull__art img { width: min(72%, 420px); } } @media (max-width: 980px) { .case-pull--podcast { grid-template-columns: 1fr; } .case-pull__podcast { justify-self: stretch; } } @media (max-width: 560px) { .case-pull__podcast { padding: 18px; border-radius: 24px; } .case-pull__podcast figcaption { font-size: 0.95rem; } } .case-pull blockquote { margin: 0; max-width: 19ch; font-family: var(--font-body); font-size: clamp(2.1rem, 4.6vw, 4.8rem); font-weight: 400; line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; } .case-pull blockquote::before { content: "\201C"; display: block; font-family: var(--font-body); font-size: clamp(3.4rem, 7vw, 7rem); line-height: 0.6; color: var(--case-accent); margin-bottom: 0.06em; } /* "More work." — a 3-up grid of case-study teaser tiles at the foot of each case page. build-pages.mjs feeds it the three cases that FOLLOW the current one (wrapping), so the page you're on is never shown. Each tile is the case's square brand illustration. */ .case-more { display: grid; justify-items: center; gap: clamp(28px, 4vw, 50px); padding: clamp(56px, 8vw, 116px) clamp(24px, 6vw, 80px) clamp(48px, 7vw, 100px); background: var(--surface); border-top: 1px solid var(--rule); } .case-more__head { display: grid; justify-items: center; gap: clamp(10px, 1.4vw, 18px); text-align: center; } .case-more__head h2 { margin: 0; font-family: var(--font-body) !important; /* serif — override the global h1-h4 display pin */ font-weight: 400 !important; font-size: clamp(2rem, 3.6vw, 3.3rem); letter-spacing: -0.01em; color: var(--ink); } .case-more__arrow { font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1; color: var(--ink); } .case-more__grid { width: 100%; max-width: 1440px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.5vw, 22px); } .case-more__card { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 30px; background: var(--case-accent); display: block; color: var(--white); } .case-more__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); } .case-more__card:hover .case-more__art, .case-more__card:focus-visible .case-more__art { transform: scale(1.04); } /* Resting state is the bare full-colour art — the client name and its panel are revealed on hover only (no foot scrim, no resting label). */ /* HOVER: a solid panel in the brand hot colour with the client name centred (the illustration just shows through faintly behind it) — per the mockup. */ .case-more__card::after { content: attr(data-name); position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(20px, 3vw, 44px); background: color-mix(in srgb, black 80%, transparent); color: var(--white); font-family: var(--font-eyebrow); font-weight: 800; font-size: clamp(1.25rem, 2vw, 2.15rem); line-height: 1.14; letter-spacing: -0.01em; opacity: 0; transition: opacity 360ms var(--ease); pointer-events: none; } .case-more__card:hover::after, .case-more__card:focus-visible::after { opacity: 1; } @media (max-width: 760px) { .case-more__grid { grid-template-columns: 1fr; max-width: 440px; gap: 14px; } } /* ---- Prev / next project bar (below the case teasers) ------------------- */ .case-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(14px, 4vw, 60px); padding: clamp(26px, 3.4vw, 52px) clamp(20px, 6vw, 90px); background: var(--surface); border-top: 1px solid var(--rule); } .case-nav__link { display: inline-flex; align-items: center; gap: clamp(10px, 1.6vw, 20px); min-width: 0; text-decoration: none; color: var(--ink); } .case-nav__link--prev { justify-self: start; } .case-nav__link--next { justify-self: end; } .case-nav__text { display: grid; gap: 5px; min-width: 0; } .case-nav__link--next .case-nav__text { justify-items: end; text-align: right; } .case-nav__kicker { font-family: var(--font-eyebrow); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 50%, transparent); } .case-nav__name { font-family: var(--font-body); font-size: clamp(1.05rem, 1.7vw, 1.6rem); line-height: 1.12; } .case-nav__arrow { flex: none; font-size: clamp(1.15rem, 1.6vw, 1.6rem); color: color-mix(in srgb, var(--ink) 58%, transparent); transition: transform 220ms var(--ease); } .case-nav__link:hover .case-nav__name { text-decoration: underline; text-underline-offset: 3px; } .case-nav__link--prev:hover .case-nav__arrow { transform: translateX(-4px); } .case-nav__link--next:hover .case-nav__arrow { transform: translateX(4px); } .case-nav__index { display: inline-grid; place-items: center; width: clamp(42px, 4vw, 54px); height: clamp(42px, 4vw, 54px); color: var(--ink); transition: background 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease); } .case-nav__index:hover { background: var(--ink); color: var(--surface); transform: translateY(-2px); } .case-nav__index svg { width: 19px; height: 19px; display: block; } @media (max-width: 560px) { .case-nav { gap: 10px; padding: 26px 18px; } .case-nav__kicker { font-size: 0.6rem; letter-spacing: 0.12em; } .case-nav__arrow { display: none; } /* names + centre icon carry it on small screens */ } @media (max-width: 900px) { .case-hero { grid-template-columns: 1fr; min-height: auto; } .case-hero__media { min-height: 56svh; padding: 92px 24px 40px; padding-left: clamp(24px, 6vw, 40px); } /* the work header carries extra desktop padding — reset it when stacked */ .case-hero--work .case-hero__media { min-height: 50svh; padding: 96px 24px 44px; padding-left: clamp(24px, 6vw, 40px); } .case-hero__panel { padding: clamp(26px, 6vw, 44px) clamp(18px, 5vw, 40px); } /* card sits flush in the band once stacked — no seam to straddle */ .case-hero__card, .case-hero--work .case-hero__card { margin-left: 0; padding: clamp(26px, 5.5vw, 40px); } /* header line tightens up — keep the back pill on the Q's centre. (the matching .menu-toggle override lives after its base rule, near line 7640, so it actually wins the cascade.) */ .case-back { top: 56px; } .case-facts2 { grid-template-columns: 1fr; } .case-outcomes { grid-template-columns: 1fr; } .case-story2 article { grid-template-columns: 1fr; gap: 14px; } } /* ---- Case study showcase (a real visual moment) -------------------------- */ .case-showcase { display: grid; place-items: center; padding: clamp(56px, 8vw, 120px) clamp(24px, 7vw, 106px); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--case-accent) 34%, transparent), transparent 62%), color-mix(in srgb, var(--case-accent) 12%, var(--surface)); border-bottom: 1px solid var(--rule); } .case-showcase figure { margin: 0; display: grid; gap: clamp(18px, 2vw, 26px); justify-items: center; } .case-showcase img { width: min(100%, 620px); aspect-ratio: 1; object-fit: contain; border: 1px solid var(--rule); box-shadow: 0 50px 120px color-mix(in srgb, var(--black) 55%, transparent); } .case-showcase figcaption { font-family: var(--font-body); font-size: clamp(0.95rem, 1.05vw, 1.08rem); font-style: italic; color: color-mix(in srgb, var(--ink) 62%, transparent); } /* Editorial section kickers on case pages (The work / Outcomes) */ .case .section-kicker { font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 50%, transparent); } /* ---- Case study gallery (real project visuals) --------------------------- */ .case-gallery { display: grid; background: var(--surface); border-bottom: 1px solid var(--rule); counter-reset: fig; } .case-gallery__head { display: grid; gap: 14px; padding: clamp(56px, 8vw, 110px) clamp(24px, 7vw, 106px) clamp(22px, 3vw, 40px); } .case-gallery__head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 5.4rem); font-weight: 900; line-height: 0.88; letter-spacing: 0; } /* Optional editorial intro under the gallery heading — the old site paired every showcase with a line of context, and it reads better for it. */ .case-gallery__intro { margin: 4px 0 0; max-width: 58ch; font-size: clamp(1.02rem, 1.2vw, 1.18rem); line-height: 1.55; color: color-mix(in srgb, var(--ink) 72%, transparent); text-wrap: pretty; } /* Editorial prose bands — long-form project writing inside the gallery flow (ported from the old magic.qualls.co case pages). A quiet centred column, no figure chrome, lists ruled in the case accent. */ .case-prose { width: min(calc(100% - 48px), 64ch); margin: clamp(22px, 3vw, 44px) auto; display: grid; gap: clamp(14px, 1.6vw, 20px); } .case-prose .section-kicker { color: var(--case-accent); } .case-prose h3 { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.3rem); font-weight: 900; line-height: 1.02; } .case-prose p { margin: 0; font-size: clamp(1.02rem, 1.2vw, 1.18rem); line-height: 1.6; color: color-mix(in srgb, var(--ink) 78%, transparent); text-wrap: pretty; } .case-prose a { color: inherit; text-decoration: underline; text-decoration-color: var(--case-accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .case-prose a:hover { color: var(--case-accent); } .case-prose__list { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: clamp(10px, 1.2vw, 14px); } .case-prose__list li { position: relative; padding-left: 24px; font-size: clamp(0.99rem, 1.15vw, 1.13rem); line-height: 1.55; color: color-mix(in srgb, var(--ink) 74%, transparent); } .case-prose__list li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 12px; height: 2px; background: var(--case-accent); } .case-prose__list strong { color: var(--ink); font-weight: 700; } /* Cinematic lead (gallery lead: "cinema") — the head and the opening shot fuse on a TRUE BLACK stage; #000 matches the CF site-hero artwork's own background exactly, so the laptop floats out of the dark with no seam. */ .case-lead { background: #000; padding-bottom: clamp(40px, 6vw, 96px); margin-bottom: clamp(20px, 3vw, 44px); } .case-lead .section-kicker { color: color-mix(in srgb, var(--actual-white) 42%, transparent); } .case-lead .case-gallery__head h2 { color: var(--actual-white); } .case-lead .case-gallery__intro { color: color-mix(in srgb, var(--actual-white) 76%, transparent); } .case-lead .case-shot--full img { width: min(88%, 1380px); margin-inline: auto; } .case-lead .case-shot figcaption { color: color-mix(in srgb, var(--actual-white) 55%, transparent); } .case-lead .case-shot figcaption::before { color: color-mix(in srgb, var(--actual-white) 40%, transparent); } /* White-field shots (field: "white") — true white air above and below the artwork. Consecutive white shots fuse into one band, so the pins flow straight into the tote panel per Joe's mock. */ .case-shot--white { background: var(--actual-white); padding-top: clamp(44px, 6vw, 96px); } .case-shot--full.case-shot--white img { /* doubled class outranks the later base width: 100% rule */ width: min(86%, 1240px); margin-inline: auto; } .case-shot--white + .case-shot--white { padding-top: 0; } @media (max-width: 760px) { .case-shot--full.case-shot--white img { width: 92%; } } .case-shot { margin: 0; } .case-shot--full img { display: block; width: 100%; height: auto; } .case-shot--tint { background: color-mix(in srgb, var(--case-accent) 14%, var(--surface)); } .case-shot--tint img { padding: clamp(22px, 4.5vw, 72px) clamp(24px, 7vw, 106px); } /* Solid brand-colour band — a lockup sitting on its own full-bleed field (the colour is set inline per block). Generous padding gives it poster presence; the caption flips light so it stays legible on saturated colour. */ .case-shot--band img { padding: clamp(40px, 6.5vw, 96px) clamp(24px, 7vw, 106px); } .case-shot.case-shot--band figcaption { color: rgba(255, 255, 255, 0.85); } /* Full-bleed image/gradient field behind the artwork (e.g. the brand before/after on its launch gradient). The field is light, so — unlike --band — the caption keeps its default dark ink. */ .case-shot--bg { background-size: cover; background-position: center; background-repeat: no-repeat; } .case-shot--bg img { padding: clamp(30px, 5.5vw, 92px) clamp(24px, 7vw, 106px); } /* Inset shot: artwork shrunk onto a sand field with a rounded mask (Joe's mock) */ .case-shot--inset { background: var(--sand); } .case-shot--inset img { width: min(calc(100% - 2 * clamp(24px, 7vw, 106px)), 1180px); margin: clamp(28px, 5vw, 84px) auto; border-radius: clamp(22px, 3.2vw, 48px); } .case-shot-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); } .case-shot-grid img { display: block; width: 100%; height: 100%; aspect-ratio: var(--aspect, 16 / 9); object-fit: cover; background: var(--surface); } .case-shot figcaption { padding: 16px clamp(24px, 7vw, 106px) clamp(34px, 4vw, 56px); font-family: var(--font-body); font-size: clamp(0.95rem, 1.05vw, 1.08rem); font-style: italic; line-height: 1.4; color: color-mix(in srgb, var(--ink) 62%, transparent); } .case-shot figcaption::before { counter-increment: fig; content: "Fig. " counter(fig, decimal-leading-zero) " — "; font-style: normal; font-weight: 600; letter-spacing: 0.04em; color: color-mix(in srgb, var(--ink) 42%, transparent); } /* Case video — click-to-load YouTube facade inside the gallery flow (same contract as the journal's .ob-video: cookie-free poster, app.js swaps in a youtube-nocookie iframe on play). Accent-tinted play disc per case. Joe (2026-06-12): half-width, centred, rounded. */ .case-video__frame { position: relative; width: 50%; margin-inline: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: var(--black); } /* A "tight" block: media shrunk to ~70% and centred. On grids it also swaps the hairline divider for a real gap (the artwork carries its own card framing). */ .case-shot--tight .case-shot-grid { width: min(70%, 1100px); margin-inline: auto; gap: clamp(14px, 2vw, 24px); background: none; } .case-shot--full.case-shot--tight img { width: min(70%, 1100px); margin-inline: auto; } @media (max-width: 760px) { .case-video__frame { width: 88%; border-radius: 14px; } .case-shot--tight .case-shot-grid { width: 100%; } .case-shot--full.case-shot--tight img { width: 100%; } } .case-video__frame iframe, .case-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .case-video__poster { display: block; padding: 0; cursor: pointer; background: var(--black); -webkit-appearance: none; appearance: none; } .case-video__poster img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; transition: transform 0.4s var(--ease), opacity 0.3s var(--ease); } .case-video__poster:hover img, .case-video__poster:focus-visible img { transform: scale(1.02); opacity: 1; } .case-video__play { position: absolute; top: 50%; left: 50%; width: 74px; height: 74px; transform: translate(-50%, -50%); border-radius: 50%; background: color-mix(in srgb, var(--case-accent, var(--blush)) 72%, var(--ink)); transition: transform 0.25s var(--ease), background 0.25s var(--ease); } .case-video__play::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--actual-white); } .case-video__poster:hover .case-video__play, .case-video__poster:focus-visible .case-video__play { transform: translate(-50%, -50%) scale(1.08); } .case-podcast { padding: clamp(20px, 3vw, 44px) clamp(24px, 7vw, 106px) 0; } .case-podcast__frame { width: min(100%, 660px); margin-inline: auto; } .case-podcast__frame iframe { display: block; width: 100%; height: 175px; max-width: 660px; border: 0; border-radius: 12px; background: transparent; } .case-shot.case-podcast figcaption { width: min(100%, 660px); margin-inline: auto; padding-right: 0; padding-left: 0; } .ob-podcast { clear: both; width: min(100%, 660px); margin: clamp(48px, 6vw, 72px) 0 0; padding-top: clamp(18px, 2.4vw, 24px); border-top: 1px solid var(--rule); } .ob-podcast__label { margin: 0 0 14px; font-family: var(--font-eyebrow); font-size: 0.78rem; font-weight: 650; line-height: 1.3; letter-spacing: 0.045em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 58%, transparent); } .ob-podcast iframe { display: block; width: 100%; height: 175px; max-width: 660px; border: 0; border-radius: 12px; } @media (max-width: 760px) { .case-shot-grid { grid-template-columns: 1fr; } } /* Case motion — a local clip that builds on demand (app.js [data-motion]): hover on fine pointers, once-in-view on touch, click under reduced motion. Same stage treatment as .case-video: half-width, centred, rounded. */ .case-motion__frame { position: relative; width: 50%; margin-inline: auto; overflow: hidden; border-radius: 18px; background: var(--black); } .case-motion__frame video { display: block; width: 100%; height: auto; cursor: pointer; } .case-motion__hint { position: absolute; right: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px; font-family: var(--font-eyebrow); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none; } @media (hover: hover) and (pointer: fine) { .case-motion__hint { opacity: 1; } .case-motion__frame.is-playing .case-motion__hint, .case-motion__frame.is-done .case-motion__hint { opacity: 0; } } @media (max-width: 760px) { .case-motion__frame { width: 88%; border-radius: 14px; } } /* Case quote — after the old magic.qualls.co band Joe likes: a quiet NEUTRAL panel (never the case field), centred words, a short accent rule, and the client's photo riding the right column. Deliberately outside the .case-shot system: no Fig. counter, no hover zoom. */ .case-quote { margin: clamp(10px, 2vw, 26px) clamp(24px, 7vw, 106px) clamp(34px, 4vw, 56px); } .case-quote__panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 5vw, 84px); align-items: center; /* the site's only testimonial — let it take the stage (Joe's mock) */ padding: clamp(52px, 7vw, 124px) clamp(32px, 5.5vw, 100px); border-radius: 28px; background: color-mix(in srgb, var(--ink) 4%, var(--paper)); } .case-quote blockquote { margin: 0; max-width: 56ch; justify-self: center; text-align: center; } .case-quote__pull { margin: 0 0 0.6em; font-family: var(--font-body); font-weight: 200; /* Playfair floors at 400 — its lightest cut */ font-style: italic; font-size: clamp(1.8rem, 3.1vw, 3.3rem); line-height: 1.16; color: var(--ink); text-wrap: pretty; } .case-quote__text { margin: 0 auto 1.2em; max-width: 52ch; font-size: clamp(1.05rem, 1.35vw, 1.35rem); line-height: 1.6; color: color-mix(in srgb, var(--ink) 78%, transparent); } .case-quote cite { font-family: var(--font-eyebrow); font-style: normal; font-weight: 600; font-size: clamp(0.86rem, 1vw, 0.98rem); letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 60%, transparent); } .case-quote blockquote::after { content: ""; display: block; width: 80px; height: 3px; margin: 26px auto 0; background: var(--case-accent, var(--hot)); } .case-quote__face { width: clamp(190px, 24vw, 345px); height: auto; border-radius: 18px; /* ^ invisible on transparent cut-outs (Joe's Karen render carries its own card shape); plain rectangular photos get a soft card instead. */ } @media (max-width: 760px) { .case-quote { margin-inline: 16px; } .case-quote__panel { grid-template-columns: 1fr; row-gap: 26px; justify-items: center; } } /* ============================================================================ THE MAKING FIELD — a luminous particle system that reshapes through the nine moves. A full-bleed canvas sits behind a single centred step that takes the stage at a time, with a numbered rail on the right tracking progress. The viewport is pinned via a JS-toggled fixed pin (sticky is broken in page-mode) and scroll position scrubs through the steps. Controller: initMakingField(). Without JS the steps fall back to a plain, readable list. ========================================================================== */ .making-field { position: relative; background: var(--surface); /* black, via data-tone="dark" */ color: var(--ink); } /* invisible scroll track — gives the section its scroll height. JS reads its cells for scroll position. pointer-events:none so it never swallows clicks meant for the pinned viewport (rail, down-arrow). */ .making-field__track { position: relative; z-index: 1; pointer-events: none; } html:not(.js) .making-field__track { display: none; } .making-field__cell { height: var(--mf-cell, 64vh); } .making-field__viewport { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; display: grid; place-items: center; } html.js .making-field__viewport.is-pinned { position: fixed; } html.js .making-field__viewport.is-after { position: absolute; top: auto; bottom: 0; } html:not(.js) .making-field__viewport { position: relative; height: auto; min-height: 100vh; padding: clamp(80px, 16vh, 200px) 0; } .making-field__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } html:not(.js) .making-field__canvas { display: none; } /* the centred steps — one takes the stage at a time */ .making-field__steps { position: relative; list-style: none; margin: 0 auto; padding: 0; width: min(880px, 92vw); } /* centred without transform (transform would create a stacking context and stop the difference blend from reaching the canvas behind the text) */ html.js .making-field__steps { position: absolute; inset: 0; margin: auto; width: min(880px, 92vw); height: max-content; display: grid; place-items: center; place-content: center; } .making-field__step { text-align: center; padding: clamp(20px, 3vh, 44px) clamp(20px, 4vw, 50px); pointer-events: none; /* let the cursor reach the field for the repel */ } /* text sits straight on the field and inverts against it (difference blend) */ html.js .making-field__step { grid-area: 1 / 1; color: var(--white); mix-blend-mode: difference; opacity: 0; transform: translateY(12px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); } html.js .making-field__step.is-active { opacity: 1; transform: none; } html.js .making-field__kicker { color: inherit; opacity: 0.72; } html.js .making-field__desc { color: inherit; opacity: 0.92; } html:not(.js) .making-field__step { margin: 0 auto clamp(34px, 7vh, 72px); } .making-field__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 9vw, 8rem); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; } .making-field__kicker { margin: clamp(14px, 2.2vh, 26px) 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(0.7rem, 0.95vw, 0.82rem); letter-spacing: 0.24em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 62%, transparent); } .making-field__desc { margin: clamp(16px, 2.4vh, 28px) auto 0; max-width: 44ch; font-family: var(--font-body); font-size: clamp(1.05rem, 1.35vw, 1.32rem); line-height: 1.5; color: color-mix(in srgb, var(--ink) 82%, transparent); } /* right progress rail — 1…8 then the Q for the finale */ .making-field__rail { position: absolute; right: clamp(16px, 3vw, 56px); top: 50%; transform: translateY(-50%); z-index: 3; display: grid; gap: clamp(7px, 1.3vh, 15px); justify-items: end; } html:not(.js) .making-field__rail { display: none; } .making-field__rail-item { position: relative; /* so the step name anchors beside this number */ display: flex; align-items: center; gap: 12px; margin: 0; padding: 3px 0; border: 0; background: none; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 0.96rem; line-height: 1; color: color-mix(in srgb, var(--ink) 36%, transparent); transition: color 280ms var(--ease); } .making-field__rail-item:hover, .making-field__rail-item:focus-visible { color: var(--ink); outline: none; } .making-field__rail-item.is-active { color: var(--ink); font-weight: 800; } .making-field__rail-key { min-width: 1.4em; text-align: right; } .making-field__rail-q { display: block; width: 1.15em; height: 1.15em; object-fit: contain; opacity: 0.7; } .making-field__rail-item.is-active .making-field__rail-q { opacity: 1; } .making-field__rail-dash { width: 14px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.5; transition: width 280ms var(--ease), background 280ms var(--ease), opacity 280ms var(--ease); } .making-field__rail-item.is-active .making-field__rail-dash { width: 26px; background: var(--step-accent); opacity: 1; } .making-field__rail-item:focus-visible .making-field__rail-dash { width: 22px; } /* step name revealed on hover/focus, inward of the number */ .making-field__rail-name { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.03em; color: var(--ink); opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease), transform 220ms var(--ease); } .making-field__rail-item:hover .making-field__rail-name, .making-field__rail-item:focus-visible .making-field__rail-name { opacity: 1; transform: translateY(-50%) translateX(0); } /* grow the number + indicator on hover/focus */ .making-field__rail-key { transition: transform 220ms var(--ease), color 220ms var(--ease); transform-origin: right center; } .making-field__rail-item:hover .making-field__rail-key, .making-field__rail-item:focus-visible .making-field__rail-key { transform: scale(1.3); color: var(--ink); } .making-field__rail-item:hover .making-field__rail-dash, .making-field__rail-item:focus-visible .making-field__rail-dash { width: 30px; background: var(--step-accent); opacity: 1; } /* QC logo — opposite the rail, vertically centred on the left */ .making-field__logo { position: absolute; left: clamp(18px, 3vw, 56px); top: 50%; transform: translateY(-50%); z-index: 3; width: clamp(58px, 7vw, 104px); height: auto; opacity: 0.9; pointer-events: none; } /* clickable down-arrow — advance to the next step */ .making-field__advance { position: absolute; left: 50%; bottom: clamp(18px, 4vh, 44px); transform: translateX(-50%); z-index: 3; display: grid; place-items: center; width: clamp(40px, 3.6vw, 50px); height: clamp(40px, 3.6vw, 50px); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 32%, transparent); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); cursor: pointer; transition: border-color 240ms var(--ease), background 240ms var(--ease), opacity 360ms var(--ease); animation: mf-advance-bob 2.6s var(--ease) infinite; } .making-field__advance svg { width: 44%; height: 44%; display: block; } .making-field__advance:hover, .making-field__advance:focus-visible { border-color: var(--step-accent, var(--ink)); background: color-mix(in srgb, var(--ink) 14%, transparent); outline: none; } .making-field.is-end .making-field__advance { opacity: 0; pointer-events: none; } @keyframes mf-advance-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } } @media (prefers-reduced-motion: reduce) { .making-field__advance { animation: none; } } /* the finale holds longer so it's harder to scroll straight past */ .making-field__cell:last-child { height: calc(var(--mf-cell, 64vh) * 1.5); } /* ---- tablet / mobile ----------------------------------------------------- */ @media (max-width: 760px) { .making-field { --mf-cell: 58vh; } /* The html.js selector keeps the step copy clear of the right rail — the bare .making-field__steps width here used to LOSE that cascade fight, so the text ran underneath the rail numbers (unreadable with the difference blend). */ .making-field__steps, html.js .making-field__steps { width: calc(100vw - 116px); } .making-field__step { padding: clamp(18px, 4vw, 32px) 0; } .making-field__title { font-size: clamp(1.85rem, 8.6vw, 2.9rem); overflow-wrap: anywhere; } .making-field__kicker { letter-spacing: 0.16em; } .making-field__desc { font-size: clamp(0.98rem, 3.6vw, 1.16rem); } .making-field__logo { display: none; } .making-field__rail { right: 8px; gap: 6px; font-size: 0.78rem; } .making-field__rail-item { padding: 5px 0; } /* honest tap targets */ .making-field__rail-key { min-width: 1.2em; } .making-field__rail-dash { width: 9px; } .making-field__rail-item.is-active .making-field__rail-dash { width: 15px; } .making-field__advance { width: 38px; height: 38px; } } @media (prefers-reduced-motion: reduce) { html.js .making-field__step { transition: opacity 220ms linear; transform: none; } } /* ============================================================================ QC PROCESS PAGE — "Considered & Complete", the eight-step C-path ========================================================================== */ .qc-hero { position: relative; isolation: isolate; /* scope the mark's blend to this hero */ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: clamp(22px, 2.6vw, 36px); padding: clamp(120px, 14vw, 200px) clamp(24px, 7vw, 106px) clamp(96px, 16vh, 170px); background: url(textures/qc-hero.webp) center / cover no-repeat; border-bottom: 1px solid var(--rule); } /* The QC monogram, burned into the pastel field on the right (Joe, 2026-06-13): the two-ring mark (qc-icon.png) as a mask, filled coral, color-burn blend. z-index 0 keeps it behind the copy (which is elevated below). */ .qc-hero__mark { position: absolute; z-index: 0; top: 50%; right: clamp(-70px, -2.5vw, 0px); transform: translateY(-50%); width: clamp(230px, 34vw, 620px); aspect-ratio: 252 / 143; background-color: var(--coral); -webkit-mask: url(icons/qc.svg) center / contain no-repeat; mask: url(icons/qc.svg) center / contain no-repeat; mix-blend-mode: color-burn; pointer-events: none; } /* keep the copy above the burned mark */ .qc-hero .section-kicker, .qc-hero h1, .qc-hero__lede { position: relative; z-index: 1; } /* on phones, drop the mark into the empty lower-right field so it never sits behind the lede */ @media (max-width: 760px) { .qc-hero__mark { top: auto; bottom: clamp(24px, 7vw, 64px); right: clamp(-70px, -12vw, -24px); transform: none; width: clamp(240px, 66vw, 340px); } } .qc-hero h1 { margin: 0; font-family: var(--font-display); font-size: clamp(3rem, 9vw, 9.5rem); font-weight: 900; line-height: 0.84; letter-spacing: -0.012em; color: var(--forest); } .qc-hero__lede { margin: 0; max-width: 40ch; font-family: var(--font-body); font-size: clamp(1.3rem, 1.9vw, 1.95rem); line-height: 1.46; color: color-mix(in srgb, var(--ink) 86%, transparent); } .qc-cta { border-top: 1px solid var(--rule); } /* ============================================================================ CASE STUDY SPICE — motion, reading progress, hover, sticky labels ========================================================================== */ /* Reveal on scroll (gated behind .js so content is never hidden without JS). A confident, short travel: most of the move happens early on the expo curve, then the transform trails opacity slightly so each element *settles* into place rather than sliding. Small distance + unhurried duration reads premium; a big slide reads like a template. */ html.js [data-reveal] { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 600ms var(--ease), transform 780ms var(--ease); } html.js [data-reveal].is-visible { opacity: 1; transform: none; } /* Cascade when several siblings reveal together in one grid/row. Tight, even steps that carry through to the 8-up discipline grid (was capped at 4). */ html.js :is(.stat-grid, .work-cards, .ob-grid, .sense-pillars, .qc__steps, .contact-notes, .ob-nav) > [data-reveal]:nth-child(2) { transition-delay: 70ms; } html.js :is(.stat-grid, .work-cards, .ob-grid, .sense-pillars, .qc__steps, .contact-notes, .ob-nav) > [data-reveal]:nth-child(3) { transition-delay: 130ms; } html.js :is(.stat-grid, .work-cards, .ob-grid, .sense-pillars, .qc__steps, .contact-notes, .ob-nav) > [data-reveal]:nth-child(4) { transition-delay: 190ms; } html.js :is(.stat-grid, .work-cards, .ob-grid, .sense-pillars, .qc__steps, .contact-notes, .ob-nav) > [data-reveal]:nth-child(5) { transition-delay: 240ms; } html.js :is(.stat-grid, .work-cards, .ob-grid, .sense-pillars, .qc__steps, .contact-notes, .ob-nav) > [data-reveal]:nth-child(6) { transition-delay: 290ms; } html.js :is(.stat-grid, .work-cards, .ob-grid, .sense-pillars, .qc__steps, .contact-notes, .ob-nav) > [data-reveal]:nth-child(7) { transition-delay: 330ms; } html.js :is(.stat-grid, .work-cards, .ob-grid, .sense-pillars, .qc__steps, .contact-notes, .ob-nav) > [data-reveal]:nth-child(n+8) { transition-delay: 365ms; } /* ---- Masthead load choreography ---------------------------------------- The signature load moment: the page lede settles in on first paint, its parts rising and clearing a soft blur in sequence (kicker, headline, copy, count). Blur is reserved for THIS moment, not the scroll reveal, so it reads as a deliberate flourish rather than a uniform effect. Gated behind html.js (no-JS sees it static) and prefers-reduced-motion. */ @media (prefers-reduced-motion: no-preference) { html.js .reel-lede .section-kicker, html.js .reel-lede h1, html.js .reel-lede__copy, html.js .reel-lede__count, html.js .capabilities-hero .section-kicker, html.js .capabilities-hero__title, html.js .capabilities-hero__summary, html.js .capabilities-hero__meta { animation: lede-rise 820ms var(--ease) both; } html.js .reel-lede .section-kicker, html.js .capabilities-hero .section-kicker { animation-delay: 80ms; } html.js .reel-lede h1, html.js .capabilities-hero__title { animation-delay: 165ms; animation-duration: 940ms; } html.js .reel-lede__copy, html.js .capabilities-hero__summary { animation-delay: 300ms; } html.js .reel-lede__count, html.js .capabilities-hero__meta { animation-delay: 400ms; } } @keyframes lede-rise { from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(7px); } to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); } } /* Gallery image hover — a subtle zoom within the frame */ .case-shot--full, .case-shot-grid { overflow: hidden; } .case-shot--full img, .case-shot-grid img { transition: transform 760ms var(--ease); } @media (hover: hover) { .case-shot--full:hover img { transform: scale(1.02); } .case-shot-grid img:hover { transform: scale(1.04); } } /* Reading-progress bar (zero-JS, scroll-driven where supported) */ .read-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 40; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--hot), var(--forest)); } @supports (animation-timeline: scroll()) { .read-progress { animation: read-grow linear both; animation-timeline: scroll(root); } } @keyframes read-grow { to { transform: scaleX(1); } } /* Sticky story labels — they hold while each beat scrolls past */ .case-story2 article { align-items: start; } .case-story2__label { position: sticky; top: clamp(96px, 13vh, 140px); align-self: start; } /* Hero art — a gentle float */ @media (prefers-reduced-motion: no-preference) { .case-hero__art { animation: case-float 8s ease-in-out infinite; } } @keyframes case-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } } @media (max-width: 760px) { .case-story2__label { position: static; } } /* ============================================================================ ABOUT — founder + clients ========================================================================== */ .founder { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 20px 150px 10px 90px; border-bottom: 1px solid var(--rule); background: var(--paper); } /* Portrait: the Q-ring graphic is baked into the webp, so this is the whole composition. */ .founder__portrait { justify-self: center; width: 800px; } .founder__photo { display: block; width: 100%; height: auto; } .founder__copy { display: grid; gap: clamp(28px, 4vw, 46px); align-content: center; } /* Quote: upright Playfair serif, two paragraphs. */ .founder__quote { margin: 0; display: grid; gap: 1.1em; font-family: var(--font-body); font-style: normal; font-size: 22px; line-height: 1.5; padding-right: 60px; color: var(--ink); } .founder__quote p { margin: 0; } /* Signature stacked above the credit line. */ .founder__sign { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.6vw, 20px); } .founder__sig { height: clamp(42px, 5vw, 60px); width: auto; } /* Signature art is white-on-transparent; invert to ink on the light page so it reads. */ body.page-light .founder__sig { filter: invert(1); } .founder__credit { margin: 0; font-family: var(--font-eyebrow); font-size: 1.02rem; letter-spacing: 0.01em; color: var(--warm-muted); } .founder__credit strong { color: var(--forest); font-weight: 700; } .clients-band { display: grid; gap: clamp(22px, 3vw, 40px); justify-items: center; padding: clamp(50px, 7vw, 100px) clamp(24px, 7vw, 106px); border-bottom: 1px solid var(--rule); background: var(--actual-white); } .clients-band img { width: 100%; max-width: 780px; height: auto; filter: brightness(0) invert(0.72); } /* Logos are black art; the dark-theme filter lightens them. On the light page, keep them dark grey so they read as a muted client band on paper. */ body.page-light .clients-band img { filter: brightness(0) invert(0.32); } @media (max-width: 760px) { .founder { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 40px); /* reset the desktop's left/right-weighted padding (was 20px 150px 10px 90px), which crushed the stacked quote into a sliver */ padding: clamp(48px, 11vw, 76px) clamp(22px, 6vw, 32px); } .founder__portrait { width: min(86%, 560px); } .founder__copy { gap: clamp(22px, 5vw, 32px); } .founder__quote { padding-right: 0; font-size: 1.25rem; line-height: 1.55; } } /* ============================================================================ SERVICES — icon-led Think/Feel/Touch/See + richer QC steps ========================================================================== */ .sense-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border-bottom: 1px solid var(--rule); } .sense-pillar { position: relative; display: grid; align-content: start; gap: clamp(16px, 2vw, 26px); min-height: clamp(300px, 28vw, 420px); padding: clamp(28px, 3vw, 52px); background: var(--surface); overflow: hidden; isolation: isolate; } .sense-pillar::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--accent); transform: scaleX(0.16); transform-origin: left center; transition: transform 360ms var(--ease); } .sense-pillar:hover::after { transform: scaleX(1); } /* Icon + hover-gif paths resolve relative to this stylesheet (/assets/), so bare filenames avoid the assets/assets/ doubling that inline url() caused. */ .sense-pillar--think { --icon: url("icons/think.svg"); --icon-hover: url("services/think-loop.webp"); } .sense-pillar--feel { --icon: url("icons/feel.svg"); --icon-hover: url("services/feel-loop.webp"); } .sense-pillar--touch { --icon: url("icons/touch.svg"); --icon-hover: url("services/touch-loop.webp"); } .sense-pillar--see { --icon: url("icons/see.svg"); --icon-hover: url("services/see-loop.webp"); } .sense-pillar__icon { /* The discs are baked into the icon art (Joe's exports) — no ring needed. Sized up per the 2026-06-13 mock. */ width: clamp(104px, 11vw, 164px); height: clamp(104px, 11vw, 164px); border-radius: 50%; background: var(--paper) var(--icon, none) center / cover no-repeat; transition: background-image 120ms linear; } .sense-pillar:hover .sense-pillar__icon, .sense-pillar:focus-within .sense-pillar__icon { background-image: var(--icon-hover, var(--icon, none)); } .sense-pillar h3 { margin: 0; font-family: var(--font-display); font-size: clamp(1.8rem, 2.6vw, 3rem); font-weight: 900; line-height: 0.9; letter-spacing: 0; } .sense-pillar__role { font-family: var(--font-display); font-size: 0.74rem; font-weight: 900; letter-spacing: -0.02em !important; text-transform: uppercase; color: var(--accent); } .sense-pillar p { margin: 0; font-family: var(--font-body); font-size: clamp(1rem, 1.15vw, 1.16rem); line-height: 1.5; color: color-mix(in srgb, var(--ink) 74%, transparent); } /* QC steps — now carry a subtitle + description */ .qc__steps li { min-height: clamp(190px, 16vw, 250px); gap: 8px; } .qc__steps em { font-style: normal; font-family: var(--font-display); font-size: 0.84rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: color-mix(in srgb, var(--ink) 84%, transparent); } .qc__steps li p { margin: 0; font-family: var(--font-body); font-size: 0.93rem; line-height: 1.42; color: color-mix(in srgb, var(--ink) 56%, transparent); } /* QC callout — the dark band that replaced the "+ Celebrate" bar (Joe's mock, 2026-06-12): "See [QC] in action →" over the conceive sphere from the making field, miniaturised (app.js initQcCallout paints the canvas). */ .qc-callout { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 1.8vw, 28px); min-height: clamp(104px, 12vw, 164px); padding: clamp(18px, 2vw, 28px) clamp(24px, 7vw, 106px); border-top: 1px solid var(--rule); overflow: hidden; background: var(--black); color: var(--actual-white); text-decoration: none; } .qc-callout__field { position: absolute; inset: 0; width: 100%; height: 100%; } .qc-callout__line { position: relative; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); font-family: var(--font-eyebrow); font-weight: 200; font-size: clamp(1.45rem, 2.6vw, 2.3rem); letter-spacing: 0.01em; white-space: nowrap; } .qc-callout__mark { height: clamp(46px, 5.4vw, 72px); width: auto; display: block; } .qc-callout__arrow { color: var(--blush); font-weight: 300; transition: transform 220ms var(--ease); } .qc-callout:hover .qc-callout__arrow, .qc-callout:focus-visible .qc-callout__arrow { transform: translateX(8px); } /* The brand construction on the capabilities lede — hairline Q geometry with the 135° line riding the tail (Joe's option 2, 2026-06-12). Placed FIRST in the section so the positioned text children paint above it. */ .lede-construct { position: absolute; top: 0; bottom: 0; right: -4vw; aspect-ratio: 1 / 1; pointer-events: none; color: color-mix(in srgb, var(--ink) 16%, transparent); } .lede-construct svg, .slide-construct svg, .contact-construct svg { width: 100%; height: 100%; display: block; } .lede-construct line, .lede-construct circle, .lede-construct path, .slide-construct line, .slide-construct circle, .slide-construct path, .contact-construct line, .contact-construct circle, .contact-construct path { stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; } @media (max-width: 1000px) { .lede-construct { display: none; } } @media (max-width: 1040px) { .sense-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .sense-pillars { grid-template-columns: 1fr; } /* Compact phone layout: icon beside the text instead of stacked above, to save vertical height (Joe's mock). Suite teasers keep their own 2-up layout, so scope away from .service-suite. */ .sense:not(.service-suite) .sense-pillar { grid-template-columns: auto 1fr; grid-template-areas: "icon name" "icon role" "icon copy"; column-gap: 16px; row-gap: 5px; align-content: center; min-height: 0; padding: 22px clamp(18px, 5vw, 28px); } .sense:not(.service-suite) .sense-pillar__icon { grid-area: icon; align-self: center; width: 72px; height: 72px; } .sense:not(.service-suite) .sense-pillar h3 { grid-area: name; } .sense:not(.service-suite) .sense-pillar__role { grid-area: role; } .sense:not(.service-suite) .sense-pillar p { grid-area: copy; } } /* ============================================================================ CAPABILITIES + ABOUT — supplied hero artwork experiment (2026-07-12). The Capabilities artwork sits on the same #f6f6f6 field baked into its square canvas. The About artwork is a transparent foreground layer over a deliberately stretched, full-bleed forest light-leak background. ========================================================================== */ .capabilities-hero { position: relative; display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); min-height: 100svh; overflow: hidden; isolation: isolate; background: #f6f6f6; color: var(--black); } .capabilities-hero__copy { position: relative; z-index: 1; display: grid; align-content: center; gap: clamp(20px, 2.3vw, 34px); min-width: 0; padding: clamp(142px, 17vh, 202px) clamp(30px, 3.2vw, 64px) clamp(58px, 8vh, 94px) clamp(24px, 6vw, 112px); } .capabilities-hero .section-kicker { color: var(--black); } .capabilities-hero__title { margin: 0; color: var(--forest); font-size: clamp(3.1rem, 4.9vw, 6.3rem); line-height: 0.86 !important; } .capabilities-hero__summary { max-width: 650px; margin: 0; color: var(--black); font-family: var(--font-body); font-size: clamp(1.08rem, 1.42vw, 1.52rem); line-height: 1.5; } .capabilities-hero__meta { color: var(--black); font-family: var(--font-eyebrow); font-size: 0.74rem; font-weight: 679; letter-spacing: 0.07em; line-height: 1.25; text-transform: uppercase; } .capabilities-hero__media { display: grid; place-items: center; min-width: 0; padding: clamp(52px, 6vh, 82px) 0 clamp(28px, 4vh, 54px); } .capabilities-hero__art { display: block; width: min(49vw, 900px); max-width: none; height: auto; transform: translateX(0.5vw); } .capabilities-hero__video { mix-blend-mode: multiply; } .capabilities-hero__fallback { display: none; } .about-art-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; width: 100%; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; isolation: isolate; background: var(--forest); } .about-art-hero__bg { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; } .about-art-hero__video, .about-art-hero__fallback { position: relative; z-index: 1; display: block; width: min(70vw, 1400px); max-width: none; height: auto; object-fit: contain; } .about-art-hero__video { mix-blend-mode: screen; } .about-art-hero__fallback { display: none; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* The About page opens on a dark hero. Its body starts with nav-on-dark in the generated HTML so search/menu are light before app.js runs; this page-scoped fallback keeps the Q badge visible until its animated SVG is injected (and remains a useful static mark when JavaScript is unavailable). */ body.page-about .q-logo-mark:empty { background: #000 url("/assets/brand/q-mark-white.svg") center / 60% auto no-repeat; } @media (min-width: 901px) and (max-height: 760px) { .capabilities-hero__copy { gap: 18px; padding-top: 122px; padding-bottom: 48px; } .capabilities-hero__title { font-size: clamp(3rem, 4.45vw, 5.35rem); } .capabilities-hero__summary { font-size: clamp(1.02rem, 1.25vw, 1.28rem); } .capabilities-hero__art { width: min(47vw, 79svh); } } @media (max-width: 900px) { .capabilities-hero { grid-template-columns: 1fr; min-height: auto; } .capabilities-hero__copy { gap: clamp(18px, 4vw, 28px); padding: clamp(124px, 18vh, 158px) clamp(20px, 6vw, 48px) clamp(38px, 7vw, 58px); } .capabilities-hero__title { font-size: clamp(3.2rem, 12.6vw, 5.2rem); } .capabilities-hero__summary { max-width: 720px; font-size: clamp(1.05rem, 3.2vw, 1.35rem); } .capabilities-hero__media { padding: 0 0 clamp(20px, 5vw, 38px); } .capabilities-hero__art { width: min(92vw, 720px); max-width: 92%; transform: none; } } @media (max-width: 720px) { .about-art-hero { min-height: clamp(390px, 60svh, 540px); aspect-ratio: auto; } .about-art-hero__video, .about-art-hero__fallback { width: 118vw; } .about-art-hero__video { width: 100vw; } } @media (prefers-reduced-motion: reduce) { .capabilities-hero__video { display: none; } .capabilities-hero__fallback { display: block; } .about-art-hero__video { display: none; } .about-art-hero__fallback { display: block; } } @media (max-width: 520px) { .capabilities-hero__media { position: relative; top: clamp(-48px, -11vw, -40px); order: -1; padding: clamp(104px, 24vw, 112px) 0 0; } .capabilities-hero__copy { margin-top: clamp(-104px, -22vw, -72px); padding: 0 20px clamp(38px, 7vw, 58px); } .capabilities-hero__title { font-size: clamp(3rem, 13vw, 4.25rem); } } /* =========================================================================== NATIVE SCROLL MODE (fork experiment) — swaps the wheel-hijacked card deck for a normal scrolling page: hero + the six work panels become full-height scroll-snap sections; Studio/Services/Contact flow naturally below. The sticky-q deck is left untouched. =========================================================================== */ html:has(body[data-slide-transition="native"]) { overflow-y: auto; overflow-x: clip; /* intentional right-edge bleeds must never create sideways scroll */ height: auto; } body[data-slide-transition="native"] { overflow: visible; height: auto; } body[data-slide-transition="native"] main#top { overflow: visible; height: auto; } /* slides leave the absolute stack and become visible, flowing blocks */ body[data-slide-transition="native"] .site-slide { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; pointer-events: auto; background: transparent; /* cards are covered by .slide-bg; sections set their own below */ } /* The case-study deck is ONE discrete wipe-carousel at EVERY width — desktop drives it with wheel/keys, phones with swipe (see app.js). The work-stack is a parked 100svh frame; panels are absolutely stacked inside and only the incoming panel's clip-path animates (the wipe). No sticky, no scroll-scrubbing, no margin math. */ body[data-slide-transition="native"] .work-stack { position: relative; height: 100svh; min-height: 100svh; margin: 0; overflow: hidden; z-index: 2; } /* Desktop hardening (2026-06-13): `svh` can resolve a hair SHORTER than the real window in some desktop browsers, leaving the deck below the viewport bottom — which both breaks the lock-on-load (it needs the deck to fill innerHeight) and lets the studio section peek beneath. On desktop there is no dynamic toolbar, so `vh` == the window; pin to it. Mobile keeps `svh` (first screen, toolbars up). */ @media (min-width: 761px) { body[data-slide-transition="native"] .work-stack { height: 100vh; min-height: 100vh; } body[data-slide-transition="native"] .hero { min-height: 100vh; } } /* CSS scroll-snap parks the deck for TOUCH (phones) only. On DESKTOP the deck uses the "Huge model" (app.js): while you're in it the page is LOCKED (overflow:hidden, can't natively scroll) and wheel/keys advance the wipe — no scroll-snap, no preventDefault. That sidesteps BOTH Chrome's mouse-wheel-snap trap AND Safari's ignore-preventDefault-on-momentum bug, because a locked page has no native scroll to fight. (Safari scroll-snap on the root also breaks the mouse wheel outright, which is exactly why it's touch-only now.) */ @media (max-width: 760px) { html:has(body[data-slide-transition="native"]) { scroll-snap-type: y proximity; } body[data-slide-transition="native"] .work-stack { scroll-snap-align: start; } } body[data-slide-transition="native"] .work-stack > .work-panel { position: absolute; inset: 0; height: 100%; min-height: 0; margin: 0; z-index: 1; /* base: every idle panel sits behind the active one */ clip-path: inset(0 0 0 0); backface-visibility: hidden; } /* Before app.js promotes the active slide, same-z-index stacked panels would let the final card win first paint. Keep the hero visible, then let JS own it. */ html.js body[data-slide-transition="native"] .work-stack > .work-panel { opacity: 0; pointer-events: none; visibility: hidden; } html.js body[data-slide-transition="native"] .work-stack:not(.is-carousel-ready) > .work-panel:first-of-type, html.js body[data-slide-transition="native"] .work-stack > .work-panel.is-active, html.js body[data-slide-transition="native"] .work-stack > .work-panel.is-entering { opacity: 1; visibility: visible; } /* z-index is owned by the carousel (NOT an nth-of-type ladder, which would let an idle last card cover the active one): showing card on top, the wiping-in card above it. */ body[data-slide-transition="native"] .work-stack > .work-panel.is-active { z-index: 2; } body[data-slide-transition="native"] .work-stack > .work-panel.is-entering { z-index: 3; } /* pagination — horizontal "–" tick marks down the right-hand edge (all widths), stacked vertically. The active mark is brighter and wider (scaleX, so it grows from its centre without nudging the others). */ .work-stack > .carousel-dots { position: absolute; top: 50%; right: calc(env(safe-area-inset-right, 0px) + 26px); transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 12px; } .carousel-dot { width: 16px; height: 2px; padding: 0; border: 0; border-radius: 99px; background: var(--white); opacity: 0.4; cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: 0 0 3px color-mix(in srgb, var(--black) 30%, transparent); /* faint halo so the white marks read on light photos */ transition: opacity 200ms var(--ease), transform 200ms var(--ease); } .carousel-dot.is-on { opacity: 1; transform: scaleX(1.6); } /* Hover/focus affordance on the plain marks (not the dog) — brighten + extend so it's clear they're clickable. Wins the cascade over .is-on, so hovering the active mark grows it rather than shrinking it. */ .carousel-dot:not(.carousel-dot--welcome):hover, .carousel-dot:not(.carousel-dot--welcome):focus-visible { opacity: 1; transform: scaleX(1.8); } /* First mark = the Qualls dog ("Welcome"). It's an icon, not a dash, so reset the dash box and let the masked silhouette manage itself. */ .carousel-dot--welcome { position: relative; width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; opacity: 1; margin-bottom: 6px; /* a touch of air before the dashes */ } .carousel-dot--welcome.is-on { transform: none; } /* never scaleX the dog */ .carousel-dot__dog { display: block; width: 22px; height: 27px; background: var(--white); -webkit-mask: url(textures/dog.svg) center / contain no-repeat; mask: url(textures/dog.svg) center / contain no-repeat; opacity: 0.82; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--black) 30%, transparent)); transition: opacity 200ms var(--ease), transform 200ms var(--ease); } .carousel-dot--welcome:hover .carousel-dot__dog, .carousel-dot--welcome.is-on .carousel-dot__dog { opacity: 1; } .carousel-dot--welcome:hover .carousel-dot__dog { transform: translateY(-1px); } /* Hover labels on the welcome dog + the skip arrow — slide out to the left of the rail (Joe's mock 2026-06-13). White with a halo, like the marks. */ .carousel-rail__label { position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(8px, -50%); white-space: nowrap; font-family: var(--font-eyebrow); font-size: 0.92rem; font-weight: 300; letter-spacing: 0.01em; color: var(--white); opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease), transform 220ms var(--ease); } .carousel-dot--welcome:hover .carousel-rail__label, .carousel-dot--welcome:focus-visible .carousel-rail__label, .work-stack > .carousel-dots .carousel-skip:hover .carousel-rail__label, .work-stack > .carousel-dots .carousel-skip:focus-visible .carousel-rail__label { opacity: 1; transform: translate(0, -50%); } /* "Skip the deck" arrows — one at the foot of the side rail, one centred at the foot of the slide. Both jump straight past the carousel to the studio section below. */ .work-stack > .carousel-dots .carousel-skip { position: relative; margin-top: 16px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--white); opacity: 0.6; cursor: pointer; -webkit-appearance: none; appearance: none; transition: opacity 200ms var(--ease), transform 200ms var(--ease); } .work-stack > .carousel-dots .carousel-skip svg { width: 20px; height: 20px; display: block; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--black) 35%, transparent)); } .work-stack > .carousel-dots .carousel-skip:hover { opacity: 1; transform: translateY(3px); } /* (The centred deck-foot skip arrow is gone — Joe 2026-06-12; the side rail's .carousel-skip is the one skip affordance.) */ /* Hero is a normal full-height intro section (not part of the carousel). */ body[data-slide-transition="native"] .hero { position: relative; z-index: 5; /* above the deck (work-stack z-2), below the header (z-30) + menu */ height: auto; min-height: 100vh; min-height: 100svh; /* fit the FIRST iPhone screen (toolbars visible), like the deck frame */ margin-bottom: 0; } /* The carousel clips the WHOLE panel (app.js animates panel.clipPath), so a card's background is never clipped on its own — the diagonal Q-mask inside it stays intact. */ body[data-slide-transition="native"] .work-panel > .slide-bg { clip-path: none; } /* text sections scroll up over the finished deck, then flow as a normal page */ body[data-slide-transition="native"] .studio, body[data-slide-transition="native"] .services, body[data-slide-transition="native"] .contact { position: relative; z-index: 5; /* above the deck (work-stack z-2), below the header (z-30) + menu */ height: auto; min-height: 100vh; background: var(--slide-bg); } /* page sections sit still */ body[data-slide-transition="native"] .studio > :not(.slide-bg), body[data-slide-transition="native"] .services > :not(.slide-bg), body[data-slide-transition="native"] .contact > :not(.slide-bg) { opacity: 1; transform: none; } /* deck text shows in place (the wipe clips the whole panel — no text parallax). The opacity:1 is REQUIRED: .case-content otherwise inherits the slide-transition hidden var. */ body[data-slide-transition="native"] .case-content, body[data-slide-transition="native"] .hero > :not(.slide-bg) { opacity: 1; transform: none; } body[data-slide-transition="native"] .slide-transition { display: none; } /* =========================================================================== MENU REDESIGN (mockup) — appended last to win over the earlier stacked menu definitions in this file. Items = boxes (current black, hover var(--hot)); the preview is a purple stage with a "the [Word]" wordmark, a looping ring SVG centred over it, and the note pinned to the bottom. =========================================================================== */ .menu-shell { padding: 140px 4.4vw 4.4vw; /* bottom inset = the sides so the card clears the window edge evenly */ --menu-purple-top: var(--hot); /* top half + active/hover tab (matches text → black via difference) */ --menu-purple-bot: color-mix(in srgb, var(--hot) 62%, var(--black)); /* bottom half */ } .menu-grid { align-items: stretch; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); /* one column per menu item — Offbrand made it six */ gap: 0; width: 100%; max-width: none; margin: 0; /* abut the preview so the active/hover box reads as a tab */ } .menu-link { align-items: flex-start; display: flex; flex-direction: column; min-height: clamp(126px, 16vh, 172px); padding: clamp(26px, 3.6vh, 44px) clamp(18px, 1.6vw, 30px) clamp(15px, 2vh, 26px); text-align: left; color: var(--black); background: var(--actual-white); /* pure white tabs — contrast against the warm shell (Joe) */ transform: none; transition: background 220ms var(--ease), color 220ms var(--ease); } .menu-label { display: block; /* Eyebrow treatment at 20px, Title Case (Joe) — family/weight are force-set by the !important eyebrow block further down; tracking runs TIGHTER than the standard eyebrow 0.07em via the -0.01em !important override that follows that block. The clamp floor guards narrow desktops. */ font-family: var(--font-eyebrow); font-size: clamp(17px, 1.39vw, 20px); font-weight: 679; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; } .menu-description { display: block; font-family: var(--font-body); font-size: clamp(0.92rem, 1vw, 1.1rem); line-height: 1.3; margin-top: clamp(8px, 1.2vh, 15px); color: var(--hot); } .menu-rule { border-top: 1px solid currentColor; display: block; margin: auto 0 0; width: 56px; opacity: 0; transition: opacity 200ms var(--ease); } .menu-link[aria-current="page"] { background: var(--black); color: var(--white); transform: none; } .menu-link:hover, .menu-link:focus-visible { background: var(--menu-purple-top); color: var(--white); transform: none; } /* ^ transform:none cancels block-3's translateY(-6px) lift so the active/hover tab stays down and abuts the stage (no gap). */ .menu-link[aria-current="page"] .menu-rule, .menu-link:hover .menu-rule, .menu-link:focus-visible .menu-rule { opacity: 1; } /* Stage = purple preview (left) + quiet aubergine info panel (right, per Joe's mockup): the positioning line lives there now instead of floating over the slides, and the slides carry ONLY the wordmark + ring — calm beats busy. */ .menu-stage { flex: 1; min-height: 0; display: grid; grid-template-columns: 4fr 2fr; /* 4 tabs : 2 tabs — panel edge lands exactly on the tab grid (.menu-grid is full-width, so the stage stretches to match) (Joe) */ } .menu-stage__panel { display: grid; /* per-slide copy blocks stack in one cell and crossfade */ grid-template-rows: minmax(0, 1fr) auto; /* row 2 = persistent social strip */ row-gap: clamp(22px, 3vh, 34px); padding: clamp(28px, 3.4vw, 64px); background: var(--aubergine); } .menu-stage__copy { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(18px, 2.8vh, 32px); opacity: 0; visibility: hidden; transition: opacity 200ms linear, visibility 0s 200ms; } .menu-stage__copy.is-active { opacity: 1; visibility: visible; transition: opacity 160ms linear, visibility 0s; } .menu-stage__note { margin: 0; max-width: 17ch; font-family: var(--font-eyebrow); font-weight: 200; font-size: clamp(1.3rem, 1.8vw, 2rem); line-height: 1.32; letter-spacing: -0.01em; color: var(--paper); } .menu-stage__line { margin: 0; max-width: 19ch; font-family: var(--font-body); font-weight: 200; /* Playfair floors at 400 — renders its lightest cut */ font-size: clamp(1.25rem, 1.7vw, 1.9rem); line-height: 1.32; color: var(--blush); } .menu-stage__contact { margin: clamp(6px, 1.4vh, 14px) 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.8vh, 18px); } .menu-stage__contact a { font-family: var(--font-body); font-weight: 200; font-size: clamp(1.3rem, 1.7vw, 1.85rem); line-height: 1.1; color: var(--blush); text-decoration: none; overflow-wrap: anywhere; transition: color 200ms var(--ease); } .menu-stage__contact a:hover, .menu-stage__contact a:focus-visible { color: var(--paper); } .menu-stage__more { margin-top: auto; /* pin to the panel foot; the text blocks stack from the top */ display: flex; width: 100%; align-items: center; justify-content: space-between; /* arrow rides the right edge, per the mockup */ gap: 14px; font-family: var(--font-eyebrow); font-weight: 500; font-size: clamp(1.05rem, 1.25vw, 1.3rem); color: var(--paper); text-decoration: none; transition: color 200ms var(--ease); } .menu-stage__more i { font-style: normal; transition: transform 200ms var(--ease); } .menu-stage__more:hover, .menu-stage__more:focus-visible { color: var(--blush); } .menu-stage__more:hover i, .menu-stage__more:focus-visible i { transform: translateX(6px); } /* Solid social glyphs ride the panel foot whichever copy block is showing — the contact channels (phone, email, the networks) stay grouped in one rail. */ .menu-stage__social { grid-area: 2 / 1; display: flex; align-items: center; gap: clamp(26px, 2.6vw, 40px); margin: 0; padding: 0; list-style: none; } .menu-stage__social a { display: grid; place-items: center; min-width: 24px; height: 24px; color: color-mix(in srgb, var(--paper) 56%, transparent); transition: color 200ms var(--ease); } .menu-stage__social a:hover, .menu-stage__social a:focus-visible { color: var(--paper); } .menu-stage__social svg { display: block; height: 19px; width: auto; } .menu-preview { flex: 1; width: 100%; max-width: none; min-height: 0; max-height: none; position: relative; overflow: hidden; border: 0; box-shadow: none; background: linear-gradient(180deg, var(--menu-purple-top) 0 50%, var(--menu-purple-bot) 50% 100%); container-type: inline-size; /* wordmark sizes against the stage, not the viewport */ } .menu-preview__slide { position: absolute; inset: 0; display: flex; flex-direction: column; /* wordmark above the per-slide info line */ align-items: center; justify-content: center; gap: clamp(14px, 2.6vh, 26px); opacity: 0; visibility: hidden; transform: none; background: transparent; transition: opacity 200ms linear, visibility 0s 200ms; } .menu-preview__slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 160ms linear, visibility 0s; } .menu-preview__slide::before, .menu-preview__slide::after { content: none; } .menu-preview__wordmark { position: relative; z-index: 1; /* above the ring (z:0) — text sits on top of the svg */ display: flex; align-items: center; gap: 0.16em; color: var(--menu-purple-top); white-space: nowrap; mix-blend-mode: difference; /* blend on the GROUP, not the children, so the wordmark can take a z-index without isolating its own blend — it composites against its parent backdrop (the ring + stage). Text -> black on #6000ff. */ } .menu-preview__giant { position: static; bottom: auto; left: auto; /* Centred ON the stage's hard 50% colour seam — the difference blend slices the letters into two tones at the line. That straddle is the moment (Joe). */ transform: none; display: block; font-family: var(--font-body); font-weight: 500; /* 9.4cqw: the longest phrase ("just a little off") spans ~78% of the stage */ font-size: clamp(3.2rem, 9.4cqw, 8.4rem); line-height: 1; letter-spacing: -0.015em; color: var(--menu-purple-top); } .menu-preview__ring { position: absolute; top: 50%; left: 50%; width: clamp(260px, 27vw, 410px); height: clamp(260px, 27vw, 410px); transform: translate(-50%, -54%); z-index: 0; /* behind the wordmark — the text sits on top of the ring */ pointer-events: none; } /* Mobile-only footer (phone + email + hot rule + socials) — shown ≤1040 where the preview stage is dropped; see the mobile-menu media query. */ .menu-foot { display: none; } .menu-preview__ring svg, .menu-preview__ring img { display: block; width: 100%; height: 100%; } /* Dark shade overlay removed from slide backgrounds (per design) — keeps the .panel-shade element but drops the dark wash. Inner-page shades are untouched. */ .work-panel .panel-shade { background: none; } /* CLICKS (native scroll): cards are stacked sticky boxes, so a card rising into place sits (transparent) over the card behind it and would swallow clicks meant for it. The card boxes themselves don't catch pointer events — only their text/links do. */ body[data-slide-transition="native"] .hero, body[data-slide-transition="native"] .work-panel { pointer-events: none; } body[data-slide-transition="native"] .case-content, body[data-slide-transition="native"] .hero > :not(.slide-bg) { pointer-events: auto; } /* the work-stack carries a paper-cream bg that, as it rises over the pinned hero before the first card wipes in, shows as a beige gap. In native mode it must be transparent so the hero shows through until the first card reveals. */ body[data-slide-transition="native"] .work-stack { background: transparent; } /* ============================================================================ TYPE SYSTEM — baked from the ?fonts Font Lab (2026-06-07, approved by Joe). Body → Playfair Display (loaded via the Google ). Headlines → Protest Strike. Eyebrows → Stack Sans Headline. The two display faces are self-hosted (assets/fonts/) so the approved size scales — headlines ×0.85, eyebrows ×0.97 — can be applied uniformly through the @font-face `size-adjust` descriptor. That scales every size flowing through the font, preserving the responsive type hierarchy WITHOUT editing the dozens of clamp() font-size rules. Re-tune any time with ?fonts (initFontLab in app.js). ========================================================================== */ @font-face { font-family: "QUALLS Icons"; font-style: normal; font-weight: 400; font-display: block; src: url("fonts/qualls-icons.woff?v=20260625b") format("woff"); } @font-face { font-family: "Protest Strike"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/protest-strike-latin.woff2") format("woff2"); size-adjust: 85%; /* headline scale ×0.85 */ } .q-inline-icon { display: inline-grid; place-items: center; width: 1em; height: 1em; font-family: "QUALLS Icons"; font-style: normal; font-weight: 400; line-height: 1; text-transform: none; letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .q-inline-icon::before { display: block; } .q-inline-icon--mark::before { content: "\0051"; } .q-inline-icon--wordmark::before { content: "\004F"; } .q-inline-icon--qos::before { content: "\004F"; } .q-inline-icon--qos-circle::before { content: "\006F"; } .q-inline-icon--q-outline::before { content: "\0071"; } .q-inline-icon--q360::before { content: "\0033"; } .q-inline-icon--qc::before { content: "\0043"; } .q-inline-icon--think::before { content: "\0042"; } .q-inline-icon--think-circle::before { content: "\0062"; } .q-inline-icon--feel::before { content: "\0046"; } .q-inline-icon--feel-circle::before { content: "\0066"; } .q-inline-icon--see::before { content: "\0053"; } .q-inline-icon--see-outline::before { content: "\0073"; } .q-inline-icon--touch::before { content: "\0054"; } .q-inline-icon--touch-outline::before { content: "\0074"; } @font-face { font-family: "Stack Sans Headline"; font-style: normal; font-weight: 200 700; /* variable wght axis */ font-display: swap; src: url("fonts/stack-sans-headline-latin.woff2") format("woff2"); size-adjust: 97%; /* eyebrow scale ×0.97 */ } /* Body serif — Playfair Display, self-hosted (was a render-blocking Google Fonts ). Variable wght 400–700, latin subset, roman + italic; the unicode-range matches Google's `latin` cut so it stays byte-equivalent. */ @font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/playfair-display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/playfair-display-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Headlines — Protest Strike via --font-display, plus the lab's weight/leading/ tracking. !important so they win over the many per-breakpoint display rules. NOTE: .menu-preview__giant is EXCLUDED — the menu's big wordmark is a body-serif ghosted element (var(--font-body)); forcing the display font there broke its look. (.menu-label stays in the eyebrow group below: a clean sans reads better than the heavy single-weight poster face at nav-label size.) */ h1, h2, h3, h4, .hero-title, .case-title { font-family: var(--font-display) !important; font-weight: 400 !important; line-height: 0.94 !important; letter-spacing: -0.025em !important; } /* h3 runs near-zero tracking (Joe); h1/h2/h4 keep the -0.025em pin above. */ h3 { letter-spacing: -0.00125em !important; } /* Cleaner line breaks site-wide: balance short display lines, avoid prose widows/orphans. :where() keeps zero specificity so any rule can override, and unsupported browsers simply ignore it. */ :where(h1, h2, h3, h4, .hero-title, .case-title, .service-suite__title) { text-wrap: balance; } :where(p, li, blockquote, figcaption, dd, .signal-row strong) { text-wrap: pretty; } /* ---- Author / bio page (/about/joe-qualls/) ----------------------------- Owned author-entity page: flat + editorial, built from the site tokens. Kept out of the nav; reached from bylines, the About credit, footer/sitemap. See build-pages.mjs bioPage(). */ .bio-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-width: 1120px; margin: 0 auto; padding: clamp(4.5rem, 9vw, 8rem) clamp(1.25rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem); } .bio-hero__portrait img { width: 100%; height: auto; aspect-ratio: 1475 / 1193; object-fit: cover; border-radius: 10px; display: block; } .bio-hero__intro h1 { margin: 0.1em 0; font-size: clamp(2.6rem, 6vw, 4.2rem); } .bio-hero__role { color: var(--muted); font-size: 1.05rem; margin: 0 0 1.1rem; } .bio-hero__lede { font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.5; margin: 0 0 1.5rem; } .bio-contacts { display: flex; gap: 12px; margin-top: 1.6rem; } .bio-contacts a { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .bio-contacts a:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); } .bio-contacts svg { width: 20px; height: 20px; } .bio-body { max-width: 720px; margin: clamp(1.25rem, 4vw, 2.5rem) auto; padding: 0 clamp(1.25rem, 5vw, 3rem); } .bio-body p { font-size: 1.15rem; line-height: 1.65; margin: 0 0 1.2em; } .bio-pull { font-family: var(--font-body); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.35; margin: 1.5em 0; padding-left: 1rem; border-left: 3px solid var(--teal); } .bio-section { max-width: 1120px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 5vw, 3rem); } .bio-section > .section-kicker { margin-bottom: 1.2rem; } .bio-work__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } .bio-work__item { display: flex; flex-direction: column; gap: 0.55rem; text-decoration: none; color: var(--ink); } .bio-work__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; transition: opacity 0.2s ease; } .bio-work__item span { font-size: 0.95rem; font-weight: 600; } .bio-work__item:hover img { opacity: 0.88; } .bio-writing__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; } .bio-writing__list a { display: flex; gap: 0.8rem; align-items: center; text-decoration: none; color: var(--ink); } .bio-writing__thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; } .bio-writing__cat { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.2rem; } .bio-writing__title { display: block; font-weight: 600; line-height: 1.25; } @media (max-width: 720px) { .bio-hero { grid-template-columns: 1fr; } } /* Eyebrows — Stack Sans Headline via --font-eyebrow (peeled off --font-display); weight + tracking from the lab; size handled by size-adjust above. Sub-head/label tier joined 2026-06-12 (Joe: display face is reserved for the really big items) — pillar roles, QC strip numbers + subs, discipline tile titles, story labels, rail entries, studio signal terms. */ .panel-eyebrow, .section-kicker, .menu-label, .proof-band, .reel-lede__count, .agency-footer, .sense-pillar__role, .qc__steps span, .qc__steps em, .stat__title, .case-story2__label, .making-field__rail-key, .making-field__rail-name, .studio-signals dt, [class*="eyebrow"], [class*="kicker"] { font-family: var(--font-eyebrow) !important; font-weight: 679 !important; letter-spacing: 0.07em !important; } /* Nav titles run tighter than the standard eyebrow tracking (Joe 2026-06-12). Sits after the eyebrow group so the equal-!important tie breaks this way. */ .menu-label { letter-spacing: -0.01em !important; } /* Discipline titles + pillar roles override the eyebrow group's 0.07em (Joe). */ .stat__title { letter-spacing: -0.02em !important; } .sense-pillar__role { letter-spacing: -0.02em !important; } /* Body copy keeps its size/weight/leading; family comes from --font-body above. */ /* Homepage hero tagline under the boot art — eyebrow voice, forest, 24px/1.2 (Joe 2026-06-12). The !importants beat the display pin above; the seat (margin/measure) stays with the base .hero-title rule near the top. */ .hero-title { font-family: var(--font-eyebrow) !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: 0.01em !important; font-size: 24px; color: var(--forest); text-wrap: balance; /* no more "fluff." widowed on its own line (Joe) */ } @media (max-width: 760px) { .hero-title { font-size: 22px; } /* a couple px down from the desktop 24 (Joe) */ } /* =========================================================================== NAV REDESIGN — top-right menu button + blurred/darkened backdrop. The logo (.brand-toggle) is now a link home that keeps its hover effect; the menu opens from .menu-toggle (top-right, a hamburger that morphs to an X). The .menu-shell becomes an inset, rounded panel floating over .menu-scrim, which blurs + darkens the page behind it. Appended last to win the cascade. =========================================================================== */ /* --- Top-right menu button: hamburger (closed) ⇄ X (open) ------------------- */ .menu-toggle { position: absolute; top: 75px; /* centred on the header icon line — matches the Q + back pill */ right: clamp(20px, 3.4vw, 52px); z-index: 4; /* above the centred logo, within the header */ display: grid; place-items: center; width: 52px; height: 52px; margin: 0; padding: 0; border: 0; /* no holding shape */ background: none; /* no holding shape — just the bars */ color: var(--black); /* solid bar colour */ cursor: pointer; pointer-events: auto; transform: translateY(-50%); transition: color 240ms var(--ease), transform 220ms var(--ease); } .menu-toggle:hover { transform: translateY(-50%) scale(1.06); } .menu-toggle:active { transform: translateY(-50%) scale(0.95); } /* Header-line override for the hamburger. Placed AFTER the base .menu-toggle rule so it wins the cascade (the matching .case-back override sits after its base too). The Q badge holds its centre (~76px) at all widths ≥901 — even short windows — so the base top: 75px already matches there; only the ≤900 line needs tightening. */ @media (max-width: 900px) { .menu-toggle { top: 56px; } /* matches the Q + back pill once the header tightens */ } /* Over a dark section the floating nav flips to light (mirrors the logo flip). */ body.nav-on-dark .menu-toggle { color: var(--paper); } .menu-toggle__box { position: relative; display: block; width: 21px; height: 12px; } .menu-toggle__bar { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 300ms var(--ease), top 240ms var(--ease); } .menu-toggle__bar:nth-child(1) { top: 0; } .menu-toggle__bar:nth-child(2) { top: 10px; } /* Open: the bars cross into an X over the paper margin, so force dark ink (this rule sits after the nav-on-dark flip above, so it wins when both are set). */ body.menu-is-open .menu-toggle { color: var(--black); } body.menu-is-open .menu-toggle__bar:nth-child(1) { top: 5px; transform: rotate(45deg); } body.menu-is-open .menu-toggle__bar:nth-child(2) { top: 5px; transform: rotate(-45deg); } /* --- Blurred + darkened backdrop ------------------------------------------- */ .menu-scrim { position: fixed; inset: 0; z-index: 19; /* under the panel (20) + header (30) */ /* Solid paper mat — same colour as the logo-hover frame. Hides the page entirely (no blurred peek) and gives the panel a matching paper margin. */ background: var(--paper); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 360ms var(--ease), visibility 0s 360ms; } body.menu-is-open .menu-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } /* --- Menu is a square panel inset to the logo-hover frame margin ------------ */ .menu-shell { /* Sides + bottom sit where the hover frame's CONTENT sits (its inset + border width); the TOP gets a larger paper margin so the floating logo + X sit in the paper above the panel — not on a white band inside it. */ --menu-frame: calc(clamp(18px, 3.2vw, 46px) + clamp(10px, 1.05vw, 16px)); /* +30px on top so the floating logo gets breathing room above the panel (Joe) */ inset: calc(clamp(112px, 12vh, 132px) + 30px) var(--menu-frame) var(--menu-frame); height: auto; /* span between the insets, not full-bleed */ border-radius: 0; /* square corners, per the updated mockup */ box-shadow: none; /* no drop shadow */ padding: 0; /* cards + preview run edge-to-edge in the panel */ } /* Mobile menu (Joe's mock, 2026-06-12): the inset paper panel becomes a full-bleed dark overlay — page dimmed behind, the white brand lockup centred up top, big centred white links, and the contact + social foot at the bottom. The desktop block above forces a 6-column grid at every width (it was "appended to win"), so re-stack to one centred column here. */ @media (max-width: 1040px) { .menu-scrim { background: color-mix(in srgb, var(--black) 82%, transparent); /* Blur rides the scrim's opacity fade, so it eases in with the wash (Joe). */ -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .menu-shell { inset: 0; height: 100dvh; padding: clamp(126px, 16vh, 160px) 24px 0; /* The dark wash lives on the scrim so the page ghosts through; this bottom-weighted ramp seats the foot over ANY page (white deck copy was reading through the flat 82% wash). */ background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--black) 92%, transparent) 96%); overflow-y: auto; color: var(--paper); } /* White lockup while open: the header-anim wordmark IS the full lockup (ring Q + word), so the round badge stays hidden — display:none (not just the desktop opacity fade) so it doesn't hold flex space beside the mark. */ body.menu-is-open .brand-toggle { width: auto; } body.menu-is-open .q-logo-mark { display: none; } body.menu-is-open .brand-wordmark { position: static; /* The lockup ink fills only ~46% of the SVG canvas and its centre sits at 66.6% of the canvas width (bbox 223.7–458.4 of 512), so the box overshoots and shifts left — the visible mark lands centred at ~35vw, matching the mock. */ transform: translateX(-16.6%); width: clamp(250px, 75vw, 305px); filter: brightness(0) invert(1); /* flattens the baked-in black ink to white */ } body.menu-is-open .menu-toggle { color: var(--paper); } /* white X over the dark wash */ .menu-grid { grid-template-columns: 1fr; margin-block: auto; } .menu-link { min-height: 0; padding: clamp(12px, 2.2vh, 18px) 24px; align-items: center; text-align: center; background: none; border: 0; /* an early stacked-menu hairline resurfaces here otherwise */ color: var(--paper); } .menu-link:hover, .menu-link:focus-visible { background: none; color: var(--blush); } .menu-link[aria-current="page"] { background: none; color: var(--paper); } .menu-label { font-size: clamp(26px, 8vw, 32px); } .menu-description, .menu-rule { display: none; } .menu-stage { display: none; } /* stage (preview + info panel) is desktop-only */ /* Foot: phone + email, a hot hairline, then the social row — all centred. */ .menu-foot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: auto; padding: 26px 24px calc(clamp(28px, 4.5vh, 44px) + env(safe-area-inset-bottom, 0px)); text-align: center; } .menu-foot__phone, .menu-foot__email { font-family: var(--font-eyebrow); font-weight: 679; letter-spacing: 0.01em; line-height: 1; text-decoration: none; overflow-wrap: anywhere; } .menu-foot__phone { font-size: 17px; color: color-mix(in srgb, var(--paper) 56%, transparent); } .menu-foot__email { font-size: 18px; color: var(--paper); } .menu-foot__rule { width: min(48vw, 210px); height: 1px; margin: 14px 0 6px; background: var(--hot); } .menu-foot__social { display: flex; align-items: center; gap: clamp(28px, 9vw, 44px); margin: 0; padding: 0; list-style: none; } .menu-foot__social a { display: grid; place-items: center; width: 30px; height: 30px; color: color-mix(in srgb, var(--paper) 56%, transparent); transition: color 200ms var(--ease); } .menu-foot__social a:hover, .menu-foot__social a:focus-visible { color: var(--paper); } .menu-foot__social svg { display: block; height: 21px; width: auto; } /* ^ width rides each glyph's own aspect ratio (the brand marks share a 512-tall box but differ in width) — equal heights keep the row level. */ } /* Phone: keep the X tappable and clear of the edge. */ @media (max-width: 680px) { .menu-toggle { right: 18px; width: 46px; height: 46px; } /* top inherited from the ≤900 centreline */ } /* =========================================================================== 404 — uhoh stage (Joe's graphic). Full-chrome page; the art leads, the copy follows, everything centred. The art bobs gently (motion-safe only). =========================================================================== */ .page-error .page-main { background: var(--surface); } .nf-stage { min-height: 88vh; min-height: 88svh; display: grid; align-content: center; justify-items: center; text-align: center; gap: clamp(16px, 2.2vh, 26px); padding: clamp(130px, 17vh, 200px) clamp(24px, 7vw, 106px) clamp(64px, 9vw, 120px); } .nf-art { width: min(540px, 80vw); height: auto; margin-bottom: clamp(4px, 1.2vh, 16px); animation: nf-bob 5.4s ease-in-out infinite alternate; } @keyframes nf-bob { from { transform: translateY(0) rotate(-0.7deg); } to { transform: translateY(-12px) rotate(0.7deg); } } @media (prefers-reduced-motion: reduce) { .nf-art { animation: none; } } .nf-stage .section-kicker { color: var(--hot); } .nf-stage h1 { margin: 0; font-size: clamp(2.7rem, 6.4vw, 5.2rem); color: var(--ink); } .nf-copy { margin: 0; max-width: 44ch; font-size: clamp(1.05rem, 1.4vw, 1.35rem); line-height: 1.5; color: color-mix(in srgb, var(--ink) 80%, transparent); } .nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(6px, 1.2vh, 14px); } /* =========================================================================== LEGAL PAGE — quiet, readable prose =========================================================================== */ .page-legal .page-main { background: var(--surface); } .legal { max-width: 760px; margin-inline: auto; padding: clamp(120px, 17vh, 210px) clamp(24px, 6vw, 48px) clamp(72px, 10vw, 130px); } .legal__head { margin: 0 0 clamp(36px, 5vw, 64px); } .legal__head .section-kicker { color: var(--hot); } .legal__head h1 { margin: 14px 0 0; font-size: clamp(2.6rem, 6.4vw, 4.8rem); color: var(--ink); } .legal__updated { margin: clamp(18px, 2.4vw, 28px) 0 0; font-family: var(--font-eyebrow); font-size: 0.78rem; letter-spacing: 0.04em; color: color-mix(in srgb, var(--ink) 52%, transparent); } .legal__body { border-top: 1px solid var(--rule); } .legal__section { margin-top: clamp(30px, 4vw, 46px); } .legal__section h2 { margin: 0 0 12px; font-family: var(--font-eyebrow) !important; /* override the display-font h1–h4 pin */ font-weight: 700 !important; font-size: clamp(1rem, 1.4vw, 1.2rem) !important; line-height: 1.25 !important; letter-spacing: 0.01em !important; color: var(--ink); } .legal__section p { margin: 0 0 14px; font-family: var(--font-body); font-size: 1.02rem; line-height: 1.75; color: color-mix(in srgb, var(--ink) 82%, transparent); } .legal__section p:last-child { margin-bottom: 0; } .legal__section a { color: var(--hot); text-decoration: underline; text-underline-offset: 2px; } /* =========================================================================== SITE FOOTER — modelled on magic.qualls.co: a dark, three-column widget row (slogan · menu+contact · logo+social) over a bordered bottom row (tagline · acknowledgement · copyright). Appended last to override the earlier light .agency-footer rules scattered above. =========================================================================== */ .agency-footer { /* charcoal body; the nav band below is darker (--black) for the two-tone. NB: var(--ink) is flipped to white under [data-tone="dark"], so the body colour is mixed off the stable --black, never --ink. */ background: color-mix(in srgb, var(--black) 93%, var(--paper)); color: var(--paper); border-top: 0; display: flex; flex-direction: column; padding: 0; /* each band owns its padding now */ font-family: var(--font-eyebrow); /* the footer is sans throughout */ } body.page-light .agency-footer { background: color-mix(in srgb, var(--black) 93%, var(--paper)); color: var(--paper); border-top: 0; } /* ---- top nav band: full-bleed, darker, pipe-separated ---- */ .agency-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 0; padding: clamp(16px, 1.9vw, 26px) clamp(24px, 6vw, 96px); background: var(--black); } .agency-footer .agency-footer__nav a { font-family: var(--font-eyebrow); font-size: clamp(0.86rem, 1vw, 0.98rem); font-weight: 700; letter-spacing: 0.005em; color: var(--paper); transition: color var(--nv-fade) var(--ease); } /* Dim-focus, ported from the nav menu (.navx-nav): hovering anywhere in the band fades the siblings back; the pointed-at link holds full strength. :focus-within mirrors it for keyboard tabbing. Per section, monochrome — no accent colour, like the menu. */ .agency-footer .agency-footer__nav:hover a, .agency-footer .agency-footer__nav:focus-within a { color: color-mix(in srgb, var(--paper) 34%, transparent); } .agency-footer .agency-footer__nav:hover a:hover, .agency-footer .agency-footer__nav:focus-within a:focus-visible { color: var(--paper); } .agency-footer .agency-footer__nav a::after { content: "|"; margin: 0 clamp(10px, 1.5vw, 20px); font-weight: 300; color: color-mix(in srgb, var(--paper) 26%, transparent); } .agency-footer .agency-footer__nav a:last-child::after { content: none; } /* ---- main row: slogan | contact | brand ---- */ .agency-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding: clamp(34px, 4vw, 60px) clamp(24px, 6vw, 96px) clamp(30px, 3.4vw, 50px); } .agency-footer__slogan { margin: 0; max-width: 26ch; font-family: var(--font-eyebrow); /* sans (was the Playfair serif) */ font-weight: 200; /* thin (Joe) */ font-size: clamp(1.18rem, 1.5vw, 1.55rem); line-height: 1.2; /* tighter lines (Joe) */ letter-spacing: 0; color: color-mix(in srgb, var(--paper) 78%, transparent); } .agency-footer__lines { display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 0; text-align: center; } .agency-footer__brandcol { display: flex; flex-direction: column; align-items: flex-end; gap: clamp(16px, 1.8vw, 24px); text-align: right; } /* The wordmark SVG is the full lockup (ringed Q + "Qualls"), recoloured to paper via mask. */ .agency-footer__logo { display: block; width: clamp(126px, 11vw, 170px); aspect-ratio: 468.4 / 119.9; /* wordmark viewBox */ background: var(--paper); -webkit-mask: url(brand/wordmark.svg) center / contain no-repeat; mask: url(brand/wordmark.svg) center / contain no-repeat; transition: background 220ms var(--ease); } .agency-footer__logo:hover, .agency-footer__logo:focus-visible { background: var(--actual-white); } .agency-footer__social { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px 18px; margin: 0; padding: 0; list-style: none; } /* footer links — small UI labels */ .agency-footer a { font-family: var(--font-eyebrow); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.5; color: var(--paper); text-transform: none; transition: color 200ms var(--ease); } .agency-footer a:hover, .agency-footer a:focus-visible { color: var(--hot); } /* contact lines: phone reads brighter than the email below it — a step in the hierarchy (Joe). */ .agency-footer__lines a { font-weight: 300; font-size: clamp(0.92rem, 1.05vw, 1.06rem); letter-spacing: 0.01em; color: color-mix(in srgb, var(--paper) 56%, transparent); /* email */ transition: color var(--nv-fade) var(--ease); } .agency-footer__lines a:first-child { color: color-mix(in srgb, var(--paper) 82%, transparent); /* phone, brighter */ } /* dim-focus per section (see the nav band note above) */ .agency-footer .agency-footer__lines:hover a, .agency-footer .agency-footer__lines:focus-within a { color: color-mix(in srgb, var(--paper) 34%, transparent); } .agency-footer .agency-footer__lines:hover a:hover, .agency-footer .agency-footer__lines:focus-within a:focus-visible { color: var(--paper); } .agency-footer__social a { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74rem; font-weight: 500; color: color-mix(in srgb, var(--paper) 46%, transparent); transition: color var(--nv-fade) var(--ease); } /* dim-focus per section (see the nav band note above) */ .agency-footer .agency-footer__social:hover a, .agency-footer .agency-footer__social:focus-within a { color: color-mix(in srgb, var(--paper) 24%, transparent); } .agency-footer .agency-footer__social:hover a:hover, .agency-footer .agency-footer__social:focus-within a:focus-visible { color: var(--paper); } /* ---- bottom band: tag | acknowledgement | copyright ---- */ .agency-footer__bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); align-items: start; padding: clamp(24px, 2.6vw, 38px) clamp(24px, 6vw, 96px); border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); } .agency-footer__tag { margin: 0; /* Branded "What can Q do for you?™" logotype: the SVG drives it as a mask so it tints to --blush; the phrase stays in the DOM (visually hidden) for a11y. */ width: clamp(116px, 12.5vw, 172px); aspect-ratio: 615 / 55; max-width: 100%; background-color: var(--blush); /* pink statement (Joe) */ -webkit-mask: url("brand/what-can-q-do-for-you.svg") center / contain no-repeat; mask: url("brand/what-can-q-do-for-you.svg") center / contain no-repeat; color: transparent; font-size: 0; line-height: 0; } .agency-footer__tm { display: none; } /* the ™ is part of the logotype SVG */ .agency-footer__copy { margin: 0; text-align: right; font-family: var(--font-eyebrow); font-weight: 300; font-size: 0.8rem; letter-spacing: 0.03em; color: color-mix(in srgb, var(--paper) 50%, transparent); } .agency-footer__copy a { font-weight: inherit; letter-spacing: inherit; color: inherit; } .agency-footer__copy a:hover, .agency-footer__copy a:focus-visible { color: var(--paper); } .agency-footer__sep { opacity: 0.45; margin: 0 7px; } .agency-footer__ack { text-align: center; font-weight: 300; font-size: 0.62rem; line-height: 1.55; letter-spacing: 0.01em; color: color-mix(in srgb, var(--paper) 40%, transparent); } .agency-footer__flag { display: block; height: 30px; aspect-ratio: 78.476 / 48.063; /* flag viewBox */ margin: 0 auto 12px; background: color-mix(in srgb, var(--paper) 52%, transparent); -webkit-mask: url(icons/first-nations-flag.svg) center / contain no-repeat; mask: url(icons/first-nations-flag.svg) center / contain no-repeat; } .agency-footer__ack p { margin: 0; max-width: 60ch; margin-inline: auto; } .agency-footer__ack a { font-family: inherit; font-size: inherit; font-weight: 400; letter-spacing: 0; color: inherit; text-decoration: underline; text-underline-offset: 2px; } .agency-footer__ack a:hover, .agency-footer__ack a:focus-visible { color: var(--actual-white); } /* ---- responsive: stack the columns ---- */ @media (max-width: 900px) { .agency-footer__top, .agency-footer__bottom { grid-template-columns: 1fr; gap: 30px; } .agency-footer__slogan { max-width: none; text-align: center; margin-inline: auto; } .agency-footer__brandcol { align-items: center; text-align: center; } .agency-footer__social { justify-content: center; } .agency-footer__tag { margin-inline: auto; } .agency-footer__copy { text-align: center; } } @media (max-width: 560px) { .agency-footer .agency-footer__nav a::after { margin: 0 clamp(8px, 2.6vw, 14px); } } /* On the homepage native deck the footer flows in after the contact slide — lift it above the pinned/wiped cards so it isn't covered by the deck stack. */ body[data-slide-transition="native"] .agency-footer { position: relative; z-index: 5; /* above the deck (work-stack z-2), below the header (z-30) + menu */ } /* =========================================================================== MOBILE CASE-STUDY SLIDES — KEEP the signature diagonal mask AND its angle (the diagonal is aligned to the Q logo, so the angle is fixed). On a phone we just scale the Q up + centre it, and put the slide's COLOUR half on the lower (text) side with the photo up top — split by the same 45° seam, the Q riding it. The text then sits on the slide's own colour surface (no painted block), like the glass cards. The wipe still plays card-over-card. =========================================================================== */ @media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) { /* Scale + centre the locked Q/diagonal geometry — angle UNCHANGED (45°). svh, not vh: must track the 100svh frame (iOS vh ran ~18% tall → Q sat low). ONLY position + logo size live here: --q-r and the box nudges derive in the base block, so the mask circle and the art's baked disc stay welded at any size (93vw logo → 30.9vw circle ≈ Joe's 31vw phone comp). Also covers portrait tablets (iPad): above 760 they fell into the partial ≤900 tier (desktop Q geometry + repositioned text), broken in portrait; now they get the full phone composition. */ body[data-slide-transition="native"] .work-panel--imgcolour, body[data-slide-transition="native"] .work-panel--glass, body[data-slide-transition="native"] .work-panel--construct { --q-cx: 50vw; --q-cy: 31svh; --q-logo-size: 93vw; } /* Put the COLOUR half on the lower (text) side on every card, regardless of --rev: surface__a (colour fill) takes the lower region, __b (photo) the top. This is the --rev clip swap, so the circle masks stay coherent. */ body[data-slide-transition="native"] .work-panel--imgcolour .slide-surface__a, body[data-slide-transition="native"] .work-panel--glass .slide-surface__a { clip-path: var(--diag-image); } body[data-slide-transition="native"] .work-panel--imgcolour .slide-surface__b, body[data-slide-transition="native"] .work-panel--glass .slide-surface__b { clip-path: var(--diag-color); } /* Plain photo cards (the Studio slide) have no colour surface — confine the photo to the top half and give the text its own solid block. */ body[data-slide-transition="native"] .work-panel--plain:has(.panel-photo) .panel-photo { inset: 0 0 50% 0; } body[data-slide-transition="native"] .work-panel--plain:has(.panel-photo) .case-content { background: var(--black); } /* EVERY deck card: text block bottom-anchored near the frame foot (Joe's phone comp), growing upward with long titles — never a centred band that runs out of room on short viewports. (The rail-foot arrow does the skipping on every breakpoint.) */ body[data-slide-transition="native"] .work-stack .work-panel .case-content { top: auto; bottom: clamp(24px, 4.5svh, 48px); } /* Photo cards: full-width padded block (the 6vw bottom padding is the breathing room under the CTA; photo-less cards sit on the clamp alone). 15vw side insets per Joe's mobile mock (2026-06-12, symmetric). */ body[data-slide-transition="native"] .work-panel:has(.panel-photo) .case-content { top: auto; left: 0; right: 0; max-width: none; padding: 6vw 15vw 6vw; display: flex; flex-direction: column; justify-content: flex-end; } .work-panel:has(.panel-photo) .case-content .panel-eyebrow { margin-bottom: 14px; } .work-panel:has(.panel-photo) .case-title { font-size: clamp(2.3rem, 10.5vw, 3.2rem); letter-spacing: -1px; margin: 0 0 16px; } .work-panel:has(.panel-photo) .case-copy { font-size: 1rem; line-height: 1.4; padding-top: 16px; max-width: none; } .work-panel:has(.panel-photo) .case-open { margin-top: 22px; } } /* ── Portrait-tablet (iPad) deck fine-tune ──────────────────────────────────── The "≤760 OR portrait ≤1024" rules above hand iPads the phone composition, but on the taller iPad frame the content sat too low and the case circle too high, leaving a dead blue band between photo and copy (Joe's mock, 2026-06-15). Lift the intro line and each case text block, and drop the case circle/diagonal so the photo meets the copy. Scoped to portrait tablets only (≥600w) so phones keep their tuned comp. */ @media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) { body[data-slide-transition="native"] .hero-title { bottom: clamp(120px, 14.5svh, 180px); } body[data-slide-transition="native"] .work-stack .work-panel .case-content { bottom: clamp(96px, 11svh, 140px); } body[data-slide-transition="native"] .work-panel--imgcolour, body[data-slide-transition="native"] .work-panel--glass, body[data-slide-transition="native"] .work-panel--construct { --q-cy: 36svh; } } /* =========================================================================== CASE-STUDY CAROUSEL. The wipe-carousel FRAME (parked 100svh work-stack, absolutely stacked panels, clip-path wipe, pagination dots) is defined ONCE, globally (search "discrete wipe-carousel" above) — desktop drives it with wheel/keys, phones with swipe. Parking differs by input: phones use CSS scroll-snap (touch momentum clears it cleanly); desktop parks via JS (app.js engage/release), since a mouse wheel + a single snap point traps you at the deck. The mobile-ONLY per-card art-direction (Q scale, colour-half-down, .case-content reposition) lives in the @media (max-width: 760px) block just above. =========================================================================== */ /* =========================================================================== SERVICE DETAIL PAGES — Think / Feel / Touch / See (services//) Reuse the dark-world building blocks (.statement, .stat-grid, .sense, .sense-pillars, .signal-row, .page-cta--dark). Only the hero + a few link/accent treatments are new. Per-page accent flows in via inline --accent. =========================================================================== */ /* Hero — forest panel with a faint 360 texture, the Q360/[sense] lockup + role headline in cream, the lead on a paper foot, and the animated sense mark as a large circle bleeding off the right and dipping from forest into the foot. Grid rows: forest head (1fr) on top, paper foot (auto) at the bottom. */ .service-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: 1fr auto; min-height: 86vh; min-height: 86svh; border-bottom: 1px solid var(--rule); background: var(--forest); --hx: clamp(24px, 7vw, 106px); } /* Animated sense mark — clipped round, bleeding off the right and dipping from the forest into the paper foot. Above the foot, below the headline. */ .service-hero__mark { position: absolute; z-index: 2; top: 63%; /* anchored from the LEFT so it sits in from the right edge (≈52%) and fills the gap beside the headline, rather than hugging the far right. A slight right bleed remains; capped so it doesn't drift on very wide screens. */ left: clamp(500px, 52vw, 1160px); right: auto; transform: translateY(-50%); width: clamp(320px, 49vw, 940px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; } .service-hero__mark img, .service-hero__mark video { display: block; width: 100%; height: 100%; object-fit: cover; } /* Forest zone — Q360/[sense] lockup + role headline, cream */ .service-hero__head { position: relative; z-index: 3; align-self: start; display: flex; flex-direction: column; gap: clamp(20px, 3vw, 40px); /* left pad = --hx keeps the title aligned with the lead in the foot; small right pad gives the role headline room so its 2nd line ("Emotional Appeal") stays on one line instead of wrapping. */ padding: clamp(124px, 17vh, 200px) clamp(20px, 2vw, 48px) clamp(40px, 5vw, 72px) var(--hx); max-width: min(100%, 1040px); } .service-hero__lockup { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); margin: 0; } /* Q360 wordmark — black source art recoloured to cream via mask (the url() resolves relative to this stylesheet, so it works from services//). */ .service-hero__brandmark { --h: clamp(30px, 3.4vw, 46px); display: block; height: var(--h); width: calc(var(--h) * 3.339); background-color: var(--paper); -webkit-mask: url("brand/q360-logo.svg") no-repeat left center / contain; mask: url("brand/q360-logo.svg") no-repeat left center / contain; } .service-hero__slash { font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.6rem); line-height: 1; color: color-mix(in srgb, var(--paper) 40%, transparent); } .service-hero__sense { font-family: var(--font-display); font-size: clamp(1.7rem, 3.2vw, 3rem); line-height: 1; color: var(--ember); /* coral lockup label — consistent on all four */ } .service-hero__title { margin: 0; /* family/weight/line-height pinned globally; size + colour are ours */ font-size: clamp(2.5rem, 4.6vw, 5rem); color: var(--paper); } /* Paper foot — the lead in dark ink; the circle dips over it */ .service-hero__foot { position: relative; z-index: 1; align-self: end; background: var(--teal); /* green strip (Joe) — ties to the discipline taglines */ padding: clamp(30px, 4vw, 54px) var(--hx) clamp(38px, 5vw, 66px); } .service-hero__lead { margin: 0; max-width: 46ch; font-family: var(--font-body); font-size: clamp(1.08rem, 1.45vw, 1.4rem); line-height: 1.5; color: color-mix(in srgb, var(--paper) 92%, transparent); /* cream on the teal strip */ } /* Accent kicker on the disciplines section (::before rule inherits currentColor). */ .service-disciplines .section-kicker { color: var(--accent); } /* Discipline tiles — Joe's mockup: a thin eyebrow dash for the marker, a tight 18px title, then a larger light-serif subhead (the tagline). The grid runs on the brand teal (set on the section), not the per-service accent. */ .service-disciplines .stat__num { font-family: var(--font-eyebrow); font-size: 1rem; font-weight: 200; line-height: 1; color: var(--accent); } .service-disciplines .stat__title { font-size: 18px; letter-spacing: -0.02em; line-height: 1.1; } .stat__tagline { margin: clamp(-12px, -0.7vw, -6px) 0 0; font-family: var(--font-body); font-size: 24px; font-weight: 200; line-height: 1.2; color: var(--accent, var(--teal)); } /* Discipline tile — the whole card links to the standalone page and opens the modal on a plain click. The ... icon (corner) is the cue; the box-hover lift + shadow returns now that the card links somewhere. */ .stat--disc { display: block; padding: 0; /* the link carries the padding so the whole card is clickable */ border-radius: 0; transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), background 360ms var(--ease); } .stat--disc:hover, .stat--disc:focus-within { transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in srgb, var(--forest) 14%, transparent); } .stat__link { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.6vw, 24px); min-height: clamp(230px, 21vw, 330px); height: 100%; padding: clamp(26px, 2.8vw, 52px); padding-bottom: clamp(64px, 5.4vw, 92px); /* clearance for the corner icon */ text-decoration: none; color: inherit; } .stat__more-icon { position: absolute; right: clamp(20px, 2.4vw, 40px); bottom: clamp(20px, 2.4vw, 40px); width: 30px; height: 30px; background-color: var(--ink-muted); /* #e3dcd0 was invisible on the cream tile (Joe) */ -webkit-mask: url("icons/read-more-modal.svg") no-repeat center / contain; mask: url("icons/read-more-modal.svg") no-repeat center / contain; transition: background-color 240ms var(--ease); } .stat--disc:hover .stat__more-icon, .stat--disc:focus-within .stat__more-icon { background-color: var(--teal); } /* "Read more" pill beside the icon — same reveal as the modal's logo-name label. Sits just left of the 30px icon, fades in on card hover/focus. */ .stat__more-label { position: absolute; bottom: clamp(20px, 2.4vw, 40px); right: calc(clamp(20px, 2.4vw, 40px) + 42px); height: 30px; display: grid; place-items: center; padding: 0 14px; border-radius: 999px; background: var(--actual-white); box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--forest) 40%, transparent); font-family: var(--font-eyebrow); font-weight: 679; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: var(--ink); opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity 200ms var(--ease), transform 200ms var(--ease); } .stat--disc:hover .stat__more-label, .stat--disc:focus-within .stat__more-label { opacity: 1; transform: none; } /* The discipline grid uses the global broken-line treatment now (see .stat-grid); no per-service override needed beyond dropping the section's own bottom rule. */ .service-disciplines { border-bottom: none; } /* Lock the page scroll while a discipline modal is open — only the modal scrolls. */ html:has(.disc-dialog[open]) { overflow: hidden; } /* Discipline detail dialog — native , a wide card over a tinted scrim. */ .disc-dialog { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; /* gap at the top (dimmed page shows), none at the bottom so the sheet sits flush to the window bottom */ padding: clamp(44px, 8vh, 110px) clamp(0px, 4vw, 56px) 0; border: 0; background: transparent; /* The DIALOG (full viewport) is the scroll container, so the scrollbar sits at the browser-window edge, not inside the sheet. The page stays locked via the html:has() rule above, so only this content scrolls. */ overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } /* margin-top:auto (not justify-content:end) bottom-aligns the sheet when it's short, but collapses when the content is tall so it scrolls from the top. */ .disc-dialog[open] { display: flex; flex-direction: column; align-items: center; } .disc-dialog::backdrop { background: rgba(0, 0, 0, 0.71); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .disc-dialog[open]::backdrop { animation: disc-backdrop-in 360ms var(--ease); } .disc-dialog__panel { position: relative; width: min(1200px, 100%); margin-top: auto; /* sit at the window bottom when short; flow from the top (scrollable) when tall */ padding: clamp(28px, 7vw, 100px); background: var(--off-white); /* top corners only — the sheet is flush with the window bottom */ border-radius: clamp(28px, 6vw, 80px) clamp(28px, 6vw, 80px) 0 0; box-shadow: 0 -24px 80px -24px color-mix(in srgb, var(--forest) 55%, transparent); } /* subtle slide-up from the bottom on open (COLLINS-style). The resting state is translateY(0), so the sheet sits correctly even if the animation is interrupted. */ .disc-dialog[open] .disc-dialog__panel { animation: disc-rise 520ms var(--ease); } @keyframes disc-rise { from { transform: translateY(48px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes disc-backdrop-in { from { background: rgba(0, 0, 0, 0); } to { background: rgba(0, 0, 0, 0.71); } } @media (prefers-reduced-motion: reduce) { .disc-dialog[open] .disc-dialog__panel, .disc-dialog[open]::backdrop { animation: none; } } /* The panel is the scroll container; sticky keeps the close button pinned to its top-right so it never scrolls out of reach. margin-left:auto right-aligns it in the block flow; the negative margin lets the heading sit beneath it (no reserved row), matching the old absolute placement. */ .disc-dialog__close { position: sticky; top: clamp(12px, 1.6vw, 22px); z-index: 6; margin-left: auto; margin-bottom: -42px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--rule); border-radius: 50%; background: var(--off-white); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background 200ms var(--ease), border-color 200ms var(--ease); } .disc-dialog__close:hover, .disc-dialog__close:focus-visible { background: var(--surface); border-color: var(--teal); outline: none; } /* Shared content block (header + sidebar + main) — modal AND standalone page. */ .disc-detail__head { margin: 0 0 clamp(24px, 3.4vw, 44px); } .disc-detail__name { margin: 0; font-family: var(--font-eyebrow) !important; /* beat the h1-h4 display pin on the page

*/ font-weight: 679; font-size: clamp(1rem, 1.3vw, 1.18rem); letter-spacing: 0.005em !important; line-height: 1.2; color: var(--ink); } .disc-detail__tagline { margin: 6px 0 0; font-family: var(--font-body); font-weight: 200; font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.04; letter-spacing: -0.01em; color: var(--teal); } .disc-detail__cols { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.6fr); gap: clamp(28px, 4vw, 64px); align-items: start; } .disc-detail__aside { display: grid; gap: clamp(24px, 3vw, 38px); align-content: start; } .disc-detail__label { margin: 0 0 12px; font-family: var(--font-eyebrow); font-weight: 679; font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 52%, transparent); } .disc-detail__deliverables { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.4; color: var(--teal); } .disc-detail__deliverables li { position: relative; padding-left: 1.1em; } .disc-detail__deliverables li::before { content: "\2013"; position: absolute; left: 0; color: var(--teal); } .disc-detail__logos { display: flex; flex-wrap: wrap; gap: clamp(10px, 1vw, 14px); } /* Related-case circles: the case teaser image, grayscale at rest, colour on hover. */ .disc-detail__logo { position: relative; display: block; width: clamp(64px, 6vw, 84px); height: clamp(64px, 6vw, 84px); border-radius: 50%; /* no overflow:hidden — it would clip the hover name pill above the circle; the image rounds itself instead. */ background: var(--surface); border: 1px solid var(--rule); transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); } .disc-detail__logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: grayscale(1); transition: filter 320ms var(--ease); } .disc-detail__logo:hover, .disc-detail__logo:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--forest) 38%, transparent); } .disc-detail__logo:hover img, .disc-detail__logo:focus-visible img { filter: grayscale(0); } /* Hover name pill (the icons can be hard to read — COLLINS-style label). */ .disc-detail__logo-name { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px); white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: var(--actual-white); box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--forest) 42%, transparent); font-family: var(--font-eyebrow); font-weight: 679; font-size: 0.78rem; letter-spacing: 0.01em; color: var(--ink); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease), transform 200ms var(--ease); z-index: 4; } .disc-detail__logo:hover .disc-detail__logo-name, .disc-detail__logo:focus-visible .disc-detail__logo-name { opacity: 1; transform: translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce) { .disc-detail__logo-name { transition: opacity 200ms var(--ease); transform: translateX(-50%); } } .disc-detail__journal { list-style: none; margin: 0; padding: 0; display: grid; } .disc-detail__journal li + li { border-top: 1px solid var(--rule); } .disc-detail__journal-link { display: flex; align-items: center; gap: 14px; padding: 14px 0; text-decoration: none; color: inherit; } .disc-detail__journal-thumb { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--surface); border: 1px solid var(--rule); } .disc-detail__journal-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ease); } .disc-detail__journal-link:hover .disc-detail__journal-thumb img, .disc-detail__journal-link:focus-visible .disc-detail__journal-thumb img { transform: scale(1.06); } .disc-detail__journal-text { display: grid; gap: 3px; } .disc-detail__journal-cat { font-family: var(--font-eyebrow); font-weight: 679; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose); } .disc-detail__journal-title { font-family: var(--font-eyebrow); font-weight: 679; font-size: 0.95rem; line-height: 1.2; letter-spacing: 0.005em; color: var(--ink); transition: color 200ms var(--ease); } .disc-detail__journal-link:hover .disc-detail__journal-title, .disc-detail__journal-link:focus-visible .disc-detail__journal-title { color: var(--teal); } .disc-detail__body { display: grid; gap: clamp(14px, 1.5vw, 20px); } .disc-detail__body p { margin: 0; font-family: var(--font-body); font-size: 1.125rem; line-height: 1.75; color: color-mix(in srgb, var(--ink) 84%, transparent); } /* "Open this as a page" button — only rendered in the modal (links to the page). */ .disc-detail__page-link { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(28px, 3.5vw, 48px); padding: clamp(13px, 1.3vw, 17px) clamp(20px, 2vw, 30px); border: 1px solid var(--ink); font-family: var(--font-eyebrow); font-weight: 679; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: background 200ms var(--ease), color 200ms var(--ease); } .disc-detail__page-link i { font-style: normal; transition: transform 200ms var(--ease); } .disc-detail__page-link:hover, .disc-detail__page-link:focus-visible { background: var(--ink); color: var(--off-white); } .disc-detail__page-link:hover i { transform: translateX(4px); } .disc-detail__gallery { margin-top: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: clamp(10px, 1.2vw, 16px); } .disc-detail__shot { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--surface); } .disc-detail__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 420ms var(--ease); } .disc-detail__shot:hover img { transform: scale(1.04); } .disc-detail__shot-label { position: absolute; inset: auto 0 0 0; padding: 22px 12px 10px; font-family: var(--font-eyebrow); font-weight: 679; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--paper); background: linear-gradient(to top, color-mix(in srgb, var(--forest) 90%, transparent), transparent); } @media (max-width: 720px) { .disc-detail__cols { grid-template-columns: 1fr; gap: clamp(22px, 6vw, 34px); } /* Flatten the two columns into one flow so the groups can interleave with the body: deliverables above, then the body, then related cases + journal. */ .disc-detail__aside, .disc-detail__main { display: contents; } .disc-detail__group--deliverables { order: 1; } .disc-detail__body { order: 2; } .disc-detail__group--cases { order: 3; } .disc-detail__group--journal { order: 4; } .disc-detail__page-link { order: 5; } } /* Standalone discipline page — same content block, in full page chrome. */ .disc-page { max-width: 1180px; margin: 0 auto; padding: clamp(104px, 13vh, 168px) clamp(24px, 7vw, 106px) clamp(48px, 6vw, 84px); } .disc-page__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(28px, 3.4vw, 48px); font-family: var(--font-eyebrow); font-weight: 679; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--teal); text-decoration: none; transition: color 200ms var(--ease); } .disc-page__back i { font-style: normal; transition: transform 200ms var(--ease); } .disc-page__back:hover { color: var(--forest); } .disc-page__back:hover i { transform: translateX(-3px); } .disc-page .disc-detail__tagline { font-size: clamp(2.3rem, 4.4vw, 3.6rem); } /* Selected work — the same square brand-coloured case cards as the case-page "More work" row (.case-more__card), in a padded, centred 3-up grid. */ .service-related .section-kicker { color: var(--accent); } .service-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.5vw, 22px); width: 100%; max-width: 1440px; margin-inline: auto; padding: 0 clamp(24px, 7vw, 106px) clamp(48px, 7vw, 100px); } @media (max-width: 760px) { .service-related__grid { grid-template-columns: 1fr; max-width: 480px; } } /* Sense pillars as links (Capabilities + each service's model nav) */ .sense-pillar { color: inherit; text-decoration: none; transition: background 360ms var(--ease); } .sense-pillar[href]:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); } .sense-pillar.is-current { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); } .sense-pillar.is-current::after { transform: scaleX(1); } .sense-pillar__here { font-family: var(--font-eyebrow); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } /* Follow-up boxes (at-a-glance) on service pages — Joe's mockup: light #fafafa cells, green labels, forest value text at a comfortable reading measure. */ .page-service .signal-row { gap: 0; background: var(--forest); } .page-service .signal-row div { background: var(--forest); } .page-service .signal-row span { color: var(--sand); } .page-service .signal-row strong { color: var(--off-white); font-size: 22px; font-weight: 400; max-width: 26ch; line-height: 1.4; } /* Service names in the "Pairs with" box link to their pages, with a sage highlight-underline that lifts on hover (Joe's mock). */ .page-service .signal-row .signal-link { color: var(--sand); text-decoration: none; background-image: linear-gradient(var(--sage), var(--sage)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0.16em; transition: background-size 240ms var(--ease); } .page-service .signal-row .signal-link:hover, .page-service .signal-row .signal-link:focus-visible { background-size: 100% 0.5em; } /* ============================================================================ SERVICE INTRO — refined 360 layout (Joe's mockup, 2026-06-14). Replaces the old service-hero: the page opens on the intro — a full-height pattern watermark, the teal Q360 circle (grayscale animation under a teal multiply, ◉360 over the top), then the lens name / role / lead / discipline checklist. The .svc360-* classes only appear on service pages, so these are page-scoped. ========================================================================== */ .svc360-intro { position: relative; display: grid; /* left column = half the content box, so the text column starts on the centre line — under the centred header Q logo. */ grid-template-columns: 50% minmax(0, 1fr); gap: 0; align-items: center; padding: clamp(116px, 16vh, 200px) clamp(24px, 7vw, 106px) clamp(66px, 9vw, 120px); background: #f8f8f4; border-bottom: 1px solid var(--rule); overflow: hidden; } .svc360-intro > * { position: relative; z-index: 1; } .svc360-intro__wm { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 24%; background-image: var(--svc-pattern); background-position: right center; background-size: auto 100%; background-repeat: no-repeat; opacity: 0.4; pointer-events: none; } .svc360-circle { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; justify-self: center; border-radius: 50%; overflow: hidden; background: var(--teal); display: grid; place-items: center; box-shadow: 0 36px 82px -34px color-mix(in srgb, var(--warm-muted) 55%, transparent); } .svc360-circle__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); /* iOS Safari does not clip a composited