/* Homepage retheme: remap the shared component-library.css design tokens (deep-lagoon-teal
   / terracotta / Fraunces+Inter) to the approved Module 02 "Site Ledger, Reef Palette" values,
   for THIS PAGE ONLY (an override in index.html's own <style>, not an edit to the shared
   component-library.css file, so no other page is affected). This is what makes the legacy
   sections below the hero/Services match the new sections instead of clashing with them. */
:root{
  --bc-primary:        #0F5C56; /* was deep lagoon teal #0B6E76 -> reef teal-600 */
  --bc-primary-dark:   #0B433F; /* was #05464C -> teal-900 */
  --bc-primary-light:  #DEEBE9; /* was #E3F1F1 -> teal-100 */
  --bc-accent:         #C1613D; /* was tropical terracotta #E2874A -> clay-600 (secondary accent) */
  --bc-accent-dark:    #A3502F; /* was #8F4A20 -> clay-700 */
  --bc-accent-onDark:  #F6F3EC; /* was #FFFBF6 -> paper-alt */
  --bc-accent-light:   #F5E1D5; /* was #FBE6D4 -> clay-100 */
  --bc-gold:           #B6862C; /* was #A67C2E -> approved warning token (closest approved hue) */

  --bc-paper:          #EDE7DD; /* was warm sand #FBF8F2 -> paper */
  --bc-paper-alt:      #F6F3EC; /* was #F3ECDF -> paper-alt */
  --bc-surface:        #FFFFFF; /* unchanged - structural neutral */
  --bc-ink:             #1B211F; /* was #1C2A2B -> ink */
  --bc-ink-soft:        #43504A; /* was #4A5B5C -> ink-soft */
  --bc-ink-faint:       #8B948D; /* was #7C8C8C -> ink-faint */
  --bc-line:            #DCD3BF; /* was #E1D8C6 -> border */

  --bc-success:        #2F7D5A; /* approved success token */
  --bc-error:          #B23B2E; /* approved error token */

  --bc-font-display: 'Archivo', Georgia, 'Times New Roman', serif; /* was Fraunces */
  --bc-font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* was Inter */

  --bc-radius-sm: 6px;  /* unchanged - matches approved input/image radius */
  --bc-radius-md: 8px;  /* was 12px -> approved card/button radius ceiling */
  --bc-radius-lg: 8px;  /* was 20px -> approved system defines no radius above 8px */
  --bc-shadow-sm: 0 1px 2px rgba(27,33,31,.06);  /* approved shadow-sm, ink-based */
  --bc-shadow-md: 0 4px 12px rgba(27,33,31,.10); /* approved shadow-md */
  --bc-shadow-lg: 0 12px 32px rgba(27,33,31,.14); /* approved shadow-lg */
}
/* Two literal (non-variable) colours in component-library.css need a matching override:
   the accent/clay button's text color was tuned for the old, lighter terracotta and reads
   low-contrast on the darker approved clay-600. */
.bc-btn--accent{ color:#fff; }
.bc-btn--accent:hover{ color:#fff; }

/* Homepage hero — Module 02 "Site Ledger, Reef Palette" tokens, scoped to .hq- only. */
.hq-hero{
  --hq-paper:#EDE7DD; --hq-surface:#FFFFFF;
  --hq-ink:#1B211F; --hq-ink-soft:#43504A; --hq-ink-faint:#8B948D;
  --hq-border:#DCD3BF;
  --hq-teal-900:#0B433F; --hq-teal-700:#0D4F49; --hq-teal-600:#0F5C56; --hq-teal-100:#DEEBE9;
  --hq-serif:'Archivo',Georgia,serif;
  --hq-sans:'Source Sans 3',"Segoe UI",sans-serif;
  --hq-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  color:var(--hq-ink); font-family:var(--hq-sans);
  padding:32px 20px 48px;
  /* Real recovered project photo (the site's original hero image) + a single-direction
     ink-to-transparent scrim, capped at 60% opacity, per Module 02 Image Strategy - oriented
     top-to-bottom here since mobile stacks the headline over the photo. */
  background-image:linear-gradient(180deg, rgba(27,33,31,.60) 0%, rgba(27,33,31,.60) 55%, rgba(27,33,31,.15) 100%), var(--hq-bg-image, url('/wp-content/uploads/2021/04/bathroom-reno.jpg'));
  background-size:cover; background-position:center;
}
@media(prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
.hq-hero__grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:32px; }
.hq-eyebrow{ font-family:var(--hq-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--hq-teal-100); margin:0 0 12px; }
.hq-h1{ font-family:var(--hq-serif); font-weight:800; font-size:2rem; line-height:1.15; letter-spacing:-.01em; margin:0 0 12px; text-wrap:balance; color:#fff; }
.hq-lede{ font-family:var(--hq-sans); font-size:1rem; line-height:1.6; color:rgba(255,255,255,.88); margin:0 0 20px; max-width:52ch; }
.hq-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.hq-btn{
  font-family:var(--hq-sans); font-weight:700; font-size:1rem; letter-spacing:.01em;
  min-height:48px; padding:12px 24px; border-radius:8px; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1.5px solid transparent;
  transition:background-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out;
}
.hq-btn--primary{ background:var(--hq-teal-600); color:#fff; box-shadow:0 1px 2px rgba(27,33,31,.06); }
.hq-btn--primary:hover{ background:var(--hq-teal-700); box-shadow:0 4px 12px rgba(27,33,31,.10); }
.hq-btn--secondary{ background:transparent; color:#fff; border-color:#fff; }
.hq-btn--secondary:hover{ background:#fff; color:var(--hq-teal-900); }
.hq-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.hq-chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.hq-chips li{
  font-family:var(--hq-sans); font-weight:600; font-size:.8rem; color:var(--hq-teal-900);
  background:var(--hq-teal-100); border-radius:4px; padding:6px 12px; display:inline-flex; align-items:center; gap:6px;
}
.hq-chips li::before{ content:"✓"; color:var(--hq-teal-700); font-weight:700; }

.hq-form-wrap{
  background:var(--hq-surface); border:1px solid var(--hq-border); border-radius:8px;
  padding:24px; box-shadow:0 4px 12px rgba(27,33,31,.10);
  min-height:600px; scroll-margin-top:16px;
}
.hq-form-wrap h2{
  font-family:var(--hq-serif); font-weight:800; font-size:1.25rem; color:var(--hq-teal-900);
  margin:0 0 4px; letter-spacing:-.005em;
}
.hq-form-wrap p.hq-form-sub{ font-size:.9rem; color:var(--hq-ink-soft); margin:0 0 20px; }
.hq-field{ margin-bottom:16px; }
.hq-field label{
  display:block; font-family:var(--hq-sans); font-weight:600; font-size:.8125rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--hq-ink-soft); margin-bottom:8px;
}
.hq-field input, .hq-field textarea{
  width:100%; min-height:48px; padding:12px; border-radius:6px; border:1px solid var(--hq-border);
  background:var(--hq-surface); color:var(--hq-ink); font-family:var(--hq-sans); font-size:1rem;
}
.hq-field textarea{ min-height:80px; resize:vertical; }
.hq-field input:focus, .hq-field textarea:focus{
  outline:none; border-color:var(--hq-teal-600); box-shadow:0 0 0 2px var(--hq-teal-600), 0 0 0 4px var(--hq-surface);
}
.hq-form-wrap .hq-btn--primary{ width:100%; }
.hq-ghl-embed{ min-height:560px; }
.hq-ghl-embed iframe{ width:100%; min-height:560px; display:block; }

@media(min-width:768px){
  .hq-hero{
    padding:40px 32px;
    /* split layout from here on - scrim runs left-to-right behind the text column instead,
       since the form column sits on its own opaque white card and doesn't need it. */
    background-image:linear-gradient(90deg, rgba(27,33,31,.62) 0%, rgba(27,33,31,.62) 42%, rgba(27,33,31,.15) 68%), var(--hq-bg-image, url('/wp-content/uploads/2021/04/bathroom-reno.jpg'));
  }
  .hq-hero__grid{ grid-template-columns:1fr .92fr; gap:32px; align-items:start; }
  .hq-h1{ font-size:2.25rem; }
  .hq-form-wrap{ min-height:0; padding:20px; }
  .hq-field{ margin-bottom:12px; }
}
@media(min-width:1024px){
  .hq-hero{ padding:56px 48px; }
  .hq-hero__grid{ grid-template-columns:1.05fr .95fr; gap:48px; }
  .hq-h1{ font-size:3.5rem; line-height:1.08; }
  .hq-lede{ font-size:1.0625rem; }
  .hq-form-wrap{ padding:24px; }
  .hq-field{ margin-bottom:16px; }
}

/* Service Overview — Module 02 tokens reused, scoped to .svc- only. Overview Grid + Detail Below (accordion). */
.svc-overview{
  --svc-paper-alt:#F6F3EC; --svc-surface:#FFFFFF;
  --svc-ink:#1B211F; --svc-ink-soft:#43504A; --svc-ink-faint:#8B948D;
  --svc-border:#DCD3BF; --svc-teal-700:#0D4F49; --svc-teal-600:#0F5C56;
  --svc-serif:'Archivo',Georgia,serif; --svc-sans:'Source Sans 3',"Segoe UI",sans-serif;
  --svc-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  background:var(--svc-paper-alt); color:var(--svc-ink); font-family:var(--svc-sans);
  padding:48px 20px;
}
.svc-overview__container{ max-width:1200px; margin:0 auto; }
.svc-overview__eyebrow{
  font-family:var(--svc-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--svc-teal-700); margin:0 0 8px;
}
.svc-overview__heading{
  font-family:var(--svc-serif); font-weight:800; font-size:1.75rem; line-height:1.15;
  letter-spacing:-.01em; margin:0 0 32px; max-width:32ch;
}
.svc-overview__grid{
  display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:16px;
}
.svc-card{
  display:block; background:var(--svc-surface); border:1px solid var(--svc-border); border-radius:8px;
  padding:24px; text-decoration:none; color:inherit; box-shadow:0 1px 2px rgba(27,33,31,.06);
  transition:box-shadow 150ms ease-out, transform 150ms ease-out;
}
.svc-card:hover, .svc-card:focus-visible{
  box-shadow:0 4px 12px rgba(27,33,31,.10); transform:translateY(-2px);
}
.svc-card:focus-visible{ outline:2px solid var(--svc-teal-600); outline-offset:2px; }
.svc-card h3{
  font-family:var(--svc-serif); font-weight:700; font-size:1.0625rem; color:var(--svc-ink);
  margin:0 0 8px; line-height:1.3;
}
.svc-card p{ font-family:var(--svc-sans); font-size:.9375rem; color:var(--svc-ink-soft); margin:0; line-height:1.55; }

.svc-overview__accordion{ display:flex; flex-direction:column; gap:12px; }
.svc-panel{
  background:var(--svc-surface); border:1px solid var(--svc-border); border-radius:8px;
  padding:0; scroll-margin-top:16px;
}
.svc-panel summary{
  font-family:var(--svc-serif); font-weight:700; font-size:1.0625rem; color:var(--svc-ink);
  padding:16px 24px; cursor:pointer; list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:12px; min-height:48px;
}
.svc-panel summary::-webkit-details-marker{ display:none; }
.svc-panel summary::after{
  content:"+"; font-family:var(--svc-mono); font-size:1.25rem; color:var(--svc-teal-600);
  flex-shrink:0; transition:transform 150ms ease-out;
}
.svc-panel[open] summary::after{ transform:rotate(45deg); }
.svc-panel summary:focus-visible{ outline:2px solid var(--svc-teal-600); outline-offset:-2px; }
.svc-panel p{
  font-family:var(--svc-sans); font-size:1rem; line-height:1.65; color:var(--svc-ink-soft);
  margin:0 24px 16px; max-width:75ch; text-align:center;
}
.svc-panel p:last-child{ margin-bottom:24px; }

@media(min-width:640px){
  .svc-overview__grid{ grid-template-columns:repeat(2,1fr); }
}
@media(min-width:1024px){
  .svc-overview{ padding:96px 48px; }
  .svc-overview__heading{ font-size:2rem; }
  .svc-overview__grid{ grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:24px; }
}

/* Header "Services" dropdown — desktop only (site-nav__list is already display:none below 640px). */
.site-nav__dropdown{ position:relative; }
.site-nav__dropdown > a{ display:inline-flex; align-items:center; gap:4px; }
.site-nav__dropdown > a::after{
  content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); margin-top:-4px;
}
.site-nav__submenu{
  list-style:none; margin:0; padding:8px; position:absolute; top:100%; left:0;
  min-width:260px; background:#FFFFFF; border:1px solid #DCD3BF; border-radius:8px;
  box-shadow:0 12px 32px rgba(27,33,31,.14);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity 150ms ease-out, transform 150ms ease-out, visibility 150ms;
  z-index:20;
}
.site-nav__dropdown:hover > .site-nav__submenu,
.site-nav__dropdown:focus-within > .site-nav__submenu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.site-nav__submenu li{ margin:0; }
.site-nav__submenu a{
  display:block; padding:8px 12px; border-radius:6px; font-size:.875rem !important;
  font-weight:400 !important; white-space:nowrap;
}
.site-nav__submenu a:hover, .site-nav__submenu a:focus-visible{ background:#F1F6F5; color:#0F5C56 !important; }
.site-nav__submenu a:focus-visible{ outline:2px solid #0F5C56; outline-offset:-2px; }

/* Readability rhythm for long-form prose sections (Content Design & Readability Framework):
   a visual break roughly every ~150 words (~3 paragraphs), purely via spacing + a hairline
   divider - no words touched, nothing removed, every paragraph still renders in full. */
.bc-prose p{ max-width:68ch; }
.bc-prose__inner p, .bc-prose__grid > div > p{ margin-bottom:1.15em; }
.bc-prose p:nth-of-type(3n+1):not(:first-child){
  margin-top:1.6em; padding-top:1.4em; border-top:1px solid var(--bc-line);
}
.bc-prose--dark p:nth-of-type(3n+1):not(:first-child){ border-top-color:rgba(255,255,255,.22); }