/* ============================================================
   KRAFLO — stylesheet
   White page, black line art, colour arriving on scroll.
   All colours live in :root and in the two .scene-* blocks —
   you should not need to touch anything else to re-skin the site.
   ============================================================ */

:root {
  /* --- surface ---
     The page is milky; --paper is the pure white kept for the two
     sections that should read as a clean sheet (reviews, contact). */
  --bg:         #FAF6EF;
  --bg-alt:     #F4EEE3;
  --bg-media:   #F0E9DC;
  --paper:      #FFFFFF;
  --ink:        #2A2018;
  --ink-soft:   #6B6259;
  --ink-faint:  #9A938B;
  --rule:       #E3DBCD;

  /* --- accents --- */
  --accent:     #E4572E;
  --accent-d:   #C3441F;
  --blue:       #4E86B7;
  --green:      #6BAE75;
  --yellow:     #F4B942;
  --pink:       #E86A9B;

  /* --- type --- */
  --font-display: ui-rounded, "SF Pro Rounded", "Nunito", "Avenir Next",
                  "Segoe UI", system-ui, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- shape --- */
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;

  --maxw: 1180px;
}

/* ============================================================
   BASE
   ============================================================ */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
/* the blanket display:block above would otherwise beat the hidden attribute */
[hidden] { display: none !important; }

/* the shape library is definitions only — never rendered directly */
.shape-library { position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.7rem); }
h3 { font-size: 1.22rem; }
h4 { font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--accent); color: #fff; }

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

.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: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 200; background: var(--ink); color: #fff;
  padding: .7rem 1.2rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 0; }

.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 780px); }

/* ============================================================
   ★ THE COLOURING SYSTEM
   Every illustration is drawn twice: once with these "blank board"
   values, once with the coloured values on top, revealed by a mask.
   ============================================================ */

/* blank white board, straight out of the box */
.scene-base {
  --ln:        #2A2018;   /* printed line art — never changes */
  --fold:      #C3BCB3;   /* dotted fold lines */
  --c-shadow:  #ECE8E2;

  --c-body:    #FFFFFF;
  --c-roof:    #FFFFFF;
  --c-trim:    #FFFFFF;
  --c-door:    #FFFFFF;
  --c-window:  #FFFFFF;
  --c-dark:    #FFFFFF;
  --c-white:   #FFFFFF;
  --c-accent:  #FFFFFF;
  --c-accent2: #FFFFFF;
  --c-veg:     #FFFFFF;
  --c-sky:     none;
  --c-ground:  #FFFFFF;
  --c-grass:   #E8E4DE;
}

/* coloured in */
.scene-color {
  --ln:        #2A2018;
  --fold:      #C3BCB3;
  --c-shadow:  #E3DED6;

  --c-body:    #FFE9C4;
  --c-roof:    #E4572E;
  --c-trim:    #F6E3C4;
  --c-door:    #B5784A;
  --c-window:  #8FD0E8;
  --c-dark:    #3A3028;
  --c-white:   #FFFFFF;
  --c-accent:  #E4572E;
  --c-accent2: #F4B942;
  --c-veg:     #6BAE75;
  --c-sky:     #D6EAF4;
  --c-ground:  #9CC487;
  --c-grass:   #7FAE69;
}

/* per-kit palettes */
.scene-color.v-castle   { --c-body:#F2E3C6; --c-trim:#EAD8B6; --c-roof:#4E86B7; --c-door:#A9714B; }
.scene-color.v-princess { --c-body:#FFF1F5; --c-trim:#FBE3EE; --c-roof:#E86A9B; --c-accent:#F4B942; --c-door:#C08552; --c-window:#A8DCEF; }
.scene-color.v-house    { --c-body:#FFE9C4; --c-roof:#E4572E; --c-trim:#D8BE9A; --c-door:#B5784A; }
.scene-color.v-van      { --c-body:#F5A9BE; --c-accent:#6BAE75; --c-accent2:#F4B942; --c-trim:#E8B784; --c-window:#8FD0E8; --c-dark:#3A3028; }
.scene-color.v-stall    { --c-body:#F6E3C4; --c-accent:#E4572E; --c-accent2:#F4B942; --c-door:#C08552; --c-trim:#D8BE9A; --c-veg:#6BAE75; }
.scene-color.v-rocket   { --c-body:#E7EEF4; --c-roof:#E4572E; --c-accent:#4E86B7; --c-accent2:#F4B942; --c-trim:#C9D6E2; --c-window:#8FD0E8; }
.scene-color.v-kitchen  { --c-body:#CFE3D4; --c-trim:#F2E4CC; --c-door:#E8C39E; --c-window:#3F4A44; --c-dark:#3A3028; --c-accent:#E4572E; --c-accent2:#6BAE75; }

/* ★ The kits colour in like someone is scribbling them with a marker:
   the mask is a single zig-zag stroke, thick enough that neighbouring
   passes overlap, drawn on with stroke-dashoffset. pathLength="1" means
   the dash maths is the same whatever the path actually measures.
   Pull the pointer away and the stroke retracts, leaving plain board. */
.paint-wipe {
  fill: none;
  stroke: #fff;
  stroke-width: 58;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .5s linear;
}
.card:hover .paint-wipe,
.card:focus-within .paint-wipe,
.card.is-painted .paint-wipe {
  stroke-dashoffset: 0;
  transition-duration: 1.6s;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  padding: .85rem 1.6rem;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: #fff; color: var(--ink);
  text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s, background .16s;
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(2px);  box-shadow: 0 1px 0 var(--ink); }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-d); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--bg-media); }

.btn-sm { padding: .5rem 1.05rem; font-size: .9rem; box-shadow: 0 3px 0 var(--ink); }
.btn-sm:hover { box-shadow: 0 5px 0 var(--ink); }
.btn-block { width: 100%; }

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 246, 239, .88);
  backdrop-filter: blur(14px);
  border-bottom: 2px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.site-header.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 6px 24px rgba(42,32,24,.05);
}

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; }

.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.logo-mark { width: 38px; height: 38px; flex: none; }
.logo-text { font-family: var(--font-display); font-weight: 900; font-size: 1.42rem; letter-spacing: .06em; }

.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav a {
  font-weight: 600; font-size: .96rem; text-decoration: none;
  color: var(--ink-soft); position: relative; padding: .2rem 0;
  transition: color .18s;
}
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2.5px; border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .22s;
}
.site-nav a:not(.btn):hover { color: var(--ink); }
.site-nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav-cta { color: #fff !important; }

.nav-toggle {
  display: none; width: 46px; height: 46px;
  border: 2.5px solid var(--ink); border-radius: 12px;
  background: #fff; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle-bars { display: grid; gap: 5px; }
.nav-toggle-bars i {
  display: block; width: 20px; height: 2.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .22s, opacity .22s;
}
.nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   SECTION FURNITURE
   ============================================================ */

.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--rule); }

/* the two sections that stay on a clean white sheet */
#reviews, #contact { background: var(--paper); border-block: 1px solid var(--rule); }

.section-head { max-width: 700px; margin-bottom: 3.2rem; }
.section-sub { color: var(--ink-soft); font-size: 1.07rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
  background: #fff; border: 2px solid var(--rule);
  padding: .35rem .85rem; border-radius: 999px;
  margin-bottom: 1.1rem;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }

/* ============================================================
   HERO
   ============================================================ */

.hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); }

.hero-inner {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
}

.hero-copy h1 em { font-style: normal; position: relative; white-space: nowrap; color: var(--accent); }
.hero-copy h1 em::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .04em;
  height: .26em; background: var(--yellow); opacity: .4;
  border-radius: 999px; z-index: -1;
}

.lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 46ch; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin: 1.8rem 0 2.3rem; }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 2.2rem;
  list-style: none; margin: 0; padding: 1.4rem 0 0;
  border-top: 2px dashed var(--rule);
}
.hero-stats li { display: grid; }
.hero-stats strong { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; line-height: 1; }
.hero-stats span { font-size: .85rem; color: var(--ink-soft); }

.hero-art { text-align: center; }
.hero-photos {
  display: flex; align-items: flex-end; justify-content: center; gap: .9rem;
}
.hero-photos .photo { margin: 0; flex: 0 1 auto; min-width: 0; }
.hero-photos img {
  width: auto; height: auto; max-width: 100%; max-height: 52vh;
  /* two layers: a short contact shadow plus a soft ambient one. Keeps the
     depth without the wide blur that reads as a grey slab behind the cut-out. */
  filter: drop-shadow(0 3px 3px rgba(42, 32, 24, .16))
          drop-shadow(0 15px 16px rgba(42, 32, 24, .14));
}
.hero-art-note {
  margin-top: .6rem; font-size: .85rem; color: var(--ink-faint);
  font-family: var(--font-display); font-weight: 700;
}

/* ============================================================
   TRUST STRIP
   ============================================================ */

.strip { background: var(--ink); color: #F3F0EB; }
.strip-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 1rem 2rem; padding: 1rem 0; font-size: .9rem; font-weight: 600;
}
.strip-inner span { display: inline-flex; align-items: center; gap: .5rem; }
.strip-inner span::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--yellow); flex: none;
}

/* ============================================================
   SIZE RANGE
   ============================================================ */

.scale {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.2rem .8rem;
  box-shadow: 0 6px 0 var(--rule);
  margin-bottom: 2.2rem;
}
.scale-floor { stroke: var(--ink); stroke-width: 4; }
.scale-kid path { stroke: var(--accent); stroke-width: 2.5; fill: none; }
.scale-kid text {
  fill: var(--accent); font-family: var(--font-display);
  font-weight: 700; font-size: 17px;
}
.scale-dim path { stroke: var(--ink-faint); stroke-width: 2.2; fill: none; }
.scale-dim text { fill: var(--ink-soft); font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.scale-label text {
  fill: var(--ink); font-family: var(--font-display); font-weight: 800;
  font-size: 22px; text-anchor: middle;
}

.size-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.size-card {
  background: #fff; border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  padding: 1.6rem; box-shadow: 0 6px 0 var(--rule);
}
.size-num {
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  color: var(--accent); margin-bottom: .2rem;
}
.size-card p:not(.size-num):not(.size-meta) { color: var(--ink-soft); font-size: .95rem; }
.size-meta {
  margin-top: 1rem; padding-top: .9rem; border-top: 2px dashed var(--rule);
  font-size: .85rem; color: var(--ink-faint); font-weight: 600;
}

/* ============================================================
   STEPS
   ============================================================ */

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
}
.step {
  position: relative; background: #fff;
  border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  padding: 2.4rem 1.7rem 1.7rem;
  box-shadow: 0 6px 0 var(--rule);
}
.step-num {
  position: absolute; top: -20px; left: 1.7rem;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  border: 2.5px solid var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
}
.step-icon { width: 56px; height: 56px; margin-bottom: 1rem; }
.step p { color: var(--ink-soft); font-size: .97rem; margin: 0; }

/* ============================================================
   ★ SPINNING SPEC MODEL
   A real CSS 3D model: flat cardboard panels folded into place, so it
   turns to any angle rather than stepping between photographs.

   Each panel is centred on the rig origin with negative margins, NOT
   with translate(-50%,-50%): transform-origin is the element's own
   centre, so a -50% translate inside the transform chain gets counted
   twice and the panels drift apart. Margins move the box before any
   transform runs, so rotations then happen about the panel's centre.
   Panel sizes and positions are written inline by the generator.
   ============================================================ */

.spec { padding-block: clamp(2.5rem, 5vw, 4rem); }

.spec-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}

/* the model stays put on the left while the specs scroll past on the right */
.spec-stage {
  height: min(calc(100vh - 130px), 540px);
  display: grid; grid-template-rows: auto 1fr auto; gap: .9rem;
  justify-items: center; align-content: center;
}

.model-switch { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.model-btn {
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .4rem .8rem;
  border: 2px solid var(--rule); border-radius: 999px;
  background: #fff; color: var(--ink-soft);
  cursor: pointer; transition: .18s;
}
.model-btn:hover { border-color: var(--ink); color: var(--ink); }
.model-btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.spin-scene {
  width: 100%; height: 100%; min-height: 0;
  display: grid; place-items: center;
  perspective: 1600px; perspective-origin: 50% 46%;
  cursor: grab; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.spin-scene.is-dragging { cursor: grabbing; }

/* Four photographs per kit, stacked. The turntable cross-fades between the
   two neighbouring frames, so a quarter-turn reads as a soft pass rather
   than a jump cut. */
.spin-frames {
  position: relative;
  display: none;
  height: 100%; width: 100%;
}
.spin-frames.is-on { display: block; }

.spin-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  -webkit-user-drag: none; user-select: none;
  filter: drop-shadow(0 3px 3px rgba(42, 32, 24, .14))
          drop-shadow(0 13px 14px rgba(42, 32, 24, .12));
}
.spin-frame.is-on { opacity: 1; }

/* kits without photographs fall back to their flat drawing */
.spin-flat { display: grid; place-items: center; width: 100%; height: 100%; }
.spin-flat[hidden] { display: none; }
.spin-flat svg { width: min(100%, 420px); height: auto; }

.spin-bar {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.spin-readout {
  background: var(--ink); color: #fff;
  padding: .28rem .75rem; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.spin-hint { transition: opacity .3s; }
.spin-scene.is-dragging ~ .spin-bar .spin-hint { opacity: 0; }

.spec-head { margin-bottom: 1rem; }
/* a short hold so the model stays put a moment after the last spec */
.spec-dwell { display: none; }

.spec-list { margin: 0 0 1.8rem; display: grid; }

/* the whole spec sheet is readable at a glance */
.spec-step {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; padding: .95rem 0;
  border-top: 1px solid var(--rule);
}
.spec-step:last-child { border-bottom: 1px solid var(--rule); }

.spec-list dt {
  display: flex; gap: .9rem; align-items: center;
  font-family: var(--font-mono); font-size: .76rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft);
}
.spec-list dt i { font-style: normal; color: var(--accent); }
.spec-list dd {
  margin: 0; text-align: right;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  letter-spacing: -.01em; line-height: 1.2;
}

/* ============================================================
   RANGE / CARDS
   ============================================================ */

.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.2rem; }
.filter {
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  padding: .5rem 1.1rem;
  border: 2.5px solid var(--rule); border-radius: 999px;
  background: #fff; color: var(--ink-soft);
  cursor: pointer; transition: .18s;
}
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 1.6rem; }

.card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: 0 6px 0 var(--rule);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 11px 0 var(--rule); }
.card.is-hidden { display: none; }

.card-media {
  position: relative;
  background: var(--bg-media);
  border-bottom: 2.5px solid var(--ink);
  padding: 1rem;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
}
.card-media .art { width: 100%; height: 100%; }

.size-badge {
  position: absolute; top: .7rem; right: .7rem; z-index: 1;
  font-family: var(--font-display); font-weight: 800; font-size: .78rem;
  background: #fff; color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 999px;
  padding: .12rem .6rem;
}

.card-body { padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.card-tag {
  font-family: var(--font-display); font-weight: 700;
  font-size: .73rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .35rem;
}
.card h3 { margin-bottom: .4rem; font-size: 1.14rem; }
.card-desc { color: var(--ink-soft); font-size: .92rem; flex: 1; }
.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; margin-top: 1.1rem; padding-top: 1rem;
  border-top: 2px dashed var(--rule);
}
.price { font-family: var(--font-display); font-weight: 800; font-size: 1.14rem; }
.price-lg { font-size: 1.7rem; }

.grid-empty { text-align: center; color: var(--ink-soft); padding: 3rem 0; }

/* ============================================================
   FEATURES
   ============================================================ */

.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.feature {
  background: #fff; border: 2.5px solid var(--rule); border-radius: var(--r);
  padding: 1.7rem 1.4rem;
  transition: border-color .2s, transform .2s;
}
.feature:hover { border-color: var(--ink); transform: translateY(-3px); }
.feature-icon { width: 46px; height: 46px; margin-bottom: .9rem; }
.feature h3 { font-size: 1.06rem; }
.feature p { color: var(--ink-soft); font-size: .92rem; margin: 0; }

/* ============================================================
   QUOTE
   ============================================================ */

.quote-band {
  background: var(--ink); color: #fff;
  padding: clamp(3rem, 6vw, 5rem) 0; text-align: center;
}
.quote-band blockquote { margin: 0; }
.quote-band p {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.25rem, 2.5vw, 1.9rem);
  line-height: 1.35; letter-spacing: -.015em;
}
.quote-band cite { font-style: normal; color: #B7AFA6; font-size: .93rem; }

/* ============================================================
   REVIEWS
   ============================================================ */

.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.review {
  margin: 0; background: #fff;
  border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  padding: 1.6rem; box-shadow: 0 6px 0 var(--rule);
  display: flex; flex-direction: column; gap: 1rem;
}
.stars { color: var(--yellow); letter-spacing: .12em; font-size: 1.05rem; }
.review blockquote { margin: 0; flex: 1; color: var(--ink-soft); font-size: .96rem; }
.review figcaption { display: flex; align-items: center; gap: .75rem; }
.review figcaption span:last-child { display: grid; line-height: 1.3; }
.review small { color: var(--ink-faint); font-size: .82rem; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--bg-media); border: 2.5px solid var(--ink);
  font-family: var(--font-display); font-weight: 800;
}

/* ============================================================
   FAQ
   ============================================================ */

.faq { display: grid; gap: .8rem; }
.faq details {
  background: #fff; border: 2.5px solid var(--rule);
  border-radius: var(--r); padding: 0 1.3rem;
  transition: border-color .2s;
}
.faq details[open] { border-color: var(--ink); }
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.04rem;
  padding: 1.15rem 2.2rem 1.15rem 0; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; font-weight: 400; line-height: 1;
  color: var(--accent); transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq p { padding-bottom: 1.25rem; color: var(--ink-soft); font-size: .96rem; margin: 0; }

/* ============================================================
   CONTACT
   ============================================================ */

.cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.contact-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.contact-list li { display: grid; gap: .1rem; }
.contact-list strong {
  font-size: .77rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
}
.contact-list a { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; }

.cta-form {
  background: #fff; border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  padding: 1.8rem; box-shadow: 0 8px 0 var(--rule);
  display: grid; gap: 1rem;
}
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: .89rem; }
.optional { color: var(--ink-faint); font-weight: 400; }
.field input, .field textarea {
  font: inherit; font-size: .97rem;
  padding: .75rem .9rem;
  border: 2.5px solid var(--rule); border-radius: var(--r-sm);
  background: var(--bg-alt); color: var(--ink);
  resize: vertical; transition: border-color .18s, background .18s;
}
.field input:focus, .field textarea:focus { border-color: var(--ink); background: #fff; outline: none; }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--accent); }

.form-note { font-size: .81rem; color: var(--ink-faint); margin: 0; text-align: center; }
.form-status { font-size: .92rem; font-weight: 600; color: var(--green); margin: 0; text-align: center; }
.form-status:empty { display: none; }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer { background: var(--ink); color: #F3F0EB; padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.4rem; padding-bottom: 2.5rem; }
.footer-brand p { color: #B7AFA6; font-size: .92rem; max-width: 34ch; margin-top: 1rem; }
.logo-light .logo-text { color: #fff; }
.footer-col { display: grid; gap: .55rem; align-content: start; }
.footer-col h4 { color: #B7AFA6; margin-bottom: .3rem; }
.footer-col a { color: #F3F0EB; text-decoration: none; font-size: .93rem; width: fit-content; transition: color .18s; }
.footer-col a:hover { color: var(--yellow); }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
  border-top: 1px solid rgba(243,240,235,.16);
  padding-top: 1.4rem; font-size: .83rem; color: #B7AFA6;
}
.footer-bottom p { margin: 0; }

/* ============================================================
   MODAL
   ============================================================ */

.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.5rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(42,32,24,.55); backdrop-filter: blur(4px); }

.modal-panel {
  position: relative;
  width: min(100%, 900px); max-height: 88vh; overflow: auto;
  display: grid; grid-template-columns: 1fr 1.15fr;
  background: #fff; border: 3px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: 0 28px 60px rgba(42,32,24,.3);
  animation: pop .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop { from { transform: scale(.94) translateY(10px); opacity: 0; } }

.modal-close {
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 2.5px solid var(--ink); background: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.modal-close:hover { background: var(--accent); color: #fff; }

.modal-spin {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1;
}
.modal-spin[hidden] { display: none; }
.modal-spin img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 3px 3px rgba(42, 32, 24, .13))
          drop-shadow(0 12px 13px rgba(42, 32, 24, .11));
}

.modal-media {
  background: var(--bg-media);
  border-right: 2.5px solid var(--ink);
  display: grid; place-items: center; padding: 1.5rem;
}
.modal-body { padding: 2rem 1.9rem; }

/* one tab per version of the kit; hidden when there is only one */
.modal-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.modal-tabs[hidden] { display: none; }
.modal-tab {
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
  padding: .35rem .75rem;
  border: 2px solid var(--rule); border-radius: 999px;
  background: #fff; color: var(--ink-soft);
  cursor: pointer; transition: .18s;
}
.modal-tab:hover { border-color: var(--ink); color: var(--ink); }
.modal-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.modal-body h3 { font-size: 1.55rem; }
.modal-body > p { color: var(--ink-soft); font-size: .96rem; }

.specs { margin: 1.4rem 0; display: grid; gap: .6rem; }
.specs > div {
  display: grid; grid-template-columns: 120px 1fr; gap: 1rem;
  padding-bottom: .6rem; border-bottom: 2px dashed var(--rule);
}
.specs dt { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.specs dd { margin: 0; font-size: .94rem; font-weight: 600; }

.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

body.is-locked { overflow: hidden; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-delay { transition-delay: .12s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .size-cards { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 540px; margin-inline: auto; }
  .steps, .reviews { grid-template-columns: 1fr; }
  .cta-inner { grid-template-columns: 1fr; }
  .spec-inner { grid-template-columns: 1fr; }
  .spec-stage { order: -1; height: 400px; }
  .modal-panel { grid-template-columns: 1fr; max-height: 92vh; }
  .modal-media { border-right: 0; border-bottom: 2.5px solid var(--ink); }
  /* narrow screens: let the three blocks hug each other and centre as a group,
     otherwise the wide scene leaves big gaps above and below */
}

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed; inset: 62px 0 auto;
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: #fff; border-bottom: 2.5px solid var(--ink);
    padding: 1rem 1.25rem 1.5rem;
    box-shadow: 0 14px 32px rgba(42,32,24,.12);
    transform: translateY(-120%); opacity: 0; pointer-events: none;
    transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .2s;
  }
  .site-nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .site-nav a { padding: .8rem .2rem; font-size: 1.05rem; border-bottom: 1px solid var(--rule); }
  .site-nav a:not(.btn)::after { display: none; }
  .nav-cta { margin-top: .8rem; border-bottom: 0 !important; text-align: center; }

  body { font-size: 16px; }
  .features { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .hero-stats { gap: 1.4rem; }
  .spec-stage { height: 330px; }
  .scale { padding: 1rem .6rem .4rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .paint-wipe { stroke-dashoffset: 0; }
}