/* ==========================================================================
   BN Exteriors, LLC
   1. Reset & Box-Sizing
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* anchor targets clear the fixed header */
:target, [id] { scroll-margin-top: calc(var(--header-h) + 24px); }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

img, picture, video { max-width: 100%; display: block; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; }

a { color: inherit; }

/* ==========================================================================
   2. CSS Custom Properties
   ========================================================================== */
:root {
  /* Brand: warm bronze on charcoal, matched to the BN Exteriors logo */
  --color-primary:       #4b3a2a;
  --color-primary-dark:  #33271b;
  --color-secondary:     #8a7a66;
  --color-accent:        #c9975c;
  --color-accent-dark:   #b07f43;

  /* Text */
  --color-text:          #1a1e26;
  --color-text-muted:    #646d7d;
  --color-text-inverse:  #ffffff;

  /* Backgrounds */
  --color-bg:            #ffffff;
  --color-bg-alt:        #f7f5f1;
  --color-bg-dark:       #191510;
  --color-bg-darker:     #100d09;
  --color-bg-card:       #ffffff;

  /* Borders */
  --color-border:        #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-border-dark:   rgba(255, 255, 255, 0.12);

  /* Buttons */
  --btn-primary-bg:      var(--color-accent);
  --btn-primary-text:    #211709;
  --btn-primary-hover:   var(--color-accent-dark);
  --btn-ghost-border:    rgba(255, 255, 255, 0.45);
  --btn-ghost-text:      #ffffff;

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;

  /* Shell */
  --header-h:     92px;
  --radius:       8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --shadow-card:  0 2px 12px rgba(26, 21, 14, 0.06);
  --shadow-hover: 0 12px 40px rgba(26, 21, 14, 0.15);
  --transition:   0.2s ease;

  /* Feedback + rating */
  --color-star:          #f0a12e;
  --color-success-bg:    #ecfdf3;
  --color-success-border:#a6e9c1;
  --color-success-text:  #05603a;
  --color-error-bg:      #fef3f2;
  --color-error-border:  #fda29b;
  --color-error-text:    #b42318;
}

/* ==========================================================================
   3. Base
   ========================================================================== */
html { overflow-x: hidden; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

::selection { background: var(--color-accent); color: var(--color-text-inverse); }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   4. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  text-wrap: balance;
  letter-spacing: -0.015em;
}

/* Gold accent word inside a heading (Horizon-style) */
.heading-accent { color: var(--color-accent); }

h1 { font-size: clamp(34px, 5.4vw, 58px); }
h2 { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.2; }
h3 { font-size: clamp(21px, 2.2vw, 27px); line-height: 1.25; }
h4 { font-size: clamp(18px, 1.6vw, 21px); }

p { max-width: 68ch; }

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
}
.section-label.on-dark { color: var(--color-accent); }

.section-heading { margin-bottom: 18px; }
.section-heading.centered { text-align: center; }

.section-subtitle {
  color: var(--color-text-muted);
  font-size: 17px;
  max-width: 66ch;
}
/* Centered intro copy stays left-aligned so long paragraphs remain readable */
.text-center .section-subtitle { margin-inline: auto; text-align: left; }
.text-center .section-subtitle.short,
.text-center .section-subtitle.centered-copy { text-align: center; }
.text-center { text-align: center; }

.accent-rule {
  display: block;
  width: 60px;
  height: 3px;
  border: 0;
  background: var(--color-accent);
  margin: 0 0 26px;
}
.text-center .accent-rule { margin-inline: auto; }

/* ==========================================================================
   5. Layout
   ========================================================================== */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 860px; margin: 0 auto; padding: 0 24px; }

.section-pad { padding: 100px 0; }
.section-pad-sm { padding: 72px 0; }

.bg-alt { background: var(--color-bg-alt); }
.bg-dark { background: var(--color-bg-dark); color: var(--color-text-inverse); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: var(--color-text-inverse); }
.bg-dark p { color: rgba(255, 255, 255, 0.76); }

/* ==========================================================================
   6. Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.btn-primary:hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--btn-ghost-text);
  border-color: var(--btn-ghost-border);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-text-inverse);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border-strong);
}
.btn-outline:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
}

/* Light pill: a white button reading against a dark photo, used in the hero */
.btn-light {
  background: var(--color-bg-card);
  color: var(--color-primary);
  border-color: var(--color-bg-card);
  border-radius: 999px;
  padding: 15px 32px;
}
.btn-light:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--btn-primary-text);
  transform: translateY(-2px);
}

.btn-full { width: 100%; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ==========================================================================
   8. Header & Navigation
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition), backdrop-filter var(--transition);
}
/* At rest the bar is clear, so a soft scrim keeps the logo and links legible
   over whatever the hero happens to be showing. Every hero on the site is
   dark, so light text stays readable without a solid bar. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(16, 13, 9, 0.55) 0%, rgba(16, 13, 9, 0) 100%);
  transition: opacity var(--transition);
}
.site-header.scrolled {
  background: rgba(16, 13, 9, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}
.site-header.scrolled::before { opacity: 0; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  transition: height var(--transition);
}
.site-header.scrolled .header-inner { height: 76px; }

.header-logo { display: flex; align-items: center; flex-shrink: 0; }
.header-logo img {
  height: 62px;
  width: auto;
  transition: height var(--transition);
}
.site-header.scrolled .header-logo img { height: 50px; }

.header-nav { display: flex; align-items: center; gap: 4px; }

.nav-item { position: relative; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.nav-link:hover,
.nav-link[aria-expanded="true"] { color: var(--color-text-inverse); background: rgba(255, 255, 255, 0.09); }
.nav-link.is-current { color: var(--color-accent); }

.nav-caret {
  width: 10px;
  height: 10px;
  transition: transform var(--transition);
}
.nav-item:hover .nav-caret,
.nav-link[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 290px;
  padding: 10px;
  background: var(--color-text-inverse);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition);
}
.nav-item:hover > .nav-dropdown,
.nav-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 9px 14px;
  font-size: 15px;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.nav-dropdown a:hover { background: var(--color-bg-alt); color: var(--color-accent); }

.nav-dropdown-heading {
  padding: 8px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 4px;
  min-width: 520px;
}

.header-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-inverse);
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { color: var(--color-accent); }
.header-phone svg { width: 17px; height: 17px; }

.header-cta { padding: 12px 22px; font-size: 13px; }

.mobile-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  color: var(--color-text-inverse);
}
.mobile-menu-toggle svg { width: 22px; height: 22px; margin: 0 auto; }

.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: min(400px, 88vw);
  height: 100dvh;
  z-index: 1100;
  padding: 24px;
  background: var(--color-bg-darker);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s ease;
}
.mobile-nav.open { transform: translateX(0); }

.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.mobile-nav-close {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  color: var(--color-text-inverse);
}
.mobile-nav-close svg { width: 20px; height: 20px; margin: 0 auto; }

.mobile-nav a {
  display: block;
  padding: 13px 0;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-nav a:hover { color: var(--color-accent); }

.mobile-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 0;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}
.mobile-group > button svg { width: 14px; height: 14px; transition: transform var(--transition); }
.mobile-group.open > button svg { transform: rotate(180deg); }
.mobile-submenu { display: none; padding-left: 16px; }
.mobile-group.open .mobile-submenu { display: block; }
.mobile-submenu a { font-size: 15px; font-weight: 400; }

.mobile-nav-footer { margin-top: 26px; display: grid; gap: 12px; }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
}
.nav-overlay.open { opacity: 1; visibility: visible; }

/* ==========================================================================
   9. Hero
   ========================================================================== */
.hero-section {
  position: relative;
  min-height: min(100vh, 860px);
  display: flex;
  flex-direction: column;
  /* copy sits on the floor of the frame, so the photo carries the top */
  justify-content: flex-end;
  padding-top: calc(var(--header-h) + 64px);
  padding-bottom: 0;
  background: var(--color-bg-darker);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 42%;
  overflow: hidden;
}
/* Video sits over the poster background, under the legibility overlay */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  border: 0;
  pointer-events: none;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Lighter through the middle so the building stays visible, with the
     weight moved to the foot where the copy sits. */
  background:
    linear-gradient(to bottom, rgba(16,13,9,0.42) 0%, rgba(16,13,9,0.20) 38%, rgba(16,13,9,0.82) 100%);
}

/* Respect reduced-motion: hold the poster frame instead of playing */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 40px;
}

.hero-copy { max-width: min(940px, 70%); }

/* Two-column hero (service pages that carry a lead form) */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 56px;
  align-items: end;
}

.hero-section h1 {
  color: var(--color-text-inverse);
  font-size: clamp(32px, 3.9vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
  max-width: 100%;
  overflow-wrap: break-word;
  /* keeps the two lines evenly weighted instead of leaving an orphan */
  text-wrap: balance;
}

.hero-subtitle {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: 32px;
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-actions .btn { flex: 0 0 auto; }

/* Hero form card */
.hero-form-card {
  background: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4);
}
.hero-form-card h2 {
  font-size: clamp(22px, 2.2vw, 27px);
  margin-bottom: 6px;
}
.hero-form-card .form-intro {
  font-size: 15px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

/* Page hero (inner pages) */
.page-hero {
  position: relative;
  min-height: 58vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 70px) 0 70px;
  background: var(--color-bg-darker);
  overflow: hidden;
}
.page-hero .hero-bg::after {
  background: linear-gradient(to bottom, rgba(16,13,9,0.78) 0%, rgba(16,13,9,0.62) 60%, rgba(16,13,9,0.86) 100%);
}
.page-hero-content { position: relative; z-index: 2; width: 100%; }

/* Service page hero: copy and CTA beside the lead form */
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 56px;
  align-items: center;
}
.page-hero-copy p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
}
.page-hero-copy p + p { margin-top: 14px; }
.page-hero-actions { margin-top: 28px; }
.page-hero h1 {
  color: var(--color-text-inverse);
  font-size: clamp(32px, 3.9vw, 52px);
  margin-bottom: 16px;
  max-width: 24ch;
}
.page-hero p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 18px;
}
.breadcrumb a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb svg { width: 12px; height: 12px; opacity: 0.5; }

/* ==========================================================================
   10. Trust Bar
   ========================================================================== */
.section-pad-tight { padding-top: 100px; padding-bottom: 52px; }
.trust-bar { background: var(--color-bg); padding: 0 0 100px; }
.trust-bar .trust-bar-inner {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 12px;
}
.trust-bar-inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 30px 0;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 4px 22px;
  border-right: 1px solid var(--color-border);
}
.trust-item:last-child { border-right: 0; }
.trust-item svg { width: 24px; height: 24px; color: var(--color-accent); flex-shrink: 0; }
.trust-text { display: flex; flex-direction: column; line-height: 1.3; }
.trust-number { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.trust-label { font-size: 13px; color: var(--color-text-muted); }

/* ==========================================================================
   11. Sections
   ========================================================================== */

/* Split (about / intro) */
.split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
}
.split-media { position: relative; }
.split-media img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.split-body p + p { margin-top: 16px; }
.split-body .btn { margin-top: 28px; }

/* Story mosaic (about page intro): copy on the left, a 2x2 tile grid on the
   right that alternates project photos with the two facts we can actually
   back up: the service-area count and the state license number. */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.story-body p + p { margin-top: 16px; }
.story-body .btn { margin-top: 30px; }

.section-label-pill {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  margin-bottom: 18px;
}

/* Two independent columns, so a short stat tile never leaves a hole under a
   tall photo. The right column is nudged down to stagger the seams. */
.story-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
.story-col { display: flex; flex-direction: column; gap: 22px; }
.story-col-b { padding-top: 34px; }

.story-tile {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}
.story-tile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-tile-a img { height: 300px; }
.story-tile-d img { height: 330px; }

.story-tile-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
  min-height: 168px;
  padding: 28px 22px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.story-tile-accent { background: var(--color-accent); color: var(--btn-primary-text); }

.story-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.story-stat-label { font-size: 14.5px; line-height: 1.4; opacity: 0.92; }

/* Subtle lift so the mosaic feels alive without distracting from the copy. */
@media (hover: hover) {
  .story-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
}

@media (max-width: 1024px) {
  .story-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 560px) {
  .story-mosaic { grid-template-columns: 1fr; gap: 16px; }
  .story-col { gap: 16px; }
  .story-col-b { padding-top: 0; }
  .story-tile-stat { min-height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-tile { transition: none; }
  .story-tile:hover { transform: none; }
}

.check-list { margin: 22px 0 0; display: grid; gap: 11px; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 16px;
}
.check-list svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-accent);
}
/* readable check items on dark panels */
.band-body .check-list li,
.bg-dark .check-list li { color: rgba(255, 255, 255, 0.78); }

/* Services grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

/* Services carousel: heading left, arrows right, a scroll-snapped row of
   numbered cards below. It is a real scroller, so it works by swipe and by
   keyboard even before the arrow script runs. */
.svc-carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.svc-carousel-head .section-heading { margin-bottom: 0; }
.svc-carousel-nav { display: flex; gap: 10px; flex-shrink: 0; }
.svc-nav-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-card);
  color: var(--color-primary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.svc-nav-btn svg { width: 19px; height: 19px; }
.svc-nav-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.svc-nav-btn-solid {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.svc-nav-btn-solid:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--btn-primary-text); }
.svc-nav-btn[disabled] { opacity: 0.35; cursor: default; }
.svc-nav-btn[disabled]:hover {
  background: var(--color-bg-card);
  border-color: var(--color-border-strong);
  color: var(--color-primary);
}
.svc-nav-btn-solid[disabled]:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }

.svc-carousel-lead { margin-top: 18px; max-width: 74ch; }

.svc-track {
  display: grid;
  grid-auto-flow: column;
  /* Slightly wider than a clean quarter, so the fourth card is cut off at
     the edge. That shows the row continues and keeps the arrows live. */
  grid-auto-columns: calc((100% - 3 * 26px) / 3.35);
  gap: 26px;
  margin-top: 44px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.svc-track::-webkit-scrollbar { display: none; }

.svc-slide {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.svc-slide-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.svc-slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.svc-slide-num {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-inverse);
  text-shadow: 0 2px 12px rgba(16, 13, 9, 0.6);
}
.svc-slide-body { padding-top: 18px; }
.svc-slide-body h3 { font-size: 19px; margin-bottom: 8px; }
.svc-slide-body p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.svc-slide-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  transition: gap var(--transition), color var(--transition);
}
.svc-slide-link svg { width: 15px; height: 15px; }

@media (hover: hover) {
  .svc-slide:hover .svc-slide-media img { transform: scale(1.06); }
  .svc-slide:hover .svc-slide-link { gap: 13px; color: var(--color-accent-dark); }
}

@media (max-width: 1024px) {
  .svc-track { grid-auto-columns: calc((100% - 26px) / 2); }
}
@media (max-width: 720px) {
  .svc-carousel-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .svc-track { grid-auto-columns: 82%; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-track { scroll-behavior: auto; }
  .svc-slide-media img, .svc-slide-link, .svc-nav-btn { transition: none; }
  .svc-slide:hover .svc-slide-media img { transform: none; }
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 30px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text-inverse);
  isolation: isolate;
  transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.service-card-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.service-card:hover .service-card-bg { transform: scale(1.05); }
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(16,13,9,0.94) 12%, rgba(16,13,9,0.42) 62%, rgba(16,13,9,0.3) 100%);
}
.service-card-body { margin-top: auto; }
.service-card h3 {
  color: var(--color-text-inverse);
  margin-bottom: 10px;
}
.service-card p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 16px;
}
.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.service-card-link svg { width: 15px; height: 15px; transition: transform var(--transition); }
.service-card:hover .service-card-link svg { transform: translateX(4px); }

/* Feature (why choose) grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.feature-item {
  padding: 32px 26px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}
.feature-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.feature-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  color: var(--color-accent);
}
.feature-icon svg { width: 24px; height: 24px; }
.feature-item h3 { font-size: 20px; margin-bottom: 10px; }
.feature-item p { font-size: 15px; line-height: 1.65; color: var(--color-text-muted); }

/* Service cards (location pages): photo on top, copy below. The three cards
   step from light to dark across the row so the group reads as one unit
   instead of three repeats. */
.svc-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.svc-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-alt);
  box-shadow: var(--shadow-card);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.svc-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  /* Deliberately not clipped: the icon badge overhangs the bottom edge.
     The photo is clipped by its own wrapper so the zoom still crops. */
}
.svc-card-shot {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.svc-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.svc-card-icon {
  position: absolute;
  left: 24px;
  bottom: -26px;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  color: var(--color-primary);
  box-shadow: var(--shadow-card);
  transition: transform 0.4s ease;
}
.svc-card-icon svg { width: 26px; height: 26px; }
.svc-card-body { padding: 46px 28px 30px; }
.svc-card-body h3 { font-size: 21px; margin-bottom: 10px; }
.svc-card-body p { font-size: 15px; line-height: 1.65; color: var(--color-text-muted); }

/* A plain inline link, not a button: the whole card already carries the
   click, so a boxed CTA reads as a second, competing target. */
.svc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  transition: gap 0.3s ease, color 0.3s ease;
}
.svc-card-link svg { width: 16px; height: 16px; }

/* Card 2 and 3 carry the brand tones, so the row steps light -> mid -> dark. */
.svc-card-siding { background: var(--color-secondary); }
.svc-card-restoration { background: var(--color-primary); }
.svc-card-siding .svc-card-body h3,
.svc-card-siding .svc-card-body p,
.svc-card-restoration .svc-card-body h3,
.svc-card-restoration .svc-card-body p { color: var(--color-text-inverse); }
.svc-card-siding .svc-card-body p,
.svc-card-restoration .svc-card-body p { opacity: 0.9; }
.svc-card-siding .svc-card-icon,
.svc-card-restoration .svc-card-icon {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.svc-card-restoration .svc-card-icon { background: var(--color-accent); color: var(--btn-primary-text); }
.svc-card-siding .svc-card-link,
.svc-card-restoration .svc-card-link { color: var(--color-text-inverse); }

/* Subtle motion: the card lifts, its photo pushes in slightly, the icon
   nudges up and the arrow slides. */
@media (hover: hover) {
  .svc-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }
  .svc-card:hover .svc-card-media img { transform: scale(1.07); }
  .svc-card:hover .svc-card-icon { transform: translateY(-6px); }
  .svc-card:hover .svc-card-link { gap: 14px; }
  .svc-card-link:hover { color: var(--color-accent-dark); }
  .svc-card-siding .svc-card-link:hover,
  .svc-card-restoration .svc-card-link:hover { color: var(--color-accent); }
}

@media (max-width: 1024px) {
  .svc-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 640px) {
  .svc-card-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card-media img, .svc-card-icon, .svc-card-link { transition: none; }
  .svc-card:hover { transform: none; }
  .svc-card:hover .svc-card-media img { transform: none; }
  .svc-card:hover .svc-card-icon { transform: none; }
}

/* Wide feature band (dark, image + copy) */
.band-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.band-media { min-height: 420px; background-size: cover; background-position: center; }
.band-body { padding: 56px; background: var(--color-bg-dark); display: flex; flex-direction: column; justify-content: center; }
/* Any heading here sits on a dark panel, so cover h3 as well: an h3
   was rendering near-black on near-black at 1.09:1. */
.band-body h2,
.band-body h3 { color: var(--color-text-inverse); margin-bottom: 16px; }
.band-body p { color: rgba(255, 255, 255, 0.74); }
.band-body p + p { margin-top: 14px; }
.band-body .btn { margin-top: 28px; align-self: flex-start; }

/* Sub-service list */
/* Sub-service cards (service detail pages) */
.subservice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.subservice-item {
  padding: 30px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
}
.subservice-item h3 { font-size: 20px; margin-bottom: 10px; }
.subservice-item p { font-size: 15px; line-height: 1.65; color: var(--color-text-muted); }

/* Roofing service cards: numbered, with an icon, so the four services read
   as a sequence rather than four identical text boxes. */
.roof-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.roof-card {
  position: relative;
  padding: 32px 30px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.roof-card-num {
  position: absolute;
  top: 16px;
  right: 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.16;
}
.roof-card-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  color: var(--color-primary);
  transition: background var(--transition), color var(--transition);
}
.roof-card-icon svg { width: 24px; height: 24px; }
.roof-card h3 { font-size: 20px; margin-bottom: 10px; padding-right: 48px; }
.roof-card p { font-size: 15px; line-height: 1.65; color: var(--color-text-muted); }

@media (hover: hover) {
  .roof-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--color-accent);
  }
  .roof-card:hover .roof-card-icon { background: var(--color-accent); color: var(--btn-primary-text); }
}

/* Resource cards: the linked guides carry their own article image. */
.res-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.res-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.res-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.res-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.res-card-body { padding: 26px 26px 28px; }
.res-card-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-bg-alt);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.res-card h3 { font-size: 19px; line-height: 1.3; margin-bottom: 10px; }
.res-card p { font-size: 15px; line-height: 1.65; color: var(--color-text-muted); }
.res-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  transition: gap var(--transition), color var(--transition);
}
.res-card-link svg { width: 15px; height: 15px; }

@media (hover: hover) {
  .res-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
  .res-card:hover .res-card-media img { transform: scale(1.06); }
  .res-card:hover .res-card-link { gap: 14px; color: var(--color-accent-dark); }
}

/* Material cards: five siding types as a grid rather than five full-width
   alternating rows, which made the section very long to scroll. */
.mat-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.mat-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.mat-card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-alt); }
.mat-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.mat-card-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.mat-card-body h3 { font-size: 19px; margin-bottom: 14px; }
.mat-card-list { margin: 0 0 16px; }
.mat-card-list li { font-size: 14.5px; }
.mat-card-body p {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (hover: hover) {
  .mat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
  .mat-card:hover .mat-card-media img { transform: scale(1.06); }
}

/* Featured article: one guide given room rather than a thin single row.
   Reads as editorial, not a call to action: no panel button, and the
   chips name what the article actually compares. */
.feature-article {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0;
  margin-top: 44px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feature-article-media { display: block; overflow: hidden; background: var(--color-bg-alt); }
.feature-article-media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-height: 420px;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}
.feature-article-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 46px;
}
.feature-article-kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: 14px;
}
.feature-article h3 { font-size: 25px; line-height: 1.25; margin-bottom: 14px; }
.feature-article h3 a { color: inherit; text-decoration: none; transition: color var(--transition); }
.feature-article-body > p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
}
.feature-article-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
}
.feature-article-chips li {
  padding: 6px 13px;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.feature-article-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  margin-top: 26px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-primary);
  transition: gap var(--transition), color var(--transition);
}
.feature-article-link svg { width: 17px; height: 17px; }

@media (hover: hover) {
  .feature-article:hover .feature-article-media img { transform: scale(1.05); }
  .feature-article h3 a:hover { color: var(--color-accent-dark); }
  .feature-article-link:hover { gap: 15px; color: var(--color-accent-dark); }
}

@media (max-width: 860px) {
  .feature-article { grid-template-columns: 1fr; }
  .feature-article-media img { min-height: 240px; }
  .feature-article-body { padding: 30px 26px 32px; }
  .feature-article h3 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-article-media img, .feature-article-link, .feature-article h3 a { transition: none; }
  .feature-article:hover .feature-article-media img { transform: none; }
}

/* A single resource reads better wide than beside an empty half-row. */
.res-card-grid-single { grid-template-columns: 1fr; }
.res-card-wide { flex-direction: row; align-items: stretch; }
.res-card-wide .res-card-media { flex: 0 0 42%; aspect-ratio: auto; }
.res-card-wide .res-card-body { display: flex; flex-direction: column; justify-content: center; padding: 34px 36px; }

@media (max-width: 1024px) {
  .mat-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .roof-card-grid, .res-card-grid { grid-template-columns: 1fr; }
  .mat-card-grid { grid-template-columns: 1fr; }
  .res-card-wide { flex-direction: column; }
  .res-card-wide .res-card-media { flex: none; aspect-ratio: 16 / 9; }
  .res-card-wide .res-card-body { padding: 26px 26px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .mat-card, .mat-card-media img { transition: none; }
  .mat-card:hover { transform: none; }
  .mat-card:hover .mat-card-media img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .roof-card, .res-card, .res-card-media img, .res-card-link, .roof-card-icon { transition: none; }
  .roof-card:hover, .res-card:hover { transform: none; }
  .res-card:hover .res-card-media img { transform: none; }
}


/* Roofing section: intro split, photo beside a numbered service list */
.roofing-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 52px;
}
.roofing-head .section-heading { margin: 0; }
.roofing-head p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 60ch;
}

.roofing-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 44px;
  align-items: stretch;
}

.roofing-figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 460px;
}
.roofing-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.roofing-figure-link {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-bg-card);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.roofing-figure-link svg { width: 17px; height: 17px; color: var(--color-accent); transition: transform var(--transition); }
.roofing-figure-link:hover { background: var(--color-bg-dark); color: var(--color-text-inverse); }
.roofing-figure-link:hover svg { transform: translateX(4px); }

.roofing-list { list-style: none; margin: 0; padding: 0; }
.roofing-list li {
  display: flex;
  gap: 20px;
  padding: 26px 0;
  border-top: 1px solid var(--color-border);
}
.roofing-list li:first-child { padding-top: 0; border-top: 0; }
.roofing-list li:last-child { padding-bottom: 0; }
.roofing-list-num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.4;
  min-width: 34px;
}
.roofing-list h3 { font-size: 20px; margin-bottom: 8px; }
.roofing-list p {
  font-size: 15px;
  line-height: 1.68;
  color: var(--color-text-muted);
  margin: 0;
  max-width: none;
}

/* Service split: headlines stacked in one column, image panel in the other */
.svc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}
.svc-split-media-left .svc-panes { order: 1; }
.svc-split-media-left .svc-heads { order: 2; }

.svc-heads { display: flex; flex-direction: column; padding-top: 4px; }

.svc-head {
  display: block;
  width: 100%;
  padding: 26px 0;
  text-align: left;
  font-family: var(--font-body);
  background: none;
  border: 0;
  border-top: 1px solid var(--color-border);
  cursor: pointer;
  transition: border-color var(--transition);
}
.svc-head:first-child { border-top: 0; padding-top: 0; }
.svc-head-title { display: block; }
.svc-head h3 {
  font-family: var(--font-display);
  font-size: clamp(23px, 2vw, 30px);
  line-height: 1.16;
  color: var(--color-text-muted);
  margin: 0;
  transition: color var(--transition);
}

/* The copy opens under the active headline */
.svc-head-copy {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease;
}
.svc-head-copy > span {
  overflow: hidden;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 54ch;
}

.svc-head.is-active h3 { color: var(--color-text); }
.svc-head.is-active .svc-head-copy {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 14px;
}
.svc-head:hover h3 { color: var(--color-text); }
.svc-head:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

/* Image panel: one pane per headline, cross-faded */
.svc-panes {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-alt);
}
.svc-pane {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.svc-pane img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-pane.is-active { opacity: 1; }

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: var(--color-bg-alt);
}
.gallery-item.wide { aspect-ratio: 4 / 3; }

/* Our Previous Work mosaic: the intro block sits in the grid as the first
   cell, so the copy and the photos read as one composition. */
.work-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 210px;
  gap: 18px;
}
.work-intro {
  grid-column: span 1;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 12px;
}
.work-intro .section-heading { margin-bottom: 14px; }
.work-intro p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.work-more {
  align-self: flex-start;
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: gap var(--transition);
}
.work-more svg { width: 17px; height: 17px; }
.work-more:hover { gap: 15px; }

/* Tile placement: one tall, two short, one wide. */
.work-tile-a { grid-column: span 1; grid-row: span 2; }
.work-tile-b { grid-column: span 1; grid-row: span 1; }
.work-tile-c { grid-column: span 1; grid-row: span 1; }
.work-tile-d { grid-column: span 2; grid-row: span 1; }
/* Fifth tile: fills the cell beside the wide one on pages that carry no
   closing note, so the mosaic does not end on an empty square. */
.work-tile-e { grid-column: span 1; grid-row: span 1; }

.work-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}
.work-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}
/* A permanent foot gradient keeps the label readable, and it deepens on
   hover so the caption lifts off the photo. */
.work-tile-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 13, 9, 0.72) 0%, rgba(16, 13, 9, 0.12) 46%, rgba(16, 13, 9, 0) 72%);
  transition: opacity var(--transition);
}
.work-tile-label {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-inverse);
  text-shadow: 0 1px 10px rgba(16, 13, 9, 0.5);
  transition: transform var(--transition);
}
.work-tile-zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--transition), transform var(--transition);
}
.work-tile-zoom svg { width: 16px; height: 16px; }

@media (hover: hover) {
  .work-tile:hover img { transform: scale(1.06); }
  .work-tile:hover .work-tile-veil { opacity: 0.82; }
  .work-tile:hover .work-tile-label { transform: translateY(-4px); }
  .work-tile:hover .work-tile-zoom { opacity: 1; transform: scale(1); }
}
.work-tile:focus-visible .work-tile-zoom { opacity: 1; transform: scale(1); }

/* The People (about): intro beside a crew photo, then a card per name. The
   reviews are the point of the section, so each quote gets its own block
   rather than being buried in a paragraph. */
.people-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 56px;
  align-items: center;
}
/* the intro is short, so cap the photo rather than letting the row stretch */
.people-photo img { max-height: 300px; }
.people-head-copy p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-muted);
  max-width: 56ch;
}
.people-photo { margin: 0; }
.people-photo img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 44px;
}
.person-card {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.person-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
/* Initial monogram: the photos we have are job-site shots of the crew, not
   individual portraits, so a mark stands in rather than mislabelling a face. */
.person-mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}
.person-card h3 { font-size: 19px; margin-bottom: 2px; }
.person-role {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.person-card > p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.person-quote {
  position: relative;
  margin: 20px 0 0;
  padding: 20px 20px 20px 22px;
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.person-quote svg {
  width: 22px;
  height: 22px;
  color: var(--color-accent);
  opacity: 0.55;
  margin-bottom: 8px;
}
.person-quote p {
  font-size: 14.5px;
  line-height: 1.65;
  font-style: italic;
  color: var(--color-text);
  margin: 0;
}

@media (hover: hover) {
  .person-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
}

@media (max-width: 1024px) {
  .people-head { grid-template-columns: 1fr; gap: 36px; }
  .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .people-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .person-card { transition: none; }
  .person-card:hover { transform: none; }
}

/* Closing note: fills the open cell beside the wide tile rather than
   sitting alone under the grid. */
.work-note {
  grid-column: span 1;
  grid-row: span 1;
  align-self: center;
  margin: 0;
  padding: 4px 6px 4px 10px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: none;
}

@media (max-width: 1024px) {
  .work-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
  .work-intro { grid-column: span 2; grid-row: span 1; padding-right: 0; }
  .work-tile-a { grid-row: span 1; }
  .work-tile-d { grid-column: span 1; }
  .work-note { grid-column: span 1; }
  .work-tile-e { grid-column: span 1; }
}
@media (max-width: 600px) {
  .work-mosaic { grid-template-columns: 1fr; grid-auto-rows: 190px; gap: 14px; }
  .work-intro { grid-column: span 1; }
  .work-tile-d { grid-column: span 1; }
  .work-note { grid-column: span 1; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .work-tile img, .work-tile-veil, .work-tile-label, .work-tile-zoom, .work-more { transition: none; }
  .work-tile:hover img { transform: none; }
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(16, 13, 9, 0.55);
  opacity: 0;
  transition: opacity var(--transition);
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay svg { width: 30px; height: 30px; color: var(--color-text-inverse); }
.gallery-row-2 { margin-top: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  place-items: center;
  padding: 40px 20px;
  background: rgba(12, 10, 7, 0.94);
}
.lightbox.open { display: grid; }
.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 84vh;
  width: auto;
  border-radius: var(--radius);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: var(--color-text-inverse);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-close { top: 26px; right: 26px; }
.lightbox-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 26px; top: 50%; transform: translateY(-50%); }
.lightbox svg { width: 22px; height: 22px; }

/* Testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.testimonial-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.testimonial-stars svg { width: 17px; height: 17px; color: var(--color-star); }
.testimonial-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 20px;
  flex-grow: 1;
}
.testimonial-author {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

/* Step badge, shared by the process carousel */
.step-number {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border-radius: var(--radius);
}

/* ==========================================================================
   Process marquee
   Steps drift right-to-left on a loop. The track holds two copies of the
   sequence and translates by exactly half its width, so the seam is
   invisible. Pauses on hover and focus so the cards can be read.
   ========================================================================== */
.proc-marquee {
  overflow: hidden;
  /* full-bleed so cards enter and leave past the container edges */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 6px 0;
}

.pm-track {
  display: flex;
  width: max-content;
  gap: 26px;
  padding-left: 26px;
  animation: pm-drift 46s linear infinite;
}
.proc-marquee:hover .pm-track,
.proc-marquee:focus-within .pm-track { animation-play-state: paused; }

/* Draggable mode (service pages): on hover the drift hands off to a real
   scroller, so the reader can pull the row either way to reach a step. */
[data-proc-drag] { cursor: grab; }
[data-proc-drag].is-dragging { cursor: grabbing; }
[data-proc-drag].is-scrollable {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-proc-drag].is-scrollable::-webkit-scrollbar { display: none; }
[data-proc-drag].is-scrollable .pm-track { animation: none; }
[data-proc-drag].is-dragging .pc-step { user-select: none; }

@keyframes pm-drift {
  from { transform: translateX(0); }
  /* one full sequence is exactly half the track, so -50% is the seam */
  to   { transform: translateX(-50%); }
}

.pc-step {
  flex: 0 0 320px;
  padding: 30px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.pc-step h3 { font-size: 19px; margin-bottom: 10px; }
.pc-step p { font-size: 15px; line-height: 1.65; color: var(--color-text-muted); margin: 0; max-width: none; }

@media (max-width: 768px) {
  .pc-step { flex-basis: 274px; padding: 24px; }
  .pm-track { animation-duration: 38s; }
}

/* Motion-sensitive viewers get a static, scrollable row instead of drift */
@media (prefers-reduced-motion: reduce) {
  .proc-marquee { overflow-x: auto; }
  .pm-track { animation: none; }
}

/* CTA strip */
.cta-strip {
  position: relative;
  padding: 84px 0;
  background: var(--color-bg-dark);
  overflow: hidden;
}
.cta-strip-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.18;
}
.cta-strip-inner { position: relative; z-index: 2; text-align: center; }
.cta-strip h2 { color: var(--color-text-inverse); margin-bottom: 14px; }
.cta-strip p { color: rgba(255, 255, 255, 0.76); margin: 0 auto 30px; }
.cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 700;
  color: var(--color-text-inverse);
  text-decoration: none;
  margin-bottom: 26px;
}
.cta-phone:hover { color: var(--color-accent); }
.cta-phone svg { width: 30px; height: 30px; color: var(--color-accent); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* FAQ */
.faq-list { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item[open] { border-color: var(--color-border-strong); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  flex-shrink: 0;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-accent);
  transition: transform var(--transition);
}
.faq-item[open] .faq-question::after { content: '\00d7'; transform: rotate(90deg); }
.faq-answer { padding: 0 24px 22px; }
.faq-answer p { font-size: 16px; color: var(--color-text-muted); max-width: none; }
.faq-answer p + p { margin-top: 12px; }

/* Areas grid */
/* City section (location pages): copy beside a photo of real work, so the
   section is not a wall of text. */
.city-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin-top: 44px;
}
.city-copy p + p { margin-top: 16px; }
.city-copy .btn { margin-top: 28px; }

.city-photo { margin: 0; }
.city-photo img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  box-shadow: var(--shadow-card);
}

@media (max-width: 1024px) {
  .city-layout { grid-template-columns: 1fr; gap: 36px; }
  .city-photo img { min-height: 260px; }
}

.areas-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.area-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 18px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.area-link svg { width: 15px; height: 15px; color: var(--color-accent); flex-shrink: 0; }
.area-link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

/* Areas: city links beside an interactive map of the service area */
.area-layout { display: block; }
.area-layout .areas-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.area-layout .area-map { margin-top: 34px; }
/* full-width now, so cap the height and let the SVG letterbox inside it */
.area-map-svg { max-height: 620px; }
.area-link.is-active,
.area-layout .area-link:hover {
  background: var(--color-bg-dark);
  border-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
}
.area-link.is-active svg,
.area-layout .area-link:hover svg { color: var(--color-accent); }

/* Map panel */
.area-map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-card);
  padding: 14px;
}
.area-map-svg { width: 100%; height: auto; display: block; }

.map-river {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.22;
}
.map-pin-leader {
  stroke: var(--color-border-strong);
  stroke-width: 1.2;
}
.map-home-halo { fill: var(--color-accent); opacity: 0.22; }

.map-radius {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-dasharray: 7 9;
  opacity: 0.42;
}

/* Home base marker */
.map-home-dot { fill: var(--color-accent); stroke: var(--color-bg-card); stroke-width: 3; }
.map-home-label {
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 700;
  fill: var(--color-text);
}

/* City pins */
.map-pin { cursor: pointer; }
.map-pin-halo { fill: var(--color-accent); opacity: 0; transition: opacity var(--transition); }
.map-pin-dot {
  fill: var(--color-bg-card);
  stroke: var(--color-secondary);
  stroke-width: 2.5;
  transition: all var(--transition);
}
.map-pin-label {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 600;
  fill: var(--color-text-muted);
  transition: fill var(--transition);
  paint-order: stroke;
  stroke: var(--color-bg-card);
  stroke-width: 4;
  stroke-linejoin: round;
}
.map-pin:hover .map-pin-halo,
.map-pin.is-active .map-pin-halo { opacity: 0.24; }
.map-pin:hover .map-pin-dot,
.map-pin.is-active .map-pin-dot {
  fill: var(--color-accent);
  stroke: var(--color-primary-dark);
  r: 7.5;
}
.map-pin:hover .map-pin-label,
.map-pin.is-active .map-pin-label { fill: var(--color-text); font-weight: 700; }
.map-pin:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.area-map-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 4px 6px 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
  line-height: 1.4;
}
.area-map-badge-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--color-bg-alt);
  border-radius: 50%;
  color: var(--color-accent);
}
.area-map-badge-icon svg { width: 18px; height: 18px; }
.area-map-head div { display: flex; flex-direction: column; gap: 2px; }
.area-map-head strong { font-size: 15px; font-weight: 700; }
.area-map-head span { font-size: 13.5px; color: var(--color-text-muted); }

/* Blog cards */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.post-card-media { aspect-ratio: 16 / 10; overflow: hidden; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.post-card:hover .post-card-media img { transform: scale(1.05); }
.post-card-body { padding: 26px; display: flex; flex-direction: column; flex-grow: 1; }
.post-card h3 { font-size: 20px; margin-bottom: 10px; }
.post-card p { font-size: 15px; line-height: 1.65; color: var(--color-text-muted); margin-bottom: 18px; }
.post-card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.post-card-link svg { width: 15px; height: 15px; }

/* Article body */
/* Article + archive sidebar. The body keeps its comfortable measure; the
   aside sticks under the header so other articles stay reachable while
   reading a long post. */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
}
.article-layout .article-body { max-width: 760px; margin: 0; }

.article-aside { position: sticky; top: calc(var(--header-h) + 24px); }
.arch-card {
  padding: 26px 24px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.arch-heading {
  font-size: 18px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.arch-list { list-style: none; margin: 0; padding: 0; }
.arch-list li + li { margin-top: 4px; }
.arch-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 8px;
  margin: 0 -8px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--transition);
}
.arch-thumb {
  flex-shrink: 0;
  width: 62px;
  height: 52px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-card);
}
.arch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arch-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
  transition: color var(--transition);
}
.arch-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  transition: gap var(--transition), color var(--transition);
}
.arch-all svg { width: 15px; height: 15px; }

@media (hover: hover) {
  .arch-item:hover { background: var(--color-bg-card); }
  .arch-item:hover .arch-title { color: var(--color-accent-dark); }
  .arch-all:hover { gap: 14px; color: var(--color-accent-dark); }
}

@media (max-width: 1024px) {
  .article-layout { grid-template-columns: 1fr; gap: 44px; }
  .article-layout .article-body { max-width: 760px; margin: 0 auto; }
  .article-aside { position: static; max-width: 760px; margin: 0 auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .arch-item, .arch-title, .arch-all { transition: none; }
}

.article-body { max-width: 760px; margin: 0 auto; }
.article-body h2 { margin: 42px 0 16px; }
.article-body h3 { margin: 32px 0 12px; }
.article-body p { margin-bottom: 16px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 22px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--color-border);
  font-size: 15px;
  color: var(--color-text-muted);
}

/* ==========================================================================
   13. Forms
   ========================================================================== */
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}
.form-group .req { color: var(--color-accent); }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 13px 15px;
  font-size: 16px;
  background: var(--color-text-inverse);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(224, 92, 42, 0.14);
}
.form-group textarea { resize: vertical; min-height: 104px; }

.form-success,
.form-error {
  margin-top: 14px;
  padding: 14px 16px;
  font-size: 15px;
  border-radius: var(--radius);
}
.form-success { background: var(--color-success-bg); border: 1px solid var(--color-success-border); color: var(--color-success-text); }
.form-error { background: var(--color-error-bg); border: 1px solid var(--color-error-border); color: var(--color-error-text); }
.form-success p, .form-error p { margin: 0; max-width: none; }

/* Contact section: split panel, dark detail rail + light form card */
.contact-section { padding: 100px 0; }
.contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-bg-dark);
  box-shadow: 0 30px 80px rgba(16, 13, 9, 0.16);
}

/* Left rail */
.contact-rail {
  position: relative;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-dark);
}
.contact-rail::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 0% 0%, rgba(201, 151, 92, 0.16) 0%, rgba(201, 151, 92, 0) 62%);
  pointer-events: none;
}
.contact-rail > * { position: relative; z-index: 1; }

.contact-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
}
.contact-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 2.5vw, 40px);
  line-height: 1.16;
  color: var(--color-text-inverse);
  text-wrap: balance;
  margin: 0 0 16px;
}
.contact-lead {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
  margin: 0 0 30px;
}

/* Detail lines */
.contact-line {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 0;
  text-decoration: none;
  border-top: 1px solid var(--color-border-dark);
  transition: all var(--transition);
}
.contact-line-lead {
  border-top: 0;
  padding: 18px 20px;
  margin-bottom: 26px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
}
.contact-line-lead:hover {
  background: rgba(201, 151, 92, 0.12);
  border-color: rgba(201, 151, 92, 0.45);
}
.contact-lines { display: flex; flex-direction: column; }
.contact-lines .contact-line:hover .contact-line-value { color: var(--color-accent); }
.contact-lines .contact-line:hover .contact-line-icon { border-color: rgba(201, 151, 92, 0.5); }

.contact-line-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-dark);
  border-radius: 50%;
  color: var(--color-accent);
  transition: border-color var(--transition);
}
.contact-line-icon svg { width: 19px; height: 19px; }
.contact-line-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-line-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.contact-line-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-inverse);
  transition: color var(--transition);
  word-break: break-word;
}
.contact-line-lead .contact-line-value {
  font-family: var(--font-display);
  font-size: 25px;
  letter-spacing: -0.01em;
}
.contact-line-sub { font-size: 14px; color: rgba(255, 255, 255, 0.6); }
.contact-line-static { cursor: default; }

.contact-rail-license {
  margin-top: auto;
  padding-top: 30px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
}

/* Right: form card */
.contact-form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px 48px;
  background: var(--color-bg-alt);
}


/* GMB map (about + contact) */
.gmb-map-section { line-height: 0; }
.gmb-map-section iframe { width: 100%; height: 420px; border: 0; display: block; }

/* ==========================================================================
   STICKY MOBILE CALL BAR
   Two actions pinned to the bottom at <=1024px. z-index 1150 puts it above
   the mobile nav (1100) so calling stays one tap even with the menu open,
   while staying under the lightbox (1200). Hidden above 1024px, where the
   header already shows both a phone number and a Free Consultation button.
   ========================================================================== */
.callbar { display: none; }

@media (max-width: 1024px) {
  .page-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .page-hero-copy p { max-width: none; }
  .page-hero .hero-form-card { max-width: 560px; }
  .callbar {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1150;
    padding: 10px 18px;
    /* safe-area keeps the bar clear of the iOS home indicator */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(25, 21, 16, 0.96);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--color-border-dark);
  }
  .callbar .btn {
    width: 100%; justify-content: center;
    padding: 14px 10px;
    font-size: 15px;
    white-space: nowrap;
  }
  /* the bar sits on dark, so the outline button needs its light-on-dark variant */
  .callbar .callbar-ghost {
    border-color: rgba(255, 255, 255, 0.38);
    color: var(--color-text-inverse);
    background: transparent;
  }
  .callbar .callbar-ghost:hover {
    background: var(--color-text-inverse);
    color: var(--color-text);
    border-color: var(--color-text-inverse);
  }
  .callbar-num { font-variant-numeric: tabular-nums; }

  /* stop the bar covering the end of the page and the menu's last links */
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .mobile-nav { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
}

/* a phone in landscape has almost no height to spare */
@media (max-width: 1024px) and (max-height: 430px) {
  .callbar { display: none; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   12. Footer
   ========================================================================== */
.site-footer { background: var(--color-bg-darker); color: rgba(255, 255, 255, 0.72); }
.footer-inner { padding: 72px 0 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 46px;
  padding-bottom: 52px;
}
.footer-logo img { height: 52px; width: auto; margin-bottom: 20px; }
.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  margin-bottom: 18px;
}
.footer-col p { font-size: 15px; line-height: 1.7; margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--color-accent); }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 13px;
  font-size: 15px;
}
.footer-contact-item svg { width: 17px; height: 17px; color: var(--color-accent); flex-shrink: 0; margin-top: 4px; }
.footer-license {
  display: inline-block;
  margin-top: 6px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-inverse);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius);
}
.footer-social { display: flex; gap: 11px; margin-top: 20px; }
.footer-social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.footer-social a:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-inverse); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bbb { margin-top: 20px; display: inline-block; }
.footer-bbb img { height: 46px; width: auto; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border-dark);
  font-size: 14px;
}
.footer-bottom a:hover { color: var(--color-accent); }

/* ==========================================================================
   404
   ========================================================================== */
.error-404-section { padding: calc(var(--header-h) + 110px) 0 110px; background: var(--color-bg-alt); }
.error-404-content { max-width: 760px; margin: 0 auto; text-align: center; }
.error-404-content h1 { margin-bottom: 16px; }
.error-404-content p { margin: 0 auto 30px; }
.error-404-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ==========================================================================
   14. Animations
   ========================================================================== */
/* Reveal-on-scroll. The hidden start state is applied only once the script
   confirms it can run, so a JS failure leaves the content visible rather
   than blanking every animated element on the page. */
.js .fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.js .fade-in-up.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .js .fade-in-up { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
  .fade-in-up { opacity: 1; transform: none; }
}

/* ==========================================================================
   15. Responsive
   ========================================================================== */
/* Below ~1500px the hero form and headline compete for width, so the
   form drops under the copy and the headline gets the full column. */
@media (max-width: 1500px) {
  .hero-section { min-height: 100vh; }
  .hero-section .hero-content { padding-top: 20px; padding-bottom: 44px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .hero-form-card { max-width: 560px; }
}

@media (max-width: 1200px) {
  /* no room for a two-column hero: drop the wordmark, copy takes the width */
  .hero-wordmark { display: none; }
  .hero-copy { max-width: 760px; }
}

@media (max-width: 1180px) {
  .trust-bar-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 0; }
  .trust-item:nth-child(3) { border-right: 0; }
  .areas-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .area-layout .areas-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .header-nav, .header-phone { display: none; }
  .mobile-menu-toggle { display: grid; place-items: center; }
  /* the desktop dropdown grid is 520px wide and must not size the page */
  .areas-grid { min-width: 0; }
  .section-pad { padding: 70px 0; }
  .section-pad-sm { padding: 52px 0; }

  .hero-section { min-height: auto; padding-top: calc(var(--header-h) + 70px); }
  /* The strip used to fill the hero foot; without it the copy needs its own
     breathing room above the section below. */
  .hero-section .hero-content { padding-bottom: 56px; }
  .hero-copy { max-width: 760px; }

  .split-grid { grid-template-columns: 1fr; gap: 40px; }
  .split-media img { min-height: 300px; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subservice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-grid { grid-template-columns: 1fr; }
  .roofing-head { grid-template-columns: 1fr; gap: 20px; align-items: start; margin-bottom: 36px; }
  .roofing-grid { grid-template-columns: 1fr; gap: 32px; }
  .roofing-figure { aspect-ratio: 16 / 10; }
  .band-media { min-height: 300px; }
  .band-body { padding: 40px; }
  .contact-panel { grid-template-columns: 1fr; }
  .area-layout .areas-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-rail { padding: 44px 36px; }
  .contact-form-wrap { padding: 44px 36px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  .section-pad { padding: 50px 0; }
  .section-pad-sm { padding: 40px 0; }

  .hero-section { padding-top: calc(var(--header-h) + 56px); }
  .hero-section .hero-content { padding-bottom: 40px; }
  /* at phone widths the copy fills the hero, so the wordmark would sit under the H1 */
  .hero-wordmark { display: none; }
  .hero-actions .btn { width: 100%; }
  .hero-form-card { padding: 24px; max-width: 100%; }
  /* keep the CTA but shrink it so the hamburger always has room */
  .header-cta { padding: 11px 14px; font-size: 12px; }
  .header-actions { gap: 10px; }
  .container { padding: 0 18px; }

  .trust-bar-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item { border-right: 0; padding: 4px 12px; }
  .areas-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-layout .areas-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .area-layout .area-link { padding: 12px 11px; font-size: 13.5px; gap: 7px; }
  .area-map { padding: 10px; }
  .map-pin-label { font-size: 18px; stroke-width: 5; }
  .map-home-label { font-size: 19px; }
  .map-pin-dot { stroke-width: 3.5; r: 7; }
  .map-home-dot { r: 10; }
  .svc-split { grid-template-columns: 1fr; gap: 28px; }
  .svc-split-media-left .svc-panes { order: 0; }
  .svc-split-media-left .svc-heads { order: 0; }
  .svc-panes { min-height: 0; aspect-ratio: 16 / 10; order: 0; }
  .svc-heads { order: 1; }
  .feature-grid, .services-grid, .subservice-grid,
  .testimonials-grid, .post-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 320px; }
  .form-row { grid-template-columns: 1fr; }
  .contact-rail { padding: 34px 22px; }
  .contact-form-wrap { padding: 34px 22px; }
  .contact-line-lead { padding: 15px 16px; }
  .contact-line-lead .contact-line-value { font-size: 21px; }
  .gmb-map-section iframe { height: 300px; }
  .area-map-head strong { font-size: 14px; }
  .area-map-head span { font-size: 13px; }
  .band-body { padding: 30px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .cta-actions .btn { width: 100%; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
}

@media (max-width: 420px) {
  .gallery-grid, .gallery-row-2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   22. Gallery Filters (gallery page)
   ========================================================================== */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.filter-btn {
  padding: 11px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: transparent;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.filter-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.filter-btn.is-active {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.gallery-item.is-hidden { display: none; }

@media (max-width: 768px) {
  .filter-btn { padding: 9px 16px; font-size: 13px; }
}

/* Article comparison table (blog posts) */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 26px;
  font-size: 15px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.spec-table th,
.spec-table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
.spec-table thead th {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border-bottom: none;
}
.spec-table tbody th {
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}
.spec-table tbody td { color: var(--color-text-muted); }
.spec-table tbody tr:nth-child(even) { background: var(--color-bg-alt); }
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td { border-bottom: none; }

/* ==========================================================================
   23. Video Placeholder
   Swap the .video-placeholder div for an <iframe> or <video> when the real
   clips arrive. The aspect ratio and framing stay the same.
   ========================================================================== */
.video-section .split-grid { align-items: center; }

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-dark);
}
.video-frame img,
.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.video-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(16, 13, 9, 0.45);
  pointer-events: none;
}
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  background: var(--color-accent);
  border: 0;
  border-radius: 50%;
  color: var(--color-text-inverse);
  box-shadow: 0 10px 34px rgba(16, 13, 9, 0.45);
  transition: transform var(--transition), background var(--transition);
}
.video-play:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--color-accent-dark); }
.video-play svg { width: 28px; height: 28px; margin-left: 4px; }
.video-caption {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 2;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   24. CTA Panel (rounded dark band with photo + play button, per reference)
   ========================================================================== */
.cta-panel-section { padding: 100px 0; }

.cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-bg-dark);
}

.cta-panel-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 64px 56px;
}
.cta-panel-body h2 {
  color: var(--color-text-inverse);
  font-size: clamp(30px, 3vw, 42px);
  margin-bottom: 16px;
}
.cta-panel-body p {
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 30px;
}

.cta-panel-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-panel-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-inverse);
  text-decoration: none;
}
.cta-panel-phone:hover { color: var(--color-accent); }
.cta-panel-phone svg { width: 20px; height: 20px; color: var(--color-accent); }

.cta-panel-media { position: relative; min-height: 380px; }
.cta-panel-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Roof installation clip. It sits over the still, which stays as the fallback
   for phones and reduced-motion, where the script never loads the file. */
.cta-panel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}
.cta-panel-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(25, 21, 16, 0.92) 0%, rgba(25, 21, 16, 0.28) 34%, rgba(25, 21, 16, 0.16) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .cta-panel-video { display: none; }
}
.cta-panel-media .video-play {
  z-index: 2;
  width: 72px;
  height: 72px;
  background: var(--color-bg-card);
  color: var(--color-accent);
}
.cta-panel-media .video-play:hover {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}
.cta-panel-media .video-caption {
  left: 50%;
  bottom: auto;
  top: calc(50% + 52px);
  transform: translateX(-50%);
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .cta-panel { grid-template-columns: 1fr; }
  .cta-panel-body { padding: 44px 32px; }
  .cta-panel-media { min-height: 300px; }
}
@media (max-width: 768px) {
  .cta-panel-section { padding: 0 0 50px; }
  .cta-panel-body { padding: 36px 24px; }
  .cta-panel-actions .btn { width: 100%; }
}

/* Home services grid: all four services visible as equal cards. */
.svc-grid-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.svc-grid-head .section-heading { margin-bottom: 0; }
.svc-grid-lead { margin-top: 18px; max-width: 74ch; }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 44px;
}
.svc-grid .svc-slide {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(16, 13, 9, 0.06);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.svc-grid .svc-slide-media { border-radius: 0; aspect-ratio: 4 / 3; }
.svc-grid .svc-slide-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 13, 9, 0.35) 0%, rgba(16, 13, 9, 0) 45%);
  pointer-events: none;
}
.svc-grid .svc-slide-num {
  z-index: 1;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--btn-primary-text);
  font-size: 16px;
  text-shadow: none;
}
.svc-grid .svc-slide-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
  border-top: 3px solid var(--color-accent);
}
.svc-grid .svc-slide-body p { flex: 1; }
.svc-grid .svc-slide-link { margin-top: 18px; }
@media (hover: hover) {
  .svc-grid .svc-slide:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(16, 13, 9, 0.14);
    border-color: var(--color-accent);
  }
}
@media (max-width: 1100px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }