/* =====================================================================
   Floors R Us — main stylesheet
   1. Fonts & tokens  2. Base  3. Layout  4. Buttons & type
   5. Announcement & header  6. Mega menu (desktop)  7. Mega menu (mobile)
   8. Search  9. Sections  10. Components  11. Pages  12. Footer
   13. Intro & page transition  14. Motion & utilities
   ===================================================================== */

/* 1. Fonts & tokens ---------------------------------------------------- */
@property --stage-h { syntax: '<length>'; inherits: true; initial-value: 0px; }
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-italic-latin.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/figtree-latin.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  --charcoal-900: #1E2124;
  --charcoal-800: #272B2F;
  --charcoal-700: #353A3F;
  --charcoal-600: #4A5056;
  --slate-500: #636970;
  --slate-300: #A7ABAF;
  --stone-300: #D9D3C7;
  --stone-200: #E6E1D7;
  --stone-100: #EFEBE3;
  --cream-50: #FAF8F3;
  --white: #FFFFFF;
  --yellow-500: #FEB724;
  --yellow-600: #E9A20F;
  --yellow-300: #FED16B;
  --yellow-200: #FFE4A3;
  --yellow-100: #FFF4D8;
  --ochre-700: #7D5B05;
  --error: #B3261E;
  --success: #2E7D4F;

  --ink: var(--charcoal-800);
  --ink-soft: var(--slate-500);
  --line: #E2DDD3;
  --ia: var(--yellow-500); /* icon accent */

  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-body: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: 16px;
  --container: 1240px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow: 0 10px 30px -12px rgba(30, 33, 36, .25);
  --shadow-lg: 0 24px 60px -20px rgba(30, 33, 36, .35);
  --ease: cubic-bezier(.22, .8, .24, 1);

  --announce-h: 34px;
  --hdr-h: 64px;
  --nav-h: 0px;
  --sticky-h: calc(var(--hdr-h) + var(--nav-h));
}
@media (min-width: 480px) { :root { --gutter: 20px; } }
@media (min-width: 768px) { :root { --gutter: 28px; } }
@media (min-width: 1024px) { :root { --hdr-h: 82px; --nav-h: 47px; --gutter: 32px; } }
@media (min-width: 1600px) { :root { --container: 1320px; } }

/* 2. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--sticky-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--cream-50); color: var(--ink);
  font: 400 1rem/1.65 var(--f-body); font-size: clamp(1rem, .96rem + .15vw, 1.0625rem);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 380; line-height: 1.12; letter-spacing: -.012em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.55rem + 2.6vw, 3.9rem); font-weight: 350; }
h2 { font-size: clamp(1.85rem, 1.45rem + 1.5vw, 2.85rem); }
h3 { font-size: clamp(1.3rem, 1.18rem + .45vw, 1.6rem); }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--yellow-500); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--yellow-300); color: var(--charcoal-900); }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--yellow-500); color: var(--charcoal-900); padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }
main { display: block; outline: none; }
[hidden] { display: none !important; }

/* 3. Layout -------------------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: calc(780px + var(--gutter) * 2); }
.sec { position: relative; padding-block: clamp(52px, 4vw + 30px, 96px); overflow: hidden; overflow: clip; }
.sec-tight { padding-block: clamp(36px, 3vw + 20px, 64px); }
.tone-dark { background: var(--charcoal-800); color: var(--cream-50); }
.tone-deep { background: var(--charcoal-900); color: var(--cream-50); }
.tone-stone { background: var(--stone-300); }
.tone-sand { background: var(--stone-100); }
.tone-white { background: var(--white); }
.tone-butter { background: var(--yellow-100); }
.tone-yellow { background: var(--yellow-500); color: var(--charcoal-900); }
.tone-dark .eyebrow, .tone-deep .eyebrow { color: var(--yellow-500); }
.grid { display: grid; gap: clamp(16px, 2vw, 28px); }
.g-2 { grid-template-columns: 1fr; }
.g-3 { grid-template-columns: 1fr; }
.g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 4. Buttons & type ------------------------------------------------------ */
.btn {
  --b: var(--yellow-500); --t: var(--charcoal-900);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 50px; padding: .75em 1.7em; border-radius: 999px; border: 2px solid var(--b);
  background: var(--b); color: var(--t); font: 600 1rem/1.15 var(--f-body); letter-spacing: .01em;
  text-decoration: none; text-align: center; cursor: pointer; position: relative; isolation: isolate; overflow: hidden;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease), transform .2s var(--ease);
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--h, var(--yellow-600)); transform: translateY(101%); transition: transform .35s var(--ease); border-radius: inherit; }
.btn:hover::before { transform: none; }
.btn:active { transform: scale(.98); }
.btn .icon { transition: transform .3s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn-yellow { --h: var(--yellow-600); }
.btn-dark { --b: var(--charcoal-800); --t: var(--cream-50); --h: var(--charcoal-600); }
.btn-outline { --b: transparent; --t: var(--charcoal-800); border-color: var(--charcoal-800); --h: var(--charcoal-800); }
.btn-outline:hover { color: var(--cream-50); }
.btn-light { --b: transparent; --t: var(--cream-50); border-color: rgba(250, 248, 243, .7); --h: var(--cream-50); }
.btn-light:hover { color: var(--charcoal-900); border-color: var(--cream-50); }
.btn-sm { min-height: 40px; padding: .5em 1.3em; font-size: .9rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.link-arrow { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow-500); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.link-arrow .icon { transition: transform .25s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }
.eyebrow { font: 700 .8125rem/1.3 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ochre-700); margin-bottom: .9em; display: inline-flex; align-items: center; gap: .6em; }
.eyebrow::before { content: ''; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url('/assets/brand/icon-charcoal.svg') center/contain no-repeat; mask: url('/assets/brand/icon-charcoal.svg') center/contain no-repeat; }
.lede { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--ink-soft); max-width: 62ch; }
.tone-dark .lede, .tone-deep .lede, .reviews .lede, .split-dark .lede { color: #C9CCCF; }
.title-caps { font: 700 clamp(1.15rem, 1.05rem + .4vw, 1.45rem)/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.centred-head { text-align: center; max-width: 760px; margin: 0 auto clamp(28px, 3.5vw, 52px); }
.centred-head .lede { margin-inline: auto; }
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.6rem, 1.35rem + 1vw, 2.2rem); margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.25em; margin-bottom: 1.2em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--yellow-600); }
.prose a { font-weight: 600; text-decoration-color: var(--yellow-500); text-decoration-thickness: 2px; }
.ticks { list-style: none; display: grid; gap: .6em; }
.ticks li { display: flex; gap: .7em; align-items: flex-start; }
.ticks .icon { color: var(--yellow-500); stroke-width: 2.2; margin-top: .2em; }
.tone-stone .ticks .icon, .tone-sand .ticks .icon, .tone-white .ticks .icon, .tone-butter .ticks .icon, .split-stone .ticks .icon, .split-sand .ticks .icon { color: var(--charcoal-800); }

/* 5. Announcement & header ---------------------------------------------- */
.announce { position: relative; height: var(--announce-h); background: var(--yellow-500); color: var(--charcoal-900); overflow: hidden; font-size: .8125rem; font-weight: 600; }
.announce-track { height: 100%; position: relative; }
.announce p { position: absolute; inset: 0; margin: 0; display: flex; font-size: .75rem; align-items: center; justify-content: center; gap: .5em; padding-inline: 12px; text-align: center; opacity: 0; transform: translateY(100%); transition: opacity .5s var(--ease), transform .5s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.announce p .icon { --ia: var(--charcoal-900); }
.announce p.is-active, html:not(.js) .announce p:first-child { opacity: 1; transform: none; }
.announce p.is-leaving { opacity: 0; transform: translateY(-100%); }
.announce a { font-weight: 800; }

.site-header { position: sticky; top: 0; z-index: 900; }
.hdr-main { background: var(--charcoal-800); color: var(--cream-50); position: relative; z-index: 2; }
.hdr-inner { height: var(--hdr-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.hdr-left, .hdr-right { display: flex; align-items: center; gap: 2px; }
.hdr-right { justify-content: flex-end; }
.hdr-logo { display: block; justify-self: center; }
.hdr-logo .logo { height: 26px; width: auto; }
.logo .logo-mark, .logo-stacked .logo-mark { fill: var(--yellow-500); }
.logo .logo-word, .logo-stacked .logo-word { fill: var(--cream-50); }
.logo .logo-r, .logo-stacked .logo-r { fill: var(--yellow-500); }
.logo-tag { font: 600 25px var(--f-body); letter-spacing: 6.5px; fill: #BFC3C7; }
.logo .plank { transition: transform .45s var(--ease); }
.hdr-logo:hover .plank-0, .hdr-logo:focus-visible .plank-0 { transform: translate(-28px, 19px); }
.hdr-logo:hover .plank-1, .hdr-logo:focus-visible .plank-1 { transform: translate(28px, -19px); }
.hdr-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--cream-50); transition: background-color .2s, color .2s; }
.hdr-btn:hover { background: rgba(255, 255, 255, .08); color: var(--yellow-500); }
.hdr-btn .icon { width: 24px; height: 24px; }
.hdr-link { display: inline-flex; align-items: center; gap: .5em; padding: 10px; color: var(--cream-50); text-decoration: none; font-size: .9375rem; font-weight: 500; border-radius: 8px; transition: color .2s; }
.hdr-link:hover { color: var(--yellow-500); }
.hdr-link .icon { width: 22px; height: 22px; }
.hdr-link span { display: none; }
.hdr-link.hide-md { display: none; }
#menu-toggle .i-close { display: none; }
.menu-open #menu-toggle .i-open { display: none; }
.menu-open #menu-toggle .i-close { display: block; }
@media (max-width: 479px) { .hide-sm { display: none !important; } }
@media (min-width: 1024px) {
  .hdr-inner { grid-template-columns: auto minmax(220px, 340px) 1fr; gap: 28px; }
  .hdr-left { display: none; }
  .hdr-logo { justify-self: start; }
  .hdr-logo .logo { height: 36px; }
  .hdr-link span { display: inline; }
  .hdr-link.hide-md { display: inline-flex; }
  .hdr-right { gap: 6px; }
}
@media (min-width: 1024px) and (max-width: 1199px) { .hdr-link.hide-md { display: none; } }

/* 6. Mega menu — desktop (≥1024) ------------------------------------------ */
.mega-nav a { text-decoration: none; }
.mega-nav .m-chev, .mega-nav .mobile-back, .mega-nav .mobile-only { display: none; }
@media (min-width: 1024px) {
  .mega-nav { position: relative; background: var(--stone-300); z-index: 1; }
  .mnav-root { list-style: none; display: flex; justify-content: center; flex-wrap: nowrap; }
  .nav-item { list-style: none; position: static; }
  .nav-item.block-list { position: relative; }
  .top-level { display: flex; align-items: center; gap: .45em; height: var(--nav-h); padding: 0 clamp(10px, 1.2vw, 20px); font-size: .9rem; font-weight: 600; color: var(--charcoal-800); white-space: nowrap; transition: background-color .2s; }
  .top-level[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--charcoal-800); }
  .nav-item.open > .top-level { background: var(--white); }
  .nav-item:not(.has-sub) > .top-level:hover { background: var(--white); }
  .nav-cta > .top-level { background: var(--yellow-500); color: var(--charcoal-900); }
  .nav-cta > .top-level:hover { background: var(--yellow-300); }
  .nav-cta .icon { width: 18px; height: 18px; --ia: var(--charcoal-900); }

  /* Panels stay rendered and cross-fade with visibility/opacity, so nothing blinks. */
  .menu, .list { position: absolute; top: 100%; left: 0; background: var(--white); box-shadow: 0 24px 40px -24px rgba(30, 33, 36, .35); border-top: 1px solid var(--stone-200); visibility: hidden; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
  .menu { width: 100%; padding: 24px var(--gutter) 32px; }
  /* Mega panels share one white stage that stays open; panels themselves are transparent content layers.
     The stage height animates between panels and each panel is clipped to it, so content never spills. */
  .mega-nav { --stage-h: 0px; transition: --stage-h .28s var(--ease); }
  .mega-nav.no-stage-anim { transition: none; }
  .mega-stage { position: absolute; left: 0; right: 0; top: 100%; height: var(--stage-h); z-index: 0; background: var(--white); border-top: 1px solid var(--stone-200); box-shadow: 0 24px 40px -24px rgba(30, 33, 36, .35); pointer-events: none; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
  .mega-nav.stage-open .mega-stage { visibility: visible; opacity: 1; transform: none; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s; }
  .nav-item > .menu, .nav-item > .list { z-index: 1; background: transparent; box-shadow: none; border-top-color: transparent; transform: none; clip-path: inset(0 0 max(0px, calc(100% - var(--stage-h))) 0); }
  /* Short link lists share the same full-width stage, laid out as tidy columns */
  .nav-item.block-list { position: static; }
  .nav-item > .list { left: 0; width: 100%; }
  .nav-item > .list .content { width: auto; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 22px var(--gutter) 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .nav-item > .list .content > a { justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--stone-200); font-size: 1rem; }
  .nav-item > .list .content > a:last-child { border-bottom: 1px solid var(--stone-200); }
  .nav-item > .list .content > a:hover { background: none; padding-left: 0; font-weight: 700; }
  .nav-item > .list .content > a .m-chev { display: block; width: 14px; height: 14px; opacity: .45; }
  .nav-item.open > .menu, .nav-item.open > .list { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s; }
  /* Moving straight from one menu to another swaps instantly — no fade out/in between them. */
  .mega-nav.is-switching .menu, .mega-nav.is-switching .list, .mega-nav.is-switching .top-level { transition: none !important; }
  html:not(.js) .nav-item:hover > .menu, html:not(.js) .nav-item:focus-within > .menu, html:not(.js) .nav-item:hover > .list, html:not(.js) .nav-item:focus-within > .list { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
  html:not(.js) .menu-item[data-default] { display: flex; }

  .list .content { width: 300px; padding: 8px 0; }
  .list .content > a { display: flex; padding: 13px 22px; border-bottom: 1px solid var(--stone-100); font-size: .95rem; color: var(--charcoal-800); transition: background-color .15s, padding .2s; }
  .list .content > a:last-child { border-bottom: 0; }
  .list .content > a:hover { background: var(--stone-100); padding-left: 28px; }

  .menu .content { max-width: var(--container); margin: 0 auto; display: flex; gap: 28px; }
  .side-menu { display: flex; flex-direction: column; flex: none; width: 260px; border-right: 1px solid var(--stone-200); padding-right: 24px; }
  .side-menu a { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--stone-100); font-size: 1rem; color: var(--charcoal-800); transition: color .15s, padding .2s; }
  .side-menu a .m-chev { display: block; width: 16px; height: 16px; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
  .side-menu a:hover, .side-menu a.active { font-weight: 700; }
  .side-menu a.active .m-chev, .side-menu a:hover .m-chev { opacity: 1; transform: none; }
  .side-menu a.place-first { order: 9; }

  .menu-item { display: none; flex: 1; gap: 2rem; padding: 6px 0; }
  .menu-item.active { display: flex; }
  .menu-item .column { flex: 1; min-width: 0; }
  .menu-item__second-level { display: block; font-weight: 700; font-size: 1rem; padding-bottom: 14px; border-bottom: 1px solid var(--stone-200); color: var(--charcoal-800); }
  .menu-item.lists ul { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
  .menu-item.lists ul a { display: flex; align-items: center; gap: 14px; min-height: 36px; font-size: .9rem; color: var(--charcoal-800); border-radius: 6px; transition: color .15s; }
  .menu-item.lists ul a:hover { font-weight: 700; }
  .menu-item.lists ul a .m-chev { display: block; width: 12px; height: 12px; margin-left: auto; opacity: .45; }
  .swatch { width: 28px; height: 28px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
  .swatch.bordered { box-shadow: inset 0 0 0 1px #CFC8BB; }
  .m-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--stone-100); flex: none; }
  .m-ico .icon { width: 18px; height: 18px; }
  .menu-item.images { flex-wrap: wrap; }
  .menu-item.images .column { flex: 0 0 calc(25% - 1.5rem); }
  .menu-card { display: block; color: var(--charcoal-800); }
  .menu-card .image { display: block; aspect-ratio: 11 / 9; overflow: hidden; border-radius: 6px; margin-bottom: 10px; background: var(--stone-100); }
  .menu-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
  .menu-card:hover img { transform: scale(1.05); }
  .menu-card-label { display: block; font-weight: 600; font-size: .95rem; padding-bottom: 10px; border-bottom: 1px solid var(--stone-200); }
}
@media (min-width: 1024px) and (max-width: 1199px) { .side-menu { width: 210px; } .menu-item { gap: 1.25rem; } .menu-item.lists ul a { font-size: .85rem; gap: 10px; } }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 7. Mega menu — mobile drill-down (<1024) --------------------------------- */
@media (max-width: 1023px) {
  .mega-nav { position: fixed; left: 0; right: 0; top: var(--menu-top, calc(var(--hdr-h))); height: calc(100dvh - var(--menu-top, var(--hdr-h))); background: var(--white); overflow: hidden; transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s; z-index: 1; }
  .mega-nav.is-open { transform: none; visibility: visible; transition: transform .35s var(--ease); }
  .mnav-track { position: relative; height: 100%; transition: transform .35s var(--ease); }
  .mnav-track.step-1 { transform: translateX(-100%); }
  .mnav-track.step-2 { transform: translateX(-200%); }
  .mnav-root { list-style: none; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 40px; }
  .nav-item { list-style: none; border-bottom: 1px solid var(--stone-100); }
  .mega-nav .mobile-only { display: block; }
  .top-level { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 var(--gutter); font-size: 1.0625rem; font-weight: 600; color: var(--charcoal-800); }
  .top-level .m-chev, .side-menu a .m-chev, .list .content > a .m-chev { display: block; margin-left: auto; width: 18px; height: 18px; color: var(--slate-500); }
  .nav-cta > .top-level { background: var(--yellow-500); color: var(--charcoal-900); }
  .nav-cta .icon { --ia: var(--charcoal-900); }
  .nav-dark > .top-level { background: var(--charcoal-800); color: var(--cream-50); }
  .nav-dark .m-chev { color: var(--cream-50) !important; }
  .nav-dark .icon { --ia: var(--yellow-500); }
  .mnav-contact { padding: 18px var(--gutter); display: grid !important; gap: 4px; border: 0 !important; }
  .mnav-contact a { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--charcoal-800); font-weight: 500; }
  .mnav-contact .icon { color: var(--charcoal-800); }

  .menu, .list { display: none; position: absolute; top: 0; left: 100%; width: 100%; height: 100%; background: var(--white); }
  .nav-item.open > .menu, .nav-item.open > .list { display: block; }
  .list .content { height: 100%; overflow-y: auto; }
  .mega-nav .mobile-back { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 54px; padding: 0 var(--gutter); border-bottom: 1px solid var(--stone-100); font-weight: 600; color: var(--slate-500); }
  .mobile-back .icon { width: 18px; height: 18px; }
  .side-menu { height: 100%; overflow-y: auto; display: flex; flex-direction: column; }
  .side-menu a, .list .content > a { display: flex; align-items: center; min-height: 56px; padding: 0 var(--gutter); border-bottom: 1px solid var(--stone-100); font-size: 1rem; color: var(--charcoal-800); font-weight: 500; }
  .side-menu a.place-first { order: -1; font-weight: 700; }
  .side-menu .mobile-back { order: -2; }
  .menu-item { display: none; position: absolute; top: 0; left: 100%; width: 100%; height: 100%; overflow-y: auto; background: var(--white); padding-bottom: 40px; }
  .menu-item.mobile-active { display: block; }
  .menu-item .column { padding: 18px var(--gutter) 6px; }
  .menu-item__second-level { display: block; font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid var(--stone-200); color: var(--charcoal-800); }
  .menu-item.lists ul { list-style: none; margin-top: 6px; }
  .menu-item.lists ul a { display: flex; align-items: center; gap: 14px; min-height: 48px; color: var(--charcoal-800); }
  .menu-item.lists ul a .m-chev { display: block; margin-left: auto; width: 14px; height: 14px; color: var(--slate-500); }
  .swatch { width: 28px; height: 28px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
  .swatch.bordered { box-shadow: inset 0 0 0 1px #CFC8BB; }
  .m-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--stone-100); flex: none; }
  .m-ico .icon { width: 18px; height: 18px; }
  .menu-item.images { padding: 16px var(--gutter) 40px; }
  .menu-item.images.mobile-active { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
  .menu-item.images .mobile-back { grid-column: 1 / -1; margin: -16px calc(var(--gutter) * -1) 4px; width: calc(100% + var(--gutter) * 2); }
  .menu-item.images .column { padding: 0; }
  .menu-card { display: block; color: var(--charcoal-800); font-weight: 600; font-size: .95rem; }
  .menu-card .image { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; margin-bottom: 8px; background: var(--stone-100); }
  .menu-card img { width: 100%; height: 100%; object-fit: cover; }
}
@media (min-width: 640px) and (max-width: 1023px) { .menu-item.images.mobile-active { grid-template-columns: repeat(3, 1fr); } }

/* 8. Search ------------------------------------------------------------- */
.site-search { position: relative; display: none; }
.site-search input { width: 100%; height: 44px; border: 0; border-radius: 8px; background: var(--cream-50); color: var(--charcoal-800); padding: 0 46px 0 16px; font-size: .95rem; }
.site-search input::placeholder { color: #7B8086; }
.site-search input::-webkit-search-cancel-button { display: none; }
.site-search > button { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; display: grid; place-items: center; color: var(--charcoal-800); border-radius: 6px; }
.site-search > button:hover { background: var(--stone-100); }
.search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--white); color: var(--charcoal-800); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 50; max-height: min(70vh, 460px); overflow-y: auto; }
.search-results a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; }
.search-results a:hover, .search-results a[aria-selected="true"] { background: var(--stone-100); }
.search-results .sr-ico { width: 36px; height: 36px; border-radius: 50%; background: var(--stone-100); display: grid; place-items: center; flex: none; }
.search-results .sr-ico .icon { width: 18px; height: 18px; }
.search-results strong { display: block; font-weight: 600; font-size: .95rem; }
.search-results small { display: block; color: var(--slate-500); font-size: .8rem; line-height: 1.35; }
.search-results .sr-empty { padding: 14px; color: var(--slate-500); font-size: .9rem; }
.search-results .sr-all { justify-content: center; font-weight: 600; font-size: .9rem; border-top: 1px solid var(--stone-100); border-radius: 0 0 8px 8px; margin-top: 4px; }
@media (min-width: 1024px) { .site-search { display: block; } }
@media (max-width: 1023px) {
  .site-search.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; padding: 12px var(--gutter) 14px; background: var(--charcoal-800); border-top: 1px solid var(--charcoal-700); animation: menuIn .2s var(--ease); }
  .site-search.is-open > button { right: calc(var(--gutter) + 4px); top: 16px; }
  .site-search .search-results { left: var(--gutter); right: var(--gutter); }
}

/* 9. Sections ------------------------------------------------------------- */
.mark-bg { position: absolute; pointer-events: none; fill: currentColor; color: var(--stone-200); z-index: 0; }
.sec > .container, .sec > .wrap { position: relative; z-index: 1; }
.sec > .mark-bg { width: clamp(220px, 26vw, 400px); left: clamp(-200px, -11vw, -90px); top: 50%; transform: translateY(-50%); }
.sec.tone-dark > .mark-bg, .sec.tone-deep > .mark-bg { color: var(--charcoal-700); left: auto; right: clamp(-230px, -13vw, -100px); }
.sec.tone-sand > .mark-bg, .sec.tone-stone > .mark-bg { color: rgba(255, 255, 255, .45); }

/* Home hero */
.hero { display: grid; background: var(--charcoal-800); color: var(--cream-50); position: relative; overflow: hidden; }
.hero-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media .mark-bg { color: var(--yellow-500); opacity: .92; width: 34%; right: -9%; top: -14%; z-index: 1; }
.hero-pin { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(30, 33, 36, .72); backdrop-filter: blur(6px); color: var(--cream-50); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.hero-pin .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--cream-50); display: grid; place-items: center; }
.hero-pin .dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow-500); }
.hero-body { padding: 36px var(--gutter) 44px; text-align: center; position: relative; z-index: 1; }
.hero-trust { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9rem; margin-bottom: 18px; color: #DADDE0; }
.hero-trust .stars { display: inline-flex; gap: 2px; color: var(--yellow-500); }
.hero-trust .stars .icon { width: 16px; height: 16px; }
.hero h1 { margin-bottom: .45em; }
.hero h1 em { font-style: italic; color: var(--yellow-500); font-weight: 330; }
.hero-body > p { color: #D3D6D9; max-width: 52ch; margin-inline: auto; }
.hero .ticks { width: fit-content; margin: 22px auto 28px; text-align: left; font-size: .95rem; color: #E4E6E8; }
.hero .btn-row { justify-content: center; }
.hero-call { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--cream-50); font-weight: 600; text-decoration: none; padding: 8px; }
.hero-call .icon { width: 22px; height: 22px; color: var(--yellow-500); }
.hero-call:hover span { text-decoration: underline; text-decoration-color: var(--yellow-500); }
@media (min-width: 1024px) {
  .hero { grid-template-columns: 1fr 1fr; min-height: min(640px, calc(100svh - var(--sticky-h) - var(--announce-h) - 44px)); }
  .hero-media { order: 2; aspect-ratio: auto; }
  .hero-body { align-self: center; text-align: left; padding: 56px clamp(32px, 5vw, 88px) 64px max(var(--gutter), calc((100vw - var(--container)) / 2)); }
  .hero-body > p { margin-inline: 0; }
  .hero .ticks { margin-left: 0; }
  .hero .btn-row { justify-content: flex-start; }
  .hero-pin { left: 24px; bottom: 24px; }
}

/* USP strip */
.usp-strip { background: var(--stone-300); }
.usp-strip ul { list-style: none; display: flex; gap: 10px 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 12px; }
.usp-strip ul::-webkit-scrollbar { display: none; }
.usp-strip li { display: flex; align-items: center; gap: 8px; flex: none; scroll-snap-align: start; font: 700 .75rem/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.usp-strip .icon { width: 22px; height: 22px; }
@media (min-width: 1280px) { .usp-strip ul { justify-content: space-around; overflow: visible; } }
.usp-dark { background: var(--charcoal-900); color: var(--cream-50); }

/* Circles */
.circles { list-style: none; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 4px var(--gutter) 10px; margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; }
.circles::-webkit-scrollbar { display: none; }
.circles li { flex: 0 0 auto; width: clamp(112px, 30vw, 150px); scroll-snap-align: start; }
.circle { display: block; text-align: center; text-decoration: none; color: inherit; }
.circle-img { display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: 14px; position: relative; background: var(--stone-200); box-shadow: 0 0 0 0 var(--yellow-500); transition: box-shadow .3s var(--ease); }
.circle-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.circle:hover .circle-img { box-shadow: 0 0 0 4px var(--yellow-500); }
.circle:hover .circle-img img { transform: scale(1.07); }
.circle-label { display: block; font: 700 .8125rem/1.3 var(--f-body); text-transform: uppercase; letter-spacing: .06em; }
@media (min-width: 1024px) { .circles { justify-content: center; flex-wrap: nowrap; gap: clamp(14px, 1.8vw, 28px); overflow: visible; margin: 0; padding: 0; } .circles li { width: auto; flex: 1 1 0; max-width: 150px; min-width: 0; } }
.circles-left { justify-content: flex-start; }

/* Features / why choose us */
.features { list-style: none; display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 560px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .features { grid-template-columns: repeat(4, 1fr); gap: 36px; } .features.f-3 { grid-template-columns: repeat(3, 1fr); } }
.feature { text-align: center; padding: 0 8px; }
.feature-ico { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; transition: transform .4s var(--ease), background-color .3s; }
.feature-ico .icon { width: 30px; height: 30px; }
.feature:hover .feature-ico { transform: translateY(-3px); background: var(--yellow-100); }
.tone-dark .feature:hover .feature-ico { background: rgba(245, 192, 43, .12); }
.feature h3 { font: 700 1.0625rem/1.3 var(--f-body); margin-bottom: .45em; letter-spacing: 0; }
.feature p { font-size: .95rem; color: var(--ink-soft); margin: 0 auto; max-width: 30ch; }
.tone-dark .feature p { color: #C9CCCF; }
.features.f-left .feature { text-align: left; padding: 0; }
.features.f-left .feature-ico { margin: 0 0 14px; }
.features.f-left .feature p { margin: 0; }
.why .mark-bg { width: clamp(240px, 30vw, 460px); left: clamp(-230px, -14vw, -110px); top: 50%; transform: translateY(-50%); color: var(--stone-200); }

/* Overlay cards */
.ocards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ocards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ocards { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.ocard { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; color: var(--white); text-decoration: none; background: var(--charcoal-700); }
.ocard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.ocard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 22, 24, 0) 40%, rgba(20, 22, 24, .78) 100%); }
.ocard:hover .ocard-img img { transform: scale(1.06); }
.ocard-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px; display: grid; gap: 6px; }
.ocard-title { font: 700 clamp(1.1rem, 1rem + .5vw, 1.4rem)/1.15 var(--f-body); text-transform: uppercase; letter-spacing: .04em; }
.ocard-sub { font-size: .9rem; color: #E9EAEB; }
.ocard-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; text-decoration: underline; text-decoration-color: var(--yellow-500); text-decoration-thickness: 2px; text-underline-offset: .3em; }
@media (max-width: 639px) { .ocard { aspect-ratio: 4 / 3.4; } }

/* Split */
.split { display: grid; position: relative; overflow: hidden; }
.split-img { aspect-ratio: 4 / 3; overflow: hidden; }
.split-img img { width: 100%; height: 100%; object-fit: cover; }
.split-body { padding: clamp(40px, 6vw, 88px) var(--gutter); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; z-index: 1; }
.split-body > * { max-width: 560px; }
.split-body p { color: var(--ink-soft); }
.split-stone { background: var(--stone-300); }
.split-stone .split-body p { color: #4F555B; }
.split-sand { background: var(--stone-100); }
.split-dark { background: var(--charcoal-800); color: var(--cream-50); }
.split-dark .split-body p { color: #C9CCCF; }
.split .ticks { margin: 4px 0 26px; text-align: left; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; min-height: 540px; }
  .split-img { aspect-ratio: auto; }
  .split-rev .split-img { order: 2; }
}

/* Section: range/product cards */
.rcards { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .rcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rcards { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.rcard { background: var(--white); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 0 var(--line); transition: box-shadow .3s var(--ease), transform .3s var(--ease); scroll-margin-top: calc(var(--sticky-h) + 90px); }
.rcard:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.rcard:target { box-shadow: 0 0 0 3px var(--yellow-500), var(--shadow); }
.rcard-img { aspect-ratio: 4 / 3; overflow: hidden; position: relative; background: var(--stone-200); }
.rcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.rcard:hover .rcard-img img { transform: scale(1.05); }
.price-pill { position: absolute; left: 14px; top: 14px; background: var(--yellow-500); color: var(--charcoal-900); border-radius: 999px; padding: 6px 12px; font-size: .8125rem; font-weight: 700; }
.rcard-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.rcard h3 { margin-bottom: .35em; }
.rcard p { font-size: .95rem; color: var(--ink-soft); }
.rcard-best { display: flex; gap: 8px; font-size: .875rem; color: var(--charcoal-700); margin-bottom: 14px; }
.rcard-best .icon { color: var(--charcoal-700); width: 18px; height: 18px; margin-top: 2px; }
.rcard-best strong { font-weight: 700; }
.specs { width: 100%; border-collapse: collapse; font-size: .85rem; margin: 0 0 16px; }
.specs th, .specs td { text-align: left; padding: 7px 0; border-bottom: 1px solid var(--stone-100); vertical-align: top; }
.specs th { font-weight: 600; color: var(--slate-500); width: 44%; padding-right: 10px; }
details.spec-toggle { margin-bottom: 14px; }
details.spec-toggle summary { cursor: pointer; font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; list-style: none; padding: 4px 0; }
details.spec-toggle summary::-webkit-details-marker { display: none; }
details.spec-toggle summary .icon { width: 16px; height: 16px; transition: transform .25s; }
details.spec-toggle .i-min, details.spec-toggle[open] .i-plus { display: none; }
details.spec-toggle[open] .i-min { display: block; }
.rcard-actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; list-style: none; }
.tags li { font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--stone-100); color: var(--charcoal-700); }

/* Project cards */
.pcards { scroll-padding-inline: 2px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 82%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
@media (min-width: 640px) { .pcards { grid-auto-columns: minmax(280px, 46%); } }
@media (min-width: 1024px) { .pcards { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; gap: 22px; } }
.pcard { scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; background: var(--charcoal-800); color: var(--cream-50); text-decoration: none; }
.pcard-img { display: block; aspect-ratio: 4 / 4.2; overflow: hidden; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pcard:hover .pcard-img img { transform: scale(1.05); }
.pcard-body { padding: 18px 20px 20px; display: grid; gap: 4px; }
.pcard-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-weight: 700; }
.pcard-tag { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--yellow-500); font-weight: 700; }
.pcard-body p { margin: 0; font-family: var(--f-display); font-size: 1.15rem; line-height: 1.3; }
.pcard-body .link-arrow { margin-top: 8px; font-size: .9rem; }

/* Inspiration cards */
.icards { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .icards { grid-template-columns: repeat(3, 1fr); } }
.icard { text-decoration: none; color: inherit; display: block; }
.icard-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; margin-bottom: 16px; }
.icard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.icard:hover .icard-img img { transform: scale(1.05); }
.icard h3 { font: 700 1rem/1.3 var(--f-body); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .35em; }
.icard p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

/* Reviews carousel */
.reviews { background: var(--charcoal-800); color: var(--cream-50); }
.reviews .mark-bg { color: var(--charcoal-700); width: clamp(320px, 42vw, 640px); right: clamp(-320px, -14vw, -120px); top: -10%; }
.carousel { position: relative; }
.carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 8px; }
.carousel-track::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .carousel-track { grid-auto-columns: calc(50% - 9px); } }
@media (min-width: 1024px) { .carousel-track { grid-auto-columns: calc((100% - 36px) / 3); } }
.review { scroll-snap-align: start; background: var(--charcoal-700); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; min-height: 260px; }
.review .stars { display: flex; gap: 3px; color: var(--yellow-500); }
.review .stars .icon { width: 18px; height: 18px; }
.review h3 { font-size: 1.35rem; margin: 4px 0 0; }
.review p { color: #CED1D4; font-size: .95rem; margin: 0; flex: 1; }
.review .who { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.review .who .icon { color: var(--yellow-500); width: 16px; height: 16px; }
.carousel-ui { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.carousel-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; transition: background-color .2s, color .2s, opacity .2s; }
.carousel-btn:hover:not(:disabled) { background: var(--yellow-500); color: var(--charcoal-900); border-color: var(--yellow-500); }
.carousel-btn:disabled { opacity: .35; cursor: default; }
.carousel-dots { display: flex; gap: 0; }
.carousel-dots button { width: 26px; height: 44px; display: grid; place-items: center; }
.carousel-dots button::before { content: ''; width: 9px; height: 9px; border-radius: 9px; background: currentColor; opacity: .35; transition: opacity .2s, width .3s var(--ease), background-color .2s; }
.carousel-dots button[aria-current="true"] { width: 40px; }
.carousel-dots button[aria-current="true"]::before { opacity: 1; width: 26px; background: var(--yellow-500); }
.reviews-foot { text-align: center; margin-top: 22px; font-size: .9rem; color: #C9CCCF; }
.reviews-foot a { color: var(--cream-50); font-weight: 600; }

/* Vision / two column text */
.vision { display: grid; gap: 24px; }
.vision h2 { margin-bottom: .2em; }
.vision .sub { font-weight: 600; color: var(--charcoal-700); font-size: 1.05rem; }
.vision-body p { color: var(--ink-soft); }
@media (min-width: 1024px) { .vision { grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; } }
.vision-sec .mark-bg { width: clamp(240px, 26vw, 400px); left: 38%; bottom: -38%; color: var(--stone-200); }

/* CTA band */
.cta-band { position: relative; overflow: hidden; padding-block: clamp(48px, 5vw, 80px); }
.cta-yellow { background: var(--yellow-500); color: var(--charcoal-900); }
.cta-dark { background: var(--charcoal-800); color: var(--cream-50); }
.cta-band .mark-bg { width: clamp(220px, 24vw, 380px); right: clamp(-170px, -7vw, -50px); top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, .3); }
.cta-dark .mark-bg { color: var(--charcoal-700); }
.cta-inner { position: relative; z-index: 1; display: grid; gap: 26px; align-items: center; }
.cta-inner h2 { margin-bottom: .3em; }
.cta-inner p { margin: 0; max-width: 56ch; font-size: 1.05rem; }
.cta-yellow .cta-inner p { color: #3A3420; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.cta-phone { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-size: .95rem; }
.cta-phone .icon { width: 22px; height: 22px; }
.cta-phone strong { font-weight: 800; }
.cta-phone:hover strong { text-decoration: underline; }
@media (min-width: 1024px) { .cta-inner { grid-template-columns: 1.3fr 1fr; } .cta-actions { justify-content: flex-end; } }

/* Page hero (inner pages) */
.page-hero { background: var(--charcoal-800); color: var(--cream-50); display: grid; position: relative; overflow: hidden; }
.page-hero-body { padding: 26px var(--gutter) 40px; position: relative; z-index: 1; }
.page-hero h1 { margin-bottom: .35em; }
.page-hero .lede { color: #D0D3D6; }
.page-hero .btn-row { margin-top: 24px; }
.page-hero-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .mark-bg { color: var(--yellow-500); width: clamp(120px, 18vw, 250px); right: -40px; bottom: -60px; z-index: 1; opacity: .95; }
.page-hero.ph-simple { padding-bottom: 0; }
.page-hero.ph-simple .page-hero-body { padding-bottom: clamp(44px, 5vw, 72px); }
.page-hero.ph-simple .mark-bg { color: var(--charcoal-700); width: clamp(220px, 30vw, 420px); right: -90px; top: -60px; bottom: auto; }
@media (min-width: 1024px) {
  .page-hero { grid-template-columns: 1.05fr 1fr; min-height: 420px; }
  .page-hero-body { align-self: center; padding: 40px clamp(32px, 4vw, 72px) 56px max(var(--gutter), calc((100vw - var(--container)) / 2)); }
  .page-hero-media { aspect-ratio: auto; }
  .page-hero.ph-simple { grid-template-columns: 1fr; min-height: 0; }
  .page-hero.ph-simple .page-hero-body { padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2)); max-width: none; }
  .page-hero.ph-simple .page-hero-body > * { max-width: 780px; }
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .8125rem; color: #B9BDC1; margin-bottom: 18px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 4px; }
.breadcrumb a { color: #DDE0E2; text-decoration: none; }
.breadcrumb a:hover { color: var(--yellow-500); text-decoration: underline; }
.breadcrumb .icon { width: 13px; height: 13px; opacity: .6; }
.breadcrumb [aria-current] { color: var(--yellow-500); font-weight: 600; }

/* 10. Components ------------------------------------------------------------ */
/* Filter chips */
.filters { position: sticky; top: var(--sticky-h); z-index: 20; background: rgba(250, 248, 243, .94); backdrop-filter: blur(8px); border-block: 1px solid var(--line); margin-bottom: 28px; }
.filters-inner { display: flex; align-items: center; gap: 10px; padding-block: 12px; }
.filters-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem; flex: none; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #CFC8BB; background: var(--white); font-size: .875rem; font-weight: 600; color: var(--charcoal-700); transition: background-color .2s, border-color .2s, color .2s; }
.chip:hover { border-color: var(--charcoal-800); }
.chip[aria-pressed="true"] { background: var(--charcoal-800); border-color: var(--charcoal-800); color: var(--cream-50); }
.result-count { font-size: .9rem; color: var(--slate-500); margin: -8px 0 20px; }
.rcard[hidden], .gitem[hidden] { display: none !important; }
.empty-state { text-align: center; padding: 40px 16px; border: 1.5px dashed #CFC8BB; border-radius: var(--radius); }

/* Comparison table */
.compare { display: grid; gap: 18px; }
@media (min-width: 768px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-card { background: var(--white); border-radius: var(--radius); padding: 26px 24px; border-top: 4px solid var(--yellow-500); }
.compare-card h3 { display: flex; align-items: center; gap: 12px; }
.compare-card h3 .icon { width: 30px; height: 30px; }
.compare-card .pros li .icon { color: var(--success); }
.compare-card .cons li .icon { color: var(--slate-500); }
.compare-card ul + ul { margin-top: 10px; }

/* Room picks */
.picks { display: grid; gap: 18px; counter-reset: pick; }
@media (min-width: 768px) { .picks { grid-template-columns: repeat(3, 1fr); } }
.pick { background: var(--white); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; position: relative; counter-increment: pick; text-decoration: none; color: inherit; transition: box-shadow .3s, transform .3s var(--ease); }
.pick:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.pick::before { content: counter(pick, decimal-leading-zero); font: 400 2.4rem/1 var(--f-display); color: var(--yellow-600); }
.pick h3 { margin: 6px 0 2px; }
.pick p { color: var(--ink-soft); font-size: .95rem; margin: 0 0 8px; }
.pick .link-arrow { margin-top: auto; }

/* Photo strip */
.photo-strip { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.photo-strip > * { display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: var(--stone-200); }
.photo-strip > *:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.photo-strip img, .photo-strip > img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.photo-strip a:hover img { transform: scale(1.04); }
@media (min-width: 768px) { .photo-strip { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: clamp(260px, 30vw, 440px); } .photo-strip > *, .photo-strip > *:first-child { grid-column: auto; aspect-ratio: auto; } }

/* Steps */
.steps { list-style: none; display: grid; gap: 18px; counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding: 26px 22px 24px; border-radius: var(--radius); background: var(--white); counter-increment: step; }
.tone-dark .step { background: var(--charcoal-700); }
.step::before { content: counter(step); position: absolute; right: 18px; top: 14px; font: 400 3rem/1 var(--f-display); color: var(--stone-200); }
.tone-dark .step::before { color: var(--charcoal-600); }
.step .feature-ico { margin: 0 0 16px; width: 56px; height: 56px; }
.step h3 { font: 700 1.05rem/1.3 var(--f-body); margin-bottom: .4em; }
.step p { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.tone-dark .step p { color: #C9CCCF; }

/* Accordion */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item h3 { margin: 0; font: inherit; }
.acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; text-align: left; font: 600 1.05rem/1.4 var(--f-body); color: inherit; }
.acc-btn:hover { color: var(--ochre-700); }
.tone-dark .acc-btn:hover { color: var(--yellow-500); }
.acc-ico { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; transition: transform .3s var(--ease), background-color .2s; }
.acc-ico .icon { width: 18px; height: 18px; }
.acc-btn[aria-expanded="true"] .acc-ico { background: var(--yellow-500); border-color: var(--yellow-500); color: var(--charcoal-900); }
.acc-ico .i-min, .acc-btn[aria-expanded="true"] .i-plus { display: none; }
.acc-btn[aria-expanded="true"] .i-min { display: block; }
.acc-panel { overflow: hidden; }
.acc-inner { padding: 0 52px 22px 2px; color: var(--ink-soft); }
.tone-dark .acc-inner { color: #C9CCCF; }
.acc-inner p:last-child { margin: 0; }
.faq-groups { display: grid; gap: 48px; }
.faq-group h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); display: flex; align-items: center; gap: 12px; }
.faq-group h2 .icon { width: 28px; height: 28px; }
@media (min-width: 1024px) { .faq-layout { display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start; } .faq-nav { position: sticky; top: calc(var(--sticky-h) + 24px); } }
.faq-nav { display: none; }
@media (min-width: 1024px) { .faq-nav { display: block; } }
.faq-nav ul { list-style: none; display: grid; gap: 4px; border-left: 2px solid var(--line); }
.faq-nav a { display: block; padding: 8px 16px; margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; font-weight: 600; color: var(--slate-500); }
.faq-nav a:hover, .faq-nav a.active { color: var(--charcoal-800); border-color: var(--yellow-500); }

/* Forms */
.form { display: grid; gap: 18px; }
.form-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; align-content: start; }
.field label, .field legend { font-weight: 600; font-size: .9rem; }
.field .optional { font-weight: 400; color: var(--slate-500); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid #CFC8BB; border-radius: 8px; background: var(--white); font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23272B2F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #A9A294; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--charcoal-800); box-shadow: 0 0 0 3px var(--yellow-300); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--error); }
.field-error { color: var(--error); font-size: .85rem; font-weight: 600; display: none; }
.field.has-error .field-error { display: block; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
@media (min-width: 640px) { .choice-grid { grid-template-columns: repeat(4, 1fr); } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; border: 1.5px solid #CFC8BB; border-radius: 10px; background: var(--white); font-size: .9rem; font-weight: 600; text-align: center; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.choice span .icon { width: 28px; height: 28px; }
.choice input:hover + span { border-color: var(--charcoal-800); }
.choice input:checked + span { border-color: var(--charcoal-800); background: var(--yellow-100); box-shadow: inset 0 0 0 1px var(--charcoal-800); }
.choice input:focus-visible + span { outline: 3px solid var(--yellow-500); outline-offset: 2px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--ink-soft); }
.consent input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--charcoal-800); flex: none; }
.form-note { font-size: .85rem; color: var(--slate-500); margin: 0; }
.form-status { padding: 14px 16px; border-radius: 8px; font-weight: 600; display: none; }
.form-status.is-error { display: block; background: #FBE9E7; color: var(--error); }
.form-card { background: var(--white); border-radius: var(--radius-lg); padding: clamp(24px, 3.4vw, 44px); box-shadow: var(--shadow); }

/* Contact aside */
.contact-layout { display: grid; gap: 28px; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; } .contact-aside { position: sticky; top: calc(var(--sticky-h) + 24px); } }
.contact-aside { display: grid; gap: 18px; }
.info-card { background: var(--charcoal-800); color: var(--cream-50); border-radius: var(--radius-lg); padding: 28px 26px; position: relative; overflow: hidden; }
.info-card .mark-bg { color: var(--charcoal-700); width: 220px; right: -80px; bottom: -80px; }
.info-card h2, .info-card h3 { position: relative; }
.info-list { list-style: none; display: grid; gap: 14px; position: relative; }
.info-list a, .info-list span.row { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.info-list .ico-c { width: 44px; height: 44px; border-radius: 50%; background: var(--charcoal-700); display: grid; place-items: center; flex: none; transition: background-color .2s, color .2s; }
.info-list a:hover .ico-c { background: var(--yellow-500); color: var(--charcoal-900); }
.info-list small { display: block; font-size: .78rem; color: #A9AEB3; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.info-list strong { font-weight: 600; word-break: break-word; }

/* Areas */
.area-groups { display: grid; gap: 22px; }
@media (min-width: 768px) { .area-groups { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .area-groups { grid-template-columns: repeat(3, 1fr); } }
.area-group { background: var(--white); border-radius: var(--radius); padding: 24px; }
.area-group h3 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; }
.area-group h3 .icon { width: 24px; height: 24px; }
.area-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.area-list li { padding: 7px 13px; border-radius: 999px; background: var(--stone-100); font-size: .875rem; font-weight: 500; }
.area-search { max-width: 460px; margin: 0 auto 32px; }
.area-hit { background: var(--yellow-500) !important; font-weight: 700 !important; }
.area-msg { text-align: center; font-weight: 600; margin: -16px 0 24px; min-height: 1.5em; }

/* Gallery */
.gallery { columns: 2 160px; column-gap: 12px; }
@media (min-width: 768px) { .gallery { columns: 3 220px; column-gap: 16px; } }
@media (min-width: 1200px) { .gallery { columns: 4 240px; } }
.gitem { break-inside: avoid; margin: 0 0 12px; position: relative; border-radius: 8px; overflow: hidden; display: block; width: 100%; cursor: zoom-in; background: var(--stone-200); }
@media (min-width: 768px) { .gitem { margin-bottom: 16px; } }
.gitem img { width: 100%; transition: transform .8s var(--ease); }
.gitem:hover img { transform: scale(1.04); }
.gitem figcaption { position: absolute; inset: auto 0 0 0; padding: 30px 14px 12px; background: linear-gradient(transparent, rgba(20, 22, 24, .8)); color: var(--white); font-size: .85rem; font-weight: 600; text-align: left; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s var(--ease); }
.gitem:hover figcaption, .gitem:focus-visible figcaption { opacity: 1; transform: none; }
@media (hover: none) { .gitem figcaption { opacity: 1; transform: none; } }
.gitem .zoom { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(250, 248, 243, .9); display: grid; place-items: center; color: var(--charcoal-800); opacity: 0; transition: opacity .3s; }
.gitem .zoom .icon { width: 16px; height: 16px; }
.gitem:hover .zoom { opacity: 1; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 1500; background: rgba(20, 22, 24, .96); display: grid; grid-template-rows: auto 1fr auto; color: var(--cream-50); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .3s; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; }
.lb-count { font-size: .9rem; font-weight: 600; color: #C9CCCF; }
.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 12px; }
.lb-stage img { max-width: 100%; max-height: calc(100dvh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.lb-btn { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--cream-50); transition: background-color .2s, color .2s; }
.lb-btn:hover { background: var(--yellow-500); color: var(--charcoal-900); }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: 12px; } .lb-next { right: 12px; }
.lb-caption { text-align: center; padding: 14px 16px 22px; font-weight: 600; }
@media (max-width: 767px) { .lb-prev, .lb-next { top: auto; bottom: -62px; transform: none; } .lb-prev { left: calc(50% - 60px); } .lb-next { right: calc(50% - 60px); } .lb-caption { padding-bottom: 80px; } }

/* Before/after */
.ba-grid { display: grid; gap: 22px; }
@media (min-width: 768px) { .ba-grid { grid-template-columns: 1fr 1fr; } }
.ba { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); user-select: none; --pos: 50%; background: var(--stone-200); }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: var(--yellow-500); transform: translateX(-50%); z-index: 2; pointer-events: none; }
.ba-handle { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; border-radius: 50%; background: var(--yellow-500); color: var(--charcoal-900); display: grid; place-items: center; transform: translate(-50%, -50%); box-shadow: var(--shadow); }
.ba input:focus-visible ~ .ba-line .ba-handle { outline: 3px solid var(--white); outline-offset: 2px; }
.ba-label { position: absolute; top: 14px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: rgba(30, 33, 36, .75); color: var(--white); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.ba-label.l { left: 14px; } .ba-label.r { right: 14px; background: var(--yellow-500); color: var(--charcoal-900); }
.ba-cap { margin-top: 12px; font-weight: 600; }

/* Floor finder */
.finder { max-width: 920px; margin: 0 auto; }
.finder-progress { height: 6px; border-radius: 99px; background: var(--stone-200); overflow: hidden; margin-bottom: 10px; }
.finder-progress span { display: block; height: 100%; width: 25%; background: var(--yellow-500); border-radius: inherit; transition: width .5s var(--ease); }
.finder-meta { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; color: var(--slate-500); margin-bottom: 22px; }
.finder-step { display: none; }
.finder-step.is-active { display: block; animation: stepIn .45s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.finder-step h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); }
.finder-step .hint { color: var(--slate-500); margin-top: -6px; }
.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 22px 0 28px; }
@media (min-width: 640px) { .opt-grid { grid-template-columns: repeat(3, 1fr); } }
.opt { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 12px; border: 1.5px solid #CFC8BB; border-radius: 14px; background: var(--white); font-weight: 600; text-align: center; transition: border-color .2s, background-color .2s, transform .2s var(--ease), box-shadow .2s; position: relative; }
.opt .icon { width: 34px; height: 34px; }
.opt small { font-weight: 400; color: var(--slate-500); font-size: .8rem; line-height: 1.35; }
.opt:hover { border-color: var(--charcoal-800); transform: translateY(-2px); }
.opt[aria-pressed="true"] { border-color: var(--charcoal-800); background: var(--yellow-100); box-shadow: inset 0 0 0 1px var(--charcoal-800); }
.opt[aria-pressed="true"]::after { content: ''; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--charcoal-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FEB724' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.finder-nav { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.finder-result { display: none; }
.finder-result.is-active { display: block; animation: stepIn .5s var(--ease); }
.result-hero { display: grid; gap: 24px; background: var(--charcoal-800); color: var(--cream-50); border-radius: var(--radius-lg); overflow: hidden; }
.result-hero .rh-img { aspect-ratio: 16 / 10; }
.result-hero .rh-img img { width: 100%; height: 100%; object-fit: cover; }
.result-hero .rh-body { padding: 0 24px 30px; }
@media (min-width: 768px) { .result-hero { grid-template-columns: 1fr 1fr; gap: 0; } .result-hero .rh-img { aspect-ratio: auto; min-height: 340px; } .result-hero .rh-body { padding: 36px; align-self: center; } }
.result-hero .eyebrow { color: var(--yellow-500); }
.result-hero p { color: #CED1D4; }
.result-hero .ticks { margin: 14px 0 24px; }
.runner-up { margin-top: 18px; display: grid; gap: 14px; }
@media (min-width: 640px) { .runner-up { grid-template-columns: 1fr 1fr; } }
.runner { background: var(--white); border-radius: var(--radius); padding: 20px 22px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; transition: box-shadow .3s; }
.runner:hover { box-shadow: var(--shadow); }
.runner .feature-ico { margin: 0; width: 52px; height: 52px; flex: none; }
.runner strong { display: block; font-size: 1.05rem; }
.runner small { color: var(--slate-500); }
.score-bar { height: 6px; background: var(--stone-200); border-radius: 9px; margin-top: 6px; overflow: hidden; width: 140px; }
.score-bar span { display: block; height: 100%; background: var(--yellow-500); }

/* Article */
.article-layout { display: grid; gap: 40px; }
@media (min-width: 1024px) { .article-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; } .article-aside { position: sticky; top: calc(var(--sticky-h) + 24px); } }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .875rem; color: #C9CCCF; margin-top: 4px; }
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-meta .icon { width: 16px; height: 16px; color: var(--yellow-500); }
.toc { background: var(--white); border-radius: var(--radius); padding: 22px; }
.toc h2 { font: 700 .8rem/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 12px; color: var(--slate-500); }
.toc ol { list-style: none; display: grid; gap: 2px; counter-reset: toc; }
.toc a { display: flex; gap: 10px; padding: 7px 0; text-decoration: none; font-weight: 600; font-size: .92rem; counter-increment: toc; }
.toc a::before { content: counter(toc, decimal-leading-zero); color: var(--yellow-600); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--ochre-700); }
.callout { background: var(--yellow-100); border-left: 4px solid var(--yellow-500); padding: 18px 20px; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.6em 0; }
.callout p:last-child { margin: 0; }
.callout strong { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.aside-cta { margin-top: 18px; }
.gcards { display: grid; gap: 22px; }
@media (min-width: 640px) { .gcards { grid-template-columns: repeat(2, 1fr); } }
.gcards.auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 1024px) { .gcards.g-4c { grid-template-columns: repeat(4, 1fr); } }
.gcard { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .3s, transform .3s var(--ease); }
.gcard:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.gcard-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.gcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gcard:hover .gcard-img img { transform: scale(1.05); }
.gcard-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gcard-body .pcard-tag { color: var(--ochre-700); }
.gcard h3 { margin: 0; font-size: 1.35rem; }
.gcard p { color: var(--ink-soft); font-size: .95rem; margin: 0 0 6px; }
.gcard .link-arrow { margin-top: auto; font-size: .9rem; }

/* Stat / trust row */
.trust-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 1024px) { .trust-row { grid-template-columns: repeat(4, 1fr); } }
.trust-item { border-top: 2px solid var(--yellow-500); padding-top: 16px; }
.trust-item strong { display: block; font: 400 clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem)/1.1 var(--f-display); margin-bottom: 6px; }
.trust-item span { font-size: .92rem; color: var(--ink-soft); }
.tone-dark .trust-item span { color: #C9CCCF; }

/* Search page */
.search-page-form { display: flex; gap: 10px; max-width: 640px; margin-bottom: 28px; }
.search-page-form input { flex: 1; min-height: 54px; border-radius: 999px; border: 1.5px solid #CFC8BB; padding: 0 22px; background: var(--white); font-size: 1rem; }
.search-page-form input:focus { outline: none; border-color: var(--charcoal-800); box-shadow: 0 0 0 3px var(--yellow-300); }
.sresults { list-style: none; display: grid; gap: 12px; max-width: 820px; }
.sresults a { display: flex; gap: 16px; align-items: center; background: var(--white); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; transition: box-shadow .3s; }
.sresults a:hover { box-shadow: var(--shadow); }
.sresults .sr-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--stone-100); display: grid; place-items: center; flex: none; }
.sresults strong { display: block; font-size: 1.05rem; }
.sresults small { color: var(--slate-500); }

/* Brand page */
.swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 768px) { .swatches { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .swatches { grid-template-columns: repeat(6, 1fr); } }
.sw { border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: 0 1px 0 var(--line); }
.sw span { display: block; height: 96px; }
.sw div { padding: 12px 14px; font-size: .85rem; }
.sw strong { display: block; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.icon-cell { background: var(--white); border-radius: 10px; padding: 18px 8px 12px; text-align: center; font-size: .72rem; color: var(--slate-500); }
.icon-cell .icon { width: 34px; height: 34px; margin: 0 auto 10px; color: var(--charcoal-800); }
.logo-tiles { display: grid; gap: 16px; }
@media (min-width: 768px) { .logo-tiles { grid-template-columns: repeat(2, 1fr); } }
.logo-tile { border-radius: var(--radius); padding: 40px 28px; display: grid; place-items: center; min-height: 220px; position: relative; }
.logo-tile img { max-height: 120px; width: auto; }
.logo-tile a { position: absolute; bottom: 6px; right: 10px; font-size: .78rem; font-weight: 600; padding: 12px 6px; }

/* Legal */
.legal .prose h2 { font-size: 1.5rem; }
.legal-note { background: var(--yellow-100); border-radius: var(--radius); padding: 14px 18px; font-size: .9rem; margin-bottom: 28px; }

/* 12. Footer ------------------------------------------------------------- */
.site-footer { position: relative; overflow: hidden; background: var(--charcoal-900); color: #D5D8DB; padding-top: clamp(52px, 6vw, 84px); }
.footer-mark { width: clamp(260px, 30vw, 420px); left: clamp(-150px, -6vw, -60px); bottom: clamp(-150px, -7vw, -80px); color: var(--charcoal-700); opacity: .9; }
.footer-grid { position: relative; z-index: 1; display: grid; gap: 34px 24px; grid-template-columns: 1fr 1fr; }
.f-brand { grid-column: 1 / -1; }
.footer-logo { width: 190px; height: auto; margin-bottom: 14px; }
.f-brand p { font-size: .92rem; max-width: 34ch; color: #AEB2B6; }
.f-title { font: 700 1rem/1.3 var(--f-display); font-size: 1.15rem; color: var(--cream-50); margin-bottom: 14px; letter-spacing: 0; }
.f-col ul { list-style: none; display: grid; gap: 9px; }
@media (max-width: 1023px) { .f-col ul { gap: 0; } .f-col ul:not(.f-social) a { display: inline-flex; align-items: center; min-height: 44px; } }
.f-col a { color: #D5D8DB; text-decoration: none; font-size: .94rem; transition: color .2s; }
.f-col a:hover { color: var(--yellow-500); }
.f-social { display: flex !important; gap: 10px !important; margin-bottom: 16px; }
.f-social a { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #4A5056; display: grid; place-items: center; transition: border-color .2s, background-color .2s, color .2s; }
.f-social a:hover { border-color: var(--yellow-500); background: var(--yellow-500); color: var(--charcoal-900); }
.f-contact a { display: inline-flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.f-contact .icon { width: 18px; height: 18px; color: var(--yellow-500); }
.f-callback { grid-column: 1 / -1; }
.f-callback p { font-size: .92rem; color: #AEB2B6; }
.cb-field { display: flex; align-items: center; background: var(--white); border-radius: 8px; padding-left: 14px; color: var(--charcoal-800); }
.cb-field input { flex: 1; min-width: 0; height: 50px; border: 0; background: transparent; padding: 0 10px; font-size: .95rem; color: var(--charcoal-800); }
.cb-field input:focus { outline: none; }
.cb-field:focus-within { box-shadow: 0 0 0 3px var(--yellow-500); }
.cb-field button { width: 50px; height: 50px; display: grid; place-items: center; background: var(--yellow-500); color: var(--charcoal-900); border-radius: 0 8px 8px 0; transition: background-color .2s; }
.cb-field button:hover { background: var(--yellow-300); }
.cb-field.has-error { box-shadow: 0 0 0 2px #FF8A80; }
.f-small { font-size: .78rem !important; margin-top: 10px; color: #8F959A !important; }
.f-small a { color: #C9CCCF; }
.footer-base { position: relative; z-index: 1; margin-top: clamp(40px, 5vw, 64px); padding-block: 22px 28px; border-top: 1px solid #353A3F; display: grid; gap: 16px; justify-items: center; text-align: center; font-size: .85rem; color: #8F959A; }
.footer-base p { margin: 0; }
.f-trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; color: #C9CCCF; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.f-trust li { display: inline-flex; align-items: center; gap: 8px; }
.f-trust .icon { width: 20px; height: 20px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } .f-callback { grid-column: span 2; } }
@media (min-width: 1200px) { .footer-grid { grid-template-columns: 1.25fr repeat(4, 1fr) 1.45fr; } .f-brand, .f-callback { grid-column: auto; } .footer-base { grid-template-columns: 1fr auto; justify-items: start; text-align: left; } .f-trust { justify-content: flex-start; } }

/* Mobile quick bar */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)); background: rgba(30, 33, 36, .96); backdrop-filter: blur(8px); transform: translateY(110%); transition: transform .35s var(--ease); }
.mobile-bar.is-visible { transform: none; }
.mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px; font-weight: 700; font-size: .95rem; text-decoration: none; }
.mobile-bar .icon { width: 20px; height: 20px; }
.mb-call { border: 1.5px solid #5A6066; color: var(--cream-50); }
.mb-visit { background: var(--yellow-500); color: var(--charcoal-900); }
.mb-visit .icon { --ia: var(--charcoal-900); }
@media (max-width: 767px) { .f-contact a { align-items: flex-start; } .f-contact .icon { margin-top: 3px; } }
@media (min-width: 768px) { .mobile-bar { display: none; } }

/* 13. Intro & page transition -------------------------------------------- */
.intro, .pt { display: none; }
html.intro-play body { overflow: hidden; }
html.intro-play .intro { display: block; position: fixed; inset: 0; z-index: 3000; }
.intro::before { content: ''; position: absolute; inset: 0; background: var(--yellow-500); z-index: 0; }
.intro-inner { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: var(--charcoal-800); }
.intro-logo { width: min(300px, 64vw); height: auto; overflow: visible; }
.intro .plank { opacity: 0; }
.intro .plank-0 { animation: plankIn0 .8s cubic-bezier(.2, .8, .2, 1) .15s forwards; }
.intro .plank-1 { animation: plankIn1 .8s cubic-bezier(.2, .8, .2, 1) .38s forwards; }
.intro .logo-type { opacity: 0; animation: typeIn .7s var(--ease) .75s forwards; }
.intro .logo-tag { opacity: 0; animation: fadeIn .6s var(--ease) 1.1s forwards; }
html.intro-play .intro-inner { animation: introLift .75s cubic-bezier(.7, 0, .2, 1) 1.9s forwards; }
html.intro-play .intro::before { animation: introLift .75s cubic-bezier(.7, 0, .2, 1) 2.02s forwards; }
html.intro-skip .intro-inner { animation: introLift .5s cubic-bezier(.7, 0, .2, 1) forwards !important; }
html.intro-skip .intro::before { animation: introLift .5s cubic-bezier(.7, 0, .2, 1) .08s forwards !important; }
@keyframes plankIn0 { from { opacity: 0; transform: translate(-210px, 140px); } to { opacity: 1; transform: none; } }
@keyframes plankIn1 { from { opacity: 0; transform: translate(210px, 140px); } to { opacity: 1; transform: none; } }
@keyframes typeIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes introLift { to { transform: translateY(-100%); } }

.pt { position: fixed; inset: 0; z-index: 2900; background: var(--charcoal-800); place-items: center; }
.pt::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--yellow-500); }
.pt-mark { width: 58px; height: 60px; fill: var(--yellow-500); overflow: visible; }
html.pt-out .pt { display: grid; animation: ptCover .42s cubic-bezier(.7, 0, .3, 1) forwards; }
html.pt-out .pt-mark .plank-0 { animation: plankIn0 .5s cubic-bezier(.2, .8, .2, 1) .05s both; }
html.pt-out .pt-mark .plank-1 { animation: plankIn1 .5s cubic-bezier(.2, .8, .2, 1) .15s both; }
html.pt-in .pt { display: grid; animation: ptReveal .55s cubic-bezier(.7, 0, .2, 1) .08s forwards; }

@keyframes ptCover { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ptReveal { from { transform: none; } to { transform: translateY(-100%); } }


/* 14. Motion & utilities ---------------------------------------------------- */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
html.js .reveal.is-visible, html.reveal-fallback .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html.js .reveal { opacity: 1; transform: none; }
}
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-lg { margin-top: clamp(28px, 3vw, 44px); }
.text-center { text-align: center; }
.center-row { display: flex; justify-content: center; margin-top: 32px; }

@media (min-width: 480px) { .announce p { font-size: .8125rem; } }

/* Tablet refinements (640–1023): calmer hero crop, no orphaned cards in two-column grids */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero-media { aspect-ratio: 16 / 9; }
  .page-hero-media { aspect-ratio: 21 / 9; }
  .ocards > :last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
  .rcards > .rcard:last-child:nth-child(odd), .gcards > .gcard:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
  .rcards > .rcard:last-child:nth-child(odd) .rcard-img, .gcards > .gcard:last-child:nth-child(odd) .gcard-img { flex: 0 0 48%; aspect-ratio: auto; min-height: 260px; }
  .rcards > .rcard:last-child:nth-child(odd) .rcard-img img, .gcards > .gcard:last-child:nth-child(odd) .gcard-img img { position: absolute; inset: 0; }
  .gcards > .gcard:last-child:nth-child(odd) .gcard-img { position: relative; }
}

/* Desktop: media fills its column without its own height driving the row */
@media (min-width: 1024px) {
  .hero-media, .page-hero-media, .split-img { position: relative; min-height: 100%; }
  .hero-media > img, .page-hero-media > img, .split-img > img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .page-hero { min-height: clamp(420px, 36vw, 560px); }
  .split { min-height: clamp(480px, 38vw, 620px); }
}

/* Focus rings stay visible on yellow surfaces */
.btn-yellow:focus-visible, .nav-cta > .top-level:focus-visible, .mb-visit:focus-visible, .cta-yellow :focus-visible, .announce :focus-visible, .cb-field button:focus-visible, .tone-yellow :focus-visible { outline-color: var(--charcoal-900); }

/* Inactive announcement messages are not focusable */
html.js .announce p:not(.is-active):not(.is-leaving) { visibility: hidden; }

/* 404 */
.page-hero.nf { min-height: 62vh; place-items: center; }
.nf-body { position: relative; z-index: 1; text-align: center; padding-block: clamp(64px, 10vw, 120px); }
.nf-body .eyebrow, .nf-body .btn-row { justify-content: center; }
.nf-body .lede { margin: 0 auto 28px; }

/* =====================================================================
   v2 refinements: CTA spacing, mobile density, stacking order
   ===================================================================== */

/* CTA spacing — buttons sit 12px apart; a text CTA after a button sits 24px away */
.btn-row, .cta-actions, .rcard-actions { column-gap: 12px; row-gap: 12px; }
.btn ~ .link-arrow, .btn ~ .hero-call, .btn ~ .cta-phone { margin-inline-start: 12px; }
@media (max-width: 639px) {
  .btn-row, .cta-actions { flex-direction: column; align-items: stretch; row-gap: 8px; }
  .btn-row > .btn, .cta-actions > .btn { width: 100%; }
  .btn ~ .link-arrow, .btn ~ .hero-call, .btn ~ .cta-phone { margin-inline-start: 0; }
  .hero .btn-row { align-items: center; }
  .hero .hero-call, .cta-phone { justify-content: center; }
  .rcard-actions { column-gap: 20px; }
  .rcard-actions .btn ~ .link-arrow { margin-inline-start: 0; }
}

/* Stacking: decorative marks always sit beneath content */
.page-hero > .mark-bg { z-index: 0; }
.page-hero-body, .cta-inner, .split-body, .nf-body { position: relative; z-index: 1; }
.hero-media .mark-bg, .page-hero-media .mark-bg { z-index: 1; }
.hero-pin { z-index: 2; }

/* Mobile density */
@media (max-width: 639px) {
  .hero-media { aspect-ratio: 16 / 11; }
  .split-img { aspect-ratio: 16 / 10; }
  .rcard-img { aspect-ratio: 16 / 10; }
  .rcard-body { padding: 18px 18px 20px; }

  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .features .feature { padding: 0; }
  .features .feature-ico { width: 52px; height: 52px; margin-bottom: 12px; }
  .features .feature-ico .icon { width: 25px; height: 25px; }
  .features .feature h3 { font-size: .95rem; }
  .features .feature p { font-size: .85rem; line-height: 1.5; }

  .steps { gap: 12px; }
  .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 18px 44px 18px 16px; }
  .step .feature-ico { grid-row: span 2; width: 48px; height: 48px; margin: 0; }
  .step h3 { margin-bottom: .2em; }
  .step::before { font-size: 2rem; right: 14px; top: 10px; }

  .gcards:not(.g-4c) .gcard, .gcards.g-4c .gcard { flex-direction: row; }
  .gcard .gcard-img { flex: 0 0 36%; aspect-ratio: auto; min-height: 140px; position: relative; }
  .gcard .gcard-img img { position: absolute; inset: 0; }
  .gcard-body { padding: 14px 14px 12px; gap: 4px; }
  .gcard h3 { font-size: 1.1rem; }
  .gcard p { font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .gcard .link-arrow { font-size: .85rem; min-height: 36px; }
  .gcard .pcard-tag { font-size: .66rem; }


  .picks { gap: 12px; }
  .pick { padding: 18px 18px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
  .pick::before { grid-row: span 3; font-size: 2rem; }
  .pick h3 { margin-top: 0; }

  .runner-up { grid-template-columns: 1fr 1fr; gap: 10px; }
  .runner { flex-direction: column; align-items: flex-start; padding: 16px; gap: 10px; }
  .runner .feature-ico { width: 44px; height: 44px; }
  .runner strong { font-size: .95rem; }
  .runner small { font-size: .78rem; }
  .score-bar { width: 100%; }

  .compare-card { padding: 20px 18px; }
  .trust-row { gap: 18px 14px; }
  .area-group { padding: 18px; }
  .sec-head .btn-sm { padding: .45em 1em; font-size: .82rem; }
}
@media (min-width: 360px) and (max-width: 639px) {
  .choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .choice span { padding: 12px 6px; font-size: .8rem; gap: 6px; }
  .choice span .icon { width: 24px; height: 24px; }
}
/* Footer: logo and intro left-aligned at every size */
.f-brand { text-align: left; }
.footer-logo { display: block; width: 200px; }

/* Gallery captions never block taps on the photo */
.gitem figcaption, .gitem .zoom { pointer-events: none; }

/* ---- v2 audit fixes ---- */
.sec-head { flex-wrap: wrap; row-gap: 12px; }
.sec-head .btn { white-space: nowrap; flex-shrink: 0; }
[tabindex="-1"]:focus { outline: none; }
.result-hero .ticks .icon { color: var(--yellow-500); }
.score-bar { display: block; }
.pcard-tag { display: inline-flex; align-items: center; gap: 6px; }
.pcard-tag .icon { width: 14px; height: 14px; }
#ranges { padding-top: clamp(36px, 3vw + 12px, 64px); }
.footer-base { justify-items: start; text-align: left; }
.f-trust { justify-content: flex-start; }
.f-contact a { line-height: 1.4; }
@media (max-width: 639px) {
  .btn { padding-inline: 1.25em; }
  .pick { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .rcard { display: grid; grid-template-columns: 38% minmax(0, 1fr); }
  .rcard .rcard-img { aspect-ratio: auto; min-height: 100%; position: relative; }
  .rcard .rcard-img img { position: absolute; inset: 0; }
  .rcard .price-pill { left: 8px; top: 8px; font-size: .7rem; padding: 4px 8px; }
  .rcard-body { padding: 14px 14px 16px; }
  .rcard h3 { font-size: 1.15rem; }
  .rcard p { font-size: .85rem; line-height: 1.5; margin-bottom: .7em; }
  .rcard-best { font-size: .8rem; margin-bottom: 10px; }
  .rcard-best .icon { display: none; }
  .rcard-actions .link-arrow { display: none; }
  .rcard-actions .btn { width: 100%; min-height: 42px; }
  details.spec-toggle summary { font-size: .82rem; }
  .specs { font-size: .78rem; }
}

/* Footer: watermark sits below the brand copy; divider aligns with content */
.footer-mark { width: clamp(240px, 26vw, 380px); left: clamp(-140px, -6vw, -60px); bottom: clamp(-230px, -13vw, -140px); color: #2A2E32; opacity: 1; }
.footer-base { border-top: 0; position: relative; }
.footer-base::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid #353A3F; }
@media (min-width: 768px) { .features:not(.f-3) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } }

/* Menu thumbnails fade in once loaded instead of popping */
.menu-card img { opacity: 1; transition: opacity .3s ease, transform .6s var(--ease); }
.menu-card img:not([src]) { opacity: 0; }

/* =====================================================================
   No sideways-scrolling card rows: every card section fits the screen
   ===================================================================== */
@media (max-width: 1023px) {
  /* Circle rows wrap and centre instead of scrolling */
  .circles { display: flex; flex-wrap: wrap; justify-content: center; overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; gap: 22px 12px; }
  .circles li { width: calc((100% - 24px) / 3); flex: 0 0 auto; }
  .circle-img { margin-bottom: 10px; }
  .circle-label { font-size: .75rem; }
  /* Recent projects: a grid, never a scroller */
  .pcards { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; padding-bottom: 0; gap: 14px; }
  .pcard-body p { font-size: 1.05rem; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .circles li { width: calc((100% - 36px) / 4); }
  .icards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 639px) {
  /* Our flooring: one wide feature card, two below */
  .ocards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ocard { aspect-ratio: 4 / 5; }
  .ocard:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .ocard-body { padding: 14px; gap: 4px; }
  .ocard-title { font-size: .95rem; }
  .ocard-sub { font-size: .76rem; line-height: 1.4; }
  .ocard:first-child .ocard-title { font-size: 1.15rem; }
  .ocard:first-child .ocard-sub { font-size: .85rem; }
  .ocard-cta { font-size: .8rem; }
  /* Inspiration and recent projects: compact image-left rows */
  .icards { gap: 14px; }
  .icard { display: grid; grid-template-columns: 38% minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .icard-img { grid-row: span 2; margin: 0; aspect-ratio: 1; }
  .icard h3 { align-self: end; font-size: .9rem; margin: 0 0 4px; }
  .icard p { align-self: start; font-size: .85rem; line-height: 1.45; }
  .pcards { grid-template-columns: 1fr; gap: 12px; }
  .pcard { flex-direction: row; }
  .pcard-img { flex: 0 0 38%; aspect-ratio: auto; min-height: 132px; position: relative; }
  .pcard-img img { position: absolute; inset: 0; }
  .pcard-body { padding: 14px 16px; align-content: center; }
  .pcard-body p { font-size: 1rem; }
  .pcard-body .link-arrow { min-height: 32px; margin-top: 4px; font-size: .82rem; }
}
/* Reviews on phones: stacked cards, three shown, rest on request */
.reviews-more { display: none; }
@media (max-width: 1023px) {
  .carousel-track { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; scroll-snap-type: none; gap: 12px; padding: 0; }
  .carousel-ui { display: none; }
  .carousel-track:not(.show-all) > .review:nth-child(n + 4) { display: none; }
  .review { min-height: 0; padding: 22px 20px; }
  .reviews-more { display: flex; margin: 18px auto 0; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .carousel-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .carousel-track:not(.show-all) > .review:nth-child(4) { display: flex; }
}

@media (max-width: 639px) { .ocard::after { background: linear-gradient(180deg, rgba(20, 22, 24, 0) 25%, rgba(20, 22, 24, .86) 100%); } }