/* =========================================================
   2C Roofing & Construction
   Main stylesheet. Mobile-first. No build step.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --color-blue:        #1ba0db;
  --color-blue-hover:  #1689bd;
  --color-dark:        #1a1a1a;
  --color-black:       #000000;
  --color-surface:     #fafafa;
  --color-body:        #333333;
  --color-muted:       #666666;
  --color-border:      #e5e5e5;
  --color-success:     #16a34a;
  --color-error:       #dc2626;
  --color-white:       #ffffff;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --radius-card:   12px;
  --radius-pill:   30px;
  --radius-input:  8px;

  --shadow-card:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-pop:     0 8px 24px rgba(0,0,0,0.08);

  --container: 1200px;
  --gutter:    20px;

  --header-h:  72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
input, textarea, select, button { font-family: inherit; }
a { color: var(--color-blue); text-decoration: none; }
a:hover { color: var(--color-blue-hover); }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ---------- Base typography ---------- */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-body);
  background: var(--color-white);
}
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-body);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  color: var(--color-dark);
  font-weight: 700;
  line-height: 1.15;
}
h1 {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  letter-spacing: -0.5px;
  font-weight: 700;
}
h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  letter-spacing: -0.3px;
  font-weight: 700;
}
h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.2px;
}
h4 {
  font-size: 1.125rem;
  font-weight: 600;
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: 1.125rem;
  color: var(--color-muted);
  max-width: 60ch;
}
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: 0.75rem;
}
.eyebrow.on-dark { color: var(--color-blue); }
.muted { color: var(--color-muted); }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section {
  padding: 64px 0;
}
.section-tight { padding: 40px 0; }
.section-lg    { padding: 96px 0; }
.section-dark  { background: var(--color-dark); color: #d6d6d6; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--color-white); }
.section-surface { background: var(--color-surface); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: 0.5rem; }
.stack-lg > * + * { margin-top: 1.75rem; }

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
  white-space: nowrap;
  vertical-align: middle;
  box-sizing: border-box;
  /* Hard size floor. Both primary and secondary pills compute to exactly
     this height regardless of content metrics, font fallbacks, or border
     variations. Defeats any baseline drift between adjacent buttons. */
  min-height: 48px;
  margin: 0;
}
.btn-lg {
  min-height: 56px;
}
/* Belt-and-suspenders: a button inside any flex/grid container must not
   inherit a stray top margin that pushes one pill below its sibling. */
.btn-row > .btn,
.cta-band-actions > .btn,
.hero-actions > .btn {
  margin-top: 0;
  margin-bottom: 0;
  align-self: center;
}

/* Mobile button stack: moved to the bottom of the file so it reliably
   overrides .hero-actions .btn / .cta-band-actions .btn rules that live
   later in the source than the early section. See end of file. */
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--color-blue);
  color: var(--color-white);
}
.btn-primary:hover { background: var(--color-blue-hover); color: var(--color-white); }
.btn-secondary {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,0.4);
}
.btn-secondary:hover { background: rgba(255,255,255,0.08); color: var(--color-white); }
.btn-dark {
  background: var(--color-dark);
  color: var(--color-white);
}
.btn-dark:hover { background: #2a2a2a; color: var(--color-white); }
.btn-ghost {
  background: transparent;
  color: var(--color-dark);
  border-color: var(--color-border);
}
.btn-ghost:hover { background: var(--color-surface); color: var(--color-dark); }
.btn-block { width: 100%; }
.btn-lg { padding: 18px 34px; font-size: 1.05rem; }
.btn-sm { padding: 10px 18px; font-size: 0.9rem; }

/* Paired / stacked button spacing.
   - `.btn-row` is the explicit utility for new markup.
   - The :has() rules catch existing inline button pairs sitting inside the
     common .mt-* and <p> wrappers, so they pick up consistent gap on mobile
     without retrofitting every page.
   :has() is supported in Safari 15.4+, Chrome 105+, Firefox 121+ (2026 safe). */
.btn-row,
p:has(> .btn + .btn),
p:has(> .btn + a.btn),
div:has(> .btn + .btn):not(.hero-actions):not(.cta-band-actions):not(.menu-mega-callout):not(.review-modal-options),
.mt-1:has(> .btn + .btn),
.mt-2:has(> .btn + .btn),
.mt-3:has(> .btn + .btn),
.mt-4:has(> .btn + .btn),
.mt-6:has(> .btn + .btn) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
/* split-text pane rules moved to the .split.split-text block below
   so all related declarations live in one place. */

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.95);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 1rem;
  min-width: 0;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-dark);
  letter-spacing: -0.2px;
  flex-shrink: 0;
}
.site-logo img {
  max-height: 64px;
  width: auto;
  display: block;
}

.nav-primary {
  display: none;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
}
@media (min-width: 1024px) {
  .nav-primary { display: flex; }
}
.nav-primary a {
  color: var(--color-dark);
  font-weight: 500;
  font-size: 0.92rem;
  padding: 8px 2px;
  position: relative;
  white-space: nowrap;
}
.nav-primary a:hover { color: var(--color-blue); }
.nav-primary a.active { color: var(--color-blue); }
.nav-primary .has-menu { position: relative; }

/* Hover-intent bridge: a transparent strip that fills the 10px visual gap
   between the trigger anchor and the dropdown panel. Without this, moving
   the cursor diagonally from the trigger toward the panel briefly exits
   .has-menu, killing the :hover chain and snapping the menu shut. The
   bridge keeps the cursor inside .has-menu the whole way down.
   pointer-events:auto is required for the bridge to absorb the cursor's
   position so :hover stays true. The bridge sits inside the sticky header
   area (between trigger bottom and header bottom), so it never overlays
   page content. */
.nav-primary .has-menu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;                    /* >= the 10px gap below, with 4px buffer */
  background: transparent;
}

/* Mega-menu panel: dark theme, multi-column grid + a callout aside on the right.
   Hidden by default with opacity + transform so we can animate the open. */
.nav-primary .menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: -20px;
  background: var(--color-dark);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  /* Layered shadow: dark drop for depth + a faint blue glow that tints the
     surrounding area, giving the panel a premium "lit" feel. */
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(27, 160, 219, 0.06),
    0 0 60px rgba(27, 160, 219, 0.15);
  z-index: 60;
  overflow: hidden;          /* contains the ::before gradient line within the border-radius */

  /* hidden state: invisible but in the layout, so transitions can run */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);  /* starts slightly BELOW final position, slides UP on open */
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}
/* Thin blue gradient accent across the top edge of every panel. */
.nav-primary .menu-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(27, 160, 219, 0.5) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.nav-primary .has-menu:hover .menu-panel,
.nav-primary .has-menu:focus-within .menu-panel,
.nav-primary .has-menu.is-open .menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 0s;
}

/* (Legacy non-scoped .menu-panel-mega / .menu-mega-* rules removed in this
   pass; superseded by the .nav-primary-scoped rules below that beat the
   .nav-primary a defaults.) */

/* ---- Mega-menu layout ----
   Selectors deliberately scoped with `.nav-primary` so they beat the
   `.nav-primary a` defaults (white-space:nowrap, padding:8px 2px,
   font-size:0.92rem). Without this specificity, menu items inherit nowrap
   and overflow their grid columns, visually overlapping each other and
   the callout. */

.nav-primary .menu-panel-services,
.nav-primary .menu-panel-areas {
  display: grid;
  gap: 32px;
  padding: 32px;
  align-items: stretch;
  box-sizing: border-box;
}
.nav-primary .menu-panel-services {
  min-width: 1100px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 280px;
}
.nav-primary .menu-panel-areas {
  min-width: 820px;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 280px;
}

/* Each service/city column is a vertical stack of items inside one grid track. */
.nav-primary .menu-mega-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;            /* lets the column shrink to fit the grid track */
}

/* Each item: title on its own line, description on the next line.
   white-space:normal explicitly resets the nav's nowrap default so long
   titles/descriptions wrap inside the column.
   min-height + align-content:start give every item the same row height so
   the columns visually align across rows even when one description wraps. */
.nav-primary .menu-mega-item {
  position: relative;
  overflow: hidden;            /* contains the ::before accent bar within the border-radius */
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;       /* pack title+desc to the top of the cell */
  gap: 4px;
  padding: 12px 14px;
  min-height: 72px;           /* uniform row height across all 3 columns */
  border-radius: 8px;
  color: var(--color-white);
  text-decoration: none;
  white-space: normal;
  font-size: inherit;
  transition: background-color 150ms ease;
}
/* Vertical blue accent bar that slides in from the left on hover. */
.nav-primary .menu-mega-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: var(--color-blue);
  border-radius: 0 2px 2px 0;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 200ms ease;
}
.nav-primary .menu-mega-item:hover {
  background: rgba(27, 160, 219, 0.12);
  color: var(--color-white);
}
.nav-primary .menu-mega-item:hover::before {
  transform: scaleY(1);
}
.nav-primary .menu-mega-item-title {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-white);
  line-height: 1.3;
  white-space: normal;
}
.nav-primary .menu-mega-item:hover .menu-mega-item-title { color: var(--color-blue); }
.nav-primary .menu-mega-item-desc {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: normal;
}

/* Callout sits in the last grid column. Radial blue glow from the top-left
   corner gives it a "lit" premium look, with a soft blue accent border. */
.nav-primary .menu-mega-callout {
  position: relative;
  background:
    radial-gradient(circle at 0% 0%, rgba(27, 160, 219, 0.15) 0%, transparent 60%),
    rgba(27, 160, 219, 0.04);
  border: 1px solid rgba(27, 160, 219, 0.3);
  border-radius: 12px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: stretch;
  white-space: normal;
}
.nav-primary .menu-mega-callout-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue);
  white-space: normal;
}
.nav-primary .menu-mega-callout h4 {
  color: var(--color-white);
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.25;
}
.nav-primary .menu-mega-callout p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.5;
}
/* Prominent CTA: stretches to fill the callout width, larger padding than
   btn-sm, and an animated arrow that nudges right on hover. */
.nav-primary .menu-mega-callout .btn {
  margin-top: auto;
  align-self: stretch;
  justify-content: center;
  padding: 14px 22px;
  font-size: 0.95rem;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(27, 160, 219, 0.28);
}
.nav-primary .menu-mega-callout .btn::after {
  content: "\2192";          /* right arrow */
  display: inline-block;
  margin-left: 8px;
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 200ms ease;
}
.nav-primary .menu-mega-callout .btn:hover {
  box-shadow: 0 8px 22px rgba(27, 160, 219, 0.42);
}
.nav-primary .menu-mega-callout .btn:hover::after {
  transform: translateX(4px);
}

.header-cta {
  display: none;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .header-cta { display: inline-flex; }
}
.header-phone {
  /* Hidden on the smaller end of desktop to give the nav room. Shown again
     at >=1280px where there's plenty of header width. */
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--color-dark);
  font-size: 0.95rem;
}
@media (min-width: 1280px) {
  .header-phone { display: inline-flex; }
}
.header-phone:hover { color: var(--color-blue); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-dark);
}
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}
.nav-toggle svg { width: 22px; height: 22px; }

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 100;
  display: none;
}
.nav-drawer.open { display: block; }
.nav-drawer-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  /* Full-screen on phones, capped at 420px on tablet+ so it doesn't dominate larger viewports. */
  width: 100vw;
  background: var(--color-white);
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
@media (min-width: 600px) {
  .nav-drawer-panel { width: min(86vw, 420px); }
}
.nav-drawer-close {
  align-self: flex-end;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.nav-drawer-list {
  margin-top: 12px;
}
.nav-drawer-list > li > a,
.nav-drawer-list > li > details > summary {
  display: block;
  padding: 14px 8px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-dark);
}
.nav-drawer-list details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-drawer-list details summary::-webkit-details-marker { display: none; }
.nav-drawer-list details[open] summary { color: var(--color-blue); }
.nav-drawer-sub {
  padding: 4px 0 8px;
}
.nav-drawer-sub li a {
  display: block;
  padding: 8px 8px 8px 18px;
  color: var(--color-body);
  font-size: 0.95rem;
}
.nav-drawer-cta {
  margin-top: auto;
  padding-top: 20px;
  display: grid;
  gap: 10px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--color-dark);
  color: var(--color-white);
  overflow: hidden;
  padding: 64px 0 80px;
}
.hero h1 {
  color: var(--color-white);
  max-width: 18ch;
}
.hero h1 .accent { color: var(--color-blue); }
.hero p.lede {
  color: rgba(255,255,255,0.78);
  max-width: 56ch;
  margin-top: 1.25rem;
  font-size: 1.125rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.75rem;
}
.hero-actions .btn {
  flex: 1 1 220px;     /* equal share until they hit max-width */
  max-width: 280px;
  min-width: 0;
}
.hero-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: center;
  position: relative;
  z-index: 2;
}
@media (min-width: 960px) {
  .hero { padding: 96px 0 120px; }
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 48px; }
}
.hero-visual {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #0e0e0e;
  aspect-ratio: 4 / 3;
}
@media (min-width: 960px) {
  .hero-visual {
    aspect-ratio: 4 / 5;
    /* clean rectangle, no skewed/clip-path shape */
  }
}
.hero-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Universal hero <img> rendering, used by hero_image() and page_hero_image() */
.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Clean dark surface shown when no hero file has been uploaded yet.
   Matches the surrounding hero background so the section never looks broken. */
.hero-image-placeholder {
  background: #0e0e0e;
}
.hero-visual-fallback {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a 70%);
  color: rgba(255,255,255,0.35);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 2rem;
  color: rgba(255,255,255,0.7);
  font-size: 0.92rem;
}
.hero-meta strong { color: var(--color-white); display: block; font-size: 1.1rem; }

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: 22px 0;
}
.trust-strip-inner {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}
@media (min-width: 720px) {
  .trust-strip-inner { grid-template-columns: repeat(4, 1fr); }
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--color-dark);
  font-weight: 500;
}
.trust-item .trust-icon {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue);
}
.trust-item .trust-icon svg { width: 18px; height: 18px; }

/* ---------- Section headers ---------- */
.section-head {
  max-width: 720px;
  margin-bottom: 40px;
}
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--color-muted); font-size: 1.05rem; }

/* ---------- Cards ----------
   Dark charcoal default. Used by service grids, projects, related-service
   rows, "why us" grids, and any other .card layout on the site. */
.card {
  background: var(--color-dark);
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  border-color: rgba(27, 160, 219, 0.45);
}
.card h3 { color: var(--color-white); font-size: 1.2rem; }
.card p  { color: rgba(255, 255, 255, 0.7); }
.card .muted   { color: rgba(255, 255, 255, 0.6); }
.card .eyebrow { color: var(--color-blue); }
.card a:not(.btn):not(.card-link) {
  color: var(--color-blue);
  text-decoration: underline;
}
/* Ghost buttons inside dark cards: invert the on-light styling */
.card .btn-ghost {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.18);
}
.card .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
}

.card .card-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(27, 160, 219, 0.14);
  color: var(--color-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.card .card-icon svg { width: 24px; height: 24px; }

.card .card-link {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 250ms ease;
}
.card .card-link::after {
  content: "\2192";
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 250ms ease;
}
.card:hover .card-link {
  gap: 12px;
}
.card:hover .card-link::after {
  transform: translateX(6px);
}

/* Featured variant: blue accent treatment, used to highlight one card in a grid */
.card-feature {
  background: linear-gradient(135deg, #1ba0db, #1689bd);
  color: var(--color-white);
  border-color: transparent;
}
.card-feature h3 { color: var(--color-white); }
.card-feature p,
.card-feature .muted { color: rgba(255, 255, 255, 0.92); }
.card-feature .card-icon { background: rgba(255, 255, 255, 0.18); color: var(--color-white); }
.card-feature .card-link { color: var(--color-white); }
.card-feature:hover {
  border-color: transparent;
  box-shadow: 0 22px 48px rgba(27, 160, 219, 0.38);
}

/* ---------- Service grid ---------- */
.service-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Two-column with image ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 56px; }
  .split.split-image-right .split-image { order: 2; }
}
.split-image {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
}
.split-image picture,
.split-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fallback placeholder inside a split-image stays bounded, not screaming */
.split-image .hero-visual-fallback {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  background: linear-gradient(135deg, #f4f4f4, #e9e9e9);
  color: var(--color-muted);
  text-align: center;
  padding: 16px;
}
.split-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Stat grid ---------- */
.stat-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-num {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1;
}
.stat-label {
  margin-top: 6px;
  color: var(--color-muted);
  font-size: 0.92rem;
}
.section-dark .stat-num { color: var(--color-white); }
.section-dark .stat-label { color: rgba(255,255,255,0.65); }

/* ---------- City chips ---------- */
.city-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.city-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-dark);
  font-weight: 500;
  font-size: 0.92rem;
  transition: all .15s ease;
}
.city-chip:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

/* ---------- FAQ accordion ---------- */
.faq-list { display: grid; gap: 0; }
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-dark);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-blue);
  line-height: 1;
  flex: 0 0 auto;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer {
  padding: 0 0 20px;
  color: var(--color-muted);
  max-width: 70ch;        /* readable answer width even when the container is full-width */
}
.faq-answer a {
  color: var(--color-blue);
  text-decoration: underline;
}
.faq-answer a:hover { color: var(--color-blue-hover); }

/* Reusable narrow-prose wrapper for legal / single-column content pages.
   Lets section wrappers stay full-width while keeping line length readable. */
.prose {
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

/* Text-only split: two body columns, no aspect-ratio image box on either side.
   Used by content sections (projects intro, FAQ groupings, etc.) so they
   match the visual rhythm of the homepage .split without forcing an image. */
/* Two-column text-only split. Stretching the panes lets a button row sitting
   at the bottom of one pane be pushed down with margin-top:auto, so button
   rows across columns share a baseline instead of floating mid-copy. */
.split.split-text { align-items: stretch; }
.split.split-text > div { display: flex; flex-direction: column; }
.split.split-text > div > .btn-row,
.split.split-text > div > .mt-4:has(> .btn),
.split.split-text > div > .mt-6:has(> .btn) {
  margin-top: auto;
}
.split.split-text p { line-height: 1.65; }
.split.split-text .lede { color: var(--color-muted); }

/* FAQ category jump nav — small icon + label tiles, used in the intro of /faqs/. */
.faq-jumpnav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.faq-jumpnav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-dark);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.92rem;
  transition: border-color 150ms ease, transform 150ms ease;
}
.faq-jumpnav-link small { color: var(--color-muted); font-weight: 400; }
.faq-jumpnav-link:hover {
  border-color: var(--color-blue);
  color: var(--color-dark);
  transform: translateY(-1px);
}
.faq-jumpnav-icon {
  display: inline-flex;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(27, 160, 219, 0.10);
  color: var(--color-blue);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.faq-jumpnav-icon svg { width: 16px; height: 16px; }

/* Blog card thumbnail (used when posts exist on /blog/). */
.card .card-thumb-link {
  display: block;
  margin: -32px -32px 4px;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #2a2a2a;
}
.card .card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 350ms ease;
}
.card:hover .card-thumb { transform: scale(1.04); }

/* License strip: small dual-card row that surfaces both Louisiana state
   license numbers and types. Used on the about page; would also fit any
   "credentials" page in the future. */
.license-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .license-strip { grid-template-columns: 1fr 1fr; }
}
.license-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-white);
}
.license-card-type {
  font-size: 0.72rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-blue);
  font-weight: 700;
}
.license-card-class {
  font-size: 0.92rem;
  color: var(--color-body);
}
.license-card-number {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.02rem;
  color: var(--color-dark);
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Pull-quote callout. Used inline inside a section to break up a body of
   text with a higher-emphasis statement. */
.callout-quote {
  margin: 0;
  padding: 20px 24px;
  border-left: 4px solid var(--color-blue);
  background: rgba(27, 160, 219, 0.06);
  border-radius: 0 12px 12px 0;
}
.callout-quote p {
  font-size: 1.18rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--color-dark);
  font-weight: 500;
  margin: 0 0 12px;
}
.callout-quote footer {
  font-size: 0.82rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
}

/* ---------- Project gallery ---------- */
.project-gallery {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .project-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .project-gallery { grid-template-columns: repeat(3, 1fr); }
}
.project-tile {
  position: relative;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #1a1a1a;
  cursor: pointer;
  isolation: isolate;
}
.project-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 350ms ease;
  will-change: transform;
}
.project-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  gap: 4px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 45%, rgba(0,0,0,0) 70%);
  opacity: 0;
  transition: opacity 350ms ease;
  color: #fff;
  pointer-events: none;
}
.project-tile-title {
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.project-tile-loc {
  font-size: 0.82rem;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.project-tile:hover img,
.project-tile:focus-within img {
  transform: scale(1.05);
}
.project-tile:hover .project-tile-overlay,
.project-tile:focus-within .project-tile-overlay {
  opacity: 1;
}

/* Placeholder variant when no photos are uploaded yet. */
.project-tile-placeholder {
  background: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.project-tile-placeholder-text {
  color: rgba(255,255,255,0.35);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.project-tile-placeholder:hover img,
.project-tile-placeholder:focus-within img { transform: none; }
.project-tile-placeholder .project-tile-overlay { display: none; }

/* ---------- Project lightbox ----------
   Markup is injected by /assets/js/lightbox.js and only initialized on
   /projects/. Styles live here so they're part of the cached main.css. */
.project-tile:not(.project-tile-placeholder) {
  cursor: zoom-in;
}
.project-tile:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
}
body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;                        /* above sticky site header (z=50) */
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;                /* clicks on empty space fall through to backdrop */
}
.lightbox-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}
.lightbox-image-wrap img {
  display: block;
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox-caption {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
  pointer-events: auto;
}
.lightbox-caption-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.lightbox-caption-loc {
  font-size: 0.78rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
  pointer-events: auto;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
  background: rgba(27, 160, 219, 0.85);
  border-color: rgba(27, 160, 219, 1);
  outline: none;
}
.lightbox-close { top: 18px; right: 18px; }
.lightbox-prev  { left: 18px;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover, .lightbox-next:hover,
.lightbox-prev:focus-visible, .lightbox-next:focus-visible {
  /* keep the translate-Y so the button doesn't jump */
  transform: translateY(-50%);
}
.lightbox-close svg,
.lightbox-prev svg,
.lightbox-next svg { width: 22px; height: 22px; display: block; }

/* When only one image, no nav arrows */
.lightbox.has-one .lightbox-prev,
.lightbox.has-one .lightbox-next { display: none; }

@media (max-width: 600px) {
  .lightbox { padding: 12px; }
  .lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .lightbox-prev,
  .lightbox-next { width: 40px; height: 40px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-prev svg,
  .lightbox-next svg,
  .lightbox-close svg { width: 20px; height: 20px; }
}

/* ---------- Footer admin lock ---------- */
.footer-admin-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 12px;
  color: rgba(255,255,255,0.35);
  border-radius: 4px;
  transition: color 150ms ease, background 150ms ease;
  position: relative;
}
.footer-admin-link:hover,
.footer-admin-link:focus-visible {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.06);
}
.footer-admin-link svg { width: 16px; height: 16px; display: block; }
.footer-admin-link::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: #111;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.3px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 150ms ease, transform 150ms ease;
}
.footer-admin-link:hover::after,
.footer-admin-link:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 60% at 100% 50%, rgba(27,160,219,0.18), transparent 70%);
  pointer-events: none;
}
.cta-band-inner {
  position: relative;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .cta-band-inner {
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
  }
}
.cta-band h2 { color: var(--color-white); }
.cta-band p  { color: rgba(255,255,255,0.78); max-width: 50ch; }
.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  /* Explicit stretch guarantees both pills compute to the same height even
     if the second pill's text has different baseline metrics. */
  align-items: stretch;
}
.cta-band-actions .btn {
  flex: 1 1 220px;
  max-width: 320px;
  min-width: 0;
  /* Pin to the same row baseline. */
  align-self: stretch;
}
@media (min-width: 900px) {
  .cta-band-actions { justify-content: flex-end; }
}

/* ---------- Forms ---------- */
.form-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .full { grid-column: 1 / -1; }
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-dark);
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-white);
  color: var(--color-dark);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(27,160,219,0.15);
}
.form-field .hint { color: var(--color-muted); font-size: 0.82rem; }
.form-error  { color: var(--color-error); font-size: 0.88rem; }
.form-success { color: var(--color-success); font-size: 0.88rem; }
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-dark);
  color: rgba(255,255,255,0.7);
  padding-top: 48px;
}
.site-footer a { color: rgba(255,255,255,0.75); }
.site-footer a:hover { color: var(--color-white); }

.footer-trust {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 28px;
  margin-bottom: 36px;
}
.footer-trust-inner {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}
@media (min-width: 720px) {
  .footer-trust-inner { grid-template-columns: repeat(4, 1fr); }
}
.footer-trust .trust-item { color: rgba(255,255,255,0.85); }
.footer-trust .trust-item .trust-icon { background: rgba(255,255,255,0.06); }

.footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; }
}
.footer-col h4 {
  color: var(--color-white);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-col ul { display: grid; gap: 8px; }
.footer-col p { font-size: 0.92rem; }
.footer-brand .footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 12px;
  font-weight: 700;
  color: var(--color-white);
  font-size: 1.1rem;
}
.footer-brand .footer-logo img { height: 36px; width: auto; }
.footer-tag { color: rgba(255,255,255,0.75); font-size: 0.95rem; }
.footer-contact { margin-top: 14px; display: grid; gap: 6px; font-size: 0.92rem; }
.footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.footer-socials a {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer-socials a:hover { background: var(--color-blue); }
.footer-socials svg { width: 18px; height: 18px; fill: currentColor; color: var(--color-white); }

.footer-location {
  font-size: 0.92rem;
  line-height: 1.55;
}
.footer-location address {
  font-style: normal;
  color: rgba(255,255,255,0.8);
  margin: 6px 0;
}

.footer-bottom {
  margin-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 18px 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
}
.footer-bottom a { color: rgba(255,255,255,0.7); }
.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* ---------- Hearth banner ---------- */
.hearth-banner-link img {
  border-radius: 10px;
}

/* ---------- Leave a Review button + modal ---------- */
.review-cta {
  /* Google brand alignment: icon sits flush with text. Overrides .btn gap minimally. */
  gap: 10px;
}
.review-cta svg { flex: 0 0 auto; }

.review-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.review-modal[hidden] { display: none; }
.review-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
}
.review-modal-panel {
  position: relative;
  background: var(--color-dark);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  padding: 32px 28px 28px;
  max-width: 460px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.review-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.review-modal-close:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color-white);
}
.review-modal-title {
  color: var(--color-white);
  font-size: 1.35rem;
  margin: 0 0 8px;
}
.review-modal-lede {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin: 0 0 22px;
}
.review-modal-options {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}
.review-modal-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  color: var(--color-white);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.review-modal-option:hover {
  background: rgba(27, 160, 219, 0.12);
  border-color: var(--color-blue);
  color: var(--color-white);
}
.review-modal-option-name {
  font-weight: 600;
  font-size: 1rem;
}
.review-modal-option-sub {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  margin-top: 2px;
}
.review-modal-option-arrow {
  color: var(--color-blue);
  font-size: 1.2rem;
}
.review-modal-foot {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  margin: 0;
}

/* (Sticky mobile CTA bar removed entirely. Mobile CTAs live inside the nav
   drawer, page hero, and contact form sections only — never as a persistent
   floating bar blocking content on scroll.) */

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  padding: 12px 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.breadcrumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--color-border);
}
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-blue); }
.breadcrumbs [aria-current="page"] { color: var(--color-dark); }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 2rem; }
.hide-mobile { display: none; }
@media (min-width: 720px) { .hide-mobile { display: initial; } .hide-desktop { display: none; } }

/* ---------- Reviews ----------
   Dark cards with a subtle lift on hover. Cards live inside a marquee track
   that auto-scrolls horizontally; pauses on hover and on touch interaction. */
.review-card {
  background: var(--color-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: default;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  /* Cards sit on a track; explicit width keeps the marquee predictable. */
  flex: 0 0 320px;
  min-height: 220px;
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  border-color: rgba(27, 160, 219, 0.4);
}
.review-stars  { color: #f5b400; letter-spacing: 2px; font-size: 1rem; line-height: 1; }
.review-text   { color: rgba(255, 255, 255, 0.92); font-size: 0.97rem; }
.review-author { color: rgba(255, 255, 255, 0.7); font-weight: 600; font-size: 0.9rem; }
.review-date   { color: rgba(255, 255, 255, 0.45); font-size: 0.82rem; }
.review-card a { color: var(--color-blue); }

.review-toggle {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-blue);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}
.review-toggle:hover { color: var(--color-blue-hover); text-decoration: underline; }

/* Marquee wrapper: hides overflow, allows touch scroll, masks the edges so
   cards fade in/out instead of clipping abruptly. */
.reviews-marquee {
  position: relative;
  overflow: hidden;
  margin: 0 -20px;                  /* break the container gutter so the marquee can run edge to edge */
  padding: 12px 0;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.reviews-marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding-inline: 20px;
  /* JS measures the actual set width and sets --marquee-shift and --marquee-duration
     for a perfectly seamless loop. Defaults below cover the brief pre-JS render. */
  animation: reviews-scroll var(--marquee-duration, 60s) linear infinite;
  will-change: transform;
}
.reviews-marquee:hover .reviews-marquee-track {
  animation-play-state: paused;
}
@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-shift, -50%)); }
}
/* Reduced-motion users get a much slower crawl rather than a halted animation.
   Stopping it entirely (the prior behavior) caused the marquee to freeze on any
   device with iOS reduced-motion enabled (a common default), making the
   carousel look broken. Slowing to 3x duration respects the preference while
   keeping the marquee visibly functional. */
@media (prefers-reduced-motion: reduce) {
  .reviews-marquee-track {
    animation-duration: calc(var(--marquee-duration, 60s) * 3);
  }
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--color-dark);
  color: var(--color-white);
  padding: 10px 16px;
  border-radius: 6px;
  z-index: 200;
  font-weight: 600;
}
.skip-link:focus { top: 8px; color: var(--color-white); }

/* ---------- Page intro (non-home heroes) ----------
   The image (when present) sits absolute-positioned behind the text with a
   darkened gradient overlay so the headline always stays readable. When no
   image file is on disk yet, the placeholder div takes its place as a clean
   solid dark surface that matches the hero background exactly. */
.page-hero {
  position: relative;
  background: var(--color-dark);
  color: var(--color-white);
  /* breathing room: ~80px mobile, scales up to ~130px on wider viewports */
  padding: clamp(72px, 9vw, 130px) 0 clamp(80px, 10vw, 140px);
  overflow: hidden;
}
.page-hero h1 { color: var(--color-white); }
.page-hero p { color: rgba(255,255,255,0.8); max-width: 60ch; margin-top: 12px; }
.page-hero .breadcrumbs { color: rgba(255,255,255,0.6); padding: 0 0 16px; }
.page-hero .breadcrumbs a { color: rgba(255,255,255,0.7); }
.page-hero .breadcrumbs [aria-current="page"] { color: var(--color-white); }

.page-hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;            /* dim the image so light/dark photos all read fine behind text */
}
/* Linear gradient overlay strengthens text contrast on the left where the
   headline sits. Applied only when there's a real image. */
.page-hero-image:not(.page-hero-image-placeholder)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26,26,26,0.85) 0%, rgba(26,26,26,0.55) 60%, rgba(26,26,26,0.4) 100%);
}
/* Placeholder state: solid color, no overlay needed, already matches hero bg. */
.page-hero-image-placeholder {
  background: var(--color-dark);
}
/* Make sure all real content (breadcrumbs, headline, lede) sits above the overlay. */
.page-hero > .container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   MOBILE BUTTON STACK (must be at file end to win source order)
   ============================================================
   On phone widths, paired buttons stack vertically. The desktop rules
   `.hero-actions .btn { flex: 1 1 220px }` and
   `.cta-band-actions .btn { flex: 1 1 220px }` would otherwise interpret
   220px as a vertical flex-basis once the parent becomes column-direction,
   blowing buttons up to 200-300px tall blocks. This block lives last so
   it wins source-order ties against those rules. */
@media (max-width: 767px) {
  /* Every button-row variant becomes a centered vertical stack. !important
     used because several earlier rules in this same stylesheet target the
     same selectors (e.g. the .has()-matched button containers) and source
     order ties would otherwise pin them in row mode. */
  .btn-row,
  .cta-band-actions,
  .hero-actions,
  p:has(> .btn + .btn),
  p:has(> .btn + a.btn),
  div:has(> .btn + .btn):not(.menu-mega-callout):not(.review-modal-options),
  .mt-1:has(> .btn + .btn),
  .mt-2:has(> .btn + .btn),
  .mt-3:has(> .btn + .btn),
  .mt-4:has(> .btn + .btn),
  .mt-6:has(> .btn + .btn) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  /* Reset the desktop "flex: 1 1 220px" basis that would otherwise be
     interpreted as a 220px vertical flex-basis in column mode. */
  .btn-row > .btn,
  .cta-band-actions > .btn,
  .hero-actions > .btn,
  .hero-actions .btn,
  .cta-band-actions .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 220px;
    align-self: auto !important;
  }
}