/* =====================================================================
   AcoustiSlat — Home (cinematic)
   Loaded after styles.css, only on index.html (body.home)
   ===================================================================== */

body.home { background: #0d0b09; --hdr-h: 64px; }

/* ---------- Fixed, transparent header over the hero ---------- */
body.home header.site {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none !important;
  transition: background .45s var(--ease), border-color .45s var(--ease);
}
body.home header.site .nav { height: 64px; }
body.home header.site .nav-links a,
body.home header.site .icon-btn { color: #fff; transition: color .45s var(--ease); }
/* The home header floats over the hero photograph, so the dark-ink mark would
   vanish into it. */
body.home header.site .logo .logo-dark { display: none; }
body.home header.site .logo .logo-light { display: block; }

body.home header.site .nav-links a:hover { color: #fff; opacity: .8; }
body.home header.site .icon-btn:hover { background: rgba(255,255,255,.14); }
body.home header.site .cart-count { border-color: transparent; }
body.home .btn-hdr {
  padding: 10px 20px; font-size: .88rem;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(8px);
}
body.home .btn-hdr:hover { background: #fff; color: var(--ink); }

/* solid state once past the hero */
body.home.past-hero header.site {
  background: rgba(247, 243, 236, .86);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--line);
}
body.home.past-hero header.site .nav-links a,
body.home.past-hero header.site .icon-btn { color: var(--ink); }
/* Past the hero the bar is cream, so the ink mark goes back on. This used to
   recolour .logo .a and the dot grid; those were the CSS wordmark, which the
   supplied artwork replaced — leaving the white mark stranded on cream. */
body.home.past-hero header.site .logo .logo-dark { display: block; }
body.home.past-hero header.site .logo .logo-light { display: none; }
body.home.past-hero header.site .nav-links a:hover { color: var(--ink); opacity: 1; }
body.home.past-hero header.site .icon-btn:hover { background: var(--sand); }
/* The nav's supplied-by lockup is dark artwork that vanishes over the hero,
   and the full partners band already shares that first screen, so it only
   comes in once the bar turns cream. */
body.home header.site .nav-partners { display: none; }
@media (min-width: 1181px) {
  body.home.past-hero header.site .nav-partners { display: flex; }
}
body.home.past-hero .btn-hdr { background: var(--red); border-color: var(--red); color: #fff; }
body.home.past-hero .btn-hdr:hover { background: var(--red-deep); }

/* =====================================================================
   Cinema hero
   ===================================================================== */
/* Hero and the supplied-by lockup share one viewport (review of 8 Sep 2026:
   "move the footer up so that it shows on the first page"). The stack owns the
   100svh; the hero takes what the lockup does not, so the lockup can never be
   pushed under the fold by a taller hero. */
.hero-stack { display: flex; flex-direction: column; min-height: 100svh; }
.hero-stack > .partners { flex: none; }

.cine-hero {
  position: relative; flex: 1 1 auto; min-height: 560px;
  overflow: hidden; display: flex; align-items: flex-end;
  color: #fff;
}
.cine-hero .media { position: absolute; inset: -1px; }
.cine-hero .media img {
  width: 100%; height: 112%; object-fit: cover; object-position: center 40%;
  will-change: transform;
  animation: heroIn 2.4s var(--ease) both;
}
@keyframes heroIn { from { transform: scale(1.08); } to { transform: scale(1); } }
.cine-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13,11,9,.42) 0%, rgba(13,11,9,0) 26%),
    linear-gradient(180deg, rgba(13,11,9,0) 42%, rgba(13,11,9,.62) 100%);
}
/* padding-top clears the fixed header. Without it the hero panel — which is
   bottom-anchored — grows upward past the top of the section on a phone, and
   overflow:hidden cuts the "Supplied by OWA" kicker and the Made in Europe
   badge clean off (review of 8 Sep 2026: "header is cutting into top page"). */
.cine-hero .inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--maxw); margin: 0 auto;
  padding: calc(var(--hdr-h) + 18px) 24px clamp(18px, 3svh, 46px);
}
.hero-panel {
  display: inline-block; max-width: 720px;
  background: rgba(10, 8, 6, .55); backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-lg); padding: clamp(26px, 4vw, 44px);
}
.cine-hero .badge-row {
  margin-bottom: 20px;
  opacity: 0; animation: riseIn 1s var(--ease) .35s forwards;
}
.cine-hero .kicker {
  font-size: .8rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: #f3c9a0; margin-bottom: 20px;
  opacity: 0; animation: riseIn 1s var(--ease) .5s forwards;
}
.cine-hero h1 {
  font-size: clamp(2.9rem, 7.2vw, 6rem);
  line-height: .98; letter-spacing: -.02em; color: #fff; font-weight: 500;
  max-width: 13ch;
  opacity: 0; animation: riseIn 1.1s var(--ease) .7s forwards;
}
.cine-hero h1 em { font-style: italic; color: #f3c9a0; }
.cine-hero .sub {
  margin-top: 26px; max-width: 46ch;
  font-size: clamp(1.02rem, 1.5vw, 1.25rem); line-height: 1.65; color: rgba(255,255,255,.88);
  opacity: 0; animation: riseIn 1.1s var(--ease) .95s forwards;
}
.cine-hero .cta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 38px;
  opacity: 0; animation: riseIn 1.1s var(--ease) 1.15s forwards;
}
.cine-hero .price { font-size: .95rem; color: rgba(255,255,255,.82); }
.cine-hero .price b { color: #fff; font-size: 1.15rem; font-family: var(--serif); }
@keyframes riseIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

.cine-hero .scroll-cue {
  position: absolute; right: 34px; bottom: 34px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.75);
  writing-mode: vertical-rl;
}
.cine-hero .scroll-cue .line { width: 1px; height: 56px; background: rgba(255,255,255,.4); position: relative; overflow: hidden; }
.cine-hero .scroll-cue .line::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%;
  background: #fff; animation: cueDrop 2.2s var(--ease) infinite;
}
@keyframes cueDrop { 0% { top: -40%; } 60%, 100% { top: 110%; } }

/* =====================================================================
   Manifesto — big centered statement
   ===================================================================== */
.manifesto { background: var(--bone); padding: clamp(90px, 14vh, 160px) 0; }
.manifesto .wrap { max-width: 980px; }
.manifesto p.big {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.28; letter-spacing: -.01em;
  color: var(--ink); text-align: center;
}
.manifesto p.big .dim { color: var(--ink-faint); }
.manifesto p.big em { font-style: italic; color: var(--red); }
.manifesto .after {
  margin-top: 34px; text-align: center; color: var(--ink-soft);
  font-size: 1.05rem; max-width: 54ch; margin-left: auto; margin-right: auto;
}

/* Photo backdrop. The statement sits on a darkened room shot instead of bone,
   so every colour in it flips to the dark-section palette used by .chapter. */
.manifesto.has-photo { position: relative; overflow: hidden; background: var(--char); }
.manifesto.has-photo .media { position: absolute; inset: 0; }
.manifesto.has-photo .media img { width: 100%; height: 100%; object-fit: cover; }
.manifesto.has-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 8, 6, .82) 0%, rgba(10, 8, 6, .68) 50%, rgba(10, 8, 6, .82) 100%);
}
.manifesto.has-photo .wrap { position: relative; z-index: 2; }
.manifesto.has-photo p.big { color: #fff; }
.manifesto.has-photo p.big .dim { color: rgba(255, 255, 255, .58); }
.manifesto.has-photo p.big em { color: #f3c9a0; }
.manifesto.has-photo .after { color: #cabfae; }

/* =====================================================================
   Full-screen photo chapters
   ===================================================================== */
.chapter {
  position: relative; height: 100svh; min-height: 560px; overflow: hidden;
  display: flex; align-items: center; color: #fff;
}
.chapter .media { position: absolute; inset: 0; }
.chapter .media img {
  width: 100%; height: 100%; object-fit: cover;
}
.chapter::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.chapter.shade-l::after { background: linear-gradient(90deg, rgba(10,8,6,.62) 0%, rgba(10,8,6,.18) 55%, rgba(10,8,6,0) 100%); }
.chapter.shade-r::after { background: linear-gradient(270deg, rgba(10,8,6,.62) 0%, rgba(10,8,6,.18) 55%, rgba(10,8,6,0) 100%); }
.chapter.shade-b::after { background: linear-gradient(180deg, rgba(10,8,6,.10) 0%, rgba(10,8,6,0) 40%, rgba(10,8,6,.66) 100%); }

.chapter .inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
}
.chapter.shade-r .inner { display: flex; justify-content: flex-end; }
.chapter.shade-b .inner { align-self: flex-end; padding-bottom: 10svh; }
.chapter .copy {
  max-width: 780px;
  background: rgba(10, 8, 6, .55); backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-lg); padding: clamp(26px, 4vw, 44px);
}
.chapter .copy .kicker {
  font-size: .76rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: #f3c9a0; display: block; margin-bottom: 18px;
}
.chapter .copy h2 {
  font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.02; color: #fff; letter-spacing: -.015em;
}
.chapter .copy h2 .oneline { white-space: nowrap; }
@media (max-width: 700px) { .chapter .copy h2 .oneline { white-space: normal; } }
.chapter .copy h2 em { font-style: italic; color: #f3c9a0; }
.chapter .copy p { margin-top: 20px; font-size: 1.08rem; line-height: 1.7; color: rgba(255,255,255,.85); }
.chapter .copy .chip-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.chapter .chip {
  display: inline-flex; align-items: center;
  font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  padding: 9px 16px; border-radius: 100px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px); color: #fff;
}
.chapter .chip .eu-flag { width: 14px; height: 14px; margin-right: 7px; }
/* Display figure for the sound absorption value. Un-scoped from .chapter so
   every place the number is shown large reads identically. */
.giant {
  font-family: var(--serif); font-weight: 500; line-height: 1;
  font-size: clamp(4.4rem, 12vw, 9.5rem); letter-spacing: -.03em; color: #fff;
}
.giant small {
  display: block; font-family: var(--sans); font-weight: 600;
  font-size: clamp(.85rem, 1.4vw, 1.05rem); letter-spacing: .18em; text-transform: uppercase;
  color: #f3c9a0; margin-top: 14px;
}

/* staggered copy reveal inside chapters */
.chapter .copy > * { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.chapter.in .copy > * { opacity: 1; transform: none; }
.chapter.in .copy > *:nth-child(2) { transition-delay: .12s; }
.chapter.in .copy > *:nth-child(3) { transition-delay: .24s; }
.chapter.in .copy > *:nth-child(4) { transition-delay: .36s; }

/* =====================================================================
   Rooms — residential use cases
   ===================================================================== */
.rooms { background: var(--bone); padding: clamp(90px, 12vh, 150px) 0; }
.rooms .head { max-width: 720px; margin: 0 auto 60px; text-align: center; }
.rooms .head h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.rooms .head p { margin-top: 16px; color: var(--ink-soft); font-size: 1.12rem; }
.rooms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.room-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 3 / 4; display: flex; align-items: flex-end; color: #fff;
  box-shadow: var(--sh-2);
}
.room-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.room-card:hover img { transform: scale(1.06); }
.room-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,8,6,0) 38%, rgba(10,8,6,.42) 68%, rgba(10,8,6,.86) 100%);
}
.room-card .txt {
  position: relative; z-index: 2; margin: 14px; padding: 20px 22px;
  background: rgba(10, 8, 6, .55); backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r); width: calc(100% - 28px);
}
.room-card .txt small {
  display: block; font-size: .72rem; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: #f3c9a0; margin-bottom: 8px;
}
.room-card .txt h3 { color: #fff; font-size: 1.5rem; }
.room-card .txt p { margin-top: 8px; font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.85); }

/* =====================================================================
   Configurator / buy module
   ===================================================================== */
.buy { background: var(--cream); padding: clamp(90px, 12vh, 150px) 0; }
.buy-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.buy-visual {
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3);
  aspect-ratio: 4 / 5; position: relative;
}
/* The preview is a photograph for finishes that have one and the CSS renderer
   for the rest, so both are absolutely filled into the same frame. */
.buy-visual .slat,
.buy-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.buy-visual .size-tag {
  position: absolute; left: 22px; bottom: 22px; z-index: 2;
  background: rgba(20,16,11,.72); color: #fff; backdrop-filter: blur(8px);
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  padding: 10px 16px; border-radius: 100px;
}
.buy-copy .kicker {
  font-size: .76rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--red); display: block; margin-bottom: 16px;
}
.buy-copy h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.05; }
.buy-copy .desc { margin-top: 18px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; }
/* The price and its small print are one nowrap flex row, so between roughly
   480px and 1000px the long .per string won the space contest and squeezed the
   2.1rem .now down to a ~200px box — the headline price broke over three lines,
   splitting "R2" from "150". Wrapping the row drops .per underneath instead,
   and nowrap on .now makes the price itself unbreakable at any width. */
.buy-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 26px; }
.buy-price .now { font-family: var(--serif); font-size: 2.1rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.buy-price .per { color: var(--ink-faint); font-size: .95rem; }

.buy-copy .flabel {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 30px 0 12px; font-size: .8rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.buy-copy .flabel b { color: var(--ink); }
.fin-row { display: flex; gap: 14px; flex-wrap: wrap; }
/* The button is the swatch plus its name; .dot is the circle. Naming them
   matches /panels, where the swatches have always been labelled. */
.fin-dot {
  cursor: pointer; padding: 0; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 56px; text-align: center;
}
.fin-dot .dot {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  outline: 2px solid transparent; outline-offset: 3px;
  transition: outline-color .2s, transform .2s;
  position: relative; display: block;
}
.fin-dot .slat,
.fin-dot .dot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fin-dot:hover .dot { transform: scale(1.06); }
.fin-dot.active .dot { outline-color: var(--ink); }
.fin-dot .nm {
  font-size: .72rem; line-height: 1.2; color: var(--ink-soft);
  letter-spacing: .01em;
}
.fin-dot.active .nm { color: var(--ink); font-weight: 600; }
.fin-dot:focus-visible .dot { outline-color: var(--red); }

.buy-row2 { display: flex; gap: 14px; margin-top: 30px; align-items: stretch; flex-wrap: wrap; }
.buy .qty2 {
  display: flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: 100px;
  overflow: hidden; background: #fff;
}
.buy .qty2 button { width: 48px; height: 54px; font-size: 1.2rem; color: var(--ink-soft); }
.buy .qty2 button:hover { color: var(--ink); background: var(--sand); }
.buy .qty2 span { min-width: 40px; text-align: center; font-weight: 700; font-size: 1.05rem; }
.buy .note { margin-top: 18px; font-size: .88rem; color: var(--ink-faint); display: flex; align-items: center; gap: 8px; }
.buy .note svg { width: 16px; height: 16px; flex: none; }

/* =====================================================================
   Science band (reuses .bar markup from styles.css)
   ===================================================================== */
.science { background: var(--char); color: #efe6d6; padding: clamp(90px, 12vh, 150px) 0; position: relative; overflow: hidden; }
.science-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.science h2 { color: #fff; font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.05; }
.science .kicker {
  font-size: .76rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: #f3c9a0; display: block; margin-bottom: 16px;
}
.science p.body { margin-top: 20px; color: #cabfae; font-size: 1.05rem; line-height: 1.75; }
/* The figure and its caption stack, as .giant sets them out. The science band
   is a half-width grid column, so the shared clamp is capped to the column. */
.science .absorb { margin-top: 34px; }
.science .absorb .giant { font-size: clamp(4.4rem, 7.4vw, 6.6rem); }

.science .meter2 {
  background: var(--char-2); border: 1px solid #3a332b; border-radius: var(--r-lg);
  padding: 34px;
}
.science .meter2 h4 { color: #fff; font-size: 1.05rem; margin-bottom: 24px; display: flex; gap: 10px; align-items: center; }
.science .meter2 h4 svg { width: 20px; height: 20px; color: #f3c9a0; }
.science .bar-row { margin-bottom: 20px; }
.science .bar-row .top { display: flex; justify-content: space-between; font-size: .88rem; margin-bottom: 8px; color: #e8dfd0; }
.science .bar-row .top b { color: #f3c9a0; font-weight: 600; }
.science .bar { height: 10px; border-radius: 6px; background: #3a332b; overflow: hidden; }
.science .bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #cba372, #d8281c); transition: width 1.4s var(--ease); }
.science .bar.muted i { background: #6b6152; }
.science .fine { font-size: .8rem; color: #a99e8d; margin-top: 10px; }

/* =====================================================================
   Steps — minimal
   ===================================================================== */
.how { background: var(--bone); padding: clamp(90px, 12vh, 150px) 0; }
.how .head { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.how .head h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.how .head p { margin-top: 14px; color: var(--ink-soft); font-size: 1.1rem; }
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.how-step { border-top: 2px solid var(--line-strong); padding-top: 22px; position: relative; }
.how-step .n {
  font-family: var(--serif); font-size: 1rem; color: var(--red); font-weight: 600;
  letter-spacing: .1em; margin-bottom: 12px; display: block;
}
.how-step h3 { font-size: 1.35rem; margin-bottom: 8px; }
.how-step p { font-size: .95rem; color: var(--ink-soft); line-height: 1.6; }

/* =====================================================================
   Voices — testimonial
   ===================================================================== */
/* Installation CTA — replaced the testimonial block in the 1 Sep 2026 review. */
.install-cta { background: var(--sand); padding: clamp(90px, 12vh, 150px) 0; }
.install-cta-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.install-cta-inner h2 { font-size: clamp(2rem, 4vw, 3rem); margin-top: 14px; }
.install-cta-inner p { margin-top: 18px; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.7; }
.install-cta-inner .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

/* =====================================================================
   Final CTA
   ===================================================================== */
.finale {
  position: relative; min-height: 88svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center; color: #fff;
}
.finale img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.finale::after { content: ""; position: absolute; inset: 0; background: rgba(10,8,6,.52); }
.finale .inner {
  position: relative; z-index: 2; max-width: 800px; margin: 0 24px;
  background: rgba(10, 8, 6, .55); backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-lg); padding: clamp(36px, 6vw, 64px);
}
.finale h2 { color: #fff; font-size: clamp(2.5rem, 5.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.02em; }
.finale h2 em { font-style: italic; color: #f3c9a0; }
.finale p { margin-top: 20px; font-size: 1.1rem; color: rgba(255,255,255,.85); }
.finale .cta { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* FAQ section spacing on home */
.home-faq { background: var(--bone); padding: clamp(90px, 12vh, 150px) 0; }
.home-faq .head { text-align: center; margin-bottom: 48px; }
.home-faq .head h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1000px) {
  .rooms-grid { grid-template-columns: 1fr 1fr; }
  .buy-grid, .science-grid { grid-template-columns: 1fr; }
  .buy-visual { aspect-ratio: 16 / 10; max-height: 420px; }
  .how-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
}
/* Short laptop windows. The hero panel is the dominant fixed cost in .hero-stack,
   so under ~850px of height it has to give up some of its rhythm or the
   supplied-by lockup is pushed off the first screen — the one thing that layout
   exists to prevent. Placed here, after the base hero rules: a media query adds
   no specificity, so declared later is the only thing that makes these win. */
@media (min-width: 641px) and (max-height: 850px) {
  .hero-panel { padding: 22px 26px; }
  .cine-hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.3rem); }
  .cine-hero .badge-row { margin-bottom: 10px; }
  .cine-hero .kicker { margin-bottom: 10px; }
  .cine-hero .sub { margin-top: 14px; }
  .cine-hero .cta { margin-top: 20px; gap: 12px; }
  .partners { padding: 14px 0; }
  .partners .mark img.owa { height: 32px; }
  .partners .mark img.ideatec { height: 36px; }
}

@media (max-width: 700px) {
  body.home .acct-btn { display: none; }
  body.home .btn-hdr { padding: 9px 16px; }
  body.home header.site .nav { gap: 10px; }
}
@media (max-width: 640px) {
  /* A phone viewport has to carry the header, the whole hero panel and the
     supplied-by lockup. At the desktop rhythm that came to ~930px against 812px
     of screen, so the panel spilled off the top. Nothing is dropped here — the
     vertical spacing is tightened and the headline steps down one size, which
     buys back the ~120px needed. */
  .cine-hero { min-height: 0; }
  .cine-hero .inner { padding-bottom: 18px; }
  .cine-hero .scroll-cue { display: none; }
  .hero-panel { padding: 18px 20px; }
  .cine-hero .badge-row { margin-bottom: 10px; }
  .cine-hero .kicker { letter-spacing: .16em; margin-bottom: 10px; }
  .cine-hero h1 { font-size: clamp(2.15rem, 8.6vw, 2.6rem); }
  .cine-hero .sub { margin-top: 16px; }
  .cine-hero .cta { margin-top: 22px; gap: 12px; }

  /* One row, not three: the lockup only earns its place on the first screen if
     it costs about a line of height. */
  .partners { padding: 12px 0; }
  .partners-inner { flex-wrap: nowrap; gap: 10px; }
  .partners .lbl { font-size: .58rem; letter-spacing: .1em; }
  .partners .mark img.owa { height: 26px; }
  .partners .mark img.ideatec { height: 30px; }
  .chapter { min-height: 520px; }
  .rooms-grid { grid-template-columns: 1fr; }
  .room-card { aspect-ratio: 4 / 5; }
  .install-cta-inner .cta .btn { flex: 1 1 100%; }
  .how-grid { grid-template-columns: 1fr; }
  .buy-row2 .btn { flex: 1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cine-hero .media img, .cine-hero .badge-row, .cine-hero .kicker, .cine-hero h1, .cine-hero .sub, .cine-hero .cta { animation: none; opacity: 1; transform: none; }
  .chapter .media img { transform: none; transition: none; }
  .chapter .copy > * { opacity: 1; transform: none; transition: none; }
  .cine-hero .scroll-cue .line::after { animation: none; }
}

/* ── Why choose us (review of 1 Sep 2026, slide 1) ─────────────────── */
.why { padding: clamp(90px, 12vh, 150px) 0; background: var(--cream); }
.why .head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.why .head h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.why-card {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 26px;
}
.why-card h3 { font-size: 1.06rem; letter-spacing: .01em; }
.why-card p { margin-top: 10px; color: var(--ink-soft); font-size: .96rem; line-height: 1.65; }
.why-note {
  margin-top: 34px;
  text-align: center;
  font-size: .88rem;
  color: var(--ink-faint);
  line-height: 1.6;
}
/* Kate, 10 Sep 2026: a way to ask for the test report right where it is offered. */
.why-cta { margin-top: 18px; text-align: center; }
.chapter .copy .copy-cta { margin-top: 22px; }

/* Hero: the region-dependent pricing note sits under the price line. */
.cine-hero .price-note {
  display: block;
  margin-top: 8px;
  font-size: .8rem;
  line-height: 1.5;
  color: rgba(255,255,255,.66);
  max-width: 46ch;
}

/* Chapter chips became links to the panel page (slide 3). */
.chapter .copy .chip-row a.chip { text-decoration: none; transition: background .18s ease, border-color .18s ease; }
.chapter .copy .chip-row a.chip:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }

/* Stock / lead-time wording under the finish picker (slide 7). */
.fin-note {
  margin-top: 14px;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 52ch;
}

/* Performance disclaimer under the absorption figure (slide 8). */
.science-note {
  margin-top: 18px;
  font-size: .88rem;
  line-height: 1.65;
  color: #cabfae;
  max-width: 48ch;
}
.science-note a { color: #f3c9a0; font-weight: 600; }