@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/InterTight-NGSwv5HMAFg6IuGlBNMjxLsJ8ah8QA.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/InterTight-NGSwv5HMAFg6IuGlBNMjxLsH8ag.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/InterTight-NGSwv5HMAFg6IuGlBNMjxLsJ8ah8QA.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/InterTight-NGSwv5HMAFg6IuGlBNMjxLsH8ag.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/InterTight-NGSwv5HMAFg6IuGlBNMjxLsJ8ah8QA.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/InterTight-NGSwv5HMAFg6IuGlBNMjxLsH8ag.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/InterTight-NGSwv5HMAFg6IuGlBNMjxLsJ8ah8QA.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/InterTight-NGSwv5HMAFg6IuGlBNMjxLsH8ag.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/InterTight-NGSwv5HMAFg6IuGlBNMjxLsJ8ah8QA.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/InterTight-NGSwv5HMAFg6IuGlBNMjxLsH8ag.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnojEk72xU.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnojEk72xU.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Menlo Park Blinds — stylesheet
   Theme: family-suburb · Palette: warm taupe + off-black + oxblood
   Fonts: Playfair Display (display) + Inter Tight (body)
   ========================================================================== */

:root {
  --ink: #1c1814;
  --ink-soft: #52493f;
  --taupe: #b7a084;
  --taupe-deep: #8a7154;
  --taupe-pale: #efe6d8;
  --oxblood: #832f1e;
  --oxblood-deep: #5c2115;
  --paper: #f8f3ea;
  --card: #fffdfa;
  --line: rgba(28, 24, 20, 0.14);
  --shadow: 0 30px 64px -32px rgba(28, 24, 20, 0.42);
  --radius-lg: 30px;
  --radius-md: 18px;
  --radius-sm: 11px;
  --section-pad: 100px;
  --maxw: 1260px;
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}

@media (max-width: 720px) { :root { --section-pad: 60px; } }

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0; font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.08;
  color: var(--ink);
}
p { margin: 0 0 1em; max-width: 62ch; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }

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

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-weight: 700; font-size: 0.76rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--oxblood);
}
.eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--oxblood); display: inline-block; }

.rule {
  width: 60px; height: 2px; background: var(--oxblood);
  transform-origin: left; transform: scaleX(0);
  transition: transform 0.85s cubic-bezier(.2,.7,.2,1) 0.1s;
  margin: 20px 0 0;
}
/* The rule carries .reveal on the same element as often as it sits inside one, so
   both shapes have to be covered — a descendant-only selector left it at scaleX(0)
   and the accent line never appeared. */
.reveal.is-visible .rule, .rule.is-visible { transform: scaleX(1); }

.section { padding: var(--section-pad) 0; }
.section-deep { background: var(--taupe-pale); }
.section-ink { background: var(--ink); color: var(--taupe-pale); }
.section-ink h2, .section-ink h3 { color: var(--paper); }

.section-head { max-width: 700px; margin-bottom: 2.8rem; }
.section-head h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); margin-top: 0.55em; }
.section-head p { margin-top: 1rem; color: var(--ink-soft); }
.section-ink .section-head p { color: rgba(239, 230, 216, 0.78); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-weight: 700; font-size: 0.94rem; letter-spacing: 0.01em;
  padding: 0.95em 1.85em; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform 0.25s cubic-bezier(.2,.8,.3,1), background 0.25s, color 0.25s, border-color 0.25s, box-shadow .25s;
  white-space: nowrap;
}
.btn-primary { background: var(--oxblood); color: var(--paper); box-shadow: 0 16px 32px -16px rgba(131,47,30,0.75); }
.btn-primary:hover { background: var(--oxblood-deep); transform: translateY(-2px); }
.btn-outline { border-color: currentColor; color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.section-ink .btn-outline { color: var(--paper); }
.section-ink .btn-outline:hover { background: var(--paper); color: var(--ink); }
.btn-sm { padding: 0.65em 1.3em; font-size: 0.85rem; }
.btn svg { width: 15px; height: 15px; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: 24px 0; transition: background .35s ease, padding .35s ease, box-shadow .35s ease; }
.nav .container { display: flex; align-items: center; justify-content: space-between; }
.nav.is-solid { background: rgba(248,243,234,0.95); backdrop-filter: blur(10px); padding: 14px 0; box-shadow: 0 10px 30px -20px rgba(28,24,20,0.4); }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 38px; height: 38px; flex: none; color: var(--ink); }
.brand-mark .acc { fill: var(--oxblood); stroke: var(--oxblood); }
.brand-word { font-family: var(--font-display); font-size: 1.28rem; color: var(--ink); }
.brand-word .em { font-style: italic; font-weight: 500; }
.brand-word .strong { font-weight: 700; color: var(--oxblood); }

.nav-links { display: flex; align-items: center; gap: 2.1rem; font-weight: 600; font-size: 0.94rem; }
.nav-links a:not(.btn) { position: relative; padding: 4px 0; color: var(--ink); }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px;
  background: var(--oxblood); transform: scaleX(0); transform-origin: right; transition: transform .26s ease;
}
.nav-links a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }

.nav-toggle { display: none; background: none; border: none; padding: 6px; border-radius: 6px; transition: background .25s ease; }
.nav-toggle:hover { background: rgba(131,47,30,0.08); }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 3px 0; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease, background .25s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); background: var(--oxblood); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); background: var(--oxblood); }
@media (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } }

@media (max-width: 900px) {
  .nav-links { position: fixed; top: 0; right: 0; height: 100vh; width: min(80vw, 340px);
    background: var(--paper); flex-direction: column; align-items: flex-start;
    padding: 112px 32px 40px; gap: 1.7rem; transform: translateX(100%);
    transition: transform .4s cubic-bezier(.2,.8,.2,1); box-shadow: -20px 0 50px -30px rgba(0,0,0,.4); }
  .nav-links.is-open { transform: translateX(0); }
  .nav-links a { font-size: 1.1rem; }
  .nav-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
  .nav-links .btn-sm { display: inline-flex; }
}

/* ---------- hero (video-frame viewport + floating chips) ---------- */
.hero {
  position: relative; padding: 168px 0 var(--section-pad);
  background:
    radial-gradient(760px 420px at 90% -10%, rgba(183,160,132,0.5), transparent 60%),
    radial-gradient(620px 480px at -8% 38%, rgba(131,47,30,0.08), transparent 60%),
    var(--paper);
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 60px; align-items: center; }
.hero-copy h1 { font-size: clamp(2.5rem, 4.6vw, 4.4rem); margin-top: 18px; }
/* padding + negative margin give descenders room inside the overflow clip without
   changing the headline's line rhythm. */
.hero-copy h1 .word { display: inline-block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.hero-copy h1 .word > span { display: inline-block; }
.hero-copy .sub { margin-top: 22px; font-size: 1.12rem; color: var(--ink-soft); max-width: 46ch; }
.hero-ctas { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.trust-row { display: flex; gap: 26px; margin-top: 38px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 9px; font-size: 0.87rem; color: var(--ink-soft); font-weight: 500; }
.trust-item svg { width: 17px; height: 17px; color: var(--oxblood); flex-shrink: 0; }

.hero-frame-wrap { position: relative; }
.hero-viewport {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 5; box-shadow: var(--shadow); border: 1px solid rgba(28,24,20,0.08);
  isolation: isolate;
}
.hero-viewport img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); will-change: transform; }
/* Scrim kept deliberately light: no headline sits on this photograph, so it only has
   to seat the corner mark and the badge. The garden has to read clearly. */
.hero-viewport::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(28,24,20,0.20) 0%, rgba(28,24,20,0.02) 38%, rgba(28,24,20,0.30) 100%);
  z-index: 1;
}
.viewport-corner {
  position: absolute; top: 18px; right: 18px; z-index: 2; width: 30px; height: 30px;
  border-top: 2px solid var(--paper); border-right: 2px solid var(--paper); opacity: 0.85;
}
.viewport-badge {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  background: rgba(248,243,234,0.94); color: var(--ink);
  padding: 8px 14px 8px 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em;
}
.viewport-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--oxblood); }
.viewport-badge .dot.pulse { animation: pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { box-shadow: 0 0 0 0 rgba(131,47,30,0.5); } 50% { box-shadow: 0 0 0 6px rgba(131,47,30,0); } }
@media (prefers-reduced-motion: reduce) { .viewport-badge .dot.pulse { animation: none; } }

.float-chip {
  position: absolute; right: -14px; z-index: 3;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  border-radius: var(--radius-sm); padding: 12px 16px; width: 208px;
  font-size: 0.85rem; font-weight: 600; color: var(--ink); line-height: 1.4;
}
.float-chip .tag { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oxblood); margin-bottom: 4px; }
.chip-a { top: 8%; }
.chip-b { top: 42%; right: -34px; }
.chip-c { bottom: 6%; }

@media (max-width: 1080px) {
  .float-chip { position: static; width: auto; margin-top: 12px; box-shadow: none; border: 1px solid var(--line); }
  .hero-frame-wrap { display: flex; flex-direction: column; gap: 0; }
}
@media (max-width: 900px) {
  .hero { padding-top: 122px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-frame-wrap { order: -1; }
  .hero-viewport { aspect-ratio: 16/11; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy h1 .word > span { transform: none !important; opacity: 1 !important; }
  .hero-viewport img { transform: none; }
}

/* ---------- marquee ---------- */
.marquee { background: var(--ink); color: var(--taupe); overflow: hidden; padding: 1rem 0; border-top: 1px solid rgba(239,230,216,0.08); border-bottom: 1px solid rgba(239,230,216,0.08); }
.marquee-track { display: flex; width: max-content; gap: 3rem; animation: marquee 44s linear infinite; }
.marquee-track span { font-family: var(--font-display); font-style: italic; font-size: 1.04rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 3rem; }
.marquee-track span::after { content: "—"; color: var(--oxblood); font-style: normal; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- product grid ----------
   Hairlines are painted by each card (box-shadow, so they cost no layout) rather than
   by a 1px gap over a tinted grid background. That keeps the exact same look while
   letting the row count be odd — the repairs card sits alone on the last row at every
   breakpoint (13 items: 13 mod 4, 3 and 2 all leave one) without a grey block behind
   the empty cells. */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.product-card { background: var(--card); padding: 2.3rem 1.7rem; display: flex; flex-direction: column; gap: 0.95rem; transition: background .3s ease; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.product-card:last-child { box-shadow: 0 1px 0 var(--line); }
.product-card:hover { background: var(--taupe-pale); }
.product-icon { width: 50px; height: 50px; color: var(--ink); }
.product-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.product-icon .acc { stroke: var(--oxblood); }
.product-card h3 { font-size: 1.1rem; font-weight: 600; }
.product-card p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; }
.product-link { margin-top: auto; font-weight: 700; font-size: 0.85rem; color: var(--oxblood); display: inline-flex; align-items: center; gap: 0.4em; background: none; border: none; padding: 0; text-align: left; }
.product-link svg { width: 14px; height: 14px; transition: transform .25s ease; }
.product-card:hover .product-link svg { transform: translateX(4px); }
.product-note { margin-top: auto; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe-deep); }

@media (max-width: 1080px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .product-grid { grid-template-columns: 1fr; } }

/* ---------- editorial photo section ---------- */
/* align-items:start left the tall figure floating in a half-empty column beside the
   two stacked ones. Stretching it to the row height closes the gap and gives the
   asymmetric layout its intended full-bleed left edge. */
.editorial { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 1.5rem; align-items: stretch; }
.editorial-figure { position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow); }
.editorial-figure img { width: 100%; height: 100%; object-fit: cover; }
.editorial-figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.6rem; background: linear-gradient(0deg, rgba(28,24,20,0.85), transparent); color: var(--paper); font-size: 0.88rem; font-weight: 600; }
.editorial-figure.tall { aspect-ratio: 4 / 5; }
.editorial-col { display: flex; flex-direction: column; gap: 1.5rem; }
.editorial-col .editorial-figure { aspect-ratio: 6 / 5; }
.editorial-note { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.8rem;
  display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; }
.editorial-note p { font-size: 0.95rem; color: var(--ink-soft); max-width: 40ch; }
.editorial-note p:first-child { color: var(--ink); font-family: var(--font-display); font-size: 1.06rem; line-height: 1.5; }
.editorial-note p:last-child { margin-bottom: 0; }
/* Explicit placement: photo above the note in column one, the stacked pair spanning
   both rows in column two. That keeps the columns level instead of leaving half a
   metre of dead space under the tall photograph. */
.editorial-figure.tall { grid-column: 1; grid-row: 1; align-self: start; }
.editorial-note { grid-column: 1; grid-row: 2; }
.editorial-col { grid-column: 2; grid-row: 1 / 3; }
@media (max-width: 900px) {
  .editorial { grid-template-columns: 1fr; }
  .editorial-figure.tall { aspect-ratio: 4/3; grid-column: 1; grid-row: auto; }
  .editorial-note { grid-column: 1; grid-row: auto; }
  .editorial-col { grid-column: 1; grid-row: auto; }
}

/* ---------- locale / signature slat-stage ---------- */
.locale-wrap { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 3rem; align-items: center; }
.slat-stage {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(180deg, var(--taupe-pale) 0%, #e4d6c1 100%);
  padding: 2.4rem clamp(1.2rem, 3vw, 2.4rem) 2rem; transition: background 1s ease;
}
.slat-stage svg { width: 100%; height: auto; display: block; }
.slat-group { transform-box: fill-box; transform-origin: 4% 50%; }
.stage-readout { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.4rem; }
.readout-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oxblood); }
.readout-value { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--ink); }

.locale-copy-grid { display: flex; flex-direction: column; gap: 1.1rem; }
.locale-copy { padding: 1.5rem 1.6rem; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--card); opacity: 0.4; transform: translateX(10px); transition: opacity .5s ease, transform .5s ease, border-color .5s ease; }
.locale-copy.is-active { opacity: 1; transform: translateX(0); border-color: var(--oxblood); }
.locale-copy .tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oxblood); margin-bottom: 0.6em; }
.locale-copy h3 { font-size: 1.06rem; margin-bottom: 0.45em; }
.locale-copy p { font-size: 0.93rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 900px) { .locale-wrap { grid-template-columns: 1fr; } }

/* ---------- process ---------- */
.process-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; }
.process-item { padding-top: 1rem; border-top: 2px solid var(--line); }
.process-item .num { font-family: var(--font-display); font-style: italic; font-size: 2.5rem; color: var(--oxblood); display: block; margin-bottom: 0.4rem; line-height: 1; }
.process-item h3 { font-size: 1.06rem; margin-bottom: 0.4em; }
.process-item p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 900px) { .process-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .process-list { grid-template-columns: 1fr; } }

/* ---------- area chips ---------- */
.area-chip-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.area-chip { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.85em 1.4em; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); font-weight: 700; font-size: 0.92rem; color: var(--ink); transition: border-color .25s ease, transform .25s ease, background .25s ease; }
.area-chip:hover { border-color: var(--oxblood); transform: translateY(-2px); background: var(--taupe-pale); }
.area-chip svg { width: 15px; height: 15px; color: var(--oxblood); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); padding: 1.5rem 0; }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; cursor: pointer; font-family: var(--font-display); font-size: 1.14rem; color: var(--ink); font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-toggle { position: relative; width: 22px; height: 22px; flex: none; }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; background: var(--oxblood); border-radius: 2px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-toggle::before { width: 16px; height: 2px; }
.faq-toggle::after { width: 2px; height: 16px; transition: transform .3s ease, opacity .3s ease; }
.faq-item[open] .faq-toggle::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq-item p { margin-top: 1rem; color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- closing CTA ---------- */
.cta-close { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); padding: clamp(2.6rem, 6vw, 5rem); text-align: center; isolation: isolate; }
.cta-close::before, .cta-close::after { content: ""; position: absolute; border-radius: 50%; filter: blur(64px); z-index: -1; opacity: 0.5; }
.cta-close::before { width: 440px; height: 440px; background: var(--oxblood); top: -170px; left: -110px; animation: drift1 22s ease-in-out infinite; }
.cta-close::after { width: 380px; height: 380px; background: var(--taupe-deep); bottom: -170px; right: -100px; animation: drift2 27s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(56px,36px); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-48px,-28px); } }
@media (prefers-reduced-motion: reduce) { .cta-close::before, .cta-close::after { animation: none; } }
/* The closing panel is near-black, so the outline button has to invert with it —
   inheriting the ink colour left "Chat to us now" invisible against the panel. */
.cta-close .btn-outline { color: var(--paper); border-color: rgba(239,230,216,0.5); }
.cta-close .btn-outline:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta-close h2 { color: var(--paper); font-size: clamp(2rem, 4vw, 3.2rem); max-width: 18ch; margin: 0.4em auto 0.6em; }
.cta-close p { color: rgba(239,230,216,0.82); max-width: 52ch; margin: 0 auto 2rem; }
.cta-close .hero-ctas { justify-content: center; }

/* ---------- form ---------- */
.enquiry-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: start; }
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 0.5em; color: var(--ink); }
.field input, .field select, .field textarea { width: 100%; padding: 0.85em 1em; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--paper); font-family: inherit; font-size: 0.98rem; color: var(--ink); transition: border-color .25s ease, background .25s ease; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--oxblood); background: var(--card); outline: none; }
.field textarea { resize: vertical; min-height: 100px; }
.popia-line { font-size: 0.82rem; color: var(--ink-soft); margin-top: 1rem; line-height: 1.6; max-width: none; }
.form-success { display: none; text-align: center; padding: 2rem 1rem; }
.form-success.is-visible { display: block; }
.form-success svg { width: 46px; height: 46px; color: var(--oxblood); margin: 0 auto 1rem; }
@media (max-width: 900px) { .enquiry-wrap { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: rgba(239,230,216,0.82); padding: 3.6rem 0 2.2rem; }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2.4rem; padding-bottom: 2.4rem; border-bottom: 1px solid rgba(239,230,216,0.12); }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand .brand-mark { color: var(--paper); }
.footer-brand .brand-mark .acc { fill: var(--taupe); stroke: var(--taupe); }
.footer-brand .brand-word { color: var(--paper); }
.footer-brand .brand-word .strong { color: var(--taupe); }
.footer-cols { display: flex; gap: 3.5rem; flex-wrap: wrap; }
.footer-col h4 { color: var(--paper); font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1rem; font-weight: 700; }
.footer-col a, .footer-col span { display: block; font-size: 0.92rem; margin-bottom: 0.6rem; color: rgba(239,230,216,0.78); transition: color .25s ease; }
.footer-col a:hover { color: var(--taupe); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.8rem; font-size: 0.82rem; color: rgba(239,230,216,0.55); }
.footer-bottom p { margin: 0; max-width: 60ch; }

/* ---------- reveal-on-scroll base ---------- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---------- chat widget ---------- */
.chat-launcher { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 62px; height: 62px; border-radius: 50%; background: var(--oxblood); color: var(--paper); border: none; box-shadow: 0 16px 34px -12px rgba(131,47,30,0.65); display: flex; align-items: center; justify-content: center; transition: transform .25s cubic-bezier(.3,.8,.3,1.3), background .25s ease; }
.chat-launcher:hover { transform: scale(1.06); background: var(--oxblood-deep); }
.chat-launcher svg { width: 26px; height: 26px; }
.chat-launcher .icon-close { display: none; }
.chat-launcher.is-open .icon-chat { display: none; }
.chat-launcher.is-open .icon-close { display: block; }

.chat-panel { position: fixed; right: 22px; bottom: 96px; z-index: 90; width: min(364px, calc(100vw - 44px)); max-height: min(560px, calc(100vh - 150px)); background: var(--paper); border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 32px 74px -20px rgba(28,24,20,0.55); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(16px) scale(0.98); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.chat-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.chat-head { background: var(--ink); color: var(--paper); padding: 1.1rem 1.3rem; }
.chat-head strong { font-family: var(--font-display); font-size: 1.05rem; display: block; margin-bottom: 0.2rem; }
.chat-head span { font-size: 0.78rem; color: rgba(239,230,216,0.72); }
/* min-height:0 is what actually makes this scroll. As a column flex item its default
   min-height is auto — the list grew past the panel and the newest reply was clipped
   with no way to reach it. */
.chat-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.1rem 1.1rem 0.6rem; display: flex; flex-direction: column; gap: 0.7rem; }
.chat-chips { flex: none; }
.chat-head { flex: none; }
.chat-msg { max-width: 86%; padding: 0.7em 0.95em; border-radius: 14px; font-size: 0.88rem; line-height: 1.5; }
.chat-msg.bot { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-msg.user { align-self: flex-end; background: var(--oxblood); color: var(--paper); border-bottom-right-radius: 4px; }
.chat-msg.popia { font-size: 0.76rem; color: var(--ink-soft); background: transparent; border: none; padding: 0 0.2em; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.2rem 1.1rem 0.9rem; }
.chat-chip { border: 1.5px solid var(--oxblood); color: var(--oxblood); background: var(--card); border-radius: 999px; padding: 0.5em 1em; font-size: 0.82rem; font-weight: 700; transition: background .2s ease, color .2s ease; }
.chat-chip:hover { background: var(--oxblood); color: var(--paper); }
.chat-input-row { display: flex; gap: 0.5rem; padding: 0.8rem 1rem; border-top: 1px solid var(--line); background: var(--card); }
.chat-input-row input { flex: 1; border: 1.5px solid var(--line); border-radius: 999px; padding: 0.65em 1em; font-family: inherit; font-size: 0.9rem; }
.chat-input-row input:focus { outline: none; border-color: var(--oxblood); }
.chat-input-row button { background: var(--ink); color: var(--paper); border: none; border-radius: 999px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex: none; }
.chat-input-row button svg { width: 17px; height: 17px; }
.chat-input-row.is-hidden { display: none; }
@media (max-width: 480px) { .chat-panel { right: 12px; left: 12px; width: auto; bottom: 92px; } .chat-launcher { right: 14px; bottom: 14px; } }

/* ---------- inner page hero (products / areas) ---------- */
.page-hero { padding: 150px 0 4.4rem; background: var(--paper); position: relative; }
.page-hero-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/7; box-shadow: var(--shadow); position: relative; margin-top: 2.3rem; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(28,24,20,0.30), transparent 52%); }
.breadcrumb { font-size: 0.84rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 1.4rem; display: flex; gap: 0.5em; align-items: center; }
.breadcrumb a { color: var(--oxblood); }
.page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); max-width: 20ch; }
.page-hero .sub { margin-top: 18px; font-size: 1.08rem; color: var(--ink-soft); max-width: 60ch; }

.two-col { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.spec-list li { display: flex; gap: 0.8em; padding: 0.85em 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.spec-list li svg { width: 18px; height: 18px; color: var(--oxblood); flex: none; margin-top: 3px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.pill { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 0.5em 1.1em; font-size: 0.82rem; font-weight: 700; color: var(--ink); }

.related-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 820px) { .related-strip { grid-template-columns: 1fr; } }
.related-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.6rem; transition: transform .25s ease, box-shadow .25s ease; }
.related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.related-card h3 { font-size: 1.05rem; margin-bottom: 0.5em; }
.related-card p { font-size: 0.9rem; color: var(--ink-soft); }


/* --- product photo thumbnails (replaced the old line-drawn icons) --- */
.pthumb{width:100%!important;height:auto!important;max-width:none!important;
  aspect-ratio:4/3;overflow:hidden;display:block;margin:0 0 18px;
  background:rgba(0,0,0,.04)}
.pthumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.product-card:hover .pthumb img,.cell:hover .pthumb img,.card:hover .pthumb img,
.related-card:hover .pthumb img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){
  .pthumb img{transition:none}
  .product-card:hover .pthumb img,.cell:hover .pthumb img,.card:hover .pthumb img,
  .related-card:hover .pthumb img{transform:none}}



.rs-note{font-size:.94rem;line-height:1.6;opacity:.85;margin:14px 0 0;
  padding:12px 14px;border-left:2px solid currentColor}
.rs-note strong{font-weight:600}


/* ==========================================================================
   Review pass — motion safety, hover craft, chat detail
   ========================================================================== */

/* Motion safety. Nothing on this page may end up permanently dimmed or hidden when
   the visitor asks for reduced motion (or when the GSAP CDN never arrives). Every
   element that starts life partly transparent is forced back to full opacity here. */
@media (prefers-reduced-motion: reduce) {
  .locale-copy { opacity: 1 !important; transform: none !important; transition: none !important; }
  .locale-copy.is-active { border-color: var(--line); }
  .rule { transform: scaleX(1) !important; transition: none !important; }
  .hero-copy h1 .word { overflow: visible; }
  .chat-launcher, .chat-panel, .btn, .area-chip, .related-card { transition: none !important; }
}
/* Same guarantee for the no-JavaScript case. */
.no-js .reveal, .no-js .locale-copy { opacity: 1; transform: none; }
.no-js .rule { transform: scaleX(1); }

/* Hover + focus craft on everything that can be clicked. */
.faq-item summary { transition: color .25s ease; }
.faq-item summary:hover { color: var(--oxblood); }
.faq-item summary:focus-visible { outline-offset: 6px; }
.breadcrumb a { transition: color .22s ease, text-decoration-color .22s ease; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.breadcrumb a:hover { text-decoration-color: currentColor; }
.product-link { transition: color .22s ease, opacity .22s ease; }
.product-link:hover { color: var(--oxblood-deep); }
.product-link:hover svg { transform: translateX(4px); }
.editorial-figure { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
.editorial-figure img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.editorial-figure:hover img { transform: scale(1.035); }
.trust-item svg { transition: transform .3s ease; }
.trust-item:hover svg { transform: scale(1.12); }
.footer-col a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .25s ease, text-decoration-color .25s ease; }
.footer-col a:hover { text-decoration-color: var(--taupe); }
.chat-chip:focus-visible, .chat-launcher:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .editorial-figure img, .trust-item svg, .product-link svg { transition: none !important; }
  .editorial-figure:hover img { transform: none; }
}

/* The repairs card closes the range — quietly marked so it reads as a service,
   not a thirteenth product. The end-note fills the rest of that last row so the
   grid finishes on a deliberate line instead of trailing off into empty cells.
   The repairs card always lands in column 1 of the last row (13 items leaves one
   over at 4, 3 and 2 columns alike), so a 2 / -1 span is correct everywhere. */
.product-card.is-service { background: linear-gradient(180deg, var(--card) 0%, rgba(183,160,132,0.12) 100%); }
.product-card.is-service:hover { background: var(--taupe-pale); }
.product-card.grid-endnote { grid-column: 2 / -1; justify-content: center; align-items: center;
  text-align: center; background: var(--taupe-pale); box-shadow: none; }
.grid-endnote p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.02rem, 1.6vw, 1.3rem);
  line-height: 1.5; color: var(--ink); max-width: 34ch; margin: 0; }
.product-card.grid-endnote:hover { background: var(--taupe-pale); }
@media (max-width: 480px) { .product-card.grid-endnote { grid-column: 1 / -1; } }

/* Chat: typing indicator + a little typographic care inside the bubbles. */
.chat-msg.bot strong { font-weight: 700; }
.chat-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 0.75em 0.95em;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; border-bottom-left-radius: 4px; }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--taupe-deep); display: block;
  animation: chat-bounce 1.15s ease-in-out infinite; }
.chat-typing i:nth-child(2) { animation-delay: .16s; }
.chat-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes chat-bounce { 0%,80%,100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-typing i { animation: none; opacity: .6; } }
/* The transcript jumps rather than glides: a smooth scroll here loses the race with
   the next reply and leaves the newest message half off-screen. */
.chat-body { scroll-behavior: auto; }

/* The .pthumb helper was injected onto the inner-page hero band as well as the product
   cards, and its 4/3 ratio was overriding the 16/7 the page hero was drawn for — which
   made a near-square 900px-tall banner on every product and area page. Restore a
   cinematic band; 16/9 keeps enough of a 4:3 photograph that the product still reads. */
.page-hero-media.pthumb { aspect-ratio: 16 / 9; height: auto; }
@media (max-width: 620px) { .page-hero-media.pthumb { aspect-ratio: 4 / 3; } }

/* Form validation, stated plainly rather than by a red ring alone. */
.form-error { font-size: 0.86rem; font-weight: 600; color: var(--oxblood); margin: 0 0 1rem;
  padding: 0.7em 0.9em; border-left: 2px solid var(--oxblood); background: rgba(131,47,30,0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; max-width: none; }
.form-error[hidden] { display: none; }
.field input[aria-invalid="true"] { border-color: var(--oxblood); background: rgba(131,47,30,0.04); }

/* Anchor targets must clear the fixed nav instead of hiding under it. */
section[id], header[id], #enquire, #enquiry-form { scroll-margin-top: 96px; }
@media (max-width: 720px) { section[id], header[id], #enquire, #enquiry-form { scroll-margin-top: 78px; } }

/* Skip link — keyboard users land on the content, not the whole nav. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--oxblood);
  color: var(--paper); padding: 0.8em 1.4em; border-radius: 0 0 var(--radius-sm) 0; font-weight: 700; font-size: 0.9rem; }
.skip-link:focus { left: 0; }

/* ==========================================================================
   THE LEAD LADDER — guide.html (Rung 1 playbook + Rung 2 ballpark + Rung 3 close)
   Built entirely on the existing palette tokens: canvas/ink/accent only, no new hues.
   ========================================================================== */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* guide hero extras layered on the existing .page-hero */
.guide-kicker { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--taupe-deep); margin: 0.5rem 0 0; }
.guide-meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 1.6rem; list-style: none; padding: 0; }
.guide-meta li { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.82rem; font-weight: 600;
  color: var(--ink-soft); }
.guide-meta li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--oxblood); flex: none; }

/* contents strip — sticks just under the fixed solid nav (~64px tall) */
.guide-toc { background: var(--ink); color: var(--taupe-pale); position: sticky; top: 64px; z-index: 40;
  box-shadow: 0 10px 24px -18px rgba(28,24,20,0.6); }
/* guide anchor targets clear both the fixed nav and the sticky contents bar */
#brief, #light, #elevations, #products, #estate, #onsite, #measure, #sources { scroll-margin-top: 120px; }
.guide-toc-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem; padding: 0.9rem 0; }
.guide-toc .eyebrow { color: var(--taupe); margin-right: 0.4rem; }
.guide-toc .eyebrow::before { background: var(--taupe); }
.guide-toc a { font-size: 0.83rem; font-weight: 600; color: rgba(239,230,216,0.82);
  transition: color .2s ease; white-space: nowrap; }
.guide-toc a:hover, .guide-toc a:focus-visible { color: var(--paper); }
@media (max-width: 760px) { .guide-toc { position: static; }
  .guide-toc-inner { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } }

/* readable prose column + footnote refs */
.guide-prose { max-width: 66ch; }
.guide-prose p { font-size: 1.04rem; margin: 0 0 1.15em; }
.guide-prose .lead-para { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.4; color: var(--ink); margin-bottom: 1em; }
.guide-prose strong { font-weight: 700; }
.section-ink .guide-prose { color: rgba(239,230,216,0.9); }
.section-ink .guide-prose strong { color: var(--paper); }
.guide-prose sup { font-size: 0.68em; font-weight: 700; color: var(--oxblood); line-height: 0; }
.section-ink .guide-prose sup { color: var(--taupe); }

.section-alt { background: var(--taupe-pale); }

/* sun-path plan diagram */
.sunarc { margin: 2.4rem 0 0.6rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 1.4rem; }
.section-ink .sunarc { background: rgba(239,230,216,0.05); border-color: rgba(239,230,216,0.16); }
.sunarc svg { width: 100%; height: auto; display: block; }
.sunarc .arc-faint { fill: none; stroke: var(--taupe-deep); stroke-width: 1; opacity: 0.4; }
.section-ink .sunarc .arc-faint { stroke: var(--taupe); opacity: 0.35; }
.sunarc .arc-line { fill: none; stroke: var(--oxblood); stroke-width: 3; stroke-linecap: round; }
.sunarc .arc-sun { fill: var(--oxblood); }
.sunarc .arc-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--ink-soft); }
.section-ink .sunarc .arc-label { fill: rgba(239,230,216,0.8); }

/* elevation cards */
.elev-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
@media (max-width: 760px) { .elev-grid { grid-template-columns: 1fr; } }
.elev-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 1.7rem; display: flex; flex-direction: column; gap: 0.9rem; }
.elev-card .compass { display: flex; align-items: center; gap: 0.7rem; }
.elev-card .compass svg { width: 30px; height: 30px; color: var(--oxblood); flex: none; }
.elev-card .compass b { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.2; }
.elev-card p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
.elev-card .verdict { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line);
  font-size: 0.9rem; color: var(--ink); }
.elev-card .verdict em { font-family: var(--font-display); font-style: italic; color: var(--oxblood); font-weight: 600; }

/* recommendation cards */
.rec-list { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1rem; }
.rec { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.7rem 1.8rem; }
.rec-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--taupe-deep); margin: 0 0 0.5rem; }
.rec h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.rec p { font-size: 0.97rem; color: var(--ink-soft); margin: 0 0 0.7rem; max-width: 62ch; }
.rec .tradeoff { font-size: 0.92rem; color: var(--ink); background: var(--taupe-pale);
  border-left: 2px solid var(--oxblood); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.8em 1em; margin-bottom: 0; }
.rec .tradeoff b { font-weight: 700; }
.rec-side { align-self: center; }
.rec-add { display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap;
  border: 1.5px solid var(--oxblood); color: var(--oxblood); background: var(--card);
  border-radius: 999px; padding: 0.7em 1.2em; font-weight: 700; font-size: 0.86rem;
  transition: background .22s ease, color .22s ease, transform .22s ease; }
.rec-add svg { width: 15px; height: 15px; }
.rec-add:hover { background: var(--oxblood); color: var(--paper); transform: translateY(-1px); }
.rec-add.is-added { background: var(--taupe-pale); border-color: var(--taupe-deep); color: var(--taupe-deep); cursor: default; }
.rec-add:disabled { opacity: 1; }
@media (max-width: 620px) { .rec { grid-template-columns: 1fr; } .rec-side { align-self: start; } }

.rec-brief { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
@media (max-width: 760px) { .rec-brief { grid-template-columns: 1fr; } }
.rec-brief .rec { padding: 1.3rem 1.4rem; }
.rec-brief .rec h3 { font-size: 1.08rem; }
.rec-brief .rec p { font-size: 0.9rem; }
.rec-brief .rec-add { padding: 0.55em 1em; font-size: 0.8rem; }

/* guide figures */
.guide-figure { margin: 2.2rem 0 0; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--card); }
.guide-figure img { width: 100%; height: auto; display: block; }
.guide-figure figcaption { padding: 1rem 1.3rem; font-size: 0.9rem; color: var(--ink-soft); }
.guide-figure figcaption b { color: var(--ink); font-weight: 700; }

/* on-site check list */
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 2.4rem; }
@media (max-width: 760px) { .check-grid { grid-template-columns: 1fr; } }
.check-item { display: flex; gap: 1.1rem; }
.check-item .num { font-family: var(--font-display); font-style: italic; font-size: 1.9rem; line-height: 1;
  color: var(--oxblood); flex: none; }
.section-ink .check-item .num { color: var(--taupe); }
.check-item h3 { font-size: 1.06rem; margin-bottom: 0.35rem; }
.check-item p { font-size: 0.94rem; color: var(--ink-soft); margin: 0; }
.section-ink .check-item p { color: rgba(239,230,216,0.78); }

/* ladder layout (measure + ballpark, and mid-page capture) */
.ladder-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .ladder-grid { grid-template-columns: 1fr; gap: 2rem; } }
.ladder-side .promise { display: flex; flex-direction: column; gap: 0.9rem; margin: 1.4rem 0; }
.promise-item { display: flex; gap: 0.7em; align-items: flex-start; font-size: 0.96rem; }
.promise-item svg { width: 20px; height: 20px; color: var(--oxblood); flex: none; margin-top: 2px; }
.section-ink .promise-item svg { color: var(--taupe); }
.capacity-note { font-size: 0.92rem; color: var(--ink-soft); background: var(--taupe-pale);
  border-radius: var(--radius-sm); padding: 0.9em 1.1em; margin: 0; }
.section-ink .capacity-note { background: rgba(239,230,216,0.06); color: rgba(239,230,216,0.82); }

/* interest checkbox grid */
.legend { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 0.6em; color: var(--ink); }
.interest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1rem; }
@media (max-width: 520px) { .interest-grid { grid-template-columns: 1fr; } }
.interest-grid label { display: flex; align-items: center; gap: 0.6em; font-size: 0.9rem; color: var(--ink);
  cursor: pointer; padding: 0.2em 0; }
.interest-grid input { width: 17px; height: 17px; flex: none; accent-color: var(--oxblood); cursor: pointer; }
.carry-note { font-size: 0.86rem; color: var(--ink-soft); margin: 0.8rem 0 0;
  padding: 0.7em 0.9em; border-left: 2px solid var(--taupe-deep); background: var(--taupe-pale);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.carry-note strong { color: var(--ink); }

/* Rung 2 — the ballpark window list */
.ballpark { margin: 0.4rem 0 1.2rem; border: 1px dashed var(--taupe-deep); border-radius: var(--radius-md);
  background: rgba(183,160,132,0.06); overflow: hidden; }
.ballpark > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; padding: 1em 1.2em; font-weight: 700; font-size: 0.94rem;
  color: var(--ink); }
.ballpark > summary::-webkit-details-marker { display: none; }
.ballpark > summary:hover { color: var(--oxblood); }
.ballpark .chev { width: 16px; height: 16px; color: var(--oxblood); flex: none; transition: transform .3s ease; }
.ballpark[open] .chev { transform: rotate(180deg); }
.bp-inner { padding: 0 1.2em 1.2em; }
.bp-print-head { display: none; }
.bp-pairing { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 1rem; }
.bp-pairing strong { color: var(--ink); }
.bp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bp-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 620px; }
.bp-table th { text-align: left; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--taupe-deep); font-weight: 700; padding: 0.5em 0.6em; border-bottom: 1px solid var(--line); }
.bp-table td { padding: 0.4em 0.6em; vertical-align: middle; }
.bp-table input, .bp-table select { width: 100%; padding: 0.55em 0.6em; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: var(--paper); font-size: 0.9rem; color: var(--ink); }
.bp-table input:focus, .bp-table select:focus { outline: none; border-color: var(--oxblood); background: var(--card); }
.bp-table td[data-lbl="Width (mm)"] input, .bp-table td[data-lbl="Drop (mm)"] input { min-width: 78px; }
.bp-remove { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink-soft); font-size: 1.1rem; line-height: 1; display: flex;
  align-items: center; justify-content: center; transition: border-color .2s ease, color .2s ease; }
.bp-remove:hover { border-color: var(--oxblood); color: var(--oxblood); }
.bp-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.bp-btn { display: inline-flex; align-items: center; gap: 0.5em; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); border-radius: 999px; padding: 0.6em 1.1em;
  font-weight: 700; font-size: 0.84rem; transition: border-color .2s ease, background .2s ease; }
.bp-btn svg { width: 15px; height: 15px; color: var(--oxblood); }
.bp-btn:hover { border-color: var(--oxblood); background: var(--taupe-pale); }
.bp-count { font-size: 0.88rem; font-weight: 600; color: var(--ink); margin: 1rem 0 0.4rem; }
.bp-foot { font-size: 0.82rem; color: var(--ink-soft); margin: 0; }

/* mobile: ballpark rows become stacked cards under 640px */
@media (max-width: 640px) {
  .bp-table { min-width: 0; }
  .bp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bp-table, .bp-table tbody, .bp-table tr, .bp-table td { display: block; width: 100%; }
  .bp-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 0.8rem;
    margin-bottom: 0.9rem; background: var(--card); position: relative; }
  .bp-table td { padding: 0.35em 0; }
  .bp-table td[data-lbl]::before { content: attr(data-lbl); display: block; font-size: 0.68rem;
    font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe-deep);
    margin-bottom: 0.25em; }
  .bp-table td.bp-rm { position: absolute; top: 0.5rem; right: 0.6rem; width: auto; padding: 0; }
  .bp-table td.bp-rm::before { display: none; }
}

/* the form success + hidden-form states the ladder toggles */
[data-lead-form].is-hidden { display: none; }
.form-success.show { display: block; }
.form-success h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.form-success p { color: var(--ink-soft); margin: 0 0 0.6rem; }
.form-success a { color: var(--oxblood); text-decoration: underline; text-underline-offset: 2px; }
.btn-block { width: 100%; justify-content: center; }
.btn-outline.on-light { color: var(--ink); border-color: var(--line); }
.btn-outline.on-light:hover { background: var(--ink); color: var(--paper); }
.popia-note { font-size: 0.82rem; color: var(--ink-soft); margin-top: 1rem; line-height: 1.6; max-width: none; }

/* sources */
.sources ol { max-width: 78ch; padding-left: 1.3rem; margin: 0; }
.sources li { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 0.9rem; line-height: 1.6; }
.sources li a { color: var(--oxblood); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.sources .note { font-size: 0.86rem; color: var(--ink-soft); max-width: 78ch; margin-top: 1.4rem;
  padding-top: 1.2rem; border-top: 1px solid var(--line); font-style: italic; }

/* closing CTA reused from homepage .cta-close pattern, plus a homepage guide-promo band */
.guide-promo { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: center; }
@media (max-width: 820px) { .guide-promo { grid-template-columns: 1fr; gap: 1.6rem; } }
.guide-promo-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  aspect-ratio: 16/10; border: 1px solid var(--line); }
.guide-promo-media img { width: 100%; height: 100%; object-fit: cover; }

/* Print: hand them a clean blank window list */
@media print {
  .nav, .skip-link, .chat-root, .guide-toc, .marquee { display: none !important; }
  body.bp-printing { background: #fff; }
  body.bp-printing * { visibility: hidden !important; box-shadow: none !important; }
  body.bp-printing #ballpark, body.bp-printing #ballpark * { visibility: visible !important; }
  body.bp-printing #ballpark { position: absolute; left: 0; top: 0; width: 100%; border: none;
    background: #fff; padding: 0; }
  body.bp-printing #ballpark > summary { display: none !important; }
  body.bp-printing .bp-print-head { display: block !important; margin-bottom: 1rem; }
  body.bp-printing .bp-pairing, body.bp-printing .bp-actions, body.bp-printing .bp-count,
  body.bp-printing .bp-foot, body.bp-printing .bp-rm { display: none !important; }
  body.bp-printing .bp-table { min-width: 0; }
  body.bp-printing .bp-table th, body.bp-printing .bp-table td { border: 1px solid #000; padding: 0.7em 0.5em; }
  body.bp-printing .bp-table input, body.bp-printing .bp-table select { border: none; }
}

.logo-mark{width:38px;height:38px;flex:none;border-radius:50%;object-fit:cover}