/* ==========================================================================
   Great Home Pro — shared stylesheet
   ONE file. Every page links this. Change it here, it changes everywhere.
   That is the whole point of leaving GoHighLevel.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  /* Brand — carried over from the existing Great Home Pro pages */
  --navy:#0B2545; --navy2:#163D6E; --blue:#1D5FA8; --blue-lt:#3A7FC4;
  --blue-pale:#E8F1FB; --blue-pale2:#D4E5F7;
  --white:#FFFFFF; --off-white:#F6F9FD;
  --slate:#4A607A; --muted:#7A95AE; --rule:#C8D9EC; --text:#0F2236;
  --gold:#C9922A; --gold-lt:#F5A623; --green:#1A7A4A; --red:#B23A48;

  --max-w:1140px;
  --nav-h:62px;
  --radius:12px;
  --radius-lg:18px;
  --shadow-sm:0 1px 3px rgba(11,37,69,.08);
  --shadow:0 4px 18px rgba(11,37,69,.10);
  --shadow-lg:0 14px 44px rgba(11,37,69,.16);
  --font-head:'Playfair Display', Georgia, serif;
  --font-body:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
body{
  font-family:var(--font-body); color:var(--text); background:var(--white);
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
strong{ font-weight:600; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
:focus-visible{ outline:3px solid var(--gold-lt); outline-offset:2px; border-radius:4px; }

.container{ max-width:var(--max-w); margin:0 auto; padding:0 24px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--gold-lt); color:var(--navy); padding:12px 20px; font-weight:600;
}
.skip-link:focus{ left:8px; top:8px; }

/* ---------- NAV ------------------------------------------------------- */
.nav{ position:sticky; top:0; z-index:200; background:var(--navy); border-bottom:1px solid rgba(255,255,255,.08); }
.nav-inner{
  max-width:var(--max-w); margin:0 auto; padding:0 24px; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.nav-brand{ font-family:var(--font-head); font-size:20px; font-weight:700; color:#fff; white-space:nowrap; }
.nav-brand span{ color:var(--gold-lt); }
.nav-links{ display:flex; align-items:center; gap:26px; list-style:none; }
.nav-link{ color:rgba(255,255,255,.86); font-size:14.5px; font-weight:500; transition:color .15s; }
.nav-link:hover{ color:#fff; }
.nav-link[aria-current="page"]{ color:var(--gold-lt); }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-phone{ color:#fff; font-family:var(--font-mono); font-size:14.5px; font-weight:500; white-space:nowrap; }
.nav-toggle{ display:none; width:42px; height:42px; align-items:center; justify-content:center; }
.nav-toggle span{ display:block; width:22px; height:2px; background:#fff; position:relative; }
.nav-toggle span::before,.nav-toggle span::after{ content:''; position:absolute; left:0; width:22px; height:2px; background:#fff; }
.nav-toggle span::before{ top:-7px; } .nav-toggle span::after{ top:7px; }

@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .nav-phone{ display:none; }
  .nav-links{
    position:absolute; top:var(--nav-h); left:0; right:0; background:var(--navy);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 20px;
    border-bottom:1px solid rgba(255,255,255,.1); display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ border-top:1px solid rgba(255,255,255,.08); }
  .nav-link{ display:block; padding:14px 0; font-size:16px; }
}

/* ---------- BUTTONS --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--radius); font-size:15.5px; font-weight:600;
  transition:transform .12s, box-shadow .15s, background .15s; text-align:center;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-gold{ background:var(--gold-lt); color:var(--navy); box-shadow:0 4px 14px rgba(245,166,35,.32); }
.btn-gold:hover{ background:#ffb238; box-shadow:0 6px 20px rgba(245,166,35,.42); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy2); }
.btn-ghost{ border:1.5px solid var(--rule); color:var(--navy); background:#fff; }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn-outline-light{ border:1.5px solid rgba(255,255,255,.4); color:#fff; }
.btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-lg{ padding:17px 34px; font-size:16.5px; }
.btn-block{ width:100%; }

/* ---------- SECTIONS -------------------------------------------------- */
.section{ padding:84px 0; }
.section-sm{ padding:56px 0; }
.section-alt{ background:var(--off-white); }
.section-navy{ background:var(--navy); color:#fff; }
.section-head{ text-align:center; max-width:720px; margin:0 auto 48px; }
.eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); margin-bottom:14px;
}
.section-navy .eyebrow{ color:var(--gold-lt); }
h1,h2,h3{ font-family:var(--font-head); font-weight:700; line-height:1.15; letter-spacing:-.01em; }
h1{ font-size:clamp(34px,5.2vw,54px); }
h2{ font-size:clamp(28px,3.8vw,40px); }
h3{ font-size:clamp(19px,2.2vw,23px); }
.section-sub{ font-size:17px; color:var(--slate); margin-top:16px; }
.section-navy .section-sub{ color:rgba(255,255,255,.76); }

/* ---------- HERO ------------------------------------------------------ */
.hero{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 58%,#1b4a80 100%);
  color:#fff; padding:88px 0 96px; position:relative; overflow:hidden;
}
.hero::after{
  content:''; position:absolute; right:-160px; top:-160px; width:520px; height:520px;
  background:radial-gradient(circle,rgba(245,166,35,.16) 0%,transparent 68%); pointer-events:none;
}
.hero-inner{ position:relative; z-index:1; max-width:800px; }
.hero h1{ color:#fff; }
.hero h1 .accent{ color:var(--gold-lt); }
.hero-sub{ font-size:19px; color:rgba(255,255,255,.82); margin-top:20px; max-width:620px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:34px; list-style:none; }
.hero-trust li{ display:flex; align-items:center; gap:9px; font-size:14.5px; color:rgba(255,255,255,.8); }
.hero-trust li::before{ content:'✓'; color:var(--gold-lt); font-weight:700; }

/* ---------- SERVICE AREA CHECKER ------------------------------------- */
.areacheck{
  background:#fff; color:var(--text); border-radius:var(--radius-lg);
  padding:30px; box-shadow:var(--shadow-lg); max-width:560px; margin-top:38px;
}
.areacheck-title{ font-family:var(--font-head); font-size:21px; font-weight:700; }
.areacheck-sub{ font-size:14.5px; color:var(--slate); margin-top:7px; }
.areacheck-form{ display:flex; gap:10px; margin-top:18px; }
.areacheck-input{
  flex:1; min-width:0; padding:14px 16px; font-family:inherit; font-size:16px;
  border:1.5px solid var(--rule); border-radius:var(--radius); color:var(--text); background:#fff;
}
.areacheck-input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-pale); }
.areacheck-result{ margin-top:16px; font-size:15px; display:none; }
.areacheck-result.show{ display:block; }
.areacheck-result .ac-in{ color:var(--green); font-weight:600; }
.areacheck-result .ac-maybe{ color:var(--gold); font-weight:600; }
.areacheck-actions{ margin-top:14px; display:flex; flex-wrap:wrap; gap:10px; }
.areacheck-list{ font-size:13.5px; color:var(--muted); margin-top:16px; line-height:1.65; }

@media (max-width:560px){ .areacheck-form{ flex-direction:column; } }

/* ---------- CARDS ----------------------------------------------------- */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

.card{
  background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg);
  padding:28px; box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s, border-color .15s;
}
.card-link:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--blue-lt); }
.card-icon{ font-size:30px; line-height:1; margin-bottom:14px; }
.card h3{ margin-bottom:10px; }
.card p{ font-size:15px; color:var(--slate); }
.card-price{
  font-family:var(--font-mono); font-size:14.5px; font-weight:500; color:var(--blue);
  margin-top:16px; display:block;
}
.card-more{ font-size:14.5px; font-weight:600; color:var(--blue); margin-top:16px; display:inline-block; }

/* ---------- STEPS ----------------------------------------------------- */
.steps{ display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); counter-reset:step; }
.step{ position:relative; padding-top:8px; }
.step-num{
  font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--gold);
  border:1.5px solid var(--gold); width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.section-navy .step-num{ color:var(--gold-lt); border-color:var(--gold-lt); }
.step h3{ font-size:19px; margin-bottom:8px; }
.step p{ font-size:15px; color:var(--slate); }
.section-navy .step p{ color:rgba(255,255,255,.74); }

/* ---------- PRICE TABLE ----------------------------------------------- */
.price-band{ background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.price-row{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 24px; border-bottom:1px solid var(--rule); }
.price-row:last-child{ border-bottom:none; }
.price-row-label{ font-size:15.5px; }
.price-row-label small{ display:block; color:var(--muted); font-size:13px; margin-top:3px; }
.price-row-val{ font-family:var(--font-mono); font-size:17px; font-weight:500; color:var(--navy); white-space:nowrap; }

/* ---------- FAQ ------------------------------------------------------- */
.faq{ max-width:800px; margin:0 auto; border-top:1px solid var(--rule); }
.faq-item{ border-bottom:1px solid var(--rule); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:22px 4px; text-align:left; font-size:16.5px; font-weight:600; color:var(--navy);
}
.faq-icon{ font-size:22px; color:var(--blue); flex-shrink:0; transition:transform .2s; }
.faq-item.open .faq-icon{ transform:rotate(45deg); }
.faq-a{ display:none; padding:0 4px 24px; font-size:15.5px; color:var(--slate); }
.faq-item.open .faq-a{ display:block; }

/* ---------- BOOKING --------------------------------------------------- */
.booking-shell{ background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.booking-shell iframe{ width:100%; border:none; display:block; min-height:640px; }
.booking-note{ font-size:13.5px; color:var(--muted); text-align:center; margin-top:14px; }
.booking-fallback{ padding:40px 28px; text-align:center; }

/* ---------- CTA BAND -------------------------------------------------- */
.cta-band{ background:linear-gradient(140deg,var(--navy) 0%,var(--navy2) 100%); color:#fff; padding:72px 0; text-align:center; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.78); font-size:17px; margin-top:14px; }
.cta-band-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px; }

/* ---------- FOOTER ---------------------------------------------------- */
.footer{ background:var(--navy); color:rgba(255,255,255,.7); padding:56px 0 28px; font-size:14.5px; }
.footer-grid{ display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.footer-brand{ font-family:var(--font-head); font-size:21px; font-weight:700; color:#fff; }
.footer-brand span{ color:var(--gold-lt); }
.footer p{ margin-top:12px; line-height:1.7; }
.footer h4{ font-size:12px; font-family:var(--font-mono); letter-spacing:.13em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:14px; font-weight:500; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer a:hover{ color:#fff; }
.footer-bottom{
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; font-size:13.5px; color:rgba(255,255,255,.55);
}

/* ---------- STICKY MOBILE CALL BAR ------------------------------------ */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:190; display:none;
  background:var(--navy); border-top:1px solid rgba(255,255,255,.14);
  padding:10px 14px; gap:10px;
}
.callbar .btn{ flex:1; padding:13px 10px; font-size:15px; }
@media (max-width:760px){
  .callbar{ display:flex; }
  body{ padding-bottom:70px; }
}

/* ---------- UTILITIES ------------------------------------------------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-40{ margin-top:40px; }
.lead{ font-size:17.5px; color:var(--slate); }
.prose p{ margin-bottom:16px; font-size:16px; color:var(--slate); }
.prose h2{ margin:38px 0 14px; }
.prose h3{ margin:28px 0 10px; }
.prose ul{ margin:0 0 18px 22px; color:var(--slate); font-size:16px; }
.prose li{ margin-bottom:8px; }

/* ==========================================================================
   QUOTE BUILDER
   Shared by /tv-mounting and /while-were-there. Both pages build a price the
   same way, so the widgets live here rather than in either page.
   ========================================================================== */
.quote-layout{ display:grid; grid-template-columns:1fr 340px; gap:32px; align-items:start; }
@media (max-width:940px){ .quote-layout{ grid-template-columns:1fr; } }

.qgroup{ background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg); margin-bottom:16px; overflow:hidden; box-shadow:var(--shadow-sm); }
.qgroup-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 24px; text-align:left; }
.qgroup-title{ font-family:var(--font-head); font-size:19px; font-weight:700; color:var(--navy); }
.qgroup-sub{ font-size:13.5px; color:var(--muted); font-weight:400; margin-top:3px; font-family:var(--font-body); }
.qgroup-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.qbadge{ display:none; background:var(--gold-lt); color:var(--navy); font-family:var(--font-mono); font-size:12px; font-weight:500; padding:3px 9px; border-radius:20px; }
.qbadge.show{ display:inline-block; }
.qchev{ font-size:20px; color:var(--blue); transition:transform .2s; }
.qgroup.open .qchev{ transform:rotate(180deg); }
.qgroup-body{ display:none; padding:0 24px 24px; }
.qgroup.open .qgroup-body{ display:block; }
.qgroup.required .qgroup-title::after{ content:' *'; color:var(--red); }

.counter-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid var(--rule); }
.counter-row:first-child{ border-top:none; }
.counter-row.has-count{ background:linear-gradient(90deg,var(--blue-pale) 0%,transparent 70%); margin:0 -12px; padding-left:12px; padding-right:12px; border-radius:8px; }
.counter-info{ min-width:0; }
.counter-name{ font-size:15px; font-weight:600; color:var(--navy); }
.counter-desc{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.counter-price{ font-family:var(--font-mono); font-size:13px; color:var(--blue); margin-top:3px; }
.counter-ctrl{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.counter-btn{ width:34px; height:34px; border-radius:8px; border:1.5px solid var(--rule); font-size:19px; line-height:1; color:var(--navy); display:flex; align-items:center; justify-content:center; transition:all .12s; }
.counter-btn:hover:not(:disabled){ border-color:var(--blue); color:var(--blue); }
.counter-btn:disabled{ opacity:.32; cursor:not-allowed; }
.counter-val{ font-family:var(--font-mono); font-size:16px; font-weight:500; min-width:22px; text-align:center; }

.opt-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); padding-top:16px; }
.opt-card{ text-align:left; border:1.5px solid var(--rule); border-radius:var(--radius); padding:15px; position:relative; transition:all .13s; background:#fff; }
.opt-card:hover{ border-color:var(--blue-lt); }
.opt-card.selected{ border-color:var(--blue); background:var(--blue-pale); box-shadow:0 0 0 2px rgba(29,95,168,.14); }
.opt-card.selected::after{ content:'✓'; position:absolute; top:11px; right:13px; color:var(--blue); font-weight:700; }
.opt-name{ font-size:14px; font-weight:600; color:var(--navy); padding-right:22px; }
.opt-desc{ font-size:12px; color:var(--slate); margin-top:5px; line-height:1.45; }
.opt-price{ font-family:var(--font-mono); font-size:12.5px; font-weight:500; color:var(--gold); margin-top:7px; }
.opt-price.free{ color:var(--green); }

.qsummary{ position:sticky; top:calc(var(--nav-h) + 20px); background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }
.qsummary-head{ background:var(--navy); color:#fff; padding:20px 22px; }
.qsummary-head .lbl{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-lt); }
.qsummary-total{ font-family:var(--font-head); font-size:40px; font-weight:900; margin-top:4px; }
.qsummary-body{ padding:18px 22px; max-height:340px; overflow-y:auto; }
.qrow{ display:flex; justify-content:space-between; gap:14px; padding:8px 0; font-size:14px; border-bottom:1px dashed var(--rule); }
.qrow:last-child{ border-bottom:none; }
.qrow-name{ color:var(--slate); }
.qrow-price{ font-family:var(--font-mono); color:var(--navy); white-space:nowrap; }
.qrow-price.free{ color:var(--green); }
.qempty{ font-size:14px; color:var(--muted); text-align:center; padding:14px 0; }
.qsummary-foot{ padding:0 22px 22px; }

.mobilebar{ position:fixed; left:0; right:0; bottom:0; z-index:195; background:var(--navy); color:#fff; padding:11px 16px; display:none; align-items:center; justify-content:space-between; gap:14px; box-shadow:0 -4px 20px rgba(0,0,0,.2); }
.mobilebar .mb-lbl{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-lt); }
.mobilebar .mb-total{ font-family:var(--font-head); font-size:25px; font-weight:700; line-height:1.1; }
@media (max-width:940px){
  .qsummary{ display:none; }
  .mobilebar{ display:flex; }
  .callbar{ display:none !important; }
  body{ padding-bottom:76px; }
}

.cal-tier{ padding:14px 18px; background:var(--blue-pale); border-bottom:1px solid var(--rule); font-size:13.5px; color:var(--navy); font-weight:500; text-align:center; }
.cal-prompt{ padding:52px 28px; text-align:center; }
.cal-prompt-icon{ font-size:38px; }
.cal-prompt-title{ font-family:var(--font-head); font-size:22px; font-weight:700; color:var(--navy); margin-top:14px; }
.cal-prompt-text{ font-size:15px; color:var(--slate); margin-top:10px; max-width:420px; margin-inline:auto; }
/* Attach toggle — "is this being added to a TV mount?" */
.attach-note{ font-size:13.5px; color:var(--slate); margin-top:12px; }
.qrow.qrow-min .qrow-name{ color:var(--gold); font-weight:600; }
.qrow.qrow-min .qrow-price{ color:var(--gold); }
.qsummary-sub{ font-size:12.5px; color:rgba(255,255,255,.62); margin-top:5px; font-family:var(--font-body); }

/* SMS consent notice — shown wherever a booking form collects a mobile number.
   Carrier review for A2P 10DLC looks for this at the point of collection, not
   only buried in the terms. */
.sms-consent{
  margin-top:16px; padding:14px 18px; background:var(--off-white);
  border:1px solid var(--rule); border-radius:var(--radius);
  font-size:12.5px; line-height:1.6; color:var(--slate);
}
.sms-consent strong{ color:var(--navy); }
.sms-consent a{ color:var(--blue); font-weight:600; }

/* ---------- REVIEWS -------------------------------------------------- */
.rev-badge{
  display:inline-flex; align-items:center; gap:12px; padding:10px 20px;
  background:#fff; border:1px solid var(--rule); border-radius:40px;
  box-shadow:var(--shadow-sm); margin-bottom:8px;
}
.rev-score{ font-family:var(--font-head); font-size:26px; font-weight:700; color:var(--navy); line-height:1; }
.rev-stars{ color:var(--gold-lt); font-size:16px; letter-spacing:2px; }
.rev-count{ font-size:14px; color:var(--slate); }
.rev-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.rev-card{
  background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.rev-card .rev-stars{ margin-bottom:12px; }
.rev-quote{ font-size:15px; color:var(--text); line-height:1.65; flex:1; }
.rev-meta{ margin-top:16px; padding-top:14px; border-top:1px solid var(--rule); font-size:13.5px; color:var(--muted); }
.rev-meta strong{ color:var(--navy); font-weight:600; display:block; margin-bottom:2px; font-size:14.5px; }
.rev-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:36px; }
.rev-src{ font-size:12.5px; color:var(--muted); text-align:center; margin-top:18px; }