:root {
  --black: #090909;
  --paper: #f2f2f2;
  --white: oklch(98.4% 0.01 82);
  --muted: #656565;
  --hot: #6600CC;
  --aqua: #12c8b5;
  --blue: #3852ff;
  --sun: #f6cc35;
  --ember: #e74d2a;
  --font-display: "Poppins", Arial, Helvetica, sans-serif;
  --font-body: "Old Standard TT", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overscroll-behavior: none;
  scroll-behavior: auto;
}

html:has(body.page-mode) {
  height: auto;
  min-height: 100%;
  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-kicker,
.hero-title,
.hero-link,
.panel-eyebrow,
.panel-title,
.case-title,
.section-kicker,
.studio h2,
.studio-axis,
.studio-signals dt,
.services h2,
.sense-card span,
.sense-card h3,
.qc-strip p,
.qc-strip li,
.contact h2,
.contact-details span,
.service-grid a,
.contact a {
  font-family: var(--font-display);
}

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 160ms linear;
  width: 100%;
}

main#top::before {
  border: clamp(10px, 1.05vw, 16px) solid #F7F5F0;
  box-shadow: 0 0 0 100vmax var(--paper);
  content: "";
  inset: 3.8vw;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transform: scale(1.075);
  transform-origin: center;
  transition: opacity 180ms var(--ease), transform 420ms 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-animation {
  display: none;
  height: 118px;
  left: 50%;
  opacity: 0.52;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 240ms var(--ease), transform 300ms var(--ease), visibility 0s;
  width: 118px;
  z-index: 1;
}

.brand-animation svg {
  display: block;
  height: 100%;
  overflow: visible;
  width: 100%;
}

.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;
}

.q-logo-mark__disc {
  fill: var(--black);
  stroke: var(--black);
  stroke-width: 0;
  transition: fill 240ms var(--ease), stroke-width 240ms var(--ease);
}

.q-logo-mark__symbol,
.q-logo-mark__dot {
  fill: var(--white);
  transition: fill 240ms var(--ease);
}

body.logo-is-hovered:not(.menu-is-open) .q-logo-mark,
body.menu-is-open .q-logo-mark {
  transform: scale(1.16);
}

body.logo-is-hovered:not(.menu-is-open) .brand-animation {
  opacity: 0.72;
  transform: translate(-50%, -50%) scale(1.08);
}

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-animation {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  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;
}

body.is-slide-transitioning .slide-transition {
  opacity: 1;
  visibility: visible;
}

body.slide-transition-forward .slide-transition__plane {
  animation: q-shutter-forward 680ms cubic-bezier(0.82, 0, 0.12, 1) both;
}

body.slide-transition-back .slide-transition__plane {
  animation: q-shutter-back 680ms cubic-bezier(0.82, 0, 0.12, 1) both;
}

body.logo-is-hovered:not(.menu-is-open) .q-logo-mark__disc,
body.menu-is-open .q-logo-mark__disc {
  fill: var(--white);
  stroke-width: 14px;
}

body.logo-is-hovered:not(.menu-is-open) .q-logo-mark__symbol,
body.logo-is-hovered:not(.menu-is-open) .q-logo-mark__dot,
body.menu-is-open .q-logo-mark__symbol,
body.menu-is-open .q-logo-mark__dot {
  fill: var(--black);
}

.menu-shell {
  background: 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 (#6600CC) box, the rest plain on the paper. Left-aligned label + desc. */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  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, #7b2ee6 0%, #6411c4 54%, #4d1499 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 {
  background: var(--slide-line);
  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: rgb(0 0 0 / 0.72);
  --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,
.panel-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: rgb(255 255 255 / 0.78);
  --slide-muted: rgb(255 255 255 / 0.72);
}

.site-slide.text-dark,
.site-slide[data-text="dark"] {
  --slide-fg: var(--black);
  --slide-line: rgb(0 0 0 / 0.72);
  --slide-muted: var(--muted);
}

.site-slide.is-active-slide {
  --slide-opacity: 1;
  opacity: var(--slide-opacity);
  pointer-events: auto;
  visibility: visible;
  z-index: 1;
}

body[data-slide-transition="sticky-q"] .site-slide {
  background: transparent;
  will-change: opacity, transform;
}

body[data-slide-transition="sticky-q"] .site-slide.is-adjacent-slide {
  opacity: var(--slide-opacity);
  pointer-events: none;
  visibility: visible;
  z-index: 0;
}

/* ---- 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; }
body[data-slide-transition="sticky-q"] .site-slide.is-wipe-target {
  opacity: 1;
  z-index: 2;
}
.site-slide.is-wipe-target > .slide-bg { clip-path: var(--slide-wipe, inset(0 0 100% 0)); }
body.is-sticky-settling .site-slide > .slide-bg,
body.is-sticky-committing .site-slide > .slide-bg {
  transition: clip-path 440ms var(--ease);
}

body.is-sticky-previewing .site-slide,
body.is-sticky-settling .site-slide,
body.is-sticky-committing .site-slide {
  transition: opacity 220ms linear, transform 420ms var(--ease);
}

body.is-sticky-previewing .brand-toggle,
body.is-sticky-settling .brand-toggle,
body.is-sticky-committing .brand-toggle {
  transform: translateX(-50%);
}

.site-slide.is-exiting-slide {
  --slide-scale-x: 0.94;
  --slide-scale-y: 0.88;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(0.82, 0, 0.12, 1);
}

.site-slide.is-entering-slide {
  animation: slide-enter-pop 520ms var(--ease) both;
}

.hero-kicker {
  color: var(--slide-muted);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 68px;
  text-transform: uppercase;
}

.hero-title {
  font-size: 5.25rem;
  font-weight: 900;
  line-height: 0.92;
  margin: 0;
}

.hero-title span {
  display: block;
}

.hero-copy {
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.45;
  margin: 62px 0 0;
  max-width: 560px;
}

.hero-link {
  border-bottom: 2px solid currentColor;
  color: var(--slide-link);
  font-size: 0.92rem;
  font-weight: 900;
  margin-top: 30px;
  padding-bottom: 4px;
  text-transform: uppercase;
}

.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;
}

.panel-art {
  height: 100%;
  inset: 0;
  position: absolute;
  transform: scale(1);
  transition: filter 420ms var(--ease), transform 820ms var(--ease);
  width: 100%;
}

/* 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, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0.30) 44%, rgb(0 0 0 / 0.05) 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, #1d4ed8); }
.work-panel--imgcolour .panel-shade {
  z-index: 2;
  background: radial-gradient(120% 90% at 0% 42%, rgb(0 0 0 / 0.5), 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: rgb(255 255 255 / 0.1);
}
.work-panel--glass .panel-shade {
  z-index: 2;
  background: radial-gradient(120% 90% at 0% 42%, rgb(0 0 0 / 0.5), transparent 56%);
}
.work-panel--glass .case-content { z-index: 3; }

.panel-shade {
  background: linear-gradient(90deg, rgb(0 0 0 / 0.76), rgb(0 0 0 / 0.28) 54%, rgb(0 0 0 / 0.12));
  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,rgba(2, 0, 36, 0.45) 0%, rgba(0, 0, 0, 0) 70%));
  mix-blend-mode: multiply;
  pointer-events: none;
}

.work-panel:hover .panel-art,
.work-panel:focus-visible .panel-art {
  filter: saturate(1.25) contrast(1.08);
  transform: scale(1.035);
}

.work-panel:hover .panel-line,
.work-panel:focus-visible .panel-line {
  transform: scaleX(1.6);
}

.panel-content {
  left: 7vw;
  max-width: 650px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: min(76vw, 650px);
}

.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: left center;
  transition: transform 340ms var(--ease);
  width: 74px;
}

.panel-title {
  font-size: 4.35rem;
  font-weight: 900;
  line-height: 0.98;
  margin: 0 0 30px;
  max-width: 600px;
}

.panel-copy {
  border-top: 1px solid currentColor;
  font-family: var(--font-body);
  font-size: 1.22rem;
  line-height: 1.55;
  margin: 0;
  max-width: 520px;
  padding-top: 28px;
}

.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;
}

.service-grid {
  border-top: 1px solid var(--slide-line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-grid a {
  border-bottom: 1px solid var(--slide-line);
  border-right: 1px solid var(--slide-line);
  font-size: 1.35rem;
  font-weight: 900;
  min-height: 128px;
  padding: 28px;
  transition: background 240ms var(--ease), color 240ms var(--ease);
}

.service-grid a:nth-child(3n) {
  border-right: 0;
}

.service-grid a:hover,
.service-grid a:focus-visible {
  background: var(--slide-fg);
  color: var(--slide-bg);
}

.footer-wordmark {
  display: block;
  filter: var(--wordmark-filter, none);
  height: auto;
  margin-bottom: 86px;
  max-width: 260px;
  width: 42vw;
}

.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(--hot) 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,
.studio-axis {
  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(--aqua);
}

.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 rgb(255 255 255 / 0.72);
  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: rgb(255 255 255 / 0.82);
  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-axis {
  align-items: center;
  color: rgb(255 255 255 / 0.42);
  display: flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 18px;
  left: 7vw;
  line-height: 1;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
}

.studio-axis span:not(:last-child)::after {
  border-top: 1px solid currentColor;
  content: "";
  display: inline-block;
  margin-left: 18px;
  transform: translateY(-0.22em);
  width: 58px;
}

.studio-signals {
  align-self: end;
  border-top: 1px solid rgb(255 255 255 / 0.24);
  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: rgb(255 255 255 / 0.7);
  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%, rgb(102 0 204 / 0.16) 60% 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.services-head,
.sense-grid,
.qc-strip {
  position: relative;
  z-index: 1;
}

.services-head {
  display: grid;
  gap: 24px 5vw;
  grid-template-columns: minmax(160px, 0.34fr) minmax(0, 1fr);
}

.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;
}

.services-intro {
  border-top: 1px solid var(--slide-line);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.35rem);
  grid-column: 2;
  line-height: 1.45;
  margin: 0;
  max-width: 640px;
  padding-top: 20px;
}

.sense-grid {
  border-top: 1px solid var(--slide-line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sense-card {
  border-bottom: 1px solid var(--slide-line);
  border-right: 1px solid var(--slide-line);
  min-height: 250px;
  padding: clamp(22px, 2.1vw, 34px);
  position: relative;
  transition: background 240ms var(--ease), color 240ms var(--ease), transform 240ms var(--ease);
}

.sense-card:last-child {
  border-right: 0;
}

.sense-card span {
  display: block;
  font-size: 0.82rem;
  font-weight: 900;
  margin-bottom: 46px;
}

.sense-card h3 {
  font-size: clamp(2rem, 3.8vw, 4.3rem);
  font-weight: 900;
  line-height: 0.92;
  margin: 0 0 24px;
}

.sense-card p {
  font-size: clamp(0.98rem, 1.1vw, 1.12rem);
  line-height: 1.42;
  margin: 0;
}

.sense-card strong {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 900;
  text-transform: uppercase;
}

.sense-card--think { --sense-accent: var(--ember); }
.sense-card--feel { --sense-accent: var(--hot); }
.sense-card--touch { --sense-accent: var(--aqua); }
.sense-card--see { --sense-accent: var(--blue); }

.sense-card::after {
  background: var(--sense-accent);
  bottom: 0;
  content: "";
  height: 8px;
  left: 0;
  position: absolute;
  transform: scaleX(0.36);
  transform-origin: left center;
  transition: transform 260ms var(--ease);
  width: 100%;
}

.sense-card:hover,
.sense-card:focus-within {
  background: var(--black);
  color: var(--white);
  transform: translateY(-6px);
}

.sense-card:hover::after,
.sense-card:focus-within::after {
  transform: scaleX(1);
}

.qc-strip {
  align-items: center;
  border: 1px solid var(--slide-line);
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(140px, 0.24fr) 1fr;
  padding: 18px 22px;
}

.qc-strip p {
  color: var(--hot);
  font-size: 0.9rem;
  font-weight: 900;
  margin: 0;
  text-transform: uppercase;
}

.qc-strip ol {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.qc-strip li {
  border-left: 1px solid rgb(0 0 0 / 0.2);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  padding-left: 10px;
  text-transform: uppercase;
}

.contact--full {
  display: grid;
  gap: 0;
  grid-template-rows: auto 1fr auto;
  position: absolute;
}

.contact--full::before {
  background:
    radial-gradient(circle at 76% 22%, var(--hot) 0 7px, transparent 8px),
    radial-gradient(circle at 84% 62%, var(--aqua) 0 5px, transparent 6px),
    linear-gradient(116deg, transparent 0 57%, rgb(102 0 204 / 0.78) 57% 57.6%, transparent 57.6% 100%);
  content: "";
  inset: 0;
  opacity: 0.9;
  pointer-events: none;
  position: absolute;
}

.contact--full > * {
  position: relative;
  z-index: 1;
}

.contact-grid {
  align-items: center;
  display: grid;
  gap: 6vw;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.62fr);
}

.contact--full .section-kicker {
  color: var(--aqua);
}

.contact--full h2 {
  font-size: clamp(4rem, 8.2vw, 9rem);
  line-height: 0.9;
  margin: 48px 0 0;
  max-width: 980px;
}

.contact-details {
  border-left: 1px solid rgb(255 255 255 / 0.24);
  display: grid;
  font-style: normal;
  gap: 10px;
  padding-left: 32px;
}

.contact-details span {
  color: rgb(255 255 255 / 0.48);
  font-size: 0.75rem;
  font-weight: 900;
  margin-top: 18px;
  text-transform: uppercase;
}

.contact-details span:first-child {
  margin-top: 0;
}

.contact-details a {
  color: var(--white);
  display: inline-block;
  font-size: clamp(1.4rem, 2.1vw, 2.2rem);
  line-height: 1;
  width: fit-content;
}

.contact-details p {
  color: rgb(255 255 255 / 0.78);
  font-size: 1.2rem;
  line-height: 1.38;
  margin: 0;
}

.acknowledgement {
  border-top: 1px solid rgb(255 255 255 / 0.2);
  color: rgb(255 255 255 / 0.62);
  font-size: 1rem;
  line-height: 1.5;
  margin: 42px 0 0;
  max-width: 760px;
  padding-top: 22px;
}

.text-light .footer-wordmark,
[data-text="light"] .footer-wordmark {
  --wordmark-filter: invert(1);
}

@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,
  .site-slide.is-entering-slide {
    animation: none;
  }
}

@media (min-width: 760px) {
  .hero-title {
    font-size: 9rem;
  }

  .menu-label {
    font-size: 2.35rem;
  }
}

@media (min-width: 1120px) {
  .hero-title {
    font-size: 13rem;
  }

  .menu-label {
    font-size: 2.55rem;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  .brand-toggle {
    top: 24px;
  }

  .studio--origin,
  .services--model,
  .contact--full {
    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);
  }

  .services-intro {
    padding-top: 14px;
  }

  .sense-card {
    min-height: 208px;
    padding: 24px 26px;
  }

  .sense-card span {
    margin-bottom: 28px;
  }

  .sense-card h3 {
    font-size: clamp(2.2rem, 3.35vw, 3.5rem);
    margin-bottom: 16px;
  }

  .sense-card p {
    font-size: 0.96rem;
    line-height: 1.32;
  }

  .qc-strip {
    padding: 13px 18px;
  }

  .contact--full h2 {
    font-size: clamp(4rem, 6.8vw, 7rem);
    margin-top: 34px;
  }

  .contact-details span {
    margin-top: 12px;
  }

  .acknowledgement {
    margin-top: 26px;
  }
}

@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 rgb(0 0 0 / 0.18);
    min-height: 0;
    padding: 18px 0;
    text-align: left;
  }

  .menu-link:last-child {
    border-bottom: 1px solid rgb(0 0 0 / 0.18);
  }

  .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;
  }

  .hero-kicker {
    margin-bottom: 54px;
    max-width: 300px;
  }

  .panel-content {
    left: 28px;
    width: calc(100vw - 56px);
  }

  .panel-eyebrow {
    margin-bottom: 64px;
  }

  .panel-title {
    font-size: 3.2rem;
  }

  .case-art {
    right: -18vw;
    top: 7vh;
    width: min(86vw, 560px);
  }

  .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;
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-grid a:nth-child(3n) {
    border-right: 1px solid var(--slide-line);
  }

  .service-grid a {
    font-size: 1.08rem;
    min-height: 104px;
    padding: 20px;
  }

  .service-grid a:nth-child(2n) {
    border-right: 0;
  }

  .studio--origin {
    align-content: center;
    display: grid;
    grid-template-columns: 1fr;
    padding: 104px 28px 44px;
  }

  .studio-axis {
    display: none;
  }

  .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 rgb(255 255 255 / 0.18);
    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-head {
    display: block;
  }

  .services--model h2 {
    font-size: clamp(3.1rem, 11vw, 5.8rem);
    margin: 30px 0 0;
  }

  .services-intro {
    margin-top: 20px;
    padding-top: 16px;
  }

  .sense-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sense-card {
    min-height: 174px;
    padding: 20px;
  }

  .sense-card:nth-child(2n) {
    border-right: 0;
  }

  .sense-card span {
    margin-bottom: 24px;
  }

  .sense-card h3 {
    font-size: clamp(2rem, 7vw, 3rem);
    margin-bottom: 14px;
  }

  .qc-strip {
    display: block;
    padding: 14px;
  }

  .qc-strip ol {
    gap: 10px 6px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 12px;
  }

  .contact--full {
    padding: 104px 28px 34px;
  }

  .contact-grid {
    display: block;
  }

  .contact--full h2 {
    font-size: clamp(3.3rem, 12vw, 5.6rem);
    margin-top: 34px;
  }

  .contact-details {
    border-left: 0;
    border-top: 1px solid rgb(255 255 255 / 0.24);
    margin-top: 34px;
    padding: 24px 0 0;
  }

  .acknowledgement {
    margin-top: 30px;
  }
}

@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-animation {
    height: 88px;
    width: 88px;
  }

  .brand-wordmark {
    width: 116px;
  }

  .hero-title {
    font-size: 4.25rem;
  }

  .hero-copy {
    font-size: 1.05rem;
    margin-top: 44px;
  }

  .panel-title {
    font-size: 2.75rem;
  }

  .panel-copy {
    font-size: 1.05rem;
  }

  .case-art {
    right: -30vw;
    top: 7vh;
    width: 92vw;
  }

  .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: rgb(0 0 0 / 0.62);
  }

  .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;
  }

  .service-grid a {
    font-size: 0.95rem;
    line-height: 1.08;
    min-height: 82px;
    padding: 16px 14px;
  }

  .footer-wordmark {
    margin-bottom: 58px;
    max-width: 210px;
    width: 62vw;
  }

  .studio--origin,
  .contact--full {
    padding: 86px 22px 28px;
  }

  .studio--origin h2,
  .contact--full 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;
  }

  .services-intro {
    font-size: 0.98rem;
    line-height: 1.28;
    margin-top: 14px;
    padding-top: 12px;
  }

  .sense-card {
    min-height: 126px;
    padding: 14px;
  }

  .sense-card span {
    font-size: 0.66rem;
    margin-bottom: 14px;
  }

  .sense-card h3 {
    font-size: 1.72rem;
    margin-bottom: 8px;
  }

  .sense-card p {
    font-size: 0.79rem;
    line-height: 1.22;
  }

  .sense-card strong {
    display: block;
    font-size: 0.62rem;
    margin-bottom: 3px;
  }

  .qc-strip {
    padding: 10px;
  }

  .qc-strip p,
  .qc-strip li {
    font-size: 0.6rem;
  }

  .qc-strip ol {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 8px;
  }

  .contact--full h2 {
    margin-top: 24px;
  }

  .contact-details {
    gap: 7px;
    margin-top: 24px;
    padding-top: 18px;
  }

  .contact-details span {
    font-size: 0.66rem;
    margin-top: 10px;
  }

  .contact-details a {
    font-size: 1.3rem;
  }

  .contact-details p,
  .acknowledgement {
    font-size: 0.95rem;
  }

  .acknowledgement {
    margin-top: 18px;
    padding-top: 14px;
  }
}

@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);
}

.case-detail .page-pill:hover,
.case-detail .page-pill:focus-visible {
  background: var(--white);
  color: var(--black);
}

.page-pill--dark {
  color: var(--black);
}

body.page-mode {
  background: var(--paper);
  color: var(--black);
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: 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;
}

.page-hero {
  align-items: end;
  background: var(--black);
  color: var(--white);
  display: grid;
  gap: clamp(34px, 5vw, 82px);
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.34fr);
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(128px, 15vw, 210px) 7vw 7vw;
  position: relative;
}

.page-hero::before {
  background: linear-gradient(116deg, transparent 0 54%, var(--hot) 54% 55.4%, transparent 55.4% 100%);
  content: "";
  inset: 0;
  opacity: 0.88;
  pointer-events: none;
  position: absolute;
}

.page-hero__copy,
.page-hero__aside,
.studio-locator {
  position: relative;
  z-index: 1;
}

.page-hero .section-kicker {
  color: var(--aqua);
  margin-bottom: clamp(28px, 4vw, 54px);
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 10vw, 12.5rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.86;
  margin: 0;
  max-width: 1120px;
}

.page-hero p:not(.section-kicker) {
  border-top: 1px solid currentColor;
  color: rgb(255 255 255 / 0.78);
  font-size: clamp(1.1rem, 1.7vw, 1.65rem);
  line-height: 1.42;
  margin: clamp(26px, 4vw, 44px) 0 0;
  max-width: 680px;
  padding-top: 26px;
}

.page-hero__aside {
  align-self: stretch;
  border-left: 1px solid rgb(255 255 255 / 0.24);
  display: grid;
  gap: 0;
}

.page-hero__aside span {
  align-items: center;
  border-bottom: 1px solid rgb(255 255 255 / 0.24);
  color: rgb(255 255 255 / 0.72);
  display: flex;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 4rem);
  font-weight: 900;
  line-height: 0.94;
  padding: 20px 0 20px 26px;
}

.page-hero__aside span:last-child {
  border-bottom: 0;
}

.page-hero--work {
  background:
    radial-gradient(circle at 83% 28%, var(--sun) 0 8px, transparent 9px),
    radial-gradient(circle at 14% 72%, var(--aqua) 0 6px, transparent 7px),
    var(--black);
}

.page-hero--studio {
  background:
    radial-gradient(circle at 78% 24%, var(--aqua) 0 8px, transparent 9px),
    linear-gradient(116deg, var(--black) 0 58%, var(--hot) 58% 100%);
}

.page-hero--studio::before {
  background:
    linear-gradient(90deg, transparent 0 48%, rgb(255 255 255 / 0.12) 48% 48.1%, transparent 48.1% 100%),
    radial-gradient(circle at 28% 84%, var(--sun) 0 5px, transparent 6px);
}

.studio-locator {
  align-self: stretch;
  border: 1px solid rgb(255 255 255 / 0.24);
  display: grid;
}

.studio-locator span {
  align-items: center;
  border-bottom: 1px solid rgb(255 255 255 / 0.24);
  display: flex;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.8vw, 4.8rem);
  font-weight: 900;
  justify-content: center;
  line-height: 0.9;
  min-height: 120px;
  text-align: center;
}

.studio-locator span:last-child {
  border-bottom: 0;
}

.page-hero--process {
  background: var(--black);
}

.page-hero--process img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 0.58;
  position: absolute;
  width: 100%;
}

.page-hero--process::before {
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.2)),
    linear-gradient(116deg, transparent 0 52%, rgb(102 0 204 / 0.78) 52% 53.4%, transparent 53.4% 100%);
  z-index: 1;
}

.page-hero--contact {
  background:
    radial-gradient(circle at 74% 24%, var(--aqua) 0 7px, transparent 8px),
    linear-gradient(116deg, var(--hot) 0 43%, var(--black) 43% 100%);
}

.work-index {
  background: var(--paper);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.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 rgb(0 0 0 / 0.22));
  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 rgb(0 0 0 / 0.32)) saturate(1.12);
  transform: translateY(-50%) rotate(0deg) scale(1);
}

.studio-manifesto {
  background: var(--paper);
  color: var(--black);
  display: grid;
  gap: 5vw;
  grid-template-columns: 1.05fr 0.95fr;
  padding: clamp(72px, 9vw, 132px) 7vw;
}

.studio-manifesto p {
  font-size: clamp(1.65rem, 3.2vw, 4rem);
  line-height: 1.08;
  margin: 0;
}

.studio-manifesto p + p {
  border-left: 1px solid rgb(0 0 0 / 0.22);
  font-size: clamp(1.15rem, 1.8vw, 2rem);
  line-height: 1.32;
  padding-left: 4vw;
}

.studio-tiles {
  background: var(--black);
  color: var(--white);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.studio-tiles article {
  border-right: 1px solid rgb(255 255 255 / 0.22);
  min-height: 420px;
  padding: clamp(26px, 3vw, 48px);
}

.studio-tiles article:last-child {
  border-right: 0;
}

.studio-tiles span,
.studio-tiles h2,
.process-river span,
.process-river h2,
.case-story span,
.case-next span,
.contact-board span {
  font-family: var(--font-display);
}

.studio-tiles span {
  color: var(--aqua);
  font-size: 0.82rem;
  font-weight: 900;
}

.studio-tiles h2 {
  font-size: clamp(2.2rem, 4vw, 4.8rem);
  font-weight: 900;
  line-height: 0.92;
  margin: 72px 0 24px;
}

.studio-tiles p {
  color: rgb(255 255 255 / 0.72);
  font-size: 1.18rem;
  line-height: 1.42;
  margin: 0;
}

.process-river {
  background: var(--paper);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.process-river article {
  border-bottom: 1px solid rgb(0 0 0 / 0.2);
  border-right: 1px solid rgb(0 0 0 / 0.2);
  min-height: 280px;
  padding: clamp(22px, 2.6vw, 42px);
  position: relative;
}

.process-river article:nth-child(4n) {
  border-right: 0;
}

.process-river article:nth-child(2) { background: rgb(102 0 204 / 0.12); }
.process-river article:nth-child(3) { background: rgb(18 200 181 / 0.14); }
.process-river article:nth-child(5) { background: rgb(246 204 53 / 0.2); }
.process-river article:nth-child(8) { background: var(--black); color: var(--white); }

.process-river span {
  color: var(--hot);
  font-size: 0.82rem;
  font-weight: 900;
}

.process-river article:nth-child(8) span {
  color: var(--aqua);
}

.process-river h2 {
  font-size: clamp(2rem, 3.8vw, 4.3rem);
  font-weight: 900;
  line-height: 0.9;
  margin: 64px 0 22px;
}

.process-river p {
  font-size: 1.08rem;
  line-height: 1.42;
  margin: 0;
  max-width: 300px;
}

.process-split {
  background: var(--hot);
  color: var(--white);
  display: grid;
  gap: 6vw;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  padding: clamp(72px, 9vw, 132px) 7vw;
}

.process-split h2,
.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;
}

.process-split p {
  border-left: 1px solid rgb(255 255 255 / 0.38);
  font-size: clamp(1.15rem, 1.8vw, 1.9rem);
  line-height: 1.38;
  margin: 0;
  padding-left: 34px;
}

.contact-board {
  background: var(--paper);
  color: var(--black);
  display: grid;
  gap: 7vw;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.44fr);
  padding: clamp(72px, 9vw, 132px) 7vw;
}

.contact-board address {
  display: grid;
  font-style: normal;
  gap: 12px;
}

.contact-board span {
  color: var(--hot);
  font-size: 0.78rem;
  font-weight: 900;
  margin-top: 28px;
  text-transform: uppercase;
}

.contact-board span:first-child {
  margin-top: 0;
}

.contact-board a {
  color: var(--black);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 6.8rem);
  font-weight: 900;
  line-height: 0.9;
  width: fit-content;
}

.contact-board p {
  font-size: clamp(1.08rem, 1.55vw, 1.55rem);
  line-height: 1.38;
  margin: 0;
  max-width: 480px;
}

.contact-board > p {
  align-self: end;
  border-top: 1px solid rgb(0 0 0 / 0.22);
  padding-top: 26px;
}

.page-cta {
  background:
    radial-gradient(circle at 82% 24%, var(--aqua) 0 7px, transparent 8px),
    var(--paper);
  color: var(--black);
  display: grid;
  gap: 34px;
  padding: clamp(72px, 10vw, 150px) 7vw;
}

.page-cta .section-kicker {
  color: var(--hot);
}

.page-cta h2 {
  max-width: 1080px;
}

.case-detail {
  --case-accent: var(--hot);
  --case-field: var(--paper);
  background: var(--paper);
  color: var(--black);
}

.case-detail-hero {
  background:
    linear-gradient(116deg, transparent 0 56%, color-mix(in srgb, var(--case-accent) 82%, transparent) 56% 100%),
    var(--black);
  color: var(--white);
  display: grid;
  gap: 5vw;
  grid-template-columns: minmax(0, 0.94fr) minmax(280px, 0.78fr);
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(124px, 14vw, 198px) 7vw 7vw;
}

.case-detail-hero__copy {
  align-self: end;
}

.case-detail .page-pill {
  color: var(--white);
  margin-bottom: clamp(36px, 5vw, 72px);
}

.case-detail-number {
  color: var(--aqua);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 900;
  margin: 0 0 24px;
}

.case-detail h1 {
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 8.8vw, 10.8rem);
  font-weight: 900;
  line-height: 0.86;
  margin: 0;
  max-width: 1120px;
}

.case-detail-hero__copy > p:last-child {
  border-top: 1px solid rgb(255 255 255 / 0.72);
  color: rgb(255 255 255 / 0.78);
  font-size: clamp(1.1rem, 1.55vw, 1.48rem);
  line-height: 1.42;
  margin: clamp(28px, 4vw, 48px) 0 0;
  max-width: 660px;
  padding-top: 24px;
}

.case-detail-art {
  align-self: center;
  aspect-ratio: 1;
  background: var(--case-field);
  display: grid;
  overflow: hidden;
  place-items: center;
  transform: rotate(2deg);
  width: min(100%, 620px);
}

.case-detail-art img {
  display: block;
  filter: drop-shadow(0 30px 42px rgb(0 0 0 / 0.24));
  height: 86%;
  max-width: 86%;
  object-fit: contain;
  width: 86%;
}

.case-facts {
  background: var(--case-accent);
  color: var(--white);
  display: grid;
  grid-template-columns: 0.7fr 0.7fr 1.4fr;
}

.case-facts div {
  border-right: 1px solid rgb(255 255 255 / 0.28);
  min-height: 170px;
  padding: clamp(24px, 3vw, 44px);
}

.case-facts div:last-child {
  border-right: 0;
}

.case-facts span {
  color: rgb(255 255 255 / 0.62);
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 900;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.case-facts strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 3.7rem);
  font-weight: 900;
  line-height: 0.95;
}

.case-story {
  display: grid;
}

.case-story article {
  border-bottom: 1px solid rgb(0 0 0 / 0.18);
  display: grid;
  gap: 6vw;
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
  padding: clamp(48px, 7vw, 96px) 7vw;
}

.case-story span {
  color: var(--case-accent);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.case-story p {
  font-size: clamp(1.5rem, 3vw, 3.8rem);
  line-height: 1.08;
  margin: 0;
  max-width: 980px;
}

.case-next {
  background: var(--black);
  color: var(--white);
  display: grid;
  gap: 24px;
  padding: clamp(64px, 8vw, 118px) 7vw;
}

.case-next span {
  color: var(--aqua);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.case-next a {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8vw, 10rem);
  font-weight: 900;
  line-height: 0.86;
  width: fit-content;
}

@media (min-width: 901px) and (max-height: 760px) {
  .page-hero--contact {
    padding-bottom: 44px;
    padding-top: 96px;
  }

  .page-hero--contact h1 {
    font-size: clamp(3.4rem, 7.2vw, 8.4rem);
  }

  .page-hero--contact p:not(.section-kicker) {
    margin-top: 22px;
    padding-top: 18px;
  }

  .case-detail-hero {
    padding-bottom: 42px;
    padding-top: 96px;
  }

  .case-detail .page-pill {
    margin-bottom: 30px;
  }

  .case-detail-number {
    margin-bottom: 14px;
  }

  .case-detail h1 {
    font-size: clamp(3.4rem, 7vw, 8.4rem);
  }

  .case-detail-hero__copy > p:last-child {
    margin-top: 22px;
    padding-top: 18px;
  }

  .case-detail-art {
    width: min(100%, 58vh);
  }
}

@media (max-width: 900px) {
  body.page-mode .site-header {
    mix-blend-mode: normal;
  }

  .page-hero,
  .case-detail-hero {
    grid-template-columns: 1fr;
    min-height: 94vh;
    min-height: 94svh;
    padding: 118px 28px 48px;
  }

  .page-hero h1,
  .case-detail h1 {
    font-size: clamp(3.4rem, 14vw, 6.5rem);
  }

  .page-hero__aside {
    border-left: 0;
    border-top: 1px solid rgb(255 255 255 / 0.24);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-hero__aside span {
    border-bottom: 1px solid rgb(255 255 255 / 0.24);
    font-size: 1.6rem;
    min-height: 72px;
    padding: 16px 0;
  }

  .studio-locator {
    grid-template-columns: 1fr;
  }

  .studio-locator span {
    font-size: 2rem;
    min-height: 82px;
  }

  .work-index {
    grid-template-columns: 1fr;
  }

  .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%;
  }

  .studio-manifesto,
  .studio-tiles,
  .process-river,
  .process-split,
  .contact-board,
  .case-facts,
  .case-story article {
    grid-template-columns: 1fr;
  }

  .studio-manifesto,
  .process-split,
  .contact-board,
  .page-cta {
    padding: 62px 28px;
  }

  .studio-manifesto p + p,
  .process-split p {
    border-left: 0;
    border-top: 1px solid currentColor;
    padding-left: 0;
    padding-top: 24px;
  }

  .studio-tiles article,
  .process-river article,
  .case-facts div {
    border-right: 0;
    min-height: 0;
    padding: 28px;
  }

  .studio-tiles article {
    border-bottom: 1px solid rgb(255 255 255 / 0.22);
  }

  .studio-tiles article:last-child {
    border-bottom: 0;
  }

  .studio-tiles h2,
  .process-river h2 {
    margin-top: 38px;
  }

  .case-detail-art {
    justify-self: center;
    max-width: 520px;
    width: 100%;
  }

  .case-facts div {
    border-bottom: 1px solid rgb(255 255 255 / 0.28);
  }

  .case-facts div:last-child {
    border-bottom: 0;
  }

  .case-story article {
    gap: 24px;
    padding: 48px 28px;
  }

  .case-story p {
    font-size: clamp(1.6rem, 7vw, 3rem);
  }
}

@media (max-width: 520px) {
  .page-hero,
  .case-detail-hero {
    padding: 102px 24px 38px;
  }

  .page-hero h1,
  .case-detail h1 {
    font-size: clamp(3rem, 16vw, 4.8rem);
  }

  .case-detail h1 {
    font-size: clamp(2.7rem, 14vw, 4.2rem);
  }

  .page-hero p:not(.section-kicker),
  .case-detail-hero__copy > p:last-child {
    font-size: 1.05rem;
  }

  .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);
  }

  .contact-board a {
    font-size: clamp(2rem, 11vw, 4rem);
  }

  .case-next {
    padding: 54px 24px;
  }
}

/* 2026 polish pass: sleeker agency system */
:root {
  --black: oklch(12.5% 0.012 286);
  --paper: oklch(96.5% 0.016 82);
  --white: oklch(98.8% 0.006 82);
  --muted: oklch(49% 0.014 286);
  --hot: #6600cc;
  --aqua: oklch(76% 0.15 188);
  --blue: oklch(54% 0.25 266);
  --sun: oklch(86% 0.18 86);
  --ember: oklch(62% 0.21 34);
  --ink-soft: oklch(18% 0.014 286);
  --paper-warm: oklch(92.5% 0.022 82);
  --hairline-dark: rgb(8 7 10 / 0.16);
  --hairline-light: rgb(250 248 242 / 0.22);
  --font-display: "Manrope", Arial, Helvetica, sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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(--aqua);
  outline-offset: 5px;
}

.brand-toggle {
  border-radius: 999px;
  height: 76px;
  top: 36px;
  width: 76px;
}

.brand-toggle::before {

}

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-animation {
  height: 106px;
  opacity: 0.36;
  width: 106px;
}

.q-logo-mark__disc {
  fill: var(--black);
  stroke: var(--black);
}

.q-logo-mark__symbol,
.q-logo-mark__dot {
  fill: var(--white);
}

.brand-wordmark {
  width: 128px;
}

main#top::before {
  border-color: var(--paper);
  inset: clamp(18px, 3.2vw, 46px);
}

.menu-shell {
  background: 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 rgb(8 7 10 / 0.15);
  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%, rgb(102 0 204 / 0.76) 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;
}

.hero-kicker {
  color: rgb(250 248 242 / 0.86);
  font-size: clamp(0.72rem, 1vw, 0.86rem);
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: clamp(38px, 7vh, 66px);
  max-width: min(560px, 80vw);
  text-shadow: 0 2px 20px rgb(8 7 10 / 0.24);
}

.hero-title {
  color: var(--white);
  font-size: clamp(5.5rem, 16vw, 15.2rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.76;
  text-shadow: 0 20px 80px rgb(8 7 10 / 0.18);
}

.hero-copy {
  color: var(--black);
  font-size: clamp(1.08rem, 1.55vw, 1.36rem);
  line-height: 1.45;
  margin-top: clamp(36px, 7vh, 58px);
  max-width: 520px;
  text-shadow: 0 1px 24px rgb(250 248 242 / 0.72);
}

.hero-link,
.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;
}

.hero-link {
  background: var(--black);
  border: 1px solid rgb(8 7 10 / 0.22);
  box-shadow: 0 16px 46px rgb(8 7 10 / 0.18);
  color: var(--white);
  padding-bottom: 0;
  text-shadow: none;
}

.hero-link:hover,
.hero-link:focus-visible {
  background: var(--white);
  color: var(--black);
}

.panel-eyebrow,
.section-kicker,
.work-index-card__number,
.work-index-card__meta,
.case-detail-number,
.case-facts span,
.case-story span,
.case-next span,
.contact-board span,
.studio-tiles span,
.process-river span {
  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,
.panel-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,
.panel-copy {
  color: rgb(250 248 242 / 0.84);
  font-size: clamp(1.05rem, 1.35vw, 1.36rem);
  line-height: 1.42;
  max-width: 480px;
  padding-top: 24px;
}

.case-open {
  background: rgb(250 248 242 / 0.08);
  color: var(--white);
}

.case-open:hover,
.case-open:focus-visible {
  background: var(--white);
  color: var(--black);
}

.panel-shade {
  background:
    linear-gradient(90deg, rgb(8 7 10 / 0.84), rgb(8 7 10 / 0.32) 56%, rgb(8 7 10 / 0.06)),
    linear-gradient(180deg, rgb(8 7 10 / 0.08), rgb(8 7 10 / 0.28));
}

.studio--origin::before,
.contact--full::before {
  opacity: 0.62;
}

.services--model::before {
  opacity: 0.75;
}

.studio--origin h2,
.services--model h2,
.contact--full h2 {
  font-size: clamp(3.8rem, 7.4vw, 8.6rem);
  line-height: 0.82;
}

.studio-copy,
.services-intro,
.acknowledgement {
  border-color: color-mix(in srgb, currentColor 28%, transparent);
}

.sense-grid {
  border-color: var(--hairline-dark);
  gap: 1px;
}

.sense-card {
  background: color-mix(in srgb, var(--paper) 92%, var(--sense-accent) 8%);
  border: 0;
  min-height: 236px;
  overflow: hidden;
}

.sense-card::after {
  height: 4px;
  transform: scaleX(0.12);
}

.sense-card:hover,
.sense-card:focus-within {
  background: var(--black);
  transform: translateY(-4px);
}

.qc-strip {
  background: rgb(250 248 242 / 0.72);
  border-color: var(--hairline-dark);
}

body.page-mode .site-header {
  mix-blend-mode: normal;
}

body.page-mode .q-logo-mark__disc {
  fill: var(--black);
}

body.page-mode .q-logo-mark__symbol,
body.page-mode .q-logo-mark__dot {
  fill: var(--white);
}

.page-hero {
  align-items: center;
  background: var(--black);
  gap: clamp(32px, 5vw, 86px);
  grid-template-columns: minmax(0, 0.88fr) minmax(230px, 0.32fr);
  min-height: 92vh;
  min-height: 92dvh;
  padding: clamp(132px, 13vw, 190px) 7vw clamp(60px, 7vw, 92px);
}

.page-hero::before {
  background:
    linear-gradient(90deg, rgb(250 248 242 / 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgb(250 248 242 / 0.045) 1px, transparent 1px),
    linear-gradient(116deg, transparent 0 56%, rgb(102 0 204 / 0.88) 56% 56.7%, transparent 56.7% 100%);
  background-size: 96px 96px, 96px 96px, auto;
  opacity: 1;
}

.page-hero h1 {
  font-size: clamp(4rem, 8.7vw, 10rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.82;
  max-width: 1040px;
}

.page-hero p:not(.section-kicker) {
  color: rgb(250 248 242 / 0.78);
  font-size: clamp(1.08rem, 1.45vw, 1.45rem);
  line-height: 1.44;
  max-width: 640px;
}

.page-hero__aside {
  align-self: center;
  background: rgb(250 248 242 / 0.035);
  border: 1px solid var(--hairline-light);
  box-shadow: 0 32px 90px rgb(8 7 10 / 0.26);
  min-height: min(540px, 58vh);
}

.page-hero__aside span {
  border-bottom-color: var(--hairline-light);
  color: rgb(250 248 242 / 0.72);
  font-size: clamp(1.6rem, 2.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: 0;
  padding-left: 28px;
}

.page-hero--work,
.page-hero--studio,
.page-hero--process,
.page-hero--contact {
  background: var(--black);
}

.page-hero--studio {
  background:
    linear-gradient(116deg, var(--black) 0 61%, color-mix(in srgb, var(--hot) 82%, var(--black)) 61% 100%);
}

.page-hero--contact {
  background:
    linear-gradient(116deg, color-mix(in srgb, var(--hot) 90%, var(--black)) 0 41%, var(--black) 41% 100%);
}

.studio-locator {
  background: rgb(250 248 242 / 0.035);
  box-shadow: 0 32px 90px rgb(8 7 10 / 0.24);
}

.studio-locator span {
  color: rgb(250 248 242 / 0.78);
  font-size: clamp(1.7rem, 2.9vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0;
}

.work-index {
  background: var(--black);
  display: block;
}

.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);
}

.studio-manifesto {
  background:
    linear-gradient(90deg, rgb(8 7 10 / 0.06) 1px, transparent 1px),
    var(--paper);
  background-size: 96px 100%;
}

.studio-manifesto p {
  font-size: clamp(1.65rem, 2.85vw, 3.3rem);
  line-height: 1.12;
}

.studio-tiles article {
  min-height: 360px;
}

.studio-tiles h2 {
  font-size: clamp(2.2rem, 3.4vw, 4rem);
  font-weight: 800;
  letter-spacing: 0;
}

.process-river {
  background: var(--paper);
}

.process-river article {
  min-height: 248px;
}

.process-river h2 {
  font-size: clamp(2rem, 3.2vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0;
}

.process-split,
.page-cta {
  background:
    linear-gradient(116deg, transparent 0 57%, rgb(8 7 10 / 0.08) 57% 100%),
    var(--paper);
  color: var(--black);
}

.process-split {
  background: var(--hot);
  color: var(--white);
}

.process-split h2,
.page-cta h2 {
  font-size: clamp(3rem, 6.2vw, 7.2rem);
  font-weight: 800;
  letter-spacing: 0;
}

.contact-board {
  background:
    linear-gradient(90deg, rgb(8 7 10 / 0.06) 1px, transparent 1px),
    var(--paper);
  background-size: 96px 100%;
}

.contact-board a {
  font-size: clamp(2.4rem, 4.8vw, 6rem);
  font-weight: 800;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.contact-board address,
.contact-board > p {
  min-width: 0;
}

.case-detail-hero {
  background:
    linear-gradient(116deg, transparent 0 58%, color-mix(in srgb, var(--case-accent) 70%, var(--black)) 58% 100%),
    var(--black);
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.64fr);
  min-height: 92vh;
  min-height: 92dvh;
}

.case-detail h1 {
  font-size: clamp(3.8rem, 7.8vw, 9rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.82;
}

.case-detail-art {
  background:
    linear-gradient(135deg, rgb(250 248 242 / 0.9), rgb(250 248 242 / 0.72)),
    var(--case-field);
  border: 1px solid rgb(250 248 242 / 0.28);
  box-shadow: 0 44px 120px rgb(8 7 10 / 0.36);
  transform: rotate(1.4deg);
}

.case-facts {
  background: color-mix(in srgb, var(--case-accent) 92%, var(--black));
}

.case-story article {
  border-bottom-color: var(--hairline-dark);
}

.case-story p {
  font-size: clamp(1.45rem, 2.65vw, 3.1rem);
  line-height: 1.14;
}

.case-next {
  background: var(--black);
}

@keyframes pageRise {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

body.page-mode .page-hero__copy,
body.page-mode .page-hero__aside,
body.page-mode .studio-locator,
body.page-mode .case-detail-hero__copy,
body.page-mode .case-detail-art {
  animation: pageRise 680ms var(--ease) both;
}

body.page-mode .page-hero__aside,
body.page-mode .studio-locator,
body.page-mode .case-detail-art {
  animation-delay: 100ms;
}

@media (min-width: 901px) and (max-height: 760px) {
  .page-hero {
    min-height: 100vh;
    padding-bottom: 42px;
    padding-top: 96px;
  }

  .page-hero h1 {
    font-size: clamp(3.4rem, 7.2vw, 8.2rem);
  }

  .page-hero__aside {
    min-height: 420px;
  }

  .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: white;
    padding: 106px 28px 0;
  }

  .menu-label {
    font-size: clamp(2.85rem, 12vw, 4.2rem);
  }

  .menu-preview {
    min-height: 220px;
  }

  .hero-title {
    font-size: clamp(4.8rem, 21vw, 8rem);
    line-height: 0.82;
  }

  .case-content {
    left: 28px;
    max-width: calc(100vw - 56px);
    top: auto;
    bottom: 54px;
  }

  .case-title {
    font-size: clamp(3.2rem, 15vw, 5.6rem);
  }

  .case-art {
    opacity: 0.88;
    right: -28vw;
    top: 6vh;
    width: 86vw;
  }

  .page-hero,
  .case-detail-hero {
    gap: 28px;
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 116px 24px 42px;
  }

  .page-hero h1,
  .case-detail h1 {
    font-size: clamp(3rem, 14.8vw, 5.7rem);
    line-height: 0.86;
  }

  .page-hero__aside,
  .studio-locator {
    align-self: auto;
    width: 100%;
    box-shadow: none;
    min-height: 0;
  }

  .page-hero__copy,
  .case-detail-hero__copy {
    width: 100%;
  }

  .page-hero__aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-hero__aside span,
  .studio-locator span {
    font-size: 1.45rem;
  }

  .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;
  }

  .studio-manifesto,
  .contact-board {
    background-size: 64px 100%;
  }

  .case-detail-art {
    margin-top: 8px;
    max-width: min(100%, 430px);
    transform: rotate(0deg);
  }
}

@media (max-width: 520px) {
  .q-logo-mark {
    height: 34px;
    width: 34px;
  }

  .brand-animation {
    height: 88px;
    width: 88px;
  }

  .hero-copy {
    max-width: 310px;
  }

  .case-content {
    bottom: 38px;
  }

  .case-copy {
    font-size: 0.98rem;
  }

  .page-hero p:not(.section-kicker),
  .case-detail-hero__copy > p:last-child {
    font-size: 1.03rem;
    line-height: 1.45;
  }

  .case-detail h1 {
    font-size: clamp(2.8rem, 13vw, 4.4rem);
  }
}

/* Senior agency system: editorial structure, sharper hierarchy */
:root {
  --black: oklch(11.5% 0.014 288);
  --ink: oklch(15% 0.014 288);
  --paper: oklch(0.9612 0 0);
  --paper-deep: oklch(91.5% 0.026 80);
  --white: oklch(98.4% 0.01 82);
  --muted: oklch(52% 0.018 286);
  --hot: oklch(0.449422 0.247797 294.3103);
  --aqua: oklch(78% 0.168 184);
  --blue: oklch(53% 0.238 265);
  --sun: oklch(86% 0.158 88);
  --ember: oklch(64% 0.205 34);
  --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);
}

body {
  font-family: var(--font-body);
  text-rendering: geometricPrecision;
}

.menu-label,
.menu-preview__giant,
.hero-title,
.hero-kicker,
.hero-link,
.case-title,
.panel-eyebrow,
.section-kicker,
.studio h2,
.services h2,
.sense-card h3,
.qc-strip,
.contact h2,
.page-hero h1,
.page-hero__aside,
.studio-locator,
.work-index-card,
.proof-band,
.agency-split h2,
.studio-tiles h2,
.capability-index h2,
.process-river h2,
.process-split h2,
.contact-board a,
.contact-board span,
.contact-fit span,
.case-detail h1,
.case-detail-type,
.case-facts,
.case-proof,
.case-story span,
.case-next,
.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;
}

body.page-mode .q-logo-mark__disc {
  fill: var(--white);
  stroke: var(--white);
}

body.page-mode .q-logo-mark__symbol,
body.page-mode .q-logo-mark__dot {
  fill: var(--black);
}

body.page-mode .brand-animation {
  display: none;
  opacity: 0;
  visibility: hidden;
}

.brand-wordmark {
  width: 148px;
}

.menu-shell {
  background: 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(5, minmax(0, 1fr));
  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;
}

.hero-kicker {
  color: var(--white);
  font-size: clamp(0.8rem, 1vw, 0.96rem);
  margin-bottom: clamp(34px, 5vh, 58px);
}

.hero-title {
  font-size: clamp(6rem, 16.4vw, 16rem);
  font-weight: 900;
  line-height: 0.72;
}

.hero-copy {
  color: var(--black);
  font-size: clamp(1.12rem, 1.7vw, 1.55rem);
  line-height: 1.38;
  margin-top: clamp(34px, 6vh, 58px);
  max-width: 610px;
}

.hero-link,
.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);
}

.hero-link::after,
.case-open::after,
.page-pill::after {
  content: ">";
  font-size: 1.1em;
  line-height: 1;
}

.hero-link {
  background: var(--black);
  color: var(--white);
}

.hero-link:hover,
.hero-link:focus-visible,
.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,
.panel-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,
.contact--full h2 {
  font-size: clamp(4.5rem, 8.8vw, 10.6rem);
  line-height: 0.78;
}

.studio-copy,
.services-intro,
.acknowledgement {
  font-size: clamp(1.08rem, 1.55vw, 1.42rem);
}

.sense-grid {
  border: .5px solid var(--rule-dark);
}

.sense-card {
  border-radius: 0;
  min-height: 270px;
  padding: clamp(22px, 3vw, 42px);
}

.sense-card h3 {
  font-size: clamp(2.4rem, 5vw, 5.8rem);
  font-weight: 900;
  line-height: 0.82;
}

.sense-card:hover,
.sense-card:focus-within {
  background: var(--black);
  color: var(--white);
}

.qc-strip {
  border-radius: 0;
}

.contact--full {
  padding-bottom: 56px;
}

.contact-details a {
  overflow-wrap: anywhere;
}

.footer-wordmark {
  filter: invert(1);
}

.page-hero {
  align-items: end;
  background: var(--black);
  border-bottom: 1px solid var(--rule-light);
  gap: clamp(36px, 6vw, 106px);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.34fr);
  min-height: 96vh;
  min-height: 96dvh;
  padding: clamp(138px, 13vw, 210px) clamp(24px, 7vw, 106px) clamp(58px, 7vw, 104px);
}

.page-hero::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--white) 7%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--white) 5%, transparent) 1px, transparent 1px),
    linear-gradient(112deg, transparent 0 62%, color-mix(in srgb, var(--hot) 88%, var(--black)) 62% 62.8%, transparent 62.8% 100%);
  background-size: 8.333vw 100%, 100% 92px, auto;
  opacity: 1;
}

.page-hero__copy,
.case-detail-hero__copy {
  max-width: 1120px;
  position: relative;
  z-index: 1;
}

.page-hero h1,
.case-detail h1 {
  font-size: clamp(4.3rem, 8vw, 10rem);
  font-weight: 900;
  line-height: 0.82;
  margin-bottom: clamp(26px, 4vw, 56px);
}

.page-hero p:not(.section-kicker),
.case-detail-hero__copy > p:last-child {
  color: color-mix(in srgb, var(--white) 72%, transparent);
  font-size: clamp(1.12rem, 1.55vw, 1.56rem);
  line-height: 1.48;
  max-width: 700px;
}

.section-kicker,
.panel-eyebrow,
.work-index-card__number,
.work-index-card__meta,
.case-detail-number,
.case-detail-type,
.case-facts span,
.case-story span,
.case-next span,
.proof-band span,
.capability-index span,
.process-river span,
.contact-board span,
.contact-fit span,
.agency-footer small {
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.page-hero__aside,
.studio-locator {
  background: color-mix(in srgb, var(--white) 4%, transparent);
  border: 1px solid var(--rule-light);
  box-shadow: none;
}

.page-hero__aside span,
.studio-locator span {
  border-bottom: 1px solid var(--rule-light);
  color: var(--white);
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  line-height: 0.96;
}

.page-hero--studio {
  background:
    linear-gradient(112deg, var(--black) 0 58%, color-mix(in srgb, var(--ember) 78%, var(--black)) 58% 100%);
}

.page-hero--contact {
  background:
    linear-gradient(112deg, color-mix(in srgb, var(--hot) 88%, var(--black)) 0 39%, var(--black) 39% 100%);
}

.page-hero--process img {
  filter: saturate(1.05) contrast(1.05);
}

.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 {
  background: var(--black);
}

.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);
}

.studio-manifesto {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--black) 8%, transparent) 1px, transparent 1px),
    var(--paper);
  background-size: 8.333vw 100%;
  color: var(--black);
  gap: clamp(28px, 5vw, 82px);
}

.studio-manifesto p {
  font-size: clamp(1.8rem, 3.4vw, 4.2rem);
  line-height: 1.08;
}

.agency-split,
.process-split {
  display: grid;
  gap: clamp(30px, 6vw, 110px);
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.55fr);
  padding: clamp(72px, 10vw, 150px) clamp(24px, 7vw, 106px);
}

.agency-split {
  background: var(--black);
  color: var(--white);
}

.agency-split h2,
.process-split h2 {
  font-size: clamp(3rem, 6.8vw, 8.8rem);
  font-weight: 900;
  line-height: 0.82;
  margin: 0;
}

.agency-split p,
.process-split p {
  align-self: end;
  border-top: 1px solid currentColor;
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.65vw, 1.56rem);
  line-height: 1.48;
  margin: 0;
  padding-top: 24px;
}

.studio-tiles,
.capability-index,
.process-river {
  background: var(--paper);
  color: var(--black);
}

.studio-tiles article,
.capability-index article,
.process-river article,
.process-river__intro {
  border-bottom: .5px solid var(--rule-dark);
  border-right: .5px solid var(--rule-dark);
  min-height: 340px;
  padding: clamp(24px, 4.4vw, 62px);
}

.studio-tiles h2,
.capability-index h2,
.process-river h2 {
  font-size: clamp(2.2rem, 4.6vw, 5.8rem);
  font-weight: 900;
  line-height: 0.86;
  margin: clamp(52px, 8vw, 110px) 0 20px;
}

.studio-tiles p,
.capability-index p,
.process-river p {
  font-family: var(--font-body);
  font-size: clamp(1.03rem, 1.28vw, 1.26rem);
  line-height: 1.5;
  max-width: 38ch;
}

.capability-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.capability-index h2,
.process-river h2,
.studio-tiles h2 {
  overflow-wrap: break-word;
}

.process-split {
  background: var(--hot);
  color: var(--white);
}

.process-split--quiet {
  background: var(--paper);
  color: var(--black);
}

.process-river {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.process-river__intro {
  background: var(--black);
  color: var(--white);
  grid-column: span 1;
}

.process-river__intro h2 {
  color: var(--white);
}

.contact-board {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--black) 8%, transparent) 1px, transparent 1px),
    var(--paper);
  background-size: 8.333vw 100%;
  color: var(--black);
  display: grid;
  gap: clamp(40px, 8vw, 128px);
  grid-template-columns: minmax(0, 0.88fr) minmax(280px, 0.46fr);
  padding: clamp(72px, 10vw, 150px) clamp(24px, 7vw, 106px);
}

.contact-board address,
.contact-fit {
  min-width: 0;
}

.contact-board address {
  gap: 14px;
}

.contact-board a {
  color: var(--black);
  font-size: clamp(2.4rem, 5vw, 6.7rem);
  font-weight: 900;
  line-height: 0.86;
  overflow-wrap: anywhere;
  width: fit-content;
}

.contact-board p,
.contact-fit p {
  font-family: var(--font-body);
  font-size: clamp(1.08rem, 1.5vw, 1.42rem);
  line-height: 1.5;
  margin: 0;
}

.contact-fit {
  align-self: end;
  border-top: .5px solid var(--rule-dark);
  display: grid;
  gap: 16px;
  padding-top: 28px;
}

.contact-fit span:not(:first-child) {
  margin-top: 24px;
}

.case-detail-hero {
  align-items: center;
  background:
    linear-gradient(112deg, transparent 0 56%, color-mix(in srgb, var(--case-accent) 78%, var(--black)) 56% 100%),
    var(--black);
  border-bottom: 1px solid var(--rule-light);
  gap: clamp(34px, 5vw, 92px);
  grid-template-columns: minmax(0, 0.92fr) minmax(300px, 0.56fr);
  min-height: 96vh;
  min-height: 96dvh;
  padding: clamp(132px, 12vw, 190px) clamp(24px, 7vw, 106px) clamp(46px, 6vw, 88px);
}

.case-detail-type {
  border: 1px solid var(--rule-light);
  color: color-mix(in srgb, var(--white) 78%, transparent);
  display: inline-flex;
  margin-top: 26px;
  padding: 12px 14px;
}

.case-detail h1 {
  max-width: 11ch;
}

.case-detail-art {
  background: color-mix(in srgb, var(--paper) 88%, var(--case-field));
  border: 1px solid var(--rule-light);
  box-shadow: none;
  padding: clamp(18px, 3vw, 30px);
  transform: rotate(0deg);
}

.case-facts {
  background: var(--hot);
  color: var(--white);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.case-facts div {
  border-right: 1px solid var(--rule-light);
  min-height: 150px;
  padding: clamp(24px, 3.5vw, 44px);
}

.case-facts strong {
  display: block;
  font-size: clamp(1.1rem, 1.55vw, 1.5rem);
  line-height: 1.16;
  margin-top: 28px;
}

.case-proof {
  background: var(--paper);
  color: var(--black);
  display: grid;
  gap: clamp(28px, 7vw, 120px);
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.6fr);
  padding: clamp(72px, 10vw, 150px) clamp(24px, 7vw, 106px);
}

.case-proof h2 {
  font-size: clamp(3.4rem, 7vw, 9rem);
  font-weight: 900;
  line-height: 0.82;
  margin: 0;
}

.case-proof ul {
  align-self: end;
  border-top: .5px solid var(--rule-dark);
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-proof li {
  border-bottom: .5px solid var(--rule-dark);
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: 900;
  line-height: 1.05;
  padding: 22px 0;
}

.case-story {
  background: var(--paper);
  color: var(--black);
}

.case-story article {
  display: grid;
  gap: clamp(28px, 6vw, 110px);
  grid-template-columns: minmax(160px, 0.26fr) minmax(0, 1fr);
  padding: clamp(56px, 8vw, 112px) clamp(24px, 7vw, 106px);
}

.case-story p {
  font-family: var(--font-body);
  font-size: clamp(1.75rem, 3.2vw, 4rem);
  line-height: 1.12;
  margin: 0;
  max-width: 900px;
}

.case-next {
  background: var(--black);
  border-top: 1px solid var(--rule-light);
  color: var(--white);
  display: grid;
  gap: 22px;
  padding: clamp(60px, 9vw, 120px) clamp(24px, 7vw, 106px);
}

.case-next a {
  font-size: clamp(3.4rem, 8vw, 10rem);
  font-weight: 900;
  line-height: 0.8;
}

.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__brand img {
  display: block;
  max-width: min(150px, 68vw);
  width: 100%;
}

.agency-footer__brand p,
.agency-footer__contact p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.5;
  margin: 28px 0 0;
  max-width: 44ch;
}

.agency-footer__nav,
.agency-footer__contact {
  display: grid;
  gap: 14px;
  align-content: start;
}

.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,
  .capability-index,
  .process-river,
  .case-facts,
  .agency-footer {
    grid-template-columns: 1fr;
  }

  .proof-band div,
  .studio-tiles article,
  .capability-index article,
  .process-river article,
  .process-river__intro,
  .case-facts div {
    border-right: 0;
  }
}

@media (max-width: 900px) {
  body.page-mode .brand-toggle {
    top: 18px;
  }

  .hero-title {
    font-size: clamp(5rem, 22vw, 8rem);
  }

  .hero-copy {
    font-size: 1.05rem;
    max-width: 310px;
  }

  .case-content {
    bottom: 46px;
    left: 24px;
    max-width: calc(100vw - 48px);
    top: auto;
  }

  .case-title {
    font-size: clamp(3.25rem, 15vw, 5.9rem);
  }

  .page-hero,
  .case-detail-hero,
  .agency-split,
  .process-split,
  .case-proof,
  .case-story article,
  .contact-board {
    grid-template-columns: 1fr;
  }

  .page-hero,
  .case-detail-hero {
    align-items: start;
    min-height: auto;
    padding: 112px 24px 42px;
  }

  .page-hero::before {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--white) 7%, transparent) 1px, transparent 1px),
      linear-gradient(180deg, color-mix(in srgb, var(--white) 5%, transparent) 1px, transparent 1px),
      linear-gradient(112deg, transparent 0 74%, color-mix(in srgb, var(--hot) 88%, var(--black)) 74% 75%, transparent 75% 100%);
    background-size: 96px 100%, 100% 92px, auto;
  }

  .page-hero--contact {
    background:
      linear-gradient(112deg, var(--black) 0 68%, color-mix(in srgb, var(--hot) 88%, var(--black)) 68% 100%);
  }

  .page-hero h1,
  .case-detail h1 {
    font-size: clamp(3.1rem, 14vw, 5.9rem);
    line-height: 0.84;
  }

  .page-hero__aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .page-hero__aside span,
  .studio-locator span {
    font-size: 1.28rem;
    min-height: 86px;
    padding: 18px;
  }

  .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);
  }

  .studio-manifesto,
  .agency-split,
  .studio-tiles article,
  .capability-index article,
  .process-river article,
  .process-river__intro,
  .process-split,
  .case-proof,
  .case-story article,
  .case-next,
  .contact-board,
  .agency-footer {
    padding-left: 24px;
    padding-right: 24px;
  }

  .studio-manifesto {
    grid-template-columns: 1fr;
  }

  .studio-manifesto p,
  .case-story p {
    font-size: clamp(1.55rem, 7vw, 2.8rem);
  }

  .agency-split h2,
  .process-split h2,
  .case-proof h2 {
    font-size: clamp(2.8rem, 12vw, 5.3rem);
  }

  .studio-tiles h2,
  .capability-index h2,
  .process-river h2 {
    font-size: clamp(2.2rem, 10vw, 4.4rem);
    margin-top: 46px;
  }

  .case-detail-art {
    justify-self: start;
    max-width: min(100%, 430px);
  }

  .case-next a {
    font-size: clamp(3rem, 15vw, 6rem);
  }

  .contact-board a {
    font-size: clamp(2rem, 9vw, 3.45rem);
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  .page-hero,
  .case-detail-hero {
    min-height: 100vh;
    padding-bottom: 42px;
    padding-top: 106px;
  }

  .page-hero h1,
  .case-detail h1 {
    font-size: clamp(3.7rem, 7.1vw, 8.4rem);
    line-height: 0.82;
  }

  .page-hero__aside,
  .studio-locator {
    min-height: min(430px, 58vh);
  }
}

@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;
  }

  .contact-board a {
    font-size: clamp(1.75rem, 7.7vw, 2.9rem);
  }

  .hero-kicker {
    max-width: 300px;
  }

  .case-open,
  .hero-link,
  .page-pill {
    min-height: 46px;
    width: fit-content;
  }

  .page-hero h1,
  .case-detail h1 {
    font-size: clamp(2.9rem, 13.6vw, 4.45rem);
  }

  .page-hero__aside {
    grid-template-columns: 1fr;
  }

  .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;
  }

  .contact-board,
  .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);
  --surface-2: var(--paper-deep);
  --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);
  --surface-2: oklch(19% 0.014 286);
  --ink: var(--white);
  --rule: var(--rule-light);
  background: var(--black);
  color: var(--white);
}

/* Floating mark: dark on the light pages, flips to light over dark sections */
body.page-light .q-logo-mark__disc {
  fill: var(--black);
  stroke: var(--black);
}

body.page-light .q-logo-mark__symbol,
body.page-light .q-logo-mark__dot {
  fill: var(--paper);
}

/* 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);
}

.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(--aqua);
}

.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;
}

.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 -------------------------------------------- */
.work-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  padding: 250px;
}

.work-card {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  border-radius: clamp(18px, 1.7vw, 30px);
  background: color-mix(in srgb, var(--case-accent) 24%, var(--black));
  color: var(--white);
  text-decoration: none;
  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: 7 / 3;
}

.work-card__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 760ms var(--ease);
}

/* Legibility scrim, weighted to the top-left where the copy sits — keeps white
   text readable on light placeholder art and dark client art alike. */
.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.work-card:hover,
.work-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 34px 72px -32px rgb(8 7 10 / 0.6);
}

.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 <h2>, 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 <h2> semantics. */
  font-family: var(--font-eyebrow) !important;
  font-weight: 700 !important;
  font-size: clamp(1.7rem, 2.35vw, 2.8rem);
  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-body);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  line-height: 1.18;
  color: color-mix(in srgb, var(--white) 90%, transparent);
}

.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__inner {
  max-width: min(100%, 640px);
}

.work-card--wide .work-card__client {
  font-size: clamp(2rem, 3vw, 3.4rem);
}

/* ---- Dark CTA + footer --------------------------------------------------- */
.page-cta--dark {
  background:
    radial-gradient(circle at 82% 28%, color-mix(in srgb, var(--hot) 64%, transparent) 0, transparent 40%),
    var(--surface);
  color: var(--ink);
  border-top: 1px solid var(--rule);
}

.page-cta--dark .section-kicker {
  color: var(--aqua);
}

.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__brand img {
  filter: none;
}

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);
  }

  .work-card--wide {
    grid-column: auto;
    aspect-ratio: 16 / 11;
  }

  .work-card--tall {
    aspect-ratio: 5 / 6;
  }

  .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)
   ========================================================================== */

/* Axis band (Lake Mac — New York — Beyond) */
.axis-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(20px, 2.6vw, 34px) clamp(24px, 7vw, 106px);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 1.4vw, 1.12rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}

.axis-band__line {
  flex: 1;
  max-width: 130px;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 24%, transparent);
}

/* 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(--aqua));
  transform: scaleX(0.16);
  transform-origin: left center;
  transition: transform 360ms var(--ease);
}

.stat:hover {
  background: color-mix(in srgb, var(--accent, var(--aqua)) 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(--aqua));
}

.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(--surface);
}

.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-display);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--aqua);
}

.signal-row strong {
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 2.1rem);
  font-weight: 900;
  line-height: 1.04;
  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;
  }

  .axis-band {
    font-size: 0.72rem;
    gap: 10px;
  }
}

/* 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);
}

.sense-grid { border-bottom: 0; }
.sense-grid .stat { min-height: clamp(250px, 23vw, 350px); }
.sense-grid .stat__num { font-size: clamp(1.9rem, 2.9vw, 3.4rem); }

.sense-grid .stat__title {
  font-size: clamp(1.25rem, 1.6vw, 1.8rem);
  color: color-mix(in srgb, var(--ink) 88%, 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(--aqua);
}

.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 {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  gap: clamp(20px, 2.8vw, 38px);
  min-height: 90vh;
  min-height: 90svh;
  padding: clamp(150px, 20vh, 230px) clamp(24px, 7vw, 106px) clamp(56px, 8vw, 104px);
  border-bottom: 1px solid var(--rule);
}

.contact-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(112deg, transparent 0 58%, color-mix(in srgb, var(--hot) 82%, var(--surface)) 58% 58.7%, transparent 58.7% 100%);
  background-size: 8.333vw 100%, 100% 92px, auto;
}

.contact-stage > * { position: relative; z-index: 1; }
.contact-stage .section-kicker { color: var(--aqua); }

.contact-stage h1 {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.6vw, 6.2rem);
  font-weight: 900;
  line-height: 0.84;
  letter-spacing: 0;
}

.contact-stage__copy {
  margin: 0;
  max-width: 600px;
  font-family: var(--font-body);
  font-size: clamp(1.08rem, 1.55vw, 1.55rem);
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

.contact-stage__email {
  width: fit-content;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.4vw, 6rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  transition: color 220ms var(--ease);
}

.contact-stage__email:hover,
.contact-stage__email:focus-visible { color: var(--aqua); }

.contact-stage__rows {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 4vw, 60px);
  margin-top: 6px;
}

.contact-stage__rows div { display: grid; gap: 6px; }

.contact-stage__rows span {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}

.contact-stage__rows a,
.contact-stage__rows p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.42rem);
  font-weight: 800;
  letter-spacing: 0;
}

.contact-stage__rows a { transition: color 200ms var(--ease); }
.contact-stage__rows a:hover { color: var(--aqua); }

.contact-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border-bottom: 1px solid var(--rule);
}

.contact-notes div {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: clamp(170px, 15vw, 230px);
  padding: clamp(26px, 3vw, 50px);
  background: var(--surface);
}

.contact-notes span {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--aqua);
}

.contact-notes p {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

/* ============================================================================
   CASE STUDY — flip the editorial detail to the dark world
   ========================================================================== */
body.page-light .case-detail { background: var(--surface); }
body.page-light .case-proof { background: var(--surface); color: var(--ink); }
body.page-light .case-proof ul { border-top-color: var(--rule); }
body.page-light .case-proof li { border-bottom-color: var(--rule); }
body.page-light .case-story { background: var(--surface); color: var(--ink); }
body.page-light .case-story article { border-bottom-color: var(--rule); }

@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); }

.case-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  transition: color 200ms var(--ease);
}

.case-back i { font-style: normal; transition: transform 220ms var(--ease); }
.case-back:hover { color: var(--ink); }
.case-back:hover i { transform: translateX(-4px); }

.case-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.58fr);
  gap: clamp(34px, 5vw, 92px);
  align-items: center;
  min-height: 90vh;
  min-height: 90svh;
  padding: clamp(128px, 13vw, 196px) clamp(24px, 7vw, 106px) clamp(50px, 7vw, 90px);
  background:
    linear-gradient(112deg, var(--surface) 0 55%, color-mix(in srgb, var(--case-accent) 60%, var(--surface)) 55% 100%),
    var(--surface);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

.case-hero__copy {
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
  align-content: center;
  max-width: 760px;
}

.case-hero__tag {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 56%, transparent);
}

.case-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.4vw, 6.6rem);
  font-weight: 900;
  line-height: 0.84;
  letter-spacing: 0;
}

/* Standfirst / lede — the serif doing editorial work */
.case-hero__intro {
  margin: 0;
  max-width: 36ch;
  border-top: 1px solid var(--rule);
  padding-top: clamp(20px, 2.2vw, 30px);
  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);
}

.case-hero__art {
  justify-self: center;
  display: grid;
  place-items: center;
  width: min(100%, 460px);
  aspect-ratio: 1;
  padding: clamp(20px, 3vw, 44px);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--rule);
}

.case-hero__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 70px rgb(8 7 10 / 0.5));
}

.case-facts2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  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(--surface);
}

.case-facts2 span {
  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-facts2 strong {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  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;
}

.case-next2 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(60px, 9vw, 130px) clamp(24px, 7vw, 106px);
  background: linear-gradient(112deg, var(--surface) 0 58%, color-mix(in srgb, var(--case-accent) 40%, var(--surface)) 100%);
  color: var(--ink);
  transition: background 420ms var(--ease);
}

.case-next2:hover,
.case-next2:focus-visible {
  background: linear-gradient(112deg, var(--surface) 0 42%, color-mix(in srgb, var(--case-accent) 64%, var(--surface)) 100%);
}

.case-next2__label {
  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) 52%, transparent);
}

.case-next2 strong {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 7rem);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: 0;
}

.case-next2__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.case-next2__go i { font-style: normal; transition: transform 240ms var(--ease); }
.case-next2:hover .case-next2__go i { transform: translateX(6px); }

@media (max-width: 900px) {
  .case-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 32px;
    padding: 110px 24px 48px;
  }

  .case-hero__art {
    order: -1;
    width: min(70%, 300px);
  }

  .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 rgb(8 7 10 / 0.55);
}

.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);
}

/* Cover mode — full-bleed cropped pattern band */
.case-showcase--cover {
  position: relative;
  padding: 0;
}

.case-showcase--cover figure {
  display: block;
  width: 100%;
}

.case-showcase--cover img {
  width: 100%;
  height: clamp(320px, 42vw, 560px);
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  border: 0;
  box-shadow: none;
}

.case-showcase--cover figcaption {
  position: absolute;
  left: clamp(24px, 7vw, 106px);
  bottom: clamp(20px, 3vw, 36px);
  z-index: 1;
  padding: 9px 13px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---- 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: #fff;
  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; }
  .making-field__steps { width: 84vw; }
  .making-field__step { padding: clamp(18px, 4vw, 32px); }
  .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-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-hero__meta {
  position: absolute;
  left: clamp(24px, 7vw, 106px);
  right: clamp(24px, 7vw, 106px);
  bottom: clamp(40px, 6vh, 80px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 52px);
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}

.qc-hero__meta strong {
  font-weight: 900;
  font-size: 1.5em;
  letter-spacing: 0;
  color: var(--ink);
  margin-right: 0.32em;
}

.qc-hero__meta i { font-style: normal; color: var(--ink); }

.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;
}

/* 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(--aqua));
}

@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); }
}

/* Visual next project — preview the next case's mark */
.case-next2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.4fr);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
}

.case-next2__copy {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
}

.case-next2__art {
  justify-self: end;
  width: min(100%, 260px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.case-next2__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 60px rgb(8 7 10 / 0.5));
  transform: rotate(-3deg) scale(0.9);
  transition: transform 520ms var(--ease);
}

.case-next2:hover .case-next2__art img,
.case-next2:focus-visible .case-next2__art img {
  transform: rotate(0deg) scale(1);
}

@media (max-width: 760px) {
  .case-next2 { grid-template-columns: 1fr; }
  .case-next2__art { justify-self: start; width: min(58%, 200px); margin-top: 8px; }
  .case-story2__label { position: static; }
}

/* ============================================================================
   ABOUT — founder + clients
   ========================================================================== */
.founder {
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 96px);
  align-items: center;
  padding: clamp(60px, 9vw, 140px) clamp(24px, 7vw, 106px);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}

.founder__portrait { justify-self: center; width: min(100%, 360px); }
.founder__portrait img { display: block; width: 100%; height: auto; }
.founder__copy { display: grid; gap: clamp(22px, 3vw, 38px); }

.founder blockquote {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 3rem);
  line-height: 1.2;
  color: var(--ink);
}

.founder__sign { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.founder__sig { height: clamp(38px, 5vw, 54px); 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__sign span {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--aqua);
}

.clients-band {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  justify-items: start;
  padding: clamp(50px, 7vw, 100px) clamp(24px, 7vw, 106px);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}

.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; }
  .founder__portrait { width: min(62%, 250px); }
}

/* ============================================================================
   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: #f1efe9 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(--aqua) 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(--aqua); }

@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(--paper);
  isolation: isolate;
}

.ny-aus__panel { position: absolute; inset: 0; overflow: hidden; }
.ny-aus__panel--ny {
  background: #0a0a0c;
  clip-path: polygon(0 0, 28.4% 0, 76.4% 100%, 0 100%);
}
.ny-aus__panel--aus {
  background: #f4f1ea;
  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: #fff;
  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) — <body data-slide-transition="native">
   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;
  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 */
}
/* each card PINS to the top (sticky); the next card (higher z-index) then scrolls up
   and covers it — the background "sticks in place" and gets wiped over. The text is
   inside the pinned card, so it rides up into view as the card reveals. */
body[data-slide-transition="native"] .work-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  /* Fallback only — app.js derives each card's margin from STEP_VH and sets it inline,
     so the dwell gap can never desync from the wipe timing. Tune STEP_VH in app.js. */
  margin-bottom: 60vh;
}
/* Fallback only — app.js sets this (dwell + LAST_CARD_EXTRA_VH). The last card needs the
   extra room so it finishes its wipe + dwell (pinned) before Studio scrolls up. */
body[data-slide-transition="native"] .work-stack .work-panel:last-of-type {
  margin-bottom: 200vh;
}
/* z-index ladder so each card covers the one before it */
/* Hero is a normal full-height intro section now (not part of the wipe deck). */
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;
}
body[data-slide-transition="native"] .work-stack { position: relative; z-index: 2; }
body[data-slide-transition="native"] .work-panel:nth-of-type(1) { z-index: 10; }
body[data-slide-transition="native"] .work-panel:nth-of-type(2) { z-index: 20; }
body[data-slide-transition="native"] .work-panel:nth-of-type(3) { z-index: 30; }
body[data-slide-transition="native"] .work-panel:nth-of-type(4) { z-index: 40; }
body[data-slide-transition="native"] .work-panel:nth-of-type(5) { z-index: 50; }
body[data-slide-transition="native"] .work-panel:nth-of-type(6) { z-index: 60; }
/* ONLY the pinned background is revealed bottom-up by a scroll-driven clip wipe
   (--wipe set by JS) — the text is NOT clipped, it scrolls over the top (see --text-y).
   Because the geometry is locked, the Q + diagonal line up across the wipe and stay
   visually anchored — only the photo/colour changes. */
body[data-slide-transition="native"] .work-panel > .slide-bg {
  clip-path: var(--wipe, inset(0 0 0 0));
}
/* 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 scrolls 1:1 over the pinned/wiping background (not clipped) — --text-y by JS */
body[data-slide-transition="native"] .case-content,
body[data-slide-transition="native"] .hero > :not(.slide-bg) {
  opacity: 1;
  transform: translate3d(0, var(--text-y, 0px), 0);
  will-change: transform;
}
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 #6600CC); 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: #6000ff;   /* top half + active/hover tab (matches text → black via difference) */
  --menu-purple-bot: #3c00a0;   /* bottom half */
}
.menu-grid {
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  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: #6000ff;
  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: #6000ff;
}
.menu-preview__giant {
  position: static;
  bottom: auto;
  left: auto;
  transform: none;
  display: block;
  font-family: var(--font-text, var(--font-body));
  font-weight: 800;
  font-size: clamp(4.5rem, 12.5vw, 11.5rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: #6000ff;
}
.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 <link>). 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, .work-tile__title,
.contact-board a, .case-next {
  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, .hero-kicker, .menu-label, .qc-strip,
.studio-locator, .proof-band, .case-detail-type, .case-story span,
.contact-board span, .contact-fit span, .reel-lede__count, .agency-footer,
.eyebrow, [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: 30px;
  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;
  transition: color 240ms var(--ease), transform 220ms var(--ease);
}
.menu-toggle:hover { transform: scale(1.06); }
.menu-toggle:active { transform: scale(0.95); }

/* 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 { top: 20px; right: 18px; width: 46px; height: 46px; }

  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; }
}

/* ===========================================================================
   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;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.agency-footer__slogan {
  margin: 0;
  max-width: 26ch;
  font-family: var(--font-eyebrow);
  font-size: clamp(1.05rem, 1.3vw, 1.32rem);
  line-height: 1.45;
  color: color-mix(in srgb, var(--paper) 82%, 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); }
.agency-footer__social a { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74rem; }

/* ---- 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-size: 0.8rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--paper) 76%, transparent);
}
.agency-footer__copy { text-align: right; }
.agency-footer__ack {
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}
.agency-footer__ack img { display: block; height: 30px; width: auto; margin: 0 auto 12px; }
.agency-footer__ack p { margin: 0; max-width: 46ch; margin-inline: auto; }
.agency-footer__ack a {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  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; }
}

/* 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. The desktop
   geometry just cramps on a phone, so we lift the Q + diagonal into the top
   portion and lay the text over a solid feature-colour block on the bottom
   (which continues the diagonal's colour half, so it reads as one surface).
   Matches the contact-slide composition; the wipe still plays card-over-card.
   =========================================================================== */
@media (max-width: 760px) {
  /* Diagonal cards: shift the LOCKED Q/diagonal geometry up into the top half
     (the diagonal recomputes from these, so the Q rides it as on desktop). */
  body[data-slide-transition="native"] .work-panel--imgcolour,
  body[data-slide-transition="native"] .work-panel--glass {
    --q-cx: 54vw;
    --q-cy: 25vh;
    --q-r: 22vw;
    --q-logo-size: 66vw;
  }

  /* Plain photo cards (the Studio slide) have no diagonal — confine the photo to
     the top half so its text block below isn't over a busy image. */
  body[data-slide-transition="native"] .work-panel--plain:has(.panel-photo) .panel-photo {
    inset: 0 0 52% 0;
  }

  /* Every photo card: text in a solid feature-colour block on the BOTTOM half. */
  body[data-slide-transition="native"] .work-panel:has(.panel-photo) .case-content {
    top: 48%;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: none;
    padding: 7vw 7vw 6vw;
    background: var(--feature-color, var(--black));
    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; }
}