/* POPHIES — Home page composition (front-page.php)

   Page-specific layout only. This file is enqueued after style.css, so it
   refines the shared system for the front page and never redefines the global
   tokens, typography, buttons, .media, .card, .tags/.tag, .facts, .rule-list,
   .steps, .grid--*, .section/--dark/--white/--soft, .container, .section-head*,
   .eyebrow/.accent/.lede, .reveal or the header and footer.

   Colour note: tokens.css stays the single source of colour. The values below
   that are not tokens are page-local illustration material only — the hero
   stage backdrop and the picture frame, the lamp bodies in the product cards,
   and the translucent brass focus glow. They are not new global tokens and
   they live inside this page's own selectors. */

/* ---------- 1. Anchors under the fixed header ---------- */
/* #main and every in-page anchor (#families, #power, #enquiry …) stop below
   the fixed header instead of hiding under it. */
#main,
section[id] { scroll-margin-top: calc(var(--header-h) + 28px); }

/* ---------- 2. Hero ---------- */
/* The section starts below the fixed header, then adds its own air. */
.home-hero {
  padding-top: calc(var(--header-h) + clamp(52px, 7vw, 104px));
  padding-bottom: var(--section);
}

/* Copy left, technical stage right; centred against each other. */
.home-hero__grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(44px, 6vw, 96px);
  align-items: center;
  min-height: min(78vh, 800px);  /* fallback where svh is unknown */
  min-height: min(78svh, 800px);
}

.home-hero__copy {
  min-width: 0;
  max-width: 680px;
}

.home-hero__lead { margin-top: clamp(24px, 2.6vw, 30px); }

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(30px, 3.2vw, 40px);
}

/* Trust line: short claims, each with a hairline brass tick. */
.home-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 22px;
  color: var(--graphite);
  font-size: var(--fs-small);
}

.home-hero__trust span { display: inline-flex; align-items: center; gap: 8px; }

.home-hero__trust svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* .facts is global; this page only changes its margin and column count. */
.home-hero__facts {
  --fact-cols: 4;
  margin-top: clamp(44px, 5vw, 64px);
}

/* ---------- 3. Technical stage (hero visual) ---------- */
/* A lit wall drawn in CSS: backdrop, light cone, fixture and the framed
   artwork it washes. Everything is decorative and sits inside one
   [role="img"] box, so it needs no text alternative of its own. */
.home-stage {
  position: relative;
  min-height: 640px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--stone);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  /* Page-local illustration: a warm glow over warm neutral plaster. */
  background:
    radial-gradient(circle at 50% 30%, rgba(232, 197, 141, 0.42), transparent 20%),
    linear-gradient(135deg, #dedbd4 0%, #f6f3ec 45%, #d0ccc2 100%);
}

/* Faint measuring grid, faded out towards the bottom of the stage. */
.home-stage::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgba(32, 33, 31, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 33, 31, 0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 88%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 88%);
}

.home-stage__visual { position: absolute; inset: 11% 9% 12%; }

/* Small caps note in the top corner: what the drawing shows. */
.home-stage__caption {
  position: absolute;
  top: 20px;
  left: 20px;
  max-width: 200px;
  color: var(--graphite);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Finish and colour temperature of the fitting, bottom right. */
.home-stage__label {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 10px 14px;
  border: 1px solid rgba(252, 251, 248, 0.55);
  border-radius: var(--radius-sm);
  color: var(--white);
  background: rgba(32, 33, 31, 0.74);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

/* Light cone falling from the bar onto the frame. */
.home-stage .light-cone {
  position: absolute;
  top: 24px;
  right: 12%;
  left: 12%;
  height: 250px;
  background: linear-gradient(to bottom, rgba(245, 215, 165, 0.4), rgba(245, 215, 165, 0.14) 60%, transparent);
  clip-path: polygon(13% 0, 87% 0, 100% 100%, 0 100%);
  filter: blur(5px);
}

/* The fitting: bar, stem and wall mount. */
.home-stage .fixture {
  position: absolute;
  top: 16%;
  left: 50%;
  width: 58%;
  height: 118px;
  transform: translateX(-50%);
}

.home-stage .bar {
  position: absolute;
  top: 8px;
  right: 10%;
  left: 10%;
  height: 24px;
  border-radius: var(--radius-sm);
  /* Page-local illustration: aged brass tube. */
  background: linear-gradient(to bottom, #d9b478, #8d6235 52%, #be8a4d);
  box-shadow: 0 8px 18px rgba(32, 33, 31, 0.18);
}

/* Soft warm spill under the tube, so the bar reads as a light source. */
.home-stage .bar::after {
  position: absolute;
  right: 4%;
  bottom: -12px;
  left: 4%;
  height: 14px;
  content: "";
  border-radius: 50%;
  background: var(--light);
  filter: blur(9px);
  opacity: 0.85;
}

.home-stage .stem {
  position: absolute;
  top: 32px;
  left: 50%;
  width: 6px;
  height: 56px;
  transform: translateX(-50%);
  background: #9d7449; /* Page-local illustration: same brass, shadowed. */
}

.home-stage .mount {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 62px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 5px;
  background: linear-gradient(90deg, #77502e, #c69459, #77502e);
}

/* Framed artwork under the fitting. Page-local illustration material:
   a dark wood moulding around a warm canvas. */
.home-stage .frame {
  position: absolute;
  top: 38%;
  right: 17%;
  bottom: 14%;
  left: 17%;
  border: 8px solid #423a32;
  background: linear-gradient(155deg, #796c5d, #c4b59f 45%, #74685b);
  box-shadow: 0 25px 45px rgba(32, 33, 31, 0.2);
}

.home-stage .frame::after {
  position: absolute;
  inset: 9%;
  content: "";
  border: 1px solid rgba(252, 251, 248, 0.45);
  background:
    linear-gradient(28deg, transparent 43%, rgba(252, 251, 248, 0.26) 44%, transparent 46%),
    linear-gradient(145deg, #6f5c4b, #d2c3ad 50%, #7e6750);
}

/* The wall/floor line the frame stands on. */
.home-stage .wall-line {
  position: absolute;
  right: 0;
  bottom: 16%;
  left: 0;
  height: 1px;
  background: rgba(32, 33, 31, 0.18);
}

/* ---------- 4. Dimension labels ---------- */
/* Shared look for the small brass measurements; the two containers that use
   them (the stage frame and the blueprint drawing) place them themselves. */
.dim {
  position: absolute;
  color: var(--brass);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.home-stage .dim--w,
.home-blueprint .dim--w {
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
}

.home-stage .dim--h,
.home-blueprint .dim--h {
  top: 50%;
  right: -52px;
  transform: translateY(-50%) rotate(90deg);
}

/* ---------- 5. Product families ---------- */
/* Two family cards: scene image, then the copy and the short point list. */
.home-families {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.home-family {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--stone);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.home-family__body {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 30px;
}

.home-family__body h3 { margin-top: 2px; }
.home-family__body p { font-size: 0.98rem; }

/* A link inside a grid would otherwise stretch its hairline across the card. */
.home-family__body .text-link {
  justify-self: start;
  margin-top: 6px;
}

/* Point list: no bullets, one brass dot per line. */
.home-family__points {
  display: grid;
  gap: 9px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.home-family__points li {
  display: flex;
  gap: 10px;
  color: var(--graphite);
  font-size: 0.94rem;
}

.home-family__points li::before {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  margin-top: 0.6em;
  content: "";
  border-radius: 50%;
  background: var(--brass);
}

/* ---------- 6. Power-mode cards ---------- */
/* These live in the global .grid.grid--3.grid--hairline, so they only carry
   their own padding and the line weight of the icon. */
.home-power-card {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 34px 30px;
}

.home-power-card svg {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-power-card h3 { font-size: 1.28rem; }
.home-power-card p { font-size: 0.96rem; }

/* ---------- 7. Selected models ---------- */
.home-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.home-product-card {
  overflow: hidden;
  border: 1px solid var(--stone);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.home-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* Image well: warm paper background, one hairline down the middle, and the
   product image left to scale gently on hover. */
.home-product-card__art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 0.86;
  overflow: hidden;
  /* Page-local illustration: the light paper the products are photographed on. */
  background: linear-gradient(145deg, #ece8df, #f9f7f1);
}

.home-product-card__art::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  content: "";
  background: rgba(32, 33, 31, 0.05);
}

.home-product-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

/* A real product photo grows a little; the drawn lamp also lifts slightly. */
.home-product-card:hover .home-product-card__art img { transform: scale(1.03); }
.home-product-card:hover .home-lamp { transform: scale(1.03) translateY(-3px); }

.home-product-card__body { padding: 22px 24px 26px; }

.home-product-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.home-product__code {
  color: var(--graphite);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-product__name {
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.home-product__spec {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--stone);
  color: var(--graphite);
  font-size: var(--fs-small);
}

/* The ↗ marker on each card: brass, and it steps up-right on hover. */
.home-text-arrow {
  flex: 0 0 auto;
  color: var(--brass);
  font-size: 1.35rem;
  line-height: 1;
  transition: transform 0.25s var(--ease);
}

.home-product-card:hover .home-text-arrow { transform: translate(3px, -3px); }

/* ---------- 8. Drawn lamp (product card illustration) ---------- */
/* A flat stand-in for the fitting until the product photo is published. The
   page-local hex values are the three finish materials: aged brass, matte
   black and brushed nickel. The variants only recolour the stem and mount —
   and the bar too, so the body always reads as one finish. */
.home-lamp {
  position: relative;
  width: 70%;
  max-width: 300px;
  aspect-ratio: 5 / 3;
  transition: transform 0.5s var(--ease);
}

.home-lamp .bar {
  position: absolute;
  top: 25%;
  right: 0;
  left: 0;
  height: 28px;
  border-radius: 5px;
  background: linear-gradient(#d5af75, #895f36 58%, #bd884c);
  box-shadow: 0 10px 24px rgba(32, 33, 31, 0.18);
}

.home-lamp .stem {
  position: absolute;
  top: calc(25% + 28px);
  left: 50%;
  width: 5px;
  height: 50px;
  transform: translateX(-50%);
  background: var(--brass);
}

.home-lamp .mount {
  position: absolute;
  top: calc(25% + 76px);
  left: 50%;
  width: 52px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: var(--radius-sm);
  background: var(--brass);
}

.home-lamp--black .bar { background: linear-gradient(#4a4b48, #191a18); }
.home-lamp--black .stem,
.home-lamp--black .mount { background: #272825; }

.home-lamp--nickel .bar { background: linear-gradient(#e4e3df, #8e8f8c 58%, #c8c7c2); }
.home-lamp--nickel .stem,
.home-lamp--nickel .mount { background: #9e9e9a; }

/* ---------- 9. Technical reference ---------- */
/* Drawing on the left, parameters on the right; both panels keep the same
   height so the pair reads as one spec sheet. */
.home-technical-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 24px;
}

.home-diagram {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  overflow: hidden;
  padding: 40px 56px;
  border: 1px solid var(--stone);
  background: var(--white);
}

/* Graph-paper background, finer than the one in the hero stage. */
.home-diagram::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgba(32, 33, 31, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 33, 31, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
}

.home-blueprint {
  position: relative;
  width: 100%;
  max-width: 460px;
}

.home-blueprint svg { width: 100%; height: auto; }

.home-spec-panel {
  display: grid;
  align-content: start;
  min-height: 520px;
  padding: 40px 38px;
  border: 1px solid var(--stone);
  background: var(--white);
}

.home-spec-panel h3 { margin-bottom: 24px; }
.home-spec-panel .home-certs { margin-top: 26px; }

/* Spec table: horizontal rules only, no vertical lines. */
.home-spec-table {
  width: 100%;
  border-collapse: collapse;
}

.home-spec-table th,
.home-spec-table td {
  padding: 15px 0;
  border-bottom: 1px solid var(--stone);
  font-size: 0.9rem;
  text-align: left;
  vertical-align: top;
}

.home-spec-table th {
  width: 44%;
  color: var(--graphite);
  font-weight: 500;
}

/* Values are the comparable part: stated in ink, figures aligned. */
.home-spec-table td {
  color: var(--ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* Optional header row, should the table carry one. */
.home-spec-table thead th {
  padding: 11px 12px;
  color: var(--graphite);
  background: var(--surface-soft);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- 10. Certification plates ---------- */
.home-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One colour, one height: a row of stamps rather than logos. */
.home-certs li {
  display: inline-grid;
  min-width: 60px;
  height: 42px;
  place-items: center;
  padding: 0 12px;
  border: 1px solid var(--stone);
  color: var(--graphite);
  background: var(--white);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-certs-note {
  max-width: var(--read);
  margin-top: 26px;
}

/* ---------- 11. Application scenes ---------- */
/* Scene image on top, room and description underneath. */
.home-application {
  display: grid;
  align-content: start;
  min-width: 0;
}

.home-application .media { margin-bottom: 22px; }
.home-application h3 { font-size: 1.2rem; }
.home-application p {
  margin-top: 10px;
  font-size: 0.96rem;
}

/* ---------- 12. Cooperation paths ---------- */
/* Inside the global .grid.grid--3.grid--hairline.grid--white. */
.home-path-card {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 34px 30px;
}

.home-path-card h3 { font-size: 1.28rem; }
.home-path-card p { font-size: 0.96rem; }

/* ---------- 13. Manufacturing and quality (dark band) ---------- */
/* Four capability panels on one hairline grid. The hairlines come from the
   1px gap showing the --on-dark-line background, so they survive any column
   count on the way down to one column. */
.home-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--on-dark-line);
  background: var(--on-dark-line);
}

.home-icon-item {
  display: flex;
  min-height: 236px;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  padding: 30px 26px;
  background: var(--ink);
}

.home-icon-item svg {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--light);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-icon-item strong {
  display: block;
  margin-bottom: 6px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.home-icon-item span {
  color: var(--on-dark-dim);
  font-size: var(--fs-small);
}

/* Copy left, the supporting list right. */
.home-quality-split {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(40px, 5vw, 64px);
  align-items: start;
}

.home-quality-split p { margin-top: 14px; }
.home-quality-split .rule-list li { font-size: 0.96rem; }

/* ---------- 14. Who we work with ---------- */
.home-who-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 28px 26px;
}

.home-who-card p { font-size: 0.96rem; }

/* ---------- 15. Enquiry ---------- */
/* Copy column on the left, form on the right. The copy follows the reader
   down the form while there is room for two columns. */
.home-enquiry {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}

.home-enquiry__copy { position: sticky; top: calc(var(--header-h) + 34px); }
.home-enquiry__copy p {
  max-width: 440px;
  margin-top: 22px;
  font-size: 1.0625rem;
}

/* What happens next: hairline-separated title and explanation pairs. */
.home-enquiry__channels {
  display: grid;
  gap: 14px;
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid var(--stone);
  list-style: none;
}

.home-enquiry__channels li {
  display: grid;
  gap: 3px;
  padding: 14px 0;
  border-bottom: 1px solid var(--stone);
}

.home-enquiry__channels strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 650;
}

.home-enquiry__channels span {
  color: var(--graphite);
  font-size: var(--fs-small);
}

.home-form {
  padding: 42px;
  border: 1px solid var(--stone);
  border-radius: var(--radius-sm);
  background: var(--white);
}

/* Reassurance line at the top of the form, on its own hairline. */
.home-form__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0 0 30px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--stone);
  list-style: none;
}

.home-form__legend li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--graphite);
  font-size: var(--fs-small);
}

.home-form__legend svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.home-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.home-field--full { grid-column: 1 / -1; }

.home-field label {
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: 750;
  letter-spacing: 0.04em;
}

.home-field input,
.home-field select,
.home-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--stone);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-field textarea {
  min-height: 132px;
  resize: vertical;
}

/* Focus: brass border plus a soft brass halo. The halo is a translucent
   version of --brass, kept local because tokens carry no alpha scale.
   The shared :focus-visible outline is left in place for keyboard use. */
.home-field input:focus,
.home-field select:focus,
.home-field textarea:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(167, 122, 67, 0.12);
}

.home-field input:focus-visible,
.home-field select:focus-visible,
.home-field textarea:focus-visible { outline-offset: 1px; }

.home-field__hint {
  color: var(--graphite);
  font-size: var(--fs-label);
}

.home-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
}

.home-form__foot p { max-width: 380px; }

/* Form result messages: one hairline box, toned by state. */
.home-notice {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid var(--stone);
  border-left-width: 3px;
  border-left-color: var(--graphite);
  border-radius: var(--radius-sm);
  color: var(--graphite);
  background: var(--white);
  font-size: 0.9rem;
}

.home-notice--error {
  border-color: var(--error);
  color: var(--error);
}

.home-notice--success {
  border-color: var(--success);
  color: var(--success);
}

/* ---------- 16. Responsive ---------- */
/* Same breakpoints as style.css, plus 1080px for the two-column pairs that
   run out of room before the shared 980px step. */
@media (max-width: 1080px) {
  /* Hero and enquiry stack; the stage keeps its height and follows the copy. */
  .home-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    min-height: 0;
  }

  .home-enquiry {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .home-enquiry__copy {
    position: static;
    top: auto;
  }

  .home-technical-grid,
  .home-quality-split { grid-template-columns: minmax(0, 1fr); }

  .home-quality-split { gap: 36px; }

  /* Two capability panels per row; the hairline grid needs no redrawing. */
  .home-icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .home-hero {
    padding-top: calc(var(--header-h) + var(--section-sm));
    padding-bottom: var(--section-sm);
  }

  .home-hero__copy { max-width: none; }

  /* Facts go two by two; the first item of the second row loses its left rule
     and every item below the first row gains a top rule. */
  .home-hero__facts {
    --fact-cols: 2;
    margin-top: 40px;
  }

  .home-hero__facts li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .home-hero__facts li:nth-child(n + 3) { border-top: 1px solid var(--stone); }

  .home-stage { min-height: 560px; }

  /* Selected models step down to two per row before going single. */
  .home-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .home-diagram,
  .home-spec-panel { min-height: 440px; }

  .home-spec-panel { padding: 34px 30px; }
  .home-form { padding: 34px 30px; }
}

@media (max-width: 660px) {
  .home-hero { padding-top: calc(var(--header-h) + 40px); }

  .home-stage { min-height: 430px; }
  .home-stage__visual { inset: 9% 7% 10%; }

  .home-stage__caption {
    top: 16px;
    left: 16px;
    max-width: 160px;
  }

  .home-stage__label {
    right: 14px;
    bottom: 14px;
    padding: 8px 11px;
    font-size: 0.625rem;
  }

  /* The drawing is small now: pull the two dimensions closer to it. */
  .home-stage .dim--w,
  .home-blueprint .dim--w {
    bottom: -22px;
    font-size: 0.625rem;
  }

  .home-stage .dim--h,
  .home-blueprint .dim--h {
    right: -32px;
    font-size: 0.625rem;
  }

  /* Every card and panel on the page goes full width. */
  .home-families,
  .home-products,
  .home-icon-grid,
  .home-form-grid { grid-template-columns: minmax(0, 1fr); }

  .home-family__body { padding: 24px 22px; }
  .home-product-card__body { padding: 20px 20px 22px; }

  .home-power-card,
  .home-path-card,
  .home-who-card { padding: 26px 22px; }

  .home-icon-item {
    min-height: 0;
    padding: 26px 22px;
  }

  /* The drawing and the spec sheet no longer have to match in height. */
  .home-diagram,
  .home-spec-panel { min-height: 0; }

  .home-diagram { padding: 30px 40px 44px; }

  /* Rather than squeezing two columns of figures, let the table scroll. */
  .home-spec-panel {
    overflow-x: auto;
    padding: 26px 22px;
  }

  .home-spec-panel h3 { margin-bottom: 18px; }

  .home-spec-table { min-width: 340px; }

  .home-spec-table th,
  .home-spec-table td {
    padding: 13px 0;
    font-size: 0.85rem;
  }

  .home-certs { gap: 8px; }

  .home-certs li {
    min-width: 54px;
    height: 38px;
    padding: 0 10px;
  }

  .home-certs-note { margin-top: 20px; }

  .home-quality-split { gap: 30px; }

  .home-form { padding: 26px 22px; }
  .home-enquiry__channels { gap: 10px; }

  .home-form__foot { margin-top: 24px; }
  .home-form__foot .button { width: 100%; }
}

/* ---------- 17. Content without JavaScript ---------- */
/* The shared sheet hides .reveal until site.js marks it visible, so a browser
   without JavaScript would keep the whole page invisible. This page keeps its
   own content readable; the same guard belongs in style.css for the rest of
   the site. */
html:not(.js) #main .reveal {
  opacity: 1;
  transform: none;
}

/* ---------- 18. Reduced motion ---------- */
/* The shared sheet already collapses durations; what is left on this page is
   the hover growth of the product images and the card lift. */
@media (prefers-reduced-motion: reduce) {
  .home-product-card:hover { transform: none; }

  .home-product-card:hover .home-product-card__art img,
  .home-product-card:hover .home-lamp,
  .home-product-card:hover .home-text-arrow { transform: none; }
}