/* ==========================================================================
   ALDER & ASH RENOVATION CO. — Web2Reality concept demo
   Visual system: warm architectural photography with restrained drafting marks.
   Palette: warm plaster · deep charcoal · walnut · honed stone · aged brass.
   Rhythm: light editorial pages, closing on one continuous dark chapter
   (project request + footer) instead of a floating CTA band.

   Base styles are always the FINISHED state. Motion is layered on top and
   gated behind `.js` + `prefers-reduced-motion: no-preference`, so a page
   with no JavaScript or reduced motion renders complete and static.
   ========================================================================== */

:root {
  /* Surfaces */
  --paper:      #faf7f1;
  --plaster:    #f2ece2;
  --plaster-2:  #e9e1d4;
  --charcoal:   #23211e;
  --charcoal-2: #2d2a25;
  --charcoal-3: #1b1916;

  /* Text */
  --ink:    #2b2823;
  --body:   #4a463f;
  --muted:  #6d675e;
  --on-dark:      #f0e9dd;
  --on-dark-mute: #b3aa9b;

  /* Lines */
  --line:      #dbd2c3;
  --line-2:    #c6bbaa;
  --line-dark: rgba(240, 233, 221, 0.16);

  /* Materials (also used as accents) */
  --walnut:    #6b4630;
  --walnut-2:  #7d543b;
  --oak:       #8a7a63;
  --stone:     #918c82;
  --stone-2:   #a7a29a;
  --brass:     #a8834a;
  --brass-ink: #7a5c2c;   /* brass that passes contrast as text on plaster */
  --brass-lt:  #cfa768;   /* brass on dark surfaces */
  --moss:      #5b6450;
  --matte:     #2a2825;
  --error:     #8c2f22;
  --error-lt:  #e79a8c;

  /* Type */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --shell: 1180px;
  --pad-x: 22px;
  --section-y: clamp(64px, 8.5vw, 128px);
  --header-h: 72px;
  /* Header height plus breathing room, so an anchored section never lands
     tight under the sticky header. */
  --anchor-offset: calc(var(--header-h) + 24px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);
  -webkit-text-size-adjust: 100%;
}

/* Anchor landing offset. scroll-padding-top on the scroll container covers
   hash navigation; scroll-margin-top on the targets themselves covers any
   scrollIntoView() call as well, so a programmatic scroll can never tuck a
   heading behind the sticky header. Both are driven by the same value. */
section[id],
header[id],
main[id],
.plan-tabs {
  scroll-margin-top: var(--anchor-offset);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { color: var(--ink); font-weight: 500; line-height: 1.12; margin: 0; }
/* Section and step headings otherwise drop a single short word onto their
   last line at some widths ("…for everyday / life."). Balancing only
   redistributes the line breaks — it changes no size, spacing or wording.
   The hero h1 is excluded: its breaks are authored with <br>. */
h2,
.path-step h3,
.approach-item h3,
.key-label { text-wrap: balance; }
h1, h2 { font-family: var(--font-display); letter-spacing: -0.012em; }
h1 em, h2 em { font-style: italic; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--brass-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.start :focus-visible,
.site-footer :focus-visible { outline-color: var(--brass-lt); }

/* Shown only by the <noscript> stylesheet in index.html */
.nojs-note {
  display: none;
  margin: 22px 0;
  padding: 12px 16px;
  border-left: 2px solid var(--line-2);
  font-size: 0.88rem;
  color: var(--muted);
}

.skip-link {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 60;
  background: var(--charcoal);
  color: var(--on-dark);
  padding: 12px 18px;
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Shared pieces ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brass-ink);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::after {
  content: "";
  flex: 0 0 40px;
  height: 1px;
  background: var(--line-2);
}
.eyebrow-light { color: var(--brass-lt); }
.eyebrow-light::after { background: var(--line-dark); }

.section-lede {
  font-size: clamp(1rem, 1.05vw, 1.09rem);
  color: var(--muted);
  max-width: 56ch;
  margin-top: 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 26px;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.btn-sm { min-height: 46px; padding: 11px 20px; font-size: 0.92rem; }

.btn-solid { background: var(--charcoal); color: var(--paper); }
.btn-solid:hover { background: var(--walnut); }

.btn-line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { border-color: var(--charcoal); background: rgba(35, 33, 30, 0.045); }

.btn-ghost { background: transparent; color: var(--muted); border-color: transparent; padding-inline: 8px; }
.btn-ghost:hover { color: var(--ink); }

.start .btn-solid { background: var(--brass); color: var(--charcoal-3); }
.start .btn-solid:hover { background: var(--brass-lt); }
.start .btn-line { color: var(--on-dark); border-color: var(--line-dark); }
.start .btn-line:hover { border-color: var(--brass-lt); background: rgba(240, 233, 221, 0.06); }
.start .btn-ghost { color: var(--on-dark-mute); }
.start .btn-ghost:hover { color: var(--on-dark); }

/* The request card is a LIGHT surface inside the dark closing chapter, so the
   dark-section button and focus treatments above must be reverted inside it —
   otherwise "Back" and "Start Over" render near-invisible on paper. */
.start .start-card .btn-line { color: var(--ink); border-color: var(--line-2); }
.start .start-card .btn-line:hover { border-color: var(--charcoal); background: rgba(35, 33, 30, 0.045); }
.start .start-card .btn-ghost { color: var(--muted); }
.start .start-card .btn-ghost:hover { color: var(--ink); }
.start .start-card :focus-visible { outline-color: var(--brass-ink); }

/* ==========================================================================
   1 · HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 247, 241, 0.94);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(250, 247, 241, 0.97);
}

.header-row {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark {
  flex: 0 0 auto;
  fill: none;
  stroke: var(--charcoal);
  stroke-width: 1.7;
  stroke-linecap: square;
}
.brand-mark .brand-bar { stroke: var(--brass); stroke-width: 2 }
.brand-words { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.24rem;
  white-space: nowrap;
  letter-spacing: 0.005em;
}
.brand-name em { font-style: italic; color: var(--brass-ink); }
.brand-sub {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.demo-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 5px 10px;
}
.demo-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brass); }

.menu-btn {
  display: none;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  min-height: 44px;
  padding: 10px 14px;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.menu-btn-bars { display: grid; gap: 4px; }
.menu-btn-bars span { display: block; width: 17px; height: 1.5px; background: currentColor; }

.site-menu { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--body);
  position: relative;
  transition: color 0.2s var(--ease);
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.26s var(--ease);
}
.nav-list a:hover { color: var(--ink); }
.nav-list a:hover::after { transform: scaleX(1); }
.nav-list .nav-cta {
  margin-left: 10px;
  background: var(--charcoal);
  color: var(--paper);
  padding: 12px 20px;
  border-radius: 2px;
  font-weight: 500;
  transition: background-color 0.22s var(--ease);
}
.nav-list .nav-cta::after { display: none; }
.nav-list .nav-cta:hover { background: var(--walnut); color: var(--paper); }

/* ==========================================================================
   2 · HERO
   ========================================================================== */

.hero {
  padding-top: clamp(38px, 5vw, 64px);
  padding-bottom: clamp(44px, 6vw, 84px);
  background:
    radial-gradient(120% 90% at 82% 12%, rgba(168, 131, 74, 0.07), transparent 62%),
    var(--paper);
  border-bottom: 1px solid var(--line);
}

.hero-grid { display: grid; gap: clamp(28px, 4vw, 48px); }

.hero-copy { max-width: 34rem; }

h1 {
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
h1 em { color: var(--walnut); }

.hero-lede {
  margin-top: 22px;
  font-size: clamp(1.03rem, 1.2vw, 1.14rem);
  color: var(--muted);
  max-width: 40ch;
}

.hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-note {
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 46ch;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ---- Shared photography system ----
   Every photograph sits in a fixed aspect-ratio frame so nothing shifts while
   loading, and per-image cropping is expressed as data (--pos) on the element
   rather than as one-off CSS rules. */

.hero-plate { margin: 0; }

.shot { position: relative; }
.shot-frame {
  position: relative;
  overflow: hidden;
  background: var(--plaster-2);
  border-radius: 2px;
}
.shot-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  background: var(--plaster-2);
}
/* aspect-ratio: attr() is not supported everywhere yet; the width/height
   attributes already give the browser the intrinsic ratio, so this is only a
   progressive nicety and the layout is stable without it. */

.shot-hero .shot-frame { aspect-ratio: 3 / 2; }
/* The material label is light type over the photograph, so the frame carries
   a soft scrim at the bottom. Without it its legibility would depend on how
   bright that corner of the image happens to be. */
.shot-hero .shot-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(to top, rgba(20, 17, 14, 0.52), rgba(20, 17, 14, 0));
  pointer-events: none;
}
.shot-hero .shot-img { height: 100%; }

/* One restrained material label over the hero photograph. */
.shot-tag {
  position: absolute;
  right: 6%;
  bottom: 8%;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #faf7f1;
  text-shadow: 0 1px 4px rgba(35, 33, 30, 0.6);
}

.hero-caption {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.caption-track { flex: 1 1 auto; height: 1px; background: var(--line-2); }
.caption-text { flex: 0 0 auto; }
.caption-text .caret { color: var(--brass-ink); margin-inline: 3px; }

/* ==========================================================================
   3 · APPROACH
   ========================================================================== */

.approach {
  padding-block: var(--section-y);
  background: var(--plaster);
}
.approach-grid { display: grid; gap: clamp(30px, 4vw, 52px); }
.approach-head h2 { font-size: clamp(1.85rem, 3.5vw, 2.9rem); max-width: 17ch; }
.approach-head h2 em { color: var(--walnut); }

.approach-plan { margin: 0; }
/* The Lightwell Kitchen photograph also appears full-frame in Concept Spaces.
   Here it is deliberately re-cropped to a wider 3:2 so the two readings do not
   look like the same picture pasted twice: this one trims the ceiling and the
   empty floor and sits closer to the working run. */
.shot-approach .shot-frame { aspect-ratio: 3 / 2; }
.shot-approach .shot-img { height: 100%; }

.approach-plan figcaption {
  margin-top: 14px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.approach-list { display: grid; gap: 26px; }
.approach-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 18px;
  row-gap: 6px;
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
}
.ai-num {
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 0.85;
  color: var(--brass-ink);
  font-weight: 400;
}
.approach-item h3 { font-size: 1.16rem; font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.005em; }
.approach-item p { color: var(--muted); font-size: 0.97rem; }

/* ==========================================================================
   4 · FEATURED SPACES
   ========================================================================== */

.work {
  padding-block: var(--section-y);
  background: var(--paper);
}
.work-head { max-width: 62ch; margin-bottom: clamp(38px, 5vw, 66px); }
.work-head h2 { font-size: clamp(1.85rem, 3.5vw, 2.9rem); }

/* shared illustration vocabulary */
.space-art { margin: 0; }
.space-art-tall .shot-frame { max-width: 430px; margin-inline: auto; }
.space-art-short .shot-frame { max-width: 520px; margin-inline: auto; }

.space-tag {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brass-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 5px 10px;
  margin-bottom: 18px;
}
.space-text h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  letter-spacing: -0.012em;
}
.space-text > p { margin-top: 14px; color: var(--muted); max-width: 44ch; }

.space-spec { margin-top: 26px; display: grid; gap: 0; }
.space-spec > div {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.space-spec dt {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.space-spec dd { margin: 0; font-size: 0.95rem; color: var(--body); }

.space-a { margin-bottom: clamp(48px, 7vw, 92px); }
.space-grid { display: grid; gap: clamp(26px, 3.5vw, 46px); align-items: center; }

.space-pair { display: grid; gap: clamp(40px, 5vw, 64px); }
.space-b .space-text, .space-c .space-text { margin-top: 26px; }

.work-note {
  margin-top: clamp(40px, 5vw, 68px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 60ch;
}

/* ==========================================================================
   5 · ROOM PLANNING
   ========================================================================== */

.planner {
  padding-block: var(--section-y);
  background: var(--plaster-2);
}
.plan-head { max-width: 60ch; }
.plan-head h2 { font-size: clamp(1.85rem, 3.5vw, 2.9rem); }

.plan-tabs {
  margin-top: 34px;
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.5);
}
.plan-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 22px;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.24s var(--ease), color 0.24s var(--ease);
}
.pt-mark svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.plan-tab:hover { color: var(--ink); }
.plan-tab[aria-selected="true"] {
  background: var(--charcoal);
  color: var(--paper);
}

.plan-panel {
  margin-top: 30px;
  display: grid;
  gap: clamp(26px, 3.5vw, 48px);
  align-items: start;
}
.plan-panel[hidden] { display: none; }

.plan-art { margin: 0; }

/* Planning key — the four things we plan for in this room.
   The photographs are deliberately clean: nothing is drawn or labelled on top
   of them. The key sits underneath as a numbered legend, using the same large
   brass numerals as the Approach list so the two sections read as one system.
   Two columns beside the image on wide screens, one column when stacked. */
.plan-key {
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(22px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.key-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 14px;
  align-items: baseline;
  padding: 16px 0 15px;
  border-bottom: 1px solid var(--line);
}
.key-num {
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 400;
  color: var(--brass-ink);
  font-variant-numeric: tabular-nums;
}
.key-label {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.key-note {
  margin-top: 3px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}
@media (max-width: 700px) {
  .plan-key { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
}
.plan-art figcaption {
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--muted);
}

.plan-side h3 {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
}
.prio-list { margin-top: 4px; }
.prio-list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 13px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--muted);
}
.prio-list strong { color: var(--ink); font-weight: 600; }
.prio-mark {
  width: 9px;
  height: 9px;
  border: 1px solid var(--brass);
  transform: rotate(45deg);
  align-self: center;
}
.plan-carry {
  margin-top: 20px;
  font-size: 0.88rem;
  color: var(--body);
  background: rgba(168, 131, 74, 0.1);
  border-left: 2px solid var(--brass);
  padding: 12px 16px;
}
.plan-cta { margin-top: 20px; }

/* ==========================================================================
   6 · MATERIALS — finish palette preview
   ========================================================================== */

.materials {
  padding-block: var(--section-y);
  background: var(--paper);
}
.mat-grid { display: grid; gap: clamp(30px, 4vw, 54px); }
.mat-head { max-width: 62ch; }
.mat-head h2 { font-size: clamp(1.85rem, 3.5vw, 2.9rem); }
.mat-head h2 em { color: var(--walnut); }

.mat-stage { display: grid; gap: clamp(26px, 3vw, 40px); align-items: start; }

/* ---- the two-layer photograph ---- */

.finish-view { margin: 0; }
/* Fixed ratio, so the frame is exactly the same size in every palette and
   nothing on the page moves while the photographs cross over. */
.finish-frame {
  position: relative;
  aspect-ratio: 1448 / 1086;
  overflow: hidden;
  background: var(--plaster-2);
  border-radius: 2px;
}
.finish-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  will-change: opacity, transform;
}
/* Exactly one layer is visible at rest. */
.finish-layer.is-current { opacity: 1; z-index: 2; }
.finish-layer.is-outgoing { opacity: 1; z-index: 1; }

/* The 1px brass edge that travels with the wipe. It is a full-width block
   carrying a single hairline border, so the line can be positioned with a
   percentage transform rather than an animated `left`. */
.finish-edge {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  border-left: 1px solid var(--brass-lt);
  border-right: 1px solid transparent;
}
.finish-view.dir-back .finish-edge {
  border-left-color: transparent;
  border-right-color: var(--brass-lt);
}

.finish-caption {
  margin-top: 14px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---- palette controls ---- */

.finish-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
}
.finish-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
}
.finish-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 13px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--body);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
              background-color 0.2s var(--ease);
}
.finish-opt:hover { border-color: var(--line-2); color: var(--ink); }
.finish-opt.is-active {
  border-color: var(--charcoal);
  color: var(--ink);
  background: rgba(35, 33, 30, 0.035);
}
.fo-chip {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--chip, var(--stone));
  box-shadow: inset 0 0 0 1px rgba(35, 33, 30, 0.16);
}
.finish-opt.is-active .fo-chip {
  box-shadow: inset 0 0 0 1px rgba(35, 33, 30, 0.16),
              0 0 0 2px var(--paper), 0 0 0 3px var(--charcoal);
}
.fo-name { min-width: 0; }

.finish-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.finish-arrow {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.finish-arrow:hover { border-color: var(--charcoal); color: var(--ink); }
.finish-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
}

/* ---- palette detail ---- */

.finish-detail { margin-top: 26px; }
.fd-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
}
/* The six descriptions run one or two lines. Reserving two keeps the spec
   rows below from stepping up and down as options are switched. */
.fd-desc {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.6;
  max-width: 44ch;
  min-height: 3.2em;
}
.fd-spec { margin: 20px 0 0; }
.fd-spec > div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.fd-spec dt {
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.fd-spec dd { margin: 0; font-size: 0.95rem; color: var(--ink); }

/* Shown only by the noscript stylesheet. */
.finish-fallback { display: none; }
.finish-fallback li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.finish-fallback h3 {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 500;
}
.finish-fallback p { margin-top: 6px; color: var(--muted); font-size: 0.95rem; }
.finish-fallback .ff-spec { color: var(--ink); font-size: 0.9rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   7 · PROCESS PATHWAY
   ========================================================================== */

.process {
  padding-block: var(--section-y);
  background: var(--plaster);
}
.process-head { max-width: 40ch; margin-bottom: clamp(38px, 5vw, 60px); }
.process-head h2 { font-size: clamp(1.85rem, 3.5vw, 2.9rem); }

.path { display: grid; gap: 0; }
.path-step { position: relative; }
.path-line {
  position: absolute;
  background: var(--line-2);
  display: block;
}
.path-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brass);
  transform-origin: left center;
}
.path-node {
  position: absolute;
  width: 13px;
  height: 13px;
  background: var(--plaster);
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  z-index: 2;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.path-step.is-active .path-node,
.path-step.is-complete .path-node { border-color: var(--brass); background: var(--brass); }
.path-num {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brass-ink);
}
.path-step h3 {
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 1.06rem;
  font-weight: 600;
}
.path-step p { margin-top: 8px; font-size: 0.93rem; color: var(--muted); }

/* ==========================================================================
   8 · PROJECT REQUEST (dark closing chapter)
   ========================================================================== */

.start {
  padding-top: var(--section-y);
  padding-bottom: clamp(52px, 6vw, 84px);
  background: var(--charcoal);
  color: var(--on-dark-mute);
}
.start-grid { display: grid; gap: clamp(30px, 4vw, 56px); align-items: start; }
.start-head h2 { color: var(--on-dark); font-size: clamp(1.9rem, 3.6vw, 3rem); }
.start .section-lede { color: var(--on-dark-mute); }
.start-demo-note {
  margin-top: 26px;
  display: inline-block;
  font-size: 0.8rem;
  color: var(--on-dark-mute);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  padding: 9px 14px;
}

.start-card {
  background: var(--paper);
  color: var(--body);
  padding: clamp(22px, 3vw, 38px);
  border-radius: 2px;
}

.req-progress { display: grid; gap: 10px; margin-bottom: 26px; }
.req-progress-text {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.req-progress-track { display: block; height: 2px; background: var(--line); }
.req-progress-fill {
  display: block;
  height: 100%;
  width: 20%;
  background: var(--brass);
  transition: width 0.35s var(--ease);
}

.req-step { border: 0; padding: 0; margin: 0 0 34px; }
.req-step:last-of-type { margin-bottom: 0; }
.req-step legend {
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  color: var(--ink);
  margin-bottom: 18px;
}
.req-hint { font-size: 0.85rem; color: var(--muted); margin-top: -8px; margin-bottom: 16px; }

.opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.opt { display: block; position: relative; }
.opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.opt-face {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 13px 16px 13px 44px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 0.94rem;
  color: var(--body);
  position: relative;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.opt-face::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.opt-grid-multi .opt-face::before { border-radius: 2px; }
.opt:hover .opt-face { border-color: var(--line-2); background: rgba(35, 33, 30, 0.025); }
.opt input:checked + .opt-face {
  border-color: var(--charcoal);
  background: rgba(35, 33, 30, 0.045);
  color: var(--ink);
}
.opt input:checked + .opt-face::before {
  border-color: var(--charcoal);
  background: var(--charcoal);
  box-shadow: inset 0 0 0 3px var(--paper);
}
.opt input:focus-visible + .opt-face {
  outline: 2px solid var(--brass-ink);
  outline-offset: 2px;
}

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 7px; margin: 0; }
.field-wide { grid-column: 1 / -1; }
.field label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.field-opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.field input, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  transition: border-color 0.2s var(--ease);
}
.field textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.field input:hover, .field textarea:hover { border-color: var(--muted); }
.field input.has-error, .field textarea.has-error { border-color: var(--error); }

.req-error {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--error);
  min-height: 0;
}
.req-error:empty { display: none; }

.req-nav { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.req-nav .btn-ghost { order: -1; }

.req-foot {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}

/* success state */
.req-done[hidden] { display: none; }
.done-mark {
  width: 42px;
  height: 42px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.done-mark span {
  width: 14px;
  height: 7px;
  border-left: 1.5px solid var(--brass-ink);
  border-bottom: 1.5px solid var(--brass-ink);
  transform: rotate(-45deg) translate(1px, -2px);
}
.req-done h3 { font-family: var(--font-display); font-size: clamp(1.45rem, 2.4vw, 1.95rem); }
.done-lede { margin-top: 12px; color: var(--muted); font-size: 0.96rem; }
.done-summary { margin: 26px 0 0; display: grid; }
.done-summary > div {
  display: grid;
  grid-template-columns: minmax(110px, 32%) 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.done-summary dt {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.done-summary dd { margin: 0; color: var(--ink); font-size: 0.96rem; }
.done-note {
  margin: 24px 0 22px;
  padding: 13px 16px;
  background: rgba(168, 131, 74, 0.12);
  border-left: 2px solid var(--brass);
  font-size: 0.88rem;
  color: var(--body);
}

/* ==========================================================================
   9 · FOOTER
   ========================================================================== */

.site-footer {
  background: var(--charcoal);
  color: var(--on-dark-mute);
  padding-bottom: clamp(34px, 4vw, 52px);
}
.footer-grid {
  display: grid;
  gap: clamp(26px, 3.5vw, 48px);
  padding-top: clamp(34px, 4vw, 52px);
  border-top: 1px solid var(--line-dark);
}
.brand-footer { color: var(--on-dark); }
.brand-footer .brand-mark { stroke: var(--on-dark); }
.brand-footer .brand-name em { color: var(--brass-lt); }
.brand-footer .brand-sub { color: var(--on-dark-mute); }
.footer-desc { margin-top: 18px; font-size: 0.9rem; max-width: 34ch; }

.footer-h {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--on-dark);
  margin-bottom: 14px;
}
.footer-nav ul { display: grid; gap: 2px; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--on-dark-mute);
  transition: color 0.2s var(--ease);
}
.footer-nav a:hover { color: var(--brass-lt); }

.footer-demo { font-size: 0.88rem; max-width: 40ch; }
/* Readable but visually secondary — a separate quiet line, not a
   continuation of the demo paragraph above it. */
.footer-disclosure {
  margin-top: 12px;
  font-size: 0.8rem;
  max-width: 40ch;
  color: var(--on-dark-mute);
  opacity: 0.8;
}
.footer-credit {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-dark);
  font-size: 0.85rem;
  color: var(--on-dark);
}

/* ==========================================================================
   RESPONSIVE — desktop layers on top of the mobile-first base
   ========================================================================== */

/* --- mobile-first specifics (base) --- */
.path-step { padding: 26px 0 26px 34px; }
.path-line { left: 6px; top: 0; bottom: 0; width: 1px; }
.path-fill { transform-origin: top center; }
.path-node { left: 0; top: 32px; }
.path-step:first-child .path-line { top: 32px; }
.path-step:last-child .path-line { bottom: auto; height: 32px; }

@media (min-width: 700px) {
  .approach-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .approach-head { grid-column: 1 / -1; }
  .approach-plan { grid-column: 1 / 7; }
  .approach-list { grid-column: 7 / -1; padding-left: clamp(8px, 2vw, 26px); }

  .space-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .space-pair { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; }
  .space-c { margin-top: clamp(32px, 5vw, 64px); }

  /* Image and its key stack in the left column; the priorities list and CTA
     hold the right column across both rows. */
  .plan-panel {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    row-gap: 0;
  }
  .plan-art  { grid-column: 1; grid-row: 1; }
  .plan-key  { grid-column: 1; grid-row: 2; }
  .plan-side { grid-column: 2; grid-row: 1 / span 2; }
  .mat-stage { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1fr); }
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    column-gap: clamp(32px, 4vw, 60px);
  }
  .hero-copy { grid-column: 1; grid-row: 1; padding-top: clamp(10px, 3vw, 44px); }
  .hero-plate { grid-column: 2; grid-row: 1 / span 2; }
  .hero-note { grid-column: 1; grid-row: 2; align-self: end; margin-top: 34px; }

  .work-head, .plan-head, .mat-head { }

  /* process becomes a horizontal pathway */
  .path { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .path-step { padding: 44px 26px 0 0; }
  .path-line { left: 0; right: 0; top: 6px; bottom: auto; height: 1px; width: auto; }
  .path-fill { transform-origin: left center; }
  .path-node { left: 0; top: 0; }
  /* The mobile base sets top:32px on the first line and height:32px on the
     last one. Both must be reset here, or step 1 gets a stray rule below its
     node and step 5 renders as a 26x32 brass block. */
  .path-line { left: 6px; }
  .path-step:first-child .path-line { top: 6px; }
  .path-step:last-child .path-line { display: none; }

  .start-grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
  .start-head { position: sticky; top: calc(var(--header-h) + 28px); }
}

/* --- mobile / tablet header --- */
@media (max-width: 979px) {
  .menu-btn { display: inline-flex; }
  .demo-chip { margin-left: auto; }
  .site-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px -28px rgba(35, 33, 30, 0.5);
    padding: 10px var(--pad-x) 20px;
    margin-left: 0;
    display: none;
  }
  .site-menu.is-open { display: block; }
  html:not(.js) .site-menu { display: block; position: static; box-shadow: none; border: 0; padding-inline: 0; }
  html:not(.js) .menu-btn { display: none; }
  html:not(.js) .header-row { flex-wrap: wrap; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a { min-height: 52px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
  .nav-list a::after { display: none; }
  .nav-list .nav-cta {
    margin: 16px 0 0;
    justify-content: center;
    border-bottom: 0;
  }
}

@media (max-width: 699px) {
  :root { --pad-x: 18px; }

  .demo-chip { font-size: 0.6rem; padding: 4px 8px; }
  .demo-chip .demo-long { display: none; }
  .brand-name { font-size: 1.1rem; }

  /* hero: the material label is dropped on phones so nothing sits over a
     small crop of the photograph */
  .shot-tag { display: none; }
  .hero-caption { font-size: 0.7rem; letter-spacing: 0.1em; gap: 10px; }

  .approach-item { grid-template-columns: 44px 1fr; }
  .ai-num { font-size: 2rem; }

  .space-spec > div { grid-template-columns: 1fr; gap: 4px; }
  .done-summary > div { grid-template-columns: 1fr; gap: 4px; }

  .plan-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .plan-tab { justify-content: center; padding-inline: 12px; }

  .opt-grid { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .req-nav { flex-direction: column-reverse; align-items: stretch; }
  .req-nav .btn { width: 100%; }
  .req-nav .btn-ghost { order: 0; }

  .hero-actions .btn { flex: 1 1 100%; }
}

/* Once the picker column drops under ~300px the two-up grid starts breaking
   palette names onto two lines, which reads as scrappy rather than premium.
   Below that, run one palette per row and give the arrows their own line. */
@media (max-width: 620px) {
  .finish-controls { flex-direction: column; align-items: stretch; }
  .finish-picker { grid-template-columns: minmax(0, 1fr); flex: 1 1 auto; }
  .finish-nav { justify-content: flex-start; }
}

@media (max-width: 420px) {
  :root { --pad-x: 15px; }
  .header-row { gap: 10px; }
  .brand-sub { display: none; }
  /* the header chip would crowd the menu button here — the hero note and
     footer still carry the Concept Demo label at every width */
  .site-header .demo-chip { display: none; }
}

/* ==========================================================================
   MOTION — layered on the finished base state, never required for meaning
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ---- scroll reveals ---- */
  .reveals-armed .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  }
  .reveals-armed .reveal.in { opacity: 1; transform: none; }
  .reveals-armed .approach-item.reveal { transition-delay: var(--rd, 0s); }

  /* ---- process pathway ---- */
  .js .path.animate .path-fill { transform: scaleX(0); transition: transform 0.7s var(--ease); }
  .js .path.animate .path-step.is-active .path-fill,
  .js .path.animate .path-step.is-complete .path-fill { transform: scaleX(1); }
  .js .path.animate .path-step { opacity: 0.45; transition: opacity 0.5s var(--ease); }
  .js .path.animate .path-step.is-active,
  .js .path.animate .path-step.is-complete { opacity: 1; }

  /* ---- HERO PHOTOGRAPH REVEAL (brand-defining motion) ----
     armed = pre-roll set synchronously so the finished photo never flashes;
     anim  = one ~2.6s mask reveal; done = finished, classes removed.
     The photograph carries the impact — the drafting marks are a small
     supporting gesture, not a blueprint overlay. */
  .hero-plate.armed .shot-frame { clip-path: inset(0 0 100% 0); }
  .hero-plate.armed .shot-img { transform: scale(1.04); }
  .hero-plate.armed .shot-tag,
  .hero-plate.armed .hero-caption { opacity: 0; }

  .hero-plate.anim .shot-frame { animation: shotReveal 1.35s var(--ease) both; }
  .hero-plate.anim .shot-img { animation: shotSettle 2.4s var(--ease) both; }
  /* Takes the slot the dimension line used to occupy so the sequence keeps
     its rhythm after that overlay was removed. */
  .hero-plate.anim .shot-tag {
    animation: riseIn 0.6s var(--ease) both;
    animation-delay: 1.25s;
  }
  .hero-plate.anim .hero-caption {
    animation: riseIn 0.6s var(--ease) both;
    animation-delay: 1.55s;
  }
  .hero-plate.anim .caption-track {
    animation: trackDraw 0.8s var(--ease) both;
    animation-delay: 1.55s;
  }


  /* ---- finish palette cross-over ----
     The six photographs are the same frame with a different finish, so the
     incoming one is revealed with a directional wipe rather than a fade —
     it reads as the material changing in place. The outgoing layer only
     fades and eases 1 → 1.01, which keeps the edges from crawling.
     Everything here is gated: with reduced motion the layers simply swap. */
  .js .finish-layer.is-entering {
    animation: finishWipeFwd 580ms cubic-bezier(0.65, 0, 0.2, 1) both;
  }
  .js .finish-view.dir-back .finish-layer.is-entering {
    animation-name: finishWipeBack;
  }
  .js .finish-layer.is-outgoing {
    animation: finishOut 580ms cubic-bezier(0.65, 0, 0.2, 1) both;
  }
  .js .finish-edge.is-running {
    animation: finishEdgeFwd 580ms cubic-bezier(0.65, 0, 0.2, 1) both;
  }
  .js .finish-view.dir-back .finish-edge.is-running {
    animation-name: finishEdgeBack;
  }

  /* ---- small interactions ---- */
  .js .plan-panel.swap { animation: panelIn 0.42s var(--ease) both; }
  .js .finish-detail.swap { animation: fdSwap 0.34s var(--ease) both; }
  .js .req-step.swap { animation: panelIn 0.34s var(--ease) both; }
  .js .req-done.swap { animation: panelIn 0.42s var(--ease) both; }
  .btn-solid:hover, .nav-list .nav-cta:hover { transform: translateY(-1px); }
}

@keyframes shotReveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes shotSettle { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes trackDraw { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Finish palette cross-over. Forward reveals from the right edge leftward;
   backward reveals from the left edge rightward. The brass hairline rides the
   same edge on the same curve, then drops out. */
@keyframes finishWipeFwd {
  from { opacity: 0; clip-path: inset(0 0 0 100%); }
  40%  { opacity: 1; }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes finishWipeBack {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  40%  { opacity: 1; }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes finishOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.01); }
}
@keyframes finishEdgeFwd {
  from { opacity: 0.9; transform: translateX(100%); }
  85%  { opacity: 0.9; }
  to   { opacity: 0; transform: translateX(0); }
}
@keyframes finishEdgeBack {
  from { opacity: 0.9; transform: translateX(-100%); }
  85%  { opacity: 0.9; }
  to   { opacity: 0; transform: translateX(0); }
}
@keyframes fdSwap { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* Reduced motion: everything above is opt-in, so nothing needs undoing —
   this block only disables the remaining CSS transitions and smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}