/* ==========================================================================
   Bradford Attic Insulation — Main Stylesheet
   Design layer: UI/UX Pro Max, "Flat Design" style on the
   "Trust & Authority + Conversion" pattern (variance 7, density 4).
   Palette: roasted umber + brick + batt ochre on cream (from the yellow and
   pink batts in the site's own attic photos). Type: Outfit (display) with
   Work Sans (body), self-hosted.
   Hero: FORM-FIRST. The H1 spans the full width; the quote form is the
   dominant left column; the photo and the two buttons sit on the right.
   Signature: "layers" - three flat stripes (brick, ochre, batt pink), the
   way insulation builds up depth, under every hero and above the footer.
   No gradients, no drop shadows (flat), one radius, 150-200ms transitions.
   Every text/background pair below was computed (WCAG AA), not eyeballed.

   Structure
     01 Tokens  02 Base  03 Type  04 Layout  05 Buttons  06 Header/Nav
     07 Hero    08 Intro band + layers  09 Services rows  10 Why
     11 Commitments  12 Benefits ledger  13 Detail + sidebar
     14 Estimator  15 Timeline  16 CTA bands  17 Areas/map  18 FAQ
     19 Forms  20 Footer  21 Misc  22 Responsive  23 Motion/print
   ========================================================================== */

/* 01. TOKENS ============================================================== */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/outfit-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/fonts/outfit-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/work-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/work-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/work-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  /* brand */
  --color-primary:       #2B1A12;  /* roasted umber: header, hero, dark bands */
  --color-primary-2:     #3A2519;  /* raised umber surface */
  --color-brick:         #A1380F;  /* CTA on light; white 6.80:1, cream 6.37:1 */
  --color-brick-dark:    #7E2A0A;  /* hover, links; white 9.45:1 */
  --color-ochre:         #E8A93A;  /* CTA on dark; umber text 8.07:1 */
  --color-ochre-light:   #F2C46B;  /* text on umber 10.23:1 */
  --color-pink:          #EFC3AE;  /* batt pink, decorative only */
  --color-on-dark:       #F6EBDD;  /* text on umber 14.17:1 */
  --color-on-dark-muted: #C9B8A6;  /* text on umber 8.65:1 */
  /* neutrals */
  --color-bg:            #FBF7F0;  /* cream page */
  --color-bg-alt:        #F3EADB;  /* sand band */
  --color-white:         #FFFFFF;
  --color-text:          #2B211C;  /* 14.71:1 on cream */
  --color-heading:       #2B1A12;
  --color-text-muted:    #5E4E44;  /* 7.42:1 cream, 6.64:1 sand */
  --color-border:        #E3D6C4;
  --color-border-strong: #8A7461;  /* 4.42:1 white, 4.14:1 cream (>=3:1) */
  --color-success:       #1F6B43;
  --color-success-bg:    #E7F3EA;
  --color-error:         #A3201A;
  /* legacy names still referenced by inline markup */
  --color-accent: var(--color-brick);
  --color-accent-dark: var(--color-brick-dark);
  --color-accent-light: var(--color-ochre-light);
  --color-primary-light: var(--color-brick-dark);

  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.1875rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.625rem;
  --fs-2xl:  clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  --fs-3xl:  clamp(2.15rem, 1.2rem + 3.6vw, 4.1rem);
  --lh-tight: 1.12;
  --lh-body: 1.65;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;  --space-7: 3rem;   --space-8: 4.5rem; --space-9: 6rem;

  --container: 1200px;
  --container-narrow: 800px;
  --radius: 6px;
  --header-h: 76px;
  --transition: 170ms ease;
}

/* 02. BASE ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
ul, ol { padding-left: 1.25rem; }
a { color: var(--color-brick-dark); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--transition); }
a:hover { color: var(--color-brick); text-decoration-thickness: 2px; }
strong { color: var(--color-heading); }
.skip-link {
  position: absolute; left: var(--space-4); top: -60px; z-index: 200;
  background: var(--color-ochre); color: var(--color-primary); padding: .7rem 1rem; font-weight: 600;
}
.skip-link:focus { top: var(--space-3); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* 03. TYPE ================================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); font-weight: 800; }
h2 { font-size: var(--fs-2xl); font-weight: 700; }
h3 { font-size: var(--fs-lg); font-weight: 700; }
h4 { font-size: var(--fs-md); }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-brick-dark);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: ""; width: 26px; height: 9px; flex: none;
  background: linear-gradient(var(--color-brick) 0 33%, var(--color-ochre) 33% 66%, var(--color-pink) 66%);
}
.lead { font-size: var(--fs-md); color: var(--color-text-muted); }

/* 04. LAYOUT ============================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--space-8); }
.section--alt { background: var(--color-bg-alt); }
.section-head { max-width: 760px; margin-bottom: var(--space-6); }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-head.is-centered .eyebrow { justify-content: center; }
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.prose { max-width: 70ch; }
.prose h2 { margin-top: var(--space-6); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-5); }

/* 05. BUTTONS ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .8rem 1.4rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--radius);
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn--primary { background: var(--color-brick); color: var(--color-white); }
.btn--primary:hover { background: var(--color-brick-dark); color: var(--color-white); }
.btn--secondary { background: var(--color-primary); color: var(--color-on-dark); }
.btn--secondary:hover { background: var(--color-primary-2); color: var(--color-white); }
.btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: var(--color-on-dark); }
.btn--ghost { background: transparent; color: var(--color-on-dark); border-color: var(--color-on-dark-muted); }
.btn--ghost:hover { border-color: var(--color-ochre); color: var(--color-ochre-light); }
.btn--lg { min-height: 56px; padding: .95rem 1.7rem; font-size: 1.12rem; }
.btn--sm { min-height: 44px; padding: .55rem 1rem; font-size: .98rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.btn-row.is-centered { justify-content: center; }
/* on dark surfaces the primary action turns batt ochre */
.hero .btn--primary, .commitments .btn--primary, .cta-band .btn--primary,
.site-header .btn--primary, .site-footer .btn--primary, .estimator .btn--primary {
  background: var(--color-ochre); color: var(--color-primary);
}
.hero .btn--primary:hover, .commitments .btn--primary:hover, .cta-band .btn--primary:hover,
.site-header .btn--primary:hover, .site-footer .btn--primary:hover, .estimator .btn--primary:hover {
  background: var(--color-ochre-light); color: var(--color-primary);
}
.hero .hero-form .btn--primary { background: var(--color-brick); color: var(--color-white); }
.hero .hero-form .btn--primary:hover { background: var(--color-brick-dark); color: var(--color-white); }
.commitments .btn--outline, .cta-band .btn--outline { color: var(--color-on-dark); border-color: var(--color-on-dark-muted); }
.commitments .btn--outline:hover, .cta-band .btn--outline:hover { background: transparent; border-color: var(--color-ochre); color: var(--color-ochre-light); }

/* 06. HEADER + NAV ======================================================== */
.topbar { background: var(--color-brick-dark); color: var(--color-white); font-size: .95rem; }
.topbar__inner { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: .45rem; }
.topbar a { color: var(--color-white); font-weight: 600; text-decoration: none; }
.topbar a:hover { color: var(--color-white); text-decoration: underline; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-primary);
  border-bottom: 1px solid var(--color-primary-2);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.logo img { width: 46px; height: 46px; border-radius: var(--radius); }
.logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.logo__name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--color-on-dark); }
.logo__tag { font-size: .9rem; color: var(--color-ochre-light); }
.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .5rem .8rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  color: var(--color-on-dark); text-decoration: none; background: none; border: 0; cursor: pointer;
  border-bottom: 3px solid transparent;
}
.nav__link:hover { color: var(--color-ochre-light); }
.nav__link[aria-current="page"] { border-bottom-color: var(--color-ochre); color: var(--color-white); }
.nav__item--has-menu { position: relative; }
.nav__toggle::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform var(--transition);
}
.nav__toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.nav__submenu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 290px; z-index: 110;
  list-style: none; margin: 0; padding: .5rem 0;
  background: var(--color-white); border: 1px solid var(--color-border); border-top: 4px solid var(--color-ochre);
}
.nav__submenu.is-open { display: block; }
.nav__submenu a { display: block; padding: .6rem 1.1rem; color: var(--color-text); text-decoration: none; font-weight: 500; }
.nav__submenu a:hover, .nav__submenu a[aria-current="page"] { background: var(--color-bg-alt); color: var(--color-brick-dark); }
.header-cta { display: flex; align-items: center; gap: var(--space-4); }
.header-phone {
  display: flex; flex-direction: column; text-decoration: none; line-height: 1.2;
  font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--color-on-dark);
}
.header-phone:hover { color: var(--color-ochre-light); }
.header-phone__label { font-family: var(--font-body); font-weight: 500; font-size: .85rem; color: var(--color-on-dark-muted); }
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 12px; background: transparent; border: 2px solid var(--color-on-dark-muted);
  border-radius: var(--radius); cursor: pointer;
}
.nav-burger span { display: block; height: 2px; background: var(--color-on-dark); transition: transform var(--transition), opacity var(--transition); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.breadcrumbs { background: var(--color-bg-alt); font-size: .95rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: .65rem 0; }
.breadcrumbs li { display: inline-flex; align-items: center; color: var(--color-text-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: .35rem; color: var(--color-border-strong); }
.breadcrumbs a { color: var(--color-brick-dark); }

/* 07. HERO (form-first) =================================================== */
.hero { background: var(--color-primary); color: var(--color-on-dark); }
.hero h1 { color: var(--color-on-dark); margin: 0; }
.hero__inner { display: grid; gap: var(--space-5) var(--space-7); }
.hero__title { grid-area: title; max-width: 22ch; }

.hero--home { padding-block: var(--space-7) var(--space-8); }
.hero--home .hero__inner {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "title title" "rebate rebate" "form photo" "form actions";
  align-items: start;
}
.hero--home .hero__title { max-width: none; font-size: clamp(2.15rem, 1.1rem + 3.4vw, 4.3rem); padding-bottom: var(--space-2); }
.hero__formcol { grid-area: form; }
.hero__photo { grid-area: photo; position: relative; margin: 0 var(--space-4) var(--space-4) 0; }
.hero__photo::after {   /* flat ochre offset block behind the photo */
  content: ""; position: absolute; inset: var(--space-4) calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4);
  background: var(--color-ochre); z-index: 0;
}
.hero__photo picture, .hero__media picture { position: relative; z-index: 1; }
.hero__photo img, .hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.hero__actions { grid-area: actions; margin-top: var(--space-4); }
/* Oct 19 2026 owner change: one rebate note under the H1, linked to the rebate
   page. Outlined ochre tag, 1.125rem on every viewport (no-small-text hero rule). */
.hero__rebate { grid-area: rebate; margin: 0; align-self: start; justify-self: start; }
.hero__rebate a {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
  padding: .45rem 1rem .45rem .85rem; border: 2px solid var(--color-ochre); border-radius: 999px;
  font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; line-height: 1.3;
  color: var(--color-ochre-light); text-decoration: none; background: rgba(0, 0, 0, .18);
}
.hero__rebate a::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--color-ochre); flex: 0 0 auto; }
.hero__rebate a:hover, .hero__rebate a:focus-visible { background: var(--color-ochre); color: var(--color-primary); text-decoration: none; }
.hero--home .hero__rebate { margin-top: calc(-1 * var(--space-3)); }
.hero__actions .btn { flex: 1 1 220px; }

.hero-form {
  background: var(--color-white); color: var(--color-text);
  border-radius: var(--radius); border-top: 8px solid var(--color-ochre);
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
}
.hero-form__title { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); color: var(--color-heading); margin-bottom: var(--space-5); }
.hero-form .form-grid { gap: var(--space-4) var(--space-5); }
/* owner's rule: nothing in the hero under 16px - labels, markers and errors included */
.hero label, .hero .req, .hero .opt, .hero .field label, .hero .field__error,
.hero-form .field label, .hero-form .field .opt, .hero-form .field .req { font-size: 1rem; }
.hero-form .field label { font-weight: 600; }
.hero .opt { font-weight: 500; color: var(--color-text-muted); }
.hero-form .field input, .hero-form .field select { min-height: 54px; font-size: 1.0625rem; }
.hero-form .form-success { font-size: 1rem; }

/* interior heroes: H1 across the top, buttons under it, photo on the right */
.hero--page { padding-block: var(--space-7); }
.hero--page .hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "rebate" "actions"; }
.hero--page .hero__actions { margin-top: 0; }
.hero--page .hero__rebate { margin-top: calc(-1 * var(--space-2)); }
.hero--page .hero__actions .btn { flex: 0 1 auto; }
.hero--split .hero__inner {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  grid-template-areas: "title title" "rebate rebate" "actions media";
  align-items: end;
}
.hero--split .hero__title { max-width: 26ch; }
.hero__media { grid-area: media; }
.hero--split .hero__media img { aspect-ratio: 16 / 9; }
.hero--split .hero__actions { align-self: end; }

/* 08. INTRO BAND + LAYERS ================================================= */
.layers { display: grid; grid-template-rows: 8px 8px 8px; }
.layers span:nth-child(1) { background: var(--color-brick); }
.layers span:nth-child(2) { background: var(--color-ochre); }
.layers span:nth-child(3) { background: var(--color-pink); }
.layers--foot { grid-template-rows: 8px 8px 8px; }
.layers--foot span:nth-child(1) { background: var(--color-pink); }
.layers--foot span:nth-child(3) { background: var(--color-brick); }

.intro-band { padding-block: var(--space-7) var(--space-6); }
.intro-band .container--narrow { max-width: 920px; border-left: 6px solid var(--color-brick); padding-left: clamp(1rem, 3vw, 2rem); }
.intro-band p { font-size: var(--fs-md); }
.intro-band p:first-child { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1rem + .9vw, 1.6rem); line-height: 1.4; color: var(--color-heading); }
.intro-band h2 { font-size: var(--fs-xl); margin-bottom: var(--space-3); }

/* 09. SERVICES AS ROWS ==================================================== */
.svc { background: var(--color-white); border-block: 1px solid var(--color-border); }
.svc__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-7); align-items: start; }
.svc__head { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--color-primary); counter-reset: svc; }
.svc-row {
  counter-increment: svc; position: relative;
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 48px; gap: var(--space-5); align-items: center;
  padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border);
}
.svc-row__media img { width: 150px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.svc-row__body h3 { font-size: 1.3rem; margin-bottom: .35rem; }
.svc-row__body h3::before { content: counter(svc, decimal-leading-zero) "  "; color: var(--color-brick); font-weight: 800; }
.svc-row__title { color: var(--color-heading); text-decoration: none; }
.svc-row__title:hover { color: var(--color-brick-dark); text-decoration: underline; }
.svc-row__body p { color: var(--color-text-muted); margin: 0; }
.svc-row__go {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--color-primary); color: var(--color-primary);
  transition: background-color var(--transition), color var(--transition);
}
.svc-row__go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.svc-row__go:hover { background: var(--color-primary); color: var(--color-ochre); }

/* 10. WHY ================================================================ */
.why-sec__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); }
.why-sec__head h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); }
.why-sec .prose p:first-child { font-size: var(--fs-md); }

/* 11. COMMITMENTS (dark band, two-column checklist) ======================= */
.commitments { background: var(--color-primary); color: var(--color-on-dark); }
.commitments .container--narrow { max-width: var(--container); }
.commitments h2 { color: var(--color-on-dark); max-width: 24ch; }
.commitments .lead { color: var(--color-on-dark-muted); max-width: 60ch; }
.commit-list { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-7); }
.commit-list li {
  position: relative; padding: var(--space-4) 0 var(--space-4) 3rem;
  border-top: 1px solid rgba(246, 235, 221, .22); font-size: var(--fs-md); color: var(--color-on-dark);
}
.commit-list li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem; width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-ochre);
}
.commit-list li::after {
  content: ""; position: absolute; left: 10px; top: 1.3rem; width: 10px; height: 16px;
  border-right: 3px solid var(--color-primary); border-bottom: 3px solid var(--color-primary); transform: rotate(45deg);
}
.commit-list a { color: var(--color-ochre-light); }

/* 12. BENEFITS LEDGER ===================================================== */
.ledger-sec { background: var(--color-bg-alt); }
.ledger { list-style: none; padding: 0; margin: 0; counter-reset: ledger;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--color-primary); }
.ledger__item {
  counter-increment: ledger; padding: var(--space-5) var(--space-5) var(--space-6) 0;
  border-bottom: 1px solid var(--color-border-strong);
}
.ledger__item:not(:nth-child(3n+1)) { padding-left: var(--space-5); border-left: 1px solid var(--color-border); }
.ledger__item::before {
  content: counter(ledger, decimal-leading-zero); display: block;
  font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--color-brick); margin-bottom: var(--space-3);
}
.ledger__item p { font-size: var(--fs-base); }

/* 13. DETAIL + SIDEBAR ==================================================== */
.layout-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-7); align-items: start; }
.content-block { padding-bottom: var(--space-6); margin-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
.content-block:last-child { border-bottom: 0; }
.content-block h2 { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); }
.sidebar { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
.card { background: var(--color-primary); color: var(--color-on-dark); padding: var(--space-6); border-radius: var(--radius); }
.card h3 { color: var(--color-on-dark); font-size: 1.4rem; }
.card p { color: var(--color-on-dark-muted); }
.card .btn-row { flex-direction: column; }
.side-phone { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--color-ochre-light); text-decoration: none; }
.side-phone:hover { color: var(--color-white); }
.card .btn--primary { background: var(--color-ochre); color: var(--color-primary); }
.card .btn--primary:hover { background: var(--color-ochre-light); color: var(--color-primary); }
.card .btn--outline { color: var(--color-on-dark); border-color: var(--color-on-dark-muted); }
.card .btn--outline:hover { background: transparent; color: var(--color-ochre-light); border-color: var(--color-ochre); }
.panel { background: var(--color-white); border: 1px solid var(--color-border); border-top: 4px solid var(--color-brick); padding: var(--space-5); border-radius: var(--radius); }
.panel h3 { font-size: 1.15rem; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li { border-bottom: 1px solid var(--color-border); }
.panel li:last-child { border-bottom: 0; }
.side-link { display: block; padding: .55rem 0; color: var(--color-brick-dark); font-weight: 500; text-decoration: none; }
.side-link:hover { text-decoration: underline; }
.cta-inline {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  background: var(--color-bg-alt); border-left: 6px solid var(--color-ochre);
  padding: var(--space-5); margin: 0 0 var(--space-6); border-radius: 0 var(--radius) var(--radius) 0;
}
.cta-inline p { margin: 0; font-weight: 500; color: var(--color-heading); }
.cta-inline .btn-row { margin: 0; flex-wrap: nowrap; }

/* 14. ESTIMATOR =========================================================== */
.estimator { background: var(--color-primary-2); color: var(--color-on-dark); }
.estimator h2 { color: var(--color-on-dark); }
.estimator__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7); align-items: center; }
.estimator__copy p { color: var(--color-on-dark); font-size: var(--fs-md); }
.estimator__copy .estimator__fine { color: var(--color-on-dark-muted); font-size: var(--fs-base); }
.estimator__tool { background: var(--color-white); color: var(--color-text); padding: var(--space-6); border-radius: var(--radius); border-top: 8px solid var(--color-ochre); }
.estimator__tool .field { margin-bottom: var(--space-4); }
.estimator__tool label { font-weight: 600; color: var(--color-heading); }
.estimator__tool input, .estimator__tool select {
  width: 100%; min-height: 52px; padding: .7rem .9rem; font: inherit; color: var(--color-text);
  background: var(--color-white); border: 1px solid var(--color-border-strong); border-radius: var(--radius);
}
.estimator__out { background: var(--color-bg-alt); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); border-left: 6px solid var(--color-brick); }
.estimator__out[hidden] { display: none; }
.estimator__label { margin: 0; font-weight: 600; color: var(--color-text-muted); }
.estimator__range { margin: .2rem 0; font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--color-heading); }
.estimator__note { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.estimator .estimator__tool .btn--primary { background: var(--color-brick); color: var(--color-white); }
.estimator .estimator__tool .btn--primary:hover { background: var(--color-brick-dark); }

/* 15. PROCESS TIMELINE ==================================================== */
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 4px; background: var(--color-pink); }
.step { counter-increment: step; position: relative; padding-top: 76px; }
.step::before {
  content: counter(step); position: absolute; top: 0; left: 0; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: var(--color-primary); color: var(--color-ochre-light);
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; border: 4px solid var(--color-bg);
}
.step p { font-size: var(--fs-base); }

/* 16. CTA BANDS =========================================================== */
.cta-band { background: var(--color-brick-dark); color: var(--color-white); padding-block: var(--space-8); }
.cta-band .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-4) var(--space-7); align-items: center; }
.cta-band h2 { color: var(--color-white); margin: 0; grid-column: 1; }
.cta-band p { color: var(--color-white); font-size: var(--fs-md); grid-column: 1; margin: 0; }
.cta-band p a { color: var(--color-white); }
.cta-band .btn-row { grid-column: 2; grid-row: 1 / span 4; margin: 0; flex-direction: column; }
.cta-band .btn--ghost { color: var(--color-white); border-color: var(--color-white); }
.cta-band .btn--ghost:hover { color: var(--color-ochre-light); border-color: var(--color-ochre-light); }

/* 17. AREAS + MAP ========================================================= */
.areas-sec { background: var(--color-bg-alt); }
.layout-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.areas-split .map-wrap { order: -1; }
.map-wrap { position: relative; border: 6px solid var(--color-primary); border-radius: var(--radius); overflow: hidden; background: var(--color-white); aspect-ratio: 4 / 3; }
.map-wrap iframe { display: block; width: 100%; height: 100%; border: 0; }

/* 18. FAQ ================================================================= */
.faq-sec { background: var(--color-white); border-top: 1px solid var(--color-border); }
.faq-sec__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-7); align-items: start; }
.faq-sec__head { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
.faq-sec__head .btn-row { flex-direction: column; align-items: flex-start; }
.faq { border-top: 2px solid var(--color-primary); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__question { margin: 0; font-size: inherit; }
.faq__trigger {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); width: 100%;
  min-height: 60px; padding: var(--space-4) 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--color-heading);
}
.faq__trigger:hover { color: var(--color-brick-dark); }
.faq__icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--color-bg-alt); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--color-brick); transform: translate(-50%, -50%); transition: transform var(--transition); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__trigger[aria-expanded="true"] .faq__icon { background: var(--color-ochre); }
.faq__trigger[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__panel { display: none; padding: 0 0 var(--space-5); max-width: 68ch; }
.faq__panel.is-open { display: block; }

/* 19. FORMS =============================================================== */
.form-wrap { background: var(--color-white); border: 1px solid var(--color-border); border-top: 8px solid var(--color-brick); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2.5rem); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 1rem; font-weight: 600; color: var(--color-heading); }
.field .req { color: var(--color-error); }
.field .opt { font-weight: 400; color: var(--color-text-muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .7rem .9rem;
  font: inherit; font-size: 1.0625rem; color: var(--color-text);
  background: var(--color-white); border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus,
.estimator__tool input:focus, .estimator__tool select:focus {
  outline: none; border-color: var(--color-brick); box-shadow: 0 0 0 3px rgba(161, 56, 15, .28);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--color-error); background: #FDF3F1; }
.field__error { font-size: .95rem; font-weight: 600; color: var(--color-error); min-height: 1em; }
.form-note { font-size: .95rem; color: var(--color-text-muted); margin-top: var(--space-3); }
.form-success {
  display: none; gap: var(--space-3); background: var(--color-success-bg); color: var(--color-text);
  border-left: 6px solid var(--color-success); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); border-radius: var(--radius);
}
.form-success.is-visible { display: flex; }
.form-success strong { display: block; color: var(--color-success); margin-bottom: 4px; }
#quote .section-head .lead a { font-weight: 600; }

/* 20. FOOTER ============================================================== */
.site-footer { background: var(--color-primary); color: var(--color-on-dark-muted); padding-top: var(--space-8); }
.site-footer h3 { color: var(--color-on-dark); font-size: 1.1rem; letter-spacing: .02em; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr 1.2fr; gap: var(--space-6); }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: .55rem; }
.site-footer a { color: var(--color-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--color-ochre-light); text-decoration: underline; }
.footer-brand p { margin-top: var(--space-4); }
.footer-logo { display: inline-block; }
.footer-logo img { width: 120px; height: 120px; border-radius: var(--radius); }
.footer-phone { display: inline-block; margin-top: var(--space-2); font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--color-ochre-light) !important; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-7); padding-block: var(--space-5); border-top: 1px solid rgba(246, 235, 221, .18); font-size: .95rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }

/* 21. MISC ================================================================ */
.call-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; gap: .5rem; padding: .6rem; background: var(--color-primary); border-top: 4px solid var(--color-ochre); }
.call-bar .btn { flex: 1; min-height: 50px; }
.call-bar .btn--primary { background: var(--color-ochre); color: var(--color-primary); }
.call-bar .btn--secondary { background: transparent; color: var(--color-on-dark); border-color: var(--color-on-dark-muted); }
.to-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 80; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: var(--color-primary); border: 2px solid var(--color-ochre);
  cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition);
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top svg { width: 22px; height: 22px; fill: var(--color-ochre); }
.ext-link, .body-link { color: var(--color-brick-dark); }
/* St. George / gallery blocks stay styled even though this profile does not use them */
.site-walk { background: var(--color-bg-alt); }
.site-walk__grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-7); }
.site-walk__card { background: var(--color-primary); color: var(--color-on-dark); padding: var(--space-6); border-radius: var(--radius); }
.site-walk__big { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; color: var(--color-on-dark); }
.standards-list { list-style: none; padding: 0; }
.trust-strip ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem 0; margin: 0; }
.gallery { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.gallery__btn { padding: 0; border: 0; background: none; cursor: pointer; }
.gallery__caption { display: block; font-size: .95rem; }
.lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(43, 26, 18, .94); }
.lightbox[hidden] { display: none; }
.lightbox__img { max-height: 80vh; width: auto; }
.lightbox__caption { color: var(--color-on-dark); text-align: center; }
.lightbox__close, .lightbox__nav { width: 48px; height: 48px; background: var(--color-ochre); color: var(--color-primary); border: 0; border-radius: 50%; font-size: 1.6rem; cursor: pointer; }

/* focus: always visible, never removed */
:focus-visible { outline: 3px solid var(--color-ochre); outline-offset: 3px; }
.hero-form :focus-visible, .form-wrap :focus-visible, .estimator__tool :focus-visible, .svc :focus-visible, .faq :focus-visible { outline-color: var(--color-brick); }

/* 22. RESPONSIVE ========================================================== */
@media (max-width: 1100px) {
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline::before { left: 27px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
  .step { padding: 0 0 var(--space-5) 84px; min-height: 76px; }
  .step::before { top: 0; }
}
@media (max-width: 1024px) {
  .hero--home .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "rebate" "actions" "form" "photo";
  }
  .hero__actions { margin-top: 0; }
  .hero__photo { max-width: 620px; }
  .hero--split .hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "rebate" "actions" "media"; }
  .hero__media { max-width: 680px; }
  .svc__grid, .why-sec__grid, .faq-sec__grid, .estimator__grid, .layout-split, .layout-split--even { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .svc__head, .faq-sec__head, .sidebar { position: static; }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger__item:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .ledger__item:nth-child(2n) { padding-left: var(--space-5); border-left: 1px solid var(--color-border); }
  .cta-band .container { grid-template-columns: minmax(0, 1fr); }
  .cta-band .btn-row { grid-column: 1; grid-row: auto; flex-direction: row; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .nav-burger { display: flex; }
  .nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-4);
    background: var(--color-primary); border-top: 4px solid var(--color-ochre); display: none;
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; }
  .nav__link { width: 100%; justify-content: space-between; border-bottom: 1px solid rgba(246, 235, 221, .16); }
  .nav__submenu { position: static; border: 0; background: var(--color-primary-2); }
  .nav__submenu a { color: var(--color-on-dark); }
  .nav__submenu a:hover, .nav__submenu a[aria-current="page"] { background: var(--color-primary); color: var(--color-ochre-light); }
  .header-cta { padding-top: var(--space-4); flex-wrap: wrap; }
  .call-bar { display: flex; }
  body { padding-bottom: 76px; }
  .to-top { bottom: 84px; }
}
@media (max-width: 680px) {
  :root { --space-8: 3.25rem; --space-7: 2.25rem; }
  .topbar__inner { flex-direction: column; align-items: center; gap: 0; text-align: center; }
  .logo__tag { display: none; }
  .logo__name { font-size: 1.02rem; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .btn-row .btn { width: 100%; }
  .hero__actions .btn { flex-basis: 100%; }
  .hero__photo { margin: 0 var(--space-3) var(--space-3) 0; }
  .hero__photo::after { inset: var(--space-3) calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3); }
  .svc-row { grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-4); }
  .svc-row__media img { width: 88px; }
  .svc-row__go { display: none; }
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .ledger__item:nth-child(2n) { padding-left: 0; border-left: 0; }
  .commit-list { grid-template-columns: minmax(0, 1fr); }
  .cta-band .btn-row { flex-direction: column; }
  .cta-inline { flex-direction: column; align-items: stretch; }
  .cta-inline .btn-row { flex-direction: column; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 23. MOTION + PRINT ====================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  .site-header, .site-footer, .to-top, .call-bar, .cta-band, .cta-inline, .form-wrap, .topbar, .layers { display: none !important; }
  body { color: #000; background: #fff; font-size: 12pt; }
  .hero { background: #fff; color: #000; }
  .hero h1 { color: #000; }
  .faq__panel { display: block !important; }
}

/* hero refinements after first render */
.field__error:empty { min-height: 0; }
.hero--home .hero__actions { align-self: start; flex-direction: column; }
.hero--home .hero__actions .btn { flex: 0 0 auto; width: 100%; }
.nb { white-space: nowrap; }
.timeline-sec { background: var(--color-white); border-top: 1px solid var(--color-border); }
.timeline-sec .step::before { border-color: var(--color-white); }
.cta-inline { flex-wrap: wrap; }
.cta-inline p { flex: 1 1 260px; }
.cta-inline .btn-row { flex-wrap: wrap; }
.cta-inline .btn { white-space: nowrap; }
@media (min-width: 1025px) {
  .hero--split .hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "title media" "rebate media" "actions media"; align-items: center; row-gap: var(--space-4); }
  .hero--split .hero__title { align-self: end; }
  .hero--split .hero__actions { align-self: start; }
  .hero--split .hero__media img { aspect-ratio: 4 / 3; }
}
/* UI/UX Pro Max priority 2 (touch targets): whole service row is the link target */
.svc-row__title::after { content: ""; position: absolute; inset: 0; }
.svc-row__go { position: relative; z-index: 1; }
.svc-row:hover .svc-row__title { color: var(--color-brick-dark); text-decoration: underline; }
.footer-phone, .header-phone { min-height: 44px; justify-content: center; }
.footer-phone { display: inline-flex; align-items: center; }
.card dt { color: var(--color-on-dark) !important; }
.card dd, .card dd a { color: var(--color-on-dark-muted); }
.card a:not(.btn) { color: var(--color-ochre-light); }