@charset "UTF-8";
/* ============================================================
   PATRICK GIBSON PHOTOGRAPHY — "TRUE TO COLOR"
   Design system · near-monochrome UI, photography supplies the color
   Type: Fraunces (display) · Archivo (UI/body) · IBM Plex Mono (labels)
   ============================================================ */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/fraunces-normal-300-700.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('../fonts/fraunces-italic-300-700.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/archivo-normal-300-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibmplexmono-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibmplexmono-normal-500.woff2') format('woff2'); }

:root {
  --paper: #F7F5F2;
  --ink: #141414;
  --dark: #101010;
  --dark-2: #181816;
  --brick: #7A3B2E;          /* the ONLY accent — Danville warehouse brick */
  --brick-hover: #8f4635;
  --mid: #6f6b64;
  --faint: #a9a49c;
  --hairline: rgba(20,20,20,.14);
  --hairline-inv: rgba(247,245,242,.16);
  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans: 'Archivo', 'Helvetica Neue', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(20px, 4vw, 64px);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: #0A0908; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 380;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--brick); color: var(--paper); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { color: inherit; }
/* mobile browsers flash a blue box behind every tapped link/button by default */
a, button, [role="button"], summary, label { -webkit-tap-highlight-color: transparent; }

/* ---------- type scale ---------- */
.display {
  font-family: var(--serif);
  font-weight: 380;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(3rem, 8.5vw, 7.5rem);
  line-height: .98;
  letter-spacing: -0.015em;
}
.display em, .h1 em, .h2 em { font-style: italic; font-weight: 340; }
.h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.h2 {
  font-family: var(--serif);
  font-weight: 420;
  font-variation-settings: 'opsz' 100;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.08;
}
.h3 { font-family: var(--serif); font-weight: 480; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2; }
.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mid);
}
.label--brick { color: var(--brick); }
.lede-text { font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 360; line-height: 1.7; color: #3a3833; max-width: 34em; }
.dark .lede-text { color: #c9c5bd; }

/* ---------- layout primitives ---------- */
.container { max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: clamp(80px, 12vh, 160px); padding-bottom: clamp(80px, 12vh, 160px); }
.dark { background: var(--dark); color: var(--paper); }
.dark .label { color: var(--faint); }
.rule { border: 0; border-top: 1px solid var(--hairline); }
.dark .rule { border-color: var(--hairline-inv); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  transition: background .4s ease, box-shadow .4s ease, transform .4s ease, padding .4s ease;
}
.nav.solid { background: rgba(247,245,242,.92); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--hairline); padding-top: 12px; padding-bottom: 12px; }
.nav.hidden { transform: translateY(-110%); }
.nav .wordmark {
  font-family: var(--serif); font-weight: 520; font-size: 19px; letter-spacing: .01em;
  text-decoration: none; line-height: 1.1;
}
.nav .wordmark small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--mid); margin-top: 2px; }
.nav .wordmark .sig { height: 52px; width: auto; display: block; filter: drop-shadow(0 1px 8px rgba(0,0,0,.55)); transition: height .35s var(--ease); }
.nav.solid .wordmark .sig { height: 42px; }
.nav .wordmark small { margin-top: 5px; padding-left: 2px; }
.preloader .pre-word .sig-pre { height: clamp(52px, 9vw, 84px); width: auto; display: block; }
.footer .sig-foot { height: 64px; width: auto; opacity: .9; margin-bottom: 22px; }
.footer .footer-sig { display: block; width: 100%; max-width: 300px; margin-bottom: 22px; }
.nav-links { display: flex; gap: clamp(16px, 2.4vw, 34px); align-items: center; list-style: none; }
.nav-links a:not(.btn) {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); position: relative; padding: 4px 0;
}
.nav-links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--brick); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav-links a:not(.btn):hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav--overlay:not(.solid) { color: var(--paper); }
.nav--overlay:not(.solid) .wordmark, .nav--overlay:not(.solid) .nav-links a:not(.btn) { color: var(--paper); }
.nav--overlay:not(.solid) .wordmark small { color: rgba(247,245,242,.7); }

/* mobile nav */
/* iOS paints <button> text in the system accent blue unless told otherwise, and the bars below are
   drawn with background:currentColor — which is why the hamburger came out blue on a phone but
   black in desktop Chrome. Inheriting the nav's colour fixes it everywhere. */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; z-index: 95; padding: 8px; color: inherit; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: currentColor; margin: 6px 0; transition: transform .3s var(--ease), opacity .3s; }
.mobile-menu {
  position: fixed; inset: 0; z-index: 89; background: var(--dark); color: var(--paper);
  display: flex; flex-direction: column; justify-content: center; padding: var(--gutter);
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: var(--serif); font-size: clamp(2rem, 9vw, 3.4rem); text-decoration: none;
  padding: 10px 0; border-bottom: 1px solid var(--hairline-inv);
  opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.mobile-menu.open a { opacity: 1; transform: none; }
.mobile-menu a:nth-child(2) { transition-delay: .05s; } .mobile-menu a:nth-child(3) { transition-delay: .1s; }
.mobile-menu a:nth-child(4) { transition-delay: .15s; } .mobile-menu a:nth-child(5) { transition-delay: .2s; }
.mobile-menu a:nth-child(6) { transition-delay: .25s; } .mobile-menu a:nth-child(7) { transition-delay: .3s; }
.mobile-menu .menu-contact { margin-top: 34px; border: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
body.menu-locked { overflow: hidden; }
html.hero-lock, html.hero-lock body { overflow: hidden; } /* the select sequence owns the screen until the zoom completes */
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- buttons: slim editorial pills ---------- */
/* The label never wraps — it was breaking onto three lines inside the pill on a phone. The arrow
   lives in its own disc so the button reads as a control rather than a floating word and a glyph. */
.btn {
  display: inline-flex; align-items: center; gap: 16px;
  text-decoration: none; cursor: pointer; border: 0; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase;
  white-space: nowrap;
  background: #F4EFE7; color: #141414 !important;
  padding: 7px 7px 7px 26px;
  align-self: flex-start; justify-self: start;
  transition: transform .3s var(--ease), box-shadow .3s ease, background .3s ease;
}
.btn::after {
  content: '→'; font-family: var(--sans); font-size: 13px; line-height: 1;
  display: grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: #141414; color: #F4EFE7;
  transition: transform .35s var(--ease), background .3s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 34px -12px rgba(244,239,231,.42); }
.btn:hover::after { transform: translateX(3px); background: var(--brick); }
.btn--ghost {
  background: transparent; color: #F4EFE7 !important;
  box-shadow: inset 0 0 0 1px rgba(244,239,231,.38);
}
.btn--ghost::after { background: rgba(244,239,231,.14); color: #F4EFE7; }
.btn--ghost:hover { background: rgba(244,239,231,.06); box-shadow: inset 0 0 0 1px rgba(244,239,231,.7); }
.btn--ghost:hover::after { background: var(--brick); color: #fff; }
.nav .btn { padding: 5px 5px 5px 20px; gap: 12px; }
.nav .btn::after { width: 28px; height: 28px; font-size: 12px; }
/* (ghost hover handled globally by the pill styles) */
.text-link {
  display: inline-block; position: relative;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid currentColor;
  transition: color .25s;
}
/* these read as ~20px tall to a thumb. Grow the hit area to the 44px touch minimum with an
   invisible overlay rather than padding, so the underline stays tight against the text. */
.text-link::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 44px; min-height: 100%;
}
.text-link:hover { color: var(--brick); }

/* ---------- hero ---------- */
.u-hero { position: relative; height: 100svh; min-height: 560px; overflow: clip; color: var(--paper); display: flex; align-items: flex-end; }
.u-hero .hero-media { position: absolute; inset: 0; }
.u-hero .hero-media img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.u-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.72) 0%, rgba(10,10,10,.18) 45%, rgba(10,10,10,.28) 100%);
}
.u-hero .hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(44px, 8vh, 90px); }
.hero-kicker { margin-bottom: 20px; color: rgba(247,245,242,.85); }
.hero-ctas { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-scroll {
  position: absolute; right: var(--gutter); bottom: 28px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(247,245,242,.75); writing-mode: vertical-rl;
}

/* ---------- reveals (JS adds .in) — Framer-style rise with focus pull ---------- */
/* Same guard as the hero: these entrance states only apply while JS is alive to remove them.
   Un-gated, a failed or slow main.js meant almost every section on every page stayed invisible. */
html.js-anim .reveal { opacity: 0; transform: translateY(34px); filter: blur(7px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s ease; }
html.js-anim .reveal.in { opacity: 1; transform: none; filter: blur(0); }
/* drift parallax wrappers (JS-created): layers float at differing speeds */
.driftw { will-change: transform; }
.reveal-img { overflow: clip; }
html.js-anim .reveal-img img { transform: scale(1.14); clip-path: inset(6% 6% 6% 6%); transition: transform 1.2s var(--ease), clip-path 1.2s var(--ease); }
html.js-anim .reveal-img.in img { transform: scale(1); clip-path: inset(0 0 0 0); }
[data-stagger] > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------- image hover ---------- */
.frame { overflow: clip; position: relative; }
.frame img { transition: transform .8s var(--ease); }
.frame:hover img { transform: scale(1.045); }
.frame .frame-caption {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper); opacity: 0; transform: translateY(6px);
  transition: opacity .4s, transform .4s var(--ease);
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.frame:hover .frame-caption { opacity: 1; transform: none; }

/* ---------- experience cards (router) ---------- */
.exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); }
.exp-card { text-decoration: none; display: block; }
.exp-card .frame { aspect-ratio: 3 / 4; }
.exp-card .frame img { width: 100%; height: 100%; object-fit: cover; }
.exp-card .exp-meta { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; }
.exp-card .exp-title { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 440; }
.exp-card .exp-index { font-family: var(--mono); font-size: 11px; color: var(--mid); letter-spacing: .12em; }
.exp-card .exp-sub { font-size: 14px; color: var(--mid); margin-top: 4px; }
.exp-card .frame::after {
  content: ''; position: absolute; inset: 0; background: var(--brick);
  opacity: 0; transition: opacity .35s;
  mix-blend-mode: multiply;
}
.exp-card:hover .frame::after { opacity: .18; }

/* ---------- horizontal reel ---------- */
.reel-section { position: relative; }
.reel-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: clip; }
.reel-track { display: flex; gap: clamp(18px, 2.5vw, 40px); align-items: center; will-change: transform; padding-left: var(--gutter); }
.reel-item { flex: 0 0 auto; }
.reel-item img { height: clamp(340px, 58vh, 640px); width: auto; }
.reel-item.reel-tall img { height: clamp(400px, 68vh, 740px); }
.reel-head { position: absolute; top: clamp(24px, 5vh, 60px); left: var(--gutter); z-index: 3; }
.reel-progress { position: absolute; bottom: clamp(24px, 5vh, 50px); left: var(--gutter); right: var(--gutter); height: 1px; background: var(--hairline-inv); }
.reel-progress span { display: block; height: 100%; width: 0; background: var(--paper); }

/* ---------- marquee ticker ---------- */
.ticker { overflow: clip; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 16px 0; }
.dark .ticker { border-color: var(--hairline-inv); }
.ticker-inner { display: flex; gap: 0; width: max-content; animation: tick 38s linear infinite; }
.ticker span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--mid); white-space: nowrap; padding-right: 3.2em;
}
.ticker span i { font-style: normal; color: var(--brick); padding-right: 3.2em; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- sticky two-column editorial (service pages) ---------- */
.editorial { display: grid; grid-template-columns: minmax(340px, 5fr) 7fr; gap: clamp(32px, 5vw, 90px); align-items: start; }
.editorial .ed-pin { position: sticky; top: 110px; }
.ed-gallery { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 44px); }
.ed-gallery > .ed-lead { max-width: 620px; margin-inline: auto; }  /* a tall lead frame reads as a plate, not a column-height wall */
.ed-gallery .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 28px); align-items: start; }
.ed-gallery .row2 > :nth-child(2) { margin-top: clamp(30px, 6vw, 90px); }

/* ---------- packages ---------- */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); align-items: stretch; }
.pkg {
  border: 1px solid var(--hairline); padding: clamp(26px, 3vw, 42px);
  display: flex; flex-direction: column; gap: 0; position: relative; background: transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pkg:hover { transform: translateY(-6px); box-shadow: 0 24px 60px -30px rgba(20,20,20,.25); }
.dark .pkg { border-color: var(--hairline-inv); }
.pkg .pkg-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--brick); color: var(--paper);
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  padding: 5px 14px; white-space: nowrap;
}
/* at <=330px this badge was 364px wide and lost its first and last letters to the viewport edge */
@media (max-width: 380px) {
  .pkg .pkg-flag { white-space: normal; text-align: center; max-width: calc(100% - 24px); line-height: 1.5; top: -20px; }
}
.pkg--featured { border-color: var(--brick); border-width: 1px; }
.pkg .pkg-name { font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 460; margin-bottom: 4px; }
.pkg .pkg-price { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brick); margin-bottom: 18px; }
.dark .pkg .pkg-price { color: #c98a75; }
.pkg .pkg-desc { font-size: 14.5px; color: var(--mid); margin-bottom: 20px; }
.dark .pkg .pkg-desc { color: var(--faint); }
.pkg ul { list-style: none; margin-bottom: 26px; flex: 1; }
.pkg ul li { padding: 9px 0 9px 22px; border-bottom: 1px solid var(--hairline); font-size: 14.5px; position: relative; }
.dark .pkg ul li { border-color: var(--hairline-inv); }
.pkg ul li::before { content: '—'; position: absolute; left: 0; color: var(--brick); }
.pkg .btn { margin-bottom: 4px; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.step .step-num {
  font-family: var(--serif); font-style: italic; font-weight: 340;
  font-size: clamp(2.6rem, 4vw, 3.8rem); color: var(--brick); line-height: 1; margin-bottom: 14px;
}
.dark .step .step-num { color: #c98a75; }
.step h3 { font-family: var(--serif); font-weight: 480; font-size: 1.25rem; margin-bottom: 10px; }
.step p { font-size: 14.5px; color: var(--mid); max-width: 30em; }
.dark .step p { color: var(--faint); }

/* ---------- testimonial ---------- */
.quote { max-width: 880px; }
.quote blockquote {
  font-family: var(--serif); font-weight: 380; font-variation-settings: 'opsz' 60;
  font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.3; text-wrap: balance;
}
.quote blockquote::before { content: '\201C'; color: var(--brick); }
.quote blockquote::after { content: '\201D'; color: var(--brick); }
.quote figcaption { margin-top: 22px; }

/* ---------- FAQ accordion ---------- */
.faq { border-top: 1px solid var(--hairline); }
.dark .faq { border-color: var(--hairline-inv); }
.faq details { border-bottom: 1px solid var(--hairline); }
.dark .faq details { border-color: var(--hairline-inv); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  font-family: var(--serif); font-weight: 440; font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  padding: 22px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); font-size: 18px; color: var(--brick); transition: transform .3s var(--ease); flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 0 24px; max-width: 62ch; color: #3a3833; font-size: 15px; }
.dark .faq .faq-a { color: #c9c5bd; }

/* ---------- forms ---------- */
.field { margin-bottom: 26px; }
.field label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mid); margin-bottom: 10px; }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--hairline);
  font-family: var(--sans); font-size: 17px; color: inherit; padding: 10px 2px 14px; border-radius: 0;
  transition: border-color .3s;
}
.dark .field input, .dark .field select, .dark .field textarea { border-color: var(--hairline-inv); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--brick); }
.field ::placeholder { color: var(--faint); }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice-row label { cursor: pointer; position: relative; }
.choice-row input { position: absolute; opacity: 0; }
.choice-row span {
  display: inline-block; padding: 11px 20px; border: 1px solid var(--hairline);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  transition: all .25s;
}
.dark .choice-row span { border-color: var(--hairline-inv); }
.choice-row input:checked + span { background: var(--brick); border-color: var(--brick); color: var(--paper); }
.choice-row input:focus-visible + span { outline: 2px solid var(--brick); outline-offset: 2px; }

/* ---------- footer ---------- */
.footer { background: var(--dark); color: var(--paper); padding: clamp(60px, 10vh, 110px) 0 34px; }
.footer .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 60px); margin-bottom: 70px; }
.footer .foot-word { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; line-height: 1.12; }
.footer .foot-word em { font-style: italic; }
.footer h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px; font-weight: 500; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 10px; }
.footer ul a { text-decoration: none; font-size: 14.5px; color: #d8d4cc; transition: color .25s; }
.footer ul a:hover { color: var(--paper); }
/* social row — 44px targets so they're tappable on a phone, brick on hover to match the accent */
.footer ul.foot-social { display: flex; gap: 6px; margin-top: 26px; }
.footer ul.foot-social li { margin-bottom: 0; }
.footer ul.foot-social a {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(239,234,226,.18); border-radius: 50%;
  color: #d8d4cc; transition: color .25s, border-color .25s, background .25s;
}
.footer ul.foot-social a:hover { color: var(--paper); border-color: var(--brick); background: rgba(122,59,46,.22); }
.footer ul.foot-social svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.footer .foot-base {
  border-top: 1px solid var(--hairline-inv); padding-top: 26px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}

/* ---------- cursor ---------- */
.cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
  width: 10px; height: 10px; border-radius: 50%; background: var(--paper);
  mix-blend-mode: difference;
  display: flex; align-items: center; justify-content: center;
  transition: width .3s var(--ease), height .3s var(--ease);
  transform: translate(-50%, -50%);
}
.cursor-dot .cursor-text { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: var(--ink); opacity: 0; }
.cursor-dot.grow { width: 68px; height: 68px; }
.cursor-dot.grow .cursor-text { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor-dot { display: none; } }

/* ---------- preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 300; background: var(--dark); color: var(--paper);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
  transition: opacity .6s ease, visibility .6s;
}
.preloader.done { opacity: 0; visibility: hidden; }
/* The overlay is only ever lifted by JS. Two guards so it can never hold the site hostage:
   1. no JS at all -> never show it;
   2. JS present but main.js/signature-reveal.js never arrive (very slow network, blocked script)
      -> a pure-CSS failsafe lifts it at 8s. Any intro that actually starts sets .intro-live and
      cancels the failsafe, so a real (slower) intro is never cut off mid-play. */
html:not(.js-anim) .preloader { display: none; }
.preloader { animation: preloaderFailsafe 1ms linear 8s forwards; }
html.intro-live .preloader { animation: none; }
@keyframes preloaderFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.preloader .pre-word { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.6rem); overflow: hidden; }
.preloader .pre-word span { display: inline-block; transform: translateY(110%); animation: preUp .9s .15s var(--ease) forwards; }
.preloader .pre-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--faint); opacity: 0; animation: preFade .8s .55s ease forwards; }
@keyframes preUp { to { transform: none; } }
@keyframes preFade { to { opacity: 1; } }

/* ---------- utility ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.measure { max-width: 62ch; }
.mt-1 { margin-top: 14px; } .mt-2 { margin-top: 28px; } .mt-3 { margin-top: 48px; } .mt-4 { margin-top: 80px; }
.mb-1 { margin-bottom: 14px; } .mb-2 { margin-bottom: 28px; } .mb-3 { margin-bottom: 48px; } .mb-4 { margin-bottom: 80px; }
.center { text-align: center; }
.center .lede-text, .center .measure { margin-left: auto; margin-right: auto; }

/* sticky mobile CTA */
.mobile-cta {
  display: none;
  position: fixed; bottom: 14px; left: 14px; right: 14px; z-index: 80;
  background: rgba(244,239,231,.96); color: #141414; text-align: center; text-decoration: none;
  border-radius: 999px; backdrop-filter: blur(8px);
  box-shadow: 0 14px 40px -12px rgba(0,0,0,.6);
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  padding: 16px; transform: translateY(130%); transition: transform .4s var(--ease);
}
.mobile-cta.show { transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  /* the fixed "Start Your Story" pill covered the last footer line — reserve its band */
  .footer { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  /* footer links were 16px tall on a 36px pitch */
  .footer ul li { margin-bottom: 0; }
  .footer ul a { display: inline-block; padding: 11px 0; }
  .exp-grid { grid-template-columns: 1fr; gap: 44px; }
  .editorial { grid-template-columns: 1fr; }
  .editorial .ed-pin { position: static; }
  .pkg-grid { grid-template-columns: 1fr; gap: 34px; }
  .pkg--featured { order: -1; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .grid-2 { grid-template-columns: 1fr; }
  .footer .foot-grid { grid-template-columns: 1fr 1fr; }
  /* the vertical "Scroll" cue sat right where the fixed Start Your Story pill lands, and a
     phone doesn't need telling to scroll anyway */
  .footer .foot-base { justify-content: center; text-align: center; gap: 14px 20px; }
  .hero-scroll { display: none; }
  .mobile-cta { display: block; }
  .reel-item img { height: clamp(280px, 46vh, 460px); }
}
@media (max-width: 560px) {
  .footer .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px 18px; }  /* one column left half the width empty */
  .footer ul a { font-size: 13.5px; }
  /* Stretching these to full width left a dead gap after the arrow disc once the button was
     redesigned. Let them size to their label and sit under the left-aligned headline. */
  .hero-ctas { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-ctas .btn { width: auto; }
}

/* ============================================================
   ELEVATION LAYER — transitions, fullscreen menu, split text
   ============================================================ */

/* page-transition curtains */
.pt { position: fixed; inset: 0; z-index: 400; pointer-events: none; visibility: hidden; }
.pt.active { visibility: visible; }
.pt .pt-panel {
  position: absolute; left: 0; right: 0; height: 34%;
  background: var(--dark); transform: scaleY(0);
  transition: transform .55s var(--ease);
}
.pt .pt-panel:nth-child(1) { top: 0; transform-origin: top; }
.pt .pt-panel:nth-child(2) { top: 33%; height: 34.5%; transform-origin: center; }
.pt .pt-panel:nth-child(3) { bottom: 0; height: 33.5%; transform-origin: bottom; }
.pt.out .pt-panel { transform: scaleY(1); }
.pt .pt-panel:nth-child(2) { transition-delay: .05s; }
.pt .pt-panel:nth-child(3) { transition-delay: .1s; }
.pt .pt-word {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--paper);
  opacity: 0; transition: opacity .3s ease .3s; z-index: 2;
}
.pt.out .pt-word { opacity: 1; }
/* entrance: page fades/rises from curtain */
body.pt-enter main, body.pt-enter header.u-hero, body.pt-enter > section, body.pt-enter footer { animation: ptIn .8s var(--ease) both; }
@keyframes ptIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* split-word reveals */
.sw { display: inline-block; overflow: clip; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.sw > i {
  display: inline-block; font-style: inherit;
  transform: translateY(115%) rotate(2deg);
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--wi, 0) * 55ms);
  will-change: transform;
}
.split.in .sw > i, .split.sw-in .sw > i { transform: none; }

/* preloader counter */
.preloader .pre-count {
  position: absolute; bottom: 26px; right: 32px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--faint);
}

/* fullscreen menu v2 — full-bleed imagery, links floating over it */
.fs-menu {
  position: fixed; inset: 0; z-index: 95; background: #0A0908; color: var(--paper);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .75s var(--ease), visibility 0s .75s;
}
.fs-menu.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .75s var(--ease), visibility 0s; }
.fs-bg { position: absolute; inset: 0; }
.fs-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.05); transition: opacity .7s ease, transform 2.2s var(--ease);
}
.fs-bg img.show { opacity: .3; transform: scale(1); }
.fs-bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(10,9,8,.9) 0%, rgba(10,9,8,.45) 55%, rgba(10,9,8,.7) 100%); }
.fs-links {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: safe center;
  padding: 0 clamp(28px, 7vw, 110px);
  /* reserve the absolutely-positioned .fs-foot's band, and allow scrolling on short phones —
     without this the last link ("Start Your Story") sits under the footer and can't be tapped */
  padding-bottom: 150px;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.fs-links a {
  display: flex; align-items: baseline; gap: 20px; text-decoration: none; width: max-content; max-width: 100%;
  font-family: var(--serif); font-weight: 370; font-variation-settings: 'opsz' 144;
  font-size: clamp(2.1rem, 5.4vh, 3.9rem); line-height: 1.24;
  padding: .3vh 0; color: var(--paper);
  opacity: 0; transform: translateY(28px);
  transition: opacity .5s var(--ease), transform .55s var(--ease), color .3s, padding-left .4s var(--ease);
}
.fs-menu.open .fs-links a { opacity: 1; transform: none; transition-delay: calc(.22s + var(--mi, 0) * 55ms); }
.fs-menu.open.settled .fs-links a { transition-delay: 0s; } /* after entrance, hovers react instantly */
.fs-menu.hovering .fs-links a:not(:hover) { opacity: .3; }
.fs-links a:hover { padding-left: 14px; font-style: italic; }
.fs-links a[aria-current="page"] .fs-i::after { content: ' — you are here'; letter-spacing: .1em; }
.fs-links a .fs-i { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--faint); }
/* Nine items centred vertically pushed the first link up under the wordmark, and the longest
   label broke onto two lines. Reserve the header band and step the type down on phones. */
@media (max-width: 820px) {
  .fs-links { padding-top: 104px; padding-bottom: 132px; justify-content: safe center; }
  .fs-links a { font-size: clamp(1.45rem, 3.7vh, 2.15rem); line-height: 1.18; padding: .15vh 0; }
  .fs-links a .fs-i { font-size: 9.5px; }
  .fs-links a[aria-current="page"] .fs-i::after { content: ''; }  /* "you are here" collided with the wordmark */
}

.fs-close {
  position: absolute; top: 20px; right: var(--gutter); z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer; padding: 14px 0; min-height: 44px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper);
  opacity: 0; transition: opacity .4s ease .4s, color .25s;
}
.fs-menu.open .fs-close { opacity: 1; }
.fs-close:hover { color: #D0503A; }
.fs-close .x { font-size: 16px; line-height: 1; font-family: var(--sans); }
.fs-foot {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 22px clamp(28px, 7vw, 110px);
  border-top: 1px solid var(--hairline-inv);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
  opacity: 0; transition: opacity .5s ease .5s;
  pointer-events: none; /* never steal a tap from the menu links stacked above it */
}
.fs-menu.open .fs-foot { opacity: 1; }
.fs-foot a { color: var(--faint); text-decoration: none; pointer-events: auto; }
.fs-foot a:hover { color: var(--paper); }
/* Mobile browsers were painting this menu blue two different ways: a default blue tap flash on
   every link, and iOS data detectors relinking "Danville, Virginia" and the phone number in their
   own blue. The meta format-detection tag stops most of it; this holds the line on the rest. */
.fs-menu a, .fs-links a, .fs-close { -webkit-tap-highlight-color: transparent; }
.fs-menu a[x-apple-data-detectors],
.fs-menu a[href^="tel:"], .fs-menu a[href^="mailto:"] {
  color: inherit !important; -webkit-text-fill-color: currentColor; text-decoration: none !important;
}
/* on a phone this is the fastest route to calling him, but the links were only 14px tall.
   Pad them out to a real tap target without moving the footer's baseline. */
@media (max-width: 980px) {
  .fs-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .fs-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
  .fs-foot span:last-child { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
}

/* nav burger — visible at all sizes; nav rides ABOVE the open menu so the X morph stays reachable */
.nav { z-index: 96; }
.nav-toggle { display: block; }
body.menu-locked .nav { background: transparent; box-shadow: none; backdrop-filter: none; }
/* the nav sits ABOVE the fullscreen menu (96 > 95) so the signature stays visible over it — but that
   made the whole 88px-tall bar swallow taps aimed at .fs-close, which lives underneath it. Once the
   menu is open the nav is decoration only, so let every pointer event fall through to the menu. */
body.menu-locked .nav { pointer-events: none; }
body.menu-locked .nav-links { opacity: 0; pointer-events: none; transition: opacity .3s; }
body.menu-locked .nav-toggle { opacity: 0; pointer-events: none; }
.nav-toggle { transition: opacity .3s; }
.nav-links { margin-right: 8px; transition: opacity .3s; }

/* reel counter */
.reel-count {
  position: absolute; bottom: clamp(38px, 7vh, 66px); right: var(--gutter); z-index: 3;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--faint);
}

/* magnetic buttons ride on inline transform — keep hover lift via inner span */
.btn { will-change: transform; }

/* ============================================================
   NOCTURNE FLIP — "The Darkroom": the whole site goes dark;
   photographs are the only light. Var semantics invert here.
   ============================================================ */
:root {
  /* --paper stays LIGHT (it is used as light text/foreground throughout);
     the dark page ground is set explicitly on body below. */
  --paper: #F4EFE7;
  --ink: #141414;
  --ground: #0D0C0B;           /* page ground: near-black */
  --dark: #161513;             /* "dark" sections become raised charcoal panels */
  --dark-2: #1B1917;
  --brick: #A44A34;            /* accent lifted for dark ground */
  --brick-hover: #BC5C43;
  --mid: #8f8a82;
  --faint: #a9a49c;   /* was #6b665f — only 3.4:1 on the dark ground, failing AA on ~105 nodes */
  --brick-text: #C4735B;  /* --brick is 3.1-3.4:1 as text; this lift is 5.5:1. Fills/borders keep --brick. */
  --hairline: rgba(239,234,226,.14);
  --hairline-inv: rgba(239,234,226,.16);
  color-scheme: dark;
}
body { background: var(--ground); color: var(--paper); }
/* on the dark ground, "ink" roles read as light */
.nav .wordmark, .nav-links a:not(.btn) { color: var(--paper); }
.exp-card, .flood-item, .footer ul a, .text-link { color: inherit; }
.cursor-dot .cursor-text { color: var(--ground); }
.lede-text { color: #c9c4bb; }
.nav.solid { background: rgba(13,12,11,.88); }
.faq .faq-a { color: #c9c4bb; }
.pkg:hover { box-shadow: 0 24px 60px -28px rgba(0,0,0,.7); }
.footer { background: #0A0908; }
.mobile-menu { background: #0A0908; }
.fs-menu { background: #0A0908; }
.fs-preview::after { background: linear-gradient(to right, #0A0908, transparent 35%); }
.preloader { background: #080807; }
.pt .pt-panel { background: #0A0908; }
.step .step-num, .dark .step .step-num { color: #C4735B; }
.pkg .pkg-price, .dark .pkg .pkg-price { color: #C4735B; }
.u-hero::after { background: linear-gradient(to top, rgba(8,8,7,.82) 0%, rgba(8,8,7,.15) 45%, rgba(8,8,7,.35) 100%); }
/* photographs glow against the dark */
.frame img, .reel-item img, .ed-gallery img { box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.exp-card .frame::after { mix-blend-mode: screen; opacity: 0; background: var(--brick); }
::selection { background: var(--brick); color: #fff; }
/* subtle light-leak atmosphere lives on the page ground itself */
body {
  background-image:
    radial-gradient(1000px 480px at 82% -6%, rgba(164,74,52,.10), transparent 60%),
    radial-gradient(1400px 800px at -10% 110%, rgba(239,234,226,.05), transparent 55%);
  background-attachment: fixed;
}
.leak { display: none; }

/* ---------- CINEMA HOMEPAGE SCENES ---------- */
/* HERO v3 — "The Developing Print": the image develops from a gray negative
   into full true color; type lives in front of AND behind the frame. */
.dev-hero { position: relative; height: 190vh; }
.dev-sticky { position: sticky; top: 0; height: 100svh; min-height: 580px; overflow: clip; display: grid; place-items: center; }
.dev-kicker { position: absolute; top: max(88px, 11vh); left: 0; right: 0; text-align: center; z-index: 6; color: var(--mid); }
.dev-stage { position: relative; display: grid; place-items: center; width: 100%; }
.dev-media {
  position: relative; z-index: 3;
  width: min(66vw, 1080px); aspect-ratio: 2.1 / 1;
  overflow: clip; box-shadow: 0 80px 160px -40px rgba(0,0,0,.95);
  will-change: transform;
}
.dev-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(.22) contrast(1.15) blur(10px);
  transform: scale(1.14);
  transition: filter 2.4s cubic-bezier(.3,.6,.2,1), transform 3s var(--ease);
}
.developed .dev-media img { filter: grayscale(0) brightness(1) contrast(1) blur(0); transform: scale(1); }
.dev-media::after { /* exposure flash */
  content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none;
}
.developed .dev-media::after { animation: expose 1.1s ease .15s; }
@keyframes expose { 0% { opacity: 0; } 12% { opacity: .85; } 100% { opacity: 0; } }
.dev-type { position: absolute; inset: 0; pointer-events: none; } /* NO z-index: children must interleave with .dev-media */
.dt-line {
  position: absolute; left: 50%; white-space: nowrap;
  font-family: var(--serif); font-weight: 350; font-variation-settings: 'opsz' 144;
  font-size: clamp(4.5rem, 11vw, 11rem); line-height: 1; letter-spacing: -.015em;
  color: var(--paper);
  text-shadow: 0 2px 34px rgba(8,8,7,.4);
}
.dt-line .dl { display: inline-block; overflow: clip; vertical-align: bottom; }
.dt-line .dl i { display: inline-block; font-style: inherit; transform: translateY(112%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--li, 0) * 45ms); }
.developed .dt-line .dl i { transform: none; }
/* straddle the print's actual edges (.dev-type tracks the media box) */
.dt-top { top: 0; transform: translate(calc(-50% - 7vw + var(--mxx, 0px)), calc(-52% + var(--mxy, 0px))); z-index: 4; } /* in FRONT of the print */
.dt-bot { top: 100%; transform: translate(calc(-50% + 8vw + var(--mxx, 0px)), calc(-48% + var(--mxy, 0px))); z-index: 1; font-style: italic; font-weight: 320; color: #CDC5B8; } /* BEHIND the print */
.dt-line, .dev-media { opacity: var(--devo, 1); }
.dev-media { transform: translate(var(--mxx, 0px), var(--mxy, 0px)) scale(var(--devs, 1)); }
.dev-media { opacity: 1; }
.dev-spot { /* warm darkroom safelight following the cursor */
  position: absolute; inset: -20%; z-index: 5; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(560px 560px at var(--sx, 50%) var(--sy, 42%), rgba(255,196,160,.9), transparent 62%);
  opacity: .55;
}
.dev-foot {
  position: absolute; bottom: 26px; left: var(--gutter); right: var(--gutter); z-index: 6;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.dev-foot .label em { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--paper); }
.dev-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; z-index: 6; }
.dev-progress span { display: block; height: 100%; width: 0; background: var(--brick); }
@media (max-width: 820px) {
  .dev-media { width: 86vw; aspect-ratio: 3 / 3.6; }
  .dt-line { font-size: clamp(3.2rem, 13.5vw, 5.4rem); }
  .dt-top { transform: translate(calc(-50% + var(--mxx, 0px)), calc(-52% + var(--mxy, 0px))); }
  .dt-bot { transform: translate(calc(-50% + var(--mxx, 0px)), calc(-48% + var(--mxy, 0px))); }
  .dev-spot { display: none; }
  .dev-foot .label:last-child { display: none; }
}

/* manifesto zoom scene */
.zoom-scene { position: relative; height: 320vh; }
.zoom-sticky { position: sticky; top: 0; height: 100svh; overflow: clip; display: grid; place-items: center; }
.zoom-media { position: absolute; inset: 0; display: grid; place-items: center; }
.zoom-media picture { display: contents; }
.zoom-media img { width: 100vw; height: 100svh; object-fit: cover; transform: scale(.32); clip-path: inset(18% 24%); will-change: transform, clip-path; }
/* scale(.32) is tuned for a 1440px stage; on a phone it opened as a 65x173px sliver bisecting a face */
@media (max-width: 820px) {
  .zoom-media img { transform: scale(.55); clip-path: inset(10% 12%); }
  /* Filling a tall screen crops this two-shot to a third of its width and loses one of them;
     letterboxing the whole frame keeps both but shrinks it to a thin band. A square at full
     phone width is the balance — nothing is cut vertically, 67% of the width stays, and both
     faces sit inside that. Half again as tall as the letterbox, and centred on their backs. */
  .zoom-scene { height: 200vh; }
  .zoom-media { display: grid; place-items: center; }
  /* the phone frame gets a tall portrait instead of the wide two-shot — a 3:2 landscape
     shrunk to fit a phone reads as a postage stamp, so mobile swaps in c-391 (2:3). */
  .zoom-media img { width: 100vw; height: 86svh; max-height: none; object-fit: cover; object-position: center center;
    transform: scale(.42); clip-path: none; }
}
.zoom-words { position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter); }
.zoom-words .zw {
  position: absolute; left: 50%; top: 50%; width: max-content; max-width: 90vw; transform: translate(-50%,-50%);
  font-family: var(--serif); font-weight: 380; font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1.05;
  opacity: 0; text-shadow: 0 2px 40px rgba(0,0,0,.6);
}
.zoom-words .zw em { font-style: italic; }
.zoom-scene .label { position: absolute; top: 40px; left: 0; right: 0; text-align: center; z-index: 3; }

/* services flood list */
.flood { position: relative; overflow: clip; }
.flood-bg { position: absolute; inset: 0; z-index: 0; }
.flood-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .6s ease, transform 1.4s var(--ease); }
.flood-bg img.on { opacity: .38; transform: scale(1); }
.flood-bg::after { content:''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(13,12,11,.85), rgba(13,12,11,.3)); }
.flood-list { position: relative; z-index: 1; }
.flood-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(16px, 3vw, 40px); align-items: baseline;
  padding: clamp(26px, 4.5vh, 44px) 0; text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left .45s var(--ease);
}
.flood-item:first-child { border-top: 1px solid var(--hairline); }
.flood-item:hover { padding-left: clamp(10px, 2vw, 26px); }
.flood-item .fi-num { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--faint); }
.flood-item .fi-name { font-family: var(--serif); font-weight: 380; font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1; transition: font-style .1s, color .3s; }
.flood-item:hover .fi-name { font-style: italic; color: #fff; }
.flood-item .fi-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); text-align: right; }
.flood-item .fi-meta .fi-arrow { display: inline-block; margin-left: 12px; transition: transform .4s var(--ease); }
.flood-item:hover .fi-arrow { transform: translateX(8px); }

/* ---------- HERO v4 — "The Select" ---------- */
.sel-hero { position: relative; height: 100svh; min-height: 620px; overflow: clip; background: #0A0908; }

/* the contact sheet */
.cs-grid {
  position: absolute; inset: 0; z-index: 3;
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 18px); padding: clamp(56px, 9vh, 96px) clamp(28px, 5vw, 80px) clamp(40px, 7vh, 72px);
  transition: opacity .7s ease, transform .9s var(--ease);
}
/* Tiles are visible by default. The staggered entrance only exists when JS is running (an inline
   snippet in <head> sets html.js-anim) — otherwise a slow or failed main.js left the whole hero as
   a black rectangle, because nothing but JS ever added .on. */
.cs-cell { position: relative; overflow: visible; margin: 0; min-height: 0; min-width: 0; }
html.js-anim .cs-cell { opacity: 0; transform: translateY(16px) scale(.96); }
html.js-anim .cs-cell.on { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--ci, 0) * 55ms); }
.cs-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) brightness(.86); outline: 1px solid rgba(239,234,226,.12); }
.cs-cell .cs-id {
  position: absolute; left: 2px; bottom: -17px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em; color: var(--faint);
}
/* interactive sheet: hover to inspect, click to choose */
.cs-grid.live .cs-cell { cursor: pointer; }
.cs-grid.live .cs-cell:hover { transform: translateY(-5px); z-index: 2; }
.cs-grid.live .cs-cell:hover img { filter: none; outline-color: rgba(239,234,226,.4); }
.cs-grid.live .cs-cell:hover .cs-id { color: var(--paper); }
.cs-grid.live:has(.cs-cell:hover) .cs-cell:not(:hover) img { filter: saturate(.6) brightness(.45); }
.cs-cell, .cs-cell img, .cs-id { transition: transform .45s var(--ease), filter .45s ease, color .3s, outline-color .3s; }
.cs-hint {
  position: absolute; bottom: clamp(8px, 1.8vh, 20px); left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--faint);
  opacity: 0; transition: opacity .6s ease;
}
.cs-grid.live .cs-hint { opacity: 1; }
.cs-grid.locked .cs-hint { opacity: 0; }
.cs-grid.locked .cs-cell { pointer-events: none; }
.cs-grid.locked .cs-cell:not(.picked) img { filter: saturate(.5) brightness(.35); }
/* on expand, the unpicked frames scatter away from the chosen one */
.cs-grid.scatter .cs-cell:not(.picked) {
  opacity: 0 !important;
  transform: translate(var(--scx, 0), var(--scy, 0)) scale(.92) !important;
  transition: opacity .65s ease, transform .85s var(--ease);
}
.picked.fast .cs-marks { animation-duration: .32s; }
.picked.fast .cs-marks .cs-chip { animation-delay: .18s; }

/* autofocus lock on the chosen frame */
.cs-marks { position: absolute; inset: -7px; pointer-events: none; opacity: 0; }
.picked .cs-marks { opacity: 1; animation: afLock .55s var(--ease); }
.cs-marks i {
  position: absolute; width: 22px; height: 22px; border: 0 solid #D0503A;
}
.cs-marks i:nth-child(1) { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; }
.cs-marks i:nth-child(2) { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; }
.cs-marks i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; }
.cs-marks i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; }
@keyframes afLock {
  0% { transform: scale(1.28); opacity: 0; }
  45% { transform: scale(1); opacity: 1; }
  60% { transform: scale(1.045); }
  100% { transform: scale(1); opacity: 1; }
}
.cs-marks .cs-chip {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; color: #D0503A; text-transform: uppercase;
  opacity: 0;
}
.picked .cs-marks .cs-chip { animation: chipIn .3s ease .35s forwards; }
.cs-marks .cs-chip::before { content: '●'; font-size: 8px; animation: blink 1s steps(2) infinite; }
@keyframes chipIn { to { opacity: 1; } }
@keyframes blink { 50% { opacity: .25; } }
.picked img { filter: none !important; }
.expanded .cs-grid { opacity: 0; transform: scale(.985); pointer-events: none; }

/* the select, full bleed */
.sel-final { position: absolute; inset: 0; z-index: 4; visibility: hidden; }
.expanded .sel-final, .sel-done .sel-final { visibility: visible; }
.sel-media { position: absolute; inset: 0; }
.sel-media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: translate(var(--mxx, 0px), var(--mxy, 0px)) scale(var(--kb, 1));
}
.expanded .sel-media img { animation: kenburns 16s ease-in-out 1.2s infinite alternate; }
@keyframes kenburns { from { scale: 1; } to { scale: 1.07; } }
.sel-scrim { position: absolute; inset: 0; background:
  linear-gradient(to top, rgba(8,8,7,.78) 0%, rgba(8,8,7,.12) 42%, rgba(8,8,7,.3) 100%); }
.sel-lockup {
  position: absolute; left: var(--gutter); bottom: clamp(108px, 17vh, 170px); z-index: 2;
  transform: translate(var(--mxx, 0px), var(--mxy, 0px));
}
.sel-kicker { margin-bottom: 22px; color: rgba(239,234,226,.82); }
.sel-sig {
  display: block; width: clamp(320px, 40vw, 620px); height: auto;
  filter: drop-shadow(0 3px 22px rgba(0,0,0,.7));
  opacity: 0; transform: translateY(24px) scale(.98);
}
.expanded .sel-sig, .sel-done .sel-sig {
  opacity: 1; transform: none; transition: opacity 1s ease .55s, transform 1.1s var(--ease) .55s;
}
.sel-line {
  font-family: var(--serif); font-weight: 350; font-variation-settings: 'opsz' 144;
  font-size: clamp(4.2rem, 10.5vw, 10.5rem); line-height: .88; letter-spacing: -.015em; color: var(--paper);
}
.sel-l2 { margin-left: .9em; margin-top: -.04em; }
.sel-l2 em { font-style: italic; font-weight: 320; }
.sel-line .dl { display: inline-block; overflow: clip; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.sel-line .dl i { display: inline-block; font-style: inherit; transform: translateY(112%); }
.expanded .sel-line .dl i, .sel-done .sel-line .dl i { transform: none; transition: transform 1s var(--ease); transition-delay: calc(.45s + var(--li, 0) * 40ms); }
.sel-done.instant .sel-line .dl i { transition: none; }
.sel-sub { margin-top: 26px; font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(239,234,226,.75); }
.sel-sub em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--paper); }
.sel-foot {
  position: absolute; bottom: 26px; left: var(--gutter); right: var(--gutter); z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
}
.sel-foot > :first-child { justify-self: start; }
.sel-foot > :last-child { justify-self: end; text-align: right; }
.sel-foot > *, .sel-lockup > * { opacity: 0; }
.expanded .sel-foot > *, .expanded .sel-lockup > *, .sel-done .sel-foot > *, .sel-done .sel-lockup > * {
  opacity: 1; transition: opacity .8s ease .8s;
}
@media (max-width: 820px) {
  .cs-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); }
  /* the row gap bottoms out at 10px on phones, so a frame ID hung 17px below its tile was being
     sliced in half by the next row's image — tuck it inside the frame instead */
  .cs-cell .cs-id { bottom: 4px; left: 5px; z-index: 4; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
  /* Phone hero: the wordmark is already in the header, so repeating it over the photo just ate
     the frame. Drop it, centre what's left, and let more of the picture show. */
  .sel-lockup {
    left: var(--gutter); right: var(--gutter); bottom: 116px;
    text-align: center; transform: none;
  }
  .sel-sig { display: none; }
  .sel-kicker { margin-bottom: 0; }
  .sel-sub { margin-top: 14px; }
  .sel-l2 { margin-left: .45em; }
  /* a single centred CTA — the flanking labels were squeezing it and the 'Scroll' cue sat
     right where the fixed pill lands */
  .sel-foot { display: flex; align-items: center; justify-content: center; gap: 12px; }
  .sel-foot .label { display: none; }
}

/* ---------- CLIENT FILES testimonials ---------- */
/* ---------- client files: cinematic testimonials ---------- */
.tst { position: relative; overflow: clip; background: var(--dark); color: var(--paper); }
/* the client's own photograph carries the section — scrimmed hard so type stays readable */
.tst-bg { position: absolute; inset: 0; z-index: 0; }
.tst-frame { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); }
.tst-frame.is-on { opacity: 1; }
.tst-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 9s linear; }
.tst-frame.is-on img { transform: scale(1); }
.tst-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,16,16,.94) 0%, rgba(16,16,16,.87) 45%, rgba(16,16,16,.95) 100%);
}
.tst-inner { position: relative; z-index: 1; text-align: center; }
.tst-head {
  font-family: var(--sans); font-weight: 500; letter-spacing: -.01em;
  font-size: clamp(1.15rem, 2vw, 1.6rem); color: #c9c4bb;
  margin-bottom: clamp(30px, 5vh, 52px);
}
.tst-head em { font-style: normal; }


.tst-quote-wrap {
  position: relative; max-width: min(92vw, 880px); margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 40px);
  display: grid; align-items: center;          /* quote stays centred as the box is locked taller */
  min-height: var(--tst-h, auto);
}
/* one confident mark instead of two ghosted corner ones you could barely see */
.tst-mark {
  display: block; font-family: var(--serif); font-size: clamp(2.6rem, 4.5vw, 3.6rem);
  line-height: .6; height: .5em; color: var(--brick-text); opacity: .9;
  user-select: none; pointer-events: none; margin-bottom: clamp(14px, 2vh, 22px);
}
.tst-q {
  font-family: var(--serif); font-weight: 340; font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1.34; letter-spacing: -.01em; color: var(--paper);
  transition: opacity .4s var(--ease), filter .4s var(--ease), transform .4s var(--ease);
}
.tst.is-swapping .tst-q { opacity: 0; filter: blur(4px); transform: scale(.985); }

.tst-role {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--faint); margin-top: clamp(30px, 5vh, 52px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.tst.is-swapping .tst-role { opacity: 0; transform: translateY(8px); }

.tst-pills {
  display: flex; align-items: center; gap: 10px; margin-top: clamp(26px, 4vh, 44px);
  /* scrolls rather than wraps, so 20 clients don't become five rows of pills */
  overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none;
  padding: 4px clamp(14px, 6vw, 80px); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
  justify-content: flex-start; scroll-snap-type: x proximity;
}
.tst-pills::-webkit-scrollbar { display: none; }
.tst-pills.is-centred { justify-content: center; }   /* few enough to fit — centre them */
.tst-pill { scroll-snap-align: center; }
.tst-pill {
  display: flex; align-items: center; border: 0; cursor: pointer; border-radius: 999px; padding: 5px;
  background: transparent; color: inherit;
  transition: background .5s cubic-bezier(.4,0,.2,1), padding .5s cubic-bezier(.4,0,.2,1);
}
.tst-pill:hover { background: rgba(247,245,242,.08); }
.tst-pill.is-active { background: var(--paper); padding: 5px 18px 5px 5px; }
.tst-av { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: block; }
.tst-av img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.tst-pill:hover .tst-av img { transform: scale(1.06); }
.tst-pill.is-active .tst-av { box-shadow: 0 0 0 2px rgba(16,16,16,.22); }
/* clients with no portrait on file get initials rather than a stock stand-in */
.tst-av--mono {
  display: grid; place-items: center; background: #22201d; color: var(--faint);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
}
/* 0fr -> 1fr expands to the label's natural width without hard-coding it */
/* An fr track can't size itself inside an auto-width flex child — it computed to 0px and the
   name never appeared. max-width animates just as smoothly and caps rather than forces width,
   so each pill still sizes to its own name. */
.tst-name { overflow: hidden; max-width: 0; opacity: 0; margin-left: 0;
  transition: max-width .5s cubic-bezier(.4,0,.2,1), opacity .4s var(--ease), margin-left .5s cubic-bezier(.4,0,.2,1); }
.tst-pill.is-active .tst-name, .tst-pill:hover .tst-name { max-width: 30ch; opacity: 1; margin-left: 11px; }
.tst-name > span { display: block; white-space: nowrap; font-size: 14px; font-weight: 500; transition: color .3s; }
.tst-pill.is-active .tst-name > span { color: var(--ink); }

/* Google rating + link out to the full review set */
.tst-google {
  display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-top: clamp(22px, 3vh, 34px); padding: 12px 22px; border-radius: 999px;
  border: 1px solid rgba(247,245,242,.16); text-decoration: none; color: var(--paper);
  transition: border-color .3s, background .3s;
}
.tst-google:hover { border-color: rgba(247,245,242,.4); background: rgba(247,245,242,.06); }
.tst-stars { color: #E8B84B; letter-spacing: .12em; font-size: 14px; line-height: 1; }
.tst-rating { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #d8d4cc; }
.tst-rating strong { font-weight: 600; color: var(--paper); }
.tst-readall { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.tst-google:hover .tst-readall { color: var(--paper); }

@media (max-width: 820px) {
  .tst-quote-wrap { max-width: 100%; }
  .tst-pill.is-active { padding: 5px 14px 5px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tst-frame, .tst-frame img, .tst-q, .tst-role, .tst-pill, .tst-name { transition: none; }
}

/* ---------- portfolio teaser: living wall ---------- */
.pf-teaser { position: relative; height: clamp(620px, 100svh, 1000px); overflow: clip; padding: 0; }
.pf-teaser-wall {
  position: absolute; inset: -6% -2%; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 20px); transform: rotate(-4deg) scale(1.12); transform-origin: center;
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 50%, #000 42%, transparent 82%);
          mask-image: radial-gradient(ellipse 78% 82% at 50% 50%, #000 42%, transparent 82%);
}
.pf-teaser-wall .pfw-col { overflow: hidden; }
.pfw-track { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 20px); will-change: transform; }
.pfw-up { animation: pfwUp var(--sp, 60s) linear infinite; }
.pfw-down { animation: pfwDown var(--sp, 60s) linear infinite; }
@keyframes pfwUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes pfwDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.pf-teaser:hover .pfw-track { animation-play-state: paused; }
.pfw-item { display: block; overflow: hidden; border-radius: 2px; }
.pfw-item img { width: 100%; height: auto; display: block; filter: brightness(.62) saturate(.92); transition: filter .5s ease; }
.pf-teaser:hover .pfw-item img { filter: brightness(.8) saturate(1); }
.pf-teaser-overlay {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 0 var(--gutter);
  pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(8,8,7,.78) 0%, rgba(8,8,7,.32) 55%, transparent 80%);
}
.pf-teaser-overlay > * { pointer-events: auto; }
.pf-teaser-overlay .display { font-size: clamp(2.6rem, 7vw, 6rem); }
@media (prefers-reduced-motion: reduce) {
  .pfw-track { animation: none; }
  .pf-teaser-wall { transform: rotate(0) scale(1); inset: 0; }
}
@media (max-width: 760px) {
  .pf-teaser-wall { grid-template-columns: repeat(3, 1fr); }
  .pf-teaser-wall .pfw-col:last-child { display: none; }
}

/* ---------- selected frames: 3D deck peel ---------- */
.deck-section { padding-bottom: 0; overflow: clip; }
.deck-head { padding-top: clamp(60px, 10vh, 130px); }
.deck-scroll { position: relative; }
.deck-stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: clip; }
.deck-perspective {
  position: relative; width: 100%; height: 100%;
  perspective: 1700px; perspective-origin: 50% 42%;
  transform-style: preserve-3d; z-index: 2;
  transition: perspective-origin .3s ease;
}
/* giant kinetic category word behind the deck */
.deck-bgword {
  position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none;
  font-family: var(--serif); font-weight: 380; font-style: italic;
  font-size: clamp(4rem, 17vw, 17rem); line-height: 1; letter-spacing: -.02em;
  color: rgba(239,234,226,.06); white-space: nowrap;
  transition: opacity .45s ease, transform .6s var(--ease);
}
.deck-bgword.swap { opacity: 0; transform: translateY(12px) scale(.98); }
/* soft floor glow beneath the deck */
.deck-glow {
  position: absolute; left: 50%; bottom: 8%; width: min(70vw, 820px); height: 180px; z-index: 1;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(164,74,52,.16), transparent 70%);
  filter: blur(20px);
}
.deck-card {
  position: absolute; left: 50%; top: 48%;
  width: min(78vw, 900px); height: min(74svh, 660px);
  margin: 0; transform-style: preserve-3d; will-change: transform, opacity;
  transform: translate(-50%, -50%);
}
/* On phones, deriving the card height from viewport height produced a 0.487 aspect — a tall sliver
   that threw away two thirds of every landscape frame. Fix the ratio instead of the height.
   (Must sit AFTER the base rule above; an earlier media block loses the cascade at equal specificity.) */
@media (max-width: 820px) {
  .deck-card { width: 86vw; height: auto; aspect-ratio: 4 / 5; }
}
.deck-face {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 4px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), 0 8px 24px rgba(0,0,0,.4);
  outline: 1px solid rgba(239,234,226,.08);
}
.deck-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deck-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding: 64px clamp(20px, 2.6vw, 32px) clamp(18px, 2.2vw, 26px);
  background: linear-gradient(to top, rgba(8,8,7,.72), transparent);
}
.deck-cat { font-family: var(--serif); font-weight: 420; font-size: clamp(1.3rem, 2.4vw, 2rem); color: var(--paper); }
.deck-idx { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: rgba(239,234,226,.82); }
/* light sheen sweeping across the front card, like light catching a print */
.deck-sheen {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.14) 48%, rgba(255,255,255,.03) 56%, transparent 66%);
  background-size: 260% 100%; background-position: var(--sheen, 120%) 0;
  mix-blend-mode: screen;
}
/* progress dots */
.deck-dots { display: flex; gap: 9px; align-items: center; }
.deck-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(239,234,226,.24);
  transition: background .3s, transform .3s var(--ease);
}
.deck-dots i.on { background: var(--brick); transform: scale(1.35); }
.deck-meta {
  position: absolute; top: clamp(20px, 4vh, 44px); left: var(--gutter); right: var(--gutter); z-index: 5;
  display: flex; justify-content: space-between; align-items: baseline; pointer-events: none;
}
.deck-meta-cat { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--brick-text); transition: opacity .3s; }
.deck-meta-hint { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--faint); writing-mode: vertical-rl; }
@media (prefers-reduced-motion: reduce) {
  .deck-scroll { height: auto !important; }
  .deck-stage { position: static; height: auto; display: block; }
  .deck-perspective { perspective: none; height: auto; }
  .deck-card { position: relative; left: auto; top: auto; transform: none !important; width: 100%; height: auto; margin-bottom: 18px; opacity: 1 !important; }
  .deck-face { height: auto; aspect-ratio: 3/2; }
  .deck-meta { display: none; }
}

/* ---------- magnifier lens: "look closer" ---------- */
.lens { position: relative; overflow: hidden; display: block; }
.lens-base { width: 100%; height: auto; display: block; }
.lens-zoom { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s ease; will-change: mask-image; }
.lens.on .lens-zoom { opacity: 1; }
.lens-inner { position: absolute; inset: 0; will-change: transform; }
.lens-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lens-ring {
  position: absolute; top: 0; left: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  transition: opacity .3s ease;
  box-shadow: 0 8px 34px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.28), inset 0 0 0 1px rgba(244,241,234,.55);
  background: radial-gradient(circle at center, transparent 58%, rgba(244,241,234,.05) 72%, rgba(244,241,234,.16) 86%, transparent 100%);
}
.lens.on { cursor: none; }
.lens.on .lens-ring { opacity: 1; }
.lens-tag {
  position: absolute; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #0A0908; background: rgba(244,241,234,.92); padding: 4px 9px; border-radius: 2px;
  transform: translate(14px, 14px);
}
.lens.on .lens-tag { opacity: 1; }
body.lens-active .cursor-dot { opacity: 0; }
.lens-cap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
@media (hover: none), (pointer: coarse) { .lens.on { cursor: auto; } .lens-hint-desktop { display: none; } }

/* ---------- signature intro skip button ---------- */
.sig-skip {
  position: fixed; bottom: 22px; right: 26px; z-index: 305;
  background: none; border: 1px solid rgba(244,241,234,.28); border-radius: 999px;
  color: rgba(244,241,234,.68); cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  padding: 9px 20px; transition: border-color .25s, color .25s, opacity .4s ease;
}
.sig-skip:hover { border-color: rgba(244,241,234,.7); color: #F4EFE7; }
.preloader.done .sig-skip { opacity: 0; pointer-events: none; }

/* ---------- direct contact band ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.cc {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit;
  border: 1px solid var(--hairline); padding: clamp(24px, 2.4vw, 34px);
  min-height: 190px; overflow: clip;
  transition: border-color .3s, transform .35s var(--ease), background .3s;
}
.cc::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--brick);
  transition: width .4s var(--ease);
}
.cc:hover { transform: translateY(-5px); border-color: rgba(239,234,226,.32); background: rgba(239,234,226,.02); }
.cc:hover::after { width: 100%; }
.cc-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--brick); }
.cc-v { font-family: var(--serif); font-weight: 440; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.1; margin-top: 4px; word-break: break-word; }
.cc-note { font-size: 13px; color: var(--mid); margin-top: auto; }
.cc-arrow { position: absolute; top: clamp(24px, 2.4vw, 34px); right: clamp(20px, 2vw, 30px); font-size: 18px; color: var(--faint); transition: transform .35s var(--ease), color .3s; }
.cc:hover .cc-arrow { transform: translate(4px, -4px); color: var(--paper); }
@media (max-width: 900px) { .contact-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .contact-cards { grid-template-columns: 1fr; } .cc { min-height: 0; } }

/* preloader */
.preloader .pre-word { text-shadow: 0 2px 30px rgba(0,0,0,.8); }
.pre-word--svg {
  position: relative; display: inline-block; --rev: 0%;
  -webkit-mask-image: linear-gradient(99deg, #000 0, #000 calc(var(--rev) - 7%), transparent var(--rev));
          mask-image: linear-gradient(99deg, #000 0, #000 calc(var(--rev) - 7%), transparent var(--rev));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.pre-word--svg .sig-svg { height: clamp(110px, 26vh, 210px); width: auto; max-width: 84vw; display: block; }
.sig-svg path { fill: #F4EFE7; stroke: none; }
.sig-nib {
  position: absolute; top: 47%; left: 0; width: 26px; height: 26px;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,246,228,1) 0%, rgba(255,216,172,.6) 34%, rgba(255,200,150,0) 72%);
  mix-blend-mode: screen; filter: blur(.2px);
}
@media (prefers-reduced-motion: reduce) {
  .pre-word--svg { -webkit-mask-image: none; mask-image: none; }
  .sig-nib { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-img img { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .ticker-inner { animation: none; }
  .u-hero .hero-media img { height: 100%; }
  .preloader { display: none; }
  .cursor-dot { display: none; }
}

/* ================================================================
   NEW WORK — headshot wall, stage band, panorama bands
   ================================================================ */

/* ---------- THE HEADSHOT WALL — one backdrop, one team ---------- */
.hswall-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 44px); }
.hswall-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(6px, .8vw, 14px); }
.hswall-cell { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.hswall-cell img { width: 100%; height: 100%; object-fit: cover; display: block; box-shadow: none;
  filter: saturate(.92) brightness(.92); transition: transform .8s var(--ease), filter .45s ease; }
.hswall-cell::after { content: ''; position: absolute; inset: 0; outline: 1px solid rgba(239,234,226,.11); outline-offset: -1px; pointer-events: none; }
.hswall-row:hover .hswall-cell img { filter: saturate(.7) brightness(.5); }
.hswall-row .hswall-cell:hover img { filter: none; transform: scale(1.045); }
.hswall-note { margin-top: clamp(18px, 2.4vw, 30px); display: flex; gap: clamp(18px, 4vw, 64px); flex-wrap: wrap; align-items: baseline; }
@media (max-width: 900px) { .hswall-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .hswall-row { grid-template-columns: repeat(2, 1fr); } }

/* ---------- STAGE BAND — live music / event coverage ---------- */
.stage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 22px); }
.stage-grid figure { margin: 0; position: relative; overflow: clip; }
.stage-grid figure.sg-wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.stage-grid figure:not(.sg-wide) { aspect-ratio: 3 / 4; }
.stage-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.stage-grid figure:hover img { transform: scale(1.03); }
@media (max-width: 620px) { .stage-grid { grid-template-columns: 1fr; } }

/* ---------- PANORAMA BAND — full-bleed cinematic frames ---------- */
.pano { position: relative; width: 100%; overflow: clip; margin: clamp(46px, 8vw, 120px) 0; }
.pano img { width: 100%; height: auto; display: block; box-shadow: none; }
.pano-cap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  max-width: 1440px; margin: 16px auto 0; padding: 0 var(--gutter); }
.pano-over { position: absolute; inset: auto 0 0 0; padding: clamp(24px, 5vw, 70px) var(--gutter);
  background: linear-gradient(to top, rgba(10,9,8,.72), rgba(10,9,8,0)); pointer-events: none; }
.pano-over p { max-width: 1440px; margin: 0 auto; color: var(--paper);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.3rem, 3.2vw, 2.6rem); line-height: 1.25; text-shadow: 0 2px 30px rgba(0,0,0,.5); }

.foot-credit a { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; transition: opacity .25s; opacity: .72; }
.foot-credit a:hover { opacity: 1; }
.foot-credit img { height: 16px; width: auto; display: block; }

/* ---------- journal: article pages ---------- */
.jr-hero { background: var(--dark); color: var(--paper); padding: clamp(140px, 20vh, 220px) 0 clamp(50px, 8vh, 90px); }
.jr-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.jr-hero .h1 { max-width: 18em; margin-top: 18px; }
.jr-lede { font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.7; color: #c9c4bb; max-width: 40em; margin-top: 26px; }
.article-body { max-width: 44em; margin: 0 auto; }
.article-body h2 { font-family: var(--serif); font-weight: 460; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; margin: clamp(46px, 6vh, 74px) 0 18px; }
.article-body h3 { font-family: var(--serif); font-weight: 480; font-size: clamp(1.12rem, 1.7vw, 1.35rem); margin: 36px 0 12px; }
.article-body p { font-size: clamp(1rem, 1.25vw, 1.09rem); line-height: 1.78; color: #c9c4bb; margin-bottom: 1.15em; }
.article-body strong { color: var(--paper); font-weight: 600; }
.article-body ul { margin: 0 0 1.5em 0; padding-left: 0; list-style: none; }
.article-body li { position: relative; padding-left: 26px; margin-bottom: .7em; line-height: 1.7; color: #c9c4bb; }
.article-body li::before { content: '—'; position: absolute; left: 0; color: var(--brick); }
.article-body blockquote {
  margin: clamp(34px, 5vh, 54px) 0; padding-left: clamp(20px, 3vw, 34px);
  border-left: 2px solid var(--brick); font-family: var(--serif); font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.45; color: var(--paper);
}
.jr-end { border-top: 1px solid var(--hairline); margin-top: clamp(50px, 7vh, 80px); padding-top: clamp(30px, 4vh, 44px); }

/* journal index */
.jr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 56px); }
@media (max-width: 820px) { .jr-grid { grid-template-columns: 1fr; } }
.jr-card { display: block; text-decoration: none; color: inherit; }
.jr-card .frame { aspect-ratio: 3 / 2; overflow: clip; }
.jr-card .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.jr-card:hover .frame img { transform: scale(1.045); }
.jr-card h2 { font-family: var(--serif); font-weight: 460; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.22; margin: 20px 0 10px; }
.jr-card p { color: #c9c4bb; font-size: 15px; line-height: 1.65; max-width: 34em; }
.jr-card .jr-more { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--brick-text); }

/* ---------- subpage intro: focal-plane shutter ----------
   Replaces the quick logo card. Two blades part like a real shutter travelling open,
   with a single frame of flash at the moment they split. Homepage keeps the signature reveal. */
/* the blades ARE the cover — the layer behind them has to be see-through or they part onto
   more of themselves and nothing reads */
.preloader--shutter {
  background: transparent !important;
  /* clears itself once the blades have travelled — no JS required, so a script failure can't
     leave a black cover sitting over the page */
  animation: shClear 1ms linear 1.15s forwards;
}
@keyframes shClear { to { opacity: 0; visibility: hidden; } }
.shutter { position: absolute; inset: 0; overflow: hidden; }
.shutter-blade { position: absolute; left: -2%; width: 104%; height: 52%; background: #080807; }
.shutter-blade--top    { top: 0;    transform: translateY(0); animation: shTop .62s .46s cubic-bezier(.62,0,.15,1) forwards; }
.shutter-blade--bottom { bottom: 0; transform: translateY(0); animation: shBot .62s .46s cubic-bezier(.62,0,.15,1) forwards; }
@keyframes shTop { to { transform: translateY(-101%); } }
@keyframes shBot { to { transform: translateY(101%); } }
/* the seam: a thin line of light that fires as the blades part */
.shutter-slit {
  position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%) scaleX(0);
  box-shadow: 0 0 26px 6px rgba(247,245,242,.45);
  background: linear-gradient(90deg, transparent, rgba(247,245,242,.9) 18%, #fff 50%, rgba(247,245,242,.9) 82%, transparent);
  animation: shSlit .58s .16s var(--ease) forwards; opacity: 0;
}
@keyframes shSlit {
  0%   { transform: translateY(-50%) scaleX(0);   opacity: 0; }
  35%  { transform: translateY(-50%) scaleX(1);   opacity: 1; }
  100% { transform: translateY(-50%) scaleX(1);   opacity: 0; }
}
/* aperture ring mark, small and quiet, sits behind the blades */
.shutter-mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(247,245,242,.5); white-space: nowrap;
  animation: shMark .5s .06s var(--ease) forwards; opacity: 0;
}
@keyframes shMark { 0%{opacity:0} 40%{opacity:1} 100%{opacity:0} }
@media (prefers-reduced-motion: reduce) {
  .shutter-blade, .shutter-slit, .shutter-mark { animation: none; }
  .shutter-blade--top { transform: translateY(-101%); }
  .shutter-blade--bottom { transform: translateY(101%); }
}

/* ================= LAUNCH SCRATCH-OFF =================
   Dated promo. Self-contained under .sc-* so it can be deleted in one block. */
.sc-wrap { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  padding: clamp(16px, 4vw, 40px); opacity: 0; transition: opacity .38s var(--ease); }
.sc-wrap.is-on { opacity: 1; }
.sc-veil { position: absolute; inset: 0; background: rgba(8,7,6,.68);
  -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
/* a warm bloom behind the panel so the glass has something to refract rather than
   sitting on flat black — this is most of the difference */
.sc-veil::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 42% at 50% 38%, rgba(201,138,117,.20) 0%, rgba(122,59,46,.09) 42%, transparent 72%); }
/* Backgrounds default to background-attachment: scroll, which pins them to the border
   box rather than the scrolled content — so the grain and sheen stay put even though
   this panel scrolls on short screens. */
.sc-card { position: relative; width: min(440px, 100%); max-height: 92svh; overflow-y: auto;
  border: 0; border-radius: 24px; padding: clamp(26px, 5vw, 38px); text-align: center;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E"),
    linear-gradient(158deg, rgba(255,244,234,.11) 0%, rgba(255,244,234,.025) 38%,
                            rgba(255,244,234,0) 62%, rgba(0,0,0,.10) 100%),
    linear-gradient(0deg, rgba(26,22,19,.72), rgba(26,22,19,.72));
  background-blend-mode: overlay, normal, normal;
  background-size: 160px 160px, auto, auto;
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow:
    0 60px 130px -45px rgba(0,0,0,.95),
    0 2px 30px -12px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,246,238,.22),
    inset 0 -1px 0 rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,246,238,.075);
  transform: translateY(18px) scale(.97); transition: transform .48s var(--ease); }
/* specular highlight riding the top corner, the way light catches a curved edge */
.sc-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%;
  border-radius: 24px 24px 0 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 100% at 22% 0%, rgba(255,247,240,.10) 0%, transparent 62%); }
.sc-card > * { position: relative; z-index: 1; }
.sc-wrap.is-on .sc-card { transform: none; }
.sc-x { position: absolute; top: 10px; right: 14px; background: none; border: 0; cursor: pointer;
  color: var(--faint); font-size: 26px; line-height: 1; padding: 6px; transition: color .2s; }
.sc-x:hover { color: var(--paper); }
.sc-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: #dda690; margin-bottom: 12px; }
.sc-head { font-family: var(--serif); font-weight: 460; font-size: clamp(1.6rem, 6vw, 2.1rem);
  line-height: 1.12; color: var(--paper); margin-bottom: 10px; }
.sc-head em { display: block; font-style: italic; color: #c98a75; }
.sc-head--sm { font-size: clamp(1.4rem, 5vw, 1.8rem); }
.sc-sub { font-size: 14px; line-height: 1.6; color: #c9c4bb; margin-bottom: 20px; }
/* the ticket is a single 35mm frame: perf bands top and bottom, emulsion over a print */
.sc-ticket { position: relative; border-radius: 4px; overflow: hidden; background: #1c1713;
  box-shadow: 0 22px 52px -18px rgba(0,0,0,.92), inset 0 0 0 1px rgba(0,0,0,.55); }
.sc-perf { position: relative; height: 26px; background: #1c1713; }
/* holes read as light punched through the base — on a dark modal that's the only way
   they register at all; matched to the base they vanish (rgb 25,24,23 vs 20,18,15). */
.sc-holes { position: absolute; inset: 0 9px 0 88px; display: flex; align-items: center;
  justify-content: space-between; }
.sc-holes i { width: 13px; height: 13px; border-radius: 2.5px; flex: 0 0 auto;
  background: rgba(247,245,242,.19);
  box-shadow: inset 0 1.5px 2px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.35); }
.sc-edge { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 7.5px; letter-spacing: .14em; white-space: nowrap;
  color: rgba(222,196,168,.62); }
.sc-gate { position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55); }
/* the developed print hiding under the emulsion — bright, so scratching reveals light.
   flex column, not grid: auto grid rows stretch to fill the frame and fling the two
   lines to opposite ends, which is what left that canyon between them. */
.sc-under { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0; padding: 10px 16px; text-align: center;
  background: radial-gradient(125% 105% at 50% 30%, #FCF8F2 0%, #EFE7DA 56%, #DCCEBB 100%); }
.sc-tag { font-family: var(--mono); font-size: 8px; letter-spacing: .3em; text-transform: uppercase;
  color: #a08b7a; margin-bottom: 7px; }
.sc-amt { font-family: var(--serif); font-size: clamp(2.3rem, 11.5vw, 3.3rem); font-weight: 600;
  color: var(--brick); line-height: .92; letter-spacing: -.015em; }
.sc-rule { width: 42px; height: 1px; background: rgba(122,59,46,.32); margin: 10px 0 8px; }
.sc-min { font-family: var(--mono); font-size: 8.5px; letter-spacing: .17em; text-transform: uppercase;
  color: #7d7365; line-height: 1.5; white-space: nowrap; }
.sc-foil { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair;
  touch-action: none; -webkit-user-select: none; user-select: none; }
.sc-wrap.is-revealed .sc-gate { animation: scDevelop .8s var(--ease); }
.sc-wrap.is-revealed .sc-foil { opacity: 0; pointer-events: none; transition: opacity .6s ease; }
@keyframes scDevelop {
  0%   { filter: brightness(1.75) contrast(.72) saturate(.5); }
  100% { filter: none; }
}
.sc-hint { margin-top: 13px; pointer-events: none;
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); transition: opacity .3s; }
@keyframes scPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.sc-reveal { display: block; margin: 14px auto 0; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); text-decoration: underline; text-underline-offset: 4px; }
.sc-reveal:hover { color: var(--paper); }
.sc-claim { margin-top: 22px; text-align: left; }
.sc-won { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: #c98a75; text-align: center; margin-bottom: 18px; }
.sc-won strong { color: var(--paper); }
.sc-f { display: block; margin-bottom: 12px; }
.sc-f span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.sc-f input { width: 100%; background: rgba(247,245,242,.05); color: var(--paper);
  border: 1px solid rgba(247,245,242,.16); border-radius: 10px; padding: 12px 14px;
  font-family: var(--sans); font-size: 16px; transition: border-color .2s, background .2s; }
.sc-f input:focus { outline: none; border-color: #c98a75; background: rgba(247,245,242,.08); }
.sc-err { font-size: 12.5px; color: #e08e7a; margin-bottom: 10px; }
.sc-go { width: 100%; justify-content: space-between; margin-top: 4px; }
.sc-go:disabled { opacity: .6; cursor: default; }
.sc-fine { font-size: 10.5px; line-height: 1.55; color: #a8a39a; margin-top: 14px; }
.sc-code { font-family: var(--mono); font-size: clamp(1.05rem, 4.4vw, 1.3rem); letter-spacing: .12em;
  color: var(--paper); background: rgba(247,245,242,.06); border: 1px dashed rgba(247,245,242,.28);
  border-radius: 10px; padding: 13px 10px; margin: 16px 0 14px; }
.sc-done .btn { margin-top: 6px; }
/* falls from above the viewport. two layers because the fall is linear and the sway
   isn't — one transform can't run two easings, and a single combined animation reads
   as a slab sliding rather than paper fluttering. */
.sc-bit { position: fixed; top: -40px; pointer-events: none; z-index: 30; will-change: transform;
  animation: scFall var(--dur) linear var(--dl) forwards; }
.sc-bit b { display: block; will-change: transform;
  animation: scSway var(--sway) ease-in-out var(--dl) infinite alternate; }
@keyframes scFall {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  6%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, calc(100vh + 90px), 0); }
}
@keyframes scSway {
  0%   { transform: translate3d(calc(var(--sx) * -1), 0, 0) rotate(calc(var(--rot) * -1)); }
  100% { transform: translate3d(var(--sx), 0, 0) rotate(var(--rot)); }
}
@media (max-width: 420px) {
  .sc-card { padding: 24px 20px 26px; border-radius: 16px; }
  .sc-gate { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-wrap, .sc-card { transition: none; }
  .sc-hint span { animation: none; opacity: .8; }
  .sc-bit { display: none; }
}