@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url('../assets/fonts/hanken-grotesk-300.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:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/hanken-grotesk-400.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:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/hanken-grotesk-500.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:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/hanken-grotesk-600.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:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/libre-caslon-display-400.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:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;src:url('../assets/fonts/libre-caslon-text-400.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;}

/* Tailor Booth design tokens, v2 "Atelier".
   Velvet green rooms for film and statements, boucle ivory for the workroom, rose and raspberry for the one accent.
   The brand gold survives only in the wordmark artwork. */
:root {
  --green: #14231C;
  --green-2: #1B2F26;
  --green-deep: #0E1A14;
  --ivory: #F3EFE7;
  --ivory-2: #EAE5DB;
  --ivory-3: #E1DBCF;
  --plaster: #E8D8D3;
  --plaster-2: #DFCBC6;
  --ink: #1B211D;
  --ink-2: #464C47;
  --ink-3: #737A74;
  --bone: #F1ECE2;
  --bone-2: #CFCABF;
  --bone-3: #9E9A8F;
  --rose: #D9A79F;
  --rose-2: #E8C4BE;
  --raspberry: #8E3B52;
  --raspberry-2: #A44A63;
  --brass: #B08D57;
  --ok: #3E6B45;
  --warn: #9A5B12;
  --err: #A8321F;

  --font-display: "Libre Caslon Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-italic: "Libre Caslon Text", "Libre Caslon Display", Georgia, serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --ease-snap: cubic-bezier(.2, .9, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .25s;
  --dur: .5s;
  --dur-slow: .9s;

  --nav-h: 76px;
  --max: 1640px;
  --inner: 1180px;
  --prose: 720px;
  --inset: clamp(20px, 5vw, 96px);
  --gutter: clamp(28px, 4vw, 64px);
  --radius: 0;

  /* type scale */
  --t-11: .6875rem;
  --t-12: .75rem;
  --t-14: .875rem;
  --t-15: .9375rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-22: clamp(1.15rem, 1.6vw, 1.375rem);
  --t-28: clamp(1.5rem, 2.2vw, 1.8rem);
  --t-36: clamp(1.9rem, 3vw, 2.4rem);
  --t-48: clamp(2.2rem, 4.2vw, 3.3rem);
  --t-64: clamp(2.7rem, 5.6vw, 4.6rem);
  --t-88: clamp(3rem, 7.6vw, 6.4rem);
}

/* Rooms: every section declares the world it lives in. */
.room-green, .room-dark {
  --bg: var(--green);
  --bg-2: var(--green-2);
  --fg: var(--bone);
  --fg-2: var(--bone-2);
  --fg-3: var(--bone-3);
  --hair: rgba(241, 236, 226, .14);
  --hair-strong: rgba(241, 236, 226, .34);
  --accent: var(--rose);
  --accent-text: var(--rose);
  --btn-border: rgba(241, 236, 226, .5);
  --btn-fill: var(--bone);
  --btn-fill-text: var(--green);
  --scrim: 14, 26, 20;
  background: var(--bg);
  color: var(--fg);
  color-scheme: dark;
}
.room-deep { --bg: var(--green-deep); background: var(--green-deep); }
.room-ivory, .room-light, .room-paper {
  --bg: var(--ivory);
  --bg-2: var(--ivory-2);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --hair: rgba(27, 33, 29, .12);
  --hair-strong: rgba(27, 33, 29, .36);
  --accent: var(--raspberry);
  --accent-text: var(--raspberry);
  --btn-border: rgba(27, 33, 29, .5);
  --btn-fill: var(--ink);
  --btn-fill-text: var(--ivory);
  --scrim: 243, 239, 231;
  background: var(--bg);
  color: var(--fg);
  color-scheme: light;
}
.room-paper { --bg: var(--ivory-2); --bg-2: var(--ivory-3); background: var(--ivory-2); }
.room-paper { --bg: var(--ivory-2); --bg-2: var(--ivory-3); background: var(--bg); }
.room-rose {
  --bg: var(--plaster);
  --bg-2: var(--plaster-2);
  --fg: #2B1E22;
  --fg-2: #5A474C;
  --fg-3: #7E6B70;
  --hair: rgba(43, 30, 34, .14);
  --hair-strong: rgba(43, 30, 34, .4);
  --accent: var(--raspberry);
  --accent-text: var(--raspberry);
  --btn-border: rgba(43, 30, 34, .5);
  --btn-fill: #2B1E22;
  --btn-fill-text: var(--ivory);
  --scrim: 232, 216, 211;
  background: var(--bg);
  color: var(--fg);
  color-scheme: light;
}

/* Base: reset, type, layout primitives, buttons, reveals, media helpers. v2 Atelier. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--green);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.is-locked { overflow: hidden; }
img, video, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--raspberry); color: var(--ivory); }
:focus-visible { outline: 2px solid var(--accent, var(--rose)); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 1000; background: var(--raspberry); color: var(--ivory); padding: 10px 14px; font-size: var(--t-12); letter-spacing: .14em; text-transform: uppercase; }
.skip-link:focus { top: 16px; }

/* Type */
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; margin: 0; letter-spacing: -.008em; line-height: 1.06; text-wrap: balance; }
h1 { font-size: var(--t-88); line-height: 1.02; letter-spacing: -.016em; }
h2 { font-size: var(--t-64); line-height: 1.04; letter-spacing: -.012em; }
h3 { font-size: var(--t-28); line-height: 1.16; letter-spacing: -.004em; }
h4 { font-family: var(--font-body); font-weight: 500; font-size: var(--t-12); letter-spacing: .18em; text-transform: uppercase; margin: 0; line-height: 1.3; }
h1 em, h2 em, h3 em, .display em, .statement em { font-family: var(--font-italic); font-style: italic; font-weight: 400; color: var(--accent-text); letter-spacing: 0; }
p { margin: 0; }
p + p { margin-top: 1em; }
.lede { font-size: var(--t-22); line-height: 1.45; font-weight: 300; }
.body-2 { color: var(--fg-2); }
.small { font-size: var(--t-15); }
.measure { max-width: 62ch; }
.measure-narrow { max-width: 46ch; }
strong { font-weight: 600; }
.statement { font-family: var(--font-display); font-size: var(--t-48); line-height: 1.12; letter-spacing: -.008em; text-wrap: balance; }
.eyebrow, .mono, .label { font-family: var(--font-body); font-size: var(--t-11); letter-spacing: .22em; text-transform: uppercase; font-weight: 500; font-variant-numeric: tabular-nums; }
.eyebrow { color: var(--accent-text); }
.eyebrow--muted { color: var(--fg-3); }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.tbd { color: var(--fg-3); border-bottom: 1px dotted var(--hair-strong); cursor: help; }

/* Layout */
.wrap { width: min(100% - 2 * var(--inset), var(--max)); margin-inline: auto; }
.inner { width: min(100% - 2 * var(--inset), var(--inner)); margin-inline: auto; }
.section { padding-block: clamp(80px, 9vw, 150px); position: relative; }
.section--tight { padding-block: clamp(56px, 6vw, 96px); }
.section--flush { padding-block: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.stack > * + * { margin-top: var(--stack, 1rem); }
.section-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 72px); }
.section-head .lede { color: var(--fg-2); max-width: 58ch; }
.section-head--split { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--gutter); }
.section-head--split .lede { margin: 0; }
@media (max-width: 900px) { .section-head--split { grid-template-columns: 1fr; } }
.rule { height: 1px; background: var(--hair); border: 0; margin: 0; }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .04; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px; }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 26px; border: 1px solid var(--btn-border); border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 500; font-size: var(--t-12); letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg); background: transparent; line-height: 1; white-space: nowrap;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  position: relative; isolation: isolate;
}
.btn .arr { display: inline-block; width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.btn:hover, .btn:focus-visible { background: var(--btn-fill); color: var(--btn-fill-text); border-color: var(--btn-fill); }
.btn:hover .arr { transform: translateX(4px); }
.btn--primary, .btn--gold, .btn--solid { background: var(--raspberry); border-color: var(--raspberry); color: var(--ivory); }
.btn--primary:hover, .btn--gold:hover, .btn--solid:hover, .btn--primary:focus-visible { background: var(--raspberry-2); border-color: var(--raspberry-2); color: var(--ivory); }
.btn--sm { padding: 12px 18px; font-size: var(--t-11); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 500; font-size: var(--t-12); letter-spacing: .2em; text-transform: uppercase; color: var(--fg);
  padding-bottom: 5px; position: relative;
}
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(.35); transform-origin: left; transition: transform var(--dur) var(--ease-out); }
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.link .arr { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.link:hover .arr { transform: translateX(4px); }
.actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.chip { border: 1px solid var(--hair-strong); padding: 12px 16px; font-size: var(--t-14); letter-spacing: .04em; color: var(--fg); transition: background .3s, color .3s, border-color .3s; }
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"], .chip.is-on { background: var(--btn-fill); color: var(--btn-fill-text); border-color: var(--btn-fill); }

/* Reveals: visible at rest, animated only when motion is allowed */
.reveal { opacity: 1; transform: none; }
html.motion .reveal { opacity: 0; transform: translateY(16px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
html.motion .reveal.in { opacity: 1; transform: none; }
html.motion .reveal[data-delay="1"] { transition-delay: .1s; }
html.motion .reveal[data-delay="2"] { transition-delay: .2s; }
html.motion .reveal[data-delay="3"] { transition-delay: .3s; }
/* Split lines get a padded mask so descenders never clip */
.mask-line { overflow: hidden; display: block; padding: .12em 0 .2em; margin: -.12em 0 -.2em; }
.mask-line > span { display: block; }
html.a11y-nomotion .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Media helpers */
.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame { position: relative; overflow: hidden; aspect-ratio: var(--ar, 3 / 2); background: var(--bg-2); }
.frame > img, .frame > video, .frame > picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame > picture > img { width: 100%; height: 100%; object-fit: cover; }
.frame--hover img, .frame--hover video { transition: transform 1.2s var(--ease-out); }
.frame--hover:hover img, .frame--hover:hover video { transform: scale(1.03); }
.ph { background: linear-gradient(160deg, var(--bg-2), var(--bg)); position: relative; overflow: hidden; }
.ph .ph-tick, .ph::before, .ph::after { display: none; }
.ph .ph-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); opacity: .7; }
html.motion .media-reveal { opacity: 0; transition: opacity 1.4s var(--ease-out); }
html.motion .media-reveal.in { opacity: 1; }
html.motion .media-reveal > img, html.motion .media-reveal > video, html.motion .media-reveal > picture { transform: scale(1.04); transition: transform 2s var(--ease-out); }
html.motion .media-reveal.in > img, html.motion .media-reveal.in > video, html.motion .media-reveal.in > picture { transform: none; }
.frame--hover.media-reveal.in img, .frame--hover.media-reveal.in video { transition: transform 1.2s var(--ease-out); }
.frame--hover.media-reveal.in:hover img, .frame--hover.media-reveal.in:hover video { transform: scale(1.03); }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .35s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in .55s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
.nav { view-transition-name: nav; }
::view-transition-old(nav), ::view-transition-new(nav) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html.motion .reveal, html.motion .media-reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print { .nav, .drawer, .consent, .a11y, .footer { display: none !important; } }

/* Chrome: nav, mobile menu, footer, quote drawer, consent, accessibility widget. v2 Atelier. */

/* Nav */
.nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 700; display: flex; align-items: center; transition: transform .55s var(--ease-out), background .4s; }
.nav::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(14, 26, 20, .6), rgba(14, 26, 20, 0)); pointer-events: none; transition: opacity .4s; }
.nav.is-solid { background: rgba(14, 26, 20, .86); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
.nav.is-solid::before { opacity: 0; }
.nav.is-hidden { transform: translateY(-100%); }
.nav__in { position: relative; width: min(100% - 2 * clamp(20px, 3vw, 44px), 1720px); margin-inline: auto; display: flex; align-items: center; gap: 36px; min-width: 0; }
.nav__brand { display: inline-flex; align-items: center; color: var(--bone); padding: 8px 0; margin: -8px 0; }
.nav__brand img { width: auto; height: 30px; }
.nav__brand .word { display: none; }
.nav__links { display: flex; gap: 34px; margin-left: auto; }
.nav__links a { font-size: var(--t-11); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-2); position: relative; padding: 10px 0; transition: color .3s; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--bone); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { margin-left: 4px; }
.nav__burger { display: none; margin-left: auto; width: 44px; height: 44px; position: relative; }
.nav__burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--bone); transition: transform .4s var(--ease-out), opacity .3s; }
.nav__burger span:nth-child(1) { top: 15px; } .nav__burger span:nth-child(2) { top: 21px; } .nav__burger span:nth-child(3) { top: 27px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
}
@media (max-width: 900px) { .nav__brand img { height: 26px; } }
.menu { position: fixed; inset: 0; z-index: 690; background: var(--green-deep); color: var(--bone); padding: calc(var(--nav-h) + 16px) clamp(20px, 6vw, 48px) 36px; display: none; flex-direction: column; overflow: auto; }
.menu.is-open { display: flex; }
.menu__links { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.menu__links a { display: grid; grid-template-columns: 40px 1fr; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--hair); font-family: var(--font-display); font-size: clamp(1.9rem, 7vw, 2.8rem); letter-spacing: -.01em; }
.menu__links a .n { font-family: var(--font-body); font-size: var(--t-11); letter-spacing: .18em; color: var(--rose); }
.menu__foot { margin-top: auto; padding-top: 28px; display: grid; gap: 12px; color: var(--bone-2); font-size: var(--t-14); }
.menu__foot a { padding-block: 6px; }
.menu__foot a.tel { font-family: var(--font-display); font-size: 1.7rem; color: var(--bone); }

/* Footer */
.footer { padding: clamp(72px, 8vw, 120px) 0 28px; }
.footer__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--gutter); align-items: start; }
.footer__cell { display: grid; gap: 12px; align-content: start; min-width: 0; }
.footer__cell .lab { font-size: var(--t-11); letter-spacing: .22em; text-transform: uppercase; color: var(--rose); font-weight: 500; }
.footer__cell a { color: var(--bone); padding-block: 4px; }
.footer__cell a:hover { color: var(--rose); }
.footer__cell ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer__cell address { font-style: normal; line-height: 1.5; }
.footer__brand img { width: 180px; }
.footer__brand p { color: var(--bone-2); max-width: 32ch; font-family: var(--font-display); font-size: var(--t-22); line-height: 1.3; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; margin-top: clamp(48px, 6vw, 80px); padding-top: 22px; border-top: 1px solid var(--hair); font-size: var(--t-11); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-3); }
.footer__legal a { padding-block: 6px; }
.footer__legal a:hover { color: var(--rose); }
@media (max-width: 980px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; gap: 32px; } }

/* Quote drawer */
.drawer { position: fixed; inset: 0; z-index: 800; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(8, 14, 10, .62); opacity: 0; transition: opacity .5s var(--ease-out); }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 540px); background: var(--green-deep); color: var(--bone); transform: translateX(100%); transition: transform .65s var(--ease-out); display: flex; flex-direction: column; border-left: 1px solid var(--hair); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; border-bottom: 1px solid var(--hair); }
.drawer__close { width: 44px; height: 44px; display: grid; place-items: center; color: var(--bone-2); }
.drawer__close:hover { color: var(--rose); }
.drawer__body { padding: 28px; overflow: auto; flex: 1; display: grid; gap: 22px; align-content: start; }
.drawer__progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.drawer__progress span { height: 2px; background: var(--hair); }
.drawer__progress span.on { background: var(--rose); }
.drawer__step { display: none; gap: 18px; }
.drawer__step.is-active { display: grid; }
.drawer__step h3 { font-size: var(--t-36); }
.drawer__step .help { color: var(--bone-2); font-size: var(--t-15); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.field { display: grid; gap: 8px; }
.field label { font-size: var(--t-11); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-2); font-weight: 500; }
.field input, .field select, .field textarea { background: transparent; border: 1px solid var(--hair-strong); border-radius: var(--radius); padding: 13px 14px; color: var(--fg); width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--accent); }
.field select option { color: var(--ink); }
.field .err { color: #E7A9A0; font-size: var(--t-12); display: none; }
.field.is-invalid input { border-color: #E7A9A0; }
.field.is-invalid .err { display: block; }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .fields-2 { grid-template-columns: 1fr; } }
.dropzone { border: 1px dashed var(--hair-strong); padding: 26px 18px; text-align: center; color: var(--fg-2); font-size: var(--t-14); display: grid; gap: 8px; cursor: pointer; transition: border-color .3s, background .3s; }
.dropzone.is-over, .dropzone:hover { border-color: var(--accent); background: rgba(217, 167, 159, .06); }
.dropzone input { display: none; }
.dropzone__list { display: grid; gap: 6px; font-size: var(--t-12); letter-spacing: .06em; color: var(--fg); text-align: left; }
.drawer__foot { padding: 20px 28px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.drawer__spec { border: 1px solid var(--hair); padding: 14px; font-size: var(--t-12); letter-spacing: .06em; color: var(--bone-2); display: grid; gap: 4px; max-height: 160px; overflow: auto; }
.drawer__spec b { color: var(--bone); font-weight: 500; }
.drawer__done { display: none; gap: 16px; }
.drawer.is-done .drawer__done { display: grid; }
.drawer.is-done .drawer__step, .drawer.is-done .drawer__foot, .drawer.is-done .drawer__progress { display: none; }
.room-ivory .field input, .room-ivory .field select, .room-ivory .field textarea, .room-light .field input, .room-light .field select, .room-light .field textarea { color: var(--ink); border-color: var(--hair-strong); }
.room-ivory .field label, .room-light .field label { color: var(--ink-3); }
.room-ivory .dropzone, .room-light .dropzone { color: var(--ink-2); }

/* Consent bar */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 750; display: none; grid-template-columns: 1fr auto; gap: 8px 32px; align-items: center; padding: 14px clamp(20px, 6vw, 100px); background: rgba(14, 26, 20, .94); color: var(--bone); border-top: 1px solid var(--hair); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.consent.is-open { display: grid; }
.consent > strong { display: none; }
.consent p { margin: 0; font-size: 13px; color: var(--bone-2); max-width: 78ch; }
.consent .actions { grid-column: 2; grid-row: 1; gap: 10px 18px; }
.consent__manage { grid-column: 1 / -1; display: none; gap: 18px; align-items: center; }
.consent.is-manage .consent__manage { display: flex; flex-wrap: wrap; }
.consent label { display: flex; gap: 10px; align-items: center; font-size: var(--t-14); }
@media (max-width: 760px) {
  .consent { grid-template-columns: 1fr; padding: 12px 16px 12px 16px; left: 12px; right: 12px; bottom: 12px; border: 1px solid var(--hair); }
  .consent p { font-size: 12.5px; line-height: 1.45; }
  .consent .actions { grid-column: 1; grid-row: auto; justify-content: flex-end; padding-left: 56px; }
  .consent .btn--sm { padding: 10px 14px; }
}

/* Accessibility widget: blue button bottom-left on every page */
.a11y { position: fixed; left: 16px; bottom: 16px; z-index: 760; }
.a11y__btn { width: 50px; height: 50px; border-radius: 50%; background: #1F6FEB; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.a11y__btn:hover { background: #2B7BFF; }
.a11y__panel { position: absolute; left: 0; bottom: 62px; width: 280px; background: var(--green-deep); color: var(--bone); border: 1px solid var(--hair-strong); padding: 16px; display: none; gap: 10px; }
.a11y.is-open .a11y__panel { display: grid; }
.a11y__panel h4 { font-size: var(--t-12); letter-spacing: .18em; color: var(--rose); }
.a11y__panel button { text-align: left; padding: 10px 12px; border: 1px solid var(--hair); font-size: var(--t-14); display: flex; justify-content: space-between; }
.a11y__panel button[aria-pressed="true"] { border-color: var(--rose); color: var(--rose); }
html.a11y-large { font-size: 118%; }
html.a11y-contrast .room-green, html.a11y-contrast .room-dark { --fg: #fff; --fg-2: #eee; --fg-3: #ddd; }
html.a11y-contrast .room-ivory, html.a11y-contrast .room-light, html.a11y-contrast .room-rose { --fg: #000; --fg-2: #111; --fg-3: #222; }
html.a11y-dyslexic body, html.a11y-dyslexic h1, html.a11y-dyslexic h2, html.a11y-dyslexic h3 { font-family: Verdana, "Trebuchet MS", sans-serif; letter-spacing: .04em; }

/* Loader is retired; keep the hook harmless */
.loader { display: none; }

/* Sections, v2 Atelier: hero, the house, room studies, the atelier, the build, the commission, trade, questions, closer, inner-page patterns. */

/* Hero: full-viewport film, text at the bottom left on every screen */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero__media, .hero__poster { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media img, .hero__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::before, .page-hero__media::before, .panel__media::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26vh; background: linear-gradient(180deg, rgba(14, 26, 20, .55) 0%, rgba(14, 26, 20, .2) 55%, rgba(14, 26, 20, 0) 100%); z-index: 2; pointer-events: none; }
.hero__film { opacity: 0; transition: opacity 1.4s var(--ease-out); z-index: 1; }
.hero__film.is-playing { opacity: 1; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(14, 26, 20, .82) 0%, rgba(14, 26, 20, .5) 34%, rgba(14, 26, 20, .08) 64%, rgba(14, 26, 20, 0) 100%),
  linear-gradient(0deg, rgba(14, 26, 20, .88) 0%, rgba(14, 26, 20, .3) 34%, rgba(14, 26, 20, 0) 60%); }
.hero__text { position: relative; z-index: 3; width: min(100% - 2 * var(--inset), var(--max)); margin-inline: auto; padding: calc(var(--nav-h) + 40px) 0 clamp(48px, 7vh, 88px); display: grid; gap: 24px; }
.hero__text h1 { max-width: 12ch; }
.hero__text .lede { max-width: 44ch; color: var(--bone-2); }
.hero__text .actions { margin-top: 6px; }
@media (max-width: 900px) {
  .hero__scrim { background: linear-gradient(0deg, rgba(14, 26, 20, .94) 0%, rgba(14, 26, 20, .62) 38%, rgba(14, 26, 20, .12) 70%, rgba(14, 26, 20, 0) 100%); }
  .hero__text { padding: calc(var(--nav-h) + 40vh) 0 44px; gap: 18px; }
  .hero__text h1 { font-size: clamp(2.6rem, 12.5vw, 3.8rem); max-width: 11ch; }
  .hero__text .lede { font-size: 1.1rem; }
}

/* The house: statement, two paragraphs, four plates */
.house__head { display: grid; gap: 22px; max-width: 1180px; }
.house__head .statement { font-size: var(--t-64); line-height: 1.06; max-width: 22ch; }
.house__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: clamp(32px, 4vw, 56px); max-width: 1180px; }
.house__body p { color: var(--fg-2); font-size: var(--t-18); line-height: 1.6; margin: 0; }
.house__body p:first-child { font-size: var(--t-20); color: var(--fg); }
@media (max-width: 900px) { .house__body { grid-template-columns: 1fr; gap: 18px; } }
.plates { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 44px); margin-top: clamp(56px, 7vw, 104px); }
.plate { display: grid; gap: 18px; color: inherit; }
.plate .frame { --ar: 4 / 5; }
.plate:nth-child(2n) .frame { --ar: 4 / 5; }
.plate__meta { display: grid; gap: 8px; max-width: 46ch; }
.plate__meta h3 { font-size: var(--t-36); }
.plate__meta p { color: var(--fg-2); }
.plate__meta .link { margin-top: 6px; justify-self: start; }
.plates--3 { grid-template-columns: repeat(3, 1fr); }
.plates--4 { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
.plates--4 .plate__meta h3 { font-size: var(--t-28); }
@media (max-width: 1100px) { .plates--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .plates, .plates--3 { grid-template-columns: 1fr; gap: 40px; } .plates--4 { grid-template-columns: 1fr 1fr; gap: 24px 16px; } .plate .frame { --ar: 4 / 5; } }

/* Room studies: full-viewport films with the text over them */
.studies__head { padding: clamp(80px, 9vw, 150px) 0 clamp(40px, 5vw, 72px); display: grid; gap: 16px; max-width: 900px; }
.studies__head .lede { color: var(--bone-2); }
.panel { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.panel__media { position: absolute; inset: 0; z-index: 0; }
.panel__media img, .panel__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel__scrim { position: absolute; inset: 0; z-index: 1; }
.panel--left .panel__scrim { background: linear-gradient(90deg, rgba(14, 26, 20, .86) 0%, rgba(14, 26, 20, .48) 40%, rgba(14, 26, 20, 0) 72%), linear-gradient(0deg, rgba(14, 26, 20, .6) 0%, rgba(14, 26, 20, 0) 40%); }
.panel--right .panel__scrim { background: linear-gradient(270deg, rgba(14, 26, 20, .86) 0%, rgba(14, 26, 20, .48) 40%, rgba(14, 26, 20, 0) 72%), linear-gradient(0deg, rgba(14, 26, 20, .6) 0%, rgba(14, 26, 20, 0) 40%); }
.panel__text { position: relative; z-index: 2; width: min(100% - 2 * var(--inset), 600px); margin: 0 auto 0 var(--inset); padding: 120px 0 clamp(56px, 8vh, 96px); display: grid; gap: 18px; }
.panel--right .panel__text { margin: 0 var(--inset) 0 auto; }
.panel__text h2 { font-size: var(--t-48); max-width: 16ch; }
.panel__body { color: var(--bone-2); font-size: var(--t-16); line-height: 1.6; max-width: 52ch; }
.panel__spec { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--t-11); letter-spacing: .2em; text-transform: uppercase; color: var(--rose); font-weight: 500; }
.panel__spec li + li::before { content: "·"; margin-right: 22px; color: var(--bone-3); }
.panel__text .link { margin-top: 6px; justify-self: start; }
@media (max-width: 900px) {
  .panel__scrim, .panel--right .panel__scrim { background: linear-gradient(0deg, rgba(14, 26, 20, .95) 0%, rgba(14, 26, 20, .6) 42%, rgba(14, 26, 20, 0) 76%); }
  .panel__text, .panel--right .panel__text { width: auto; margin: 0; padding: 40vh var(--inset) 56px; }
  .panel__text h2 { font-size: clamp(2rem, 8.6vw, 2.7rem); }
  .panel__body { font-size: var(--t-15); }
}

/* The atelier */
.atelier__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: start; }
.atelier__media .frame { --ar: 4 / 5; }
.atelier__copy { display: grid; gap: 22px; position: sticky; top: calc(var(--nav-h) + 24px); }
.atelier__copy h2 { max-width: 14ch; }
.atelier__copy .lede { color: var(--fg-2); max-width: 44ch; }
.atelier__copy > p.body-2 { max-width: 52ch; }
.techniques { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 1px solid var(--hair); }
.techniques li { padding: 16px 0; border-bottom: 1px solid var(--hair); display: grid; gap: 6px; }
.techniques h4 { color: var(--fg); font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-size: var(--t-22); font-weight: 400; }
.techniques p { font-size: var(--t-15); color: var(--fg-2); line-height: 1.5; }
.atelier__materials { font-size: var(--t-15); color: var(--fg-2); max-width: 52ch; }
.atelier__wide { --ar: 21 / 9; margin-top: clamp(28px, 4vw, 48px); }
@media (max-width: 900px) {
  .atelier__grid { grid-template-columns: 1fr; }
  .atelier__copy { position: static; }
  .techniques { grid-template-columns: 1fr; }
  .atelier__wide { --ar: 4 / 5; }
}

/* The build: sticky stage, six callouts */
.build__head { display: grid; gap: 16px; max-width: 900px; margin-bottom: clamp(32px, 4vw, 56px); }
.build__head .lede { color: var(--fg-2); }
.build__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.build__sticky { position: sticky; top: calc(var(--nav-h) + 16px); }
.build__stage { position: relative; aspect-ratio: 16 / 11; max-height: calc(100svh - var(--nav-h) - 48px); width: 100%; overflow: hidden; }
.build__stage canvas, .build__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.build__stage .build__layer { opacity: 0; transition: opacity .5s var(--ease-out); }
.build__stage .build__layer.is-on { opacity: 1; }
.build__stage.has-frames .build__layer { display: none; }
.build__list { list-style: none; margin: 0; padding: 0; display: grid; }
.callout { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: clamp(24px, 3.4vh, 40px) 0; border-bottom: 1px solid var(--hair); min-height: 21svh; align-content: center; opacity: .32; transition: opacity .5s var(--ease-out); }
.callout:first-child { border-top: 1px solid var(--hair); }
.callout.is-on { opacity: 1; }
.callout .n { font-size: var(--t-11); letter-spacing: .2em; color: var(--accent-text); padding-top: 8px; font-weight: 500; }
.callout h3 { font-size: var(--t-36); }
.callout p { color: var(--fg-2); margin-top: 8px; font-size: var(--t-15); }
@media (max-width: 900px) {
  .build__grid { grid-template-columns: 1fr; gap: 0; }
  .build__sticky { top: var(--nav-h); z-index: 3; background: var(--bg); padding: 8px 0 12px; }
  .build__stage { aspect-ratio: 16 / 11; max-height: 46svh; }
  .callout { min-height: 34svh; padding: 20px 0; grid-template-columns: 36px 1fr; }
  .callout h3 { font-size: var(--t-28); }
}

/* The commission: sticky image stack, six steps */
.commission__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 110px); align-items: start; }
.commission__sticky { position: sticky; top: calc(var(--nav-h) + 16px); }
.commission__stack { position: relative; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--nav-h) - 40px); width: 100%; overflow: hidden; background: var(--bg-2); }
.commission__stack .frame { position: absolute; inset: 0; aspect-ratio: auto; opacity: 0; transition: opacity .9s var(--ease-out); }
.commission__stack .frame.is-on { opacity: 1; }
.commission__steps { list-style: none; margin: 0; padding: 0; display: grid; }
.cstep { display: grid; gap: 14px; padding: clamp(28px, 6vh, 64px) 0; border-bottom: 1px solid var(--hair); min-height: 46svh; align-content: center; }
.cstep:first-child { padding-top: 0; }
.cstep .n { font-size: var(--t-11); letter-spacing: .22em; color: var(--rose); font-weight: 500; }
.cstep h3 { font-size: var(--t-48); }
.cstep p { color: var(--bone-2); font-size: var(--t-16); line-height: 1.6; max-width: 46ch; }
.cstep__media { display: none; }
@media (max-width: 900px) {
  .commission__grid { grid-template-columns: 1fr; }
  .commission__sticky { display: none; }
  .cstep { min-height: 0; padding: 36px 0; }
  .cstep__media { display: block; --ar: 4 / 3; margin-bottom: 8px; }
  .cstep h3 { font-size: var(--t-36); }
}

/* Trade band */
.trade__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 110px); align-items: center; }
.trade__copy { display: grid; gap: 22px; }
.trade__copy h2 { max-width: 14ch; }
.trade__copy .lede { color: var(--fg-2); max-width: 46ch; }
.trade__list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; border-top: 1px solid var(--hair); }
.trade__list li { padding: 14px 0; border-bottom: 1px solid var(--hair); font-family: var(--font-display); font-size: var(--t-22); line-height: 1.3; }
.trade__media { --ar: 4 / 5; }
@media (max-width: 900px) { .trade__grid { grid-template-columns: 1fr; } .trade__media { --ar: 4 / 3; order: -1; } }

/* Questions */
.faq__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__head { display: grid; gap: 16px; position: sticky; top: calc(var(--nav-h) + 24px); }
.faq__head p { color: var(--fg-2); max-width: 36ch; }
.faq__list { border-top: 1px solid var(--hair); }
.faq__list details { border-bottom: 1px solid var(--hair); }
.faq__list summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: 20px; align-items: center; padding: 22px 0; font-family: var(--font-display); font-size: var(--t-28); line-height: 1.2; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary h3 { font-size: inherit; }
.faq__list summary .pm { width: 24px; height: 24px; position: relative; }
.faq__list summary .pm::before, .faq__list summary .pm::after { content: ""; position: absolute; background: var(--accent-text); left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform .4s var(--ease-out), opacity .3s; }
.faq__list summary .pm::before { width: 16px; height: 1px; }
.faq__list summary .pm::after { width: 1px; height: 16px; }
.faq__list details[open] summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__list details > div { padding: 0 0 24px; color: var(--fg-2); max-width: 60ch; font-size: var(--t-16); line-height: 1.6; }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; gap: 28px; } .faq__head { position: static; } }

/* Closer */
.closer { position: relative; min-height: 92svh; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; }
.closer__media { position: absolute; inset: 0; z-index: 0; }
.closer__media img, .closer__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.closer__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(14, 26, 20, .58); }
.closer__text { position: relative; z-index: 2; display: grid; gap: 32px; justify-items: center; padding: 120px var(--inset); }
.closer__text h2 { font-size: var(--t-88); max-width: 12ch; }
.closer__text .actions { justify-content: center; }

/* Inner pages: hero */
.page-hero { position: relative; min-height: 82svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.page-hero--short { min-height: 60svh; }
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img, .page-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero__film { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.page-hero__film.is-playing { opacity: 1; }
.page-hero__media:has(video.is-playing) img { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.page-hero__scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(14, 26, 20, .8) 0%, rgba(14, 26, 20, .45) 38%, rgba(14, 26, 20, .05) 68%, rgba(14, 26, 20, 0) 100%),
  linear-gradient(0deg, rgba(14, 26, 20, .86) 0%, rgba(14, 26, 20, .25) 36%, rgba(14, 26, 20, 0) 60%); }
.page-hero__text { position: relative; z-index: 3; padding: calc(var(--nav-h) + 40px) 0 clamp(48px, 7vh, 88px); display: grid; gap: 20px; }
.page-hero__text h1 { max-width: 14ch; font-size: var(--t-64); }
.page-hero__text .lede { max-width: 48ch; color: var(--bone-2); }
.page-hero--plain { min-height: 0; padding-top: calc(var(--nav-h) + clamp(56px, 10vw, 140px)); }
.page-hero--plain .page-hero__text { padding-top: 0; }
@media (max-width: 900px) {
  .page-hero { min-height: 78svh; }
  .page-hero__scrim { background: linear-gradient(0deg, rgba(14, 26, 20, .95) 0%, rgba(14, 26, 20, .6) 42%, rgba(14, 26, 20, .1) 78%); }
  .page-hero__text { padding: calc(var(--nav-h) + 30vh) 0 48px; }
  .page-hero__text h1 { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .page-hero__text .lede { font-size: 1.05rem; }
}

/* Inner pages: feature split, items, spec lists, swatches, steps, studies, band */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.feature--rev .feature__media { order: 2; }
.feature__media { --ar: 4 / 5; }
.feature__media--wide { --ar: 4 / 3; }
.feature__copy { display: grid; gap: 22px; }
.feature__copy h2 { max-width: 14ch; }
.feature__copy .lede { color: var(--fg-2); max-width: 44ch; }
.feature__copy .note { font-size: var(--t-15); color: var(--fg-3); max-width: 52ch; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } .feature--rev .feature__media { order: 0; } .feature__media, .feature__media--wide { --ar: 4 / 3; } }
.items { list-style: none; margin: 4px 0 0; padding: 0; display: grid; border-top: 1px solid var(--hair); }
.items li { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.items h4 { font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-size: var(--t-22); font-weight: 400; color: var(--fg); }
.items p { color: var(--fg-2); font-size: var(--t-15); line-height: 1.5; max-width: 60ch; }
.items--2 { grid-template-columns: 1fr 1fr; gap: 0 40px; }
@media (max-width: 720px) { .items--2 { grid-template-columns: 1fr; } }
.speclist { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--hair); }
.speclist li { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--hair); font-size: var(--t-16); align-items: baseline; }
.speclist li span:last-child { font-family: var(--font-display); font-size: var(--t-22); color: var(--fg); font-variant-numeric: tabular-nums; text-align: right; }
.speclist--2 { grid-template-columns: 1fr 1fr; gap: 0 48px; }
@media (max-width: 720px) { .speclist--2 { grid-template-columns: 1fr; } .speclist li { grid-template-columns: 1fr; gap: 4px; } .speclist li span:last-child { text-align: left; font-size: var(--t-20); } }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px); }
.swatches li { display: grid; gap: 10px; }
.swatches .frame { --ar: 1; }
.swatches span { font-size: var(--t-11); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); font-weight: 500; }
@media (max-width: 720px) { .swatches { grid-template-columns: 1fr 1fr; } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 40px; border-top: 1px solid var(--hair); }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.steps .n { font-size: var(--t-11); letter-spacing: .2em; color: var(--accent-text); padding-top: 8px; font-weight: 500; }
.steps h3 { font-size: var(--t-28); }
.steps p { color: var(--fg-2); font-size: var(--t-15); margin-top: 6px; line-height: 1.5; }
.study-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 44px); }
.study { display: grid; gap: 16px; }
.study .frame { --ar: 16 / 10; }
.study__meta { display: grid; gap: 8px; max-width: 52ch; }
.study__meta h3 { font-size: var(--t-36); }
.study__meta .mono { color: var(--accent-text); }
.study__meta p { color: var(--fg-2); font-size: var(--t-15); line-height: 1.5; }
@media (max-width: 720px) { .study-grid { grid-template-columns: 1fr; } .study .frame { --ar: 4 / 3; } }
.band { padding: clamp(88px, 10vw, 160px) 0; text-align: center; }
.band__in { display: grid; gap: 30px; justify-items: center; }
.band h2 { font-size: var(--t-64); max-width: 18ch; }
.band .actions { justify-content: center; }
.wide { --ar: 21 / 9; }
@media (max-width: 720px) { .wide { --ar: 4 / 3; } }
.story p { font-size: var(--t-18); line-height: 1.65; color: var(--fg-2); }
.story p:first-child { color: var(--fg); font-size: var(--t-20); }
.story p + p { margin-top: 1.1em; }
.story .signoff { margin-top: 32px; font-family: var(--font-display); font-size: var(--t-28); color: var(--fg); }

/* Contact, inquire, thank-you (kept from v1, recolored by tokens) */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.nap { display: grid; gap: 18px; }
.nap .big { font-family: var(--font-display); font-size: var(--t-36); line-height: 1.2; }
.nap a:hover { color: var(--accent-text); }
.map { border: 1px solid var(--hair); aspect-ratio: 4 / 3; }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
.map-load { position: relative; display: grid; place-items: center; text-align: center; gap: 12px; padding: 24px; color: var(--fg-2); font-size: var(--t-14); }
.map-load .btn { justify-self: center; }
.notice { border: 1px solid var(--hair-strong); padding: 20px 22px; font-size: var(--t-15); color: var(--fg-2); }
.linklist { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.quote-page { display: grid; grid-template-columns: 1.3fr .8fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 980px) { .quote-page { grid-template-columns: 1fr; } }
.aside { position: sticky; top: calc(var(--nav-h) + 32px); border: 1px solid var(--hair); padding: 28px; display: grid; gap: 18px; }
.aside .step { display: grid; grid-template-columns: 32px 1fr; gap: 10px; font-size: var(--t-15); color: var(--fg-2); }
.aside .step .n { font-size: var(--t-11); letter-spacing: .2em; color: var(--accent-text); padding-top: 4px; font-weight: 500; }
.qform { display: grid; gap: 26px; }
.qform fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
.qform legend { font-family: var(--font-display); font-size: var(--t-28); margin-bottom: 6px; }
.prose { max-width: 68ch; display: grid; gap: 28px; }
.prose h2 { font-size: var(--t-36); }
.prose p { color: var(--fg-2); }
.center { text-align: center; display: grid; justify-items: center; gap: 22px; }
.center h1 { max-width: 14ch; }
.tile__film { opacity: 0; transition: opacity .6s var(--ease-out); }
.tile:hover .tile__film, .tile__film.is-playing { opacity: 1; }

/* Phones: comfortable tap areas */
@media (max-width: 900px) {
  .link { padding-block: 10px; margin-block: -10px; }
  .footer a, .menu__foot a, a[href^="mailto:"], a[href^="tel:"] { padding-block: 8px; }
  .section { padding-block: clamp(64px, 12vw, 96px); }
}

.tbd{color:var(--fg-3);border-bottom:1px dotted var(--hair-strong);cursor:help}