/* ==========================================================================
   TORRINGTON DESIGN & BUILD — Design System
   Architectural / editorial. One accent (bronze). No AI clichés.
   ========================================================================== */

/* ---- Tokens --------------------------------------------------------------- */
:root {
  /* Warm architectural neutrals */
  --ink:        #16140F;   /* near-black, warm */
  --ink-2:      #221F18;
  --graphite:   #3A362D;
  --warm-grey:  #6E6656;
  --stone:      #C3B9A6;
  --limestone:  #E7E1D4;   /* primary warm ground */
  --paper:      #F4F0E7;   /* lighter surface */
  --paper-2:    #FBF9F3;

  /* Single principal accent — muted bronze */
  --bronze:     #9A6E3F;
  --bronze-lo:  #855E34;
  --bronze-hi:  #B98A50;

  --line:       rgba(22, 20, 15, 0.14);
  --line-soft:  rgba(22, 20, 15, 0.08);
  --line-inv:   rgba(244, 240, 231, 0.16);

  /* Type — one grotesque does ~95% of the work; serif is a rare accent only */
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Rhythm — wide architectural canvas */
  --wrap: 1400px;
  --gutter: clamp(22px, 4.4vw, 64px);
  --radius: 5px;   /* buttons + small controls only */
  --radius-img: clamp(22px, 2.4vw, 40px);     /* medium image modules — soft, architectural */
  --radius-feature: clamp(32px, 3.4vw, 54px); /* large feature imagery / panels */

  /* Section rhythm */
  --pad-section: clamp(76px, 9.5vw, 152px);
  --pad-tight:   clamp(56px, 6.5vw, 104px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  --nav-h: 84px;

  /* One icon system — Lucide-style stroke arrows via CSS mask (inherits currentColor) */
  --ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --ico-arrow-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
}

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  background: var(--limestone);
  color: var(--ink);
  line-height: 1.62;
  font-size: clamp(1.0625rem, 0.98rem + 0.28vw, 1.1875rem); /* 17 → 19px */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* clip (not hidden) so body is NOT a scroll container — keeps sticky + window scroll working */
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; }

::selection { background: var(--bronze); color: var(--paper-2); }

:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Typography — contemporary architectural grotesque -------------------- */
.display {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--ink);
}
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.018em; line-height: 1.06; }

/* rare, controlled editorial accent (use on ≤2 words on the homepage) */
.serif-accent { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: 0; }
.accent { color: var(--bronze); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;   /* ~11.5px */
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
}
.eyebrow--muted { color: var(--warm-grey); }

.lede { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); line-height: 1.55; color: var(--graphite); font-weight: 400; }
.muted { color: var(--warm-grey); }

/* ---- Arrow icon system (Lucide-style, one component, CSS mask) ------------ */
.arrow, .ar, .ar-ne {
  display: inline-block; width: 1.06em; height: 1.06em; flex-shrink: 0;
  font-size: 0; line-height: 0; color: transparent;
  background-color: currentColor;
  -webkit-mask: var(--ico-arrow) no-repeat center / contain;
  mask: var(--ico-arrow) no-repeat center / contain;
}
.ar-ne { -webkit-mask-image: var(--ico-arrow-ne); mask-image: var(--ico-arrow-ne); }
/* convert legacy inline text arrows inside text-links to the same icon */
.tlink > span[aria-hidden="true"] {
  display: inline-block; width: 1em; height: 1em; font-size: 0; color: transparent;
  background-color: currentColor;
  -webkit-mask: var(--ico-arrow-ne) no-repeat center / contain;
  mask: var(--ico-arrow-ne) no-repeat center / contain;
  transition: transform .4s var(--ease);
}
.tlink:hover > span[aria-hidden="true"] { transform: translate(2px, -2px); }

.index-num {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ---- Layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--pad-section); position: relative; }
.section--tight { padding-block: var(--pad-tight); }
/* reusable 12-column grid for architectural alignment */
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1.25rem, 2.4vw, 2.4rem); }
.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }

.bg-ink    { background: var(--ink); color: var(--paper); }
.bg-paper  { background: var(--paper); }
.bg-lime   { background: var(--limestone); }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  --bg: var(--ink); --fg: var(--paper-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  background: var(--bg); color: var(--fg);
  height: 52px; padding: 0 1.5rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius);
  position: relative; overflow: hidden;
  transition: color .45s var(--ease), background-color .45s var(--ease);
  isolation: isolate;
}
.btn .arrow { width: 1em; height: 1em; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bronze);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn .arrow { transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--ghost { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--paper-2); }
.btn--onink { --bg: var(--paper-2); --fg: var(--ink); }
.btn--onink:hover, .btn--onink:focus-visible { color: var(--paper-2); }
.btn--onink::before { background: var(--bronze); }
.btn--outline-inv { --bg: transparent; --fg: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-inv); }

/* text link with animated underline */
.tlink { position: relative; display: inline-flex; align-items: center; gap: .5em; font-weight: 500; }
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); }

/* ---- Header / Nav --------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease), color .5s var(--ease);
  color: var(--paper-2);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; }
.nav.is-solid {
  background: color-mix(in srgb, var(--paper-2) 90%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 -1px 0 var(--line-soft);
  color: var(--ink);
}
.brand { display: inline-flex; align-items: baseline; gap: .62rem; font-family: var(--sans); }
.brand > span:first-child { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; }
.brand .brand__sub { font-family: var(--sans); font-size: .625rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; opacity: .68; }
.nav__links { display: flex; align-items: center; gap: clamp(1.4rem, 2vw, 2rem); }
.nav__links a { font-size: .9rem; font-weight: 600; letter-spacing: -0.005em; }
.nav__cta { display: flex; align-items: center; gap: 1.4rem; }
.nav__tel { font-size: .875rem; font-weight: 600; letter-spacing: -0.005em; }
.nav .btn { height: 46px; padding: 0 1.2rem; font-size: .75rem; }
.nav__toggle { display: none; }

@media (max-width: 1024px) {
  .nav__links, .nav__tel, .nav__cta { display: none; }
  .nav__toggle {
    display: inline-flex; flex-direction: column; gap: 5px; width: 30px; padding: 6px 0; z-index: 101;
  }
  .nav__toggle span { height: 1.5px; width: 100%; background: currentColor; transition: transform .4s var(--ease), opacity .3s; }
  .nav.menu-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 95;
  background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; justify-content: center; gap: .3rem;
  padding: var(--gutter);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease);
  pointer-events: none;
}
.drawer.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; }
.drawer a { font-family: var(--sans); font-size: clamp(2rem, 8vw, 3.2rem); font-weight: 600; letter-spacing: -0.03em; padding: .12em 0; line-height: 1.12; opacity: .4; transition: opacity .3s, transform .3s; }
.drawer a:hover { opacity: 1; transform: translateX(8px); color: var(--bronze-hi); }
.drawer__foot { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; font-size: .85rem; opacity: .75; }
.drawer__foot a { font-family: var(--sans); font-size: .9rem; opacity: .9; }

/* ==========================================================================
   HOMEPAGE — VIDEO-LED HERO
   ========================================================================== */
.vhero { position: relative; height: 100svh; min-height: 700px; overflow: hidden; background: var(--ink); }
.vhero__media { position: absolute; inset: 0; z-index: 0; }
.vhero__video, .vhero__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% center;
}
.vhero__poster { opacity: 0; transition: opacity .6s var(--ease); z-index: 1; } /* final frame — freezes in on 'ended' */
.vhero__poster.hold { opacity: 1; }
/* left-to-right cinematic overlay (charcoal, no blue) */
.vhero__overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(102deg,
    rgba(18,16,12,.78) 0%, rgba(18,16,12,.60) 24%, rgba(18,16,12,.40) 44%,
    rgba(18,16,12,.16) 64%, rgba(18,16,12,0) 82%);
}
.vhero__overlay::after { /* subtle bottom gradient for proof strip / nav */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(14,12,9,.6) 0%, rgba(14,12,9,0) 26%),
              linear-gradient(180deg, rgba(14,12,9,.42) 0%, rgba(14,12,9,0) 20%);
}
.vhero__inner {
  position: relative; z-index: 3; height: 100%;
  max-width: var(--wrap); margin-inline: auto;
  padding: 0 var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
}
.vhero__content { max-width: 610px; transform: translateY(3.5vh); }
.vhero__eyebrow { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem; color: var(--paper); }
.vhero__eyebrow .rule { height: 1px; width: 46px; background: var(--bronze-hi); flex-shrink: 0; }
.vhero__eyebrow span { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.vhero h1 {
  color: var(--paper-2); font-weight: 600;
  font-size: clamp(2.6rem, 5.4vw, 4.75rem); line-height: 1.0; letter-spacing: -0.03em;
  text-shadow: 0 1px 40px rgba(10,8,5,.5), 0 1px 4px rgba(10,8,5,.32);
}
.vhero h1 em { font-style: normal; color: inherit; }
.vhero h1 .l2 { display: block; }
.vhero__sub { color: var(--paper); font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.55; max-width: 46ch; margin-top: 1.6rem; opacity: .95; font-weight: 400; text-shadow: 0 1px 20px rgba(10,8,5,.5); }
.vhero__cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2.1rem; }
.vhero__cta .seclink { color: var(--paper-2); font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .5em; }
.vhero__cta .seclink .arrow { transition: transform .4s var(--ease); }
.vhero__cta .seclink:hover .arrow { transform: translateX(5px); }
.vhero__cta .seclink::after { content:""; position:absolute; }
/* proof strip */
.vhero__proof {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(20px, 4vh, 40px); z-index: 3;
  max-width: var(--wrap); margin-inline: auto;
  display: flex; gap: clamp(1rem, 3vw, 3rem); align-items: center; flex-wrap: wrap;
  padding-top: 1.2rem; border-top: 1px solid rgba(244,240,231,.22);
}
.vhero__proof li { color: var(--paper); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; display: flex; align-items: center; gap: clamp(1rem,3vw,3rem); }
.vhero__proof li::after { content: ""; width: 1px; height: 14px; background: rgba(244,240,231,.28); }
.vhero__proof li:last-child::after { display: none; }
.vhero__scrollcue { position: absolute; right: var(--gutter); bottom: clamp(20px,4vh,40px); z-index: 4; }
/* staged reveal */
.vhero [data-r] { opacity: 0; transform: translateY(14px); }
body.vhero-ready .vhero [data-r] { opacity: 1; transform: none; transition: opacity .85s var(--ease), transform .85s var(--ease); }
@media (max-width: 720px) {
  .vhero__video, .vhero__poster { object-position: 68% center; }
  .vhero__proof { display: none; }
  .vhero__content { transform: none; }
}

/* hero → page flow (no hard cut) */
.hero-flow { height: clamp(64px, 9vh, 120px); background: linear-gradient(180deg, #0e0c09 0%, color-mix(in srgb, #0e0c09 34%, var(--paper)) 46%, var(--paper) 100%); }

/* ---- SCENE 02: positioning statement (12-col) ---------------------------- */
.posn { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1.5rem,3vw,3rem); align-items: center; }
.posn__text { grid-column: 1 / span 4; align-self: center; }
.posn__media { grid-column: 6 / span 7; position: relative; border-radius: var(--radius-feature); }
.posn__media img { width: 100%; aspect-ratio: 4/5; max-height: 780px; object-fit: cover; object-position: center; border-radius: var(--radius-feature); display: block; }
.posn__statement { font-family: var(--sans); font-weight: 600; font-size: clamp(2rem, 3.7vw, 3.4rem); line-height: 1.04; letter-spacing: -0.028em; }
@media (max-width: 860px){
  .posn { grid-template-columns: 1fr; row-gap: 2rem; }
  .posn__text, .posn__media { grid-column: auto; }
  .posn__media img { aspect-ratio: 4/3; max-height: none; }
}

/* ---- SCENE 03: interactive services index -------------------------------- */
.svcx { display: grid; grid-template-columns: minmax(0, 56fr) minmax(390px, 44fr); column-gap: clamp(2.5rem,4.5vw,5.5rem); align-items: start; }
.svcx__media { position: sticky; top: 108px; height: clamp(620px, 72vh, 760px); border-radius: clamp(36px,3.2vw,48px); overflow: hidden; background: var(--stone); }
.svcx__content { min-width: 0; }
.svcx__head { margin-bottom: clamp(1.7rem,3vw,2.5rem); }
.svcx__head h2 { max-width: 15ch; margin-top: .9rem; font-size: clamp(2rem,3.25vw,3.35rem); line-height: 1.01; text-transform: uppercase; }
.svcx__list { border-top: 1px solid var(--line); }
.svcx__row { display: grid; grid-template-columns: 2rem minmax(0,1fr) 1.1rem; gap: .8rem; align-items: center; min-height: 58px; padding: .75rem 0; border-bottom: 1px solid var(--line); color: var(--warm-grey); transition: color .5s var(--ease), padding-left .5s var(--ease); }
.svcx__row .n { font-variant-numeric: tabular-nums; font-size: .72rem; color: var(--warm-grey); font-weight: 600; transition: color .5s var(--ease); }
.svcx__row h3 { font-family: var(--sans); font-weight: 500; font-size: clamp(1rem,1.35vw,1.3rem); line-height: 1.2; color: inherit; transition: color .5s var(--ease), font-weight .5s var(--ease); letter-spacing: 0; }
.svcx__row .go { width: 1.05em; height: 1.05em; font-size: 0; color: var(--bronze); background-color: currentColor; -webkit-mask: var(--ico-arrow-ne) no-repeat center / contain; mask: var(--ico-arrow-ne) no-repeat center / contain; opacity: 0; transform: translate(-6px, 6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.svcx__row::before { content: ""; position: absolute; left: 0; width: 2px; height: 22px; background: var(--bronze); opacity: 0; transform: scaleY(.3); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.svcx__row { position: relative; }
.svcx__row.active, .svcx__row:hover, .svcx__row:focus-visible { color: var(--ink); padding-left: .75rem; }
.svcx__row.active::before, .svcx__row:hover::before, .svcx__row:focus-visible::before { opacity: 1; transform: scaleY(1); }
.svcx__row.active .n, .svcx__row:hover .n, .svcx__row:focus-visible .n { color: var(--bronze); }
.svcx__row.active h3, .svcx__row:hover h3, .svcx__row:focus-visible h3 { font-weight: 600; }
.svcx__row.active .go, .svcx__row:hover .go, .svcx__row:focus-visible .go { opacity: 1; transform: none; }
.svcx__frame { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .58s var(--ease), transform .58s var(--ease); transform: scale(1); }
.svcx__frame:nth-child(2), .svcx__frame:nth-child(5) { background-position: 58% center; }
.svcx__frame:nth-child(3), .svcx__frame:nth-child(4) { background-position: center 42%; }
.svcx__frame:nth-child(7) { background-position: 60% center; }
.svcx__frame.active { opacity: 1; transform: scale(1.02); }
.svcx__row::after { display: none; }
@media (max-width: 900px){
  .svcx { display: block; }
  .svcx__media { display: none; }
  .svcx__head { margin-bottom: 2rem; }
  .svcx__head h2 { max-width: 18ch; font-size: clamp(2rem,8vw,3.15rem); }
  .svcx__row { grid-template-columns: 2rem minmax(0,1fr) 1.1rem; min-height: 0; padding: 1.2rem 0; }
  .svcx__row.active, .svcx__row:hover, .svcx__row:focus-visible { padding-left: .65rem; }
  .svcx__row h3 { font-size: clamp(1.15rem,4.8vw,1.5rem); }
  .svcx__row::after { content: ""; display: block; grid-column: 1 / -1; width: 100%; aspect-ratio: 4 / 3; margin-top: .45rem; border-radius: clamp(24px,8vw,40px); background-image: var(--svc-image); background-size: cover; background-position: center; }
}

/* ---- SCENE 09: process timeline ------------------------------------------ */
.proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,3vw,2.5rem); position: relative; }
.proc::before { content:""; position: absolute; top: 22px; left: 0; right: 0; height: 1px; background: var(--line); }
.proc__step { position: relative; padding-top: 46px; }
.proc__step .dot { position: absolute; top: 16px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 1px solid var(--bronze); }
.proc__step.reveal.in .dot { background: var(--bronze); }
.proc__step .n { font-variant-numeric: tabular-nums; color: var(--bronze); font-size: .8rem; font-weight: 600; letter-spacing: .1em; }
.proc__step h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.2rem,2.2vw,1.7rem); margin: .4rem 0 .5rem; }
.proc__step p { color: var(--warm-grey); font-size: .92rem; max-width: 30ch; }
@media (max-width: 760px){
  .proc { grid-template-columns: 1fr; gap: 0; }
  .proc::before { top: 0; bottom: 0; left: 6px; right: auto; width: 1px; height: auto; }
  .proc__step { padding: 0 0 2rem 34px; }
  .proc__step .dot { top: 4px; left: 0; }
}

/* ---- reviews + areas strips (homepage) ----------------------------------- */
.revs { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.2rem,2.5vw,2rem); }
@media (max-width: 800px){ .revs { grid-template-columns: 1fr; } }
.rev { border: 1px solid var(--line); border-radius: 12px; padding: 1.9rem; background: var(--paper-2); }
.rev p { font-family: var(--sans); font-weight: 500; font-size: 1.1rem; line-height: 1.5; letter-spacing: -0.01em; color: var(--graphite); }
.rev cite { display: block; margin-top: 1.2rem; font-style: normal; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--warm-grey); }

/* ==========================================================================
   HOMEPAGE (legacy scroll-narrative styles retained below, still used by parts)
   ========================================================================== */

/* ---- HERO (pinned scroll transformation) --------------------------------- */
.hero { position: relative; height: 320vh; background: var(--ink); }
.hero__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hero__stage { position: absolute; inset: 0; }

/* Blueprint (SVG lines) layer */
.hero__blueprint {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: center;
}
.hero__blueprint svg { width: min(94vw, 1500px); height: auto; overflow: visible; }
.bp-line { fill: none; stroke: var(--bronze-hi); stroke-width: 1.1; vector-effect: non-scaling-stroke; opacity: .9; }
.bp-line--faint { stroke: rgba(185,138,80,.4); }
.bp-fill { fill: rgba(185,138,80,.06); opacity: 0; }
.bp-grid { stroke: rgba(244,240,231,.06); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Photo payoff layer */
.hero__photo {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center;
  transform: scale(1.12);
  will-change: opacity, transform;
}
.hero__photo::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,9,6,.55) 0%, rgba(10,9,6,.15) 40%, rgba(10,9,6,.75) 100%); }

/* Hero copy */
.hero__content { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; }
.hero__kicker { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.6rem; }
.hero__kicker .rule { height: 1px; width: 56px; background: var(--bronze-hi); }
.hero__title { color: var(--paper-2); font-size: clamp(2.6rem, 8.2vw, 8rem); font-weight: 300; letter-spacing: -0.02em; }
.hero__title em { font-style: italic; color: var(--bronze-hi); }
.hero__title .l2 { display: block; }
.hero__meta {
  margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center;
  color: var(--paper); font-size: .82rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.hero__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--bronze-hi); }
.hero__meta span.grp { display: inline-flex; align-items: center; gap: .7rem; opacity: .85; }

/* stage labels (DESIGN / BUILD / FINISH) that swap through scroll */
.hero__phase {
  position: absolute; left: var(--gutter); bottom: clamp(28px, 6vh, 60px); z-index: 4;
  display: flex; align-items: baseline; gap: 1rem; color: var(--paper); font-size: .8rem;
  letter-spacing: .18em; text-transform: uppercase;
}
.hero__phase .index-num { color: var(--bronze-hi); font-size: 1rem; }
.hero__progress {
  position: absolute; right: var(--gutter); bottom: clamp(28px, 6vh, 60px); z-index: 4;
  width: 120px; height: 2px; background: rgba(244,240,231,.18);
}
.hero__progress i { display: block; height: 100%; width: 0%; background: var(--bronze-hi); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 4;
  color: var(--paper); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: .8;
}
.scroll-cue .track { width: 1px; height: 46px; background: rgba(244,240,231,.35); position: relative; overflow: hidden; }
.scroll-cue .track::after { content:""; position:absolute; left:0; top:0; width:100%; height:40%; background: var(--bronze-hi); animation: cue 2.1s var(--ease-inout) infinite; }
@keyframes cue { 0%{ transform: translateY(-100%);} 60%,100%{ transform: translateY(280%);} }

/* ---- Reveal utility (IntersectionObserver) -------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

.mask-reveal { position: relative; overflow: hidden; border-radius: var(--radius-img); }
.mask-reveal img { transform: scale(1.15); transition: transform 1.3s var(--ease); }
.mask-reveal::after {
  content:""; position:absolute; inset:0; background: var(--limestone); transform-origin: bottom;
  transition: transform 1.1s var(--ease);
}
.mask-reveal.in::after { transform: scaleY(0); }
.mask-reveal.in img { transform: scale(1); }
.mask-reveal.on-ink::after { background: var(--ink); }

/* ---- Section heading block ------------------------------------------------ */
.head { display: grid; grid-template-columns: 1fr; gap: 1.1rem; max-width: 62ch; }
.head h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); }
.head--split { max-width: none; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem,4vw,4rem); align-items: end; }
@media (max-width: 800px){ .head--split { grid-template-columns: 1fr; } }

/* ---- SCENE: Design / Build narrative (two-up) ----------------------------- */
.narr { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.narr + .narr { margin-top: clamp(70px, 10vh, 130px); }
.narr__media { grid-column: span 7; position: relative; }
.narr__media.right { order: 2; grid-column: 6 / span 7; }
.narr__text { grid-column: span 5; }
.narr__text.left { grid-column: 1 / span 5; order: 1; }
.narr__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.narr__tag { position: absolute; top: 1rem; left: 1rem; background: color-mix(in srgb, var(--ink) 82%, transparent); color: var(--paper); padding: .5em .9em; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; border-radius: 2px; }
.narr h3 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); margin-bottom: 1rem; }
.narr .step { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 1.4rem; display:flex; gap:.8rem; align-items:center;}
.narr .step .rule { width: 34px; height: 1px; background: var(--bronze); }
@media (max-width: 860px){
  .narr__media, .narr__media.right, .narr__text, .narr__text.left { grid-column: 1 / -1; order: initial; }
  .narr__text { margin-top: .5rem; }
}

/* ---- SCENE: Craft (sticky image + rotating labels) ------------------------ */
.craft { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 100vh; }
.craft__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.craft__sticky .frame { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); background-size: cover; background-position: center; transform: scale(1.06); }
.craft__sticky .frame.active { opacity: 1; transform: scale(1); transition: opacity 1s var(--ease), transform 6s linear; }
.craft__list { padding: clamp(80px,14vh,180px) var(--gutter); display: flex; flex-direction: column; justify-content: center; gap: 0; }
.craft__item { padding: clamp(2rem,5vh,3.4rem) 0; border-top: 1px solid var(--line); }
.craft__item:last-child { border-bottom: 1px solid var(--line); }
.craft__item h3 { font-size: clamp(1.6rem,3vw,2.4rem); display: flex; align-items: baseline; gap: 1rem; transition: color .4s; color: var(--warm-grey); }
.craft__item h3 .index-num { font-size: .9rem; color: inherit; opacity: .6; }
.craft__item p { max-width: 46ch; margin-top: .8rem; color: var(--warm-grey); opacity: 0; max-height: 0; overflow: hidden; transition: opacity .5s, max-height .6s var(--ease), margin-top .4s; }
.craft__item.active h3 { color: var(--ink); }
.craft__item.active p { opacity: 1; max-height: 140px; }
@media (max-width: 860px){
  .craft { grid-template-columns: 1fr; }
  .craft__sticky { position: relative; height: 62vh; }
  .craft__list { padding-block: clamp(50px,8vh,80px); }
  .craft__item p { opacity: 1; max-height: none; }
}

/* ---- SCENE: Selected Work (editorial gallery) ----------------------------- */
.work__lead { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(1.5rem,4vw,4rem); align-items: end; margin-bottom: clamp(2.5rem,6vh,5rem); }
@media (max-width: 800px){ .work__lead { grid-template-columns: 1fr; } }
.work__full { position: relative; }
.work__full .imgwrap { border-radius: var(--radius-feature); }
.work__full img { width: 100%; height: clamp(340px, 66vh, 720px); object-fit: cover; border-radius: var(--radius-feature); }
.figc { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
.figc .t { font-family: var(--sans); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; }
.figc .m { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--warm-grey); font-weight: 600; }
.work__duo { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(1.5rem,2.4vw,2.25rem); margin-top: clamp(2rem,5vh,4rem); align-items: start; }
.work__duo .gfig:first-child img { aspect-ratio: 4/3; }
.work__duo .a { margin-top: clamp(3rem,9vh,7rem); }
.work__duo .a img { aspect-ratio: 3/4; }
@media (max-width: 700px){ .work__duo { grid-template-columns: 1fr; } .work__duo .a { margin-top: 0; } }
.work__duo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-img); }
.gfig figure { margin: 0; }
.gfig .imgwrap { position: relative; overflow: hidden; border-radius: var(--radius-img); }
.work__full .imgwrap { border-radius: var(--radius-feature); }
.gfig img { transition: transform 1.1s var(--ease); }
.gfig:hover img { transform: scale(1.04); }

/* ---- SCENE: Residential / Commercial split -------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.6vw, 28px); }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; gap: clamp(18px, 4vw, 26px); } }
.split__half { position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: clamp(24px, 3vw, 44px); min-height: clamp(440px, 62vh, 640px); border-radius: var(--radius-feature); isolation: isolate; }
.split__half .bgimg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.03); transition: transform 1.4s var(--ease); z-index: -2; }
.split__half::after { content:""; position:absolute; inset:0; z-index:-1; }
.split__half--res::after { background: linear-gradient(178deg, rgba(20,18,12,.06) 0%, rgba(20,18,12,.26) 42%, rgba(18,15,10,.86) 100%); }
.split__half--com::after { background: linear-gradient(178deg, rgba(12,14,16,.10) 0%, rgba(12,14,16,.34) 42%, rgba(9,11,13,.9) 100%); }
.split__half:hover .bgimg { transform: scale(1.07); }
.split__inner { color: var(--paper-2); max-width: 36ch; }
.split__inner .eyebrow { color: var(--bronze-hi); }
.split__inner h3 { font-size: clamp(2rem,3.6vw,3.1rem); margin: .55rem 0 .2rem; color: var(--paper-2); letter-spacing: -0.03em; }
.split__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.3rem 0 1.7rem; }
.split__tags li { font-size: .74rem; letter-spacing: .04em; padding: .42em .85em; border: 1px solid rgba(244,240,231,.28); border-radius: 100px; color: var(--paper); }

/* ---- SCENE: Property maintenance (packages) ------------------------------- */
.pkg { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1.2rem,3vw,2.4rem); }
.pkg__intro { grid-column: span 4; position: sticky; top: 110px; align-self: start; }
.pkg__rows { grid-column: 5 / span 8; }
@media (max-width: 900px){ .pkg__intro, .pkg__rows { grid-column: 1 / -1; } .pkg__intro { position: static; } }
.pkg__row { border-top: 1px solid var(--line-inv); }
.pkg__row:last-child { border-bottom: 1px solid var(--line-inv); }
.pkg__btn { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; padding: clamp(1.4rem,3vh,2.2rem) 0; text-align: left; color: var(--paper); }
.pkg__btn .lvl { font-family: var(--sans); font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 600; letter-spacing: -0.02em; }
.pkg__btn .tag { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-hi); }
.pkg__btn .ico { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-inv); position: relative; transition: background .4s, border-color .4s; flex-shrink: 0; }
.pkg__btn .ico::before, .pkg__btn .ico::after { content:""; position: absolute; background: var(--paper); left: 50%; top: 50%; transition: transform .4s var(--ease), background .3s; }
.pkg__btn .ico::before { width: 12px; height: 1.5px; transform: translate(-50%,-50%); }
.pkg__btn .ico::after  { width: 1.5px; height: 12px; transform: translate(-50%,-50%); }
.pkg__row.open .ico { background: var(--bronze); border-color: var(--bronze); }
.pkg__row.open .ico::after { transform: translate(-50%,-50%) scaleY(0); }
.pkg__panel { max-height: 0; overflow: hidden; transition: max-height .6s var(--ease); }
.pkg__panel-inner { padding: 0 0 clamp(1.4rem,3vh,2.2rem) 0; }
.pkg__incl { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 2rem; }
@media (max-width: 560px){ .pkg__incl { grid-template-columns: 1fr; } }
.pkg__incl li { display: flex; gap: .7rem; color: var(--paper); opacity: .85; font-size: .95rem; padding: .2em 0; }
.pkg__incl li svg { flex-shrink: 0; margin-top: .28em; color: var(--bronze-hi); }

/* ---- SCENE: 100+ years + Caring Quality ----------------------------------- */
.stat { text-align: center; }
.stat .eyebrow { display: block; margin-bottom: 1.2rem; }
.stat .big { font-family: var(--sans); font-weight: 600; font-size: clamp(6rem, 24vw, 20rem); line-height: .82; letter-spacing: -0.05em; color: var(--ink); }
.stat .big em { font-style: normal; color: var(--bronze); }
.stat .sub { font-size: clamp(.85rem,1.6vw,1.05rem); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); margin-top: 1.4rem; }
/* Caring Quality — architectural studio manifesto, left-aligned 12-col */
.caring { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1.5rem,3vw,3rem); row-gap: 1.6rem; align-items: end; }
.caring__head { grid-column: 1 / span 8; }
.caring__title { font-family: var(--sans); font-weight: 600; font-size: clamp(3rem, 8vw, 6.5rem); line-height: .94; letter-spacing: -0.04em; margin-top: 1rem; }
.caring__title .dot { color: var(--bronze); }
.caring__body { grid-column: 9 / span 4; padding-bottom: .6rem; }
@media (max-width: 860px){
  .caring__head, .caring__body { grid-column: 1 / -1; }
  .caring__title { font-size: clamp(2.6rem, 13vw, 4.5rem); }
}

/* ---- SCENE: Final conversion ---------------------------------------------- */
.cta-final { position: relative; overflow: hidden; }
.cta-final .bgimg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; transform: scale(1.05); }
.cta-final::after { content:""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,11,8,.78), rgba(12,11,8,.92)); }
.cta-final__inner { text-align: center; color: var(--paper-2); display: grid; place-items: center; gap: 1.6rem; padding-block: clamp(90px,18vh,220px); }
.cta-final h2 { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 300; }
.cta-final p { max-width: 52ch; color: var(--paper); }
.cta-final .actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: .8rem; }

/* ---- Footer --------------------------------------------------------------- */
.foot { background: var(--ink); color: var(--paper); padding-block: clamp(56px,8vh,90px) 2rem; }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(1.5rem,3vw,3rem); padding-bottom: 3.5rem; border-bottom: 1px solid var(--line-inv); }
@media (max-width: 860px){ .foot__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; } }
@media (max-width: 520px){ .foot__grid { grid-template-columns: 1fr; } }
.foot h4 { font-family: var(--sans); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-hi); margin-bottom: 1.2rem; font-weight: 600; }
.foot__brand .display { font-size: 1.8rem; color: var(--paper-2); }
.foot__brand p { color: var(--stone); max-width: 34ch; margin-top: 1rem; font-size: .95rem; }
.foot ul li { padding: .32em 0; }
.foot ul a { color: var(--stone); font-size: .95rem; transition: color .3s; }
.foot ul a:hover { color: var(--paper-2); }
.foot__contact a { color: var(--paper-2); display: block; padding: .2em 0; }
.foot__contact .big { font-family: var(--sans); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em; }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; color: var(--warm-grey); font-size: .8rem; }
.foot__bottom a { color: var(--stone); }
.confirm-note { color: var(--warm-grey); font-size: .72rem; font-style: italic; }

/* ---- Vertical scene rail (desktop) ---------------------------------------- */
.rail { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 80; display: flex; flex-direction: column; gap: 14px; mix-blend-mode: difference; }
.rail button { display: flex; align-items: center; gap: 10px; color: #fff; opacity: .5; transition: opacity .3s; }
.rail button .n { font-size: .66rem; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.rail button .b { width: 22px; height: 1px; background: #fff; transition: width .3s; }
.rail button.active { opacity: 1; }
.rail button.active .b { width: 40px; }
.rail button:hover { opacity: 1; }
@media (max-width: 1024px){ .rail { display: none; } }

/* ---- Generic page hero (interior pages) ----------------------------------- */
.phero { position: relative; padding-top: calc(var(--nav-h) + clamp(50px,10vh,120px)); padding-bottom: clamp(40px,7vh,90px); overflow: hidden; }
.phero .eyebrow { margin-bottom: 1.2rem; display: block; }
.phero h1 { font-size: clamp(2.6rem,7vw,5.6rem); font-weight: 300; max-width: 16ch; }
.phero p { max-width: 56ch; margin-top: 1.6rem; }
.breadcrumb { display: flex; gap: .5rem; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--warm-grey); margin-bottom: 2rem; }
.breadcrumb a:hover { color: var(--bronze); }

/* ---- Service index (editorial list) --------------------------------------- */
.svc-index { border-top: 1px solid var(--line); }
.svc-row { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; padding: clamp(1.6rem,3.5vh,2.6rem) 0; border-bottom: 1px solid var(--line); transition: padding-left .5s var(--ease), background .4s; position: relative; }
.svc-row:hover { padding-left: 1.2rem; }
.svc-row .num { font-variant-numeric: tabular-nums; color: var(--bronze); font-size: .9rem; }
.svc-row h3 { font-size: clamp(1.5rem,3.4vw,2.6rem); font-weight: 340; }
.svc-row .desc { color: var(--warm-grey); max-width: 40ch; font-size: .95rem; }
.svc-row .go { width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; transition: background .4s, color .4s, box-shadow .4s; color: var(--ink); font-size: 0; }
.svc-row .go::before { content: ""; width: 17px; height: 17px; background-color: currentColor; -webkit-mask: var(--ico-arrow) no-repeat center / contain; mask: var(--ico-arrow) no-repeat center / contain; transition: transform .4s var(--ease); }
.svc-row:hover .go::before { transform: translateX(3px); }
.svc-row:hover .go { background: var(--bronze); color: var(--paper-2); box-shadow: inset 0 0 0 1px var(--bronze); }
@media (max-width: 760px){ .svc-row { grid-template-columns: auto 1fr; } .svc-row .desc { display: none; } }

/* ---- Forms ---------------------------------------------------------------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 640px){ .form { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field label { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); font-weight: 600; }
.field label .req { color: var(--bronze); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .98rem; padding: .9em 1em; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); transition: border-color .3s, box-shadow .3s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(154,110,63,.14); }
.field.err input, .field.err select, .field.err textarea { border-color: #b3402f; }
.field .msg { font-size: .78rem; color: #b3402f; min-height: 1em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-success { display: none; padding: clamp(2rem,5vw,3.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); text-align: center; }
.form-success.show { display: block; }
.form-success .tick { width: 64px; height: 64px; margin: 0 auto 1.4rem; border-radius: 50%; background: var(--bronze); display: grid; place-items: center; color: var(--paper-2); }

/* ---- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; text-align: left; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; padding: 1.5rem 0; font-family: var(--sans); font-size: clamp(1.1rem,2.2vw,1.45rem); font-weight: 600; letter-spacing: -0.02em; }
.faq__q .pm { flex-shrink: 0; position: relative; width: 22px; height: 22px; }
.faq__q .pm::before, .faq__q .pm::after { content:""; position:absolute; background: var(--bronze); left:50%; top:50%; }
.faq__q .pm::before { width: 14px; height: 1.5px; transform: translate(-50%,-50%); }
.faq__q .pm::after { width: 1.5px; height: 14px; transform: translate(-50%,-50%); transition: transform .35s var(--ease); }
.faq__item.open .pm::after { transform: translate(-50%,-50%) scaleY(0); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.faq__a p { padding: 0 0 1.5rem; max-width: 68ch; color: var(--warm-grey); }

/* ---- Cookie / notices ----------------------------------------------------- */
.cookie { position: fixed; left: var(--gutter); right: var(--gutter); bottom: 20px; z-index: 120; max-width: 560px; background: var(--ink); color: var(--paper); padding: 1.4rem 1.5rem; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.35); display: none; }
.cookie.show { display: block; }
.cookie p { font-size: .88rem; color: var(--stone); margin-bottom: 1rem; }
.cookie .row { display: flex; gap: .8rem; flex-wrap: wrap; }
.cookie .btn { padding: .7em 1.3em; font-size: .74rem; }

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .mask-reveal::after { display: none; }
  .mask-reveal img { transform: none; }
  .hero { height: auto; }
  .hero__sticky { position: relative; height: 100vh; }
  .hero__photo { opacity: 1; transform: none; }
  .hero__blueprint { opacity: 0; }
  .scroll-cue .track::after { animation: none; }
  .craft__sticky .frame:first-child { opacity: 1; }
  /* video hero: show finished-property still, no motion */
  .vhero [data-r] { opacity: 1 !important; transform: none !important; }
  .vhero__poster { opacity: 1; }
  .svcx__frame:first-child { opacity: 1; }
}

/* ---- Print ---------------------------------------------------------------- */
@media print { .nav, .rail, .cookie, .scroll-cue { display: none !important; } }