/* ==========================================================================
   Kozzie Homes — one light, quiet look. Photography carries the colour.
   System: Inter / ink #111 / white + #F7F6F2 / hairlines / pill buttons with an
   arrow-in-circle / segmented-pill nav / 12px cards. Round arrow = button,
   small square arrow = text link.
   ========================================================================== */

:root {
  --ink: #111111;
  --muted: #6B6A66;
  --bg: #FFFFFF;
  --surface: #F7F6F2;
  --line: #E4E2DC;
  --track: #EFEEEB;
  --ph: #DCD9D2;
  --ph-dark: #3B3A37;
  --ctl: #8E8D88;             /* unselected control outline (3:1 on white) */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --shadow: 0 6px 14px rgba(0, 0, 0, .10), 0 1px 2px rgba(0, 0, 0, .06);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gut: 40px;
  --max: 1440px;
  --secpad: 160px;
  --hdr: 72px;
  --r-card: 12px;
  --r-photo: 20px;
  color-scheme: light;
}
@media (max-width: 900px) {
  :root { --gut: 20px; --secpad: 88px; --hdr: 60px; --r-photo: 16px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 24px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  caret-color: var(--ink); scrollbar-color: #C9C7C0 transparent; scrollbar-width: thin;
}
body.menu-open { overflow: hidden; }
::selection { background: var(--ink); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: var(--ink); }
img { display: block; max-width: 100%; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
p, li { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.hero__media :focus-visible, .cta :focus-visible, .footer :focus-visible, .track--dark :focus-visible { outline-color: #fff; }
.tnum, table td, .range__price-n, .pcard__price { font-variant-numeric: tabular-nums; }
.wrap {
  max-width: var(--max); margin: 0 auto;
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 500; }
.skip-link:focus { top: 12px; }
.photo-fill { width: 100%; height: 100%; object-fit: cover; }
.meta { font-size: 14px; color: var(--muted); }
.fine { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 72ch; }
.body-2 { font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 68ch; }
.lead { font-size: 20px; line-height: 30px; color: var(--muted); max-width: 680px; }
.ph { display: grid; place-items: center; text-align: center; background: var(--ph); color: var(--ph-dark); font-size: 14px; padding: 8px; border-radius: var(--r-card); }

/* ---------- type scale ---------- */
.display { font-size: clamp(40px, 5vw, 72px); line-height: 1.056; font-weight: 300; letter-spacing: -.02em; }
.h1 { font-size: clamp(40px, 4.45vw, 64px); line-height: 1.09; letter-spacing: -.023em; }
.h2 { font-size: clamp(30px, 3.05vw, 44px); line-height: 1.18; letter-spacing: -.01em; max-width: 900px; }
.h3 { font-size: 24px; line-height: 30px; font-weight: 500; }
@media (max-width: 900px) {
  .h1 { font-size: 40px; line-height: 46px; }
  .h2 { font-size: 30px; line-height: 36px; }
  .lead { font-size: 17px; line-height: 26px; }
}

/* ---------- sections ---------- */
.section { padding-block: var(--secpad); }
.section--surf { background: var(--surface); }
.sechead { display: flex; flex-direction: column; gap: 20px; margin-bottom: 64px; }
.sechead--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 80px; align-items: end; }
@media (max-width: 900px) { .sechead { margin-bottom: 40px; } .sechead--split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- buttons, tracks, links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px;
  border-radius: 999px; font-size: 15px; font-weight: 500; line-height: 20px; white-space: nowrap;
  transition: transform .15s var(--ease), background .2s, box-shadow .2s;
}
.btn:active { transform: scale(.98); }
.btn-dark, .btn-timber { background: var(--ink); color: #fff; padding: 12px 22px; box-shadow: var(--shadow); }
.btn-dark:has(.ar), .btn-timber:has(.ar) { padding: 6px 6px 6px 22px; }
.btn-dark:hover { background: #2B2B2A; }
.btn .ar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .14); display: grid; place-items: center; flex: none; }
.btn-ghost { background: #fff; color: var(--ink); padding: 12px 22px; box-shadow: var(--shadow); }
.btn-ghost:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .08); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.track { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--track); border-radius: 999px; max-width: 100%; }
.track--dark { background: rgba(255, 255, 255, .14); }
.track--dark .btn-dark, .cta .btn-dark { background: #fff; color: var(--ink); box-shadow: none; }
.track--dark .btn-dark .ar, .cta .btn-dark .ar { background: var(--ink); color: #fff; }
.track--dark .btn-ghost, .cta .btn-ghost { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.track--dark .btn-ghost:hover { background: rgba(255, 255, 255, .24); }
.lnk { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; font-weight: 500; }
.lnk .circ {
  width: 28px; height: 28px; border-radius: 8px; background: var(--track); display: inline-grid; place-items: center;
  flex: none; transition: background .2s, color .2s;
}
.section--surf .lnk .circ { background: #fff; }
.lnk:hover .circ { background: var(--ink); color: #fff; }

/* ---------- header / nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav--solid { border-bottom-color: var(--line); }
.nav__inner { height: var(--hdr); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-size: 24px; font-weight: 600; letter-spacing: -.035em; line-height: 1; text-transform: lowercase; white-space: nowrap; }
.nav__brand, .footer__brand { display: inline-flex; align-items: center; min-height: 44px; }
img.brand { display: block; height: 28px; width: auto; }
.nav__links.seg {
  display: inline-flex; gap: 2px; padding: 4px; background: var(--track); border-radius: 999px; max-width: 100%;
}
.nav__links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 500;
  color: #55544F; white-space: nowrap; transition: background .2s, color .2s;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current="page"] { background: #fff; color: var(--ink); box-shadow: var(--shadow); font-weight: 600; }
.nav__right { display: flex; align-items: center; gap: 12px; }
.nav__burger { display: none; width: 44px; height: 44px; border-radius: 50%; background: var(--track); position: relative; }
.nav__burger span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease); }
.nav__burger span:first-child { top: 19px; }
.nav__burger span:last-child { top: 25px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.nav__drawer {
  position: fixed; left: 0; right: 0; top: var(--hdr); bottom: 0; z-index: 49; background: var(--bg); overflow-y: auto;
  padding-block: 8px 32px; visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.nav__drawer.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav__drawer-links { display: flex; flex-direction: column; }
.nav__drawer-links a { display: flex; align-items: center; min-height: 64px; font-size: 24px; font-weight: 500; letter-spacing: -.01em; border-bottom: 1px solid var(--line); }
.nav__drawer-foot { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; }
.nav__drawer-foot .btn { width: 100%; }
@media (max-width: 1100px) {
  .nav__links a { padding: 0 13px; font-size: 14px; }
}
@media (max-width: 900px) {
  .nav__links.seg, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav { border-bottom-color: var(--line); }
  .brand { font-size: 22px; }
}
@media (min-width: 901px) { .nav__drawer { display: none; } }

/* tracks that hold two buttons wrap instead of overflowing on narrow screens */
@media (max-width: 900px) {
  .track { flex-wrap: wrap; border-radius: 28px; }
  .track .btn { flex: 1 1 auto; min-width: 0; }
  .cta .track, .phero__actions.track, .hero__actions.track { display: flex; width: 100%; }
}

/* mobile bottom action bar */
.mbar { display: none; }
@media (max-width: 900px) {
  body:has(.mbar) { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .mbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--bg); border-top: 1px solid var(--line);
    padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }
  .mbar .track { display: flex; width: 100%; flex-wrap: nowrap; }
  body.menu-open .mbar { display: none; }
  /* the bar appears only after a little scroll (js adds .mbar--lazy, then .is-visible) */
  .mbar--lazy { transform: translateY(105%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s; }
  .mbar--lazy.is-visible { transform: none; visibility: visible; transition: transform .35s var(--ease), visibility 0s; }
}
@media (prefers-reduced-motion: reduce) { .mbar--lazy, .mbar--lazy.is-visible { transition: none; } }

/* breadcrumbs */
.crumbs .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; font-size: 13px; color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }

/* ---------- motion ---------- */
@keyframes heroSettle { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes heroRise { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
.js .hero__photo { animation: heroSettle 2.4s var(--ease) both; }
.js .hero__title { animation: heroRise 1.2s var(--ease) .15s both; }
.js .hero__lead { animation: heroRise 1.2s var(--ease) .32s both; }
.js .hero__actions { animation: heroRise 1.2s var(--ease) .46s both; }
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- home hero ---------- */
.hero { padding-top: 8px; }
.hero__media {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  height: calc(100vh - var(--hdr) - 8px); height: calc(100svh - var(--hdr) - 8px); min-height: 560px; max-height: 1100px;
  border-radius: 24px; background: var(--ph-dark); color: #fff;
}
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(12, 12, 12, .72) 0%, rgba(12, 12, 12, .40) 28%, rgba(12, 12, 12, 0) 60%),
    linear-gradient(to right, rgba(12, 12, 12, .30) 0%, rgba(12, 12, 12, 0) 52%);
}
.hero__inner {
  position: relative; z-index: 2; width: 100%; padding: 0 56px 56px;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px 64px; align-items: end;
}
.hero__title { grid-row: 1 / 3; margin: 0; }
.hero__lead { grid-column: 2; align-self: end; font-size: 17px; line-height: 26px; color: rgba(255, 255, 255, .94); max-width: 440px; }
.hero__actions { grid-column: 2; justify-self: start; }
.hero__stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.hero__stats li { display: flex; align-items: baseline; gap: 14px; padding: 28px 24px 28px 0; }
.hero__stats li + li { padding-left: 32px; border-left: 1px solid var(--line); }
.hero__stat-n { font-size: 28px; line-height: 36px; letter-spacing: -.01em; }
.hero__stat-u { font-size: 18px; margin-left: 2px; color: var(--muted); }
.hero__stat-l { font-size: 15px; color: var(--muted); }
@media (max-width: 1100px) {
  .hero__inner { padding: 0 40px 40px; gap: 24px 40px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .hero { padding-top: 4px; }
  /* 4:5 photograph with the headline on it; lead and buttons sit on white below */
  .hero__media { display: grid; grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; height: auto; min-height: 0; max-height: none; overflow: visible; background: none; border-radius: 0; }
  .hero__media::after { grid-area: 1 / 1; position: static; inset: auto; z-index: 1; border-radius: var(--r-photo);
    background: linear-gradient(to top, rgba(12, 12, 12, .62) 0%, rgba(12, 12, 12, .28) 32%, rgba(12, 12, 12, 0) 58%); }
  .hero__photo { position: static; grid-area: 1 / 1; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--r-photo); object-position: 68% 62%; }
  .js .hero__photo { animation: none; }
  .hero__inner { display: contents; }
  .hero__title { grid-area: 1 / 1; align-self: end; position: relative; z-index: 2; color: #fff; padding: 0 22px 26px; font-size: 40px; line-height: 44px; }
  .hero__lead { grid-area: 2 / 1; grid-column: 1; max-width: none; color: var(--muted); font-size: 17px; padding-top: 24px; }
  .hero__actions { grid-area: 3 / 1; grid-column: 1; justify-self: stretch; display: flex; margin-top: 20px; }
  .hero__actions.track--dark { background: var(--track); }
  .hero__actions.track--dark .btn-dark { background: var(--ink); color: #fff; box-shadow: var(--shadow); }
  .hero__actions.track--dark .btn-dark .ar { background: rgba(255, 255, 255, .14); color: #fff; }
  .hero__actions.track--dark .btn-ghost { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
  .hero__stats li { flex-direction: column; gap: 2px; padding: 20px 8px 20px 0; }
  .hero__stats li + li { padding-left: 14px; }
  .hero__stat-n { font-size: 22px; line-height: 28px; }
  .hero__stat-l { font-size: 12px; line-height: 16px; }
  .hero__stats { margin-top: 24px; }
}

/* ---------- statement + intro ---------- */
.intro { padding-block: calc(var(--secpad) * .8) var(--secpad); }
.statement { text-align: center; margin-bottom: 88px; }
.statement__title { font-size: clamp(40px, 6vw, 88px); line-height: 1.04; font-weight: 300; letter-spacing: -.03em; max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.intro__cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: start; }
.intro__text { display: flex; flex-direction: column; gap: 24px; }
.intro__text .lead { max-width: 60ch; color: var(--ink); font-size: 22px; line-height: 32px; }
.intro__body { color: var(--muted); max-width: 66ch; }
.intro__links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 8px; }
.intro__facts { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.intro__facts div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.intro__facts dt { font-size: 15px; color: var(--muted); }
.intro__facts dd { font-size: 16px; font-weight: 500; }
@media (max-width: 900px) {
  .statement { margin-bottom: 48px; text-align: left; }
  .statement__title { font-size: 40px; line-height: 44px; margin-inline: 0; }
  .intro__cols { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .intro__text .lead { font-size: 19px; line-height: 28px; }
}

/* ---------- range: tall photo tiles ---------- */
.range__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.range__card { display: flex; flex-direction: column; min-width: 0; }
.range__media { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-card); overflow: hidden; background: var(--ph); }
.range__photo { position: absolute; inset: 0; object-position: 60% 50%; transition: transform 1s var(--ease); }
.range__media:hover .range__photo { transform: scale(1.025); }
.range__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 12, 12, .58) 0%, rgba(12, 12, 12, 0) 45%); pointer-events: none; }
.range__name { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; color: #fff; font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -.015em; }
.range__body { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; }
.range__beds { font-size: 15px; color: var(--muted); }
.range__blurb { max-width: 46ch; }
.range__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 4px; }
.range__price-from { font-size: 15px; color: var(--muted); }
.range__price-n { font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
.range__price-plus { font-size: 13px; color: var(--muted); }
.range__note { margin-top: 56px; }
@media (max-width: 900px) {
  .range__grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  .range__grid::-webkit-scrollbar { display: none; }
  .range__card { flex: 0 0 78%; scroll-snap-align: start; }
  .range__note { margin-top: 32px; }
}

/* ---------- certification ---------- */
.cert__head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 56px; }
.cert__title-dim { color: inherit; }
.cert__intro { max-width: 760px; }
.cert__rail.seg { display: flex; gap: 2px; padding: 4px; background: var(--track); border-radius: 999px; overflow-x: auto; scrollbar-width: none; width: fit-content; max-width: 100%; }
.cert__rail.seg::-webkit-scrollbar { display: none; }
.cert__node { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 500; color: #55544F; white-space: nowrap; transition: background .2s, color .2s; }
.cert__node:hover { color: var(--ink); }
.cert__node-code { font-variant-numeric: tabular-nums; color: var(--muted); }
.cert__node.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.cert__node.is-active .cert__node-code { color: var(--ink); }
.cert__panels { margin-top: 48px; }
.cert__detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: center; }
.cert__report { display: flex; flex-direction: column; gap: 20px; }
.cert__report-stage { font-size: 14px; color: var(--muted); }
.cert__report-name { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.2; letter-spacing: -.02em; }
.cert__report-desc { color: var(--muted); max-width: 52ch; }
.cert__report-checks { list-style: none; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.cert__report-checks li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.cert__report-checks svg { flex: none; }
.cert__report-foot { font-size: 14px; color: var(--muted); }
.cert__report-photo { aspect-ratio: 4 / 3; width: 100%; border-radius: var(--r-photo); }
.ph__tag { font-size: 14px; }
.cert__compliance { margin-top: 96px; }
.cert__compliance-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.cert__compliance-label { font-size: 24px; line-height: 30px; font-weight: 500; }
.cert__compliance-sub { color: var(--muted); }
.cert__certs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
.cert__cert { display: flex; flex-direction: column; gap: 2px; padding: 20px 0; border-top: 1px solid var(--line); }
.cert__cert-tag { font-size: 18px; font-weight: 500; }
.cert__cert-label { font-size: 15px; color: var(--muted); }
@media (max-width: 900px) {
  .cert__detail { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cert__report-photo { order: -1; }
  .cert__certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert__compliance { margin-top: 64px; }
  .cert__head { margin-bottom: 40px; }
}

/* ---------- pillars: editorial rows ---------- */
.pillars__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 80px; align-items: start; }
.pillars__head { position: sticky; top: calc(var(--hdr) + 40px); }
.pillars__list { border-top: 1px solid var(--line); }
.pillar { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.pillar__title { font-size: 22px; line-height: 28px; font-weight: 500; }
.pillar__text { display: flex; flex-direction: column; gap: 10px; }
.pillar__short { font-weight: 500; }
.pillar__body { color: var(--muted); }
@media (max-width: 900px) {
  .pillars__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pillars__head { position: static; }
  .pillar { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px 0; }
}

/* ---------- inclusions ---------- */
.incl__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; }
.incl__card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.incl__photo { aspect-ratio: 4 / 3; height: auto; border-radius: var(--r-card); margin-bottom: 14px; }
.incl__name { font-size: 24px; line-height: 30px; font-weight: 500; }
.incl__desc { color: var(--muted); max-width: 52ch; }
.incl__note { margin-top: 56px; }
.incl__note a, .fine a, .form__fine a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 900px) { .incl__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* ---------- call to action ---------- */
.cta { background: var(--ink); color: #fff; padding-block: var(--secpad); }
.cta__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.cta__title { font-size: clamp(40px, 5vw, 72px); line-height: 1.06; font-weight: 300; letter-spacing: -.025em; }
.cta__sub { color: rgba(255, 255, 255, .72); font-size: 20px; line-height: 30px; max-width: 540px; }
@media (max-width: 900px) { .cta__title { font-size: 38px; line-height: 42px; } .cta__sub { font-size: 17px; line-height: 26px; } .cta .track { display: flex; width: 100%; } .cta .btn { flex: 1 1 auto; } }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #fff; padding-block: 80px 40px; border-top: 1px solid rgba(255, 255, 255, .15); }
.footer .wrap { display: flex; flex-direction: column; gap: 56px; }
.footer__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
.footer__brand-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 15px; }
.footer__brand-col .brand { color: #fff; }
.footer__tag { color: rgba(255, 255, 255, .72); margin: 16px 0 20px; max-width: 34ch; }
.footer__phone { display: inline-flex; align-items: center; min-height: 44px; font-size: 20px; font-weight: 500; }
.footer__email { display: inline-flex; align-items: center; min-height: 44px; }
.footer__phone-sub, .footer__email { color: rgba(255, 255, 255, .72); }
.footer__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer__col { display: flex; flex-direction: column; font-size: 15px; }
.footer__col-h { font-size: 14px; color: rgba(255, 255, 255, .6); margin-bottom: 8px; }
.footer__col a { padding-block: 11px; color: rgba(255, 255, 255, .92); }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__servicing { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: rgba(255, 255, 255, .72); }
.footer__servicing span { color: rgba(255, 255, 255, .6); font-size: 14px; }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; font-size: 13px; color: rgba(255, 255, 255, .6); padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .15); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 900px) {
  .footer { padding-block: 56px 32px; }
  .footer__top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}

/* ---------- interior page hero ---------- */
.phero { padding-block: 56px 0; }
.phero__inner { display: flex; flex-direction: column; gap: 56px; }
.phero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; max-width: 1100px; }
.phero__title { max-width: 16ch; }
.phero__lead { max-width: 680px; }
.phero__media { aspect-ratio: 21 / 9; border-radius: var(--r-photo); overflow: hidden; background: var(--ph); }
.phero__photo { object-position: 55% 55%; }
.phero--narrow { padding-block: 72px 0; }
.phero--narrow + .section { padding-top: 64px; }
.phero--wide + .section, .phero--split + .section { padding-top: calc(var(--secpad) * .6); }
.phero__stats { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 4px; }
.phero__stats li { display: flex; flex-direction: column; }
.phero__stat-n { font-size: 24px; line-height: 30px; font-weight: 500; }
.phero__stat-l { font-size: 13px; color: var(--muted); }
.phero--split .phero__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.phero--split .phero__title { font-size: clamp(36px, 3.9vw, 56px); line-height: 1.1; letter-spacing: -.027em; }
.phero--split .phero__media { aspect-ratio: 3 / 2; }
@media (max-width: 1200px) { .phero--split .phero__inner { gap: 48px; } }
@media (max-width: 900px) {
  .phero { padding-block: 32px 0; }
  .phero__inner { gap: 32px; }
  .phero__text { gap: 20px; }
  .phero__media { aspect-ratio: 4 / 3; }
  .phero--narrow { padding-block: 40px 0; }
  .phero--narrow + .section { padding-top: 40px; }
  .phero--wide + .section, .phero--split + .section { padding-top: 56px; }
  .phero--split .phero__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .phero--split .phero__media { order: -1; aspect-ratio: 4 / 3; }
  .phero--split .phero__title { font-size: 40px; line-height: 46px; }
  .phero__actions.track { display: flex; width: 100%; border-radius: 28px; }
  .phero__actions .btn { flex: 1 1 auto; min-width: 0; white-space: normal; text-align: center; }
}

/* ---------- long-form copy as editorial rows ---------- */
.prow { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; padding-block: 56px; border-top: 1px solid var(--line); }
.prow:last-child { padding-bottom: 0; }
.prow__h h2 { font-size: 30px; line-height: 38px; letter-spacing: -.017em; position: sticky; top: calc(var(--hdr) + 32px); max-width: 16ch; }
.prow__body { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.prow__body > p, .prow__body li, .prose p { max-width: 68ch; }
.prow__body p, .prow__body li { font-size: 17px; line-height: 1.6; }
.prose strong { font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a.lnk { text-decoration: none; }
.prose ul:not(.ticklist):not(.exlist), .prose ol.numlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.prose ul:not(.ticklist):not(.exlist) > li { display: flex; gap: 14px; }
.prose ul:not(.ticklist):not(.exlist) > li::before { content: "—"; color: var(--muted); flex: none; }
.prose ol.numlist { counter-reset: n; gap: 0; border-top: 1px solid var(--line); max-width: 68ch; }
.prose ol.numlist > li { counter-increment: n; position: relative; padding: 16px 0 16px 48px; border-bottom: 1px solid var(--line); }
.prose ol.numlist > li::before { content: counter(n); position: absolute; left: 0; top: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--track); display: grid; place-items: center; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.callout { background: var(--surface); border-radius: var(--r-card); padding: 24px; max-width: 68ch; }
@media (max-width: 900px) {
  .prow { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 40px; }
  .prow__h h2 { position: static; font-size: 26px; line-height: 32px; max-width: none; }
}

/* ---------- lists ---------- */
.ticklist, .exlist { list-style: none; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ticklist li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 24px; }
.ticklist svg { flex: none; margin-top: 4px; }
.exlist li { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.exlist strong { font-weight: 500; }
.exlist span { color: var(--muted); font-size: 16px; }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ktable { width: 100%; border-collapse: collapse; min-width: 640px; }
.ktable caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ktable th { text-align: left; font-size: 14px; font-weight: 500; color: var(--muted); padding: 12px 16px 12px 0; border-bottom: 1px solid var(--ink); }
.ktable td, .ktable tbody th { font-size: 16px; line-height: 24px; padding: 20px 16px 20px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); font-weight: 400; }
.ktable tbody th { font-size: 16px; font-weight: 500; }
.ktable tbody th a { display: inline-block; padding-block: 11px; margin-block: -11px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ktable--spec { min-width: 0; }
.ktable--spec tbody th { width: 34%; color: var(--muted); font-weight: 400; padding-block: 14px; }
.ktable--spec td { padding-block: 14px; }
.table-scroll:focus-visible { outline-offset: 2px; }

/* ---------- compare / options / pricing ---------- */
.compare .h2, .options .h2 { margin-bottom: 40px; }
.compare .fine { margin-top: 32px; }
.options__h2 { margin-top: 96px; }
.pcards { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pcard { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto; gap: 24px 48px; align-items: center; padding: 36px 0; border-bottom: 1px solid var(--line); }
.pcard__name { font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -.015em; }
.pcard__name a { display: inline-block; padding-block: 6px; margin-block: -6px; }
.pcard__name a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pcard__meta { font-size: 15px; color: var(--muted); margin-top: 4px; }
.pcard__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.pcard__price { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.1; font-weight: 300; letter-spacing: -.025em; }
.pcard__plus { font-size: 14px; color: var(--muted); }
.pricing .fine { margin-top: 32px; }
.split__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; }
.split__col { display: flex; flex-direction: column; gap: 28px; }
.split__col .body-2 { margin-top: 4px; }
.why-var .prose { }
.stages__head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 56px; }
.stages__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.stages__list li { border-top: 2px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.stages__n { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stages__list strong { font-size: 22px; line-height: 28px; font-weight: 500; }
.stages__list .body-2 { font-size: 16px; line-height: 24px; }
.stages .fine { margin-top: 40px; }
@media (max-width: 900px) {
  .pcard { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 28px 0; }
  .split__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .stages__list { grid-template-columns: minmax(0, 1fr); }
  .options__h2 { margin-top: 64px; }
}

/* ---------- quality fixtures ---------- */
.fx__list { display: flex; flex-direction: column; gap: 120px; }
.fx__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: center; }
.fx__row--r .fx__media { order: 2; }
.fx__row--r { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fx__row--r .fx__text { order: 1; }
.fx__media { aspect-ratio: 4 / 3; border-radius: var(--r-photo); overflow: hidden; background: var(--ph); }
.fx__text { display: flex; flex-direction: column; gap: 20px; }
.fx__name { font-size: clamp(30px, 3.05vw, 44px); line-height: 1.18; letter-spacing: -.01em; }
.fx__short { font-size: 20px; line-height: 30px; font-weight: 500; max-width: 38ch; }
.fx__body { color: var(--muted); }
@media (max-width: 900px) {
  .fx__list { gap: 72px; }
  .fx__row, .fx__row--r { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .fx__row--r .fx__media, .fx__row--r .fx__text { order: initial; }
}

/* ---------- model pages ---------- */
.mgal__grid { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 16px; margin-top: 48px; }
.mgal__item { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--ph); }
.mgal__grid:focus-visible { outline-offset: 4px; }
.mdetail__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.mdetail__lists { display: flex; flex-direction: column; gap: 24px; }
.mdetail__h2 { margin-top: 32px; }
.mdetail__actions { margin-top: 24px; align-self: flex-start; }
.mdetail .fine { margin-top: 24px; }
.alt__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.alt__card { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.alt__card img { aspect-ratio: 4 / 3; height: auto; border-radius: var(--r-card); margin-bottom: 16px; }
.alt__name { font-size: 24px; line-height: 30px; font-weight: 500; }
.alt__meta { font-size: 15px; color: var(--muted); }
.alt__card:hover .alt__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.formsec__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; }
.formsec__text { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--hdr) + 40px); }
@media (max-width: 1200px) { .mgal__item { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 900px) {
  .mgal__item { flex-basis: 82%; }
  .mgal__grid { gap: 12px; margin-top: 32px; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  .mdetail__grid, .formsec__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .mdetail__actions.track { display: flex; width: 100%; border-radius: 28px; align-self: stretch; }
  .mdetail__actions .btn { flex: 1 1 auto; min-width: 0; white-space: normal; }
  .alt__grid { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .formsec__text { position: static; }
}

/* ---------- gallery ---------- */
.gal__filters { display: flex; gap: 2px; padding: 4px; background: var(--track); border-radius: 999px; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: 48px; }
.gal__filters::-webkit-scrollbar { display: none; }
.gal__filter { min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 500; color: #55544F; white-space: nowrap; transition: background .2s, color .2s; }
.gal__filter:hover { color: var(--ink); }
.gal__filter.is-on { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.gallery__item { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gallery__item img { aspect-ratio: 4 / 3; height: auto; border-radius: var(--r-card); background: var(--ph); }
.gallery__item figcaption { font-size: 13px; line-height: 18px; color: var(--muted); }
@media (max-width: 1100px) { .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .gallery__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .gal__filters { margin-bottom: 32px; } }

/* ---------- forms ---------- */
.form { background: var(--surface); border-radius: var(--r-card); padding: 40px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.section--surf .form { background: #fff; }
.form__heading { font-size: 24px; line-height: 30px; font-weight: 500; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.form__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form__field--wide { grid-column: 1 / -1; }
.form__label { font-size: 14px; font-weight: 500; }
.form__input, .cfg__input {
  width: 100%; min-height: 48px; border: 1px solid var(--ctl); border-radius: var(--r-card); background: #fff; padding: 12px 16px; font-size: 16px; line-height: 24px; appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.section--surf .form__input { border-color: var(--ctl); }
.form__input:hover, .cfg__input:hover { border-color: var(--ink); }
.form__input:focus-visible, .cfg__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.form__input::placeholder, .cfg__input::placeholder { color: #77766F; }
select.form__input, .cfg__select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) 21px, calc(100% - 17px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 44px;
}
textarea.form__input { min-height: 128px; resize: vertical; }
.form__foot { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.form__status { font-size: 15px; font-weight: 500; }
.form__fine { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 60ch; }
@media (max-width: 900px) {
  .form { padding: 24px; }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- configurator ---------- */
.cfg { padding-block: 72px var(--secpad); }
.cfg__head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 56px; }
.cfg__head .h1 { max-width: 18ch; }
.cfg__intro { max-width: 640px; }
.cfg__shell { display: grid; grid-template-columns: minmax(0, 1fr) 460px; grid-template-rows: auto 1fr; gap: 32px 40px; align-items: start; }
.cfg__steps { grid-column: 1; grid-row: 1; display: flex; gap: 2px; padding: 4px; background: var(--track); border-radius: 999px; overflow-x: auto; scrollbar-width: none; width: fit-content; max-width: 100%; }
.cfg__steps::-webkit-scrollbar { display: none; }
.cfg__step { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 500; color: #55544F; white-space: nowrap; transition: background .2s, color .2s; }
.cfg__step:hover { color: var(--ink); }
.cfg__step-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.cfg__step.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.cfg__step.is-active .cfg__step-n { color: var(--ink); }
.cfg__main { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; min-width: 0; }
.cfg__stepbody { display: flex; flex-direction: column; gap: 28px; animation: cfgfade .6s var(--ease); }
@keyframes cfgfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cfg__stephead { display: flex; flex-direction: column; gap: 8px; }
.cfg__stephead-title { font-size: 28px; line-height: 34px; font-weight: 500; }
.cfg__stephead-sub { color: var(--muted); }
.cfg__sizes, .cfg__finishes, .cfg__upgrades { display: flex; flex-direction: column; gap: 16px; }
.cfg__size, .cfg__finish, .cfg__upg, .cfg__sitereport {
  width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px;
  transition: border-color .2s, background .2s;
}
.cfg__size:hover, .cfg__finish:hover, .cfg__upg:hover, .cfg__sitereport:hover { border-color: var(--ink); }
.cfg__size.is-on, .cfg__finish.is-on, .cfg__upg.is-on, .cfg__sitereport.is-on { border: 2px solid var(--ink); padding: 19px 23px; }
.cfg__size { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 2px; align-items: center; }
.cfg__size-top { grid-column: 2; grid-row: 1 / 4; display: flex; align-items: center; gap: 16px; font-size: 15px; color: var(--muted); }
.cfg__size-name { grid-column: 1; font-size: 22px; line-height: 28px; font-weight: 500; }
.cfg__size-meta { grid-column: 1; font-size: 15px; color: var(--muted); }
.cfg__size-price { grid-column: 1; font-size: 16px; font-weight: 500; margin-top: 6px; }
.cfg__finish { display: flex; align-items: center; gap: 24px; }
.cfg__finish-sw { display: flex; width: 120px; flex: none; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; }
.cfg__finish-sw span { flex: 1; }
.cfg__finish-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.cfg__finish-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cfg__finish-name { font-size: 22px; line-height: 28px; font-weight: 500; }
.cfg__finish-desc { font-size: 15px; color: var(--muted); }
.cfg__finish-prem { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 4px; }
.cfg__upg, .cfg__sitereport { display: flex; align-items: center; gap: 20px; }
.cfg__sitereport { align-items: flex-start; }
.cfg__upg-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.cfg__upg-name { font-size: 20px; line-height: 28px; font-weight: 500; }
.cfg__upg-desc { font-size: 15px; color: var(--muted); }
.cfg__upg-price { font-size: 18px; font-weight: 500; white-space: nowrap; }
.cfg__free { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--track); font-size: 13px; font-weight: 500; vertical-align: 2px; }
.rad { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--ctl); flex: none; position: relative; transition: border-color .2s; }
.rad.on { border-color: var(--ink); }
.rad.on::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--ink); }
.chk { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--ctl); display: grid; place-items: center; color: transparent; flex: none; transition: all .2s; }
.chk.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cfg__sitereport .chk { margin-top: 3px; }
.cfg__loc, .cfg__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.cfg__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cfg__field--wide, .cfg__sitereport { grid-column: 1 / -1; }
.cfg__label { font-size: 14px; font-weight: 500; }
.cfg__select-wrap { position: relative; }
.cfg__times { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg__time { min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--track); font-size: 15px; font-weight: 500; color: #55544F; transition: background .2s, color .2s; }
.cfg__time:hover { color: var(--ink); }
.cfg__time.is-on { background: var(--ink); color: #fff; }
.cfg__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.cfg__confirm { align-items: center; text-align: center; padding-block: 24px; }
.cfg__confirm-tick { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.cfg__confirm .lead { margin-inline: auto; }
.cfg__ref { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.cfg__confirm-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cfg__summary { grid-column: 2; grid-row: 1 / 3; }
.cfg__sum-card { position: sticky; top: calc(var(--hdr) + 24px); background: var(--surface); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.cfg__sum-label { font-size: 15px; font-weight: 500; color: var(--muted); }
.cfg__sum-total { display: flex; align-items: baseline; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.cfg__sum-from { font-size: 15px; color: var(--muted); }
.cfg__sum-n { font-size: 44px; line-height: 52px; font-weight: 400; letter-spacing: -.025em; }
.cfg__sum-lines { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cfg__sum-lines li { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.cfg__sum-lines li span:first-child { color: var(--muted); }
.cfg__sum-lines li span:last-child { font-weight: 500; text-align: right; }
.cfg__stages { padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.cfg__stages-label { font-size: 15px; font-weight: 500; }
.cfg__stages-bar { display: flex; gap: 3px; height: 8px; }
.cfg__stages-seg { border-radius: 2px; }
.seg-deposit { background: #111111; }
.seg-build { background: #4F4E4A; }
.seg-cert { background: #8F8E89; }
.seg-delivery { background: #C9C7C0; }
.cfg__stages-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cfg__stages-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.cfg__stages-dot { width: 10px; height: 10px; border-radius: 50%; }
.cfg__stages-name { display: flex; flex-direction: column; }
.cfg__stages-name em { font-style: normal; font-size: 13px; color: var(--muted); }
.cfg__stages-amt { font-weight: 500; white-space: nowrap; }
.cfg__excl { font-size: 13px; line-height: 1.5; color: var(--muted); padding-top: 20px; border-top: 1px solid var(--line); }
.cfg__excl-label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
@media (max-width: 1100px) {
  .cfg__shell { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; }
  .cfg__sum-card { padding: 24px; }
  .cfg__sum-n { font-size: 36px; line-height: 44px; }
}
@media (max-width: 900px) {
  .cfg { padding-block: 40px var(--secpad); }
  .cfg__head { margin-bottom: 32px; }
  .cfg__shell { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cfg__steps, .cfg__main, .cfg__summary { grid-column: 1; grid-row: auto; }
  .cfg__steps { width: 100%; }
  .cfg__sum-card { position: static; }
  .cfg__loc, .cfg__form { grid-template-columns: minmax(0, 1fr); }
  .cfg__stephead-title { font-size: 24px; line-height: 30px; }
  .cfg__finish { gap: 14px; }
  .cfg__finish-sw { width: 72px; }
  .cfg__finish-name, .cfg__size-name { font-size: 18px; line-height: 24px; }
  .cfg__upg { gap: 14px; }
  .cfg__nav .btn { flex: 1 1 auto; }
}

/* ---------- pages that are currently hidden (kept styled so they return clean) ---------- */
.pstrip__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.pstrip__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; position: sticky; top: calc(var(--hdr) + 40px); }
.pstrip__list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.pstrip__step { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.pstrip__n, .pstrip__time { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pstrip__name { font-size: 20px; font-weight: 500; }
.lc__grid, .lcx__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.lc__card, .lcx__card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lc__photo, .lcx__media img { aspect-ratio: 4 / 3; height: auto; border-radius: var(--r-card); margin-bottom: 8px; }
.lcx__media { display: block; }
.lcx__body { display: flex; flex-direction: column; gap: 10px; }
.lc__title, .lcx__title { font-size: 22px; line-height: 28px; font-weight: 500; }
.lc__sum, .lcx__sum { color: var(--muted); font-size: 16px; }
.lcx__link { font-weight: 500; }
.lc > .wrap > p { margin-top: 40px; }
.jstep { list-style: none; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; padding: 40px 0; border-top: 1px solid var(--line); }
.journey__list { list-style: none; padding: 0; }
.jstep__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.jstep__name { font-size: 28px; line-height: 34px; }
.jstep__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 20px; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: var(--track); font-size: 13px; font-weight: 500; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.faq__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 80px; }
.faq__nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--hdr) + 32px); align-self: start; font-size: 15px; }
.faq__nav a { display: flex; align-items: center; min-height: 36px; color: var(--muted); }
.faq__nav a:hover { color: var(--ink); }
.faq__nav-h { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.faq__group { margin-bottom: 72px; scroll-margin-top: 96px; }
.faq__group-h { font-size: 28px; line-height: 34px; font-weight: 500; padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: 20px; line-height: 28px; font-weight: 500; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { width: 36px; height: 36px; border-radius: 50%; background: var(--track); flex: none; position: relative; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 11px; right: 11px; top: 17.25px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--ink); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: #fff; }
.faq__item[open] .faq__icon::after { transform: rotate(0); }
.faq__a { color: var(--muted); max-width: 68ch; padding-bottom: 24px; }
.contactsec__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; }
.contactsec__details { display: flex; flex-direction: column; gap: 24px; }
.contactsec__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.cdetails { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.cdetails div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cdetails dt { color: var(--muted); font-size: 15px; }
.calcsec__head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 48px; }
.calc { background: var(--surface); border-radius: 16px; padding: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 80px; }
.calc__inputs { display: flex; flex-direction: column; gap: 32px; }
.calc__field { display: flex; flex-direction: column; gap: 10px; }
.calc__field label { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--muted); }
.calc__field output { font-size: 20px; font-weight: 500; color: var(--ink); }
.calc__hint { font-size: 13px; color: var(--muted); }
input[type=range] { appearance: none; -webkit-appearance: none; width: 100%; height: 36px; background: transparent; accent-color: var(--ink); }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--track); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 28px; margin-top: -10px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); border: 0; }
input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--track); }
input[type=range]::-moz-range-thumb { width: 44px; height: 28px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); border: 0; }
.calc__out { display: flex; flex-direction: column; gap: 20px; }
.calc__out-label { font-size: 15px; color: var(--muted); }
.calc__big { font-size: 56px; line-height: 1.05; font-weight: 300; letter-spacing: -.025em; }
.calc__big em { font-style: normal; font-size: 17px; color: var(--muted); margin-left: 10px; letter-spacing: 0; }
.calc__rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.calc__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.calc__rows dt { color: var(--muted); }
.calc__rows dd { font-weight: 500; }
.calc__fine { font-size: 13px; color: var(--muted); }
.article__head { display: flex; flex-direction: column; gap: 24px; padding-top: 72px; max-width: 900px; margin-inline: auto; }
.article__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--muted); }
.article__hero { margin-top: 48px; }
.article__hero img { aspect-ratio: 21 / 9; width: 100%; object-fit: cover; border-radius: var(--r-photo); }
.article__layout { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 80px; padding-block: 96px; justify-content: center; }
.article__toc { position: sticky; top: calc(var(--hdr) + 32px); align-self: start; display: flex; flex-direction: column; gap: 16px; font-size: 15px; }
.article__toc nav { display: flex; flex-direction: column; gap: 10px; }
.article__toc nav a { color: var(--muted); }
.article__toc nav a:hover { color: var(--ink); }
.article__body { display: flex; flex-direction: column; gap: 20px; }
.article__body h2 { font-size: 30px; line-height: 38px; letter-spacing: -.017em; margin-top: 32px; }
.article__end { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 32px; }
.rel { padding-bottom: 96px; }
.rel__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.rel__card { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: var(--r-card); background: var(--surface); }
.rel__title { font-size: 20px; font-weight: 500; }
@media (max-width: 900px) {
  .pstrip__grid, .contactsec__grid, .faq__layout, .calc, .article__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pstrip__head, .faq__nav, .article__toc { position: static; }
  .lc__grid, .lcx__grid, .rel__grid, .jstep__split { grid-template-columns: minmax(0, 1fr); }
  .calc { padding: 24px; }
  .jstep { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .article__head { padding-top: 40px; }
  .article__layout { padding-block: 48px; }
}

/* ---------- model cards: landscape frame, the whole house visible ---------- */
.range__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; margin-inline: 0; padding-inline: 0; overflow: visible; scroll-snap-type: none; }
.range__card { flex: none; scroll-snap-align: none; }
.range__media { aspect-ratio: 3 / 2; }
.range__photo { object-position: 50% 62%; }
.range__media::after { background: linear-gradient(to top, rgba(12, 12, 12, .5) 0%, rgba(12, 12, 12, 0) 34%); }
.range__name { left: 28px; right: 28px; bottom: 24px; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; }
@media (min-width: 1100px) { .range__grid { gap: 64px 32px; } }
@media (max-width: 760px) { .range__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } .range__name { left: 20px; bottom: 18px; } }
.alt__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.footer__brand img.brand { height: 32px; }
@media (max-width: 900px) { img.brand { height: 26px; } .footer__brand img.brand { height: 30px; } }


/* ---------- photo bands (Unit Lab factory + site photography) ---------- */
.shots__head { margin-bottom: 40px; display: flex; flex-direction: column; gap: 16px; }
.shots__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 24px; }
.shots__fig { margin: 0; }
.shots__fig img { display: block; width: 100%; height: auto; aspect-ratio: var(--r, 3 / 2); object-fit: cover; border-radius: var(--r-card); background: var(--track); }
.shots__fig figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--muted); }
.shots__note { margin: 28px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .shots__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .shots__fig img { aspect-ratio: 3 / 2; } }

.shots__grid--mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; align-items: stretch; }
.shots__grid--mosaic .shots__fig:first-child { grid-row: 1 / span 2; display: flex; flex-direction: column; }
.shots__grid--mosaic .shots__fig:first-child img { flex: 1 1 auto; min-height: 0; height: 100%; aspect-ratio: auto; }
@media (max-width: 900px) {
  .shots__grid--mosaic { grid-template-columns: minmax(0, 1fr); }
  .shots__grid--mosaic .shots__fig:first-child { grid-row: auto; display: block; }
  .shots__grid--mosaic .shots__fig:first-child img { height: auto; aspect-ratio: 3 / 4; }
}

.shots__grid[style*="--tpl"] { grid-template-columns: var(--tpl); }
@media (max-width: 900px) { .shots__grid[style*="--tpl"] { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Beta review changes (memo of 20 October 2026)
   ========================================================================== */

/* side gutters leave room for the fixed Enquire tab on the right edge */
@media (min-width: 901px) { :root { --gut: 52px; } }

/* ---------- header: tap-to-call phone ---------- */
.nav__phone { gap: 8px; padding: 0 18px; font-weight: 600; }
.nav__phone svg { flex: none; }
.nav__phone-n { font-size: 15px; letter-spacing: .01em; }
@media (min-width: 901px) and (max-width: 1180px) {
  .nav__phone { width: 44px; padding: 0; }
  .nav__phone-n { display: none; }
}
@media (max-width: 900px) {
  .nav__right { gap: 8px; }
  .nav__phone { padding: 0 14px; background: var(--track); box-shadow: none; }
  .nav__phone-n { font-size: 14px; }
}
@media (max-width: 359px) {
  .nav__phone { width: 44px; padding: 0; }
  .nav__phone-n { display: none; }
}

/* ---------- home hero: two prominent calls to action ---------- */
.hero__actions .btn { min-height: 52px; font-size: 16px; }
.hero__actions .btn-dark:has(.ar) { padding-left: 26px; }
.hero__actions .btn-ghost { padding-inline: 26px; }

/* ---------- why choose: seven benefit cards ---------- */
.why__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.why__card { grid-column: span 3; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border-radius: var(--r-card); overflow: hidden; }
.why__card:nth-child(n+5) { grid-column: span 4; }
.why__photo { aspect-ratio: 3 / 2; height: auto; width: 100%; border-radius: var(--r-card) var(--r-card) 0 0; }
.why__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 28px; }
.why__name { font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -.01em; }
.why__text { color: var(--muted); font-size: 16px; line-height: 24px; }
@media (max-width: 1100px) {
  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .why__card, .why__card:nth-child(n+5) { grid-column: auto; }
  .why__card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .why__grid { grid-template-columns: minmax(0, 1fr); }
  .why__card:last-child { grid-column: auto; }
  .why__body { padding: 20px 20px 24px; }
}

/* ---------- BIN record: longer headline ---------- */
.cert__title { max-width: 1100px; }

/* ---------- configurator: a model with no published price ---------- */
.cfg__sum-por { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.cfg__sum-por-n { font-size: 32px; line-height: 38px; letter-spacing: -.02em; }
.cfg__sum-por-note { font-size: 15px; line-height: 22px; color: var(--muted); }

/* ---------- mobile bar: appears after a little scroll ---------- */
@media (max-width: 900px) {
  .js .mbar { transform: translateY(105%); transition: transform .35s var(--ease); }
  .js .mbar.is-in { transform: none; }
}

/* ---------- site-wide Enquire tab (desktop) and its dialog ---------- */
.enq-tab { display: none; }
.js .enq-tab {
  display: flex; align-items: center; justify-content: center;
  position: fixed; top: 50%; right: 0; z-index: 40;
  width: 48px; height: 150px; padding: 0 4px 0 0;
  transform: translate(4px, -50%);   /* 4px sits off-screen; hover slides it out */
  background: #111; color: #fff;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  border-radius: 8px 0 0 8px;
  transition: transform .25s var(--ease);
}
.js .enq-tab:hover { transform: translate(0, -50%); }
.enq-tab:focus-visible { outline: 2px solid #fff; outline-offset: -5px; box-shadow: 0 0 0 2px rgba(17, 17, 17, .35); }
@media (max-width: 900px), print { .js .enq-tab { display: none; } }

.enq { border: 0; padding: 0; border-radius: var(--r-card); width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; background: #fff; color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.enq::backdrop { background: rgba(17, 17, 17, .5); }
.enq__panel { display: flex; flex-direction: column; gap: 16px; padding: 20px 32px 32px; }
.enq__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.enq__call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 600; }
.enq__close { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--track); font-size: 15px; font-weight: 500; transition: background .2s, color .2s; }
.enq__close:hover { background: var(--ink); color: #fff; }
.enq .form { background: transparent; padding: 0; }
body:has(.enq[open]) { overflow: hidden; }

/* ---------- home hero: sunset photograph, text kept clear of the family ---------- */
.hero__photo { object-position: 50% 62%; }
@media (min-width: 901px) {
  .hero__inner { grid-template-columns: minmax(0, min(620px, 52%)) minmax(0, 1fr); }
  .hero__title { grid-row: auto; grid-column: 1; font-size: clamp(40px, 4.6vw, 68px); }
  .hero__lead { grid-column: 1; align-self: start; }
  .hero__actions { grid-column: 1; }
}

/* ---------- life band: people living in the homes ---------- */
.life__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; }
.life__fig { grid-column: span var(--span, 4); margin: 0; min-width: 0; }
.life__fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-card); background: var(--track); }
.life__fig figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--muted); }
.life__note { margin-top: 32px; }
@media (max-width: 900px) {
  .life__grid { gap: 28px 16px; }
  .life__fig { grid-column: span 6; }
  .life__fig:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .life__fig { grid-column: 1 / -1; } }

/* ---------- full-bleed hero (desktop): the photograph runs edge to edge, text stays on the page grid ---------- */
@media (min-width: 901px) {
  .hero { padding-top: 0; overflow-x: clip; }
  .hero__media { margin-inline: calc(50% - 50vw); border-radius: 0; }
  .hero__inner {
    padding-left: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
    padding-right: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
  }
}

/* ---------- Enquire tab: Kozzie green with a gold dot, sentence case, reads upwards ---------- */
.js .enq-tab {
  flex-direction: column; gap: 12px; width: 46px; height: auto; padding: 18px 0 20px;
  writing-mode: horizontal-tb; background: #206028; border-radius: 14px 0 0 14px;
  font-size: 14px; font-weight: 500; letter-spacing: .02em; text-transform: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  transition: transform .25s var(--ease), background .2s;
}
.js .enq-tab:hover { background: #17481e; }
.enq-tab__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #D8A028; }
.enq-tab__txt { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }

/* ---------- standard size shown next to every model name ---------- */
.sz { white-space: nowrap; }
.range__size { display: block; margin-top: 2px; font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, .92); }
.phero__size { margin-top: -8px; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -.005em; }
.phero__size > span:not(.sz) { font-size: 15px; font-weight: 400; color: var(--muted); }
.ktable__size { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--muted); }
.footer__sz { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .6); }
.footer__col a:has(.footer__sz) { padding-block: 8px; }

/* ---------- the four floor plans, to one scale, as a drawing sheet (no script) ---------- */
.fp { margin-top: 72px; --fp-bg: #fff; --fp-ink: #1F3A2C; }
.section--surf .fp { --fp-bg: var(--surface); }
.fp__title { font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -.01em; }
/* --k = pixels per metre, shared by every plan: the widest row fills the width, the other row is shorter */
.fp__rows { container-type: inline-size; margin-top: 28px; padding-right: 34px; --gap: 52px; --k: calc((100cqw - var(--gap) * (var(--n) - 1)) / var(--span)); }
.fp__grid { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); align-items: start; }
.fp__item { min-width: 0; }
.fp__link { display: flex; flex-direction: column; gap: 2px; }
.fp__sheet { position: relative; display: block; margin-top: 30px; margin-bottom: 14px; }
.fp__plan { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 22px rgba(31, 58, 44, .16)); transition: filter .25s; }
.fp__dim { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--fp-ink); font-size: 12px; line-height: 14px; letter-spacing: .02em; font-variant-numeric: tabular-nums; pointer-events: none; }
.fp__dim b { font-weight: 400; background: var(--fp-bg); }
.fp__dim--l { left: 0; right: 0; top: -24px; height: 14px; background: linear-gradient(var(--fp-ink), var(--fp-ink)) center / 100% 1px no-repeat, linear-gradient(var(--fp-ink), var(--fp-ink)) left / 1px 100% no-repeat, linear-gradient(var(--fp-ink), var(--fp-ink)) right / 1px 100% no-repeat; }
.fp__dim--l b { padding: 0 8px; }
.fp__dim--w { top: 0; bottom: 0; right: -24px; width: 14px; writing-mode: vertical-rl; background: linear-gradient(var(--fp-ink), var(--fp-ink)) center / 1px 100% no-repeat, linear-gradient(var(--fp-ink), var(--fp-ink)) top / 100% 1px no-repeat, linear-gradient(var(--fp-ink), var(--fp-ink)) bottom / 100% 1px no-repeat; }
.fp__dim--w b { padding: 8px 0; }
.fp__name { font-size: 16px; line-height: 22px; font-weight: 500; }
.fp__size { font-size: 14px; line-height: 20px; color: var(--muted); }
.fp__link:hover .fp__plan { filter: drop-shadow(0 14px 28px rgba(31, 58, 44, .26)); }
.fp__link:hover .fp__name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fp__note { margin-top: 8px; }
@media (max-width: 1000px) { .fp__rows { --gap: 40px; padding-right: 26px; } .fp__size { font-size: 13px; } .fp__dim { font-size: 11px; } }
@media (max-width: 760px) {
  .fp { margin-top: 48px; }
  .fp__rows { margin-top: 20px; --k: calc((100cqw - 4px) / var(--longest)); }
  .fp__grid { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 0; }
  .fp__item { width: calc(var(--k) * var(--l)); margin-bottom: 36px; }
  .fp__size { font-size: 14px; }
}

/* ---------- hero carousel: swipe or arrows, one home per slide ---------- */
.hero__track {
  position: absolute; inset: 0; z-index: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.hero__track::-webkit-scrollbar { display: none; }
.hero__track .hero__photo { position: static; flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.hero__inner { pointer-events: none; }
.hero__inner a, .hero__inner .btn { pointer-events: auto; }
.hero__ctl { position: absolute; z-index: 3; right: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); bottom: 56px; display: flex; align-items: center; gap: 12px; color: #fff; }
.hero__cap { font-size: 14px; line-height: 20px; letter-spacing: .01em; margin-right: 4px; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.hero__dots { display: flex; gap: 8px; }
.hero__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .5); cursor: pointer; transition: background .2s, transform .2s; position: relative; }
.hero__dot::after { content: ""; position: absolute; inset: -10px; }
.hero__dot[aria-current="true"] { background: #fff; transform: scale(1.25); }
.hero__nav { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); cursor: pointer; transition: background .2s, transform .2s; }
.hero__nav:hover { background: #fff; transform: scale(1.05); }
.hero__ctl :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (min-width: 901px) and (max-width: 1100px) { .hero__ctl { bottom: 40px; } }
@media (max-width: 900px) {
  .hero__track { position: static; grid-area: 1 / 1; aspect-ratio: 4 / 5; border-radius: var(--r-photo); }
  .hero__track .hero__photo { height: 100%; aspect-ratio: auto; border-radius: 0; }
  .hero__ctl { right: 14px; bottom: auto; top: auto; align-self: start; justify-self: end; position: relative; grid-area: 1 / 1; margin: 14px 14px 0 0; gap: 8px; }
  .hero__ctl .hero__cap, .hero__ctl .hero__nav { display: none; }
  .hero__ctl .hero__dots { padding: 8px 10px; border-radius: 999px; background: rgba(12, 12, 12, .35); }
}
@media (prefers-reduced-motion: reduce) { .hero__track { scroll-behavior: auto; } }

/* ---------- header flyout: the four homes, drawn to one scale ---------- */
.nav { position: sticky; }
.nav__mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; padding: 0 max(var(--gut), env(safe-area-inset-left, 0px)); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s; pointer-events: none; }
.nav__mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; pointer-events: auto; }
.nav__mega-inner { position: relative; max-width: var(--max); margin: 8px auto 0; padding: 20px 20px 56px; background: #fff; border-radius: 20px; box-shadow: 0 18px 48px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .06); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mega__card { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 14px; border-radius: 14px; color: var(--ink); text-decoration: none; transition: background .2s; }
.mega__card:hover, .mega__card:focus-visible { background: var(--surface); }
.mega__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 10px; border-radius: 12px; background: var(--ph); }
.mega__name { font-size: 17px; line-height: 24px; font-weight: 500; }
.mega__size { font-size: 14px; line-height: 20px; color: var(--muted); }
.mega__all { position: absolute; left: 36px; bottom: 18px; }
.nav__drawer-links a.nav__sub { padding-left: 20px; font-size: 17px; color: var(--muted); }
@media (max-width: 900px) { .nav__mega { display: none; } }
@media (prefers-reduced-motion: reduce) { .nav__mega { transition: none; transform: none; } }

.model__3d { margin: 20px 0 0; }

.hero__pp-play { display: none; }
.hero__pp.is-paused .hero__pp-pause { display: none; }
.hero__pp.is-paused .hero__pp-play { display: block; }
@media (max-width: 900px) { .hero__ctl .hero__pp { display: none; } }