/* ==========================================================================
   THE REFINERY — Unified Brand + Entertainment Website
   styles.css | Version 1.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  /* Primary Brand Colors */
  --chartreuse: #dbe120;
  --chartreuse-dark: #c4ca1a;
  --chartreuse-light: #e8ed5a;
  --iron-grey: #474747;
  --iron-grey-dark: #2e2e2e;
  --iron-grey-light: #5e5e5e;

  /* Extended Palette */
  --accent-lime: #a1c43a;
  --accent-golden: #e1d80;
  --neutral-dark: #4a5b00;
  --electric-violet: #4520E1;
  --lavender: #845BE1;
  --deep-violet: #2F1B4D;
  --magenta: #E120C5;
  --accent-blue: #204AE1;
  --navy: #1A1E3F;
  --cyan-teal: #20DBE1;
  --hot-pink: #E120DB;
  --plum: #331942;

  /* Neutral System */
  --white: #ffffff;
  --off-white: #f5f5f2;
  --light-grey: #e8e8e6;
  --mid-grey: #999999;
  --dark: #1a1a1a;
  --black: #0d0d0d;

  /* Typography */
  --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 10rem;

  /* Layout */
  --max-width: 1440px;
  --nav-height: 72px;
  --subnav-height: 40px;

  /* Transitions */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.2s var(--ease-smooth);
  --transition-med: 0.4s var(--ease-smooth);
  --transition-slow: 0.7s var(--ease-smooth);
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   Typography Scale
   -------------------------------------------------------------------------- */
.t-display-xl {
  font-size: clamp(3rem, 6vw, 7rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

/* Display headings are UPPERCASE POPPINS BLACK site-wide (2026-08-05, Kay).
   Started as a brands.html-only treatment and was rolled out to every page, so
   the uppercase + 900 lives on the shared classes rather than per-page ids.
   Applies to .t-display-lg, .t-display-md and .cta-title — currently only ever
   used on h1/h2. index.html is unaffected: the chooser has no display heading. */
.t-display-lg {
  font-size: clamp(2.5rem, 4.5vw, 5.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.t-display-md {
  font-size: clamp(2rem, 3.5vw, 4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.t-heading-lg {
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.t-heading-md {
  font-size: clamp(1.25rem, 2vw, 1.875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.t-heading-sm {
  font-size: clamp(1rem, 1.5vw, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
}

.t-body-lg {
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.7;
  font-weight: 400;
}

.t-body {
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
}

.t-body-sm {
  font-size: 0.875rem;
  line-height: 1.6;
}

.t-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.t-label-lg {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Custom Cursor Dot
   Chartreuse dot that eases after the pointer (ported from the "Kinetic"
   concept). The element is injected by initCursorDot() in script.js, which
   also adds .no-cursor-dot to <html> when it bails out (touch/coarse pointer
   or prefers-reduced-motion) — that class is what restores the native cursor.

   The cursor is the **R roundel**, not a plain dot — the same single knockout
   path as Refinery_2025_R_Char_Knockout.svg, injected inline by the JS. The
   R-stem and eye are knocked out of the disc, so they show the page through and
   the mark reads on the dark and off-white sections alike.

   The mark NEVER changes size (2026-08-07). Hovering anything clickable swaps
   the fill chartreuse → lavender and nothing else, so the cursor stays a
   constant 30px everywhere on the site.

   That size lock is also why mix-blend-mode: difference is gone. The blend was
   there because the old scale(3) grew the disc to 90px, which would have flatly
   covered whatever the user was about to click — difference inverted the content
   beneath so links stayed readable through it. At a fixed 30px nothing is
   covered, and the blend actively fights the new behaviour: it would invert the
   lavender to a yellow-green over the off-white sections, so the hover colour
   would read as a different colour section to section. Straight fills instead.

   The knocked-out R-stem and eye are fully transparent, so the page still shows
   through the mark on both dark and light sections.

   Sits at z-index 9999, above every overlay on the site (highest is 2010, the
   brands case-study close button).
   -------------------------------------------------------------------------- */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  /* 30px, not the concept's 26 — the knocked-out R needs the extra couple of
     pixels to still read. Fixed: there is no grown state any more. */
  width: 30px;
  height: 30px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate(-50%, -50%);
  /* Nothing on transform — the rAF lerp already eases position, and a
     transition on top of it lags the mark behind the pointer. */
  transition: opacity var(--transition-fast);
}
.cursor-dot svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--chartreuse);
  /* The colour swap is the entire hover affordance now, so it gets an easing of
     its own — the position lerp no longer carries any hover feedback. */
  transition: fill var(--transition-fast);
}
.cursor-dot.is-grown svg { fill: var(--lavender); }

/* Chartreuse mark on a chartreuse band is invisible. initCursorDot() adds
   .is-on-light while the pointer is over one, and the mark goes dark.
   The :not(.is-grown) matters — lavender reads fine on chartreuse, so the hover
   colour should still win over a button; only the resting state needs flipping. */
.cursor-dot.is-on-light:not(.is-grown) svg { fill: var(--dark); }

.cursor-dot.is-active { opacity: 1; }

/* Native cursor is hidden only once the dot is actually in play. */
html:not(.no-cursor-dot) body { cursor: none; }
html:not(.no-cursor-dot) a,
html:not(.no-cursor-dot) button,
html:not(.no-cursor-dot) .btn { cursor: none; }

/* …but never over anything the user types into — the caret matters more. */
html:not(.no-cursor-dot) input,
html:not(.no-cursor-dot) textarea,
html:not(.no-cursor-dot) select,
html:not(.no-cursor-dot) [contenteditable="true"] { cursor: auto; }

@media (hover: none), (pointer: coarse) {
  .cursor-dot { display: none; }
  body { cursor: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-dot { display: none; }
  body { cursor: auto; }
}

/* --------------------------------------------------------------------------
   Main Navigation
   -------------------------------------------------------------------------- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  transition: background var(--transition-med), backdrop-filter var(--transition-med);
}

.site-nav.nav--transparent {
  background: transparent;
}

.site-nav.nav--dark {
  background: rgba(26, 26, 26, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-nav.nav--light {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.site-nav.nav--scrolled-dark {
  background: rgba(26, 26, 26, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.site-nav.nav--scrolled-light {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 1px 20px rgba(0,0,0,0.08);
}

.nav-inner {
  width: 100%;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.nav-logo img,
.nav-logo svg {
  height: 36px;
  width: auto;
}

/* Full horizontal logo in nav */
.nav-logo-img {
  height: 34px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* On light nav, invert to dark */
.nav--light .nav-logo-img,
.nav--scrolled-light .nav-logo-img {
  filter: brightness(0) invert(0);
}

.nav-logo-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.nav-logo-text {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.nav-logo-text span {
  display: block;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Accent for punch words in headings — Poppins Black caps (replaces the
   Avalanche script accent site-wide). 0.8em sizes the caps so their height
   matches the surrounding lowercase x-height; inside already-uppercase text
   (e.g. .t-label) override to font-size: 1em so caps match caps. */
.accent-caps {
  color: var(--chartreuse);
  font-family: var(--font-primary);
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.8em;
}

/* Display headings are uppercase now, so the 0.8em above — which exists to match
   caps to the surrounding LOWERCASE x-height — renders undersized in them.
   Caps against caps want 1em. Same reason .t-label overrides it. */
.t-display-lg .accent-caps,
.t-display-md .accent-caps,
.cta-title .accent-caps {
  font-size: 1em;
}

/* --- Brush-script accent (the real vector brush font) ---
   Supersedes .accent-caps for heading punch words. Pair with .brush-default and
   WRITE THE ACCENT AS PLAIN TEXT:

     <em class="accent-brush brush-default">AWARD-WINNING</em>

   The font (v6, fontRevision 1.500) does everything the CSS and markup used to
   patch around:
     • `calt` swaps repeated letters for their alternates, so a letter never
       renders the same glyph twice in a word — no .brush-ss01 spans
     • a 2744-pair GPOS kern table spaces every junction — no per-letter spans,
       no letter-spacing correction
     • full punctuation, so just type "-" and "&"

   Both features need the accent to be ONE uninterrupted shaping run. A span that
   changes font-feature-settings starts a new run and no kern crosses it
   (measured: "WA" was 112px as one run, 156px split). So don't wrap letters.

   @font-face lives in assets/brush-font/css/custom-brush.css, which every page
   using this must also link. Only the combined "Custom Brush Script" family is
   needed — the package's Primary/Alternate families are unused.

   Not in the cmap: • … € and accented letters. Check before using an unusual
   character — a miss falls back to sans-serif mid-word. */
.accent-brush {
  color: var(--chartreuse);
  font-style: normal;
  font-weight: 400;
  /* Brush caps render ~0.73x Poppins Black caps at the same em, so size up to
     sit with the surrounding text — the same intent .accent-caps had at 0.8em.
     ⚠ These two values are LEFTOVERS from earlier font cuts and ride high.
     Size and baseline are per-context; override them where the accent is used.
     Kay-approved for the accordion titles: 1.55em / -0.11em. */
  font-size: 1.18em;
  line-height: 0.85;
  /* Do NOT add tracking here. The font carries its own spacing and its own kern
     table; a CSS correction doubles up and dilutes the kern pairs. */
  letter-spacing: 0;
  /* The word space IS fair game, and does need correcting. The font's space
     advance is 0.378em — about as wide as a whole glyph — while its letters are
     kerned very tight, so a multi-word accent reads as two disconnected words
     ("KEY   ART"). Spaces get no kern pairs, so this can't be fixed in the font
     without recutting the glyph. Compared 0 / -0.10 / -0.15 / -0.20 / -0.25 on
     "KEY ART" at display size; -0.15em is the one that reads as one phrase
     without the words colliding. No-op on single-word accents. */
  word-spacing: -0.15em;
  vertical-align: -0.04em;
}

/* If you find `.brush-kern`, `.brush-tight`, `.brush-hyphen` or a
   <span class="brush-ss01"> in old markup, DELETE the span and let the font do
   it — all three classes are gone and the spans actively break kerning.
   `.brush-ss01` (in custom-brush.css) survives only as a manual override to
   force one specific letter's alternate. */

/* stretch, not center — the links run the full height of the nav so their
   chartreuse rule lands on the nav's bottom edge. The <li> re-centres its
   child, which is what keeps the .nav-cta pill vertically centred. */
.nav-links {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 0.25rem;
}

.nav-links > li {
  display: flex;
  align-items: center;
}

.nav-link {
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 6px;
  transition: var(--transition-fast);
  position: relative;
}

/* Everything except the "Let's Talk" pill runs full-height and square. */
.nav-link:not(.nav-cta) {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  border-radius: 0;
}

/* Flush to the bottom of the nav container, full link width, and a step
   thicker than the sub-nav's 2px so the hierarchy reads. */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
  height: 3px;
  background: var(--chartreuse);
  transition: transform var(--transition-fast);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

/* Dark nav link styles. Inactive sits back in light grey; the active page and
   anything hovered comes up to full white, so the current section is legible
   from the type alone and not only from the chartreuse rule.
   .nav-cta is excluded — it sets its own colour with !important anyway. */
.nav--dark .nav-link,
.nav--transparent .nav-link,
.nav--scrolled-dark .nav-link {
  color: rgba(255,255,255,0.6);
}

.nav--dark .nav-link:hover,
.nav--transparent .nav-link:hover,
.nav--scrolled-dark .nav-link:hover,
.nav--dark .nav-link.active,
.nav--transparent .nav-link.active,
.nav--scrolled-dark .nav-link.active {
  color: var(--white);
}

/* Light nav link styles */
.nav--light .nav-link,
.nav--scrolled-light .nav-link {
  color: var(--iron-grey);
}

.nav--light .nav-link:hover,
.nav--scrolled-light .nav-link:hover,
.nav--light .nav-link.active,
.nav--scrolled-light .nav-link.active {
  color: var(--dark);
}

.nav-cta {
  padding: 0.5rem 1.25rem;
  background: var(--chartreuse);
  color: var(--dark) !important;
  font-weight: 600;
  border-radius: 100px;
  letter-spacing: 0.01em;
  transition: var(--transition-fast);
}

.nav-cta:hover {
  background: var(--chartreuse-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(219, 225, 32, 0.35);
}

.nav-cta::after {
  display: none !important;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  transition: var(--transition-fast);
}

.nav--dark .nav-hamburger span,
.nav--scrolled-dark .nav-hamburger span,
.nav--transparent .nav-hamburger span {
  background: var(--white);
}

.nav--light .nav-hamburger span,
.nav--scrolled-light .nav-hamburger span {
  background: var(--dark);
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: var(--dark);
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-height) + 2rem) 2rem 2rem;
  transform: translateX(100%);
  transition: transform var(--transition-med);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: auto;
}

.mobile-menu-link {
  font-size: 2rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  padding: 0.75rem 0;
  letter-spacing: -0.02em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: var(--transition-fast);
}

.mobile-menu-link:hover {
  color: var(--chartreuse);
}

/* --- Section links folded in from the .sub-nav ---
   Below 768px the sub-nav bar is hidden and initSubNavMobile() clones its links
   into the hamburger panel, so section navigation lives in one place on mobile
   instead of a second horizontally-scrolling bar.

   The group is injected directly AFTER its parent item, so the panel reads
   Entertainment → its sections → Brands → About → Contact. Indented and set
   small so it's clearly a child of the link above it, not a peer. */
.mobile-menu-section {
  display: flex;
  flex-direction: column;
  padding: 0.875rem 0 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* The parent owns the group below it, so drop the rule that would otherwise
   cut between them. */
.mobile-menu-link--has-section {
  border-bottom: none;
}

/* Overrides the .sub-nav-link geometry the clones carry over from the bar. */
.mobile-menu-section .sub-nav-link {
  padding: 0.5rem 0 0.5rem 1rem;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  border-left: 2px solid rgba(255,255,255,0.12);
  transition: var(--transition-fast);
}

/* The bar's bottom rule makes no sense in a vertical stack — the active marker
   becomes the left edge instead. */
.mobile-menu-section .sub-nav-link::after {
  display: none;
}

.mobile-menu-section .sub-nav-link.active {
  color: var(--white);
  border-left-color: var(--chartreuse);
}

.mobile-menu-cta {
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Sub-Navigation (Brands)
   -------------------------------------------------------------------------- */
.sub-nav {
  position: sticky;
  top: var(--nav-height);
  z-index: 900;
  height: var(--subnav-height);
  /* One step under --dark (#1a1a1a) so the bar recedes behind the main nav
     instead of reading as its own band — it was --iron-grey (#474747), which
     stood well proud of every dark section below it. */
  background: #151515;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sub-nav::-webkit-scrollbar {
  display: none;
}

/* align-items: stretch (not center) is what lets each link fill the bar's full
   height, which is what puts its chartreuse rule on the bottom edge. */
.sub-nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: 0.125rem;
  white-space: nowrap;
}

.sub-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  transition: var(--transition-fast);
  position: relative;
}

/* Flush to the bottom of the bar and the full width of the link — the brand's
   rule-at-the-bottom-of-a-container treatment. Was inset 1rem each side and
   sitting 1px below the bar. */
.sub-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--chartreuse);
  transform: scaleX(0);
  transition: transform var(--transition-fast);
}

.sub-nav-link:hover {
  color: var(--white);
}

.sub-nav-link.active {
  color: var(--white);
}

.sub-nav-link:hover::after,
.sub-nav-link.active::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 100px;
  transition: all var(--transition-fast);
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-primary {
  background: var(--chartreuse);
  color: var(--dark);
  border-color: var(--chartreuse);
}

.btn-primary:hover {
  background: var(--chartreuse-dark);
  border-color: var(--chartreuse-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(219, 225, 32, 0.35);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.5);
}

.btn-outline-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--white);
  transform: translateY(-2px);
}

.btn-outline-dark {
  background: transparent;
  color: var(--dark);
  border-color: var(--dark);
}

.btn-outline-dark:hover {
  background: var(--dark);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-dark {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
}

.btn-dark:hover {
  background: var(--iron-grey);
  border-color: var(--iron-grey);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.btn-arrow::after {
  content: '→';
  transition: transform var(--transition-fast);
}

.btn-arrow:hover::after {
  transform: translateX(4px);
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.8125rem;
}

.btn-lg {
  padding: 1.125rem 2.5rem;
  font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   Section Layout Helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.section {
  padding: var(--space-xl) 0;
}

/* Pages that put a title header straight above their first content section were
   stacking the header's 4rem bottom padding on .section's 6rem top — ~10rem of
   dead space before anything started (2026-08-07). Both halved on those pages:
   the header's inline padding drops to 2rem and this takes the section to 3rem.
   Scoped to a modifier rather than changing .section, which every page uses. */
.section--tight { padding-top: 3rem; }

.section-sm {
  padding: var(--space-lg) 0;
}

.section-xl {
  padding: var(--space-2xl) 0;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.section-label::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--chartreuse);
  border-radius: 1px;
}

/* --------------------------------------------------------------------------
   Hero Split
   -------------------------------------------------------------------------- */
.hero-split {
  position: relative;
  height: 100vh;
  min-height: 600px;
  max-height: 1000px;
  display: flex;
  overflow: hidden;
}

.hero-half {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem;
  cursor: pointer;
  transition: flex var(--transition-slow);
  overflow: hidden;
}

.hero-half:hover {
  flex: 1.55;
}

.hero-half:hover ~ .hero-half,
.hero-split:hover .hero-half:not(:hover) {
  flex: 0.55;
}

/* Entertainment Half */
.hero-half--entertainment {
  background: var(--black);
}

.hero-half--entertainment .hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.1) 100%),
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.015) 0px,
      rgba(255,255,255,0.015) 1px,
      transparent 1px,
      transparent 8px
    );
}

/* Film grain overlay */
.hero-half--entertainment::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Brands Half */
.hero-half--brands {
  background: var(--chartreuse);
}

.hero-half--brands .hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--chartreuse) 0%, #c8d418 100%);
}

/* Grid pattern on brands side */
.hero-half--brands::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.hero-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255,255,255,0.2);
  z-index: 10;
  transform: translateX(-50%);
  transition: left var(--transition-slow);
}

.hero-content {
  position: relative;
  z-index: 5;
  transition: opacity var(--transition-med), transform var(--transition-med);
}

.hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.hero-half--entertainment .hero-eyebrow {
  color: var(--chartreuse);
}

.hero-half--brands .hero-eyebrow {
  color: var(--iron-grey);
}

.hero-half--entertainment .hero-title {
  color: var(--white);
}

.hero-half--brands .hero-title {
  color: var(--dark);
}

.hero-title {
  font-size: clamp(2rem, 3.5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.hero-title-right {
  font-size: clamp(2rem, 3.5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
  text-align: right;
}

.hero-subtitle {
  font-size: clamp(0.875rem, 1.1vw, 1.0625rem);
  line-height: 1.55;
  margin-bottom: 2rem;
  max-width: 320px;
}

.hero-half--entertainment .hero-subtitle {
  color: rgba(255,255,255,0.7);
}

.hero-half--brands .hero-subtitle {
  color: rgba(50,50,0,0.75);
}

.hero-half-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: gap var(--transition-fast);
}

.hero-half--entertainment .hero-half-cta {
  color: var(--chartreuse);
}

.hero-half--brands .hero-half-cta {
  color: var(--dark);
}

.hero-half-cta:hover {
  gap: 1rem;
}

.hero-half-cta .arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.hero-half--entertainment .hero-half-cta .arrow {
  background: var(--chartreuse);
  color: var(--dark);
}

.hero-half--brands .hero-half-cta .arrow {
  background: var(--dark);
  color: var(--white);
}

/* Collapsed state text fade */
.hero-split:has(.hero-half--entertainment:hover) .hero-half--brands .hero-subtitle,
.hero-split:has(.hero-half--brands:hover) .hero-half--entertainment .hero-subtitle {
  opacity: 0;
}

/* Key art preview inside entertainment hero */
.hero-keyart-preview {
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: translateY(-60%);
  display: flex;
  gap: 1rem;
  opacity: 0.5;
  transition: opacity var(--transition-med);
  pointer-events: none;
}

.hero-half--entertainment:hover .hero-keyart-preview {
  opacity: 0.8;
}

.hero-keyart-thumb {
  width: 80px;
  aspect-ratio: 2/3;
  border-radius: 6px;
  background: linear-gradient(
    160deg,
    rgba(219,225,32,0.3) 0%,
    rgba(71,71,71,0.8) 100%
  );
  border: 1px solid rgba(255,255,255,0.15);
}

/* Logo preview inside brands hero */
.hero-brands-preview {
  position: absolute;
  top: 40%;
  right: 3rem;
  transform: translateY(-50%);
  opacity: 0.25;
  transition: opacity var(--transition-med);
  pointer-events: none;
}

.hero-half--brands:hover .hero-brands-preview {
  opacity: 0.45;
}

.hero-brands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.hero-brand-dot {
  width: 50px;
  height: 20px;
  background: rgba(0,0,0,0.25);
  border-radius: 3px;
}

/* Nav logo in hero */
.hero-nav-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Client Logos Strip
   -------------------------------------------------------------------------- */
.logos-section {
  background: var(--chartreuse);
  padding: 3rem 0;
  overflow: hidden;
}

.logos-label {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--mid-grey);
}

.logos-track-wrapper {
  position: relative;
  overflow: hidden;
}

.logos-track-wrapper::before,
.logos-track-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
}

.logos-track-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--chartreuse), transparent);
}

.logos-track-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--chartreuse), transparent);
}

.logos-track {
  display: flex;
  align-items: center;
  gap: 4rem;
  animation: scrollLogos 50s linear infinite;
  width: max-content;
}

.logos-track:hover {
  animation-play-state: paused;
}

@keyframes scrollLogos {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Row height, not logo height. Each logo carries its own height inline —
     aspect ratios run 0.65 (Sony, tall) to 10.13 (NBCUniversal, very wide), so
     a shared height would make one 10x the width of the other. Heights are
     optically compensated in assets/logos/build-logos.py, then scaled 1.5x in
     the markup (2026-08-07) — this row height tracks that same 1.5x. */
  height: 78px;
}

.logo-item img {
  width: auto;   /* height comes from the inline style — see above */
  /* Solid black at full opacity on the chartreuse band (2026-08-07). This was
     0.55 with a hover fade to 0.9, which read as a soft grey against the old
     off-white band — but the chartreuse is there for maximum contrast, and a
     logo isn't a link, so there's no hover state to signal.
     brightness(0) flattens every logo to one flat tone whatever its brand
     colour. grayscale() alone doesn't work here: it maps by luminance, so
     Netflix red went dark and Hulu green went nearly invisible. Emblem logos
     (abc, PBS, Warner Bros) have their knockouts punched through to real
     transparency so they don't fill in as blobs. */
  filter: brightness(0);
}

/* --------------------------------------------------------------------------
   POV Section
   -------------------------------------------------------------------------- */
.pov-section {
  background: var(--dark);
  color: var(--white);
  padding: var(--space-xl) 0;
  position: relative;
  overflow: hidden;
}

.pov-section::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(219,225,32,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.pov-inner {
  max-width: 900px;
}

.pov-headline {
  font-size: clamp(2.25rem, 4.5vw, 5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 2.5rem;
}

.pov-headline em {
  font-style: normal;
  color: var(--chartreuse);
}

.pov-body {
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
  max-width: 680px;
}

.pov-body p + p {
  margin-top: 1.25rem;
}

.pov-body strong {
  color: var(--white);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Work Grid
   -------------------------------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.work-grid--featured {
  grid-template-columns: repeat(12, 1fr);
}

.work-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--light-grey);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}

.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.work-card--keyart {
  aspect-ratio: 2/3;
}

.work-card--wide {
  aspect-ratio: 16/9;
}

.work-card--square {
  aspect-ratio: 1/1;
}

.work-card-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.work-card:hover .work-card-thumb {
  transform: scale(1.04);
}

/* Placeholder gradient */
.work-card-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--iron-grey-dark) 0%,
    var(--iron-grey) 50%,
    var(--iron-grey-dark) 100%
  );
}

.work-card-placeholder--chartreuse {
  background: linear-gradient(
    135deg,
    rgba(219,225,32,0.15) 0%,
    rgba(219,225,32,0.05) 100%
  ),
  linear-gradient(var(--iron-grey-dark), var(--iron-grey));
}

.work-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--transition-med);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

.work-card:hover .work-card-overlay {
  opacity: 1;
}

.work-card-info {
  padding: 1rem 0 0.25rem;
}

.work-card-client {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chartreuse);
  margin-bottom: 0.25rem;
}

.work-card-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dark);
}

.work-card-title--white {
  color: var(--white);
}

.work-card-tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: rgba(219,225,32,0.15);
  color: var(--chartreuse);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 3px;
  margin-top: 0.5rem;
}

/* Featured grid layout */
.work-card--span-5 { grid-column: span 5; }
.work-card--span-4 { grid-column: span 4; }
.work-card--span-3 { grid-column: span 3; }
.work-card--span-7 { grid-column: span 7; }

/* --------------------------------------------------------------------------
   Brand Work Cards (Brands page — no overlay, always-visible info)
   -------------------------------------------------------------------------- */
.bwc {
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  border: 1.5px solid var(--light-grey);
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
  cursor: pointer;
}

.bwc:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.1);
  border-color: var(--chartreuse);
}

.bwc-thumb {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
}

.bwc-thumb-label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  pointer-events: none;
}

.bwc-info {
  padding: 1.25rem 1.375rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.bwc-client {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--iron-grey-light);
}

.bwc-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--dark);
  letter-spacing: -0.01em;
}

.bwc-tag {
  display: inline-block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--iron-grey);
  transition: color var(--transition-fast);
}

a.bwc-tag:hover {
  color: var(--chartreuse);
}

/* Responsive — brand work cards */
@media (max-width: 900px) {
  /* brands work grid overrides */
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 560px) {
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   Key Art Gallery (Entertainment Page)
   -------------------------------------------------------------------------- */
.keyart-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.filter-btn {
  padding: 0.4rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 100px;
  border: 1.5px solid var(--light-grey);
  color: var(--iron-grey);
  transition: var(--transition-fast);
  cursor: pointer;
  background: transparent;
}

.filter-btn:hover {
  border-color: var(--iron-grey);
  color: var(--dark);
}

.filter-btn.active {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}

/* Grid display controls — three independent icon segmented toggles */
.keyart-grid-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.kgc-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 100px;
}

.toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 100px;
  border: none;
  background: transparent;
  color: var(--iron-grey);
  cursor: pointer;
  transition: var(--transition-fast);
}

.toggle-btn:hover {
  color: var(--dark);
}

.toggle-btn.active {
  background: var(--dark);
  color: var(--white);
}

.keyart-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  box-sizing: border-box;
}

/* Independent display variants: corners / spacing / width */

/* Corners */
.keyart-grid.corners-square .keyart-item {
  border-radius: 0;
}

/* Spacing — no gap between units (also drop the hover lift so they stay flush) */
.keyart-grid.spacing-none {
  gap: 0;
}

.keyart-grid.spacing-none .keyart-item:hover {
  transform: none;
  box-shadow: none;
}

/* Width — full-bleed, edge to edge (breaks out of the container) */
#gallery {
  overflow-x: clip; /* contains the full-bleed breakout, avoids scrollbar-width overflow */
}

.keyart-grid.width-full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* When full-width AND spacing has margins, keep an outer gutter so the
   far-left/right images don't touch the page edges. Flush only when spacing is none. */
.keyart-grid.width-full:not(.spacing-none) {
  padding-left: clamp(1.25rem, 4vw, 4rem);
  padding-right: clamp(1.25rem, 4vw, 4rem);
}

.keyart-item {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--iron-grey-dark);
  cursor: pointer;
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-radius var(--transition-med);
}

.keyart-item:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  z-index: 2;
}

.keyart-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.keyart-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.keyart-placeholder-lines {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 1rem;
}

.keyart-placeholder-line {
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
}

.keyart-placeholder-line:nth-child(1) { width: 80%; }
.keyart-placeholder-line:nth-child(2) { width: 60%; }
.keyart-placeholder-line:nth-child(3) { width: 70%; }

.keyart-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
  opacity: 0;
  transition: opacity var(--transition-med);
}

.keyart-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition-med), transform var(--transition-med);
}

/* Reveal the production title / network / category only on hover or tap */
.keyart-item:hover .keyart-overlay,
.keyart-item:focus-within .keyart-overlay {
  opacity: 1;
}

.keyart-item:hover .keyart-info,
.keyart-item:focus-within .keyart-info {
  opacity: 1;
  transform: none;
}

.keyart-network {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chartreuse);
  margin-bottom: 0.3rem;
}

.keyart-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 0.35rem;
}

.keyart-type {
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Key art lightbox */
.keyart-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 4vh 4vw;
  background: rgba(8, 8, 8, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-med), visibility var(--transition-med);
}

.keyart-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.keyart-lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
  max-height: 100%;
  transform: scale(0.96);
  transition: transform var(--transition-med);
}

.keyart-lightbox.is-open .keyart-lightbox-figure {
  transform: scale(1);
}

.keyart-lightbox-img {
  max-width: min(90vw, 640px);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
}

.keyart-lightbox-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
}

.keyart-lightbox-network {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chartreuse);
}

.keyart-lightbox-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--white);
}

.keyart-lightbox-type {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.keyart-lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition-fast);
}

.keyart-lightbox-close:hover {
  color: var(--white);
  background: rgba(255,255,255,0.16);
}

/* --------------------------------------------------------------------------
   Case Study Layout
   -------------------------------------------------------------------------- */
.case-study-hero {
  background: var(--dark);
  color: var(--white);
  padding: calc(var(--nav-height) + var(--subnav-height) + 4rem) 0 5rem;
  position: relative;
  overflow: hidden;
}

.case-study-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--chartreuse), transparent);
}

.case-study-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
}

.case-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.case-meta-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chartreuse);
}

.case-meta-value {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
}

.case-section {
  padding: 4rem 0;
  border-bottom: 1px solid var(--light-grey);
}

.case-section:last-child {
  border-bottom: none;
}

.case-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chartreuse);
  margin-bottom: 1rem;
}

.case-section-title {
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.case-assets-grid {
  display: grid;
  gap: 1rem;
}

/* OOH Billboard */
.asset-ooh-billboard {
  aspect-ratio: 14/5;
  border-radius: 8px;
  overflow: hidden;
  background: var(--iron-grey-dark);
  position: relative;
}

/* Digital banner sizes */
.asset-grid-digital {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  align-items: end;
}

.asset-digital {
  background: var(--light-grey);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.asset-digital--leaderboard { aspect-ratio: 728/90; grid-column: 1 / -1; }
.asset-digital--medium-rect { aspect-ratio: 300/250; }
.asset-digital--halfpage { aspect-ratio: 300/600; }
.asset-digital--skyscraper { aspect-ratio: 160/600; }
.asset-digital--square { aspect-ratio: 1/1; }
.asset-digital--social { aspect-ratio: 4/5; }

.asset-size-label {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.4rem;
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.8);
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Capabilities Cards
   -------------------------------------------------------------------------- */
/* 310px minimum, not 280: the longest title ("Packaging & Retail Design")
   needs 236px of content width to stay on one line, and 280px columns give
   only 202px once the card's 2rem padding is removed. At 280 the grid packed
   four cramped columns into the 1200-1380px band and wrapped every title.
   310 drops that band to three columns instead, which are comfortably wide.
   Re-measure this if a longer capability title is ever added. */
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  column-gap: 1.5rem;
  row-gap: 1.5rem;
}

.capability-card {
  padding: 2rem;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  transition: var(--transition-med);
  position: relative;
  overflow: hidden;
}

/* Cards INSIDE .capabilities-grid become subgrids spanning their 5 rows
   (number / title / desc / list / case-study links), so those rows share tracks
   with every other card in the same row. Result: the copy starts on one
   vertical line and the bullets start on another, even if a title wraps.

   `row-gap: 0` is required — a subgrid inherits the parent's gaps, which would
   otherwise inject 1.5rem between every element INSIDE each card. The parent's
   row-gap still separates wrapped rows of cards, since no card spans that
   boundary. Internal spacing stays on the children's own margins.

   Scoped to the grid on purpose: about.html reuses .capability-card inside a
   plain flex column with only 3 children, where a 5-row subgrid is meaningless. */
.capabilities-grid > .capability-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  row-gap: 0;
  align-content: start;
}

/* Without subgrid the cards keep their old block layout — unaligned, but no
   worse than before. */
@supports not (grid-template-rows: subgrid) {
  .capabilities-grid > .capability-card { display: block; }
}

.capability-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--chartreuse);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-med);
}

.capability-card:hover {
  border-color: var(--chartreuse);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.capability-card:hover::before {
  transform: scaleX(1);
}

.capability-number {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--chartreuse);
  margin-bottom: 1rem;
  background: rgba(219,225,32,0.12);
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
}

/* The grid cards are grids, so this pill would otherwise stretch the full
   column width instead of hugging its digits. */
.capabilities-grid .capability-number {
  justify-self: start;
}

.capability-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
  color: var(--white);
}

/* Inside the grid only, sized to keep all four titles on a single line at every
   breakpoint — the longest is "Packaging & Retail Design" at 236px. If a longer
   title is added, either shorten it or step this down; subgrid keeps the cards
   aligned either way. Left at 1.25rem elsewhere (about.html). */
.capabilities-grid .capability-title {
  font-size: 1.125rem;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.capability-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.25rem;
}

.capability-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.capability-list li {
  font-size: 0.875rem;
  color: var(--iron-grey);
  position: relative;
  padding-left: 1.1rem;
}

/* Chartreuse dot, matching .accordion-list on entertainment.html. Absolutely
   positioned rather than a flex child so wrapped lines hang under the text,
   not under the bullet. */
.capability-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chartreuse);
}

/* --------------------------------------------------------------------------
   CTA Sections
   -------------------------------------------------------------------------- */
.cta-section {
  background: var(--chartreuse);
  padding: var(--space-xl) 0;
  position: relative;
  overflow: hidden;
}

/* Every chartreuse band carries the same subtle R roundel top-right (2026-08-07)
   — it started on the entertainment Awards band and lives here now so the bands
   read as one family. It's a MASK, not an image, so the tint stays a plain rgba;
   the fill inside the SVG is irrelevant, only its alpha.

   Pulled further onto the canvas than the plain disc it replaced (-70px / 420px):
   a cropped circle still reads as a circle, but the R only reads as the logo with
   BOTH the stem and the eye in frame.

   Behind @supports on purpose — ungated these would paint a 420px white SQUARE,
   worse than the disc. A browser that can't mask simply keeps the circle. */
.cta-section::before,
.section.bg-chartreuse::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  pointer-events: none;
}

/* .bg-chartreuse isn't a positioned/clipping context the way .cta-section is —
   without these the mark escapes the section. */
.section.bg-chartreuse {
  position: relative;
  overflow: hidden;
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  .cta-section::before,
  .section.bg-chartreuse::before {
    top: -70px;
    right: -70px;
    width: 420px;
    height: 420px;
    background: none;
    background-color: rgba(255,255,255,0.15);
    border-radius: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 184.03 184.03'%3E%3Cpath d='M92.02,0C41.2,0,0,41.2,0,92.02s41.2,92.02,92.02,92.02,92.02-41.2,92.02-92.02S142.84,0,92.02,0ZM90.47,128.8c0,10.55-8.55,19.1-19.1,19.1s-18.4-7.82-19.1-17.74V59.23c0-10.55,8.55-19.1,19.1-19.1s19.1,8.55,19.1,19.1v69.57ZM124.7,78.34c-10.55,0-19.1-8.55-19.1-19.11s8.55-19.1,19.1-19.1,19.1,8.55,19.1,19.1-8.55,19.11-19.1,19.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 184.03 184.03'%3E%3Cpath d='M92.02,0C41.2,0,0,41.2,0,92.02s41.2,92.02,92.02,92.02,92.02-41.2,92.02-92.02S142.84,0,92.02,0ZM90.47,128.8c0,10.55-8.55,19.1-19.1,19.1s-18.4-7.82-19.1-17.74V59.23c0-10.55,8.55-19.1,19.1-19.1s19.1,8.55,19.1,19.1v69.57ZM124.7,78.34c-10.55,0-19.1-8.55-19.1-19.11s8.55-19.1,19.1-19.1,19.1,8.55,19.1,19.1-8.55,19.11-19.1,19.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* The .section-label dash is chartreuse — invisible on a chartreuse band. */
.cta-section .section-label::before,
.section.bg-chartreuse .section-label::before {
  background: var(--dark);
}

.cta-section-dark {
  background: var(--dark);
}

.cta-section-grey {
  background: var(--iron-grey);
  color: var(--white);
}

.cta-content {
  max-width: 700px;
}

.cta-title {
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
  color: var(--dark);
  text-transform: uppercase;
}

.cta-section-dark .cta-title,
.cta-section-grey .cta-title {
  color: var(--white);
}

.cta-body {
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(0,0,0,0.65);
  margin-bottom: 2.5rem;
}

.cta-section-dark .cta-body,
.cta-section-grey .cta-body {
  color: rgba(255,255,255,0.65);
}

/* --------------------------------------------------------------------------
   About Page
   -------------------------------------------------------------------------- */
.page-hero {
  padding: calc(var(--nav-height) + 5rem) 0 5rem;
  background: var(--dark);
  color: var(--white);
}

.page-hero--light {
  background: var(--off-white);
  color: var(--dark);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.value-card {
  padding: 2rem;
  background: var(--off-white);
  border-radius: 12px;
  transition: var(--transition-fast);
}

.value-card:hover {
  background: var(--light-grey);
  transform: translateY(-2px);
}

.value-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--chartreuse);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.value-title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.value-desc {
  font-size: 0.9375rem;
  color: var(--iron-grey-light);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Contact Page
   -------------------------------------------------------------------------- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 600px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--iron-grey);
}

.form-input,
.form-select,
.form-textarea {
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--light-grey);
  border-radius: 8px;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  color: var(--dark);
  background: var(--white);
  transition: var(--transition-fast);
  outline: none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--chartreuse);
  box-shadow: 0 0 0 3px rgba(219,225,32,0.2);
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--black);
  color: rgba(255,255,255,0.6);
  padding: 5rem 0 2.5rem;
}

/* The footer is one row: [mark][Work With Us] ......... [inline link list].
   Everything collapsed to a single line 2026-08-07 — the Work / Services /
   Company columns and their headers are gone, and the link set is the same
   canonical six on every page. space-between pushes the two groups to the
   outer edges. */
.footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  margin-bottom: 3rem;
}

/* align-items: stretch, NOT center — that's what makes the roundel match the
   "Work With Us" button's height automatically. The logo cell stretches to the
   button (the taller child) and the svg fills it, so the two stay matched if the
   button's padding or font-size ever changes. */
.footer-brand {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.footer-logo svg {
  height: 100%;
  width: auto;
}

.footer-cta { flex: 0 0 auto; }

/* Single inline row of links (was a stacked column inside each header group). */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-link {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.5);
  transition: var(--transition-fast);
}

.footer-link:hover {
  color: var(--chartreuse);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-copy {
  font-size: 0.8125rem;
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.footer-social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  transition: var(--transition-fast);
}

/* Real LinkedIn / Instagram glyphs, inline so they take the link's colour on
   hover (they replaced the "LI"/"IG" text initials, 2026-08-07). 17px inside
   the 36px disc leaves the ring reading as a ring, not a badge. */
.footer-social-link svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.footer-social-link:hover {
  border-color: var(--chartreuse);
  color: var(--chartreuse);
  background: rgba(219,225,32,0.08);
}

/* --------------------------------------------------------------------------
   Animations & Scroll Reveals
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */
.text-chartreuse { color: var(--chartreuse); }
.text-white { color: var(--white); }
.text-dark { color: var(--dark); }
.text-grey { color: var(--mid-grey); }
.text-iron { color: var(--iron-grey); }

/* .bg-dark carries the text colour too. It used to set only the background,
   which meant any heading without an explicit .text-white inherited the body's
   near-black and went invisible the moment a section was flipped to dark. Now
   that every page is dark (2026-08-07) this belongs here rather than being
   re-declared per page. */
.bg-dark { background: var(--dark); color: var(--white); }
.bg-black { background: var(--black); }
.bg-chartreuse { background: var(--chartreuse); }
.bg-off-white { background: var(--off-white); }
.bg-iron { background: var(--iron-grey); }

.fw-800 { font-weight: 800; }
.fw-700 { font-weight: 700; }
.fw-600 { font-weight: 600; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 1rem; }
.gap-md { gap: 2rem; }
.gap-lg { gap: 3rem; }

.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 2rem; }
.mt-lg { margin-top: 3rem; }
.mb-sm { margin-bottom: 1rem; }
.mb-md { margin-bottom: 2rem; }
.mb-lg { margin-bottom: 3rem; }

/* The HTML `hidden` attribute must actually hide. The UA stylesheet sets
   display:none, but ANY author rule setting `display` on the element wins —
   which would silently un-hide things like the parked Merch sub-nav link. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Responsive — Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Footer is flex now — the old grid-template/auto-flow overrides here were
     inert. Stack the brand above the links once the row gets tight. */
  .footer-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .work-grid--featured .work-card--span-5,
  .work-grid--featured .work-card--span-7 {
    grid-column: span 6;
  }

  .work-grid--featured .work-card--span-4,
  .work-grid--featured .work-card--span-3 {
    grid-column: span 4;
  }
}

/* --------------------------------------------------------------------------
   Responsive — Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
    /* The sub-nav bar is hidden at this width (its links move into the
       hamburger), so heroes that pad by nav + subnav must stop reserving the
       strip. Zeroing the token fixes every one of them at once. */
    --subnav-height: 0px;
  }

  /* Nav */
  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  /* Sub-nav folds into the hamburger. The class is added by
     initSubNavMobile() and ONLY when it actually cloned the links, so a page
     that hides its sub-nav outright (brands.html) is left alone. */
  .sub-nav.sub-nav--in-menu {
    display: none;
  }

  /* Hero Split — stacks vertically on mobile */
  .hero-split {
    flex-direction: column;
    height: auto;
    min-height: 100svh;
    max-height: none;
  }

  .hero-half {
    flex: none !important;
    min-height: 50svh;
    padding: 2rem 1.5rem;
    justify-content: flex-end;
    transition: min-height var(--transition-slow);
  }

  .hero-half:active {
    min-height: 60svh;
  }

  .hero-half:hover {
    flex: none !important;
  }

  .hero-split:has(.hero-half--entertainment:hover) .hero-half--brands,
  .hero-split:has(.hero-half--brands:hover) .hero-half--entertainment {
    flex: none !important;
  }

  .hero-divider {
    position: static;
    width: 100%;
    height: 2px;
    transform: none;
    top: auto;
    bottom: auto;
    left: auto;
  }

  .hero-title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .hero-keyart-preview,
  .hero-brands-preview {
    display: none;
  }

  /* Logos */
  .logos-section {
    padding: 2rem 0;
  }

  /* POV */
  .pov-body {
    font-size: 1rem;
  }

  /* Work Grid */
  .work-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

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

  .work-grid--featured .work-card--span-5,
  .work-grid--featured .work-card--span-7,
  .work-grid--featured .work-card--span-4,
  .work-grid--featured .work-card--span-3 {
    grid-column: span 1;
  }

  /* Key art grid */
  .keyart-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  /* Case study */
  .asset-grid-digital {
    grid-template-columns: repeat(2, 1fr);
  }

  .asset-digital--leaderboard { display: none; }

  /* Capabilities */
  .capabilities-grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
  }
  /* Links go two-per-row rather than one long wrapped line on phones. */
  .footer-links { gap: 0.75rem 1.25rem; }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Form */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Container */
  .container {
    padding: 0 1.25rem;
  }

  /* Sections */
  .section {
    padding: 3.5rem 0;
  }

  .section-xl {
    padding: 5rem 0;
  }

  /* CTA */
  .cta-title {
    font-size: clamp(1.75rem, 7vw, 3rem);
  }

  /* Sub-nav */
  .sub-nav-inner {
    padding: 0 1.25rem;
  }

  /* Values grid */
  .values-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .keyart-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

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

  .hero-half {
    min-height: 45svh;
    padding: 1.75rem 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   Global mobile grid collapse — catches inline style grids
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Collapse 2-col grids built with inline styles */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Collapse 3-col grids */
  [style*="grid-template-columns:repeat(3,"],
  [style*="grid-template-columns: repeat(3,"] {
    grid-template-columns: 1fr !important;
  }

  /* Collapse case study card grids */
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Ensure about/brands hero grids work on mobile */
  .page-hero [style*="grid"],
  header[style*="grid"] > .container > div {
    grid-template-columns: 1fr !important;
  }

  /* Brands capabilities inline grid */
  [style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer grid already handled above */

  /* POV two-column text */
  .pov-section [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* --------------------------------------------------------------------------
   Blog (flat HTML preview — will move to WordPress; no dates by design)
   -------------------------------------------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow var(--transition-med), border-color var(--transition-med), transform var(--transition-med);
}
.blog-card:hover {
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.09);
  border-color: var(--chartreuse);
  transform: translateY(-3px);
}
.blog-card-thumb {
  aspect-ratio: 16 / 10;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px dashed rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-card-thumb::after {
  content: 'Image placeholder';
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.5rem 1.75rem;
}
.blog-card-cat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chartreuse);
  margin-bottom: 0.65rem;
}
.blog-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 0.65rem;
  color: var(--white);
}
.blog-card-excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.25rem;
}
.blog-card-cta {
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  transition: color var(--transition-fast);
}
.blog-card:hover .blog-card-cta { color: var(--chartreuse); }

/* Pagination (static preview; WordPress will render the real thing) */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3.5rem;
}
.blog-page-link {
  min-width: 44px;
  height: 44px;
  padding: 0 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--light-grey);
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.blog-page-link:hover { border-color: var(--chartreuse); }
.blog-page-link.is-current {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
  pointer-events: none;
}
.blog-page-link.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Blog post template */
.post-header { max-width: 780px; margin: 0 auto; text-align: center; }

/* Article titles OPT OUT of the site-wide uppercase display treatment.
   Marketing headlines are short and written for caps; real post titles are long,
   vary a lot in length, and are the entry point to long-form reading — in caps
   at display size they render as a multi-line wall. Kay's call 2026-08-05,
   pending Claire's preference. Weight stays 900 with the rest of the site.
   Applies only to the article's own h1 — .blog-card-title (list + related cards)
   was never a display class and is unaffected either way. */
.post-title { text-transform: none; }
.post-hero-ph,
.post-inline-ph {
  aspect-ratio: 16 / 8;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-inline-ph { aspect-ratio: 16 / 9; margin: 2.5rem 0; }
.post-hero-ph::after,
.post-inline-ph::after {
  content: 'Image placeholder';
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.post-body { max-width: 720px; margin: 0 auto; }
.post-body p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.68);
  margin-bottom: 1.5rem;
}
.post-body h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 1rem;
  color: var(--white);
}
.post-body ul {
  list-style: disc;
  margin: 0 0 1.5rem 1.25rem;
  color: rgba(255,255,255,0.68);
  line-height: 1.75;
  font-size: 1.0625rem;
}
.post-quote {
  margin: 2.5rem 0;
  padding: 1.75rem 2rem;
  border-left: 4px solid var(--chartreuse);
  background: rgba(255,255,255,0.05);
  border-radius: 0 12px 12px 0;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--white);
}

/* Placeholder-page note (blog + About stub pages awaiting content) */
.stub-note {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  padding: 0.85rem 1.25rem;
  border: 1.5px dashed var(--chartreuse);
  border-radius: 10px;
  background: rgba(219, 225, 32, 0.1);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--chartreuse);
}

@media (max-width: 960px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Drive sync — gallery placeholder slots
   --------------------------------------------------------------------------
   Every gallery listed in refinery-drive-sync/TAGGING-SCHEMA.md §1 was emptied
   of local files on 2026-08-11 and now renders these until the Drive connector
   fills them. The originals were moved to
   "Wrx (don't sync)/Archive - pre Drive sync 2026-08-11/".

   Each slot PRINTS THE rfn* TAG IT IS WAITING ON. That is the point of the
   component — the site becomes the reference for the tagging run, so nobody has
   to hold the schema table in their head while working in Drive.

   Delete this whole section once every destination is Drive-fed.
   -------------------------------------------------------------------------- */
.rfn-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1rem 0.75rem;
  text-align: center;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(219, 225, 32, 0.035) 0 6px,
      transparent 6px 14px
    ),
    #161616;
  border: 1px dashed rgba(219, 225, 32, 0.4);
  color: rgba(255,255,255,0.5);
  overflow: hidden;
}

/* The tag. Monospace so rfnEntKeyArt reads as a token to be copied rather than
   as a word to be interpreted. */
.rfn-slot-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--chartreuse);
  word-break: break-all;
  /* Must beat .keyart-network's uppercase, which renders rfnEntPortfolio as
     RFNENTPORTFOLIO. The tag is case-insensitive to Drive, but camelCase is the
     entire readability affordance — schema Rule 4. */
  text-transform: none;
}

.rfn-slot-note {
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  line-height: 1.4;
}

/* Tight variant for small tiles (culture strips, splash rows) where the tag
   alone is all that fits. */
.rfn-slot--tight { gap: 0.15rem; padding: 0.5rem 0.35rem; }
.rfn-slot--tight .rfn-slot-tag { font-size: 0.5rem; letter-spacing: 0; }
.rfn-slot--tight .rfn-slot-note { display: none; }

/* Banner above a placeholder gallery, naming the destination and its tag.
   Built on .stub-note's language so it reads as the same family of "not real
   yet" marker the rest of the site already uses. */
.rfn-note {
  display: block;
  margin-bottom: 1.5rem;
  padding: 0.85rem 1.15rem;
  border: 1px dashed rgba(219, 225, 32, 0.5);
  background: rgba(219, 225, 32, 0.05);
  color: var(--chartreuse);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.rfn-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0;
}

.rfn-note-count {
  display: block;
  margin-top: 0.3rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255,255,255,0.45);
}

/* Placeholder key-art tiles must show their tag at rest, not on hover.
   .keyart-info and .keyart-overlay are hover-reveals for real work — correct
   there, useless here, since the whole point of a placeholder tile is to be
   readable while you're looking at the page deciding what to tag.
   :has() scopes this to tiles carrying a tag, so a Drive-fed tile in the same
   grid keeps the normal hover behaviour. Goes when the galleries fill. */
.keyart-item:has(.rfn-slot-tag) .keyart-overlay { opacity: 1; }

.keyart-item:has(.rfn-slot-tag) .keyart-info {
  opacity: 1;
  transform: none;
}

/* No :has() (older Safari/Firefox) — fall back to showing every tile's info in
   a gallery that is entirely placeholders. Slightly blunter, same outcome while
   the cutover lasts. */
@supports not selector(:has(*)) {
  .accordion-gallery .keyart-overlay,
  .keyart-grid .keyart-overlay { opacity: 1; }
  .accordion-gallery .keyart-info,
  .keyart-grid .keyart-info { opacity: 1; transform: none; }
}