/* 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 { height: 100%; overscroll-behavior: none; scroll-behavior: auto; } 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(--paper); color: var(--black); font-family: var(--font-body); letter-spacing: 0; height: 100%; overflow: hidden; overscroll-behavior: none; } .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; 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__the { font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: clamp(2rem, 5vw, 4.2rem); } .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. Family/weight/line-height/tracking come from the global display pin; size, colour and the seat below the car are ours. (Consolidated 2026-06 from a four-era cascade fight — this is the only base rule.) */ .hero-title { font-size: 28px; margin-top: 500px; max-width: 600px; color: var(--ink); } /* 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) { 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: clamp(80px, 11vh, 120px); left: 0; right: 0; z-index: 2; padding: 0 14px; } body[data-slide-transition="native"] .hero-copy { position: absolute; bottom: clamp(42px, 7vh, 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; top: 29vh; 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; } /* (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 { isolation: isolate; /* locked mask geometry (dialed in via ?maskalign) — identical on every diagonal slide so the two masks are exact complements */ --q-cx: 64.36vw; --q-cy: 48.89vh; --q-r: 17.9vw; --q-logo-size: 54.01vw; --q-logo-x: 0px; --q-logo-y: 0px; --diag-offset: -2.72vw; /* parallel shift of the 45deg diagonal (moves where it cuts the circle) */ --diag-top: calc(var(--q-cx) - var(--q-cy) + var(--diag-offset)); --diag-bottom: calc(var(--q-cx) + 100vh - 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; } /* 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; grid-template-columns: minmax(160px, 0.34fr) 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(160px, 0.34fr) minmax(0, 1fr); } .studio--origin .section-kicker { color: var(--forest); } .studio--origin h2 { font-size: clamp(4rem, 7.4vw, 8.4rem); grid-column: 2; letter-spacing: 0; line-height: 0.88; max-width: 1050px; } .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: 36vh; } .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: 48vh; } .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(--paper); 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: 28vh; } .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); --paper: color(srgb 0.9617 0.9569 0.9307); --sand: #eadbc8; --paper-deep: oklch(91.5% 0.026 80); /* legacy deep paper, sand-adjacent */ /* Green — the primary brand family */ --forest: #003129; /* deep green — dark CTA bands, origin story, NY/Aussie field */ --teal: #0f6b5f; --sage: #4f8e7d; --aqua: var(--teal); /* legacy name, now points at the chart teal */ /* Pink — the secondary family */ --blush: #f9dcdb; /* soft pink — work hero panel, offbrand circles, highlights */ --coral: #f7918a; --rose: #c4716c; --ember: var(--coral); /* legacy name, now points at the chart coral */ /* Purple — the accent family */ --aubergine: #2a1338; --hot: oklch(0.449422 0.247797 294.3103); /* the vivid one — links, kickers */ /* 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; /* 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: #00cf99; --client-westfield: #e81b27; --client-ambulance: #dd3027; --client-amex: #036bca; --client-knotel: #262626; --client-gravitas: #404bf4; /* case study not yet built — token ready */ --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-link:last-child { border-right: .5px solid var(--rule-dark); } .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); top: 26vh; } .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); } .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; 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); font-size: 50px; font-weight: 800; line-height: 1.18; color: var(--white); } .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; } /* ---- 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); } } @media (max-width: 680px) { .work-cards { grid-template-columns: 1fr; padding-inline: clamp(16px, 6vw, 28px); } /* 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; } .work-card--wide .work-card__inner { max-width: 100%; } } @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 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border-bottom: 1px solid var(--rule); } .stat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .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; } .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; } .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; } /* ============================================================================ 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); } .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; } .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 { 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; } .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); } .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(--forest); } .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(--forest); border-color: var(--forest); } .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(--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(--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.81fr 0.81fr 1fr; /* mirrors the hero split — SERVICES sits under the panel */ gap: 1px; background: var(--rule); border-bottom: 1px solid var(--rule); } .case-facts2 div { display: grid; gap: 12px; align-content: start; min-height: clamp(140px, 12vw, 180px); padding: clamp(26px, 3vw, 48px); background: var(--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 { padding: clamp(72px, 12vw, 180px) clamp(24px, 7vw, 106px); background: var(--surface); border-bottom: 1px solid var(--rule); } .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; } .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); } .case-shot-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 1px; background: var(--rule); } .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); } @media (max-width: 760px) { .case-shot-grid { grid-template-columns: 1fr; } } /* ============================================================================ 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; 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(qc-hero.webp) center / cover no-repeat; border-bottom: 1px solid var(--rule); } .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; } .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) */ html.js [data-reveal] { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity 720ms var(--ease), transform 720ms var(--ease); } html.js [data-reveal].is-visible { opacity: 1; transform: none; } /* Gentle cascade when several siblings reveal together in one grid/row */ html.js :is(.stat-grid, .work-cards, .ob-list, .sense-pillars, .qc__steps, .contact-notes, .ob-nav) > [data-reveal]:nth-child(2) { transition-delay: 90ms; } html.js :is(.stat-grid, .work-cards, .ob-list, .sense-pillars, .qc__steps, .contact-notes, .ob-nav) > [data-reveal]:nth-child(3) { transition-delay: 180ms; } html.js :is(.stat-grid, .work-cards, .ob-list, .sense-pillars, .qc__steps, .contact-notes, .ob-nav) > [data-reveal]:nth-child(4) { transition-delay: 260ms; } html.js :is(.stat-grid, .work-cards, .ob-list, .sense-pillars, .qc__steps, .contact-notes, .ob-nav) > [data-reveal]:nth-child(n+5) { transition-delay: 330ms; } /* 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(--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("think.svg"); --icon-hover: url("Qualls-think.gif"); } .sense-pillar--feel { --icon: url("feel.svg"); --icon-hover: url("Qualls-feel.gif"); } .sense-pillar--touch { --icon: url("touch.svg"); --icon-hover: url("Qualls-touch.gif"); } .sense-pillar--see { --icon: url("see.svg"); --icon-hover: url("Qualls-see.gif"); } .sense-pillar__icon { width: clamp(80px, 8.5vw, 112px); height: clamp(80px, 8.5vw, 112px); border-radius: 50%; border: 1px solid var(--rule); 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; 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__bonus { margin: 0; padding: clamp(22px, 2.6vw, 38px) clamp(24px, 7vw, 106px); border-top: 1px solid var(--rule); background: color-mix(in srgb, var(--forest) 8%, var(--surface)); font-family: var(--font-display); font-size: clamp(1rem, 1.4vw, 1.3rem); font-weight: 900; letter-spacing: 0; color: color-mix(in srgb, var(--ink) 82%, transparent); } .qc__bonus span { margin-right: 8px; font-size: 1.4em; color: var(--forest); } @media (max-width: 1040px) { .sense-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .sense-pillars { grid-template-columns: 1fr; } } /* ============================================================================ NY / AUSSIE — diagonal split of the two animated scenes (Studio/About page). Two full-bleed panels clipped to complementary triangles; the animated SVGs are inline-injected by initInlineSvgs() so their SMIL runs. Labels sit inside each (clipped) panel so they can't bleed across the diagonal. ========================================================================== */ .ny-aus { position: relative; width: 100%; min-height: clamp(460px, 82vh, 880px); overflow: hidden; background: var(--forest); /* deep green shows through the screen-blended panels */ isolation: isolate; } /* screen-blend the panels over the green field so the artwork picks up the green without re-cutting the SVGs (NY → green w/ light art, Aussie → cream w/ green art) */ .ny-aus__panel { position: absolute; inset: 0; overflow: hidden; mix-blend-mode: screen; } .ny-aus__panel--ny { background: var(--black); clip-path: polygon(0 0, 28.4% 0, 76.4% 100%, 0 100%); } .ny-aus__panel--aus { background: var(--paper); clip-path: polygon(27.6% 0, 100% 0, 100% 100%, 75.6% 100%); } .ny-aus__art { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .ny-aus__art > svg { width: 100%; height: 100%; display: block; } .ny-aus__label { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 6vw, 6.2rem); line-height: 0.9; letter-spacing: -0.025em; color: var(--white); mix-blend-mode: difference; /* inverts against whichever scene is behind */ } .ny-aus__label--ny { right: 54%; text-align: right; } .ny-aus__label--aus { left: 54%; text-align: left; } /* mobile — flip the split to top (NY) / bottom (Aussie) so the scenes breathe */ @media (max-width: 720px) { .ny-aus { min-height: clamp(520px, 92vh, 780px); } .ny-aus__panel--ny { clip-path: polygon(0 0, 100% 0, 100% 44%, 0 56%); } .ny-aus__panel--aus { clip-path: polygon(0 56%, 100% 44%, 100% 100%, 0 100%); } .ny-aus__label { top: auto; transform: none; font-size: clamp(2.4rem, 11vw, 4rem); line-height: 0.92; } .ny-aus__label--ny { right: auto; left: clamp(20px, 6vw, 40px); top: clamp(36px, 10vh, 96px); text-align: left; } .ny-aus__label--aus { left: auto; right: clamp(20px, 6vw, 40px); bottom: clamp(36px, 10vh, 96px); text-align: right; } } /* =========================================================================== 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; } /* 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; } /* 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); } /* "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 { 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); } .work-stack > .deck-skip { position: absolute; left: 50%; bottom: clamp(20px, 4vh, 44px); transform: translateX(-50%); z-index: 6; display: grid; place-items: center; width: clamp(44px, 4.6vw, 54px); height: clamp(44px, 4.6vw, 54px); padding: 0; border: 1.5px solid color-mix(in srgb, var(--white) 62%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--black) 14%, transparent); color: var(--white); cursor: pointer; -webkit-appearance: none; appearance: none; transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease); } .work-stack > .deck-skip svg { width: 22px; height: 22px; display: block; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--black) 30%, transparent)); } .work-stack > .deck-skip:hover { background: color-mix(in srgb, var(--black) 34%, transparent); border-color: var(--white); transform: translateX(-50%) translateY(3px); } /* 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; 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(15px, 2vh, 26px) clamp(18px, 1.6vw, 30px); text-align: left; color: var(--black); transform: none; transition: background 220ms var(--ease), color 220ms var(--ease); } .menu-label { display: block; font-family: var(--font-display); font-size: clamp(1.7rem, 2.2vw, 2.5rem); font-weight: 700; 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: inherit; opacity: 0.9; } .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; } .menu-note { position: absolute; inset: auto auto clamp(26px, 6.5vh, 66px) 50%; transform: translateX(-50%); z-index: 4; margin: 0; max-width: 640px; font-family: var(--font-body); font-size: clamp(1rem, 1.15vw, 1.2rem); line-height: 1.45; text-align: center; color: var(--white); } .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%); } .menu-preview__slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; 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__the { font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: clamp(2rem, 5vw, 4.2rem); color: var(--menu-purple-top); } .menu-preview__giant { position: static; bottom: auto; left: auto; transform: none; display: block; font-family: var(--font-body); font-weight: 800; font-size: clamp(4.5rem, 12.5vw, 11.5rem); line-height: 0.86; letter-spacing: -0.02em; 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; } .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: "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 */ } @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 */ } /* 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; } /* Eyebrows — Stack Sans Headline via --font-eyebrow (peeled off --font-display); weight + tracking from the lab; size handled by size-adjust above. */ .panel-eyebrow, .section-kicker, .menu-label, .proof-band, .reel-lede__count, .agency-footer, [class*="eyebrow"], [class*="kicker"] { font-family: var(--font-eyebrow) !important; font-weight: 679 !important; letter-spacing: 0.07em !important; } /* Body copy keeps its size/weight/leading; family comes from --font-body above. */ /* =========================================================================== 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); } /* --- Menu labels: display face (Protest Strike), flat tracking -------------- Overrides the eyebrow !important group near the end of this file. */ .menu-label { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: 0 !important; } /* --- 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)); inset: clamp(112px, 12vh, 132px) 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 */ } /* Restore the stacked menu on small screens. The desktop block above forces a 5-column grid at every width (it was "appended to win"), which overlaps badly on narrow viewports — so re-stack to one column, drop the preview stage, and compact the rows. */ @media (max-width: 1040px) { .menu-grid { grid-template-columns: 1fr; } .menu-link { min-height: 0; padding: clamp(14px, 2.1vh, 22px) clamp(18px, 4vw, 30px); border-top: 0.5px solid color-mix(in srgb, var(--black) 14%, transparent); } .menu-link:first-child { border-top: 0; } .menu-label { font-size: clamp(1.6rem, 5.4vw, 2.2rem); } .menu-rule { display: none; } .menu-preview, .menu-note { display: none; } /* note is white-on-white once the stage is gone */ } /* Phone: same square, edge-to-edge panel with a paper margin up top for the logo + X; allow scroll on short screens, and keep the compact Q badge while open (the morphing wordmark would collide with the top-right X). */ @media (max-width: 680px) { .menu-shell { inset: clamp(84px, 13vh, 104px) var(--menu-frame) var(--menu-frame); overflow-y: auto; padding: 0; } .menu-toggle { right: 18px; width: 46px; height: 46px; } /* top inherited from the ≤900 centreline */ body.menu-is-open .brand-toggle { width: 74px; } body.menu-is-open .q-logo-mark { opacity: 1; visibility: visible; transform: scale(1); transition-delay: 0s; } body.menu-is-open .q-logo-mark__disc { fill: var(--black); stroke-width: 0; } body.menu-is-open .q-logo-mark__symbol, body.menu-is-open .q-logo-mark__dot { fill: var(--white); } body.menu-is-open .brand-wordmark { opacity: 0 !important; visibility: hidden !important; } } /* =========================================================================== 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 { background: var(--black); color: var(--paper); border-top: 0; display: flex; flex-direction: column; gap: clamp(34px, 4vw, 56px); padding: clamp(48px, 6vw, 88px) clamp(24px, 6vw, 96px) clamp(28px, 3vw, 44px); font-family: var(--font-body); } /* Keep it dark even on the light subpages (overrides the page-light rule). */ body.page-light .agency-footer { background: var(--black); color: var(--paper); border-top: 0; } /* ---- top widget row ---- */ .agency-footer__top { display: grid; /* centre column gets more room so the 6-item menu stays on one row with its pipe separators (the side columns hold less) */ grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 64px); align-items: center; } .agency-footer__slogan { margin: 0; max-width: 24ch; font-family: var(--font-body); font-weight: 400; /* lighter, softer than the rest of the footer */ font-size: clamp(1.2rem, 1.55vw, 1.6rem); line-height: 1.42; letter-spacing: 0; /* drop the inherited eyebrow tracking */ color: color-mix(in srgb, var(--paper) 78%, transparent); } .agency-footer__reach { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .agency-footer__menu { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 0; } .agency-footer__menu a::after { content: "|"; margin: 0 12px; color: color-mix(in srgb, var(--paper) 32%, transparent); } .agency-footer__menu a:last-child::after { content: none; } .agency-footer__lines { display: flex; flex-direction: column; gap: 5px; margin: 0; } .agency-footer__brandcol { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; text-align: right; } .agency-footer__logo { display: block; width: clamp(112px, 9vw, 148px); aspect-ratio: 468.4 / 119.9; /* wordmark viewBox */ background: var(--paper); -webkit-mask: url(qualls-wordmark-black.svg) center / contain no-repeat; mask: url(qualls-wordmark-black.svg) center / contain no-repeat; transition: background 220ms var(--ease); } .agency-footer__logo:hover { background: var(--hot); } .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, NOT the old oversized treatment */ .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); } /* nav links stay bright white (the base rule above); contact + social step down to a muted grey so the menu reads as the primary action — per the mockup hierarchy */ .agency-footer__lines a { font-weight: 200; color: color-mix(in srgb, var(--paper) 60%, transparent); } .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) 56%, transparent); } /* ---- bottom row ---- */ .agency-footer__bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); align-items: start; padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); } .agency-footer__tag, .agency-footer__copy { margin: 0; font-family: var(--font-eyebrow); font-weight: 100; font-size: 0.8rem; letter-spacing: 0.04em; color: color-mix(in srgb, var(--paper) 64%, transparent); } .agency-footer__copy { text-align: right; } /* Legal / Cookie links sit in the copyright line — same muted grey as the text, brightening to white on hover (per the mockup, they read as quiet links). */ .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: 100; font-size: 0.5rem; line-height: 1.5; color: color-mix(in srgb, var(--paper) 56%, transparent); } .agency-footer__ack img { display: block; height: 30px; width: auto; margin: 0 auto 12px; } .agency-footer__ack p { margin: 0; max-width: 60ch; margin-inline: auto; } .agency-footer__ack a { font-family: inherit; font-size: inherit; font-weight: 300; letter-spacing: 0; color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* ---- 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, .agency-footer__copy { text-align: center; } /* stacked menu wraps freely — drop the pipe separators for an even gap so no separator dangles at the end of a wrapped row */ .agency-footer__menu { gap: 8px 20px; } .agency-footer__menu a::after { content: none; } } /* 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) { /* Scale + centre the locked Q/diagonal geometry — angle UNCHANGED (45°). */ body[data-slide-transition="native"] .work-panel--imgcolour, body[data-slide-transition="native"] .work-panel--glass { --q-cx: 50vw; --q-cy: 25vh; --q-r: 26vw; --diag-offset: -9.72vw; --q-logo-size: 85vw; --q-logo-y: -8px; /* nudge the floating Q up 8px on mobile only */ } /* 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 photo card: text in the lower portion, on the slide's own colour surface. The deck's --text-y parallax (set per-card by JS) scrolls it in and out with the wipe, so a card's copy clears out before the next card's copy arrives — no overlap. (It's stuck in place through the whole dwell.) */ body[data-slide-transition="native"] .work-panel:has(.panel-photo) .case-content { top: 52%; bottom: 0; left: 0; right: 0; max-width: none; padding: 6vw 7vw 6vw; display: flex; flex-direction: column; justify-content: center; } .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; } } /* =========================================================================== 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); } /* Large faint "360" outline behind the forest content. The art is pre-coloured #16352f (a hair above forest), so no recolour — just place + scale it big. */ .service-hero__texture { position: absolute; z-index: 0; top: clamp(-70px, -5vw, -10px); left: clamp(-50px, -2vw, 48px); width: clamp(440px, 66vw, 1040px); height: auto; pointer-events: none; user-select: none; } /* 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("Q360-logo.svg") no-repeat left center / contain; mask: url("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(--sand); 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(--ink) 80%, transparent); } /* Accent kicker on the disciplines section (::before rule inherits currentColor). */ .service-disciplines .section-kicker { color: var(--accent); } /* Discipline titles run longer than the About/Capabilities stats — hold them a notch smaller (matching the .sense-grid override) so they sit tidily in the grid, including See's narrow 4-up cells. */ .service-disciplines .stat__title { font-size: clamp(1.2rem, 1.5vw, 1.7rem); line-height: 0.96; } /* 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); } /* Service CTA — two ghost pills side by side */ .service-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; } @media (max-width: 860px) { .service-hero { min-height: 78vh; min-height: 78svh; } .service-hero__head { padding-top: clamp(110px, 15vh, 156px); /* hold the headline clear of the bleeding mark circle on the right */ padding-right: clamp(96px, 26vw, 220px); max-width: 100%; } /* Shrink the mark to a top-right accent so it never sits under the copy. */ .service-hero__mark { top: clamp(96px, 15vh, 150px); left: auto; right: clamp(-90px, -16vw, -40px); transform: none; width: clamp(190px, 50vw, 300px); opacity: 0.92; } } @media (max-width: 540px) { /* collapse the dead forest space between headline and foot on phones */ .service-hero { min-height: 0; } .service-hero__head { padding-bottom: clamp(96px, 22vw, 150px); } .service-hero__mark { width: clamp(150px, 46vw, 220px); } .service-hero__title { font-size: clamp(2.4rem, 11vw, 3.4rem); } } /* =========================================================================== HOMEPAGE CAPABILITIES TEASER — two cards linking to the Q360 model (Capabilities) and the QC Process. Replaced the 4-up sense grid (2026-06). =========================================================================== */ /* The teaser is the section's only child now — collapse the old head/grid/strip row template and centre everything (the white diagonal ::before stays). These out-rank the legacy .services--model rules by specificity/order. */ .services--model { grid-template-rows: none; align-content: center; justify-items: center; } .services--model > .cap-teaser { position: relative; z-index: 1; /* above the white diagonal */ width: 100%; } .services--model .cap-teaser__title { grid-column: auto; font-size: clamp(2.1rem, 4.4vw, 4rem); line-height: 1.04; max-width: 24ch; margin: 0; } .services--model .cap-teaser__kicker { margin: 0; } .cap-teaser { display: grid; justify-items: center; text-align: center; gap: clamp(16px, 2.2vw, 26px); } .cap-teaser__kicker { justify-content: center; } .cap-teaser__title { margin: 0; max-width: 24ch; font-size: clamp(2.1rem, 4.4vw, 4rem); color: var(--forest); } .cap-teaser__cards { /* one shared mark height so the Q360 + QC Process logos match exactly */ --cap-mark-h: clamp(54px, 6.6vw, 100px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); width: min(100%, 1200px); margin-top: clamp(18px, 3vw, 40px); } .cap-card { display: grid; justify-items: center; align-content: start; gap: 6px; color: inherit; text-decoration: none; } .cap-card__art { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; border-radius: clamp(26px, 3.2vw, 44px); overflow: hidden; background: var(--paper-deep); transition: transform 320ms var(--ease), box-shadow 320ms var(--ease); } .cap-card:hover .cap-card__art, .cap-card:focus-visible .cap-card__art { transform: translateY(-5px); box-shadow: 0 30px 64px -30px color-mix(in srgb, var(--black) 45%, transparent); } .cap-card__art--forest { background: var(--forest); } /* Faint giant 360 outline — pre-coloured a hair above forest, no recolour. */ .cap-card__texture { position: absolute; top: -8%; left: -12%; width: 125%; height: auto; pointer-events: none; } /* Q360 wordmark — the matched black logo pair, recoloured via mask (the url() resolves relative to this stylesheet). Both marks share --cap-mark-h so they render at exactly the same height, centred on their cards. */ .cap-card__q360 { position: relative; z-index: 1; display: block; height: var(--cap-mark-h); width: calc(var(--cap-mark-h) * 3.339); /* 473.058 × 141.7 viewBox */ background-color: var(--blush); -webkit-mask: url("Q360_logo_black.svg") no-repeat center / contain; mask: url("Q360_logo_black.svg") no-repeat center / contain; } .cap-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* QC Process logo — same matched pair, forest on the pastel art. */ .cap-card__qclogo { position: relative; z-index: 1; display: block; height: var(--cap-mark-h); width: calc(var(--cap-mark-h) * 3.905); /* 555.836 × 142.325 viewBox */ background-color: var(--forest); -webkit-mask: url("QC-Process_logo_black.svg") no-repeat center / contain; mask: url("QC-Process_logo_black.svg") no-repeat center / contain; } .cap-card__name { margin-top: clamp(12px, 1.6vw, 20px); font-family: var(--font-eyebrow); font-size: clamp(1.05rem, 1.3vw, 1.35rem); font-weight: 700; color: var(--ink); } .cap-card__caption { max-width: 36ch; font-family: var(--font-body); font-size: clamp(0.98rem, 1.2vw, 1.2rem); line-height: 1.5; color: color-mix(in srgb, var(--ink) 80%, transparent); } @media (max-width: 760px) { .cap-teaser__cards { grid-template-columns: 1fr; width: min(100%, 520px); } } /* =========================================================================== SKIP LINK — first tabbable element on every page; visually hidden until it receives keyboard focus, then drops in as a pill under the header. =========================================================================== */ .skip-link { position: fixed; top: 14px; left: 14px; z-index: 60; padding: 12px 22px; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--font-eyebrow); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; transform: translateY(-220%); transition: transform 160ms var(--ease); } .skip-link:focus-visible { transform: translateY(0); outline-offset: 3px; } /* =========================================================================== PRINT — strip the chrome and decorations; legal.html is the page people actually print. =========================================================================== */ @media print { .site-header, .menu-shell, .menu-scrim, .skip-link, .agency-footer__social, .read-progress, .carousel-dots, .deck-skip { display: none !important; } body, body.page-light { background: #fff; color: #000; } main#top { height: auto; overflow: visible; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; } } /* =========================================================================== OFFBRAND — the Qualls journal (offbrand/ index + article pages) Finished title graphics (assets/NN-_header.webp) bake the green headline, blush circle, coffee-and-paper art and the script logo into one transparent webp (.ob-hero--art). Posts without a graphic yet get the same look typeset live (.ob-hero--type): green Stack Sans headline, blush circle, masked pink logo. Colours sampled from the title art. ========================================================================== */ body.page-offbrand { --ob-green: #3b6862; /* headline green from the title graphics */ --ob-pink: #e4c5c4; /* offbrand script-logo pink */ } /* The script logo, recoloured via mask (same trick as .service-hero__brandmark; the url resolves relative to styles.css). SVG viewBox is 370.995 × 99.791. */ .ob-logo { --w: clamp(120px, 14vw, 170px); display: inline-block; width: var(--w); height: calc(var(--w) / 3.718); background-color: var(--ob-pink); -webkit-mask: url("offbrand-logo-black.svg") no-repeat left center / contain; mask: url("offbrand-logo-black.svg") no-repeat left center / contain; } /* ---- Index ---------------------------------------------------------------- */ .ob-index { max-width: 880px; margin-inline: auto; padding: clamp(120px, 17vh, 210px) clamp(24px, 6vw, 48px) clamp(72px, 10vw, 130px); } .ob-masthead { margin: 0 0 clamp(40px, 6vw, 72px); } .ob-masthead .section-kicker { color: var(--hot); } .ob-masthead__logo { margin: clamp(12px, 1.8vw, 20px) 0 0; line-height: 0; } .ob-logo--masthead { --w: clamp(230px, 34vw, 380px); } .ob-masthead__lede { margin: clamp(16px, 2.4vw, 26px) 0 0; max-width: 560px; font-family: var(--font-body); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; color: color-mix(in srgb, var(--ink) 78%, transparent); } .ob-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); } .ob-card { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2.6vw, 28px); align-items: center; padding: clamp(26px, 4vw, 40px) 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; } .ob-card:has(.ob-card__art) { grid-template-columns: minmax(0, 1fr) clamp(130px, 17vw, 200px); } .ob-card__text { display: block; min-width: 0; } .ob-card__title { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: var(--ink); transition: color 0.25s var(--ease); } .ob-card:hover .ob-card__title, .ob-card:focus-visible .ob-card__title { color: var(--hot); } .ob-card__standfirst { margin: 10px 0 0; max-width: 60ch; font-family: var(--font-body); font-style: italic; font-size: clamp(0.98rem, 1.3vw, 1.08rem); line-height: 1.6; color: color-mix(in srgb, var(--ink) 64%, transparent); } .ob-card__cta { display: inline-block; margin-top: 14px; font-family: var(--font-eyebrow); font-style: normal; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ob-green); } .ob-card__cta::after { content: " \2192"; display: inline-block; transition: transform 0.25s var(--ease); } .ob-card:hover .ob-card__cta::after { transform: translateX(4px); } .ob-card__art { width: 100%; height: auto; } /* ---- Article -------------------------------------------------------------- */ .ob-article { max-width: 880px; margin-inline: auto; padding: clamp(110px, 15vh, 180px) clamp(24px, 6vw, 48px) clamp(56px, 7vw, 90px); } .ob-back { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 clamp(22px, 3.4vw, 40px); font-family: var(--font-eyebrow); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: color-mix(in srgb, var(--ink) 55%, transparent); transition: color 0.25s var(--ease); } .ob-back:hover { color: var(--hot); } .ob-back i { font-style: normal; } .ob-hero { margin: 0 0 clamp(34px, 5vw, 56px); } .ob-hero__frame { margin: 0; line-height: 0; } .ob-hero--art img { display: block; width: 100%; height: auto; } /* Typographic fallback hero — same composition as the title art */ .ob-hero--type { position: relative; padding: clamp(10px, 2vw, 24px) 0 clamp(16px, 2.6vw, 28px); } .ob-hero--type::before { content: ""; position: absolute; top: 50%; right: clamp(-36px, -2.6vw, -12px); width: clamp(220px, 36vw, 420px); aspect-ratio: 1; transform: translateY(-46%); border-radius: 50%; background: var(--blush); z-index: 0; } .ob-hero__title { position: relative; z-index: 1; margin: 0; max-width: 16ch; /* override the global display-font h1 pin — this hero matches the title art */ font-family: var(--font-eyebrow) !important; font-weight: 560 !important; font-size: clamp(2.9rem, 7.2vw, 5.4rem) !important; line-height: 1.04 !important; letter-spacing: -0.018em !important; color: var(--ob-green); } .ob-hero--type .ob-logo { position: relative; z-index: 1; margin-top: clamp(24px, 4vw, 44px); } /* Photo hero — a photo composition (subject on its own blush circle, transparent webp) replaces the plain ::before circle; headline + logo typeset over it, recreating the baked title-art layout live. */ .ob-hero--photo { min-height: clamp(320px, 42vw, 520px); } .ob-hero--photo::before { content: none; } .ob-hero__photo { position: absolute; top: 50%; right: clamp(-30px, -2vw, 0px); width: clamp(300px, 42vw, 520px); height: auto; transform: translateY(-50%); z-index: 0; } .ob-body { max-width: 800px; } .ob-body p { margin: 0 0 clamp(16px, 2vw, 22px); font-family: var(--font-body); font-size: clamp(1.04rem, 1.35vw, 1.16rem); line-height: 1.78; color: color-mix(in srgb, var(--ink) 84%, transparent); } .ob-body > p:first-child { font-size: clamp(1.26rem, 1.9vw, 1.5rem); line-height: 1.55; color: var(--ink); } .ob-body p:last-child { margin-bottom: 0; } .ob-body a { color: var(--hot); text-decoration: underline; text-underline-offset: 2px; } .ob-body .ob-lines { padding-left: clamp(18px, 2.6vw, 26px); border-left: 3px solid var(--ob-pink); font-style: italic; line-height: 1.9; color: color-mix(in srgb, var(--ink) 72%, transparent); } /* Editorial furniture — drop cap, highlighter, pull lines, lead-ins, dinkus, end mark */ .ob-body > p:first-child::first-letter { float: left; margin: 0.045em 0.14em -0.08em 0; font-family: var(--font-body); font-weight: 700; font-size: 3.1em; line-height: 0.74; color: var(--ob-green); } .ob-body mark { padding: 0.04em 0.22em; border-radius: 5px; background: var(--sand); color: var(--ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .ob-leadin { text-transform: uppercase; font-size: 0.84em; letter-spacing: 0.09em; } .ob-body .ob-pull { position: relative; margin: clamp(32px, 4.6vw, 52px) 0; padding-top: clamp(14px, 2vw, 20px); font-family: var(--font-eyebrow); font-weight: 560; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.18; letter-spacing: -0.012em; color: var(--ob-green); } @media (min-width: 1100px) { /* hang pulls out of the reading column, magazine-spread style */ .ob-body .ob-pull { margin-left: -64px; } } .ob-body .ob-pull::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 4px; background: var(--ob-pink); } .ob-break { display: flex; justify-content: center; gap: 14px; margin: clamp(34px, 5vw, 56px) 0; } .ob-break span { width: 7px; height: 7px; border-radius: 50%; /* quiet, even warm dots — coloured dots read as a carousel indicator (Joe) */ background: var(--warm-muted); } .ob-body > p:last-child::after { content: ""; display: inline-block; width: 0.82em; height: 0.82em; margin-left: 10px; vertical-align: -0.1em; background: var(--ob-pink); /* q-logo-mask.svg = the Q badge with a TRUE transparent knockout (the original q-logo.svg knocks out in white, which alpha masks ignore) */ -webkit-mask: url("q-logo-mask.svg") no-repeat center / contain; mask: url("q-logo-mask.svg") no-repeat center / contain; } /* Wry photo caption — part of the header stack (right-aligned, pink dash), not floating in the comps' deliberate white space */ .ob-caption { margin: clamp(-20px, -1.6vw, -10px) 0 0; text-align: right; font-family: var(--font-body); font-style: italic; font-size: 0.88rem; color: color-mix(in srgb, var(--ink) 48%, transparent); } .ob-caption::before { content: ""; display: inline-block; width: 26px; height: 2px; margin-right: 10px; vertical-align: 0.32em; background: var(--ob-pink); } .ob-caption + .ob-deck { margin-top: clamp(16px, 2.4vw, 24px); } .ob-deck { margin: 0; max-width: 640px; font-family: var(--font-body); font-style: italic; font-size: clamp(1.18rem, 1.8vw, 1.42rem); line-height: 1.5; color: color-mix(in srgb, var(--ink) 74%, transparent); } .ob-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: clamp(18px, 2.6vw, 26px) 0 clamp(30px, 4.4vw, 46px); padding-top: clamp(14px, 2vw, 18px); border-top: 1px solid var(--rule); font-family: var(--font-eyebrow); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 55%, transparent); } .ob-meta i { font-style: normal; color: var(--ob-pink); } .ob-meta__byline { display: inline-flex; align-items: center; gap: 8px; } .ob-meta__byline img { width: 24px; height: 24px; border-radius: 50%; background: var(--blush); object-fit: cover; } /* Feature cards — editorial cross-links into case studies, the Q360 lenses and the QC process. The accent comes from the linked thing, not from Offbrand. */ .ob-feat { margin: clamp(30px, 4.4vw, 48px) 0; } .ob-feat__card { display: grid; grid-template-columns: clamp(92px, 12vw, 128px) 1fr; gap: clamp(16px, 2.4vw, 26px); align-items: center; padding: clamp(14px, 2vw, 20px); border: 1px solid var(--rule); border-radius: 18px; text-decoration: none; color: inherit; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); } .ob-feat__card:hover { border-color: var(--accent); transform: translateY(-2px); } /* beat `.ob-body a` (underlined, --hot) — feature cards are quiet cards, not body links */ .ob-body .ob-feat__card { text-decoration: none; color: inherit; } .ob-feat__media { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--white)); } .ob-feat__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .ob-feat__media--chip { padding: 16%; } .ob-feat__media--chip img { object-fit: contain; } /* sense icons are already circular badges — no chip, no padding, no tint */ .ob-feat__media--icon { background: none; border-radius: 0; aspect-ratio: 1; } .ob-feat__media--icon img { object-fit: contain; } .ob-feat__text { display: block; min-width: 0; } .ob-feat__kicker { display: block; font-family: var(--font-eyebrow); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; /* ink floor keeps light client accents (Taguchi yellow, CF mint) legible as text */ color: color-mix(in srgb, var(--accent) 72%, var(--ink)); } .ob-feat__title { display: block; margin-top: 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 2.1vw, 1.7rem); line-height: 1.1; color: var(--ink); } .ob-feat__line { display: block; margin-top: 5px; font-family: var(--font-body); font-style: italic; font-size: 0.98rem; line-height: 1.45; color: color-mix(in srgb, var(--ink) 62%, transparent); } .ob-feat__cta { display: inline-block; margin-top: 10px; font-family: var(--font-eyebrow); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 55%, transparent); transition: color 0.25s var(--ease); } .ob-feat__cta::after { content: " \2192"; display: inline-block; transition: transform 0.25s var(--ease); } .ob-feat__card:hover .ob-feat__cta { color: color-mix(in srgb, var(--accent) 72%, var(--ink)); } .ob-feat__card:hover .ob-feat__cta::after { transform: translateX(4px); } .ob-feat--duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px); } .ob-feat--duo .ob-feat__card { grid-template-columns: 1fr; align-content: start; } .ob-feat--duo .ob-feat__media { aspect-ratio: 16 / 10; } /* Aside variant — the card floats right and the copy wraps around it */ @media (min-width: 900px) { .ob-feat--aside { clear: none; float: right; width: min(46%, 350px); margin: 0.3em 0 clamp(16px, 2vw, 24px) clamp(22px, 3vw, 36px); } .ob-feat--aside .ob-feat__card { grid-template-columns: 84px 1fr; gap: 14px; padding: 14px 16px; } .ob-feat--aside .ob-feat__media { aspect-ratio: 1; } .ob-feat--aside .ob-feat__title { font-size: 1.25rem; } .ob-feat--aside .ob-feat__line { font-size: 0.9rem; } .ob-feat--aside .ob-feat__cta { margin-top: 7px; } } /* Cited pulls — quotes from the wider shelf, attributed */ .ob-cite { position: relative; margin: clamp(32px, 4.6vw, 52px) 0; padding-left: clamp(22px, 3.2vw, 34px); } .ob-cite::before { content: "\201C"; position: absolute; left: -4px; top: 0.32em; font-family: var(--font-body); font-size: 3.4em; line-height: 0; color: var(--ob-pink); } .ob-cite__kicker { display: block; margin-bottom: 8px; font-family: var(--font-eyebrow); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 50%, transparent); } .ob-cite blockquote { margin: 0; } .ob-cite blockquote p { margin: 0; font-family: var(--font-body); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.42; color: color-mix(in srgb, var(--ink) 82%, transparent); } .ob-cite figcaption { margin-top: 10px; font-family: var(--font-eyebrow); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.07em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 55%, transparent); } .ob-cite figcaption cite { font-style: normal; } .ob-cite figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .ob-cite figcaption a:hover { color: var(--hot); } /* Inline figures (brand-drawn diagrams) */ .ob-fig { margin: clamp(34px, 5vw, 56px) 0; } .ob-fig svg { display: block; width: 100%; height: auto; } .ob-fig text { font-family: var(--font-eyebrow); } .ob-fig .ob-fig__verdict { font-weight: 700; } .ob-fig figcaption { margin-top: 12px; text-align: center; font-family: var(--font-body); font-style: italic; font-size: 0.92rem; color: color-mix(in srgb, var(--ink) 52%, transparent); } /* Display blocks never wrap around a floated aside; floats stay inside the body */ .ob-body { display: flow-root; } .ob-feat:not(.ob-feat--aside), .ob-pull, .ob-break, .ob-cite, .ob-fig, .ob-lines { clear: both; } /* Section headings inside long musings (Protest via the global pin) */ .ob-body .ob-h { clear: both; margin: clamp(40px, 5.6vw, 64px) 0 clamp(12px, 1.8vw, 20px); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.08; color: var(--ink); } /* Editorial screenshots — evidence, not decoration */ .ob-shot { clear: both; margin: clamp(30px, 4.4vw, 48px) 0; } .ob-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 14px; background: var(--white); } .ob-shot figcaption, .ob-video figcaption { margin-top: 10px; font-family: var(--font-body); font-style: italic; font-size: 0.9rem; line-height: 1.5; color: color-mix(in srgb, var(--ink) 52%, transparent); } /* Video facade — poster + play button until the reader opts in */ .ob-video { clear: both; margin: clamp(34px, 5vw, 56px) 0; } .ob-video__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: var(--black); } .ob-video__frame iframe, .ob-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ob-video__poster { display: block; padding: 0; cursor: pointer; background: var(--black); } .ob-video__poster img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; transition: transform 0.4s var(--ease), opacity 0.3s var(--ease); } .ob-video__poster:hover img, .ob-video__poster:focus-visible img { transform: scale(1.02); opacity: 1; } .ob-video__play { position: absolute; top: 50%; left: 50%; width: 74px; height: 74px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--blush); transition: transform 0.25s var(--ease), background 0.25s var(--ease); } .ob-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(--forest); } .ob-video__poster:hover .ob-video__play, .ob-video__poster:focus-visible .ob-video__play { transform: translate(-50%, -50%) scale(1.08); background: var(--coral); } .ob-sign { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3vw, 28px); margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(22px, 3vw, 32px); border-top: 1px solid var(--rule); } .ob-sign__logo { --w: clamp(110px, 12vw, 150px); flex: none; } .ob-sign__note { margin: 0; max-width: 46ch; font-family: var(--font-body); font-style: italic; font-size: 0.95rem; line-height: 1.6; color: color-mix(in srgb, var(--ink) 58%, transparent); } /* Journal teaser on case pages — a full case-section band, accent-washed */ .case-journal { padding: clamp(56px, 8vw, 104px) clamp(24px, 7vw, 106px); background: color-mix(in srgb, var(--case-accent) 11%, var(--surface)); border-bottom: 1px solid var(--rule); } .case-journal__card { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 25vw, 330px); align-items: center; gap: clamp(28px, 5vw, 72px); max-width: 1180px; margin-inline: auto; text-decoration: none; color: inherit; } .case-journal__kicker { font-family: var(--font-eyebrow); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase; color: color-mix(in srgb, var(--case-accent) 72%, var(--ink)); } .case-journal__title { margin: 12px 0 0; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.02; color: var(--ink); transition: color 0.25s var(--ease); } .case-journal__card:hover .case-journal__title, .case-journal__card:focus-visible .case-journal__title { color: color-mix(in srgb, var(--case-accent) 72%, var(--ink)); } .case-journal__line { margin: 14px 0 0; max-width: 46ch; font-family: var(--font-body); font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; color: color-mix(in srgb, var(--ink) 72%, transparent); } .case-journal__cta { display: inline-block; margin-top: clamp(16px, 2.4vw, 24px); font-family: var(--font-eyebrow); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--case-accent) 72%, var(--ink)); } .case-journal__cta::after { content: " \2192"; display: inline-block; transition: transform 0.25s var(--ease); } .case-journal__card:hover .case-journal__cta::after { transform: translateX(4px); } .case-journal__art { width: 100%; height: auto; transition: transform 0.35s var(--ease); } .case-journal__card:hover .case-journal__art { transform: scale(1.04); } @media (max-width: 760px) { .case-journal__card { grid-template-columns: 1fr; } .case-journal__art { order: -1; width: min(58vw, 280px); } } /* ---- Prev / next ----------------------------------------------------------- */ .ob-nav { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 32px); max-width: 880px; margin-inline: auto; padding: 0 clamp(24px, 6vw, 48px) clamp(72px, 10vw, 120px); } .ob-nav__link { display: flex; align-items: center; gap: clamp(14px, 2vw, 20px); padding: clamp(18px, 2.6vw, 26px); border: 1px solid var(--rule); border-radius: 16px; text-decoration: none; color: inherit; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); } .ob-nav__link:hover { border-color: var(--hot); transform: translateY(-2px); } .ob-nav__thumb { flex: none; width: clamp(58px, 7vw, 78px); height: auto; transition: transform 0.3s var(--ease); } .ob-nav__link:hover .ob-nav__thumb { transform: scale(1.05); } .ob-nav__text { min-width: 0; } .ob-nav__link--next { justify-content: flex-end; text-align: right; } .ob-nav__kicker { display: block; font-family: var(--font-eyebrow); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 52%, transparent); } .ob-nav__kicker i { font-style: normal; } .ob-nav__name { display: block; margin-top: 8px; font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.15; color: var(--ink); } @media (max-width: 640px) { .ob-card, .ob-card:has(.ob-card__art) { grid-template-columns: 1fr; } .ob-card__art { grid-column: 1 / -1; width: min(320px, 82%); } .ob-hero--type::before { width: clamp(180px, 52vw, 260px); right: -8px; } .ob-hero--photo { min-height: min(78vw, 340px); } .ob-hero__photo { width: min(72vw, 330px); right: -12px; } .ob-nav { grid-template-columns: 1fr; } .ob-nav__link--next { justify-content: flex-start; text-align: left; } .ob-nav__link--next .ob-nav__thumb { order: -1; } .ob-feat--duo { grid-template-columns: 1fr; } .ob-feat__card { grid-template-columns: 84px 1fr; } .ob-feat--duo .ob-feat__card { grid-template-columns: 84px 1fr; } .ob-feat--duo .ob-feat__media { aspect-ratio: 1; } } /* Premium detail — selection colour follows the palette */ ::selection { background: var(--blush); color: var(--ink); } [data-tone="dark"] ::selection { background: var(--hot); color: var(--white); } /* Menu scroll lock, restated AFTER the native-mode scroller rules so it wins the source-order tie against `html:has(body[data-slide-transition="native"])` { overflow-y: auto } — the homepage was scrolling behind the open menu. */ html:has(body.menu-is-open) { overflow: hidden; }