/* tokens.css */
/* Design tokens (spec 3.1). Contrast ratios in the comments were checked for each pair. */
:root{
  color-scheme: light;
  /* surfaces */
  --bg:#FAF7F2; --bg-warm:#F3EEE5; --surface:#FFFEFB;
  --bg-deep:#171310;
  --bg-deep-2:#1B1A1F;          /* hero ground behind poster/video */
  --player-bg:#0E0D0C; --scrim:14,12,10;   /* rgb triplet for rgba(var(--scrim),a) */
  /* ink */
  --text:#1A1814;               /* 16.59:1 on --bg */
  --text-muted:#6B6660;         /* 5.32 / 4.92 / 5.64 on bg / bg-warm / surface */
  --rule:rgba(26,24,20,.12); --rule-strong:rgba(26,24,20,.24);
  --field-border:rgba(26,24,20,.55);       /* 3.89 / 3.96:1, passes 1.4.11 */
  --ink-on-deep:rgba(250,247,242,.92);     /* 14.7:1 */
  --muted-on-deep:rgba(250,247,242,.62);   /* 7.11 / 6.89:1 */
  --rule-on-deep:rgba(250,247,242,.14);
  --on-hero:#FFFEFB;
  /* accent (one only). Gold is reserved for: primary-button hover/active, focus rings,
     the aria-current underline and the selected estimator choice (critique 16). */
  --accent:#A5782C;             /* rules, fills, numerals >=24px only (3.41-3.91 on light) */
  --accent-ink:#876224;         /* small text/focus on light: 5.17 / 4.78 / 5.48 */
  --accent-on-deep:#E7A83E;     /* accent on deep: 8.85 / 8.29 */
  --accent-soft:rgba(165,120,44,.13);
  --error:#9A2B1E;              /* 7.18 / 6.64 / 7.60 */
  --sketch-ink:#3A332C; --sketch-fill:rgba(165,120,44,.10);
  /* buttons (one-token switch for C21) */
  --btn-bg:var(--text); --btn-ink:var(--bg);            /* 16.59:1 */
  --btn-bg-dark:var(--bg); --btn-ink-dark:var(--text);
  /* alt (C21): --btn-bg:var(--accent-ink); --btn-ink:var(--surface) = 5.48:1 */
  /* type */
  --serif:'EB Garamond','EB Garamond Fallback',Georgia,serif;
  --sans:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:var(--sans);        /* set per hero treatment on [data-hero-type] (spec 4.7) */
  --display-weight:600;
  --fs-quote:clamp(1.6875rem,1.2rem + 1.6vw,2.25rem);   /* 27 to 36 */
  --fs-hello:clamp(1.625rem,1.2rem + 1.4vw,2rem);       /* 26 to 32 */
  --fs-h1:clamp(2rem,1.3rem + 2.6vw,3.25rem);           /* interior H1, display face */
  --fs-h2:clamp(1.5625rem,1.3rem + .8vw,1.875rem);      /* 25 to 30 */
  --fs-h3:clamp(1.375rem,1.2rem + .5vw,1.5625rem);      /* 22 to 25 */
  --fs-lead:clamp(1.21875rem,1.1rem + .45vw,1.375rem);  /* 19.5 to 22 */
  --fs-body:clamp(1.09375rem,1.03rem + .25vw,1.1875rem);/* 17.5 to 19 */
  --fs-small:1.0625rem; --fs-caption:.9375rem; --fs-fine:.8125rem;
  --fs-label:.75rem; --fs-nav:1rem; --fs-num:clamp(2.25rem,1.6rem + 2vw,2.625rem);
  --lh-body:1.65; --lh-lead:1.55; --lh-head:1.22;
  --track-display:-.005em; --track-caps:.22em; --track-nav:.01em;
  /* space + measure */
  --pad-x:clamp(1.5rem,4vw,3.75rem);                    /* 24 to 60 */
  --space-section:clamp(5rem,3rem + 6vw,7.5rem);        /* 80 to 120 */
  --space-tight:clamp(3rem,2rem + 3vw,4.5rem);
  --space-contempl:clamp(7.5rem,4rem + 8vw,12.5rem);    /* 120 to 200 */
  --measure-prose:660px; --measure-lead:780px; --measure-hero:940px;
  --frame-max:1200px; --frame-wide:1400px;
  --header-h:64px;
  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1); --t-hover:.2s ease; --t-reveal:.9s var(--ease);
}
@media (max-width:767.98px){ :root{ --header-h:56px; } }

/* Hero type treatments (spec 4.7): the chosen face becomes --display for every H1 on the site.
   Family names must match src/assets/css/fonts.css (lane C). --hero-measure is in em (why: see G, I, K below);
   each value is the old ch measure measured with the real font, so the line breaks did not change. */
[data-hero-type="a"]{
  --display:'Archivo','Archivo Fallback',var(--sans);
  --display-weight:800;
  --hero-size:clamp(2.25rem,1.15rem + 4.5vw,4.75rem); --hero-lh:1.04; --hero-track:-.02em; --hero-measure:8.43em;  /* = 15ch of this Archivo */
  --hero-eyebrow-weight:600; --hero-eyebrow-track:.2em;
  --hero-sub-font:var(--sans); --hero-sub-size:clamp(1.0625rem,1rem + .3vw,1.25rem); --hero-sub-lh:1.5;
}
[data-hero-type="b"]{
  --display:'Fraunces','Fraunces Fallback',Georgia,serif;
  --display-weight:560;
  --hero-size:clamp(2.5rem,1.3rem + 5vw,5.25rem); --hero-lh:1.06; --hero-track:-.015em; --hero-measure:10.4em;  /* 16ch of Fraunces where the measure binds (655-900px wide): ch narrows as opsz grows */
  --hero-eyebrow-weight:500; --hero-eyebrow-track:.22em;
  --hero-sub-font:var(--serif); --hero-sub-size:clamp(1.1875rem,1.05rem + .5vw,1.4375rem); --hero-sub-lh:1.45;
}
[data-hero-type="c"]{
  --display:'Inter Display','Inter Display Fallback','Inter','Inter Fallback',sans-serif;
  --display-weight:600;
  --hero-size:clamp(2.25rem,1.2rem + 4.2vw,4.5rem); --hero-lh:1.08; --hero-track:-.028em; --hero-measure:10.84em;  /* = 17ch of Inter Display */
  --hero-eyebrow-weight:500; --hero-eyebrow-track:.22em;
  --hero-sub-font:var(--sans); --hero-sub-size:clamp(1.0625rem,1rem + .3vw,1.25rem); --hero-sub-lh:1.5;
}
/* D "Marque": Archivo at its widest, 800, tight; the emphasis drops to 300 in the same face (weight
   contrast instead of italic); eyebrow in the same face over a full-width hairline (components.css). */
[data-hero-type="d"]{
  --display:'Archivo Expanded','Archivo Expanded Fallback',var(--sans);
  --display-weight:800;
  --hero-size:clamp(2.125rem,1.25rem + 3.3vw,4rem); --hero-lh:1.02; --hero-track:-.03em; --hero-measure:11.79em;  /* = 15ch of Archivo Expanded */
  --hero-eyebrow-weight:600; --hero-eyebrow-track:.3em;
  --hero-sub-font:var(--sans); --hero-sub-size:clamp(1.0625rem,1rem + .3vw,1.25rem); --hero-sub-lh:1.5;
}
/* E "Masthead": Noto Serif Display condensed 800, large and tight, true italic for the emphasis;
   a short hairline sits above the tracked Inter caps (components.css). */
[data-hero-type="e"]{
  --display:'Noto Serif Display','Noto Serif Display Fallback',Georgia,serif;
  --display-weight:800;
  --hero-size:clamp(2.75rem,1.5rem + 4.6vw,5.5rem); --hero-lh:1; --hero-track:-.01em; --hero-measure:6.448em;  /* = 13ch of Noto Serif Display Condensed */
  --hero-eyebrow-weight:500; --hero-eyebrow-track:.28em;
  --hero-sub-font:var(--sans); --hero-sub-size:clamp(1.0625rem,1rem + .3vw,1.25rem); --hero-sub-lh:1.5;
}

/* G, I, K: preview-only legible serifs for the phone (Alok Oct 19, after picking B). Each pairs one face with its
   true italic for "find it", B's Inter caps eyebrow, and an Inter sub line (EB Garamond's small x-height is the
   phone problem). Sizes are tuned per family, not copied from B: the phone hero gets an x-height of about 20 to
   21px (B: 18.8px at 40px) and the desktop hero about the same x-height as B (37 to 40px), so faces with a big
   x-height set smaller in px. M is the control: B exactly with the same Inter sub line.
   --hero-measure is in em, never ch: ch is the width of "0" in whichever face is showing, so with a ch measure the
   fallback's first paint and the web font's swap get different line lengths (layout shift). The em values stand
   for the old ch measures with the real font (B 16ch, G 17ch, I 19ch, K 20ch) and keep every old line break at
   viewport widths 320 to 1920px (checked in Chrome every 5px; M uses B's value).
   --hero-em-space opens the word space before the italic "find": the italic f leans back into it, its descender
   under the "u" of "you" (components.css). Tuned per face on phone crops: Source Serif's long f tail needs the most,
   Roboto Serif's straight f the least.
   F, H, J, L (Merriweather, Noto Serif, IBM Plex Serif, Faustina) were dropped after the judges' review.
   Fonts in tools/fonts.py (FACES, PREVIEW_SERIFS); the comparison sheet is tools/shots/hero-types.mjs. */
/* G: Literata 600, opsz 32-72. */
[data-hero-type="g"]{
  --display:'Literata','Literata Fallback',Georgia,serif;
  --display-weight:600;
  --hero-size:clamp(2.5rem,1.62rem + 3.62vw,4.875rem); --hero-lh:1.1; --hero-track:-.015em; --hero-measure:10.32em;
  --hero-em-space:.05em;
  --hero-eyebrow-weight:500; --hero-eyebrow-track:.22em;
  --hero-sub-font:var(--sans); --hero-sub-size:clamp(1.0625rem,1rem + .3vw,1.25rem); --hero-sub-lh:1.5;
}
/* I: Roboto Serif 500 (600 read heavy and corporate), opsz 32-80, wdth 90, GRAD 0. */
[data-hero-type="i"]{
  --display:'Roboto Serif','Roboto Serif Fallback',Georgia,serif;
  --display-weight:500;
  --hero-size:clamp(2.5rem,1.62rem + 3.62vw,4.875rem); --hero-lh:1.1; --hero-track:-.015em; --hero-measure:10.58em;
  --hero-em-space:.04em;
  --hero-eyebrow-weight:500; --hero-eyebrow-track:.22em;
  --hero-sub-font:var(--sans); --hero-sub-size:clamp(1.0625rem,1rem + .3vw,1.25rem); --hero-sub-lh:1.5;
}
/* K: Source Serif 4 600, opsz pinned at 24 (its display end reaches contrast 5.5, too thin over video). */
[data-hero-type="k"]{
  --display:'Source Serif 4','Source Serif 4 Fallback',Georgia,serif;
  --display-weight:600;
  --hero-size:clamp(2.625rem,1.7rem + 3.81vw,5.125rem); --hero-lh:1.08; --hero-track:-.015em; --hero-measure:10.3em;
  --hero-em-space:.06em;
  --hero-eyebrow-weight:500; --hero-eyebrow-track:.22em;
  --hero-sub-font:var(--sans); --hero-sub-size:clamp(1.0625rem,1rem + .3vw,1.25rem); --hero-sub-lh:1.5;
}
/* M: control. B's Fraunces statement, same sizes, with the Inter sub line of G, I, K instead of EB Garamond. */
[data-hero-type="m"]{
  --display:'Fraunces','Fraunces Fallback',Georgia,serif;
  --display-weight:560;
  --hero-size:clamp(2.5rem,1.3rem + 5vw,5.25rem); --hero-lh:1.06; --hero-track:-.015em; --hero-measure:10.4em;
  --hero-em-space:.05em;
  --hero-eyebrow-weight:500; --hero-eyebrow-track:.22em;
  --hero-sub-font:var(--sans); --hero-sub-size:clamp(1.0625rem,1rem + .3vw,1.25rem); --hero-sub-lh:1.5;
}

/* fonts.css */
/* Generated by tools/fonts.py. Do not edit by hand: change FACES there and re-run.
   Latin subsets of SIL OFL 1.1 fonts, licences in assets/fonts/LICENSES/.
   Faces: eb-garamond roman and italic (wght 400-500), inter-ui (opsz 14, wght 400-600),
   inter-display-600 (opsz 32), archivo-800 (wdth 88), fraunces roman and italic (opsz 48-144, wght 560),
   archivo-expanded (wdth 125, wght 300-800), noto-serif-display roman and italic (wdth 75, wght 800).
   Preview-only (hero treatments g, i, k), roman and italic each: literata (600, opsz 32-72),
   roboto-serif (500, opsz 32-80, wdth 90, GRAD 0), source-serif (Source Serif 4, 600, opsz 24).
   A browser fetches a face only when text on the page uses it. */

/* Never fake bold or italic: only the weights above exist. */
html{font-synthesis:none}

/* Web fonts */
@font-face{
  font-family:'EB Garamond';font-style:normal;font-weight:400 500;font-display:swap;
  src:url(/assets/fonts/eb-garamond-roman.28db5927.woff2) format('woff2');
}
@font-face{
  font-family:'EB Garamond';font-style:italic;font-weight:400 500;font-display:swap;
  src:url(/assets/fonts/eb-garamond-italic.8a01f42e.woff2) format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/inter-ui.a9606bf9.woff2) format('woff2');
}
@font-face{
  font-family:'Inter Display';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/inter-display-600.ab67fbf6.woff2) format('woff2');
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url(/assets/fonts/archivo-800.f91ae4e3.woff2) format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:560;font-display:swap;
  src:url(/assets/fonts/fraunces-roman.053dfe1e.woff2) format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:560;font-display:swap;
  src:url(/assets/fonts/fraunces-italic.484b633c.woff2) format('woff2');
}
@font-face{
  font-family:'Archivo Expanded';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(/assets/fonts/archivo-expanded.11c2664e.woff2) format('woff2');
}
@font-face{
  font-family:'Noto Serif Display';font-style:normal;font-weight:800;font-display:swap;
  src:url(/assets/fonts/noto-serif-display-roman.151e3d9d.woff2) format('woff2');
}
@font-face{
  font-family:'Noto Serif Display';font-style:italic;font-weight:800;font-display:swap;
  src:url(/assets/fonts/noto-serif-display-italic.b18f8353.woff2) format('woff2');
}
@font-face{
  font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/literata-roman.4637ae0d.woff2) format('woff2');
}
@font-face{
  font-family:'Literata';font-style:italic;font-weight:600;font-display:swap;
  src:url(/assets/fonts/literata-italic.88f61da5.woff2) format('woff2');
}
@font-face{
  font-family:'Roboto Serif';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/roboto-serif-roman.def35454.woff2) format('woff2');
}
@font-face{
  font-family:'Roboto Serif';font-style:italic;font-weight:500;font-display:swap;
  src:url(/assets/fonts/roboto-serif-italic.9ac04706.woff2) format('woff2');
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/source-serif-roman.82706340.woff2) format('woff2');
}
@font-face{
  font-family:'Source Serif 4';font-style:italic;font-weight:600;font-display:swap;
  src:url(/assets/fonts/source-serif-italic.dc64fd30.woff2) format('woff2');
}

/* Metric-matched system fallbacks: used for the first paint, before the web font arrives, so the swap
   moves almost nothing (CLS). Numbers are measured from each font's tables against the system face. */
@font-face{
  font-family:'EB Garamond Fallback';font-style:normal;font-weight:400 500;
  src:local('Georgia');
  size-adjust:85.88%;ascent-override:117.26%;descent-override:34.70%;line-gap-override:0.00%;
}
@font-face{
  font-family:'EB Garamond Fallback';font-style:italic;font-weight:400 500;
  src:local('Georgia Italic'),local('Georgia-Italic');
  size-adjust:81.58%;ascent-override:123.43%;descent-override:36.53%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Inter Fallback';font-style:normal;font-weight:400 600;
  src:local('Arial');
  size-adjust:107.36%;ascent-override:90.23%;descent-override:22.47%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Inter Display Fallback';font-style:normal;font-weight:600;
  src:local('Arial Bold'),local('Arial-BoldMT');
  size-adjust:94.24%;ascent-override:102.80%;descent-override:25.60%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Archivo Fallback';font-style:normal;font-weight:800;
  src:local('Arial Bold'),local('Arial-BoldMT');
  size-adjust:91.94%;ascent-override:95.50%;descent-override:22.84%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Fraunces Fallback';font-style:normal;font-weight:560;
  src:local('Georgia');
  size-adjust:104.40%;ascent-override:93.68%;descent-override:24.43%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Fraunces Fallback';font-style:italic;font-weight:560;
  src:local('Georgia Italic'),local('Georgia-Italic');
  size-adjust:98.80%;ascent-override:98.99%;descent-override:25.81%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Archivo Expanded Fallback';font-style:normal;font-weight:300 800;
  src:local('Arial Black'),local('Arial-Black');
  size-adjust:105.63%;ascent-override:83.12%;descent-override:19.88%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Noto Serif Display Fallback';font-style:normal;font-weight:800;
  src:local('Georgia Bold'),local('Georgia-Bold');
  size-adjust:88.03%;ascent-override:121.44%;descent-override:33.28%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Noto Serif Display Fallback';font-style:italic;font-weight:800;
  src:local('Georgia Bold Italic'),local('Georgia-BoldItalic');
  size-adjust:89.34%;ascent-override:119.66%;descent-override:32.80%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Literata Fallback';font-style:normal;font-weight:600;
  src:local('Georgia Bold'),local('Georgia-Bold');
  size-adjust:96.14%;ascent-override:122.43%;descent-override:32.04%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Literata Fallback';font-style:italic;font-weight:600;
  src:local('Georgia Bold Italic'),local('Georgia-BoldItalic');
  size-adjust:89.91%;ascent-override:130.91%;descent-override:34.26%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Roboto Serif Fallback';font-style:normal;font-weight:500;
  src:local('Georgia Bold'),local('Georgia-Bold');
  size-adjust:92.28%;ascent-override:100.45%;descent-override:26.44%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Roboto Serif Fallback';font-style:italic;font-weight:500;
  src:local('Georgia Bold Italic'),local('Georgia-BoldItalic');
  size-adjust:88.64%;ascent-override:104.58%;descent-override:27.53%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Source Serif 4 Fallback';font-style:normal;font-weight:600;
  src:local('Georgia Bold'),local('Georgia-Bold');
  size-adjust:87.75%;ascent-override:118.07%;descent-override:38.18%;line-gap-override:0.00%;
}
@font-face{
  font-family:'Source Serif 4 Fallback';font-style:italic;font-weight:600;
  src:local('Georgia Bold Italic'),local('Georgia-BoldItalic');
  size-adjust:81.26%;ascent-override:127.48%;descent-override:41.22%;line-gap-override:0.00%;
}

/* base.css */
/* Base: reset, type, links, focus, sections, placeholders, reveal. No border-radius, no shadows. */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--bg);color:var(--text);font-family:var(--serif);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,picture,video,svg,iframe{display:block;max-width:100%}
img{height:auto}
ul[class],ol[class]{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
strong,b{font-weight:500}
em,i{font-style:italic}
::selection{background:var(--accent-soft)}
[hidden]{display:none !important}

h1,h2,h3,h4{font-weight:500;line-height:var(--lh-head);letter-spacing:var(--track-display);text-wrap:balance}
h1{font-family:var(--display);font-weight:var(--display-weight);font-size:var(--fs-h1);line-height:1.1}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-lead)}
p{text-wrap:pretty}

/* links: ink with an underline; gold is not used for links (critique 16) */
a{color:inherit}
a.link,.prose a{color:currentColor;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-thickness var(--t-hover)}
a.link:hover,.prose a:hover{text-decoration-thickness:2px}

/* focus: never removed */
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.section--deep :focus-visible,.site-footer :focus-visible,.hero :focus-visible,.plate :focus-visible,.player-band :focus-visible,
.site-header--over-hero:not(.is-solid) :focus-visible{outline-color:var(--accent-on-deep)}
main:focus{outline:none}

.skip{position:absolute;left:var(--pad-x);top:-100px;z-index:200;background:var(--text);color:var(--bg);padding:12px 18px;
  font-family:var(--sans);font-size:var(--fs-nav);text-decoration:none}
.skip:focus{top:12px}
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* section shell */
.inner{width:100%;max-width:var(--frame-max);margin:0 auto;padding-inline:var(--pad-x)}
.inner--prose{max-width:calc(var(--measure-prose) + 2 * var(--pad-x))}
.section{padding-block:var(--space-section)}
.section--tight{padding-block:var(--space-tight)}
.section--warm{background:var(--bg-warm)}
.section--deep{background:var(--bg-deep);color:var(--ink-on-deep)}
.section__title{margin-bottom:28px;max-width:var(--measure-lead)}
.section__title--small{font-size:var(--fs-h3)}
.prose{max-width:var(--measure-prose)}
.prose > * + *{margin-top:1em}
.prose h3,.prose h4{margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.25em}
.prose li + li{margin-top:.4em}
.prose blockquote{border-left:3px solid var(--rule-strong);padding-left:1.25em;font-style:italic}
.lead{max-width:var(--measure-lead);font-size:var(--fs-lead);line-height:var(--lh-lead)}
.sublead{max-width:var(--measure-lead);font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text-muted);margin-top:-12px;margin-bottom:36px}
.section--deep .sublead{color:var(--muted-on-deep)}
.more{margin-top:32px;font-family:var(--sans);font-size:var(--fs-small)}

/* eyebrow: muted, never gold (critique 16) */
.eyebrow{font-family:var(--sans);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-muted);margin-bottom:20px}
.section--deep .eyebrow,.plate .eyebrow{color:var(--muted-on-deep)}

/* pending copy / facts (preview only): dashed accent box with a COPY or CONFIRM tag */
.todo{display:inline;padding:.1em .45em;border:1px dashed var(--accent);background:var(--accent-soft);color:inherit;
  font-family:var(--sans);font-size:max(.8em,.8125rem);font-weight:400;font-style:normal;letter-spacing:0;text-transform:none;line-height:1.5;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.todo::before{content:attr(data-todo);margin-right:.5em;font-size:.72em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.section--deep .todo::before,.hero .todo::before,.plate .todo::before,.site-footer .todo::before,
.site-header--over-hero:not(.is-solid) .todo::before{color:var(--accent-on-deep)}

/* reveal: only once site.js has armed it (html.can-reveal), only when motion is welcome, never above
   the fold. If the script never runs, everything stays visible. */
@media (prefers-reduced-motion:no-preference){
  .js.can-reveal .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--t-reveal),transform var(--t-reveal)}
  .js.can-reveal .reveal.in{opacity:1;transform:none}
}

/* components.css */
/* Components (spec 3.2). Square corners, hairlines, no shadows. One layout breakpoint: 768px. */

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 22px;
  font-family:var(--sans);font-size:var(--fs-nav);font-weight:500;line-height:1.2;letter-spacing:var(--track-nav);
  text-decoration:none;border:1px solid transparent;transition:background-color var(--t-hover),color var(--t-hover),border-color var(--t-hover)}
.btn--sm{min-height:44px;padding:0 18px}
.btn--primary{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.btn--primary:hover,.btn--primary:active{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--surface)}
.btn--ghost{background:transparent;color:inherit;border-color:color-mix(in srgb,currentColor 50%,transparent)}
.btn--ghost:hover{border-color:currentColor}
.btn--primary.btn--on-dark{background:var(--btn-bg-dark);color:var(--btn-ink-dark);border-color:var(--btn-bg-dark)}
.btn--primary.btn--on-dark:hover,.btn--primary.btn--on-dark:active{background:var(--accent-on-deep);border-color:var(--accent-on-deep);color:var(--text)}
.btn--ghost.btn--on-dark{color:var(--on-hero)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------------------------------------------------------------- header, nav, mobile menu */
.site-header{position:fixed;inset:0 0 auto 0;z-index:90;height:var(--header-h);color:var(--text);
  transition:background-color var(--t-hover),color var(--t-hover),border-color var(--t-hover);border-bottom:1px solid transparent}
.site-header.is-solid{background:var(--bg);border-bottom-color:var(--rule)}
.site-header--over-hero:not(.is-solid){color:var(--on-hero)}
.no-js .site-header--over-hero{position:absolute}
.site-header__bar{height:100%;max-width:var(--frame-wide);margin:0 auto;padding-inline:var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{font-family:var(--sans);font-size:var(--fs-nav);font-weight:600;letter-spacing:.02em;text-decoration:none;color:inherit;
  display:inline-flex;align-items:center;min-height:44px}
.nav{display:flex;align-items:center;gap:28px}
.nav__list{display:flex;gap:26px}
.nav__link{display:inline-flex;align-items:center;min-height:44px;font-family:var(--sans);font-size:var(--fs-nav);font-weight:500;
  letter-spacing:var(--track-nav);text-decoration:none;color:inherit;border-bottom:2px solid transparent}
.nav__link:hover{border-bottom-color:currentColor}
.nav__link[aria-current]{border-bottom-color:var(--accent-ink)}
.site-header--over-hero:not(.is-solid) .nav__link[aria-current]{border-bottom-color:var(--accent-on-deep)}
.site-header--over-hero:not(.is-solid) .nav__cta{background:var(--btn-bg-dark);color:var(--btn-ink-dark);border-color:var(--btn-bg-dark)}
.site-header--over-hero:not(.is-solid) .nav__cta:hover{background:var(--accent-on-deep);border-color:var(--accent-on-deep);color:var(--text)}
.menu-link,.menu-toggle{display:none;min-height:44px;min-width:44px;align-items:center;justify-content:center;padding:0 4px;
  font-family:var(--sans);font-size:var(--fs-nav);font-weight:500;color:inherit;text-decoration:none}
.menu{position:fixed;inset:var(--header-h) 0 0 0;z-index:89;background:var(--bg);color:var(--text);overflow-y:auto;overscroll-behavior:contain;
  padding:32px var(--pad-x) calc(40px + env(safe-area-inset-bottom))}
.menu__list li + li{border-top:1px solid var(--rule)}
.menu__link{display:flex;align-items:center;min-height:64px;font-family:var(--serif);font-size:2rem;font-weight:500;line-height:1.15;text-decoration:none;color:inherit}
.menu__link[aria-current]{text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:6px}
.menu__cta{margin-top:32px}
.menu__cta .btn{width:100%}
.menu__email{margin-top:20px;font-family:var(--sans);font-size:var(--fs-small)}
html.menu-open{overflow:hidden}
html.menu-open .site-header{background:var(--bg);color:var(--text);border-bottom-color:var(--rule)}
@media (max-width:767.98px){
  .nav{display:none}
  .js .menu-toggle{display:inline-flex}
  .no-js .menu-link{display:inline-flex}
}
@media (min-width:768px){ .menu{display:none !important} }

/* ---------------------------------------------------------------- page head */
.page-head{padding-top:calc(var(--header-h) + 64px);padding-bottom:var(--space-tight)}
.page-head__title{max-width:22ch}
.page-head .lead{margin-top:24px}
.page-head .reply-promise{margin-top:20px;font-family:var(--sans);font-size:var(--fs-small);color:var(--text-muted)}

/* ---------------------------------------------------------------- hero (layout + treatment hooks; loop JS is stage 2) */
.hero{position:relative;min-height:max(560px,100svh);display:grid;align-items:end;background:var(--bg-deep-2);color:var(--on-hero);overflow:hidden}
.hero__media,.hero__media picture,.hero__poster,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__video{opacity:0;transition:opacity .6s var(--ease)}
.hero.is-playing .hero__video{opacity:1}
.hero__media > .todo{position:absolute;top:calc(var(--header-h) + 16px);left:var(--pad-x);right:var(--pad-x);width:auto}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(var(--scrim),.55) 0,rgba(var(--scrim),.55) var(--header-h),rgba(var(--scrim),0) calc(var(--header-h) + 120px)),
  linear-gradient(0deg,rgba(var(--scrim),.45) 0,rgba(var(--scrim),0) 60%)}
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--frame-wide);margin:0 auto;
  padding:calc(var(--header-h) + 32px) var(--pad-x) calc(clamp(2.5rem,6vh,5rem) + env(safe-area-inset-bottom))}
.hero__panel{max-width:min(100%,46rem);padding:clamp(1.25rem,3vw,2.25rem);background:rgba(var(--scrim),.55);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hero__panel{background:rgba(var(--scrim),.62)}}
.hero__title{font-family:inherit;font-weight:inherit;font-size:inherit;line-height:inherit}
.hero__eyebrow{display:block;margin-bottom:18px;font-family:var(--sans);font-size:.8125rem;font-weight:var(--hero-eyebrow-weight,500);
  letter-spacing:var(--hero-eyebrow-track,.22em);text-transform:uppercase;line-height:1.4}
.hero__statement{display:block;font-family:var(--display);font-weight:var(--display-weight);font-size:var(--hero-size,var(--fs-h1));
  line-height:var(--hero-lh,1.06);letter-spacing:var(--hero-track,-.015em);max-width:var(--hero-measure,16ch);font-optical-sizing:auto}
.hero__statement em{font-style:italic;color:inherit;margin-left:var(--hero-em-space,0)}
[data-hero-type="a"] .hero__statement em{font-style:normal}
[data-hero-type="c"] .hero__statement em{font-family:var(--serif);font-weight:500;font-size:1.08em;letter-spacing:0}
[data-hero-type="d"] .hero__eyebrow{font-family:var(--display);font-size:.6875rem;padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid rgba(255,254,251,.32)}
[data-hero-type="d"] .hero__statement em{font-style:normal;font-weight:300;white-space:nowrap}
[data-hero-type="e"] .hero__eyebrow::before{content:"";display:block;width:2.5rem;height:1px;margin-bottom:16px;background:currentColor;opacity:.7}
[data-hero-type="e"] .hero__statement em{white-space:nowrap}
[data-hero-type="g"] .hero__statement em,[data-hero-type="i"] .hero__statement em,[data-hero-type="k"] .hero__statement em{white-space:nowrap}
[data-hero-type="d"] .hero__statement,[data-hero-type="e"] .hero__statement{text-wrap:pretty}
@media (max-width:479.98px){ [data-hero-type="d"] .hero__eyebrow{font-size:.625rem;letter-spacing:.16em} [data-hero-type="e"] .hero__eyebrow{font-size:.75rem;letter-spacing:.16em} }
.hero__sub{margin-top:20px;max-width:36rem;font-family:var(--hero-sub-font,var(--sans));font-size:var(--hero-sub-size,var(--fs-lead));line-height:var(--hero-sub-lh,1.5)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero__toggle{position:absolute;z-index:3;right:var(--pad-x);bottom:calc(1.25rem + env(safe-area-inset-bottom));width:44px;height:44px;
  border:1px solid rgba(255,254,251,.5);background:rgba(var(--scrim),.5);color:var(--on-hero)}
.hero__toggle::before,.hero__toggle::after{content:"";position:absolute;top:14px;width:4px;height:16px;background:currentColor}
.hero__toggle::before{left:15px}
.hero__toggle::after{right:15px}
.hero__toggle[aria-pressed="true"]::before{left:16px;width:0;height:0;background:none;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent currentColor}
.hero__toggle[aria-pressed="true"]::after{display:none}
.header-sentinel{height:1px;margin-top:-1px}
@media (max-width:767.98px){ .hero__panel{max-width:100%} .hero__actions .btn{flex:1 1 auto} .hero__inner{padding-bottom:calc(80px + env(safe-area-inset-bottom))} }

/* ---------------------------------------------------------------- tiles and grid (spec 6.4) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:56px 28px}
/* The title link is the tile's link to its watch page; its ::after covers the whole tile, so a click anywhere opens
   the page (with no JS, the poster too). tile-play.js shows the play button over the poster (z-index 2, above that
   cover): a click plays the film in the tile (.tile__player) and the close button (floated under the poster, right)
   puts the poster back. */
.tile{position:relative}
.tile__link{color:inherit;text-decoration:none}
.tile__link::after{content:"";position:absolute;inset:0;z-index:1}
.tile__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--player-bg)}
.tile__media picture,.tile__media img{width:100%;height:100%;object-fit:cover}
.tile__media > .todo{position:absolute;inset:auto 12px 12px 12px}
@media (prefers-reduced-motion:no-preference){
  .tile__media img{transition:transform .6s var(--ease)}
  .tile:hover .tile__media img,.tile:focus-within .tile__media img{transform:scale(1.02)}
  .tile__play::before{transition:background-color var(--t-hover)}
}
.tile__runtime{position:absolute;right:10px;bottom:10px;padding:3px 8px;background:rgba(var(--scrim),.72);color:var(--on-hero);
  font-family:var(--sans);font-size:.8125rem;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.4}
.tile__play{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;padding:0;background:none;border:0;cursor:pointer}
.tile__play::before{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  background:rgba(var(--scrim),.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23fff'/%3E%3C/svg%3E") 55% 50% / 40% no-repeat}
.tile__play:hover::before{background-color:rgba(var(--scrim),.92)}
/* two-tone focus rings (a light ring between dark bands), so they read on light and dark posters alike */
.tile__play:focus-visible{outline:2px solid var(--on-hero);outline-offset:-6px;box-shadow:inset 0 0 0 4px rgba(var(--scrim),.85)}
.tile__play:focus-visible::before{outline:2px solid var(--on-hero);outline-offset:3px;box-shadow:0 0 0 7px rgba(var(--scrim),.85)}
.tile__player{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;border:0;background:var(--player-bg);object-fit:contain}
/* keyboard focus on the playing film: .tile__media's overflow clips the player's own outline, so the ring goes on
   the media box, in the tile's text colour (which always contrasts with the band behind the tile) */
.tile__media:has(> .tile__player:focus-visible){outline:2px solid currentColor;outline-offset:3px}
.tile.is-playing .tile__runtime{display:none}
.tile__close{float:right;position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;margin:12px 0 0 16px;padding:4px 2px;
  font-family:var(--sans);font-size:var(--fs-small);font-weight:500;line-height:1.4;color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.tile__close::before{content:"";flex:none;width:12px;height:12px;
  background:linear-gradient(45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),
    linear-gradient(-45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))}
.tile__close::after{content:"";position:absolute;inset:-8px}   /* a bigger tap target, same layout */
.tile__close:hover{text-decoration-thickness:2px}
.tile__client{display:block;margin-top:18px;font-family:var(--sans);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-muted)}
.tile__title{margin-top:6px;font-size:var(--fs-h3);font-weight:500}
.tile__line{display:block;margin-top:8px;font-size:var(--fs-small);color:var(--text-muted);line-height:1.55}
.tile__link:hover,.tile__link:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ---------------------------------------------------------------- player and watch page */
.player-band{background:var(--bg-deep);padding-block:clamp(0px,4vw,56px)}
.player-band__inner{max-width:var(--frame-wide);margin:0 auto;padding-inline:var(--pad-x)}
.player{position:relative;width:100%;aspect-ratio:var(--ar,16/9);background:var(--player-bg)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:767.98px){ .player-band{padding-block:0} .player-band__inner{padding-inline:0} }
.film-head__meta{margin-top:14px;font-family:var(--sans);font-size:var(--fs-small);color:var(--text-muted);font-variant-numeric:tabular-nums}
.film-head__outcome{margin-top:12px;font-size:var(--fs-lead)}
.captions-note{margin-top:20px;font-family:var(--sans);font-size:var(--fs-caption);color:var(--text-muted)}
.story__inner{display:grid;gap:48px}
.story__label{font-family:var(--sans);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.facts__list{display:grid;gap:0;max-width:var(--measure-lead);border-top:1px solid var(--rule)}
.facts__row{display:grid;grid-template-columns:minmax(120px,30%) 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.facts__row dt{font-family:var(--sans);font-size:var(--fs-caption);color:var(--text-muted)}
.transcript summary{cursor:pointer;font-family:var(--sans);font-size:var(--fs-small);font-weight:500;min-height:44px;display:flex;align-items:center}
.transcript__body{margin-top:20px}
.transcript__speaker{font-family:var(--sans);font-size:var(--fs-caption);font-weight:500}
.transcript__speaker::after{content:":"}
.next__label{margin:48px 0 24px;font-size:var(--fs-h3)}

/* ---------------------------------------------------------------- home blocks */
.names{padding-block:var(--space-tight) 0}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:28px 48px}
.logos img{height:44px;width:auto;filter:grayscale(1);mix-blend-mode:multiply;opacity:.85;transition:opacity var(--t-hover)}
.logos img:hover{opacity:1}
@media (max-width:767.98px){ .logos img{height:36px} }
.founder__grid{display:grid;gap:40px;align-items:start}
@media (min-width:768px){ .founder__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px} }
.founder__photo img{width:100%;height:auto}
.founder__photo--pending,.about__photo--pending,.post__image--pending{padding:24px;border:1px dashed var(--rule-strong)}
.proof__figure{max-width:var(--measure-lead)}
.proof__quote{font-size:var(--fs-lead);font-style:italic}
.proof__figure figcaption{margin-top:16px;font-family:var(--sans);font-size:var(--fs-caption);color:var(--text-muted)}
.promises__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0;border-top:1px solid var(--rule)}
.promise{display:grid;gap:10px;padding:24px 24px 28px 0;border-bottom:1px solid var(--rule)}
.promise__n{font-family:var(--sans);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-caps);color:var(--text-muted);font-variant-numeric:tabular-nums}
.promise__text{font-size:var(--fs-lead);line-height:1.35}
@media (min-width:768px){ .promise + .promise{padding-left:24px;border-left:1px solid var(--rule)} }
.band{padding-block:40px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.price-band__inner{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px}
.price-band__line{font-size:var(--fs-lead)}
.price-band__link{font-family:var(--sans);font-size:var(--fs-small)}
.plate{background:var(--bg-deep);color:var(--ink-on-deep);padding-block:var(--space-contempl)}
.big{font-size:var(--fs-quote);line-height:1.35;font-style:italic;max-width:880px}
.plate__cite{margin-top:28px;font-family:var(--sans);font-size:var(--fs-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--muted-on-deep)}
.plate__cite cite{font-style:normal;display:inline-flex;align-items:center;gap:14px}
.plate__cite cite::before{content:"";display:inline-block;width:28px;height:1px;background:currentColor}
.close__heading{font-size:var(--fs-h2);max-width:var(--measure-lead)}
.close .prose{margin-top:20px;color:var(--muted-on-deep)}
.cta__actions{margin-top:28px}
.hello{margin-top:24px;font-size:var(--fs-hello);line-height:1.4}
.hello a{text-decoration-thickness:1px;text-underline-offset:6px}

/* ---------------------------------------------------------------- CTA band */
.cta__heading{font-size:var(--fs-h2);max-width:var(--measure-lead)}
.cta__body{margin-top:16px;color:var(--muted-on-deep)}
.cta__email{margin-top:18px;font-family:var(--sans);font-size:var(--fs-small)}

/* ---------------------------------------------------------------- approach blocks */
.stages{border-top:1px solid var(--rule)}
.stage{display:grid;grid-template-columns:120px 1fr;gap:44px;padding:48px 0;border-bottom:1px solid var(--rule)}
.stage__num{font-size:var(--fs-num);line-height:1;color:var(--text-muted);font-variant-numeric:lining-nums}
.stage__title{font-size:var(--fs-h3);margin-bottom:14px}
.stage__body > * + *{margin-top:.9em}
.stage__body{max-width:var(--measure-prose)}
@media (max-width:767.98px){ .stage{grid-template-columns:1fr;gap:10px;padding:36px 0} }
.rulebox{background:var(--bg-warm);border-left:3px solid var(--rule-strong);padding:30px 34px;max-width:var(--measure-prose)}
.day-rate{font-size:var(--fs-lead)}
.day-rate__links{margin-top:20px;font-family:var(--sans);font-size:var(--fs-small)}
.fit{display:grid;gap:40px}
@media (min-width:768px){ .fit{grid-template-columns:1fr 1fr;gap:64px} }
.faq{max-width:var(--measure-lead);border-top:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__q{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:center;min-height:56px;padding:16px 0;font-size:var(--fs-lead);line-height:1.35}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"+";font-family:var(--sans);font-size:1.25rem;color:var(--text-muted)}
.faq__item[open] .faq__q::after{content:"\2212"}
.faq__a{padding-bottom:24px}

/* ---------------------------------------------------------------- tables, cards, lists */
.table-wrap{max-width:860px;overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.table th,.table td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--rule);line-height:1.5}
.table thead th{font-family:var(--sans);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-muted)}
.table tbody th{font-weight:500;width:36%}
.card{background:var(--surface);border:1px solid var(--rule);padding:28px}
@media (min-width:768px){ .card{padding:36px} }
.link-list{display:grid;gap:12px;margin-block:24px;font-family:var(--sans);font-size:var(--fs-small)}
.ruled li{border-top:1px solid var(--rule);padding:16px 0}
.ruled li:last-child{border-bottom:1px solid var(--rule)}
.figure img{width:100%;height:auto}
.figure figcaption{margin-top:10px;font-family:var(--sans);font-size:var(--fs-caption);color:var(--text-muted)}

/* ---------------------------------------------------------------- pricing shell (estimator styles: pricing.css) */
.est-static{margin-top:32px;max-width:var(--measure-lead)}
.has-estimator .est-static{display:none}
.no-js .has-estimator .est-static{display:block}
.est-static__list{border-top:1px solid var(--rule);margin-top:16px}
.est-static__row{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--rule)}
@media (min-width:768px){ .est-static__row{grid-template-columns:minmax(160px,30%) 1fr;gap:24px} }
.est-static__label{font-family:var(--sans);font-size:var(--fs-small);font-weight:500}
.est-static__floor{margin-top:16px;font-family:var(--sans);font-size:var(--fs-small);color:var(--text-muted)}

/* ---------------------------------------------------------------- contact shell (form styles: contact.css) */
.contact__grid{display:grid;gap:48px}
@media (min-width:768px){ .contact__grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:72px} }
.contact__aside{font-family:var(--sans);font-size:var(--fs-small)}
.contact__aside > * + *{margin-top:14px}
.contact__aside-title{font-family:var(--sans);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-muted)}
.copy-btn[data-done]::after{content:"\2713"}
.contact__email{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:var(--fs-lead);word-break:break-word}
.preview-ribbon{position:relative;z-index:1;margin-top:var(--header-h);background:var(--accent-soft);border-bottom:1px solid var(--accent);padding-block:12px;font-family:var(--sans);font-size:var(--fs-caption)}
.preview-ribbon + .page-head{padding-top:48px}

/* ---------------------------------------------------------------- forms (shared field shell) */
.field{display:grid;gap:8px;margin-bottom:24px}
.field__label{font-family:var(--sans);font-size:var(--fs-small);font-weight:500}
.field__hint{font-family:var(--sans);font-size:var(--fs-caption);color:var(--text-muted)}
.field__error{font-family:var(--sans);font-size:var(--fs-caption);color:var(--error)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:10px 14px;font-family:var(--sans);font-size:1.0625rem;
  background:var(--surface);border:1px solid var(--field-border);border-radius:0}
.field textarea{min-height:180px;line-height:1.5;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent-ink)}
.field [aria-invalid="true"]{border-color:var(--error)}

/* ---------------------------------------------------------------- journal */
.post-list{border-top:1px solid var(--rule);max-width:var(--measure-lead)}
.post-card{padding:32px 0;border-bottom:1px solid var(--rule)}
.post-card__title{font-size:var(--fs-h3)}
.post-card__title a{text-decoration:none}
.post-card__title a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.post-card__excerpt{margin-top:10px;color:var(--text-muted)}
.post-meta{margin-top:12px;font-family:var(--sans);font-size:var(--fs-caption);color:var(--text-muted)}
.post__head .page-head__title{max-width:none}
.progress{position:fixed;top:0;left:0;right:0;z-index:95;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* ---------------------------------------------------------------- footer */
.site-footer{border-top:1px solid var(--rule-on-deep);background:var(--bg-deep);color:var(--muted-on-deep);padding:56px 0 calc(40px + env(safe-area-inset-bottom));font-family:var(--sans);font-size:.8125rem;letter-spacing:var(--track-nav)}
.site-footer a{color:var(--ink-on-deep);text-decoration:none}
.site-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.site-footer__grid{display:grid;gap:36px}
@media (min-width:768px){ .site-footer__grid{grid-template-columns:1fr auto;gap:64px} }
.wordmark--footer{color:var(--ink-on-deep);font-size:var(--fs-nav)}
.site-footer__area{margin-top:8px;max-width:36ch}
.site-footer__email{margin-top:12px;font-size:var(--fs-caption)}
.site-footer__nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 24px;max-width:520px}
.site-footer__nav a{display:inline-flex;align-items:center;min-height:44px}
.site-footer__legal{margin-top:32px;padding-top:20px;border-top:1px solid var(--rule-on-deep)}

/* ---------------------------------------------------------------- edit map (preview only, preview.js) */
html.edit-map [data-src]{outline:1px dashed var(--accent-ink);outline-offset:2px;cursor:copy}
html.edit-map .section--deep [data-src],html.edit-map .hero [data-src],html.edit-map .site-footer [data-src],html.edit-map .plate [data-src]{outline-color:var(--accent-on-deep)}
.edit-map__tip{position:fixed;z-index:300;max-width:min(92vw,520px);padding:6px 10px;background:var(--text);color:var(--bg);font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.4;pointer-events:none;word-break:break-all}
.edit-map__toast{position:fixed;z-index:300;left:50%;bottom:24px;transform:translateX(-50%);padding:10px 16px;background:var(--text);color:var(--bg);font-family:var(--sans);font-size:14px}

/* pricing.css */
/* Estimator on /pricing (spec 7.2, 7.5; critique 16). Square corners, hairlines, no shadows.
   Gold only on the selected choice; the numerals stay ink. Mobile first, one breakpoint at 768px.
   The controls need JS (pricing.js); without it the template's .est-static ranges show instead. */
.no-js .estimator{display:none}
.estimator{display:grid;gap:40px;margin-top:8px}
@media (min-width:768px){
  .estimator{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
  .est-result{position:sticky;top:calc(var(--header-h) + 24px)}
}

/* ---------------------------------------------------------------- controls */
.est-form{display:grid;gap:32px;min-width:0}
.est-group{border:0;min-width:0;padding:0;margin:0}
.est-legend{display:block;padding:0;margin-bottom:12px;font-family:var(--sans);font-size:var(--fs-label);font-weight:500;
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-muted)}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));gap:8px}
.choices--cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.choice{position:relative;display:block;cursor:pointer}
.choice__input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0}
.choice__body{display:flex;flex-direction:column;justify-content:center;gap:4px;height:100%;min-height:48px;padding:10px 14px;
  background:var(--surface);border:1px solid var(--field-border);font-family:var(--sans);font-size:var(--fs-small);line-height:1.3;
  transition:border-color var(--t-hover),background-color var(--t-hover)}
.choice__label{display:flex;align-items:center;gap:10px;font-weight:500}
.choice__label::before{content:"";flex:none;width:12px;height:12px;border:1px solid var(--field-border);background:var(--surface);
  transition:background-color var(--t-hover),border-color var(--t-hover)}
.choice__hint{padding-left:22px;font-size:var(--fs-caption);color:var(--text-muted);line-height:1.4}
.choice:hover .choice__body{border-color:var(--text)}
.choice__input:checked + .choice__body{border-color:var(--accent-ink);background:var(--accent-soft)}
.choice__input:checked + .choice__body .choice__label::before{background:var(--accent-ink);border-color:var(--accent-ink)}
.choice__input:focus-visible + .choice__body{outline:2px solid var(--accent-ink);outline-offset:3px}
@media (forced-colors:active){
  .choice__input:checked + .choice__body{outline:2px solid Highlight}
  .choice__input:checked + .choice__body .choice__label::before{background:Highlight;forced-color-adjust:none}
}

.range{display:flex;align-items:center;gap:16px}
.range__input{flex:1 1 auto;min-width:0;height:44px;margin:0;background:transparent;accent-color:var(--text);cursor:pointer}
.range__value{flex:none;min-width:5.5em;font-family:var(--sans);font-size:var(--fs-small);font-weight:500;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- result */
.est-result > * + *{margin-top:16px}
.est-result__flag{font-family:var(--sans);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-muted)}
.est-summary{font-size:var(--fs-lead);line-height:1.4}
.est-num{display:inline-block;font-family:var(--sans);font-size:var(--fs-num);font-weight:500;line-height:1.1;letter-spacing:-.01em;
  color:var(--text);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.est-floor-note,.est-note{font-family:var(--sans);font-size:var(--fs-caption);line-height:1.5}
.est-note{color:var(--text-muted)}
.est-bar{display:block;width:100%;height:10px;margin-top:24px;overflow:visible}
.est-bar__seg--strategy,.est-share__swatch--strategy{fill:var(--rule-strong);background:var(--rule-strong)}
.est-bar__seg--filming,.est-share__swatch--filming{fill:var(--text-muted);background:var(--text-muted)}
.est-bar__seg--edit,.est-share__swatch--edit{fill:var(--text);background:var(--text)}
.est-bar__seg--travel{fill:var(--surface);stroke:var(--text-muted);stroke-width:1px;vector-effect:non-scaling-stroke}
.est-share__swatch--travel{background:var(--surface);border:1px solid var(--text-muted)}
.est-share{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-family:var(--sans);font-size:var(--fs-caption);color:var(--text-muted)}
.est-share__item{display:inline-flex;align-items:center}
.est-share__swatch{display:inline-block;flex:none;width:10px;height:10px;margin-right:8px}
.est-share__pct{margin-left:.35em;font-variant-numeric:tabular-nums;color:var(--text)}
.est-included,.est-changes,.est-larger,.est-similar{padding-top:16px;border-top:1px solid var(--rule);font-size:var(--fs-small)}
.est-similar{font-family:var(--sans)}
.est-actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px}
@media (max-width:767.98px){ .est-actions .btn{flex:1 1 100%} }
@media (forced-colors:active){ .est-bar__seg,.est-share__swatch{forced-color-adjust:none} }

/* ---------------------------------------------------------------- one-page print sheet (print.css shows .print-only) */
@media print{
  .has-print-sheet .estimator{display:block}
  .has-print-sheet .estimator > :not(.print-sheet),
  .has-print-sheet .estimator-section .section__title,
  .has-print-sheet .est-static{display:none !important}
  .has-print-sheet .estimator-section .inner{padding:0;max-width:none}
  .print-sheet{color:#000}
  .print-sheet > * + *{margin-top:10pt}
  .print-sheet > *{break-inside:avoid}
  .print-sheet__brand{font-family:var(--sans);font-size:14pt;font-weight:600;letter-spacing:.02em}
  .print-sheet__meta{margin-top:2pt;font-family:var(--sans);font-size:8pt;letter-spacing:.06em;color:#444}
  .print-sheet__meta span + span::before{content:"\00B7";margin:0 .5em}
  .print-sheet__meta span:empty + span::before{content:none}
  .print-sheet__table{width:100%;border-collapse:collapse;margin-top:14pt}
  .print-sheet__table th,.print-sheet__table td{padding:4pt 8pt 4pt 0;border-bottom:.5pt solid #bbb;text-align:left;vertical-align:top;font-size:10.5pt}
  .print-sheet__table th{width:34%;font-family:var(--sans);font-size:8pt;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
  .print-sheet__range{font-size:12pt}
  .print-sheet__range .est-num{font-size:20pt}
  .print-sheet__floor,.print-sheet__note,.print-sheet__included,.print-sheet__day{font-size:10.5pt}
  .print-sheet__included > * + *,.print-sheet__day > * + *{margin-top:6pt}
  .print-sheet__flag{padding-top:8pt;border-top:.5pt solid #bbb}
}

/* contact.css */
/* Inquiry form (spec 8.1; critique 9). Field shells (.field, inputs, focus, aria-invalid) live in
   components.css; this adds the summary, estimate box, selects, honeypot, Turnstile and actions.
   Mobile first; 48px controls; errors in --error and wired with aria-describedby by contact.js. */
.form{position:relative;max-width:var(--measure-prose)}
.field-row{display:grid;gap:0 24px}
@media (min-width:768px){ .field-row{grid-template-columns:1fr 1fr} }

.field .field__select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1.5l5 5 5-5%27 fill=%27none%27 stroke=%27%231A1814%27 stroke-width=%271.5%27/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
@media (forced-colors:active){ .field .field__select{appearance:auto;-webkit-appearance:auto;background-image:none;padding-right:14px} }

/* error summary: focused after a failed send, links jump to each field */
.form__summary{margin-bottom:32px;padding:20px 24px;background:var(--surface);border:1px solid var(--error);border-left-width:3px;font-family:var(--sans)}
.form__summary:focus{outline:2px solid var(--error);outline-offset:3px}
.form__summary > * + *{margin-top:8px}
.form__summary-title{font-size:var(--fs-small);font-weight:500;color:var(--error)}
.form__summary .form__summary-list{padding-left:1.1em;list-style:square;font-size:var(--fs-small)}
.form__summary-list li + li{margin-top:4px}
.form__summary-list a{color:var(--error);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.form__msg{font-size:var(--fs-small);line-height:1.5;color:var(--text)}
.form__msg a{color:inherit}

/* the estimate carried from /pricing (read-only, removable) */
.estimate-box{margin-bottom:24px;padding:20px 24px;background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--rule-strong)}
.estimate-box__label{font-family:var(--sans);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-muted)}
.estimate-box__text{margin-top:10px;white-space:pre-line;font-family:var(--sans);font-size:var(--fs-caption);line-height:1.6;overflow-wrap:anywhere}
.estimate-box__remove{margin-top:14px}

/* honeypot: off-screen, out of the tab order and the accessibility tree */
.form__hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Turnstile (flexible size is 300px minimum: on the narrowest phones borrow a little of the gutter) */
.form__check{margin:8px 0 24px}
.form__check .cf-turnstile{min-height:65px}
.form__check-note{margin-top:8px}
@media (max-width:359.98px){ .form__check .cf-turnstile{margin-inline:calc(-1 * min(var(--pad-x) - 4px, 16px))} }

.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.form__submit{min-width:10rem}
.no-js .form__submit{display:none}
.form[aria-busy="true"] .form__submit{cursor:progress}
.form__noscript{font-family:var(--sans);font-size:var(--fs-small);line-height:1.5}
@media (max-width:767.98px){ .form__submit{width:100%} }

/* print.css */
/* Print (spec 3.2, 7.5). The estimator one-page sheet (.print-sheet) is filled by pricing.js. */
.print-only{display:none}
@media print{
  @page{size:Letter;margin:.6in}
  html,body{background:#fff;color:#000;font-size:11pt}
  .site-header,.menu,.skip,.preview-ribbon,.hero__toggle,.progress,.menu-toggle,.menu-link,.copy-btn,.tile__play,.tile__close,.tile__player{display:none !important}
  .reveal{opacity:1 !important;transform:none !important}
  .draw path,.draw circle,.draw rect,.draw line,.draw ellipse,.draw polyline{stroke-dashoffset:0 !important;animation:none !important}
  .hero{min-height:auto}
  .page-head{padding-top:0}
  .section,.plate{padding-block:24pt}
  .section--deep,.plate,.site-footer,.hero{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tile,.card,.stage,.faq__item,.table-wrap,.facts__row{break-inside:avoid}
  .todo{border-style:dashed}
  a.link::after{content:none}
  /* /pricing prints the estimate sheet only */
  .has-print-sheet main > *:not(.estimator-section),.has-print-sheet .site-footer,.has-print-sheet .grid{display:none !important}
  .has-print-sheet .print-only{display:block}
  .has-print-sheet .estimator-section{background:none;padding:0}
  .has-print-sheet .no-print{display:none !important}
  .print-sheet{font-family:var(--serif);font-size:11pt;line-height:1.45}
  .print-sheet .label{font-family:var(--sans);font-size:8pt;letter-spacing:.18em;text-transform:uppercase}
}

/* generated */
.ar-16-9{--ar:16/9}
.ar-9-16{--ar:9/16}
.ar-9-16.player{max-height:80svh;width:auto;margin-inline:auto}
.ar-1920-1012{--ar:1920/1012}