/* =========================================================================
   Carports Adelaide Pro — Locked Component Library
   Industry: carports / steel & aluminium structures | Location: Adelaide, AU
   Aesthetic: sturdy tradesperson brand — steel charcoal, rust/Colorbond accent,
   condensed industrial headings, warm concrete-paper background.
   ========================================================================= */

:root{
  /* ---- Brand palette ---- */
  --bc-primary:       #2b333b;   /* steel charcoal */
  --bc-primary-dark:  #191f24;   /* deep gunmetal */
  --bc-primary-light: #4b5661;   /* lighter steel */
  --bc-accent:        #c1502b;   /* rust / Colorbond "Manor Red" */
  --bc-accent-dark:   #963d20;
  --bc-accent-light:  #e07a4e;
  --bc-steel:         #6b7580;   /* secondary steel grey (decorative/borders) */
  --bc-steel-light:   #9aa2ab;   /* AA-safe muted text on dark backgrounds */

  --bc-paper:         #f5f1e9;   /* warm concrete off-white */
  --bc-paper-alt:     #ece5d6;   /* deeper warm panel */
  --bc-ink:           #22262b;   /* near-black ink */
  --bc-ink-soft:      #565d64;   /* muted body copy */
  --bc-line:          #d9d0bd;   /* hairline border, warm grey */
  --bc-white:         #ffffff;

  --bc-on-primary:    #f5f1e9;
  --bc-on-accent:     #ffffff;

  /* ---- Type ---- */
  --bc-font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --bc-font-body: "Inter", "Segoe UI", Arial, sans-serif;

  --bc-fs-xs:   0.8125rem;
  --bc-fs-sm:   0.9375rem;
  --bc-fs-base: 1.0625rem;
  --bc-fs-lg:   1.25rem;
  --bc-fs-xl:   1.75rem;
  --bc-fs-2xl:  2.375rem;
  --bc-fs-3xl:  3.25rem;

  --bc-lh-tight: 1.1;
  --bc-lh-normal: 1.6;

  /* ---- Space scale ---- */
  --bc-space-1: 0.5rem;
  --bc-space-2: 0.75rem;
  --bc-space-3: 1rem;
  --bc-space-4: 1.5rem;
  --bc-space-5: 2rem;
  --bc-space-6: 3rem;
  --bc-space-7: 4.5rem;
  --bc-space-8: 6rem;

  --bc-radius-sm: 4px;
  --bc-radius: 8px;
  --bc-radius-lg: 14px;

  --bc-shadow-sm: 0 1px 3px rgba(25,31,36,.12);
  --bc-shadow: 0 8px 24px rgba(25,31,36,.16);
  --bc-shadow-lg: 0 20px 48px rgba(25,31,36,.24);

  --bc-container-w: 1180px;
}

/* ---- Reset-lite ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
body{
  margin:0;
  font-family:var(--bc-font-body);
  font-size:var(--bc-fs-base);
  line-height:var(--bc-lh-normal);
  color:var(--bc-ink);
  background:var(--bc-paper);
  overflow-x:hidden; /* backstop: one rogue unwrapped element (long URL, forced grid col count)
                         shouldn't be able to widen the whole page and drag position:fixed
                         elements like the mobile sticky CTA along with it */
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4{
  font-family:var(--bc-font-head);
  line-height:var(--bc-lh-tight);
  color:var(--bc-primary-dark);
  margin:0 0 var(--bc-space-2);
  letter-spacing:.01em;
  text-transform:uppercase;
  font-weight:700;
}
/* Dark-background contexts: the base heading rule above hard-codes --bc-primary-dark, which is
   invisible (or near it) against these sections' own dark backgrounds. Scoped narrower than the
   section wrapper alone would be ideal, but any heading dropped directly into one of these
   sections — not just ones using a dedicated *__title class — needs to stay legible. The
   .bc-formband__form override above still wins for headings inside the nested white form card. */
.bc-hero h1, .bc-hero h2, .bc-hero h3, .bc-hero h4,
.bc-formband h1, .bc-formband h2, .bc-formband h3, .bc-formband h4,
.bc-video h1, .bc-video h2, .bc-video h3, .bc-video h4,
.bc-prose--dark h1, .bc-prose--dark h2, .bc-prose--dark h3, .bc-prose--dark h4{
  color:var(--bc-white);
}
h1{ font-size:var(--bc-fs-3xl); }
h2{ font-size:var(--bc-fs-2xl); }
h3{ font-size:var(--bc-fs-xl); }
p{ margin:0 0 var(--bc-space-3); }
a{ color:var(--bc-accent-dark); overflow-wrap:anywhere; }
/* Dark-background contexts: accent-dark fails AA against dark charcoal (same issue as
   .bc-eyebrow above). accent-light passes AA on both --bc-primary and --bc-primary-dark.
   :not(.bc-btn) excludes button-styled anchors, which already set their own colour via
   .bc-btn--*, and would otherwise be overridden by this selector's higher specificity. */
.bc-hero a:not(.bc-btn),
.bc-formband a:not(.bc-btn),
.bc-video a:not(.bc-btn),
.bc-prose--dark a:not(.bc-btn),
.site-header a:not(.bc-btn),
.site-footer a:not(.bc-btn){
  color:var(--bc-accent-light);
}

/* ---- Container ---- */
.bc-container{
  width:100%;
  max-width:var(--bc-container-w);
  margin-inline:auto;
  padding-inline:var(--bc-space-4);
}

/* ---- Eyebrow ---- */
.bc-eyebrow{
  display:inline-block;
  font-family:var(--bc-font-head);
  font-size:var(--bc-fs-sm);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bc-accent-dark);
  margin-bottom:var(--bc-space-2);
}
/* Dark-background contexts: accent-dark (#963d20) fails AA against dark charcoal.
   steel-light passes AA on both --bc-primary and --bc-primary-dark. */
.bc-hero .bc-eyebrow,
.bc-formband .bc-eyebrow,
.bc-video .bc-eyebrow,
.bc-prose--dark .bc-eyebrow,
.site-header .bc-eyebrow,
.site-footer .bc-eyebrow{
  color:var(--bc-steel-light);
}
.bc-eyebrow::before{
  content:"";
  display:inline-block;
  width:1.4em; height:2px;
  background:var(--bc-accent);
  margin-right:.6em;
  vertical-align:middle;
}

/* ---- Buttons ---- */
.bc-btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--bc-font-head);
  font-weight:700;
  font-size:var(--bc-fs-lg);
  letter-spacing:.03em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.75em 1.6em;
  border-radius:var(--bc-radius-sm);
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.bc-btn:hover{ transform:translateY(-2px); }
.bc-btn--primary{
  background:var(--bc-accent);
  color:var(--bc-on-accent);
  box-shadow:var(--bc-shadow-sm);
}
.bc-btn--primary:hover{ background:var(--bc-accent-dark); }
.bc-btn--accent{
  background:var(--bc-primary);
  color:var(--bc-on-primary);
}
.bc-btn--accent:hover{ background:var(--bc-primary-dark); }
.bc-btn--ghost{
  background:transparent;
  color:var(--bc-white);
  border-color:var(--bc-white);
}
.bc-btn--ghost:hover{ background:rgba(255,255,255,.14); }
.bc-btn--outline{
  background:transparent;
  color:var(--bc-primary-dark);
  border-color:var(--bc-primary-dark);
}
.bc-btn--outline:hover{ background:var(--bc-primary-dark); color:var(--bc-on-primary); }

/* =========================================================================
   Site shell
   ========================================================================= */
.site-header{
  background:var(--bc-primary-dark);
  color:var(--bc-on-primary);
  position:sticky;
  top:0;
  z-index:50;
}
.site-header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:var(--bc-space-3);
  gap:var(--bc-space-4);
}
.site-header__logo{
  font-family:var(--bc-font-head);
  font-size:var(--bc-fs-xl);
  font-weight:700;
  color:var(--bc-white);
  text-decoration:none;
  letter-spacing:.02em;
}
.site-header__logo span{ color:var(--bc-accent-light); }

.site-nav{ display:flex; }
.site-nav__list{
  display:flex;
  align-items:center;
  gap:var(--bc-space-4);
  list-style:none;
  margin:0; padding:0;
  flex-wrap:wrap;
}
/* :not(.bc-btn) so a CTA button placed inside the nav list (a common pattern —
   "CONTACT US" as the last nav item) keeps its own button colours instead of this
   rule's higher specificity (.site-nav__list a) overriding .bc-btn--primary's color. */
.site-nav__list a:not(.bc-btn),
.site-nav__list > li > span{
  color:var(--bc-paper);
  text-decoration:none;
  font-family:var(--bc-font-head);
  font-size:var(--bc-fs-sm);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  padding:.4em 0;
  border-bottom:2px solid transparent;
  cursor:pointer;
}
.site-nav__list a:not(.bc-btn):hover,
.site-nav__list a:not(.bc-btn)[aria-current="page"],
.site-nav__item--dropdown:hover > a,
.site-nav__item--dropdown:focus-within > a,
.site-nav__item--dropdown > a[aria-current="page"]{
  border-color:var(--bc-accent);
  color:var(--bc-white);
}

/* ---- Services dropdown ---- */
.site-nav__item--dropdown{ position:relative; }
.site-nav__dropdown{
  list-style:none;
  margin:0; padding:var(--bc-space-2);
  position:absolute;
  top:100%; left:0;
  min-width:200px;
  background:var(--bc-white);
  border-radius:var(--bc-radius);
  box-shadow:var(--bc-shadow-lg);
  display:none;
  flex-direction:column;
  gap:2px;
  z-index:60;
}
.site-nav__item--dropdown:hover .site-nav__dropdown,
.site-nav__item--dropdown:focus-within .site-nav__dropdown{ display:flex; }
.site-nav__dropdown a{
  display:block;
  color:var(--bc-primary-dark) !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  font-family:var(--bc-font-body) !important;
  font-weight:500 !important;
  font-size:var(--bc-fs-sm) !important;
  padding:.55em .75em !important;
  border-radius:var(--bc-radius-sm);
  border-bottom:none !important;
}
.site-nav__dropdown a:hover{
  background:var(--bc-paper);
  color:var(--bc-accent-dark) !important;
}

/* ---- Mobile menu toggle (checkbox-driven, no JS) ---- */
.site-nav__toggle-input{ display:none; }
.site-nav__toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px; height:32px;
  cursor:pointer;
}
.site-nav__toggle span{
  display:block;
  width:100%; height:2px;
  background:var(--bc-white);
  border-radius:2px;
}

.site-footer{
  background:var(--bc-primary-dark);
  color:var(--bc-paper);
  padding-block:var(--bc-space-6) var(--bc-space-4);
}
.site-footer a{ color:var(--bc-accent-light); }
.site-footer__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--bc-space-5);
}
.site-footer__heading{
  font-family:var(--bc-font-head);
  color:var(--bc-white);
  text-transform:uppercase;
  font-size:var(--bc-fs-sm);
  letter-spacing:.1em;
  margin-bottom:var(--bc-space-2);
}
.site-footer__bottom{
  border-top:1px solid rgba(245,241,233,.15);
  margin-top:var(--bc-space-5);
  padding-top:var(--bc-space-3);
  font-size:var(--bc-fs-xs);
  color:var(--bc-steel-light);
  display:flex;
  flex-direction:column;
  gap:var(--bc-space-2);
}

/* =========================================================================
   Hero
   ========================================================================= */
.bc-hero{
  position:relative;
  background-color:var(--bc-primary-dark);
  background-image:
    linear-gradient(120deg, rgba(25,31,36,.92) 0%, rgba(25,31,36,.72) 55%, rgba(25,31,36,.4) 100%),
    linear-gradient(135deg, var(--bc-primary) 0%, var(--bc-primary-dark) 100%);
  background-size:cover;
  background-position:center;
  color:var(--bc-white);
  padding-block:var(--bc-space-8) var(--bc-space-7);
  border-bottom:6px solid var(--bc-accent);
}
.bc-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--bc-space-6);
  align-items:center;
}
.bc-hero h1{ color:var(--bc-white); font-size:var(--bc-fs-3xl); }
.bc-hero__lede{
  font-size:var(--bc-fs-lg);
  color:var(--bc-paper);
  max-width:38em;
}
.bc-hero__actions{
  display:flex;
  gap:var(--bc-space-3);
  flex-wrap:wrap;
  margin-top:var(--bc-space-4);
}
.bc-hero__media{
  border-radius:var(--bc-radius-lg);
  overflow:hidden;
  box-shadow:var(--bc-shadow-lg);
  border:4px solid var(--bc-accent);
}
.bc-hero__media img{ width:100%; height:100%; object-fit:cover; }

/* =========================================================================
   Hero — form column (Module 03: homepage hero only)
   ========================================================================= */
.bc-hero--with-form .bc-hero__grid{
  align-items:start;
}
.bc-hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--bc-space-2);
  list-style:none;
  margin:0 0 var(--bc-space-4);
  padding:0;
}
.bc-chip{
  font-family:var(--bc-font-head);
  font-size:var(--bc-fs-xs);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--bc-white);
  background:rgba(245,241,233,.12);
  border:1px solid rgba(245,241,233,.35);
  border-radius:var(--bc-radius-sm);
  padding:.4em .9em;
}
.bc-hero__form-col{
  background:var(--bc-white);
  border-radius:var(--bc-radius-lg);
  box-shadow:var(--bc-shadow-lg);
  padding:var(--bc-space-2);
}
.bc-hero__form-panel{
  min-height:620px; /* matches the GHL iframe's approximate height — prevents layout shift while it loads */
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--bc-space-3);
  padding:var(--bc-space-4);
  border-radius:var(--bc-radius);
}
.bc-hero .bc-hero__form-heading{
  color:var(--bc-primary-dark);
  font-size:var(--bc-fs-lg);
  text-align:center;
}
.bc-hero__form-panel iframe{
  width:100%;
  border:0;
  display:block;
  min-height:560px;
  flex:1;
}
.bc-hero__form-pending{
  color:var(--bc-ink-soft);
  font-size:var(--bc-fs-sm);
  margin:0;
  max-width:26em;
  text-align:center;
}

/* CTA-only formband variant (Module 03: no form fields outside the hero) */
.bc-formband__grid--cta-only{
  align-items:center;
}
.bc-formband__cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--bc-space-3);
}

/* =========================================================================
   Prose
   ========================================================================= */
.bc-prose{
  padding-block:var(--bc-space-7);
}
.bc-prose__inner{ max-width:56em; }
.bc-prose p{ color:var(--bc-ink-soft); }

/* ---- Blog Table of Contents (Blog Architecture & Content Governance framework) ---- */
.bc-toc{ padding-block:var(--bc-space-5); }
.bc-toc .bc-prose__inner{
  background:var(--bc-paper-alt);
  border:1px solid var(--bc-line);
  border-radius:var(--bc-radius);
  padding:var(--bc-space-4);
  max-width:40em;
}
.bc-toc__heading{
  font-family:var(--bc-font-head);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:var(--bc-fs-sm);
  color:var(--bc-primary-dark);
  margin:0 0 var(--bc-space-2);
}
.bc-toc__list{
  list-style:decimal;
  margin:0;
  padding-left:1.2em;
  display:grid;
  gap:.4em;
}
.bc-toc__list a{
  color:var(--bc-accent-dark);
  text-decoration:none;
}
.bc-toc__list a:hover{ text-decoration:underline; }
.bc-prose--has-color{
  background:var(--bc-paper-alt);
}
.bc-prose--dark{
  background:var(--bc-primary-dark);
  color:var(--bc-paper);
}
.bc-prose--dark h2,
.bc-prose--dark h3{ color:var(--bc-white); }
.bc-prose--dark p{ color:var(--bc-steel-light); }
.bc-prose--with-image .bc-prose__grid,
.bc-grid__card .bc-prose__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--bc-space-6);
  align-items:center;
}
.bc-prose--with-image img{
  border-radius:var(--bc-radius);
  box-shadow:var(--bc-shadow);
}
.bc-grid__card .bc-prose__grid img{
  border-radius:var(--bc-radius-sm);
  width:100%;
}
@media (max-width:900px){
  .bc-grid__card .bc-prose__grid{ grid-template-columns:1fr; }
}

/* =========================================================================
   Grid (services / features)
   ========================================================================= */
.bc-grid{ padding-block:var(--bc-space-7); }
.bc-grid__head{ max-width:44em; margin-bottom:var(--bc-space-5); }
.bc-grid__cards{
  display:grid;
  gap:var(--bc-space-4);
  grid-template-columns:repeat(2,1fr);
}
.bc-grid--3col .bc-grid__cards{ grid-template-columns:repeat(3,1fr); }
.bc-grid--4col .bc-grid__cards{ grid-template-columns:repeat(4,1fr); }
.bc-grid--2col .bc-grid__cards{ grid-template-columns:repeat(2,1fr); }

.bc-grid__card{
  background:var(--bc-white);
  border:1px solid var(--bc-line);
  border-radius:var(--bc-radius);
  padding:var(--bc-space-4);
  box-shadow:var(--bc-shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease;
}
.bc-grid__card:hover{ transform:translateY(-4px); box-shadow:var(--bc-shadow); }
.bc-grid__card-img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--bc-radius-sm);
  margin-bottom:var(--bc-space-3);
}
.bc-grid__card h3{ font-size:var(--bc-fs-lg); }
.bc-grid__card p{
  color:var(--bc-ink-soft);
  font-size:var(--bc-fs-sm);
  margin-bottom:0;
}
.bc-grid--text-only .bc-grid__card{
  border-top:4px solid var(--bc-accent);
}
.bc-grid--imaged .bc-grid__card{ padding-top:var(--bc-space-3); }

/* =========================================================================
   FAQ
   ========================================================================= */
.bc-faq{ padding-block:var(--bc-space-7); background:var(--bc-paper-alt); }
.bc-faq__inner{ max-width:48em; }
.bc-faq__list{ margin-top:var(--bc-space-4); }
.bc-faq__item{
  background:var(--bc-white);
  border:1px solid var(--bc-line);
  border-radius:var(--bc-radius);
  padding:var(--bc-space-3) var(--bc-space-4);
  margin-bottom:var(--bc-space-2);
}
.bc-faq__q{
  font-family:var(--bc-font-head);
  font-size:var(--bc-fs-lg);
  text-transform:none;
  color:var(--bc-primary-dark);
  margin:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--bc-space-2);
  cursor:pointer;
}
.bc-faq__q::after{
  content:"+";
  color:var(--bc-accent);
  font-size:1.3em;
  flex:none;
}
.bc-faq__a{
  color:var(--bc-ink-soft);
  margin-top:var(--bc-space-2);
  margin-bottom:0;
  font-size:var(--bc-fs-sm);
}
/* Phase 5: the same .bc-faq__item/__q/__a tokens now also back native <details>/<summary>
   accordions (Service Overview, location-page detail sections) — no new visual style,
   just enabling the interaction on the existing card. */
details.bc-faq__item{ padding:0; overflow:hidden; }
details.bc-faq__item > summary.bc-faq__q{
  list-style:none;
  padding:var(--bc-space-3) var(--bc-space-4);
}
details.bc-faq__item > summary.bc-faq__q::-webkit-details-marker{ display:none; }
details.bc-faq__item[open] > summary.bc-faq__q::after{ content:"\2212"; }
details.bc-faq__item > .bc-faq__a{
  padding:0 var(--bc-space-4) var(--bc-space-3);
  margin-top:0;
}
details.bc-faq__item > .bc-faq__a .bc-prose__grid{
  display:grid;
  gap:var(--bc-space-4);
  align-items:center;
}
details.bc-faq__item > .bc-faq__a img{
  border-radius:var(--bc-radius-sm);
  width:100%;
}
@media (min-width:641px){
  details.bc-faq__item > .bc-faq__a .bc-prose__grid{ grid-template-columns:1.1fr .9fr; }
}

/* =========================================================================
   Gallery
   ========================================================================= */
.bc-gallery{ padding-block:var(--bc-space-7); }
.bc-gallery__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--bc-space-3);
}
.bc-gallery__cell{
  position:relative;
  border-radius:var(--bc-radius-sm);
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:var(--bc-shadow-sm);
}
.bc-gallery__cell img{ width:100%; height:100%; object-fit:cover; }
.bc-gallery__caption{
  position:absolute;
  inset:auto 0 0 0;
  background:linear-gradient(0deg, rgba(25,31,36,.88), rgba(25,31,36,0));
  color:var(--bc-white);
  font-size:var(--bc-fs-xs);
  padding:var(--bc-space-3) var(--bc-space-2) var(--bc-space-1);
  margin:0;
}

/* =========================================================================
   Video
   ========================================================================= */
.bc-video{ padding-block:var(--bc-space-7); background:var(--bc-primary-dark); color:var(--bc-paper); }
.bc-video__grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:var(--bc-space-6);
  align-items:center;
}
.bc-video__copy h2{ color:var(--bc-white); }
.bc-video__copy p{ color:var(--bc-steel-light); }
.bc-video__player{
  position:relative;
  border-radius:var(--bc-radius-lg);
  overflow:hidden;
  box-shadow:var(--bc-shadow-lg);
  border:4px solid var(--bc-accent);
}
.bc-video__frame{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  display:block;
}

/* =========================================================================
   Map
   ========================================================================= */
.bc-map{ padding-block:var(--bc-space-7); background:var(--bc-paper-alt); }
.bc-map__grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:var(--bc-space-5);
  align-items:stretch;
  background:var(--bc-white);
  border:1px solid var(--bc-line);
  border-radius:var(--bc-radius);
  overflow:hidden;
  box-shadow:var(--bc-shadow-sm);
}
.bc-map__info{ padding:var(--bc-space-5); }
.bc-map__addr{
  font-style:normal;
  color:var(--bc-ink-soft);
  line-height:1.8;
}
.bc-map__addr strong{ color:var(--bc-primary-dark); display:block; font-family:var(--bc-font-head); text-transform:uppercase; letter-spacing:.04em; font-size:var(--bc-fs-lg); }
.bc-map__frame{ width:100%; height:100%; min-height:280px; border:0; display:block; }

/* =========================================================================
   Testimonial
   ========================================================================= */
.bc-testimonial{ padding-block:var(--bc-space-7); background:var(--bc-paper-alt); }
.bc-testimonial__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--bc-space-4);
}
.bc-testimonial__card{
  background:var(--bc-white);
  border-radius:var(--bc-radius);
  padding:var(--bc-space-4);
  border-left:4px solid var(--bc-accent);
  box-shadow:var(--bc-shadow-sm);
}
.bc-testimonial__quote{
  margin:0 0 var(--bc-space-3);
  color:var(--bc-ink);
  font-size:var(--bc-fs-sm);
}
.bc-testimonial__author{
  font-family:var(--bc-font-head);
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--bc-primary-dark);
  font-size:var(--bc-fs-xs);
  font-weight:700;
}
.bc-testimonial__stars{ color:var(--bc-accent); letter-spacing:.1em; margin-bottom:var(--bc-space-1); }

/* =========================================================================
   Form band
   ========================================================================= */
.bc-formband{
  padding-block:var(--bc-space-7);
  background:var(--bc-primary-dark);
  color:var(--bc-paper);
}
.bc-formband--intro{ padding-top:var(--bc-space-5); }
.bc-formband--final{
  background:linear-gradient(135deg, var(--bc-primary-dark), var(--bc-primary));
  border-top:6px solid var(--bc-accent);
}
.bc-formband__grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:var(--bc-space-6);
  align-items:start;
}
.bc-formband__title{ color:var(--bc-white); }
.bc-formband__lede{ color:var(--bc-steel-light); max-width:32em; }
.bc-formband__form{
  background:var(--bc-white);
  color:var(--bc-primary-dark);
  border-radius:var(--bc-radius-lg);
  padding:var(--bc-space-5);
  box-shadow:var(--bc-shadow-lg);
  display:grid;
  gap:var(--bc-space-3);
}
/* The form card is a white panel floating on the dark .bc-formband background — restore
   light-background text colours for anything nested inside it, overriding the dark-context
   rules above (which would otherwise render this light-on-light and unreadable). */
.bc-formband__form .bc-eyebrow{ color:var(--bc-accent-dark); }
.bc-formband__form a:not(.bc-btn){ color:var(--bc-accent-dark); }
.bc-formband__form h1,
.bc-formband__form h2,
.bc-formband__form h3,
.bc-formband__form h4{ color:var(--bc-primary-dark); }
.bc-form-field{ display:flex; flex-direction:column; gap:.35em; }
.bc-form-field label{
  font-size:var(--bc-fs-xs);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--bc-primary-dark);
}
.bc-form-field--required label::after{
  content:" *";
  color:var(--bc-accent-dark);
}
.bc-form-field input,
.bc-form-field textarea,
.bc-form-field select{
  font-family:var(--bc-font-body);
  font-size:var(--bc-fs-base);
  padding:.7em .8em;
  border:1px solid var(--bc-line);
  border-radius:var(--bc-radius-sm);
  background:var(--bc-paper);
  color:var(--bc-ink);
}
.bc-form-field input:focus,
.bc-form-field textarea:focus,
.bc-form-field select:focus{
  outline:2px solid var(--bc-accent);
  outline-offset:1px;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px){
  .bc-hero__grid,
  .bc-prose--with-image .bc-prose__grid,
  .bc-video__grid,
  .bc-map__grid,
  .bc-formband__grid{
    grid-template-columns:1fr;
  }
  .bc-grid--3col .bc-grid__cards,
  .bc-grid--4col .bc-grid__cards,
  .bc-testimonial__grid{
    grid-template-columns:repeat(2,1fr);
  }
  .bc-gallery__grid{ grid-template-columns:repeat(2,1fr); }
  .site-footer__grid{ grid-template-columns:1fr 1fr; }

  /* ---- Mobile nav: checkbox-driven toggle, no JS ---- */
  .site-nav__toggle{ display:flex; }
  .site-header__bar{ flex-wrap:wrap; }
  .site-nav{
    display:none;
    width:100%;
    order:3;
  }
  .site-nav__toggle-input:checked ~ .site-nav{ display:block; }
  .site-nav__list{
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    gap:0;
    padding-block:var(--bc-space-3);
    border-top:1px solid rgba(245,241,233,.15);
    margin-top:var(--bc-space-2);
  }
  .site-nav__list > li{ width:100%; }
  .site-nav__list a:not(.bc-btn),
  .site-nav__list > li > span{ display:block; padding-block:var(--bc-space-2); width:100%; }
  .site-nav__item--dropdown{ width:100%; }
  /* Mobile: no hover, so the submenu is always visible inline rather than a hidden dropdown */
  .site-nav__dropdown{
    position:static;
    display:flex !important;
    box-shadow:none;
    background:transparent;
    padding:0 0 0 var(--bc-space-3);
    margin-top:2px;
    width:100%;
  }
  .site-nav__dropdown a{
    color:var(--bc-steel-light) !important;
    padding:.5em .5em !important;
  }
  .site-nav__dropdown a:hover{ background:rgba(255,255,255,.08); color:var(--bc-white) !important; }
  .site-nav__list .bc-btn{ margin-top:var(--bc-space-2); width:100%; justify-content:center; }
}

/* Module 03: keep the homepage hero's form column two-up through tablet (768px) so the
   form stays above the fold there too — scoped to .bc-hero--home specifically (only the
   homepage carries that class) so the other 28 .bc-hero--with-form pages fall through to
   the general 900px breakpoint above and stack normally on tablet/large-phone widths. */
@media (min-width: 641px) and (max-width: 900px){
  .bc-hero--home .bc-hero__grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  }
  .bc-hero--home .bc-hero__form-panel{ min-height:520px; }
}

@media (max-width: 640px){
  :root{
    --bc-fs-3xl: 2.25rem;
    --bc-fs-2xl: 1.75rem;
    --bc-fs-xl: 1.35rem;
  }
  .bc-grid__cards,
  .bc-grid--2col .bc-grid__cards,
  .bc-grid--3col .bc-grid__cards,
  .bc-grid--4col .bc-grid__cards,
  .bc-testimonial__grid,
  .bc-gallery__grid{
    grid-template-columns:1fr;
  }
  .site-footer__grid{ grid-template-columns:1fr; }
  .bc-hero{ padding-block:var(--bc-space-6) var(--bc-space-5); }
  .bc-map__frame{ min-height:220px; }
  .bc-hero--with-form .bc-hero__actions{ flex-direction:column; align-items:stretch; }
  /* Stacked mobile fields need MORE vertical room than desktop, not less — a short
     min-height here starves the GHL widget before its auto-resize script can run,
     leaving it stuck showing its own internal scrollbar. */
  .bc-hero__form-panel{ min-height:760px; padding-block:var(--bc-space-2); padding-inline:0; }
  .bc-hero__form-panel iframe{ min-height:720px; }
  .bc-hero__form-col{ padding-block:var(--bc-space-1); padding-inline:0; }
}

/* ---- Social profile icons (Social Profile Entity Reinforcement) ---- */
.bc-social{
  display:flex;
  align-items:center;
  gap:var(--bc-space-2);
  margin:0;
  padding:0;
  list-style:none;
}
.bc-social__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:50%;
  background:rgba(245,241,233,.1);
  color:var(--bc-paper);
  transition:background-color .15s ease, color .15s ease;
  flex-shrink:0;
}
.bc-social__link:hover,
.bc-social__link:focus-visible{
  background:var(--bc-accent);
  color:var(--bc-white);
}
.bc-social__link svg{
  width:1.05rem;
  height:1.05rem;
  fill:currentColor;
}
.bc-social--on-light .bc-social__link{
  background:rgba(43,51,59,.08);
  color:var(--bc-primary);
}
.bc-social--on-light .bc-social__link:hover,
.bc-social--on-light .bc-social__link:focus-visible{
  background:var(--bc-accent);
  color:var(--bc-white);
}
.bc-social__label{
  font-family:var(--bc-font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:var(--bc-fs-sm);
  margin-right:var(--bc-space-1);
}

/* ---- Mobile sticky bottom CTA (rolls up once the hero scrolls out of view) ---- */
.bc-sticky-cta{
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  gap:var(--bc-space-2);
  padding:.6em var(--bc-space-3);
  padding-bottom:calc(.6em + env(safe-area-inset-bottom));
  background:var(--bc-primary-dark);
  box-shadow:0 -6px 20px rgba(25,31,36,.28);
  transform:translateY(100%);
  transition:transform .25s ease;
}
.bc-sticky-cta.is-visible{ transform:translateY(0); }
.bc-sticky-cta .bc-btn{
  flex:1 1 0;
  justify-content:center;
  text-align:center;
  font-size:var(--bc-fs-sm);
  padding:.7em .5em;
  white-space:nowrap;
}
@media (max-width:900px){
  .bc-sticky-cta{ display:flex; }
}