/* trades-bold — roofing, HVAC, exteriors, construction.
   Industrial: square corners, uppercase weight, petrol slate + safety amber.
   Signature: 4px amber rule under section headings. */
:root {
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-utility: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display-weight: 800; --display-tracking: -0.015em; --display-case: uppercase;
  --btn-case: uppercase; --btn-tracking: 0.05em; --eyebrow-tracking: 0.16em;

  --radius: 0px; --radius-sm: 0px;

  --bg: #FFFFFF; --surface: #F1F4F6; --line: #D3DCE1;
  --ink: #0E1519; --ink-muted: #47555E;

  --brand: #0F3244; --brand-ink: #FFFFFF;
  --accent: #F5A623; --accent-ink: #16110A; --accent-hover: #D98D0C;

  --link: #0C4A66; --link-hover: #0F3244; --focus-ring: #0C4A66;
  --star: #A96700;

  --header-bg: #FFFFFF; --header-ink: #0E1519; --header-muted: #47555E;
  --header-link-active: #0C4A66; --header-border: 3px solid #0F3244;

  --hero-bg: #0F3244; --hero-ink: #FFFFFF; --hero-muted: #C2D2DB; --hero-accent-ink: #F5A623;

  --card-bg: #FFFFFF; --card-border: 1px solid #D3DCE1; --card-shadow: none; --card-pad: 1.5rem;
  --input-border: #9DAAB2; --chip-bg: #FFFFFF; --chip-ink: #0E1519;

  --btn-secondary-ink: #0F3244; --btn-secondary-border: #0F3244; --btn-secondary-hover: #F1F4F6;

  --footer-bg: #0E1519; --footer-ink: #FFFFFF; --footer-muted: #A5B2BA;
  --footer-link: #F5A623; --footer-line: #2A353C;
}
.section__head h2::after {
  content: ""; display: block; width: 3.5rem; height: 4px;
  background: var(--accent); margin-top: 0.7rem;
}
.hero { border-bottom: 5px solid var(--accent); }

/* Base layer. Structure, spacing, and the accessibility floor.
   Themes only override tokens declared in :root — never these rules.
   Every colour used here resolves through a token so themes stay in control. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --wrap: 1140px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(3rem, 7vw, 5.5rem);
  --radius: 8px;
  --radius-sm: 4px;
  --focus: 3px;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1vw, 1.95rem);
  --step-3:  clamp(1.8rem, 1.4rem + 1.9vw, 2.6rem);
  --step-4:  clamp(2.15rem, 1.5rem + 3.1vw, 3.5rem);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Reserve room for the mobile call bar so it never covers the footer. */
@media (max-width: 767px) {
  body { padding-bottom: 4.25rem; }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 700);
  letter-spacing: var(--display-tracking, -0.01em);
  text-transform: var(--display-case, none);
  line-height: 1.12;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p  { margin: 0 0 1em; max-width: 68ch; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute; left: 0; top: 0; z-index: 100;
  transform: translateY(-120%);
  background: var(--brand); color: var(--brand-ink);
  padding: 0.75rem 1.25rem; font-weight: 700; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.wrap { width: min(var(--wrap), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--surface); }
.section__head { max-width: 60ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section__head p { color: var(--ink-muted); font-size: var(--step-1); }

.eyebrow {
  font-family: var(--font-utility);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking, 0.14em);
  font-weight: 700;
  color: var(--eyebrow-ink);
  margin: 0 0 0.65rem;
  display: block;
}

/* --- buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-utility);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: var(--btn-tracking, 0);
  text-transform: var(--btn-case, none);
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  min-height: 48px; /* touch target */
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn--secondary {
  background: transparent; color: var(--btn-secondary-ink); border-color: var(--btn-secondary-border);
}
.btn--secondary:hover { background: var(--btn-secondary-hover); }
.btn--lg { font-size: var(--step-1); padding: 1.1rem 2rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* --- preview band (non-live sites only) --------------------------------- */
.preview-band {
  background: var(--ink); color: var(--bg);
  font-family: var(--font-utility); font-size: var(--step--1);
  font-weight: 700; letter-spacing: 0.02em;
  padding-block: 0.6rem; text-align: center;
}
.preview-band .wrap { max-width: 62rem; }

/* --- header ---------------------------------------------------------------- */
.site-header {
  background: var(--header-bg);
  color: var(--header-ink);
  border-bottom: var(--header-border, 1px solid var(--line));
  position: relative; z-index: 20;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 0.85rem; flex-wrap: wrap;
}
.brand-lockup { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.brand-lockup img { max-height: 52px; width: auto; }
.brand-lockup__name {
  font-family: var(--font-display); font-weight: var(--display-weight, 700);
  font-size: var(--step-1); line-height: 1.05; letter-spacing: var(--display-tracking, -0.01em);
  text-transform: var(--display-case, none);
}
.brand-lockup__tag { font-size: var(--step--1); color: var(--header-muted); display: block; letter-spacing: 0; text-transform: none; font-family: var(--font-body); font-weight: 400; }

.site-nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a {
  color: var(--header-ink); text-decoration: none; font-family: var(--font-utility);
  font-weight: 600; font-size: var(--step--1); padding: 0.4rem 0; display: inline-block;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--header-link-active); text-decoration: underline; }

.header-cta { display: flex; align-items: center; gap: 0.75rem; }
.header-phone {
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-1);
  color: var(--header-ink); text-decoration: none; white-space: nowrap;
}
.header-phone:hover { color: var(--header-link-active); }
.header-phone small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.7rem; color: var(--header-muted); letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 900px) { .header-phone { display: none; } }
@media (max-width: 620px) { .site-nav { width: 100%; } .site-nav ul { gap: 0.9rem; } }

/* --- sticky mobile call bar ------------------------------------------------ */
.call-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  display: none; gap: 1px; background: var(--line);
  box-shadow: 0 -4px 18px rgb(0 0 0 / 0.18);
}
.call-bar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 1rem 0.5rem; min-height: 56px;
  font-family: var(--font-utility); font-weight: 700; font-size: var(--step-0);
  text-decoration: none;
}
.call-bar__call { background: var(--brand); color: var(--brand-ink); }
.call-bar__book { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 767px) { .call-bar { display: flex; } }

/* --- hero ------------------------------------------------------------------ */
.hero { background: var(--hero-bg); color: var(--hero-ink); padding-block: clamp(2.5rem, 6vw, 4.5rem); position: relative; }
.hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 880px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero h1 { color: var(--hero-ink); margin-bottom: 0.35em; }
.hero__lede { font-size: var(--step-1); color: var(--hero-muted); max-width: 46ch; }
.hero__where {
  font-family: var(--font-utility); font-weight: 700; font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--hero-accent-ink);
  margin-bottom: 1.35rem;
}
.hero__media img { border-radius: var(--radius); width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.hero__badges li {
  font-family: var(--font-utility); font-size: var(--step--1); font-weight: 600;
  color: var(--hero-muted); display: flex; align-items: center; gap: 0.4rem;
}
.hero__badges svg { flex: none; }

/* --- trust strip ----------------------------------------------------------- */
.trust-strip { background: var(--brand); color: var(--brand-ink); }
.trust-strip ul {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; justify-content: center;
  list-style: none; margin: 0; padding: 0.9rem 0;
  font-family: var(--font-utility); font-weight: 700; font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: 0.08em; text-align: center;
}

/* --- cards / services ------------------------------------------------------ */
.grid { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

.card {
  background: var(--card-bg);
  border: var(--card-border, 1px solid var(--line));
  border-radius: var(--radius);
  box-shadow: var(--card-shadow, none);
  padding: var(--card-pad, 1.5rem);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.card--media { padding: 0; overflow: hidden; }
.card--media img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.card--media .card__body { padding: var(--card-pad, 1.5rem); display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.card h3 { margin-bottom: 0.15em; }
.card p { color: var(--ink-muted); margin-bottom: 0.5rem; }
.card ul { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--ink-muted); font-size: var(--step--1); }
.card ul li { margin-bottom: 0.25rem; }
.card__link { margin-top: auto; font-family: var(--font-utility); font-weight: 700; text-decoration: none; }
.card__link:hover { text-decoration: underline; }
.card__link::after { content: " →"; }

/* --- booking / form -------------------------------------------------------- */
.booking { background: var(--surface); }
.booking__panel {
  background: var(--card-bg); border: var(--card-border, 1px solid var(--line));
  border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: var(--card-shadow, none);
}
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-family: var(--font-utility); font-weight: 700; font-size: var(--step--1); margin-bottom: 0.35rem; }
.field .hint { font-weight: 400; color: var(--ink-muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.8rem 0.9rem; min-height: 48px;
  font: inherit; font-size: var(--step-0);
  color: var(--ink); background: var(--bg);
  border: 2px solid var(--input-border); border-radius: var(--radius-sm);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--brand); }
.field textarea { min-height: 7.5rem; resize: vertical; }
.field-row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--step--1); color: var(--ink-muted); margin-top: 0.9rem; }

.embed-frame { border: 0; width: 100%; min-height: 680px; border-radius: var(--radius); background: var(--bg); }
.embed-fallback { font-size: var(--step--1); color: var(--ink-muted); margin-top: 0.75rem; }

/* --- reviews --------------------------------------------------------------- */
.review { background: var(--card-bg); border: var(--card-border, 1px solid var(--line)); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--card-shadow, none); }
.review blockquote { margin: 0 0 0.9rem; font-size: var(--step-1); line-height: 1.45; }
.review figcaption { font-family: var(--font-utility); font-size: var(--step--1); color: var(--ink-muted); }
.review figcaption strong { color: var(--ink); display: block; font-size: var(--step-0); }
.stars { color: var(--star); letter-spacing: 0.1em; margin-bottom: 0.6rem; font-size: var(--step-0); }

/* --- gallery --------------------------------------------------------------- */
.gallery { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.gallery figure { margin: 0; }
.gallery img { border-radius: var(--radius-sm); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.gallery figcaption { font-size: var(--step--1); color: var(--ink-muted); margin-top: 0.4rem; }

/* --- faq ------------------------------------------------------------------- */
.faq { max-width: 44rem; }
.faq details { border-bottom: 1px solid var(--line); padding: 0.35rem 0; }
.faq summary {
  cursor: pointer; padding: 0.9rem 0; font-family: var(--font-display);
  font-weight: var(--display-weight, 700); font-size: var(--step-1); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5em; line-height: 1; color: var(--ink-muted); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding-bottom: 1rem; color: var(--ink-muted); }

/* --- service areas --------------------------------------------------------- */
.area-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.area-list a {
  display: inline-block; padding: 0.5rem 0.95rem; border-radius: var(--radius-sm);
  background: var(--chip-bg); color: var(--chip-ink); border: 1px solid var(--line);
  text-decoration: none; font-family: var(--font-utility); font-size: var(--step--1); font-weight: 600;
}
.area-list a:hover { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

/* --- info blocks ----------------------------------------------------------- */
.info-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 820px) { .info-grid { grid-template-columns: 1fr 1fr; } }
.hours-table { border-collapse: collapse; width: 100%; max-width: 24rem; font-size: var(--step-0); }
.hours-table th, .hours-table td { text-align: left; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.hours-table th { font-family: var(--font-utility); font-weight: 600; color: var(--ink-muted); }
.hours-table td { text-align: right; font-variant-numeric: tabular-nums; }
.map-embed { border: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); }

.alert-band {
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-utility); font-weight: 700; text-align: center;
  padding: 0.7rem 1rem; font-size: var(--step-0);
}
.alert-band a { color: inherit; }

/* --- footer ---------------------------------------------------------------- */
.site-footer { background: var(--footer-bg); color: var(--footer-ink); padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; margin-top: auto; }
.site-footer a { color: var(--footer-link); }
.site-footer h2 { font-size: var(--step-1); color: var(--footer-ink); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.4rem; font-size: var(--step--1); }
.footer-legal {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--footer-line);
  font-size: var(--step--1); color: var(--footer-muted);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; justify-content: space-between;
}
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 0.9rem; list-style: none; margin: 0; padding: 0; }
.licence-line { font-family: var(--font-utility); letter-spacing: 0.04em; }

/* --- prose (legal pages) --------------------------------------------------- */
.prose { max-width: 44rem; }
.prose h2 { font-size: var(--step-2); margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }

/* --- breadcrumb ------------------------------------------------------------ */
.crumbs { font-size: var(--step--1); color: var(--ink-muted); padding-top: 1.25rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line); }
.crumbs a { color: var(--ink-muted); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Logo: respect the image's own proportions, cap the height. */
.brand-lockup img.site-logo { max-height: 88px; max-width: 220px; }


/* Hero secondary CTA must remain legible against client-supplied hero colors. */
.hero .btn--secondary {
  color: var(--hero-ink);
  border-color: currentColor;
}
.hero .btn--secondary:hover {
  background: var(--hero-ink);
  color: var(--hero-bg);
}

/* per-client overrides */
:root {
  --brand: #002080;
  --hero-bg: #002080;
  --accent: #e0a020;
}

/* client-specific overrides */
/* Homepage hero: keep the client-requested light green treatment, then use the
   supplied hero photo in the same immersive desktop style as the approved
   Stillpoint Massage and Belmont Auto Works examples. Scoped to this client
   only; the shared template and every other client remain unchanged. */
:root {
  --hero-bg: #B6D7A8;
  --hero-ink: #163B1E;
  --hero-muted: #2F4F35;
  --hero-accent-ink: #1F5024;
}

/* Client-requested hero presentation update (2026-08-31):
   Use the supplied hero photo as an integrated hero background, matching the
   presentation approach used by the Stillpoint Massage and Belmont Auto demos.
   This is homepage-only and leaves the shared template and other clients alone. */
@media (min-width: 880px) {
  body:has(.site-nav a[href="/"][aria-current="page"]) .hero {
    min-height: 650px;
    overflow: hidden;
    padding-block: clamp(4.5rem, 6vw, 5.75rem);
    background-color: #B6D7A8;
    background-image:
      linear-gradient(
        90deg,
        #B6D7A8 0%,
        #B6D7A8 40%,
        rgb(182 215 168 / .98) 46%,
        rgb(182 215 168 / .88) 52%,
        rgb(182 215 168 / .62) 59%,
        rgb(182 215 168 / .30) 66%,
        rgb(182 215 168 / 0) 75%
      ),
      url("/images/05-roofing-team-on-roof-5e1a9a47.png");
    background-position: center, right center;
    background-size: 100% 100%, 64% auto;
    background-repeat: no-repeat;
  }

  body:has(.site-nav a[href="/"][aria-current="page"]) .hero__grid {
    display: block;
    position: relative;
    z-index: 1;
    width: min(1380px, 100% - (var(--gutter) * 2));
  }

  body:has(.site-nav a[href="/"][aria-current="page"]) .hero__grid > div:first-child {
    width: 57%;
    max-width: 49rem;
  }

  body:has(.site-nav a[href="/"][aria-current="page"]) .hero__media {
    display: none;
  }

  body:has(.site-nav a[href="/"][aria-current="page"]) .hero h1 {
    font-size: clamp(2.8rem, 3.5vw, 4rem);
    line-height: 1.02;
    max-width: 16ch;
    margin-bottom: 0.42em;
  }

  body:has(.site-nav a[href="/"][aria-current="page"]) .hero__lede {
    max-width: 40ch;
  }

  body:has(.site-nav a[href="/"][aria-current="page"]) .hero__where,
  body:has(.site-nav a[href="/"][aria-current="page"]) .hero__badges {
    max-width: 46rem;
  }
}

/* Center the logo + business name + tagline as one branding group across the
   header. Giving only the branding lockup its own full-width flex row keeps the
   existing navigation and CTA alignment rules intact below it. */
.site-header .brand-lockup {
  flex: 0 0 100%;
  justify-content: center;
}