/* =====================================================================
   AcoustiSlat — Acoustic Wood Slat Panels
   Design system & components
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* surfaces */
  --bone: #f7f3ec;
  --cream: #fcf9f3;
  --sand: #efe7d9;
  --sand-2: #e7dccb;
  --ink: #1b1712;
  --ink-soft: #5d544a;
  --ink-faint: #8a7f72;
  --line: #e5dccd;
  --line-strong: #d8cdba;
  --char: #211d18;
  --char-2: #2b251f;
  --char-3: #383027;

  /* brand */
  --red: #d8281c;
  --red-deep: #b21d13;
  --red-soft: #f7e3e0;
  --wood: #b07a48;
  --leaf: #4f7a52;

  /* type */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* shape */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* shadow */
  --sh-1: 0 1px 2px rgba(40, 30, 18, .06), 0 2px 8px rgba(40, 30, 18, .05);
  --sh-2: 0 6px 18px rgba(40, 30, 18, .09), 0 2px 6px rgba(40, 30, 18, .06);
  --sh-3: 0 24px 60px rgba(30, 22, 12, .18), 0 8px 20px rgba(30, 22, 12, .10);

  --maxw: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* The header is sticky (fixed on the home page), so an anchor landing flush
   with the viewport top lands underneath it. :where() keeps this at zero
   specificity, so any section can still set its own. */
:where(section[id], footer[id], div[id]) { scroll-margin-top: 88px; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bone);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }
ul { list-style: none; }
::selection { background: var(--red); color: #fff; }

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; color: var(--ink); }
.eyebrow {
  font-family: var(--sans);
  font-weight: 600; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--red); display: inline-flex; align-items: center; gap: .55rem;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--red); display: inline-block; }
.eyebrow.center::before { display: none; }
.lead { font-size: 1.18rem; color: var(--ink-soft); line-height: 1.7; }
.muted { color: var(--ink-soft); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 92px 0; }
.section.tight { padding: 64px 0; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.grid { display: grid; gap: 28px; }
.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 18px 0 0; }
.section-head p { margin-top: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  padding: 15px 26px; border-radius: 100px; transition: all .25s var(--ease);
  white-space: nowrap; line-height: 1;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(216, 40, 28, .28); }
.btn-primary:hover { background: var(--red-deep); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(216, 40, 28, .34); }
.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: #000; transform: translateY(-2px); }
.btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn-outline:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-lg { padding: 17px 32px; font-size: 1rem; }
.btn-block { width: 100%; }
.link-arrow { font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: .5rem; transition: gap .2s var(--ease); }
.link-arrow:hover { gap: .8rem; color: var(--red); }
.link-arrow svg { width: 16px; height: 16px; }

/* =====================================================================
   Announcement + Header
   ===================================================================== */
.announce {
  background: var(--char); color: #f1e9da; text-align: center;
  font-size: .8rem; letter-spacing: .04em; padding: 9px 16px;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
/* The absorption figure, wherever it reads as a figure rather than prose:
   the announcement banner, the PDP badge, the spec table, the why-cards. It
   sets family and tracking only, so size and colour stay with whatever it sits
   in. .giant is the display variant of the same figure — see home.css. */
/* text-transform is pinned because the PDP badge uppercases its contents, which
   turned the figure into "ΑW = 0.95" — a capital alpha. The approved form is
   "αw = 0.95" everywhere (task P7), so the figure opts out of its context. */
.aw { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; text-transform: none; }

.announce strong { color: #fff; font-weight: 600; }
.announce .dot { color: var(--red); }

header.site {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 243, 236, .82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease);
}
header.site.scrolled { box-shadow: var(--sh-1); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 20px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { font-size: .92rem; font-weight: 500; color: var(--ink-soft); position: relative; transition: color .2s; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--red); transition: width .25s var(--ease);
}
.nav-links a:hover::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink); transition: background .2s; position: relative;
}
.icon-btn:hover { background: var(--sand); }
.icon-btn svg { width: 21px; height: 21px; }
.menu-btn { display: none; }

/* Supplied-by lockup in the nav bar, right of "Get a quote" */
.nav-partners {
  display: flex; align-items: center; gap: 16px;
  margin-left: 10px; padding-left: 18px; border-left: 1px solid var(--line-strong);
}
.np-item { display: flex; flex-direction: column; align-items: center; gap: 3px; transition: opacity .2s; }
.np-item:hover { opacity: .75; }
.np-lbl { font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; line-height: 1; }
.np-item img { display: block; width: auto; }
.np-item img.owa { height: 32px; }
.np-item img.ideatec { height: 34px; }
/* Logo, six links, the button and the lockup only share a row on wide screens */
@media (max-width: 1180px) { .nav-partners { display: none; } }

/* Logo */
/* Supplied AcoustiSlat artwork, white keyed out — see tools/logo-alpha.js.
   Two variants because the dark ink disappears on the home page's dark header
   and the red must survive; the light one is swapped in there and in the footer. */
.logo { display: inline-flex; align-items: center; }
.logo img { display: block; width: auto; height: 26px; }
.logo .logo-light { display: none; }

/* =====================================================================
   Slat panel renderer (CSS finishes)
   ===================================================================== */
.slat {
  --w1: #cba372; --w2: #a87b4a; --gap: #1b140d; --grain: rgba(72, 46, 24, .10);
  display: block;
  position: relative; overflow: hidden;
  background-color: var(--w1);
  /* layers, top -> bottom: grain, slat grooves+shading, wood-tone base */
  background-image:
    repeating-linear-gradient(0deg, var(--grain) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .14) 0px,
      rgba(255, 255, 255, .10) 4px,
      rgba(255, 255, 255, .05) 15px,
      rgba(0, 0, 0, .05) 24px,
      rgba(0, 0, 0, .34) 29px,
      var(--gap) 31px,
      var(--gap) 39px,
      rgba(0, 0, 0, .34) 41px,
      rgba(0, 0, 0, .14) 43px),
    linear-gradient(180deg, color-mix(in srgb, var(--w1) 78%, #fff) 0%, var(--w1) 34%, var(--w2) 100%);
  background-size: 100% 100%, 43px 100%, 100% 100%;
}
.slat::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .12) 0%, transparent 30%),
    radial-gradient(130% 90% at 50% -15%, rgba(255, 255, 255, .12), transparent 55%);
  pointer-events: none;
}
.slat.horizontal {
  background-image:
    repeating-linear-gradient(90deg, var(--grain) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, .14) 0px,
      rgba(255, 255, 255, .10) 4px,
      rgba(255, 255, 255, .05) 15px,
      rgba(0, 0, 0, .05) 24px,
      rgba(0, 0, 0, .34) 29px,
      var(--gap) 31px,
      var(--gap) 39px,
      rgba(0, 0, 0, .34) 41px,
      rgba(0, 0, 0, .14) 43px),
    linear-gradient(90deg, color-mix(in srgb, var(--w1) 78%, #fff) 0%, var(--w1) 34%, var(--w2) 100%);
  background-size: 100% 100%, 100% 43px, 100% 100%;
}

/* finish variables
   Walnut and Fresno Mystic are sampled from the product photography in
   site/assets/img/finishes/ — base tone, shadowed lower band, and the near-black
   acoustic felt visible through the gaps. They now only show where a photograph
   cannot be used (an unloaded image, a print stylesheet), so the closer they sit
   to the real thing the less a fallback jars.

   Oak is untouched: there is no Oak photograph to sample, so its values remain
   the original hand-picked ones. Its --gap is a warm brown-black where the
   photographed felt is neutral; that is the giveaway that it has not been
   measured against a real panel. */
.f-oak      { --w1: #cba372; --w2: #a8763f; --gap: #241b12; }
.f-walnut   { --w1: #6c4a37; --w2: #4e3527; --gap: #0f0d0b; }
.f-fresno-mystic { --w1: #e4c8a3; --w2: #bfa480; --gap: #0e0d0c; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease-in-out; }
.hero-bg img.active { opacity: 1; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 14, 8, .55) 0%, rgba(20, 14, 8, .05) 28%, rgba(18, 12, 6, .15) 55%, rgba(14, 9, 4, .82) 100%),
    linear-gradient(90deg, rgba(14, 9, 4, .6) 0%, transparent 50%);
}
.hero .wrap { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 64px; width: 100%; }
.hero-inner { max-width: 720px; background: rgba(0,0,0,.52); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 44px 48px; border-radius: 14px; }
.hero h1 {
  color: #fff; font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: .98; letter-spacing: -.02em;
  font-weight: 500; text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
}
.hero h1 em { font-style: italic; color: #f3c9a0; }
.hero p { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: rgba(255, 255, 255, .9); margin: 22px 0 32px; max-width: 540px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-price { font-size: .9rem; color: rgba(255, 255, 255, .75); margin-left: 4px; }
.hero-price b { color: #fff; font-size: 1.05rem; font-family: var(--serif); }
.hero-badges {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 40px;
  padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero-badge { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: rgba(255, 255, 255, .85); }
.hero-badge svg { width: 19px; height: 19px; color: #f3c9a0; flex: none; }
.hero-badge b { color: #fff; font-weight: 600; }
.scroll-hint {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .6);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scroll-hint .line { width: 1px; height: 34px; background: linear-gradient(rgba(255, 255, 255, .6), transparent); animation: drop 2s var(--ease) infinite; }
@keyframes drop { 0% { opacity: 0; transform: scaleY(.3); transform-origin: top; } 40% { opacity: 1; } 100% { opacity: 0; transform: scaleY(1); transform-origin: top; } }

/* ---------- Marquee / trust strip ---------- */
.trustbar { background: var(--char); color: #e8dfce; padding: 22px 0; overflow: hidden; }
.trustbar .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 40px; }
.trust-item { display: flex; align-items: center; gap: 11px; font-size: .92rem; }
.trust-item svg { width: 22px; height: 22px; color: #f3c9a0; flex: none; }
.trust-item b { color: #fff; font-weight: 600; }

/* =====================================================================
   Intro / split
   ===================================================================== */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media { position: relative; }
.split-media img, .split-media .slat { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.split-media .slat { aspect-ratio: 4/5; }
.split h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin: 18px 0 0; }
.split p { margin-top: 18px; }
.float-badge {
  position: absolute; background: var(--cream); border-radius: var(--r); box-shadow: var(--sh-3);
  padding: 16px 20px; display: flex; align-items: center; gap: 14px;
}
.float-badge .num { font-family: var(--serif); font-size: 2.1rem; color: var(--red); line-height: 1; }
.float-badge small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); }
.float-badge .lbl { font-weight: 600; font-size: .92rem; }
.float-badge.br { right: -22px; bottom: -22px; }

.stat-row { display: flex; gap: 36px; margin-top: 30px; flex-wrap: wrap; }
.stat .v { font-family: var(--serif); font-size: 2.1rem; color: var(--ink); line-height: 1; }
.stat .k { font-size: .82rem; color: var(--ink-soft); margin-top: 6px; }

/* =====================================================================
   Benefits grid
   ===================================================================== */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bcard {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 32px 28px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.bcard:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--line-strong); }
.bcard .ic {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--sand); color: var(--red); margin-bottom: 20px;
}
.bcard .ic svg { width: 26px; height: 26px; }
.bcard h3 { font-size: 1.28rem; }
.bcard p { margin-top: 10px; font-size: .95rem; color: var(--ink-soft); }

/* =====================================================================
   Finishes
   ===================================================================== */
.finishes-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.finish-card { text-align: center; cursor: pointer; }
.finish-card .swatch {
  aspect-ratio: 3/4; border-radius: var(--r); box-shadow: var(--sh-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  border: 1px solid rgba(0, 0, 0, .06);
}
.finish-card:hover .swatch { transform: translateY(-6px) scale(1.02); box-shadow: var(--sh-2); }
.finish-card .nm { margin-top: 14px; font-weight: 600; font-size: .95rem; }
.finish-card .tg { font-size: .8rem; color: var(--ink-faint); }

/* =====================================================================
   Gallery (inspiration)
   ===================================================================== */
/* dense: a .wide tile that will not fit the columns left in the current row
   is skipped and a later tile backfilled into the space, instead of the
   auto-placer leaving the hole and moving everything down a row. */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 16px; grid-auto-flow: row dense; }
.gtile { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); }
.gtile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gtile:hover img { transform: scale(1.06); }
.gtile .cap {
  position: absolute; left: 14px; bottom: 12px; z-index: 2; color: #fff;
  font-size: .82rem; font-weight: 500; opacity: 0; transform: translateY(8px); transition: all .3s var(--ease);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.gtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent 45%); opacity: 0; transition: opacity .3s; }
.gtile:hover::after { opacity: 1; }
.gtile:hover .cap { opacity: 1; transform: translateY(0); }
.gtile.wide { grid-column: span 2; }
.gtile.tall { grid-row: span 2; }
.gtile.big { grid-column: span 2; grid-row: span 2; }

/* =====================================================================
   Acoustic / dark feature band
   ===================================================================== */
.band-dark { background: var(--char); color: #efe6d6; position: relative; overflow: hidden; }
.band-dark .eyebrow { color: #f3c9a0; }
.band-dark .eyebrow::before { background: #f3c9a0; }
.band-dark h2 { color: #fff; }
.band-dark .slat-deco { position: absolute; inset: 0; opacity: .14; }
.acoustic-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2; }
.meter { background: var(--char-2); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--r-lg); padding: 30px; }
.meter h4 { color: #fff; font-size: 1.05rem; margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
.meter h4 svg { width: 20px; height: 20px; color: #f3c9a0; }
.bar-row { margin-bottom: 18px; }
.bar-row .top { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: 7px; color: #d9cfbe; }
.bar-row .top b { color: #fff; }
.bar { height: 11px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--red), #f3935a); width: 0; transition: width 1.2s var(--ease); }
.bar.muted i { background: rgba(255, 255, 255, .28); }
.acoustic-copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.acoustic-copy p { color: #cabfae; margin-top: 18px; }
.big-absorb { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 4px; }
.big-absorb .n { font-family: var(--serif); font-size: 5rem; line-height: 1; color: #fff; }
.big-absorb .u { color: #f3c9a0; font-size: 1rem; max-width: 180px; }

/* =====================================================================
   Steps / how it works
   ===================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: s; }
.step { position: relative; padding-top: 18px; }
.step .n {
  font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--red);
  width: 44px; height: 44px; border: 1.5px solid var(--red); border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 18px; background: var(--cream);
}
.step h3 { font-size: 1.18rem; }
.step p { margin-top: 8px; font-size: .92rem; color: var(--ink-soft); }
.step::before { content: ""; position: absolute; top: 40px; left: 60px; right: -12px; height: 1.5px; background: var(--line-strong); z-index: -1; }
.step:last-child::before { display: none; }

/* =====================================================================
   Testimonials
   ===================================================================== */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; }
.quote .stars { color: var(--red); letter-spacing: 2px; font-size: .95rem; margin-bottom: 14px; }
.quote p { font-size: 1.02rem; line-height: 1.6; }
.quote .who { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.quote .av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--wood); font-size: .95rem; }
.quote .who b { font-size: .92rem; }
.quote .who small { display: block; color: var(--ink-faint); font-size: .8rem; }

/* =====================================================================
   CTA band
   ===================================================================== */
.cta-band { position: relative; border-radius: var(--r-xl); overflow: hidden; color: #fff; }
.cta-band .bg { position: absolute; inset: 0; }
.cta-band .bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 13, 7, .88), rgba(20, 13, 7, .45)); }
.cta-band .inner { position: relative; z-index: 2; padding: 72px 60px; max-width: 620px; }
.cta-band h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); }
.cta-band p { color: rgba(255, 255, 255, .88); margin: 16px 0 30px; font-size: 1.1rem; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 4px; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--ink); }
.faq-q .pm { flex: none; width: 26px; height: 26px; position: relative; transition: transform .3s var(--ease); }
.faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; background: var(--red); border-radius: 2px; }
.faq-q .pm::before { left: 50%; top: 4px; bottom: 4px; width: 2px; transform: translateX(-50%); }
.faq-q .pm::after { top: 50%; left: 4px; right: 4px; height: 2px; transform: translateY(-50%); }
.faq-item.open .pm { transform: rotate(135deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-a-inner { padding: 0 4px 26px; color: var(--ink-soft); }

/* =====================================================================
   Footer
   ===================================================================== */
footer.site { background: var(--char); color: #c8bdac; padding: 72px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 44px; }
footer.site h5 { color: #fff; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; font-family: var(--sans); font-weight: 600; }
footer.site .logo { margin-bottom: 16px; }
footer.site .logo img { height: 30px; }
.foot-about p { font-size: .9rem; line-height: 1.7; max-width: 300px; }
.foot-links a { display: block; padding: 6px 0; font-size: .92rem; transition: color .2s, padding-left .2s; }
.foot-links a:hover { color: #fff; padding-left: 5px; }
.foot-contact p { font-size: .9rem; margin-bottom: 14px; line-height: 1.6; }
.foot-contact p a { color: #a99e8d; }
.foot-contact p a:hover { color: #fff; text-decoration: underline; }
/* Quality proof line under the footer blurb (review of 1 Sep 2026, slide 1). */
.foot-proof { margin-top: 12px; font-size: .86rem; color: #c8bdac; font-weight: 500; }
/* Connect with us: under the two link columns, level with the bottom of the
   About and Talk to us columns, which span both rows. */
.foot-about, .foot-contact { grid-row: span 2; }
.foot-connect { grid-column: 2 / 4; grid-row: 2; align-self: end; }
.foot-social { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.foot-social a { display: inline-flex; align-items: center; gap: 10px; font-size: .92rem; transition: color .2s; }
.foot-social a:hover { color: #fff; }
.foot-social .ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; flex: none; transition: transform .2s, filter .2s; }
.foot-social a:hover .ic { transform: translateY(-2px); filter: brightness(1.08); }
.foot-social .ic.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.foot-social .ic.wa { background: #25d366; }
.foot-contact b { color: #fff; display: block; font-size: .82rem; letter-spacing: .04em; }
.foot-contact a { color: #f3c9a0; }
.newsletter { display: flex; gap: 8px; margin-top: 12px; }
.newsletter input { flex: 1; background: var(--char-2); border: 1px solid rgba(255, 255, 255, .12); color: #fff; border-radius: 100px; padding: 12px 18px; font-size: .9rem; }
.newsletter input::placeholder { color: #8d8273; }
.newsletter button { background: var(--red); color: #fff; border-radius: 100px; padding: 0 18px; display: grid; place-items: center; }
.newsletter button svg { width: 18px; height: 18px; }
.foot-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 54px; padding-top: 26px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: .82rem; }
.certs { display: flex; gap: 16px; align-items: center; color: #9a8f7e; font-size: .78rem; flex-wrap: wrap; }
.certs span { display: inline-flex; align-items: center; gap: 6px; }
.certs b { color: #c8bdac; }

/* =====================================================================
   Quantity stepper (shared by the PDP and the quote modal)
   ===================================================================== */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 100px; overflow: hidden; }
.qty button { width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink-soft); transition: background .2s; }
.qty button:hover { background: var(--sand); color: var(--ink); }
.qty span { min-width: 30px; text-align: center; font-weight: 600; font-size: .9rem; }

/* =====================================================================
   Toast
   ===================================================================== */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 120%);
  background: var(--ink); color: #fff; padding: 14px 22px; border-radius: 100px;
  z-index: 120; display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 500;
  box-shadow: var(--sh-3); transition: transform .4s var(--ease);
}
.toast.show { transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; color: #7fd18a; }

/* =====================================================================
   Breadcrumb
   ===================================================================== */
.crumb { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--ink-faint); padding: 22px 0 0; }
.crumb a:hover { color: var(--ink); }
.crumb span { color: var(--ink); font-weight: 500; }

/* =====================================================================
   Product page (PDP)
   ===================================================================== */
.pdp { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; padding: 28px 0 40px; align-items: start; }
.pdp-gallery { position: sticky; top: 90px; }
.pdp-main { aspect-ratio: 4/5; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); position: relative; }
.pdp-main .slat { width: 100%; height: 100%; }
.pdp-main img { width: 100%; height: 100%; object-fit: cover; }
.pdp-main .tag { position: absolute; top: 16px; left: 16px; background: var(--red); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 7px 13px; border-radius: 100px; z-index: 3; }
/* The gap above the strip belongs to the viewport, not the strip: on mobile
   the viewport is clipped to exactly one row, and a top margin inside it
   would push that row down and out of its own window. */
.pdp-thumbs-viewport { margin-top: 14px; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pdp-thumbs .t { aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color .2s; }
.pdp-thumbs .t.active { border-color: var(--ink); }
.pdp-thumbs .t img, .pdp-thumbs .t .slat { width: 100%; height: 100%; object-fit: cover; }

.pdp-info .rating { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--ink-soft); }
.pdp-info .rating .stars { color: var(--red); letter-spacing: 1px; }
.pdp-title { font-size: clamp(2rem, 3.6vw, 2.8rem); margin: 12px 0 14px; }
.pdp-price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.pdp-price .now { font-family: var(--serif); font-size: 2.2rem; color: var(--ink); }
.pdp-price .was { color: var(--ink-faint); text-decoration: line-through; font-size: 1.1rem; }
.pdp-price .save { background: var(--red-soft); color: var(--red-deep); font-weight: 600; font-size: .78rem; padding: 4px 10px; border-radius: 100px; }
.pdp-sub { color: var(--ink-soft); font-size: .92rem; margin-bottom: 26px; }
.pdp-desc { color: var(--ink-soft); margin-bottom: 28px; line-height: 1.7; }

.opt-label { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
.opt-label span { color: var(--ink-faint); font-weight: 500; text-transform: none; letter-spacing: 0; }
.opt-label b { color: var(--ink); }
.finish-swatches { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.fsw { width: 56px; cursor: pointer; text-align: center; }
.fsw .chip { aspect-ratio: 1; border-radius: 12px; box-shadow: var(--sh-1); border: 2px solid transparent; transition: transform .2s, border-color .2s; }
/* A photographed chip holds an <img>; the CSS-rendered one paints itself. */
.fsw .chip.photo { overflow: hidden; display: block; background: var(--sand); }
.fsw .chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fsw:hover .chip { transform: translateY(-3px); }
.fsw.active .chip { border-color: var(--ink); box-shadow: var(--sh-2); }
.fsw .nm { font-size: .72rem; margin-top: 7px; color: var(--ink-soft); }
.fsw.active .nm { color: var(--ink); font-weight: 600; }
.finish-stock, .finish-more {
  margin: -14px 0 12px;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 54ch;
}
.finish-more a { color: var(--red); font-weight: 600; }

.buy-row { display: flex; gap: 14px; align-items: stretch; margin: 8px 0 18px; }
.qty.lg button { width: 46px; height: 52px; }
.qty.lg { border-radius: 14px; }
.qty.lg span { min-width: 40px; font-size: 1rem; }
.buy-row .btn { flex: 1; }
/* The brochure button carries a download glyph, so it needs the icon centred
   with its label rather than sitting on the text baseline. */
.buy-row .btn svg { flex: none; }

.assure { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.assure .a { display: flex; gap: 11px; align-items: flex-start; font-size: .86rem; color: var(--ink-soft); }
.assure .a svg { width: 20px; height: 20px; color: var(--red); flex: none; margin-top: 1px; }
.assure .a b { color: var(--ink); display: block; font-weight: 600; }

/* coverage calculator */
.calc { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; margin-bottom: 26px; }
.calc h4 { font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.calc h4 svg { width: 20px; height: 20px; color: var(--red); }
.calc p.sub { font-size: .88rem; color: var(--ink-soft); margin: 6px 0 18px; }
/* Calculator mode picker — the sum differs for a standard wall, a tall wall
   and a ceiling (review of 1 Sep 2026, slide 19). */
.calc-modes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.calc-mode {
  border: 1px solid var(--line-strong);
  background: var(--cream);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: .84rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.calc-mode:hover { border-color: var(--ink); color: var(--ink); }
.calc-mode.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.calc-inputs .field[hidden] { display: none; }

.calc-inputs { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.field { flex: 1; min-width: 110px; }
.field label { display: block; font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 7px; }
.field input { width: 100%; background: var(--bone); border: 1px solid var(--line-strong); border-radius: 10px; padding: 13px 14px; font-weight: 600; }
.field input:focus { outline: none; border-color: var(--red); }
.calc-result { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line-strong); display: none; }
.calc-result.show { display: block; }
.calc-result .rr { display: flex; justify-content: space-between; align-items: center; }
.calc-result .rr .big { font-family: var(--serif); font-size: 1.6rem; }
.calc-result .rr .big b { color: var(--red); }
.calc-result small { color: var(--ink-faint); font-size: .82rem; }

/* spec accordion */
.specs { margin-top: 8px; }
.spec-row { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.spec-row .k { color: var(--ink-soft); }
.spec-row .v { font-weight: 600; text-align: right; }
.spec-row { gap: 24px; }
/* The absorption row carries a headline figure and two sentences of small
   print. Set as one right-aligned run it wrapped raggedly and pushed its label
   onto two lines; the figure now leads and the qualifiers sit under it, and
   the label centres against the pair (review of 10 Sep 2026). */
.spec-row-long { align-items: center; }
.spec-row-long .k { white-space: nowrap; }
@media (max-width: 600px) {
  .spec-row-long { flex-direction: column; align-items: flex-start; gap: 6px; }
  .spec-row-long .v { text-align: left; }
}
.spec-row-long .v small { display: block; margin-top: 4px; font-weight: 400; font-size: .84rem; color: var(--ink-soft); line-height: 1.5; }


/* feature strips on PDP */
.pdp-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2); }
.pdp-feature .txt { padding: 56px 48px; background: var(--char); color: #e9e0d0; display: flex; flex-direction: column; justify-content: center; }
.pdp-feature .txt h2 { color: #fff; font-size: 2rem; }
.pdp-feature .txt p { margin-top: 14px; color: #cabfae; }
.pdp-feature .img img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }

/* =====================================================================
   Reveal animation
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1024px) {
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .finishes-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step::before { display: none; }
  .quotes { grid-template-columns: 1fr; }
  .acoustic-grid { grid-template-columns: 1fr; gap: 36px; }
  .pdp { grid-template-columns: 1fr; gap: 32px; }
  .pdp-gallery { position: static; }
  .summary { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .foot-about, .foot-contact, .foot-connect { grid-row: auto; grid-column: auto; align-self: auto; }
  .pdp-feature { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .section { padding: 64px 0; }
  .nav-links { display: none; }
  .menu-btn { display: grid; }
  header .nav-actions .btn-primary { display: none; }
  .announce { font-size: .72rem; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split.reverse .split-media { order: 0; }
  .benefits { grid-template-columns: 1fr; }
  .finishes-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gtile.wide { grid-column: span 2; }
  .steps { grid-template-columns: 1fr; }
  .cta-band .inner { padding: 48px 28px; }
  .foot-grid { grid-template-columns: 1fr; }
  .buy-row { flex-wrap: wrap; }
  .hero { min-height: 92vh; }
  .float-badge.br { right: 10px; bottom: -16px; }
  .trustbar .wrap { justify-content: flex-start; }
  .cf-grid { grid-template-columns: 1fr; }
}

/* mobile menu */
.mobile-menu { position: fixed; inset: 0; background: var(--bone); z-index: 95; transform: translateX(100%); transition: transform .35s var(--ease); padding: 90px 32px 32px; }
.mobile-menu.show { transform: translateX(0); }
.mobile-menu a { display: block; font-family: var(--serif); font-size: 1.7rem; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mobile-menu .close { position: absolute; top: 22px; right: 24px; width: 44px; height: 44px; display: grid; place-items: center; }

/* =====================================================================
   Account, auth & admin (added for backend)
   ===================================================================== */
.page-pad { padding: 50px 0 90px; min-height: 60vh; }
.page-pad > .wrap > h1 { font-size: clamp(2rem, 4vw, 2.7rem); }

/* header account/admin links */
.acct-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* auth card */
.auth-wrap { max-width: 440px; margin: 20px auto 0; }
.auth-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--sh-1); }
.auth-tabs { display: flex; gap: 6px; background: var(--sand); padding: 5px; border-radius: 100px; margin-bottom: 26px; }
.auth-tabs button { flex: 1; padding: 11px; border-radius: 100px; font-weight: 600; font-size: .9rem; color: var(--ink-soft); transition: all .2s; }
.auth-tabs button.active { background: var(--cream); color: var(--ink); box-shadow: var(--sh-1); }
.auth-card .field { margin-bottom: 16px; }
.auth-card .field input { width: 100%; background: var(--bone); border: 1px solid var(--line-strong); border-radius: 10px; padding: 13px 14px; }
.auth-card .field input:focus { outline: none; border-color: var(--red); }
.auth-err { background: var(--red-soft); color: var(--red-deep); border-radius: 10px; padding: 11px 14px; font-size: .85rem; margin-bottom: 16px; display: none; }
.auth-err.show { display: block; }
.auth-alt { text-align: center; font-size: .85rem; color: var(--ink-soft); margin-top: 18px; }

/* account / orders */
.acct-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 22px 26px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 28px; }
.acct-bar .who h2 { font-size: 1.4rem; }
.acct-bar .who p { color: var(--ink-soft); font-size: .9rem; }
.acct-bar .av { width: 50px; height: 50px; border-radius: 50%; background: var(--wood); color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--serif); font-size: 1.2rem; }
.acct-id { display: flex; align-items: center; gap: 14px; }

.order-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; margin-bottom: 16px; }
.order-card .top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.order-card .ref { font-family: var(--serif); font-size: 1.15rem; }
.order-card .date { font-size: .82rem; color: var(--ink-faint); }
.order-lines { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.order-lines .ol { display: flex; align-items: center; gap: 12px; font-size: .9rem; }
.order-lines .sw { width: 26px; height: 32px; border-radius: 5px; border: 1px solid rgba(0,0,0,.12); flex: none; }
.order-lines .ol .nm { flex: 1; }
.order-card .ototal { text-align: right; margin-top: 14px; font-weight: 700; font-family: var(--serif); font-size: 1.1rem; }

/* status pill */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; padding: 5px 12px; border-radius: 100px; text-transform: capitalize; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.pending { background: #fdf0e3; color: #b5751b; }
.pill.paid { background: #e6f0f7; color: #2563a8; }
.pill.shipped { background: #e9f3ea; color: #3a7a3f; }
.pill.delivered { background: #e4eee4; color: #2f6b34; }
.pill.cancelled { background: #f3e5e4; color: #a33; }

/* =====================================================================
   Admin dashboard
   ===================================================================== */
.stat-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 26px 0 34px; }
.stat-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.stat-card .v { font-family: var(--serif); font-size: 1.9rem; color: var(--ink); line-height: 1; }
.stat-card .k { font-size: .78rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; margin-top: 8px; }
.stat-card.accent { background: var(--char); border-color: var(--char); }
.stat-card.accent .v { color: #fff; }
.stat-card.accent .k { color: #c79a5f; }

.admin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; }
.admin-tabs button { padding: 12px 18px; font-weight: 600; font-size: .92rem; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-tabs button.active { color: var(--ink); border-bottom-color: var(--red); }
.admin-panel { display: none; }
.admin-panel.active { display: block; }

.data-table { width: 100%; border-collapse: collapse; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.data-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); padding: 14px 16px; background: var(--sand); border-bottom: 1px solid var(--line); }
.data-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(0,0,0,.015); }
.data-table .mono { font-family: var(--serif); }
.data-table .sub { font-size: .78rem; color: var(--ink-faint); }
.status-select { border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 10px; font-weight: 600; font-size: .82rem; background: var(--bone); cursor: pointer; }
.status-select:focus { outline: none; border-color: var(--red); }
.order-detail-items { display: flex; gap: 6px; }
.order-detail-items .sw { width: 18px; height: 22px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); }

.table-scroll { overflow-x: auto; }

/* promo composer */
.promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.promo-form .field { margin-bottom: 16px; }
.promo-form label { display: block; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin-bottom: 7px; }
.promo-form input, .promo-form textarea, .promo-form select { width: 100%; background: var(--bone); border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; }
.promo-form textarea { min-height: 110px; resize: vertical; font-family: inherit; }
.promo-form input:focus, .promo-form textarea:focus, .promo-form select:focus { outline: none; border-color: var(--red); }
.promo-preview { position: sticky; top: 90px; }
.promo-preview .frame { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; height: 560px; }
.promo-preview iframe { width: 100%; height: 100%; border: 0; }
.promo-preview .lbl { font-size: .78rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }

.email-banner { background: var(--sand); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 20px; font-size: .88rem; color: var(--ink-soft); margin-bottom: 24px; display: flex; gap: 12px; align-items: center; }
.email-banner svg { width: 22px; height: 22px; color: var(--red); flex: none; }
.email-banner a { color: var(--red); font-weight: 600; }

@media (max-width: 900px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .promo-grid { grid-template-columns: 1fr; }
  .promo-preview { position: static; }
}

/* ---- Insights ---- */
.insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 4px; }
.insight-kpis { grid-column: 1 / -1; display: flex; gap: 16px; flex-wrap: wrap; }
.insight-kpi { flex: 1 1 180px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; }
.insight-kpi .k { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); margin-bottom: 8px; }
.insight-kpi .v { font-family: var(--serif); font-size: 1.75rem; color: var(--ink); line-height: 1; }
.insight-kpi .trend { margin-top: 6px; min-height: 18px; }
.insight-chart-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; }
.insight-chart-card.wide { grid-column: 1 / -1; }
.chart-label { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); margin-bottom: 14px; }
@media (max-width: 900px) {
  .insights-grid { grid-template-columns: 1fr; }
  .insight-chart-card.wide { grid-column: auto; }
}

/* ── Lightbox ──────────────────────────────────────────────────────────── */
#lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(18, 14, 10, 0.93);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
#lb-overlay.active { display: flex; }

.lb-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 60px 80px 20px;
  box-sizing: border-box;
}
.lb-img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  display: block;
}

.lb-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  opacity: .75;
  line-height: 1;
  padding: 4px 8px;
  transition: opacity .15s;
  z-index: 1;
}
.lb-close:hover { opacity: 1; }

.lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  font-size: 2.8rem;
  line-height: 1;
  padding: 10px 18px;
  cursor: pointer;
  border-radius: 4px;
  transition: background .15s;
  z-index: 1;
}
.lb-arrow:hover { background: rgba(255,255,255,.25); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }

.lb-dots {
  display: flex;
  gap: 8px;
  padding: 14px 0 22px;
  align-items: center;
  justify-content: center;
  min-height: 46px;
}
.lb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.lb-dot.active {
  background: #fff;
  transform: scale(1.3);
}

@media (max-width: 600px) {
  .lb-stage { padding: 52px 12px 12px; }
  .lb-arrow { font-size: 2rem; padding: 8px 12px; }
  .lb-prev { left: 4px; }
  .lb-next { right: 4px; }
}

/* =====================================================================
   "Made in Europe" badge
   ===================================================================== */
.eu-flag {
  display: inline-block; flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .10);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="%23003399"/><g fill="%23FFCC00"><path transform="rotate(0 12 12) translate(12 5.2) scale(1.55)" d="M0 -1 L0.588 0.809 L-0.951 -0.309 L0.951 -0.309 L-0.588 0.809 Z"/><path transform="rotate(30 12 12) translate(12 5.2) scale(1.55)" d="M0 -1 L0.588 0.809 L-0.951 -0.309 L0.951 -0.309 L-0.588 0.809 Z"/><path transform="rotate(60 12 12) translate(12 5.2) scale(1.55)" d="M0 -1 L0.588 0.809 L-0.951 -0.309 L0.951 -0.309 L-0.588 0.809 Z"/><path transform="rotate(90 12 12) translate(12 5.2) scale(1.55)" d="M0 -1 L0.588 0.809 L-0.951 -0.309 L0.951 -0.309 L-0.588 0.809 Z"/><path transform="rotate(120 12 12) translate(12 5.2) scale(1.55)" d="M0 -1 L0.588 0.809 L-0.951 -0.309 L0.951 -0.309 L-0.588 0.809 Z"/><path transform="rotate(150 12 12) translate(12 5.2) scale(1.55)" d="M0 -1 L0.588 0.809 L-0.951 -0.309 L0.951 -0.309 L-0.588 0.809 Z"/><path transform="rotate(180 12 12) translate(12 5.2) scale(1.55)" d="M0 -1 L0.588 0.809 L-0.951 -0.309 L0.951 -0.309 L-0.588 0.809 Z"/><path transform="rotate(210 12 12) translate(12 5.2) scale(1.55)" d="M0 -1 L0.588 0.809 L-0.951 -0.309 L0.951 -0.309 L-0.588 0.809 Z"/><path transform="rotate(240 12 12) translate(12 5.2) scale(1.55)" d="M0 -1 L0.588 0.809 L-0.951 -0.309 L0.951 -0.309 L-0.588 0.809 Z"/><path transform="rotate(270 12 12) translate(12 5.2) scale(1.55)" d="M0 -1 L0.588 0.809 L-0.951 -0.309 L0.951 -0.309 L-0.588 0.809 Z"/><path transform="rotate(300 12 12) translate(12 5.2) scale(1.55)" d="M0 -1 L0.588 0.809 L-0.951 -0.309 L0.951 -0.309 L-0.588 0.809 Z"/><path transform="rotate(330 12 12) translate(12 5.2) scale(1.55)" d="M0 -1 L0.588 0.809 L-0.951 -0.309 L0.951 -0.309 L-0.588 0.809 Z"/></g></svg>') center/contain no-repeat;
}
.eu-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: var(--cream);
  border: 1px solid var(--line-strong); border-radius: 100px;
  padding: 8px 16px; line-height: 1; white-space: nowrap;
  /* The flag makes "Made in Europe" 18px tall inside and "2-year warranty" only
     as tall as its 11.5px caps, so the two badges came out different heights.
     A shared min-height settles it without padding one of them by hand. */
  min-height: 36px; box-sizing: border-box;
}
/* Only the badge that actually carries a flag gets the tighter left inset, so
   the glyph is not marooned against the pill's edge. */
.eu-badge:has(> .eu-flag) { padding-left: 9px; }

/* Badges are baseline-aligned inline boxes by default, which reads as "not
   lined up" the moment their heights differ. A flex row centres them instead. */
.badge-pair {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.eu-badge.on-dark {
  color: #fff; background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .32);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.certs .mie { display: inline-flex; align-items: center; gap: 6px; }
.certs .mie .eu-flag { width: 13px; height: 13px; }

/* =====================================================================
   Price sub-line (per-m² figure under the headline price)
   ===================================================================== */
.pdp-permsq, .buy-permsq {
  font-size: .85rem; color: var(--ink-faint); margin: -18px 0 26px;
}
.buy-permsq { margin: 6px 0 0; }
.calc-note { font-size: .78rem; color: var(--ink-faint); margin-top: 10px; }

/* .fsw became a <button> so it can be reached by keyboard */
.fsw { appearance: none; background: none; border: 0; padding: 0; font: inherit; display: flex; flex-direction: column; justify-content: flex-start; align-self: flex-start; }
.fsw .chip { display: block; width: 100%; }
/* Buttons centre their content vertically, so a two-line name ("Fresno Mystic")
   pushed its chip above the others; top-align and keep the name lines tight */
.fsw .nm { display: block; line-height: 1.25; }

/* =====================================================================
   Footer legal links
   ===================================================================== */
.foot-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-legal a { font-size: .8rem; color: #a99e8d; }
.foot-legal a:hover { color: #fff; text-decoration: underline; }

/* =====================================================================
   Cookie consent bar
   ===================================================================== */
.cookie-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%);
  width: min(760px, calc(100vw - 32px)); z-index: 130;
  background: var(--char); color: #e9e0d0; border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: 20px 24px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  transition: transform .45s var(--ease);
}
.cookie-bar.show { transform: translate(-50%, 0); }
.cookie-bar p { font-size: .88rem; line-height: 1.6; flex: 1; min-width: 260px; margin: 0; }
.cookie-bar a { color: #f3c9a0; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex: none; }
.cookie-bar .btn-outline { border-color: rgba(255,255,255,.3); color: #e9e0d0; }
.cookie-bar .btn-outline:hover { border-color: #fff; color: #fff; }

.cookie-status {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px 24px; margin-bottom: 12px;
}
.cookie-status p { margin-bottom: 14px; }
.cookie-status .cookie-actions { justify-content: flex-start; }

/* =====================================================================
   Legal pages (privacy / terms / cookies / 404)
   ===================================================================== */
.legal { padding-bottom: 90px; }
/* The same container the panel page uses, rather than a narrow centre column —
   the legal and content pages were sitting in 780px while /panels ran the full
   1200. The reading measure is capped separately below, which is how /panels
   gets away with a wide container too: its own prose runs 54-58 characters
   inside it because the layout, not the container, sets the column. */
.legal-wrap { max-width: var(--maxw); }
.legal h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); margin: 18px 0 6px; }
.legal h2 {
  font-size: 1.3rem; margin: 44px 0 12px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.legal h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--ink-soft); line-height: 1.75; }
/* Measure, not just alignment: unconstrained, these paragraphs ran to about 82
   characters a line against the 780px column, which is past the point where the
   eye starts losing its place returning to the left edge.

   60ch, not 68 — `ch` is the width of a zero, and Inter's is wide, so 60ch
   lands at roughly 68 actual characters. Measured rather than assumed: 68ch
   came out at 741px, wider than the column, and did nothing at all. */
.legal p, .legal li, .legal-lead { max-width: 60ch; }
/* The tables and cards inside .legal lay out their own widths. */
.legal .branches p, .legal .branches li, .legal .doc-cards p { max-width: none; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 18px 22px; }
.legal li { margin-bottom: 8px; }
/* :not(.btn) matters — without it this paints buttons inside .legal red-on-red,
   which made both 404 call-to-action buttons unreadable. .doc-card is excluded
   for the same reason: it is a card, and the underline landed on its title. */
.legal a:not(.btn):not(.doc-card) { color: var(--red); font-weight: 500; text-decoration: underline; }
.legal code {
  background: var(--sand); border-radius: 5px; padding: 2px 6px;
  font-size: .85em; font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink);
}
.legal-meta { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
.legal-lead { font-size: 1.08rem; line-height: 1.75; color: var(--ink); margin: 22px 0 10px; }
.legal-table { width: 100%; border-collapse: collapse; margin: 8px 0 22px; font-size: .9rem; }
.legal-table th, .legal-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-table th { background: var(--sand); font-weight: 600; color: var(--ink); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.legal-table td { color: var(--ink-soft); }
.legal-note {
  background: var(--sand); border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 18px 22px; margin-top: 40px;
}
.legal-note p { margin: 0; font-size: .88rem; }

/* =====================================================================
   Quote request modal
   ===================================================================== */
.qm-overlay {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(20, 14, 8, .58); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 28px 16px; overflow-y: auto;
}
.qm-overlay.show { opacity: 1; visibility: visible; }
.qm {
  position: relative; width: min(560px, 100%); background: var(--bone);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  transform: translateY(18px); transition: transform .35s var(--ease);
  margin: auto;
}
.qm-overlay.show .qm { transform: translateY(0); }
.qm-close {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px;
  border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); z-index: 2;
}
.qm-close:hover { background: var(--sand); color: var(--ink); }
.qm-body, .qm-done { padding: 34px 34px 30px; }
.qm-eyebrow { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.qm h2 { font-size: 1.65rem; line-height: 1.2; margin-bottom: 8px; }
.qm-sub { font-size: .92rem; color: var(--ink-soft); margin-bottom: 24px; line-height: 1.6; }

.qm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qm-field.full { grid-column: 1 / -1; }
.qm-field label { display: block; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin-bottom: 6px; }
.qm-field input, .qm-field select, .qm-field textarea {
  width: 100%; background: #fff; border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 12px 13px; font: inherit; font-size: .94rem; color: var(--ink);
}
.qm-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d544a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; }
.qm-field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.qm-message { margin-top: 18px; }
.qm-optional { text-transform: none; letter-spacing: 0; font-weight: 400; }
.qm-field input:focus, .qm-field select:focus, .qm-field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }

.qm-label { display: flex; justify-content: space-between; align-items: center; margin: 26px 0 10px; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.qm-add { font-size: .78rem; font-weight: 600; color: var(--red); text-transform: none; letter-spacing: 0; }
.qm-add:hover { text-decoration: underline; }

.qm-rows { display: flex; flex-direction: column; gap: 10px; }
.qm-row { display: flex; align-items: center; gap: 10px; }
.qm-swatch { width: 34px; height: 42px; border-radius: 7px; flex: none; box-shadow: var(--sh-1); }
.qm-swatch.photo { overflow: hidden; display: block; background: var(--sand); }
.qm-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qm-finish { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 12px; font: inherit; font-size: .92rem; color: var(--ink); }
.qm-finish:focus { outline: none; border-color: var(--red); }
.qm-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 100px; overflow: hidden; background: #fff; flex: none; }
.qm-qty button { width: 32px; height: 40px; display: grid; place-items: center; color: var(--ink-soft); }
.qm-qty button:hover { background: var(--sand); color: var(--ink); }
.qm-qtyin { width: 46px; text-align: center; border: 0; background: none; font: inherit; font-weight: 600; font-size: .92rem; color: var(--ink); -moz-appearance: textfield; }
.qm-qtyin::-webkit-outer-spin-button, .qm-qtyin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qm-qtyin:focus { outline: none; }
.qm-rm { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-faint); flex: none; }
.qm-rm:hover { background: var(--red-soft); color: var(--red); }

.qm-estimate { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; margin-top: 18px; }
.qm-est-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.qm-est-row b { display: block; font-size: 1rem; color: var(--ink); }
.qm-est-row small { display: block; font-size: .78rem; color: var(--ink-faint); margin-top: 3px; }
.qm-est-price { text-align: right; }
.qm-est-price b { font-family: var(--serif); font-size: 1.4rem; }
.qm-est-note { font-size: .76rem; color: var(--ink-faint); line-height: 1.55; margin: 12px 0 0; }

.qm-calc { display: flex; gap: 10px; align-items: flex-start; background: var(--sand); border-radius: var(--r-sm); padding: 13px 16px; margin-top: 12px; font-size: .82rem; color: var(--ink-soft); line-height: 1.6; }
/* display:flex above beats the hidden attribute, which left an empty bar
   on every quote opened without a calculation. */
.qm-calc[hidden] { display: none; }
.qm-calc svg { flex: none; color: var(--red); margin-top: 2px; }
.qm-calc b { color: var(--ink); }

/* Honeypot — visually gone but not display:none, which some bots skip */
.qm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.qm-error { background: var(--red-soft); color: var(--red-deep); border-radius: var(--r-sm); padding: 12px 15px; font-size: .88rem; margin: 18px 0 0; font-weight: 500; }
#qmSubmit { margin-top: 20px; }
.qm-fine { font-size: .76rem; color: var(--ink-faint); text-align: center; margin: 14px 0 0; line-height: 1.6; }
.qm-fine a { color: var(--ink-soft); text-decoration: underline; }

.qm-done { text-align: center; padding-top: 48px; }
.qm-check { width: 76px; height: 76px; border-radius: 50%; background: var(--leaf); display: grid; place-items: center; margin: 0 auto 22px; }
.qm-check svg { width: 38px; height: 38px; color: #fff; }
.qm-done h2 { font-size: 1.5rem; }
.qm-done p { color: var(--ink-soft); line-height: 1.65; margin-bottom: 10px; }
.qm-ref { font-size: .9rem; margin-bottom: 26px !important; }
.qm-ref b { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); letter-spacing: .04em; }
.qm-dismiss { color: var(--ink-faint); margin-top: 10px; display: block; width: 100%; }
.qm-dismiss:hover { color: var(--ink); }

@media (max-width: 560px) {
  .qm-body, .qm-done { padding: 28px 20px 24px; }
  .qm-grid { grid-template-columns: 1fr; }
  .qm-row { flex-wrap: wrap; }
  .qm-finish { flex: 1 1 100%; order: -1; }
  .cookie-bar { padding: 18px; }
  .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1; }
}

/* Staff entry point in the footer — deliberately quieter than the legal links */


/* ── Supplied-by lockup (review of 1 Sep 2026, slide 1) ───────────────
   OWA arrived with a real alpha channel; AcoustiSlat and Ideatec were flat
   artwork on white and are keyed by tools/logo-alpha.js. */
.partners {
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.partners-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 5vw, 54px);
  flex-wrap: wrap;
}
.partners .lbl {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.partners .mark { display: inline-flex; align-items: center; gap: 12px; transition: opacity .2s; }
.partners a.mark:hover { opacity: .75; }
.partners .mark img { display: block; width: auto; }
/* Sized so each mark reads, not so the boxes match: OWA is near-square, the
   Ideatec lockup is a wordmark plus a strapline and needs the extra width. */
.partners .mark img.owa { height: 40px; }
.partners .mark img.ideatec { height: 46px; }
.partners .sep { width: 1px; height: 26px; background: var(--line-strong); }
/* On every other page the lockup closes the page, straight above the footer. */
.partners-foot { border-bottom: 0; }
@media (max-width: 620px) {
  .partners .sep { display: none; }
  .partners-inner { gap: 16px; }
}

/* ── Contact page branch cards ────────────────────────────────────── */
.branches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  /* 1fr rather than auto: every card matches every other, not just the ones
     sharing a row. The map is the only card without a natural height of its
     own — it scales to whatever the addresses need — so the addresses set the
     size and the drawing fits inside it. */
  grid-auto-rows: 1fr;
  gap: 18px;
  margin: 32px 0 44px;
}
.branch {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px;
}
.branch h2 { font-size: 1.12rem; margin: 0 0 10px; padding: 0; border: 0; }
.branch address { font-style: normal; color: var(--ink-soft); font-size: .94rem; line-height: 1.6; }
.branch-lines { margin-top: 12px; font-size: .94rem; line-height: 1.7; }
.branch-lines a { color: var(--red); font-weight: 600; }
.branch-lines a:hover { text-decoration: underline; }
.legal-note { margin-top: 40px; font-size: .88rem; color: var(--ink-faint); }

/* The footer column heading doubles as a link to the contact page. */
footer.site .foot-contact h5 a { color: inherit; }
/* OWA and Ideatec named in the footer link to their own sites. */
.foot-about p a, .foot-bottom > span a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255, 255, 255, .35); }
.foot-about p a:hover, .foot-bottom > span a:hover { color: #fff; text-decoration-color: currentColor; }
footer.site .foot-contact h5 a:hover { color: #fff; text-decoration: underline; }

/* ── Project gallery page (review of 8 Sep 2026) ──────────────────────
   The .gallery / .gtile grid already existed and was unused; this only adds
   the page frame around it and the caption treatment for a <figcaption>. */
.gallery-page { padding: clamp(48px, 8vh, 90px) 0 clamp(70px, 10vh, 120px); }
.gallery-page .legal-wrap { margin-bottom: 34px; }
.gallery-page .gallery { margin-bottom: 48px; }
.gallery-page .gallery + .wrap, .gallery-page .wrap + .wrap { margin-top: 48px; }
.gallery-cta { display: flex; flex-wrap: wrap; gap: 12px; }
/* figure carries default UA margins that would fight the grid gap. */
.gallery figure.gtile { margin: 0; }
.gtile .cap { pointer-events: none; }
@media (max-width: 700px) {
  /* .tall keeps its two rows on phones: tiles now pair up in two-row bands
     (see gallery.html), so a tall tile always has a tall neighbour. */
  .gallery-page .gallery { grid-auto-rows: 150px; gap: 12px; }
}

/* ── Installation page header (redesign of 10 Sep 2026) ───────────────
   The two downloadable documents used to be a bulleted list two thirds of the
   way down. They are now cover previews in the top right, beside a header band
   given room to breathe, so a visitor arriving for the guides lands on them
   rather than scrolling for them. No copy changed — only where it sits. */
.install-page { padding-bottom: 90px; }
.install-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* Narrower gap than before: the band now shares the body's 780px column, so
     the space has to be shared with it rather than taken from a 1200px one. */
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  /* padding-block, not the shorthand: .install-head is also a .wrap, and a
     three-value `padding` would reset .wrap's 24px side gutter to zero and run
     the header flush to the viewport edge. */
  padding-block: clamp(30px, 5vh, 54px) clamp(30px, 4vh, 46px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(30px, 4vh, 48px);
}
.install-head-copy { max-width: 62ch; }
/* The lead sits with the heading again. It was moved below both columns while
   this band shared the body's 780px column, where beside the cards it came out
   38 characters wide; at the full container there is room for it where it
   belongs. */
.install-head-copy .legal-lead { margin-top: 18px; }
/* Bigger than the shared .legal h1 — this header is the page's front door — but
   sized to the column it actually has now rather than the full-width one it
   used to break out into. */
.install-head-copy h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  line-height: 1.05;
  margin: 16px 0 0;
}
.install-head-copy .legal-lead { margin-top: 18px; }

.install-docs { min-width: 0; }
/* Overrides .legal h2, which carries top margin and a larger size meant for a
   heading that follows body copy. */
.install-docs h2 {
  margin: 0 0 6px;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.install-docs > p {
  margin: 0 0 16px; max-width: 38ch;
  font-size: .88rem; line-height: 1.6; color: var(--ink-faint);
}

.doc-cards { display: flex; gap: 14px; }
.doc-card {
  display: flex; flex-direction: column; width: 178px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.doc-card:hover, .doc-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: var(--line-strong);
}
/* A fixed 3:4 window so two covers of different proportions read as a pair —
   the guide's own cover is a narrow panel cropped out of a landscape spread. */
.doc-shot {
  display: block; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--sand); border-bottom: 1px solid var(--line);
}
/* contain, not cover: the two documents are different shapes — the brochure is
   A4 portrait, the installation guide a single landscape page — and cropping a
   landscape page to a portrait window throws away the title and the logo, which
   is most of what a cover thumbnail is for. */
.doc-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* flex:1 so both metas fill the space under their cover regardless of how many
   lines the title takes — otherwise the two download glyphs sit at different
   heights, which is the first thing the eye picks up on a pair of cards. */
.doc-meta {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px; flex: 1;
}
.doc-name {
  flex: 1; font-size: .8rem; font-weight: 600; line-height: 1.35;
  color: var(--ink);
}
/* The download glyph is the affordance — a cover alone reads as a picture. */
.doc-go {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--red); color: #fff;
  transition: background .25s var(--ease);
}
.doc-go svg { width: 15px; height: 15px; }
.doc-card:hover .doc-go { background: var(--red-deep); }

@media (max-width: 900px) {
  /* Stacked, the covers no longer have a column of their own to sit in, so
     they run full width under the copy rather than shrinking to a thumbnail. */
  .install-head { grid-template-columns: 1fr; }
  .doc-cards { gap: 14px; }
  .doc-card { width: auto; flex: 1 1 0; }
}
@media (max-width: 380px) {
  .doc-name { font-size: .74rem; }
  .doc-meta { padding: 10px; gap: 8px; }
}

/* ── Branch map card (/contact) ───────────────────────────────────────
   A drawn map in the site's own palette instead of an embedded one. Nothing is
   fetched to render it: the outline is inline SVG, so there are no tiles, no
   third party, no cookies and no per-view cost, and it takes the brand colours
   the way a stock basemap never could. */
.branch-map { display: flex; flex-direction: column; min-height: 0; }
/* The drawing is absolutely positioned, so it contributes no height of its own.
   That hands the card height to the address cards — the tallest of which is
   about 200px — and the map fits whatever box is left rather than stretching
   the row to suit itself. min-height is only a floor. */
.za-frame {
  flex: 1; position: relative; min-height: 84px; margin-top: 8px;
}
.za-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Cream land on the card's sand, not sand on sand — the two are close enough
   that filling the country in the card's own colour left it as a faint outline
   with no shape to it. Reversing the pair is what makes the country read. */
.za-land {
  fill: var(--cream);
  stroke: var(--line-strong);
  stroke-width: 2.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 5px rgba(40, 30, 18, .10));
}

/* Radii and stroke widths are in viewBox units, so a pin stays in proportion
   however small the card renders the drawing. The halo is what gives a 4px dot
   enough presence to read at this size. */
.za-pin-halo { fill: var(--red); opacity: .16; }
.za-pin-dot { fill: var(--red); stroke: #fff; stroke-width: 8; }

/* On a phone the branch cards stack, so the map arrives as a fourth full-width
   block after three addresses that already say where the branches are. It is
   decoration at that point, and decoration that costs a screen of scrolling
   between the addresses and everything below them. */
@media (max-width: 760px) {
  .branch-map { display: none; }
}

/* ── Panel page on mobile (10 Sep 2026) ───────────────────────────────
   The point of all of this is to lift "Made in Europe", the price and the
   quote button into the first screen. On a phone they sat below a full-height
   photograph and three rows of thumbnails. */
@media (max-width: 760px) {
  /* The announce bar repeats claims made further down the page and costs a
     whole band at the top. Panel page only — no other page carries it. */
  body.panels .announce { display: none; }

  /* Same reasoning for the breadcrumb: one line of chrome on a page reached
     from the nav anyway. The legal pages keep theirs. */
  body.panels .crumb { display: none; }

  /* panels.js lifts the heading out of .pdp-info and makes it the first thing
     in .pdp. Smaller here because at 2rem it ran to three lines and undid the
     space the moves above just bought. */
  .pdp-title { font-size: 1.42rem; line-height: 1.2; margin: 4px 0 14px; }
  .pdp { padding-top: 14px; }

  /* One row of four, stepped a row at a time by panels.js. The grid keeps every
     tile in the DOM and in the lightbox's carousel — they are clipped, not
     removed — so nothing is lost by not being on screen at this moment. */
  .pdp-thumbs-viewport { overflow: hidden; }
  .pdp-thumbs {
    transition: transform .5s var(--ease);
    will-change: transform;
  }
  .pdp-thumbs.is-fading { opacity: .15; transition: opacity .28s var(--ease); }
}

/* Someone who has asked for less motion gets the strip whole and still, rather
   than a rotation they did not ask for — panels.js also stops advancing it. */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .pdp-thumbs-viewport { overflow: visible; }
  .pdp-thumbs { transition: none; transform: none !important; }
}

/* A paragraph that holds nothing but a button sat on the previous paragraph's
   14px bottom margin, which read as crowded. Scoped to the element rather than
   .legal because the gallery's main carries its own class.

   padding, not margin: adjacent vertical margins collapse, so a 20px margin-top
   against a 14px margin-bottom would have bought 6px rather than the 20 asked
   for. Padding does not collapse, so the gap is genuinely 20px wider. */
main p:has(> .btn:only-child) { padding-top: 20px; }

/* ── Branch contact table (/installation) ─────────────────────────────
   Invisible in the sense that matters: no rules, no fill, no zebra — the
   columns are the only alignment device. Written as a table rather than a
   styled list because three branches by two contact methods is tabular data,
   which also gives a screen reader the row header to announce each number
   against. */
.contact-table { border-collapse: collapse; margin: 4px 0 22px; }
.contact-table th,
.contact-table td {
  text-align: left; vertical-align: baseline;
  padding: 7px 34px 7px 0; border: 0;
  font-size: .96rem; line-height: 1.6;
}
.contact-table th { font-weight: 700; color: var(--ink); white-space: nowrap; }
.contact-table td:last-child { padding-right: 0; }
/* .legal a:not(.btn) already reddens and underlines these. */
.contact-table a { font-weight: 500; }

@media (max-width: 560px) {
  /* Three columns of contact detail do not survive a phone: the email alone is
     most of the width. The rows become blocks, which keeps the branch name as a
     heading over its own pair rather than wrapping mid-column. */
  .contact-table, .contact-table tbody, .contact-table tr,
  .contact-table th, .contact-table td { display: block; }
  .contact-table tr { margin-bottom: 16px; }
  .contact-table th { padding: 0 0 2px; }
  .contact-table td { padding: 0; }
}

/* ── Content pages: full-width copy ───────────────────────────────────
   The prose on /installation and /contact runs the whole 1200px container
   rather than being capped to a reading measure. That is a deliberate
   exception asked for on these two — at this width a line runs past 130
   characters, which is long; if it ever reads that way, deleting this block
   restores the cap.

   Opt in by page class rather than blanket on .legal: privacy, terms, cookies
   and 404 are long-form prose and keep the 60ch measure, which is most of what
   makes them readable.

   `> p` rather than `p` on purpose. A descendant selector also catches the
   paragraphs nested inside the download aside and the branch cards, and those
   are sized by the card they sit in, not by the container — lifting their cap
   stretches the card's grid track and steals the width back from the copy. */
.install-page .legal-wrap > p,
.install-page .legal-wrap li,
.install-page .install-head-copy,
.install-page .install-head-copy .legal-lead,
.contact-page .legal-wrap > p,
.contact-page .legal-wrap li { max-width: none; }

.contact-cta { display: flex; flex-wrap: wrap; gap: 12px; }
/* WhatsApp green on the glyph only: white text on #25D366 fails contrast. */
.btn-whatsapp { display: inline-flex; align-items: center; gap: 8px; }
.btn-whatsapp svg { color: #1da851; flex: none; }

/* One document, and it is a landscape page. The shared 3:4 window was sized for
   a portrait brochure and letterboxed this into a third of its own card, so the
   card widens and the window takes the PDF's own proportions — 600x425 as
   rendered by tools/pdf-covers.sh — which lets the page fill it exactly. With
   the brochure gone this is the only card, so it can take a wider box. */
.install-docs .doc-card { width: 420px; }
.install-docs .doc-shot { aspect-ratio: 600 / 425; }

@media (max-width: 900px) {
  .install-docs .doc-card { width: auto; max-width: 460px; }
}