/* =========================================================
   Starie's — Permanent Outdoor Smart Lighting
   Static site styles
   ========================================================= */

:root {
  /* Brand palette sampled from the Starie's logo */
  --bg:        #050507;
  --bg-alt:    #0b0b0d;
  --surface:   #131315;
  --surface-2: #1c1c1f;
  --line:      #2a2a2e;
  --text:      #f0ebe1;
  --muted:     #a39d93;
  --gold:      #d4b671;
  --gold-2:    #c5a968;
  --gold-soft: rgba(197, 169, 104, 0.14);
  --radius:    16px;
  --radius-sm: 10px;
  --maxw:      1160px;
  --shadow:    0 20px 60px -20px rgba(0, 0, 0, 0.7);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p  { margin: 0 0 1rem; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow { max-width: 780px; }

.grad {
  background: linear-gradient(100deg, var(--gold), #e8d9ac 60%, var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 .8rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .95rem;
  padding: .7rem 1.3rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn-lg { padding: .9rem 1.7rem; font-size: 1rem; }
.btn-primary {
  background: linear-gradient(100deg, var(--gold), var(--gold-2));
  color: #201a05;
  box-shadow: 0 10px 30px -10px rgba(197, 169, 104, 0.6);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(197, 169, 104, 0.75); }
/* Secondary button sits over the hero photo, so it needs its own backing
   rather than a transparent fill that disappears against the image. */
.btn-ghost {
  background: rgba(5, 5, 7, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text);
  border-color: rgba(212, 182, 113, 0.75);
  box-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.8);
}
.btn-ghost:hover {
  background: rgba(5, 5, 7, 0.78);
  border-color: var(--gold);
  color: var(--gold);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 5, 7, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 68px;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; flex-shrink: 0; }
/* flex-shrink guards the wordmark: the nav is crowded at desktop widths and a
   shrinkable image gets squeezed out of its aspect ratio. */
.brand-logo { height: 34px; width: auto; display: block; flex-shrink: 0; }
.brand-logo-footer { height: 40px; }
.brand-name { font-size: 1.25rem; letter-spacing: -0.02em; }
.brand-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: radial-gradient(circle at 30% 30%, #e8d9ac, var(--gold) 45%, var(--gold-2));
  box-shadow: 0 0 18px 2px rgba(197, 169, 104, 0.55);
}
/* Nav starts just after the logo, with links spread across the bar and the
   phone + CTA anchored to the right edge. */
.nav {
  display: flex;
  align-items: center;
  flex: 1;
  margin-left: 2rem;
  gap: 1.5rem;
}
.nav a { color: var(--muted); font-weight: 600; font-size: .95rem; transition: color .15s; white-space: nowrap; }
.nav a:hover { color: var(--text); }
.nav .nav-cta { color: #201a05; }
.nav-phone { margin-left: auto; color: var(--gold) !important; font-weight: 700 !important; white-space: nowrap; }
.nav-phone:hover { color: #e8d9ac !important; }

/* ---------- Services dropdown ---------- */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item .nav-link { display: inline-flex; align-items: center; gap: .3rem; }
.caret { font-size: .7em; transition: transform .2s ease; }
.has-dropdown:hover .caret,
.has-dropdown:focus-within .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 290px;
  padding: 10px;
  display: grid;
  gap: 6px;
  background: rgba(11, 11, 13, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}
/* invisible bridge so the menu survives the gap under the link */
.dropdown::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Each service sits in its own box that lights up on hover */
.dropdown a {
  display: block;
  padding: .65rem .85rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.dropdown a:hover,
.dropdown a:focus-visible,
.dropdown a.is-active {
  color: var(--gold);
  background: var(--surface-2);
  border-color: rgba(212, 182, 113, .8);
  box-shadow: 0 0 18px rgba(197, 169, 104, .38), inset 0 0 12px rgba(197, 169, 104, .10);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: .25s; }

/* ---------- Hero ---------- */
/* Photo backdrop, dimmed so the headline stays legible. The horizontal fade
   keeps the left column dark for text while letting the house show on the
   right; the vertical fade blends into the trust bar below. */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(78vh, 700px);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  background-color: var(--bg);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* JPEG first as the fallback, then WebP for browsers that support image-set */
  background-image: url("../images/hero-house.jpg");
  background-image: image-set(
    url("../images/hero-house.webp") type("image/webp"),
    url("../images/hero-house.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center 58%;
  background-repeat: no-repeat;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5,5,7,.28) 0%, rgba(5,5,7,0) 32%, rgba(5,5,7,.5) 86%, var(--bg) 100%),
    linear-gradient(90deg, rgba(5,5,7,.62) 0%, rgba(5,5,7,.42) 38%, rgba(5,5,7,.16) 70%, rgba(5,5,7,.06) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: 760px; }
/* Keeps text legible now that the photo shows through more.
   h1 uses a filter because gradient-clipped text ignores text-shadow cleanly. */
.hero-inner h1 { filter: drop-shadow(0 2px 14px rgba(0,0,0,.85)); }
.hero-inner .eyebrow,
.hero-sub,
.hero-stats strong,
.hero-stats span { text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.hero-sub { color: #d9d4cb; font-size: 1.12rem; max-width: 620px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.8rem 0 2.4rem; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  list-style: none;
  margin: 0;
  padding: 1.6rem 0 1rem;
}
.hero-stats strong { display: block; font-size: 1.7rem; color: var(--gold); font-weight: 800; }
.hero-stats span { color: var(--muted); font-size: .9rem; }


/* ---------- Service pages ---------- */
.hero-service { min-height: min(52vh, 460px); }
.hero-service .hero-sub { max-width: 680px; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--gold); }
.crumbs span[aria-hidden] { opacity: .5; margin: 0 .3rem; }

.service-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .8rem;
}
.service-links a {
  display: block;
  padding: 1rem 1.2rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.service-links a:hover {
  color: var(--gold);
  border-color: rgba(212, 182, 113, .8);
  box-shadow: 0 0 20px rgba(197, 169, 104, .32);
  transform: translateY(-2px);
}

/* ---------- Trust bar ---------- */
.trustbar {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.1rem 24px;
  color: var(--muted);
  font-weight: 600;
  font-size: .95rem;
}
.trust-ico { color: var(--gold); font-weight: 800; margin-right: .35rem; }

/* ---------- Sections ---------- */
/* offset anchor jumps so headings clear the sticky header */
section[id] { scroll-margin-top: 80px; }
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 680px; margin: 0 auto 2.6rem; text-align: center; }
.section-lede { color: var(--muted); font-size: 1.08rem; }

/* ---------- Cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(197, 169, 104,.5); box-shadow: var(--shadow); }
.card-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.card p { color: var(--muted); margin: 0; font-size: .96rem; }
/* Clickable service cards */
.card-link { display: flex; flex-direction: column; }
.card-link p { flex: 1; }
.card-more {
  display: inline-block;
  margin-top: 1rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--gold);
  transition: transform .18s ease;
}
.card-link:hover .card-more { transform: translateX(3px); }

/* ---------- App section ---------- */
.app-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.feature-list { list-style: none; padding: 0; margin: 1.4rem 0 2rem; display: grid; gap: .9rem; }
.feature-list li { position: relative; padding-left: 1.9rem; color: var(--muted); }
.feature-list li::before {
  content: "✦";
  position: absolute; left: 0; top: 0;
  color: var(--gold);
}
.feature-list strong { color: var(--text); }

.phone {
  justify-self: center;
  width: 260px;
  padding: 14px;
  border-radius: 34px;
  background: linear-gradient(160deg, #1e1e21, #0d0d0f);
  border: 1px solid var(--line);
  box-shadow: var(--shadow), 0 0 60px -10px rgba(197, 169, 104,.3);
  position: relative;
}
.phone-notch {
  width: 90px; height: 6px; border-radius: 6px;
  background: #000; margin: 4px auto 12px;
}
.phone-screen {
  background: radial-gradient(120% 90% at 20% 0%, #18181b, #08080a);
  border-radius: 22px;
  padding: 18px 16px 22px;
  min-height: 360px;
}
.phone-title { font-weight: 700; margin-bottom: 14px; }
.swatches { display: flex; gap: 8px; margin-bottom: 20px; }
.swatches span { flex: 1; height: 34px; border-radius: 8px; }
.swatches span:nth-child(1){ background:#d4b671; }
.swatches span:nth-child(2){ background:#e0532e; }
.swatches span:nth-child(3){ background:#2ea3e0; }
.swatches span:nth-child(4){ background:#8a2ee0; }
.swatches span:nth-child(5){ background:#2ee08a; }
.phone-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,.06);
  font-size: .9rem; color: var(--muted);
}
.pill {
  font-size: .78rem; font-weight: 700;
  padding: .25rem .6rem; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
}
.pill.on { background: var(--gold-soft); color: var(--gold); }
.phone-slider {
  margin-top: 18px; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--surface-2));
  position: relative;
}
.phone-slider span {
  position: absolute; top: 50%; left: 62%;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: 0 0 12px rgba(197, 169, 104,.8);
}

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.shot {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
}
.shot::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.25), transparent 8%),
    radial-gradient(circle at 50% 25%, rgba(255,255,255,.22), transparent 8%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.25), transparent 8%);
}
.shot figcaption {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: .8rem 1rem;
  font-weight: 700;
  font-size: .92rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.65));
}
.shot-warm    { background: linear-gradient(160deg, #3a2f16, #6b5320); }
.shot-holiday { background: linear-gradient(160deg, #3a1616, #164a1e); }
.shot-team    { background: linear-gradient(160deg, #16233a, #3a2b16); }
.shot-cool    { background: linear-gradient(160deg, #16283a, #1e3350); }
.shot-party   { background: linear-gradient(120deg, #3a1640, #163a3a, #3a3016); }
.shot-amber   { background: linear-gradient(160deg, #4a2f10, #7a4d15); }

/* ---------- Service areas ---------- */
.areas-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
}
.areas-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .55rem 1.15rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
  transition: border-color .2s ease, color .2s ease;
}
.areas-list li:hover { border-color: rgba(197, 169, 104,.55); color: var(--gold); }
.areas-note { text-align: center; color: var(--muted); margin: 1.8rem 0 0; }
.areas-note a { color: var(--gold); font-weight: 600; }
.areas-note a:hover { text-decoration: underline; }

/* ---------- Referral ---------- */
.referral-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  text-align: center;
}
.referral-card h2 { margin-bottom: 1.4rem; }

/* "How it works" callout box */
.referral-steps {
  list-style: none;
  counter-reset: step;
  padding: 1.2rem 1.4rem;
  margin: 0 0 2rem;
  display: grid;
  gap: .7rem;
  text-align: left;
  background: var(--gold-soft);
  border: 1px solid rgba(197, 169, 104, 0.35);
  border-radius: var(--radius-sm);
}
.referral-steps li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--text);
  counter-increment: step;
  font-size: .97rem;
}
.referral-steps li::before {
  content: counter(step) ".";
  position: absolute;
  left: 0; top: 0;
  color: var(--gold);
  font-weight: 800;
}
.referral-steps strong { color: var(--gold); }

/* Referral form */
.referral-form { text-align: left; display: grid; gap: 1rem; }
.form-group-label {
  margin: .6rem 0 0;
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.req { color: var(--gold); }
.btn-block { width: 100%; margin-top: .5rem; }

/* ---------- Warranty banner ---------- */
.warranty-banner {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.warranty-banner div {
  background: var(--surface);
  padding: 1.6rem 1rem;
  text-align: center;
}
.warranty-banner strong { display: block; font-size: 1.6rem; color: var(--gold); }
.warranty-banner span { color: var(--muted); font-size: .9rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .8rem; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 1.2rem;
  transition: border-color .2s;
}
.faq details[open] { border-color: rgba(197, 169, 104,.4); }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 1.1rem 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin: 0 0 1.1rem; }

/* ---------- Contact ---------- */
.section-cta {
  background:
    radial-gradient(900px 400px at 80% 0%, rgba(197, 169, 104,.12), transparent 60%),
    var(--bg-alt);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .8rem; }
.contact-list li { display: flex; align-items: center; gap: .7rem; color: var(--muted); }
.contact-list span { color: var(--gold); }
.contact-list a:hover { color: var(--gold); }

.contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  display: grid;
  gap: 1rem;
}
.field { display: grid; gap: .4rem; }
.field label { font-size: .88rem; font-weight: 600; }
.field .opt { color: var(--muted); font-weight: 400; }
.field input,
.field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .75rem .9rem;
  color: var(--text);
  font: inherit;
  transition: border-color .15s;
}
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--gold); }
.field textarea { resize: vertical; }
.form-note { margin: 0; font-size: .9rem; min-height: 1.2em; }
/* Honeypot — visually hidden but still reachable by bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field input:invalid:not(:placeholder-shown) { border-color: #b4553f; }
.form-note.ok { color: var(--gold); }
.form-note.err { color: #ff8b7a; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 3rem 0 2rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.footer-brand p { color: var(--muted); margin-top: .6rem; max-width: 320px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.footer-nav a { color: var(--muted); font-weight: 600; }
.footer-nav a:hover { color: var(--gold); }
.footer-bottom { padding-top: 1.4rem; color: var(--muted); font-size: .88rem; }
.footer-bottom p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .app-grid, .contact-grid { grid-template-columns: 1fr; }
  .phone { order: -1; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* Tighten nav spacing before the mobile menu kicks in. The link row plus the
   phone and CTA is wider than the 1160px container, so spacing steps down and
   the header phone drops out before anything can overflow the viewport. */
@media (max-width: 1240px) {
  .nav { margin-left: 1.5rem; gap: 1.1rem; }
  .nav a { font-size: .9rem; }
}

@media (max-width: 1120px) {
  .nav-phone { display: none; }
}

@media (max-width: 960px) {
  .nav {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    flex: none;
    margin-left: 0;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: .5rem 24px 1.2rem;
    transform: translateY(-140%);
    transition: transform .28s ease;
    box-shadow: var(--shadow);
  }
  .nav.open { transform: translateY(0); }
  .nav a { padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .nav .nav-cta { margin-top: .8rem; border-bottom: none; }
  .nav-phone { margin-left: 0; }

  /* Dropdown becomes a nested list inside the mobile menu */
  .nav-item { display: block; }
  .nav-item .nav-link { width: 100%; padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .caret { display: none; }
  .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: .6rem 0 .8rem .8rem;
    background: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    gap: 4px;
  }
  .dropdown::before { display: none; }
  .dropdown a { padding: .6rem .8rem; border-bottom: 1px solid var(--line); white-space: normal; }
  .nav-toggle { display: flex; }
  .header-inner { justify-content: space-between; }
}

/* On narrow screens text spans the full width, so darken the photo evenly
   instead of only on the left. */
@media (max-width: 760px) {
  .hero { min-height: auto; }
  .hero::before {
    background-position: center center;
    /* smaller file on phones */
    background-image: url("../images/hero-house-1200.jpg");
    background-image: image-set(
      url("../images/hero-house-1200.webp") type("image/webp"),
      url("../images/hero-house-1200.jpg") type("image/jpeg")
    );
  }
  .hero::after {
    background: linear-gradient(180deg,
      rgba(5,5,7,.86) 0%, rgba(5,5,7,.74) 45%, rgba(5,5,7,.92) 88%, var(--bg) 100%);
  }
}

@media (max-width: 560px) {
  .cards, .cards-3, .gallery, .warranty-banner { grid-template-columns: 1fr; }
  .hero-stats { gap: 1.6rem; }
  .form-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}