/* ============================================================================
   OPUS AUDIO LABS — site.css
   Design language: cinematic NAVY frame + light-gray "liner-notes" press sheets,
   refined EMERALD accent. Poppins (statements) / Cormorant (voice) / JetBrains
   Mono (console-readout metadata). Signature: the credits set like liner notes.
   ========================================================================== */

/* ---- Tokens -------------------------------------------------------------- */
:root {
  /* Uniform near-black surfaces + restrained gold accent.
     "paper" tokens are kept but resolved DARK now — the whole site is one calm
     black canvas per the brief (no more light sections). */
  --navy:      #0b0b0c;   /* base near-black            */
  --navy-2:    #141416;   /* raised panel / cards        */
  --navy-3:    #1c1c1f;   /* lifted                      */
  --paper-hi:  #0e0e10;   /* whisper-lifted dark band     */
  --paper-hi2: #101012;

  /* Text — soft warm light-gray (not white) for a calm black-and-gray feel */
  --on-navy:      #c7c4bc;
  --on-navy-mut:  #928d84;
  --on-paper:     #c7c4bc;
  --on-paper-mut: #928d84;

  /* Accent — gold, single tone across the whole site */
  --acc-navy:   #c9a24e;
  --acc-paper:  #c9a24e;

  /* Lines */
  --line-navy:  rgba(239,236,227,0.12);
  --line-paper: rgba(239,236,227,0.12);

  /* Type */
  --f-display: "Poppins", system-ui, sans-serif;
  --f-voice:   "Cormorant Garamond", Georgia, serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --maxw: 1200px;
  --gut: clamp(1.25rem, 4vw, 4rem);

  /* Fluid type scale */
  --t-mega: clamp(3.2rem, 12vw, 9.5rem);
  --t-h1:   clamp(2.2rem, 6vw, 4.2rem);
  --t-h2:   clamp(1.7rem, 3.6vw, 2.7rem);
  --t-h3:   clamp(1.15rem, 1.8vw, 1.45rem);
  --t-lead: clamp(1.15rem, 1.9vw, 1.5rem);
  --t-body: clamp(1rem, 1.15vw, 1.075rem);
  --t-meta: 0.72rem;
}

/* ---- Reset / base ------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f-display);
  background: var(--navy);
  color: var(--on-navy);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--acc-navy); color: var(--navy); }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* ---- Shared type helpers ------------------------------------------------ */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--on-navy-mut);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--acc-navy);
  display: inline-block;
}
.paper .eyebrow { color: var(--on-paper-mut); }
.paper .eyebrow::before { background: var(--acc-paper); }
/* Section labels join the typewriter language; the hero kicker and nav stay
   in the console mono. */
.section .eyebrow, .phero .eyebrow {
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 0.8rem; letter-spacing: 0.22em;
}

.voice {
  font-family: var(--f-voice);
  font-weight: 500;
  line-height: 1.34;
}

/* ---- Nav ---------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--navy) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-navy);
}
.nav__in {
  max-width: var(--maxw); margin-inline: auto;
  padding: 1.05rem var(--gut);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
/* Real logo, ring-free — same lockup as the footer signature. */
.brand { display: flex; align-items: center; }
.brand__logo { display: block; height: 34px; width: auto; }

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.4rem); }
.nav__links a {
  font-family: var(--f-mono);
  font-size: var(--t-meta); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--on-navy-mut);
  transition: color 0.2s ease;
  position: relative; padding: 0.35rem 0;
}
.nav__links a:hover { color: var(--on-navy); }
.nav__links a[aria-current="page"] { color: var(--on-navy); }
.nav__links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: var(--acc-navy);
}
.nav__cta {
  border: 1px solid var(--line-navy);
  padding: 0.6rem 1.2rem !important;
  border-radius: 2px;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.nav__cta:hover { border-color: var(--acc-navy); color: var(--acc-navy) !important; }
.nav__menu-btn { display: none; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-mono);
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.85rem 1.5rem; border-radius: 2px;
  border: 1px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--solid { background: var(--acc-navy); color: var(--navy); font-weight: 500; }
.btn--solid:hover { transform: translateY(-2px); }
.btn--ghost { border-color: var(--line-navy); color: var(--on-navy); }
.btn--ghost:hover { border-color: var(--acc-navy); color: var(--acc-navy); }
.paper .btn--solid { background: var(--acc-paper); color: #fff; }
.paper .btn--ghost { border-color: var(--line-paper); color: var(--on-paper); }
.paper .btn--ghost:hover { border-color: var(--acc-paper); color: var(--acc-paper); }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* ---- Sections ----------------------------------------------------------- */
.section { padding-block: clamp(4.5rem, 9vw, 8rem); }
.paper { background: var(--paper-hi); color: var(--on-paper); }
.paper--alt { background: var(--paper-hi2); }
.section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 62ch; }
.section__title {
  font-family: var(--f-display);
  font-weight: 800; font-size: clamp(1.2rem, 3.4vw, 2.3rem); /* match hero title */
  text-transform: uppercase; letter-spacing: -0.035em;
  margin-top: 1rem; line-height: 1.02;
}
.section__lead {
  font-family: var(--f-voice); font-size: var(--t-lead);
  margin-top: 1.1rem; color: var(--on-paper-mut); line-height: 1.4;
}
.section:not(.paper) .section__lead { color: var(--on-navy-mut); }
.section__title--eyebrow { margin-top: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

/* ============================================================================
   HERO
   ========================================================================== */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {              /* the compressor shot is high-contrast B&W and busy
                                   edge to edge, so it needs a real scrim, not a touch:
                                   a left wedge for the copy, a bottom lift, and a flat
                                   veil to knock the tube glass off pure white */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--navy) 10%,
                    color-mix(in srgb, var(--navy) 84%, transparent) 42%,
                    color-mix(in srgb, var(--navy) 28%, transparent) 78%,
                    transparent 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--navy) 85%, transparent) 2%, transparent 38%),
    color-mix(in srgb, var(--navy) 20%, transparent);
}
.hero__in {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut);
  min-height: min(92vh, 900px);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-block: clamp(2.25rem, 5.5vh, 3.75rem) clamp(5rem, 12vh, 9rem);
}
.hero__kicker { margin-bottom: clamp(1rem, 2.4vw, 1.5rem); }
.hero__title {
  font-family: var(--f-display);
  font-weight: 800; font-size: clamp(1.2rem, 3.4vw, 2.3rem);
  line-height: 1; letter-spacing: -0.035em; text-transform: uppercase;
  max-width: none;
}
.hero__title .accent { color: var(--acc-navy); }
.hero__quote {
  font-family: var(--f-voice); font-weight: 500;
  font-size: var(--t-lead); line-height: 1.42;
  /* narrow column — no line runs past the title block, so the quote sits
     inside the dark left side of the compressor shot */
  max-width: 26ch; margin-top: clamp(1.75rem, 4vw, 2.5rem);
  color: color-mix(in srgb, var(--on-navy) 92%, transparent);
}
.hero__quote .mark { color: var(--acc-navy); font-size: 1.4em; line-height: 0; vertical-align: -0.28em; margin-right: 0.1em; }
.hero__quote .mark--close { margin-right: 0; margin-left: 0.06em; }
.hero__attrib {
  font-family: var(--f-mono); font-size: var(--t-meta);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--on-navy-mut); margin-top: 1.4rem;
}

/* Closing portrait — Chris at the console, bottom of the home page.
   Same no-hard-edge treatment as the hero: rises out of the black and sinks
   back into it, full strength only in the center. */
.closer__photo { position: relative; }
.closer__photo img {
  width: 100%; object-fit: cover;
  height: clamp(400px, 78vh, 780px); object-position: center 30%;
}
.closer__photo::before,
.closer__photo::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.closer__photo::before {
  top: 0; height: 36%;
  background: linear-gradient(180deg,
    var(--navy) 0%,
    color-mix(in srgb, var(--navy) 62%, transparent) 48%,
    transparent 100%);
}
.closer__photo::after {
  bottom: 0; height: 32%;
  background: linear-gradient(0deg,
    var(--navy) 0%,
    color-mix(in srgb, var(--navy) 62%, transparent) 48%,
    transparent 100%);
}
.closer__caption {
  font-family: var(--f-mono); font-size: var(--t-meta);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--on-navy-mut); text-align: center;
  padding-block: 0 clamp(2rem, 4vw, 3rem);
}

/* ============================================================================
   SIGNATURE — the WORK credits, set like liner notes on a press sheet
   ========================================================================== */
.credits { columns: 1; column-gap: clamp(3rem, 6vw, 6rem); }
@media (min-width: 820px) { .credits { columns: 2; } }
.cat { break-inside: avoid; margin-bottom: clamp(2.75rem, 5vw, 3.75rem); }
.cat--wide { break-inside: auto; margin-top: clamp(2.75rem, 5vw, 3.75rem); }
.cat--wide .cat__list { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1040px) { .cat--wide .cat__list { columns: 3; } }
.cat--wide .cat__list li { break-inside: avoid; }

.cat__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--acc-paper);
  margin-bottom: 0.4rem;
}
.cat__name {
  font-family: "Special Elite", "Courier New", monospace; font-weight: 400;
  font-size: var(--t-h3); text-transform: uppercase; letter-spacing: 0.04em;
}
.cat__count {
  font-family: var(--f-mono); font-size: var(--t-meta);
  letter-spacing: 0.14em; color: var(--acc-paper);
}
.cat__list { list-style: none; }
.cat__list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-paper);
  display: grid; gap: 0.15rem;
}
.cat__list li:last-child { border-bottom: none; }
.credit__name {
  /* typewriter — like a tracking sheet taped to the console (per Chris) */
  font-family: "Special Elite", "Courier New", monospace; font-weight: 400;
  font-size: 1.05rem; letter-spacing: 0.01em; line-height: 1.25;
}
.credit__note {
  font-family: var(--f-voice); font-style: italic;
  font-size: 1.02rem; color: var(--on-paper-mut); line-height: 1.3;
}
.credit__note--mono {
  font-family: var(--f-mono); font-style: normal; font-size: 0.72rem;
  letter-spacing: 0.06em; color: var(--on-paper-mut);
}
.star { color: var(--acc-paper); }
.work__foot {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line-paper);
  font-family: var(--f-voice); font-size: var(--t-lead);
  color: var(--on-paper-mut); max-width: 60ch; line-height: 1.4;
}

/* ============================================================================
   TESTIMONIALS (navy)
   ========================================================================== */
.quotes { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 760px) { .quotes { grid-template-columns: 1fr 1fr; } }
.qcard {
  border: 1px solid var(--line-navy);
  border-radius: 3px; padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--navy-2);
  display: flex; flex-direction: column; gap: 1.5rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.qcard:hover { border-color: color-mix(in srgb, var(--acc-navy) 45%, var(--line-navy)); transform: translateY(-3px); }
.qcard__text { font-family: var(--f-voice); font-size: var(--t-h3); line-height: 1.4; }
.qcard__text::before { content: "\201C"; color: var(--acc-navy); font-size: 1.3em; line-height: 0; margin-right: 0.05em; vertical-align: -0.25em; }
.qcard__text::after  { content: "\201D"; color: var(--acc-navy); font-size: 1.3em; line-height: 0; margin-left: 0.04em;  vertical-align: -0.25em; }
.qcard__by { margin-top: auto; }
.qcard__name { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; }
.qcard__role { font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-navy-mut); margin-top: 0.35rem; }

/* ============================================================================
   COMMUNITY (paper alt)
   ========================================================================== */
.circle { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 720px) { .circle { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .circle { grid-template-columns: repeat(3, 1fr); } }
.circle--wide { grid-column: 1 / -1; }
.circ__label {
  font-family: var(--f-mono); font-size: var(--t-meta);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--acc-paper);
  padding-bottom: 0.7rem; margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--line-paper);
}
.circ__list { list-style: none; display: grid; gap: 0.7rem; }
.circ__name { font-weight: 600; font-size: 0.98rem; }
.circ__desc { font-family: var(--f-voice); font-style: italic; font-size: 0.98rem; color: var(--on-paper-mut); }
.circ__list--cols { display: block; columns: 1; column-gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 780px) { .circ__list--cols { columns: 2; } }
.circ__list--cols li { break-inside: avoid; padding: 0.35rem 0; }

/* ============================================================================
   SAMPLES — audio cards + video reel
   ========================================================================== */
.samples { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (min-width: 720px) { .samples { grid-template-columns: repeat(2, 1fr); } }

.scard {
  border: 1px solid var(--line-navy);
  background: var(--navy-2); border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.scard:hover { border-color: color-mix(in srgb, var(--acc-navy) 50%, var(--line-navy)); transform: translateY(-3px); }
.scard__top { display: flex; gap: 1.15rem; padding: 1.35rem; align-items: center; }
.scard__art {
  width: 88px; height: 88px; flex: none; border-radius: 3px;
  background: var(--navy-3); object-fit: cover;
  border: 1px solid var(--line-navy);
}
.scard__art--ph { display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.14em; color: var(--on-navy-mut); text-align: center; }
.scard__meta { min-width: 0; }
.scard__role { font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: 0.18em; text-transform: uppercase; color: var(--acc-navy); }
.scard__artist { font-weight: 700; font-size: 1.25rem; line-height: 1.1; margin-top: 0.45rem; }
.scard__title { font-family: var(--f-voice); font-style: italic; font-size: 1.1rem; color: var(--on-navy-mut); margin-top: 0.25rem; }
.scard__links { display: flex; flex-direction: column; border-top: 1px solid var(--line-navy); margin-top: auto; }
.scard__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.35rem;
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-navy-mut);
  border-top: 1px solid var(--line-navy);
  transition: color 0.2s ease, background 0.2s ease;
}
.scard__links .scard__link:first-child { border-top: none; }
.scard__link:hover { color: var(--acc-navy); background: color-mix(in srgb, var(--acc-navy) 7%, transparent); }
.scard__link .svc { color: inherit; }
.scard__link .arrow { transition: transform 0.2s ease; }
.scard__link:hover .arrow { transform: translateX(4px); }

/* Video reel — facade thumbnails that swap to iframe on click */
.reel { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 640px) { .reel { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .reel { grid-template-columns: repeat(3, 1fr); } }
.vid { border: 1px solid var(--line-navy); border-radius: 4px; overflow: hidden; background: var(--navy-2); }
.vid__frame { position: relative; aspect-ratio: 16 / 9; cursor: pointer; background: #000; }
.vid__frame img, .vid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.vid__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--navy) 70%, transparent), transparent 55%);
  transition: opacity 0.2s ease; pointer-events: none;
}
.vid__play {
  position: absolute; inset: 0; margin: auto;
  width: 58px; height: 58px; border-radius: 50%;
  background: color-mix(in srgb, var(--navy) 60%, transparent);
  border: 1.5px solid var(--acc-navy);
  display: grid; place-items: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.vid__frame:hover .vid__play { background: var(--acc-navy); transform: scale(1.06); }
.vid__play svg { width: 20px; height: 20px; fill: var(--acc-navy); transition: fill 0.2s ease; margin-left: 3px; }
.vid__frame:hover .vid__play svg { fill: var(--navy); }
.vid__cap { padding: 0.9rem 1.1rem; font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-navy-mut); }

/* ============================================================================
   MEDIA — press cards
   ========================================================================== */
.press { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.pcard {
  display: grid; gap: 0.5rem;
  grid-template-columns: auto 1fr auto; align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line-navy); border-radius: 4px;
  background: var(--navy-2);
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.pcard:hover { border-color: color-mix(in srgb, var(--acc-navy) 50%, var(--line-navy)); transform: translateY(-3px); }
.pcard__no { font-family: var(--f-mono); font-size: 0.85rem; color: var(--acc-navy); letter-spacing: 0.1em; grid-row: 1 / span 2; align-self: start; padding-right: 1.4rem; }
.pcard__body { grid-column: 2; }
.pcard__pub { font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-navy-mut); }
.pcard__title { font-family: var(--f-voice); font-size: clamp(1.4rem, 2.6vw, 1.95rem); line-height: 1.2; margin: 0.55rem 0 0.5rem; }
.pcard__by { font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: 0.08em; color: var(--on-navy-mut); }
.pcard__go { grid-column: 3; grid-row: 1 / span 2; align-self: center; padding-left: 1.4rem; color: var(--acc-navy); }
.pcard__go .arrow { transition: transform 0.2s ease; display: inline-block; }
.pcard:hover .pcard__go .arrow { transform: translateX(5px); }
@media (max-width: 620px) {
  .pcard { grid-template-columns: auto 1fr; }
  .pcard__go { grid-column: 2; grid-row: auto; padding-left: 0; padding-top: 0.5rem; }
}

/* ============================================================================
   CONTACT
   ========================================================================== */
.contact { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 860px) { .contact { grid-template-columns: 1fr 1fr; align-items: start; } }
.contact__lead { font-family: var(--f-voice); font-size: var(--t-lead); color: var(--on-navy-mut); max-width: 40ch; line-height: 1.4; }
.contact__mail { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.08em; margin-top: 1.75rem; }
.contact__mail a { color: var(--acc-navy); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.contact__mail a:hover { border-color: var(--acc-navy); }
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.5rem; }
.field label { font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-navy-mut); }
.field input, .field textarea {
  font-family: var(--f-display); font-size: 1rem; color: var(--on-navy);
  background: var(--navy-2); border: 1px solid var(--line-navy); border-radius: 3px;
  padding: 0.85rem 1rem; width: 100%;
  transition: border-color 0.2s ease;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--acc-navy); }
.field textarea { resize: vertical; min-height: 130px; }

/* ============================================================================
   Apple Digital Masters badge
   ========================================================================== */
.adm {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line-navy);
}
.adm img { height: clamp(38px, 5vw, 52px); width: auto; opacity: 0.9; }

/* ============================================================================
   FOOTER
   ========================================================================== */
.footer { border-top: 1px solid var(--line-navy); padding-block: clamp(3rem, 6vw, 4.5rem); }
.footer__in { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .footer__in { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__badge { display: flex; gap: 1rem; align-items: center; }
.footer__badge img { width: 132px; height: auto; }
.footer__sign { font-family: var(--f-voice); font-size: 1.35rem; line-height: 1.3; }
.footer__sign b { font-weight: 600; }
.footer__col h4 { font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-navy-mut); margin-bottom: 1rem; }
.footer__col a, .footer__col p { display: block; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--on-navy-mut); padding: 0.3rem 0; transition: color 0.2s ease; }
.footer__col a:hover { color: var(--acc-navy); }
.footer__base {
  max-width: var(--maxw); margin: clamp(2.5rem,5vw,3.5rem) auto 0; padding: 1.75rem var(--gut) 0;
  border-top: 1px solid var(--line-navy);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: 0.14em; color: var(--on-navy-mut);
}

/* ============================================================================
   Scroll reveal + motion
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn--solid:hover, .qcard:hover, .scard:hover, .pcard:hover { transform: none; }
}

/* ---- Focus visibility --------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .vid__frame:focus-visible {
  outline: 2px solid var(--acc-navy); outline-offset: 3px; border-radius: 2px;
}

/* ============================================================================
   Mobile nav
   ========================================================================== */
@media (max-width: 720px) {
  /* A backdrop-filter ancestor becomes the containing block for fixed-position
     descendants — that would trap the drawer inside the header. Drop it on mobile
     so the drawer is positioned relative to the viewport. */
  .nav { background: var(--navy); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav__menu-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: none; border: 1px solid var(--line-navy); color: var(--on-navy);
    font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 0.55rem 0.9rem; border-radius: 2px; cursor: pointer;
    position: relative; z-index: 70;
  }
  /* Compact dropdown sized to its content, anchored under the menu button. */
  .nav__links {
    position: fixed; top: 4.35rem; right: var(--gut);
    width: max-content; min-width: 170px; max-width: 72vw;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0.2rem; padding: 0.55rem;
    background: var(--navy-2); border: 1px solid var(--line-navy); border-radius: 8px;
    box-shadow: 0 18px 46px rgba(0,0,0,0.5);
    transform-origin: top right;
    transform: translateY(-8px) scale(0.97); opacity: 0; visibility: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
    z-index: 60;
  }
  .nav__links.open { transform: none; opacity: 1; visibility: visible; }
  .nav__links a {
    font-size: 0.9rem; padding: 0.6rem 0.7rem; border-radius: 5px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .nav__links a:hover { background: color-mix(in srgb, var(--acc-navy) 12%, transparent); color: var(--on-navy); }
  .nav__links a[aria-current="page"]::after { display: none; }
  .nav__links a[aria-current="page"] { color: var(--acc-navy); }
  .nav__cta { border: 1px solid var(--line-navy); padding: 0.6rem 0.7rem !important; margin-top: 0.15rem; }
}

/* Page-hero (interior pages, shorter) — sized to match the home hero title,
   and kept tight: the links below are the reason these pages exist. */
.phero { position: relative; border-bottom: 1px solid var(--line-navy); }
.phero__in { padding-block: clamp(2rem, 4.5vh, 3.25rem); }
.phero__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.2rem, 3.4vw, 2.3rem); text-transform: uppercase; letter-spacing: -0.035em; line-height: 0.95; margin-top: 0; }
.phero__title .accent { color: var(--acc-navy); }
.phero__lead { font-family: var(--f-voice); font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--on-navy-mut); max-width: 44ch; margin-top: 0.9rem; line-height: 1.4; }

/* First content section after a page-hero starts promptly */
.phero + .section { padding-block-start: clamp(1.75rem, 3.5vw, 2.75rem); }
.phero + .section .subhead:first-child { margin-top: 0; }

.subhead { font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-navy-mut); margin: clamp(3rem,6vw,4.5rem) 0 clamp(1.25rem,2.5vw,1.75rem); display: flex; align-items: center; gap: 0.9rem; }
.subhead::before { content: ""; width: 26px; height: 1px; background: var(--acc-navy); }
.paper .subhead { color: var(--on-paper-mut); }
.paper .subhead::before { background: var(--acc-paper); }

/* ============================================================================
   SMALL SCREENS
   ========================================================================== */
@media (max-width: 480px) {
  /* the mono kicker line is wider than a phone at full tracking */
  .hero__kicker { font-size: 0.6rem; letter-spacing: 0.14em; }
  /* let long headlines wrap naturally instead of honoring desktop breaks */
  .section__title br { display: none; }
}

@media (max-width: 640px) {
  /* Phones: never crop the photos — show the WHOLE frame (all the gear).
     Hero becomes text-on-black with the full uncropped chassis below it,
     fading in and out of the page black. */
  .hero { display: flex; flex-direction: column; }
  .hero__bg { position: relative; order: 2; z-index: 0; }
  .hero__bg img { height: auto; }
  .hero__bg::after {
    background:
      linear-gradient(180deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 50%, transparent) 12%, transparent 32%),
      linear-gradient(0deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 50%, transparent) 12%, transparent 32%);
  }
  .hero__in { min-height: 0; padding-block: clamp(2.25rem, 5.5vh, 3.5rem) 1.25rem; }
  /* closing portrait: full frame, no zoom */
  .closer__photo img { height: auto; }
}