/*
Theme Name: Seattle Spray Foam Pros
Theme URI: https://seattlesprayfoampros.com
Author: Sonic
Description: Custom authority theme for Seattle Spray Foam Pros. Evergreen and amber, mobile-first.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: seattle-spray-foam
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --evergreen-deep: #14302A;
  --evergreen:      #1B4A3C;
  --evergreen-mid:  #2A6B57;
  --evergreen-tint: #E8F0EC;
  --amber:          #E2801B;
  --amber-deep:     #B4600F;
  --amber-tint:     #FCEFDD;
  --warm-white:     #FCFAF7;
  --sand:           #F1EBE1;
  --charcoal:       #2A322F;
  --muted:          #5A6661;
  --border:         #E2DBD0;
  --success:        #1B7A4F;
  --danger:         #A32E22;

  --font-display: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(20,48,42,.06), 0 2px 8px rgba(20,48,42,.05);
  --shadow:    0 2px 4px rgba(20,48,42,.05), 0 12px 28px rgba(20,48,42,.09);
  --shadow-lg: 0 4px 8px rgba(20,48,42,.06), 0 24px 56px rgba(20,48,42,.13);

  --section-y: clamp(48px, 8vw, 104px);
  --gap:       clamp(20px, 3vw, 32px);
}

/* ==========================================================================
   2. RESET + RESPONSIVE BASELINE  (mobile-first, built ONCE, inherited by all)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--warm-white);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, iframe, svg, canvas { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--evergreen); text-underline-offset: .18em; }
a:hover { color: var(--amber-deep); }
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--evergreen-deep);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700; }
h4 { font-size: clamp(1.05rem, 1.6vw, 1.2rem); font-weight: 700; }
p  { margin: 0 0 1.1em; max-width: 68ch; }
ul, ol { max-width: 68ch; padding-left: 1.25em; }
li { margin-bottom: .5em; }
strong { font-weight: 600; color: var(--evergreen-deep); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--gap) 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 999; background: var(--evergreen-deep);
  color: #fff; padding: 12px 18px; border-radius: var(--radius-sm); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* ---- Container ---- */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 5vw, 48px); }
.container--narrow { max-width: 760px; }
.container--wide   { max-width: 1340px; }

/* ---- Grid utilities (collapse to 1 col, expand at breakpoints) ---- */
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); }
                             .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.grid-sidebar { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .grid-sidebar { grid-template-columns: minmax(0,1fr) 320px; gap: clamp(32px,4vw,64px); } }
.grid-split { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .grid-split { grid-template-columns: repeat(2, 1fr); } }

/* ---- Sections ---- */
.section { padding-block: var(--section-y); }
.section--sand  { background: var(--sand); }
.section--tint  { background: var(--evergreen-tint); }
.section--dark  { background: var(--evergreen-deep); color: #E4EDE9; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark a { color: var(--amber); }
.section--tight { padding-block: clamp(32px, 5vw, 64px); }

/* ==========================================================================
   3. COMPONENTS
   ========================================================================== */
.eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--evergreen-mid);
  margin: 0 0 .6em; display: block;
}
.section--dark .eyebrow { color: var(--amber); }
.lede { font-size: clamp(1.08rem, 1.7vw, 1.28rem); line-height: 1.6; color: var(--muted); max-width: 62ch; }
.section--dark .lede { color: #BFD2CA; }
.section-head { margin-bottom: clamp(28px, 4vw, 48px); max-width: 760px; }
.text-center { text-align: center; }
.section-head.text-center { margin-inline: auto; }

/* ---- Buttons (44px min target) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 14px 26px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  border-radius: 999px; border: 2px solid transparent; cursor: pointer;
  text-decoration: none; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  text-align: center; line-height: 1.2;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--amber); color: var(--evergreen-deep); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: #F08F28; color: var(--evergreen-deep); box-shadow: var(--shadow); }
.btn--secondary { background: var(--evergreen); color: #fff; }
.btn--secondary:hover { background: var(--evergreen-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--evergreen-deep); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--evergreen); background: var(--evergreen-tint); color: var(--evergreen-deep); }
.section--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.section--dark .btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn--lg { min-height: 58px; padding: 16px 32px; font-size: 1.08rem; }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---- Cards ---- */
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px); box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--evergreen-mid); }
.card__icon { width: 52px; height: 52px; color: var(--evergreen); margin-bottom: 16px; flex: none; }
.card__more { margin-top: auto; padding-top: 14px; font-weight: 600; color: var(--evergreen);
  font-family: var(--font-display); font-size: .96rem; }
.card--link:hover .card__more { color: var(--amber-deep); }
.card--flat { box-shadow: none; background: var(--warm-white); }
.section--sand .card { background: #fff; }

/* ---- Hero ---- */
.hero { position: relative; background: var(--evergreen-deep); color: #E4EDE9; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,48,42,.82) 0%, rgba(20,48,42,.72) 45%, rgba(20,48,42,.94) 100%);
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(56px, 9vw, 116px); }
.hero__content { max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: .45em; }
.hero__sub { font-size: clamp(1.08rem, 2vw, 1.32rem); line-height: 1.55; color: #C9DAD3; max-width: 58ch; margin-bottom: 1.6em; }
.hero .eyebrow { color: var(--amber); }
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.16); }
.hero__trust span { display: flex; align-items: center; gap: 8px; font-size: .94rem; color: #BFD2CA; }
.hero__trust svg { width: 19px; height: 19px; color: var(--amber); flex: none; }

/* page hero (interior pages) */
.pagehero { background: var(--evergreen-deep); color: #E4EDE9; position: relative; overflow: hidden; }
.pagehero__media { position: absolute; inset: 0; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .30; }
.pagehero::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,48,42,.86) 0%, rgba(20,48,42,.93) 100%); }
.pagehero__inner { position: relative; z-index: 2; padding-block: clamp(44px, 7vw, 84px); max-width: 780px; }
.pagehero h1 { color: #fff; }
.pagehero__sub { font-size: clamp(1.05rem, 1.8vw, 1.22rem); color: #C9DAD3; line-height: 1.6; max-width: 58ch; }
.pagehero .btn-row { margin-top: 26px; }

/* ---- Breadcrumbs ---- */
.crumbs { font-size: .88rem; color: var(--muted); padding-block: 14px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--evergreen); text-decoration: underline; }
.crumbs span { margin: 0 .4em; opacity: .55; }

/* ---- Stats ---- */
.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 5vw, 3rem);
  color: var(--amber); line-height: 1; display: block; }
.stat__label { font-size: .95rem; color: var(--muted); margin-top: 8px; display: block; }
.section--dark .stat__label { color: #BFD2CA; }

/* ---- Steps / process ---- */
.steps { counter-reset: step; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps--4 { grid-template-columns: repeat(4, 1fr); }
                             .steps--3 { grid-template-columns: repeat(3, 1fr); } }
.step { counter-increment: step; position: relative; padding-top: 8px; }
.step::before {
  content: counter(step); display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--amber-tint); color: var(--amber-deep);
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; margin-bottom: 14px;
}
.section--dark .step::before { background: rgba(226,128,27,.18); color: var(--amber); }
.step h3 { margin-bottom: .35em; }
.step p { font-size: .98rem; color: var(--muted); margin-bottom: 0; }
.section--dark .step p { color: #BFD2CA; }

/* ---- Checklist ---- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.checklist svg { width: 22px; height: 22px; color: var(--evergreen-mid); flex: none; margin-top: 3px; }
.section--dark .checklist svg { color: var(--amber); }
.checklist--x svg { color: var(--danger); }

/* ---- Callout / note ---- */
.callout {
  background: var(--evergreen-tint); border-left: 4px solid var(--evergreen-mid);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: clamp(18px, 2.6vw, 26px); margin: clamp(24px,3vw,34px) 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout h3, .callout h4 { margin-top: 0; }
.callout--amber { background: var(--amber-tint); border-left-color: var(--amber); }
.callout--quote { background: transparent; border-left-color: var(--amber);
  font-size: clamp(1.1rem,2vw,1.3rem); font-family: var(--font-display); font-weight: 700;
  color: var(--evergreen-deep); line-height: 1.4; }

/* ---- Table ---- */
.table-wrap { overflow-x: auto; margin: clamp(22px,3vw,32px) 0; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: .97rem; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--evergreen-deep); color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: .9rem; letter-spacing: .01em; }
tbody tr:nth-child(even) { background: var(--sand); }
td strong { color: var(--evergreen-deep); }

/* ---- FAQ ---- */
.faq { display: grid; gap: 14px; max-width: 860px; }
.faq details {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 20px; box-shadow: var(--shadow-sm);
}
.faq details[open] { border-color: var(--evergreen-mid); }
.faq summary {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--evergreen-deep);
  cursor: pointer; list-style: none; padding: 16px 34px 16px 0; position: relative; min-height: 44px;
  display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--amber-deep); line-height: 1;
}
.faq details[open] summary::after { content: '\2212'; }
.faq__body { padding: 0 0 18px; color: var(--charcoal); }
.faq__body p:last-child { margin-bottom: 0; }

/* ---- Service / location link lists ---- */
.linklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .linklist--2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .linklist--3 { grid-template-columns: repeat(3,1fr); } }
.linklist li { margin: 0; }
.linklist a {
  display: flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 11px 16px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm); text-decoration: none; color: var(--evergreen-deep);
  font-weight: 600; font-size: .98rem; transition: all .16s ease;
}
.linklist a:hover { border-color: var(--evergreen-mid); background: var(--evergreen-tint); transform: translateX(3px); }
.linklist svg { width: 17px; height: 17px; color: var(--amber-deep); flex: none; }

/* ---- CTA band ---- */
.ctaband { background: var(--evergreen-deep); color: #E4EDE9; position: relative; overflow: hidden; }
.ctaband::before {
  content: ''; position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,128,27,.20) 0%, rgba(226,128,27,0) 70%);
  top: -180px; right: -120px; pointer-events: none;
}
.ctaband__inner { position: relative; z-index: 2; padding-block: clamp(44px, 7vw, 80px); text-align: center; }
.ctaband h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.ctaband p { color: #C9DAD3; max-width: 54ch; margin-inline: auto; margin-bottom: 1.7em; }
.ctaband .btn-row { justify-content: center; }
.ctaband__fine { font-size: .9rem; color: #9DB4AB; margin-top: 20px; margin-bottom: 0; }

/* ---- Author / trust box ---- */
.authorbox {
  display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
  background: var(--sand); border-radius: var(--radius); padding: clamp(20px,3vw,28px);
  margin: clamp(28px,4vw,40px) 0 0;
}
.authorbox__body { flex: 1 1 300px; }
.authorbox__body p:last-child { margin-bottom: 0; }
.authorbox h4 { margin-bottom: .3em; }

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(252,250,247,.97);
  backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--border); }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.08; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  color: var(--evergreen-deep); letter-spacing: -.02em; }
.brand__tag { font-size: .72rem; color: var(--muted); letter-spacing: .02em; }
@media (min-width: 480px) { .brand__name { font-size: 1.15rem; } }

.nav-toggle { display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--evergreen-deep); }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-call { display: none; }
@media (min-width: 560px) {
  .header-call { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    font-family: var(--font-display); font-weight: 700; color: var(--evergreen-deep); font-size: 1rem;
    min-height: 44px; padding: 8px 4px; }
  .header-call svg { width: 18px; height: 18px; color: var(--amber-deep); }
  .header-call:hover { color: var(--amber-deep); }
}
.header-cta { display: none; }
@media (min-width: 1024px) { .header-cta { display: inline-flex; } }

.main-nav { display: none; }
.main-nav.is-open { display: block; border-top: 1px solid var(--border); padding-block: 10px 18px; }
.main-nav ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.main-nav li { margin: 0; position: relative; }
.main-nav a { display: flex; align-items: center; min-height: 48px; padding: 8px 0;
  text-decoration: none; color: var(--evergreen-deep); font-family: var(--font-display);
  font-weight: 600; font-size: 1.02rem; border-bottom: 1px solid var(--border); }
.main-nav > ul > li:last-child > a { border-bottom: 0; }
.main-nav a:hover, .main-nav .current-page a { color: var(--amber-deep); }
.main-nav .sub-menu { padding-left: 14px; }
.main-nav .sub-menu a { font-weight: 400; font-size: .97rem; color: var(--muted); min-height: 44px; }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .main-nav { display: block; margin-left: auto; }
  .main-nav.is-open { border-top: 0; padding-block: 0; }
  .main-nav > ul { display: flex; align-items: center; gap: 4px; }
  .main-nav > ul > li > a { border-bottom: 0; padding: 8px 13px; border-radius: var(--radius-sm);
    font-size: .97rem; min-height: 44px; }
  .main-nav > ul > li > a:hover { background: var(--evergreen-tint); }
  .main-nav .sub-menu {
    position: absolute; top: 100%; left: 0; min-width: 264px; padding: 8px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); display: none; z-index: 60;
  }
  .main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { display: block; }
  .main-nav .sub-menu a { padding: 9px 12px; border-radius: var(--radius-sm); border-bottom: 0;
    color: var(--charcoal); }
  .main-nav .sub-menu a:hover { background: var(--evergreen-tint); color: var(--evergreen-deep); }
}

/* ---- Sticky mobile call bar ---- */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: grid; grid-template-columns: 1fr 1fr; background: var(--evergreen-deep);
  box-shadow: 0 -4px 18px rgba(20,48,42,.22); }
.callbar a { display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; text-decoration: none; font-family: var(--font-display);
  font-weight: 700; font-size: 1rem; color: #fff; }
.callbar a + a { background: var(--amber); color: var(--evergreen-deep); }
.callbar svg { width: 19px; height: 19px; }
body { padding-bottom: 56px; }
@media (min-width: 1024px) { .callbar { display: none; } body { padding-bottom: 0; } }

/* ==========================================================================
   5. FOOTER
   ========================================================================== */
.site-footer { background: var(--evergreen-deep); color: #B6CAC1; padding-block: clamp(44px,6vw,72px) 0; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1em; }
.footer-grid { display: grid; gap: clamp(28px,4vw,40px); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .footer-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55em; }
.site-footer a { color: #B6CAC1; text-decoration: none; font-size: .96rem; }
.site-footer a:hover { color: var(--amber); text-decoration: underline; }
.footer-brand .brand__name { color: #fff; }
.footer-brand .brand__tag { color: #8FA9A0; }
.footer-about { font-size: .95rem; line-height: 1.65; margin-top: 16px; max-width: 42ch; }
.footer-contact { margin-top: 18px; display: grid; gap: 10px; }
.footer-contact a { display: flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.05rem; }
.footer-contact svg { width: 18px; height: 18px; color: var(--amber); flex: none; }
.footer-contact .footer-email { font-size: .96rem; font-weight: 400; color: #B6CAC1; }
.footer-bottom { margin-top: clamp(36px,5vw,56px); padding-block: 22px;
  border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap;
  gap: 10px 24px; justify-content: space-between; font-size: .88rem; color: #8FA9A0; }
.footer-bottom p { margin: 0; max-width: none; }

/* ==========================================================================
   6. PAGE CONTENT (editor output)
   ========================================================================== */
.entry { padding-block: var(--section-y); }
.entry > .container > *:first-child { margin-top: 0; }
.entry h2 { margin-top: 1.9em; }
.entry h3 { margin-top: 1.6em; }
.entry h2:first-child, .entry h3:first-child { margin-top: 0; }
.entry ul li::marker, .entry ol li::marker { color: var(--evergreen-mid); }
.entry img { border-radius: var(--radius); }
.entry figure { margin: clamp(24px,3vw,36px) 0; }
.entry figcaption { font-size: .88rem; color: var(--muted); margin-top: 10px; text-align: left; }
.entry .wp-block-image img { width: 100%; }

/* Rail */
.rail { display: grid; gap: 18px; align-content: start; }
@media (min-width: 1024px) { .rail { position: sticky; top: 92px; } }
.rail__card { background: var(--sand); border-radius: var(--radius); padding: 22px; }
.rail__card h4 { margin-bottom: .5em; }
.rail__card p { font-size: .95rem; margin-bottom: 1em; }
.rail__card .btn { width: 100%; }
.rail__phone { display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; margin-top: 10px; font-family: var(--font-display); font-weight: 700;
  color: var(--evergreen-deep); text-decoration: none; font-size: 1.1rem; }
.rail__phone svg { width: 18px; height: 18px; color: var(--amber-deep); }

/* ---- Forms ---- */
.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2,1fr); }
                            .form-grid .full { grid-column: 1 / -1; } }
label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: 6px; color: var(--evergreen-deep); }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 1rem;
  color: var(--charcoal); background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--evergreen-mid); outline-offset: 1px; }
.form-note { font-size: .87rem; color: var(--muted); }
.form-status { padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .96rem; }
.form-status--ok { background: #E3F3EA; color: #12603D; border: 1px solid #A9D8C1; }
.form-status--err { background: #FBE9E7; color: #8A241A; border: 1px solid #EFC0B9; }

/* ---- Media figure pair ---- */
.media-figure img { border-radius: var(--radius); width: 100%; box-shadow: var(--shadow); }
.media-figure figcaption { font-size: .88rem; color: var(--muted); margin-top: 12px; }

/* ---- Utility ---- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1rem; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   7. ART DIRECTION WITHOUT PHOTOGRAPHY
   Branded evergreen field + foam-cell pattern. When real photos are added as
   featured images the .hero__media / .pagehero__media layer takes over and
   these treatments sit behind it. No template change required.
   ========================================================================== */
.hero, .pagehero { background-color: var(--evergreen-deep); }
.hero::before, .pagehero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(226,128,27,.22) 0%, rgba(226,128,27,0) 42%),
    radial-gradient(circle at 82% 78%, rgba(42,107,87,.45) 0%, rgba(42,107,87,0) 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%232A6B57' stroke-width='1.1' stroke-opacity='.55'%3E%3Cpath d='M30 2 56 17v30L30 62 4 47V17z'/%3E%3Cpath d='M90 2l26 15v30L90 62 64 47V17z'/%3E%3Cpath d='M60 54l26 15v30L60 114 34 99V69z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, 120px 104px;
}
.hero__inner, .pagehero__inner { position: relative; z-index: 2; }
.hero::after, .pagehero::after { z-index: 1; }
.hero__media, .pagehero__media { z-index: 1; }

/* Assembly diagrams (inline SVG cross sections). */
.diagram { background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(18px,2.6vw,28px); box-shadow: var(--shadow-sm); margin: clamp(24px,3vw,34px) 0; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram figcaption { font-size: .89rem; color: var(--muted); margin-top: 14px; }
.section--sand .diagram { background: #fff; }
.diagram--bare { background: transparent; border: 0; box-shadow: none; padding: 0; }

/* Feature panel used where a photo would otherwise sit. */
.artpanel {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--evergreen-deep); min-height: 280px;
  display: flex; align-items: center; justify-content: center; padding: 32px;
}
.artpanel::before {
  content: ''; position: absolute; inset: 0; opacity: .55;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(226,128,27,.3) 0%, rgba(226,128,27,0) 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%232A6B57' stroke-width='1.1' stroke-opacity='.6'%3E%3Cpath d='M30 2 56 17v30L30 62 4 47V17z'/%3E%3Cpath d='M90 2l26 15v30L90 62 64 47V17z'/%3E%3Cpath d='M60 54l26 15v30L60 114 34 99V69z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 120px 104px;
}
.artpanel > * { position: relative; z-index: 2; }
.artpanel svg { width: min(100%, 340px); height: auto; color: var(--amber); }

/* Tap target: the brand lockup is a link, give it the full 44px. */
.brand { min-height: 44px; }

/* ==========================================================================
   8. RENDER FIXES (found at 320/768/1440)
   ========================================================================== */

/* The hero and page hero are dark contexts too, so ghost buttons must invert
   there. Without this the secondary CTA is dark-on-dark and invisible. */
.hero .btn--ghost, .pagehero .btn--ghost, .ctaband .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.42);
}
.hero .btn--ghost:hover, .pagehero .btn--ghost:hover, .ctaband .btn--ghost:hover {
  background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.7);
}

/* Phone numbers and short CTA labels must never break mid-number. */
.btn { white-space: nowrap; }
@media (max-width: 400px) { .btn { white-space: normal; } }
.header-call span, .footer-contact a, .callbar a, .rail__phone { white-space: nowrap; }

/* Header: stop the nav and phone wrapping at mid-desktop widths. */
@media (min-width: 1024px) {
  .main-nav > ul { gap: 0; flex-wrap: nowrap; }
  .main-nav > ul > li > a { padding: 8px 10px; white-space: nowrap; font-size: .94rem; }
  .header-bar { gap: 12px; }
  .header-actions { gap: 8px; flex: none; }
  .header-call { font-size: .95rem; }
  .header-cta { padding: 12px 18px; min-height: 46px; font-size: .95rem; }
}
@media (min-width: 1180px) {
  .main-nav > ul > li > a { padding: 8px 13px; font-size: .97rem; }
  .header-cta { padding: 14px 22px; }
}

/* Hero trust row: even columns instead of a lonely wrapped 4th item. */
.hero__trust { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px)  { .hero__trust { grid-template-columns: repeat(2, auto); justify-content: start;
  column-gap: clamp(20px, 4vw, 52px); } }
@media (min-width: 1024px) { .hero__trust { grid-template-columns: repeat(4, auto); } }

/* Hero: give the copy more of the frame and trim the empty right side. */
.hero__content { max-width: 760px; }
@media (min-width: 1100px) { .hero__content { max-width: 820px; } }
.hero__inner { padding-block: clamp(52px, 7.5vw, 96px); }

/* Icons inside buttons and trust rows must be constrained, or the raw 24px
   viewBox SVG stretches to fill the flex line. */
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--lg svg { width: 21px; height: 21px; }
.callbar svg, .header-call svg, .footer-contact svg, .rail__phone svg { flex: none; }
.card > svg, .card__icon svg { width: 100%; height: 100%; }
.card > svg { width: 48px; height: 48px; color: var(--evergreen); margin-bottom: 14px; flex: none; }
.hero__trust svg, .checklist svg, .linklist svg { flex: none; }

/* Small phones: full width stacked CTAs read better than squeezed pills. */
@media (max-width: 420px) {
  .hero .btn-row, .pagehero .btn-row, .ctaband .btn-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .hero .btn, .pagehero .btn, .ctaband .btn { width: 100%; white-space: nowrap; }
}

/* Dark-section contrast. Two real bugs were caught here at 1440:
   1. `strong` inherits the deep evergreen colour, which is invisible on a deep
      evergreen background.
   2. `.section--dark a` (0,1,1) out-specifies `.btn--primary` (0,1,0), so CTA
      labels inside dark sections were rendering amber-on-amber. */
.section--dark strong, .ctaband strong, .hero strong, .pagehero strong { color: #fff; }
.section--dark .checklist span, .section--dark li { color: #D6E3DE; }

.section--dark a.btn--primary, .ctaband a.btn--primary,
.hero a.btn--primary, .pagehero a.btn--primary { color: var(--evergreen-deep); }
.section--dark a.btn--secondary, .ctaband a.btn--secondary { color: #fff; }
.section--dark a.btn--ghost, .ctaband a.btn--ghost,
.hero a.btn--ghost, .pagehero a.btn--ghost { color: #fff; }

/* Inline links inside dark body copy stay amber but must stay legible. */
.section--dark p a:not(.btn), .section--dark li a:not(.btn) {
  color: var(--amber); text-decoration: underline;
}

/* ==========================================================================
   9. GLOBAL ICON SAFETY NET
   Every ssf_icon() SVG ships with viewBox="0 0 24 24" and no intrinsic size,
   so in any flex or block context it stretches to fill. One unconstrained
   arrow rendered at 200px on the homepage. Rather than patch each call site
   (45 more pages are built by sub-agents against this same stylesheet), every
   icon gets a sane default here and context rules opt into a larger size.
   ========================================================================== */
svg[viewBox="0 0 24 24"] { width: 20px; height: 20px; flex: none; display: inline-block;
  vertical-align: -.18em; }

.card__icon svg[viewBox="0 0 24 24"],
.card > svg[viewBox="0 0 24 24"] { width: 48px; height: 48px; vertical-align: baseline; }
@media (min-width: 640px) {
  .card__icon svg[viewBox="0 0 24 24"], .card > svg[viewBox="0 0 24 24"] { width: 52px; height: 52px; }
}
.checklist > li > svg[viewBox="0 0 24 24"] { width: 22px; height: 22px; margin-top: 3px; }
.btn--lg svg[viewBox="0 0 24 24"] { width: 21px; height: 21px; }
.hero__trust svg[viewBox="0 0 24 24"] { width: 19px; height: 19px; }
.linklist a svg[viewBox="0 0 24 24"] { width: 17px; height: 17px; }
.card__more svg[viewBox="0 0 24 24"] { width: 17px; height: 17px; }
.footer-contact svg[viewBox="0 0 24 24"],
.callbar svg[viewBox="0 0 24 24"] { width: 19px; height: 19px; }

.card__more { display: inline-flex; align-items: center; gap: 7px; }
.card > svg[viewBox="0 0 24 24"] { color: var(--evergreen); margin-bottom: 14px; }

/* ==========================================================================
   10. GRID OVERFLOW GUARD
   Grid and flex children default to min-width:auto, so any wide child (the
   480px min-width comparison table, a long unbroken URL, a pre block) forces
   its track wider than the viewport. This caused a 496px scrollWidth at 320px
   on the first service page. Fixed once here so no page has to think about it.
   ========================================================================== */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-sidebar > *, .grid-split > *,
.steps > *, .linklist > *, .btn-row > * { min-width: 0; }
.grid-sidebar { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .grid-sidebar { grid-template-columns: minmax(0,1fr) 320px; } }

/* Long words and URLs in body copy must not push the layout either. */
.entry p, .entry li, .entry h1, .entry h2, .entry h3, .entry td, .entry th { overflow-wrap: break-word; }
.table-wrap { max-width: 100%; }

/* Page hero corrections.
   1. The eyebrow used the mid evergreen, which is near invisible on the deep
      evergreen hero. It takes amber here, same as the homepage hero.
   2. `.pagehero__inner` capped the CONTAINER at 780px, so the whole block
      centred itself and fell out of alignment with the breadcrumb below it.
      The container stays full width and the text elements carry the measure. */
.pagehero .eyebrow { color: var(--amber); }
.pagehero__inner { max-width: none; }
.pagehero__inner h1 { max-width: 18ch; }
.pagehero__sub { max-width: 56ch; }

/* The rail could not stick because the grid stretched it to full column
   height, leaving it nothing to travel within. align-self:start gives it a
   natural height so the estimate CTA follows the reader down long pages. */
@media (min-width: 1024px) { .grid-sidebar > .rail { align-self: start; } }

/* Card links inherit the global underline, which put a line under every card
   heading and "See what is involved" label in the service grids. */
.card--link, .card--link:hover, a.card { text-decoration: none; }
.card--link h3, .card--link p, .card__more { text-decoration: none; }
.linklist a, .linklist a:hover { text-decoration: none; }