/* Sane House Media v3 — "humanize" pass, loaded last.
   Brief — Aesthetic: production office, call sheet, film slate, stock black, warm paper, one REC red.
   Intent: a working crew, not a tech product. Guardrails: always real footage, warm neutrals, near-square
   corners, mono marginalia for scene numbers and timecodes. Never blue-slate fills, pills, glows,
   pulsing dots, marquees, decorative stripes, or every section flying in. */

:root {
  --cyc: #e3e3e1;          /* neutral stone grey */
  --cyc-2: #d4d4d1;
  --paper: #f3f3f2;
  --ink: #1b1815;          /* warm near-black */
  --muted: #514b44;        /* 6:1 on paper, was 4.4:1 */
  --slate: #171512;        /* film-stock black, no blue */
  --slate-2: #221f1b;
  --on-slate: #eee8de;
  --on-slate-muted: #ada499;
  --rec: #c8261c;          /* REC red, a touch less saturated */
  --line: rgba(27, 24, 21, .16);
  --line-slate: rgba(238, 232, 222, .14);
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r: 3px;                /* one small radius everywhere */
}
body { background: var(--paper); color: var(--ink); }

/* ---------- film grain: static print texture, not a moving effect ---------- */
.grain { animation: none; opacity: .045; inset: 0; }

/* ---------- near-square corners, everywhere a pill or soft card used to be ---------- */
.btn, .nav, .nav.is-solid, .more__panel, .more__panel a, .menu a, .lb__close, .chips span, .sheet__copy,
.reel, .reel__media, .reel__dur, .about__img, .aboutteaser__img, .kitteaser__img, .svx__frame, .svx__clip,
.svx__list ul li, .case__film, .strip img, .bts__track img, .notes img, .notes li a, .kitx__card, .kitx__modes,
.kitx__modes button, .kitx__card .kitx__spec span, .legal__summary, .vfbox__img, .ratio__box, .ratio__label,
.hot span, .adot, .tag span, .inquiry__form input, .inquiry__form select, .inquiry__form textarea,
.faq summary::after, .more-work .reel__media, .sheet, .nav__burger { border-radius: var(--r); }
.btn { padding: .9em 1.25em; letter-spacing: .005em; }
.nav.is-solid { box-shadow: 0 1px 0 var(--line); background: rgba(243, 243, 242, .92); }

/* ---------- nothing blinks, nothing glows ---------- */
.btn .dot, .nav__rec, .vf__rec i, .svx__tc::before, .hot::after, .vf__meters i, .marquee__track { animation: none !important; }
.nav__rec { box-shadow: none; }
.hot::after { display: none; }
.hot::before { box-shadow: none; outline: 2px solid var(--paper); outline-offset: 0; }
.hot[aria-pressed="true"]::before { background: var(--ink); box-shadow: none; outline: 2px solid var(--paper); outline-offset: 0; }
.adot::before { box-shadow: none; outline: 2px solid var(--paper); outline-offset: 0; }
.ratio__box { box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .6); outline: 1px solid var(--rec); outline-offset: 0; }
.ratio__stage { background: none; }
.hero__scroll span { animation: none; }
@media (hover: hover) and (pointer: fine) { .btn--rec:hover { --bg: #a91f16; } }

/* ---------- mono only where the camera would print it: timecodes and specs ---------- */
.reel__dur, .kitx__card .kitx__spec span, .vf__top, .svx__tc, .closer__slate, .tl__playhead span {
  font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: .02em;
}
/* section labels: plain sentence case, the way Alex writes them, no rule, no caps */
.eyebrow { font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); gap: 0; }
.eyebrow::before { content: none; display: none; }
.eyebrow--light, .work .eyebrow, .inquiry .eyebrow { color: var(--on-slate-muted); }
.reel__client { color: var(--on-slate-muted); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .9rem; }
.reel__dur { background: rgba(23, 21, 18, .72); font-weight: 500; }
.adot, .hot span { font-weight: 600; font-size: .8rem; letter-spacing: 0; text-transform: none; }

/* ---------- calmer hierarchy and type ---------- */
.h-cond, .hero__title, .phead__title { letter-spacing: -0.01em; }
.svc__row h3, .reel__meta h3, .pillars__lead { letter-spacing: -0.005em; }
.services__lede, .phead__lede { color: var(--muted); }
.notes span { color: var(--rec); font-weight: 500; }
.svx__list ul li { background: transparent; border: 1px solid var(--line); font-weight: 500; }
.kitx__card .kitx__spec span { background: transparent; border: 1px solid var(--line); font-weight: 500; }

/* ---------- FAQ: one column list (an old v1 rule made it a two-column grid) ---------- */
.faq { display: block; }
.faq summary { padding-right: 0; position: static; }
.faq summary::after { position: static; margin: 0; width: 28px; height: 28px; background: transparent; border: 1px solid var(--line); font-family: var(--mono); font-weight: 400; }
.faq details[open] summary::after { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- surfaces ---------- */
.anatomy { background: var(--cyc); }
.kitx { background: var(--cyc); }
.more__panel { box-shadow: 0 18px 40px -20px rgba(27, 24, 21, .35), 0 0 0 1px var(--line); }
.kitx__card { box-shadow: 0 18px 40px -24px rgba(27, 24, 21, .4); }
.fx6__layer, .fx6__rear img { filter: drop-shadow(0 24px 30px rgba(27, 24, 21, .22)); }
.inquiry__form input, .inquiry__form select, .inquiry__form textarea { background: rgba(238, 232, 222, .04); }
.closer { background: var(--rec); }

.aboutteaser__img img { transform: none; }

.inquiry__form select option { background: var(--paper); color: var(--ink); }

.faq summary::after { transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.faq details[open] summary::after { transform: none; content: '\2212'; }


/* frozen audio meters read as a green pause icon: drop them */
.vf__meters { display: none; }
.meter__canvas, .meter__wave { background: var(--slate); }
.faq summary::after { display: grid; place-items: center; line-height: 1; font-family: var(--sans, inherit); font-size: 18px; padding: 0; }

/* ---------- web interface guidelines pass ---------- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a, button, summary, input, select, textarea, label { touch-action: manipulation; }
.menu { overscroll-behavior: contain; }
.nav { left: max(var(--gut), env(safe-area-inset-left)); right: max(var(--gut), env(safe-area-inset-right)); }
.foot { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
h1, h2, h3, .h-cond { text-wrap: balance; }
p { text-wrap: pretty; }
img { height: auto; }

/* ---------- motion identity: one curve (--ease-out), three durations: 160ms feedback, 280ms state, 600ms camera moves. Exits use ease-in. ---------- */
@media (max-width: 600px) { .hero__title { font-size: 11.4vw; } }

/* ---------- phone pass (Apple HIG: 44px targets, 12px+ text; Emil: press feedback, touch-safe hover) ---------- */
.btn { min-height: 44px; }
.hot::after { display: block; content: ""; position: absolute; inset: -7px; border: 0; border-radius: 50%; background: none; animation: none; }
.hero__scroll::after { content: ""; position: absolute; inset: -9px -10px; }
.chips label span { min-height: 44px; display: inline-flex; align-items: center; }
input[type="range"] { min-height: 44px; }
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select { min-height: 44px; }
.fx6__credit, .vf__rec, .reel__dur, .svx__tc, .vf__top { font-size: max(12px, .75rem); }
.anatomy__parts li::before { content: counter(part); }
.nav__burger { transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.nav__burger:active, .more__btn:active { transform: scale(.94); }
.menu a { transition: opacity 160ms var(--ease-out); }
.menu a:active, .nav__links a:active, .foot a:active { opacity: .55; }
@media (max-width: 1000px) {
  .anatomy__stage { counter-reset: dot; }
  .adot { font-size: 0; gap: 0; }
  .adot::before { counter-increment: dot; content: counter(dot); width: 22px; height: 22px; margin-left: -11px; display: grid; place-items: center;
    font: 700 12px/1 var(--mono); color: #fff; }
}
@media (max-width: 640px) { .kitx { min-height: 760px; } .kitx__copy h1 { font-size: clamp(2.1rem, 9.6vw, 2.75rem); max-width: 12ch; } }
.sheet__copy { min-height: 44px; min-width: 44px; }

/* phone menu: CSS transitions (interruptible, can't freeze half-way), 30ms stagger, under 300ms */
.menu a { opacity: 0; transform: translateY(30%); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); transition-delay: calc(var(--i, 0) * 30ms); }
.menu.is-in a { opacity: 1; transform: none; }
.menu.is-in a:active { opacity: .55; transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) { .menu a { transform: none; transition: opacity 160ms ease; transition-delay: 0ms; } }

/* ---------- claude-design + stitch-design-taste pass ---------- */
/* about pillars: three equal columns read as a template; editorial rows instead (title left, text right) */
.pillars { grid-template-columns: minmax(0, 1fr); gap: 0; }
.pillars article { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 6vw, 112px); row-gap: 10px; padding: 32px 0 36px; }
.pillars article h2 { grid-row: span 2; }
@media (max-width: 860px) { .pillars article { grid-template-columns: minmax(0, 1fr); } .pillars article h2 { grid-row: auto; } }
/* process cards: a thin structural line, not a thick accent rail */
.tl__clips li { border-top: 1px solid var(--line); }
/* never pure black */
.lb__frame, .lb__frame video { background: var(--slate); }
.apbox__img::after { background: var(--slate); }
.hero__scroll, .cursor { display: none; }
.pillars article h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: .98; }
:root { --step-3: clamp(2rem, 1.4rem + 2.8vw, 3.8rem); } /* was referenced but never defined */