/* ============================================================
   Fayetteville AR Spray Foam — static site styles
   Trade Star Local city-site kit (Cleveland master → re-skinned).
   Palette: "Ozark Forest" — deep forest green + warm amber on oatmeal.
   Approved July 2026. Palm Desert / Cleveland masters preserved separately.
   ============================================================ */
:root{
  /* ============================================================
     SITE THEME — swap THIS block per city to re-skin everything.
     (Fayetteville = "Ozark Forest": forest green + warm amber on oatmeal.)
     ============================================================ */
  /* Brand roles */
  --accent:#C2761F;       /* warm amber — highlights, section headings */
  --cta:#2F6B43;          /* forest green — primary buttons */
  --cta-deep:#245435;     /* button hover */
  --link:#2F6B43;         /* in-card arrow links */
  --hot:#E8901F;          /* bright amber — inline text highlights + CTA band */
  /* Surfaces */
  --ink:#1C221C;          /* body text */
  --ink-soft:#5C6559;     /* muted text */
  --paper:#F2EFE6;        /* oatmeal — light section bg */
  --paper-2:#E8E4D7;      /* alt light bg */
  --line:#D6D1C0;         /* hairline on paper */
  --shell:#17201A;        /* green-black — dark base / header */
  --footer:#101711;
  --white:#FFFFFF;
  /* Signature backgrounds — the "mood" (wooded Ozark ridge) */
  --bg-dark:radial-gradient(120% 120% at 16% 88%,#6FA36A 0%,#3E7A4A 22%,#26492F 52%,#141A16 84%);
  --bg-benefits:radial-gradient(120% 120% at 18% 90%,#E3B24C 0%,#B8862A 20%,#4E7238 48%,#1A2418 84%); /* "Ridge Light" — amber sun into forest */
  --bg-services:radial-gradient(1100px 720px at 82% -8%,rgba(111,163,106,.20),rgba(62,122,74,.09) 38%,transparent 64%),var(--shell); /* motif removed per Dan */
  --bg-feature:linear-gradient(158deg,rgba(143,190,114,.30) 0%,rgba(30,62,38,.62) 100%),radial-gradient(120% 140% at 0% 0%,#6FA36A,#26492F); /* FAQ panel, hero/footer greens */
  --bg-footer:radial-gradient(145% 170% at 100% 100%,#8FBE72 0%,#3E7A4A 18%,#26492F 42%,#16231A 66%,#0D120E 100%);
  --card-glass:linear-gradient(180deg,rgba(46,74,50,.48),rgba(22,38,26,.62));
  --card-glass-border:rgba(178,208,178,.22);
  /* themed accents that used to be hardcoded (additive — keeps the engine clean) */
  --feature-shadow:0 22px 46px rgba(24,56,32,.38);   /* under the FAQ feature panel */
  --slot-note:#E9C68A;                                /* form-embed slot note text */
  --slot-note-border:rgba(233,198,138,.5);
  --req:#E8901F;                                      /* required-field asterisk */
  --benefits-glass:linear-gradient(180deg,rgba(46,74,50,.50),rgba(24,40,26,.64));
  --benefits-glass-border:rgba(214,206,150,.24);
  --faq-grad-a:linear-gradient(158deg,#F0D6A6 0%,#DFAE60 52%,#C2761F 84%,#A86414 100%);
  --faq-grad-b:linear-gradient(202deg,#EBC98F 0%,#D69B45 50%,#B76D1B 86%,#9C5A10 100%);
  /* back-compat aliases (existing rules read these) */
  --orange:var(--accent);
  --amber:var(--cta);
  --amber-deep:var(--cta-deep);
  --blue:#5E8F6A;
  --blue-deep:#2F6B43;
  --shell-2:#1E2A21;
  --shell-3:#26332A;

  /* Fonts */
  --f-head:'Archivo',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-mono:'Space Mono',ui-monospace,monospace;

  /* Layout */
  --wrap:1200px;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.10);
  --shadow-soft:0 6px 18px rgba(0,0,0,.08);

  /* Signature background gradients (recreated from blu-bkgrd / orange-left) */
  --grad-dark:linear-gradient(118deg,#0B1114 0%,#0E1B22 32%,#1B5B7E 74%,#3E97C2 100%);
  --grad-orange:linear-gradient(158deg,#FF8A2E 0%,#EA6200 55%,#C24E00 100%);
  --grad-copyright:linear-gradient(90deg,#0A0F12 0%,#154C68 55%,#2E86B0 100%);
}

*,*::before,*::after{box-sizing:border-box;}
/* <picture> must not become the flex/grid item — keeps .svc-photo et al. sizing correctly */
picture{display:contents;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* gray photo placeholders (pre-Midjourney; swap each .ph div for a real <img> later) */
.ph{
  background:repeating-linear-gradient(45deg,#c8c3b9,#c8c3b9 14px,#bfbaAF 14px,#bfbaaf 28px);
  border:1px dashed rgba(0,0,0,.30);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#4a453c;font-family:var(--f-mono);font-size:.72rem;line-height:1.5;
  letter-spacing:.06em;text-transform:uppercase;padding:14px;
}

/* --- shared helpers --- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:var(--f-mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--orange);
  margin:0 0 .5rem;
}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;line-height:1.12;margin:0 0 .5em;}
p{margin:0 0 1rem;}
.section{padding:84px 0;}
.section-head{max-width:820px;margin:0 auto 48px;text-align:center;}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.2rem);color:var(--orange);}
.section--dark{background:var(--shell);color:#e7edf1;}
.section--dark h2{color:var(--orange);}
.section--paper{background:var(--paper);}

/* --- buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font-family:var(--f-body);font-weight:600;font-size:1.05rem;
  padding:14px 28px;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  line-height:1.1;
}
.btn--amber{background:var(--amber);color:#fff;border-color:rgba(244,242,236,.85);box-shadow:0 6px 16px rgba(18,144,138,.34);}
.btn--amber:hover{background:var(--amber-deep);transform:translateY(-1px);}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.btn--ghost:hover{background:rgba(255,255,255,.12);}
.btn--sm{font-size:.95rem;padding:10px 22px;}
.link-arrow{
  display:inline-block;margin-top:auto;font-weight:600;color:var(--link);
  text-decoration:none;font-size:.98rem;
}
.link-arrow:hover{text-decoration:underline;}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--shell);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{display:flex;align-items:center;gap:24px;padding:12px 24px;max-width:1320px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;}
.brand img{height:auto;width:auto;max-height:44px;max-width:100%;}
.brand .brand-txt{display:flex;flex-direction:column;line-height:1.05;}
.brand .brand-name{font-family:var(--f-head);font-weight:700;color:#fff;font-size:1.18rem;}
.brand .brand-tag{font-size:.66rem;color:#9fb0bb;letter-spacing:.01em;}

.main-nav{display:flex;align-items:center;gap:4px;}
.main-nav > ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.main-nav a{color:#eef3f6;text-decoration:none;font-weight:500;font-size:.98rem;padding:10px 14px;border-radius:8px;display:inline-block;transition:color .15s,background .15s;}
.main-nav a:hover{color:var(--orange);}
.has-dropdown{position:relative;}
.has-dropdown > a::after{content:"▾";font-size:.7em;margin-left:.35em;opacity:.7;}
.dropdown{
  position:absolute;top:calc(100% + 6px);left:0;min-width:270px;
  background:#fff;border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.28);
  padding:8px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s ease;
}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{color:var(--ink);font-size:.92rem;padding:9px 12px;border-radius:7px;}
.dropdown a:hover{background:var(--paper);color:var(--amber);}
.header-cta{margin-left:8px;white-space:nowrap;}

/* mobile nav toggle */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto;}
.nav-toggle span{display:block;width:26px;height:3px;background:#fff;border-radius:3px;margin:5px 0;transition:.2s;}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--bg-dark);color:#fff;padding:76px 0 88px;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:56px;align-items:center;}
.hero-img{border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.4);width:100%;aspect-ratio:3/4;object-fit:cover;}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.75rem);margin-bottom:.35em;}
.hero h1 .hl{color:var(--hot);}
.hero .lede{font-size:1.15rem;color:#d5e2ea;max-width:44ch;margin-bottom:2rem;}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;}

/* ============================================================
   SERVICES
   ============================================================ */
.services{background:var(--bg-services);}
.services .section-head h2{color:var(--orange);}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.svc-card{
  display:flex;background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);min-height:260px;
}
.svc-card .svc-body{flex:1 1 50%;min-width:0;display:flex;flex-direction:column;padding:28px 26px;}
.svc-card h3{font-size:1.32rem;color:#0b0f12;}
.svc-card p{color:#465059;font-size:.96rem;}
.svc-card .svc-photo{flex:0 0 50%;min-width:0;width:50%;object-fit:cover;height:auto;align-self:stretch;}
.svc-card .link-arrow{display:block;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);}
/* whole-house / one-estimate text card (no photo — matches live white card) */
.svc-card--feature{background:#fff;border-left:5px solid var(--amber);}
.svc-card--feature .svc-body{padding:30px 30px;}
.svc-card--feature h3{color:#0b0f12;font-size:1.45rem;}
.svc-card--feature p{color:#465059;}
.svc-card--feature .link-arrow{color:var(--link);}

/* ============================================================
   HOUSING STOCK (prose + image)
   ============================================================ */
.split{display:grid;grid-template-columns:1fr minmax(0,420px);gap:56px;align-items:start;}
.prose h2{color:var(--orange);font-size:clamp(1.6rem,3vw,2.05rem);}
.prose p{color:#2c343a;}
.prose strong{color:var(--ink);}
.prose ul{margin:1rem 0 1.25rem;padding-left:1.1rem;}
.prose li{margin:.5rem 0;color:#2c343a;}
.framed{border-radius:16px;box-shadow:var(--shadow);background:#fff;padding:10px;}
.framed img{border-radius:10px;width:100%;}

/* ============================================================
   AIR LEAKS / BENEFITS (dark)
   ============================================================ */
.benefits{background:var(--bg-benefits);color:#eaf1f5;
  --card-glass:var(--benefits-glass);
  --card-glass-border:var(--benefits-glass-border);}
.benefits .section-head h2{color:#fff;}
/* benefits intro: left-aligned, full-width, with orange highlight (matches reference) */
.benefits-head{margin:0 0 46px;}
.benefits-head h2{color:#fff;font-family:var(--f-head);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.4rem);line-height:1.2;margin-bottom:.5em;}
.benefits-head p{color:#c8d7e0;font-family:var(--f-head);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;letter-spacing:0.4px;max-width:1000px;margin:0;}
.hl-o{color:var(--hot);font-weight:700;}
.benefits-grid{display:grid;grid-template-columns:2.35fr 1fr;gap:22px;align-items:stretch;}
.benefit-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.benefit-card{
  display:flex;flex-direction:column;justify-content:center;
  background:var(--card-glass);border:1px solid var(--card-glass-border);
  border-radius:12px;padding:20px 20px;backdrop-filter:blur(2px);
}
.benefit-card .eyebrow{color:#E8B06A;margin-bottom:.35rem;} /* sunset gold, matches thermal-section mood */
.benefit-card h3{color:#fff;font-size:1.18rem;margin-bottom:.4rem;}
.benefit-card p{color:#b9c8d1;font-size:.94rem;margin:0;}
.benefit-media{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:16px;min-height:0;}
.benefit-media img{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:12px;}

/* ============================================================
   PROCESS
   ============================================================ */
.process{background:var(--paper-2);}
.process .section-head h2{color:var(--orange);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.step{background:#fff;border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow-soft);border:1px solid var(--line);}
.step .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--amber);color:#fff;
  font-family:var(--f-head);font-weight:700;font-size:1.15rem;margin-bottom:14px;
}
.step h3{font-size:1.16rem;color:#0b0f12;}
.step p{color:#465059;font-size:.94rem;margin:0;}

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:40px;align-items:start;}
.faq-intro{background:var(--bg-feature);color:#fff;border-radius:18px;padding:44px 36px;box-shadow:var(--feature-shadow);position:sticky;top:100px;}
.faq-intro h2{color:#fff;font-size:1.7rem;}
.faq-intro p{color:rgba(255,255,255,.92);margin-bottom:1.5rem;}
.faq-list{display:flex;flex-direction:column;gap:16px;}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-soft);overflow:hidden;}
.faq-item summary{
  list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--f-head);font-weight:700;
  font-size:1.08rem;color:#0b0f12;display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";color:var(--amber);font-size:1.5rem;font-weight:700;line-height:1;transition:transform .2s;}
.faq-item[open] summary::after{content:"–";}
.faq-item .faq-a{padding:0 24px 22px;color:#3a434a;}
.faq-item .faq-a p{margin:0;}

/* ============================================================
   ESTIMATE FORM (dark)
   ============================================================ */
.estimate{background:var(--bg-dark);color:#fff;}
/* Even split: bigger photo left, heading+lede stacked ON TOP of the form (right),
   top-aligned so there's no centered negative-area gap. Global — used on ~80% of pages. */
.estimate-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:52px;align-items:start;}
.estimate h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.3rem);}
.estimate .lede{color:#d5e2ea;font-size:1.08rem;max-width:46ch;}
.estimate-img{border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.4);max-width:100%;}
.estimate-photo .estimate-img{margin-top:0;width:100%;max-width:100%;}
.estimate-right h2{margin-bottom:.4em;}
.estimate-right .lede{margin-bottom:22px;}

/* the styled placeholder form */
.form-card{background:rgba(6,12,16,.55);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px;backdrop-filter:blur(2px);}
.form-card .form-embed-slot iframe{display:block;width:100%;}
/* When a live embed (iframe) is in the slot, drop the dark card entirely —
   the embedded form carries its own container, so no box or padding around it. */
.form-card:has(iframe){background:none;border:0;border-radius:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;}
/* Desktop 2-col: the Lead Simplify embed has its own internal left padding we can't
   reach (cross-origin), so instead of moving the form we shift the heading + lede RIGHT
   until the copy's left edge lines up with the form's fields. Tune --est-copy-shift. */
:root{ --est-copy-shift:40px; }
@media(min-width:821px){ .estimate-right:has(iframe) h2, .estimate-right:has(iframe) .lede{ margin-left:var(--est-copy-shift); } }
/* Single-column (tablet + mobile): full-bleed the embed to the section edges; copy stays
   at the gutter where it already lines up with the form. */
@media(max-width:820px){ .estimate .form-card:has(iframe){margin-left:-24px;margin-right:-24px;} }
@media(max-width:640px){ .form-card{padding:6px;border-radius:14px;} }
.form-embed-slot{position:relative;}
.slot-note{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slot-note);border:1px dashed var(--slot-note-border);border-radius:8px;
  padding:8px 12px;margin-bottom:18px;
}
.field{margin-bottom:16px;}
.field label{display:block;font-size:.86rem;font-weight:600;margin-bottom:6px;color:#cfe0e9;}
.field label .req{color:var(--req);}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:1rem;color:#eef4f7;
  background:rgba(4,10,14,.7);border:1px solid rgba(255,255,255,.18);border-radius:9px;
  padding:12px 14px;
}
.field textarea{min-height:110px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:#7d8b94;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-card .btn{width:100%;margin-top:6px;}

/* ============================================================
   PRE-FOOTER CTA
   ============================================================ */
.cta-band{background:var(--hot);color:#121212;padding:34px 0;}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px 36px;flex-wrap:nowrap;}
.cta-band .btn{flex:none;}
@media(max-width:640px){.cta-band .wrap{flex-wrap:wrap;}}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.1rem);color:#121212;margin:0;min-width:0;}
.cta-band .btn{flex:none;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--bg-footer);
  color:#c4d0d7;border-top:3px solid var(--hot);padding:54px 0 0;
}
.footer-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:48px;padding-bottom:46px;}
.footer-brand img{height:auto;width:auto;max-height:80px;max-width:100%;margin-bottom:24px;}
.footer-brand p{color:#c6d4de;font-size:.95rem;line-height:1.65;max-width:62ch;margin:0;}
.footer-brand p strong{color:var(--hot);font-weight:700;}
.footer-col ul{list-style:none;margin:0 0 28px;padding:0;}
.footer-col li{margin:.6rem 0;}
.footer-col a{color:#d0dbe2;text-decoration:none;font-size:1rem;}
.footer-col a:hover{color:var(--orange);}
.footer-btns{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.footer-copy{color:#bcc9d2;font-size:.85rem;}
.footer-copy .wrap{border-top:1px solid rgba(255,255,255,.14);text-align:left;padding:18px 24px 26px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:36px;}
  .hero-img{max-width:420px;margin:0 auto;order:2;}
  .benefits-grid{grid-template-columns:1fr;}
  .benefit-media{grid-template-rows:none;grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .estimate-grid{grid-template-columns:1fr;gap:32px;}
  .faq-grid{grid-template-columns:1fr;}
  .faq-intro{position:static;}
}
@media(max-width:860px){
  .nav-toggle{display:block;}
  .main-nav{
    position:absolute;top:100%;left:0;right:0;background:var(--shell);
    flex-direction:column;align-items:stretch;padding:10px 16px 20px;gap:0;
    border-bottom:1px solid rgba(255,255,255,.08);display:none;
  }
  .main-nav.open{display:flex;}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:0;}
  .main-nav a{padding:12px 8px;border-radius:6px;}
  .has-dropdown > a::after{float:right;}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;padding:0 0 6px 14px;display:none;}
  .has-dropdown.open .dropdown{display:block;}
  .dropdown a{color:#c4d0d7;}
  .dropdown a:hover{background:transparent;color:var(--orange);}
  .header-cta{display:none;}
}
@media(max-width:720px){
  .section{padding:60px 0;}
  .svc-grid{grid-template-columns:1fr;}
  .svc-card{flex-direction:column-reverse;}
  .svc-card .svc-photo{flex:none;width:100%;height:auto;aspect-ratio:3/2;}
  .svc-card .svc-body{flex:none;padding:26px 24px 30px;}
  .split{grid-template-columns:1fr;gap:32px;}
  .framed{max-width:460px;}
  .steps{grid-template-columns:1fr;}
  .benefit-cards{grid-template-columns:1fr;}
  .benefit-media{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  .hero h1{font-size:2.1rem;}
}
@media(max-width:480px){
  .svc-card .svc-photo{aspect-ratio:16/10;}
}

/* ============================================================
   SERVICE PAGE COMPONENTS  (kit; used by service-page-template.html)
   New selectors are global-safe. .page-service-scoped rules below
   adjust shared components without affecting the locked homepage.
   ============================================================ */
/* ============================================================
   SERVICE PAGE — components (merge into shared styles.css for the kit)
   ============================================================ */
/* text-only hero with the page's bottom photo ghosted over the gradient */
.svc-hero{position:relative;background:var(--bg-dark);color:#fff;padding:66px 0 74px;overflow:hidden;}
.svc-hero::before{content:"";position:absolute;inset:0;
  background-image:var(--hero-photo,none);background-size:cover;
  background-position:var(--hero-photo-pos,center);
  opacity:.20;mix-blend-mode:soft-light;pointer-events:none;}
.svc-hero .wrap{position:relative;z-index:1;}
.svc-hero h1{font-size:clamp(2.15rem,4.7vw,3.3rem);line-height:1.12;margin-bottom:.5em;}
.svc-hero h1 .hl{color:var(--hot);}
.svc-hero .lede{font-size:clamp(1.14rem,1.55vw,1.32rem);line-height:1.5;color:#d7e3eb;max-width:none;margin:0;}

/* dark sub-CTA strip under the hero */
.subcta{background:var(--shell);padding:38px 0;border-top:2px solid var(--accent);border-bottom:1px solid rgba(255,255,255,.05);}
.subcta .wrap{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}

/* long-form article column */
.article{background:var(--paper);padding:74px 0;}
.article .col{max-width:840px;margin:0 auto;}
.article-img{width:100%;aspect-ratio:16/7;border-radius:14px;box-shadow:var(--shadow);margin-bottom:40px;object-fit:cover;}
.article h2{color:var(--ink);font-size:clamp(1.5rem,2.7vw,1.95rem);margin-bottom:.6em;}
.article p{color:#2c343a;margin-bottom:1.1rem;}
.article p strong{color:var(--ink);}
.article .brandlink{color:var(--link);font-weight:600;}
.article-list{list-style:none;margin:1.2rem 0 1.6rem;padding:0;}
.article-list li{position:relative;padding-left:24px;margin:.72rem 0;color:#2c343a;}
.article-list li::before{content:"•";position:absolute;left:4px;top:-2px;color:var(--accent);font-size:1.3em;line-height:1;}
.article-list strong{color:var(--ink);}
.article h3{font-size:1.06rem;color:var(--ink);margin:1.7rem 0 .5rem;}

/* "signs you need it" checklist on an orange fade */
.signs{background:var(--signs-bg,var(--paper));padding:66px 0;}
.signs .section-head h2{color:var(--ink);}
.signs-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.sign{background:#fff;border-radius:10px;padding:15px 20px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow-soft);color:#2c343a;font-size:.98rem;}
.sign::before{content:"✓";color:var(--accent);font-weight:800;flex:none;}

/* two-column "what it costs you" with dark numbered card */
.costs{background:var(--paper);padding:74px 0;}
.costs-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:start;}
.costs h2{color:var(--ink);font-size:clamp(1.5rem,2.7vw,1.95rem);margin-bottom:.6em;}
.costs p{color:#2c343a;margin-bottom:1.1rem;}
.costs-card{background:var(--shell);color:#dfe7ec;border-radius:16px;padding:30px 32px;box-shadow:var(--shadow);}
.costs-card h3{color:#fff;font-size:1.15rem;margin-bottom:1rem;}
.costs-card ol{list-style:none;counter-reset:c;margin:0;padding:0;}
.costs-card li{counter-increment:c;display:flex;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid rgba(255,255,255,.09);color:#c4d0d7;font-size:.96rem;}
.costs-card li:first-child{border-top:0;padding-top:0;}
.costs-card li::before{content:counter(c,decimal-leading-zero);color:var(--accent);font-family:var(--f-mono);font-weight:700;font-size:.92em;flex:none;}

/* full-width FAQ (single centered column) */
.faq-section{background:var(--faq-bg,var(--paper));padding:74px 0;}
.faq-section .section-head h2{color:var(--ink);}
.faq-solo{max-width:none;}

@media(max-width:820px){
  .signs-grid{grid-template-columns:1fr;}
  .costs-grid{grid-template-columns:1fr;gap:30px;}
}

/* ---- Sliding FAQ accordion — GLOBAL (every .faq-item on every page) ----
   Requires each answer wrapped as .faq-a > .faq-a-in > p, and the expand/collapse
   JS in each page's footer script (native <details> toggle only animates in the
   newest Chromium; the JS drives the grid-rows slide in all browsers). */
.faq-item .faq-a{display:grid;grid-template-rows:0fr;padding:0;
  transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1);}
.faq-item[open] .faq-a{grid-template-rows:1fr;}
.faq-item .faq-a-in{overflow:hidden;min-height:0;}
.faq-item .faq-a-in > p{margin:0;padding:2px 24px 22px;}
/* estimate layout is now global (see ESTIMATE FORM block above; mobile stack handled
   by the existing max-width:820px block); no per-page override needed. */

/* ============================================================
   LOCATION PAGE COMPONENTS  (kit; used by location-page-template.html)
   New selectors, global-safe. Theme-matched (re-skins per city).
   ============================================================ */
/* full-bleed photo hero with a theme-dark translucent panel */
.loc-hero{position:relative;min-height:clamp(440px,48vw,580px);display:flex;align-items:center;
  background:var(--loc-hero-photo,linear-gradient(120deg,#0B1114,#12303f)) center/cover no-repeat;
  color:#fff;padding:52px 0;overflow:hidden;}
.loc-hero::before{content:none;}  /* bright photo, no dark overlay — the translucent text block carries legibility */
.loc-hero .wrap{position:relative;z-index:1;}
.loc-panel{max-width:none;text-align:center;
  background:var(--loc-panel-bg,rgba(14,20,23,.66));border:1px solid rgba(150,200,232,.20);
  border-radius:0;padding:clamp(30px,4vw,46px) clamp(28px,5vw,64px);}
.loc-hero h1{margin:0;color:#fff;font-weight:300;font-size:min(66px,10vw);line-height:1.16;}

/* boxed map + mono city caption on the light article background */
.loc-map{background:var(--paper);padding:6px 0 78px;}
.loc-map .map-frame{max-width:840px;margin:0 auto;border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);aspect-ratio:16/9;background:var(--paper-2);}
.loc-map iframe{width:100%;height:100%;border:0;display:block;}
.loc-map .map-caption{text-align:center;margin:18px 0 0;font-family:var(--f-head);font-weight:500;
  font-size:20pt;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);}

/* ============================================================
   ABOUT PAGE COMPONENTS  (kit; used by about-page-template.html)
   Two-column: long article (left) + form & map sidebar (right).
   ============================================================ */
.about-wrap{background:var(--paper);}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:56px;align-items:start;}
.about-main h2{color:var(--ink);font-size:clamp(1.4rem,2.4vw,1.8rem);margin:2.2rem 0 .7em;}
.about-main h2:first-child{margin-top:0;}
.about-main p{color:#2c343a;margin-bottom:1.1rem;}
.about-main p strong{color:var(--ink);}
.about-main .brandlink{color:var(--link);font-weight:600;}
.about-main .article-list{margin:1rem 0 1.4rem;}
.about-main .link-list li{margin:.5rem 0;}

/* in-article center photo (4:3) */
.about-figure{margin:30px 0 34px;width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);background:var(--paper-2) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;color:#5a636d;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;}
.about-figure img{width:100%;height:100%;object-fit:cover;display:block;}

/* sidebar */
.about-aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:26px;}
.about-aside > h2{color:var(--ink);font-size:clamp(1.4rem,2.2vw,1.7rem);margin:0;}

/* form re-styled for a light sidebar: transparent card, dark inputs */
.page-about .about-aside .form-card{background:transparent;border:0;border-radius:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;}
.page-about .about-aside .form-embed-slot{border:0;padding:0;}
.page-about .about-aside .slot-note{display:none;}
.page-about .about-aside .form-row{display:flex;flex-direction:column;gap:0;}
.page-about .about-aside label{color:var(--ink);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;font-weight:600;}
.page-about .about-aside .field{margin-bottom:14px;}
.page-about .about-aside input,.page-about .about-aside select,.page-about .about-aside textarea{
  background:var(--shell);color:#fff;border:1px solid #23303a;border-radius:8px;width:100%;}
.page-about .about-aside input::placeholder,.page-about .about-aside textarea::placeholder{color:#8a97a1;}
.page-about .about-aside .req{color:var(--accent);}

/* sidebar map + small caption */
.aside-map{margin-top:23px;}
.aside-map-frame{width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-soft);background:var(--paper-2);}
.aside-map-frame iframe{width:100%;height:100%;border:0;display:block;}
.aside-map-cap{text-align:center;margin:16px 0 0;font-family:var(--f-head);font-weight:500;
  font-size:20pt;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);}

@media(max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:40px;}
  .about-aside{position:static;}
}

/* ============================================================
   FAQ PAGE COMPONENTS  (kit; used by faq-page-template.html)
   Photo hero + intro, then topic sections over one orange gradation.
   ============================================================ */
.faq-page-intro{background:var(--paper);padding:64px 0 72px;}
.faq-page-intro .wrap{max-width:760px;text-align:center;}
.faq-page-intro p{color:#2c343a;font-size:1.06rem;margin:0;}
.faq-page-intro .brandlink{color:var(--link);font-weight:600;}

/* one continuous orange gradation behind all topic sections */
.faq-groups{background:var(--paper);}
.faq-group{padding:92px 0 94px;
  /* full-bleed, UNEVEN diagonal orange: light top -> deep bottom.
     Section ends deep at the bottom edge and the next starts light,
     so every boundary is a sharp line. Angle alternates for variety. */
  background:var(--faq-grad-a);}
.faq-group:nth-child(even){
  background:var(--faq-grad-b);}
.page-faq .section-head{margin-bottom:34px;}
.page-faq .section-head h2{color:var(--ink);}   /* dark heading reads on the orange */
.faq-group-photo{max-width:900px;margin:0 auto 40px;width:100%;aspect-ratio:4/1;border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow);background:var(--paper-2) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;color:#5a636d;font-family:var(--f-mono);
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;text-align:center;}
.faq-group-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.page-faq .faq-list{max-width:none;margin:0 auto;}

/* closing block on paper */
.faq-closing{background:var(--paper);padding:64px 0 72px;}
.faq-closing .wrap{max-width:760px;text-align:center;}
.faq-closing h2{color:var(--ink);font-size:clamp(1.5rem,2.6vw,1.95rem);margin:0 0 .6em;}
.faq-closing p{color:#2c343a;margin:0;}

/* ============================================================
   CONTACT PAGE COMPONENTS  (kit; used by contact-page-template.html)
   Darkened photo hero, then map + estimate-form, then services grid.
   ============================================================ */
.contact-hero{position:relative;min-height:clamp(320px,36vw,440px);display:flex;align-items:center;
  background:var(--contact-hero-photo,#0C1418) center/cover no-repeat;color:#fff;text-align:center;padding:60px 0;overflow:hidden;}
.contact-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,14,18,.52),rgba(8,14,18,.34) 46%,rgba(8,14,18,.66));}
.contact-hero .wrap{position:relative;z-index:1;max-width:880px;}
.contact-hero h1{color:#fff;font-weight:500;font-size:clamp(2.3rem,4.6vw,3.3rem);margin:0 0 .4em;}
.contact-hero .lede{color:#e7edf1;font-size:1.14rem;line-height:1.6;max-width:740px;margin:0 auto;}

/* map + form */
.contact-main{background:var(--paper-2);padding:74px 0 82px;}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);gap:50px;align-items:start;}
.contact-map-frame{width:100%;aspect-ratio:5/4;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);background:var(--paper);}
.contact-map-frame iframe{width:100%;height:100%;border:0;display:block;}
.contact-map-cap{text-align:center;margin:18px 0 0;font-family:var(--f-head);font-weight:500;
  font-size:20pt;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);}

.contact-form-card{background:#fff;border:2px solid var(--cta);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);}
.contact-form-card .form-head{background:var(--cta);color:#fff;text-align:center;padding:20px 24px;
  font-family:var(--f-head);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.3rem;}
.contact-form-card .form-body{padding:30px 28px 34px;}
/* Real iframe present: drop the card entirely — no title band, no border, no
   background, no padding — so the embed sits flush in the grid cell edge to edge,
   matching the sibling Palm Desert site's contact page (it carries its own internal
   design already; nothing to wrap it in on our side). */
.contact-form-card:has(iframe){background:none;border:0;border-radius:0;box-shadow:none;}
.contact-form-card:has(iframe) .form-head{display:none;}
.contact-form-card:has(iframe) .form-body{padding:0;}
.contact-form-card .form-embed-slot iframe{display:block;}
.contact-form-card .slot-note{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--cta-deep);background:#F1F6EF;border:1px dashed var(--cta);border-radius:8px;padding:9px 12px;margin-bottom:18px;}
.page-contact .contact-form-card .field{margin-bottom:16px;}
.page-contact .contact-form-card label{display:block;color:var(--ink);font-weight:600;font-size:.8rem;margin-bottom:6px;}
.page-contact .contact-form-card input,
.page-contact .contact-form-card select,
.page-contact .contact-form-card textarea{width:100%;background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:11px 13px;color:var(--ink);font:inherit;}
.page-contact .contact-form-card textarea{min-height:92px;resize:vertical;}
.page-contact .contact-form-card .req{color:var(--accent);}
.page-contact .contact-form-card .form-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.page-contact .contact-form-card .btn{width:100%;margin-top:8px;}

/* our services grid */
.our-services{background:var(--white);padding:74px 0 86px;}
.our-services .section-head h2{color:var(--ink);}
.services-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.services-grid a{padding:16px 24px;color:var(--link);font-weight:500;text-decoration:none;background:#fff;
  border-bottom:1px solid var(--line);}
.services-grid a:nth-child(odd){border-right:1px solid var(--line);}
.services-grid a:nth-child(4n+3),.services-grid a:nth-child(4n+4){background:var(--paper);}
.services-grid a:hover{color:var(--cta-deep);text-decoration:underline;}

@media(max-width:860px){
  .contact-grid{grid-template-columns:1fr;gap:38px;}
}
@media(max-width:560px){
  .services-grid{grid-template-columns:1fr;}
  .services-grid a{border-right:0;}
  .page-contact .contact-form-card .form-row2{grid-template-columns:1fr;gap:0;}
}

/* ============================================================
   LEGAL PAGES  (Privacy Policy, Terms and Conditions)
   Plain title block, then a single readable column reusing .article.
   ============================================================ */
.legal-hero{background:var(--paper);padding:56px 0 30px;border-bottom:1px solid var(--line);}
.legal-hero .col{max-width:840px;margin:0 auto;}
.legal-hero h1{color:var(--ink);margin:0 0 .3em;font-size:clamp(1.7rem,3vw,2.2rem);}
.legal-updated{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin:0;}
.article .legal-intro{margin-bottom:1.6rem;}
.article h3{margin-top:1.6rem;}