/* Peninsula Christmas Lights — translated from the Claude Design canvas */
:root {
  --night: #08110D; --night-2: #0B1712; --panel: #0E1F18; --panel-hi: #143026;
  --line-dark: #16281F; --line-mid: #1E3A2E; --line-lite: #244435; --line-hairline: #2C5343;
  --cream: #F7F4ED; --cream-2: #F1EDE2; --cream-line: #DDD6C8; --cream-line-2: #EDE8DC;
  --ink: #0C1310; --ink-soft: #3D4A43; --ink-mute: #5C6B63;
  --gold: #E8C07A; --gold-glow: #FFE2AE; --gold-dark: #8C6A2B; --gold-mid: #C9A45F;
  --sage: #C9D6CE; --sage-mute: #9BAAA2; --sage-dim: #6F8177;
  --red: #D4574B; --green: #3E8E6B;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: Manrope, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--night); color: var(--cream); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-glow); }
input, select, button, textarea { font-family: var(--sans); font-size: 16px; }
input::placeholder { color: #8d9a92; }
input[type=range] { accent-color: var(--gold); width: 100%; height: 44px; cursor: pointer; }
h1, h2, h3 { text-wrap: balance; }
.serif { font-family: var(--serif); font-weight: 400; }
.mono { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@keyframes glowpulse { 0%, 100% { opacity: 1; } 48% { opacity: 0.42; } }
@keyframes bulbtwinkle { 0%, 100% { filter: brightness(1); } 44% { filter: brightness(0.5); } 72% { filter: brightness(0.88); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.star { display: inline-block; background: var(--gold); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars { display: inline-flex; gap: 4px; }

/* Buttons */
.btn { display: inline-block; font-weight: 700; font-size: 15px; padding: 12px 18px; cursor: pointer; }
.btn-lg { font-size: 16px; padding: 16px 22px; }
.btn-gold { background: var(--gold); color: var(--night); }
.btn-gold:hover { background: var(--gold-glow); color: var(--night); }
.btn-outline { color: var(--cream); border: 1px solid var(--line-hairline); }
.btn-outline:hover { color: var(--gold); border-color: var(--gold-dark); }
.btn-ghost-dark { background: transparent; border: 1px solid #C9C2B2; color: var(--ink); padding: 14px; font-size: 15px; font-weight: 600; }

/* Announce bar */
.announce { background: var(--panel); border-bottom: 1px solid var(--line-mid); padding: 11px 22px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center; text-align: center; }
.announce-main { font-size: 13px; font-weight: 600; color: var(--gold); }
.announce-sub { font-size: 13px; color: var(--sage-mute); }

/* Header */
.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; padding: 20px 22px; border-bottom: 1px solid var(--line-dark); background: var(--night); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--cream); }
.brand:hover { color: var(--cream); }
.brand-star { width: 22px; height: 22px; box-shadow: 0 0 16px rgba(232,192,122,0.55); }
.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-name { font-family: var(--serif); font-size: 20px; line-height: 1; }
.brand-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-dim); }
.site-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; font-weight: 500; margin-left: auto; }
.site-nav a { color: var(--sage); }
.site-nav a:hover { color: var(--gold); }
.header-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.header-cta .btn-outline { border-color: var(--line-lite); font-size: 15px; padding: 11px 16px; }

/* Hero */
.hero { position: relative; background: var(--night); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background:
  radial-gradient(ellipse 80% 55% at 68% 8%, rgba(232,192,122,0.13), transparent 60%),
  radial-gradient(ellipse 90% 60% at 20% 100%, rgba(20,48,38,0.7), transparent 70%),
  linear-gradient(180deg, #0A1510 0%, var(--night) 55%, #061008 100%); }
.hero-lights { position: absolute; left: 0; right: 0; top: 44px; height: 16px; pointer-events: none; z-index: 2; }
.hero-lights .wire { position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: rgba(232,192,122,0.34); }
.hero-lights .bulb { position: absolute; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--gold-glow);
  box-shadow: 0 0 10px rgba(255,226,174,0.9), 0 0 28px rgba(255,226,174,0.45); animation: bulbtwinkle 3s ease-in-out infinite; }
.hero-inner { position: relative; display: flex; flex-wrap: wrap; gap: 38px; align-items: flex-start; padding: 76px 22px 84px; max-width: 1280px; margin: 0 auto; }
.hero-inner-loc { padding: 70px 22px 74px; }
.hero-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; }
.glow-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold-glow); box-shadow: 0 0 14px var(--gold-glow), 0 0 34px rgba(255,226,174,0.5); animation: glowpulse 3.4s ease-in-out infinite; }
.eyebrow-text { font-size: 11px; letter-spacing: 0.2em; color: var(--gold); }
.eyebrow-gold { color: var(--gold-dark); }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 6vw, 74px); line-height: 0.99; letter-spacing: -0.015em; max-width: 19ch; }
.hero-loc h1 { font-size: clamp(34px, 5.4vw, 66px); line-height: 1; max-width: 22ch; }
.lede { margin: 0; font-size: 18px; line-height: 1.62; color: var(--sage); max-width: 52ch; }
.lede-dark { margin: 0; font-size: 17px; line-height: 1.62; color: var(--ink-soft); max-width: 50ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 6px; font-size: 14px; color: var(--sage-mute); }

/* Quote card */
.quote-card { flex: 1 1 380px; min-width: 0; max-width: 470px; background: var(--cream); color: var(--ink); padding: 28px 26px 30px; }
.quote-card form, .quote-success { display: flex; flex-direction: column; gap: 18px; }
.quote-head { display: flex; flex-direction: column; gap: 7px; }
.quote-title { font-size: 29px; line-height: 1.06; }
.quote-sub { font-size: 14px; line-height: 1.55; color: var(--ink-mute); }
.field { display: flex; flex-direction: column; gap: 7px; flex: 1 1 150px; min-width: 0; }
.field-label { color: var(--ink-mute); }
.field input, .field select { border: 1px solid #C9C2B2; background: #fff; color: var(--ink); padding: 14px; height: 52px; appearance: none; border-radius: 0; }
.field input:focus, .field select:focus { border-color: var(--panel); outline: none; }
.field-row { display: flex; flex-wrap: wrap; gap: 14px; }
.quote-submit { background: var(--panel); color: var(--cream); border: none; padding: 19px; font-size: 17px; font-weight: 700; cursor: pointer; }
.quote-submit:hover { background: var(--panel-hi); }
.quote-submit[disabled] { opacity: 0.7; cursor: wait; }
.quote-error { background: #F2E0DC; border-left: 3px solid #8C2F22; color: #5A1E15; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.quote-fineprint { font-size: 12px; line-height: 1.5; color: #7C8880; }
.quote-success-line { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.quote-success-meta { border-top: 1px solid var(--cream-line); padding-top: 14px; display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: var(--ink-mute); }
.quote-success-meta a { color: var(--gold-dark); }
.quote-success-meta strong { color: var(--ink); font-size: 13px; letter-spacing: 0.04em; }

/* Trustbar */
.trustbar { background: var(--panel); border-top: 1px solid var(--line-mid); border-bottom: 1px solid var(--line-mid); padding: 26px 22px; display: flex; flex-wrap: wrap; gap: 22px 40px; justify-content: space-between; }
.trustbar > div { flex: 1 1 210px; min-width: 0; }
.trust-title { font-size: 20px; color: var(--gold); }
.trust-sub { font-size: 14px; line-height: 1.5; color: var(--sage-mute); margin-top: 5px; }

/* Sections */
.section-cream { background: var(--cream); color: var(--ink); padding: 78px 22px; }
.section-dark { background: var(--night); color: var(--cream); padding: 74px 22px; border-top: 1px solid var(--line-dark); }
.section-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; margin-bottom: 34px; }
.section-head h2, .section-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 46px); line-height: 1.02; letter-spacing: -0.01em; }
.section-title { margin-bottom: 30px; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.06; }
.section-note { font-size: 15px; margin-left: auto; max-width: 38ch; }
.section-cream .section-note { color: var(--ink-mute); }
.section-dark .section-note { color: var(--sage-mute); }

/* Image slots (placeholders until photography lands) */
.img-slot { position: relative; width: 100%; height: 100%; min-height: 180px; display: flex; align-items: flex-end; overflow: hidden;
  background: radial-gradient(ellipse 70% 45% at 50% 30%, rgba(232,192,122,0.14), transparent 65%), linear-gradient(180deg, #0D1B14 0%, #0A130E 70%, #08110D 100%); }
.img-slot::before { content: ''; position: absolute; left: 8%; right: 8%; top: 34%; height: 2px;
  background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,226,174,0.85) 14px 18px); filter: drop-shadow(0 0 6px rgba(255,226,174,0.8)); }
.img-slot span { position: relative; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,244,237,0.5); padding: 10px 12px; }
.img-slot-day { background: linear-gradient(180deg, #46504B 0%, #313B35 65%, #232B26 100%); }
.img-slot-day::before { background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(20,25,22,0.5) 14px 18px); filter: none; }
.img-slot-bare::before { display: none; }

/* Looks switcher */
.looks-grid { display: flex; flex-wrap: wrap; gap: 26px; }
.looks-stage { flex: 2 1 380px; min-width: 0; position: relative; aspect-ratio: 16/10; min-height: 260px; background: var(--night); }
.look-pane { position: absolute; inset: 0; }
.looks-controls { flex: 1 1 230px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.look-btn { display: flex; align-items: center; gap: 14px; padding: 18px 16px; border: 1px solid var(--cream-line); cursor: pointer; text-align: left; background: #fff; color: var(--ink); font-size: 16px; font-weight: 700; }
.look-btn.is-active { background: var(--panel); color: var(--cream); }
.look-dots { display: flex; gap: 5px; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-warm { background: var(--gold-glow); box-shadow: 0 0 8px rgba(255,226,174,0.9); }
.dot-red { background: var(--red); } .dot-green { background: var(--green); } .dot-gold { background: var(--gold); }
.dot-white { background: var(--cream); border: 1px solid #C9C2B2; }
.look-note { font-size: 15px; line-height: 1.6; color: var(--ink-mute); padding-top: 8px; }

/* Before / after */
.ba-stage { position: relative; display: flex; width: 100%; aspect-ratio: 16/9; min-height: 240px; background: var(--night-2); overflow: hidden; }
.ba-before { width: 46%; min-width: 0; position: relative; overflow: hidden; }
.ba-after { flex: 1; min-width: 0; position: relative; overflow: hidden; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 46%; width: 2px; background: var(--gold); box-shadow: 0 0 14px rgba(232,192,122,0.8); pointer-events: none; }
.ba-label { position: absolute; bottom: 12px; font-size: 10px; letter-spacing: 0.18em; pointer-events: none; }
.ba-label-l { left: 14px; color: rgba(247,244,237,0.75); }
.ba-label-r { right: 14px; color: rgba(232,192,122,0.9); }
.beforeafter input[type=range] { margin-top: 14px; cursor: ew-resize; }

/* Services */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2px; background: var(--cream-line); }
.svc-grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.svc-card { background: var(--cream); padding: 30px 26px 32px; display: flex; flex-direction: column; gap: 12px; }
.svc-tag { color: var(--gold-dark); letter-spacing: 0.18em; }
.svc-name { font-size: 26px; line-height: 1.1; }
.svc-desc { font-size: 15px; line-height: 1.6; color: var(--ink-mute); }
.svc-price { margin-top: auto; padding-top: 16px; font-size: 15px; font-weight: 700; }

/* Towns */
.towns { position: relative; background: var(--night); }
.towns-bg { position: absolute; inset: 0; opacity: 0.5; }
.towns::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,17,13,0.96) 0%, rgba(8,17,13,0.78) 60%, rgba(8,17,13,0.55) 100%); pointer-events: none; }
.towns-inner { position: relative; z-index: 1; padding: 74px 22px; display: flex; flex-wrap: wrap; gap: 38px; }
.towns-copy { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.towns-copy h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 46px); line-height: 1.02; }
.towns-copy p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--sage); max-width: 44ch; }
.towns-grid { flex: 1 1 320px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line-mid); border: 1px solid var(--line-mid); align-self: flex-start; }
.towns-grid a { background: rgba(8,17,13,0.72); padding: 18px 16px; font-size: 17px; font-weight: 600; color: var(--cream); }
.towns-grid a:hover { background: var(--panel); color: var(--gold); }

/* Map area */
.maparea { background: var(--night-2); border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; }
.maparea-copy { flex: 1 1 300px; min-width: 0; padding: 56px 22px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.maparea-copy h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.04; }
.maparea-copy p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--sage-mute); max-width: 40ch; }
.maparea-note { font-size: 14px; color: var(--sage-dim); }
.maparea-map { flex: 1 1 380px; min-width: 300px; min-height: 420px; position: relative; background: var(--night); }
.maparea-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Process */
.process-grid { display: flex; flex-wrap: wrap; gap: 40px; }
.process-steps { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.process-steps h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 46px); line-height: 1.02; }
.step { display: flex; gap: 18px; border-top: 1px solid var(--cream-line); padding-top: 18px; }
.step-num { font-size: 30px; color: var(--gold-dark); line-height: 1; min-width: 38px; }
.step-title { font-size: 18px; font-weight: 700; }
.step-desc { font-size: 15px; line-height: 1.6; color: var(--ink-mute); margin-top: 5px; }
.process-photo { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.process-img { width: 100%; aspect-ratio: 4/5; min-height: 280px; }
.photo-caption { font-size: 11px; color: #8C8371; letter-spacing: 0.06em; text-transform: none; }

/* Reviews */
.reviews-meta { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 14px; color: var(--sage-mute); }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.review-card { border: 1px solid var(--line-mid); padding: 26px 24px; display: flex; flex-direction: column; gap: 16px; }
.review-text { font-size: 21px; line-height: 1.35; }
.review-who { font-size: 14px; color: var(--sage-mute); margin-top: auto; }

/* Crew */
.crew-grid { display: flex; flex-wrap: wrap; gap: 34px; }
.crew-copy { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.crew-copy h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.8vw, 42px); line-height: 1.04; }
.crew-copy p { margin: 0; font-size: 16px; line-height: 1.68; color: var(--ink-soft); max-width: 46ch; }
.crew-links { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 15px; }
.crew-links a { color: var(--gold-dark); border-bottom: 1px solid rgba(140,106,43,0.4); }
.crew-photos { flex: 1 1 300px; min-width: 0; display: flex; gap: 10px; }
.crew-photos figure { flex: 1; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.crew-img { aspect-ratio: 4/5; min-height: 190px; }
.crew-photos figcaption { font-size: 14px; color: var(--ink-mute); }

/* CTA band */
.cta-band { background: var(--panel); padding: 70px 22px; border-top: 1px solid var(--line-mid); display: flex; flex-wrap: wrap; gap: 30px; align-items: center; }
.cta-copy { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cta-copy h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.8vw, 42px); line-height: 1.04; }
.cta-copy p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--sage); max-width: 46ch; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Breadcrumb */
.breadcrumb { background: var(--night-2); border-bottom: 1px solid var(--line-dark); padding: 14px 22px; font-size: 13px; color: var(--sage-dim); }
.breadcrumb a { color: var(--sage-dim); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: var(--sage); }

/* Location page */
.whyus-grid { display: flex; flex-wrap: wrap; gap: 38px; }
.whyus-copy { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.whyus-copy h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.06; }
.whyus-copy p { margin: 0; font-size: 16px; line-height: 1.68; color: var(--ink-soft); }
.glance-card { flex: 1 1 260px; min-width: 0; border: 1px solid var(--cream-line); padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; background: #fff; align-self: flex-start; }
.glance-label { color: var(--gold-dark); }
.glance-row { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--cream-line-2); padding-bottom: 10px; font-size: 15px; }
.glance-row:last-child { border-bottom: none; padding-bottom: 0; }
.glance-row span { color: var(--ink-mute); }
.hoods { background: var(--night); padding: 52px 22px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.hoods-label { color: var(--sage-dim); letter-spacing: 0.2em; font-size: 11px; margin-bottom: 18px; }
.hoods-list { display: flex; flex-wrap: wrap; gap: 10px; }
.hood { border: 1px solid var(--line-lite); padding: 11px 16px; font-size: 15px; color: var(--sage); }
.loc-review { background: var(--panel); padding: 64px 22px; display: flex; flex-wrap: wrap; gap: 34px; align-items: center; }
.loc-review-copy { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.loc-review-text { font-size: clamp(22px, 2.8vw, 30px); line-height: 1.32; }
.loc-gallery { flex: 1 1 240px; min-width: 0; display: flex; gap: 8px; }
.loc-gallery > div { flex: 1; aspect-ratio: 3/4; min-height: 200px; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; }
.faq-cream .faq-item { border-bottom: 1px solid var(--cream-line); }
.faq-cream .faq-item:first-child { border-top: 1px solid var(--cream-line); }
.faq-dark .faq-item { border-bottom: 1px solid var(--line-dark); }
.faq-dark .faq-item:first-child { border-top: 1px solid var(--line-dark); }
.faq-q { width: 100%; background: transparent; border: none; padding: 22px 4px; display: flex; gap: 18px; align-items: baseline; cursor: pointer; text-align: left; }
.faq-q > span:first-child { flex: 1; font-size: 18px; font-weight: 700; }
.faq-cream .faq-q { color: var(--ink); }
.faq-dark .faq-q { color: var(--cream); }
.faq-sign { font-size: 26px; line-height: 0.8; }
.faq-cream .faq-sign { color: var(--gold-dark); }
.faq-dark .faq-sign { color: var(--gold); }
.faq-a { padding: 0 4px 22px; max-width: 70ch; font-size: 16px; line-height: 1.68; }
.faq-cream .faq-a { color: var(--ink-soft); }
.faq-dark .faq-a { color: var(--sage-mute); }

/* Pricing page */
.price-hero { padding-bottom: 60px; }
.price-hero-grid { display: flex; flex-wrap: wrap; gap: 34px; align-items: flex-end; }
.price-hero-copy { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.price-hero h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 60px); line-height: 1; letter-spacing: -0.015em; max-width: 20ch; }
.price-compare { flex: 0 1 280px; min-width: 0; border-left: 2px solid var(--gold); padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-mute); }
.price-compare-num { font-size: 34px; line-height: 1; color: var(--ink); }
.price-table-wrap { background: #fff; color: var(--ink); padding: 0 22px 70px; overflow-x: auto; }
.price-table { display: flex; flex-direction: column; gap: 2px; background: var(--cream-line); border: 1px solid var(--cream-line); min-width: 640px; }
.price-row { background: #fff; display: flex; gap: 12px; padding: 22px 20px; align-items: baseline; }
.price-row > div:nth-child(1) { flex: 2 1 200px; min-width: 0; }
.price-row > div:nth-child(2) { flex: 1 1 130px; min-width: 0; }
.price-row > div:nth-child(3) { flex: 1 1 130px; min-width: 0; }
.price-row > div:nth-child(4) { flex: 2 1 200px; min-width: 0; }
.price-head { background: var(--panel); color: var(--cream); padding: 16px 20px; letter-spacing: 0.16em; }
.price-svc { font-size: 17px; font-weight: 700; }
.price-unit { font-size: 15px; color: var(--ink-mute); }
.price-num { font-size: 24px; font-variant-numeric: tabular-nums; }
.price-inc { font-size: 15px; line-height: 1.55; color: var(--ink-mute); }

/* Estimator */
.est-grid { display: flex; flex-wrap: wrap; gap: 38px; align-items: flex-start; }
.est-controls { flex: 1 1 330px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.est-controls h2 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.8vw, 42px); line-height: 1.04; }
.est-sub { margin: 0; font-size: 16px; line-height: 1.6; color: var(--sage-mute); max-width: 44ch; }
.est-field { display: flex; flex-direction: column; gap: 11px; }
.est-field .mono { color: var(--sage-dim); }
.est-field-head { display: flex; align-items: baseline; gap: 12px; }
.est-feet { font-size: 24px; margin-left: auto; }
.est-stories { display: flex; gap: 8px; }
.est-story { flex: 1; height: 52px; border: 1px solid var(--line-lite); font-size: 15px; font-weight: 600; cursor: pointer; background: var(--night-2); color: var(--sage-mute); }
.est-story.is-active { background: var(--gold); color: var(--night); }
.est-extras { display: flex; flex-wrap: wrap; gap: 16px; }
.est-trees { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-mid); padding: 12px 14px; }
.est-trees > span:first-child { flex: 1; font-size: 15px; font-weight: 600; }
.est-trees button { width: 44px; height: 44px; border: 1px solid var(--line-lite); background: var(--night-2); color: var(--cream); font-size: 20px; cursor: pointer; }
.est-trees .serif { font-size: 22px; min-width: 26px; text-align: center; }
.est-perm { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-lite); padding: 16px 14px; cursor: pointer; text-align: left; background: var(--night-2); color: var(--sage-mute); font-size: 15px; font-weight: 600; }
.est-perm.is-active { background: var(--panel-hi); color: var(--cream); }
.est-perm .serif { font-size: 20px; width: 20px; }
.est-card { flex: 1 1 300px; min-width: 0; max-width: 440px; background: var(--panel); border: 1px solid var(--line-lite); padding: 30px 26px; display: flex; flex-direction: column; gap: 20px; }
.est-card .mono { color: var(--sage-dim); }
.est-range { font-size: clamp(34px, 4.6vw, 50px); line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.est-note { font-size: 14px; line-height: 1.55; color: var(--sage-mute); }
.est-lines { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line-mid); padding-top: 18px; }
.est-line { display: flex; justify-content: space-between; gap: 14px; font-size: 15px; }
.est-line span { color: var(--sage); }
.est-line strong { white-space: nowrap; }
.est-card .btn { text-align: center; padding: 17px; font-size: 16px; }

/* vs grid */
.vs-grid { display: flex; flex-wrap: wrap; gap: 2px; background: var(--cream-line); }
.vs-card { flex: 1 1 300px; min-width: 0; padding: 30px 26px; display: flex; flex-direction: column; gap: 11px; font-size: 16px; line-height: 1.55; }
.vs-us { background: #fff; }
.vs-diy { background: var(--cream-2); color: var(--ink-mute); }
.vs-label { margin-bottom: 3px; }
.vs-us .vs-label { color: var(--gold-dark); }
.vs-diy .vs-label { color: #8C8371; }

/* Footer */
.site-footer { background: var(--night-2); border-top: 1px solid var(--line-dark); padding: 60px 22px 30px; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 34px 40px; }
.footer-col { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-brand { flex: 1 1 260px; }
.footer-col a { color: var(--sage); }
.footer-col a:hover { color: var(--gold); }
.footer-brand address { font-style: normal; font-size: 14px; line-height: 1.65; color: var(--sage-mute); }
.footer-brand .brand-star { width: 18px; height: 18px; box-shadow: none; }
.footer-brand .brand-name { font-size: 19px; }
.footer-label { color: var(--sage-dim); }
.hours-row { display: flex; justify-content: space-between; gap: 12px; color: var(--sage); }
.hours-row span:last-child { color: var(--sage-mute); }
.footer-fineprint { font-size: 13px; line-height: 1.55; color: var(--sage-dim); letter-spacing: 0.02em; text-transform: none; }
.footer-bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 13px; color: var(--sage-dim); }

/* Sticky mobile call bar */
.sticky-call { display: none; }
@media (max-width: 720px) {
  .sticky-call { position: sticky; bottom: 0; z-index: 60; display: flex; gap: 1px; background: var(--line-dark); border-top: 1px solid var(--line-lite); }
  .sticky-call-btn { flex: 1.3; background: var(--gold); color: var(--night); padding: 18px 12px; text-align: center; font-size: 16px; font-weight: 700; }
  .sticky-quote-btn { flex: 1; background: var(--panel); color: var(--cream); padding: 18px 12px; text-align: center; font-size: 16px; font-weight: 700; }
  .site-nav { display: none; }
  .header-cta .btn-outline { display: none; }
}