/* ══════════════════════════════════════════════════════════════════════
   VEZINA DESIGN SYSTEM V2
   Shared by the Arizona city pages (hubs, service pages, Milgard pages).
   Load AFTER /styles.css. Built on the Phoenix hub (Oct 2026).

   Rules that have bitten us:
   - one column: every band container uses --gut / --col so its edges match
     .nav-inner at every breakpoint (2rem/1.25rem/1rem gutters, 1216px max).
   - no overlapping elements: the owner reads overlap as broken.
   - styles.css adds gap:1.5rem to .stats-strip; we zero it so dividers center.
   - .mbar must be a <div>, not <nav> (styles.css makes nav sticky top:0).
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   PHOENIX HUB · DESIGN SYSTEM V2
   tokens, rhythm, display type, depth
   ══════════════════════════════════════════════════════════ */
:root {
  --ink: #141414;
  --body-c: #4b4b4b;
  --gold-deep: #8a5e00;
  --r-lg: 20px;
  --r-md: 16px;
  --shadow-card: 0 1px 2px rgba(12,12,12,.05), 0 16px 40px -20px rgba(12,12,12,.22);
  --shadow-float: 0 32px 80px -28px rgba(0,0,0,.55);
  --hair: rgba(12,12,12,.08);
  /* one column for the whole page, identical to .nav-inner at every breakpoint */
  --gut: 2rem;
  --col: 1216px;
}
@media (max-width: 768px) { :root { --gut: 1.25rem; } }
@media (max-width: 540px) { :root { --gut: 1rem; } }

/* ── rhythm & type ── */
section { padding: 5.5rem var(--gut); }
.inner { max-width: var(--col); }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

section h2, .nc-highlight-copy h2, .planner-copy h2, .quote-left h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--ink);
  margin: .55rem 0 1rem;
  max-width: 26ch;
}
.label { display: inline-block; margin-bottom: 0; }
.lede {
  color: var(--body-c);
  font-size: 1.02rem;
  line-height: 1.8;
  max-width: 62ch;
  margin: 0 0 .5rem;
}
.inner > .lede { margin-bottom: 0; }

/* ── breadcrumb (on dark hero) ── */
.crumb {
  max-width: 1280px; margin: 0 auto;
  padding: 1.25rem var(--gut) 0;
  font-size: .78rem; letter-spacing: .04em;
  color: rgba(255,255,255,.55);
  position: relative; z-index: 2;
}
.crumb a { color: rgba(255,255,255,.55); text-decoration: none; }
.crumb a:hover { color: var(--orange); }

/* ── hero ── */
.hero-grid {
  display: grid; grid-template-columns: 1.22fr .82fr;
  gap: 4rem; align-items: center;
  max-width: 1280px; margin: 0 auto;
  padding: 4rem var(--gut) 5rem;
  position: relative; z-index: 2;
}
.page-hero.city-hero { position: relative; padding: 0; }
.page-hero.city-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.42));
  pointer-events: none;
}
.hero-grid h1 { letter-spacing: -.01em; }

.paths-card {
  background: #fff; border-radius: var(--r-lg);
  padding: 1.9rem 1.9rem 1.4rem;
  box-shadow: var(--shadow-float);
  position: relative; overflow: hidden;
}
.paths-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--orange), #ffd966);
}
.paths-kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-deep);
  display: block; margin-bottom: .3rem;
}
.paths-card h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.55rem; font-weight: 800;
  color: var(--ink); text-transform: uppercase; letter-spacing: .03em;
  margin: 0 0 .5rem;
}
.path {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.02rem .15rem;
  border-bottom: 1px solid var(--hair);
  text-decoration: none; color: var(--ink);
}
.path:last-of-type { border-bottom: 0; }
.path b { display: block; font-size: .95rem; transition: color .15s; }
.path small { color: var(--muted); font-size: .8rem; }
.path-arrow {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream); color: var(--ink);
  font-weight: 700; font-size: .9rem;
  transition: all .18s;
}
.path:hover b { color: var(--gold-deep); }
.path:hover .path-arrow { background: var(--orange); transform: translateX(3px); }
.paths-foot {
  margin-top: .4rem; padding-top: .95rem;
  border-top: 1px solid var(--hair);
  font-size: .82rem; color: var(--muted);
}
.paths-foot a { color: var(--ink); font-weight: 700; text-decoration: none; }
.paths-foot a:hover { color: var(--gold-deep); }

.hero-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; max-width: 560px; }
.hero-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border: 1px solid rgba(255,255,255,.18);
  border-radius: 100px; background: rgba(12,12,12,.5);
  backdrop-filter: blur(4px);
  color: rgba(255,255,255,.92); font-size: .78rem; font-weight: 600; letter-spacing: .02em;
}
.hero-chip svg { width: 14px; height: 14px; color: var(--orange); flex-shrink: 0; }

/* ── stats strip ── */
.stats-band { background: var(--orange); padding: 2.6rem var(--gut); }
.stats-strip {
  max-width: var(--col); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 0; /* styles.css adds 1.5rem, which pushes the dividers off-center */
  text-align: center;
}
.stats-strip > div + div { border-left: 1px solid rgba(12,12,12,.16); }
.stat-number {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 3.1rem; font-weight: 800; color: var(--navy);
  line-height: 1; display: block;
}
.stat-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--navy); opacity: .72;
  margin-top: .45rem; display: block;
}

/* ── photo strip overlapping the stats band ── */
/* photos sit on white with a clean gap under the gold band, no overlap */
.photo-wrap { background: #fff; padding: 3rem var(--gut) 0; }
.photo-strip {
  max-width: var(--col); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem;
  position: relative; z-index: 2;
}
.photo-strip img {
  width: 100%; height: 320px; object-fit: cover;
  border-radius: var(--r-md); display: block;
  box-shadow: 0 24px 56px -24px rgba(0,0,0,.45);
}

/* ── service cards ── */
.svc-card {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.svc-card:hover { transform: translateY(-5px); box-shadow: 0 24px 56px -20px rgba(12,12,12,.28); border-color: rgba(245,179,0,.6); }
.svc-card > img { width: 100%; height: 215px; object-fit: cover; display: block; }
.svc-card-body { padding: 1.8rem 1.8rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.svc-card-body h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.45rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink); margin-bottom: .55rem;
}
.svc-card-body p { font-size: .9rem; color: var(--body-c); line-height: 1.72; margin: 0 0 1.1rem; }
.svc-link {
  margin-top: auto; font-size: .85rem; font-weight: 700;
  color: var(--ink); text-decoration: none; letter-spacing: .02em;
}
.svc-link::after { content: ' \2192'; color: var(--gold-deep); transition: margin .15s; }
.svc-link:hover { color: var(--gold-deep); }
.svc-link:hover::after { margin-left: 4px; }

.svc-cats {
  margin-top: 2.75rem; padding-top: 1.6rem;
  border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.6rem;
  font-size: .88rem;
}
.svc-cats > span {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.svc-cats a {
  color: var(--ink); text-decoration: none; font-weight: 600;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.svc-cats a:hover { border-bottom-color: var(--orange); color: var(--gold-deep); }

/* ── heat / energy panel ── */
.heat-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.heat-panel {
  background: var(--cream); border-radius: var(--r-lg);
  padding: 2.1rem 2.1rem 1.6rem;
  box-shadow: var(--shadow-card);
}
.heat-stats { display: grid; grid-template-columns: 1fr 1fr; }
.heat-stat { padding: 1.1rem 1.2rem; }
.heat-stat:nth-child(odd) { border-right: 1px solid var(--hair); }
.heat-stat:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
.heat-stat b {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem; font-weight: 800; color: var(--ink);
  display: block; line-height: 1.12;
}
.heat-stat small { color: var(--muted); font-size: .8rem; line-height: 1.5; display: block; margin-top: .25rem; }
.src-note { font-size: .76rem; color: var(--muted); margin-top: 1.1rem; line-height: 1.55; }
.heat-copy p { color: var(--body-c); line-height: 1.8; max-width: 58ch; }
.heat-copy p b { color: var(--ink); }
.heat-link { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--orange); padding-bottom: 2px; }
.heat-link:hover { color: var(--gold-deep); }

/* ── project planner ── */
#planner {
  background:
    radial-gradient(1000px 540px at 88% -8%, rgba(245,179,0,.14), transparent 62%),
    var(--navy);
  padding: 6rem var(--gut);
}
.planner-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 4rem; align-items: start; max-width: var(--col); margin: 0 auto; }
.planner-copy h2 { color: #fff; }
.planner-copy p, .planner-copy li { color: rgba(255,255,255,.76); font-size: .95rem; line-height: 1.75; }
.planner-copy ul { padding-left: 1.1rem; margin: 0 0 1rem; }
.planner-copy li { margin-bottom: .45rem; }
.planner-copy b { color: #fff; }
.ztab { display: grid; margin: 1.2rem 0 0; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; overflow: hidden; }
.ztab > div { display: grid; grid-template-columns: 2fr 1fr 1fr; }
.ztab span { padding: .6rem .85rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .86rem; color: rgba(255,255,255,.86); }
.ztab .zh span { border-top: 0; background: rgba(255,255,255,.07); color: var(--orange); font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }

.tool {
  background: #fff; border-radius: var(--r-lg);
  padding: 2rem;
  box-shadow: var(--shadow-float);
}
.tool h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem; font-weight: 800; color: var(--ink);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 1.35rem 0 .6rem;
  display: flex; align-items: center; gap: .5rem;
}
.tool h3:first-child { margin-top: 0; }
.tool h3 .n {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange); color: var(--ink);
  font-size: .8rem; display: grid; place-items: center; flex-shrink: 0;
}
.seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.seg label {
  display: flex; align-items: center; gap: .45rem;
  border: 1.5px solid var(--hair); border-radius: 100px;
  padding: .48rem .95rem; font-size: .85rem; font-weight: 600;
  color: var(--ink); cursor: pointer; transition: all .15s;
}
.seg label:hover { border-color: rgba(245,179,0,.7); }
.seg label.on { border-color: var(--orange); background: #fff6dc; }
.seg input { width: auto; margin: 0; accent-color: #b47d00; }
.cnt { display: grid; grid-template-columns: 1fr 86px; gap: .55rem .9rem; align-items: center; }
.cnt label { font-size: .88rem; color: var(--ink); font-weight: 500; }
.cnt input {
  width: 100%; padding: .55rem; border: 1px solid #ddd; border-radius: 10px;
  font: inherit; font-size: .9rem; text-align: center;
}
.cnt input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245,179,0,.2); }
.tool:not(.isb) .bonly { display: none; }
.chk { display: flex; gap: .55rem; align-items: center; margin-top: .9rem; font-size: .88rem; color: var(--ink); font-weight: 500; }
.chk input { width: auto; accent-color: #b47d00; }
.tool .out {
  background: var(--cream); border-radius: 14px;
  padding: 1.2rem 1.35rem; margin-top: 1.35rem;
  border-left: 4px solid var(--orange);
}
.tool .out .src { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tool .out .big { font-family: 'Barlow Condensed', sans-serif; font-size: 1.95rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.plist { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .85rem; color: var(--muted); }
.plist li { margin: .32rem 0; line-height: 1.55; }
.plist b { color: var(--ink); }
.tool .btn { width: 100%; justify-content: center; margin-top: 1.2rem; display: flex; }

/* ── good to know cards ── */
.why-grid-4 .why-card {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r-md);
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
}
.why-grid-4 .why-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .25s;
}
.why-grid-4 .why-card:hover::before { transform: scaleX(1); }
.why-grid-4 .why-card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.22rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink); margin-bottom: .55rem;
}
.why-grid-4 .why-card p { font-size: .86rem; color: var(--body-c); line-height: 1.68; margin: 0; }

/* ── splits ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.75rem; align-items: center; }
.split-media { margin: 0; position: relative; }
.split-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-lg); box-shadow: 0 28px 64px -24px rgba(0,0,0,.4); display: block; background: #1a1a1a; }
.split-media figcaption { margin-top: .85rem; font-size: .8rem; color: var(--muted); font-weight: 600; }
.split-media--dark figcaption { color: rgba(255,255,255,.55); }

/* ── gallery ── */
.gallery-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; margin-top: 2.4rem; }
.gallery-grid figure { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/5; margin: 0; background: #181818; box-shadow: var(--shadow-card); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; display: block; }
.gallery-grid figure:hover img { transform: scale(1.055); }
.gallery-grid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem .95rem .85rem; background: linear-gradient(to top, rgba(0,0,0,.85), transparent); color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: .03em; }

/* ── process steps ── */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(5,1fr); gap: 1.1rem; margin-top: 2.5rem; }
.step {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r-md);
  padding: 1.55rem 1.35rem; box-shadow: var(--shadow-card);
}
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem; font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--orange);
  display: block; margin-bottom: .85rem;
}
.step h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.08rem; font-weight: 800; color: var(--ink);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .45rem;
}
.step p { font-size: .83rem; color: var(--body-c); line-height: 1.62; margin: 0; }

/* ── new construction highlight ── */
#builders {
  padding: 6.5rem var(--gut);
  background:
    radial-gradient(900px 480px at 8% 110%, rgba(245,179,0,.12), transparent 60%),
    linear-gradient(rgba(8,8,8,.9), rgba(8,8,8,.93)),
    url('/images/windows/crew-installing-window-wall.webp') center 28%/cover no-repeat,
    var(--navy);
}
.nc-highlight-inner {
  max-width: var(--col); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 390px; gap: 4rem; align-items: center;
}
.nc-highlight-copy h2 { color: #fff; max-width: 24ch; }
.nc-highlight-copy p { color: rgba(255,255,255,.74); font-size: .96rem; line-height: 1.78; margin-bottom: 1.4rem; max-width: 62ch; }
.nc-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.nc-checklist li { display: flex; align-items: center; gap: .75rem; color: rgba(255,255,255,.9); font-size: .93rem; font-weight: 500; }
.nc-checklist li::before {
  content: ''; width: 19px; height: 19px; flex-shrink: 0;
  background: var(--orange); border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230C0C0C' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}
.nc-cta-card { background: #fff; border-radius: var(--r-lg); padding: 2.4rem 2.1rem; box-shadow: var(--shadow-float); }
.nc-cta-card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.7rem; font-weight: 800; color: var(--ink);
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: .6rem;
}
.nc-cta-card p { font-size: .88rem; color: var(--body-c); margin-bottom: 1.5rem; line-height: 1.68; }
.nc-cta-card .btn { display: block; text-align: center; margin-bottom: .75rem; }
.nc-cta-card .btn:last-child { margin-bottom: 0; }

/* ── builder logos ── */
.logo-band { background: #fff; padding: 3.75rem var(--gut); border-bottom: 1px solid var(--hair); }
.builder-strip { display: grid; grid-template-columns: repeat(8,1fr); gap: 1.4rem 2.4rem; align-items: center; margin-top: 2.2rem; }
.builder-strip img { width: 100%; max-height: 40px; object-fit: contain; filter: grayscale(1); opacity: .55; transition: all .25s; }
.builder-strip img:hover { filter: none; opacity: 1; }
/* white-on-transparent artwork: render as a dark silhouette so it shows on white */
.builder-strip img.logo-white, .builder-strip img.logo-white:hover { filter: brightness(0); }
.builder-strip img.logo-white { opacity: .5; }
.builder-strip img.logo-white:hover { opacity: .85; }

/* ── why local ── */
.local-wrap { display: grid; grid-template-columns: 1.02fr 1fr; gap: 1.4rem; margin-top: 2.5rem; align-items: stretch; }
.local-media {
  margin: 0; position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-card); min-height: 100%;
}
.local-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.local-media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.5rem 1.2rem;
  background: linear-gradient(to top, rgba(0,0,0,.82), transparent);
  color: rgba(255,255,255,.92); font-size: .8rem; font-weight: 600; letter-spacing: .02em;
}
.why-local-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem; margin-top: 2.5rem; }
.why-local-grid--2 { grid-template-columns: repeat(2,1fr); margin-top: 0; gap: 1.4rem; }
.why-local-card {
  background: #fff; border-radius: var(--r-md); border: 1px solid var(--hair);
  padding: 1.55rem 1.45rem; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.why-local-icon {
  width: 42px; height: 42px; background: var(--navy); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; flex-shrink: 0;
}
.why-local-icon svg { width: 22px; height: 22px; color: var(--orange); }
.why-local-card h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.18rem; font-weight: 800; color: var(--ink);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem;
}
.why-local-card p { font-size: .85rem; color: var(--body-c); line-height: 1.66; margin: 0; }

/* ── areas + Arizona map ── */
.areas-wrap { display: grid; grid-template-columns: 1.02fr .98fr; gap: 3.75rem; align-items: center; }
.map-panel {
  background: #111; border-radius: var(--r-lg);
  padding: 2rem 2rem 1.3rem;
  box-shadow: var(--shadow-card);
}
.map-panel svg { width: 100%; height: auto; display: block; }
.map-legend {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center;
  margin-top: 1rem; padding-top: .95rem; border-top: 1px solid rgba(255,255,255,.1);
  font-size: .74rem; color: rgba(255,255,255,.6);
}
.map-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.map-legend i {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; font-style: normal;
}
.map-legend .lg-hq { background: var(--orange); }
.map-legend .lg-hub { background: transparent; border: 2px solid var(--orange); }
.map-legend .lg-dot { background: rgba(245,179,0,.5); width: 7px; height: 7px; }
.areas-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin: 2rem 0 1.2rem; }
.areas-grid a {
  display: block; padding: 1.25rem 1.4rem;
  border: 1px solid var(--hair); border-radius: var(--r-md);
  background: #fff; text-decoration: none; color: var(--ink); font-weight: 700;
  box-shadow: var(--shadow-card);
  transition: border-color .15s, transform .15s;
}
.areas-grid a:hover { border-color: var(--orange); transform: translateY(-3px); }
.areas-grid a b { font-family: 'Barlow Condensed', sans-serif; font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.areas-grid a small { display: block; color: var(--muted); font-weight: 500; font-size: .78rem; margin-top: .25rem; }
.city-pills { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.4rem; }
.city-pill {
  display: inline-block; padding: .48rem 1.15rem; border-radius: 100px;
  background: #fff; border: 1px solid var(--hair);
  color: var(--body-c); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}

/* ── FAQ ── */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; margin-top: 2.4rem; }
.faq-card {
  border: 1px solid var(--hair); border-radius: var(--r-md);
  padding: 1.9rem 2rem; background: #fff; height: 100%;
  box-shadow: var(--shadow-card);
}
.faq-card h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.18rem; font-weight: 800; color: var(--ink);
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: .7rem;
}
.faq-card p { font-size: .9rem; color: var(--body-c); line-height: 1.72; margin: 0; }

/* ── quote ── */
.quote-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4.5rem; align-items: start; }
.quote-left .eyebrow {
  font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: .5rem; display: block;
}
.quote-phone {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.7rem; font-weight: 800; color: var(--ink);
  margin: 1.2rem 0; text-decoration: none; letter-spacing: .02em;
}
.quote-phone:hover { color: var(--gold-deep); }
.quote-benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.quote-benefits li { display: flex; align-items: center; gap: .65rem; font-size: .88rem; color: var(--body-c); font-weight: 500; }
.quote-benefits li::before { content: ''; width: 7px; height: 7px; flex-shrink: 0; background: var(--orange); border-radius: 50%; }
.quote-office { color: var(--body-c); font-size: .86rem; line-height: 1.7; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--hair); }
.quote-office b { color: var(--ink); }

.contact-form .form-group label {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
}
.contact-form input, .contact-form select, .contact-form textarea {
  border: 1px solid #ddd; border-radius: 10px;
  padding: .82rem .95rem; font: inherit; font-size: .92rem; width: 100%;
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245,179,0,.2);
}

/* ── gold band ── */
.cta-band { background: var(--orange); padding: 3.25rem var(--gut); }
.cta-band-inner { max-width: var(--col); margin: 0 auto; display: flex; gap: 1.75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta-band h2 { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 800; color: #0C0C0C; text-transform: uppercase; letter-spacing: .02em; margin: 0; max-width: none; }
.cta-band p { margin: .35rem 0 0; color: rgba(12,12,12,.72); font-weight: 500; }
.cta-band .btn--dark { background: var(--navy); color: #fff; }
.cta-band .btn--dark:hover { background: #000; }

/* ── footer ── */
.site-footer { background: #0a0a0a; color: rgba(255,255,255,.72); text-align: left; padding: 0; }
.site-footer p { margin: 0; }
.foot-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 4.5rem var(--gut) 3.25rem;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem;
}
.foot-brand .foot-logo { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.foot-brand .foot-logo img { width: 42px; height: 42px; }
.foot-brand .foot-logo strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.3rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.foot-brand p { font-size: .87rem; line-height: 1.7; margin: 0 0 1.2rem; max-width: 34ch; }
.foot-tel {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.55rem; font-weight: 800; letter-spacing: .03em;
  color: var(--orange); text-decoration: none; margin-bottom: .9rem;
}
.foot-tel:hover { color: #ffd966; }
.foot-addr { font-size: .84rem; line-height: 1.75; color: rgba(255,255,255,.55); margin: 0; }
.site-footer h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .92rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); margin: .3rem 0 1.1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0 0 .6rem; }
.site-footer ul a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .88rem; }
.site-footer ul a:hover { color: var(--orange); }
.foot-bar { border-top: 1px solid rgba(255,255,255,.1); }
.foot-bar-inner {
  max-width: 1280px; margin: 0 auto; padding: 1.3rem var(--gut);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-size: .78rem; color: rgba(255,255,255,.45);
}

/* ── mobile sticky action bar ── */
.mbar { display: none; }

/* ── responsive ── */
@media (max-width: 1024px) {
  .builder-strip { grid-template-columns: repeat(4,1fr); }
  .areas-grid { grid-template-columns: repeat(2,1fr); }
  .foot-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 900px) {
  section { padding: 4rem var(--gut); }
  #planner, #builders { padding: 4.5rem var(--gut); }
  .split, .heat-split { grid-template-columns: 1fr; gap: 2.25rem; }
  .faq-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .planner-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .steps { grid-template-columns: repeat(2,1fr); }
  .nc-highlight-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .why-local-grid { grid-template-columns: repeat(2,1fr); }
  .local-wrap { grid-template-columns: 1fr; }
  .local-media { min-height: 320px; }
  .areas-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .quote-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .photo-strip img { height: 230px; }
}
/* styles.css switches stats to 2 columns (and photos to 1) at 768 with !important,
   so the matching overrides have to live at the same breakpoint */
@media (max-width: 768px) {
  .stats-strip { grid-template-columns: 1fr 1fr !important; gap: 1.6rem 0 !important; }
  .stats-strip > div:nth-child(3) { border-left: 0; }
  .photo-wrap { padding-top: 2.25rem; }
  .photo-strip { grid-template-columns: 1fr 1fr !important; gap: .75rem; }
  .photo-strip img { height: 150px !important; }
  .photo-strip img:first-child { grid-column: 1 / -1; height: 210px !important; }
}
@media (max-width: 640px) {
  .builder-strip { grid-template-columns: repeat(4,1fr); gap: 1.1rem 1rem; }
  .builder-strip img { max-height: 30px; }
  .map-panel { padding: 1rem 1rem .9rem; }
  .why-local-grid, .why-local-grid--2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: 1fr; }
  .stat-number { font-size: 2.4rem; }
  .foot-inner { grid-template-columns: 1fr; gap: 2.25rem; padding: 3.25rem var(--gut) 2.5rem; }
  body { padding-bottom: 52px; }
  .hero-grid { padding-top: 2.25rem; padding-bottom: 3rem; }
  .hero-grid > * { min-width: 0; }
  .hero-grid h1 { font-size: clamp(2rem, 10.5vw, 2.5rem); overflow-wrap: break-word; }
  .paths-card { padding: 1.4rem 1.3rem 1rem; }
  .mbar { display: grid; grid-template-columns: 1fr 1fr 1fr; position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 60; box-shadow: 0 -4px 16px rgba(0,0,0,.25); }
  .mbar a { padding: .85rem .25rem; text-align: center; font-weight: 800; text-decoration: none; font-size: .85rem; color: #fff; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .05em; text-transform: uppercase; }
  .mbar a:nth-child(1) { background: var(--navy); }
  .mbar a:nth-child(2) { background: var(--orange); color: #0C0C0C; }
  .mbar a:nth-child(3) { background: #1d1d1d; }
}

/* ══════════════════════════════════════════════════════════════════════
   SUB-PAGE COMPONENTS (service + Milgard pages, Oct 2026)
   ══════════════════════════════════════════════════════════════════════ */
.quote-card .quote-card-p { font-size: .88rem; color: var(--body-c); line-height: 1.65; margin: 0 0 1rem; }
.quote-card .btn { width: 100%; justify-content: center; display: flex; margin: .2rem 0 .3rem; }
.check-list { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.check-list li { position: relative; padding-left: 1.7rem; font-size: .88rem; color: var(--ink); font-weight: 500; line-height: 1.5; }
.check-list li::before {
  content: ''; position: absolute; left: 0; top: .12rem; width: 18px; height: 18px; border-radius: 50%;
  background: var(--orange) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230C0C0C' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
}
.hero-badge { display: block; height: 58px; width: auto; margin: 0 0 1.5rem; filter: drop-shadow(0 2px 8px rgba(0,0,0,.45)); }

.stack-cards { display: flex; flex-direction: column; gap: 1.1rem; }
.why-local-card--row { flex-direction: row; gap: 1.1rem; align-items: flex-start; }
.why-local-card--row .why-local-icon { margin-bottom: 0; }
.why-local-grid--3 { grid-template-columns: repeat(3,1fr); }

.dark-feature {
  padding: 6rem var(--gut);
  background:
    radial-gradient(900px 480px at 8% 110%, rgba(245,179,0,.12), transparent 60%),
    linear-gradient(rgba(8,8,8,.9), rgba(8,8,8,.93)),
    var(--feature-img) center/cover no-repeat,
    var(--navy);
}
.nc-checklist--2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; }

.faq-grid--3 { grid-template-columns: repeat(3,1fr); }
.lede--wide { max-width: 78ch; }
.form-card { background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 2rem; box-shadow: var(--shadow-card); }
.consent { display: flex; gap: .55rem; align-items: flex-start; font-size: .78rem; color: var(--muted); line-height: 1.5; cursor: pointer; margin: .4rem 0 1rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
.consent input { width: auto; margin-top: 3px; flex-shrink: 0; }

@media (max-width: 1024px) {
  .faq-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .dark-feature { padding: 4.5rem var(--gut); }
  .nc-checklist--2 { grid-template-columns: 1fr; }
  .why-local-grid--3 { grid-template-columns: 1fr; }
  .form-card { padding: 1.4rem; }
}
.quote-phone svg { width: 22px; height: 22px; flex-shrink: 0; }
.quote-phone { white-space: nowrap; }

/* linked city pills (every Arizona location has its own page) */
a.city-pill { text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
a.city-pill:hover { border-color: var(--orange); color: var(--ink); background: #fffbee; }

/* Good to Know (3 verified local-fact cards) on service + Milgard pages */
.why-grid.gtk-3 { grid-template-columns: repeat(3,1fr); margin-top: 2.2rem; }
@media (max-width: 900px) { .why-grid.gtk-3 { grid-template-columns: 1fr; } }