/* Wheelhouse Media, v2 homepage
   One type scale, one spacing scale, gradient used only as an accent. */

@font-face { font-family: "Suisse Intl"; src: url("assets/64c27640d19181da7922927b_SuisseIntl-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Suisse Intl"; src: url("assets/64c2764009529e732bb811a0_SuisseIntl-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
  /* brand */
  --ink: #111111;
  --ink-2: #333333;
  --paper: #f9f9f9;
  --white: #ffffff;
  --hairline: rgba(17, 17, 17, 0.12);
  --hairline-strong: rgba(17, 17, 17, 0.3);
  --muted: rgba(17, 17, 17, 0.72);
  --grad: linear-gradient(60deg, #fe5343 0%, #fca725 50%, #96e02a 96%);
  /* the opposite palette, used by blocks that invert (open drop-down rows) */
  --inv-ink: #f9f9f9;
  --inv-paper: #111111;
  --inv-muted: rgba(249, 249, 249, 0.68);
  --inv-hairline: rgba(249, 249, 249, 0.14);

  /* type: eight styles. Every piece of text on the page is one of these.
     display     page titles only                          bold,    -0.02em
     heading     statements, drop-down rows, call to action  regular, -0.015em
     title       section titles                            regular, -0.01em
     subhead     a lead-in heading inside a block           regular, -0.01em (title size, its own spacing)
     title-bold  item names: thumbnails, steps, groups     bold
     lede        opening paragraph                          regular, black
     body        paragraphs, lists                          regular, muted
     small       secondary lines: footer, credits, captions regular, muted
     label       small caps: nav, eyebrows, buttons, meta   0.1em tracking, uppercase */
  --font: "Suisse Intl", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* scale: 13 / 15 / 18 / 21 / 26 / 34-52 / 44-88, each step about 1.2 to 1.3x */
  --t-display: clamp(2.75rem, 6.2vw, 5.5rem);
  --t-heading: clamp(2.125rem, 3.6vw, 3.25rem);
  --t-title: 1.625rem;
  --t-lede: 1.3125rem;
  --t-body: 1.125rem;
  --t-small: 0.9375rem;
  --t-label: 0.8125rem;

  /* spacing scale, 8px base */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-section: clamp(3.3rem, 6.05vw, 5.5rem);   /* every section, top and bottom */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 62ch;

  --header-h: 5rem;
  --cap-col: calc(var(--t-heading) + 1.85rem);   /* icon column in the drop-down rows: as tall as the title, with room either side of the icon (text starts 10% further in) */
  /* underline: one rule for every underlined word on the site (see "Underline" on the style guide) */
  --ul-thickness: 1px;
  --ul-offset: 0.25em;          /* baseline to the underline */
  --ul-duration: 0.35s;
  --font-descent: 0.31em;       /* Suisse Intl: bottom of the text box sits this far below the baseline */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; overflow-x: clip;
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- type: the eight styles ---------- */
h1, h2, h3, h4, p { margin: 0; }
.t-display { font-size: var(--t-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; }
.t-heading { font-size: var(--t-heading); font-weight: 400; letter-spacing: -0.015em; line-height: 1.08; }
.t-title   { font-size: var(--t-title);   font-weight: 400; letter-spacing: -0.01em;  line-height: 1.2; }
.t-subhead { font-size: var(--t-title);   font-weight: 400; letter-spacing: -0.01em;  line-height: 1.25; }
.t-small   { font-size: var(--t-small);   font-weight: 400; line-height: 1.5; color: var(--muted); }
.t-title-bold { font-size: var(--t-title); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.t-lede    { font-size: var(--t-lede);    font-weight: 400; letter-spacing: -0.005em; line-height: 1.45; color: var(--ink); }
.t-body    { font-size: var(--t-body);    font-weight: 400; line-height: 1.55; color: var(--muted); }
/* line breaking site-wide (Chris 2026-09-17): headings and titles break into near-equal lines; paragraphs and ledes
   wrap normally with `pretty` (only a lone last word is avoided) and rely on the generator's glue before the last
   words. Nothing changes a block's width because of its last line. */
p, .t-body, .t-lede { text-wrap: pretty; }
.t-display, .t-heading, .t-title, .t-title-bold, .t-subhead { text-wrap: balance; }
.t-label   { font-size: var(--t-label);   font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; }
.t-client  { font-size: calc(var(--t-heading) * 0.49); font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.15; color: var(--ink); }   /* client name under a project title: caps at 49% of Heading (25px at 1440), tracked lightly for its size (Chris 2026-09-28) */
.measure { max-width: var(--measure); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--gutter); }
.section { padding-block: var(--s-section); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding-bottom: var(--s-3); margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}
/* section title in Title; anything beside it (a link, a count) drops to Label so the title leads */
.section-head .t-label { color: var(--muted); }
.section-head .link-arrow { font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--t-body); line-height: 1.55; }
.link-arrow::after { content: "→"; transition: transform 0.3s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
/* ---------- underline (one component) ----------
   A 1px line in currentColor that draws in from the left on hover and un-draws to the left.
   The line is painted as a background on the word span itself, so it never runs under an arrow,
   a chevron, padding or a gap. line-height 1.286 equals the font's text box (ascent + descent),
   so the box bottom sits exactly --font-descent below the baseline whether the element is inline
   (copy links) or a flex item (nav, button simple); the line is then lifted to --ul-offset. */
.ul, .link-arrow > span, .nav > li > a > span, .nav > li > button > span:first-child, .dropdown a > span:first-child,
.footer ul:not(.social) a, .t-body a, .t-lede a, .contact-aside a, .callout .aside a {
  line-height: 1.286;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 var(--ul-thickness);
  background-position: 0 calc(100% - (var(--font-descent) - var(--ul-offset)));
  transition: background-size var(--ul-duration) var(--ease), color 0.3s var(--ease);
}
/* drawn: hover, keyboard focus, the current page in the nav, and copy links (always underlined) */
.ul.is-on, .ul:hover,
.link-arrow:hover > span, .work-item:hover .link-arrow > span, .link-arrow:focus-visible > span,
.nav > li:hover > a > span, .nav > li:hover > button > span:first-child, .nav a:focus-visible > span, .nav button:focus-visible > span:first-child,
.nav > li.current > a > span, .nav > li.current > button > span:first-child,
.dropdown a:hover > span:first-child, .dropdown a[aria-current="page"] > span:first-child,
.footer ul:not(.social) a:hover, .footer ul:not(.social) a:focus-visible,
.t-body a, .t-lede a, .contact-aside a, .callout .aside a { background-size: 100% var(--ul-thickness); }
/* "button simple": the words underline, never the arrow */

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
}
.header-inner {
  height: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4);
}
.header-inner > :last-child { justify-self: end; }
.logo { display: block; height: 2rem; }
/* the wordmark sits in the centre and only shows once the reel has scrolled away */
.header-word { display: block; height: 0.95rem; opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); pointer-events: none; }
.header.scrolled .header-word { pointer-events: auto; }
.header-word svg { height: 100%; width: auto; display: block; }
.header-word .word { fill: var(--ink); }
.header.scrolled .header-word { opacity: 1; transform: none; }
.logo svg { height: 100%; width: auto; overflow: visible; }
.logo .mark-ink { fill: var(--ink); transition: opacity 0.45s var(--ease); }
.logo .mark-grad { fill: url(#logo-grad); opacity: 0; transition: opacity 0.45s var(--ease); }
.logo:hover .mark-ink, .logo:focus-visible .mark-ink { opacity: 0; }
.logo:hover .mark-grad, .logo:focus-visible .mark-grad { opacity: 1; }
.logo .word { fill: var(--ink); }

.nav { display: flex; align-items: center; gap: var(--s-4); }
.nav > li { position: relative; }
.nav a, .nav button {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase;
  padding-block: 0.6rem;
  color: var(--ink);
}
.nav .chev { width: 0.55em; height: 0.55em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.3s var(--ease); }
.nav > li:hover .chev { transform: translateY(1px) rotate(225deg); }

.dropdown {
  position: absolute; top: calc(100% + 0.25rem); left: -1rem;
  min-width: 17rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.08);
  padding: 0.5rem 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
}
.nav > li:hover .dropdown, .nav > li:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s;
}
.dropdown a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.7rem 1rem;
  text-transform: none; letter-spacing: 0; font-size: var(--t-small); color: var(--ink);
}
.dropdown a:hover { background: var(--paper); }
.dropdown .all { border-top: 1px solid var(--hairline); margin-top: 0.4rem; padding-top: 0.9rem; color: var(--muted); }

.menu-btn { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; background: #000; }
.hero video, .hero-embed {
  /* short of the fold so the headline beneath shows above it */
  width: 100%; height: calc(83svh - var(--header-h)); min-height: 22rem;   /* desktop as before; phone halves it (Chris 2026-09-28) */
  object-fit: cover;
}
/* streamed reel (Wistia background embed, main.js loads the player after first paint): the still shows until the
   first frame, and stays for reduced motion or without script; the player covers the same frame as the <video> did */
.hero-embed { position: relative; overflow: hidden; }
.hero-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s var(--ease); }   /* 300ms handover to the first frame (Chris 2026-09-28) */
.hero-player { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-embed.is-playing .hero-still { opacity: 0; }

/* ---------- statement ---------- */
.statement { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-5) var(--s-7); align-items: start; }
.statement .t-display .swap { display: inline-block; position: relative; min-width: 5.2ch; }
.statement .t-display .swap span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(0.35em); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); pointer-events: none; }
.statement .t-display .swap span.on { opacity: 1; transform: none; }
.statement .t-display .swap span.out { opacity: 0; transform: translateY(-0.35em); }   /* the old word leaves upward and is gone before the next enters from below: never two words at once */
.statement .t-display .swap span:first-child { position: relative; visibility: hidden; }
.statement .t-display .swap span:first-child.on, .statement .t-display .swap span:first-child.out { visibility: visible; }
.statement-copy { display: grid; gap: var(--s-3); padding-top: 0.6rem; }

/* ---------- capabilities accordion ---------- */
.caps { border-top: 0; }
.cap { border-bottom: 1px solid var(--hairline); }
.caps .cap:last-of-type { border-bottom: 0; }   /* the block ends on its last row and the gradient rule, whichever capability that is (Chris 2026-09-28) */
.cap-btn {
  width: 100%;
  display: grid; grid-template-columns: var(--cap-col) minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  padding-block: clamp(1.75rem, 3.4vw, 2.75rem);
  text-align: left;
  color: var(--row-rest);   /* rows rest in a mid grey; the hovered, keyboard-focused or open row turns white, icon and plus with it (Chris 2026-09-17) */
  transition: color 0.18s var(--ease);
}
.caps { --row-rest: rgba(249, 249, 249, 0.55); }
.cap-btn .cap-icon { opacity: 0.55; transition: opacity 0.18s var(--ease); }   /* the sprite's white lines and coloured accents dim together */
.cap.open .cap-btn, .cap-btn:focus-visible { color: var(--ink); }
.cap.open .cap-btn .cap-icon, .cap-btn:focus-visible .cap-icon { opacity: 1; }
@media (hover: hover) {
  .cap-btn:hover { color: var(--ink); }
  .cap-btn:hover .cap-icon { opacity: 1; }
  .cap-btn:hover .name { transform: translateX(6px); }
}
.cap-btn .idx { display: flex; align-items: center; justify-content: center; color: currentColor; font-size: var(--t-heading); }   /* icons centred in their column, on one axis */
.cap-icon { width: 1em; height: 1em; display: block; }
/* animated icons: a horizontal sprite strip of PNG frames (v2/anim/), stepped by main.js.
   At rest the tiny poster shows frame 0; the strip loads when the section nears the viewport. */
.cap-anim { --fw: 96; --fh: 96; --frames: 1; --i: 0; width: calc(1em * var(--fw) / var(--fh)); height: 1em; background-repeat: no-repeat; background-size: 100% 100%; background-position: 0 0; }
.cap-anim.loaded { background-size: calc(var(--frames) * 100%) 100%; background-position-x: calc(var(--i) / (var(--frames) - 1) * 100%); }
.cap-anim[data-anim="production"] { background-image: url(anim/production-poster.webp); }
.cap-anim[data-anim="production"] { transform: scale(1.1); transform-origin: 50% 50%; }   /* the camera reads small beside the others: 10% larger, scaled about its centre so the column axis and the row do not move */
.cap-anim[data-anim="post-production"] { background-image: url(anim/post-production-poster.webp); }
.cap-anim[data-anim="animation"] { background-image: url(anim/animation-poster.webp); }
.cap-anim[data-anim="live"] { background-image: url(anim/live-poster.webp); }
@media (prefers-reduced-motion: reduce) { .cap-anim.loaded { --i: 0 !important; } }
.cap-btn .name { font-size: var(--t-heading); font-weight: 400; letter-spacing: -0.015em; line-height: 1.08; transition: transform 0.4s var(--ease); }
.cap-btn .plus { position: relative; width: 1.25rem; height: 1.25rem; }
.cap-btn .plus::before, .cap-btn .plus::after { content: ""; position: absolute; inset: 50% auto auto 50%; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.4s var(--ease); }
.cap-btn .plus::before { width: 100%; height: 1px; }
.cap-btn .plus::after { width: 1px; height: 100%; }
.cap.open .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.cap-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.cap.open .cap-panel { grid-template-rows: 1fr; }
.cap-panel > div { overflow: hidden; }
.cap-body {
  display: grid; grid-template-columns: var(--cap-col) minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-3) var(--s-3);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.cap-body .accent { width: 1px; height: 100%; min-height: 3rem; background: var(--ink); justify-self: center; opacity: 0.9; }   /* on the icon axis; white for now (was the gradient) */
.cap-body p { max-width: 52ch; }   /* the copy spans exactly the media's width beneath it (52ch), Chris 2026-09-17 */
.cap-body .list { display: grid; gap: 0.35rem; font-size: var(--t-body); color: var(--muted); align-content: start; }
.cap-body .list li { display: flex; gap: 0.6em; }
.cap-body .list li::before { content: "—"; color: var(--muted); }
.cap-aside { display: flex; flex-direction: column; min-width: 0; }
/* the capability link lives under the service list, pinned to the bottom of the row body; Chris 2026-09-09 */
.cap-body .link-arrow { margin-top: auto; padding-top: var(--s-3); color: var(--ink); align-self: flex-start; }

/* reel thumbnail inside an open capability; click opens the big player */
.cap-reel {
  position: relative; display: block; width: 100%; max-width: 52ch; aspect-ratio: 16 / 9;
  margin-top: var(--s-3); overflow: hidden; background: var(--hairline);
  text-align: left;
}
.cap-reel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter 0.5s var(--ease); }
.cap-reel:hover img { transform: scale(1.03); filter: brightness(0.85); }
.cap-reel-play {
  position: absolute; left: 50%; top: 50%; width: 3.5rem; height: 3.5rem; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(255, 255, 255, 0.92);
  transition: transform 0.4s var(--ease), background 0.3s var(--ease);
}
.cap-reel-play::after { content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%); border-left: 0.9rem solid #111; border-top: 0.55rem solid transparent; border-bottom: 0.55rem solid transparent; }
.cap-reel:hover .cap-reel-play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.cap-reel-label { position: absolute; left: 1rem; bottom: 0.9rem; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.cap-gallery .cap-reel-photos { position: absolute; right: 0.9rem; top: 0.8rem; padding: 0.35rem 0.6rem; font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: #111; background: rgba(255, 255, 255, 0.92); }
.cap-gallery::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 rgba(255,255,255,0.9); transition: box-shadow 0.4s var(--ease); pointer-events: none; }
.cap-gallery:hover::after { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9); }

/* in-place photo slider inside an open row; a click opens the big viewer at that photo */
.cap-slider { margin-top: var(--s-3); max-width: 52ch; }
.cap-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--hairline); }
.cap-track::-webkit-scrollbar { display: none; }
.cap-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 9; display: block; }
.cap-slide img { width: 100%; height: 100%; object-fit: cover; }
.cap-frame { position: relative; overflow: hidden; }
/* a soft ink scrim along the bottom of a slider photo, behind the dots */
.cap-frame::after, .hero-slides::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4.5rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); pointer-events: none; }
.cap-slider-nav { display: inline-flex; gap: 0.5rem; }

/* category tiles inside an open capability (Post-Production): one row of posters across the text
   column, each a link Chris points at a Work page later. Same language as the Work grid: image,
   scrim, bold label, slow zoom on hover. Label size follows the tile width (container units). */
.cap-cats { margin-top: var(--s-3); max-width: 52ch; display: grid; grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr)); gap: clamp(0.4rem, 0.8vw, 0.6rem); }
.cap-cat { position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 3; background: var(--hairline); container-type: inline-size; color: #fff; }
.cap-cat img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.2s var(--ease), filter 0.5s var(--ease); }
.cap-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0) 60%); pointer-events: none; }
.cap-cat-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 7cqw 7cqw 8cqw; text-align: center;   /* bottom, centred; Chris 2026-09-15 */
  font-size: clamp(0.72rem, 12.5cqw, var(--t-body)); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15;
  overflow-wrap: anywhere; hyphens: manual;
}
.cap-cat[href]:hover img, .cap-cat[href]:focus-visible img { transform: scale(1.04); filter: brightness(0.85); }
.cap-cat:not([href]) { cursor: default; }
/* slider arrows and counter sit on the photo (Chris 2026-09-15): white chevron in a soft dark disc with a faint
   ring, the play mark's family; one at each side, vertically centred; the photo count is read to screen readers only (Chris 2026-09-15) */
.slide-nav { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); color: #fff; transition: background 0.3s var(--ease), transform 0.3s var(--ease); }
.slide-nav::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0.55rem; height: 0.55rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translate(-60%, -50%) rotate(45deg); }
.cap-prev, .hero-prev { left: clamp(0.5rem, 1.5vw, 1rem); }
.cap-next, .hero-next { right: clamp(0.5rem, 1.5vw, 1rem); }
.cap-prev::before, .hero-prev::before { transform: translate(-40%, -50%) rotate(-135deg); }
.slide-nav:hover, .slide-nav:focus-visible { background: rgba(0, 0, 0, 0.65); transform: translateY(-50%) scale(1.08); }
/* keyboard focus only: a mouse click never leaves a ring (Chris 2026-09-15; rows and tiles 2026-09-17) */
.cap-btn:focus:not(:focus-visible), .cap-cat:focus:not(:focus-visible), .tile:focus:not(:focus-visible), .cap-slide:focus:not(:focus-visible), .cap-reel:focus:not(:focus-visible), .work-item:focus:not(:focus-visible), .project-play:focus:not(:focus-visible) { outline: none; }
.cap-btn:focus-visible, .cap-cat:focus-visible, .tile:focus-visible, .cap-slide:focus-visible, .cap-reel:focus-visible, .work-item:focus-visible, .project-play:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.slide-nav:focus:not(:focus-visible), .slide-dots button:focus:not(:focus-visible), .cap-slider:focus:not(:focus-visible), .hero-slider:focus:not(:focus-visible) { outline: none; }
.slide-nav:focus-visible, .slide-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.slide-dots { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0.8rem; display: flex; justify-content: center; gap: 0.5rem; color: #fff; }   /* the showcase's dots, smaller, over the bottom of the photo on the scrim (Chris 2026-09-15) */
.slide-dots button { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: currentColor; opacity: 0.35; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.slide-dots button[aria-selected="true"] { opacity: 1; transform: scale(1.35); }

/* the expanded player */
.reel-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0, 0, 0, 0.92);
  animation: reel-in 0.35s var(--ease);
}
@keyframes reel-in { from { opacity: 0; } to { opacity: 1; } }
.reel-frame { width: min(100%, 75rem); aspect-ratio: 16 / 9; background: #000; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); animation: reel-up 0.5s var(--ease); }
@keyframes reel-up { from { transform: translateY(24px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.reel-frame video, .reel-frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.reel-frame img { width: 100%; height: 100%; object-fit: contain; display: block; animation: reel-in 0.4s var(--ease); }
.reel-nav { position: absolute; top: 50%; width: 3rem; height: 3rem; transform: translateY(-50%); opacity: 0.7; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.reel-nav::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0.9rem; height: 0.9rem; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: translate(-50%, -50%) rotate(45deg); }
.reel-prev { left: clamp(0.5rem, 2vw, 1.5rem); } .reel-prev::before { transform: translate(-50%, -50%) rotate(-135deg); }
.reel-next { right: clamp(0.5rem, 2vw, 1.5rem); }
.reel-nav:hover { opacity: 1; transform: translateY(-50%) scale(1.1); }
.reel-nav[hidden], .reel-count[hidden] { display: none; }
.reel-count { position: absolute; left: 50%; bottom: clamp(0.75rem, 2vw, 1.5rem); transform: translateX(-50%); color: rgba(255, 255, 255, 0.7); }
.reel-close { position: absolute; top: 1rem; right: 1.25rem; width: 2.5rem; height: 2.5rem; font-size: 0; opacity: 0.8; }
.reel-close::before, .reel-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.5rem; height: 1px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.reel-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.reel-close:hover { opacity: 1; }
[hidden] { display: none !important; }   /* the hidden attribute beats any display: rule, including grid and flex components */
body.reel-open { overflow: hidden; }

/* ---------- featured work ---------- */
/* showcase carousel: one piece centred, neighbours peeking in from each side */
.work {
  --slide: clamp(20rem, 64vw, 66rem);
  display: flex; gap: clamp(0.45rem, 0.9vw, 0.9rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-inline: calc((100% - var(--slide)) / 2);
  padding-block: var(--s-2);
  scrollbar-width: none;
  cursor: grab;
}
.work::-webkit-scrollbar { display: none; }
.work.dragging { cursor: grabbing; scroll-snap-type: none; }
.work .work-item {
  flex: 0 0 var(--slide);
  scroll-snap-align: center;
  position: relative;
  transform: scale(0.92); opacity: 0.45;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
.work .work-item.is-active { transform: none; opacity: 1; }
.work .work-media img { transform: none; }
.work .work-item:hover .work-media img { transform: none; }
.work .work-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  align-items: end;
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.work .work-item.is-active .work-meta { opacity: 1; }
.work .work-meta .client { color: rgba(255, 255, 255, 0.75); }
.work-logo { height: auto; width: auto; max-height: 4.75rem; max-width: 10.5rem; object-fit: contain; object-position: left bottom; opacity: 0.55; margin-bottom: 0.9rem; display: block; }
.work .work-meta .link-arrow {
  color: #fff; font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
}
.work-dots { display: flex; justify-content: center; gap: 0.6rem; padding-top: var(--s-3); }
.work-dots button { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--hairline-strong); transition: transform 0.3s var(--ease), background 0.3s var(--ease); }
.work-dots button[aria-selected="true"] { background: var(--ink); transform: scale(1.35); }
.work-item { display: block; }
.work-item:focus:not(:focus-visible), .work:focus:not(:focus-visible), .work-dots button:focus:not(:focus-visible) { outline: none; }
.work-media { overflow: hidden; background: var(--hairline); aspect-ratio: 16 / 9; }
.work-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.2s var(--ease); }
.work-item:hover .work-media img { transform: scale(1.03); }
.work-meta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s-3);
  padding: var(--s-2) var(--gutter) 0;
}
.work-meta .client { font-size: var(--t-small); color: var(--muted); }
.work .work-meta .client, .grid--hover .work-meta .client { font-size: var(--t-body); margin-top: 0.25rem; }   /* showcase and Work-grid captions on desktop: client at Body size, 4px under the title (Chris 2026-09-28) */

/* ---------- callout ---------- */
.callout { border-top: 1px solid var(--hairline-strong); }
.callout-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); }
.btn {
  /* pill with a gradient outline; on hover the gradient fades in behind the text,
     the text goes black and the whole button grows a touch */
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.95rem 1.75rem;
  font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  border: 1px solid transparent; border-radius: 999px;
  transform: scale(1);
  transition: color 0.35s var(--ease), transform 0.4s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.btn::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--grad); opacity: 0; z-index: -1; transition: opacity 0.35s var(--ease); pointer-events: none; }
.btn:hover, .btn:focus-visible { color: #111; transform: scale(1.06); outline: none; }
.btn:hover::after, .btn:focus-visible::after { opacity: 1; }
.btn:active { transform: scale(1.02); transition-duration: 0.15s; }
/* the one rounded button on a light page (the contact form): black outline at rest, gradient fill on hover */
.btn--ink { border-color: var(--ink); }
.btn--ink::before { opacity: 0; transition: opacity 0.3s var(--ease); }
.btn--ink:hover, .btn--ink:focus-visible { color: #111; border-color: transparent; }
.callout .aside { display: grid; gap: var(--s-1); }
.callout .aside a { width: max-content; }
.callout .aside a:hover { border-color: var(--ink); }

/* ---------- footer ---------- */
.footer { background: var(--paper); color: var(--ink); position: relative; border-top: 1px solid var(--hairline); }
.footer-inner { display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); column-gap: var(--s-6); row-gap: var(--s-5); padding-block: var(--s-section) var(--s-5); }
.footer-inner > :first-child { display: inline-flex; flex-direction: column; align-items: center; justify-self: start; }
.footer .social { display: flex; justify-content: center; gap: 0.75rem; margin-top: var(--s-3); }
.footer .social a { display: block; opacity: 0.85; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.footer .social a:hover { opacity: 1; transform: translateY(-2px); }
.footer .social img { width: 2rem; height: 2rem; }
.footer .footer-address { color: var(--muted); margin-top: 0.6rem; line-height: 1.5; }
.footer .t-title { margin-bottom: var(--s-2); }
.footer ul { display: grid; gap: 0.4rem; font-size: var(--t-small); }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--ink); }
.footer .logo-foot { height: 5.5rem; width: auto; }
.footer .logo-foot-light { display: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-3) var(--s-4); border-top: 1px solid var(--hairline); font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ---------- dark blocks (alternating light / dark down the page) ---------- */
.footer, #capabilities, .callout {
  --ink: #f9f9f9;
  --paper: #111111;
  --white: #161616;
  --hairline: rgba(249, 249, 249, 0.14);
  --hairline-strong: rgba(249, 249, 249, 0.35);
  --muted: rgba(249, 249, 249, 0.68);
  --inv-ink: #111111;
  --inv-paper: #f9f9f9;
  --inv-muted: rgba(17, 17, 17, 0.72);
  --inv-hairline: rgba(17, 17, 17, 0.12);
  background: var(--paper); color: var(--ink);
}
.callout { border-top: 0; }
/* on dark blocks, paragraphs and lists read off-white; only links go full white */
#capabilities .t-body, .callout .t-body, #capabilities .list, .footer .t-body { color: var(--muted); }
#capabilities .t-body a, .callout .t-body a, #capabilities .list a, #capabilities .link-arrow, .callout .link-arrow { color: var(--ink); }

/* every dark section closes with the same 3px gradient rule */
.hero, #capabilities { position: relative; }
.hero::after, #capabilities::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); opacity: 0.85; z-index: 1;
}

/* ---------- inner pages ---------- */
.page-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-5) var(--s-7); align-items: start; }
.page-head.section { padding-block: calc(var(--s-section) * 0.85); }   /* page heads sit 15% tighter than a content section */
.page-head .t-lede { padding-top: 0.9rem; }
.page-head .eyebrow { grid-column: 1 / -1; color: var(--muted); margin-bottom: calc(var(--s-3) - var(--s-5)); }   /* full-width row above the title; pulls the row gap back to --s-3 */   /* optical: aligns the first line of the lede with the cap height of the title */
.page-head .t-lede { max-width: 48ch; }   /* the Company lede sets the measure: four lines at desktop width */

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem); row-gap: clamp(2.5rem, 4.5vw, 4rem); }
.grid .work-item { display: block; min-width: 0; }
.grid .work-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--hairline); }
.grid .work-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.2s var(--ease); }
.grid .work-item:hover .work-media img { transform: scale(1.03); }
.grid .work-meta { padding: var(--s-2) 0 0; display: grid; gap: 0.15rem; }
/* work page: tight two-up thumbnails; the caption sits over the image and rises in once the card scrolls into view */
.grid--hover { column-gap: clamp(0.75rem, 1.4vw, 1.25rem); row-gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.grid--hover .work-item { position: relative; }
.grid--hover .work-media, .work .work-media { position: relative; }
.grid--hover .work-media img.work-logo, .work .work-media img.work-logo { position: absolute; top: clamp(1rem, 2vw, 1.5rem); left: clamp(1rem, 2vw, 1.5rem); margin: 0; z-index: 1; width: auto; height: auto; max-height: 4.75rem; max-width: 10.5rem; object-fit: contain; transform: none; }
/* the Ford script reads larger than the other marks in the same box, so it gets 75% */
.grid--hover .work-media img.work-logo[src$="ford.png"], .work .work-media img.work-logo[src$="ford.png"] { max-height: 3.5rem; max-width: 7.9rem; }
html.io .grid--hover .work-item.reveal:not(.in) { transform: translateY(56px); }
.grid--hover .work-item.reveal { transition-duration: 1s; }
.grid--hover .work-item.reveal:nth-child(2n) { transition-delay: 0.12s; }
.grid--hover .work-meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-3);
  color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  transition: opacity 0.7s var(--ease) 0.3s, transform 0.8s var(--ease) 0.3s;
}
/* before the card has scrolled in, the caption waits below and fades up after the card lands */
html.io .grid--hover .work-item.reveal:not(.in) .work-meta { opacity: 0; transform: translateY(32px); }
.grid--hover .work-meta .client { color: rgba(255, 255, 255, 0.75); }
.grid--hover .work-meta .link-arrow {
  color: #fff; font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
}

.contact-photo { width: 85%; height: auto; display: block; margin-bottom: var(--s-2); }   /* 85% of the column, left-aligned, Chris 2026-09-15; full width once the columns stack */
/* like the original: photo and studio details on the left, the form on the right; the page head shares the same split so the lede lines up over the form */
/* contact: heading, photo and details in the left column, the form in the right, both columns starting on the same top line (Chris 2026-09-17) */
.contact--page { padding-top: calc(var(--s-section) * 0.85); }
.contact--page h1 { margin-bottom: var(--s-5); }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-6) var(--s-7); align-items: start; }
.contact-aside { display: grid; gap: var(--s-4); }
.contact-aside a { width: max-content; }
.contact-aside a:hover { border-color: var(--ink); }
.form { display: grid; gap: var(--s-4); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.field { display: grid; gap: 0.5rem; }
.field > .t-label { color: var(--muted); }
.field legend { padding: 0; }   /* browsers indent legends by default; keep them flush with the field labels */
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%; font: inherit; font-size: var(--t-body); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--hairline-strong); border-radius: 0;
  padding: 0.6rem 0; outline: none; transition: border-color 0.3s var(--ease);
}
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.field textarea { min-height: 8rem; resize: vertical; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choices label { position: relative; cursor: pointer; }
.choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choices span {
  display: inline-block; padding: 0.55rem 0.9rem; font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--hairline-strong); color: var(--ink); transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.choices input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.choices input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.form-note { color: var(--muted); }
.form-foot { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.form-note { margin-bottom: var(--s-4); padding: var(--s-2) var(--s-3); border-left: 2px solid var(--ink); color: var(--ink); max-width: 52ch; }   /* the backend's reason for a refused post, shown above the form */


@media (max-width: 900px) {
  .page-head, .contact { grid-template-columns: 1fr; gap: var(--s-4); }
  .contact-photo { width: 100%; }
}
@media (max-width: 720px) {
  .grid, .form-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- company + service pages ---------- */
.full-image { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.gallery .tile { aspect-ratio: 3 / 2; overflow: hidden; background: var(--hairline); }
.gallery .tile img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1s var(--ease), filter 0.4s var(--ease); }
.gallery .tile:hover img { transform: scale(1.04); filter: brightness(0.9); }
.reel-hero { max-width: none; margin-top: 0; aspect-ratio: 21 / 9; }
.hero-media { display: block; }   /* page hero images run edge to edge on every page */
.reel-hero .cap-reel-play { width: 4.5rem; height: 4.5rem; }
/* hero slider on a capability page: the page's gallery in the hero frame, one still fading into the next
   every six seconds, dots beneath as on the showcase; hover pauses, swipe and arrows move, reduced motion holds the first still */
.hero-slider { display: block; }
.hero-slides { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: var(--hairline); }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-slide.is-on { opacity: 1; }
.hero-slider:focus:not(:focus-visible) { outline: none; }
/* copy as a lede on the left; the service list on the right runs in two columns so the two halves sit level */
.service-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5) var(--s-7); align-items: start; }
/* paragraph and list share the body style; a Services subhead sits above the list */
.service-body .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem var(--s-4); color: var(--muted); font-size: var(--t-body); line-height: 1.55; }
.service-body .t-body { max-width: 56ch; }
.service-body .t-subhead { margin-bottom: var(--s-3); }   /* subhead on its own line, --s-3 to the list, on all four pages */
.service-text .t-subhead { margin-top: var(--s-2); margin-bottom: 0; }   /* on the media page the subhead sits inside the copy grid: its gap supplies the --s-3 to the list, a little extra above */
/* pages with behind-the-scenes footage: text on one half, the picture on the other */
.service-body--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.service-body--media .list { grid-template-columns: 1fr; }   /* half-width column: one list column keeps the lines whole */
.service-text { display: grid; gap: var(--s-3); }   /* copy paragraphs at the site's paragraph spacing, as the project story (Chris 2026-09-17) */
.service-text > div { display: contents; }
.service-media img { width: 100%; height: auto; display: block; }
.service-body .list li { display: flex; gap: 0.6em; }
.service-body .list li::before { content: "—"; color: var(--muted); }
#more .section-head { border-bottom: 0; margin-bottom: 0; padding-bottom: var(--s-2); }
.more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.more-item { display: grid; gap: var(--s-2); padding: var(--s-4) 0; border-top: 1px solid var(--hairline-strong); }
.more-title { display: flex; align-items: center; gap: 0.6rem; }   /* the capability's icon beside its name, icon at the name's height */
.more-item .cap-anim { font-size: var(--t-lede); flex: none; filter: invert(1) hue-rotate(180deg); opacity: 0.7; transition: opacity 0.18s var(--ease); }   /* the sprites are white-line icons drawn for the dark accordion; inverted for this light block, hue restored, resting dimmed like the rows */
.more-item:hover .cap-anim, .more-item:focus-visible .cap-anim { opacity: 1; }
.more-item .link-arrow { color: var(--muted); }
.more-item:hover .link-arrow { color: var(--ink); }
@media (max-width: 900px) {
  .process, .more { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-body { grid-template-columns: 1fr; gap: var(--s-4); }
  .service-body .list { grid-template-columns: 1fr; }
  .full-image, .reel-hero, .hero-slides { aspect-ratio: 16 / 9; }
  .slide-nav { width: 2rem; height: 2rem; }
  .slide-dots { gap: 0.4rem; bottom: 0.6rem; }
  .cap-frame::after, .hero-slides::after { height: 3.5rem; }
  .slide-dots button { width: 0.3rem; height: 0.3rem; }
}

/* ---------- project pages: header floats over a full-page still; play button straddles the edge; video opens in the overlay ---------- */
body.over-hero .header { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-bottom-color: transparent; --ink: #f9f9f9; transition: background 0.3s var(--ease), border-color 0.3s var(--ease); }
body.over-hero .header .header-word .word, body.over-hero .header .logo .word { fill: var(--ink); }
body.over-hero .header.scrolled { background: #fff; border-bottom-color: var(--hairline); --ink: #111111; }
body.over-hero .dropdown { --ink: #111111; }
.project-hero { position: relative; height: 78svh; min-height: 30rem; background: #000; overflow: visible; }
.project-still { object-position: 50% 30%; }   /* heroes favour the upper part of the still, where the subjects usually are; hero_focus per project overrides */
.project-hero .project-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 70%); }
.project-hero-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(90%, 60rem); text-align: center; color: #fff; }
.project-hero-text .t-title { color: rgba(255, 255, 255, 0.9); margin-top: var(--s-3); }
.project-play { position: absolute; left: 50%; bottom: -2.5rem; transform: translateX(-50%); z-index: 3; display: grid; justify-items: center; gap: 0.9rem; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
/* soft scrim behind the mark: near-invisible on dark stills, gives the ring separation on pale ones */
.project-play::before { content: ""; position: absolute; left: 50%; top: 2.5rem; width: 17rem; height: 17rem; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.13) 45%, rgba(0, 0, 0, 0) 100%); pointer-events: none; z-index: -1; }   /* 65% of the original strength (Chris 2026-09-19) */
.project-play .play-ring { position: relative; width: 5rem; height: 5rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.9); background: rgba(17, 17, 17, 0.32); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09); backdrop-filter: blur(6px); transition: background 0.3s var(--ease), transform 0.3s var(--ease); }
.project-play .play-ring::after { content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%); border-left: 1.1rem solid #fff; border-top: 0.65rem solid transparent; border-bottom: 0.65rem solid transparent; transition: border-left-color 0.3s var(--ease); }
.project-play:hover .play-ring { background: #fff; transform: scale(1.06); }
.project-play:hover .play-ring::after { border-left-color: #111; }
/* inline variant: normal white header, hero the same height as the home reel, player plays in place, gradient rule beneath */
.project-hero--inline { height: calc(75svh - var(--header-h)); min-height: 21rem; overflow: hidden; display: grid; place-items: center; }
.project-hero--inline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); opacity: 0.85; z-index: 2; }
.project-hero--inline .project-hero-text { position: relative; left: auto; top: auto; transform: none; padding-bottom: 8rem; }
.project-hero--inline .project-play { position: absolute; left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
/* title and client as one unit on the left; the subheader leads the story on the right, like the home statement */
.project-intro { display: grid; gap: 0.75rem; align-content: start; --client-gap: 0.6rem; }   /* the client sits about a tenth of the title block further down (Chris 2026-09-19) */
.project-intro .client { margin-top: var(--client-gap, 0); }   /* Client caps style, a touch further from the title (Chris 2026-09-19, 2026-09-28) */
.project-brief { --ink: #f9f9f9; --paper: #111111; --white: #161616; --hairline: rgba(249, 249, 249, 0.14); --hairline-strong: rgba(249, 249, 249, 0.35); --muted: rgba(249, 249, 249, 0.68); background: var(--paper); color: var(--ink); }
/* light variant of the brief: off-white ground, dark text; the play ring goes dark so it still reads where it overlaps */
.project-brief.is-light { --ink: #111111; --paper: #f9f9f9; --white: #ffffff; --hairline: rgba(17, 17, 17, 0.12); --hairline-strong: rgba(17, 17, 17, 0.3); --muted: rgba(17, 17, 17, 0.72); }
.project-hero:not(.project-hero--inline):has(+ .project-brief.is-light) .project-play .play-ring { border-color: #111; background: rgba(17, 17, 17, 0.55); }
.project-hero:has(+ .project-brief.is-light) .project-play:hover .play-ring { background: #111; }
.project-hero:has(+ .project-brief.is-light) .project-play:hover .play-ring::after { border-left-color: #fff; }
.project-brief .statement-copy .t-body { color: var(--muted); }
.credits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
/* a named group spans the full width and its list flows across the same three columns */
.credit-group { grid-column: 1 / -1; }
.credit-group-title { margin-bottom: var(--s-3); color: var(--muted); }   /* group names in the Label style, a level under the Credits title (Chris 2026-09-28) */
.credit-list { display: grid; gap: 0.5rem; font-size: var(--t-small); line-height: 1.5; }
.credit-list--flow { grid-column: 1 / -1; display: block; columns: 3; column-gap: var(--s-4); }
.credit-list--flow li { break-inside: avoid; margin-bottom: 0.5rem; }
.credit-list .role { color: var(--ink); font-weight: 700; }
.credit-list .role::after { content: ":"; }
.credit-list .name { color: var(--muted); }
@media (max-width: 900px) { .credits { grid-template-columns: 1fr; } .credit-list--flow { columns: 2; } }
@media (max-width: 720px) { .credit-list--flow { columns: 1; } }

/* ---------- style guide page ---------- */
.sg-type { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.sg-row { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--hairline); align-items: start; }
.sg-meta { display: grid; gap: 0.35rem; font-size: var(--t-label); color: var(--muted); }
.sg-meta code, .sg-swatch code, .sg-cap code { font: 0.8rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.sg-meta span:not(.t-label) { font-size: 0.875rem; letter-spacing: 0; text-transform: none; line-height: 1.4; }
.sg-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.sg-chip { aspect-ratio: 3 / 2; margin-bottom: var(--s-2); }
.sg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.sg-cell { padding: var(--s-4); border: 1px solid var(--hairline); }
.sg-cell.sg-dark { --ink: #f9f9f9; --paper: #111111; --white: #161616; --hairline: rgba(249,249,249,.14); --hairline-strong: rgba(249,249,249,.35); --muted: rgba(249,249,249,.68); background: var(--paper); color: var(--ink); border-color: transparent; }
.sg-cap { color: var(--muted); margin-bottom: var(--s-3); }
.sg-note { margin-top: var(--s-3); }
.sg-spacing { display: flex; align-items: end; gap: 0.5rem; margin: 1rem 0; }
.sg-spacing i { display: block; height: 1rem; background: var(--ink); }
.sg-list { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.sg-item { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--hairline); }
.sg-item .t-body { max-width: 62ch; }
@media (max-width: 900px) { .sg-row, .sg-item { grid-template-columns: 1fr; gap: var(--s-2); } .sg-swatches, .sg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .sg-swatches, .sg-grid { grid-template-columns: 1fr; } }

/* ---------- hero treatment: Home and project pages run edge to edge with the gradient rule;
   Company and the capability pages sit inside the gutters, flush with the page text ---------- */
.hero-media { margin-inline: var(--gutter); }
.full-image { width: calc(100% - 2 * var(--gutter)); margin-inline: var(--gutter); }
.hero-media .full-image { width: 100%; margin-inline: 0; }   /* the section already provides the gutter; no double inset */

/* ---------- reveal ---------- */
.reveal { transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
html.io .reveal:not(.in) { opacity: 0; transform: translateY(18px); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .statement, .callout-inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .cap-body { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .cap-body .cap-aside { grid-column: 2; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-inner > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  :root { --header-h: 4rem; --t-display: 2.25rem; --t-heading: 1.875rem; --t-title: 1.5rem; --t-lede: 1.1875rem; --t-body: 1.03125rem; --s-section: 2rem; }   /* phone scale (Chris 2026-09-28): Display 36, Heading 30, Title 24, Lede 19 (a clear step over Body), Body 16.5; sections 32px instead of 53 */
  .statement { gap: var(--s-2); }   /* splash headline to first paragraph about 40% closer on phone */
  .statement .t-display { font-size: 2.7rem; line-height: 1.03; max-width: 9em; }   /* the home splash headline alone: 20% over the other page titles (43px), three lines at 375 to 430 (Chris 2026-09-28) */
  .page-head .eyebrow { margin-bottom: 0.125rem; }   /* eyebrow to title 14px on phone: the 12px head gap plus a hair, instead of the desktop pull-up */
  .work { padding-block: var(--s-1); }
  .section-head { margin-bottom: 0.75rem; }   /* section head hairline to content about half the desktop gap on phone */
  .t-lede { line-height: 1.4; }
  .t-client { font-size: 0.875rem; }   /* client caps 14px on phone: 70% of the 20px it replaced */
  .project-intro { gap: 0; --client-gap: 0.7rem; }   /* title and client read as one block on phone: 11px apart (Chris 2026-09-28) */
  .project-brief .statement { gap: 1.9rem; }   /* and that block stands 40px clear of the headline lede; the home splash keeps its own gap */
  .logo { height: 1.445rem; }   /* 85% of the 1.7rem it was: the mark a touch smaller on phone (Chris 2026-09-28) */
  .header-word { height: 0.8rem; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; justify-self: end; width: 44px; height: 44px; padding: 0; margin-inline-end: -11px; }   /* icon only: three equal lines, 22px wide, 2px stroke, 5px apart, an X when open; 44px tap box, icon flush with the right gutter (Chris 2026-09-28) */
  .menu-btn .bars { width: 22px; height: 16px; position: relative; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; color: var(--ink); transition: background-size 0.2s var(--ease); }
  body.menu-open .menu-btn .bars { background-size: 0 2px; }
  .menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink); transition: transform 0.3s var(--ease); }
  .menu-btn .bars::before { top: 0; } .menu-btn .bars::after { bottom: 0; }
  body.menu-open .menu-btn .bars::before { transform: translateY(7px) rotate(45deg); }
  body.menu-open .menu-btn .bars::after { transform: translateY(-7px) rotate(-45deg); }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; width: 100%; z-index: 40;   /* explicit width: as a grid child Chrome sized the panel 63px short on the left, showing the page behind it */
    background: var(--white);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s-3) var(--gutter);
    transform: translateX(100%); visibility: hidden;
    transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
    overflow: auto;
  }
  body.menu-open .nav { transform: none; visibility: visible; transition-delay: 0s; }
  .nav > li { border-bottom: 1px solid var(--hairline); }
  .nav a, .nav button { width: 100%; justify-content: space-between; padding-block: 1.1rem; font-size: 1.125rem; letter-spacing: 0.1em; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 0.75rem 0; }   /* capability links flush with the section links (Chris 2026-09-28) */
  .dropdown a { padding-block: 0.6rem; padding-inline: 0; font-size: 1.125rem; letter-spacing: 0; text-transform: none; }   /* mixed-case capability links without the label tracking (Chris 2026-09-28) */
  .nav .chev { display: none; }
  .hero video, .hero-embed { height: calc(41.5svh - var(--header-h)); min-height: 11rem; }   /* phone only: half the desktop height so the page shows on first landing (Chris 2026-09-28) */
  .project-hero--inline { height: calc(45svh - var(--header-h)); min-height: 12.6rem; }   /* phone only: 60% of the desktop 75svh (halved, then 20% taller, Chris 2026-09-28) */
  .project-play { gap: 0.7rem; }
  .project-play .t-label { font-size: 0.6875rem; }
  .project-play .play-ring { width: 3.75rem; height: 3.75rem; }   /* play mark 25% smaller on phone */
  .project-play .play-ring::after { border-left-width: 0.85rem; border-top-width: 0.5rem; border-bottom-width: 0.5rem; }
  .project-play::before { width: 13rem; height: 13rem; top: 1.9rem; }
  .cap-btn { grid-template-columns: var(--cap-col) minmax(0, 1fr) auto; gap: 0.75rem; }   /* tighter icon and plus gutters so "Live Event Production" holds one line at 375 (Chris 2026-09-28) */
  .cap-btn .idx { font-size: var(--t-title); }
  .cap-btn .name { font-size: var(--t-title); }
  :root { --cap-col: calc(var(--t-title) + 1rem); }
  .cap-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* phone: the four category tiles as a 2 by 2 grid, same gap (Chris 2026-10-29) */
  .cap-cat { aspect-ratio: 1 / 1; }   /* square-ish on phone; the photo's focus point still picks the crop */
  .work-meta { grid-template-columns: 1fr; gap: var(--s-1); }
  .work { --slide: 86vw; }
  .work .work-meta { grid-template-columns: 1fr; }
  .work-logo { max-height: 3rem; max-width: 7rem; margin-bottom: 0.6rem; }
.work .work-meta .link-arrow { display: none; }
  /* phone footer as a compact block (Chris 2026-09-28): logo and social icons on one row, Studio, then Capabilities and Explore side by side,
     headings in the Label style, lines in Small, 24px between blocks, 2rem above like every other section */
  .footer-inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.75rem var(--s-4); text-align: left; padding-block: var(--s-section) var(--s-4); }   /* 28px between groups; the Capabilities column a little wider so "Live Event Production" holds one line at 375 */
  .footer-inner > :first-child { display: contents; }
  .footer .logo-foot { order: 1; grid-column: 1 / -1; height: 4.125rem; justify-self: center; }   /* 66px lockup centred on its own row (Chris 2026-09-28) */
  .footer .social { order: 2; grid-column: 1 / -1; justify-content: center; margin-top: calc(1rem - var(--s-3)); gap: 0.5rem; }   /* icons centred on the row under the logo, 16px below it whatever the row gap */
  .footer-inner > :nth-child(2) { order: 3; grid-column: 1 / -1; }
  .footer-inner > :nth-child(3) { order: 4; }
  .footer-inner > :nth-child(4) { order: 5; }
  .footer .t-title { font-size: var(--t-small); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; color: var(--ink); margin-bottom: 0.75rem; }   /* 15px caps in the block's ink so each heading leads its group */
  .footer-inner > :nth-child(2) ul { gap: 0.375rem; }   /* Studio lines: Small, muted, 6px apart */
  .footer-inner > :nth-child(3) ul, .footer-inner > :nth-child(4) ul { gap: 0.625rem; font-size: 1rem; }   /* link columns: 16px, 10px apart */
  .footer .footer-address { margin-top: 0.125rem; }
  /* phone footer (Chris 2026-09-28, kept after trial): no link columns, the Studio lines and copyright centred under the centred logo and icons, 24px between groups */
  .footer-inner { row-gap: var(--s-3); }
  .footer-inner > :nth-child(3), .footer-inner > :nth-child(4) { display: none; }
  .footer-inner > :nth-child(2) { text-align: center; }
  .footer-inner > :nth-child(2) .t-title { display: none; }   /* no STUDIO heading on phone: the lines sit straight under the icons */
  /* contact page on phone: the form first under the heading, then photo, Studio, Get in touch and Careers; their headings take the footer's label style (Chris 2026-09-28) */
  .contact--page > div { display: contents; }   /* the heading and the aside share a wrapper; on phone they become grid items so the form can sit between them */
  .contact--page h1 { order: -2; margin-bottom: 0; }
  .contact .form { order: -1; }
  .contact-aside .t-title { font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; color: var(--muted); }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; }   /* centred with the rest of the phone footer (Chris 2026-09-28) */
  .cap-body { grid-template-columns: minmax(0, 1fr); }
  .cap-body .accent { display: none; }
  .cap-body .cap-aside { grid-column: auto; }
  .work .work-media img.work-logo, .grid--hover .work-media img.work-logo,
  .work .work-media img.work-logo[src$="ford.png"], .grid--hover .work-media img.work-logo[src$="ford.png"] { max-width: 3rem; max-height: 2rem; }   /* the Ford exception's attribute selector outranked this cap on phone, so the script ran 40% of the tile (Chris 2026-09-28) */
  /* page heads on phone: heading to lede about 40% closer; the head's own padding already runs at 85% of the 2rem phone section (Chris 2026-09-28) */
  .callout { padding-block: 3rem; }   /* the call to action gets 48px above and below on phone, 1.5x the section token, heading-to-button gap as it was (Chris 2026-09-28) */
  .page-head { gap: 0.75rem; }
  /* work grid and home showcase tiles on phone: caption under the image, plain 16:9 thumbnail, bold title then muted client, no scrim, no label (Chris 2026-09-28) */
  .grid--hover { row-gap: 1.25rem; }
  .grid--hover .work-meta, .work .work-meta { position: static; padding: 0.75rem 0 0; color: var(--ink); background: none; opacity: 1; gap: 0.15rem; transform: none; }
  html.io .grid--hover .work-item.reveal:not(.in) .work-meta { opacity: 1; transform: none; }
  .grid--hover .work-meta .t-title-bold, .work .work-meta .t-title-bold { font-size: 1.125rem; line-height: 1.25; }
  .grid--hover .work-meta .client, .work .work-meta .client { font-size: var(--t-small); color: var(--muted); letter-spacing: 0; text-transform: none; margin-top: 0; }
  .grid--hover .work-meta .link-arrow { display: none; }
  .more-item { padding: var(--s-2) 0; gap: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}