/* Moran AZ Homes — "It's never enough garage."
   Palette from the logo: navy #132c50, steel blue #2f5c8d, white, on cool concrete grey.
   Type: Big Shoulders Display (tall industrial caps) + Archivo (text) + DM Mono (measurements).
   Recurring motif: dimension lines. */

:root {
  --concrete: #e9ecef;
  --concrete-2: #dde1e6;
  --white: #ffffff;
  --navy: #132c50;
  --night: #0b1c34;
  --steel: #2f5c8d;
  --steel-2: #3b6fa6;
  --sky: #a9c8ec;
  --line: #cdd3da;
  --line-2: #b9c1cb;
  --text: #132c50;
  --text-2: #475870;
  --text-3: #7b889a;
  --ok: #1f7a4d;
  --warn: #b5482f;
  --radius: 4px;
  --radius-lg: 8px;
  --shadow: 0 1px 2px rgba(19,44,80,.06), 0 12px 30px -12px rgba(19,44,80,.18);
  --shadow-lg: 0 40px 70px -30px rgba(11,28,52,.45);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --wrap: 1320px;
  --header-h: 82px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--concrete); }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--text); background: var(--concrete); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }
::selection { background: var(--steel); color: var(--white); }

h1, h2, h3 { margin: 0 0 .45em; color: var(--navy); }
h1, h2 { font-family: var(--sans); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; }
h1 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); }
h2 { font-size: clamp(2.2rem, 4.4vw, 3.9rem); }
h3 { font-family: var(--sans); font-size: 1.12rem; font-weight: 700; line-height: 1.3; }
h1 em, h2 em { font-style: normal; color: var(--steel); }
p { margin: 0 0 1em; color: var(--text-2); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 36px; }
@media (max-width: 640px) { .wrap { padding: 0 18px; } }
section { padding: clamp(88px, 11vw, 150px) 0; position: relative; }
.bg-mist { background: var(--white); }
.bg-light { background: var(--white); }
.bg-ink { background: var(--navy); color: #c9d6e6; }
.bg-ink h2, .bg-ink h3, .bg-ink h1 { color: var(--white); }
.bg-ink h2 em, .bg-ink h1 em { color: var(--sky); }
.bg-ink p { color: #a9bad0; }

/* Labels: mono with a dimension tick */
.kicker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: .76rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); margin-bottom: 20px; }
.kicker::before { content: ""; width: 30px; height: 9px; border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
.bg-ink .kicker { color: var(--sky); }

.head { max-width: 860px; margin-bottom: clamp(36px, 5vw, 60px); }
.head p { font-size: 1.12rem; max-width: 640px; }
.head.center { margin-left: auto; margin-right: auto; text-align: center; }
.head.center .kicker { justify-content: center; }
.head.center p { margin-left: auto; margin-right: auto; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 56px); }
.head-row .head { margin-bottom: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; border-radius: 999px; border: 1.5px solid transparent; font-family: var(--sans); font-weight: 600; font-size: .95rem; letter-spacing: 0; line-height: 1; cursor: pointer; white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 17px; height: 17px; flex: none; transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-red, .btn-primary { background: var(--steel); color: var(--white); }
.btn-red:hover, .btn-primary:hover { background: var(--navy); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--steel); }
.btn-line, .btn-ghost { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-line:hover, .btn-ghost:hover { background: var(--navy); color: var(--white); }
.bg-ink .btn-line, .bg-ink .btn-ghost, .on-photo .btn-ghost { border-color: rgba(255,255,255,.7); color: var(--white); }
.bg-ink .btn-line:hover, .bg-ink .btn-ghost:hover, .on-photo .btn-ghost:hover { background: var(--white); color: var(--navy); }
.bg-ink .btn-navy { background: var(--white); color: var(--navy); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 600; font-size: .98rem; color: var(--navy); border-bottom: 1.5px solid var(--steel); padding-bottom: 3px; white-space: nowrap; }
.link-arrow:hover { color: var(--steel); }
.link-arrow svg { width: 16px; height: 16px; }
.bg-ink .link-arrow, .path .link-arrow { color: var(--white); border-color: var(--sky); }

/* Logo */
.logo { display: inline-flex; align-items: center; }
.logo img { height: 64px; width: auto; }
.logo .lg-light { display: none; }
@media (max-width: 640px) { .logo img { height: 54px; } }

/* Header (light) */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; background: rgba(233,236,239,.94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { font-family: var(--sans); font-weight: 500; font-size: .95rem; color: var(--text-2); padding: 6px 0; position: relative; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--navy); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--steel); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-phone { font-family: var(--mono); font-size: .86rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; color: var(--navy); }
.header-phone svg { width: 15px; height: 15px; color: var(--steel); }
.site-header .btn { padding: 12px 20px; font-size: .9rem; }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--navy); cursor: pointer; padding: 10px; }
.menu-btn span { display: block; height: 2.5px; background: currentColor; margin: 5px 0; transition: transform .3s var(--ease), opacity .2s; }
@media (max-width: 1240px) { .header-phone { display: none; } }
@media (max-width: 1040px) { .nav, .site-header .btn { display: none; } .menu-btn { display: block; } }
.mobile-menu { position: fixed; inset: 0; z-index: 49; background: var(--concrete); padding: calc(var(--header-h) + 24px) 24px 32px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; overflow-y: auto; }
.mobile-menu a { font-family: var(--sans); font-weight: 700; letter-spacing: -.03em; font-size: 2.3rem; line-height: 1.25; color: var(--navy); }
.mobile-menu .btn { margin-top: 24px; font-size: 1rem; }
.mobile-menu .mm-phone { font-family: var(--mono); font-weight: 400; text-transform: none; font-size: 1rem; color: var(--text-2); margin-top: 18px; }
body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
body.menu-open .menu-btn span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
main { padding-top: var(--header-h); }

/* ============ HOME HERO: the motto ============ */
.motto-hero { padding: clamp(40px, 6vw, 70px) 0 0; overflow: hidden; }
.motto-top { display: grid; grid-template-columns: 1fr minmax(320px, 420px); align-items: end; gap: 40px; }
@media (max-width: 900px) { .motto-top { grid-template-columns: 1fr; gap: 24px; } }
.motto-hero h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -.005em; font-size: clamp(4.6rem, 14vw, 13.5rem); line-height: .8; margin: 0; }
.motto-hero h1 small { display: block; white-space: nowrap; font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; font-size: clamp(.7rem, 1vw, .82rem); margin-bottom: 1.6em !important; letter-spacing: .02em; color: var(--steel); line-height: 1; margin-bottom: .18em; }
.motto-aside { padding-bottom: 18px; }
.motto-aside p { font-size: 1.08rem; color: var(--text-2); }
.marquee { margin-top: 6px; overflow: hidden; white-space: nowrap; border-top: 3px solid var(--navy); border-bottom: 3px solid var(--navy); background: var(--navy); }
.marquee-track { display: inline-flex; animation: marquee 22s linear infinite; }
.marquee span { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(5.5rem, 17vw, 16rem); line-height: .86; letter-spacing: -.01em; color: var(--white); padding: .02em .18em .04em 0; }
.marquee span:nth-child(even) { color: transparent; -webkit-text-stroke: 2px var(--sky); }
.marquee span::after { content: "\2192"; font-size: .45em; vertical-align: middle; margin-left: .25em; color: var(--sky); -webkit-text-stroke: 0; }
@keyframes marquee { to { transform: translateX(-50%); } }
.hero-bay { position: relative; height: clamp(360px, 62vh, 720px); overflow: hidden; background: var(--night); }
.hero-bay img { width: 100%; height: 100%; object-fit: cover; }
.hero-strip { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); border-bottom: 1px solid var(--line); background: var(--white); }
.hero-strip > div { padding: 26px 30px; border-left: 1px solid var(--line); }
.hero-strip > div:first-child { border-left: 0; display: flex; align-items: center; }
.hero-strip strong { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: .9; color: var(--navy); }
.hero-strip span { font-family: var(--mono); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
@media (max-width: 900px) { .hero-strip { grid-template-columns: 1fr 1fr; } .hero-strip > div:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line); } .hero-strip > div:nth-child(2) { border-left: 0; } .hero-strip > div:nth-child(4) { border-left: 0; border-top: 1px solid var(--line); grid-column: 1 / -1; } }

/* Dimension line */
.dim { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.dim::before, .dim::after { content: ""; flex: 1; height: 11px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
.dim::before { border-left: 1.5px solid currentColor; }
.dim::after { border-right: 1.5px solid currentColor; }

/* ============ Garage vs house ============ */
.gvh { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 2px solid var(--navy); }
.gvh-row { display: grid; grid-template-columns: 260px 1fr 170px; gap: 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.gvh-name b { display: block; font-weight: 700; color: var(--navy); font-size: .98rem; }
.gvh-name span { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.gvh-bars { display: grid; gap: 6px; }
.bar { height: 16px; border-radius: 2px; position: relative; width: 0; transition: width 1.2s var(--ease); }
.in .bar { width: var(--w); }
.bar.g { background: var(--steel); }
.bar.h { background: transparent; border: 1.5px solid var(--navy); height: 12px; }
.bar small { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: .72rem; color: var(--text-2); white-space: nowrap; }
.gvh-verdict { white-space: nowrap; font-family: var(--sans); font-weight: 600; font-size: .92rem; text-align: right; color: var(--text-3); }
.gvh-row.win .gvh-verdict { color: var(--steel); }
.gvh-legend { display: flex; gap: 24px; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 16px; }
.gvh-legend i { display: inline-block; width: 22px; height: 10px; margin-right: 8px; vertical-align: middle; }
.gvh-legend .lg { background: var(--steel); }
.gvh-legend .lh { border: 1.5px solid var(--navy); }
@media (max-width: 820px) { .gvh-row { grid-template-columns: 1fr; gap: 10px; } .gvh-verdict { text-align: left; } .bar small { left: 0; top: 100%; transform: none; margin-top: 3px; } .gvh-bars { gap: 24px; padding-bottom: 18px; } }
.gvh-note { font-family: var(--mono); font-size: .72rem; color: var(--text-3); margin-top: 16px; }
.split-head { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: end; margin-bottom: 48px; }
.split-head p { font-size: 1.1rem; }
@media (max-width: 900px) { .split-head { grid-template-columns: 1fr; gap: 10px; } }
.big-count { font-family: var(--display); font-weight: 900; font-size: clamp(5rem, 12vw, 10rem); line-height: .8; color: var(--steel); }
.big-count small { display: block; margin-top: 10px; font-family: var(--mono); font-weight: 400; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1.5; color: var(--text-2); }

/* ============ Garage-first listing rows ============ */
.lots { display: grid; gap: 22px; }
.lot { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.lot:nth-child(even) { grid-template-columns: 1fr 1.15fr; }
.lot:nth-child(even) .lot-media { order: 2; }
@media (max-width: 900px) { .lot, .lot:nth-child(even) { grid-template-columns: 1fr; } .lot:nth-child(even) .lot-media { order: 0; } }
.lot-media { position: relative; min-height: 380px; overflow: hidden; background: var(--night); }
.lot-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.lot:hover .lot-media img { transform: scale(1.04); }
.lot-media .tags { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.lot-body { padding: clamp(26px, 3.4vw, 44px); display: flex; flex-direction: column; }
.garage-line { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); margin-bottom: 6px; }
.garage-big { font-family: var(--display); font-weight: 900; font-size: clamp(3.4rem, 6vw, 5.4rem); line-height: .82; color: var(--navy); text-transform: uppercase; }
.garage-big small { font-size: .38em; color: var(--steel); letter-spacing: .02em; }
.garage-sub { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; color: var(--steel); margin: 12px 0 18px; }
.lot-name { font-weight: 700; color: var(--navy); font-size: 1.1rem; }
.lot-area { font-size: .9rem; color: var(--text-3); margin-bottom: 14px; }
.lot-price { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; font-size: 1.9rem; line-height: 1; color: var(--navy); margin-bottom: 10px; }

/* Tags & specs */
.tag { font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 3px; background: var(--white); color: var(--navy); }
.tag.red { background: var(--steel); color: var(--white); }
.tag.dark { background: var(--navy); color: var(--white); }
.specs { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); margin-bottom: 16px; }
.specs span { font-family: var(--mono); font-size: .72rem; color: var(--navy); background: var(--concrete); border-radius: 3px; padding: 5px 9px; white-space: nowrap; }
.incentive { font-size: .8rem; line-height: 1.55; background: #e7eef7; border-left: 3px solid var(--steel); color: var(--text-2); padding: 12px 14px; margin-bottom: 14px; }
.incentive b { display: block; font-size: .92rem; color: var(--navy); }
.disclose { font-size: .72rem; color: var(--text-3); line-height: 1.55; margin: 0 0 18px; }
.home-actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.home-actions .btn { padding: 15px 18px; font-size: .95rem; }

/* Home cards (portfolio page) */
.homes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .homes-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .homes-grid { grid-template-columns: 1fr; } }
.home-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.home-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.home-card[hidden] { display: none; }
.home-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--concrete-2); }
.home-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.home-card:hover .home-media img { transform: scale(1.05); }
.home-media .tags { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.bay-chip { position: absolute; left: 0; bottom: 0; z-index: 2; background: var(--navy); color: var(--white); padding: 8px 14px 6px; display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.bay-chip b { font-family: var(--display); font-weight: 900; font-size: 1.7rem; line-height: 1; letter-spacing: 0; }
.home-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.home-price { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; font-size: 1.6rem; line-height: 1.1; color: var(--navy); margin-bottom: 6px; }
.home-name { font-weight: 700; color: var(--navy); }
.home-area { font-size: .88rem; color: var(--text-3); margin-bottom: 14px; }

/* Garage-door service tiles */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.paths.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .paths.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 980px) { .paths { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .paths.four { grid-template-columns: 1fr; } }
.path { position: relative; overflow: hidden; min-height: 480px; display: flex; align-items: flex-end; background: var(--night); border-radius: var(--radius-lg); }
.path img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.path:hover img { transform: scale(1.05); }
.path::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,28,52,0) 25%, rgba(11,28,52,.7) 55%, rgba(11,28,52,.95)); }
.path-body { position: relative; z-index: 2; padding: 26px; }
.path-body .n { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sky); }
.path-body h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.03em; font-size: 1.9rem; line-height: 1.05; color: var(--white); margin: 8px 0 10px; }
.path-body p { color: #d2dcea; font-size: .94rem; margin-bottom: 18px; }

/* Fit tool */
.fit { display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: stretch; }
@media (max-width: 960px) { .fit { grid-template-columns: 1fr; } }
.fit-panel { background: var(--white); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); }
.fit-panel h3 { margin-bottom: 4px; }
.fit-panel > p { font-size: .9rem; }
.field-range { margin: 26px 0; }
.field-range label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 14px; }
.field-range output { font-family: var(--display); font-weight: 900; font-size: 2.8rem; line-height: 1; color: var(--navy); text-transform: none; }
.field-range .hint { font-size: .78rem; color: var(--text-3); margin-top: 10px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--steel) var(--p, 50%), var(--concrete-2) var(--p, 50%)); outline: none; margin: 0; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 3px; background: var(--navy); border: 3px solid var(--white); box-shadow: 0 2px 8px rgba(19,44,80,.35); cursor: grab; }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 3px; background: var(--navy); border: 3px solid var(--white); cursor: grab; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets button { border: 1.5px solid var(--line-2); background: transparent; border-radius: 3px; padding: 8px 11px; font-family: var(--mono); font-size: .7rem; color: var(--navy); cursor: pointer; transition: all .2s; }
.presets button:hover, .presets button.on { background: var(--navy); color: var(--white); border-color: var(--navy); }
.fit-viz { background: var(--navy); border-radius: var(--radius-lg); padding: 30px; display: flex; flex-direction: column; color: #c9d6e6;
  background-image: linear-gradient(rgba(169,200,236,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(169,200,236,.07) 1px, transparent 1px); background-size: 24px 24px; }
.fit-summary { font-family: var(--sans); font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.1; color: var(--white); margin-bottom: 24px; min-height: 2.2em; }
.fit-summary em { font-style: normal; color: var(--sky); }
.bay-row { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.12); }
.bay-row-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 10px; flex-wrap: wrap; }
.bay-row-head b { color: var(--white); }
.bay-row-head a:hover b { color: var(--sky); }
.bay-status { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 3px; }
.bay-status.yes { background: rgba(126,226,168,.16); color: #8fe7b5; }
.bay-status.no { background: rgba(242,179,155,.16); color: #f4bca6; }
.bay-svg { width: 100%; height: 44px; display: block; overflow: visible; }
.bay-meta { font-family: var(--mono); font-size: .7rem; color: #8ea2bb; margin-top: 6px; }
.fit-foot { margin-top: auto; padding-top: 22px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); }
.fit-foot p { margin: 0; font-size: .76rem; color: #8ea2bb; max-width: 360px; }

/* Loadout picker (fit tool) */
.loadout { display: grid; gap: 6px; margin-top: 18px; }
.lo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius); transition: border-color .2s, background .2s; }
.lo.on { border-color: var(--steel); background: rgba(47,92,141,.06); }
.lo span { font-weight: 600; font-size: .92rem; color: var(--navy); line-height: 1.2; }
.lo small { display: block; font-family: var(--mono); font-weight: 400; font-size: .66rem; letter-spacing: .04em; color: var(--text-3); margin-top: 2px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-2); background: transparent; color: var(--navy); font-size: 1.05rem; line-height: 1; cursor: pointer; }
.stepper button:hover { border-color: var(--navy); }
.stepper output { min-width: 22px; text-align: center; font-family: var(--sans); font-weight: 700; color: var(--navy); }

.because-line { font-family: var(--sans); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; color: var(--steel); }

/* Split */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.split.flip > :first-child { order: 2; }
@media (max-width: 900px) { .split, .split.flip { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } }
.split-media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: var(--night); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media.wide { aspect-ratio: 5 / 4; }
.split-media .caption { position: absolute; left: 0; bottom: 0; background: var(--navy); color: var(--white); font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; padding: 10px 14px; z-index: 1; }
.stack-media { position: relative; }
.stack-media .inset { position: absolute; width: 44%; right: -5%; bottom: -7%; overflow: hidden; border: 6px solid var(--concrete); aspect-ratio: 1; border-radius: var(--radius-lg); }
.stack-media .inset img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .stack-media .inset { right: 12px; bottom: -24px; width: 40%; } }
.checks { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; gap: 16px; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; color: var(--text-2); }
.checks li b { color: var(--navy); }
.checks svg { width: 22px; height: 22px; color: var(--steel); margin-top: 3px; }
.bg-ink .checks li { color: #a9bad0; }
.bg-ink .checks li b { color: var(--white); }
.bg-ink .checks svg { color: var(--sky); }

/* Receipts */
.receipts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--sky); margin-top: 56px; }
.receipts div { padding: 28px 24px 10px 0; }
.receipts div + div { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.14); }
.receipts strong { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 5vw, 4.4rem); line-height: .85; color: var(--white); margin-bottom: 12px; }
.receipts strong small { font-size: .4em; color: var(--sky); margin-left: 4px; }
.receipts span { display: block; font-size: .88rem; color: #a9bad0; line-height: 1.5; }
@media (max-width: 900px) { .receipts { grid-template-columns: 1fr 1fr; } .receipts div:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 520px) { .receipts { grid-template-columns: 1fr; } .receipts div { padding-left: 0 !important; border-left: 0 !important; border-bottom: 1px solid rgba(255,255,255,.14); } }
.receipts-note { font-family: var(--mono); font-size: .7rem; color: #8ea2bb; margin-top: 16px; }

/* Sold strip */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 36px 24px; margin: 0 -36px; scrollbar-width: thin; scrollbar-color: var(--steel) transparent; }
.strip > * { scroll-snap-align: start; }
@media (min-width: 1393px) { .strip { margin: 0 calc((100vw - var(--wrap)) / -2 - 36px); padding-left: calc((100vw - var(--wrap)) / 2 + 36px); padding-right: calc((100vw - var(--wrap)) / 2 + 36px); scroll-padding-left: calc((100vw - var(--wrap)) / 2 + 36px); } }
@media (max-width: 640px) { .strip { margin: 0 -18px; padding: 4px 18px 22px; grid-auto-columns: 82%; } }
.sold { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--night); border-radius: var(--radius-lg); }
.sold img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.sold:hover img { transform: scale(1.05); }
.sold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,28,52,0) 40%, rgba(11,28,52,.95)); }
.sold-info { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 1; }
.sold-info .yr { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sky); }
.sold-info strong { display: block; font-family: var(--display); font-weight: 900; font-size: 2.4rem; line-height: .95; margin: 4px 0; color: var(--white); }
.sold-info span { font-size: .84rem; color: #d2dcea; }

/* Quotes */
.quotes { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.quotes .q:first-child { grid-row: span 3; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } .quotes .q:first-child { grid-row: auto; } }
.q { background: var(--white); padding: 30px; display: flex; flex-direction: column; margin: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.bg-light .q, .bg-mist .q { background: var(--concrete); box-shadow: none; }
.q blockquote { margin: 0 0 22px; color: var(--text-2); }
.q:first-child blockquote { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.45; color: var(--navy); }
.q blockquote::before { content: "\201C"; display: block; font-family: var(--display); font-weight: 900; font-size: 4rem; line-height: .6; color: var(--steel); margin-bottom: 8px; }
.q figcaption { margin-top: auto; font-weight: 700; color: var(--navy); font-size: .92rem; padding-top: 16px; border-top: 1px solid var(--line); }
.q figcaption span { display: block; font-family: var(--mono); font-weight: 400; color: var(--text-3); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.stars { color: var(--steel); letter-spacing: 3px; font-size: .86rem; margin-bottom: 8px; }
.quote-solo { background: var(--concrete); padding: 24px; border-radius: var(--radius-lg); margin-top: 12px; }
.quote-solo p { color: var(--navy); }
.quote-solo span { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--navy); }
.step { padding: 24px 22px 0 0; }
.step + .step { padding-left: 22px; border-left: 1px solid var(--line); }
.step-n { font-family: var(--display); font-weight: 900; font-size: 3.6rem; line-height: .8; color: var(--steel); margin-bottom: 16px; }
.step h3 { margin-bottom: 8px; }
.step p { font-size: .93rem; margin: 0; }
.step .who { display: inline-block; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
@media (max-width: 980px) { .steps { grid-template-columns: 1fr; } .step, .step + .step { display: grid; grid-template-columns: 70px 1fr; padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line); } .step-n { grid-row: span 3; } }

/* Feature cards */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .cards-3 { grid-template-columns: 1fr; } }
.fcard { background: var(--white); padding: 30px; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.bg-mist .fcard, .bg-light .fcard { background: var(--concrete); box-shadow: none; }
.fcard .ico { width: 48px; height: 48px; border-radius: var(--radius); background: var(--navy); color: var(--white); display: grid; place-items: center; margin-bottom: 20px; }
.fcard .ico svg { width: 22px; height: 22px; }
.fcard p { font-size: .95rem; margin: 0; }

/* FAQ */
.faq { max-width: 900px; margin: 0 auto; border-top: 2px solid var(--navy); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-weight: 700; font-size: 1.06rem; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-2); color: var(--navy); display: grid; place-items: center; font-family: var(--sans); font-weight: 400; font-size: 1.3rem; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 54px 24px 0; margin: 0; }

/* Lead form */
.lead { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
@media (max-width: 900px) { .lead { grid-template-columns: 1fr; } }
.lead-side .contact-lines { display: grid; gap: 20px; margin-top: 34px; }
.contact-line { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center; }
.contact-line .ico { width: 46px; height: 46px; border-radius: var(--radius); background: rgba(255,255,255,.1); display: grid; place-items: center; color: var(--sky); }
.contact-line .ico svg { width: 18px; height: 18px; }
.contact-line small { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #8ea2bb; }
.contact-line a, .contact-line span { color: var(--white); font-weight: 600; }
.form-card { background: var(--white); color: var(--navy); padding: clamp(24px, 4vw, 42px); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.form-card h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.03em; font-size: 1.9rem; line-height: 1.1; color: var(--navy); margin-bottom: 6px; }
.form-card .note-sm { color: var(--text-2); }
.progress { display: flex; gap: 6px; margin: 20px 0 26px; }
.progress i { flex: 1; height: 4px; background: var(--concrete-2); transition: background .3s; }
.progress i.on { background: var(--steel); }
form.is-stepped fieldset { display: none; }
form.is-stepped fieldset.active { display: block; animation: fadeUp .4s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
fieldset { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
legend { font-weight: 700; color: var(--navy); font-size: 1.05rem; margin-bottom: 16px; padding: 0; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
@media (max-width: 520px) { .choices { grid-template-columns: 1fr; } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: block; padding: 16px; border: 2px solid var(--line); border-radius: var(--radius); font-weight: 700; font-size: .94rem; color: var(--navy); cursor: pointer; transition: all .2s; line-height: 1.35; }
.choice span:hover { border-color: var(--steel); }
.choice span small { display: block; font-weight: 500; color: var(--text-2); font-size: .8rem; margin-top: 3px; }
.choice input:checked + span { border-color: var(--navy); background: var(--navy); color: var(--white); }
.choice input:checked + span small { color: var(--sky); }
.choice input:focus-visible + span { outline: 2px solid var(--steel); outline-offset: 2px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fields .full { grid-column: 1 / -1; }
@media (max-width: 520px) { .fields { grid-template-columns: 1fr; } }
.field[hidden] { display: none; }
.field label { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 7px; }
.field input, .field select, .field textarea { width: 100%; padding: 14px 15px; border: 2px solid var(--line); border-radius: var(--radius); font: inherit; font-size: .96rem; color: var(--navy); background: var(--white); transition: border-color .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--steel); }
.field textarea { min-height: 110px; resize: vertical; }
.form-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }
.form-nav .back { background: none; border: 0; color: var(--text-2); font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; padding: 8px 0; }
form:not(.is-stepped) .form-nav .back, form:not(.is-stepped) .form-nav .next { display: none; }
.form-fine { font-size: .74rem; color: var(--text-3); margin: 14px 0 0; }
.form-status { margin: 14px 0 0; font-size: .9rem; font-weight: 600; min-height: 1.2em; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--warn); }
.form-done { text-align: center; padding: 30px 0; }
.form-done .check { width: 64px; height: 64px; border-radius: var(--radius-lg); background: #e3f1e9; color: var(--ok); display: grid; place-items: center; margin: 0 auto 18px; }
.form-done .check svg { width: 30px; height: 30px; }

/* Filters, stats, people */
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { border: 1.5px solid var(--line-2); background: transparent; border-radius: 999px; padding: 10px 16px; font-family: var(--sans); font-weight: 600; font-size: .92rem; color: var(--navy); cursor: pointer; transition: all .2s; }
.filters button:hover { border-color: var(--navy); }
.filters button.on { background: var(--navy); color: var(--white); border-color: var(--navy); }
.filters button span { opacity: .55; margin-left: 6px; font-family: var(--mono); font-size: .72rem; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stats div { border-top: 2px solid var(--navy); padding-top: 18px; }
.stats strong { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 5vw, 4.6rem); line-height: .85; color: var(--navy); margin-bottom: 10px; }
.stats span { font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
@media (max-width: 820px) { .stats { grid-template-columns: 1fr 1fr; } }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .people { grid-template-columns: 1fr; } }
.person { background: var(--white); padding: 34px; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.bg-mist .person { background: var(--concrete); box-shadow: none; }
.person .role { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); margin-bottom: 8px; }
.person h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.035em; font-size: 2.3rem; line-height: 1.05; margin-bottom: 14px; }

/* Interior page hero: photo with a slat header bar */
.page-hero { position: relative; min-height: min(70vh, 760px); display: flex; align-items: flex-end; padding: 90px 0 clamp(48px, 7vw, 80px); overflow: hidden; background: var(--night); color: var(--white); }
.page-hero .hero-media { position: absolute; inset: 0; }
.page-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,28,52,.2) 0%, rgba(11,28,52,.25) 40%, rgba(11,28,52,.92) 100%); }
.page-hero .wrap { position: relative; z-index: 1; width: 100%; }
.page-hero .kicker { color: var(--sky); }
.page-hero h1 { color: var(--white); max-width: 14ch; }
.page-hero h1 em { color: var(--sky); }
.page-hero p { color: #dbe4f0; max-width: 600px; font-size: 1.12rem; margin: 0; }
.page-hero.plain { background: var(--navy); min-height: min(60vh, 640px); }
.proof { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--sky); }
.proof div { padding: 22px 20px 0 0; }
.proof div + div { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.14); }
.proof strong { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: .85; color: var(--white); margin-bottom: 8px; }
.proof span { font-family: var(--mono); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: #a9bad0; display: block; }
@media (max-width: 820px) { .proof { grid-template-columns: 1fr 1fr; } .proof div:nth-child(3) { padding-left: 0; border-left: 0; } .proof div:nth-child(n+3) { padding-top: 18px; } }

/* Credentials band */
.creds-band { padding: 0; background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.creds { display: grid; grid-template-columns: repeat(4, 1fr); }
.creds > div { padding: 26px 24px; border-left: 1px solid var(--line); }
.creds > div:first-child { border-left: 0; padding-left: 0; }
.creds .k { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.creds strong { display: block; font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; font-size: 1.25rem; line-height: 1.2; color: var(--navy); margin: 6px 0 4px; }
.creds .v { font-size: .84rem; color: var(--text-2); }
.creds .v a { color: var(--steel); text-decoration: underline; }
@media (max-width: 900px) { .creds { grid-template-columns: 1fr 1fr; } .creds > div:nth-child(3) { border-left: 0; padding-left: 0; } .creds > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* Mosaic, case study, selection boards, spec row */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 12px; }
.mosaic figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--night); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.mosaic figure:hover img { transform: scale(1.05); }
.mosaic figcaption { position: absolute; left: 0; bottom: 0; background: var(--navy); color: var(--white); font-family: var(--mono); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; padding: 8px 12px; }
.mosaic .m0 { grid-column: span 2; grid-row: span 2; }
.mosaic .m1 { grid-column: span 2; }
.mosaic .m4, .mosaic .m5 { grid-column: span 2; }
@media (max-width: 760px) { .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; } .mosaic .m0, .mosaic .m1, .mosaic .m5 { grid-column: span 2; } .mosaic .m0 { grid-row: span 1; } }
.case { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.case img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }
.case-main { min-height: 440px; }
.case-side { display: grid; gap: 12px; }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; } .case-main { min-height: 260px; } .case-side { grid-template-columns: 1fr 1fr; } }
.specs-row { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--navy); margin-top: 28px; }
.specs-row div { padding: 18px 16px 0 0; }
.specs-row div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.specs-row span { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.specs-row b { display: block; font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; font-size: 1.15rem; line-height: 1.2; color: var(--navy); margin-top: 6px; }
@media (max-width: 820px) { .specs-row { grid-template-columns: 1fr 1fr; } .specs-row div + div { border-left: 0; padding-left: 0; } }
.sel-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sel-boards .sb { overflow: hidden; border-radius: var(--radius-lg); background: var(--white); }
.sel-boards .sb img { width: 100%; height: 100%; object-fit: cover; }
.sel-boards .tall { aspect-ratio: 2 / 3; }
.sel-boards .wide { grid-column: span 2; aspect-ratio: 16 / 10; }
.sel-boards .wide img { object-fit: contain; }

/* Draft-only checklist items (add ?draft to the URL) */
.ph { display: none; }
body.draft .ph { display: block; margin: 16px 0; padding: 14px 16px; border: 2px dashed #c9862b; background: #fff8ec; color: #6b4a14; font-size: .88rem; border-radius: var(--radius); }
body.draft .ph b { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #b06f17; margin-bottom: 4px; }

/* CTA band, map */
.cta-band { position: relative; overflow: hidden; background: var(--night); color: var(--white); }
.cta-band .hero-media { position: absolute; inset: 0; }
.cta-band .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,28,52,.95) 0%, rgba(11,28,52,.75) 50%, rgba(11,28,52,.3) 100%); }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band .kicker { color: var(--sky); }
.cta-band h2 { color: var(--white); max-width: 12ch; }
.cta-band h2 em { color: var(--sky); }
.cta-band p { color: #d2dcea; max-width: 520px; font-size: 1.08rem; margin-bottom: 30px; }
.cta-band .btn-ghost { border-color: rgba(255,255,255,.7); color: var(--white); }
.map { overflow: hidden; aspect-ratio: 16 / 9; background: var(--white); border-radius: var(--radius-lg); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Footer: the motto, big */
.site-footer { background: var(--night); color: #8ea2bb; padding: 0 0 120px; font-size: .9rem; }
@media (min-width: 1041px) { .site-footer { padding-bottom: 40px; } }
.footer-motto { overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.1); padding: 56px 0 40px; }
.footer-motto div { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(3.6rem, 10.5vw, 10rem); line-height: .82; color: var(--white); }
.footer-motto small { display: block; font-family: var(--sans); font-weight: 300; font-size: clamp(1.4rem, 3vw, 2.6rem); color: #c9d6e6; margin-bottom: 6px; }
.footer-motto div em { font-style: normal; color: transparent; -webkit-text-stroke: 2px var(--sky); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding: 52px 0 46px; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.site-footer h4 { font-family: var(--mono); font-weight: 500; color: var(--white); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a:hover { color: var(--white); }
.site-footer p { color: #8ea2bb; }
.site-footer .logo { margin-bottom: 18px; }
.site-footer .logo img { height: 84px; }
.footer-legal { padding-top: 26px; display: grid; gap: 14px; font-size: .74rem; line-height: 1.65; color: #6c809a; }
.footer-legal .row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: .68rem; }
.eho { display: inline-flex; align-items: center; gap: 8px; }
.eho svg { width: 20px; height: 20px; }

/* Mobile action bar */
.action-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: none; grid-template-columns: 1fr 1.5fr; gap: 8px; padding: 8px; border-radius: var(--radius-lg); background: var(--navy); box-shadow: 0 18px 40px -10px rgba(0,0,0,.5); transform: translateY(150%); transition: transform .4s var(--ease); }
.action-bar.show { transform: none; }
.action-bar .btn { padding: 15px 10px; font-size: .92rem; }
.action-bar .btn-ghost { border-color: rgba(255,255,255,.5); color: var(--white); }
@media (max-width: 1040px) { .action-bar { display: grid; } }
body.menu-open .action-bar { display: none; }

/* Measuring line across the hero photo (scroll-linked, js/main.js) */
.measure { position: absolute; left: 36px; right: 36px; bottom: 34px; height: 80px; pointer-events: none; }
.measure-line { position: absolute; left: 0; bottom: 0; height: 14px; width: calc(var(--m, 0) * 100%); min-width: 2px; border-left: 2px solid var(--white); border-right: 2px solid var(--white); background: linear-gradient(var(--white), var(--white)) center / 100% 2px no-repeat; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.measure-n { position: absolute; left: 0; bottom: 22px; font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1; color: var(--white); text-shadow: 0 3px 16px rgba(0,0,0,.55); white-space: nowrap; }
.hero-bay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,28,52,0) 55%, rgba(11,28,52,.55)); pointer-events: none; }
.measure { z-index: 2; }
.bay-cap { margin: 0; padding: 14px 36px; background: var(--white); font-size: .86rem; color: var(--text-2); border-bottom: 1px solid var(--line); }
.bay-cap a { color: var(--steel); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .measure { left: 18px; right: 30px; } .bay-cap { padding: 12px 18px; } }

/* Chart: garage wins first, the rest on request */
.gvh:not(.all) .gvh-row.more { display: none; }
.gvh-toggle { margin-top: 18px; background: none; border: 1.5px solid var(--line-2); border-radius: 999px; padding: 10px 18px; font-family: var(--sans); font-weight: 600; font-size: .9rem; color: var(--navy); cursor: pointer; }
.gvh-toggle:hover { border-color: var(--navy); }

/* YouTube facade: thumbnail until play is pressed */
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--night); box-shadow: var(--shadow-lg); cursor: pointer; }
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.yt:hover img { transform: scale(1.03); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 0; background: var(--white); color: var(--navy); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .3s var(--ease); }
.yt-play svg { width: 34px; height: 34px; margin-left: 4px; }
.yt:hover .yt-play { transform: scale(1.08); }
.yt-len { position: absolute; left: 14px; bottom: 14px; background: rgba(11,28,52,.85); color: var(--white); font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 3px; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
    .bar { transition: none; }
  * { transition-duration: .01ms !important; }
}

.center { text-align: center; }
.mt-l { margin-top: 48px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--white); color: var(--navy); padding: 10px 16px; font-weight: 700; }
.skip:focus { left: 8px; }
.note-sm { font-size: .78rem; color: var(--text-3); }