/* ===== tokens (was css/tokens.css) ===== */
/* Design tokens, verbatim from the deck :root (reference/presentation.html). */
:root{
  --dark:#141210; --dark-text:#EAE5DA; --dark-dim:#A79E8C;
  --paper:#F4F1EA; --ink:#1B1813; --ink-dim:#6A6152;
  --accent:#9A7B4F; --paper-deep:#EAE2D2;
  --line-d:rgba(234,229,218,.16); --line-l:rgba(27,24,19,.14);
  --serif:'Fraunces',Georgia,serif; --sans:'Space Grotesk',system-ui,sans-serif;
  --pad:clamp(1.5rem,6vw,6.5rem);
  --measure:80%;
  --h2-size:clamp(1.75rem,4.2vw,3.1rem);
}

/* ===== site (was css/site.css) ===== */
/* Site layout, transcribed from the deck inline stylesheets (reference/*.html).
   Values are the deck values. Blocks marked SITE are new structure the decks do not
   carry (nav, footer, matrix as a table); they reuse deck values only. */

/* SITE: anchor targets clear the fixed header */
[id]{scroll-margin-top:clamp(5.5rem,9vw,6.5rem)}

/* SITE: self-hosted fonts (SIL OFL 1.1, see /assets/brand/fonts/OFL.txt), latin subset,
   only the faces the pages render: Fraunces 300 (opsz axis) and Space Grotesk 400, 500, 700. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;
  src:url('/assets/brand/fonts/fraunces-300-opsz-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/brand/fonts/space-grotesk-400-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

*{margin:0;padding:0;box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}
body{font-family:var(--sans);background:var(--dark);-webkit-font-smoothing:antialiased}
.no-js .reveal{opacity:1;transform:none}

/* Sections */
section{min-height:100svh;position:relative;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(4.5rem,10vw,7rem) var(--pad) clamp(3.5rem,8vw,5rem);overflow:hidden}
.dark{background:var(--dark);color:var(--dark-text)}
.light{background:var(--paper);color:var(--ink)}
.silent{justify-content:center}
/* SITE: below 860 the first (hero) section takes content height plus padding, no viewport floor
   (Unit FIX-2 2b). The home video hero (.hero) keeps its full-screen opening. 860+ unchanged. */
@media (max-width:859px){ main > section:first-child:not(.hero){min-height:auto} }

/* Type scale */
.eyebrow{font-size:clamp(.66rem,1.5vw,.74rem);letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;display:flex;align-items:center;gap:.7em;margin-bottom:1.3rem}
.eyebrow::before{content:"";width:1.6em;height:1px;background:var(--accent);flex:none}
.dark .eyebrow{color:var(--dark-dim)} .light .eyebrow{color:var(--ink-dim)}

h1{font-weight:500;text-transform:uppercase;font-size:clamp(2.5rem,9vw,6rem);
  line-height:.98;letter-spacing:-.01em;margin:.4em 0 .45em;max-width:15ch}
h2{font-family:var(--serif);font-weight:300;font-size:var(--h2-size);
  line-height:1.1;letter-spacing:-.005em;margin-bottom:.65em;max-width:19ch}
h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.35rem,3vw,2rem);
  line-height:1.15;margin-bottom:.6em;max-width:22ch}
.lede{font-family:var(--serif);font-weight:300;font-size:clamp(1.1rem,2.5vw,1.65rem);
  line-height:1.4;max-width:34ch}
p.body{font-size:clamp(.97rem,1.8vw,1.1rem);line-height:1.62;max-width:46ch;margin-bottom:1rem}
.light p.body{color:#2A251E} .dark p.body{color:var(--dark-text)}
.note{font-size:.8rem;letter-spacing:.04em;line-height:1.5;max-width:44ch}
.dark .note{color:var(--dark-dim)} .light .note{color:var(--ink-dim)}
/* SITE: lede followed by body text, the 1.2rem gap the pages carry inline (art-reproduction:49,
   manufacturing:49, partner:49), as one rule (Unit MEASURE-80); a following div too (Unit MEASURE-COL) */
.lede + :is(p.body,div){margin-top:1.2rem}
/* SITE: text and content blocks in single-column section flow take 80% of the content width from
   860px (GM ruling, Unit MEASURE-80). Inside the split sections the columns set --measure:100%, so
   text fills its column (Unit MEASURE-COL). Not in figures, the reel stage, .compare, header or
   footer; page-specific widths (.brands, .range, .verticals-line, .art-source) and inline widths kept. */
@media(min-width:860px){
  :is(h1,h2,h3,.lede,p.body,.note,.label,ul.rows,ol.rows,table.matrix,.contact-form,.cat-filter,.form-success-msg):not(:where(.three,.process-grid,.art-applications,.sreel-reel,figure,.compare,.site-header,.site-footer,
    .brands,.range,.verticals-line,.art-source) *):not(.brands){max-width:var(--measure)}
  :is(.grid.g-half,.grid.g-wide,.application-editorial,.route-editorial,.hero:has(video),.sreel,.cat-filter,
    .proof,.ornam-row,.swatches,.seven,.form-row-2) > *{--measure:100%}
}
/* SITE: ledes and headings balance their lines (Unit ART-HERO, GM ruling 2) */
h1,h2,.lede{text-wrap:balance}
/* SITE: a paragraph followed by a .g-half media pair in the same flow stops at the pair's first
   column: (100% - the .grid gap) / 2, from .grid (:88) and .g-half 1fr 1fr (:90). Unit ART-HERO. */
@media(min-width:860px){
  p:has(~ .grid.g-half > figure){max-width:calc((100% - clamp(1.4rem,3.5vw,3rem)) / 2)}
}
.label{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  margin-bottom:.9rem}
.dark .label{color:var(--dark-dim)} .light .label{color:var(--ink-dim)}

/* Pair layouts (in place plus macro) */
.grid{display:grid;gap:clamp(1.4rem,3.5vw,3rem);align-items:center}
@media(min-width:860px){
  .g-half{grid-template-columns:1fr 1fr}
  .g-wide{grid-template-columns:1.25fr .75fr}
  .g-narrow{grid-template-columns:.72fr 1.28fr}
}
.three{display:grid;gap:1.2rem;margin-top:.5rem}
@media(min-width:760px){.three{grid-template-columns:repeat(3,1fr)}}
.proof{display:grid;gap:clamp(1.1rem,2.5vw,1.8rem)}
@media(min-width:760px){
  .proof{grid-template-columns:repeat(2,1fr)}
  .proof .wide{grid-column:1 / -1;max-width:62%;margin:0 auto;width:100%}
}

/* Figure */
figure{margin:0}
.slot{position:relative;width:100%;background:transparent;
  border:1px solid var(--line-l);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:1rem}
.dark .slot{border-color:var(--line-d)}
.slot::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(154,123,79,.055) 14px 15px)}
.sq{aspect-ratio:1/1} .ls{aspect-ratio:16/9} .tall{aspect-ratio:4/5}
.slot:has(img){border:none;padding:0}
.slot:has(img)::after{display:none}
.slot img{width:100%;height:100%;object-fit:cover;display:block}
.slot video{width:100%;height:100%;object-fit:cover;display:block}
.slot:has(video){border:none;padding:0} .slot:has(video)::after{display:none}
/* SITE: /printed-surfaces/ Ornam row: swipe row below 760px, three columns from 760px;
   hairline frames on light Ornam slots and the macro video slot (after .slot:has() so they win) */
.ornam-row{list-style:none;display:grid;gap:1.2rem;margin-top:1.2rem}
@media(max-width:759px){.ornam-row{grid-auto-flow:column;grid-auto-columns:76%;overflow-x:auto;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:.6rem}
  .ornam-row li{scroll-snap-align:start}}
@media(min-width:760px){.ornam-row{grid-template-columns:repeat(3,1fr)}}
.light .ornam-row .slot,.light .g-half .slot:has(video){border:1px solid var(--line-l)}
.figure{display:grid;grid-template-columns:1fr}
.figure p.body{max-width:none}

/* Caption */
.cap{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  margin-top:.7rem;color:var(--accent)}
.cap span{display:block;text-transform:none;letter-spacing:.02em;font-weight:400;
  font-size:.83rem;margin-top:.3rem}
.dark .cap span{color:var(--dark-dim)} .light .cap span{color:var(--ink-dim)}

/* Lists */
ul.rows{list-style:none;max-width:52ch}
ul.rows li{font-size:clamp(.95rem,1.9vw,1.1rem);padding:.7em 0;border-top:1px solid var(--line-l);
  display:flex;align-items:baseline;gap:.9em;line-height:1.32}
.dark ul.rows li{border-color:var(--line-d)}
ul.rows li:last-child{border-bottom:1px solid var(--line-l)}
.dark ul.rows li:last-child{border-bottom-color:var(--line-d)}
ul.rows li em{font-style:normal;font-size:.68rem;color:var(--accent);font-weight:500;
  letter-spacing:.05em;min-width:1.9em;flex:none}
ul.brands{max-width:none}
ul.brands li{display:grid;grid-template-columns:2.2em 1fr;column-gap:1em;align-items:start}
ul.brands li b{font-weight:400;font-size:clamp(1rem,2vw,1.15rem);line-height:1.3}
ul.brands li span{font-size:.86rem;line-height:1.5;margin-top:.25rem;display:block}
/* SITE: below 760 the 3-child brands li is a 2-col grid, so the description must span the full
   row under the numeral and title; reset to its own column at 760+ (Unit FIX-2 2a). */
ul.brands li > span{grid-column:1 / -1}
.dark ul.brands li span{color:var(--dark-dim)}
.light ul.brands li span{color:var(--ink-dim)}
@media(min-width:760px){
  ul.brands li{grid-template-columns:2.2em minmax(0,15em) minmax(0,1fr);align-items:baseline}
  ul.brands li span{margin-top:0}
  ul.brands li > span{grid-column:auto}
}
.index{list-style:none;margin-top:1rem;max-width:62ch}
.index li{padding:.85em 0;border-top:1px solid var(--line-d);display:flex;
  align-items:baseline;gap:1em;font-size:clamp(1.05rem,2.4vw,1.5rem);
  font-family:var(--serif);font-weight:300;line-height:1.2}
.index li:last-child{border-bottom:1px solid var(--line-d)}
.index li em{font-style:normal;font-family:var(--sans);font-size:.68rem;
  color:var(--accent);font-weight:500;letter-spacing:.06em;min-width:2em;flex:none}
.index li small{display:block;font-family:var(--sans);font-size:.78rem;color:var(--dark-dim);
  letter-spacing:.02em;margin-top:.25rem;font-weight:400}
.nodes{display:flex;flex-wrap:wrap;gap:.5em 2.2em;margin-top:1.6rem;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--dark-dim)}

/* SITE: matrix as a table, values from the substrates deck ul.rows.matrix */
table.matrix{width:100%;border-collapse:collapse;text-align:left}
table.matrix caption{text-align:left;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;margin-bottom:.9rem}
table.matrix th{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  padding:.7em 1em .7em 0;border-top:1px solid var(--line-l)}
table.matrix td{font-size:.86rem;line-height:1.45;padding:.7em 1em .7em 0;
  border-top:1px solid var(--line-l);vertical-align:baseline}
table.matrix td:first-child{font-size:clamp(1rem,2vw,1.15rem);line-height:1.3}
table.matrix tr:last-child td{border-bottom:1px solid var(--line-l)}
.dark table.matrix th,.dark table.matrix td{border-color:var(--line-d)}
.dark table.matrix caption,.dark table.matrix td+td{color:var(--dark-dim)}
.light table.matrix caption,.light table.matrix td+td{color:var(--ink-dim)}
/* SITE: below 860 a matrix with explicit table roles stacks to one card per row; the first cell is
   the card heading, each other cell carries its column header as a visual label (data-label, alt
   text "" so it is announced once). thead stays in the accessibility tree. Unit FIX-3. */
@media (max-width:859px){
  .matrix thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  table.matrix[role="table"],table.matrix[role="table"] caption,table.matrix[role="table"] tbody,
  table.matrix[role="table"] tr,table.matrix[role="table"] td{display:block}
  table.matrix[role="table"] tr{padding:.7em 0;border-top:1px solid var(--line-l)}
  table.matrix[role="table"] tr:last-child{border-bottom:1px solid var(--line-l)}
  table.matrix[role="table"] td,table.matrix[role="table"] tr:last-child td{padding:.35em 0;border:0}
  table.matrix[role="table"] td[data-label]::before{content:attr(data-label);content:attr(data-label) / "";
    display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
  .dark table.matrix[role="table"] tr{border-color:var(--line-d)}
  .dark table.matrix[role="table"] td[data-label]::before{color:var(--dark-dim)}
  .light table.matrix[role="table"] td[data-label]::before{color:var(--ink-dim)}
}

/* Links */
.cta{display:inline-block;margin-top:1.8rem;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--accent);padding-bottom:.5em}
.dark .cta{color:var(--dark-text)}
a.ilink{color:inherit;text-decoration:none;border-bottom:1px solid var(--accent);
  padding-bottom:.12em}
.foot{position:absolute;left:var(--pad);bottom:clamp(1.4rem,3.5vw,2.4rem);
  font-size:.72rem;letter-spacing:.05em;opacity:.6;max-width:42ch;line-height:1.5}

/* Header, deck values; SITE: logo, persistent "Start a brief", menu toggle (GM ruling bf).
   The link list lives in a full-viewport panel opened by the toggle at every viewport.
   Without JS (html.no-js kept) the toggle is hidden and every link shows inline, as before. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;flex-wrap:wrap;
  justify-content:space-between;align-items:center;gap:.4rem 1.2rem;padding:.7rem var(--pad);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  mix-blend-mode:difference;color:#fff}
.site-header .logo-link{display:flex;align-items:center;min-height:44px}
.site-header .logo{height:clamp(32px,4.25vw,42px);width:auto;display:block}
.header-actions{display:flex;align-items:center;gap:1.2rem;margin-left:auto}
.nav-brief{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1em;
  border:1px solid currentColor;color:inherit;text-decoration:none;white-space:nowrap}
.nav-toggle{visibility:hidden}
.nav-panel ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 1.4em}
.nav-panel a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.no-js .nav-panel{flex-basis:100%}
@media(max-width:859px){
  .no-js .nav-panel ul{gap:0 1em;font-size:.62rem}
}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 .2em;font:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit;background:none;border:0;cursor:pointer}
html:not(.no-js) .nav-toggle{visibility:visible}
html:not(.no-js) .nav-panel{display:none}
html:not(.no-js) .site-header.is-open{mix-blend-mode:normal;color:var(--dark-text)}
html:not(.no-js) .site-header.is-open .nav-panel{display:block;position:fixed;inset:0;z-index:-1;
  overflow-y:auto;overscroll-behavior:contain;background:var(--dark);
  padding:6.5rem var(--pad) 3rem;animation:nav-open .2s ease-out}
html:not(.no-js) .site-header.is-open .nav-panel ul{display:block;max-width:36rem;font-size:clamp(.8rem,1.6vw,.95rem)}
html:not(.no-js) .site-header.is-open .nav-panel li{border-top:1px solid var(--line-d)}
html:not(.no-js) .site-header.is-open .nav-panel li:last-child{border-bottom:1px solid var(--line-d)}
html:not(.no-js) .site-header.is-open .nav-panel a{display:flex;padding:.6rem 0}
html:not(.no-js) .site-header.is-open .nav-toggle::after{content:"\00D7";margin-left:.5em;font-size:1.3em;line-height:1;letter-spacing:0}
html.nav-locked,html.nav-locked body{overflow:hidden}
/* SITE: HEADER-STRIP (was FIX-2C, mobile only). The fixed bar is transparent and blends
   (mix-blend-mode:difference on the header). Once scrolled, at every width, give the bar the
   opaque background of the tone under its bottom edge (data-tone set by js/nav.js) and move
   the blend to the logo and actions. At scrollY 0 the bar is unchanged; the open menu keeps
   its look. Tones use the section background tokens (.dark var(--dark), .light var(--paper)). */
.site-header{transition:background-color .2s ease}
.site-header.is-scrolled:not(.is-open){mix-blend-mode:normal}
.site-header.is-scrolled:not(.is-open)[data-tone="dark"]{background:var(--dark)}
.site-header.is-scrolled:not(.is-open)[data-tone="light"]{background:var(--paper)}
.site-header.is-scrolled:not(.is-open) .logo,
.site-header.is-scrolled:not(.is-open) .nav-brief,
.site-header.is-scrolled:not(.is-open) .nav-toggle{mix-blend-mode:difference}
@media (prefers-reduced-motion:reduce){
  .site-header{transition:none}
}
@keyframes nav-open{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  html:not(.no-js) .site-header.is-open .nav-panel{animation:none}
}

/* SITE: footer, deck .note values; three columns from 860px, one below (GM rulings ar, be) */
.site-footer{position:relative;background:var(--dark);color:var(--dark-text);
  padding:clamp(2.25rem,4.5vw,3.25rem) var(--pad) clamp(1.75rem,3.5vw,2.5rem)}
/* SITE: inset hairline, same token and inset as ul.rows, separates the footer from a dark last section */
.site-footer::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);
  height:1px;background:var(--line-d)}
.site-footer .note{color:var(--dark-dim)}
.site-footer ul{list-style:none}
.site-footer li{padding:.2em 0}
/* SITE: footer logo, header logo height (:175); gap to the columns = footer top padding (:207) */
.site-footer .logo{height:clamp(32px,4.25vw,42px);width:auto;display:block;margin-bottom:clamp(2.25rem,4.5vw,3.25rem)}
.foot-cols{display:grid;gap:1.2rem}
@media(min-width:860px){.foot-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}}

/* Seven-surface strip, substrates deck values */
.seven{display:grid;gap:.6rem;margin-top:.5rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.seven{grid-template-columns:repeat(4,1fr)}}
@media(min-width:860px){.seven{grid-template-columns:repeat(7,1fr)}}
.seven .cap{margin-top:.5rem}

/* Before and after compare (/transcription). Deck .ba values; after image on top,
   clipped from the right by js/compare.js; handle is a 2px line with a 44px hit area. */
.compare{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;touch-action:pan-y;
  border:1px solid var(--line-l);background:transparent;cursor:ew-resize;user-select:none}
.dark .compare{border-color:var(--line-d)}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none}
@media(min-width:860px){.figure:has(> .compare){width:80%;margin-inline:auto}}
.compare-before{z-index:1}
.compare-after{z-index:2;clip-path:inset(0 50% 0 0)}
.compare-handle{position:absolute;top:0;bottom:0;left:50%;z-index:3;width:44px;margin-left:-22px;
  padding:0;border:0;background:transparent;cursor:ew-resize;touch-action:none}
.compare-handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;
  background:var(--paper)}
.compare-handle::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;
  margin:-17px 0 0 -17px;border:1px solid var(--paper);border-radius:50%;
  background:rgba(20,18,16,.28)}
.compare-handle:focus-visible{outline:none}
.compare-handle:focus-visible::after{border-color:var(--accent);border-width:2px}
.compare-caption{position:absolute;bottom:.7rem;left:.7rem;z-index:3;font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--paper);
  background:rgba(20,18,16,.42);padding:.35em .7em;pointer-events:none}

/* Art reproduction layouts, artreproduction deck values verbatim */
.process-grid{display:grid;gap:clamp(1rem,2vw,1.6rem);margin-top:1.8rem}
@media(min-width:760px){.process-grid{grid-template-columns:repeat(5,1fr)}}
.art-source{max-width:58ch;margin:1.8rem auto 0}
.art-applications{display:grid;gap:clamp(1rem,2vw,1.5rem);margin-top:1.5rem}
@media(min-width:760px){.art-applications{grid-template-columns:repeat(5,1fr)}}
.route-grid{margin-top:1.2rem;align-items:start}
.route-grid h3{margin-top:1.1rem}
.route-grid p.body{margin-bottom:0}
.artwork-process-layout{align-items:start}
.artwork-hero{margin-top:1.3rem}
.artwork-hero .slot{aspect-ratio:4/3}
.artwork-credit{font-size:.65rem;letter-spacing:.04em;line-height:1.45;margin-top:.65rem}
.artwork-process-layout .artwork-credit{font-size:.68rem}
.dark .artwork-credit{color:var(--dark-dim)} .light .artwork-credit{color:var(--ink-dim)}
.artwork-credit strong{display:block;color:var(--accent);font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.stage-copy{display:block;font-size:.82rem;line-height:1.5;margin-top:.25rem}
.dark .stage-copy{color:var(--dark-dim)} .light .stage-copy{color:var(--ink-dim)}
.application-editorial{display:grid;gap:clamp(1.4rem,3.5vw,3rem);align-items:start}
/* SITE: the text track never narrows below "Multiple applications." at h2 size. Measured
   max-content / h2 size: 9.358 at 860, 9.377 at 1024, 9.124 at 1440 (Fraunces opsz sets wider
   at small sizes), so 9.5 (Unit CLOSE-1002; ruled 9.2 did not hold below 1440) */
@media(min-width:860px){.application-editorial{grid-template-columns:minmax(calc(var(--h2-size) * 9.5), .52fr) 1fr}}
.application-list{margin-top:1.2rem}
.application-list ul.rows{margin-top:.25rem}
.application-list .note{margin-top:1.3rem}
.application-art .slot{aspect-ratio:1493/1000}
.route-editorial{display:grid;gap:clamp(1.4rem,3.5vw,3rem);align-items:start}
@media(min-width:860px){.route-editorial{grid-template-columns:1.35fr 1fr}}
.route-art{margin-top:1.4rem}
.route-art .slot{height:clamp(24rem,52svh,34rem);aspect-ratio:auto}
.route-art img{object-fit:contain;object-position:0 50%}
.route-copy{margin-top:0}
.route-copy .route-block + .route-block{border-top:1px solid var(--line-l);margin-top:1.15rem;padding-top:1.15rem}
.route-copy .route-block h3{margin:.5rem 0 .55rem}
.route-copy p.body{margin-bottom:.7rem}
.route-copy .note{border-top:1px solid var(--line-l);margin-top:1.15rem;padding-top:1.05rem}

/* SITE: homepage (/home/ until cutover). Split hero from 860px: text
   left on --dark, portrait film right. Below 860px the film runs
   full-bleed behind the text with a CSS scrim. */
.hero{padding:0;justify-content:flex-end;color:var(--dark-text);background:var(--dark)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-video{width:100%;height:100%;object-fit:cover;display:block}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(20,18,16,.55) 0%,rgba(20,18,16,0) 18%),
  linear-gradient(to top,rgba(20,18,16,.78) 0%,rgba(20,18,16,.45) 38%,rgba(20,18,16,.12) 70%,rgba(20,18,16,0) 100%)}
.hero-copy{position:relative;z-index:2;padding:clamp(4.5rem,10vw,7rem) var(--pad) clamp(3.5rem,8vw,5rem)}
.hero-copy .lede{color:var(--dark-text)}
.hero-toggle,.loop-toggle{margin-top:1.4rem;min-height:44px;padding:0;background:none;border:0;cursor:pointer;
  font:inherit;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  color:var(--dark-dim);border-bottom:1px solid var(--accent);align-self:flex-start}
.no-js .hero-toggle,.no-js .loop-toggle{display:none}
.light .loop-toggle{color:var(--ink-dim)}
@media(min-width:860px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) min(56.25svh,46vw);align-items:end}
  /* SITE: film held (home/index.html templates, 2026-10-02): one column, copy on the 80% measure */
  .hero:not(:has(video)){grid-template-columns:minmax(0,1fr)}
  .hero:not(:has(video)) .hero-media{display:none}
  .hero-copy{grid-column:1;grid-row:1}
  .hero-copy h1{font-size:clamp(2.5rem,5.2vw,6rem)}
  .hero-media{position:relative;inset:auto;grid-column:2;grid-row:1;height:100svh}
  .hero-media::after{background:linear-gradient(to bottom,rgba(20,18,16,.72) 0%,rgba(20,18,16,.35) 10%,rgba(20,18,16,0) 24%)}
}

.range{max-width:none}
.range .range-item{padding:0}
.range .range-link{display:grid;grid-template-columns:2em 1fr;gap:.9em 1em;align-items:baseline;
  padding:.85em 0;color:inherit;text-decoration:none;width:100%}
.range .range-link em{font-style:normal;font-family:var(--sans);font-size:.68rem;color:var(--accent);
  font-weight:500;letter-spacing:.06em}
.range .range-name{display:block}
.range .range-oneliner{display:block;font-family:var(--sans);font-size:.78rem;color:var(--dark-dim);
  letter-spacing:.02em;margin-top:.25rem;font-weight:400}
.range .range-img{grid-column:2;width:100%;max-width:22rem;height:auto;display:block}
@media(min-width:860px){
  .range .range-link{grid-template-columns:2em 1fr 16rem;align-items:center}
  .range .range-img{grid-column:3}
}

.verticals{min-height:auto;padding:clamp(3.5rem,8vw,6rem) var(--pad);align-items:center;text-align:center}
.verticals-line{font-size:clamp(1rem,1.7vw,1.35rem);letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--ink);line-height:1.6;text-wrap:balance;max-width:none}

/* SITE: /studio contact form (legacy markup carried verbatim, Unit 4). Deck values only. */
.contact-form{max-width:46rem;margin-top:clamp(4.5rem,10vw,7rem)}
.contact-form .form-row{display:grid;gap:1.2rem;margin-bottom:1.2rem}
@media(min-width:760px){.contact-form .form-row-2{grid-template-columns:1fr 1fr}}
.contact-form .form-field,.cat-filter .form-field{display:flex;flex-direction:column;gap:.45rem}
.contact-form label,.cat-filter label{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--ink-dim)}
.contact-form input,.contact-form select,.contact-form textarea,.cat-filter select{font:inherit;font-size:clamp(.97rem,1.8vw,1.1rem);
  color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line-l);padding:.55rem 0;border-radius:0}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus,.cat-filter select:focus{outline:none;border-bottom-color:var(--accent)}
.contact-form .form-submit{font:inherit;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--ink);background:none;border:0;border-bottom:1px solid var(--accent);padding:0 0 .5em;cursor:pointer;justify-self:start}
.form-success-msg{font-family:var(--serif);font-weight:300;font-size:clamp(1.1rem,2.5vw,1.65rem);line-height:1.4;max-width:34ch}

/* ===== motion (was css/motion.css) ===== */
@view-transition { navigation: auto; }

/* Reveal: deck values (reference/presentation.html); deck class .in renamed .is-in to match js/reveal.js */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-in { opacity: 1; transform: none; }
/* SITE: an in-page anchor target and its reveal ancestors render settled, so the jump lands below the header */
.reveal:target,.reveal:has(:target){opacity:1;transform:none;transition:none}
.d1 { transition-delay: .07s; } .d2 { transition-delay: .14s; } .d3 { transition-delay: .21s; }

/* SITE: /finishes/ catalogue swatch grids (Unit CAT). 2 columns, 3 from 560px, 4 from 860px,
   6 from 1200px. Deck tokens only; .light .nodes keeps the index legible on paper. */
.swatches{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.6rem,1.6vw,1rem);margin-top:1rem}
.swatches .slot{aspect-ratio:1/1}
.swatches-portrait .slot{aspect-ratio:4/5}
.swatches .cap{margin-top:.45rem}
.swatches-sub{margin-top:2.2rem}
.light .nodes{color:var(--ink-dim)}
section[data-category][hidden],.swatches-group[hidden],.cat-filter[hidden]{display:none}
html:not(.no-js) .cat-index{display:none}
.cat-filter{display:grid;gap:1.2rem;margin-top:1.6rem;max-width:56rem}
.cat-filter select{min-height:44px}
.cat-filter select:disabled{opacity:.45}
.cat-filter .cat-count{margin:0}
@media(min-width:760px){.cat-filter{grid-template-columns:1fr 1fr 1fr;align-items:baseline}}
@media(min-width:560px){.swatches{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:860px){.swatches{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1200px){.swatches{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* SITE: /home/ studio reel (Unit HOME-STUDIO), ported from materialization ssp-video at c8125e1.
   Source values as literals (lengths, durations); colours and fonts via :root tokens only:
   paper-deep -> --paper-deep, bronze -> --accent, muted -> --ink-dim, rule -> --line-l,
   Newsreader -> --serif (Fraunces 300). Fail-visible: frame 1 and the title list render without
   js/studio-reel.js; frames 2 to 15, the caption and the chapter nav enter only under .is-ready. */
.sreel{display:grid;gap:40px;align-items:center;width:100%}
/* text track fills; gap = the split-section .grid gap (:88) (Unit CLOSE-1002) */
@media(min-width:860px){.sreel{grid-template-columns:minmax(0,1fr) minmax(0,640px);justify-content:space-between;gap:clamp(1.4rem,3.5vw,3rem)}}
.sreel-reel{width:100%}
@media(min-width:860px){.sreel-reel{max-width:640px;justify-self:end}}
.sreel-stage{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--paper-deep);container-type:inline-size}
.sreel-frame{position:absolute;inset:0}
.sreel:not(.is-ready) .sreel-frame:not(:first-child),
.sreel:not(.is-ready) .sreel-caption,
.sreel:not(.is-ready) .sreel-chapters,
.sreel.is-ready .sreel-titles{display:none}
.sreel.is-ready .sreel-frame{opacity:0;visibility:hidden;transition:opacity 900ms ease,visibility 0s linear 900ms}
.sreel.is-ready .sreel-frame.is-active{opacity:1;visibility:visible;transition:opacity 900ms ease,visibility 0s}
.sreel-frame > img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 50%;will-change:transform}

/* Text frames */
.sreel-tframe{display:flex;flex-direction:column;justify-content:center;padding:8cqi 8.5cqi;background:var(--paper-deep);color:var(--ink)}
.sreel-tframe .k{font-size:clamp(10px,1.9cqi,12px);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:4.5cqi}
.sreel-tframe h3{font-family:var(--serif);font-weight:300;font-size:clamp(22px,5.4cqi,34px);line-height:1.1;margin-bottom:4cqi;max-width:none}
.sreel-tlist{list-style:none;display:grid;gap:2.6cqi}
.sreel-tlist li{display:grid;grid-template-columns:auto 1fr;column-gap:3cqi;align-items:baseline;border-top:1px solid var(--line-l);padding-top:2.2cqi}
.sreel-tlist .n{font-size:clamp(10px,1.8cqi,12px);letter-spacing:.12em;color:var(--ink-dim);min-width:3.2cqi}
.sreel-tlist .name{font-family:var(--serif);font-weight:300;font-size:clamp(17px,3.9cqi,25px);line-height:1.15}
.sreel-tlist .line{grid-column:2;font-size:clamp(12px,2.3cqi,14.5px);color:var(--ink-dim);line-height:1.45;margin-top:.6cqi}
.sreel-tframe .close{font-size:clamp(12px,2.4cqi,15px);line-height:1.5;margin-top:4cqi;max-width:44ch}
.sreel-method{padding:6cqi 8.5cqi}
.sreel-method h3{margin-bottom:3cqi}
.sreel-method .sreel-tlist{gap:1.7cqi}
.sreel-method .sreel-tlist li{padding-top:1.5cqi}
.sreel-method .close{margin-top:3cqi}
@container (max-width:470px){
  .sreel-tlist .line{display:none}
  .sreel-tlist{gap:1.6cqi}
  .sreel-tframe{padding:7cqi}
}
/* Stagger, source --i and --step as :nth-child() rules (no inline style) */
.sreel-what{--step:520ms} .sreel-method{--step:560ms}
.sreel-tframe .sreel-tlist li:nth-child(1){--i:1} .sreel-tframe .sreel-tlist li:nth-child(2){--i:2}
.sreel-tframe .sreel-tlist li:nth-child(3){--i:3} .sreel-tframe .sreel-tlist li:nth-child(4){--i:4}
.sreel-tframe .sreel-tlist li:nth-child(5){--i:5} .sreel-tframe .sreel-tlist li:nth-child(6){--i:6}
.sreel-method .close{--i:6}
.sreel.is-ready .stg{opacity:0;transform:translateY(8px);transition:opacity .7s ease,transform .7s ease;transition-delay:0s}
.sreel.is-ready .sreel-frame.is-active .stg{opacity:1;transform:none;transition-delay:calc(var(--i,0) * var(--step,700ms))}

/* Grid frame */
.sreel-gframe{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:1.2cqi;padding:1.2cqi;background:var(--paper)}
.sreel-gframe figure{position:relative;overflow:hidden}
.sreel-gframe img{width:100%;height:100%;object-fit:cover;display:block}
.sreel-gframe figcaption{position:absolute;left:0;bottom:0;background:var(--paper);color:var(--ink);font-size:clamp(9px,1.7cqi,11px);letter-spacing:.14em;text-transform:uppercase;padding:.8cqi 1.4cqi}
@container (max-width:470px){.sreel-gframe figcaption{display:none}}

/* Scene titles, the no-script record of every caption (hidden under .is-ready) */
.sreel-titles{margin-top:20px;max-width:none}
.sreel-titles li{flex-wrap:wrap;gap:.2em .9em}
.sreel-titles .t{font-family:var(--serif);font-weight:300}
.sreel-titles .l,.sreel-titles .c{font-size:14.5px;color:var(--ink-dim);line-height:1.55}
.sreel-titles .c{font-style:italic}

/* Caption */
.sreel-caption{min-height:92px;padding-top:20px}
.sreel-caption .ck{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.sreel-caption .ck b{color:var(--accent);font-weight:500}
.sreel-caption .ct{font-family:var(--serif);font-weight:300;font-size:22px;line-height:1.25;margin-top:8px}
.sreel-caption .cl{font-size:14.5px;color:var(--ink-dim);line-height:1.55;margin-top:4px;max-width:60ch}
.sreel-caption .credit{font-size:11.5px;color:var(--ink-dim);margin-top:6px;font-style:italic}
.sreel-caption > *{transition:opacity .45s ease}
.sreel-caption.swap > *{opacity:0}

/* Chapter nav */
.sreel-chapters{display:flex;align-items:stretch;gap:6px;margin-top:14px}
.sreel-chapters ol{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;flex:1}
.sreel-chap{all:unset;cursor:pointer;display:block;width:100%;padding:10px 0 4px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sreel-chap .bar{display:block;height:1px;background:var(--line-l);margin-bottom:9px;position:relative;overflow:hidden}
.sreel-chap .bar i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.sreel-chap[aria-current="true"]{color:var(--ink)}
.sreel-chap:focus-visible,.sreel-toggle:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.sreel-chap .num{display:none}
.sreel-toggle{all:unset;cursor:pointer;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);padding:20px 0 4px 10px}
.sreel-toggle:hover{color:var(--ink)}
.sreel-toggle[hidden]{display:none}
@media(max-width:859px){
  .sreel-chap .full{display:none} .sreel-chap .num{display:inline}
  .sreel-chap{text-align:left}
  .sreel-caption{min-height:104px}
}
@media(prefers-reduced-motion:reduce){
  .sreel.is-ready .sreel-frame,.sreel.is-ready .sreel-frame.is-active{transition:none}
  .sreel.is-ready .stg{transition:none;opacity:1;transform:none}
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* home catalogue teaser */
.teaser{align-self:stretch;text-align:left;margin-top:clamp(3.5rem,8vw,6rem)}
.teaser-hero{margin:0 calc(var(--pad) * -1);overflow:hidden;background:var(--dark);aspect-ratio:4/5}
.teaser-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:52% 48%}
@media (min-width:860px){.teaser-hero{aspect-ratio:auto;height:clamp(46vw,88svh,56.25vw)}.teaser-hero img{object-position:50% 45%}}
.reveal.reveal-uncover{opacity:1;transform:none;clip-path:inset(10% 6% 10% 6%);transition:clip-path 1.1s cubic-bezier(.22,1,.36,1)}
.reveal-uncover img{transform:scale(1.06);transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.reveal.reveal-uncover.is-in{clip-path:inset(0)}
.reveal-uncover.is-in img{transform:none}
.no-js .reveal.reveal-uncover{clip-path:none}
.no-js .reveal-uncover img{transform:none}
.teaser-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:clamp(1.4rem,3.5vw,3rem)}
@media (min-width:1024px){.teaser-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--dark)}
.tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1),filter .7s cubic-bezier(.22,1,.36,1)}
@media (hover:hover) and (pointer:fine){.tile:hover img{transform:scale(1.05);filter:brightness(1.1)}}
.teaser-close{display:flex;flex-direction:column;align-items:stretch;gap:1.75rem;margin-top:clamp(3rem,4.5vw,4rem)}
.teaser-close .lede{margin:0}
@media (min-width:860px){.teaser-close{flex-direction:row;align-items:center;justify-content:space-between;gap:3rem}}
.btn-solid{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 2.75rem;background:var(--ink);color:var(--paper);font-size:.84rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .2s ease}
.btn-solid:hover{background:color-mix(in srgb,var(--ink) 85%,var(--paper));color:var(--paper)}
.btn-solid:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (min-width:860px){.btn-solid{min-height:60px;flex:none}}

/* SITE: /studio/ When to call close, scoped CTA row (Unit STUDIO-CTA). The global .btn-solid
   and .cta rules are unchanged and shared with other pages; this only arranges the two CTAs
   inside .close-actions and caps the close body at 60ch. The section is a column flex with
   align-items:stretch, which had stretched each CTA to the full container width. */
p.body.close-copy{max-width:60ch}
.close-actions{margin-top:2.5rem}
.close-actions .btn-solid{display:flex;width:100%}
@media(min-width:760px){
  .close-actions{display:flex;align-items:center;gap:2rem}
  .close-actions .btn-solid{display:inline-flex;width:auto;flex:none}
  .close-actions .cta{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.reveal.reveal-uncover{clip-path:none;transition:none}.reveal-uncover img{transform:none;transition:none}.tile img{transition:none}.tile:hover img{transform:none;filter:none}}

/* finishes reference viewer */
.sw-open{display:block;color:inherit;text-decoration:none}
.sw-open:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sw-viewer{margin:auto;inset:0;inset-inline-end:calc(100% - 100vw);border:1px solid var(--line-d);padding:0;background:var(--ink);color:var(--dark-text);width:min(1040px,92vw);max-height:92svh;overflow:auto}
.sw-viewer::backdrop{background:rgba(20,18,16,.84)}
.swv-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;padding:clamp(1rem,3vw,2.5rem)}
@media (min-width:860px){.swv-panel{grid-template-columns:minmax(0,1fr) 17rem;align-items:center;gap:clamp(1.5rem,3vw,2.5rem)}}
.swv-media{margin:0;display:flex;justify-content:center}
.swv-img{display:block;max-width:min(640px,100%);max-height:72svh;width:auto;height:auto}
.swv-name{font-family:var(--serif);font-weight:300;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.2;margin:0 0 .6rem}
.swv-cat{margin:0;color:var(--dark-dim);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.swv-nav{display:flex;gap:1rem;margin-top:2rem}
.swv-close,.swv-prev,.swv-next{min-height:44px;min-width:44px;padding:0 1rem;background:none;border:1px solid var(--line-d);color:var(--dark-text);font:inherit;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;cursor:pointer}
.swv-close:hover,.swv-prev:hover,.swv-next:hover{border-color:var(--accent)}
.swv-close:focus-visible,.swv-prev:focus-visible,.swv-next:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.swv-close{position:absolute;top:clamp(.5rem,1.5vw,1rem);right:clamp(.5rem,1.5vw,1rem)}
.sw-viewer[open]{animation:swv-in .2s cubic-bezier(.22,1,.36,1)}
@keyframes swv-in{from{opacity:0}to{opacity:1}}
.sw-viewer[open] .swv-img{animation:swv-img-in .2s cubic-bezier(.22,1,.36,1)}
@keyframes swv-img-in{from{transform:scale(.97)}to{transform:none}}
html:has(.sw-viewer[open]){overflow:hidden;scrollbar-gutter:stable}
@media (prefers-reduced-motion:reduce){.sw-viewer[open],.sw-viewer[open] .swv-img{animation:none}}

/* MOBILE-AUDIT FIX-1: touch targets (visual unchanged), field height, reel text floor, footer gap */
/* boxless controls get a 44x44 inset tap area; the visible underline/text is unchanged */
.contact-form .form-submit,.cta,.sreel-toggle{position:relative}
.contact-form .form-submit::before,.cta::before,.sreel-toggle::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;min-width:44px;min-height:44px}
/* contact fields: min-height 44 (visible, accepted); hidden inputs untouched */
.contact-form input:not([type=hidden]),.contact-form select,.contact-form textarea{min-height:44px}
/* reel reading text floor 13px (was clamp min 12) */
.sreel-tlist .line{font-size:clamp(13px,2.3cqi,14.5px)}
.sreel-tframe .close{font-size:clamp(13px,2.4cqi,15px)}
/* footer links: neighbour gap >= 8px (padding-block on the link rows) */
.site-footer li{padding-block:6px}
/* GA4-1 consent banner. Fixed overlay, no layout shift. Both buttons share one style (equal prominence). */
.consent{position:fixed;z-index:1000;left:16px;right:16px;bottom:16px;max-width:34rem;margin-left:auto;padding:1rem 1.125rem;display:flex;flex-direction:column;gap:.75rem;background:var(--dark);color:var(--dark-text);border:1px solid var(--line-d)}
.consent-text{margin:0;font-size:.875rem;line-height:1.5}
.consent-text .ilink{color:inherit}
.consent-actions{display:flex;gap:.625rem;justify-content:flex-end}
.consent-btn{font:inherit;font-size:.8125rem;padding:.6em 1.2em;min-width:7.5rem;background:transparent;color:inherit;border:1px solid currentColor;cursor:pointer}
.consent-btn:hover{background:rgba(234,229,218,.08)}
.consent-btn:focus-visible,.consent-open:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.consent-open{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}

/* ===== PORTFOLIO (Unit PORTFOLIO-A): Sheet A plates, viewer ===== */
section.portfolio{min-height:auto;justify-content:flex-start;overflow:visible}
.sheets{display:flex;flex-direction:column;gap:clamp(5rem,12vw,10rem);margin-top:clamp(3rem,8vw,6rem)}
.sheet{display:grid;grid-template-columns:repeat(6,1fr);column-gap:clamp(.75rem,2vw,1.5rem);row-gap:clamp(2rem,6vw,4rem);align-items:start}
.plate{margin:0;overflow:hidden}
.plate a{display:block;height:100%;cursor:zoom-in}
.plate img{display:block;width:100%;height:100%;object-fit:cover}
.plate a:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.s1,.s4{aspect-ratio:4/3}
.s2,.s3{aspect-ratio:3/4}
.s5{aspect-ratio:1/1}
.s1{grid-column:1/7;grid-row:1}
.s2{grid-column:3/7;grid-row:2}
.s3{grid-column:1/5;grid-row:3}
.s4{grid-column:1/7;grid-row:4}
.s5{grid-column:4/7;grid-row:5}
.mirror .s2{grid-column:1/5}
.mirror .s3{grid-column:3/7}
.mirror .s5{grid-column:1/4}
@media(min-width:860px){
  .sheet{grid-template-columns:repeat(12,1fr)}
  .s1{grid-column:1/9;grid-row:1}
  .s2{grid-column:10/13;grid-row:1;margin-top:clamp(4rem,10vw,9rem)}
  .s3{grid-column:2/6;grid-row:2}
  .s4{grid-column:7/13;grid-row:2;margin-top:clamp(3rem,7vw,6rem)}
  .s5{grid-column:9/12;grid-row:3}
  .mirror .s1{grid-column:5/13}
  .mirror .s2{grid-column:1/4}
  .mirror .s3{grid-column:8/12}
  .mirror .s4{grid-column:1/7}
  .mirror .s5{grid-column:2/5}
}
.sheets.armed .sheet:not(:first-child) .plate{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.22,1,.36,1)}
.sheets.armed .sheet:not(:first-child) .plate img{transform:scale(1.06);transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.sheets.armed .sheet:not(:first-child) .plate.is-in,.sheets.armed .plate:target{clip-path:inset(0)}
.sheets.armed .sheet:not(:first-child) .plate.is-in img,.sheets.armed .plate:target img{transform:none}
.sheets.armed .s2{transition-delay:.06s}.sheets.armed .s3{transition-delay:.12s}
.sheets.armed .s4{transition-delay:.18s}.sheets.armed .s5{transition-delay:.24s}
.plate-view{border:0;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:var(--dark);color:var(--dark-text)}
.plate-view::backdrop{background:var(--dark)}
.plate-view[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;animation:pv-in .24s cubic-bezier(.25,.1,0,1)}
@keyframes pv-in{from{opacity:0}}
.pv-bar,.pv-nav{display:flex;justify-content:space-between;align-items:center;padding:.75rem var(--pad);font-family:var(--sans);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.pv-stage{display:flex;align-items:center;justify-content:center;padding:0 var(--pad);min-height:0;height:100%;touch-action:pan-y}
.pv-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none}
.plate-view button{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;min-width:44px;min-height:44px;cursor:pointer}
.plate-view button:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
html.pv-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .sheets.armed .plate{clip-path:none!important;transition:none!important}
  .sheets.armed .plate img{transform:none!important;transition:none!important}
  .plate-view[open]{animation:none}
}

/* ===== PORTFOLIO sheet stepper (Unit PORTFOLIO-STEPS) ===== */
.sheet{scroll-margin-top:calc(44px + 2.4rem)}
.sheet-steps{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));
  z-index:19;display:flex;flex-direction:column;background:var(--dark);color:var(--dark-text);
  font-family:var(--sans);transition:opacity .24s cubic-bezier(.25,.1,0,1)}
.sheet-steps.is-off{opacity:0;pointer-events:none}
.sheet-steps button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:none;border:0;padding:0;color:inherit;cursor:pointer;transition:color .12s ease,opacity .12s ease}
.sheet-steps button:disabled{opacity:.3;cursor:default}
.sheet-steps button:focus-visible{outline:1px solid var(--accent);outline-offset:-4px}
@media (hover:hover) and (pointer:fine){.sheet-steps button:not(:disabled):hover{color:var(--accent)}}
.sheet-steps svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.25}
.ss-count{font-size:.68rem;letter-spacing:.08em;text-align:center;padding:.3rem 0;
  border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
@media (prefers-reduced-motion:reduce){.sheet-steps{transition:none}}

/* HOME: portfolio band inside the dark projects section (Unit HOME-PORTFOLIO-BAND) */
.dark .teaser-close .lede{color:var(--dark-text)}
.dark .btn-solid{background:var(--paper);color:var(--ink)}
.dark .btn-solid:hover{background:color-mix(in srgb,var(--paper) 85%,var(--ink));color:var(--ink)}
/* Unit MANUFACTURING-MAP: production sites, static. Landmass tone sits below --line-d (.16). */
.sites-map{position:relative;margin-top:1.6rem;width:100%}
@media(min-width:860px){.sites-map{max-width:var(--measure)}}
.sites-map svg{display:block;width:100%;height:auto}
.sites-map path{fill:rgba(234,229,218,.10);stroke:rgba(234,229,218,.10);stroke-width:.6;stroke-linejoin:round}
.sites-pins{list-style:none;position:absolute;inset:0;pointer-events:none}
.sites-pins .pt{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.sites-pins i{position:absolute;width:7px;height:7px;left:-3.5px;top:-3.5px;background:var(--accent)}
.sites-pins b{position:absolute;white-space:nowrap;font-weight:500;font-size:.7rem;letter-spacing:.06em;line-height:1;color:var(--dark-text);display:flex;gap:.5em}
.sites-pins b span:first-child{color:var(--accent);font-variant-numeric:tabular-nums}
.sites-pins .ne b{left:9px;bottom:5px} .sites-pins .se b{left:9px;top:5px}
.sites-pins .nw b{right:9px;bottom:5px;flex-direction:row-reverse}
@media(max-width:639px){.sites-pins b span:last-child{display:none}.sites-pins b{font-size:.62rem}}
/* Unit FOOTER-RESOURCES: caps set in CSS, not in markup (screen readers) */
.site-footer .foot-caps{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem}