/* ==========================================================================
   RGS General Contracting, LLC — Stylesheet
   Design language: architectural / blueprint drafting.
   Type: Space Grotesk (display) + IBM Plex Sans (body) + IBM Plex Mono (data/labels)
   ========================================================================== */

/* ---- Tokens --------------------------------------------------------------*/
:root {
  /* Brand palette — pulled from the RGS logo (blueprint navy + sky) plus
     a burnt-amber accent that reads as a site-plan stamp / safety tone. */
  --ink: #1c2b36;
  --navy: #17324a;
  --navy-2: #1f425e;
  --navy-3: #234b6c;
  --structural: #3e7398;
  --sky: #9fd6ec;
  --amber: #c9752b;
  --amber-dark: #a85f1f;
  --paper: #f6f1e7;
  --paper-2: #efe8d8;
  --white: #ffffff;
  --line: rgba(23, 50, 74, 0.16);
  --line-soft: rgba(23, 50, 74, 0.09);
  --shadow-1: 0 1px 2px rgba(23, 50, 74, 0.08), 0 8px 24px -12px rgba(23, 50, 74, 0.22);

  --font-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --container: 1200px;
  --radius: 3px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

/* ---- Reset ---------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
p { margin: 0; }
button { font: inherit; }
input, textarea, select { font: inherit; color: inherit; }

/* Focus visibility (never remove) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2.5px solid var(--amber-dark);
  outline-offset: 2px;
  border-radius: 2px;
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -60px; background: var(--navy); color: var(--white);
  padding: 0.75rem 1.25rem; z-index: 200; transition: top 0.15s ease; border-radius: 0 0 4px 4px;
}
.skip-link:focus { top: 0; }

/* ---- Blueprint motif helpers ---------------------------------------------
   Recurring signature: hairline crosshair "registration marks" + dashed
   measurement rules, echoing the drafting marks on the RGS logo itself. */
.crosshair {
  position: relative;
}
.crosshair::before, .crosshair::after {
  content: "";
  position: absolute;
  background: var(--line);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--structural);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--amber-dark);
  display: inline-block;
}
.eyebrow.on-dark { color: var(--sky); }

.section-head { max-width: 62ch; }
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-top: 0.6rem; line-height: 1.15; }
.section-head p { margin-top: 0.9rem; font-size: 1.05rem; color: #3c4c58; }

section.band { padding-block: clamp(3.25rem, 7vw, 6rem); }
.band--paper2 { background: var(--paper-2); }
.band--navy { background: var(--navy); color: var(--paper); }
.band--navy h2, .band--navy h3 { color: var(--white); }
.band--navy p { color: rgba(246,241,231,0.82); }
.band--line-top { border-top: 1px solid var(--line); }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border-radius: 2px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--amber-dark); color: var(--white); }
.btn-primary:hover { background: #8f4e17; }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-outline.on-dark { color: var(--white); border-color: rgba(255,255,255,0.55); }
.btn-outline.on-dark:hover { background: var(--white); color: var(--navy); }
.btn-ghost { background: transparent; color: var(--structural); padding-inline: 0; min-height: auto; }
.btn-ghost::after { content: "\2192"; margin-left: 0.4rem; transition: transform 0.15s ease; display: inline-block; }
.btn-ghost:hover::after { transform: translateX(4px); }
.btn-block { width: 100%; }

/* ---- Header / Nav ------------------------------------------------------*/
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 241, 231, 0.94);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.55rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand img { height: 56px; width: auto; display: block; transition: transform 0.2s ease; }
.brand:hover img { transform: scale(1.03); }
@media (min-width: 640px) { .brand img { height: 66px; } }
@media (min-width: 960px) { .brand img { height: 76px; } }

.main-nav { display: none; }
.main-nav ul { display: flex; align-items: center; gap: 1.9rem; }
.main-nav a.nav-link {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  padding-block: 0.5rem;
  border-bottom: 2px solid transparent;
}
.main-nav a.nav-link:hover,
.main-nav a.nav-link[aria-current="page"] { border-bottom-color: var(--amber-dark); }

.nav-services { position: relative; }
.nav-services > button.nav-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
  font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; color: var(--navy);
  padding-block: 0.5rem;
}
.nav-services > button .chev { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.15s ease; margin-top: -3px;}
.nav-services[data-open="true"] > button .chev { transform: rotate(-135deg); margin-top: 3px; }
.nav-services[data-open="true"] > button { border-bottom-color: var(--amber-dark); }
.services-dropdown {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 300px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  padding: 0.6rem;
  display: none;
  border-radius: 3px;
}
.nav-services[data-open="true"] .services-dropdown { display: block; }
.services-dropdown a {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.65rem 0.75rem; border-radius: 2px; font-family: var(--font-body);
}
.services-dropdown a:hover, .services-dropdown a:focus-visible { background: var(--navy); }
.services-dropdown a strong { font-family: var(--font-display); font-size: 0.92rem; color: var(--navy); font-weight: 600; }
.services-dropdown a small { color: #55636d; font-size: 0.8rem; }
.services-dropdown a:hover strong, .services-dropdown a:focus-visible strong,
.services-dropdown a:hover small, .services-dropdown a:focus-visible small { color: var(--white); }

.header-cta { display: none; align-items: center; gap: 1rem; }
/* The number is not printed in the header — it lives in the footer, the
   mobile menu and on the contact page. What stays is the action itself, set
   as a mono plate so it speaks the same language as .stamp and the eyebrows
   rather than arriving as an anonymous glyph in a box. The aria-label still
   reads the number out. */
.header-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* stretch rather than a matching magic number, so the plate keeps level
     with the primary button whatever that button is padded to */
  align-self: stretch;
  min-height: 44px;
  padding: 0 1rem;
  border: 1.5px solid var(--line);
  border-radius: 2px;
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.header-call svg { width: 15px; height: 15px; color: var(--amber-dark); flex-shrink: 0; }
.header-call:hover, .header-call:focus-visible { border-color: var(--amber-dark); color: var(--amber-dark); }

.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: 1.5px solid var(--line); border-radius: 2px; cursor: pointer;
}
.menu-toggle svg { width: 20px; height: 20px; color: var(--navy); }
.menu-toggle-line {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-line--top { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-line--mid { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-line--bottom { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed; inset: 0; top: 0;
  background: var(--navy);
  color: var(--white);
  z-index: 150;
  padding: 1.25rem var(--gutter) 2.5rem;
  overflow-y: auto;
}
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav-top { position: relative; display: flex; align-items: center; justify-content: center; }
.mobile-nav-top img { height: 52px; width: auto; }
.mobile-nav-close { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 44px; height: 44px; border: 1.5px solid rgba(255,255,255,0.3); background: none; border-radius: 2px; color: var(--white); cursor: pointer; }
.mobile-nav ul.mobile-links { margin-top: 2.5rem; display: flex; flex-direction: column; }
.mobile-nav ul.mobile-links > li { border-bottom: 1px solid rgba(255,255,255,0.14); }
.mobile-nav a, .mobile-nav .mobile-sub-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0.1rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
  background: none; border: none; color: var(--white); width: 100%; text-align: left; cursor: pointer;
}
.mobile-sub { display: none; padding-bottom: 0.75rem; }
.mobile-sub[data-open="true"] { display: block; }
.mobile-sub a { font-size: 0.98rem; font-weight: 500; padding-block: 0.7rem; color: var(--sky); }
.mobile-nav-cta { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.85rem; }
.mobile-nav-contact { margin-top: 2rem; font-family: var(--font-mono); font-size: 0.9rem; color: rgba(255,255,255,0.75); line-height: 1.9; }
.mobile-nav-contact a { color: var(--sky); }
.mobile-nav-region { display: block; text-align: center; }

/* ---- Hero (home) -------------------------------------------------------*/
.hero {
  position: relative;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(2.75rem, 7vw, 5rem);
  align-items: center;
}
.hero-copy .eyebrow { margin-bottom: 1.1rem; }
.hero-copy h1 {
  color: var(--white);
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.hero-copy h1 em { font-style: normal; color: var(--sky); }
.hero-copy .tagline {
  margin-top: 1.25rem;
  font-size: 1.15rem;
  color: rgba(246, 241, 231, 0.86);
  max-width: 46ch;
}
.hero-actions { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-media { position: relative; }
.hero-frame {
  position: relative;
  border: 1px solid rgba(159, 214, 236, 0.35);
  padding: 10px;
}
.hero-frame img { width: 100%; height: clamp(280px, 42vw, 460px); object-fit: cover; }
.hero-frame::before, .hero-frame::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--sky); border-style: solid;
}
.hero-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.hero-frame::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.hero-tag {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(23,50,74,0.88);
  border: 1px solid rgba(159,214,236,0.35);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.75rem;
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* ---- Page header (inner pages) -----------------------------------------*/
.page-hero {
  background: var(--navy);
  color: var(--white);
  padding-block: clamp(2.75rem, 6vw, 4rem);
  position: relative;
}
.breadcrumbs { font-family: var(--font-mono); font-size: 0.78rem; color: rgba(246,241,231,0.7); display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.breadcrumbs a { color: var(--sky); }
.breadcrumbs span[aria-hidden] { color: rgba(246,241,231,0.4); }
.page-hero h1 { color: var(--white); font-size: clamp(1.9rem, 4.4vw, 3rem); margin-top: 1rem; max-width: 22ch; line-height: 1.12; }
.page-hero .lede { margin-top: 1rem; color: rgba(246,241,231,0.85); max-width: 62ch; font-size: 1.08rem; }
.page-hero-meta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.meta-chip {
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.03em; color: var(--sky);
  border: 1px solid rgba(159,214,236,0.35); padding: 0.45rem 0.75rem;
}

/* ---- Trust bar -----------------------------------------------------------*/
.trust-bar { background: var(--paper-2); border-block: 1px solid var(--line); }
.trust-bar-inner { display: flex; flex-wrap: wrap; gap: 1.75rem 2.5rem; align-items: center; justify-content: center; padding-block: 1.4rem; }
.trust-bar-item { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.82rem; color: var(--navy); font-weight: 500; }
.trust-bar-item svg { width: 18px; height: 18px; color: var(--amber-dark); flex-shrink: 0; }
.trust-bar-item img.bbb { height: 30px; width: auto; }

/* ---- Services grid (home) ------------------------------------------------*/
.services-grid { margin-top: 3rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.service-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-1); border-color: var(--amber-dark); }
.service-card .thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.service-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.service-card:hover .thumb img { transform: scale(1.08); }
.service-card .thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23,50,74,0.55), transparent 45%);
  opacity: 0; transition: opacity 0.25s ease;
}
.service-card:hover .thumb::after { opacity: 1; }
.service-card .body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; position: relative; }
.service-card h3 { font-size: 1.2rem; }
.service-card p { margin-top: 0.6rem; color: #445560; font-size: 0.95rem; flex: 1; }
.service-card .btn-ghost { margin-top: 1.1rem; }

/* Shared "blueprint corner marks" hover treatment for card components —
   echoes the registration marks on the hero photo frame and the logo mark. */
.corner-marks { position: relative; }
.corner-marks::before, .corner-marks::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border-color: var(--amber-dark); border-style: solid; opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none;
}
.corner-marks::before { top: 6px; left: 6px; border-width: 2px 0 0 2px; transform: translate(4px, 4px); }
.corner-marks::after { bottom: 6px; right: 6px; border-width: 0 2px 2px 0; transform: translate(-4px, -4px); }
.corner-marks:hover::before, .corner-marks:hover::after,
.corner-marks:focus-within::before, .corner-marks:focus-within::after { opacity: 1; transform: translate(0, 0); }

@media (min-width: 640px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Before / after --------------------------------------------------- */
.reveal {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  max-height: 640px;
  overflow: hidden;
  user-select: none;
  border: 1px solid var(--line);
  touch-action: pan-y;
}
.reveal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The two photographs are not shot from the same spot — the after frame sits
   much closer — so they are anchored separately rather than sharing a crop.
   In the after, the finished patio cover sits in the top 20-50% of a 3:4
   frame; a centred crop in the 16:9 laptop box lands on fence and lawn and
   loses the structure entirely, which is the whole point of the shot. The
   before keeps its centred crop, where the framing already reads well.
   Below 900px the box is 3:4 — the photographs’ own ratio — so nothing is
   cropped and this has no effect. */
.reveal .reveal-after { clip-path: inset(0 0 0 50%); object-position: center 20%; }
.reveal .reveal-divider {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; background: var(--white); transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(23,50,74,0.5);
}
.reveal .reveal-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; background: var(--white);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-1); cursor: ew-resize;
}
.reveal .reveal-handle svg { width: 20px; height: 20px; color: var(--navy); }
.reveal input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
}
.reveal-label { position: absolute; bottom: 0.75rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; background: rgba(23,50,74,0.85); color: var(--white); padding: 0.35rem 0.6rem; }
.reveal-label.before-label { left: 0.75rem; }
.reveal-label.after-label { right: 0.75rem; }

@media (min-width: 900px) { .reveal { aspect-ratio: 16/9; max-height: 560px; } }

/* ---- Service area (blueprint site plan) ----------------------------------*/
.area-panel { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.area-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 1.5rem; }
.area-list li { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.92rem; padding-block: 0.35rem; border-bottom: 1px dashed var(--line); }
.area-list li::before { content: "\2022"; color: var(--amber-dark); }

@media (min-width: 860px) {
  .area-panel { grid-template-columns: 1.2fr 0.8fr; align-items: center; }
}

/* ---- Testimonial ----------------------------------------------------------*/
.testimonial-block { max-width: 780px; }
.testimonial-block blockquote {
  font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  font-weight: 500; line-height: 1.45; color: var(--white); margin: 0;
}
.testimonial-block blockquote::before { content: "\201C"; color: var(--amber); }
.testimonial-block cite { display: block; margin-top: 1.5rem; font-style: normal; font-family: var(--font-mono); font-size: 0.85rem; color: var(--sky); }

/* Visible counterpart to the aggregateRating markup on the home page. */
.rating-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.85rem; margin: 0.4rem 0 1.6rem; }
.rating-summary .review-stars svg { color: var(--amber); }
.rating-summary p {
  margin: 0; font-family: var(--font-mono); font-size: 0.85rem;
  letter-spacing: 0.02em; color: var(--sky);
}
.rating-summary strong { color: var(--white); font-weight: 600; }

/* ---- FAQ ------------------------------------------------------------------*/
.faq-list { margin-top: 2rem; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .plus { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.faq-item .plus::before, .faq-item .plus::after { content: ""; position: absolute; background: var(--amber-dark); transition: transform 0.2s ease; }
.faq-item .plus::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.faq-item .plus::after { left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; }
.faq-item[open] .plus::after { transform: rotate(90deg); opacity: 0; }
.faq-item .faq-answer { padding-bottom: 1.3rem; color: #3c4c58; max-width: 68ch; font-size: 0.98rem; }

/* ---- Gallery ---------------------------------------------------------- */
.filter-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.filter-btn {
  font-family: var(--font-mono); font-size: 0.8rem; padding: 0.7rem 1.1rem; min-height: 44px; border: 1px solid var(--line);
  background: var(--white); cursor: pointer; color: var(--navy);
}
.filter-btn[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.gallery-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
.gallery-item { position: relative; overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--line); cursor: zoom-in; background: none; padding: 0; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.65rem;
  background: linear-gradient(to top, rgba(23,50,74,0.85), transparent);
  color: var(--white); font-family: var(--font-mono); font-size: 0.7rem; text-align: left;
  opacity: 0; transition: opacity 0.2s ease;
}
.gallery-item:hover .cap, .gallery-item:focus-visible .cap { opacity: 1; }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(23,50,74,0.94);
  display: none; align-items: center; justify-content: center; padding: 1.5rem;
}
.lightbox[data-open="true"] { display: flex; }
.lightbox figure { margin: 0; max-width: 1000px; width: 100%; }
.lightbox img { width: 100%; max-height: 78vh; object-fit: contain; }
.lightbox figcaption { color: var(--paper); font-family: var(--font-mono); font-size: 0.82rem; margin-top: 0.85rem; text-align: center; }
.lightbox-close { position: absolute; top: 1.25rem; right: 1.25rem; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,0.4); background: none; color: var(--white); cursor: pointer; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: 1px solid rgba(255,255,255,0.4); background: none; color: var(--white); cursor: pointer; }
.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }

/* ---- Cards / stat strips (only real, sourced facts) -----------------------*/
.fact-strip { display: grid; gap: 1.5rem; margin-top: 3rem; grid-template-columns: 1fr; }
.fact-card { border: 1px solid var(--line); padding: 1.6rem; background: var(--white); overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; }
.fact-card:hover { border-color: var(--amber-dark); transform: translateY(-3px); }
.fact-card .fig { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.fact-card p { margin-top: 0.5rem; color: #445560; font-size: 0.92rem; }
@media (min-width: 720px) { .fact-strip { grid-template-columns: repeat(3, 1fr); } }

/* ---- Two column content ------------------------------------------------*/
.split { display: grid; gap: 2.5rem; align-items: start; }
.split img { border: 1px solid var(--line); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.split--reverse .split-media { order: 2; }
}
.split .eyebrow { margin-bottom: 0.85rem; }
.split h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
.split .body-copy { margin-top: 1.1rem; }
.split .body-copy p + p { margin-top: 1rem; }
.check-list { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.65rem; }
.check-list li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.97rem; }
.check-list li svg { width: 18px; height: 18px; color: var(--amber-dark); flex-shrink: 0; margin-top: 3px; }

/* ---- Process steps -------------------------------------------------------*/
.steps { margin-top: 2.5rem; display: grid; gap: 1.25rem; grid-template-columns: 1fr; counter-reset: step; }
.step { border-left: 2px solid var(--line); padding-left: 1.3rem; position: relative; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--amber-dark); font-weight: 600; display: block; margin-bottom: 0.35rem;
}
.step h3 { font-size: 1.05rem; }
.step p { margin-top: 0.4rem; color: #445560; font-size: 0.93rem; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* ---- CTA band ----------------------------------------------------------*/
.cta-band {
  background: var(--navy); color: var(--white);
  padding-block: clamp(2.75rem, 6vw, 4rem);
}
.cta-band-inner { display: flex; flex-direction: column; gap: 1.75rem; align-items: flex-start; justify-content: space-between; }
.cta-band h2 { color: var(--white); font-size: clamp(1.6rem, 3vw, 2.25rem); max-width: 24ch; }
.cta-band p { color: rgba(246,241,231,0.82); margin-top: 0.6rem; max-width: 50ch; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (min-width: 860px) { .cta-band-inner { flex-direction: row; align-items: center; } }

/* ---- Footer ------------------------------------------------------------*/
.site-footer { background: var(--navy); color: rgba(246,241,231,0.85); border-top: 4px solid var(--amber-dark); }
.footer-top { padding-block: clamp(2.5rem, 5vw, 3.5rem); display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.footer-brand img { height: 64px; width: auto; }
.footer-brand p { margin-top: 1rem; font-size: 0.9rem; max-width: 34ch; color: rgba(246,241,231,0.7); }
.footer-social { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.65rem; }
.footer-social a {
  width: 42px; height: 42px; border: 1px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center;
  color: var(--paper); transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.footer-social svg { width: 19px; height: 19px; }
.footer-social a:hover, .footer-social a:focus-visible { transform: translateY(-3px); border-color: var(--amber-dark); background: var(--amber-dark); color: var(--white); }
.footer-social a[data-platform="instagram"]:hover { background: #c1367e; border-color: #c1367e; }
.footer-social a[data-platform="facebook"]:hover { background: #1877f2; border-color: #1877f2; }
.footer-col h3 { color: var(--white); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-mono); font-weight: 600; }
.footer-col ul { margin-top: 1.1rem; display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a { font-size: 0.92rem; color: rgba(246,241,231,0.78); }
.footer-col a:hover { color: var(--sky); }
.footer-col.areas ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
.footer-col.areas li { font-size: 0.87rem; color: rgba(246,241,231,0.7); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.14); padding-block: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.82rem; color: rgba(246,241,231,0.6); }
@media (min-width: 720px) {
  .footer-top { grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}

/* ---- Forms (contact page) ----------------------------------------------*/
.form-card { background: var(--white); border: 1px solid var(--line); padding: clamp(1.5rem, 4vw, 2.75rem); }
.form-section + .form-section { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--line); }
.form-section-title { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--structural); font-weight: 600; }
.form-row { display: grid; gap: 1.1rem; margin-top: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .form-row.cols-2 { grid-template-columns: 1fr 1fr; } .form-row.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.field label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--navy); margin-bottom: 0.4rem; }
.field .hint { font-weight: 400; color: #6b7680; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="number"], .field select, .field textarea, .field input[type="file"] {
  width: 100%; border: 1.5px solid var(--line); background: var(--paper); padding: 0.8rem 0.9rem;
  border-radius: 2px; min-height: 46px; transition: border-color 0.15s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--structural); outline: none; }
.field input:invalid[data-touched="true"] { border-color: #b5442b; }
.field .error-msg { display: none; color: #b5442b; font-size: 0.82rem; margin-top: 0.4rem; }
.field.has-error .error-msg { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #b5442b; }

.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-top: 0.5rem; }
@media (min-width: 620px) { .choice-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.choice {
  display: flex; align-items: center; gap: 0.6rem; border: 1.5px solid var(--line); padding: 0.85rem;
  min-height: 44px; cursor: pointer; font-size: 0.9rem; background: var(--paper);
}
.choice:has(input:checked) { border-color: var(--amber-dark); background: rgba(201,117,43,0.08); }
.choice input { accent-color: var(--amber-dark); width: 17px; height: 17px; flex-shrink: 0; }

.file-drop {
  border: 1.5px dashed var(--line); padding: 1.75rem; text-align: center; margin-top: 0.5rem; background: var(--paper);
}
.file-drop p { font-size: 0.88rem; color: #55636d; }
.file-drop .btn { margin-top: 0.9rem; }
#file-list { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.4rem; }
#file-list li { font-family: var(--font-mono); font-size: 0.8rem; display: flex; justify-content: space-between; background: var(--white); border: 1px solid var(--line); padding: 0.4rem 0.6rem; }
#file-list button { background: none; border: none; color: #b5442b; cursor: pointer; font-family: var(--font-mono); }

.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-submit-row { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.form-note { font-size: 0.82rem; color: #6b7680; max-width: 42ch; }

.form-feedback { margin-top: 1.5rem; padding: 1rem 1.15rem; border-left: 3px solid var(--amber-dark); background: var(--paper-2); font-size: 0.92rem; display: none; }
.form-feedback[data-show="true"] { display: block; }
.form-feedback.success { border-color: #2f7d4f; }
.form-feedback.error { border-color: #b5442b; }

.contact-sidebar { display: flex; flex-direction: column; gap: 1.75rem; }
.contact-info-card { border: 1px solid var(--line); background: var(--white); padding: 1.6rem; }
.contact-info-card h2 { font-size: 0.95rem; }
.contact-info-card .row { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 1.1rem; font-size: 0.93rem; }
.contact-info-card .row svg { width: 19px; height: 19px; color: var(--amber-dark); flex-shrink: 0; margin-top: 2px; }
.contact-info-card .row a:hover { color: var(--structural); }

/* ---- Misc page bits ------------------------------------------------------*/

.value-grid { margin-top: 2.5rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .value-grid { grid-template-columns: repeat(4, 1fr); } }
.value-card {
  padding: 1.5rem; border-top: 2px solid var(--amber-dark); background: var(--white);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-1); }
.value-card .icon-badge { margin-bottom: 0.9rem; }
.value-card h3 { font-size: 1rem; }
.value-card p { margin-top: 0.6rem; font-size: 0.9rem; color: #445560; }

/* Small icon badge used inside upgraded cards (value/platform/fact) */
.icon-badge {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--amber-dark); flex-shrink: 0;
}
.icon-badge svg { width: 22px; height: 22px; }

.mono-list { font-family: var(--font-mono); font-size: 0.88rem; display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.5rem; }
.mono-list li { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding-block: 0.4rem; gap: 1rem; }
.mono-list li span:last-child { color: var(--structural); text-align: right; }


.platform-row { margin-top: 2.5rem; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .platform-row { grid-template-columns: repeat(3, 1fr); } }
.platform-card {
  border: 1px solid var(--line); background: var(--white); padding: 1.75rem; text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.platform-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-1); border-color: var(--amber-dark); }
.platform-card .icon-badge { color: var(--white); background: var(--navy); border-color: var(--navy); }
.platform-card h3 { font-size: 1.05rem; margin-top: 1rem; }
.platform-card p { margin-top: 0.5rem; font-size: 0.88rem; color: #445560; }
.platform-card .btn { margin-top: 1.1rem; }

/* ---- Developer credit strip (every page, in the footer) ------------------*/
.dev-credit {
  border-top: 1px solid rgba(255,255,255,0.14);
  background: var(--navy-2);
}
.dev-credit-inner {
  padding-block: 0.9rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.78rem; color: rgba(246,241,231,0.65); text-align: center; flex-wrap: wrap;
}
.dev-credit-inner a {
  color: var(--sky); font-weight: 600; border-bottom: 1px dashed rgba(159,214,236,0.5);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.dev-credit-inner a:hover { color: var(--white); border-color: var(--white); }

/* ---- Review carousel (marquee, right-to-left, pauses on hover/focus) -----*/
.review-carousel { position: relative; margin-top: 2.5rem; }
.review-carousel-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 4%, black 96%, transparent 100%);
}
.review-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: review-scroll 70s linear infinite;
}
.review-carousel[data-playing="false"] .review-track { animation-play-state: paused; }
.review-track:hover, .review-track:focus-within { animation-play-state: paused; }
@keyframes review-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .review-track { animation: none; }
  .review-carousel-viewport { overflow-x: auto; scroll-snap-type: x proximity; }
  .review-card { scroll-snap-align: start; }
}

.review-card {
  flex: 0 0 300px;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.review-card:hover, .review-card:focus-within { border-color: var(--amber-dark); box-shadow: var(--shadow-1); transform: translateY(-4px); }
@media (min-width: 640px) { .review-card { flex-basis: 340px; } }

.review-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.review-card-name { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 1rem; }
.review-card-date { display: block; margin-top: 0.15rem; font-family: var(--font-mono); font-size: 0.72rem; color: #6b7680; }
.review-stars { display: flex; gap: 0.15rem; flex-shrink: 0; }
.review-stars svg { width: 15px; height: 15px; color: var(--amber-dark); }

.review-card-meta { margin-top: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.review-service-badge {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em; text-transform: uppercase;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--navy); padding: 0.25rem 0.5rem;
}
.review-price-badge {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em;
  background: rgba(201,117,43,0.1); border: 1px solid rgba(201,117,43,0.35); color: var(--amber-dark); padding: 0.25rem 0.5rem;
}

.review-card-text { margin-top: 0.9rem; font-size: 0.9rem; line-height: 1.6; color: #3c4c58; flex: 1; }
.review-card-text[data-clamped="true"] {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.review-card-toggle {
  margin-top: 0.7rem; background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; color: var(--structural);
  text-decoration: underline; text-underline-offset: 3px; align-self: flex-start;
}
.review-card-toggle:hover { color: var(--amber-dark); }

.review-carousel-controls {
  display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.75rem;
}
.review-carousel-controls button {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--navy);
  background: var(--white); border: 1px solid var(--line); padding: 0.6rem 1rem; cursor: pointer; min-height: 44px;
}
.review-carousel-controls button:hover { border-color: var(--amber-dark); color: var(--amber-dark); }
.review-carousel-controls svg { width: 16px; height: 16px; }
.review-carousel-controls .icon-pause { display: none; }
.review-carousel[data-playing="true"] .icon-play { display: none; }
.review-carousel[data-playing="true"] .icon-pause { display: inline-flex; }

/* ---- Scroll-reveal (IntersectionObserver driven; see main.js) -----------*/
/* Scoped under html.js (set by an inline head script) so content stays
   fully visible by default when JavaScript is unavailable — the reveal
   effect is a progressive enhancement, never a way to hide content. */
.js .reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}

/* ---- Header responsive switch ------------------------------------------*/
@media (min-width: 960px) {
  .main-nav { display: block; }
  .header-cta { display: flex; }
  .menu-toggle { display: none; }
}
@media (max-width: 959px) {
  .main-nav, .header-cta { display: none; }
}

/* Print */
@media print {
  .site-header, .mobile-nav, .cta-band, .site-footer, .lightbox { display: none !important; }
}

/* ---- Financing page (Lyon Financial partner) ----------------------------
   Extends the blueprint language: the loan program is presented as a
   drafting "title block" spec sheet; Lyon blue appears only inside the
   partner panel as a scoped accent. */
.page-financing { --lyon: #2b4faa; }

.fin-spec {
  margin-top: 3rem;
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-1);
}
@media (min-width: 760px) { .fin-spec { grid-template-columns: repeat(4, 1fr); } }
.fin-spec-cell {
  padding: 1.6rem 1.5rem 1.5rem;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.fin-spec-cell + .fin-spec-cell { border-left: none; }
@media (min-width: 760px) {
  .fin-spec-cell { border-bottom: none; }
  .fin-spec-cell + .fin-spec-cell { border-left: 1px dashed var(--line); }
}
.fin-spec-cell .label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--structural);
}
.fin-spec-cell .value {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.fin-spec-cell .note { margin-top: 0.4rem; font-size: 0.85rem; color: #5b6a75; }

.lyon-panel {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 1.25rem;
  position: relative;
}
.lyon-panel img { width: 100%; height: auto; border: 1px solid var(--line-soft); }
.lyon-panel .stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lyon, #2b4faa);
  border: 1.5px solid currentColor;
  border-radius: 2px;
  padding: 0.35em 0.8em;
}
.fin-disclaimer { margin-top: 1.4rem; font-size: 0.82rem; color: #6b7680; max-width: 70ch; }

.fin-apply-row { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.fin-apply-row .apply-note { font-size: 0.88rem; color: #5b6a75; }

/* Financing chips: which projects the program covers */
.fin-uses { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.fin-uses a {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 0.5em 0.95em;
  border-radius: 2px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.fin-uses a:hover { border-color: var(--amber-dark); color: var(--amber-dark); }

/* Compact financing callout reused on contact sidebar + service pages */
.financing-callout {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 1.6rem;
}
.financing-callout .stamp-line {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #2b4faa;
}
.financing-callout h2 { margin-top: 0.55rem; font-size: 1.05rem; }
.financing-callout p { margin-top: 0.55rem; font-size: 0.9rem; color: #445560; }
.financing-callout img { margin-top: 1rem; border: 1px solid var(--line-soft); width: 100%; height: auto; }
.financing-callout .btn { margin-top: 1.1rem; }

/* Decorative blueprint texture behind the hero (CSS background rather than
   an <img> so it never needs alt text and never enters the content flow). */
.hero-pattern {
  position: absolute;
  inset: 0;
  background: url('/assets/images/blueprint-pattern-dark.png') center / cover;
  opacity: 0.07;
  pointer-events: none;
}

/* Footer brand: the color logo sits on a paper plate — a blueprint sheet's
   title block against the navy footer — so header and footer share one logo. */
.logo-plate {
  display: inline-block;
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
}
.logo-plate img { display: block; }
/* Compact plate variant for the mobile menu header */
.logo-plate--sm { padding: 0.45rem 0.65rem; }
.logo-plate--sm img { height: 52px; width: auto; }

/* Restore button styling inside the mobile menu — the generic `.mobile-nav a`
   rule above strips background/border from anchors, which was flattening the
   CTA buttons into plain text links. */
.mobile-nav-cta .btn { justify-content: center; padding: 0.85rem 1.5rem; font-size: 0.98rem; }
.mobile-nav-cta .btn-primary { background: var(--amber-dark); }
.mobile-nav-cta .btn-primary:hover { background: #8f4e17; }
.mobile-nav-cta .btn-outline.on-dark { border: 1.5px solid rgba(255, 255, 255, 0.55); }

/* ---- Service-area map --------------------------------------------------*/
.service-map { border: 1px solid var(--line); background: var(--white); padding: 0.6rem; }
#service-area-map { height: 340px; width: 100%; background: var(--paper-2); }
#service-area-map:focus-visible { outline: 2.5px solid var(--amber-dark); outline-offset: 2px; }
.service-map-caption {
  display: flex; align-items: center; gap: 0.55em;
  padding: 0.7rem 0.4rem 0.25rem;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: #445560;
}
.service-map-caption .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sky); border: 1.5px solid var(--navy); flex-shrink: 0;
}
/* Leaflet chrome, matched to the site */
.leaflet-container { font-family: var(--font-body); }
.leaflet-tooltip { font-family: var(--font-body); font-size: 0.82rem; border-radius: 2px; }

/* ---- Gallery: blueprint texture backgrounds ----------------------------
   The gallery is the site's working record of built projects, so its
   backdrop carries the drafting-sheet motif: the dark logo pattern ghosted
   over the navy hero, the light one whispering behind the photo grid.
   Both are CSS backgrounds at low opacity — photos stay dominant. */
.page-gallery .page-hero { overflow: hidden; }
.page-gallery .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/images/blueprint-pattern-dark.png') center / 780px auto;
  opacity: 0.07;
  pointer-events: none;
}
.page-gallery .page-hero .container { position: relative; z-index: 1; }

.page-gallery section.band { position: relative; }
.page-gallery section.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/images/blueprint-pattern-light.png') top center / 860px auto;
  opacity: 0.05;
  pointer-events: none;
}
.page-gallery section.band .container { position: relative; z-index: 1; }

/* ---- About page project carousel ---------------------------------------
   Crossfading rotation of the full project gallery, framed like a stack of
   site photos on a drafting table: image, then a mono caption bar with a
   plate counter. Autoplay pauses on hover/focus; reduced motion disables
   the fade via the global media query. */
.about-carousel { border: 1px solid var(--line); background: var(--white); padding: 0.6rem; }
.ac-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.ac-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.ac-slide.is-active { opacity: 1; }
.ac-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.2rem 0.15rem;
}
.ac-caption {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-counter { font-family: var(--font-mono); font-size: 0.8rem; color: var(--structural); }
.ac-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--line);
  border-radius: 2px;
  background: none;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ac-btn:hover { border-color: var(--amber-dark); color: var(--amber-dark); }
.ac-btn svg { width: 16px; height: 16px; }

/* ---- Before / after pair grid ------------------------------------------
   Used on service pages where a job has matched documentation shots. The
   pair reads left-to-right on desktop and stacks on mobile; the stamp in
   the caption borrows the drafting-label treatment used site-wide. */
.ba-pair-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .ba-pair-grid { grid-template-columns: repeat(2, 1fr); } }
.ba-item { margin: 0; border: 1px solid var(--line); background: var(--white); padding: 0.6rem; }
.ba-item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ba-item figcaption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.25rem 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: #445560;
}
.ba-tag {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  color: var(--structural);
  border: 1.5px solid currentColor;
  border-radius: 2px;
  padding: 0.2em 0.6em;
}
.ba-tag--after { color: var(--amber-dark); }

/* ---- Field plate --------------------------------------------------------
   Each service page opens on one job-site photograph, presented the way a job
   binder presents one: the frame left at the photograph’s own orientation,
   with a drafted slug underneath naming what the shot is of.

   One ratio, two orientations. The five lead photographs are 1.33, 1.50, 1.33,
   0.75 and 0.56 natural. The previous treatment stretched all five to match the
   height of the paragraph beside them, which cost four of the five roughly half
   their frame — and cost a different half on every page, since the crop was
   decided by how long the copy ran. 4:3 either way crops each one lightly and
   keeps the subject the photographer framed. */
.plate { margin: 0; }
.plate img {
  display: block;
  width: 100%;
  /* height:auto is required — the width/height HTML attributes would
     otherwise win over aspect-ratio and lock the element to its raw size. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.plate--tall img { aspect-ratio: 3 / 4; }
/* Art direction, not a third ratio: where the subject sits high in the frame
   (the kitchen shot is cabinetry over a lot of floor) the crop is taken off
   the bottom instead of evenly off both ends. */
.plate--top img { object-position: center top; }

/* ---- Levelled split -----------------------------------------------------
   The plate and the copy beside it end on the same line. The copy is the
   taller of the two, so the photograph takes the difference as crop.

   Pinned with inset:0 against the relatively-positioned column rather than
   sized with height:100%. The column is a stretched grid item, so its used
   height is known at layout time and inset resolves against it in every
   engine — whereas a percentage height on a child of that same column is
   what Safari on iPad refused to resolve, collapsing the frame to a strip.

   The breakpoint is 900px deliberately: it MUST match the one that gives
   .split its two columns, or these rules land on a column that is still
   full-width and stacked. */
@media (min-width: 900px) {
  .split--level { align-items: stretch; }
  .split--level .split-media { position: relative; min-height: 320px; }
  .split--level .plate {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
  }
  .split--level .plate img {
    /* the slug keeps its natural height at the foot; the photograph takes
       whatever is left, and crops rather than distorts */
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
    max-height: none;
  }
}

/* Stacked view: a portrait plate at full column width runs past a tablet
   screen, so cap it and let object-fit take the difference. */
@media (max-width: 899px) {
  .plate img { max-height: 68vh; }
}

/* The slug: a registration tick, the name of the shot, and a leader rule out
   to the frame edge. --sky is the palette’s blueprint line and goes unused
   everywhere else on the page; this is the one place it earns its keep. */
.plate figcaption {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--structural);
}
.plate figcaption::before {
  content: "";
  flex: 0 0 auto;
  width: 2px;
  height: 0.95em;
  background: var(--amber-dark);
}
.plate figcaption::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--structural), var(--sky));
}

/* ---- Service-area panel: city list + map, levelled ----------------------
   The city list and the map sit side by side and share one height, so the
   block reads as a single plate rather than two stacked cards. The map
   flexes to whatever height the list needs instead of a fixed 340px. */
.page-home section.band .area-panel + p { margin-top: 1.5rem; }
@media (min-width: 860px) {
  .area-panel { align-items: stretch; }
  .area-panel .service-map { display: flex; flex-direction: column; }
  .area-panel .service-map #service-area-map {
    flex: 1 1 auto;
    height: auto;
    min-height: 240px;
  }
}

/* ---- Service page closing band: call + cross-links ----------------------
   Navy band so the phone number reads as the page's final instruction, with
   the sibling-service links set as a quiet mono index beneath it. */
.next-call { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 860px) { .next-call { grid-template-columns: 1.4fr 0.6fr; } }
.next-call h2 { margin-top: 0.6rem; font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.next-call-lede { margin-top: 0.9rem; color: rgba(246, 241, 231, 0.82); max-width: 54ch; }
.next-call-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
@media (min-width: 860px) { .next-call-actions { justify-content: flex-end; } }

.next-links { margin-top: 2.75rem; border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 1.5rem; }
.next-links-title {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sky);
}
.next-links-list { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.next-links-list a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--white);
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.next-links-list a:hover { border-bottom-color: var(--amber); color: var(--amber); }

/* ---- Gallery: trade index + closing note --------------------------------
   Short written context above the grid so the page carries readable content,
   not only photographs, and links out to the trade page behind each set. */
.gallery-intro-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-bottom: 2.5rem;
}
@media (min-width: 640px) { .gallery-intro-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .gallery-intro-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-intro-card { border-left: 2px solid var(--line); padding-left: 1.1rem; }
.gallery-intro-card h3 { font-size: 1rem; }
.gallery-intro-card h3 a { border-bottom: 1.5px solid var(--amber-dark); padding-bottom: 1px; }
.gallery-intro-card h3 a:hover { color: var(--amber-dark); }
.gallery-intro-card p { margin-top: 0.5rem; font-size: 0.92rem; color: #445560; }

.gallery-close {
  margin-top: 2.75rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  max-width: 74ch;
  font-size: 0.98rem;
  color: #3c4c58;
}
.gallery-close a { color: var(--structural); text-decoration: underline; }