/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #CD0C1E;
  --primary-dark: #B00A19;
  --primary-light: #FDECEE;
  --charcoal: #062F67;
  --charcoal-dark: #041E42;
  --text: #12161C;
  --text-mid: #4B525F;
  --text-muted: #98A0AD;
  --bg: #FAF9F9;
  --bg-light: #F4F5F7;
  --border: #DADEE5;
  --success: #1B7A3D;
  --success-bg: #E7F3EC;
  --warning: #C8860A;
  --radius: 8px;
  --shadow-sm: 0 2px 8px rgba(6,47,103,0.08);
  --shadow: 0 4px 16px rgba(6,47,103,0.12);
  --shadow-lg: 0 8px 32px rgba(6,47,103,0.16);
  --font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;
}

html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.6; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ===== ICONS (Lucide) ===== */
.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; width: 24px; height: 24px; }
.trust-badge .icon.ic-badge { width: 16px; height: 16px; color: #fff; }
.hero-service-area .icon.ic-svc { width: 15px; height: 15px; color: #fff; vertical-align: -3px; }
.type-tile-icon .icon { width: 38px; height: 38px; color: var(--charcoal); }
.t-icon .icon { width: 24px; height: 24px; color: #fff; }
.why-icon .icon { width: 28px; height: 28px; color: var(--charcoal); }
.ci-icon .icon { width: 22px; height: 22px; color: var(--primary); }
.form-success .icon { width: 18px; height: 18px; vertical-align: -4px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.bg-gray { background: var(--bg-light); }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 26px; border-radius: 6px; font-weight: 600; font-size: 15px;
  cursor: pointer; border: 2px solid transparent; transition: all 0.18s ease; white-space: nowrap;
}
.btn-red { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-red:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(205,12,30,0.38); }
.btn-blue { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.btn-blue:hover { background: var(--charcoal-dark); border-color: var(--charcoal-dark); transform: translateY(-1px); }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.75); }
.btn-outline-white:hover { background: rgba(255,255,255,0.15); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--border); }
.btn-outline:hover { border-color: #999; }
.btn-lg { padding: 16px 32px; font-size: 16px; border-radius: 8px; }
.btn-full { width: 100%; justify-content: center; }

/* ===== NAVBAR ===== */
.navbar {
  position: sticky; top: 0; z-index: 1000;
  background: var(--bg); border-bottom: 2px solid var(--primary);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
/* Four things sit on this bar — logo, links, phone, button — and space-between
   puts the same gap between each pair. gap is the floor; the free space on top
   of it is split equally three ways.
   Two earlier attempts got this wrong: margin-right:auto on the links dumped
   every spare pixel into one hole, and auto margins on both sides balanced the
   links but left the phone with 45px on its left and 10 on its right, glued to
   the button and reading as off-centre. */
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; gap: 22px; position: relative;
}
.logo { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; color: var(--text); flex-shrink: 0; }
.logo-house { font-size: 28px; }
.logo-img { height: 44px; width: auto; }
.footer-logo-img { height: 36px; width: auto; }
.nav-links { display: flex; gap: 4px; }
.nav-links > a, .nav-dropdown > button {
  padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--text-mid);
  border-radius: 4px; transition: color 0.15s, background 0.15s; cursor: pointer;
  border: none; background: none; font-family: inherit; display: flex; align-items: center; gap: 4px;
  /* A label that breaks across two lines is the header looking broken. It
     never wraps; when the bar runs out of room the whole bar becomes the
     menu button instead, at the breakpoint below. */
  white-space: nowrap;
}
.nav-links > a:hover, .nav-dropdown > button:hover { color: var(--primary); background: var(--primary-light); }
.nav-dropdown { position: relative; --menu-gap: 4px; }
.nav-dropdown-menu {
  display: none; position: absolute; top: calc(100% + var(--menu-gap)); left: 0;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-lg); min-width: 180px; z-index: 100; padding: 6px;
}
/* Getting the pointer from the trigger to the menu used to be impossible, for
   two reasons. The menu floats --menu-gap below the trigger, and that gap was
   dead air — :hover went false mid-journey and the menu closed before the
   pointer arrived. And because the menu is wider than its own trigger, the
   natural diagonal to an item on the menu's right passes over the *next*
   trigger's box, which opened that menu instead.
   This invisible strip covers both. It is a child of the menu, so hovering it
   keeps :hover true on .nav-dropdown; and the menu's z-index puts it above the
   neighbouring trigger, so the crossing no longer swaps menus.
   The height is the gap plus the trigger's stretch band: nav items are as tall
   as the tallest link (38.4px) while the dropdown's own button is 32px, so the
   menu hangs ~6px below the button it belongs to. 8px clears that with room to
   spare. It only exists while the menu is open, so it can never open anything,
   and it leaves the top ~3/4 of the neighbouring trigger free to hover. */
.nav-dropdown-menu::before {
  content: ''; position: absolute; bottom: 100%; left: 0; right: 0;
  height: calc(var(--menu-gap) + 8px);
}
/* :focus-within so a tap or a Tab opens it too — hover alone never fires on a
   touch screen, and the catalog pages run no JavaScript to make up for it. */
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block; padding: 9px 14px; font-size: 14px; color: var(--text-mid);
  border-radius: 4px; transition: background 0.15s, color 0.15s;
}
.nav-dropdown-menu a:hover { background: var(--primary-light); color: var(--primary); }
/* display:contents so the phone and the button are laid out by .nav-inner
   itself rather than as one clump — that's what makes the phone sit at the
   same distance from "Contact" as it does from the button. The wrapper still
   exists for the media query below, which hides them both. */
.nav-cta { display: contents; }
.nav-phone { font-size: 15px; font-weight: 700; color: var(--primary); white-space: nowrap; }

/* The menu toggle is a checkbox, not a button, so the header works identically
   on the homepage and on the server-rendered catalog pages — those ship no
   JavaScript, and a JS-driven hamburger left them with no navigation at all
   below the breakpoint. The checkbox is the control (focusable, operable with
   Space); the label just draws the ☰ under it. */
.nav-toggle { display: none; }
.hamburger { display: none; background: none; border: none; font-size: 22px; cursor: pointer; margin-left: auto; padding: 4px; }

/* ===== HERO ===== */
.hero {
  position: relative; min-height: 600px;
  background: var(--charcoal);
  display: flex; align-items: center; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; overflow: hidden;
}
.hero-bg-img {
  width: 100%; height: 100%; object-fit: cover;
  background: url('https://lotlinehomes.com/assets/hero-home-DVtpimdB.jpg') center center / cover no-repeat;
  display: flex; align-items: center; justify-content: center; font-size: 180px;
  opacity: 0.35;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.2) 100%);
}
.hero-content {
  position: relative; z-index: 1; padding-top: 80px; padding-bottom: 80px;
  max-width: 620px;
}
.hero-label {
  display: inline-block; background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 4px; margin-bottom: 20px;
}
.hero h1 { font-size: clamp(32px, 5vw, 58px); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 18px; }
.hero h1 em { color: var(--primary); }
.hero-slogan { font-size: clamp(36px, 6vw, 64px); font-weight: 800; line-height: 1.15; color: #fff; margin-bottom: 20px; }
.hero-sub { font-size: 18px; color: rgba(255,255,255,0.85); margin-bottom: 36px; line-height: 1.6; max-width: 520px; }

.hero-service-area { font-size: 13px; color: rgba(255,255,255,0.7); margin: 0 0 24px; }
.hero-service-area strong { color: #fff; font-weight: 700; }

.hero-trust { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.trust-badge {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.1); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 8px;
  padding: 8px 14px; font-size: 13px; color: rgba(255,255,255,0.9);
}
.trust-badge strong { color: #fff; }

/* ===== HOME TYPE TILES ===== */
.type-tiles-section { padding: 48px 0; border-bottom: 1px solid var(--border); }
.type-tiles-section h2 { text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 28px; }
.type-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.type-tile {
  text-align: center; cursor: pointer;
  background: var(--bg-light); border: 2px solid var(--border);
  border-radius: 10px; padding: 20px 12px;
  transition: all 0.18s ease;
}
.type-tile:hover, .type-tile.active {
  border-color: var(--primary); background: var(--primary-light); transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(205,12,30,0.15);
}
.type-tile-icon { font-size: 40px; margin-bottom: 10px; }
.type-tile h3 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.type-tile p { font-size: 12px; color: var(--text-muted); }

/* ===== SECTION HEADER ===== */
.section-header { margin-bottom: 48px; }
.section-header.center { text-align: center; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; }
.section-header h2 { font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; margin-bottom: 14px; line-height: 1.2; }
.section-header p { font-size: 16px; color: var(--text-muted); max-width: 580px; }
.section-header.center p { margin: 0 auto; }

/* ===== HOMES GRID ===== */
.filters-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 32px; flex-wrap: wrap; }
.filter-select {
  padding: 9px 14px; border: 1.5px solid var(--border); border-radius: 6px;
  font-size: 14px; font-family: inherit; color: var(--text); background: var(--bg);
  outline: none; cursor: pointer; transition: border-color 0.15s;
}
.filter-select:focus { border-color: var(--primary); }
.filters-bar .results-count { margin-left: auto; font-size: 14px; color: var(--text-muted); }

.homes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; }

.inventory-prompt { display: none; text-align: center; }
.inventory-prompt p { color: var(--text-muted); font-size: 14px; margin-bottom: 14px; }
.inventory-prompt a { color: var(--primary); font-weight: 600; }

.recommended-group { margin-bottom: 40px; }
.recommended-group:last-child { margin-bottom: 0; }
.recommended-brand {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-muted); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}

.home-card {
  background: var(--bg); border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  transition: transform 0.22s, box-shadow 0.22s; cursor: pointer;
}
.home-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.home-card-img {
  position: relative; width: 100%; height: 220px;
  background: linear-gradient(135deg, #d4edda, #a8d5b5);
  display: flex; align-items: center; justify-content: center; font-size: 80px;
  overflow: hidden;
}
.home-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-card-img.has-photo { background: #000; }
.card-badge {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.badge-popular { background: var(--primary); color: #fff; }
.badge-new { background: var(--success); color: #fff; }
.badge-sale { background: var(--warning); color: #fff; }
.badge-premium { background: var(--charcoal); color: #fff; }
.card-save {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,0.9); border: none; border-radius: 50%;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 22px; font-weight: 900; transition: all 0.15s;
}
.card-save { color: #ccc; }
.card-save:hover { background: var(--bg); transform: scale(1.1); color: #aaa; }
.card-save.saved { color: var(--primary); background: #fff; }

.card-photo-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.45); color: #fff; border: none;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s;
  z-index: 2;
}
.card-photo-prev { left: 10px; }
.card-photo-next { right: 10px; }
.card-photo-nav:hover { background: rgba(0,0,0,0.7); }
.home-card:hover .card-photo-nav { opacity: 1; }

.card-photo-counter {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.5); color: #fff;
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  pointer-events: none;
}

.home-card-body { padding: 18px; }
.card-brand { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 4px; }
.home-card-body h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.home-specs { display: flex; gap: 0; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.spec-item { flex: 1; text-align: center; padding: 9px 6px; border-right: 1px solid var(--border); }
.spec-item:last-child { border-right: none; }
.spec-item .spec-val { font-size: 15px; font-weight: 700; display: block; }
.spec-item .spec-lbl { font-size: 11px; color: var(--text-muted); display: block; margin-top: 1px; }
.card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--border); }
.card-price { font-size: 22px; font-weight: 800; color: var(--primary); }
.card-price-note { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.btn-card { padding: 9px 18px; font-size: 13px; }

/* ===== TRUST STRIP ===== */
.trust-strip { background: var(--charcoal); padding: 20px 0; }
.trust-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.trust-item { text-align: center; color: rgba(255,255,255,0.9); flex: 1; min-width: 120px; }
.trust-item .t-icon { font-size: 22px; margin-bottom: 4px; }
.trust-item strong { display: block; font-size: 17px; font-weight: 800; color: #fff; }
.trust-item span { font-size: 12px; color: rgba(255,255,255,0.6); }
.trust-divider { width: 1px; height: 34px; background: rgba(255,255,255,0.15); }

/* ===== WHY US / HOW IT WORKS (compact) ===== */
#why, #how { padding: 44px 0; }
#why .section-header, #how .section-header { margin-bottom: 26px; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.why-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px; transition: box-shadow 0.2s, transform 0.2s; }
.why-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.why-icon { font-size: 26px; margin-bottom: 8px; }
.why-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.why-card p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* ===== TESTIMONIALS ===== */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.testimonial-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 26px; }
.test-stars { color: var(--warning); font-size: 18px; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-card blockquote { font-size: 15px; color: var(--text-mid); font-style: italic; line-height: 1.7; margin-bottom: 18px; }
.reviewer-name { font-size: 14px; font-weight: 700; }
.reviewer-detail { font-size: 13px; color: var(--text-muted); }

/* ===== FAQ ACCORDION ===== */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.faq-question {
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 16px; font-weight: 600; font-family: inherit; color: var(--text);
  text-align: left; transition: background 0.15s;
}
.faq-question:hover { background: var(--bg-light); }
.faq-question.open { background: var(--primary-light); color: var(--primary); border-left: 3px solid var(--primary); }
.faq-icon { font-size: 20px; font-weight: 400; flex-shrink: 0; transition: transform 0.2s; }
.faq-question.open .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer.open { max-height: 300px; }
.faq-answer p { padding: 0 20px 18px; font-size: 15px; color: var(--text-muted); line-height: 1.75; }

/* ===== CONTACT ===== */
.contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.contact-info h2 { font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; margin-bottom: 16px; }
.contact-info > p { color: var(--text-muted); margin-bottom: 32px; }
.contact-items { display: flex; flex-direction: column; gap: 18px; }
.contact-item { display: flex; gap: 14px; align-items: flex-start; }
.ci-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.ci-icon .messenger-icon { width: 22px; height: 22px; display: block; }
.ci-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 3px; }
.ci-val { font-size: 15px; font-weight: 500; }
.ci-val a { color: var(--primary); font-weight: 600; }

.contact-form-box { background: var(--bg-light); border: 1px solid var(--border); border-radius: 12px; padding: 36px; }
.contact-form-box h3 { font-size: 20px; font-weight: 700; margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--border);
  border-radius: 6px; font-size: 14px; font-family: inherit; background: var(--bg);
  outline: none; transition: border-color 0.15s; resize: vertical;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); }
.form-success { display: none; margin-top: 14px; padding: 14px; background: var(--success-bg); border-radius: 6px; color: var(--success); font-weight: 600; text-align: center; }
.form-success.visible { display: block; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===== FOOTER ===== */
.footer { background: var(--charcoal); color: rgba(255,255,255,0.75); }
.footer-main { padding: 64px 0 48px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 40px; }
.footer-brand { }
.footer-logo { font-size: 22px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.footer-brand p { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.7; margin-bottom: 20px; max-width: 260px; }
.footer-social { display: flex; gap: 10px; }
.social-btn { width: 36px; height: 36px; border-radius: 6px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background 0.15s; }
.social-btn .messenger-icon { width: 20px; height: 20px; display: block; }
.social-btn:hover { background: var(--primary); color: #fff; }
.footer-col h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14px; color: rgba(255,255,255,0.55); padding: 5px 0; transition: color 0.15s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 20px 0; }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,0.35); }
.footer-bottom-inner a { color: rgba(255,255,255,0.5); }
.footer-bottom-inner a:hover { color: #fff; }
.footer-license { color: rgba(255,255,255,0.6); font-family: var(--font-mono); font-size: 12px; }

/* ===== LEGAL PAGES ===== */
.legal-nav { background: var(--bg); border-bottom: 2px solid var(--primary); padding: 14px 0; }
.legal-nav .container { display: flex; align-items: center; justify-content: space-between; }
.legal-nav .logo-img { height: 40px; width: auto; }
.legal-nav a.back { font-size: 14px; font-weight: 600; color: var(--text-mid); }
.legal-nav a.back:hover { color: var(--primary); }
.legal-body { max-width: 760px; margin: 0 auto; padding: 56px 20px 72px; }
.legal-body h1 { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-size: clamp(28px,4vw,40px); margin-bottom: 8px; }
.legal-body .updated { color: var(--text-muted); font-size: 14px; margin-bottom: 32px; }
.legal-body h2 { font-family: var(--font-display); font-size: 20px; margin: 32px 0 10px; }
.legal-body p, .legal-body li { font-size: 15px; color: var(--text-mid); line-height: 1.75; }
.legal-body ul { margin: 8px 0 8px 22px; }
.legal-body li { margin-bottom: 6px; }
.legal-body a { color: var(--text-link); font-weight: 600; }
.legal-body a:hover { color: var(--primary); }

/* ===== MODAL ===== */
.modal-backdrop { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--bg); border-radius: 14px; max-width: 680px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; animation: modalIn 0.22s ease; }
@keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(12px); } to { opacity: 1; transform: none; } }
.modal-close { position: absolute; top: 14px; right: 16px; background: rgba(0,0,0,0.08); border: none; font-size: 20px; cursor: pointer; color: var(--text); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: background 0.15s; z-index: 1; }
.modal-close:hover { background: rgba(0,0,0,0.15); }
.modal-hero { height: 260px; background: linear-gradient(135deg, #c8e6c9, #81c784); display: flex; align-items: center; justify-content: center; font-size: 100px; border-radius: 14px 14px 0 0; }
.modal-gallery { border-radius: 14px 14px 0 0; overflow: hidden; }
.gallery-main { position: relative; width: 100%; height: 300px; background: #000; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.45); color: #fff; border: none; cursor: pointer; font-size: 28px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background 0.15s; }
.gallery-nav:hover { background: rgba(0,0,0,0.72); }
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }
.gallery-counter { position: absolute; bottom: 10px; right: 12px; background: rgba(0,0,0,0.5); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 20px; }
.gallery-thumbs { display: flex; gap: 6px; padding: 8px; background: #111; overflow-x: auto; scrollbar-width: thin; }
.gallery-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; cursor: pointer; opacity: 0.55; border: 2px solid transparent; flex-shrink: 0; transition: opacity 0.15s, border-color 0.15s; }
.gallery-thumb.active, .gallery-thumb:hover { opacity: 1; border-color: var(--primary); }
.modal-body { padding: 28px; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.modal-title { font-size: 24px; font-weight: 800; }
.modal-price { font-size: 28px; font-weight: 800; color: var(--primary); }
.modal-price small { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.modal-specs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.modal-spec { background: var(--bg-light); border-radius: 6px; padding: 12px; text-align: center; }
.modal-spec strong { display: block; font-size: 18px; font-weight: 700; }
.modal-spec span { font-size: 12px; color: var(--text-muted); }
.modal-desc { font-size: 15px; color: var(--text-muted); line-height: 1.8; margin-bottom: 22px; }
.modal-features { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.feature-pill { background: var(--success-bg); color: var(--success); padding: 5px 12px; border-radius: 99px; font-size: 13px; font-weight: 500; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .type-tiles { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 820px) {
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
}
/* ===== NAV BREAKPOINT =====
   Measured, not guessed: the bar wants 1070px on one line (logo 100 + links
   647 + phone/CTA 323), and .container gives it viewport minus 40. Below
   ~1150 it no longer fits, so it becomes the menu at 1150 with a little room
   to spare. Above it, every size renders the identical bar.

   This lives in its own query rather than the 700px block the rest of the
   layout uses — the nav runs out of room long before a phone-width grid does,
   and tying them together is what wrapped the labels on a laptop. */
@media (max-width: 1150px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: block; margin-left: auto; }
  /* Invisible, sitting exactly over the ☰ it drives. */
  .nav-toggle {
    display: block; position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%); width: 46px; height: 46px;
    margin: 0; opacity: 0; cursor: pointer; z-index: 3;
  }
  .nav-toggle:focus-visible + .hamburger { outline: 2px solid var(--primary); border-radius: 4px; }
  .nav-toggle:checked ~ .nav-links {
    display: flex; flex-direction: column; position: absolute;
    top: 68px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg); padding: 12px 16px; gap: 2px; z-index: 999;
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .nav-toggle:checked ~ .nav-links > a { padding: 11px 14px; border-bottom: 1px solid var(--border); }
  .nav-toggle:checked ~ .nav-links .nav-dropdown > button { width: 100%; padding: 11px 14px; border-bottom: 1px solid var(--border); justify-content: space-between; }
  /* Expanded, not collapsed: opening a submenu needed a tap handler, and the
     catalog pages have no JavaScript to provide one. Every destination is
     visible the moment the menu opens. */
  .nav-toggle:checked ~ .nav-links .nav-dropdown-menu {
    display: block; position: static; box-shadow: none; border: none;
    width: 100%; padding: 0 0 0 14px;
  }
  .nav-toggle:checked ~ .nav-links .nav-dropdown-menu a { padding: 10px 0; border-bottom: 1px solid var(--border); border-radius: 0; }
  /* The hover bridge is a desktop affordance and there is nothing to bridge
     here — the submenu is already expanded in the flow. Left alone it would be
     worse than useless: the menu is static, so the bridge would resolve against
     .nav-dropdown instead and hang 12px above it as an invisible strip over the
     link above, eating taps. */
  .nav-toggle:checked ~ .nav-links .nav-dropdown-menu::before { display: none; }
}

@media (max-width: 700px) {
  .hero-content { padding-top: 60px; padding-bottom: 60px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .type-tiles { grid-template-columns: repeat(2, 1fr); }
  .homes-grid { grid-template-columns: 1fr; }
  .trust-strip-inner { justify-content: center; }
  .trust-divider { display: none; }
  .order-drawer { width: 100vw; }
  .inventory-prompt { display: block; margin-bottom: 8px; }
  #inventory.expanded .inventory-prompt { display: none; }
  #inventoryContent { display: none; }
  #inventory.expanded #inventoryContent { display: block; }
}

/* ===== ORDER DRAWER ===== */
.card-footer-btns { display: flex; gap: 8px; align-items: center; }

.order-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 1100; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.order-overlay.open { opacity: 1; pointer-events: all; }

.order-drawer {
  position: fixed; top: 0; right: 0; height: 100%;
  width: 480px; max-width: 100vw;
  background: var(--bg); z-index: 1101;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,0.18);
}
.order-drawer.open { transform: translateX(0); }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer-title { font-size: 17px; font-weight: 700; color: var(--text); }
.drawer-close {
  background: none; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}
.drawer-close:hover { background: var(--bg-light); color: var(--text); }

.order-progress { padding: 16px 24px 0; flex-shrink: 0; }
.progress-steps { display: flex; gap: 4px; margin-bottom: 8px; }
.progress-step {
  flex: 1; height: 3px; background: var(--border);
  border-radius: 2px; transition: background 0.3s;
}
.progress-step.done { background: var(--primary); }
.progress-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.drawer-body { flex: 1; overflow-y: auto; padding: 24px; }

.order-home-preview {
  display: flex; gap: 14px; align-items: center;
  background: var(--bg-light); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px; margin-bottom: 20px;
}
.order-home-thumb {
  width: 90px; height: 68px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(135deg, #d4edda, #a8d5b5);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 32px;
}
.order-home-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-home-info h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.order-home-price { font-size: 19px; font-weight: 800; color: var(--primary); margin-bottom: 3px; }
.order-home-specs { font-size: 12px; color: var(--text-muted); }

.order-field { margin-bottom: 16px; }
.order-field label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.6px; margin-bottom: 6px;
}
.order-field input, .order-field select {
  width: 100%; padding: 10px 13px;
  border: 1.5px solid var(--border); border-radius: 7px;
  font-size: 14px; font-family: inherit; color: var(--text);
  background: var(--bg); outline: none; transition: border-color 0.15s;
}
.order-field input:focus, .order-field select:focus { border-color: var(--primary); }

.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1.5px solid var(--border);
  border-radius: 7px; cursor: pointer; transition: all 0.15s;
  font-size: 14px; font-weight: 500;
}
.radio-option:hover { border-color: var(--primary); background: var(--primary-light); }
.radio-option input[type="radio"] { accent-color: var(--primary); width: 15px; height: 15px; flex-shrink: 0; }
.radio-option.selected { border-color: var(--primary); background: var(--primary-light); }

.drawer-footer {
  padding: 16px 24px; border-top: 1px solid var(--border);
  flex-shrink: 0; background: var(--bg);
}
.drawer-footer .btn { width: 100%; justify-content: center; font-size: 14px; }

.order-confirm { text-align: center; padding: 24px 0 8px; }
.confirm-icon { font-size: 52px; margin-bottom: 14px; }
.confirm-icon .icon, .confirm-icon svg { width: 52px; height: 52px; color: var(--success); }
.card-price-note .ic-note { width: 14px; height: 14px; vertical-align: -2px; color: var(--text-muted); }
.confirm-ref {
  display: inline-block; background: var(--primary-light); color: var(--primary);
  font-size: 17px; font-weight: 800; letter-spacing: 1.5px;
  padding: 7px 20px; border-radius: 6px; margin-bottom: 18px;
}
.confirm-title { font-size: 21px; font-weight: 800; margin-bottom: 10px; }
.confirm-msg { font-size: 14px; color: var(--text-muted); line-height: 1.75; }

/* ===== ZIP BAR & TRANSPARENT PRICING ===== */
.zip-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--bg-light); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 20px; margin-bottom: 24px;
}
.zip-bar-pin { width: 26px; height: 26px; color: var(--primary); flex-shrink: 0; }
.zip-bar-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 220px; }
.zip-bar-text strong { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-style: italic; font-size: 16px; letter-spacing: 0.3px; }
.zip-status { font-size: 13px; color: var(--text-muted); }
.zip-status.in { color: var(--success); font-weight: 600; }
.zip-status.out { color: var(--warning); font-weight: 600; }
.zip-status a { color: var(--primary); font-weight: 600; cursor: pointer; }
.zip-bar-form { display: flex; gap: 8px; align-items: center; }
.zip-bar-form input {
  width: 120px; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 6px;
  font-size: 15px; font-family: var(--font-mono); background: var(--bg);
  outline: none; transition: border-color 0.15s;
}
.zip-bar-form input:focus { border-color: var(--primary); }

.zip-prompt-label { font-size: 13px; font-weight: 600; color: var(--text-mid); }
.zip-scroll-link { color: var(--primary); font-weight: 700; cursor: pointer; text-decoration: underline; }
.zip-scroll-link:hover { color: var(--primary-dark); }
.zip-mini-form { display: flex; gap: 6px; align-items: center; }
.zip-mini-form input {
  flex: 1; min-width: 0; width: 90px; padding: 8px 10px;
  border: 1.5px solid var(--border); border-radius: 6px;
  font-size: 14px; font-family: var(--font-mono); background: var(--bg);
  outline: none; transition: border-color 0.15s;
}
.zip-mini-form input:focus { border-color: var(--primary); }
#modalPriceBlock .zip-mini-form { justify-content: flex-end; }

.price-included { font-size: 12px; font-weight: 700; color: var(--success); margin-top: 2px; }
.card-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-price-row .price-included, .card-price-row .price-caveat { margin-top: 0; text-align: right; }
.price-caveat { font-size: 12px; font-weight: 600; color: var(--warning); margin-top: 2px; line-height: 1.45; }
.zip-change { color: var(--text-muted); font-weight: 500; cursor: pointer; text-decoration: underline; white-space: nowrap; }
.zip-change:hover { color: var(--primary); }

/* A skeleton rather than a spinner: twenty spinners at once is noise, and this
   reserves the line height so the grid doesn't jump when the prices land. */
.price-skeleton {
  height: 26px; width: 130px; border-radius: 6px;
  background: linear-gradient(90deg, var(--border) 25%, var(--bg-alt, #f4f4f4) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: price-shimmer 1.2s ease-in-out infinite;
}
@keyframes price-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .price-skeleton { animation: none; } }

.price-est { color: var(--warning); font-weight: 700; white-space: nowrap; }
.cfg-delivery-est { font-size: 11px; font-weight: 600; color: var(--warning); margin: 2px 0 6px; }
.of-zip-quote { font-size: 12px; font-weight: 600; color: var(--text-mid); margin-top: 6px; min-height: 16px; }

/* ===== DESIGN MY HOME CONFIGURATOR ===== */
.config-overlay {
  position: fixed; inset: 0; z-index: 1050;
  background: var(--bg);
  display: none; flex-direction: column;
}
.config-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 2px solid var(--primary);
  background: var(--bg); flex-shrink: 0; box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.config-title { font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 20px; letter-spacing: 0.3px; }
.config-scroll { flex: 1; overflow-y: auto; padding: 32px 0 48px; }
.config-layout {
  display: grid; grid-template-columns: 1fr minmax(380px, 480px); gap: 40px; align-items: start;
  /* Fill the whole overlay width — no centered-container dead space on the right */
  max-width: none; padding: 0 clamp(20px, 4vw, 48px);
}
/* Let columns shrink below content min-width (the photo thumb strip would
   otherwise blow the track out past the viewport on mobile) */
.config-layout > * { min-width: 0; }

.config-intro { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 24px; }

.config-gallery { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 16px; }
.config-gallery .gallery-main { height: 360px; }
@media (max-width: 820px) {
  .config-gallery .gallery-main { height: 240px; }
}

.config-group { margin-bottom: 28px; }
.config-group-title {
  font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: 17px; letter-spacing: 0.3px; margin-bottom: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.config-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.12s; font-size: 14px;
}
.config-opt:hover { background: var(--bg-light); }
.config-opt input[type="checkbox"] { accent-color: var(--primary); width: 17px; height: 17px; flex-shrink: 0; cursor: pointer; }
.config-opt-name { flex: 1; font-weight: 500; }
.config-opt-price { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
/* Quantity stepper for options sold per unit, e.g. porcelain sinks at $95 each. */
.config-opt-qty {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 99px; padding: 2px; cursor: default;
}
.config-opt-qty .qty-btn {
  width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent;
  color: var(--text-mid); font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background 0.12s;
}
.config-opt-qty .qty-btn:hover:not(:disabled) { background: var(--bg-light); color: var(--text); }
.config-opt-qty .qty-btn:disabled { opacity: 0.3; cursor: default; }
.config-opt-qty .qty-val {
  min-width: 20px; text-align: center; font-family: var(--font-mono);
  font-weight: 600; font-size: 13px;
}
.config-opt.is-included { cursor: default; }
.config-opt.is-included:hover { background: none; }
.config-opt.is-included .config-opt-name { color: var(--text-mid); }
.opt-popular {
  display: inline-block; background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 7px; border-radius: 99px; margin-left: 7px; vertical-align: 1px;
}
.opt-included {
  display: inline-block; background: var(--success-bg); color: var(--success);
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px;
}

.config-summary {
  position: sticky; top: 16px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 22px;
}
.cfg-summary-title { font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 18px; margin-bottom: 14px; }
.config-line {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; padding: 6px 0; border-bottom: 1px dashed var(--border);
}
.config-line span:last-child { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.config-line.upgrade span:first-child { color: var(--text-mid); }
.config-total {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 12px 0 4px; font-weight: 800; font-size: 15px;
}
.config-total span:last-child { font-family: var(--font-mono); font-size: 24px; color: var(--primary); }
.cfg-delivery { font-size: 12px; line-height: 1.5; margin: 8px 0 4px; color: var(--text-muted); }
.cfg-delivery.in { color: var(--success); font-weight: 600; }
.cfg-delivery.out { color: var(--warning); font-weight: 600; }
.cfg-delivery .zip-mini-form { margin-top: 6px; }
.cfg-ctas { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cfg-fineprint { font-size: 11px; color: var(--text-muted); margin-top: 12px; line-height: 1.5; text-align: center; }

.order-config-breakdown {
  background: var(--bg-light); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 20px;
}

.config-mobilebar {
  display: none; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--charcoal);
  flex-shrink: 0; box-shadow: 0 -4px 16px rgba(0,0,0,0.2);
}
.cfg-mobile-total { flex: 1; display: flex; flex-direction: column; color: #fff; line-height: 1.25; }
.cfg-mobile-total span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.6); }
.cfg-mobile-total strong { font-family: var(--font-mono); font-size: 19px; }
.config-mobilebar .btn-outline { color: #fff; border-color: rgba(255,255,255,0.55); }

.cfg-lead-title { font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 20px; margin-bottom: 6px; }
.cfg-lead-summary { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; }

@media (max-width: 820px) {
  .config-layout { grid-template-columns: 1fr; }
  .config-summary { position: static; }
  .cfg-ctas { display: none; }
  .config-mobilebar { display: flex; }
  .config-scroll { padding-bottom: 24px; }
  .zip-bar { padding: 14px 16px; }
  .zip-bar-form { width: 100%; }
  .zip-bar-form input { flex: 1; width: auto; }
}

/* ===== BRAND TYPOGRAPHY ===== */
h1, h2, h3, h4, .logo, .footer-logo, .modal-title, .confirm-title, .drawer-title,
.home-card-body h3, .why-card h3, .reviewer-name,
.footer-col h4, .contact-form-box h3, .order-home-info h3 { font-family: var(--font-display); }
.eyebrow, .btn, .hero-label, .card-badge, .type-tile h3,
.section-header h2, .type-tiles-section h2, .contact-info h2 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-style: italic; letter-spacing: 0.3px;
}
.hero h1, .hero-slogan { font-family: var(--font-display); font-style: italic; text-transform: uppercase; }
.nav-phone, a[href^="tel:"], a[href^="sms:"], .spec-item .spec-val, .modal-spec strong { font-family: var(--font-mono); }

/* ===== CATALOG PAGES (server-rendered: /homes, /home-types, /manufacturers,
   /floor-plans, /manufactured-homes) ===== */

/* Cards became real links when every card got its own URL. The base rule
   styles a div, so restore the box model an anchor doesn't have. */
a.home-card { display: block; color: inherit; }
/* The whole card is one <a>, so this is a span wearing the button's clothes —
   an <a> inside an <a> is invalid and the browser would split the card in two.
   Full width so it reads as the card's action rather than a stray label. */
.card-cta { margin-top: 4px; width: 100%; }

.crumbs { border-bottom: 1px solid var(--border); background: var(--bg); font-size: 13px; }
.crumbs .container { padding-top: 12px; padding-bottom: 12px; color: var(--text-muted); }
.crumbs a { color: var(--text-mid); }
.crumbs a:hover { color: var(--primary); }
.crumb-sep { margin: 0 8px; color: var(--border); }

.page-head { padding: 44px 0 8px; }
.page-head h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; line-height: 1.15; margin-bottom: 14px; font-style: italic; text-transform: uppercase; }
.page-intro { font-size: 17px; color: var(--text-mid); max-width: 780px; }
.page-intro a { color: var(--primary); font-weight: 600; }

.results-line { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 18px; }
.empty-note { color: var(--text-muted); padding: 40px 0; }
.empty-note a { color: var(--primary); font-weight: 600; }

.link-card { display: block; color: inherit; transition: transform 0.2s, box-shadow 0.2s; }
.link-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* "Keep browsing" — the block that stops every collection page being a dead
   end for a crawler that landed deep. */
.chip-rows { display: flex; flex-direction: column; gap: 14px; }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); min-width: 132px; }
.chip {
  display: inline-block; padding: 7px 14px; border: 1.5px solid var(--border); border-radius: 20px;
  background: var(--bg); font-size: 14px; font-weight: 600; color: var(--text-mid); transition: all 0.15s;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }

/* ===== HOME DETAIL PAGE ===== */
.pd-head { margin-bottom: 24px; }
.pd-head h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.1; font-style: italic; text-transform: uppercase; }
.pd-sub { font-size: 17px; color: var(--text-mid); margin-top: 8px; }

.pd-gallery { margin-bottom: 32px; }
/* The gallery steps through photos in place. A radio sits immediately before
   each slide, so one generic rule shows whichever is picked — and picking one
   writes nothing to the address bar, which stepping through photos shouldn't.
   The radios stay focusable so the group keeps its native arrow-key stepping;
   they're just 1px and invisible. */
.pd-stage {
  position: relative; height: clamp(260px, 46vw, 520px);
  border-radius: 10px; overflow: hidden; background: #000;
}
/* Each slide needs an explicit z-index, not just the shown one: a positioned
   element with z-index:auto forms no stacking context, so the arrows inside a
   hidden slide (z-index 3, below) escaped it and sat above the visible slide,
   swallowing every click on the photo. */
.pd-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 0; }
.pd-slide.is-shown { opacity: 1; pointer-events: auto; z-index: 2; }

/* The arrows and the thumbnails do nothing without app.js, so they wait for it
   rather than sitting there dead. The hero photo shows either way.
   Written as :not(.is-live) rather than a plain `display:none` because the
   rules that lay these out come later in the file and would win on order. */
.pd-gallery:not(.is-live) .pd-stage-nav,
.pd-gallery:not(.is-live) .pd-photo-strip { display: none; }
/* A button sizes to its content, where the anchor this replaced filled its
   parent — without an explicit width the photo left a third of the stage black. */
.pd-slide-zoom {
  display: block; width: 100%; height: 100%;
  padding: 0; border: none; background: none; cursor: zoom-in;
}
.pd-stage-nav, .pd-thumb, .pd-lb-nav, .pd-lb-close, .pd-lb-scrim, .pd-slide-zoom {
  cursor: pointer; border: none; font-family: inherit; padding: 0;
}
.pd-thumb { background: none; }
.pd-thumb.is-current { opacity: 1; border-color: var(--primary); }
.pd-photo-main { width: 100%; height: 100%; object-fit: cover; }

.pd-stage-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff;
  font-size: 28px; line-height: 1; transition: background 0.15s;
}
.pd-stage-nav:hover { background: rgba(0,0,0,0.72); }
.pd-stage-prev { left: 12px; }
.pd-stage-next { right: 12px; }
.pd-stage-count {
  position: absolute; bottom: 12px; right: 12px; z-index: 3;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 12px;
  padding: 3px 10px; border-radius: 20px;
}

.pd-photo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 10px; }
.pd-thumb {
  display: block; border-radius: 6px; overflow: hidden;
  border: 2px solid transparent; opacity: 0.72; transition: opacity 0.15s, border-color 0.15s;
}
.pd-thumb:hover { opacity: 1; border-color: var(--primary); }
.pd-thumb img { width: 100%; height: 80px; object-fit: cover; background: #000; }

.pd-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.pd-h2 { font-size: 24px; font-weight: 800; margin: 32px 0 14px; font-style: italic; text-transform: uppercase; }
.pd-note { font-size: 15px; color: var(--text-mid); margin-top: 12px; }
.pd-note a { color: var(--primary); font-weight: 600; }

.pd-cta-box {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 24px; box-shadow: var(--shadow-sm); position: sticky; top: 90px;
}
.pd-cta-box h2 { font-size: 20px; font-weight: 800; margin-bottom: 8px; font-style: italic; text-transform: uppercase; }
.pd-cta-box p { font-size: 14px; color: var(--text-mid); margin-bottom: 16px; }
.pd-cta-box .btn { margin-bottom: 10px; }


@media (max-width: 900px) {
  .pd-layout { grid-template-columns: 1fr; gap: 28px; }
  .pd-cta-box { position: static; }
  .chip-label { min-width: 100%; }
}

/* ===== HOME PAGE PHOTO LIGHTBOX =====
   One overlay for the whole gallery, shown and filled by app.js. No id, no
   fragment, nothing in the address bar — a photo isn't a place. */

.pd-lightbox {
  display: flex; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.92); align-items: center; justify-content: center;
}
.pd-lightbox[hidden] { display: none; }
.pd-lightbox img {
  position: relative; z-index: 1;
  max-width: 88vw; max-height: 88vh; width: auto; height: auto; object-fit: contain;
  border-radius: 8px; box-shadow: 0 8px 48px rgba(0,0,0,0.6);
}
/* Clicking anywhere off the photo closes it, so it sits under the image. */
.pd-lb-scrim { position: absolute; inset: 0; z-index: 0; cursor: zoom-out; }
.pd-lb-close, .pd-lb-nav {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.15); color: #fff; border-radius: 50%; line-height: 1;
  transition: background 0.15s;
}
.pd-lb-close:hover, .pd-lb-nav:hover { background: rgba(255,255,255,0.32); }
.pd-lb-close { top: 16px; right: 20px; width: 44px; height: 44px; font-size: 28px; }
.pd-lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 34px; }
.pd-lb-prev { left: 20px; }
.pd-lb-next { right: 20px; }
.pd-lb-count {
  position: absolute; z-index: 2; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.55); color: #fff; font-size: 13px; padding: 4px 12px; border-radius: 20px;
}
@media (max-width: 700px) {
  .pd-lb-nav { width: 44px; height: 44px; font-size: 28px; }
  .pd-lb-prev { left: 8px; }
  .pd-lb-next { right: 8px; }
}

/* ===== DESIGN PAGE (the configurator, in the page rather than over it) =====
   .config-summary and the option rows keep their styling from when this was a
   full-screen overlay; what changes is that it now sits in the two-column
   layout of a home's own page. */
.cfg-pending { font-size: 14px; color: var(--text-muted); padding: 10px 0 16px; }
#cfgOptions:empty::after {
  content: 'No upgrades are offered on this home.';
  display: block; font-size: 14px; color: var(--text-muted); padding: 8px 0 16px;
}
/* The column has to be as tall as the row for the card to have anywhere to
   travel: .pd-layout sets align-items:start, which shrink-wraps this to the
   card's own height, and a sticky element can only move inside its parent.
   Stretching it gives the card the full height of the page to ride down.
   top clears the 68px sticky header. */
.pd-aside { align-self: stretch; }
.pd-aside .config-summary { position: sticky; top: 90px; margin-bottom: 20px; }
@media (max-width: 900px) {
  .pd-aside .config-summary { position: static; }
}

/* The running total, pinned to the bottom of the phone screen. It used to be
   the last row of the full-screen configurator; on a page it has to pin
   itself. Hidden above the breakpoint, where the summary card is in view. */
.config-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; }