/* XPOSRE Media. Black, condensed capitals, yellow highlight blocks, photos inside the
   logo's viewfinder brackets. Every photo sits next to words that say something. */
@font-face { font-family: "Bebas Neue"; src: url("/assets/fonts/bebas-neue.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #000;
  --surface: #111113;
  --line: #1f1f22;
  --text: #f2f1ec;
  --soft: #c9c7c0;
  --muted: #8f8e88;
  --y: #ffd854;
  --ink: #0b0b0b;
  --pill: #2b2b2e;
  --tbc: #5ee6ff;
  --wrap: 1200px;
  --display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.7 var(--font); }
/* Photo brackets reach past their frames (wider while a frame "hunts" focus); never let them push the page sideways on phones */
main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--y); text-underline-offset: 4px; }
a:hover { color: var(--y); }
:focus-visible { outline: 2px solid var(--y); outline-offset: 3px; }
p { margin: 0 0 1em; }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 20; background: var(--y); color: var(--ink); padding: 0.5rem 1rem; }

/* Type */
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; }
h1 { font-size: clamp(2.8rem, 7.2vw, 6.4rem); line-height: 0.95; }
h1 .accent, .accent { color: var(--y); }
h2 { font-size: clamp(2.4rem, 4.8vw, 4.2rem); line-height: 1.12; margin-bottom: 1.4rem; }
h3 { font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1.05; margin-bottom: 0.6rem; }
.kicker { font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.1rem; }
.lead { color: var(--soft); font-weight: 300; font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 58ch; }

/* Yellow highlight block behind a heading (the GPJ device, in XPOSRE yellow) */
/* Plain heading: white letters with a small yellow label above (most section headings); the yellow block is kept for the few that matter most */
h2.plain .h-label { display: block; font-family: var(--font); font-size: 0.75rem; font-weight: 600; line-height: 1; letter-spacing: 0.3em; color: var(--y); margin-bottom: 1rem; }
.hl { display: inline; color: var(--ink); background: var(--y); padding: 0.02em 0.18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Viewfinder frame: the logo's brackets, offset outside the photo */
.vf { position: relative; margin: 0; }
.vf::before { content: ""; position: absolute; inset: var(--vf-out, -14px); z-index: 1; pointer-events: none;
  --c: var(--vf-c, var(--y)); --l: var(--vf-l, 44px); --w: var(--vf-w, 3px);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w), linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w), linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w), linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w), linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l);
  background-repeat: no-repeat; }
.vf img { width: 100%; height: 100%; object-fit: cover; }
.vf.sm { --vf-out: -8px; --vf-l: 22px; --vf-w: 2px; }

/* Preview marking: wording that still needs Aram's approval */
.preview-bar { background: var(--tbc); color: #04222a; text-align: center; font-size: 0.85rem; padding: 0.4rem 1rem; }
mark.tbc { background: none; color: inherit; border-bottom: 1px dashed var(--tbc); }
mark.tbc::after { content: "*"; color: var(--tbc); }
.hl mark.tbc { border-color: var(--ink); }

/* Buttons: round pills. Gray by default, yellow for the main action. */
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0.7rem 1.5rem; border-radius: 999px; background: var(--pill); color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.95rem; border: 0; transition: background-color 0.2s, color 0.2s; }
.pill:hover { background: #3a3a3e; color: var(--text); }
.pill.y { background: var(--y); color: var(--ink); font-weight: 600; }
.pill.y:hover { background: #ffe48a; color: var(--ink); }

/* Request a quote: the camera is ready. A flash glint sweeps across the yellow, a soft
   "ready" ring pulses out, and on hover the logo's viewfinder brackets lock on and an
   arrow slides in. Pressing it fires a flash. The header copy keeps the glint only. */
.pill.quote { position: relative; isolation: isolate; gap: 0.5rem;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%) 160% 0 / 250% 100% no-repeat, var(--y);
  animation: q-glint 4.5s ease-in-out infinite, q-ready 2.6s ease-out infinite;
  transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1), box-shadow 0.2s, filter 0.15s; }
.pill.quote::after { content: "→"; display: inline-block; max-width: 0; opacity: 0; overflow: hidden; transform: translateX(-6px);
  transition: max-width 0.25s, opacity 0.2s, transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1); }
.pill.quote::before { content: ""; position: absolute; inset: -16px; z-index: -1; pointer-events: none; opacity: 0;
  --c: var(--y); --l: 12px; --w: 2px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w), linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w), linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w), linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w), linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l);
  background-repeat: no-repeat; transition: inset 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.2s; }
.pill.quote:hover, .pill.quote:focus-visible { background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%) 160% 0 / 250% 100% no-repeat, var(--y); transform: translateY(-2px); animation-duration: 1.6s, 2.6s; box-shadow: 0 8px 28px rgba(255, 216, 84, 0.45); }
.pill.quote:hover::before, .pill.quote:focus-visible::before { inset: -7px; opacity: 1; }
.pill.quote:hover::after, .pill.quote:focus-visible::after { max-width: 1.2em; opacity: 1; transform: none; }
.pill.quote:focus-visible { outline: none; }
.pill.quote:active { transform: translateY(0) scale(0.97); filter: brightness(1.35); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.6), 0 0 48px 12px rgba(255, 245, 200, 0.7); transition-duration: 0.05s; }
.site-nav .pill.quote { animation: q-glint 4.5s ease-in-out infinite; }
@keyframes q-glint { 0%, 55% { background-position: 160% 0, 0 0; } 85%, 100% { background-position: -60% 0, 0 0; } }
@keyframes q-ready { 0% { box-shadow: 0 0 0 0 rgba(255, 216, 84, 0.55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(255, 216, 84, 0); } }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.wordmark { line-height: 0; }
.wordmark img { height: 44px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 1.75rem; }
.site-nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.site-nav ul a { text-decoration: none; color: var(--soft); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.site-nav ul a:hover, .site-nav ul a[aria-current="page"] { color: var(--y); }
/* Locations dropdown (desktop): opens on hover, keyboard focus or click */
.site-nav .has-sub { position: relative; }
.sub-toggle { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--soft); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.sub-toggle::after { content: ""; display: inline-block; width: 0.38em; height: 0.38em; margin-left: 0.5em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.2em) rotate(45deg); }
.sub-toggle:hover, .has-sub.current > .sub-toggle { color: var(--y); }
.site-nav .sub { display: none; position: absolute; top: 100%; left: -1.25rem; min-width: 14rem; flex-direction: column; gap: 0; padding: 1.1rem 1.25rem 0.6rem; background: #000; border: 1px solid var(--line); border-top: 2px solid var(--y); }
.site-nav .sub a { display: block; padding: 0.55rem 0; white-space: nowrap; }
.has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub.open > .sub { display: flex; }
.has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.1rem; }
.site-nav .pill { white-space: nowrap; }
.nav-toggle { display: none; background: var(--pill); color: var(--text); border: 0; border-radius: 999px; padding: 0.6rem 1.2rem; font: inherit; font-size: 0.9rem; }
/* The menu button takes over before the menu items get crowded */
@media (max-width: 1200px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .site-nav { display: none; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #000; border-bottom: 1px solid var(--line); padding: 0.5rem 1.25rem 1.5rem; }
  .site-nav.open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a { display: block; padding: 0.95rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
  .site-nav .pill { margin-top: 1.25rem; }
  /* Phone menu: Locations shows as a small label with its markets listed under it */
  .sub-toggle { display: block; width: 100%; text-align: left; padding: 0.95rem 0 0.4rem; font-size: 0.72rem; letter-spacing: 0.25em; color: var(--y); pointer-events: none; }
  .sub-toggle::after { display: none; }
  .site-nav .sub { display: flex; position: static; min-width: 0; padding: 0; border: 0; background: none; }
  .site-nav .sub a { padding: 0.8rem 0 0.8rem 1rem; }
}

/* Home hero: one big framed photo with a button on it */
.hero { padding: 1.5rem 0 0; }
.hero .vf { aspect-ratio: 16 / 8; }
.hero .on-photo { position: absolute; left: 50%; bottom: 1.75rem; transform: translateX(-50%); z-index: 2; }
/* Photos keep their own orientation: no landscape-to-portrait crop on phones (a vertical phone hero needs its own image) */
@media (max-width: 700px) { .hero .vf { aspect-ratio: 3 / 2; } }
/* Two short lines under the hero, always stacked: what we do, then where (our four markets) */
.hero-tag { list-style: none; margin: 1.1rem 0 0; padding: 0; text-align: center; font-size: clamp(0.85rem, 1.4vw, 1rem); letter-spacing: 0.08em; text-transform: uppercase; }
.hero-tag li + li { margin-top: 0.4rem; }
@media (max-width: 700px) { .hero-tag { margin-top: 1.4rem; font-size: 0.74rem; letter-spacing: 0.05em; } .hero-tag li span { display: block; } .hero-tag li span + span { margin-top: 0.4rem; } .hero-tag .sep { display: none; } }

/* Statement */
.statement { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.statement .media { aspect-ratio: 3 / 2; }
.statement .media.portrait { aspect-ratio: 2 / 3; width: min(100%, 440px); justify-self: end; }
/* The vertical photo stays beside the text down to tablet width; on phones it stacks and fills the width */
@media (max-width: 600px) { .statement { grid-template-columns: 1fr; } .statement .media.portrait { width: 100%; justify-self: stretch; } }
/* How we work: four short facts in one row under the statement, numbered like the section kickers */
.facts-row { padding: 0 0 clamp(3rem, 7vw, 5rem); }
.facts-row .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); border-top: 0; }
.facts-row .facts li { border-top: 1px solid var(--line); border-bottom: 0; }
@media (max-width: 1040px) { .facts-row .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .facts-row .facts { grid-template-columns: 1fr; } }
.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: fact; }
.facts li { counter-increment: fact; display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.facts li::before { content: counter(fact, decimal-leading-zero); grid-row: span 2; font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--y); }
.facts strong { font-family: var(--display); font-weight: 400; font-size: 1.45rem; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; }
.facts span { color: var(--soft); font-weight: 300; font-size: 0.95rem; margin-top: 0.2rem; }
.statement h1 { max-width: 15ch; }
/* Stacked (no photo beside it): let the headline use the full width instead of five short lines */
@media (max-width: 960px) { .statement h1 { max-width: none; } }
.statement .lead { margin-top: 1.5rem; }

/* Client logo ticker: a running line under the statement */
.ticker { padding: clamp(2rem, 4vw, 3rem) 0 0; overflow: hidden; }
.ticker .kicker { margin-bottom: 1.6rem; }
.ticker-track { display: flex; width: max-content; animation: ticker 45s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; align-items: center; gap: clamp(3rem, 6vw, 5rem); list-style: none; margin: 0; padding: 0 clamp(1.5rem, 3vw, 2.5rem); }
.ticker-list img { display: block; width: auto; opacity: 0.75; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (max-width: 700px) { .ticker-list img { transform: scale(0.85); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { width: auto; justify-content: center; }
  .ticker-list { flex-wrap: wrap; justify-content: center; row-gap: 2rem; }
  .ticker-list[aria-hidden="true"] { display: none; }
}

/* Zig-zag rows: words on one side, framed photo on the other */
/* Service rows: the photo gets about 60% of the width (the photos are what we sell), on whichever side it sits */
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; padding: clamp(3rem, 7vw, 5.5rem) 0; }
.row.flip { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.row.flip .media { order: -1; }
/* Landscape photos keep their own 3:2 shape, no crop */
.row .media { aspect-ratio: 3 / 2; }
.row p { color: var(--soft); font-weight: 300; max-width: 48ch; }
@media (max-width: 860px) { .row, .row.flip { grid-template-columns: 1fr; } .row .media, .row.flip .media { order: -1; } }

/* Captioned photo grid (Work, page galleries) */
.captioned { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.captioned figure { margin: 0; }
.captioned .vf { aspect-ratio: 3 / 2; }
.captioned figcaption { margin-top: 1.1rem; }
.captioned .t { font-family: var(--display); font-size: 1.6rem; line-height: 1; text-transform: uppercase; }
.captioned .m { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 0.45rem; }
@media (max-width: 960px) { .captioned { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .captioned { grid-template-columns: 1fr; } }

/* Sections */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.section-head h2 { margin: 0; }
.final { padding: clamp(4rem, 9vw, 7rem) 0; text-align: center; border-top: 1px solid var(--line); }
.final h2 { font-size: clamp(2.6rem, 6vw, 5.2rem); }
.final p { color: var(--soft); font-weight: 300; max-width: 46ch; margin: 0 auto 2rem; }

/* Inner page top: title and words, then one big framed photo */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1.5rem 0 0; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: #3a3a3e; }
.crumbs a { color: var(--muted); text-decoration: none; }
.page-top { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.page-top h1 { max-width: 16ch; font-size: clamp(2.6rem, 6.4vw, 5.6rem); }
.page-top .lead { margin-top: 1.4rem; }
/* Without a photo the headline gets the full width, so the top reads as one banner, not a half-empty row. */
.page-top:not(.has-photo) h1 { max-width: none; }
.page-top:not(.has-photo) .lead { max-width: 52rem; }
.page-top.has-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.page-top.has-photo h1 { font-size: clamp(2.6rem, 5vw, 4.8rem); }
@media (max-width: 960px) { .page-top.has-photo { grid-template-columns: 1fr; } }
.page-photo .vf { aspect-ratio: 3 / 2; }

/* Prose from Markdown: headings become highlight blocks */
.prose { padding: clamp(3rem, 7vw, 5rem) 0 1rem; }
.prose > * { max-width: 820px; }
.prose > .grid, .prose > .steps, .prose > table { max-width: none; }
/* Client quotes, credited by role only: the first one large across the full width with an oversized
   yellow quote mark, the rest two to a row in readable type */
.prose > .quotes { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin: 1.5rem 0 2rem; }
.quote { margin: 0; padding: clamp(1.5rem, 3vw, 2rem); background: var(--surface); }
.quote blockquote { margin: 0; color: var(--text); font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.55; }
.quote figcaption { margin-top: 1.1rem; display: flex; align-items: center; gap: 0.75rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.quote figcaption::before { content: ""; width: 1.5rem; height: 2px; background: var(--y); flex: none; }
.quotes .quote:first-child { grid-column: 1 / -1; position: relative; padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4rem) clamp(1.75rem, 4vw, 2.75rem); }
.quotes .quote:first-child::before { content: "\201C"; position: absolute; top: clamp(-1.5rem, -2vw, -1rem); left: clamp(0.75rem, 3vw, 2.5rem); font-family: var(--display); font-size: clamp(6rem, 12vw, 10rem); line-height: 1; color: var(--y); }
.quotes .quote:first-child blockquote { font-family: var(--display); font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.05; text-transform: uppercase; }
@media (max-width: 700px) { .prose > .quotes { grid-template-columns: 1fr; } }
/* Headshots: vertical photos in vertical frames (no crop), one row on wide screens; the station photo keeps its 3:2 */
.prose > .headshots { max-width: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); margin: 1.5rem 0 2.5rem; }
.headshots .vf { aspect-ratio: 2 / 3; }
/* A text section laid out like the homepage rows (text left, photo right), so a photo never sits beside an empty column */
.prose > .row { grid-column: 1 / -1; max-width: none; padding: 0; margin-top: 3rem; }
.prose .row h2 { margin-top: 0; }
@media (max-width: 860px) { .prose > .row .media { order: 0; } }
@media (max-width: 960px) { .prose > .headshots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .prose > .headshots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Wide screens: section heading on the left, its text on the right, so text sections use the full width */
@media (min-width: 1040px) {
  .prose { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .prose > * { grid-column: 2; max-width: 760px; }
  .prose > h2 { grid-column: 1; margin-top: 3rem; }
  .prose > h2 + * { margin-top: 3rem; }
  .prose > h2:first-child, .prose > h2:first-child + * { margin-top: 0; }
  .prose > .grid, .prose > .steps, .prose > table, .prose > .headshots, .prose > .quotes { grid-column: 1 / -1; max-width: none; }
  .prose > h2:has(+ .qband) { grid-column: 1 / -1; }
  /* A heading above a full-width block spans the width too, so it never sits beside an empty column */
  .prose > h2:has(+ .grid, + .steps, + table, + .headshots, + .quotes, + .areas) { grid-column: 1 / -1; }
  /* An opening paragraph before the first heading reads across the full width, larger */
  .prose > p.intro { grid-column: 1 / -1; max-width: 60rem; }
}
.prose > p.intro { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.6; color: var(--text); font-weight: 300; }
.photo-todo { aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 2rem; text-align: center; background: #0d0d0f; }
.prose h2 { margin-top: 3rem; }
.prose h2:first-child { margin-top: 0; }
.prose h2 > span.hl { font-size: inherit; }
.prose p, .prose li { color: var(--soft); font-weight: 300; }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--y); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: 0.95rem; }
.prose th, .prose td { text-align: left; padding: 0.95rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--soft); font-weight: 300; }
.prose th { color: var(--muted); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; }
.prose td:first-child { color: var(--text); font-weight: 500; }
@media (max-width: 640px) {
  .prose table, .prose tbody, .prose tr, .prose td { display: block; width: 100%; }
  .prose thead { display: none; }
  .prose tr { border-bottom: 1px solid var(--line); padding: 0.9rem 0; }
  .prose td { border: 0; padding: 0.15rem 0; }
  .prose td:first-child { font-family: var(--display); font-size: 1.4rem; text-transform: uppercase; }
}

/* Card grid used in Markdown pages */
/* Boxes wrap in rows and a short last row stretches to the full width, so no row ever ends in an
   empty gray cell, whatever the number of boxes or the screen width. Six boxes keep 3 × 2 (below). */
.grid { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 1.5rem 0 2rem; }
.grid > * { flex: 1 1 230px; min-width: 0; background: var(--bg); padding: 1.75rem 1.5rem; }
.grid h3 { color: var(--y); }
/* Six boxes: three columns on wide screens, two on tablets, so no box sits alone on a row */
@media (min-width: 701px) { .grid:has(> :nth-child(6):last-child) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 701px) and (max-width: 960px) { .grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid p { color: var(--muted); font-weight: 300; margin: 0; }
.grid p.venues { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--soft); font-size: 0.92rem; }
a.cell { display: block; text-decoration: none; transition: background-color 0.2s; }
a.cell:hover { background: var(--surface); color: var(--text); }
.more { display: inline-block; margin-top: 1rem; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--y); text-decoration: none; }
.steps { list-style: none; counter-reset: step; padding: 0; }
.steps li { counter-increment: step; }
.steps li::before { content: "[ " counter(step, decimal-leading-zero) " ]"; display: block; color: var(--y); font-size: 0.75rem; letter-spacing: 0.3em; margin-bottom: 0.9rem; }

/* Location links */
.pill-list { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }

/* FAQ */
.faq { padding: 1rem 0 clamp(3rem, 7vw, 5rem); }
.faq > * { max-width: 820px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 1.2rem 2.5rem 1.2rem 0; font-weight: 500; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "[+]"; position: absolute; right: 0; top: 1.2rem; color: var(--y); font-size: 0.85rem; }
.faq details[open] summary::after { content: "[–]"; }
.faq-a { padding: 0 0 1.4rem; color: var(--soft); font-weight: 300; }

/* Form */
.form-notice { border: 1px dashed var(--tbc); padding: 1rem 1.25rem; margin-bottom: 1.75rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; border: 0; padding: 0; margin: 0; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
label { display: block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--soft); margin-bottom: 0.45rem; }
.opt { color: var(--muted); letter-spacing: 0.1em; text-transform: none; }
input, select, textarea { width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid #2a2a2e; border-radius: 0; padding: 0.75rem 0.85rem; min-height: 48px; }
textarea { min-height: 150px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--y); outline-offset: 1px; border-color: transparent; }
fieldset:disabled { opacity: 0.6; }
.hp { position: absolute; left: -9999px; }
.fine { font-size: 0.85rem; color: var(--muted); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 3.5rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }
.footer-h { font-family: var(--font); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.24em; color: var(--muted); margin-bottom: 1rem; line-height: 1.4; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer li a { text-decoration: none; color: var(--soft); font-size: 0.92rem; }
.site-footer .wordmark img { height: 48px; margin-bottom: 1rem; }
.site-footer p { color: var(--muted); font-size: 0.92rem; }
.footer-base { border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.5rem; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Moving words over the hero photo: "Every" stays put; the word after it
   changes. Both are yellow outlines; the last word fills solid yellow. Six words, 3s each: an 18s loop. */
/* Shade only the lower part, behind the words and button; the rest of the photo stays at full brightness */
.hero-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.18) 32%, rgba(0, 0, 0, 0) 55%); pointer-events: none; }
.hero-words { display: flex; position: absolute; left: clamp(1.25rem, 4vw, 3rem); right: 1.25rem; bottom: clamp(5.5rem, 10vw, 7rem); z-index: 2; height: 1em; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7)); font-family: var(--display); text-transform: uppercase; font-size: clamp(3rem, 9vw, 8.5rem); line-height: 1; }
.hw-fixed, .hw-swap i { color: transparent; -webkit-text-stroke: 3px var(--y); background: linear-gradient(100deg, transparent 38%, var(--y) 50%, transparent 62%) no-repeat 100% 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; }
.hw-swap i { background-image: linear-gradient(100deg, transparent 30%, var(--y) 50%, transparent 70%); background-size: 300% 100%; }
.hw-fixed { margin-right: 0.22em; white-space: nowrap; animation: hw-sweep 3s infinite; }
/* With every new word, one band of yellow light runs through the whole line:
   across "Every" in its first 0.5s, then on through the word letter by letter */
@keyframes hw-sweep { 0% { background-position: 100% 0; } 17%, 100% { background-position: 0 0; } }
@keyframes hw-sweep-letter { 0% { background-position: 100% 0; } 1.5%, 100% { background-position: 0 0; } }
.hw-swap { position: relative; flex: 1; height: 1em; }
/* Each word is split into letters. Letters arrive one after another out of
   focus and oversized, snap sharp with a flash (like a camera locking focus
   and firing), hold, then lift away. Each word owns 3s of the loop. */
.hw-swap > span { --d: 0s; position: absolute; left: 0; bottom: 0; display: flex; white-space: nowrap; }
.hw-swap > span.gold i { color: var(--y); }
.hw-swap i { display: inline-block; font-style: normal; opacity: 0; animation: hw-letter 18s infinite both, hw-sweep-letter 18s infinite; animation-delay: calc(var(--d) + var(--i) * 0.055s), calc(var(--d) + 0.45s + var(--i) * 0.09s); }
.hw-swap > span:nth-child(2) { --d: 3s; }
.hw-swap > span:nth-child(3) { --d: 6s; }
.hw-swap > span:nth-child(4) { --d: 9s; }
.hw-swap > span:nth-child(5) { --d: 12s; }
.hw-swap > span:nth-child(6) { --d: 15s; }
@keyframes hw-letter {
  0% { opacity: 0; filter: blur(14px) drop-shadow(0 0 0 rgba(255, 255, 255, 0)); transform: translateY(0.18em) scale(1.45); }
  3% { opacity: 1; filter: blur(0) drop-shadow(0 0 0.3em rgba(255, 255, 255, 0.9)); transform: none; }
  5.4%, 13.75% { opacity: 1; filter: blur(0) drop-shadow(0 0 0 rgba(255, 255, 255, 0)); transform: none; }
  15.4%, 100% { opacity: 0; filter: blur(8px) drop-shadow(0 0 0 rgba(255, 255, 255, 0)); transform: translateY(-0.3em); }
}
@media (max-width: 700px) { .hero-words { font-size: clamp(2.6rem, 13vw, 4rem); bottom: 5.25rem; } .hw-fixed, .hw-swap i { -webkit-text-stroke-width: 2px; } }
@media (prefers-reduced-motion: reduce) {
  .hw-swap i, .hw-fixed { animation: none !important; }
  .hw-swap > span:first-child i { opacity: 1; }
}

/* Video loops: same frame as photos, a small label and a pause button */
.clip { aspect-ratio: 16 / 9; background: #111; }
.clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip .cap { position: absolute; left: 0.9rem; top: 0.9rem; z-index: 2; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; background: rgba(0, 0, 0, 0.55); border-radius: 999px; padding: 0.3rem 0.75rem; }
.clip-btn { position: absolute; right: 0.9rem; bottom: 0.9rem; z-index: 2; font: inherit; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; padding: 0.45rem 0.9rem; cursor: pointer; }
.clip-btn:hover, .clip-btn:focus-visible { border-color: var(--y); color: var(--y); }
.clip-fig { margin: 0; }
.clip-fig figcaption { margin-top: 1.1rem; }
.clip-fig .t { font-family: var(--display); font-size: 1.6rem; line-height: 1; text-transform: uppercase; }
.clip-fig .m { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 0.45rem; }
.clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem clamp(3rem, 5vw, 4.5rem); }
.clips.one { grid-template-columns: minmax(0, 880px); }
@media (max-width: 760px) { .clips, .clips.one { grid-template-columns: 1fr; } }
.clips-intro { color: var(--soft); font-weight: 300; max-width: 58ch; margin: -1rem 0 2.5rem; }

/* Focus lock: when a photo comes into view the corners start wide and faint, hunt in and out
   once like autofocus, then lock; the photo sharpens as they lock. Only with JS; never hidden. */
.fx-focus .vf { --hunt: 34px; }
.fx-focus .vf.sm { --hunt: 22px; }
.fx-focus .vf > img, .fx-focus .vf > video { clip-path: inset(0); transition: filter 0.5s ease-out 0.25s; }
.fx-focus .vf:not(.locked)::before { inset: calc(var(--vf-out, -14px) - var(--hunt)); opacity: 0.3; }
.fx-focus .vf:not(.locked) > img { filter: blur(6px); }
.fx-focus .vf.locked::before { animation: af-lock 0.75s cubic-bezier(0.3, 0.7, 0.4, 1) both; }
@keyframes af-lock {
  0% { inset: calc(var(--vf-out, -14px) - var(--hunt)); opacity: 0.3; }
  40% { inset: calc(var(--vf-out, -14px) + var(--hunt) * 0.3); opacity: 1; }
  70% { inset: calc(var(--vf-out, -14px) - var(--hunt) * 0.15); }
  100% { inset: var(--vf-out, -14px); opacity: 1; }
}
@media (max-width: 700px) { .fx-focus .vf { --hunt: 18px; } .fx-focus .vf.sm { --hunt: 12px; } }
/* Corner glint: the "Request a quote" button's flash glint, run along the photo's yellow corners.
   A second layer is masked to the same eight bracket strokes and a white highlight sweeps across
   it. It starts only once the photo has locked into focus, each photo on its own random delay
   (site.js), so the corners never flash in unison. Hover runs it faster. Off with reduced motion. */
.vf::after { content: ""; position: absolute; inset: var(--vf-out, -14px); z-index: 2; pointer-events: none; opacity: 0;
  --l: var(--vf-l, 44px); --w: var(--vf-w, 3px);
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%) 160% 0 / 250% 100% no-repeat;
  --m: linear-gradient(#000, #000);
  -webkit-mask: var(--m) top left / var(--l) var(--w), var(--m) top left / var(--w) var(--l), var(--m) top right / var(--l) var(--w), var(--m) top right / var(--w) var(--l), var(--m) bottom left / var(--l) var(--w), var(--m) bottom left / var(--w) var(--l), var(--m) bottom right / var(--l) var(--w), var(--m) bottom right / var(--w) var(--l);
  -webkit-mask-repeat: no-repeat;
  mask: var(--m) top left / var(--l) var(--w), var(--m) top left / var(--w) var(--l), var(--m) top right / var(--l) var(--w), var(--m) top right / var(--w) var(--l), var(--m) bottom left / var(--l) var(--w), var(--m) bottom left / var(--w) var(--l), var(--m) bottom right / var(--l) var(--w), var(--m) bottom right / var(--w) var(--l);
  mask-repeat: no-repeat; }
.fx-focus .vf.locked::after { opacity: 1; animation: vf-glint 7s ease-in-out calc(0.8s + var(--glint-delay, 0s)) infinite; }
.fx-focus .vf.locked:hover::after { animation-duration: 2.4s; animation-delay: 0s; }
@keyframes vf-glint { 0%, 68% { background-position: 160% 0; } 92%, 100% { background-position: -60% 0; } }


/* REC mode: video clips show a recording light and running timecode instead of a label */
.clip .rec { display: inline-flex; align-items: center; gap: 0.5rem; font-variant-numeric: tabular-nums; }
.clip .rec::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 6px rgba(255, 59, 48, 0.8); animation: rec-blink 1.2s steps(1) infinite; }
.clip .rec.off::before { background: #8f8e88; box-shadow: none; animation: none; }
@keyframes rec-blink { 60% { opacity: 0.3; } }
html { overflow-x: clip; }
/* Footer "Where we work": each state with its areas indented under it (D-020) */
.site-footer .footer-areas { list-style: none; padding: 0 0 0 0.9rem; margin: 0.15rem 0 0.4rem; border-left: 1px solid var(--line); }

/* Feature layouts (Miami page first). Each block spans the full text width; every photo keeps
   the yellow focus corners (.vf) and its own 3:2 shape unless noted. */
.prose > section.section, .prose > .band, .prose > .feature, .prose > .trio, .prose > .sticky, .prose > .qband, .prose > .request-line, .prose > .areas { grid-column: 1 / -1; max-width: none; margin-top: clamp(3.5rem, 8vw, 6rem); }
.feature > h2, .trio h2, .sticky h2, .band h2 { margin-top: 0; }

/* A. Chapter band: one photo edge to edge, words over a dark fade; corners sit inside the photo */
.prose > .band { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
.band .vf { --vf-out: clamp(12px, 2vw, 24px); }
.band .vf img { aspect-ratio: 16 / 7; }
.band .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 42%, rgba(0,0,0,0) 68%); pointer-events: none; }
.band .band-text { position: absolute; z-index: 2; left: max(1.25rem, calc((100vw - var(--wrap)) / 2)); bottom: clamp(2rem, 6vw, 4.5rem); max-width: 34rem; }
.band .band-text p { color: var(--soft); font-weight: 300; margin: 0; }
.band .tag { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--y); margin-bottom: 1rem; }
@media (max-width: 760px) {
  .band .vf img { aspect-ratio: 3 / 2; }
  .band .shade { display: none; }
  .band .band-text { position: static; padding: 2rem 1.25rem 0; }
}

/* B. Film strip: numbered frames that read in order (day to night); swipes sideways on phones */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); margin: 1.75rem 0 2.5rem; }
.strip figure.vf { aspect-ratio: 3 / 2; }
/* Frame labels read as headlines: the event type in big white letters after its yellow number */
/* Label above each photo; labels share a row (subgrid) and sit on its bottom, so the photos line up even when a label wraps */
.strip { grid-template-rows: auto auto; }
.strip > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 1.1rem; }
.strip .frame-cap { align-self: end; }
.strip .frame-cap { display: flex; gap: 0.6rem; align-items: baseline; margin: 0; font-family: var(--display); font-size: clamp(1.6rem, 2.3vw, 2.1rem); line-height: 1; text-transform: uppercase; color: var(--text); }
.strip .frame-cap b { font-weight: 400; color: var(--y); }
.feature ul.cols { columns: 2; column-gap: 3rem; color: var(--soft); font-weight: 300; padding-left: 1.2rem; }
.feature ul.cols li { break-inside: avoid; margin-bottom: 0.5rem; }
@media (max-width: 860px) {
  .strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 10px 0; margin-inline: -10px; }
  .strip > div { scroll-snap-align: start; }
  .feature ul.cols { columns: 1; }
}

/* C. Photo trio: one big photo and two small ones stacked beside it, exactly as tall, with the
   heading and words in a row underneath. No gaps; every focus corner shows. */
.prose > .trio { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); }
.trio .big { grid-column: 1; grid-row: 1 / 3; }
.trio .big img { height: 100%; }
.trio .small { aspect-ratio: 3 / 2; }
.trio .words { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); column-gap: clamp(3rem, 6vw, 6rem); margin-top: clamp(1rem, 2vw, 1.5rem); }
.trio .words p { color: var(--soft); font-weight: 300; margin: 0; }
@media (max-width: 1039px) { .trio .words { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .prose > .trio { grid-template-columns: 1fr 1fr; }
  .trio .big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
}

/* D. Mosaic gallery: one large photo the size of four small ones, so every photo stays 3:2 */
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.mosaic figure.vf { aspect-ratio: 3 / 2; }
.mosaic .lg { grid-column: span 2; grid-row: span 2; }
.mosaic figcaption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 2.5rem 1rem 0.9rem; background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0)); font-family: var(--display); font-size: 1.35rem; line-height: 1; text-transform: uppercase; opacity: 0; transition: opacity .3s; }
.mosaic figcaption small { display: block; font-family: var(--font); font-size: 0.65rem; letter-spacing: 0.22em; color: var(--soft); margin-top: 0.35rem; }
.mosaic figure:hover figcaption, .mosaic figure:focus-within figcaption { opacity: 1; }
@media (hover: none), (max-width: 700px) { .mosaic figcaption { opacity: 1; } }
@media (max-width: 700px) { .mosaic { grid-template-columns: 1fr 1fr; } .mosaic .lg { grid-row: auto; } }

/* E. Words stay put while photos scroll past (wide screens) */
.prose > .sticky { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2.5rem, 5vw, 5rem); }
.sticky .pin { position: sticky; top: 7rem; align-self: start; }
.sticky .pin li { color: var(--soft); font-weight: 300; margin-bottom: 0.7rem; }
.sticky .shots { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.sticky .shots figure.vf { aspect-ratio: 3 / 2; }
.sticky .label { position: absolute; z-index: 2; top: 0.9rem; left: 0.9rem; background: var(--y); color: var(--ink); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.45rem 0.6rem; }
@media (max-width: 860px) { .prose > .sticky { grid-template-columns: 1fr; } .sticky .pin { position: static; } }

/* Highlighter wipe: on pages with plain headings, the few yellow-block headings sweep in once
   when they come into view (JS adds .wipe; never with reduced motion; the safety net shows them anyway). */
.js-reveal .hl.wipe { background: linear-gradient(var(--y), var(--y)) left / 0% 100% no-repeat; color: transparent; transition: background-size 0.7s cubic-bezier(0.65, 0, 0.25, 1), color 0.25s ease 0.5s; }
.js-reveal .hl.wipe.in { background-size: 100% 100%; color: var(--ink); }

/* Quote band: the headline client quote in big letters over a darkened photo, inside the focus corners.
   The photo sets the mood; it may come from the quoted client's own event. */
.qband { position: relative; margin: 0; }
.prose > .qband { margin: 1.5rem 0 0; }
.qband .vf { --vf-out: clamp(10px, 1.6vw, 18px); }
.qband .vf img { aspect-ratio: 16 / 7; filter: brightness(0.32) saturate(0.8); }
.qband .qtext { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; text-align: center; padding: 0 clamp(1.5rem, 8vw, 8rem); }
.qband .mark { font-family: var(--display); font-size: clamp(5rem, 10vw, 9rem); line-height: 0.55; color: var(--y); }
.qband blockquote { margin: 0; font-family: var(--display); text-transform: uppercase; font-size: clamp(2rem, 4.8vw, 4.2rem); line-height: 1.02; }
.qband blockquote .y { color: var(--y); }
.qband cite { display: block; margin-top: 1.4rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--soft); font-style: normal; }
/* Phones: the photo keeps its 3:2 shape (no portrait crop) and the quote stays on it, in smaller type */
@media (max-width: 760px) {
  .qband .vf img { aspect-ratio: 3 / 2; }
  .qband .qtext { padding: 0 1.25rem; }
  .qband .mark { font-size: 3.2rem; }
  .qband blockquote { font-size: clamp(1.3rem, 6vw, 2rem); }
  .qband cite { margin-top: 0.7rem; font-size: 0.62rem; letter-spacing: 0.15em; }
}
/* Even grid of quote cards (no featured first card), with the strongest words marked like a highlighter */
.quotes.even .quote:first-child { grid-column: auto; position: static; padding: clamp(1.5rem, 3vw, 2rem); }
.quotes.even .quote:first-child::before { content: none; }
.quotes.even .quote:first-child blockquote { font-family: var(--font); font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.55; text-transform: none; }
/* Three cards: one row on wide screens */
@media (min-width: 961px) { .prose > .quotes.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 701px) and (max-width: 960px) { .quotes.three .quote:last-child { grid-column: 1 / -1; } }
mark.k { background: linear-gradient(rgba(255, 216, 84, 0.38), rgba(255, 216, 84, 0.38)) left 100% / 100% 0.55em no-repeat; color: inherit; padding: 0 0.05em; }

/* Quote ticker: short client phrases running like the logo ticker, slower; still with reduced motion */
.qtick { overflow: hidden; border-block: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 1.75rem) 0; margin-top: clamp(3rem, 7vw, 5rem); }
.qtick-track { display: flex; width: max-content; animation: qtick 60s linear infinite; }
.qtick-track span { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1; padding: 0 clamp(1.25rem, 3vw, 2.25rem); white-space: nowrap; }
.qtick-track span::before { content: "\201C"; color: var(--y); margin-right: 0.12em; }
.qtick-track span::after { content: "\201D"; color: var(--y); margin-left: 0.08em; }
.qtick:hover .qtick-track { animation-play-state: paused; }
@keyframes qtick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .qtick-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 1rem; } .qtick-track .dup { display: none; } }

/* Request line: a slim call to action between sections */
.prose > .request-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding: clamp(1.25rem, 2.5vw, 1.6rem) clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-left: 3px solid var(--y); background: var(--surface); }
.request-line p { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05; text-transform: uppercase; }

/* Area list: one full-width row per area (name, what happens there, venues as tags), so rows size to
   their own content and no box ends in empty space */
.prose > .areas { margin-top: 0.5rem; border-top: 1px solid var(--line); }
.prose > h2:has(+ .areas) { margin-bottom: 0; }
.area { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); column-gap: clamp(2rem, 5vw, 5rem); row-gap: 0.75rem; padding: clamp(1.5rem, 3vw, 2.1rem) 0; border-bottom: 1px solid var(--line); align-items: start; }
.area h3 { font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1; color: var(--text); }
.area h3 small { display: block; font-family: var(--font); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.25em; color: var(--y); margin-bottom: 0.6rem; }
.area p { margin: 0 0 1rem; color: var(--soft); font-weight: 300; }
.area .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.area .tags li { border: 1px solid rgba(255, 216, 84, 0.55); color: var(--text); font-size: 0.85rem; padding: 0.35rem 0.8rem; border-radius: 999px; }
@media (max-width: 760px) { .area { grid-template-columns: 1fr; } }

/* Homepage video offer: the boxes sit between two intro lines, so they need their own spacing */
.video-offer { margin: 0 0 3rem; }

/* Data-driven contract sections (ARCHITECTURE.md §4): related services line, venue notes table, venue and guide pages */
.related { margin-top: 1.75rem; color: var(--soft); font-weight: 300; }
.related a { color: var(--text); }
.prose-table table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prose-table caption { caption-side: bottom; text-align: left; color: var(--muted); font-size: 0.8rem; padding-top: 0.9rem; }
.prose-table th, .prose-table td { text-align: left; padding: 0.95rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--soft); font-weight: 300; }
.prose-table thead th { color: var(--muted); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; }
.prose-table tbody th { color: var(--text); font-weight: 500; }
.prose-table tbody th small { display: block; color: var(--muted); font-weight: 300; margin-top: 0.2rem; }
.prose-table td a { color: var(--soft); }
@media (max-width: 700px) {
  .prose-table table, .prose-table tbody, .prose-table tr, .prose-table td, .prose-table tbody th { display: block; width: 100%; }
  .prose-table thead { display: none; }
  .prose-table td, .prose-table tbody th { padding: 0.5rem 0; border: 0; }
  .prose-table tr { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
}
.checked { color: var(--muted); font-size: 0.85rem; }
.prose > .answer { grid-column: 1 / -1; max-width: 60rem; border-left: 3px solid var(--y); padding: 0.2rem 0 0.2rem 1.25rem; }
.answer .intro { margin: 0; }
/* Borders on the items, not a gray grid background, so a short last row leaves no gray block */
.spec { display: flex; flex-wrap: wrap; margin: 0 0 2rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.spec > div { flex: 1 1 170px; min-width: 0; padding: 1rem 1.1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spec dt { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; }
.spec dd { margin: 0.35rem 0 0; color: var(--text); }
.prose caption { caption-side: bottom; text-align: left; color: var(--muted); font-size: 0.8rem; padding-top: 0.9rem; }
.prose > .checked { grid-column: 1 / -1; max-width: none; }
@media (max-width: 1200px) { .site-nav .sub a { white-space: normal; } }
@media (max-width: 700px) { .prose caption, .prose-table caption { display: block; width: 100%; } }
/* Homepage: three headshot portraits beside the headshots text (vertical frames, no crop) */
.hs-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); align-self: center; }
.hs-trio img { aspect-ratio: 2 / 3; width: 100%; height: auto; object-fit: cover; display: block; }
/* Homepage: the three markets as equal cards (D-026) */
.markets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.market { display: block; text-decoration: none; color: inherit; }
.market h3 { margin: 1.1rem 0 0.4rem; }
.market p { color: var(--soft); font-weight: 300; margin: 0; }
.market:hover h3, .market:focus-visible h3 { color: var(--y); }
@media (max-width: 860px) { .markets { grid-template-columns: 1fr; } }
/* Work page: jump links, headshots group (station photo beside six portraits), case-study cards */
.jump { padding-top: clamp(2rem, 5vw, 3rem); }
.hs-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: center; }
.hs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.hs-grid img { aspect-ratio: 2 / 3; width: 100%; height: auto; object-fit: cover; display: block; }
@media (max-width: 860px) { .hs-work { grid-template-columns: 1fr; } }
.cases { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2vw, 1.75rem); }
.cases > .case { flex: 1 1 280px; min-width: 0; }
.case h3 { margin: 1rem 0 0.75rem; }
.case h3 a { color: inherit; text-decoration: none; }
/* One case study on its own: photo beside the title and spec card, so neither stretches across the page */
@media (min-width: 861px) {
  .case:only-child { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
  .case:only-child > a:first-child { grid-row: 1 / span 2; }
  .case:only-child h3 { margin-top: 0; }
}

/* Quote form: full width on wide screens; section headings; checkbox rows; conditional groups */
.prose > .quote-form { grid-column: 1 / -1; max-width: 920px; }
.form-h { font-family: var(--display); font-size: 1.6rem; letter-spacing: 0.02em; margin: 1.25rem 0 0; padding: 0; color: var(--y); }
.form-grid .form-h:first-child { margin-top: 0; }
.form-grid .sub { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1rem; }
.label { display: block; margin-bottom: 0.5rem; }
.checks { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
.check { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; min-height: 0; padding: 0; accent-color: var(--y); }
.when[hidden] { display: none; }
/* Structured delivery: an example folder tree (D-034) */
.tree { margin: 0; border: 1px solid var(--line); background: var(--surface); padding: clamp(1.25rem, 3vw, 2rem); font-size: 0.95rem; }
.tree ul { list-style: none; margin: 0; padding-left: 1.25rem; border-left: 1px solid var(--line); }
.tree > ul { padding-left: 0; border-left: 0; }
.tree li { position: relative; padding: 0.3rem 0 0.3rem 0.4rem; color: var(--soft); font-weight: 300; }
.tree li::before { content: ""; position: absolute; left: -1.25rem; top: 0.95rem; width: 1rem; border-top: 1px solid var(--line); }
.tree > ul > li::before { content: none; }
.tree .dir > span { color: var(--text); font-weight: 500; }
.tree .dir > span::after { content: "/"; color: var(--y); margin-left: 0.15rem; }
.tree .dir > ul { margin-top: 0.3rem; }
.tree .dir > ul > li:not(.dir) { font-weight: 300; color: var(--soft); }
.tree figcaption { margin-top: 1rem; color: var(--muted); font-size: 0.8rem; }
.row .tree { align-self: center; }
.prose > .tree { grid-column: 2; }

/* Case studies: the delivery timeline and photos */
.timeline { list-style: none; margin: 0 0 1.5rem; padding: 0; border-left: 2px solid var(--y); }
.timeline li { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: 0.25rem 1.5rem; padding: 0.75rem 0 0.75rem 1.25rem; border-bottom: 1px solid var(--line); }
.timeline .when { color: var(--y); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; padding-top: 0.2rem; }
.timeline .what { color: var(--soft); font-weight: 300; }
@media (max-width: 640px) { .timeline li { grid-template-columns: 1fr; } }
.prose > .timeline { grid-column: 2; }
.prose > .case-photos { grid-column: 1 / -1; max-width: none; margin-top: 2.5rem; }

/* Guides hub */
.prose > .guide-list { grid-column: 1 / -1; max-width: none; display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.guide-card { flex: 1 1 280px; min-width: 0; padding: 1.75rem 1.5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guide-card h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 0.75rem; }
.guide-card h2 a { color: var(--text); text-decoration: none; }
.guide-card h2 a:hover { color: var(--y); }

/* Case studies: the delivery as folder cards (name, contents, count, sample photos) */
.prose > .folders { grid-column: 1 / -1; max-width: none; margin: 1rem 0 2rem; }
.folders-head { color: var(--text); display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; }
.folders-head strong { font-weight: 600; }
.folders ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.folders .folder { flex: 1 1 230px; min-width: 0; }
.folders .folder { margin: 0; padding: 1rem 1.1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--y); }
.folder-top { display: flex; align-items: center; gap: 0.55rem; }
.folder-name { color: var(--text); font-weight: 600; }
.folder-count { margin-left: auto; color: var(--y); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.folder-what { margin: 0.45rem 0 0; color: var(--soft); font-weight: 300; font-size: 0.92rem; }
.folder-samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.85rem; }
.folder-samples img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
/* A small folder glyph drawn in CSS: a tab on top of a rounded body */
.folder-icon { position: relative; flex: none; width: 18px; height: 13px; border: 1.5px solid var(--y); border-radius: 2px; margin-top: 3px; }
.folder-icon::before { content: ""; position: absolute; left: -1.5px; top: -5px; width: 8px; height: 4px; border: 1.5px solid var(--y); border-bottom: 0; border-radius: 2px 2px 0 0; }
.folders-note { color: var(--muted); font-size: 0.8rem; margin: 0.9rem 0 0; }

.folder-samples.portrait img { aspect-ratio: 2 / 3; }
/* Case-study spec card: full width with four columns on wide screens, so no column sits empty beside it */
.prose > .spec { grid-column: 1 / -1; max-width: none; }
.prose > .spec > div { flex-basis: 240px; }
/* Wide screens: one column per folder, so the row of folders is always full */
@media (min-width: 1040px) { .folders .folder { flex-basis: 0; } }
.folder-top { flex-wrap: wrap; row-gap: 0.2rem; }

/* No empty space (Aram, 26 Oct 2026): in the two-column photo grid an odd last photo spans both
   columns; tall blocks in page text (the delivery example, a single video) take the full width
   instead of leaving the heading column empty beside them. */
@media (min-width: 621px) and (max-width: 960px) { .captioned > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.prose > .tree, .prose > .clips { grid-column: 1 / -1; max-width: none; }
.prose > .clips.one { grid-template-columns: 1fr; }
@media (min-width: 1040px) { .prose > .tree > ul > li > ul { columns: 3; column-gap: 2rem; } .prose > .tree li { break-inside: avoid; } }

/* Two-tone section headline: the white line says what it is, the yellow line beneath says what it isn't. */
h2.duo { font-size: clamp(3rem, 7.5vw, 6.5rem); line-height: 0.92; }
h2.duo .accent { display: block; }