/* ---------------------------------------------------------------
   Brand typography
   Display / headings : Varien   (all-caps only - the logo wordmark)
   Sub-headings       : Roboto Bold
   Body text          : Helvetica

   NOTE: assets/fonts/varien.otf ships under a DEMO / TRIAL licence
   (personal or demo use only). A commercial licence from Sensatype
   is required before this site goes live. See README.md.
   --------------------------------------------------------------- */
@font-face {
  font-family: "Varien";
  src: url("../fonts/varien.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f4efe8;
  --bg-2: #efe8de;
  --paper: #fffdf9;
  --cream: #f7f2eb;
  --taupe: #c4b5a4;
  --taupe-deep: #a89480;
  --ink: #161412;
  --ink-soft: #3d3833;
  --muted: #6f675f;
  --line: rgba(22, 20, 18, 0.1);
  --line-strong: rgba(22, 20, 18, 0.16);
  --orange: #e85d04;
  --orange-deep: #c44a00;
  --orange-soft: #fff1e6;
  --black: #111110;
  --white: #ffffff;
  --shadow: 0 18px 50px rgba(40, 28, 16, 0.08);
  --shadow-sm: 0 8px 24px rgba(40, 28, 16, 0.06);
  --radius: 22px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --nav-h: 78px;
  --max: 1180px;
  --display: "Varien", "Arial Black", "Helvetica Neue", sans-serif;
  --head: "Roboto", Arial, Helvetica, sans-serif;
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }

.wrap { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.wrap-wide { width: min(1280px, calc(100% - 40px)); margin: 0 auto; }

/* NAV — Homevia centered links + pill CTA */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(244, 239, 232, 0.78);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { border-bottom-color: var(--line); background: rgba(244, 239, 232, 0.94); }
.nav-inner {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.brand { display: flex; align-items: center; }
.brand img { width: auto; height: 44px; }
.brand-foot img { height: 58px; }
.nav-links {
  display: flex; justify-content: center; gap: 28px;
  font-size: 15px; color: var(--ink-soft); font-weight: 500;
}
.nav-links a { position: relative; padding: 6px 0; }
.nav-links a:hover, .nav-links a.is-active { color: var(--ink); }
.nav-links a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: var(--orange);
}
.nav-cta { display: flex; align-items: center; gap: 10px; }
.menu-btn {
  display: none; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--paper); cursor: pointer;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer; transition: 0.2s ease;
  white-space: nowrap;
}
.btn-dark { background: var(--black); color: #fff; }
.btn-dark:hover { transform: translateY(-1px); background: #2a2724; }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: var(--orange-deep); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: rgba(22,20,18,0.18);
}
.btn-ghost:hover { background: rgba(255,255,255,0.6); }
.btn-light { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-lg { height: 52px; padding: 0 24px; }

/* Hero — Homevia warm taupe wash + giant word */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  background: linear-gradient(180deg, #c9baaa 0%, #d7c9b8 28%, #efe8de 68%, var(--bg) 100%);
  overflow: hidden;
  padding: 28px 0 80px;
}
.hero-word {
  position: absolute; left: -4%; top: 4%;
  font-size: clamp(120px, 22vw, 320px);
  font-weight: 600; letter-spacing: -0.07em; line-height: 0.8;
  color: rgba(255,255,255,0.28);
  pointer-events: none; user-select: none;
  text-transform: none;
}
.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 40px; align-items: end;
  min-height: 72vh;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px; border-radius: var(--radius-pill);
  border: 1px solid rgba(22,20,18,0.12);
  background: rgba(255,255,255,0.35);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}
.hero h1 {
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.04; letter-spacing: -0.045em; font-weight: 600;
  margin: 18px 0 18px; max-width: 16ch;
}
.hero .lead { max-width: 54ch; color: var(--ink-soft); font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.trust-strip {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin-top: 28px; color: var(--muted); font-size: 13px;
}
.trust-strip span { display: inline-flex; align-items: center; gap: 8px; }
.trust-strip span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

.hero-card {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 28px;
  padding: 10px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.hero-card img {
  width: 100%; height: 210px; object-fit: cover; border-radius: 20px;
}
.hero-card img + img { margin-top: 8px; }
.hero-card-meta {
  background: #fff; border-radius: 20px; padding: 16px 16px 14px; margin-top: 8px;
}
.hero-card-meta h3 { font-size: 16px; letter-spacing: -0.02em; }
.hero-card-meta p { color: var(--muted); font-size: 13px; margin: 2px 0 12px; }
.price-chip { color: var(--orange-deep); font-weight: 700; font-size: 14px; }

/* Sections */
.section { padding: 88px 0; }
.section-sm { padding: 64px 0; }
.kicker {
  color: var(--orange); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px;
}
h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.04em; line-height: 1.12; font-weight: 600;
}
.lede { margin-top: 16px; color: var(--ink-soft); max-width: 68ch; font-size: 17px; }
.stack { display: grid; gap: 16px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.two-top { align-items: start; }
.split-copy p + p { margin-top: 14px; color: var(--ink-soft); }

.photo {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  background: #ddd;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.caption {
  margin-top: 8px; font-size: 12px; color: var(--muted); letter-spacing: 0.02em;
}

/* Cards */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
.card {
  background: var(--paper); border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden;
}
.card-pad { padding: 22px; }
.num {
  font-size: 13px; font-weight: 700; color: var(--orange); letter-spacing: 0.08em;
}
.card h3 { font-size: 20px; letter-spacing: -0.03em; margin: 8px 0 10px; }
.card p { color: var(--ink-soft); font-size: 15px; }
.listing {
  background: var(--paper); border-radius: 24px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.listing:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.listing img { width: 100%; height: 210px; object-fit: cover; }
/* a technical drawing in a product card must be shown whole, not cropped */
.listing img.listing-draw { object-fit: contain; background: #fff; padding: 10px; }
.listing-body { padding: 16px 18px 18px; }
.listing-body h3 { font-size: 18px; letter-spacing: -0.03em; }
.listing-body .meta { color: var(--muted); font-size: 13px; margin: 4px 0 10px; }
.listing-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.listing-row strong { font-size: 15px; }

/* Quote module */
.quote-mod {
  background: #fff; border-radius: 28px; border: 1px solid var(--line);
  box-shadow: var(--shadow); overflow: hidden;
}
.quote-mod header { padding: 22px 24px 8px; }
.quote-row {
  display: grid; grid-template-columns: 1fr auto;
  padding: 13px 24px; border-top: 1px solid var(--line);
  font-size: 15px;
}
.quote-row span:last-child { color: var(--muted); }
.quote-row.sub { font-weight: 700; background: #faf7f2; }
.quote-row.tax { color: var(--muted); }
.quote-row.total {
  background: var(--ink); color: #fff; font-weight: 700; font-size: 16px;
}
.quote-row.total span:last-child { color: #ffd2b3; }

/* Position trio */
.trio { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 14px; margin-top: 32px; }
.trio article {
  background: #fff; border-radius: 22px; padding: 24px; border: 1px solid var(--line);
}
.trio article.mid {
  background: linear-gradient(180deg, #ea6a12, #c44a00); color: #fff; border: 0;
}
.trio article.mid p { color: rgba(255,255,255,0.88); }
.trio h3 { font-size: 20px; letter-spacing: -0.03em; margin: 6px 0 10px; }
.trio p { color: var(--ink-soft); font-size: 14.5px; }

/* Dark bands */
.band-dark {
  background: #141210; color: #f6f1ea;
  padding: 88px 0;
}
.band-dark h2 { color: #fff; }
.band-dark p { color: rgba(246,241,234,0.78); }
.band-orange {
  background: var(--orange); color: #fff; padding: 56px 0;
}
.band-orange h2 { color: #fff; }
.band-orange p { color: rgba(255,255,255,0.88); }

/* Process */
.steps { display: grid; gap: 0; margin-top: 36px; }
.step {
  display: grid; grid-template-columns: 72px 1fr; gap: 12px;
  padding: 20px 0; border-top: 1px solid var(--line);
}
.step strong { display: block; font-size: 18px; letter-spacing: -0.02em; }
.step p { color: var(--ink-soft); margin-top: 4px; }

/* Tables */
.table-wrap {
  overflow-x: auto; border-radius: 18px; border: 1px solid var(--line);
  background: #fff; margin-top: 24px;
  box-shadow: var(--shadow-sm);
}
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { text-align: left; padding: 14px 16px; font-size: 14px; vertical-align: top; }
th {
  background: #171411; color: #fff; font-weight: 600; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
tr:nth-child(even) td { background: #faf7f2; }
td a { color: var(--orange-deep); font-weight: 600; }
.disclaimer {
  margin-top: 14px; font-size: 13.5px; color: var(--muted); max-width: 90ch;
}

/* Dimension tables: a grouped header row, then the column row under it */
.dims table { min-width: 860px; }
.dims th { text-align: center; }
.dims thead tr + tr th {
  background: #2b2723; font-size: 11.5px; letter-spacing: 0.05em;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.dims thead tr:first-child th + th { border-left: 1px solid rgba(255, 255, 255, 0.22); }
.dims td { text-align: center; font-variant-numeric: tabular-nums; }
.dims td:first-child { font-weight: 600; }
/* dims-label: first column is a name, not a number, so it reads left */
.dims-label td:first-child, .dims-label th:first-child { text-align: left; }
.dims caption {
  caption-side: top; text-align: left; padding: 16px 16px 4px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--orange-deep);
}

/* Technical drawings sit on white and must never be cropped */
.drawing {
  border-radius: var(--radius); border: 1px solid var(--line);
  background: #fff; box-shadow: var(--shadow-sm); padding: 18px; overflow: hidden;
}
.drawing img { width: 100%; height: auto; object-fit: contain; }
.drawing figcaption {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}
.drawing-wide { margin-top: 28px; }

/* FAQ */
.faq { display: grid; gap: 10px; margin-top: 28px; }
.faq details {
  background: #fff; border-radius: 16px; border: 1px solid var(--line); padding: 4px 18px;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 0;
  font-weight: 600; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq details p { color: var(--ink-soft); padding: 0 0 16px; }

/* Forms */
.form {
  background: #fff; border-radius: 24px; padding: 24px;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: grid; gap: 14px;
}
.form label { font-size: 13px; font-weight: 600; display: grid; gap: 6px; }
.form input, .form select, .form textarea {
  height: 46px; border-radius: 12px; border: 1px solid var(--line-strong);
  padding: 0 12px; background: #fff; font-size: 16px;
}
.form textarea { height: 110px; padding: 12px; resize: vertical; }
.form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--ink-soft); font-size: 13.5px; }
.check input { width: 18px; height: 18px; margin-top: 2px; }

/* Footer */
footer {
  background: #141210; color: #efe8de; padding: 56px 0 28px;
}
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
footer h4, footer .foot-head { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #c9baaa; margin-bottom: 14px; }
footer a, footer p { color: rgba(239,232,222,0.78); font-size: 14.5px; display: block; margin: 0 0 8px; }
footer a:hover { color: #fff; }
.foot-bottom {
  margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: rgba(239,232,222,0.5); font-size: 13px;
}

/* Page hero compact */
.page-hero {
  background: linear-gradient(180deg, #c9baaa 0%, #efe8de 78%, var(--bg) 100%);
  padding: 72px 0 48px; position: relative; overflow: hidden;
}
.page-hero h1 {
  font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.045em; line-height: 1.05;
  max-width: 18ch; margin: 14px 0 16px;
}
.page-hero .lead { max-width: 62ch; color: var(--ink-soft); }

/* WhatsApp float */
.wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 24px rgba(37,211,102,0.35);
}
.wa svg { width: 28px; height: 28px; }

.updated { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.note { font-size: 13.5px; color: var(--muted); margin-top: 12px; }
.list { display: grid; gap: 12px; margin-top: 20px; }
.list li { list-style: none; padding-left: 22px; position: relative; color: var(--ink-soft); }
.list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); position: absolute; left: 0; top: 8px; }

@media (max-width: 980px) {
  .hero-grid, .two, .cards-3, .cards-4, .trio, .foot-grid, .form .row-2 { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .menu-btn { display: grid; place-items: center; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: #f4efe8; padding: 18px 24px 24px; border-bottom: 1px solid var(--line); gap: 14px;
  }
  .hero { min-height: auto; padding-bottom: 48px; }
  .hero h1 { max-width: none; }
  .hero-card img { height: 160px; }
  .section, .band-dark { padding: 64px 0; }
  .cards-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cards-4 { grid-template-columns: 1fr; }
  .wrap, .wrap-wide, .nav-inner { width: min(100% - 28px, var(--max)); }
  .brand img { height: 36px; }
  .brand-foot img { height: 46px; }
  .drawing { padding: 12px; }
}

/* ===============================================================
   TYPOGRAPHY ROLES
   Varien is an all-caps display face, so anything set in it is
   forced to uppercase and given positive tracking. Long headings
   use a slightly smaller scale than they did in the old sans.
   =============================================================== */
h1, h2, .hero-word, .display {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 400;
}
h1 { letter-spacing: -0.005em; }
h2 { letter-spacing: 0; line-height: 1.08; }
.hero h1 { font-size: clamp(30px, 3.9vw, 54px); line-height: 1.02; letter-spacing: -0.01em; max-width: 18ch; }
h2 { font-size: clamp(25px, 2.9vw, 37px); }
.hero-word { letter-spacing: -0.02em; font-weight: 400; }

/* Sub-headings and UI furniture: Roboto Bold */
h3, h4, h5,
.kicker, .eyebrow, .num, .price-chip,
.listing-body h3, .hero-card-meta h3, .step strong,
.faq summary, .foot-grid .foot-head,
th, .btn, .nav-links, .trust-strip, .meta, .disclaimer, .caption, figcaption {
  font-family: var(--head);
}
h3, h4, h5, .num, .faq summary, .foot-grid .foot-head, th, .price-chip { font-weight: 700; }
h3 { letter-spacing: -0.01em; }
.btn { font-weight: 700; letter-spacing: 0; }
.nav-links { font-weight: 500; }
.kicker, .eyebrow { font-weight: 700; }

/* Body copy stays Helvetica */
p, li, td, .lede, .lead, input, textarea, select, label { font-family: var(--body); }

/* Pull quote on a dark ground. Colour is set explicitly here because
   .card p used to override an inline colour on the parent and the text
   came out near-black on near-black. */
.pull {
  background: #141210;
  color: #fff;
  border-radius: var(--radius);
  padding: 30px 34px;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.24;
  letter-spacing: 0;
  border-left: 5px solid var(--orange);
}
@media (max-width: 640px) { .pull { padding: 22px 20px; } }

/* Numbered step cards (home page + how it works) */
.steps-grid .num {
  color: var(--orange); font-size: 13px; letter-spacing: 0.14em;
  font-weight: 700; margin-bottom: 10px;
}
.steps-grid h3 { margin: 0 0 8px; font-size: 18px; }
.steps-grid .step-out {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13.5px;
}

/* Escalator layout diagrams */
.layouts svg { width: 100%; height: auto; margin-bottom: 14px; display: block; }
.layouts .fl line { stroke: rgba(22,20,18,0.22); stroke-width: 2; }
.layouts .rn line { stroke: var(--orange); stroke-width: 6; stroke-linecap: round; }
.layouts h3 { margin-bottom: 2px; }
.layouts .meta {
  color: var(--muted); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 700; margin-bottom: 8px;
}

/* Ticked feature lists inside cards */
.tick { list-style: none; margin: 4px 0 0; display: grid; gap: 9px; }
.tick li {
  position: relative; padding-left: 20px;
  color: var(--ink-soft); font-size: 14.5px; line-height: 1.45;
}
.tick li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
}

/* In-page jump bar (passenger lifts) */
.jump {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
}
.jump-label {
  font-family: var(--head); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  margin-right: 4px;
}
.jump a {
  font-family: var(--head); font-weight: 500; font-size: 13.5px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: rgba(255,255,255,0.55);
  transition: 0.18s ease;
}
.jump a:hover { background: #fff; border-color: var(--orange); color: var(--orange-deep); }
/* sticky header would otherwise hide the anchor target */
[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* Grids whose last row is short: centre the orphans instead of
   leaving a gap that reads like a missing card. */
.cards-centred { grid-template-columns: repeat(6, 1fr); }
.cards-centred > * { grid-column: span 2; }
/* last row of two */
.cards-centred > :nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
/* last row of one */
.cards-centred > :last-child:nth-child(3n+1) { grid-column: 3 / span 2; }

@media (max-width: 980px) {
  .cards-centred { grid-template-columns: 1fr; }
  .cards-centred > *,
  .cards-centred > :nth-last-child(2):nth-child(3n+1),
  .cards-centred > :last-child:nth-child(3n+1) { grid-column: auto; }
}

/* The hero watermark was sized for a narrow sans. Varien caps are far wider,
   so it was crowding the headline. Smaller, fainter, and pushed to the top. */
.hero-word {
  font-size: clamp(72px, 13vw, 190px);
  color: rgba(255,255,255,0.20);
  top: 1%; left: -2%;
  letter-spacing: -0.01em;
}
@media (max-width: 980px) {
  .hero-word { font-size: clamp(56px, 15vw, 120px); color: rgba(255,255,255,0.16); }
}

/* ===============================================================
   v4 FIXES — layout, contrast, accessibility
   =============================================================== */

/* Grid/flex children default to min-width:auto, so a 760px min-width
   table pushed its column past the viewport. */
.two > *, .hero-grid > *, .cards-3 > *, .cards-4 > *, .trio > *, .foot-grid > * { min-width: 0; }

/* The logo was collapsing to 0px wide because the nav grid squeezed
   the brand column below its content. */
.brand { flex: 0 0 auto; min-width: 0; }
.brand img { height: 44px; width: auto; max-width: none; flex: 0 0 auto; }
.nav-inner { grid-template-columns: auto 1fr auto; }

/* Orange text below 18px fails WCAG AA on cream at #E85D04 (3.06:1).
   --orange-text is 5.15:1 on --bg; --orange-band is 5.46:1 against white. */
:root {
  --orange-text: #B33C00;
  --orange-band: #BC3F01;
}
.kicker, .num, .steps-grid .num, .price-chip, td a, .jump a:hover { color: var(--orange-text); }
.band-orange { background: var(--orange-band); }
.band-orange p, .band-orange h2, .band-orange a { color: #fff; }
.caption, .disclaimer, .meta, .note, .updated { color: #5c554d; }

/* Visible keyboard focus. There was none anywhere on the site. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--orange-text);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link */
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 12px; top: 12px; position: fixed; z-index: 100;
  background: #111; color: #fff; padding: 10px 16px; border-radius: 8px;
  font-family: var(--head); font-weight: 700;
}

/* The consent checkbox label broke apart: .form label{display:grid}
   was beating .check{display:flex} on specificity. */
.form label.check { display: flex; gap: 10px; align-items: flex-start; }
.form label.check input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; }

/* Hero watermark was clipping and pushing the document past the viewport */
.hero { overflow: hidden; }
.hero-word { left: 0; }

/* Tap targets: footer links were 23px high, menu button 42px */
footer a { padding: 5px 0; min-height: 44px; display: flex; align-items: center; }
.foot-bottom a { min-height: 0; display: inline; }
.menu-btn { width: 44px; height: 44px; }

/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Project photo gallery: portrait site photographs, shown whole */
.gallery .photo { background: #f0ece6; }
.gallery .photo img { height: 260px; object-fit: cover; }
.gallery figcaption { padding: 0 2px; }

/* hero card title: styled like an h3 but not in the heading outline,
   because it sits above the page's first h2 */
.hero-card-meta .card-title {
  font-family: var(--head); font-weight: 700;
  font-size: 16px; letter-spacing: -0.02em;
}

/* Cabin gallery cards */
.cabin img { height: 300px; object-fit: cover; }
.cabin figcaption { padding: 0 2px; }

/* --- audit fixes --- */

/* The brand <a> was collapsing to 9px while its logo overflowed it, so the
   clickable area was a sliver even though the image looked right. */
.nav-inner > .brand { justify-self: start; }
.brand { flex: 0 0 auto; width: max-content; min-width: max-content; }

/* .trio mid card: white 14.5px text on #ea6a12 measured 3.2:1. Darkened. */
.trio article.mid { background: linear-gradient(180deg, #BC3F01, #A03400); }
.trio article.mid p,
.trio article.mid h3,
.trio article.mid .kicker { color: #fff; }

/* Tap targets: table links were 16px high, jump-bar pills 38px */
td a { display: inline-block; padding: 12px 0; }
.jump a { padding: 12px 16px; }
.skip:focus { padding: 14px 18px; }

@media (max-width: 640px) {
  /* keep the header from crowding at 390px */
  .brand img { height: 34px; }
  .nav-cta .btn-ghost { display: none; }
}

/* Small text sitting on the taupe hero gradient needs the darker ink to
   clear 4.5:1 (measured 2.93 and 3.87 before). */
.trust-strip, .page-hero .updated, .hero .updated, .updated { color: var(--ink-soft); }

.jump-label { color: var(--ink-soft); }

/* card headings that are links need a real hit area */
.card-pad h3 a { display: inline-block; padding: 10px 0; }

@media (max-width: 640px) {
  /* keep the logo link 44px tall for touch even though the mark is 34px */
  .brand { padding: 5px 0; }
  .brand img { height: 34px; }
}

/* ===============================================================
   v5 — MOTION, MEDIA FRAMING, NAVIGATION, FOOTER
   Everything below this line was added in the v5 pass. It is
   deliberately last in the file so it wins on cascade order
   without needing !important anywhere.
   =============================================================== */

/* ---------------------------------------------------------------
   1. TOKENS
   Brand orange corrected to #E85002 per the v4 audit register
   (row 16). --orange-text and --orange-band stay as the WCAG-safe
   variants; both were re-measured against the corrected hue.
   --------------------------------------------------------------- */
:root {
  --orange: #e85002;
  --orange-deep: #c44100;
  --orange-text: #b33c00;   /* 5.2:1 on --bg  */
  --orange-band: #bc3f01;   /* 5.5:1 vs white */
  --ease: cubic-bezier(0.22, 0.68, 0.32, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.55s;
}

/* ---------------------------------------------------------------
   2. MOTION SYSTEM
   One observer in main.js adds .is-in to anything carrying
   [data-reveal]. --d is a per-element stagger in milliseconds.
   Everything is transform + opacity only, so nothing triggers
   layout and long pages stay smooth on a mid-range Android.
   --------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--dur) var(--ease-out) calc(var(--d, 0) * 1ms),
    transform var(--dur) var(--ease-out) calc(var(--d, 0) * 1ms);
}
.js [data-reveal="left"]  { transform: translate3d(-26px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(26px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(0.965); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Children of a [data-stagger] container reveal one after another.
   Set by main.js as an inline --d so the count is not hard-coded. */
[data-stagger] > * { --d: 0; }

/* The hero runs on load rather than on scroll, because it is
   already in view and an observer would fire a frame too late. */
.hero-in .h-rise {
  animation: h-rise 0.9s var(--ease-out) both;
}
.hero-in .h-rise:nth-child(2) { animation-delay: 0.07s; }
.hero-in .h-rise:nth-child(3) { animation-delay: 0.14s; }
.hero-in .h-rise:nth-child(4) { animation-delay: 0.21s; }
.hero-in .h-rise:nth-child(5) { animation-delay: 0.28s; }
@keyframes h-rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-reveal].is-in { opacity: 1; transform: none; transition: none; }
  .hero-in .h-rise { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------
   3. MEDIA FRAMING
   Every photograph now sits in a fixed-ratio box and fills it.
   This is what removes the black letterbox bands: a portrait
   source in a landscape slot is cropped, never padded.
   --------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background: #e9e2d9;
  border-radius: var(--radius);
}
.media > img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 0.7s var(--ease-out);
}
.r-32  { aspect-ratio: 3 / 2; }
.r-45  { aspect-ratio: 4 / 5; }
.r-11  { aspect-ratio: 1 / 1; }
.r-169 { aspect-ratio: 16 / 9; }

/* Same rule for the existing figure and card patterns, so old
   markup benefits without being rewritten. */
.photo { aspect-ratio: 3 / 2; }
.photo.r-45 { aspect-ratio: 4 / 5; }
.photo.r-11 { aspect-ratio: 1 / 1; }
.photo.r-auto { aspect-ratio: auto; }
.photo > img { width: 100%; height: 100%; object-fit: cover; }
.photo + .caption, figure > .caption { margin-top: 10px; }

.listing img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.listing { position: relative; overflow: hidden; }
.listing > img { display: block; }
.listing:hover img, .listing:focus-within img { transform: scale(1.045); }
.listing img.listing-draw { aspect-ratio: 3 / 2; object-fit: contain; }
.listing:hover img.listing-draw { transform: none; }

/* Sheet-style catalogue images must be shown whole, on white. */
.sheet {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.sheet img { width: 100%; height: auto; display: block; border-radius: 8px; }
.sheet figcaption {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--head); font-size: 12.5px; color: #5c554d;
}
@media (max-width: 640px) { .sheet { padding: 10px; } }

/* ---------------------------------------------------------------
   4. INTERACTION POLISH
   --------------------------------------------------------------- */
.btn { transition: background 0.22s var(--ease), color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease); }
.btn-dark:hover  { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 18, 16, 0.22); }
.btn-orange:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(232, 80, 2, 0.28); }
.btn-ghost:hover { transform: translateY(-2px); border-color: rgba(22, 20, 18, 0.3); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }

.card {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(22, 20, 18, 0.16); }
.listing { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.listing:hover { transform: translateY(-5px); }
.listing .listing-row span:last-child {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.listing:hover .listing-row span:last-child { transform: translateX(5px); }

.nav { transition: height 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(40, 28, 16, 0.05); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.is-active::after { transform: scaleX(1); }

.faq details { transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); }
.faq details[open] { border-color: rgba(22, 20, 18, 0.18); box-shadow: var(--shadow-sm); }
.faq summary::after {
  content: "+"; float: right; font-size: 20px; line-height: 1;
  color: var(--orange-text); transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] > p { animation: fadeDown 0.3s var(--ease-out) both; }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------
   5. HOMEPAGE HERO
   Replaces the two squashed stacked images with one tall frame,
   two floating detail cards and a spec strip.
   --------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1100px 620px at 78% 8%, rgba(255, 255, 255, 0.55), transparent 62%),
    linear-gradient(180deg, #c9bcac 0%, #ded2c2 32%, #efe8de 72%, var(--bg) 100%);
  padding: 34px 0 84px;
  min-height: 0;
}
.hero-grid {
  grid-template-columns: 1.02fr 0.98fr;
  gap: 52px;
  align-items: center;
  min-height: 0;
  padding-top: 18px;
}
.hero-word {
  top: 2%;
  color: rgba(255, 255, 255, 0.22);
  font-size: clamp(84px, 13.5vw, 200px);
}
.hero h1 { margin: 20px 0 18px; }
.hero .lead { font-size: 17px; max-width: 52ch; }

/* The stage: one dominant image plus two overlapping detail tiles */
.hero-stage { position: relative; }
.hero-frame {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 34px 80px rgba(46, 32, 18, 0.22);
  background: #ded4c8;
}
.hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52%, rgba(20, 14, 8, 0.52) 100%);
  pointer-events: none;
}
.hero-badge {
  position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 15px 18px;
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.9);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 30px rgba(40, 28, 16, 0.16);
}
.hero-badge .b-title {
  font-family: var(--head); font-weight: 700; font-size: 15.5px;
  letter-spacing: -0.02em;
}
.hero-badge .b-meta { color: #5c554d; font-size: 12.5px; margin-top: 2px; }
.hero-badge .price-chip { font-size: 14px; display: block; margin-top: 6px; }

.hero-tile {
  position: absolute;
  width: 132px;
  border-radius: 18px;
  overflow: hidden;
  border: 4px solid rgba(255, 253, 249, 0.92);
  box-shadow: 0 18px 40px rgba(40, 28, 16, 0.22);
  background: #e9e2d9;
  opacity: 0;
  animation: tile-in 0.85s var(--ease-out) 0.5s both;
}
/* height:auto matters: without it the width/height attributes act as
   presentational hints and the 900px height beats aspect-ratio. */
.hero-tile img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.hero-tile-a { left: -34px; top: 12%; }
.hero-tile-b { right: -28px; bottom: 20%; animation-delay: 0.68s; }
@keyframes tile-in {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* Hero trust strip becomes chips rather than a run-on list */
.trust-strip span {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(22, 20, 18, 0.09);
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

@media (max-width: 1080px) {
  .hero-tile { width: 108px; }
  .hero-tile-a { left: -18px; }
  .hero-tile-b { right: -14px; }
}
@media (max-width: 980px) {
  .hero { padding: 22px 0 56px; }
  .hero-grid { gap: 34px; padding-top: 6px; }
  .hero-stage { order: -1; margin-bottom: 4px; }
  .hero-frame { aspect-ratio: 4 / 3; border-radius: 24px; }
  .hero-tile { display: none; }
  .hero-word { font-size: clamp(60px, 16vw, 120px); }
}
@media (max-width: 640px) {
  .hero-badge { left: 12px; right: 12px; bottom: 12px; padding: 13px 14px; }
  .hero .lead { font-size: 16px; }
}

/* ---------------------------------------------------------------
   6. PAGE HERO — split layout, breadcrumb, back link
   Every product and price page now opens with the same shape:
   where you are, how to get back, the claim, and the machine.
   --------------------------------------------------------------- */
.page-hero {
  background:
    radial-gradient(900px 500px at 88% 0%, rgba(255, 255, 255, 0.5), transparent 60%),
    linear-gradient(180deg, #cdbfaf 0%, #e6ded3 62%, var(--bg) 100%);
  padding: 22px 0 56px;
}
.page-hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 46px;
  align-items: center;
}
.page-hero-grid > * { min-width: 0; }
.page-hero-grid .page-hero-media {
  border-radius: 26px; overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 26px 60px rgba(46, 32, 18, 0.18);
  background: #ded4c8;
}
.page-hero-grid .page-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero h1 { max-width: 20ch; }

/* Breadcrumb + back link */
.crumbs {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 10px;
  font-family: var(--head); font-size: 12.5px; font-weight: 500;
  color: #5c554d;
  padding: 14px 0 16px;
}
.crumbs a { color: #5c554d; padding: 6px 0; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--ink); border-bottom-color: var(--orange); }
.crumbs .sep { opacity: 0.45; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 700; }
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--head); font-weight: 700; font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(22, 20, 18, 0.12);
  border-radius: var(--radius-pill);
  padding: 10px 16px 10px 13px;
  min-height: 44px;
  transition: 0.22s var(--ease);
}
.back-link:hover { background: #fff; border-color: rgba(22, 20, 18, 0.22); transform: translateX(-3px); }
.back-link .arw { transition: transform 0.22s var(--ease); }
.back-link:hover .arw { transform: translateX(-3px); }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .page-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .page-hero-grid .page-hero-media { aspect-ratio: 16 / 10; order: -1; }
  .page-hero h1 { max-width: none; }
}

/* ---------------------------------------------------------------
   7. FACT STRIP — the three numbers that matter, under a hero
   --------------------------------------------------------------- */
.facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  margin-top: 26px;
}
.facts > div { background: rgba(255, 253, 249, 0.78); padding: 16px 18px; }
.facts dt {
  font-family: var(--head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #5c554d;
}
.facts dd {
  font-family: var(--head); font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em; margin-top: 5px; color: var(--ink);
}
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   8. INLINE ENQUIRY FORM — sits at the foot of every product page
   --------------------------------------------------------------- */
.enquire {
  background: linear-gradient(180deg, #171411 0%, #201b16 100%);
  color: #f6f1ea;
  padding: 64px 0;
}
.enquire h2 { color: #fff; }
.enquire .lede { color: rgba(246, 241, 234, 0.78); }
.enquire .kicker { color: #ffb184; }
.enquire-grid {
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: 44px; align-items: start;
}
.enquire-grid > * { min-width: 0; }
.enquire .tick li { color: rgba(246, 241, 234, 0.8); }
.enquire .tick li::before { background: var(--orange); }
.mini-form {
  background: #fffdf9;
  color: var(--ink);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.3);
  display: grid; gap: 13px;
}
.mini-form h3 { font-size: 19px; letter-spacing: -0.02em; }
.mini-form .note { margin-top: 0; }
.mini-form label { font-size: 13px; font-weight: 600; display: grid; gap: 6px; font-family: var(--head); }
.mini-form input, .mini-form select, .mini-form textarea {
  height: 46px; border-radius: 12px; border: 1px solid var(--line-strong);
  padding: 0 12px; background: #fff; font-size: 16px; font-family: var(--body);
  width: 100%;
}
.mini-form textarea { height: 84px; padding: 11px 12px; resize: vertical; }
.mini-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-form label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 13px; color: var(--ink-soft); }
.mini-form label.check input { flex: 0 0 auto; width: 20px; height: 20px; height: 20px; margin-top: 2px; }
.mini-form button { width: 100%; }
@media (max-width: 980px) {
  .enquire-grid { grid-template-columns: 1fr; gap: 28px; }
  .enquire { padding: 52px 0; }
}
@media (max-width: 480px) {
  .mini-form .row-2 { grid-template-columns: 1fr; }
  .mini-form { padding: 20px; }
}

/* ---------------------------------------------------------------
   9. NEXT STEPS — the "where do I go from here" block that closes
   every deep page. This is what stops the site being a set of
   dead ends you can only leave through the header.
   --------------------------------------------------------------- */
.next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.next-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.next-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(22, 20, 18, 0.18); }
.next-card .n-eyebrow {
  font-family: var(--head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-text);
}
.next-card h3 { font-size: 17px; margin: 7px 0 6px; }
.next-card p { color: var(--ink-soft); font-size: 14px; }
.next-card .go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-family: var(--head); font-weight: 700; font-size: 13.5px; color: var(--ink);
}
.next-card .go span { transition: transform 0.28s var(--ease); }
.next-card:hover .go span { transform: translateX(5px); }
@media (max-width: 900px) { .next-grid { grid-template-columns: 1fr; } }

/* Sibling product rail — move sideways, not just up and down */
.rail {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
}
.rail-label {
  font-family: var(--head); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: #5c554d;
  width: 100%; margin-bottom: 2px;
}
.rail a {
  font-family: var(--head); font-weight: 500; font-size: 13.5px;
  padding: 11px 15px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.6);
  min-height: 44px; display: inline-flex; align-items: center;
  transition: 0.2s var(--ease);
}
.rail a:hover { background: #fff; border-color: var(--orange); color: var(--orange-text); transform: translateY(-2px); }
.rail a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.rail a[aria-current="page"]:hover { color: #fff; transform: none; }

/* ---------------------------------------------------------------
   10. NAVIGATION — a products panel on desktop so the whole
   catalogue is one hover away from every page.
   --------------------------------------------------------------- */
.has-panel { position: relative; }
.nav-panel {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translate(-50%, 8px);
  width: min(660px, 92vw);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 26px 60px rgba(40, 28, 16, 0.16);
  padding: 18px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  z-index: 60;
}
.nav-panel::before {
  content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.has-panel:hover .nav-panel,
.has-panel:focus-within .nav-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-panel a {
  display: block; padding: 9px 12px; border-radius: 11px;
  font-size: 14px; color: var(--ink-soft);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.nav-panel a:hover { background: var(--orange-soft); color: var(--ink); }
.nav-panel a::after { display: none; }
.nav-panel .np-head {
  grid-column: 1 / -1;
  font-family: var(--head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #5c554d;
  padding: 2px 12px 8px;
}
.nav-panel .np-note {
  grid-column: 1 / -1;
  margin-top: 8px; padding: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: #5c554d;
}
.nav-panel .np-note a { display: inline; padding: 0; color: var(--orange-text); font-weight: 700; }
.nav-panel .np-note a:hover { background: none; }
@media (max-width: 980px) {
  .nav-panel { display: none; }
  .nav-links.open .has-panel { display: block; width: 100%; }
}

/* Mobile drawer: give it room, tap targets and an entrance */
@media (max-width: 980px) {
  .nav-links.open {
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    box-shadow: 0 22px 40px rgba(40, 28, 16, 0.14);
    animation: drawer 0.28s var(--ease-out) both;
    z-index: 55;
  }
  .nav-links.open a {
    min-height: 46px; display: flex; align-items: center;
    border-bottom: 1px solid rgba(22, 20, 18, 0.06);
    font-size: 16px;
  }
  .nav-links.open a:last-child { border-bottom: 0; }
  @keyframes drawer {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------------------------------------------------------------
   11. FOOTER — the v4 footer was 11 links deep in one column and
   ran to well over a screen. Four balanced columns, a real
   baseline, and half the vertical padding.
   --------------------------------------------------------------- */
footer { padding: 52px 0 22px; }
.foot-grid {
  grid-template-columns: 1.5fr 0.95fr 0.95fr 0.95fr 0.95fr;
  gap: 26px 28px;
  align-items: start;
}
footer h4, footer .foot-head {
  font-size: 11px; letter-spacing: 0.13em; color: #b9a893; margin-bottom: 10px;
}
footer a, footer p {
  font-size: 14px; margin: 0 0 2px; line-height: 1.5;
}
/* v4 gave every footer link a 44px flex box, which is right for
   touch and wrong for a dense list. Tighter rows on desktop,
   full 44px targets back on the breakpoint where fingers arrive. */
footer a {
  min-height: 0; display: inline-block; padding: 5px 0;
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
footer a:hover { color: #fff; transform: translateX(2px); }
.foot-col-links { display: grid; }
.foot-brand p { color: rgba(239, 232, 222, 0.66); }
.foot-brand .brand-foot { margin-bottom: 12px; }
.brand-foot img { height: 46px; }
.foot-contact { margin-top: 12px; display: grid; gap: 2px; }
.foot-contact a { color: #efe8de; font-family: var(--head); font-weight: 500; }
.foot-bottom {
  margin-top: 28px; padding-top: 16px;
  font-size: 12.5px;
  align-items: center;
}
.foot-bottom a { display: inline; min-height: 0; padding: 0; }
.foot-legal { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 980px) {
  footer { padding: 42px 0 20px; }
  /* four narrow link columns keeps the tablet footer about half
     the height a two-column version produced */
  .foot-grid { grid-template-columns: repeat(4, 1fr); gap: 22px 18px; }
  footer a, footer p { font-size: 13.5px; }
  .foot-brand { grid-column: 1 / -1; }
  footer a { min-height: 44px; display: flex; align-items: center; padding: 0; }
  .foot-brand p, .foot-bottom a { min-height: 0; display: inline; }
  .foot-contact a { min-height: 44px; display: flex; align-items: center; }
}
/* Above 560px the columns are always open and the summary is not
   shown, so the disclosure markup costs desktop nothing. */
.foot-col > summary { display: none; }

@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; gap: 6px; }
  /* Collapse the four link columns into disclosure rows, so the
     footer is four taps tall instead of twenty-one rows long. */
  .foot-col { border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .foot-col > summary {
    display: flex; list-style: none; cursor: pointer;
    font-family: var(--head); font-size: 12px; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase; color: #c9baaa;
    min-height: 48px; align-items: center; justify-content: space-between;
  }
  .foot-col > summary::-webkit-details-marker { display: none; }
  .foot-col > summary::after { content: "+"; font-size: 20px; color: #c9baaa; font-weight: 400; }
  .foot-col[open] > summary::after { content: "\2212"; }
  .foot-col .foot-head { display: none; }
  .foot-col-links { padding: 0 0 12px; }
  .foot-bottom { margin-top: 20px; gap: 8px; }
}

/* ---------------------------------------------------------------
   12. CABIN DESIGNS — gallery, finish families, swatch rows
   --------------------------------------------------------------- */
.cabin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.cabin-grid > * { min-width: 0; }
.cabin-card {
  border-radius: 18px; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cabin-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cabin-card .media { border-radius: 0; }
.cabin-card:hover .media img { transform: scale(1.05); }
.cabin-card figcaption { padding: 13px 15px 15px; }
.cabin-card .c-name { font-family: var(--head); font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; }
.cabin-card .c-meta { color: #5c554d; font-size: 12.5px; margin-top: 3px; }
@media (max-width: 900px) { .cabin-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 420px) { .cabin-grid { grid-template-columns: 1fr; } }

/* Named option lists — what "fifteen wall finishes" actually means */
.opt-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.opt-list li {
  list-style: none;
  font-family: var(--head); font-size: 12.5px; font-weight: 500;
  padding: 8px 13px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--line-strong); color: var(--ink-soft);
}
.opt-list li::before { display: none; }

/* ---------------------------------------------------------------
   13. LAYOUT AND ACCESSIBILITY REPAIRS FOUND IN THE v5 AUDIT
   --------------------------------------------------------------- */
/* refaq.pl used to emit the FAQ block outside any .wrap, so on
   three pages the questions ran the full width of the viewport. */
.faq-section { padding: 0 0 88px; }
.faq-section .wrap { max-width: 860px; }

/* Long tables were the only thing forcing a horizontal scroll.
   Tell the reader it scrolls rather than letting them discover it. */
.table-wrap { position: relative; -webkit-overflow-scrolling: touch; }
.table-hint {
  display: none;
  font-family: var(--head); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #5c554d;
  margin-top: 10px;
}
@media (max-width: 760px) { .table-hint { display: block; } }

/* The section rhythm was one flat 88px everywhere, which made long
   pages read as an undifferentiated column. */
.section + .section { padding-top: 0; }
.band-dark + .section, .band-orange + .section, .enquire + .section { padding-top: 88px; }
@media (max-width: 980px) { .band-dark + .section, .band-orange + .section, .enquire + .section { padding-top: 64px; } }

/* A quiet divider for pages that need one more beat between blocks */
.rule { height: 1px; background: var(--line); margin: 8px 0 0; }

.lede + .lede { margin-top: 14px; }
.section > .wrap > .btn { margin-top: 24px; }

/* Skip link and focus ring sit above the sticky header */
.skip:focus { z-index: 200; }

/* Anything a screen reader needs but the eye does not */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* WhatsApp float: keep it clear of the footer CTA on small screens */
.wa { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.wa:hover { transform: scale(1.06); box-shadow: 0 14px 30px rgba(37, 211, 102, 0.45); }
@media (max-width: 640px) { .wa { right: 14px; bottom: 14px; width: 52px; height: 52px; } }

/* Print: nobody prints this, but a quotation page might be saved */
@media print {
  .nav, .wa, .band-orange, .enquire, footer, .skip, .crumbs, .back-link { display: none; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* White on --orange measures 3.76:1. The solid orange button is the
   primary action on eleven enquiry forms, so it takes the same
   WCAG-safe orange the CTA band already uses. */
.btn-orange { background: var(--orange-band); }
.btn-orange:hover { background: #a63701; }

/* ---------------------------------------------------------------
   14. TOUCH TARGETS
   Measured at 390px against the 44px minimum. Everything below was
   under it: the skip link, the breadcrumb, the consent checkbox and
   the two legal links in the footer baseline.
   --------------------------------------------------------------- */
.skip:focus { min-height: 44px; display: inline-flex; align-items: center; }
.crumbs a, .crumbs [aria-current="page"] { min-height: 44px; display: inline-flex; align-items: center; }
.crumbs { gap: 0 8px; }
.form label.check input, .mini-form label.check input { width: 24px; height: 24px; }
.form label.check, .mini-form label.check { padding: 6px 0; line-height: 1.5; }
.form label.check a, .mini-form label.check a {
  display: inline-block; padding: 3px 0; text-decoration: underline;
  text-underline-offset: 3px; color: var(--orange-text); font-weight: 600;
}
@media (max-width: 640px) {
  .foot-legal { gap: 4px 20px; }
  .foot-legal a { min-height: 44px; display: inline-flex; align-items: center; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* Very narrow phones (320px). Buttons are nowrap by design, and
   "Send a floor plan on WhatsApp" is wider than the column, which
   pushed the document 17px past the viewport. Below 400px the
   hero actions stack and are allowed to wrap. */
@media (max-width: 400px) {
  .hero-actions { display: grid; gap: 10px; }
  .btn {
    white-space: normal; text-align: center;
    height: auto; min-height: 50px; padding: 13px 18px; line-height: 1.3;
  }
  .hero-actions .btn { width: 100%; }
  .rail a, .jump a { white-space: normal; }
}

/* A <select> is as wide as its longest option unless told otherwise,
   and "Service or AMC on an existing lift" is wider than a 320px
   phone. Grid children default to min-width:auto, so that intrinsic
   width pushed the whole contact form past the viewport. */
.form > *, .form .row-2 > *, .mini-form > *, .mini-form .row-2 > * { min-width: 0; }
.form input, .form select, .form textarea,
.mini-form input, .mini-form select, .mini-form textarea {
  width: 100%; max-width: 100%; min-width: 0;
}

/* ===============================================================
   v6 — RESPONSIVE AUTHORITY, ALIGNMENT, SHEET PAIRS
   =============================================================== */

/* ---------------------------------------------------------------
   1. RESPONSIVE AUTHORITY
   The stylesheet is four layers deep, and a declaration made inside
   an early `@media (max-width: …)` block is beaten by the same
   declaration made flat later in the file — equal specificity, and
   the later rule wins. That is how the homepage hero stayed two
   columns on a phone: a v5 rule re-declared grid-template-columns
   outside any media query, cancelling the 980px rule above it.

   Everything below re-asserts the small-screen intent from the
   very end of the sheet, where nothing can shadow it.
   `build-scripts/v5_css_shadow.pl` proves the file is clean.
   --------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero h1 { max-width: none; }
  .hero-word { color: rgba(255, 255, 255, 0.16); }
}

/* The watermark is a decorative device sized for a wide canvas. On
   a phone it collides with the headline instead of sitting behind
   it, so it comes off entirely rather than being shrunk again. */
@media (max-width: 760px) {
  .hero-word { display: none; }
}

@media (max-width: 640px) {
  .brand img { height: 34px; }
  .brand-foot img { height: 42px; }
}

/* ---------------------------------------------------------------
   2. HEADER ALIGNMENT
   Wrapping the Products link in a <span> to hang the panel off it
   made that one item an inline box inside a stretched flex item,
   so it sat 3px higher than its five siblings. Give every item the
   same box.
   --------------------------------------------------------------- */
.nav-links { align-items: stretch; }
.nav-links > a,
.nav-links .has-panel { display: flex; align-items: center; }
.nav-links .has-panel > a {
  display: flex; align-items: center;
  height: 100%; padding: 6px 0;
}

/* ---------------------------------------------------------------
   3. CATALOGUE SHEETS
   Two sheets of different proportions side by side left a block of
   dead space under the shorter one. Sheets are now paired only
   with a partner of the same proportion, and the pair is forced to
   equal height so the row always closes cleanly.
   --------------------------------------------------------------- */
.sheet-stack { display: grid; gap: 24px; margin-top: 30px; }
.sheet-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  align-items: stretch;
}
.sheet-pair > * { min-width: 0; }
.sheet-pair .sheet { display: flex; flex-direction: column; }
.sheet-pair .sheet img { flex: 1 1 auto; min-height: 0; object-fit: contain; }
.sheet-pair .sheet figcaption { margin-top: auto; padding-top: 12px; }
@media (max-width: 860px) {
  .sheet-pair { grid-template-columns: 1fr; }
}

/* The three in-car displays: one card per size, whole, on white. */
.tft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.tft-grid > * { min-width: 0; }
.tft-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tft-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tft-card img { width: 100%; height: auto; display: block; border-radius: 8px; }
.tft-card figcaption {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-family: var(--head); font-size: 12.5px; color: #5c554d;
}
@media (max-width: 860px) { .tft-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   4. FIGURES
   v5 put the aspect ratio on the <figure>, which is wrong whenever
   the figure also holds a caption: the figure is then locked to the
   picture's height, the caption is pushed outside it and clipped by
   overflow:hidden, and it lands on top of the next section. That is
   what happened to the four project photographs on /structure-lifts/.

   The ratio belongs to the picture. The figure is free to grow, the
   rounding and the shadow move onto the image, and the caption sits
   under it on the page ground — the same shape as .drawing, .sheet
   and .cabin-card, so all four now read as one family.
   --------------------------------------------------------------- */
.photo {
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.photo > img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: #e9e2d9;
}
.photo.r-45  > img { aspect-ratio: 4 / 5; }
.photo.r-11  > img { aspect-ratio: 1 / 1; }
.photo.r-169 > img { aspect-ratio: 16 / 9; }
.photo.r-auto > img { aspect-ratio: auto; }
.photo > figcaption { padding: 0 2px; }

/* Project gallery: the photographs are 4:5, so show them at 4:5 and
   crop nothing. The 260px fixed height it had before fought the
   ratio and cropped every one of them. */
.gallery .photo > img { height: auto; aspect-ratio: 4 / 5; }

/* ---------------------------------------------------------------
   5. MOBILE HERO PROPORTIONS
   With the grid collapsed correctly the frame is 260px tall on a
   390px phone, and the price badge was taking 167px of it — the
   picture was a sliver behind a card. On a phone the badge keeps
   the two things a buyer is there for, the machine and the price,
   and drops the drive-type line.
   --------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero-frame { aspect-ratio: 5 / 4; }
  .hero-badge {
    left: 10px; right: 10px; bottom: 10px;
    padding: 11px 13px; border-radius: 14px;
    gap: 10px; flex-wrap: nowrap; align-items: center;
  }
  .hero-badge .b-meta { display: none; }
  .hero-badge .b-title { font-size: 14px; line-height: 1.3; }
  .hero-badge .price-chip { font-size: 13.5px; margin-top: 3px; }
  .hero-badge .btn { height: 44px; min-height: 44px; padding: 0 15px; font-size: 13px; flex: 0 0 auto; }

  /* four trust chips were wrapping to four rows */
  .trust-strip { gap: 8px; margin-top: 22px; }
  .trust-strip span { padding: 6px 11px; font-size: 12px; }
}