/* ==========================================================================
   Club Ceramic — site.css
   One stylesheet for the whole site. Sections:
     1 fonts and tokens   2 base and type   3 layout      4 components
     5 header and menu    6 hero            7 categories  8 deals
     9 why               10 trade          11 showrooms  12 reviews
    13 tools             14 blog           15 quote form 16 footer
    17 motion            18 responsive
   Design decisions live in DESIGN.md. Bump ASSET_V in _build/render.py when
   this file changes (pages request it with a ?v= token; see _headers).
   ========================================================================== */

/* 1 fonts and tokens ------------------------------------------------------ */
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("/fonts/cabinet-grotesk-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/satoshi-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0e1a2b;
  --ink-2: #182840;
  --text: #16202c;
  --muted: #5b6774;
  --line: #dfe3e8;
  --line-strong: #c3cad2;
  --paper: #f5f6f8;
  --paper-2: #eceef1;
  --surface: #fcfcfd;
  --gold: #d4a24c;
  --gold-deep: #8f6a22;
  --gold-soft: #f3e8d1;
  --danger: #a3261e;

  --font-display: "Cabinet Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Satoshi", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.32, .72, 0, 1);
  --radius-card: 20px;
  --radius-inner: 14px;
  --radius-input: 12px;
  --shadow: 0 24px 60px -28px rgb(14 26 43 / .35);
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(72px, 9vw, 128px);
  --header-h: 76px;
}

/* 2 base and type --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 17px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0; }
h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
h3 { font-weight: 700; }
p { margin: 0 0 1em; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.band :focus-visible, .site-header:not(.is-solid) :focus-visible, .mobile-menu :focus-visible { outline-color: var(--gold); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--surface); border-radius: 999px; text-decoration: none; }
.skip-link:focus { top: 16px; }
.lede { font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--muted); max-width: 62ch; }
.eyebrow {
  display: block;
  margin: 0 0 14px;
  font: 600 .72rem/1 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* 3 layout ---------------------------------------------------------------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section-tight { padding-block: calc(var(--section) * .7); }
.section-head { max-width: 64ch; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head h2 + p, .section-head h2 + .lede { margin-top: 16px; }
.section-head-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 3vw, 44px); }
.section-head-row .section-head { margin-bottom: 0; }

/* 4 components ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 50px; padding: 10px 10px 10px 24px;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: 600 .98rem/1 var(--font-body); white-space: nowrap;
  transition: transform .5s var(--ease), background-color .3s, color .3s, box-shadow .5s var(--ease);
}
.btn .ic {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  transition: transform .5s var(--ease), background-color .3s;
}
.btn .ic svg { width: 15px; height: 15px; }
.btn:hover .ic { transform: translate(2px, -2px); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--ink); color: var(--surface); }
.btn-primary .ic { background: rgb(255 255 255 / .12); color: var(--gold); }
.btn-primary:hover { background: var(--ink-2); box-shadow: var(--shadow); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold .ic { background: rgb(14 26 43 / .12); color: var(--ink); }
.btn-gold:hover { background: #dfb260; }
.btn-ghost {
  background: rgb(252 252 253 / .12); color: var(--surface);
  border: 1px solid rgb(252 252 253 / .34);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-ghost .ic { background: rgb(252 252 253 / .16); color: var(--surface); }
.btn-ghost:hover { background: rgb(252 252 253 / .2); }
.btn-sm { min-height: 42px; padding: 6px 6px 6px 18px; font-size: .9rem; }
.btn .lbl-short { display: none; }
.brand-name { white-space: nowrap; }
.btn-sm .ic { width: 28px; height: 28px; }
.btn[disabled] { opacity: .7; cursor: progress; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; text-decoration: none; color: var(--ink);
}
.link-arrow span {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .5s var(--ease);
  padding-bottom: 2px;
}
.link-arrow svg { width: 16px; height: 16px; flex: none; transition: transform .5s var(--ease); }
.link-arrow:hover span { background-size: 100% 2px; }
.link-arrow:hover svg { transform: translateX(3px); }
.band .link-arrow { color: var(--surface); }

.stars { display: inline-flex; gap: 2px; color: var(--gold-deep); }
.stars svg { width: 14px; height: 14px; }

/* 5 header and menu ------------------------------------------------------- */
.header-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--header-h); color: var(--surface);
  transition: background-color .45s var(--ease-soft), color .45s var(--ease-soft), box-shadow .45s;
}
.site-header.is-solid, .site-header.drawer-open {
  background: rgb(245 246 248 / .96); color: var(--ink);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 0 var(--line);
}
.page-post .site-header { background: rgb(245 246 248 / .96); color: var(--ink);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 0 var(--line); }
.page-post .site-header .nav a:hover, .page-post .site-header .header-phone:hover { background: rgb(14 26 43 / .06); }
body.menu-open .site-header { background: var(--ink); color: var(--surface); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.header-inner { height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand-mark { flex: none; }
.brand-word { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font: 800 1.08rem/1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.brand-tag { font: 500 .6rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; margin-top: 5px; opacity: .78; }
.nav ul { display: flex; justify-content: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: inline-block; padding: 10px 14px; border-radius: 999px;
  font: 500 .95rem/1 var(--font-body); text-decoration: none; color: inherit;
  transition: background-color .3s;
}
.nav a:hover { background: rgb(252 252 253 / .14); }
.site-header.is-solid .nav a:hover, .site-header.drawer-open .nav a:hover, .site-header.is-solid .ntrig:hover, .site-header.drawer-open .ntrig:hover, .page-post .site-header .ntrig:hover, .site-header.is-solid .ntrig[aria-expanded="true"], .site-header.drawer-open .ntrig[aria-expanded="true"], .page-post .site-header .ntrig[aria-expanded="true"] { background: rgb(14 26 43 / .06); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-phone {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 999px;
  font-weight: 600; font-size: .95rem; text-decoration: none; color: inherit;
  transition: background-color .3s;
}
.header-phone:hover { background: rgb(252 252 253 / .14); }
.site-header.is-solid .header-phone:hover, .site-header.drawer-open .header-phone:hover { background: rgb(14 26 43 / .06); }
.site-header:not(.is-solid):not(.drawer-open):not(.page-post .site-header) .btn-primary { background: var(--gold); color: var(--ink); }
.site-header:not(.is-solid):not(.drawer-open):not(.page-post .site-header) .btn-primary .ic { background: rgb(14 26 43 / .12); color: var(--ink); }
.site-header:not(.is-solid):not(.drawer-open):not(.page-post .site-header) .btn-primary:hover { background: #dfb260; box-shadow: none; }
body.menu-open .site-header .btn-primary { background: var(--gold); color: var(--ink); }
.menu-toggle {
  display: none; position: relative; width: 44px; height: 44px; flex: none;
  border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer;
}
.menu-line { position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.menu-line:nth-child(1) { top: 17px; }
.menu-line:nth-child(2) { top: 25px; }
.menu-toggle[aria-expanded="true"] .menu-line:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-line:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0; z-index: 30; background: var(--ink); color: var(--surface); padding-top: var(--header-h); overflow-y: auto; }
.mobile-menu[hidden] { display: none; }
.mobile-links { list-style: none; margin: 0; padding: 16px 0 0; }
.mobile-links li, .mobile-menu-foot {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms + 80ms);
}
body.menu-open .mobile-links li, body.menu-open .mobile-menu-foot { opacity: 1; transform: none; }
.mobile-links li { border-bottom: 1px solid rgb(252 252 253 / .1); }
.mobile-links a { display: block; padding: 18px 0; font: 700 clamp(1.5rem, 6vw, 1.9rem)/1 var(--font-display); text-decoration: none; color: inherit; }
.mobile-menu-foot { padding: 28px 0 56px; display: grid; gap: 20px; justify-items: start; }
.mobile-contact { display: grid; gap: 8px; margin: 0; }
.mobile-contact a { color: rgb(245 246 248 / .78); text-decoration: none; }
body.menu-open { overflow: hidden; }

/* 6 hero ------------------------------------------------------------------ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100dvh, 940px);
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: end;
  padding: calc(var(--header-h) + 40px) 0 clamp(44px, 7vh, 84px);
  color: var(--surface);
}
.hero-media { position: absolute; inset: 0; z-index: -2; background: var(--ink-2); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgb(14 26 43 / .84) 0%, rgb(14 26 43 / .6) 42%, rgb(14 26 43 / .18) 100%),
    linear-gradient(180deg, rgb(14 26 43 / .42) 0%, rgb(14 26 43 / 0) 32%, rgb(14 26 43 / 0) 60%, rgb(14 26 43 / .5) 100%);
}
.hero-content { max-width: 900px; }
.hero h1 {
  color: var(--surface);
  font-size: clamp(2.25rem, 4.3vw, 3.55rem); font-weight: 800;
  line-height: 1.04; letter-spacing: -0.022em;
  margin: 0 0 16px; text-wrap: balance;
}
.hero .h1-sub {
  display: block; margin-top: 16px;
  font: 500 clamp(1rem, 1.3vw, 1.15rem)/1.4 var(--font-body);
  letter-spacing: 0; color: var(--gold);
}
.hero-text { font-size: clamp(1.02rem, 1.25vw, 1.15rem); max-width: 60ch; color: rgb(252 252 253 / .86); margin: 0 0 30px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* 6b film header (homepage): the hero as a scroll-scrubbed film, engine in js/film.js ------ */
/* the pin is CSS: a tall spacer and a sticky hero; the engine only maps scroll progress to the playhead, so no
   element is ever re-parented or restyled (ScrollTrigger's own pin re-inserted the hero and repainted the LCP image late) */
.film-spacer { position: relative; height: calc(100vh + 320vh); height: calc(100dvh + 320vh); }
.hero.filmblock { position: sticky; top: 0; height: 100vh; height: 100dvh; min-height: 0; background: var(--ink-2); }
.filmblock .film-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }   /* poster and video live here */
.filmblock .film-media .hero-media { position: absolute; inset: 0; z-index: 0; }
.filmblock .film-media video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: 0; }
.filmblock .hero-media img { object-position: 50% 60%; }   /* the poster stays under the video: a decode gap shows the poster, not the ground */
.filmblock .fscrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(14 26 43 / 0) 70%, rgb(14 26 43 / .28) 100%); }
.hero.filmblock::before { background: linear-gradient(90deg, rgb(14 26 43 / .46) 0%, rgb(14 26 43 / .16) 40%, rgb(14 26 43 / 0) 62%), linear-gradient(180deg, rgb(14 26 43 / .34) 0%, rgb(14 26 43 / 0) 24%, rgb(14 26 43 / 0) 50%, rgb(14 26 43 / .66) 100%); }
/* the copy sits at the left gutter so the film stays clear (the standard hero centres a 900px box with auto margins) */
.filmblock .fcue { position: relative; z-index: 3; max-width: var(--container); width: 100%; margin-inline: 0; }
.filmblock .fcue h1 { max-width: 15ch; font-size: clamp(2rem, 3.6vw, 3.1rem); text-shadow: 0 2px 24px rgb(14 26 43 / .45); }
.filmblock .fcue .h1-sub { max-width: 46ch; text-shadow: 0 1px 12px rgb(14 26 43 / .5); }
.filmblock .fcue .hero-text { max-width: 46ch; font-size: clamp(.95rem, 1.1vw, 1.05rem); margin-bottom: 24px; text-shadow: 0 1px 12px rgb(14 26 43 / .5); }
.filmblock .fbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; background: rgb(252 252 253 / .14); }
.filmblock .fbar i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: var(--gold); }
.filmblock .ftag { position: absolute; right: var(--gutter); bottom: 22px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 999px; background: rgb(14 26 43 / .55); border: 1px solid rgb(252 252 253 / .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--surface); font: 500 .8rem/1 var(--font-body); }
.filmblock .ftag::before { content: "Scroll"; font: 600 .66rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.filmblock .ftag:empty { display: none; }
/* the fixed header stays transparent over the cinema while the block is pinned */
body.film-pinned .site-header.is-solid:not(.drawer-open) { background: transparent; color: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
body.film-pinned .site-header.is-solid:not(.drawer-open) .btn-primary { background: var(--gold); color: var(--ink); }
body.film-pinned .site-header.is-solid:not(.drawer-open) .btn-primary .ic { background: rgb(14 26 43 / .12); color: var(--ink); }
body.film-pinned .site-header.is-solid:not(.drawer-open) .nav a:hover, body.film-pinned .site-header.is-solid:not(.drawer-open) .ntrig:hover, body.film-pinned .site-header.is-solid:not(.drawer-open) .header-phone:hover { background: rgb(252 252 253 / .14); }
/* reduced motion, or no engine: a plain hero on the finished room (the <picture> swaps the image) */
.rm .film-spacer { height: auto; }
.rm .hero.filmblock { position: relative; height: auto; min-height: min(100dvh, 940px); }
.rm .filmblock video, .rm .filmblock .fbar, .rm .filmblock .ftag { display: none !important; }

/* 7 categories (bento) ---------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(248px, auto); gap: 14px; }
.cell {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-card); background: var(--ink-2); color: var(--surface);
  text-decoration: none;
}
.cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.cell:hover img { transform: scale(1.045); }
.cell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(14 26 43 / 0) 42%, rgb(14 26 43 / .8) 100%); }
.cell-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 20px 22px; }
.cell h3 { color: var(--surface); font-size: 1.28rem; line-height: 1.1; }
.cell p { margin: 6px 0 0; font-size: .9rem; color: rgb(252 252 253 / .8); }
.cell .ic { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgb(252 252 253 / .16); color: var(--gold); transition: transform .5s var(--ease), background-color .3s; }
.cell .ic svg { width: 16px; height: 16px; }
.cell:hover .ic { transform: translate(2px, -2px); background: rgb(252 252 253 / .26); }
.cell-tiles { grid-column: 1 / 3; grid-row: 1 / 3; }
.cell-tiles h3 { font-size: 1.9rem; }
.cell-tiles p { font-size: 1rem; }

/* 8 deals ----------------------------------------------------------------- */
.scroller-wrap { position: relative; }
.scroller { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; margin: 0 -4px; scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.deal {
  flex: 0 0 272px; scroll-snap-align: start;
  border-radius: var(--radius-card); background: var(--paper-2); border: 1px solid var(--line);
  padding: 6px; text-decoration: none; color: inherit;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.deal:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.deal-img { border-radius: var(--radius-inner); overflow: hidden; aspect-ratio: 1; background: var(--surface); box-shadow: inset 0 1px 0 rgb(255 255 255 / .8); }
.deal-img img { width: 100%; height: 100%; object-fit: cover; }
.deal-body { padding: 16px 12px 12px; }
.deal h3 { font-size: 1.02rem; line-height: 1.25; margin-bottom: 10px; }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price b { font: 800 1.35rem/1 var(--font-display); color: var(--ink); }
.price small { color: var(--muted); font-size: .85rem; }
.price s { color: var(--muted); font-size: .9rem; }
.scroller-nav { display: flex; gap: 8px; }
.scroller-nav button {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  display: grid; place-items: center; transition: background-color .3s, transform .5s var(--ease);
}
.scroller-nav button:hover { background: var(--paper-2); }
.scroller-nav button:active { transform: scale(.96); }
.scroller-nav svg { width: 18px; height: 18px; }
.deals-note { margin: 10px 0 0; color: var(--muted); font-size: .92rem; }

/* 9 why ------------------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--line); }
.fact h3 { font-size: 1.2rem; margin-bottom: 8px; }
.fact p { margin: 0; color: var(--muted); }
.fact-num { display: block; font: 800 clamp(2.2rem, 3.4vw, 3rem)/1 var(--font-display); color: var(--ink); letter-spacing: -0.02em; margin-bottom: 12px; }

/* 10 trade (the one dark band) ------------------------------------------- */
.band { background: var(--ink); color: rgb(245 246 248 / .86); }
.band h2, .band h3 { color: var(--surface); }
.band .eyebrow { color: var(--gold); }
.band .lede { color: rgb(245 246 248 / .78); }
.trade-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.benefits { list-style: none; margin: 32px 0 36px; padding: 0; display: grid; gap: 16px; }
.benefits li { display: flex; gap: 14px; align-items: start; }
.benefits .ic { width: 30px; height: 30px; border-radius: 50%; flex: none; margin-top: 2px; background: rgb(212 162 76 / .16); color: var(--gold); display: grid; place-items: center; }
.benefits .ic svg { width: 15px; height: 15px; }
.benefits b { display: block; color: var(--surface); font-weight: 700; }
.benefits span { color: rgb(245 246 248 / .72); }
.bezel { border-radius: var(--radius-card); padding: 6px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); }
.bezel-inner { border-radius: var(--radius-inner); overflow: hidden; box-shadow: inset 0 1px 0 rgb(255 255 255 / .12); }
.bezel img { width: 100%; height: 100%; object-fit: cover; }
.trade-figure img { aspect-ratio: 4 / 5; }

/* 11 showrooms ------------------------------------------------------------ */
.ledger { display: grid; grid-template-columns: repeat(4, 1fr); }
.showroom { padding: 4px 28px 8px; border-left: 1px solid var(--line); }
.showroom:first-child { padding-left: 0; border-left: 0; }
.showroom-city { font-size: 1.55rem; letter-spacing: -0.01em; }
.showroom-label { margin: 4px 0 16px; color: var(--gold-deep); font-weight: 600; font-size: .9rem; }
.showroom-address { margin: 0 0 16px; }
.showroom-hours { display: grid; gap: 6px; margin-bottom: 18px; font-size: .92rem; }
.hours-row { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.hours-row span:first-child { color: var(--text); }
.showroom-links { display: grid; gap: 10px; justify-items: start; }

/* 12 reviews -------------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; }
.quotes-side { display: grid; gap: 16px; }
.quote { border-radius: var(--radius-card); background: var(--paper-2); padding: 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 26px; }
.quote-lead { background: var(--surface); border: 1px solid var(--line); padding: 36px; }
.quote p { margin: 0; }
.quote-lead p { font: 500 clamp(1.25rem, 1.8vw, 1.65rem)/1.35 var(--font-display); color: var(--ink); letter-spacing: -0.012em; text-wrap: pretty; }
.quote blockquote { margin: 0; }
.quote figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.quote figcaption b { display: block; color: var(--ink); }
.quote figcaption small { color: var(--muted); }

/* 13 tools ---------------------------------------------------------------- */
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tool {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
  padding: 30px; border-radius: var(--radius-card); text-decoration: none; color: inherit;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.tool-calc { background: var(--gold-soft); }
.tool-vis { background: var(--paper-2); }
.tool:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tool .ic-lg { width: 54px; height: 54px; border-radius: 16px; background: var(--surface); color: var(--ink); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 1px 2px rgb(14 26 43 / .06); }
.tool .ic-lg svg { width: 26px; height: 26px; }
.tool h3 { font-size: 1.3rem; margin-bottom: 6px; }
.tool p { margin: 0 0 16px; color: var(--muted); }

/* 14 blog ----------------------------------------------------------------- */
.posts { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 48px); align-items: start; }
.post-feature { text-decoration: none; color: inherit; display: block; }
.post-feature .post-img { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 5 / 3; background: var(--paper-2); }
.post-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.post-feature:hover img { transform: scale(1.04); }
.post-feature h3 { font-size: 1.45rem; line-height: 1.2; margin: 20px 0 8px; }
.post-feature p { color: var(--muted); margin: 0; }
.post-row { padding: 22px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; text-decoration: none; color: inherit; }
.post-row:last-child { border-bottom: 1px solid var(--line); }
.post-row h3 { font-size: 1.18rem; line-height: 1.25; transition: color .3s; }
.post-row:hover h3 { color: var(--gold-deep); }
.post-row p { margin: 0; color: var(--muted); }
.post-meta { font-size: .85rem; color: var(--muted); }

/* 15 quote form ----------------------------------------------------------- */
.quote-section { background: var(--paper-2); }
.quote-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact-lines { display: grid; gap: 14px; margin-top: 30px; }
.contact-line { display: flex; gap: 14px; align-items: center; text-decoration: none; color: inherit; }
.contact-line .ic { width: 42px; height: 42px; border-radius: 50%; flex: none; background: var(--surface); border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; }
.contact-line .ic svg { width: 18px; height: 18px; }
.contact-line b { display: block; }
.contact-line small { color: var(--muted); }
.form-shell { border-radius: var(--radius-card); background: var(--paper); border: 1px solid var(--line); padding: 6px; box-shadow: var(--shadow); }
.form-inner { background: var(--surface); border-radius: var(--radius-inner); padding: clamp(20px, 3vw, 32px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9); }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 600; font-size: .92rem; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-input);
  transition: border-color .3s, box-shadow .3s;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6b7682; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(14 26 43 / .12); }
.field .error { display: none; color: var(--danger); font-size: .88rem; }
.field.is-invalid .error { display: block; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.form-foot small { color: var(--muted); }

/* 16 footer --------------------------------------------------------------- */
.site-footer { background: var(--paper-2); border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 80px) 0 32px; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.5fr; gap: 40px; }
.footer-brand p { color: var(--muted); max-width: 36ch; margin: 20px 0 14px; }
.footer-email { font-weight: 600; color: var(--ink); text-decoration: none; }
.footer-email:hover { color: var(--gold-deep); }
.footer-heading { font: 700 .8rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { text-decoration: none; color: var(--text); }
.footer-col a:hover { color: var(--gold-deep); }
.footer-showrooms li { color: var(--muted); line-height: 1.5; }
.footer-showrooms b { color: var(--ink); }
.footer-bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(36px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; }
.footer-bar p { margin: 0; }

/* 8b brand marquee ------------------------------------------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; align-items: center; gap: clamp(40px, 6vw, 88px); width: max-content; padding: 8px 0; }
.js .marquee-track { animation: marquee 48s linear infinite; }
.marquee-track img { height: 44px; width: auto; max-width: 150px; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.05); opacity: .72; transition: opacity .4s, filter .4s; }
.marquee-track img:hover { opacity: 1; filter: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* 9b installation (split image + steps) ---------------------------------- */
.install-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.install-figure .bezel { background: var(--paper-2); border-color: var(--line); }
.install-figure img { aspect-ratio: 4 / 5; }
.steps { list-style: none; margin: 30px 0 34px; padding: 0; display: grid; gap: 0; }
.steps li { display: flex; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps .ic { width: 32px; height: 32px; border-radius: 50%; flex: none; margin-top: 2px; background: var(--gold-soft); color: var(--gold-deep); display: grid; place-items: center; }
.steps .ic svg { width: 16px; height: 16px; }
.steps b { display: block; color: var(--ink); font-weight: 700; }
.steps span { color: var(--muted); }

/* 9c photo bands (full-bleed image strips between text blocks) ----------- */
.photo-band { position: relative; isolation: isolate; overflow: hidden; margin: 0; height: clamp(220px, 36vw, 520px); background: var(--ink-2); }
.photo-band img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.photo-band::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(14 26 43 / 0) 58%, rgb(14 26 43 / .42) 100%); }
.photo-band figcaption { position: absolute; left: 0; right: 0; bottom: clamp(18px, 2.6vw, 34px); z-index: 2; margin: 0; }
.photo-band-tag { display: inline-flex; align-items: center; gap: 12px; padding: 9px 16px 9px 14px; border-radius: 999px; background: rgb(14 26 43 / .55); border: 1px solid rgb(252 252 253 / .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--surface); font-size: .9rem; font-weight: 500; letter-spacing: 0; }
.photo-band-tag .eyebrow { margin: 0; color: var(--gold); }
@keyframes band-pan { from { transform: translateY(-6%); } to { transform: translateY(6%); } }
@supports (animation-timeline: view()) {
  .photo-band img { animation: band-pan linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}

/* 10b trade grid (dark band without an image) ---------------------------- */
.trade-head { max-width: 64ch; margin-bottom: 40px; }
.trade-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trade-cell { padding: 26px 28px; border-radius: var(--radius-card); background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); }
.trade-cell .ic { width: 38px; height: 38px; border-radius: 12px; background: rgb(212 162 76 / .16); color: var(--gold); display: grid; place-items: center; margin-bottom: 16px; }
.trade-cell .ic svg { width: 19px; height: 19px; }
.trade-cell h3 { font-size: 1.15rem; margin-bottom: 8px; }
.trade-cell p { margin: 0; color: rgb(245 246 248 / .74); }
.trade-foot { margin-top: 36px; }

/* 11b showroom (details + what to expect) -------------------------------- */
.showroom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.showroom-card { border-radius: var(--radius-card); background: var(--paper-2); border: 1px solid var(--line); padding: 6px; }
.showroom-card-inner { background: var(--surface); border-radius: var(--radius-inner); padding: clamp(22px, 3vw, 32px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9); }
.showroom-card .showroom-city { font-size: 1.7rem; }
.showroom-card .showroom-address { font-size: 1.05rem; }
.rating-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: .92rem; color: var(--ink); }
.rating-badge .stars { color: var(--gold-deep); }
.rating-badge small { color: var(--muted); font-weight: 500; }
.expect { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.expect li { display: flex; gap: 14px; align-items: start; }
.expect .ic { width: 30px; height: 30px; border-radius: 50%; flex: none; margin-top: 1px; background: var(--gold-soft); color: var(--gold-deep); display: grid; place-items: center; }
.expect .ic svg { width: 15px; height: 15px; }
.expect b { display: block; color: var(--ink); }
.expect span { color: var(--muted); }

/* 16b inner pages: hero, breadcrumb, cells, step row, cities, faq ------- */
.hero-inner { min-height: min(74dvh, 720px); }
.hero-inner h1 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; font-size: .86rem; color: rgb(252 252 253 / .78); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { color: rgb(252 252 253 / .45); }
.cells { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cell-light { padding: 28px; border-radius: var(--radius-card); background: var(--paper-2); border: 1px solid var(--line); }
.cell-light .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--surface); color: var(--ink); display: grid; place-items: center; margin-bottom: 16px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 1px 2px rgb(14 26 43 / .06); }
.cell-light .ic svg { width: 20px; height: 20px; }
.cell-light h3 { font-size: 1.2rem; margin-bottom: 8px; }
.cell-light p { margin: 0; color: var(--muted); }
.cell-light ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); }
.cell-light li { margin: 4px 0; }
.steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
.step .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-deep); display: grid; place-items: center; margin-bottom: 14px; }
.step .ic svg { width: 19px; height: 19px; }
.step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.step p { margin: 0; color: var(--muted); }
.cities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.city { padding: 24px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); }
.city h3 { font-size: 1.25rem; margin-bottom: 8px; }
.city p { margin: 0; color: var(--muted); }
.band .city { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .1); }
.band .city p { color: rgb(245 246 248 / .74); }
.faq { max-width: 76ch; }
.faq details { border-top: 1px solid var(--line); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 700 1.08rem/1.3 var(--font-display); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); background: linear-gradient(var(--ink), var(--ink)) center/10px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center/2px 10px no-repeat; transition: transform .5s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 12px 0 0; color: var(--muted); }
.standards { columns: 2; column-gap: 40px; list-style: none; margin: 24px 0 0; padding: 0; }
.standards li { break-inside: avoid; display: flex; gap: 12px; align-items: start; padding: 8px 0; color: var(--text); }
.standards .ic { width: 24px; height: 24px; border-radius: 50%; flex: none; margin-top: 2px; background: var(--gold-soft); color: var(--gold-deep); display: grid; place-items: center; }
.standards .ic svg { width: 12px; height: 12px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split .bezel { background: var(--paper-2); border-color: var(--line); }
.split img { aspect-ratio: 4 / 3; }

/* 16c brand pages: product grid, logo, related, specs ------------------- */
.products { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 14px; }
.products-group { font-size: 1.05rem; margin: 0 0 14px; color: var(--ink); }
.cells .cell-wide { grid-column: 1 / -1; }
.products + .products-group { margin-top: 34px; }
.product { margin: 0; border-radius: var(--radius-card); background: var(--paper-2); border: 1px solid var(--line); padding: 6px; }
.product-img { border-radius: var(--radius-inner); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.product:hover .product-img img { transform: scale(1.04); }
.product figcaption { padding: 14px 12px 10px; display: grid; gap: 2px; }
.product figcaption b { color: var(--ink); }
.product figcaption span { color: var(--muted); font-size: .9rem; }
.brand-logo { height: 56px; width: auto; max-width: 180px; mix-blend-mode: multiply; }
.specs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; color: var(--muted); font-size: .95rem; }
.specs b { color: var(--text); font-weight: 600; }
.related { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.related li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.related li:last-child { border-bottom: 1px solid var(--line); }
.related small { color: var(--muted); }
.related-head { margin: 30px 0 0; }

.marquee-track a { display: flex; align-items: center; flex: none; }

/* 5b desktop drawer menus: triggers in the nav, full-width panels under the header */
.ntrig { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 999px; border: 0; background: none; color: inherit; cursor: pointer; font: 500 .95rem/1 var(--font-body); transition: background-color .3s; }
.ntrig svg { opacity: .7; transition: transform .3s var(--ease); }
.ntrig:hover, .ntrig[aria-expanded="true"] { background: rgb(252 252 253 / .14); }
.ntrig[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); color: var(--ink); border-top: 1px solid var(--line); box-shadow: 0 30px 60px rgb(14 26 43 / .16); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s .28s; }
.site-header[data-open="flooring"] #drawer-flooring, .site-header[data-open="tile"] #drawer-tile, .site-header[data-open="brands"] #drawer-brands { opacity: 1; visibility: visible; transform: none; transition: opacity .28s var(--ease), transform .28s var(--ease); }
.drawer-in { display: grid; grid-template-columns: 1.15fr 1.05fr 1fr .95fr; gap: clamp(20px, 2.6vw, 40px); padding-top: 28px; padding-bottom: 32px; }
.drawer-in-brands { grid-template-columns: 1fr .34fr; }
.dhead { display: block; font: 600 .7rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.dlinks { display: grid; gap: 2px; }
.dlinks a { display: flex; align-items: flex-start; gap: 12px; padding: 9px 12px; margin: 0 -12px; border-radius: var(--radius-inner); text-decoration: none; color: inherit; transition: background-color .2s; }
.dlinks a:hover { background: var(--paper-2); }
.dlinks .ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--paper-2); color: var(--ink); display: grid; place-items: center; transition: background-color .2s, color .2s; }
.dlinks .ic svg { width: 18px; height: 18px; }
.dlinks a:hover .ic { background: var(--gold-soft); color: var(--gold-deep); }
.dlinks b { display: block; font: 600 .95rem/1.25 var(--font-body); color: var(--ink); }
.dlinks small { display: block; font-size: .8rem; line-height: 1.35; color: var(--muted); margin-top: 2px; }
.dlinks-plain a { padding: 7px 12px; }
.dbrands { grid-template-columns: repeat(3, 1fr); column-gap: 20px; }
.dpromo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; padding: 22px; border-radius: var(--radius-card); overflow: hidden; background: var(--ink); color: var(--surface); text-decoration: none; }
.dpromo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.dpromo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(14 26 43 / .06) 0%, rgb(14 26 43 / .66) 52%, rgb(14 26 43 / .92) 100%); }
.dpromo:hover img { transform: scale(1.04); }
.dpromo > span { position: relative; z-index: 1; }
.dp-eyebrow { display: block; font: 600 .68rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.dp-line { display: block; font: 700 1.1rem/1.3 var(--font-display); color: var(--surface); }
.dp-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 600 .85rem/1 var(--font-body); color: var(--gold); }
.dp-go svg { width: 14px; height: 14px; }

/* 16d category and city pages: brand line cards, guide grid ------------- */
.lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.line { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 24px; border-radius: var(--radius-card); background: var(--paper-2); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.line:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgb(14 26 43 / .08); }
.line-logo { height: 44px; display: flex; align-items: center; }
.line-logo img { height: 44px; width: auto; max-width: 150px; mix-blend-mode: multiply; }
.line-logo b { font: 700 1.25rem/1 var(--font-display); color: var(--ink); }
.line h3 { font-size: 1.15rem; margin: 0 0 4px; }
.line p { margin: 0; color: var(--muted); font-size: .95rem; }
.line .link-arrow { margin-top: 2px; }
.guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px; margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--line); }
.guide h3 { font-size: 1.1rem; margin-bottom: 6px; }
.guide p { margin: 0; color: var(--muted); }

/* 16e posts and the blog index ------------------------------------------- */
.post-head { padding-bottom: 0; }
.post-wrap { max-width: 76ch; }
.post-head .crumbs { color: var(--muted); }
.post-head .crumbs span { color: var(--line-strong); }
.post-kicker { font-size: .86rem; letter-spacing: .02em; color: var(--gold-deep); font-weight: 600; margin: 0 0 14px; }
.post-kicker span { color: var(--muted); font-weight: 400; }
.post-head h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; }
.post-head .h1-sub { display: block; font: 400 1.2rem/1.5 var(--font-body); color: var(--muted); margin-top: 16px; letter-spacing: 0; }
.post-answer { margin-top: 28px; padding: 22px 26px; border-radius: var(--radius-inner); background: var(--paper-2); border: 1px solid var(--line); border-left: 4px solid var(--gold); }
.post-answer p { margin: 0; font-size: 1.08rem; }
.post-answer p + p { margin-top: 10px; }
.post-figure { padding-top: 32px; padding-bottom: 0; }
.post-figure figure { margin: 0; }
.post-figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-inner); }
.post-figure figcaption { font-size: .86rem; color: var(--muted); margin-top: 10px; }
.post-body h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin: 44px 0 14px; }
.post-body h3 { font-size: 1.15rem; margin: 28px 0 8px; }
.post-body p, .post-body li { color: var(--text); font-size: 1.05rem; line-height: 1.65; }
.post-body p { margin: 0 0 16px; }
.post-body ul, .post-body ol { margin: 0 0 18px; padding-left: 22px; }
.post-body li { margin: 6px 0; }
.post-body a:not(.btn):not(.link-arrow) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: .98rem; }
.post-body th, .post-body td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.post-body th { font-weight: 600; color: var(--ink); }
.post-cta { margin-top: 40px; padding: 26px 28px; border-radius: var(--radius-card); background: var(--paper-2); border: 1px solid var(--line); display: grid; gap: 16px; }
.post-cta p { margin: 0; color: var(--text); }
.post-cta .hero-actions { margin: 0; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.post-card { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--radius-card); background: var(--paper-2); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.post-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgb(14 26 43 / .08); }
.post-card .post-kicker { margin: 0; color: var(--muted); font-weight: 600; }
.post-card h3 { font-size: 1.15rem; line-height: 1.25; margin: 0; }
.post-card p { margin: 0; color: var(--muted); font-size: .95rem; }
.post-group { margin-top: 40px; }
.post-group h2 { font-size: 1.4rem; margin-bottom: 16px; }

/* 16f trade page: the written rule in a glass card, the band's CTA row ---- */
.rule-card { padding: clamp(24px, 3vw, 36px); background: rgb(255 255 255 / .04); }
.rule-card .eyebrow { color: var(--gold); }
.rule-list { list-style: none; margin: 0; padding: 0; counter-reset: rule; }
.rule-list li { counter-increment: rule; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 4px; padding: 16px 0; border-top: 1px solid rgb(255 255 255 / .1); }
.rule-list li:first-child { border-top: 0; padding-top: 2px; }
.rule-list li::before { content: counter(rule, decimal-leading-zero); grid-row: 1 / 3; font: 800 1.45rem/1 var(--font-display); color: var(--gold); letter-spacing: -0.02em; padding-top: 3px; }
.rule-list b { grid-column: 2; display: block; color: var(--surface); font-weight: 700; }
.rule-list span { grid-column: 2; display: block; color: rgb(245 246 248 / .72); }
.rule-sign { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / .1); color: rgb(245 246 248 / .6); font-size: .9rem; }
.trade-grid .hero-actions { margin-top: 28px; align-items: center; }
.band .hero-actions .link-arrow { color: var(--surface); }
.trade-grid > .reveal:first-child p:not(.lede) { color: rgb(245 246 248 / .78); max-width: 58ch; }

/* 17 motion --------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1.06); } to { transform: scale(1); } }
.js .hero h1 { animation: rise .9s var(--ease) .1s both; }
.js .hero-text { animation: rise .9s var(--ease) .22s both; }
.js .hero-actions { animation: rise .9s var(--ease) .34s both; }
.js .hero-media img { animation: drift 1.4s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .mobile-links li, .mobile-menu-foot { opacity: 1; transform: none; }
  .js .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}

/* 18 responsive ----------------------------------------------------------- */
@media (max-width: 1180px) {
  .header-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .header-phone { padding: 10px; }
}
@media (max-width: 1024px) {
  .nav { display: none; }
  .drawer { display: none; }
  .menu-toggle { display: block; }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(220px, auto); }
  .cell-tiles { grid-column: 1 / 3; grid-row: 1 / 2; }
  .trade-grid, .quote-grid, .posts, .install-grid, .showroom-grid, .split { grid-template-columns: 1fr; }
  .steps-row, .cities, .products, .lines, .guide, .post-grid { grid-template-columns: 1fr 1fr; }
  .install-figure img { aspect-ratio: 16 / 10; }
  .trade-figure img { aspect-ratio: 16 / 10; }
  .quotes { grid-template-columns: 1fr; }
  .quotes-side { grid-template-columns: 1fr 1fr; }
  .ledger { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .showroom:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 768px) and (orientation: portrait) {
  /* film header on phones: two rows, the film box filling everything between the header and the copy (cropped to the
     room's centre) and the copy below it on the navy ground, so there is no dead space; a static hero (reduced
     motion) keeps the full-bleed cover crop */
  html:not(.rm) .hero.filmblock { display: grid; grid-template-rows: minmax(34vh, 1fr) auto; grid-template-columns: minmax(0, 1fr); align-content: stretch; padding: var(--header-h) 0 0; }
  html:not(.rm) .filmblock .film-media { position: relative; inset: auto; z-index: 0; min-height: 0; }
  html:not(.rm) .filmblock .film-media video, html:not(.rm) .filmblock .hero-media img { object-position: 50% 50%; }
  html:not(.rm) .hero.filmblock::before { display: none; }
  html:not(.rm) .filmblock .fscrim { display: none; }
  html:not(.rm) .filmblock .fcue { padding-top: 22px; padding-bottom: 66px; }
  html:not(.rm) .filmblock .fcue h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .filmblock .ftag { bottom: 18px; }
}
@media (max-width: 768px) and (orientation: portrait) and (max-height: 740px) {
  html:not(.rm) .filmblock .fcue .hero-text { display: none; }   /* short phones: the film box keeps its share */
}
@media (max-width: 768px) and (orientation: portrait) and (max-height: 640px) {
  html:not(.rm) .filmblock .fcue .h1-sub { display: none; }
}
@media (max-width: 768px) {
  :root { --header-h: 72px; }
  .film-spacer { height: calc(100vh + 256vh); height: calc(100dvh + 256vh); }
  body { font-size: 16px; }
  .header-inner { gap: 12px; }
  .brand { gap: 10px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-name { font-size: .92rem; }
  .brand-tag { font-size: .54rem; margin-top: 4px; }
  .header-actions { gap: 6px; }
  .header-phone { display: none; }
  .menu-toggle { width: 42px; height: 42px; }
  .menu-line:nth-child(1) { top: 16px; }
  .menu-line:nth-child(2) { top: 24px; }
  .section-head-row { flex-direction: column; align-items: start; }
  .brand-logo { height: 44px; }
  .hero { min-height: min(100dvh, 820px); }
  .hero-media img { object-position: 62% 50%; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: minmax(200px, auto); }
  .cell-tiles { grid-column: auto; grid-row: auto; min-height: 260px; }
  .facts { grid-template-columns: 1fr; gap: 24px; }
  .quotes-side { grid-template-columns: 1fr; }
  .tools, .trade-cells, .cells, .steps-row, .products, .lines, .guide, .post-grid { grid-template-columns: 1fr; }
  .standards { columns: 1; }
  .marquee-track img { height: 34px; }
  .ledger { grid-template-columns: 1fr; }
  .showroom { padding: 0; border-left: 0; }
  .showroom + .showroom { padding-top: 32px; border-top: 1px solid var(--line); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .btn-sm { min-height: 38px; padding: 5px 5px 5px 13px; font-size: .8rem; gap: 8px; }
  .btn-sm .ic { width: 26px; height: 26px; }
  .btn-sm .lbl-full { display: none; }
  .btn-sm .lbl-short { display: inline; white-space: nowrap; }
}
@media (max-width: 520px) {
  .field-row, .cities { grid-template-columns: 1fr; }
  .related li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero .hero-actions { gap: 8px; flex-wrap: nowrap; }
  .hero .hero-actions .btn { flex: 1 1 0; min-width: 0; justify-content: space-between; min-height: 46px; padding: 6px 6px 6px 14px; font-size: .84rem; gap: 8px; }
  .hero .hero-actions .btn .lbl-full { display: none; }
  .hero .hero-actions .btn .lbl-short { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero .hero-actions .btn .ic { width: 30px; height: 30px; flex: none; }
  .hero .hero-actions .btn .ic svg { width: 13px; height: 13px; }
  .hero-text { margin-bottom: 22px; }
  .photo-band-tag { font-size: .84rem; gap: 10px; padding: 8px 14px 8px 12px; }
  .rule-list li { grid-template-columns: 36px 1fr; column-gap: 10px; }
  .rule-list li::before { font-size: 1.25rem; }
}
@media (max-width: 359px) {
  .hero .hero-actions { flex-wrap: wrap; }
  .hero .hero-actions .btn { flex: 1 1 100%; }
  .hero .hero-actions .btn .lbl-full { display: inline; }
  .hero .hero-actions .btn .lbl-short { display: none; }
}