/* Content-led layouts: viewport height never limits readable page content. */
:root { --gutter: clamp(16px, 3vw, 32px); --nav-height: 74px; }
html { scroll-padding-top: calc(var(--nav-height) + 20px); }
.wrap { width: 100%; padding-inline: var(--gutter); }
.standalone-page main { padding-top: calc(var(--nav-height) + 20px); min-height: 65svh; }
.standalone-page h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.1; margin-top: 18px; }
.menu-submenu a[aria-current="page"] { color: var(--violet-lt); background: rgba(var(--highlight-rgb),.1); border-radius: 4px; }
:where(section, footer, .wrap) :where(div, article, form, fieldset) { min-width: 0; }
:where(h1, h2, h3, h4, p, .eyebrow, .mono, .foot-col a) { overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; }
input, select, textarea { max-width: 100%; min-width: 0; }
.lead-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lead-status { color: var(--violet-lt); font-size: 14px; line-height: 1.5; margin: 16px 0 0; overflow-wrap: anywhere; }
.lead-status:empty { display: none; }
.lead-error { color: #ffb8b8; }
button:disabled { opacity: .65; cursor: wait; }
.btn { max-width: 100%; min-height: 44px; white-space: normal; text-align: center; justify-content: center; }
.btn svg { flex-shrink: 0; }
:where(.hero-cta, .st-cta, .of-cta, .kv-cta, .mc-cta, .cn-cta, .acc-cta) { flex-wrap: wrap; }
.nav { gap: 20px; height: var(--nav-height); }
.nav .brand, .nav-cta, .burger { flex-shrink: 0; }
.nav .brand { flex-shrink: 1; min-width: 0; }
.nav .brand .wm b { white-space: normal; line-height: 1.15; }
.navlinks { min-width: 0; }
.mobile-menu {
  top: var(--nav-height); bottom: 0; height: auto; padding: 20px var(--gutter) max(24px, env(safe-area-inset-bottom));
  justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(-12px); visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.mobile-menu > * { flex-shrink: 0; }
.mobile-menu a { font-size: clamp(18px, 3vw, 24px); line-height: 1.3; min-height: 44px; padding: 12px 0; }
.mobile-menu .btn { font-size: 16px; padding: 14px 20px; margin-top: 12px; }
body.menu-open .mobile-menu { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
body.menu-open #yvChatFab, body.menu-open #ycTeaser, body.menu-open #yvChat { display: none; }
body.menu-open header, header.scrolled { background: rgba(var(--surface-rgb),.96); }
.hero { min-height: 100svh; padding-block: calc(var(--nav-height) + 64px) 160px; }
.hero h1 { font-size: clamp(34px, 6vw, 82px); }
:where(.st-hero, .of-hero, .kv-hero, .mc-hero, .cn-hero, .acc-hero) {
  min-height: 90svh; padding-block: calc(var(--nav-height) + clamp(36px, 6vw, 80px)) clamp(48px, 8vw, 90px);
}
.swatches { flex-wrap: wrap; }
.swatch { flex-shrink: 0; }
.swatch-row { max-width: calc(100% - 2 * var(--gutter)); }
.use-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.spec-cards, .spec-mini { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.color-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.build-flow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.use-card .txt { padding: clamp(20px, 2vw, 26px); }
.use-card h3 { line-height: 1.2; }
.size-tabs, .gal-tabs { flex-wrap: wrap; }
.size-tab, .gal-tabs button, .slot, .st-view { min-height: 44px; }
.size-price, .size-specs .r { flex-wrap: wrap; }
.foot-top { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.foot-col a { min-height: 40px; }
.foot-bot { align-items: flex-start; }
footer { background: var(--void) !important; }
.yc-head, .yc-inrow { flex-shrink: 0; }
.yc-msgs { min-height: 0; }
.yc-inrow input { font-family: 'Archivo', sans-serif; font-size: 16px; width: 0; }
#yvChat { height: min(600px, calc(100dvh - 110px)); max-width: calc(100vw - 24px); }
.toast { width: max-content; max-width: calc(100% - 32px); white-space: normal; visibility: hidden; opacity: 0; pointer-events: none; }
.toast.show { visibility: visible; opacity: 1; }
:focus-visible { outline: 2px solid var(--violet-lt); outline-offset: 4px; }

@media (max-width: 1200px) {
  .navlinks, .nav-phone, .nav-agent { display: none; }
  .burger { display: flex; min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
  .nav-cta { margin-left: auto; gap: 12px; }
}
@media (max-width: 1020px) {
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-dock {
    position: relative; left: auto; top: auto; transform: none; align-self: flex-start;
    width: calc(100% - 2 * var(--gutter)); max-width: 620px;
    margin: 32px var(--gutter) 0; padding: 20px;
  }
  .st-dock .swatches { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .st-dock .swatch { width: 36px; height: 36px; }
  .st-scrolldown { position: relative; left: auto; bottom: auto; transform: none; text-align: center; margin-top: 32px; }
  .st-hero-in { margin-inline: 0; }
  body.st-focus .st-hero { min-height: 90svh; justify-content: flex-end; }
  body.st-focus .st-dock { background: rgba(var(--surface-rgb),.9); }
}
@media (max-width: 760px) {
  :root { --nav-height: 68px; }
  header { background: rgba(var(--surface-rgb),.94); border-bottom: 1px solid var(--line); }
  .nav { gap: 12px; }
  .nav .brand { gap: 8px; }
  .nav .brand .mark { width: 28px; height: 28px; }
  .nav .brand .wm b { font-size: 16px; }
  .nav .brand .wm span { font-size: 7px; letter-spacing: .22em; }
  .nav-cta > .btn { font-size: 13px; padding: 10px 14px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding-bottom: 48px; }
  .hero-inner { flex: none; }
  .hero-grad { background: linear-gradient(180deg, rgba(var(--surface-rgb),.88), rgba(var(--surface-rgb),.7) 65%, rgba(var(--surface-rgb),.82)); }
  :where(.st-hero-scrim, .of-hero-scrim, .kv-hero-scrim, .mc-hero-scrim, .cn-hero-scrim, .acc-hero-scrim) {
    background: linear-gradient(180deg, rgba(var(--surface-rgb),.86), rgba(var(--surface-rgb),.7));
  }
  .swatch-row { position: relative; inset: auto; align-items: flex-start; margin: 36px var(--gutter) 0; }
  .scrollcue { display: none; }
  .hero-badges { gap: 14px 20px; margin-top: 28px; }
  .hero-cta { margin-top: 28px; }
  :where(.st-h1, .of-h1, .kv-h1, .mc-h1, .cn-h1, .acc-h1) { font-size: clamp(34px, 7vw, 52px); line-height: 1.1; }
  :where(.sec, .st-sec, .of-sec, .kv-sec, .mc-sec, .cn-sec, .acc-sec) { padding-block: clamp(44px, 8vw, 64px); }
  .thesis-grid, .spec-grid, .size-stage, .start-grid, .showroom-grid, .contact-grid { gap: 28px; }
  .size-info { padding: 8px 20px 28px; }
  .fld-row { grid-template-columns: minmax(0, 1fr); }
  .of-srow, .st-row, .cn-srow { padding-inline: 16px; gap: 10px; }
  .st-row { grid-template-columns: 60px minmax(0, 1fr); }
  .of-srow { grid-template-columns: 56px minmax(0, 1fr); }
  .cn-srow { grid-template-columns: 80px minmax(0, 1fr); }
  :where(.st-row, .of-srow, .cn-srow) .pr { grid-column: 2; text-align: left; }
  .gal2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #vignette { opacity: .35; }
  #grain { display: none; }
}
@media (max-width: 480px) {
  .foot-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .foot-bot { flex-direction: column; }
  .foot-col a { padding-block: 10px; }
  .hero-cta .btn, :where(.st-cta, .of-cta, .kv-cta, .mc-cta, .cn-cta, .acc-cta) .btn { width: 100%; }
  .acc-cats, .kv-uses, .cn-uses, .mc-uses { grid-template-columns: minmax(0, 1fr); }
  .fin-logos { flex-wrap: wrap; }
  .fin-logos .fl { min-width: 0; width: 100%; }
  .fin-logos2 .fl { min-width: 0; }
  .fin-block, .fin-card, form.quote, form.schedule, .biz-band .txt { padding: 24px 18px; }
  #yvChatFab { width: 48px; height: 48px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  #yvChat { inset: auto 12px 72px; width: auto; height: min(560px, calc(100dvh - 92px)); }
  #ycTeaser { right: 68px; bottom: 20px; max-width: calc(100vw - 92px); }
}
@media (max-width: 359px) {
  .nav-cta > .btn { display: none; }
  .gal2, .gal-grid { grid-template-columns: minmax(0, 1fr); }
  .gal-grid .big2 { grid-column: auto; }
  .hero h1 { font-size: 32px; }
}
@media (max-height: 500px) and (min-width: 481px) {
  .hero { padding-top: calc(var(--nav-height) + 32px); padding-bottom: 48px; }
  .swatch-row { position: relative; inset: auto; margin: 28px var(--gutter) 0; align-items: flex-start; }
  .hero { flex-direction: column; align-items: stretch; }
  .scrollcue { display: none; }
  #yvChat { bottom: 12px; height: calc(100dvh - 24px); }
  #yvChatFab { width: 48px; height: 48px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* One compact navigation, with explicit click-to-expand sections at every width. */
.nav-cta { margin-left: auto; gap: 12px; }
.burger { display: flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.mobile-menu { gap: 0; }
.menu-section { width: 100%; }
.menu-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 16px 0; min-height: 52px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--frost); font-family: 'Chakra Petch', sans-serif;
  font-size: 22px; font-weight: 600; cursor: pointer; text-align: left;
}
.menu-toggle span { color: var(--violet-lt); transition: transform .2s; }
.menu-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.menu-submenu { padding: 8px 12px 16px; background: rgba(var(--highlight-rgb),.06); border-bottom: 1px solid var(--line); }
.menu-submenu[hidden] { display: none; }
.mobile-menu .menu-submenu a { display: block; font-size: 15px; line-height: 1.4; padding: 12px 4px; }
.menu-submenu a b { display: block; font-weight: 600; }
.menu-submenu a small { display: block; color: var(--mist); font-family: 'Archivo', sans-serif; font-size: 12px; margin-top: 3px; }
.menu-submenu a:hover { color: var(--violet-lt); }
.menu-solutions .nav-mega-col { padding-block: 12px; }
.menu-solutions .nav-mega-col h4 { font-size: 11px; letter-spacing: .08em; line-height: 1.5; }
.menu-solutions .nav-mega-col a { display: flex; align-items: center; gap: 10px; }
.menu-solutions .nav-mega-foot { display: block; padding: 16px 4px 0; }
.menu-solutions .nav-mega-foot > span { font-size: 13px; color: var(--mist); }
.mobile-menu > a:not(.btn) { font-size: 18px; }
@media (min-width: 761px) {
  .mobile-menu {
    left: auto; right: var(--gutter); top: calc(var(--nav-height) + 12px); bottom: auto;
    width: min(440px, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - var(--nav-height) - 24px);
    padding: 16px 24px 24px; border: 1px solid var(--line2); border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0,0,0,.6); background: rgba(var(--surface-rgb),.98);
  }
}