/* =====================================================================
   PANOPTIC INSPECTIONS — GOOGLE ADS LANDING PAGES
   ---------------------------------------------------------------------
   Brand palette sampled from panoinspect.com + the logo:
     navy #15226a (logo background reads #152169 in the JPG; the bar and
     footer use the sampled value so the logo image blends seamlessly),
     gold #fbbc2a (existing site accent), mid blue #364ea1.
   Font: Archivo (async-loaded; system sans fallback).
   WCAG AA notes:
     - gold #fbbc2a fails on white for text; use --gold-deep #8a6100
       for gold-toned text on light surfaces.
     - gold buttons carry navy text (#15226a on #fbbc2a ≈ 8.9:1).
   ===================================================================== */

:root{
  --navy: #152169;        /* brand primary (matches logo image bg) */
  --navy-2: #0d1546;      /* darker navy: footer, gradients */
  --blue: #364ea1;        /* mid blue accents */
  --gold: #fbbc2a;        /* CTA gold */
  --gold-deep: #8a6100;   /* AA-safe gold text on white */
  --ink: #1b2035;         /* body text on white */
  --mut: #4c526b;         /* muted text on white */
  --bg-soft: #f4f5fa;     /* soft section background */
  --rule: rgba(21,33,105,.12);
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --shadow-card: 0 10px 30px rgba(13,21,70,.14);
  --radius: 14px;
}

/* ============ Reset ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:#fff; line-height:1.6; font-size:17px;
  text-rendering:optimizeLegibility;
}
img,svg,picture{ display:block; max-width:100%; }
h1,h2,h3,p,ul,blockquote,figure{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }

.wrap{ max-width:1180px; margin-inline:auto; padding-inline:22px; }

/* ============ Type helpers ============ */
h1{ font-size:clamp(1.9rem, 4.4vw, 3.05rem); line-height:1.12; font-weight:800; letter-spacing:-.01em; }
h2{ font-size:clamp(1.5rem, 3vw, 2.15rem); line-height:1.18; font-weight:800; letter-spacing:-.01em; color:var(--navy); }
h3{ font-size:1.13rem; font-weight:700; }
.eyebrow{
  display:inline-block; font-size:.82rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:12px;
}
.eyebrow.on-dark{ color:var(--gold); }
.hl{ color:var(--gold); }

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:10px; border:0; cursor:pointer;
  font-weight:700; font-size:1.02rem; text-decoration:none; line-height:1.2;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn .ic{ width:20px; height:20px; flex:none; }
.btn-call{ background:var(--gold); color:var(--navy); box-shadow:0 6px 18px rgba(251,188,42,.35); }
.btn-call:hover{ background:#ffc94d; }
.btn-solid{ background:var(--navy); color:#fff; }
.btn-solid:hover{ background:var(--blue); }
.btn-ghost{ background:transparent; border:2px solid rgba(255,255,255,.55); color:#fff; }
.btn-ghost:hover{ border-color:#fff; }
.btn-sm{ padding:10px 18px; font-size:.95rem; }

.ic{ width:18px; height:18px; }

/* ============ Sticky brand bar ============ */
.lp-bar{
  position:sticky; top:0; z-index:50; background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.lp-bar.is-scrolled{ box-shadow:0 4px 18px rgba(13,21,70,.35); }
.lp-bar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-block:9px; }
.lp-bar__brand img{ width:172px; height:70px; object-fit:cover; }
.lp-bar__cta{ display:flex; align-items:center; gap:18px; }
.lp-bar__phone{ color:#fff; font-weight:700; font-size:1.06rem; text-decoration:none; }
.lp-bar__phone:hover{ color:var(--gold); }
@media (max-width:640px){
  .lp-bar__brand img{ width:132px; height:54px; }
  .lp-bar__phone{ display:none; }
}

/* ============ Hero ============ */
.hero{ position:relative; background:var(--navy-2); color:#fff; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; }
/* img is positioned directly (not just width/height:100%) because the
   <picture> wrapper has no explicit height, so a percentage height on the
   img resolves against an auto-height ancestor and collapses to the image's
   own aspect ratio instead of filling .hero__bg — leaving a gap of the
   section's background color whenever the section is taller than that
   ratio implies. */
.hero__bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(13,21,70,.93) 0%, rgba(13,21,70,.82) 45%, rgba(13,21,70,.55) 100%);
}
.hero .wrap{ position:relative; }
.hero__grid{
  display:grid; grid-template-columns:1.12fr .88fr; gap:44px;
  align-items:center; padding-block:58px 64px;
}
.hero__lede{ margin-top:16px; font-size:1.12rem; max-width:56ch; color:rgba(255,255,255,.92); }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:26px; }
.hero__callnum{ color:#fff; font-weight:800; font-size:1.28rem; text-decoration:none; }
.hero__callnum:hover{ color:var(--gold); }
.hero__callnum small{ display:block; font-size:.78rem; font-weight:600; color:rgba(255,255,255,.75); letter-spacing:.04em; }
.hero__trust{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; }
.hero__trust li{ display:flex; align-items:center; gap:8px; font-size:.95rem; font-weight:600; }
.hero__trust .ic{ color:var(--gold); flex:none; }
/* On desktop the form sits beside the copy and is already on-screen, so the
   jump-to-form button is redundant; it earns its keep only when the form is
   stacked below the fold on mobile/tablet. */
@media (min-width:961px){
  .hero__jump{ display:none; }
}
@media (max-width:960px){
  .hero__grid{ grid-template-columns:1fr; gap:34px; padding-block:44px 52px; }
}

/* ============ Form card (GHL placeholder / embed chrome) ============ */
.form-card{
  background:#fff; color:var(--ink); border-radius:var(--radius);
  box-shadow:var(--shadow-card); padding:26px 24px 24px;
  /* the sticky brand bar (~89px desktop, ~73px mobile) sits on top of the
     document flow, so an anchor jump needs this offset or its target lands
     partly hidden underneath it */
  scroll-margin-top:100px;
}
.form-card__head{ font-size:1.3rem; font-weight:800; color:var(--navy); line-height:1.25; }
.form-card__sub{ margin-top:6px; font-size:.95rem; color:var(--mut); }
/* GHL embed wrapper. When the real form lands: iframe keeps its real src,
   NO loading attribute, form_embed.js as <script defer> near end of body.
   min-height is a pre-load floor only; form_embed.js sets the real height. */
.qf-embed{ margin-top:16px; }
.qf-embed iframe{ display:block; width:100%; min-height:320px; border:0; background:transparent; }

/* Mock form (placeholder until the real GHL embed arrives) */
.mockform{ margin-top:16px; display:grid; gap:12px; }
.mockform .row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mockform label{ display:block; font-size:.86rem; font-weight:700; color:var(--navy); margin-bottom:4px; }
.mockform input, .mockform textarea{
  width:100%; padding:11px 12px; border:1.5px solid #d6d9e6; border-radius:8px;
  background:#fbfbfd; font-size:.98rem;
}
.mockform input:focus, .mockform textarea:focus{ outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue); }
.mockform textarea{ resize:vertical; min-height:74px; }
.mockform .btn{ width:100%; margin-top:2px; }
.form-card__fineprint{ margin-top:12px; font-size:.78rem; color:var(--mut); line-height:1.45; }
.form-card__fineprint a{ color:var(--blue); }
@media (max-width:480px){ .mockform .row2{ grid-template-columns:1fr; } }

/* ============ Service-area strip ============ */
.areas{ background:#fff; border-bottom:1px solid var(--rule); }
.areas .wrap{ padding-block:26px; text-align:center; }
.areas__lead{ display:block; font-weight:700; color:var(--navy); margin-bottom:12px; font-size:1.02rem; }
.areas ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; }
.areas li{
  background:var(--bg-soft); border:1px solid var(--rule); color:var(--navy);
  font-weight:600; font-size:.92rem; padding:6px 14px; border-radius:999px;
}
.areas__note{ margin-top:12px; font-size:.88rem; color:var(--mut); }

/* ============ Generic section scaffolding ============ */
.section{ padding-block:68px; }
.section-head{ max-width:720px; margin-inline:auto; text-align:center; margin-bottom:42px; }
.section-head p:not(.eyebrow){ margin-top:12px; color:var(--mut); }
@media (max-width:640px){ .section{ padding-block:52px; } }

/* ============ What's included ============ */
.included{ background:var(--bg-soft); }
.inc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.inc-card{
  background:#fff; border:1px solid var(--rule); border-radius:12px;
  padding:20px 18px; display:flex; flex-direction:column; gap:8px;
}
.inc-card .ic-badge{ width:40px; height:40px; border-radius:10px; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; }
.inc-card .ic-badge svg{ width:22px; height:22px; }
.inc-card h3{ font-size:1.02rem; color:var(--navy); }
.inc-card p{ font-size:.9rem; color:var(--mut); line-height:1.5; }
.inc-note{ margin-top:26px; text-align:center; color:var(--mut); font-size:.98rem; }
.inc-note strong{ color:var(--navy); }
@media (max-width:1024px){ .inc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){
  .inc-grid{ grid-template-columns:1fr; }
  /* single-column cards: icon beside the heading/text instead of stacked
     on top of it. Grid-placing the existing children (no markup change)
     — badge spans both text rows, heading and paragraph stack beside it. */
  .inc-card{
    display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:4px;
  }
  .inc-card .ic-badge{ grid-row:1 / 3; margin:0; }
  .inc-card h3{ grid-column:2; }
  .inc-card p{ grid-column:2; }
}

/* ============ Inspector feature ============ */
.feature .wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.feature__media{ position:relative; }
/* height:auto overrides the width/height HTML attributes' presentational
   hint (which otherwise pins height to the attribute's raw pixel value),
   so the photo scales proportionally instead of stretching to fit. */
.feature__photo img{ border-radius:var(--radius); box-shadow:var(--shadow-card); width:100%; height:auto; }
/* Badge selector carries the extra class so it beats the photo rule above. */
img.feature__badge{
  position:absolute; right:-18px; bottom:-26px; width:132px; height:auto;
  filter:drop-shadow(0 6px 14px rgba(13,21,70,.25));
}
.feature__body p{ margin-top:14px; color:var(--mut); }
.feature__body .btn{ margin-top:22px; }
.feature__creds{ margin-top:18px; display:grid; gap:9px; }
.feature__creds li{ display:flex; align-items:flex-start; gap:10px; font-size:.97rem; font-weight:600; color:var(--ink); }
.feature__creds .ic{ color:var(--gold-deep); margin-top:4px; flex:none; }
@media (max-width:900px){
  .feature .wrap{ grid-template-columns:1fr; gap:40px; }
  .feature__media{ max-width:440px; }
}

/* ============ Why band (navy) ============ */
.why{ background:linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color:#fff; }
.why h2{ color:#fff; }
.why .section-head p:not(.eyebrow){ color:rgba(255,255,255,.85); }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.why-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:24px 20px;
}
.why-card .ic-badge{
  width:44px; height:44px; border-radius:10px; background:var(--gold); color:var(--navy);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.why-card .ic-badge svg{ width:24px; height:24px; }
.why-card h3{ color:#fff; }
.why-card p{ margin-top:8px; font-size:.93rem; color:rgba(255,255,255,.85); line-height:1.55; }
@media (max-width:1024px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){
  .why-grid{ grid-template-columns:1fr; }
  /* same icon-beside-text treatment as .inc-card at this breakpoint */
  .why-card{
    display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:4px;
  }
  .why-card .ic-badge{ grid-row:1 / 3; margin:0; }
  .why-card h3{ grid-column:2; }
  .why-card p{ grid-column:2; margin-top:0; }
}

/* ============ Reviews ============ */
.reviews{ background:#fff; }
.reviews__rating{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:34px; font-size:1.02rem; color:var(--ink);
}
.reviews__rating .stars{ color:var(--gold); font-size:1.25rem; letter-spacing:2px; }
.rev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.rev-card{
  background:var(--bg-soft); border:1px solid var(--rule); border-radius:12px;
  padding:24px 22px; display:flex; flex-direction:column; gap:12px;
}
.rev-card .stars{ color:var(--gold); font-size:1.05rem; letter-spacing:2px; }
.rev-card blockquote{ font-size:.97rem; color:var(--ink); line-height:1.55; flex:1; }
.rev-card cite{ font-style:normal; font-weight:700; color:var(--navy); font-size:.92rem; }
@media (max-width:900px){ .rev-grid{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; } }

/* ============ How it works ============ */
.how{ background:var(--bg-soft); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step{ background:#fff; border:1px solid var(--rule); border-radius:12px; padding:26px 22px; text-align:center; }
.step__n{
  width:46px; height:46px; margin:0 auto 14px; border-radius:50%;
  background:var(--navy); color:var(--gold); font-weight:800; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
}
.step h3{ color:var(--navy); }
.step p{ margin-top:8px; font-size:.93rem; color:var(--mut); line-height:1.55; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }

/* ============ Final CTA band ============ */
.book{ position:relative; color:#fff; overflow:hidden; background:var(--navy-2); }
.book__bg{ position:absolute; inset:0; }
.book__bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.book__bg::after{ content:""; position:absolute; inset:0; background:rgba(13,21,70,.88); }
.book .wrap{ position:relative; padding-block:72px; text-align:center; }
.book h2{ color:#fff; }
.book p{ margin-top:14px; color:rgba(255,255,255,.88); max-width:52ch; margin-inline:auto; }
.book__cta{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px; margin-top:28px; }
.book__hours{ margin-top:18px; font-size:.92rem; color:rgba(255,255,255,.75); }

/* ============ Footer ============ */
.foot{ background:var(--navy); color:rgba(255,255,255,.85); }
.foot .wrap{ padding-block:44px 26px; }
.foot__grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; align-items:flex-start; }
.foot__brand img{ width:196px; height:80px; object-fit:cover; }
.foot__brand .tag{ margin-top:10px; font-size:.9rem; color:rgba(255,255,255,.7); max-width:34ch; }
.foot__col h3{ color:#fff; font-size:1rem; margin-bottom:10px; }
.foot__col{ font-size:.95rem; line-height:1.9; }
.foot__col a{ color:#fff; font-weight:700; text-decoration:none; }
.foot__col a:hover{ color:var(--gold); }
.foot__bottom{
  margin-top:36px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:.85rem; color:rgba(255,255,255,.65);
}
.foot__bottom a{ color:rgba(255,255,255,.85); }
.foot__bottom a:hover{ color:var(--gold); }

/* ============ 404 / utility page ============ */
.uty{ min-height:100vh; display:flex; flex-direction:column; }
.uty main{ flex:1; display:flex; align-items:center; }
.uty__inner{ text-align:center; max-width:620px; margin-inline:auto; padding-block:70px; }