/* ─── TOKENS ───────────────────────────────────────────── */
:root {
  --navy-950: oklch(18% 0.09 262);
  --navy-900: oklch(22% 0.09 262);
  --navy-800: oklch(28% 0.09 260);
  --navy-700: oklch(36% 0.08 258);
  --navy-500: oklch(48% 0.07 255);
  --navy-300: oklch(66% 0.06 252);
  --green-700: oklch(46% 0.15 140);
  --green-600: oklch(52% 0.17 138);
  --green-500: oklch(58% 0.18 138);
  --green-400: oklch(66% 0.16 140);
  --green-300: oklch(74% 0.13 142);
  --teal-500: oklch(66% 0.12 210);
  --teal-400: oklch(74% 0.1  212);
  --fog-100: oklch(96% 0.006 240);
  --fog-50:  oklch(98% 0.004 240);
  --cream-100: oklch(96% 0.005 240);
  --cream-50:  oklch(98.5% 0.003 240);
  --text-dark:        oklch(96% 0.005 240);
  --text-muted-dark:  oklch(66% 0.01  250);
  --text-dim-dark:    oklch(64% 0.01 250);
  --text-light:       oklch(18% 0.09  262);
  --text-muted-light: oklch(44% 0.04  255);
  --display: 'Cormorant Garamond', Georgia, serif;
  --body:    'Outfit', system-ui, sans-serif;
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Height of the fixed header. Every page-top padding derives from this, so
   changing the logo or nav cannot silently push headings under the bar
   again. Desktop: 12+116(logo)+9(gap)+13(locale line)+12 = 162. */
:root { --nav-h: 162px; }
body { font-family: var(--body); background: var(--cream-50); color: var(--text-light); overflow-x: hidden; }
:focus-visible { outline: 2px solid var(--green-500); outline-offset: 3px; }

/* ─── NAV ──────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  padding: 20px 44px;
  display: grid; grid-template-columns: auto 1fr auto; column-gap: 18px; align-items: start;
  transition: background .4s var(--ease-out), padding .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
/* Over the hero the bar is transparent, so nav text can land on a bright
   patch of photograph. A soft top-down scrim keeps the links and phone
   numbers legible without reintroducing a solid bar. */
.nav:not(.scrolled)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, oklch(18% 0.09 262 / .62) 0%, oklch(18% 0.09 262 / .28) 62%, transparent 100%);
}
.nav.scrolled {
  background: oklch(18% 0.09 262 / .97);
  padding: 12px 44px;
  box-shadow: 0 1px 0 oklch(28% 0.09 260 / .5);
  backdrop-filter: blur(16px);
}
.nav-scrolled-init { background: oklch(18% 0.09 262 / .97); padding: 12px 44px; box-shadow: 0 1px 0 oklch(28% 0.09 260 / .5); }
/* Stacked lockup: emblem over the wordmark, with the locale line beneath.
   Stacking makes the mark taller AND narrower than the horizontal version,
   which is what frees the room for a full nav row beside it. */
.nav-logo { text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; justify-self: start; }
.nav-logo img { height: 116px; width: auto; display: block; transition: height .35s var(--ease-out), opacity .2s var(--ease-out); }
.nav-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--green-300); white-space: nowrap; transition: opacity .25s var(--ease-out), max-height .3s var(--ease-out); }
.nav-eyebrow i { display: block; width: 22px; height: 1px; background: currentColor; opacity: .55; }
/* Condensed once scrolling starts */
.nav.scrolled .nav-logo img { height: 56px; }
.nav.scrolled .nav-eyebrow { opacity: 0; max-height: 0; overflow: hidden; }
/* Shrink once the sticky bar condenses. .nav-scrolled-init (inner pages, solid
   bar from load) deliberately keeps the full size until the user actually scrolls. */
/* logo-nav.webp ships with white lettering and a green emblem baked in,
   so no filter is applied - a brightness/invert filter would flatten the
   green back to white. */
.nav-links { display: flex; align-items: center; gap: 13px; margin-top: 14px; list-style: none; justify-self: center; min-width: 0; }
.nav-links a { font-size: 11.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: oklch(94% 0.006 240); text-decoration: none; transition: color .18s var(--ease-out); white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--green-300); }
.nav-links a.active { position: relative; }
.nav-links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--green-400); }
.btn-nav {
  position: relative; overflow: hidden;
  font-family: var(--body); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy-950); background: var(--green-400);
  padding: 10px 22px; text-decoration: none; display: inline-block;
  transition: transform .12s var(--ease-out);
}
.btn-nav::after { content:''; position:absolute; inset:0; background:var(--green-300); transform:translateX(-101%); transition:transform .32s var(--ease-out); }
.btn-nav:hover::after { transform: translateX(0); }
.btn-nav:active { transform: scale(0.97); }
.btn-nav span { position: relative; z-index: 1; }
.nav-right { display: flex; align-items: center; gap: 20px; justify-self: end; margin-top: 6px; }
.nav-phones { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.1; }
.nav-phone-link { font-family: var(--body); font-size: 16.5px; font-weight: 500; color: oklch(94% 0.006 240); text-decoration: none; transition: color .18s var(--ease-out); white-space: nowrap; letter-spacing: .02em; }
.nav-phone-toll { font-family: var(--body); font-size: 11.5px; font-weight: 400; color: oklch(94% 0.006 240); text-decoration: none; transition: color .18s var(--ease-out); white-space: nowrap; letter-spacing: .02em; }
.nav-phone-toll em { font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--green-300); margin-right: 4px; }
.nav-phone-toll:hover { color: var(--green-300); }
.nav-phone-link:hover { color: var(--green-300); }
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px 4px; flex-shrink: 0;
}
.nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--text-dark); transition: transform .2s var(--ease-out), opacity .2s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── HERO (homepage) ─────────────────────────────────── */
.hero {
  position: relative; min-height: 100dvh;
  display: flex; align-items: flex-end; padding-bottom: 100px;
  overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0;
  background: url('images/hero.webp') center center / cover no-repeat;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, oklch(18% 0.09 262 / .78) 0%, oklch(18% 0.09 262 / .46) 55%, oklch(18% 0.09 262 / .10) 100%),
    linear-gradient(to top, oklch(18% 0.09 262 / .55) 0%, transparent 52%);
}
.hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--green-500) 40%, var(--green-400) 60%, transparent);
}
.hero-inner {
  position: relative; z-index: 1;
  padding: 0 60px; max-width: 780px; width: 100%;
}
.hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; opacity:0; animation: fadeUp .7s var(--ease-out) .1s forwards; }
.eyebrow-rule  { width: 44px; height: 1px; background: var(--green-500); flex-shrink: 0; }
.eyebrow-text  { font-size: 12px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--green-400); }
.hero-h1 {
  font-family: var(--display); font-size: clamp(52px, 6vw, 88px);
  font-weight: 500; line-height: 1.0; letter-spacing: -.015em; color: var(--text-dark);
  margin-bottom: 30px; opacity:0; animation: fadeUp .75s var(--ease-out) .22s forwards;
}
.hero-h1 em { font-style: italic; color: var(--green-300); }
.hero-sub {
  font-size: 17px; font-weight: 400; line-height: 1.78; color: oklch(82% 0.01 225);
  max-width: 590px; margin-bottom: 52px; opacity:0; animation: fadeUp .75s var(--ease-out) .34s forwards;
}
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; opacity:0; animation: fadeUp .7s var(--ease-out) .46s forwards; }
/* Secondary action. The header already carries both numbers in this same
   viewport, so the hero needs one clear way to call, not a directory. */
.hero-call { display: inline-flex; align-items: center; gap: 10px; font-family: var(--body); font-size: 20px; font-weight: 500; letter-spacing: .01em; color: var(--text-dark); text-decoration: none; padding: 6px 2px; transition: color .18s var(--ease-out); }
.hero-call svg { opacity: .75; transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
.hero-call:hover { color: var(--green-300); }
.hero-call:hover svg { opacity: 1; transform: translateX(-1px); }
/* The two numbers read as one unit: tight leading between them, and the
   toll-free indented by the icon column so the digits align. */
.hero-phones { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
/* Shown only where the header cannot: below 1460px the nav drops its
   toll-free line, so without this the number is absent above the fold. */
.hero-call-toll { display: none; }
.btn-primary {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-size: 14px; font-weight: 500; letter-spacing: .07em;
  color: var(--navy-950); background: var(--green-400);
  padding: 15px 34px; text-decoration: none; border: none; cursor: pointer;
  transition: transform .12s var(--ease-out);
}
.btn-primary::after { content:''; position:absolute; inset:0; background:var(--green-300); transform:translateX(-101%); transition:transform .34s var(--ease-out); }
.btn-primary:hover::after { transform: translateX(0); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary > * { position: relative; z-index: 1; }
.btn-outline {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-size: 14px; font-weight: 500; letter-spacing: .07em;
  color: var(--text-dark); background: transparent; border: 1px solid oklch(56% 0.04 240);
  padding: 14px 33px; text-decoration: none; cursor: pointer;
  transition: transform .12s var(--ease-out), border-color .18s, color .18s;
}
.btn-outline:hover { border-color: var(--green-400); color: var(--green-300); }
.btn-outline:active { transform: scale(0.97); }

.hero-scroll { position: absolute; bottom: 36px; right: 60px; display: flex; align-items: center; gap: 10px; color: var(--green-400); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; opacity:0; animation: fadeIn .7s var(--ease-out) 1.1s forwards; }
.scroll-tick { width: 44px; height: 1px; background: oklch(38% 0.12 140); position: relative; overflow: hidden; }
.scroll-tick::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--green-300), transparent); animation: scanTick 1.6s linear infinite; }
@keyframes scanTick { from { transform: translateX(-200%); } to { transform: translateX(300%); } }

/* ─── STATS ────────────────────────────────────────────── */
.stats { background: var(--navy-900); border-bottom: 1px solid oklch(28% 0.09 260 / .5); }
.stats-inner { max-width: 1200px; margin: 0 auto; padding: 0 60px; display: grid; grid-template-columns: repeat(4,1fr); }
.stat { padding: 38px 40px 38px 0; border-right: 1px solid oklch(28% 0.09 260 / .6); display: flex; flex-direction: column; gap: 7px; }
.stat + .stat { padding-left: 40px; }
.stat:last-child { border-right: none; }
.stat-num { font-family: var(--display); font-size: 56px; font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--green-300); display: flex; align-items: flex-start; gap: 2px; }
.stat-num sup { font-size: .44em; color: var(--green-400); margin-top: 9px; }
.stat-lbl { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: oklch(78% 0.012 250); }

/* ─── MARQUEE ───────────────────────────────────────────── */
.marquee-wrap { background: var(--navy-950); border-bottom: 1px solid oklch(28% 0.09 260 / .4); overflow: hidden; padding: 14px 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee-item { display: flex; align-items: center; gap: 24px; padding: 0 24px; font-size: 12px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: oklch(64% 0.04 230); white-space: nowrap; }
.marquee-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--green-400); flex-shrink: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─── SHARED TYPOGRAPHY ─────────────────────────────────── */
.eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.eyebrow-label { font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--green-500); }
h2.display { font-family: var(--display); font-size: clamp(34px,3.8vw,56px); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; color: var(--text-light); }
h2.display em { font-style: italic; color: var(--green-600); }
h2.display-dark { font-family: var(--display); font-size: clamp(34px,3.8vw,56px); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; color: var(--text-dark); }
h2.display-dark em { font-style: italic; color: var(--green-300); }

/* ─── ABOUT ─────────────────────────────────────────────── */
.about { max-width: 1200px; margin: 0 auto; padding: 120px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-body { font-size: 17px; font-weight: 400; line-height: 1.82; color: var(--text-muted-light); margin-top: 26px; max-width: 65ch; }
.about-body p + p { margin-top: 16px; }
.about-cta-row { display: flex; align-items: center; gap: 28px; margin-top: 36px; flex-wrap: wrap; }
.about-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--green-600); text-decoration: none; transition: gap .2s var(--ease-out), color .18s; }
.about-link:hover { gap: 14px; color: var(--green-500); }
.about-link:active { transform: scale(0.98); }
.about-phone-link { font-family: var(--body); font-size: 18px; font-weight: 500; color: var(--text-light); text-decoration: none; transition: color .18s; letter-spacing: .02em; }
.about-phone-link:hover { color: var(--green-600); }
.about-img-wrap { position: relative; }
.about-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.about-img-caption { position: absolute; bottom: 0; left: 0; right: 0; background: var(--navy-950); padding: 14px 20px; }
.about-img-caption-head { font-family: var(--display); font-size: 15px; font-weight: 500; color: var(--green-400); }
.about-img-caption-sub  { font-size: 12px; font-weight: 400; color: var(--text-muted-dark); margin-top: 2px; }
.trust-row { display: flex; align-items: center; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.trust-badge { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: var(--text-muted-light); }
.trust-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green-500); flex-shrink: 0; }

/* ─── SERVICES ──────────────────────────────────────────── */
.services { background: var(--cream-50); padding: 0; border-top: 1px solid oklch(88% 0.012 220); }
.services-inner { max-width: 1200px; margin: 0 auto; }
.services-hdr { padding: 100px 60px 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; }
.services-hdr-right { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.services-intro { font-size: 16.5px; font-weight: 400; line-height: 1.82; color: var(--text-muted-light); }
.svc-row { display: grid; grid-template-columns: 45fr 55fr; border-top: 1px solid oklch(88% 0.012 220); transition: background .3s var(--ease-out); }
.svc-row:hover { background: var(--fog-100); }
.svc-row.flipped { grid-template-columns: 55fr 45fr; }
.svc-row.flipped .svc-row-img { order: 2; }
.svc-row.flipped .svc-row-content { order: 1; }
.svc-row-img { overflow: hidden; }
.svc-row-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .65s var(--ease-out); }
.svc-row:hover .svc-row-img img { transform: scale(1.04); }
.svc-row-content { padding: 64px 68px; display: flex; flex-direction: column; justify-content: center; }
.svc-row-num { font-family: var(--display); font-size: 13px; font-weight: 500; letter-spacing: .18em; color: var(--green-600); margin-bottom: 14px; }
.svc-row-title { font-family: var(--display); font-size: clamp(24px, 2.5vw, 34px); font-weight: 500; line-height: 1.1; color: var(--text-light); margin-bottom: 16px; }
.svc-row-desc { font-size: 15px; font-weight: 400; line-height: 1.82; color: var(--text-muted-light); margin-bottom: 18px; max-width: 52ch; }
.svc-row-bullets { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 22px; }
.svc-row-bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 400; color: var(--text-muted-light); line-height: 1.65; }
.svc-row-bullets li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--green-500); margin-top: 7px; flex-shrink: 0; }
.svc-row-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.svc-row-tag { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-700); border: 1px solid oklch(58% 0.15 138 / .35); padding: 3px 10px; }
.svc-row-link { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--green-600); text-decoration: none; transition: gap .2s var(--ease-out), color .18s; }
.svc-row-link:hover { gap: 16px; color: var(--green-500); }
.svc-row-link:active { transform: scale(0.98); }
.services-bottom { padding: 72px 60px; border-top: 1px solid oklch(88% 0.012 220); display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.materials-label { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted-light); margin-bottom: 12px; }
.materials-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mat-pill { font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--green-700); border: 1px solid oklch(58% 0.15 138 / .3); padding: 5px 14px; }

/* ─── MID-CTA ────────────────────────────────────────────── */
.mid-cta { background: var(--green-700); padding: 88px 60px; position: relative; overflow: hidden; }
.mid-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: oklch(56% 0.18 138 / .4); }
.mid-cta-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; }
.mid-cta-head { font-family: var(--display); font-size: clamp(28px, 3.5vw, 46px); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; color: oklch(97% 0.003 140); }
.mid-cta-sub { font-size: 16.5px; font-weight: 400; color: oklch(86% 0.06 138); margin-top: 12px; max-width: 62ch; }
.mid-cta-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; flex-shrink: 0; }
.btn-cta-light {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-size: 14px; font-weight: 500; letter-spacing: .07em;
  color: var(--green-700); background: oklch(97% 0.003 140);
  padding: 15px 34px; text-decoration: none; border: none; cursor: pointer;
  transition: transform .12s var(--ease-out); white-space: nowrap;
}
.btn-cta-light::after { content:''; position:absolute; inset:0; background:oklch(93% 0.012 140); transform:translateX(-101%); transition:transform .32s var(--ease-out); }
.btn-cta-light:hover::after { transform: translateX(0); }
.btn-cta-light:active { transform: scale(0.97); }
.btn-cta-light > * { position: relative; z-index: 1; }
.mid-cta-phone-wrap { text-align: right; }
.mid-cta-phone-label { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: oklch(76% 0.1 138); }
.mid-cta-phone { font-family: var(--body); font-size: 20px; font-weight: 500; color: oklch(97% 0.003 140); text-decoration: none; display: block; margin-top: 4px; transition: opacity .18s; letter-spacing: .02em; }
.mid-cta-phone:hover { opacity: .8; }

/* ─── PROJECTS ───────────────────────────────────────────── */
.projects { background: var(--fog-100); padding: 120px 60px; }
.projects-inner { max-width: 1200px; margin: 0 auto; }
.projects-hdr { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 64px; align-items: end; }
.projects-hdr-right { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.projects-sub { font-size: 16.5px; font-weight: 400; line-height: 1.82; color: var(--text-muted-light); }
.projects-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto auto; gap: 3px; }
.project-card:first-child { grid-row: 1/3; }
.project-card:nth-child(6) { grid-column: 1/-1; }
.project-card { position: relative; overflow: hidden; cursor: default; }
.project-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); min-height: 280px; }
.project-card:first-child .project-img { min-height: 560px; }
.project-card:nth-child(6) .project-img { min-height: 260px; max-height: 340px; }
.project-card:hover .project-img { transform: scale(1.03); }
.project-overlay { position: absolute; inset: 0; background: linear-gradient(to top, oklch(18% 0.09 262 / .78) 0%, transparent 55%); opacity: 0; transition: opacity .35s var(--ease-out); }
.project-card:hover .project-overlay { opacity: 1; }
.project-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 24px; transform: translateY(8px); opacity: 0; transition: transform .35s var(--ease-out), opacity .35s var(--ease-out); }
.project-card:hover .project-info { transform: translateY(0); opacity: 1; }
.project-title { font-family: var(--display); font-size: 18px; font-weight: 500; color: var(--text-dark); }
.project-sub { font-size: 14px; font-weight: 400; color: oklch(76% 0.01 225); margin-top: 3px; }
.projects-cta-row { margin-top: 48px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.projects-cta-note { font-size: 15px; font-weight: 400; color: var(--text-muted-light); }

/* ─── BRANDS ─────────────────────────────────────────────── */
.brands { background: var(--cream-100); padding: 80px 60px; }
.brands-inner { max-width: 1200px; margin: 0 auto; }
.brands-hdr { margin-bottom: 52px; }
.brands-hdr h2 { font-family: var(--display); font-size: 34px; font-weight: 500; color: var(--text-light); margin-top: 10px; }
.brands-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid oklch(88% 0.012 220); }
.brand { border-right: 1px solid oklch(88% 0.012 220); border-bottom: 1px solid oklch(88% 0.012 220); padding: 44px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: background .22s var(--ease-out); }
.brand:nth-child(4n) { border-right: none; }
.brand:nth-child(n+5) { border-bottom: none; }
.brand:hover { background: var(--fog-50); }
.brand-name { font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--text-light); letter-spacing: .04em; }
.brand-sub  { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-light); }

/* ─── PROCESS ────────────────────────────────────────────── */
.process { max-width: 1200px; margin: 0 auto; padding: 120px 60px; }
.process-hdr { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 72px; align-items: end; }
.process-sub { font-size: 16.5px; font-weight: 400; line-height: 1.8; color: var(--text-muted-light); }
.process-steps { display: grid; grid-template-columns: repeat(4,1fr); position: relative; }
.process-steps::before { content: ''; position: absolute; top: 27px; left: 40px; right: 40px; height: 1px; background: oklch(88% 0.012 220); }
.step { display: flex; flex-direction: column; gap: 18px; padding-right: 28px; }
.step-num { width: 54px; height: 54px; background: var(--navy-950); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--green-400); position: relative; z-index: 1; }
.step-head { font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--text-light); }
.step-text { font-size: 15.5px; font-weight: 400; line-height: 1.75; color: var(--text-muted-light); }
.process-cta { margin-top: 72px; padding-top: 64px; border-top: 1px solid oklch(88% 0.012 220); display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.process-cta-text { font-family: var(--display); font-size: clamp(22px, 2.5vw, 32px); font-weight: 500; color: var(--text-light); line-height: 1.2; }
.process-cta-text em { font-style: italic; color: var(--green-600); }

/* ─── ENERGY STRIP ───────────────────────────────────────── */
.energy { background: var(--navy-950); padding: 100px 60px; position: relative; overflow: hidden; }
.energy::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--green-500) 30%, var(--green-400) 70%, transparent); }
.energy-bg-num { position: absolute; right: -20px; bottom: -40px; font-family: var(--display); font-size: clamp(200px,20vw,300px); font-weight: 600; color: oklch(48% 0.17 155 / .45); line-height: 1; letter-spacing: -.04em; pointer-events: none; user-select: none; }
.energy-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; position: relative; z-index: 1; }
.energy-head { font-family: var(--display); font-size: clamp(32px,4vw,52px); font-weight: 500; color: var(--text-dark); line-height: 1.15; letter-spacing: -.01em; }
.energy-head em { font-style: italic; color: var(--green-500); }
.energy-body { font-size: 16.5px; font-weight: 400; line-height: 1.82; color: var(--text-muted-dark); margin-top: 20px; max-width: 580px; }
.energy-badge { border: none; background: transparent; padding: 0 38px; text-align: center; min-width: 200px; flex-shrink: 0; }
.energy-badge-star { font-size: 34px; color: var(--green-400); line-height: 1; }
.energy-badge-label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted-dark); margin-top: 10px; line-height: 1.6; }

/* ─── CONTACT ────────────────────────────────────────────── */
.contact { max-width: 1200px; margin: 0 auto; padding: 120px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact-details { margin-top: 48px; display: flex; flex-direction: column; gap: 26px; }
.cdet { display: flex; gap: 18px; align-items: flex-start; }
.cdet-icon { width: 38px; height: 38px; background: var(--cream-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cdet-lbl { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted-light); }
.cdet-val { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--text-light); text-decoration: none; display: block; margin-top: 3px; line-height: 1.3; transition: color .18s; }
.cdet-val:hover { color: var(--green-600); }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fg { display: flex; flex-direction: column; gap: 6px; }
.fg label { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted-light); }
.fg input, .fg select, .fg textarea {
  background: var(--cream-100); border: 1px solid oklch(88% 0.012 220);
  padding: 13px 14px; font-family: var(--body); font-size: 15px; font-weight: 400;
  color: var(--text-light); outline: none;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out);
  resize: none; -webkit-appearance: none;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--green-500); background: var(--cream-50); }
.fg textarea { height: 115px; }
.fg input::placeholder, .fg textarea::placeholder { color: var(--text-muted-light); opacity: .6; }
.form-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--body); font-size: 14px; font-weight: 500; letter-spacing: .07em;
  color: var(--cream-50); background: var(--navy-950); border: none; padding: 15px; cursor: pointer;
  transition: transform .12s var(--ease-out);
}
.form-btn::after { content:''; position:absolute; inset:0; background:var(--navy-800); transform:translateX(-101%); transition:transform .32s var(--ease-out); }
.form-btn:hover::after { transform: translateX(0); }
.form-btn:active { transform: scale(0.97); }
.form-btn > * { position: relative; z-index: 1; }

/* ─── FOOTER ─────────────────────────────────────────────── */
.footer { background: var(--navy-950); border-top: 1px solid oklch(28% 0.09 260 / .5); padding: 72px 60px 40px; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 56px; border-bottom: 1px solid oklch(28% 0.09 260 / .4); }
.f-brand-name { font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
.f-brand-sub  { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--green-400); margin-bottom: 16px; }
.f-brand-desc { font-size: 15px; font-weight: 400; line-height: 1.75; color: var(--text-muted-dark); }
.f-col-head { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--green-400); margin-bottom: 18px; }
.f-col-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.f-col-links a { font-size: 15px; font-weight: 400; color: var(--text-muted-dark); text-decoration: none; transition: color .18s var(--ease-out); }
.f-col-links a:hover { color: var(--green-300); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; }
.f-copy { font-size: 13px; font-weight: 400; color: var(--text-dim-dark); }
.f-lic  { font-size: 13px; font-weight: 400; color: oklch(68% 0.03 235); }

/* ─── PAGE HERO (internal pages) ─────────────────────────── */
.page-hero {
  background: var(--navy-950); padding: calc(var(--nav-h) + 44px) 60px 90px;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--green-500) 40%, var(--green-400) 60%, transparent);
}
.page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .62;
}
/* Directional scrim: dark behind the left-aligned copy, clearing toward the
   right so the photograph stays visible instead of reading as a navy block. */
.page-hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, oklch(18% 0.09 262 / .88) 0%, oklch(18% 0.09 262 / .72) 42%, oklch(18% 0.09 262 / .34) 100%),
    linear-gradient(to top, oklch(18% 0.09 262 / .55) 0%, transparent 55%);
}
.page-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.page-breadcrumb { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim-dark); margin-bottom: 28px; display: flex; align-items: center; gap: 8px; }
.page-breadcrumb a { color: oklch(68% 0.12 140); text-decoration: none; transition: color .18s; }
.page-breadcrumb a:hover { color: var(--green-300); }
.page-breadcrumb svg { opacity: .4; }
.page-hero h1 { font-family: var(--display); font-size: clamp(40px, 5vw, 72px); font-weight: 500; line-height: 1.0; letter-spacing: -.015em; color: var(--text-dark); margin-bottom: 20px; }
.page-hero h1 em { font-style: italic; color: var(--green-300); }
.page-hero-sub { font-size: 17px; font-weight: 400; line-height: 1.75; color: oklch(76% 0.01 225); max-width: 600px; margin-bottom: 40px; }
.page-hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* ─── PRODUCT GRID ────────────────────────────────────────── */
.section-pad { max-width: 1200px; margin: 0 auto; padding: 100px 60px; }
.section-pad-sm { max-width: 1200px; margin: 0 auto; padding: 80px 60px; }
/* Full-width outer section wrapper with responsive padding */
.wrap-pad { padding: 80px 60px; }
.product-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 56px; }
.product-card { position: relative; overflow: hidden; background: white; border: 1px solid oklch(88% 0.012 220); transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.product-card:hover { border-color: oklch(72% 0.08 138); box-shadow: 0 4px 24px oklch(18% 0.09 262 / .06); }
.product-card-img { overflow: hidden; }
.product-card-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .55s var(--ease-out); }
.product-card:hover .product-card-img img { transform: scale(1.04); }
.product-card-body { padding: 28px 28px 32px; }
.product-card-label { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--green-600); margin-bottom: 8px; }
.product-card-title { font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--text-light); margin-bottom: 10px; }
.product-card-desc { font-size: 15px; font-weight: 400; line-height: 1.75; color: var(--text-muted-light); margin-bottom: 18px; }
.product-card-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--green-600); text-decoration: none; transition: gap .2s var(--ease-out); }
.product-card-link:hover { gap: 14px; }

/* ─── CONTENT BLOCK (alternating) ────────────────────────── */
.content-section { border-top: 1px solid oklch(88% 0.012 220); }
.content-block { max-width: 1200px; margin: 0 auto; padding: 100px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.content-block + .content-block { border-top: 1px solid oklch(88% 0.012 220); }
.content-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.content-body { }
.content-body h3 { font-family: var(--display); font-size: clamp(28px, 2.8vw, 42px); font-weight: 500; color: var(--text-light); margin-bottom: 20px; line-height: 1.1; }
.content-body h3 em { font-style: italic; color: var(--green-600); }
.content-body p { font-size: 16.5px; font-weight: 400; line-height: 1.82; color: var(--text-muted-light); margin-bottom: 16px; }
.content-body ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.content-body ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 400; color: var(--text-muted-light); line-height: 1.5; }
.content-body ul li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--green-500); margin-top: 8px; flex-shrink: 0; }
.content-body-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }

/* ─── FAQ ─────────────────────────────────────────────────── */
.faq-list { margin-top: 52px; border-top: 1px solid oklch(88% 0.012 220); }
.faq-item { border-bottom: 1px solid oklch(88% 0.012 220); }
.faq-item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 28px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 20px; font-weight: 500; color: var(--text-light); line-height: 1.25;
  transition: color .18s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { font-family: var(--body); font-size: 24px; font-weight: 300; color: var(--green-600); flex-shrink: 0; transition: transform .25s var(--ease-out); line-height: 1; }
.faq-item[open] summary .faq-icon { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--green-700); }
.faq-a { font-size: 16.5px; font-weight: 400; line-height: 1.82; color: var(--text-muted-light); padding: 0 0 28px; max-width: 72ch; }

/* ─── SERVICE AREAS GRID ──────────────────────────────────── */
.areas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 48px; }
.area-card { padding: 32px 28px; border: 1px solid oklch(88% 0.012 220); background: white; transition: background .22s var(--ease-out), border-color .22s var(--ease-out); }
.area-card:hover { background: var(--fog-100); border-color: oklch(78% 0.022 220); }
.area-name { font-family: var(--display); font-size: 20px; font-weight: 500; color: var(--text-light); }
.area-sub  { font-size: 15px; font-weight: 400; color: var(--text-muted-light); margin-top: 6px; line-height: 1.62; }

/* ─── GALLERY PAGE ────────────────────────────────────────── */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.gallery-item { position: relative; overflow: hidden; }
.gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, oklch(18% 0.09 262 / .75) 0%, transparent 50%); opacity: 0; transition: opacity .35s var(--ease-out); }
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 22px; transform: translateY(6px); opacity: 0; transition: transform .35s var(--ease-out), opacity .35s var(--ease-out); }
.gallery-item:hover .gallery-caption { transform: translateY(0); opacity: 1; }
.gallery-caption-title { font-family: var(--display); font-size: 17px; font-weight: 500; color: var(--text-dark); }
.gallery-caption-sub { font-size: 13px; color: oklch(76% 0.01 225); margin-top: 2px; }

/* ─── TESTIMONIALS ────────────────────────────────────────── */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 52px; }
.testimonial-card { padding: 36px 32px; background: white; border: 1px solid oklch(88% 0.012 220); }
.testimonial-stars { color: var(--green-500); font-size: 15px; letter-spacing: 2px; margin-bottom: 16px; }
.testimonial-text { font-size: 16.5px; font-weight: 400; line-height: 1.75; color: var(--text-muted-light); margin-bottom: 22px; font-style: italic; }
.testimonial-author { font-family: var(--display); font-size: 16.5px; font-weight: 600; color: var(--text-light); }
.testimonial-location { font-size: 12px; color: var(--text-muted-light); margin-top: 2px; }

/* ─── REVEAL ─────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px) scale(0.98); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0) scale(1); }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; }
@keyframes fadeUp { from { opacity:0; transform: translateY(24px); } to { opacity:1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .marquee-track { animation: none; }
  .reveal { opacity:1; transform:none; }
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1620px) and (min-width: 1461px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 11.5px; letter-spacing: .05em; }
  .nav-phone-link { font-size: 15px; }
}
@media (max-width: 1460px) {
  /* Nav: centered logo + hamburger on right */
  /* Logo left, phone + hamburger right. The phone stays visible: it is the
     primary conversion path and a bare hamburger would drop it entirely. */
  .nav, .nav.scrolled, .nav-scrolled-init { padding-left: 32px; padding-right: 32px; display: flex; justify-content: space-between; align-items: center; }
  .nav-right { position: static; gap: 16px; }
  .nav-hamburger { display: flex; }
  .btn-nav { display: none; }
  .nav-phone-toll { display: none; }
  .hero-call-toll { display: inline-flex; align-items: baseline; gap: 9px; padding-left: 27px; font-family: var(--body); font-size: 17px; font-weight: 400; color: oklch(88% 0.008 230); text-decoration: none; letter-spacing: .01em; transition: color .18s var(--ease-out); }
  .hero-call-toll em { font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--green-300); opacity: .95; }
  .hero-call-toll:hover { color: var(--green-300); }
  .nav-links {
    display: none; flex-direction: column; align-items: center; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: oklch(18% 0.09 262 / .98); backdrop-filter: blur(16px);
    padding: 6px 0 18px; border-top: 1px solid oklch(28% 0.09 260 / .5);
    box-shadow: 0 8px 24px oklch(10% 0.06 262 / .3);
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; text-align: center; border-bottom: 1px solid oklch(28% 0.09 260 / .18); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links.open a { display: block; padding: 14px 20px; font-size: 13px; color: oklch(93% 0.006 240); }
  .nav-links.open a:hover, .nav-links.open a.active { color: var(--green-300); }
}
@media (max-width: 1100px) {
  /* Layouts */
  .stats-inner { padding-left: 40px; padding-right: 40px; }
  .about { padding-left: 40px; padding-right: 40px; }
  .services-hdr { padding-left: 40px; padding-right: 40px; }
  .services-bottom { padding-left: 40px; padding-right: 40px; }
  .svc-row-content { padding: 48px 44px; }
  .mid-cta { padding-left: 40px; padding-right: 40px; }
  .projects { padding-left: 40px; padding-right: 40px; }
  .brands { padding-left: 40px; padding-right: 40px; }
  .process { padding-left: 40px; padding-right: 40px; }
  .energy { padding-left: 40px; padding-right: 40px; }
  .contact { padding-left: 40px; padding-right: 40px; }
  .footer { padding-left: 40px; padding-right: 40px; }
  .page-hero { padding-left: 40px; padding-right: 40px; }
  .section-pad { padding-left: 40px; padding-right: 40px; }
  .section-pad-sm { padding-left: 40px; padding-right: 40px; }
  .wrap-pad { padding-left: 40px; padding-right: 40px; }
  .content-block { padding-left: 40px; padding-right: 40px; }
  .areas-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .hero-h1 { font-size: clamp(38px, 7vw, 58px); }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 28px 20px 28px 0; } .stat + .stat { padding-left: 20px; }
  .stat-num { font-size: 40px; }
  .about { grid-template-columns: 1fr; padding: 80px 40px; }
  .about-img-wrap { order: -1; }
  .services-hdr { grid-template-columns: 1fr; gap: 28px; padding-bottom: 48px; }
  .svc-row { grid-template-columns: 1fr !important; }
  .svc-row.flipped .svc-row-img { order: 0; }
  .svc-row.flipped .svc-row-content { order: 0; }
  .svc-row-img img { min-height: 260px !important; }
  .svc-row-content { padding: 40px; }
  .mid-cta-inner { grid-template-columns: 1fr; }
  .mid-cta-actions { align-items: flex-start; }
  .mid-cta-phone-wrap { text-align: left; }
  .projects-hdr { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr 1fr; }
  .project-card:first-child { grid-row: auto; grid-column: auto; }
  .project-card:nth-child(6) { grid-column: auto; }
  .process-hdr { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr 1fr; gap: 36px; }
  .process-steps::before { display: none; }
  .process-cta { flex-direction: column; align-items: flex-start; gap: 28px; }
  .energy-inner { grid-template-columns: 1fr; }
  .energy-bg-num { display: none; }
  .brands-grid { grid-template-columns: repeat(3, 1fr); }
  .brand:nth-child(3n) { border-right: none; }
  .brand:nth-child(7), .brand:nth-child(8) { border-bottom: none; }
  .contact { grid-template-columns: 1fr; padding: 80px 40px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .product-cards { grid-template-columns: 1fr 1fr; }
  .content-block { grid-template-columns: 1fr; padding: 72px 40px; gap: 40px; }
  .content-block .content-img { order: -1; }
  .areas-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .testimonials-grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .page-hero { padding: 140px 40px 72px; }
  .page-hero h1 { font-size: clamp(36px, 5.5vw, 60px); }
}
@media (max-width: 640px) {
  .nav, .nav.scrolled, .nav-scrolled-init { padding: 12px 20px; }
  .nav-right { right: 20px; }
  .nav-logo img { height: 48px; }
  /* shorter bar on phones: 12+48(logo)+9(gap)+13(locale)+12 = 94 */
  :root { --nav-h: 94px; }
  /* the sticky mobile CTA bar already carries Call Now down here */
  .nav-phones { display: none; }
  .nav-links { padding-left: 20px; padding-right: 20px; }
  .hero-inner { padding: 0 20px; }
  .hero-h1 { font-size: clamp(34px, 10vw, 48px); }
  .hero-sub { font-size: 16.5px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-scroll { display: none; }
  .stats { display: none; }
  .stat-num { font-size: 36px; }
  .stat-lbl { font-size: 12px; letter-spacing: .07em; }
  .about { padding: 64px 20px; }
  .services-hdr { padding: 64px 20px 40px; }
  .services-bottom { padding: 48px 20px; flex-direction: column; align-items: flex-start; }
  .svc-row-content { padding: 32px 20px; }
  .mid-cta { padding: 56px 20px; }
  .mid-cta-head { font-size: 26px; }
  .brands { padding: 52px 20px; }
  .brands-grid { grid-template-columns: repeat(2, 1fr); }
  .brand:nth-child(2n) { border-right: none; }
  .brand:nth-child(7), .brand:nth-child(8) { border-bottom: none; }
  .projects { padding: 64px 20px; }
  .projects-grid { grid-template-columns: 1fr; }
  .project-card:nth-child(6) { grid-column: auto; }
  .projects-cta-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .process { padding: 64px 20px; }
  .process-steps { grid-template-columns: 1fr; }
  .step-head { font-size: 18px; }
  .energy { padding: 64px 20px; }
  .contact { padding: 64px 20px; }
  .contact-details { margin-top: 28px; }
  .footer { padding: 52px 20px 28px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .page-hero { padding: 110px 20px 52px; }
  .page-hero h1 { font-size: clamp(30px, 9vw, 48px); }
  .page-hero-sub { font-size: 15px; }
  .page-hero-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
  .page-hero-actions .btn-primary, .page-hero-actions .btn-outline { width: 100%; justify-content: center; }
  .section-pad { padding: 64px 20px; }
  .section-pad-sm { padding: 48px 20px; }
  .wrap-pad { padding: 56px 20px; }
  .content-block { padding: 56px 20px; gap: 32px; }
  .content-body h3 { font-size: clamp(24px, 6vw, 36px); }
  .product-cards { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .faq-item summary { font-size: 17px; }
  .process-steps { gap: 28px; }
  h2.display, h2.display-dark { font-size: clamp(28px, 7vw, 40px); }
  .energy-badge { display: none; }
  .brands-grid { border-left: none; border-right: none; }
  /* ── Label & accent text visibility ── */
  .eyebrow-label { font-size: 12px; letter-spacing: .16em; }
  .svc-row-num { font-size: 12px; }
  /* ── Hero ── */
  /* clear the fixed mobile CTA bar (67px) so hero content cannot sit under it */
  .hero { padding-bottom: 104px; }
  .hero-actions .btn-primary { width: 100%; justify-content: center; }
  /* comfortable tap target once the actions stack */
  .hero-call { font-size: 21px; padding: 6px 2px; }
  .hero-call-toll { font-size: 18px; padding: 4px 2px 6px 29px; }
  /* ── About section layout ── */
  .about-cta-row { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 24px; }
  .about-cta-row .btn-primary { width: 100%; justify-content: center; }
  .about-phone-link { font-size: 17px; }
  .trust-row { gap: 14px; }
  /* ── Process ── */
  .step { padding-right: 0; }
  .process-cta-text { font-size: clamp(20px, 5.5vw, 26px); }
  /* ── Brands tighter ── */
  .brand { padding: 26px 14px; }
  .brand-name { font-size: 18px; }
  /* ── Mid-CTA ── */
  .mid-cta-phone { font-size: 18px; }
  /* ── Door pages ── */
  .door-entry-section { padding: 44px 20px 52px; }
  .door-feature-body { padding: 36px 20px; }
  /* ── Cards ── */
  .product-card-label { font-size: 12px; }
  .product-card-body { padding: 20px 20px 24px; }
  .product-card-title { font-size: 20px; }
  /* ── Service row images: shorter on mobile ── */
  .svc-row-img img { aspect-ratio: 16/9; min-height: unset !important; }
  /* ── Reviews section ── */
  .reviews { padding: 64px 20px; }
}

/* ─── REVIEWS ───────────────────────────────────────────── */
.reviews { background: var(--cream-50); padding: 100px 60px; }
.reviews-inner { max-width: 1200px; margin: 0 auto; }
.reviews-hdr { text-align: center; margin-bottom: 64px; }
.reviews-yelp-logo-link { display: inline-block; margin-bottom: 20px; }
.reviews-yelp-logo { display: block; height: 40px; width: auto; object-fit: contain; }
.reviews-rating-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
.reviews-rating-stars { font-size: 20px; color: oklch(62% 0.18 55); letter-spacing: 3px; }
.reviews-rating-num { font-family: var(--display); font-size: 28px; font-weight: 600; color: var(--text-light); }
.reviews-rating-divider { width: 1px; height: 20px; background: oklch(80% 0.03 255); }
.reviews-rating-count { font-size: 15px; color: var(--text-muted-light); }
.reviews h2 { font-family: var(--display); font-size: clamp(30px, 4vw, 52px); font-weight: 400; color: var(--text-light); line-height: 1.15; }
.reviews h2 em { color: var(--green-600); font-style: italic; }
.reviews-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 32px; }
.reviews-nav-btn { width: 44px; height: 44px; border: 1px solid oklch(85% 0.02 255); background: #fff; color: var(--text-light); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .18s var(--ease-out), background .18s var(--ease-out), color .18s var(--ease-out); }
.reviews-nav-btn:hover:not(:disabled) { border-color: var(--navy-950); background: var(--navy-950); color: #fff; }
.reviews-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.reviews-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; gap: 20px; margin-bottom: 56px; }
.reviews-grid::-webkit-scrollbar { display: none; }
.review-card { flex: 0 0 calc(25% - 15px); min-width: 240px; scroll-snap-align: start; background: #fff; border: 1px solid oklch(88% 0.02 255); padding: 32px; display: flex; flex-direction: column; transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.review-card:hover { border-color: oklch(74% 0.06 255); box-shadow: 0 4px 24px oklch(18% 0.09 262 / .06); }
.review-card-stars { font-size: 14px; color: oklch(62% 0.18 55); letter-spacing: 2px; margin-bottom: 18px; }
.review-card-body { flex: 1; min-height: 0; overflow: hidden; margin-bottom: 24px; }
.review-card-quote { font-size: 16.5px; color: oklch(32% 0.04 255); line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.review-card-footer { border-top: 1px solid oklch(90% 0.015 255); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: auto; }
.review-card-name { font-family: var(--display); font-size: 17px; font-weight: 500; color: var(--text-light); line-height: 1.3; }
.review-card-location { font-size: 13px; color: var(--text-muted-light); margin-top: 2px; }
.review-card-date { font-size: 12px; color: oklch(58% 0.03 255); letter-spacing: .06em; white-space: nowrap; flex-shrink: 0; }
.reviews-yelp { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.reviews-yelp-note { font-size: 14px; color: var(--text-muted-light); letter-spacing: .06em; text-transform: uppercase; }
.reviews-yelp-btn { display: inline-flex; align-items: center; gap: 10px; background: #d32323; color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 15px 32px; transition: background .18s var(--ease-out), transform .18s var(--ease-out); }
.reviews-yelp-btn:hover { background: #b51c1c; transform: translateY(-1px); }

@media (max-width: 900px) { .review-card { flex: 0 0 calc(50% - 10px); } }
@media (max-width: 640px) {
  .reviews { padding: 64px 20px; }
  .review-card { flex: 0 0 84%; }
  .reviews-rating-row { flex-wrap: wrap; }
}

/* ─── DOOR TYPES ────────────────────────────────────────── */
.door-feature { display: grid; grid-template-columns: 55% 45%; min-height: 520px; }
.door-feature-img { position: relative; overflow: hidden; }
.door-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.door-feature-badge { position: absolute; top: 24px; left: 24px; background: var(--green-600); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 6px 14px; }
.door-feature-body { padding: 64px; display: flex; flex-direction: column; justify-content: center; background: var(--navy-950); }
.door-feature-label { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--green-400); margin-bottom: 14px; }
.door-feature-body h3 { font-family: var(--display); font-size: clamp(28px, 3vw, 44px); font-weight: 400; color: var(--text-dark); line-height: 1.15; margin-bottom: 20px; }
.door-feature-body > p { font-size: 16.5px; color: oklch(74% 0.007 250); line-height: 1.75; margin-bottom: 28px; }
.door-feature-body ul { list-style: none; padding: 0; margin: 0 0 40px; display: flex; flex-direction: column; gap: 11px; }
.door-feature-body ul li { font-size: 15px; color: oklch(70% 0.007 250); padding-left: 22px; position: relative; line-height: 1.5; }
.door-feature-body ul li::before { content: '—'; position: absolute; left: 0; color: var(--green-400); }
.door-entry-section { padding: 72px 60px 80px; }
.door-entry-section .eyebrow-row { margin-bottom: 16px; }
.door-entry-section .display { margin-bottom: 44px; }
.door-entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: oklch(88% 0.012 220); }
.door-entry-card { background: var(--cream-50); padding: 40px 36px; }
.door-entry-card-img { aspect-ratio: 4/3; overflow: hidden; margin-bottom: 28px; }
.door-entry-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out); display: block; }
.door-entry-card:hover .door-entry-card-img img { transform: scale(1.04); }
.door-entry-card-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-600); margin-bottom: 10px; }
.door-entry-card h3 { font-family: var(--display); font-size: 26px; font-weight: 500; color: var(--text-light); margin-bottom: 14px; line-height: 1.2; }
.door-entry-card p { font-size: 15px; color: var(--text-muted-light); line-height: 1.65; margin-bottom: 20px; }
.door-entry-card-link { font-size: 14px; font-weight: 500; color: var(--green-600); text-decoration: none; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; transition: color .18s var(--ease-out); }
.door-entry-card-link:hover { color: var(--green-700); }
@media (max-width: 960px) {
  .door-feature { grid-template-columns: 1fr; min-height: unset; }
  .door-feature-img { height: 320px; }
  .door-feature-body { padding: 44px 36px; }
  .door-entry-section { padding: 56px 32px 64px; }
  .door-entry-grid { grid-template-columns: 1fr; }
}

/* ─── BLOG ──────────────────────────────────────────────── */
.blog-hero { background: var(--navy-950); padding: calc(var(--nav-h) + 38px) 60px 80px; text-align: center; }
.blog-hero .eyebrow-row { justify-content: center; margin-bottom: 20px; }
.blog-hero h1 { font-family: var(--display); font-size: clamp(36px, 5vw, 60px); font-weight: 400; color: var(--text-dark); line-height: 1.1; }
.blog-hero h1 em { color: var(--green-300); font-style: italic; }
.blog-hero p { font-size: 18px; color: var(--text-muted-dark); max-width: 560px; margin: 20px auto 0; }

.blog-index { padding: 80px 60px; background: var(--cream-50); }
.blog-index-inner { max-width: 1200px; margin: 0 auto; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 56px; }
.blog-card { background: #fff; border: 1px solid oklch(88% 0.012 220); overflow: hidden; transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out); }
.blog-card:hover { box-shadow: 0 12px 40px oklch(18% 0.06 262 / .10); transform: translateY(-3px); }
.blog-card-img { aspect-ratio: 16/9; overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease-out); }
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-card-body { padding: 28px; }
.blog-tag { display: inline-block; font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--green-600); background: oklch(94% 0.04 140 / .3); padding: 4px 10px; margin-bottom: 14px; }
.blog-card-title { font-family: var(--display); font-size: 20px; font-weight: 500; color: var(--text-light); line-height: 1.3; margin-bottom: 10px; }
.blog-card-excerpt { font-size: 15px; color: var(--text-muted-light); line-height: 1.6; margin-bottom: 18px; }
.blog-card-meta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: oklch(60% 0.03 250); display: flex; gap: 16px; }
.blog-card-link { text-decoration: none; color: inherit; display: block; }

/* Article page */
.article-hero { background: var(--navy-950); padding: calc(var(--nav-h) + 34px) 60px 60px; }
.article-hero-inner { max-width: 800px; margin: 0 auto; }
.article-hero .blog-tag { margin-bottom: 20px; }
.article-hero h1 { font-family: var(--display); font-size: clamp(30px, 4vw, 50px); font-weight: 400; color: var(--text-dark); line-height: 1.15; margin-bottom: 20px; }
.article-hero h1 em { color: var(--green-300); font-style: italic; }
.article-hero-meta { display: flex; align-items: center; gap: 20px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted-dark); margin-top: 24px; }
.article-hero-meta span { display: flex; align-items: center; gap: 6px; }

.article-layout { padding: 72px 60px; background: var(--cream-50); }
.article-layout-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 300px; gap: 64px; align-items: start; }
.article-body { background: #fff; padding: 52px; border: 1px solid oklch(88% 0.012 220); }
.article-body h2 { font-family: var(--display); font-size: 26px; font-weight: 500; color: var(--text-light); margin: 40px 0 16px; line-height: 1.25; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-family: var(--display); font-size: 20px; font-weight: 500; color: var(--text-light); margin: 28px 0 12px; }
.article-body p { font-size: 17px; color: var(--text-muted-light); line-height: 1.75; margin-bottom: 20px; }
.article-body ul, .article-body ol { margin: 0 0 20px 20px; }
.article-body li { font-size: 17px; color: var(--text-muted-light); line-height: 1.7; margin-bottom: 6px; }
.article-body strong { color: var(--text-light); font-weight: 600; }
.article-body a { color: var(--green-600); text-decoration: none; border-bottom: 1px solid oklch(52% 0.17 138 / .3); transition: border-color .15s; }
.article-body a:hover { border-color: var(--green-600); }
.article-body .article-divider { border: none; border-top: 1px solid oklch(88% 0.012 220); margin: 40px 0; }
.article-body .price-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 16.5px; }
.article-body .price-table th { background: var(--navy-950); color: var(--text-dark); font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: .08em; padding: 12px 16px; text-align: left; }
.article-body .price-table td { padding: 11px 16px; border-bottom: 1px solid oklch(88% 0.012 220); color: var(--text-muted-light); }
.article-body .price-table tr:last-child td { border-bottom: none; }
.article-body .price-table td:last-child { font-family: var(--display); font-weight: 500; color: var(--text-light); }
.article-inline-cta { background: var(--navy-950); padding: 32px; margin: 40px 0; text-align: center; }
.article-inline-cta p { color: var(--text-muted-dark); font-size: 16.5px; margin-bottom: 16px; }
.article-inline-cta .btn-primary { display: inline-flex; }

.article-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; }
.sidebar-cta { background: var(--navy-950); padding: 32px; }
.sidebar-cta-label { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--green-400); margin-bottom: 14px; }
.sidebar-cta-head { font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--text-dark); line-height: 1.3; margin-bottom: 12px; }
.sidebar-cta p { font-size: 15px; color: var(--text-muted-dark); line-height: 1.6; margin-bottom: 20px; }
.sidebar-cta .btn-primary { width: 100%; justify-content: center; }
.sidebar-phone { padding: 24px; border: 1px solid oklch(88% 0.012 220); background: #fff; }
.sidebar-phone-label { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted-light); margin-bottom: 8px; }
.sidebar-phone a { font-family: var(--body); font-size: 20px; font-weight: 500; color: var(--text-light); text-decoration: none; display: block; letter-spacing: .02em; }
.sidebar-phone a:hover { color: var(--green-600); }
.sidebar-related { background: #fff; border: 1px solid oklch(88% 0.012 220); padding: 24px; }
.sidebar-related-head { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted-light); margin-bottom: 16px; }
.sidebar-related ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.sidebar-related li a { font-family: var(--display); font-size: 16.5px; color: var(--text-light); text-decoration: none; line-height: 1.4; display: block; }
.sidebar-related li a:hover { color: var(--green-600); }

@media (max-width: 1100px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .article-layout-inner { grid-template-columns: 1fr; }
  .article-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .sidebar-cta, .sidebar-phone, .sidebar-related { flex: 1 1 280px; }
}
@media (max-width: 640px) {
  .blog-hero, .article-hero { padding: 100px 20px 48px; }
  .blog-index { padding: 48px 20px; }
  .blog-grid { grid-template-columns: 1fr; gap: 24px; }
  .article-layout { padding: 40px 20px; }
  .article-body { padding: 28px 20px; }
  .article-sidebar { flex-direction: column; }
  .sidebar-cta, .sidebar-phone, .sidebar-related { flex: none; }
}

/* ─── STICKY MOBILE CTA BAR ─────────────────────────────── */
.mobile-cta-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
  background: oklch(18% 0.09 262 / .98); backdrop-filter: blur(14px);
  border-top: 1px solid oklch(32% 0.09 260 / .6);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  grid-template-columns: 1fr 1.4fr; gap: 10px;
}
.mobile-cta-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 13px 10px; }
.mobile-cta-call { color: oklch(94% 0.006 240); border: 1px solid oklch(46% 0.07 255); }
.mobile-cta-call:active { background: oklch(28% 0.09 260); }
.mobile-cta-est { color: var(--navy-950); background: var(--green-400); }
.mobile-cta-est:active { background: var(--green-300); }
@media (max-width: 760px) {
  .mobile-cta-bar { display: grid; }
  body { padding-bottom: 68px; }
  .footer { padding-bottom: 92px; }
}

/* ─── ESTIMATE WIZARD ───────────────────────────────────── */
.wizard-shortcut { text-align: center; font-size: 14.5px; color: var(--text-muted-light); margin-top: 14px; }
.wizard-shortcut a { color: var(--green-600); font-weight: 500; text-decoration: none; }
.wizard-shortcut a:hover { text-decoration: underline; }
.wizard-page { min-height: 100dvh; background: var(--cream-50); padding: calc(var(--nav-h) + 40px) 24px 80px; }
.wizard { max-width: 720px; margin: 0 auto; }
.wizard-hdr { text-align: center; margin-bottom: 36px; }
.wizard-hdr h1 { font-family: var(--display); font-size: clamp(32px, 5vw, 48px); font-weight: 500; color: var(--text-light); line-height: 1.1; margin-bottom: 12px; }
.wizard-hdr h1 em { font-style: italic; color: var(--green-600); }
.wizard-hdr p { font-size: 16.5px; color: var(--text-muted-light); line-height: 1.7; max-width: 480px; margin: 0 auto; }
.wizard-progress { display: flex; align-items: center; gap: 8px; max-width: 380px; margin: 28px auto 0; }
.wizard-progress-seg { flex: 1; height: 3px; background: oklch(88% 0.012 220); position: relative; overflow: hidden; }
.wizard-progress-seg::after { content: ''; position: absolute; inset: 0; background: var(--green-500); transform: translateX(-101%); transition: transform .4s var(--ease-out); }
.wizard-progress-seg.done::after, .wizard-progress-seg.current::after { transform: translateX(0); }
.wizard-progress-seg.current::after { background: var(--green-400); }
.wizard-step-label { text-align: center; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted-light); margin-top: 12px; }
.wizard-card { background: #fff; border: 1px solid oklch(88% 0.012 220); box-shadow: 0 2px 24px oklch(18% 0.09 262 / .05); padding: 40px; margin-top: 28px; }
.wizard-step { display: none; }
.wizard-step.active { display: block; animation: fadeUp .4s var(--ease-out); }
.wizard-q { font-family: var(--display); font-size: clamp(22px, 3.5vw, 30px); font-weight: 500; color: var(--text-light); line-height: 1.2; margin-bottom: 6px; }
.wizard-q-sub { font-size: 14.5px; color: var(--text-muted-light); line-height: 1.6; margin-bottom: 24px; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.opt-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.opt-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  border: 1.5px solid oklch(88% 0.012 220); background: var(--cream-50);
  padding: 18px 16px; cursor: pointer; text-align: left; font-family: var(--body); width: 100%;
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out), transform .1s var(--ease-out);
}
.opt-card:hover { border-color: var(--green-500); }
.opt-card:active { transform: scale(.985); }
.opt-card.selected { border-color: var(--green-600); background: oklch(96% 0.03 140); }
.opt-card.selected::after { content: '✓'; position: absolute; top: 10px; right: 12px; color: var(--green-600); font-size: 15px; font-weight: 600; }
.opt-card-title { font-size: 15.5px; font-weight: 500; color: var(--text-light); }
.opt-card-sub { font-size: 13px; color: var(--text-muted-light); line-height: 1.45; }
.opt-pill { border: 1.5px solid oklch(88% 0.012 220); background: var(--cream-50); padding: 12px 8px; text-align: center; font-family: var(--body); font-size: 14.5px; font-weight: 500; color: var(--text-light); cursor: pointer; transition: border-color .15s, background .15s; }
.opt-pill:hover { border-color: var(--green-500); }
.opt-pill.selected { border-color: var(--green-600); background: oklch(96% 0.03 140); }
.wizard-field { margin-bottom: 18px; }
.wizard-field label { display: block; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted-light); margin-bottom: 8px; }
.wizard-field input, .wizard-field select, .wizard-field textarea {
  width: 100%; border: 1.5px solid oklch(88% 0.012 220); background: var(--cream-50);
  font-family: var(--body); font-size: 16.5px; color: var(--text-light); padding: 13px 14px;
  transition: border-color .15s var(--ease-out); border-radius: 0; -webkit-appearance: none; appearance: none;
}
.wizard-field textarea { min-height: 90px; resize: vertical; }
.wizard-field input:focus, .wizard-field select:focus, .wizard-field textarea:focus { outline: none; border-color: var(--green-600); background: #fff; }
.wizard-field .field-err { display: none; font-size: 13px; color: oklch(52% 0.19 25); margin-top: 6px; }
.wizard-field.invalid input, .wizard-field.invalid select { border-color: oklch(58% 0.19 25); }
.wizard-field.invalid .field-err { display: block; }
.wizard-notice { display: none; border-left: 3px solid oklch(70% 0.14 75); background: oklch(97% 0.02 85); padding: 14px 16px; font-size: 14.5px; line-height: 1.6; color: oklch(38% 0.06 60); margin-bottom: 22px; }
.wizard-notice.show { display: block; }
.wizard-notice strong { color: oklch(30% 0.06 50); }
.wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; }
.wizard-back { background: none; border: none; font-family: var(--body); font-size: 14px; color: var(--text-muted-light); cursor: pointer; padding: 10px 4px; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; }
.wizard-back:hover { color: var(--text-light); }
.wizard-next { margin-left: auto; }
.wizard-trust { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; font-size: 13px; color: var(--text-muted-light); }
.wizard-trust span { display: inline-flex; align-items: center; gap: 6px; }
.wizard-trust .tdot { width: 5px; height: 5px; border-radius: 50%; background: var(--green-500); }
.wizard-success { text-align: center; padding: 20px 0; }
.wizard-success-icon { width: 64px; height: 64px; border-radius: 50%; background: oklch(96% 0.03 140); color: var(--green-600); display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 22px; }
.wizard-success h1, .wizard-success h2 { font-family: var(--display); font-size: 30px; font-weight: 500; color: var(--text-light); margin-bottom: 12px; }
.wizard-success p { font-size: 15.5px; color: var(--text-muted-light); line-height: 1.7; max-width: 420px; margin: 0 auto 10px; }
.wizard-success .call-row { margin-top: 22px; }
@media (max-width: 640px) {
  .wizard-page { padding: 104px 16px 60px; }
  .wizard-card { padding: 28px 20px; }
  .opt-grid, .opt-grid.cols-4 { grid-template-columns: 1fr 1fr; }
}

/* --- Frame material cards (shared: homepage + window-replacement) --- */
.wr-materials { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:oklch(88% .012 220); margin-top:52px; }
.wr-mat { background:#fff; padding:40px 32px; }
.wr-mat-icon { margin-bottom:22px; color:var(--navy-950); }
.wr-mat-label { font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--green-600); margin-bottom:8px; }
.wr-mat h3 { font-family:var(--display); font-size:22px; font-weight:500; color:var(--text-light); margin-bottom:12px; }
.wr-mat p { font-size:15px; color:var(--text-muted-light); line-height:1.72; margin-bottom:18px; }
.wr-mat ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:7px; }
.wr-mat li { font-size:14px; color:var(--text-muted-light); padding-left:18px; position:relative; }
.wr-mat li::before { content:'✓'; position:absolute; left:0; color:var(--green-500); font-size:13px; }
@media (max-width:1024px) { .wr-materials { grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px) { .wr-materials { grid-template-columns:1fr; } }
/* Cards double as links through to the material detail pages. */
a.wr-mat { text-decoration: none; display: block; transition: background .2s var(--ease-out), transform .2s var(--ease-out); }
a.wr-mat:hover { background: var(--cream-50); transform: translateY(-2px); }
.wr-mat-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--green-600); }
a.wr-mat:hover .wr-mat-more { gap: 10px; }