@font-face{font-family:'Poppins';font-weight:300;font-style:normal;font-display:swap;src:url(fonts/mb-font-1.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/mb-font-2.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/mb-font-3.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/mb-font-4.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/mb-font-5.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/mb-font-6.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/mb-font-7.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/mb-font-8.woff2) format('woff2')}
/* Arctic Spas Ontario showroom sites.
   One visual system (design review S2): the builder's rounded pills and cards, #8's fonts and line icons,
   on the V1 brief's warm off-white ground with charcoal type. */
:root {
  --snow: #f7f6f5;        /* warm off-white ground */
  --paper: #ffffff;       /* raised surfaces: cards, forms, the builder */
  --alt: #e8e5e1;         /* alternate warm section */
  --ink: #393939;         /* charcoal text */
  --mist: #5c5c52;        /* secondary text: 5.4:1 on --alt, 6.2:1 on --snow (S5) */
  --line: #d4d0c8;        /* hairlines and input borders */
  --glacier: #1a1a18;     /* primary action (solid charcoal) */
  --glacier-ink: #f7f6f5; /* text on action */
  --glacier-soft: #ecebe7;/* image wells and soft surfaces */
  --cedar: #8a6446;       /* warm wood accent */
  --sage: #9fa694;        /* footer */
  --sage-ink: #1c1c1a;
  --ok: #2f6f0a;
  --warn: #8a5200;
  --err: #b3261e;
  --night: #1c1c1a;
  --night-fg: #f7f6f5;
  --night-mute: #c4c1b9;  /* 9:1 on --night */
  --night-accent: #e6cfb1;

  /* Fonts from builder #8: Poppins display, Barlow body, Barlow Semi Condensed for numbers */
  --f-display: "Poppins", -apple-system, system-ui, sans-serif;
  --f-body: "Barlow", -apple-system, system-ui, sans-serif;
  --f-data: "Barlow Semi Condensed", "Barlow", sans-serif;

  /* One type scale (S4): 12 / 14 / 17 / 22 / 30 / 44, hero up to 60. Nothing below 12px. */
  --t-xs: 0.75rem; --t-sm: 0.875rem; --t-md: 1.0625rem; --t-lg: 1.375rem; --t-xl: 1.875rem; --t-2xl: 2.75rem;
  --t-hero: clamp(2.75rem, calc(2.2rem + 2.2vw), 3.75rem);

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 3.5rem;
  /* Rounded everywhere (Lisa, 2026-10-04; S2): pill buttons and chips, 12px cards and panels, 8px fields and wells */
  --r-sm: 8px; --r-md: 12px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06);
  --gutter: 20px;
  --max: 1260px;
  --bar-h: 68px;
  --head-h: 60px;
  color-scheme: light;
}
@media (min-width: 700px) { :root { --gutter: 32px; } }
@media (min-width: 1000px) { :root { --s-8: 6rem; --gutter: 48px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --snow: #1c1c1a; --paper: #262624; --alt: #2c2c29; --ink: #ecebe7; --mist: #b5b2a9; --line: #3d3c38;
    --glacier: #f7f6f5; --glacier-ink: #1a1a18; --glacier-soft: #2f2f2c;
    --cedar: #c99a74; --sage: #3f4339; --sage-ink: #ecebe7; --ok: #8fcf6b; --warn: #e2b04a; --err: #ff8a80;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --snow: #1c1c1a; --paper: #262624; --alt: #2c2c29; --ink: #ecebe7; --mist: #b5b2a9; --line: #3d3c38;
  --glacier: #f7f6f5; --glacier-ink: #1a1a18; --glacier-soft: #2f2f2c;
  --cedar: #c99a74; --sage: #3f4339; --sage-ink: #ecebe7; --ok: #8fcf6b; --warn: #e2b04a; --err: #ff8a80;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); }
body { margin: 0; background: var(--snow); color: var(--ink); overflow-x: clip; font-family: var(--f-body); font-size: var(--t-md); line-height: 1.5; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 500; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--glacier); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
/* A quiet sentence-case label, used sparingly (S6 retired the spaced-caps label over every section) */
.eyebrow { font-size: var(--t-sm); font-weight: 600; color: var(--cedar); }
.display { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
.h2 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-xl); line-height: 1.12; letter-spacing: -0.015em; }
@media (min-width: 900px) { .h2 { font-size: var(--t-2xl); line-height: 1.06; } }
.lede { color: var(--mist); font-size: var(--t-md); line-height: 1.5; max-width: 36rem; }
.section { padding-block: var(--s-8); }
.section-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.photo { display: block; width: 100%; max-width: 100%; object-fit: cover; background: var(--glacier-soft); border-radius: var(--r-md); }

/* Buttons: pills, sentence case */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: 0 22px;
  border-radius: var(--r-pill); border: 1px solid transparent; font: 600 var(--t-md)/1 var(--f-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary { background: var(--glacier); color: var(--glacier-ink); }
.btn-primary:hover { opacity: .88; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--snow); }
.btn-light { background: var(--night-fg); color: var(--night); }
.btn-light:hover { opacity: .9; }
.btn-outline-light { background: transparent; color: var(--night-fg); border-color: rgba(247,246,245,.6); }
.btn-outline-light:hover { background: var(--night-fg); color: var(--night); }
.btn-block { width: 100%; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: var(--t-sm); }
.link-arrow { display: inline-flex; gap: .4em; align-items: center; font-weight: 600; font-size: var(--t-md); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.link-arrow::after { content: "→"; text-decoration: none; transition: transform .15s; }
.link-arrow:hover::after { transform: translateX(3px); }
.text-link { border: 0; background: none; padding: 0 2px; min-height: 44px; font: 600 var(--t-sm) var(--f-body); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* Header: menu + home | centred logo | search, account, cart */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-2); height: var(--head-h); }
.header-side { display: flex; align-items: center; gap: 2px; margin-inline-start: -10px; }
.header-side.end { justify-content: flex-end; margin-inline: 0 -10px; }
.header-side .header-home, .header-side .header-account { display: none; }
.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; }
.brand img { display: block; height: 44px; width: auto; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-pill); border: 0; background: transparent; color: inherit; cursor: pointer; text-decoration: none; }
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
@media (min-width: 900px) {
  :root { --head-h: 76px; }
  .brand img { height: 54px; }
  .header-side .header-home, .header-side .header-account { display: grid; }
  .header-side { gap: var(--s-3); }
}

/* Model search */
.search { position: fixed; inset: 0; z-index: 60; background: var(--snow); display: flex; flex-direction: column; overflow-y: auto; padding-top: env(safe-area-inset-top, 0px); }
.search-top { display: flex; align-items: center; gap: var(--s-2); padding-block: var(--s-3); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--snow); }
.search-field { flex: 1; display: flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); }
.search-field svg { width: 20px; height: 20px; flex: none; color: var(--mist); }
.search-field input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.search-results { list-style: none; margin: 0; padding-block: var(--s-2) var(--s-6); display: grid; }
.search-results a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.search-results b { font-family: var(--f-display); font-weight: 500; font-size: var(--t-md); }
.search-results span { font-size: var(--t-sm); color: var(--mist); text-align: right; }
.search-empty { padding-block: var(--s-4); }
@media (min-width: 900px) { .search { inset: 0 0 auto; max-height: 80vh; box-shadow: 0 20px 40px rgba(0,0,0,.12); } .search-top, .search-results, .search-empty { max-width: 760px; } }

/* Menu: full screen on phones, a left drawer from 700px */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--snow); padding: calc(env(safe-area-inset-top, 0px) + var(--s-4)) var(--gutter) var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); overflow-y: auto; }
.menu-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.35); display: none; }
@media (min-width: 700px) { .menu { right: auto; width: 440px; box-shadow: 0 0 40px rgba(0,0,0,.18); } .menu-scrim { display: block; } }
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu-top .brand img { height: 46px; }
.menu-links { display: grid; gap: var(--s-1); }
.menu-links a { font-family: var(--f-display); font-weight: 500; font-size: var(--t-xl); text-decoration: none; padding-block: var(--s-1); }
.menu-locs { display: grid; gap: var(--s-2); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.menu-locs a { text-decoration: none; display: flex; justify-content: space-between; padding-block: var(--s-2); }
.menu-locs .current { font-weight: 600; }

/* Hero (H1): the tub photo leads. Phones: photo on top, copy below on the night band.
   Desktop: full-bleed photo with the copy over a left-side shade. */
.hero { position: relative; background: var(--night); color: var(--night-fg); isolation: isolate; overflow: hidden; }
.hero-media { position: relative; aspect-ratio: 4 / 3; max-height: 52svh; width: 100%; }
.hero-media .photo { position: absolute; inset: 0; height: 100%; border-radius: 0; object-position: 50% 62%; }
.hero-media::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(180deg, transparent, var(--night)); }
.hero-inner { position: relative; display: grid; gap: var(--s-4); padding-block: 0 var(--s-6); margin-top: -28px; }
.hero-tabs { display: inline-flex; gap: 2px; padding: 3px; width: max-content; max-width: 100%; border-radius: var(--r-pill); background: rgba(28,28,26,.72); border: 1px solid rgba(247,246,245,.2); backdrop-filter: blur(6px); }
.hero-tabs button { border: 0; background: transparent; color: var(--night-fg); font: 600 var(--t-sm)/1 var(--f-body); min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); cursor: pointer; }
.hero-tabs button[aria-selected="true"] { background: var(--night-fg); color: var(--night); }
.hero-copy { display: grid; gap: var(--s-3); max-width: 34rem; }
.hero-loc { font-size: var(--t-sm); font-weight: 600; color: var(--night-accent); }
.hero h1 { font-size: var(--t-2xl); }
.hero-lede { color: var(--night-mute); font-size: var(--t-md); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-2); }
.hero-model { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid rgba(247,246,245,.18); text-decoration: none; font-size: var(--t-sm); color: var(--night-mute); }
.hero-model b { font-family: var(--f-display); font-weight: 500; font-size: var(--t-md); color: var(--night-fg); margin-right: 6px; }
.hero-model .go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--night-fg); white-space: nowrap; }
.hero-model .go svg { width: 18px; height: 18px; }
@media (min-width: 900px) {
  .hero { min-height: min(calc(100svh - var(--head-h)), 760px); display: grid; align-items: end; }
  .hero-media { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; height: 100%; z-index: -1; }
  .hero-media .photo { object-position: 70% 60%; }
  .hero-media::after { inset: 0; height: auto; background: linear-gradient(90deg, rgba(20,20,18,.82) 0%, rgba(20,20,18,.55) 38%, rgba(20,20,18,0) 68%), linear-gradient(0deg, rgba(20,20,18,.5), transparent 40%); }
  .hero-inner { margin-top: 0; padding-block: var(--s-8) var(--s-7); gap: var(--s-5); }
  .hero h1 { font-size: var(--t-hero); }
}

/* Rails with arrows and a "1 of N" count (H2) */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding-bottom: var(--s-2); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .rail { grid-auto-columns: 44%; } }
@media (min-width: 1100px) { .rail { grid-auto-columns: calc((100% - 3 * var(--s-4)) / 3.3); } }
.rail-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.rail-nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-3); }
.rail-count { font-family: var(--f-data); font-size: var(--t-sm); color: var(--mist); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: center; }
.rail-arrow { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; padding: 0; }
.rail-arrow svg { width: 20px; height: 20px; }
.rail-arrow:hover:not(:disabled) { border-color: var(--ink); }
.rail-arrow:disabled { opacity: .35; cursor: default; }

/* Model card (A1, A2): same image box for every model, same rows, a clear next step */
.model-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.model-card:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.model-card .stage { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--s-3); background: var(--glacier-soft); }
/* absolutely placed so a render's own size can never stretch the 4:3 box (A1) */
.model-card .stage > img, .model-card .stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; padding: var(--s-3); object-fit: contain; }
.model-card .stage .photo { position: absolute; inset: 0; object-fit: cover; border-radius: 0; }
.model-card .stage .badge { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 1; }
.model-card .body { display: flex; flex-direction: column; gap: 6px; padding: var(--s-4); }
.model-card .title-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-3); }
.model-card h3 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-lg); line-height: 1.15; }
.model-card .series { font-size: var(--t-xs); color: var(--mist); white-space: nowrap; }
.model-card .spec-line { font-family: var(--f-data); font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.model-card .best { font-size: var(--t-sm); color: var(--mist); }
.model-card .best span { font-weight: 600; color: var(--ink); }
.model-card .price-cue { font-size: var(--t-sm); color: var(--mist); }
/* A2: models on this showroom's floor (locations.json → floor) */
.model-card .in-store { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-weight: 600; color: var(--ok); }
.model-card .in-store::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.model-card .card-cta { margin-top: auto; padding-top: var(--s-2); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-sm); }
.model-card .card-cta svg { width: 18px; height: 18px; transition: transform .15s; }
.model-card:hover .card-cta svg { transform: translateX(3px); }
.model-card.compact .body { padding: var(--s-3); }
.badge { font-size: var(--t-xs); font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.badge.cedar { background: var(--ink); color: var(--snow); border-color: var(--ink); }

/* Collection page */
.page-head { padding-block: var(--s-6) var(--s-4); display: grid; gap: var(--s-3); }
.page-head h1 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-xl); line-height: 1.1; letter-spacing: -0.015em; }
@media (min-width: 900px) { .page-head h1 { font-size: var(--t-2xl); } }
.crumbs { font-size: var(--t-sm); color: var(--mist); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.crumbs a { text-decoration: none; }
.filterbar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--head-h)); z-index: 30; background: var(--snow); border-bottom: 1px solid var(--line); }
/* A3: three type chips and one Filter button, never wider than the screen */
.filter-row { display: flex; align-items: center; gap: 6px; padding-block: var(--s-3); overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.fchip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 13px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: 600 var(--t-sm)/1 var(--f-body); cursor: pointer; white-space: nowrap; }
.fchip[aria-pressed="true"], .fchip.radio:has(input:checked) { background: var(--ink); color: var(--snow); border-color: var(--ink); }
.fchip svg { width: 18px; height: 18px; }
.fchip.radio input { position: absolute; opacity: 0; pointer-events: none; }
.fchip.radio:has(input:focus-visible) { outline: 2px solid var(--glacier); outline-offset: 2px; }
.filter-open { margin-left: auto; }
@media (max-width: 374px) { .filter-row .fchip { padding: 0 11px; } .filter-open > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } /* icon + count only on small phones; the word stays for screen readers */
.filter-n { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--r-pill); background: var(--ink); color: var(--snow); font-size: var(--t-xs); }
.result-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding-block: var(--s-4); font-size: var(--t-sm); color: var(--mist); }
.grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid > [data-group] { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
.group-title { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--s-3); padding-top: var(--s-4); }
.group-title h2 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-lg); }
.group-count { font-size: var(--t-sm); color: var(--mist); }
.empty { grid-column: 1 / -1; padding: var(--s-7) 0; text-align: center; color: var(--mist); display: grid; gap: var(--s-3); justify-items: center; }
@media (max-width: 639px) {
  .page-all .model-card .body { padding: var(--s-3); gap: 4px; }
  .page-all .model-card .title-row { flex-direction: column; align-items: start; gap: 0; }
  .page-all .model-card h3 { font-size: var(--t-md); }
  .page-all .model-card .spec-line { font-size: var(--t-sm); }
  .page-all .model-card .best { display: none; }
  .page-all .model-card .price-cue { font-size: var(--t-xs); }
  .page-all .model-card .stage > img, .page-all .model-card .stage > svg { padding: var(--s-2); }
  .page-all .model-card .badge { top: 8px; left: 8px; padding: 3px 8px; }
}

/* Bottom sheet (filters) */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(5,10,12,.5); z-index: 70; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; background: var(--paper); border-radius: 20px 20px 0 0; padding: var(--s-3) var(--gutter) 0; max-height: 88svh; overflow-y: auto; display: grid; gap: var(--s-4); box-shadow: 0 -10px 40px rgba(0,0,0,.2); }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); justify-self: center; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet-head h2 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-lg); }
.sheet-group { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.sheet-group legend { font-weight: 600; font-size: var(--t-sm); margin-bottom: var(--s-2); padding: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sheet-actions { position: sticky; bottom: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--line); }
@media (min-width: 700px) { .sheet { left: 50%; right: auto; width: 560px; transform: translateX(-50%); bottom: 24px; border-radius: 20px; } }

/* Feature lists */
.feature-list { display: grid; gap: var(--s-5); }
@media (min-width: 800px) { .feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature { display: grid; gap: var(--s-2); align-content: start; border-top: 1px solid var(--line); padding-top: var(--s-4); }
.feature .num { font-family: var(--f-data); font-weight: 600; font-size: var(--t-md); color: var(--cedar); }
.feature h3 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-lg); line-height: 1.2; }
.feature p { color: var(--mist); }

.band-cedar { background: var(--alt); }
.band-dark { background: var(--night); color: var(--night-fg); }
.band-dark .lede, .band-dark .feature p { color: var(--night-mute); }
.band-dark .feature { border-top-color: rgba(247,246,245,.18); }
.band-dark .feature .num { color: var(--night-accent); }
.band-dark .eyebrow { color: var(--night-accent); }
.why-photo { aspect-ratio: 3 / 2; margin-bottom: var(--s-6); }
@media (min-width: 900px) { .why-photo { aspect-ratio: 21 / 9; } }
.split-media { min-width: 0; }
.split-media .photo { aspect-ratio: 3 / 2; }
@media (min-width: 900px) { .split-media .photo { aspect-ratio: 4 / 5; } }

/* Model finder (H4) */
.finder { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); display: grid; gap: var(--s-5); }
.finder fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.finder legend { font-weight: 600; margin-bottom: var(--s-2); padding: 0; }
.seg { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: var(--r-pill); border: 1px solid var(--line); cursor: pointer; font-size: var(--t-sm); font-weight: 600; }
.seg input:checked + label { background: var(--ink); color: var(--snow); border-color: var(--ink); }
.seg input:focus-visible + label { outline: 2px solid var(--glacier); outline-offset: 2px; }
.finder-result { display: grid; gap: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.finder-out-h { font-family: var(--f-display); font-weight: 500; font-size: var(--t-lg); }
.matches { display: grid; gap: var(--s-2); }
.match { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-3); align-items: center; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; background: var(--paper); transition: border-color .15s; }
.match:hover { border-color: var(--ink); }
.match.is-best { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.match-img { aspect-ratio: 1; border-radius: var(--r-sm); background: var(--glacier-soft); display: grid; place-items: center; padding: 6px; }
.match-img img { width: 100%; height: 100%; object-fit: contain; }
.match-body { display: grid; gap: 2px; min-width: 0; }
.match-body b { font-family: var(--f-display); font-weight: 500; font-size: var(--t-lg); line-height: 1.15; }
.match-tag { justify-self: start; font-size: var(--t-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); background: var(--ink); color: var(--snow); margin-bottom: 2px; }
.match-specs { font-family: var(--f-data); font-size: var(--t-sm); color: var(--mist); }
.match-cta { font-size: var(--t-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-top: 2px; }

/* Showroom block (H3): actions first, then hours, beside a map card (and a photo once we have one) */
.showroom { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .showroom { grid-template-columns: 1fr 1fr; align-items: start; } }
.showroom-copy { display: grid; gap: var(--s-3); align-content: start; }
.showroom-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding-block: var(--s-2); }
.showroom-media { display: grid; gap: var(--s-3); }
.showroom-photo { aspect-ratio: 3 / 2; }
.map-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); text-decoration: none; background: var(--glacier-soft); }
.map-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-ground { fill: var(--glacier-soft); }
.m-park { fill: color-mix(in srgb, #8fa67c 35%, var(--glacier-soft)); }
.m-water { fill: color-mix(in srgb, #7fa3b5 40%, var(--glacier-soft)); }
.m-road { fill: none; stroke: var(--paper); stroke-width: 6; stroke-linecap: round; }
.m-road.big { stroke-width: 12; }
.map-pin { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -100%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--glacier); color: var(--glacier-ink); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.map-pin svg { width: 20px; height: 20px; rotate: 45deg; }
.map-label { position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--paper); box-shadow: var(--shadow); font-size: var(--t-sm); color: var(--mist); }
.map-label b { font-family: var(--f-display); font-weight: 500; font-size: var(--t-md); color: var(--ink); }
.map-open { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.map-card:hover .map-label { box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.hours { display: grid; border-top: 1px solid var(--line); }
.hours div { display: flex; justify-content: space-between; padding-block: var(--s-3); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.hours .today { font-weight: 700; }
.showroom-hours { display: grid; gap: var(--s-3); padding-top: var(--s-3); }
.open-pill { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); font-weight: 600; }
.open-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mist); }
.open-pill.is-open { color: var(--ok); }
.open-pill.is-open::before { background: var(--ok); }

/* FAQ and other disclosures */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details, .spec-details { border-bottom: 1px solid var(--line); }
.faq summary, .spec-details summary { list-style: none; cursor: pointer; padding: var(--s-4) 0; display: flex; justify-content: space-between; gap: var(--s-4); font-weight: 600; }
.faq summary::-webkit-details-marker, .spec-details summary::-webkit-details-marker, .more-fields summary::-webkit-details-marker { display: none; }
.faq summary::after, .spec-details summary::after { content: "+"; font-size: var(--t-lg); line-height: 1; color: var(--mist); transition: transform .2s; }
.faq details[open] summary::after, .spec-details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding-bottom: var(--s-4); color: var(--mist); display: grid; gap: var(--s-3); max-width: 65ch; }

/* Lead form (H5): name, phone or email, showroom; the rest is optional */
.lead { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .lead { grid-template-columns: 1fr 1.2fr; } }
.form { display: grid; gap: var(--s-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); }
.field { display: grid; gap: var(--s-1); min-width: 0; }
.field label { font-size: var(--t-sm); font-weight: 600; }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; min-height: 48px; width: 100%; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--glacier); outline-offset: 0; border-color: transparent; }
.field input[aria-invalid="true"] { border-color: var(--err); }
.err { font-size: var(--t-sm); color: var(--err); }
.contact-pair { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.contact-pair legend { font-size: var(--t-sm); font-weight: 600; padding: 0; margin-bottom: var(--s-2); }
.contact-pair legend span, .more-fields summary span { font-weight: 400; color: var(--mist); }
.contact-pair .field label { font-weight: 400; color: var(--mist); }
.row-2 { display: grid; gap: var(--s-3); }
@media (min-width: 520px) { .row-2 { grid-template-columns: 1fr 1fr; } }
.more-fields { border-block: 1px solid var(--line); }
.more-fields summary { list-style: none; cursor: pointer; display: flex; gap: 6px; align-items: center; min-height: 48px; font-size: var(--t-sm); font-weight: 600; }
.more-fields summary::after { margin-left: auto; content: "+"; font-size: var(--t-lg); color: var(--mist); }
.more-fields[open] summary::after { content: "−"; }
.more-fields[open] { display: grid; gap: var(--s-4); padding-bottom: var(--s-4); }
.form-note { font-size: var(--t-sm); color: var(--mist); }
.form-done { gap: var(--s-3); }
.form-done h3 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-lg); }
.notice { font-size: var(--t-sm); color: var(--warn); border: 1px dashed currentColor; border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); }
/* "Your build" beside the quote form (M2) */
.build-summary { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); margin-top: var(--s-2); }
.bs-head { display: flex; align-items: center; gap: var(--s-3); }
.bs-thumb { width: 64px; height: 64px; object-fit: contain; border-radius: var(--r-sm); background: var(--glacier-soft); padding: 4px; flex: none; }
.bs-name { display: grid; flex: 1; min-width: 0; }
.bs-name span { font-size: var(--t-xs); color: var(--mist); }
.bs-name b { font-family: var(--f-display); font-weight: 500; font-size: var(--t-lg); line-height: 1.15; }
.bs-edit { font-size: var(--t-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.build-summary dl { margin: 0; display: grid; gap: 0; font-size: var(--t-sm); }
.build-summary dl > div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: 6px; border-top: 1px solid var(--line); }
.build-summary dt { color: var(--mist); }
.build-summary dd { margin: 0; text-align: right; font-weight: 600; }

/* Bottom action bar (S3): Call, Text and the page's main action in one bar; no separate floating bubble on phones */
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(0,0,0,.05);
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 60px 60px minmax(0, 1fr); gap: var(--s-2); align-items: center; }
.ab-btn { display: grid; justify-items: center; gap: 2px; min-height: 48px; align-content: center; text-decoration: none; font-size: var(--t-xs); font-weight: 600; color: var(--ink); border-radius: var(--r-sm); }
.ab-btn svg { width: 22px; height: 22px; }
.ab-btn:hover { background: var(--glacier-soft); }
.actionbar .btn { min-height: 48px; }
@media (min-width: 900px) {
  .actionbar.global:not(.bld-follow) { display: none; }
  .actionbar { grid-template-columns: auto auto minmax(0, 260px); justify-content: end; padding-inline: var(--gutter); }
  .ab-btn { grid-auto-flow: column; gap: 8px; padding: 0 16px; font-size: var(--t-sm); }
}

/* Footer (S7) */
.site-footer { background: var(--sage); color: var(--sage-ink); padding-block: var(--s-7) var(--s-5); }
.site-footer a { color: var(--sage-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-top { display: grid; gap: var(--s-4); padding-bottom: var(--s-6); border-bottom: 1px solid color-mix(in srgb, var(--sage-ink) 25%, transparent); }
.footer-logo img { height: 56px; width: auto; }
.footer-about { max-width: 34rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-weight: 600; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-grid { display: grid; gap: var(--s-5); padding-top: var(--s-6); }
@media (min-width: 800px) { .footer-top { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s-6); } .footer-links { grid-column: 1 / -1; } .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-loc { display: grid; gap: 4px; font-size: var(--t-sm); align-content: start; }
.footer-loc strong { font-family: var(--f-display); font-weight: 500; font-size: var(--t-md); margin-bottom: 2px; }
.footer-loc a[href^="tel"] { font-weight: 600; }
.footer-reviews { font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }
.footer-small { margin-top: var(--s-6); font-size: var(--t-xs); border-top: 1px solid color-mix(in srgb, var(--sage-ink) 25%, transparent); padding-top: var(--s-4); display: grid; gap: var(--s-2); }
/* clear the fixed bar at the very end of the page instead of padding the whole body */
@media (max-width: 899px) { .site-footer { padding-bottom: calc(var(--s-5) + var(--bar-h) + env(safe-area-inset-bottom, 0px)); } }
.has-bld .site-footer { padding-bottom: calc(var(--s-5) + var(--bar-h) + env(safe-area-inset-bottom, 0px)); }

/* Model page below the builder (M1) */
.photo-band { margin: 0; }
.photo-band .photo { border-radius: 0; aspect-ratio: 3 / 2; max-height: 70svh; }
@media (min-width: 900px) { .photo-band .photo { aspect-ratio: 21 / 9; } }
.about { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .about { grid-template-columns: 1fr 1fr; align-items: start; } }
.spec-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.spec-strip div { padding: var(--s-4) var(--s-1); display: grid; gap: 4px; text-align: center; }
.spec-strip div + div { border-left: 1px solid var(--line); }
.spec-strip dt { font-size: var(--t-xs); color: var(--mist); }
.spec-strip dd { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--t-lg); line-height: 1; font-variant-numeric: tabular-nums; }
.spec-strip small { font-size: var(--t-xs); }
.spec-details { margin-top: var(--s-4); border-top: 1px solid var(--line); }
.spec-table-wrap { overflow-x: auto; padding-bottom: var(--s-4); }
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.spec-table th, .spec-table td { padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec-table th { font-weight: 500; color: var(--mist); width: 42%; padding-left: 0; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* Tub drawing (fallback when a model has no render) */
.tub-render .steam path { animation: steam 6s ease-in-out infinite; transform-origin: center bottom; opacity: 0; }
.tub-render .steam path:nth-child(2) { animation-delay: 2s; }
.tub-render .steam path:nth-child(3) { animation-delay: 4s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(10px) scaleY(.8); } 30% { opacity: .55; } 100% { opacity: 0; transform: translateY(-40px) scaleY(1.2); } }

/* ---------- Model builder (model pages) ----------
   Layout and interaction follow builder #7 ("Design Your Arctic Spa", theme 188957720871): name + spec icons,
   a large still with Top view / Cabinet / 3D View and Next, a soft option panel with one category at a time,
   and a step dock (prev, category picker with dots, next, Text us). Fonts and line icons are #8's.
   Colours now come from the site tokens (S2): no separate navy/orange palette inside the builder. */
.bld {
  --b-bg: var(--paper); --b-surface: var(--glacier-soft); --b-fg: var(--ink); --b-muted: var(--mist); --b-border: var(--line); --b-act: var(--glacier); --b-act-ink: var(--glacier-ink);
  --b-tool: 60px; --b-panel: 200px; --b-dock: 64px;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) var(--b-panel) var(--b-dock);
  height: calc(100svh - var(--head-h) - 1px); min-height: 600px; max-height: 1000px;
  background: var(--b-bg); color: var(--b-fg); font-family: var(--f-body);
}
/* :where() keeps this at element specificity, so each control's own font size wins */
:where(.bld) button { font: inherit; color: inherit; cursor: pointer; }
.bld :focus-visible { outline: 2px solid var(--b-act); outline-offset: 2px; }

/* name + spec icons (M5: bigger icons and type) */
.bld-head { padding: 12px var(--gutter) 0; width: 100%; max-width: 1200px; margin: 0 auto; }
.bld-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bld-head .eyebrow { font-size: 13px; font-weight: 600; color: var(--cedar); margin: 0 0 2px; }
.bld-head h1 { font: 500 28px/1.15 var(--f-display); letter-spacing: -.6px; margin: 0; color: var(--b-fg); }
.bld-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: -6px; font-size: 14px; font-weight: 600; color: var(--b-muted); text-decoration: none; white-space: nowrap; }
.bld-back svg { width: 18px; height: 18px; }
.bld .spec-icons { display: flex; list-style: none; padding: 0; margin: 10px 0 0; gap: 8px 28px; font-size: 15px; line-height: 1.15; color: var(--b-fg); flex-wrap: wrap; }
.bld .spec-icons li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.bld .spec-icons svg { width: 24px; height: 24px; flex: none; }

/* the still */
.bld-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--b-tool); min-height: 0; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.bld-well { position: relative; min-height: 0; min-width: 0; overflow: hidden; margin: 8px 0 3px; }
.bld-well > img, .bld-well > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.bld-3d { min-height: 0; border-radius: var(--r-md); overflow: hidden; background: var(--b-surface); }
.bld-3d iframe { width: 100%; height: 100%; border: 0; display: block; }
.bld-status { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); margin: 0; padding: 8px 14px; border-radius: var(--r-pill); background: var(--b-bg); box-shadow: var(--shadow); font-size: 14px; }
.bld-toolbar { display: flex; align-items: center; gap: 14px; min-width: 0; white-space: nowrap; }
.bld-views { display: flex; align-items: center; gap: 2px; background: var(--b-surface); padding: 3px; border-radius: var(--r-pill); }
.bld-views button { border: 0; min-width: 44px; min-height: 44px; padding: 0 14px; font-size: 14px; font-weight: 600; border-radius: var(--r-pill); background: transparent; }
.bld-views button[aria-pressed="true"] { background: var(--b-bg); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.bld-3dbtn { border: 0; background: none; min-height: 44px; padding: 0 6px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.bld-next { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-left: auto; min-width: 138px; min-height: 48px; padding: 0 20px;
  background: var(--b-act); color: var(--b-act-ink) !important; border: 1px solid var(--b-act); border-radius: var(--r-pill); font-weight: 600 !important; font-size: 16px !important; }
.bld-next svg { width: 22px; height: 22px; }
.bld-next:hover { opacity: .88; }
.bld-next.is-quote { justify-content: center; min-width: 0; padding: 0 20px; }
.bld-next.is-quote svg { display: none; }

/* the option panel */
.bld-panel { position: relative; background: var(--b-surface); border-top: 1px solid var(--b-border); min-height: 0; }
.bld-step { padding: 14px var(--gutter) 10px; max-width: 1200px; margin: 0 auto; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.opt-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.opt-title-row h2 { font: 500 20px/1.2 var(--f-display); letter-spacing: -.2px; margin: 0; outline: none; }
.opt-kicker { font-size: 13px; color: var(--b-muted); font-weight: 400; }
.opt-track { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 3px 3px 8px; margin: 0 -3px; scrollbar-width: thin; scrollbar-color: var(--b-border) transparent; scroll-snap-type: x proximity; }
.opt-track.cards { display: grid; grid-auto-flow: column; grid-template-columns: repeat(var(--n), minmax(170px, 1fr)); }
/* M4: cards show selection by border and tick; one benefit line instead of "Select option" */
.opt-card { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 84px; padding: 13px 14px; border: 1px solid var(--b-border); border-radius: var(--r-md); background: var(--b-bg); text-align: left; scroll-snap-align: start; cursor: pointer; }
.opt-card input, .sw input { position: absolute; opacity: 0; pointer-events: none; }
.opt-card strong { font-weight: 600; font-size: 16px; padding-right: 20px; line-height: 1.2; }
.opt-card small { font-size: 13px; line-height: 1.3; color: var(--b-muted); }
.opt-card .specs { display: flex; flex-wrap: wrap; gap: 0 10px; font-family: var(--f-data); font-size: 14px; color: var(--b-fg); }
.opt-card .specs span { white-space: nowrap; }
.opt-card .desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.opt-card:hover { border-color: var(--b-fg); }
.opt-card:has(input:checked) { border-color: var(--b-fg); box-shadow: inset 0 0 0 1px var(--b-fg); }
.opt-card:has(input:checked)::after { content: '✓'; position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--b-act); color: var(--b-act-ink); font-size: 12px; font-weight: 700; }
.opt-card:has(input:focus-visible), .sw:has(input:focus-visible) .sw-img { outline: 2px solid var(--b-act); outline-offset: 2px; }
.opt-note { font-size: 13px; color: var(--b-muted); margin: 6px 0 0; line-height: 1.3; }

/* finish swatches */
.opt-track.swatches { flex-wrap: nowrap; gap: 18px; padding-top: 4px; }
.sw { position: relative; flex: 0 0 80px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 2px 0; text-align: center; font-size: 13px; line-height: 1.2; cursor: pointer; }
.sw-img { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--b-bg); box-shadow: 0 0 0 1px var(--b-border); }
.sw-img.swirl { background-image: radial-gradient(120% 60% at 20% 30%, rgba(255,255,255,.55), transparent 55%), radial-gradient(90% 50% at 80% 75%, rgba(255,255,255,.4), transparent 60%), radial-gradient(60% 40% at 55% 50%, rgba(0,0,0,.12), transparent 70%); }
.sw-img.wood-cedar { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 9px), linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.12)); }
.sw-img.wood-board { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 12px); }
.sw small { display: block; font-size: 12px; color: var(--cedar); margin-top: 2px; }
.sw:hover .sw-img, .sw:has(input:checked) .sw-img { box-shadow: 0 0 0 2px var(--b-fg); }
.sw:has(input:checked) .sw-lbl { font-weight: 600; }
.sw:has(input:checked) .sw-img::after { content: '✓'; position: absolute; right: -5px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--b-act); color: var(--b-act-ink); display: grid; place-items: center; font-size: 12px; }

/* summary (#7's last screen) */
.summary-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.summary-heading h2 { font: 400 20px/1.2 var(--f-display); margin: 0; outline: none; }
.summary-heading strong { font-weight: 600; }
.text-btn { border: 0; background: none; padding: 0 4px; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; color: var(--b-fg); cursor: pointer; }
.summary-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.summary-list > div { border-top: 1px solid var(--b-border); padding-top: 5px; min-width: 0; }
.summary-list dt { font-size: 12px; color: var(--b-muted); margin-bottom: 1px; }
.summary-list dd { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.summary-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; margin-top: 2px; }
.summary-links a, .summary-links button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--b-fg); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.bld.is-summary { grid-template-rows: auto minmax(0, 1fr) auto var(--b-dock); }

.bld-toast { position: absolute; left: var(--gutter); right: var(--gutter); max-width: 520px; margin-inline: auto !important; bottom: calc(100% + 8px); z-index: 6; margin: 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--ink); color: var(--snow); font-size: 14px; line-height: 1.35; box-shadow: 0 6px 20px rgba(0,0,0,.25); }

/* step dock */
.bld-dock { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 7px var(--gutter) calc(7px + env(safe-area-inset-bottom, 0px)); background: var(--b-bg); border-top: 1px solid var(--b-border); }
.dock-controls { display: flex; align-items: center; gap: 10px; min-width: 0; }
.step-arrow { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--b-border); border-radius: 50%; background: var(--b-bg); padding: 0; }
.step-arrow svg { width: 20px; height: 20px; }
.step-arrow:disabled { opacity: .35; cursor: default; }
.step-arrow:hover:not(:disabled) { border-color: var(--b-fg); }
.step-picker { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-width: 150px; min-height: 48px; border: 0; background: var(--b-bg); font-size: 14px; font-weight: 600; border-radius: var(--r-pill); }
.step-picker b { font-weight: 600; }
.step-picker:hover { background: var(--b-surface); }
.step-dots { display: flex; gap: 8px; align-items: center; height: 6px; }
.step-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--b-border); transition: width .2s; }
.step-dot.active { width: 18px; border-radius: 4px; background: var(--b-fg); }
.bld.is-summary .step-dot { background: var(--b-fg); }
.step-tabs { display: flex; justify-content: center; gap: 14px; }
.step-tab { position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--r-pill); background: transparent; font-size: 14px; white-space: nowrap; }
.step-index { color: var(--b-muted); font-size: 12px; font-family: var(--f-data); }
.step-tab[aria-current="step"] { font-weight: 700; }
.step-tab[aria-current="step"]::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--b-fg); }
.step-tab:hover { background: var(--b-surface); }
.dock-text { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: var(--r-pill); border: 1px solid var(--b-fg); color: var(--b-fg); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.dock-text:hover { background: var(--b-fg); color: var(--b-bg); }
.step-menu { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: min(300px, calc(100vw - 32px)); display: grid; padding: 6px; background: var(--b-bg); border: 1px solid var(--b-border); border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.step-menu button { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; font-size: 15px; text-align: left; }
.step-menu button:hover { background: var(--b-surface); }
.step-menu .chosen { font-size: 13px; color: var(--b-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

/* phones (#7's ≤700px layout) */
@media (max-width: 700px) {
  .bld { --b-panel: clamp(214px, 34svh, 290px); }
  .bld-head { padding: 10px 16px 0; }
  .bld-head h1 { font-size: 26px; }
  .bld .spec-icons { gap: 6px 18px; font-size: 14px; margin-top: 8px; }
  .bld .spec-icons li { gap: 5px; }
  .bld .spec-icons svg { width: 22px; height: 22px; }
  .bld .spec-icons .sp-seats { display: none; } /* people says it (and counts loungers); keeps hot tubs to one line */
  .bld-stage { padding: 0 16px; --b-tool: 58px; }
  .bld-well { margin: 4px 1px 0; }
  .bld-toolbar { gap: 6px; }
  .bld-views { padding: 2px; }
  .bld-views button { padding: 0 11px; font-size: 13px; }
  .bld-3dbtn { font-size: 13px; padding: 0 4px; }
  .bld-next { min-width: 112px; min-height: 46px; padding: 0 16px; gap: 18px; font-size: 15px !important; }
  .bld-step { padding: 12px 16px 8px; }
  .opt-title-row { margin-bottom: 8px; }
  .opt-title-row h2 { font-size: 18px; }
  /* two-up cards that wrap inside the panel, so nothing is cut off at the screen edge (M4) */
  .opt-track.cards { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 8px; padding: 2px 0 4px; margin: 0; }
  .opt-card { min-height: 0; padding: 10px 12px; }
  .opt-card strong { font-size: 15px; }
  .opt-card .desc { -webkit-line-clamp: 2; }
  .opt-track.swatches { flex-wrap: wrap; gap: 10px 6px; overflow: visible; justify-content: flex-start; }
  .sw { flex-basis: calc((100% - 18px) / 4); }
  .bld-dock { gap: 8px; padding: 7px 12px calc(7px + env(safe-area-inset-bottom, 0px)); justify-content: space-between; }
  .dock-controls { gap: 0; flex: 1; justify-content: space-between; }
  .step-picker { display: flex; flex: 1; min-width: 0; }
  .step-tabs { display: none; }
  .dock-text { padding: 0 16px; font-size: 14px; min-height: 46px; }
  .summary-links { justify-content: flex-start; }
  /* M3: swim spa renders are about 1.83:1, so the well takes the image's own shape and the panel gets the rest */
  .bld.is-wide { grid-template-rows: auto auto minmax(var(--b-panel), 1fr) var(--b-dock); }
  .bld.is-wide .bld-stage { grid-template-rows: auto var(--b-tool); }
  .bld.is-wide .bld-well { aspect-ratio: 1.83; margin-top: 10px; }
  .bld.is-wide.showing-3d .bld-stage { grid-template-rows: minmax(260px, auto) var(--b-tool); }
}
@media (max-width: 700px) and (max-height: 720px) { .bld .spec-icons { margin-top: 6px; } }
@media (max-width: 380px) { .bld-views button { font-size: 12px; padding: 0 8px; } .bld-3dbtn { font-size: 12px; } .bld-next { min-width: 0; gap: 8px; padding: 0 14px; } }

/* desktop: #7's centred column, panel with rounded top corners */
@media (min-width: 1000px) {
  .bld { --b-panel: 210px; }
  .bld-head { padding: 16px 40px 0; }
  .bld-head h1 { font-size: 32px; }
  .bld-stage { padding: 0 40px; }
  .bld-panel { background: transparent; border-top: 0; }
  .bld-step { background: var(--b-surface); border: 1px solid var(--b-border); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; padding: 16px 32px 10px; }
  .opt-track.cards .opt-card { max-width: none; }
  .opt-track.swatches { gap: 24px; }
  .sw { flex-basis: 92px; }
  .summary-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 10px; }
  .summary-links { justify-content: center; gap: 30px; }
  .step-menu { left: auto; right: var(--gutter); transform: none; }
}
.bld-well[hidden], .step-menu[hidden], .bld-step[hidden] { display: none; }

/* ---- Text Us bubble: same look as the live arcticspasontario.com bubble ---- */
.textus { --tu-red: #ab2a26; --tu-bg: #eeeff3; --tu-fg: #1a1a18; --tu-lift: 0px;
  position: fixed; right: 16px; bottom: calc(16px + var(--tu-lift) + env(safe-area-inset-bottom, 0px)); z-index: 55;
  display: flex; flex-direction: column; align-items: flex-end; font-family: var(--f-body); color: var(--tu-fg); transition: bottom .2s; }
@media (min-width: 900px) { .textus { right: 32px; bottom: 32px; } }
.is-overlay .textus, .textus.is-tucked .textus-launcher { display: none; }
.textus-launcher { position: relative; display: flex; flex-direction: column; align-items: flex-end; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; }
.textus-chip { position: relative; z-index: 1; margin: 0 14px -8px 0; padding: 6px 14px; border-radius: 999px; background: var(--tu-bg); border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 4px 16px rgba(0,0,0,.14); font-size: 13px; letter-spacing: .02em; color: rgba(26,26,24,.75); white-space: nowrap; transition: opacity .2s, transform .2s; }
.textus-pill { display: inline-flex; align-items: center; gap: 14px; padding: 6px 6px 6px 24px; border-radius: 999px; background: var(--tu-bg);
  border: 1px solid rgba(0,0,0,.12); box-shadow: 0 6px 24px rgba(0,0,0,.18); transition: transform .2s, box-shadow .2s; }
.textus-launcher:hover .textus-pill { transform: translateY(-2px); box-shadow: 0 9px 30px rgba(0,0,0,.24); }
.textus-label { font-size: 17px; letter-spacing: .02em; white-space: nowrap; }
.textus-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--tu-red); color: #fff; }
.textus-icon svg { width: 24px; height: 24px; }
.textus.is-open .textus-chip { opacity: 0; transform: translateY(6px); }
/* Phones (S3): no floating bubble. The bottom bar and the builder dock carry Text, and open this same panel above the bar. */
@media (max-width: 899px) { .textus-launcher { display: none; } .textus { right: 16px; left: 16px; align-items: stretch; } .textus-panel { width: auto; left: 0; } }

.textus-panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(380px, calc(100vw - 32px)); max-height: calc(100svh - var(--head-h) - 120px - var(--tu-lift)); overflow-y: auto;
  padding: 24px; border-radius: 22px; background: var(--tu-bg); color: var(--tu-fg); box-shadow: 0 12px 40px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; }
.textus-panel.is-open { opacity: 1; transform: none; }
.textus-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,.12); }
.textus-eyebrow { margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(26,26,24,.7); }
.textus-heading { margin: 4px 0 0; font-family: var(--f-display); font-weight: 600; font-size: 19px; line-height: 1.25; }
.textus-close { margin: -10px -10px 0 0; color: rgba(26,26,24,.7); }
.textus-form { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
.textus-form[hidden], .textus-ok[hidden] { display: none; }
/* Floating labels: the label sits in the field until it has focus or a value */
.tfield { position: relative; }
.tfield input, .tfield textarea { display: block; width: 100%; font: inherit; font-size: 16px; color: var(--tu-fg); background: transparent; border: 1px solid #6f6f6f; border-radius: 12px; padding: 22px 22px 8px; min-height: 56px; outline: none; }
.tfield textarea { border-radius: 12px; min-height: 104px; resize: vertical; }
.tfield input:focus, .tfield textarea:focus { border-color: var(--tu-fg); box-shadow: inset 0 0 0 1.5px var(--tu-fg); }
.tfield label { position: absolute; left: 23px; top: 18px; font-size: 16px; color: rgba(26,26,24,.7); pointer-events: none; transition: top .15s, font-size .15s; }
.tfield input:focus + label, .tfield input:not(:placeholder-shown) + label, .tfield textarea:focus + label, .tfield textarea:not(:placeholder-shown) + label { top: 7px; font-size: 12px; }
.textus-consent { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(26,26,24,.72); }
.textus-submit { min-height: 52px; border: 0; border-radius: 999px; background: var(--tu-red); color: #fff; font: 500 17px/1 var(--f-body); letter-spacing: .02em; cursor: pointer; }
.textus-submit:hover { filter: brightness(1.08); }
.textus-error { margin: 0; font-size: 13px; color: var(--tu-red); }
.textus-ok { padding-top: 16px; display: grid; gap: 10px; }
.textus-ok .notice { color: #7a5200; }