/* ===========================================================================
   CB MEDIA, casusbelli.media
   Palette taken from the printed A5 flyer and the Casus Belli pig mark:
   near-black stock, bright teal ink, warm off-white paper.
   =========================================================================== */

:root {
  /* Brand */
  --ink:        #0B0C0B;   /* flyer black */
  --ink-2:      #131613;   /* raised panels */
  --ink-3:      #1B1F1C;   /* hairline fills */
  --paper:      #F2F2EC;
  --teal:       #3FD0C2;   /* the pig */
  --teal-soft:  #7FE3DA;
  --teal-deep:  #14615C;
  --muted:      #98A09B;
  --muted-dark: #5C6259;   /* for use on --paper */
  --line:       #262A26;
  --line-paper: #C9CABE;

  /* Type */
  --display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --body:    'DM Sans', system-ui, -apple-system, Segoe UI, Arial, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1600px;
  --header-h: 84px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  color-scheme: dark;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, figure, ul, ol, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

h1, h2 {
  font-family: var(--display);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
h2 { font-size: clamp(3rem, 7vw, 6.5rem); }

/* ---------- focus ---------- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip {
  position: fixed; top: -100px; left: 1rem; z-index: 200;
  background: var(--teal); color: var(--ink);
  padding: .75rem 1rem; font-weight: 700; transition: top .2s;
}
.skip:focus { top: 1rem; }

/* ---------- shared bits ---------- */
.eyebrow {
  font-size: .75rem; font-weight: 600; letter-spacing: .16em;
  line-height: 1.5; text-transform: uppercase; color: var(--paper);
}
.subtle { color: var(--muted); font-size: .875rem; }
.lead { font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.35; letter-spacing: -.02em; }
.accent { color: var(--teal); }
.outline { -webkit-text-stroke: 1.5px var(--paper); color: transparent; }
.muted-word { color: var(--muted-dark); }
.prose p { color: #C4CAC3; margin-bottom: 1.125rem; max-width: 38rem; }
.prose p:last-child { margin-bottom: 0; }

/* Placeholder marker: everything invented is labelled, on purpose. */
.ph {
  display: inline-flex; align-items: center; gap: .375rem; vertical-align: middle;
  font-size: .5625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); border: 1px solid var(--teal-deep); background: #3fd0c214;
  border-radius: 100px; padding: .1875rem .5rem; margin-left: .5rem; white-space: nowrap;
}
.ph::before { content: ''; width: .3125rem; height: .3125rem; border-radius: 50%; background: var(--teal); }
.ph-note {
  border-left: 3px solid var(--teal); background: #3fd0c20f;
  padding: .875rem 1.125rem; margin: 0 0 1.75rem; border-radius: 0 3px 3px 0;
  font-size: .875rem; color: #BFC6BF;
}
.ph-note strong { color: var(--teal); }

.text-link {
  display: inline-flex; align-items: center; gap: 1.75rem;
  padding: 0 0 .5rem; border-bottom: 1px solid var(--line);
  font-size: .9375rem; font-weight: 500;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.text-link span { font-size: 1.3em; line-height: 1; transition: transform .3s var(--ease-out); }
.text-link:hover { color: var(--teal); border-color: var(--teal); }
.text-link:hover span { transform: translate(3px, -3px); }

.button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 2.25rem;
  min-height: 3.375rem; padding: .875rem 1.375rem;
  font-size: .9375rem; font-weight: 700; letter-spacing: .01em;
  border-radius: 2px;
  transition: transform .25s var(--ease-out), background .25s var(--ease), color .25s var(--ease), border-color .25s;
}
.button span { font-size: 1.15em; line-height: 1; }
.button:hover { transform: translateY(-3px); }
.button.primary { background: var(--teal); color: var(--ink); }
.button.primary:hover { background: var(--teal-soft); }
.button.ghost { border: 1px solid #6E736B; color: var(--paper); }
.button.ghost:hover { border-color: var(--paper); background: #ffffff14; }

.section {
  padding: clamp(3.25rem, 7vw, 6.5rem) var(--gutter);
  margin-inline: auto; max-width: var(--maxw);
}
.section-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); margin-bottom: 2.5rem;
}

/* ---------- scroll reveal (fails open) ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js.no-motion .reveal { opacity: 1; transform: none; transition: none; }

/* ===========================================================================
   HEADER
   =========================================================================== */
.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.brand img { width: 2.5rem; height: auto; flex: none; }
.brand-text {
  font-family: var(--display); font-weight: 800; font-size: 1.5rem;
  letter-spacing: .01em; line-height: 1; display: block;
}
.brand-text small {
  display: block; font-family: var(--body); font-size: .5625rem; font-weight: 600;
  letter-spacing: .13em; color: var(--muted); margin-top: .3rem;
}
.header nav { display: flex; align-items: center; gap: clamp(.875rem, 1.9vw, 1.875rem); font-size: .875rem; }
.header nav > a:not(.nav-cta) { position: relative; padding: .25rem 0; transition: color .2s; }
.header nav > a:not(.nav-cta)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
}
.header nav > a:not(.nav-cta):hover { color: var(--teal); }
.header nav > a:not(.nav-cta):hover::after,
.header nav > a[aria-current="page"]::after { transform: scaleX(1); }
.header nav > a[aria-current="page"] { color: var(--teal); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 1.125rem;
  border: 1px solid #6E736B; border-radius: 2px; padding: .6875rem 1.125rem;
  transition: border-color .25s, background .25s, color .25s;
}
.nav-cta span { font-size: 1.2em; line-height: 1; }
.nav-cta:hover { background: var(--teal); border-color: var(--teal); color: var(--ink); }
.menu-toggle { display: none; }

.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.scroll-progress i {
  display: block; height: 100%; width: 100%; background: var(--teal);
  transform: scaleX(var(--p, 0)); transform-origin: left;
}

/* ===========================================================================
   HERO (home)
   =========================================================================== */
.hero {
  position: relative; isolation: isolate;
  min-height: min(92svh, 60rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(5rem, 12vh, 9rem) var(--gutter) 0;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -1; background: #000; }
.hero-video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  filter: saturate(.78) contrast(1.05) brightness(.8);
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,12,11,.92) 0%, rgba(11,12,11,.62) 46%, rgba(11,12,11,.1) 90%),
    linear-gradient(0deg, var(--ink) 1%, rgba(11,12,11,.2) 40%, rgba(11,12,11,.5) 100%);
}
.hero-grain {
  position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
.hero-inner { position: relative; max-width: 62rem; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.hero-eyebrow { display: flex; align-items: center; gap: .625rem; }
.pip { width: .5rem; height: .5rem; border-radius: 50%; background: var(--teal); flex: none; box-shadow: 0 0 0 4px #3fd0c229; }
.hero-title { font-size: clamp(2.75rem, 7.4vw, 6.75rem); margin-top: 1.5rem; }
.hero-title .line { display: block; }
.hero-title .accent { color: var(--teal); }
.hero-copy { margin-top: 1.75rem; max-width: 34rem; color: #D3D7D1; font-size: clamp(1rem, 1.35vw, 1.125rem); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.25rem; }
.hero-foot {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 4.25rem; border-top: 1px solid #ffffff1f;
  font-size: .6875rem; letter-spacing: .14em; font-weight: 600; color: var(--muted);
}
.scroll-cue { display: inline-flex; align-items: center; gap: .875rem; color: var(--paper); }
.cue-line { width: 2.75rem; height: 1px; background: var(--teal); position: relative; overflow: hidden; }
.cue-line::after { content: ''; position: absolute; inset: 0; background: var(--paper); animation: cue 2.4s var(--ease-out) infinite; }
@keyframes cue { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.hero-meta { text-align: right; }

/* ---------- inner-page hero ---------- */
.page-hero {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  margin-inline: auto; max-width: var(--maxw);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(2.75rem, 8vw, 6.5rem); margin: 1.25rem 0 0; }
.page-hero .lead { color: var(--muted); margin-top: 1.5rem; max-width: 42rem; }
.crumbs { font-size: .75rem; letter-spacing: .14em; font-weight: 600; text-transform: uppercase; color: var(--muted); }
.crumbs a:hover { color: var(--teal); }
.crumbs span { margin: 0 .5rem; opacity: .5; }

/* ===========================================================================
   MARQUEE
   =========================================================================== */
.marquee {
  background: var(--teal); color: var(--ink);
  padding: .9375rem 0; overflow: hidden; white-space: nowrap;
  border-block: 1px solid var(--teal);
}
/* Six identical sets, so the track is always at least twice the width of the
   widest screen, and it moves by exactly one set per cycle. When the loop
   restarts, set two is sitting exactly where set one began: no gap, no jump. */
.marquee-track { display: inline-flex; animation: slide 38s linear infinite; will-change: transform; }
.marquee-set {
  flex: none;
  display: inline-flex; align-items: center; gap: 1.75rem; padding-right: 1.75rem;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.375rem, 2.6vw, 2.25rem);
}
.marquee-set i { font-style: normal; font-size: .55em; opacity: .65; }
@keyframes slide { to { transform: translateX(calc(-100% / 6)); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ===========================================================================
   SHOWREEL PLAYER
   =========================================================================== */
.reel-section h2 { margin-bottom: 2.5rem; }
.player-frame {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  border: 1px solid var(--line); overflow: hidden;
  box-shadow: 0 2.5rem 5rem -1.5rem #000000b8;
}
.player-frame > video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.player-cover { position: absolute; inset: 0; width: 100%; padding: 0; display: block; text-align: left; }
.player-cover > img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out), filter .6s; filter: saturate(.7) brightness(.78); }
.player-cover:hover > img { transform: scale(1.03); filter: saturate(.95) brightness(.86); }
.cover-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, #000000cc, transparent 55%); }
.cover-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(4.25rem, 8vw, 6.25rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; padding-left: .3em;
  background: #0b0c0b8c; border: 1px solid #ffffff5e; color: var(--paper);
  font-size: clamp(1.125rem, 2vw, 1.75rem); backdrop-filter: blur(4px);
  transition: background .3s, border-color .3s, color .3s, transform .35s var(--ease-out);
}
.player-cover:hover .cover-play { background: var(--teal); border-color: var(--teal); color: var(--ink); transform: translate(-50%, -50%) scale(1.06); }
.cover-text {
  position: absolute; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  font-family: var(--display); font-weight: 700; font-size: clamp(1.125rem, 2.4vw, 1.875rem); line-height: 1;
}
.cover-text small {
  display: block; font-family: var(--body); font-weight: 500; font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .5rem;
}
.player.playing .player-cover { opacity: 0; pointer-events: none; transition: opacity .35s; }

.chapters { display: flex; align-items: center; flex-wrap: wrap; gap: .625rem; margin-top: 1.25rem; }
.chapters-label { font-size: .6875rem; letter-spacing: .16em; font-weight: 600; color: var(--muted); margin-right: .375rem; }
.chapter-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  padding: .5rem .875rem; border: 1px solid var(--line); border-radius: 100px;
  font-size: .8125rem; font-weight: 500; color: #C9CEC8;
  transition: border-color .2s, color .2s, background .2s;
}
.chip:hover { border-color: var(--teal); color: var(--teal); background: #3fd0c214; }
.quality-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .6875rem; letter-spacing: .14em; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 100px; padding: .4375rem .75rem;
  transition: color .2s, border-color .2s;
}
.quality-toggle .dot { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--muted); transition: background .2s; }
.quality-toggle[aria-pressed="true"] { color: var(--teal); border-color: var(--teal-deep); }
.quality-toggle[aria-pressed="true"] .dot { background: var(--teal); }

/* ===========================================================================
   WORK GRID
   =========================================================================== */
.section-heading { margin-bottom: 2.75rem; }
.work-grid {
  display: grid; gap: clamp(1.25rem, 2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
}
.work-card { display: block; text-align: left; min-width: 0; padding: 0; }
.work-image { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink-3); }
.work-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) brightness(.9); transition: transform .8s var(--ease-out), filter .6s var(--ease); }
.work-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #000000a8, transparent 55%); pointer-events: none; }
.work-card:hover .work-image img, .work-card:focus-visible .work-image img { transform: scale(1.05); filter: saturate(1) brightness(1); }
.work-play {
  position: absolute; top: .875rem; right: .875rem; z-index: 1;
  width: 2.5rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  padding-left: .18em; font-size: .75rem;
  background: #0b0c0b99; border: 1px solid #ffffff59; backdrop-filter: blur(3px);
  transition: background .3s, border-color .3s, color .3s;
}
.work-card:hover .work-play { background: var(--teal); border-color: var(--teal); color: var(--ink); }
.work-tag {
  position: absolute; left: 1rem; bottom: .9375rem; z-index: 1;
  font-size: .625rem; letter-spacing: .14em; font-weight: 600; color: var(--paper);
  max-width: calc(100% - 4.5rem); text-shadow: 0 1px 6px #000000b3;
}
.work-caption { display: flex; flex-direction: column; gap: .3125rem; padding-top: 1.0625rem; }
.work-caption b { font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.work-caption i { font-style: normal; font-size: .625rem; letter-spacing: .14em; color: var(--muted); }

/* ===========================================================================
   PICK TWO, the interactive triangle
   =========================================================================== */
/* Source order is heading, triangle, verdict, which is how it stacks on a
   phone. From 900px the verdict tucks back under the copy, beside the figure. */
.picktwo-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 900px) {
  .picktwo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "copy figure" "verdict figure";
    grid-template-rows: auto 1fr;
    column-gap: clamp(2.5rem, 5vw, 4.5rem); row-gap: 2.25rem;
    align-items: start;
  }
  .picktwo-copy { grid-area: copy; }
  .picktwo-figure { grid-area: figure; align-self: center; }
  .picktwo-grid > .verdict { grid-area: verdict; margin-top: 0; }
}
.picktwo-copy .lead { color: var(--muted); margin-top: 1.5rem; max-width: 30rem; }

.verdict {
  padding: 1.75rem; border: 1px solid var(--line);
  background: var(--ink-2); border-radius: 3px;
  display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start;
  justify-content: space-between;
}
.verdict-stack { display: grid; width: 100%; }
.verdict-pane {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility .35s;
}
.verdict-pane.on { opacity: 1; visibility: visible; transform: none; }
.no-motion .verdict-pane { transition: none; }
.verdict-kicker { font-size: .6875rem; letter-spacing: .16em; font-weight: 700; color: var(--teal); }
.verdict-title {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: .9; letter-spacing: -.02em;
  margin: .75rem 0 .875rem;
}
.verdict-body { color: #C2C8C1; max-width: 32rem; }
@keyframes verdict-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.triangle { position: relative; width: 100%; max-width: 34rem; margin-inline: auto; aspect-ratio: 500 / 360; }
.triangle svg { width: 100%; height: 100%; overflow: visible; }
.triangle .edge {
  fill: none; stroke: #4A504A; stroke-width: 2.5; stroke-dasharray: 6 8; stroke-linecap: round;
  transition: stroke .4s var(--ease), stroke-width .4s var(--ease);
}
.triangle .edge.on {
  stroke: var(--teal); stroke-width: 2.5;
  filter: drop-shadow(0 0 6px #3fd0c25c);
  transition: stroke .3s var(--ease);
}
.triangle .node {
  fill: var(--ink); stroke: #8B9189; stroke-width: 2;
  transition: fill .4s var(--ease), stroke .4s var(--ease);
}
.triangle .node.on { fill: var(--teal); stroke: var(--teal); }
.count { font-family: var(--display); font-weight: 700; font-size: 5rem; fill: var(--teal); letter-spacing: -.04em; }
.count-total { font-size: .6em; fill: #5E6459; }

/* The whole corner is the button: a generous circular hit area on the node. */
.tri-hits { position: absolute; inset: 0; pointer-events: none; }
.tri-hit {
  position: absolute; pointer-events: auto;
  width: 5.5rem; height: 5.5rem; translate: -50% -50%;
  display: grid; place-items: center; border-radius: 50%;
  transition: scale .3s var(--ease-out);
}
.tri-hit:hover { scale: 1.07; }
.tri-hit:active { scale: .97; }
.tri-quality { left: 50%;    top: 17.2%; }
.tri-cheap   { left: 11.6%;  top: 82.2%; }
.tri-fast    { left: 88.4%;  top: 82.2%; }

.tri-ring {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  border: 1px solid #4E554E; background: #0b0c0b66;
  transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
/* Kept corners glow; the dropped one goes flat. */
.tri-hit[aria-pressed="false"] .tri-ring { border-color: var(--teal-deep); box-shadow: 0 0 0 0 #3fd0c200; }
.tri-hit[aria-pressed="false"]:hover .tri-ring { border-color: var(--teal); background: #3fd0c21f; }
.tri-hit[aria-pressed="true"] .tri-ring { border-color: #4E554E; background: transparent; }
/* A slow pulse until the visitor touches it, so it reads as a control. */
.triangle:not(.touched) .tri-hit[aria-pressed="false"] .tri-ring { animation: ring 3s var(--ease-out) infinite; }
@keyframes ring {
  0%, 70%, 100% { box-shadow: 0 0 0 0 #3fd0c233; }
  35%           { box-shadow: 0 0 0 .6rem #3fd0c200; }
}

.tri-name {
  position: absolute; white-space: nowrap;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.125rem, 2.3vw, 1.875rem); line-height: 1; letter-spacing: .03em;
  color: var(--teal); transition: color .35s var(--ease);
}
.tri-name::after {
  content: ''; position: absolute; left: -5%; right: -5%; top: 50%; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.tri-hit[aria-pressed="true"] .tri-name { color: #7E847C; }
.tri-hit[aria-pressed="true"] .tri-name::after { transform: scaleX(1); }
.tri-quality .tri-name { bottom: 100%; }
.tri-cheap .tri-name, .tri-fast .tri-name { top: 100%; }

.tri-hint {
  position: absolute; white-space: nowrap;
  font-size: .5625rem; letter-spacing: .14em; font-weight: 600; text-transform: uppercase;
  color: var(--muted); opacity: 0; transition: opacity .25s;
}
.tri-quality .tri-hint { bottom: calc(100% + 2.1em); }
.tri-cheap .tri-hint, .tri-fast .tri-hint { top: calc(100% + 2.1em); }
.tri-hit[aria-pressed="false"]:hover .tri-hint,
.tri-hit[aria-pressed="false"]:focus-visible .tri-hint { opacity: 1; }

.tri-prompt {
  position: absolute; left: 50%; bottom: -3.25rem; translate: -50% 0;
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-size: .6875rem; letter-spacing: .14em; font-weight: 600; text-transform: uppercase;
  color: var(--teal); transition: opacity .4s, translate .4s;
}
.tri-prompt-dot { width: .375rem; height: .375rem; border-radius: 50%; background: var(--teal); animation: blip 1.8s infinite; }
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.triangle.touched .tri-prompt { opacity: 0; translate: -50% .5rem; pointer-events: none; }

.tri-note { margin-top: 5.5rem; font-size: .8125rem; color: var(--muted); text-align: center; }
.tri-note span { color: var(--teal); margin-right: .5rem; font-size: 1.2em; }

/* ===========================================================================
   PAPER SECTIONS
   =========================================================================== */
.paper {
  background: var(--paper); color: var(--ink);
  max-width: none; color-scheme: light;
  padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
.paper .eyebrow, .paper h2, .paper h3 { color: var(--ink); }
.paper .subtle, .paper p { color: var(--muted-dark); }
.paper .lead { color: var(--ink); }
.paper .section-top { border-color: var(--line-paper); }
.paper .text-link { border-color: #A9AC9F; color: var(--ink); }
.paper .text-link:hover { color: var(--teal-deep); border-color: var(--teal-deep); }
.paper :focus-visible { outline-color: var(--ink); }
.paper .ph { color: #0E5C55; border-color: #7FBDB6; background: #3fd0c21f; }
.paper .ph::before { background: #0E5C55; }
.paper .ph-note { color: var(--muted-dark); border-left-color: #0E5C55; background: #3fd0c214; }
.paper .ph-note strong { color: #0E5C55; }

.booking-intro {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  align-items: start;
}
.booking-copy { max-width: 34rem; }
.booking-copy p { margin-bottom: 1.25rem; }
.booking-copy .lead { margin-bottom: 1.5rem; }

.cards {
  display: grid; gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.card { border-top: 1px solid #ADB0A3; padding-top: 1.5rem; }
.paper .card { border-color: #ADB0A3; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.card-num { font-family: var(--display); font-size: 3rem; line-height: 1; color: #83887A; }
.card h3 { font-size: 2.25rem; font-weight: 500; letter-spacing: -.04em; line-height: 1.15; margin: 1rem 0 .875rem; }
.card .text-link { margin-top: 1.375rem; }
.local-note { font-size: .875rem; margin-top: 2.5rem; }
.local-note span { font-size: 1.3em; margin-right: .5rem; color: var(--teal-deep); }

/* ===========================================================================
   BEHIND IT
   =========================================================================== */
.behind-grid {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 1fr));
  align-items: center;
}
.behind-copy h2 { margin: 0 0 1.75rem; }
.facts { margin-top: 2rem; display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.facts li { background: var(--ink); padding: 1rem 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.facts b { font-weight: 600; font-size: .9375rem; }
.facts span { color: var(--muted); font-size: .875rem; }
.behind-media { position: relative; }
.behind-photo { width: 100%; height: auto; border: 1px solid var(--line); filter: saturate(.85); }
.flyer-card {
  position: absolute; right: -1rem; bottom: -2.5rem; width: clamp(7.5rem, 20%, 11rem);
  transform: rotate(-4deg); box-shadow: 0 1.75rem 3rem -1rem #000000c4;
  transition: transform .5s var(--ease-out);
}
.flyer-card:hover { transform: rotate(-1deg) translateY(-6px); }
.flyer-card img { width: 100%; height: auto; border: 1px solid #ffffff1f; }
.flyer-card figcaption {
  position: absolute; left: 0; right: 0; top: calc(100% + .625rem);
  font-size: .625rem; letter-spacing: .12em; font-weight: 600; text-transform: uppercase; color: var(--teal);
}
.flyer-card figcaption span { display: block; color: var(--muted); letter-spacing: .06em; font-weight: 500; text-transform: none; margin-top: .25rem; }

/* ===========================================================================
   ACCORDIONS
   =========================================================================== */
.longer {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  align-items: start;
}
.longer-head h2 { margin-top: 0; }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary {
  list-style: none; cursor: pointer; padding: 1.375rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem); letter-spacing: -.03em; line-height: 1.25;
}
summary::-webkit-details-marker { display: none; }
summary small { font-size: .75rem; letter-spacing: 0; color: var(--muted); margin-right: 1.125rem; }
summary:hover { color: var(--teal); }
.sym { color: var(--teal); font-size: 1.75rem; line-height: 1; transition: transform .3s var(--ease-out); flex: none; }
details[open] .sym { transform: rotate(45deg); }
.detail-body { padding: 0 2.5rem 2rem 0; animation: detail-fade .3s var(--ease-out); }
@keyframes detail-fade { from { opacity: 0; } to { opacity: 1; } }
:root { interpolate-size: allow-keywords; }
details::details-content {
  block-size: 0; overflow: clip;
  transition: block-size .32s var(--ease-out), content-visibility .32s allow-discrete;
}
details[open]::details-content { block-size: auto; }
.detail-body p { color: var(--muted); margin-bottom: 1.125rem; }
.detail-body .text-link { color: var(--teal); border-color: var(--teal-deep); }
.paper details { border-color: var(--line-paper); }
.paper summary:hover { color: var(--teal-deep); }
.paper .sym { color: var(--teal-deep); }
.paper .detail-body p { color: var(--muted-dark); }

/* ===========================================================================
   CONTACT (teal)
   =========================================================================== */
.contact {
  background: var(--teal); color: var(--ink); color-scheme: light;
  max-width: none;
  padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
/* The home page wraps its columns in .contact-grid (under the fold header);
   /contact has no fold, so the section itself is still the grid there. */
.contact-grid, .contact:not(.fold) {
  display: grid; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
}
.contact:not(.fold) h2 { margin-top: 1.75rem; }
.contact .section-top { border-color: #0b0c0b33; }
.contact .eyebrow { color: var(--ink); }
.contact h2 { margin: 0 0 1.5rem; font-size: clamp(3rem, 6.6vw, 6rem); }
.contact .stroke { -webkit-text-stroke: 1.5px var(--ink); color: transparent; }
.contact-lead { font-size: 1.0625rem; line-height: 1.6; max-width: 26rem; }
.contact-email {
  display: inline-flex; align-items: center; gap: 1.5rem; margin-top: 1.75rem;
  font-size: clamp(1rem, 2.4vw, 1.25rem); font-weight: 600;
  border-bottom: 1px solid #0b0c0b59; padding-bottom: .375rem; transition: border-color .25s;
}
.contact-email:hover { border-color: var(--ink); }
.contact-email span { font-size: 1.2em; }
.contact-small { margin-top: 1.5rem; font-size: .8125rem; color: #12332F; max-width: 24rem; }
.contact :focus-visible { outline-color: var(--ink); }

form { min-width: 0; }
form label { display: block; font-size: .8125rem; font-weight: 700; }
form > label { margin-top: 1.75rem; }
.form-row { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); margin-top: 1.75rem; }
.form-row:first-child { margin-top: 0; }
input, textarea, select {
  display: block; width: 100%; margin-top: .375rem;
  border: 0; border-bottom: 1.5px solid #0b0c0b4d; background: transparent;
  padding: .625rem 0 .75rem; border-radius: 0; resize: vertical;
  color: var(--ink); font-size: 1rem; font-weight: 400; line-height: 1.5;
  transition: border-color .25s;
}
select { appearance: none; padding-right: 1.5rem; }
input::placeholder, textarea::placeholder { color: #12332F; opacity: .9; }
input:hover, textarea:hover, select:hover { border-color: #0b0c0b8c; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); border-bottom-width: 2px; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #7A1616; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.button.submit { width: 100%; margin-top: 2rem; background: var(--ink); color: var(--paper); }
.button.submit:hover { background: #000; }
.button.submit[disabled] { opacity: .6; cursor: progress; transform: none; }
.form-note { font-size: .75rem; line-height: 1.6; margin-top: .875rem; color: #12332F; }
.form-note.ok { color: #0B2E1A; font-weight: 600; }
.form-note.err { color: #6B1212; font-weight: 600; }

/* ===========================================================================
   FOOTER
   =========================================================================== */
footer { padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 1.75rem; margin-inline: auto; max-width: var(--maxw); }
.footer-brand { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.wordmark {
  font-family: var(--display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(4rem, 15.5vw, 15rem); line-height: .9; white-space: nowrap; transition: color .3s;
}
.wordmark:hover { color: var(--teal); }
.footer-cols {
  display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line);
}
.footer-cols a { display: block; font-size: .875rem; color: var(--muted); padding: .3125rem 0; transition: color .2s; }
.footer-cols a:hover { color: var(--teal); }
.footer-head { font-size: .625rem; letter-spacing: .16em; font-weight: 700; color: var(--paper); margin-bottom: .625rem; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
  font-size: .6875rem; letter-spacing: .12em; color: var(--muted);
}
.footer-bottom a:hover { color: var(--teal); }

/* ===========================================================================
   GENERIC CONTENT BLOCKS (services, pricing, about, journal)
   =========================================================================== */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  align-items: start;
}
.stack { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

.service-row {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  align-items: center;
  padding: clamp(2rem, 4vw, 3rem) 0; border-top: 1px solid var(--line);
}
.service-row:last-child { border-bottom: 1px solid var(--line); }
.service-row img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; filter: saturate(.8); }
.service-row h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: .92; letter-spacing: -.02em; margin-bottom: 1rem; }
.service-row .num { font-family: var(--display); font-size: 1.125rem; color: var(--teal); letter-spacing: .1em; margin-bottom: .75rem; display: block; }
.tick-list { margin-top: 1.5rem; display: grid; gap: .5rem; margin-left: 0; }
.tick-list li, .article .tick-list li { list-style: none; }
/* Not flex: with flex, a <strong> inside an item becomes its own flex item
   and the label wraps away from the sentence it belongs to. */
.tick-list li { position: relative; padding-left: 1.5rem; font-size: .9375rem; line-height: 1.6; color: #C4CAC3; }
.tick-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--teal); }
.tick-list li strong { color: var(--paper); font-weight: 600; }
.tick-list li a { border-bottom: 1px solid var(--line); transition: color .2s, border-color .2s; }
.tick-list li a:hover { color: var(--teal); border-color: var(--teal); }

.tiers {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.tier {
  border: 1px solid var(--line); background: var(--ink-2); border-radius: 3px;
  padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem;
}
.tier.featured { border-color: var(--teal-deep); background: #3fd0c20a; }
.tier-name { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 2rem; line-height: 1; letter-spacing: -.01em; }
.tier-price { font-family: var(--display); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--teal); letter-spacing: -.03em; }
.tier-price small { font-family: var(--body); font-size: .8125rem; font-weight: 500; color: var(--muted); letter-spacing: 0; display: block; margin-top: .5rem; text-transform: none; }
.tier p { color: #B9C0B9; font-size: .9375rem; }
.tier .tick-list { margin-top: auto; padding-top: .5rem; }
.tier .button { margin-top: 1rem; }

.faq { display: grid; gap: 0; }
.q { font-size: clamp(1.0625rem, 2vw, 1.25rem); }

.post-list { display: grid; gap: 0; }
.post-link {
  display: grid; gap: 1.25rem; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 1.75rem 0; border-top: 1px solid var(--line);
  transition: padding-left .3s var(--ease-out);
}
.post-list .post-link:last-child { border-bottom: 1px solid var(--line); }
.post-link:hover { padding-left: .75rem; }
.post-link h3 { font-size: clamp(1.375rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.2; }
.post-link:hover h3 { color: var(--teal); }
.post-meta { font-size: .6875rem; letter-spacing: .14em; font-weight: 600; text-transform: uppercase; color: var(--muted); margin-bottom: .625rem; }
.post-link p { color: var(--muted); font-size: .9375rem; margin-top: .5rem; max-width: 44rem; }
.post-arrow { font-size: 1.75rem; color: var(--teal); }

.article { max-width: 46rem; margin-inline: auto; }
.article h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 2.75rem 0 1rem; }
.article h3 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 .625rem; }
.article p, .article li { color: #C4CAC3; margin-bottom: 1.125rem; }
.article ul { margin: 0 0 1.5rem 1.25rem; }
.article li { list-style: disc; margin-bottom: .5rem; }
.article blockquote {
  border-left: 3px solid var(--teal); padding: .25rem 0 .25rem 1.25rem; margin: 0 0 1.5rem;
  font-size: 1.25rem; line-height: 1.45; letter-spacing: -.02em; color: var(--paper);
}
.article img { width: 100%; height: auto; margin: 0 0 .75rem; border: 1px solid var(--line); }
.article figure { margin: 2rem 0; }
.article figcaption { font-size: .8125rem; color: var(--muted); }

.stat-row {
  display: grid; gap: 1px; background: var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  border: 1px solid var(--line); margin: 2rem 0;
}
.stat { background: var(--ink); padding: 1.5rem 1.25rem; }
.stat b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1; color: var(--teal); letter-spacing: -.03em; }
.stat span { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .625rem; }

.cta-band {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 3px;
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.cta-band h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
.cta-band p { color: var(--muted); margin-top: .75rem; max-width: 30rem; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1100px) { .flyer-card { right: .5rem; bottom: -1.5rem; } }

@media (max-width: 960px) {
  :root { --header-h: 72px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: .75rem; font-size: .875rem; font-weight: 600; padding: .625rem 0 .625rem .75rem; }
  .menu-bars { display: grid; gap: 5px; width: 1.375rem; }
  .menu-bars i { display: block; height: 2px; background: var(--paper); transition: transform .3s var(--ease-out); }
  .menu-toggle[aria-expanded="true"] .menu-bars i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-bars i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

  .header nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 1rem var(--gutter) 1.75rem;
    background: var(--ink); border-bottom: 1px solid var(--line);
    max-height: calc(100svh - var(--header-h)); overflow-y: auto;
  }
  .header nav.open { display: flex; animation: verdict-in .25s var(--ease-out); }
  .header nav > a { padding: .9375rem 0; font-size: 1.1875rem; border-bottom: 1px solid var(--line); }
  .header nav .nav-cta { border: 0; color: var(--teal); justify-content: space-between; padding: 1.125rem 0 .5rem; }
  .header nav .nav-cta:hover { background: none; color: var(--teal-soft); }

  .hero { min-height: 0; padding-top: clamp(3rem, 10vh, 5rem); }
  .hero-inner { padding-bottom: 3rem; }
  .hero-title { font-size: clamp(2.5rem, 10.2vw, 4.5rem); }
  .hero-scrim { background: linear-gradient(0deg, var(--ink) 4%, rgba(11,12,11,.5) 48%, rgba(11,12,11,.68) 100%); }
  .hero-foot { height: 3.75rem; font-size: .625rem; }
  .hero-meta { font-size: .5625rem; }
  .hero-actions { gap: .75rem; }
  .hero-actions .button { flex: 1 1 13rem; gap: 1rem; padding-inline: 1.125rem; }

  .section-top { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .verdict { min-height: 0; }
  .behind-media { margin-bottom: 3.5rem; }
  .flyer-card { width: 8rem; right: 0; bottom: -2rem; }
  .detail-body { padding-right: 0; }
  .post-link { grid-template-columns: minmax(0, 1fr); }
  .post-arrow { display: none; }
}

@media (max-width: 560px) {
  .hero-meta { display: none; }
  .hero-foot { justify-content: flex-start; }
  .quality-toggle { margin-left: 0; }
  .tri-hit { width: 4.5rem; height: 4.5rem; }
  .tri-ring { width: 2.5rem; height: 2.5rem; }
  .tri-name { font-size: 1.0625rem; }
  .count { font-size: 4rem; }
  .facts li { flex-direction: column; gap: .125rem; padding: .875rem 0; }
  .wordmark { font-size: 19vw; }
  .footer-bottom > span:nth-child(2) { display: none; }
  .tri-note { margin-top: 4rem; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}

/* ===========================================================================
   THE CLAPPERBOARD, startup animation
   One 1.9s timeline shared by every part, so nothing depends on a separate
   animation-delay landing correctly. Fill-mode forwards/both throughout, so
   the overlay clears itself even if no JavaScript runs after first paint.
   =========================================================================== */
.leader { display: none; }
.leader-on .leader {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 300;
  background: #070806; color: #F2F2EC;
  overflow: hidden;
  animation: leader-out .34s var(--ease) 1.6s forwards;
}
@keyframes leader-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ---------- the board ---------- */
.clapper {
  position: relative; display: block; padding: 0; cursor: pointer;
  width: min(80vmin, 40rem); aspect-ratio: 1.42;
  filter: drop-shadow(0 3rem 4rem #000000cc);
  animation: clap-board 1.9s var(--ease-out) both;
  transform-origin: 50% 70%;
}
@keyframes clap-board {
  0%        { opacity: 0; transform: translate(0, 3rem) rotate(-2deg) scale(.94); }
  13%       { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  48%       { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  /* the kick when the stick lands */
  51%       { opacity: 1; transform: translate(-1%, 1.3%) rotate(.6deg) scale(1.012); }
  54%       { opacity: 1; transform: translate(.8%, -.7%) rotate(-.45deg) scale(.996); }
  57%       { opacity: 1; transform: translate(-.3%, .3%) rotate(.2deg) scale(1.002); }
  60%       { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  66%       { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100%      { opacity: 0; transform: translate(0, -150%) rotate(-9deg) scale(.97); }
}

/* The fixed lower stick, and the hinged arm that slams onto it. */
.clapper-stick, .clapper-arm {
  position: absolute; left: 0; right: 0; height: 15%;
  border-radius: .15rem; overflow: hidden;
  background: #101110;
  box-shadow: inset 0 0 0 1px #00000080;
}
.clapper-stick { top: 15%; }
.clapper-arm {
  top: 0; transform-origin: 2% 100%;
  animation: clap-arm 1.9s cubic-bezier(.2, .85, .25, 1) both;
  box-shadow: inset 0 0 0 1px #00000080, 0 .35rem .9rem #00000073;
}
@keyframes clap-arm {
  0%, 46%   { transform: rotate(-32deg); }
  50%       { transform: rotate(0deg); }     /* SNAP */
  53%       { transform: rotate(-4.5deg); }  /* bounce */
  56%       { transform: rotate(0deg); }
  58%       { transform: rotate(-1.5deg); }
  61%, 100% { transform: rotate(0deg); }
}
.clapper-stripes {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(108deg,
    #121312 0 1.55rem, #F2F2EC 1.55rem 3.1rem);
}
/* A hinge pin, so the arm reads as attached rather than floating. */
.clapper-arm::after {
  content: ''; position: absolute; left: 1.4%; bottom: -8%;
  width: .55rem; height: .55rem; border-radius: 50%;
  background: #8C918A; box-shadow: 0 0 0 1px #00000073;
}

/* ---------- the written face ---------- */
.clapper-face {
  position: absolute; left: 0; right: 0; top: 30%; bottom: 0;
  background: #14171A;
  background-image: linear-gradient(#ffffff08, #00000026);
  border-radius: 0 0 .2rem .2rem;
  box-shadow: inset 0 0 0 1px #ffffff1a;
  display: grid; grid-template-rows: auto auto auto auto;
  padding: clamp(.5rem, 1.6vw, 1rem) clamp(.75rem, 2.2vw, 1.5rem);
  gap: clamp(.25rem, .9vw, .6rem);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-align: left;
  animation: clap-write .5s var(--ease-out) both;
}
@keyframes clap-write { from { opacity: 0; } to { opacity: 1; } }

.cl-line, .cl-cells { display: flex; align-items: baseline; gap: clamp(.5rem, 1.6vw, 1.1rem); }
.cl-cells { justify-content: space-between; }
.cl-cells > span { display: flex; align-items: baseline; gap: clamp(.4rem, 1.2vw, .8rem); flex: 1; }
.clapper-face i {
  font-style: normal; font-size: clamp(.45rem, 1.05vw, .7rem);
  letter-spacing: .18em; color: #8E9488; flex: none;
}
.clapper-face b {
  font-weight: 400; font-size: clamp(.7rem, 1.9vw, 1.25rem);
  letter-spacing: .06em; color: #F2F2EC;
  border-bottom: 1px solid #ffffff1f; flex: 1; min-width: 0;
  padding-bottom: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-prod b { color: var(--teal); }

/* Every row separated by a rule, like a real slate. */
.cl-line + .cl-line, .cl-cells + .cl-line, .cl-line + .cl-cells { padding-top: .1em; }

/* ---------- grain, flash, skip ---------- */
.leader-grain {
  position: absolute; inset: -20%; pointer-events: none; opacity: .14; z-index: 3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation: grain .12s steps(3, end) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-3%, 2%); }
  66%  { transform: translate(2%, -3%); }
  100% { transform: translate(-1%, -1%); }
}
.leader::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 55%, #000000b3 100%);
}
.leader-flash {
  position: absolute; inset: 0; background: #F2F2EC; opacity: 0; pointer-events: none; z-index: 5;
  animation: clap-flash 1.9s linear both;
}
@keyframes clap-flash {
  0%, 48%   { opacity: 0; }
  50%       { opacity: .6; }
  56%, 100% { opacity: 0; }
}
.leader-skip {
  position: absolute; right: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1rem, 4vw, 2.5rem); z-index: 6;
  display: inline-flex; align-items: center; gap: .625rem;
  font-size: .6875rem; letter-spacing: .2em; font-weight: 600; color: #F2F2EC99;
  border: 1px solid #F2F2EC3d; border-radius: 100px; padding: .5rem .875rem;
  animation: clap-write .4s var(--ease-out) both;
  transition: color .2s, border-color .2s;
}
.leader-skip:hover { color: #F2F2EC; border-color: #F2F2EC; }
.leader-skip:focus-visible { outline: 2px solid #F2F2EC; outline-offset: 3px; }

/* ---------- clicked by hand: snap now, then get out of the way ---------- */
.leader.snapped .clapper-arm { animation: clap-hit .16s cubic-bezier(.2, .9, .25, 1) forwards; }
@keyframes clap-hit { from { transform: rotate(-32deg); } to { transform: rotate(0deg); } }
.leader.snapped .clapper { animation: clap-kick .42s var(--ease-out) .12s forwards; }
@keyframes clap-kick {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  14%  { opacity: 1; transform: translate(-1%, 1.3%) rotate(.6deg) scale(1.012); }
  30%  { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(0, -150%) rotate(-9deg) scale(.97); }
}
.leader.snapped .leader-flash { animation: clap-hit-flash .3s linear forwards; }
@keyframes clap-hit-flash { 0% { opacity: 0; } 18% { opacity: .6; } 100% { opacity: 0; } }
.leader.snapped { animation: leader-out .3s var(--ease) .38s forwards; }

/* Dismissed outright (Esc, scroll, or the skip button). */
.leader.skipped { animation: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s; }

@media (max-width: 560px) {
  .clapper { width: 88vw; }
  .clapper-stripes { background: repeating-linear-gradient(108deg, #121312 0 1rem, #F2F2EC 1rem 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .leader-on .leader { display: none; }
}

/* ===========================================================================
   BEFORE / AFTER SLIDER (walkthrough page)
   =========================================================================== */
.ba { --split: 50%; position: relative; border: 1px solid var(--line); overflow: hidden; background: #000; }
.ba img { display: block; width: 100%; height: auto; }
.ba-after { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 0 0 var(--split)); }
.ba-after img { width: 100%; height: 100%; object-fit: cover; }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; background: var(--teal); pointer-events: none; box-shadow: 0 0 12px #3fd0c299; }
.ba-line::after {
  content: '\2194'; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal); color: var(--ink); font-size: 1.125rem; font-weight: 700;
}
.ba input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize; appearance: none; background: none; border: 0;
}
.ba input[type="range"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; opacity: 1; }
.ba-tag {
  position: absolute; top: .75rem; z-index: 2; pointer-events: none;
  font-size: .625rem; letter-spacing: .16em; font-weight: 700; text-transform: uppercase;
  padding: .3125rem .625rem; border-radius: 100px; backdrop-filter: blur(4px);
}
.ba-tag-before { left: .75rem; background: #0b0c0bc4; color: #C4CAC3; border: 1px solid #ffffff2b; }
.ba-tag-after { right: .75rem; background: var(--teal); color: var(--ink); }
.ba-caption { margin-top: .875rem; font-size: .875rem; color: var(--muted); }

.change {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  align-items: start;
}
.change-copy h3 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: .95; letter-spacing: -.02em; margin-bottom: 1rem;
}
.change-copy .num { font-family: var(--display); font-size: 1.125rem; color: var(--teal); letter-spacing: .1em; display: block; margin-bottom: .625rem; }
.change-copy p { color: #C4CAC3; margin-bottom: 1rem; }
.change-copy .then-now { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 1.5rem; }
.then-now div { background: var(--ink); padding: .875rem 1rem; display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; font-size: .875rem; }
.then-now b { color: var(--muted); font-weight: 600; }
.then-now s { color: #7E847C; }
.then-now em { font-style: normal; color: var(--teal); font-weight: 600; }

/* ===========================================================================
   THE GUIDED TOUR
   A card pinned over the real pages, plus a ring on whatever it is pointing at.
   =========================================================================== */
.tour {
  position: fixed; z-index: 220;
  right: clamp(.75rem, 2vw, 1.75rem); bottom: clamp(.75rem, 2vw, 1.75rem);
  width: min(26rem, calc(100vw - 1.5rem));
  background: color-mix(in srgb, var(--ink-2) 94%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid #3A403A; border-radius: 4px;
  box-shadow: 0 2rem 4.5rem -1rem #000000d9;
  color: var(--paper); overflow: hidden;
  max-height: calc(100svh - 1.5rem);
  display: flex; flex-direction: column;
}
.tour-bar, .tour-foot { flex: none; }
.tour-body { overflow-y: auto; overscroll-behavior: contain; }
.tour.in { animation: tour-in .4s var(--ease-out); }
@keyframes tour-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.no-motion .tour.in { animation: none; }

.tour-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem; border-bottom: 1px solid var(--line);
}
.tour-count { font-size: .625rem; letter-spacing: .18em; font-weight: 700; color: var(--teal); }
.tour-x { font-size: 1.5rem; line-height: 1; color: var(--muted); padding: 0 .25rem; transition: color .2s; }
.tour-x:hover { color: var(--paper); }

.tour-body { padding: 1.125rem 1.25rem 1.25rem; }
.tour-body::-webkit-scrollbar { width: 6px; }
.tour-body::-webkit-scrollbar-thumb { background: #3A403A; border-radius: 3px; }
.tour-kicker { font-size: .625rem; letter-spacing: .16em; font-weight: 700; color: var(--muted); }
.tour-title {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.75rem; line-height: .95; letter-spacing: -.02em; margin: .5rem 0 .625rem;
}
.tour-text { font-size: .875rem; line-height: 1.6; color: #C4CAC3; }

.tour-shots { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; }
.tour-shots figure { margin: 0; }
.tour-shots img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 2px; filter: saturate(.85);
}
.tour-shots .is-new img { border-color: var(--teal-deep); filter: none; }
.tour-shots figcaption {
  font-size: .5625rem; letter-spacing: .14em; font-weight: 700;
  color: var(--muted); margin-top: .375rem;
}
.tour-shots .is-new figcaption { color: var(--teal); }

.tour-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem 1rem; border-top: 1px solid var(--line);
}
.tour-back, .tour-next {
  font-size: .8125rem; font-weight: 600; padding: .4375rem .75rem;
  border: 1px solid var(--line); border-radius: 100px; transition: border-color .2s, color .2s, background .2s;
}
.tour-back:hover:not([disabled]) { border-color: var(--paper); }
.tour-back[disabled] { opacity: .35; cursor: default; }
.tour-next { background: var(--teal); color: var(--ink); border-color: var(--teal); }
.tour-next:hover { background: var(--teal-soft); border-color: var(--teal-soft); }
.tour-dots { display: flex; gap: .3125rem; }
.tour-dots i { width: .3125rem; height: .3125rem; border-radius: 50%; background: #3A403A; }
.tour-dots i.on { background: var(--teal); }

/* What the current stop is pointing at. */
.tour-focus {
  position: relative;
  outline: 2px solid var(--teal); outline-offset: .75rem; border-radius: 2px;
  animation: tour-ring 2.4s var(--ease-out) infinite;
}
@keyframes tour-ring {
  0%, 100% { outline-color: #3fd0c2; }
  50%      { outline-color: #3fd0c24d; }
}
.no-motion .tour-focus { animation: none; }

@media (max-width: 700px) {
  .tour { left: .75rem; right: .75rem; width: auto; }
  .tour-title { font-size: 1.5rem; }
  .tour-shots { gap: .375rem; }
  .tour-focus { outline-offset: .375rem; }
}

/* ===========================================================================
   BROADCAST DOCUMENTARY PARTNERSHIPS
   Reception desk, then the slate. Deliberately quieter than the rest of the
   site: no marquee, no reel, nothing salesy.
   =========================================================================== */
.partner-hero { border-bottom: 0; }
.partner-note {
  margin-top: 1.5rem; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-left: 2px solid var(--teal-deep); padding-left: .875rem;
}
.partner-gate { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.partner-grid {
  display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.partner-grid.solo { grid-template-columns: minmax(0, 34rem); }
.partner-card {
  border: 1px solid var(--line); background: var(--ink-2); border-radius: 3px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1rem;
}
.partner-card h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
.partner-card p { color: #C4CAC3; font-size: .9375rem; }
.partner-card .button { margin-top: auto; align-self: flex-start; }

.partner-form { display: grid; gap: .625rem; margin-top: auto; }
.partner-form label { font-size: .75rem; letter-spacing: .14em; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.partner-form input {
  color: var(--paper); border-bottom-color: #3A403A; margin-top: 0;
  letter-spacing: .25em; font-size: 1.0625rem;
}
.partner-form input::placeholder { color: #4E554E; letter-spacing: .25em; }
.partner-form input:hover { border-bottom-color: #5E655E; }
.partner-form input:focus { border-bottom-color: var(--teal); outline: none; }
.partner-form .button { width: 100%; margin-top: .75rem; }
.partner-error {
  margin-top: .75rem; font-size: .8125rem; color: #E98B8B;
  border-left: 2px solid #8C3A3A; padding-left: .75rem;
}
.partner-credit {
  margin-top: clamp(2rem, 4vw, 3rem); font-size: .875rem; color: var(--muted);
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.partner-credit a { color: var(--teal); border-bottom: 1px solid var(--teal-deep); }

/* ---------- the slate ---------- */
.slate-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.slate-card {
  border: 1px solid var(--line); background: var(--ink-2); border-radius: 3px;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.slate-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.slate-title { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: .98; letter-spacing: -.02em; margin: .625rem 0 .5rem; }
.slate-logline { color: #C4CAC3; font-size: .9375rem; max-width: 46rem; }
.slate-status {
  flex: none; font-size: .625rem; letter-spacing: .16em; font-weight: 700;
  color: var(--teal); border: 1px solid var(--teal-deep); background: #3fd0c214;
  border-radius: 100px; padding: .3125rem .75rem;
}
.slate-player {
  margin-top: 1.25rem; aspect-ratio: 16 / 9; background: #0A0C0A;
  border: 1px solid var(--line); border-radius: 2px;
  display: grid; place-items: center; overflow: hidden;
}
.slate-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.slate-empty { color: var(--muted); font-size: .8125rem; text-align: center; padding: 1rem; }
.slate-empty code { background: var(--ink-3); border: 1px solid var(--line); border-radius: 3px; padding: .1em .35em; color: var(--teal-soft); }
.slate-meta {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); margin-top: 1.25rem;
}
.slate-meta span { background: var(--ink-2); padding: .875rem 1rem; display: grid; gap: .3125rem; }
.slate-meta i { font-style: normal; font-size: .5625rem; letter-spacing: .16em; color: var(--muted); }
.slate-meta b { font-weight: 500; font-size: .9375rem; }

/* Five tiles: three across the top, two wider underneath, so the last row is
   never a single stranded card. Narrower screens fall back to the auto grid. */
@media (min-width: 1000px) {
  .work-grid-five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .work-grid-five > * { grid-column: span 2; }
  .work-grid-five > :nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 640px) and (max-width: 999px) {
  .work-grid-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid-five > :last-child { grid-column: 1 / -1; }
}

/* ===========================================================================
   ROUND 2
   =========================================================================== */

/* The punchline gets a line of its own at every width, and never wraps. */
.hero-title .punch { white-space: nowrap; }

/* ---------- collapsible home sections ----------
   Fails open: without script.js nothing is ever collapsed. The head script
   adds .fold-start on phones so the first paint is already folded, and takes
   it away again on a timer if script.js never arrives. */
.fold-body { display: grid; grid-template-rows: 1fr; }
.fold-inner { min-height: 0; }
.js .fold { transition: padding-bottom .32s var(--ease-out); }
.js .fold-body { transition: grid-template-rows .32s var(--ease-out), visibility 0s; }
.js .fold .section-top { transition: margin .32s var(--ease-out), padding .32s var(--ease-out); }
.fold.is-collapsed .fold-body,
.fold-start .fold:not([data-fold-open]) .fold-body {
  grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .32s var(--ease-out), visibility 0s .32s;
}
.fold.is-collapsed .fold-inner,
.fold.is-animating .fold-inner,
.fold-start .fold:not([data-fold-open]) .fold-inner { overflow: hidden; }
.fold.is-collapsed,
.fold-start .fold:not([data-fold-open]) { padding-block: 1.125rem; }
.fold.is-collapsed .section-top,
.fold-start .fold:not([data-fold-open]) .section-top { margin-bottom: 0; padding-bottom: 1.125rem; }
.no-motion .fold.fold, .no-motion .fold .fold-body, .no-motion .fold .section-top,
.fold.fold-instant, .fold.fold-instant .fold-body, .fold.fold-instant .section-top { transition: none; }
/* Scroll anchoring would pin whatever is lower down the screen and shove the
   header you just tapped up out of view. The header should stay put. */
.fold { overflow-anchor: none; }

.folds-ready .fold .section-top { position: relative; padding-right: 3rem; }
.fold-toggle {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  text-align: left; padding: 0; background: none; border: 0; cursor: pointer;
}
.fold-toggle::after { content: ''; position: absolute; inset: -.5rem 0 0; }
.fold-toggle:focus-visible { outline: none; }
.fold-toggle:focus-visible::after { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 2px; }
.paper .fold-toggle:focus-visible::after, .contact .fold-toggle:focus-visible::after { outline-color: var(--ink); }
.fold-icon {
  position: absolute; right: 0; top: -.3rem;
  width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 50%;
  color: var(--teal); transition: border-color .2s, transform .32s var(--ease-out);
}
.fold-icon::before, .fold-icon::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: .75rem; height: 1.5px; margin: -.75px 0 0 -.375rem; background: currentColor;
  transition: transform .32s var(--ease-out);
}
.fold-icon::after { transform: rotate(90deg); }
.fold-toggle[aria-expanded="true"] .fold-icon::after { transform: rotate(0deg); }
.section-top:hover .fold-icon { border-color: currentColor; }
.paper .fold-icon { border-color: var(--line-paper); color: var(--teal-deep); }
.contact .fold-icon { border-color: #0b0c0b40; color: var(--ink); }

/* ---------- a tile that plays the reel and links to its case study ---------- */
.work-card-split .work-image { width: 100%; padding: 0; text-align: left; }
.work-card-split .work-image:hover img, .work-card-split .work-image:focus-visible img { transform: scale(1.05); filter: saturate(1) brightness(1); }
.work-card-split .work-image:hover .work-play { background: var(--teal); border-color: var(--teal); color: var(--ink); }
.work-card-split .work-caption:hover b { color: var(--teal); }

/* ---------- case-study gallery ----------
   Landscape frames run full width; portrait ones sit in pairs at their own
   shape, never cropped to 16:9. */
.case-gallery {
  max-width: 60rem; margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  display: grid; gap: clamp(.75rem, 1.5vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr));
}
.case-gallery figure { margin: 0; grid-column: 1 / -1; }
.case-gallery figure.portrait { grid-column: auto; }
.case-gallery img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--ink-3); }
.case-gallery .portrait img { aspect-ratio: 1202 / 1600; object-fit: contain; }
@media (max-width: 480px) {
  .case-gallery figure.portrait { grid-column: 1 / -1; }
}
.case-kicker { margin-top: 1.25rem; color: var(--teal); }
.case-kicker + h1 { margin-top: .75rem; }