/* ─── Header/Nav — ported from src/components/SiteHeader.astro <style> block ─── */
/* ─── Header shell ──────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 12px -2px oklch(0.32 0 0 / 0.08);
  transition: box-shadow 0.2s ease;
}

.site-header.scrolled {
  box-shadow: 0 2px 20px -4px oklch(0.32 0 0 / 0.14);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 4.5rem;
}

/* ─── Wordmark / logo ───────────────────────────────────────────────── */
.wordmark {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  outline-offset: 4px;
}

.wordmark-img {
  height: 2.75rem;
  width: auto;
  display: block;
}

/* ─── Desktop nav ───────────────────────────────────────────────────── */
.desktop-nav {
  flex: 1;
}

.desktop-nav ul {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  border-radius: 0.25rem;
  transition: color 0.15s ease, background-color 0.15s ease;
  position: relative;
}

.nav-link:hover {
  color: var(--foreground);
  background-color: oklch(0.32 0 0 / 0.06);
}

.nav-link--active {
  color: var(--foreground);
  font-weight: 700;
}

.nav-link--active::after {
  content: "";
  position: absolute;
  bottom: -0.125rem;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background-color: var(--accent);
  border-radius: 1px;
}

/* ─── CTA button ────────────────────────────────────────────────────── */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background-color: var(--accent-strong);
  color: var(--accent-foreground);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
  outline-offset: 3px;
}

.cta-btn:hover {
  background-color: var(--accent);
}

.cta-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.header-cta-group {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.header-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.125rem;
  color: var(--foreground);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.header-cta-secondary:hover {
  border-color: oklch(0.55 0 0);
  background-color: oklch(0.32 0 0 / 0.05);
}

/* ─── Hamburger ─────────────────────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 0.375rem;
  margin-left: auto;
  transition: background-color 0.15s ease;
  outline-offset: 3px;
}

.hamburger:hover {
  background-color: oklch(0.32 0 0 / 0.06);
}

.hamburger-bar {
  display: block;
  width: 1.25rem;
  height: 2px;
  background-color: var(--foreground);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── Mobile menu ───────────────────────────────────────────────────── */
.mobile-menu {
  background-color: var(--background);
  border-top: 1px solid var(--border);
  padding: 1rem 1.5rem 1.5rem;
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.mobile-nav-link {
  display: block;
  padding: 0.625rem 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  border-radius: 0.375rem;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link--active {
  color: var(--primary);
  background-color: oklch(0.32 0 0 / 0.06);
  font-weight: 700;
}

.mobile-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--radius-pill);
  width: 100%;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.mobile-cta:hover {
  background-color: oklch(0.22 0 0);
}

.mobile-cta-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.125rem;
  background-color: var(--accent-strong);
  color: var(--accent-foreground);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--radius-pill);
  width: 100%;
  margin-bottom: 0.625rem;
  transition: background-color 0.15s ease;
}

.mobile-cta-quote:hover {
  background-color: var(--accent);
}

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .desktop-nav,
  .header-cta-group {
    display: none;
  }
  .hamburger {
    display: flex;
  }
}

/* ─── Brand strip — scroll progress fill ────────────────────────────── */
.brand-strip {
  height: 4px;
  width: 0%;
  background-color: var(--accent);
  transition: width 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .brand-strip {
    transition: none;
  }
}

/* ─── Hero — ported from src/components/Hero.astro <style> block ─── */
/* ─── Hero section — full-bleed banner with centered overlay text ──────── */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: oklch(0.14 0 0);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-image-rotator {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Permanent dark scrim. .hero-inner is vertically centered (not
   bottom-anchored), so the heading/eyebrow/subtitle span nearly the
   full height of this gradient — every stop below must stay strong
   enough on its own, not just the bottom one. */
.hero-image-rotator::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top,
    oklch(0 0 0 / 0.80) 0%,
    oklch(0 0 0 / 0.74) 30%,
    oklch(0 0 0 / 0.70) 60%,
    oklch(0 0 0 / 0.68) 100%
  );
}

.hero-rotator-frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.hero-rotator-frame.is-active {
  opacity: 1;
  z-index: 1;
}

.hero-rotator-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 0.25rem;
}

/* The button itself IS the 44x44px tap target — laid out via flex so
   adjacent dots' hit areas can never overlap (unlike an absolutely
   positioned overlay, which at this dot spacing would overlap
   neighboring dots' hit areas by more than half their width). The
   visible 10px dot is a centered ::after, decoupled from the
   button's real hit-box size. */
.hero-dot {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-dot::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  background-color: transparent;
  border: 1.5px solid oklch(1 0 0 / 0.55);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.hero-dot:hover::after {
  border-color: oklch(1 0 0 / 0.9);
}

.hero-dot.is-active::after {
  background-color: var(--accent);
  border-color: var(--accent);
  transform: scale(1.15);
}

.hero-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hero-cta-primary:focus-visible,
.hero-cta-secondary:focus-visible,
.header-cta-secondary:focus-visible,
.cta-btn:focus-visible,
.mobile-cta-quote:focus-visible,
.mobile-cta:focus-visible,
.cta-band-btn:focus-visible,
.sector-cta:focus-visible,
.cf-submit:focus-visible,
.project-card:focus-visible,
.supervisor-card a:focus-visible,
.about-snippet-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ─── Centered text content ─────────────────────────────────────────── */
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin: 0 auto;
  padding: 6.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Orchestrated staggered entrance */
.hero-inner > * {
  animation: hero-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-eyebrow  { animation-delay: 0.04s; }
.hero-heading  { animation-delay: 0.12s; }
.hero-subtitle { animation-delay: 0.20s; }
.hero-actions  { animation-delay: 0.28s; }
.hero-stats    { animation-delay: 0.36s; }

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Eyebrow */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: oklch(0.95 0 0);
  margin-bottom: 1.25rem;
}

.eyebrow-rule {
  display: block;
  width: 2rem;
  height: 2px;
  background-color: var(--primary);
  border-radius: 1px;
  flex-shrink: 0;
}

/* Heading */
.hero-heading {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: oklch(1 0 0);
  margin: 0 0 1.25rem;
  max-width: 22ch;
}

/* Subtitle */
.hero-subtitle {
  font-size: 1.125rem;
  line-height: 1.7;
  color: oklch(0.90 0 0);
  margin: 0 0 2.25rem;
  max-width: 42ch;
}

/* Actions */
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  background-color: var(--accent-strong);
  color: var(--accent-foreground);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background-color 0.15s ease, transform 0.12s ease;
}

.hero-cta-primary:hover {
  background-color: var(--accent);
  transform: translateY(-2px);
}

.hero-cta-primary:active {
  transform: translateY(0);
}

.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  color: oklch(1 0 0);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1.5px solid oklch(1 0 0 / 0.4);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hero-cta-secondary:hover {
  border-color: oklch(1 0 0);
  background-color: oklch(1 0 0 / 0.1);
}

/* Stats */
.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid oklch(1 0 0 / 0.2);
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1875rem;
}

.stat-number {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: oklch(1 0 0);
  line-height: 1;
}

.stat-plus {
  font-size: 1rem;
  font-weight: 600;
}

.stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(0.82 0 0);
}

.stat-divider {
  width: 1px;
  height: 2.5rem;
  background-color: oklch(1 0 0 / 0.2);
  flex-shrink: 0;
}

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero {
    min-height: 560px;
  }

  .hero-inner {
    padding: 4.5rem 1.25rem;
  }
}

@media (max-width: 540px) {
  .hero-heading {
    font-size: 1.875rem;
  }

  .hero-stats {
    gap: 1rem;
  }

  .stat-number {
    font-size: 1.375rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta-primary,
  .hero-cta-secondary {
    justify-content: center;
  }
}

/* ─── Trust bar — ported from src/components/TrustBar.astro <style> block ─── */
.trust-bar {
  background-color: var(--background);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 0;
}

.trust-bar-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.trust-bar-caption {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  white-space: nowrap;
  flex-shrink: 0;
}

.trust-bar-rule {
  width: 1px;
  height: 1.25rem;
  background-color: var(--border);
  flex-shrink: 0;
}

.trust-marquee {
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.trust-marquee-track {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  animation: trust-marquee-scroll 28s linear infinite;
}

.trust-marquee:hover .trust-marquee-track {
  animation-play-state: paused;
}

@keyframes trust-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .trust-marquee-track {
    animation: none;
  }
}

.trust-item {
  display: flex;
  align-items: center;
  margin-right: 2.5rem;
}

/* Separator only between text-name items; large logos use list gap instead */
.trust-item:has(.trust-name) + .trust-item:has(.trust-name)::before {
  content: "·";
  color: oklch(0.75 0 0);
  margin-right: 0.375rem;
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.trust-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

a.trust-link:hover {
  opacity: 0.75;
}

.trust-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  letter-spacing: 0.01em;
}

.trust-logo {
  height: 4.5rem;
  width: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 540px) {
  .trust-bar-rule {
    display: none;
  }
}

/* ─── Why choose us — ported from src/components/WhyChooseUs.astro <style> block ─── */
.why-section {
  padding: 5rem 0;
  background-color: var(--background);
}

.why-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ─── Header ────────────────────────────────────────────────────────── */
.why-header {
  max-width: 44rem;
  margin-bottom: 3.5rem;
}

.why-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.875rem;
}

.eyebrow-rule {
  display: block;
  width: 2rem;
  height: 2px;
  background-color: var(--primary);
  border-radius: 1px;
  flex-shrink: 0;
}

.why-heading {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--foreground);
  margin: 0 0 0.875rem;
  line-height: 1.05;
}

.why-intro {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  margin: 0;
}

/* ─── Grid ──────────────────────────────────────────────────────────── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

.why-card {
  background-color: var(--background);
  padding: 2rem 1.75rem;
  position: relative;
  transition: background-color 0.15s ease;
}

.why-card:hover {
  background-color: oklch(0.975 0 0);
}

.why-card-number {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.why-card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 0.625rem;
}

.why-card-body {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  margin: 0;
}

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .why-section {
    padding: 3.5rem 0;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-card {
    padding: 1.5rem 1.25rem;
  }
}

/* ─── Project showcase — ported from src/components/ProjectShowcase.astro <style> block ─── */
.showcase-section {
  padding: 5.5rem 0;
  background-color: var(--muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.showcase-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ─── Header ────────────────────────────────────────────────────────── */
.showcase-header {
  max-width: 44rem;
  margin-bottom: 3rem;
}

.showcase-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.875rem;
}

.eyebrow-rule {
  display: block;
  width: 2rem;
  height: 2px;
  background-color: var(--primary);
  border-radius: 1px;
  flex-shrink: 0;
}

.showcase-heading {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--foreground);
  margin: 0 0 1rem;
  line-height: 1.05;
}

.showcase-intro {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  margin: 0;
}

/* ─── Grid ──────────────────────────────────────────────────────────── */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ─── Card ──────────────────────────────────────────────────────────── */
.project-card {
  background-color: var(--background);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease;
}

.project-card:hover {
  border-color: var(--primary);
}

/* ─── Media ─────────────────────────────────────────────────────────── */
.project-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--muted);
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.project-card:hover .project-image {
  transform: scale(1.03);
}

/* Placeholder when no image */
.project-image-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  color: var(--muted-foreground);
}

.placeholder-text {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  text-align: center;
  max-width: 16ch;
  line-height: 1.5;
}

/* ─── Info panel ────────────────────────────────────────────────────── */
.project-info {
  padding: 1.25rem 1.375rem 1.375rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.project-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  margin: 0;
}

.project-meta-item {
  display: flex;
}

.project-meta-value {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin: 0;
}

.meta-icon {
  flex-shrink: 0;
  opacity: 0.65;
}

.project-meta-builder {
  font-weight: 500;
  color: var(--foreground);
}

.project-category {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  margin-top: auto;
}

.project-category--commercial {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.project-category--residential {
  background-color: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
}

/* ─── Empty state ───────────────────────────────────────────────────── */
.showcase-empty {
  font-size: 1rem;
  color: var(--muted-foreground);
  font-style: italic;
}

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .showcase-section {
    padding: 3.5rem 0;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── CTA band — ported from src/components/CtaBand.astro <style> block ─── */
.cta-band {
  background-color: var(--primary);
  color: var(--primary-foreground);
  padding: 3rem 0;
  position: relative;
  overflow: hidden;
}

.cta-band-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}

.cta-band-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex: 1;
  flex-wrap: wrap;
}

.cta-band-heading {
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--primary-foreground);
  margin: 0;
  line-height: 1.15;
  max-width: 44ch;
}

.cta-band-actions {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
}

.cta-band-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  background-color: var(--accent-strong);
  color: var(--accent-foreground);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cta-band-btn:hover {
  background-color: var(--accent);
}

.cta-band-btn:active {
  background-color: oklch(0.42 0.190 31.4);
}

/* Decorative vertical rules flanking the content */
.cta-band-rule {
  width: 1px;
  height: 3rem;
  background-color: oklch(1 0 0 / 0.18);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .cta-band-rule {
    display: none;
  }

  .cta-band-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .cta-band {
    padding: 2.5rem 0;
  }
}

/* ─── About snippet — ported from src/components/AboutSnippet.astro <style> block ─── */
.about-snippet {
  padding: 5.5rem 0;
  background-color: var(--background);
  border-top: 1px solid var(--border);
}

.about-snippet-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4.5rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  align-items: center;
  position: relative;
}

/* ─── Left accent bar ───────────────────────────────────────────────── */
.about-snippet-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--primary) 20%,
    var(--primary) 80%,
    transparent
  );
  border-radius: 0;
  display: none; /* shown at md+ */
}

/* ─── Content ───────────────────────────────────────────────────────── */
.about-snippet-content {
  max-width: 44rem;
}

.about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.875rem;
}

.eyebrow-rule {
  display: block;
  width: 2rem;
  height: 2px;
  background-color: var(--primary);
  border-radius: 1px;
  flex-shrink: 0;
}

.about-snippet-heading {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--foreground);
  margin: 0 0 1.125rem;
  line-height: 1.08;
}

.about-snippet-body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--muted-foreground);
  margin: 0 0 2rem;
}

.about-snippet-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--primary);
  text-decoration: none;
  transition: gap 0.15s ease, opacity 0.15s ease;
}

.about-snippet-link:hover {
  gap: 0.75rem;
  opacity: 0.8;
}

/* ─── Photo placeholder ────────────────────────────────────────────── */
.about-snippet-panel {
  flex-shrink: 0;
}

.panel-photo-frame {
  width: 28rem;
  aspect-ratio: 2 / 1;
  border: 1.5px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
}

.panel-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel-photo-placeholder {
  position: relative;
  width: 20rem;
  height: 16rem;
  background: linear-gradient(135deg, oklch(0.96 0 0) 0%, oklch(0.92 0 0) 50%, oklch(0.88 0 0) 100%);
  border: 1.5px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-photo-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  padding: 2rem;
  text-align: center;
}

.panel-photo-icon {
  width: 3.5rem;
  height: 3.5rem;
  color: var(--primary);
  opacity: 0.55;
}

.panel-photo-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.55 0 0 / 0.65);
  max-width: 18ch;
  line-height: 1.5;
  margin: 0;
}

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .about-snippet-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-snippet-panel {
    width: 100%;
  }

  .panel-photo-placeholder {
    width: 100%;
    height: 14rem;
  }

  .panel-photo-frame {
    width: 100%;
  }
}

@media (max-width: 540px) {
  .about-snippet {
    padding: 3.5rem 0;
  }
}

/* ─── Supervisor list — ported from src/components/SupervisorList.astro <style> block ─── */
/* ─── Shared eyebrow ────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.875rem;
}
.eyebrow-rule {
  display: block;
  width: 2rem;
  height: 2px;
  background-color: var(--primary);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ─── Section shell ─────────────────────────────────────────────────── */
.supervisors-section {
  padding: 5.5rem 0;
  background-color: var(--background);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.supervisors-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ─── Section header ────────────────────────────────────────────────── */
.supervisors-header {
  margin-bottom: 3rem;
  max-width: 48rem;
}

.supervisors-h2 {
  font-size: clamp(1.625rem, 3.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--foreground);
  margin: 0 0 0.75rem;
  line-height: 1.1;
}

.supervisors-lead {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted-foreground);
  margin: 0;
  max-width: 60ch;
}

.supervisors-lead-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.supervisors-lead-link:hover {
  opacity: 0.75;
}

/* Per-person note (e.g. secondary email) */
.supervisor-note {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
  margin-top: 0.125rem;
}

/* ─── Grid ──────────────────────────────────────────────────────────── */
.supervisors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ─── Card ──────────────────────────────────────────────────────────── */
.supervisor-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem 1.625rem;
  background-color: var(--background);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.supervisor-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.625rem;
  right: 1.625rem;
  height: 3px;
  border-radius: 0 0 2px 2px;
  background-color: var(--primary);
  opacity: 0.15;
  transition: opacity 0.2s ease;
}

.supervisor-card:hover {
  border-color: var(--primary);
}

.supervisor-card:hover::before {
  opacity: 0.45;
}

/* ─── Avatar ────────────────────────────────────────────────────────── */
.supervisor-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, oklch(0.96 0 0) 0%, oklch(0.90 0 0) 100%);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.supervisor-avatar-icon {
  width: 2rem;
  height: 2rem;
  color: var(--primary);
  opacity: 0.5;
}

/* ─── Body ──────────────────────────────────────────────────────────── */
.supervisor-body {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.supervisor-name-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.supervisor-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.supervisor-role {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.4;
}

/* ─── Region badge ──────────────────────────────────────────────────── */
.supervisor-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

.supervisor-badge--residential {
  background-color: var(--muted);
  color: var(--foreground);
}

.supervisor-badge--commercial {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.supervisor-badge--both {
  background-color: var(--muted);
  color: var(--foreground);
}

/* ─── Links ─────────────────────────────────────────────────────────── */
.supervisor-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.supervisor-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.375rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.15s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supervisor-link:hover {
  color: var(--primary);
}

.supervisor-link svg {
  flex-shrink: 0;
  color: oklch(0.62 0 0);
  transition: color 0.15s ease;
}

.supervisor-link:hover svg {
  color: var(--primary);
}

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .supervisors-section {
    padding: 4rem 0;
  }

  .supervisors-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Contact form — ported from src/components/ContactForm.tsx <style jsx> block ─── */
.cf-form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 480px) {
  .cf-row { grid-template-columns: 1fr; }
}
.cf-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cf-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: oklch(0.20 0 0);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.cf-required {
  color: oklch(0.50 0.15 25);
  text-transform: none;
}
.cf-input {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  color: oklch(0.18 0 0);
  background-color: oklch(0.99 0 0);
  border: 1.5px solid oklch(0.65 0 0);
  border-radius: 0.375rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
  box-sizing: border-box;
}
.cf-input::placeholder {
  color: oklch(0.52 0 0);
}
.cf-input:focus {
  border-color: var(--primary, oklch(0 0 0));
  box-shadow: 0 0 0 3px oklch(0 0 0 / 0.1);
}
.cf-input--error {
  border-color: oklch(0.52 0.18 25);
  background-color: oklch(0.99 0.005 25);
}
.cf-input--error:focus {
  border-color: oklch(0.52 0.18 25);
  box-shadow: 0 0 0 3px oklch(0.52 0.18 25 / 0.12);
}
.cf-textarea {
  resize: vertical;
  min-height: 7rem;
}
.cf-field-error {
  font-size: 0.75rem;
  font-weight: 500;
  color: oklch(0.52 0.18 25);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.cf-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: oklch(0.98 0.006 25);
  border: 1.5px solid oklch(0.85 0.08 25);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: oklch(0.38 0.12 25);
  line-height: 1.5;
}
.cf-error-banner svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: oklch(0.52 0.18 25);
}
.cf-error-tel {
  color: oklch(0.32 0 0);
  font-weight: 600;
  text-decoration: none;
}
.cf-error-tel:hover {
  text-decoration: underline;
}
.cf-submit {
  align-self: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-size: var(--btn-font-size, 0.9375rem);
  font-weight: var(--btn-font-weight, 700);
  height: auto;
  background-color: var(--accent-strong, oklch(0.49 0.190 31.4));
  color: var(--accent-foreground, oklch(1 0 0));
  border-radius: var(--radius-pill, 999px);
  transition: background-color 0.15s ease;
  box-shadow: none;
}
.cf-submit:hover:not(:disabled) {
  background-color: var(--accent, oklch(0.59 0.190 31.4));
}
.cf-submit:active:not(:disabled) {
  opacity: 0.95;
}
.cf-spinner {
  animation: cf-spin 0.8s linear infinite;
}
@keyframes cf-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.cf-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 2rem;
  background-color: oklch(0.97 0.01 155);
  border: 1.5px solid oklch(0.82 0.06 155);
  border-radius: var(--radius);
}
.cf-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: oklch(0.82 0.08 155);
  color: oklch(0.28 0.08 155);
}
.cf-success-heading {
  font-size: 1.0625rem;
  font-weight: 700;
  color: oklch(0.24 0.06 155);
  margin: 0;
  letter-spacing: -0.015em;
}
.cf-success-sub {
  font-size: 0.9rem;
  color: oklch(0.40 0.06 155);
  margin: 0;
  line-height: 1.6;
}

/* ─── Footer — ported from src/components/SiteFooter.astro <style> block ─── */
/* ─── Footer shell ──────────────────────────────────────────────────── */
.site-footer {
  background-color: oklch(0.17 0 0);
  color: oklch(0.82 0 0);
  margin-top: auto;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 0.85fr;
  gap: 3rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 3.5rem;
}

/* ─── Wordmark ──────────────────────────────────────────────────────── */
.footer-wordmark {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.footer-wm-img {
  height: 3.25rem;
  width: auto;
  display: block;
}

.footer-tagline {
  font-size: 0.875rem;
  color: oklch(0.62 0 0);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

/* ─── Address ───────────────────────────────────────────────────────── */
.footer-address {
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.6;
  color: oklch(0.76 0 0);
  margin-bottom: 1rem;
}

.footer-address p {
  margin: 0;
}

/* ─── Contact links ─────────────────────────────────────────────────── */
.footer-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: oklch(0.94 0 0);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-contact-link:hover {
  color: oklch(1 0 0);
}

.contact-icon {
  width: 0.9375rem;
  height: 0.9375rem;
  flex-shrink: 0;
  color: oklch(0.60 0 0);
}

/* ─── Column headings ───────────────────────────────────────────────── */
.footer-heading {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(0.60 0 0);
  margin: 0 0 1.375rem;
}

/* ─── Hours ─────────────────────────────────────────────────────────── */
.hours-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0 0 1.75rem;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
}

.site-footer .hours-days {
  color: oklch(0.72 0 0);
  white-space: nowrap;
}

.site-footer .hours-time {
  color: oklch(0.94 0 0);
  font-weight: 600;
  text-align: right;
}

.site-footer .hours-closed {
  color: oklch(0.60 0 0);
  font-style: italic;
  font-weight: 400;
}

/* ─── Servicing area ─────────────────────────────────────────────────── */
.footer-area-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.50 0 0);
  margin: 0 0 0.375rem;
}

.footer-area-value {
  font-size: 0.875rem;
  color: oklch(0.82 0 0);
  margin: 0;
  line-height: 1.5;
}

/* ─── Credentials ────────────────────────────────────────────────────── */
.creds-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
}

.creds-row {
  font-size: 0.8125rem;
  line-height: 1.4;
}

.creds-label {
  color: oklch(0.68 0 0);
  display: block;
  font-size: 0.75rem;
  margin-bottom: 0.0625rem;
}

.creds-value {
  color: oklch(0.94 0 0);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ─── Subcontractor link ────────────────────────────────────────────── */
.footer-subcon-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-subcon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: oklch(0.80 0 0);
  text-decoration: none;
  padding: 0.75rem 0.8125rem;
  border: 1px solid oklch(0.38 0 0);
  border-radius: 0.375rem;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.footer-subcon-link:hover {
  color: oklch(1 0 0);
  border-color: oklch(0.62 0 0);
  background-color: oklch(0.24 0 0);
}

/* ─── Copyright bar ─────────────────────────────────────────────────── */
.footer-bar {
  border-top: 1px solid oklch(0.28 0 0);
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.375rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer-bar p {
  font-size: 0.8125rem;
  color: oklch(0.60 0 0);
  margin: 0;
}

.powered-by-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  border: 1px solid oklch(1 0 0 / 0.15);
  background-color: oklch(1 0 0 / 0.1);
  color: oklch(1 0 0 / 0.9);
  font-size: 0.75rem;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.powered-by-pill:hover {
  border-color: oklch(1 0 0 / 0.35);
  background-color: oklch(1 0 0 / 0.16);
}

.powered-by-wordmark {
  height: 0.75rem;
  width: auto;
  color: oklch(1 0 0);
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem 1.25rem 2rem;
  }
}

/* ─── Brand strip ───────────────────────────────────────────────────── */
/* Renamed from .brand-strip to avoid colliding with the header's
   scroll-progress .brand-strip rule above (which sets width: 0%) —
   this footer bar is a static decorative element with no width set,
   so once merged into one global stylesheet it would otherwise
   inherit width: 0% and render invisible. Markup in footer.php should
   use class="footer-brand-strip". */
.footer-brand-strip {
  height: 4px;
  background-color: var(--accent);
}

/* ─── Page-specific: services.astro <style> block ─── */
/* ─── Screen-reader only ────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ─── Shared eyebrow ────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.875rem;
}

.eyebrow-rule {
  display: block;
  width: 2rem;
  height: 2px;
  background-color: var(--primary);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ─── Page intro ────────────────────────────────────────────────────── */
.services-intro {
  position: relative;
  padding: 5.5rem 0 4.5rem;
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.services-intro-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}

.services-h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: oklch(0.985 0 0);
  margin: 0 0 1.375rem;
  animation: fade-up 0.6s ease both;
}

.services-lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: oklch(0.90 0 0);
  margin: 0;
  max-width: 60ch;
  animation: fade-up 0.6s 0.08s ease both;
}

.services-intro-inner .eyebrow {
  color: oklch(0.985 0 0);
}

/* Full-bleed background photo behind the intro text, with a left-to-right
   dark scrim so the text stays legible while the photo shows through on
   the right — same treatment used on the about/contact intros. */
.intro-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    oklch(0 0 0 / 0.82) 0%,
    oklch(0 0 0 / 0.82) 65%,
    oklch(0 0 0 / 0.74) 100%
  );
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Services grid section ─────────────────────────────────────────── */
.services-grid-section {
  padding: 6rem 0;
  background-color: oklch(0.975 0 0);
  border-bottom: 1px solid var(--border);
}

.services-grid-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ─── Grid ──────────────────────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ─── Service card ──────────────────────────────────────────────────── */
.service-card {
  background-color: var(--background);
  padding: 2.5rem 2.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: background-color 0.15s ease;
}

.service-card:hover {
  background-color: oklch(0.985 0 0);
}

/* Top area: number + decorative accent line */
.service-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.service-number {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

/* Small decorative rule that grows on hover, matching the site's accent pattern */
.service-card-accent {
  height: 2px;
  width: 1.75rem;
  background-color: var(--primary);
  border-radius: 1px;
  opacity: 0.35;
  transition: width 0.22s ease, opacity 0.22s ease;
}

.service-card:hover .service-card-accent {
  width: 3rem;
  opacity: 0.85;
}

.service-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 0.625rem;
}

.service-summary {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--foreground);
  margin: 0 0 0.875rem;
}

.service-body {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  margin: 0;
  flex: 1;
}

/* Visually differentiate placeholder copy */
.service-body--placeholder {
  color: oklch(0.72 0 0 / 0.6);
  font-style: italic;
}

/* ─── Sectors section ───────────────────────────────────────────────── */
.sectors-section {
  padding: 6rem 0;
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
}

.sectors-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.sectors-header {
  max-width: 48rem;
  margin-bottom: 3.5rem;
}

.sectors-h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--foreground);
  margin: 0 0 0.875rem;
  line-height: 1.1;
}

.sectors-intro {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  margin: 0;
}

.sectors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: 2rem;
}

.sector-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2.25rem 2rem 2.25rem;
  background-color: oklch(0.975 0 0);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
}

.sector-tag {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 0.25rem;
  border: 1px solid transparent;
  margin-bottom: 1.25rem;
}

.sector-tag--residential {
  background-color: var(--muted);
  color: var(--foreground);
  border-color: var(--border);
}

.sector-tag--commercial {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.sector-card-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0 0 0.875rem;
}

.sector-card-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  margin: 0 0 1.25rem;
}

.sector-points {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sector-points li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--foreground);
  font-weight: 500;
}

.sector-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background-color: var(--primary);
  opacity: 0.7;
}

/* Gallery placeholder strip */
.sector-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.gallery-tile {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px solid var(--border);
  overflow: hidden;
  background-color: oklch(0.91 0 0);
  color: oklch(0.45 0 0);
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sector-gallery-note {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 1.5rem;
}

.sector-gallery-note--spacer {
  visibility: hidden;
}

.sector-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.75rem 1.75rem;
  background-color: var(--accent-strong);
  color: var(--accent-foreground);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background-color 0.15s ease, transform 0.12s ease;
}

.sector-cta:hover {
  background-color: var(--accent);
  transform: translateY(-2px);
}

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sectors-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .services-intro {
    padding: 3rem 0 2.5rem;
  }

  .services-h1 {
    font-size: 1.875rem;
  }

  .services-grid-section {
    padding: 3.5rem 0;
  }

  .sectors-section {
    padding: 3.5rem 0;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    padding: 1.75rem 1.25rem;
  }

  /* Sibling card family to .service-card above — was missing the same
     mobile padding tightening, leaving it noticeably more generous than
     every other card on this page at narrow widths. */
  .sector-card {
    padding: 1.5rem 1.25rem;
  }
}

/* ─── Page-specific: about.astro <style> block ─── */
/* ─── Shared eyebrow ────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.875rem;
}

.eyebrow-rule {
  display: block;
  width: 2rem;
  height: 2px;
  background-color: var(--primary);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ─── Page intro ────────────────────────────────────────────────────── */
.about-intro {
  position: relative;
  padding: 5.5rem 0 4.5rem;
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.about-intro-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}

.about-h1 {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: oklch(0.985 0 0);
  margin: 0 0 1.5rem;
  animation: fade-up 0.6s ease both;
}

.about-lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: oklch(0.90 0 0);
  margin: 0;
  max-width: 56ch;
  animation: fade-up 0.6s 0.08s ease both;
}

.about-intro-inner .eyebrow {
  color: oklch(0.985 0 0);
}

/* Full-bleed background photo behind the intro text, with a left-to-right
   dark scrim so the text stays legible while the photo shows through on
   the right — same treatment used on the services/contact intros. */
.intro-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    oklch(0 0 0 / 0.82) 0%,
    oklch(0 0 0 / 0.82) 65%,
    oklch(0 0 0 / 0.74) 100%
  );
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Story sections ────────────────────────────────────────────────── */
.story-section {
  padding: 6rem 0;
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
}

.story-section--alt {
  background-color: var(--muted);
}

.story-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  align-items: center;
}

/* ─── Story text ────────────────────────────────────────────────────── */
.story-heading {
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--foreground);
  line-height: 1.1;
  margin: 0 0 1.5rem;
}

.story-body {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--muted-foreground);
  margin: 0 0 1rem;
}

.story-body:last-child {
  margin-bottom: 0;
}

.story-body strong {
  color: var(--foreground);
  font-weight: 600;
}

/* ─── Visual / photo placeholder ───────────────────────────────────── */
.story-visual {
  height: 380px;
  display: flex;
  align-items: stretch;
}

.photo-placeholder {
  position: relative;
  flex: 1;
  background: linear-gradient(
    135deg,
    oklch(0.96 0 0) 0%,
    oklch(0.92 0 0) 50%,
    oklch(0.88 0 0) 100%
  );
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
}

.story-photo-frame {
  position: relative;
  flex: 1;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1.5px solid var(--border);
}

/* Wide group photo (2:1) — size the frame to the image so nobody at the
   edges gets cropped, instead of using the fixed-height story box. */
.story-visual--wide {
  height: auto;
  align-self: center;
}

.story-photo-frame--wide {
  aspect-ratio: 2 / 1;
}

.story-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Portrait-orientation source photo — bias the crop toward the top so the
   subject's face and the sponsorship signage stay in frame. */
.story-photo--sponsor {
  object-position: center 40%;
}

/* Navy-tinted variant for the second placeholder */
.photo-placeholder--navy {
  background: linear-gradient(
    135deg,
    oklch(0.32 0 0 / 0.06) 0%,
    oklch(0.32 0 0 / 0.12) 50%,
    oklch(0.32 0 0 / 0.18) 100%
  );
}

.photo-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  z-index: 1;
  position: relative;
  padding: 2rem;
  text-align: center;
}

.photo-placeholder-icon {
  width: 3.5rem;
  height: 3.5rem;
  color: var(--primary);
  opacity: 0.55;
}

.photo-placeholder-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.55 0 0 / 0.65);
  max-width: 18ch;
  line-height: 1.5;
  margin: 0;
}

/* Decorative geometry — matches Hero.astro pattern */
.geo {
  position: absolute;
  border: 1.5px solid oklch(0.32 0 0 / 0.12);
  border-radius: 0.25rem;
  pointer-events: none;
}

.geo-1 {
  top: 1.5rem;
  right: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  transform: rotate(12deg);
}

.geo-2 {
  bottom: 2rem;
  left: 1.5rem;
  width: 2rem;
  height: 2rem;
  transform: rotate(-8deg);
  border-color: oklch(0.32 0 0 / 0.08);
}

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .story-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .story-visual {
    height: 260px;
  }

  .story-visual--wide {
    height: auto;
  }

  .photo-placeholder {
    min-height: 240px;
  }

  .story-section {
    padding: 4rem 0;
  }
}

@media (max-width: 540px) {
  .about-intro {
    padding: 3.5rem 0 2.75rem;
  }

  .about-h1 {
    font-size: 2rem;
  }
}

/* ─── Page-specific: contact.astro <style> block ─── */
/* ─── Shared eyebrow ────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.875rem;
}
.eyebrow-rule {
  display: block;
  width: 2rem;
  height: 2px;
  background-color: var(--primary);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ─── Page intro ────────────────────────────────────────────────────── */
.contact-intro {
  position: relative;
  padding: 5.5rem 0 4.5rem;
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.contact-intro-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}

.contact-h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: oklch(0.985 0 0);
  margin: 0 0 1.125rem;
  animation: fade-up 0.6s ease both;
}

.contact-lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: oklch(0.90 0 0);
  margin: 0;
  max-width: 54ch;
  animation: fade-up 0.6s 0.08s ease both;
}

.contact-intro-inner .eyebrow {
  color: oklch(0.985 0 0);
}

/* Full-bleed background photo behind the intro text, with a left-to-right
   dark scrim so the text stays legible while the photo shows through on
   the right — same treatment used on the services/about intros. */
.intro-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    oklch(0 0 0 / 0.82) 0%,
    oklch(0 0 0 / 0.82) 65%,
    oklch(0 0 0 / 0.74) 100%
  );
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Main content: form + details ──────────────────────────────────── */
.contact-main {
  padding: 5rem 0;
  background-color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.contact-main-inner {
  display: grid;
  grid-template-columns: 22rem 1fr;
  gap: 3rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  align-items: start;
}

.contact-main-inner--single {
  grid-template-columns: 1fr;
  max-width: 40rem;
}

/* Form on the right, business details on the left — matches the
   homepage's contact section layout (same order-based flip, DOM/tab
   order unchanged). */
.contact-form-col {
  order: 2;
}

.contact-details-col {
  order: 1;
}

/* ─── Form card ─────────────────────────────────────────────────────── */
.contact-form-card {
  background-color: var(--background);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}

.contact-form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2.5rem;
  right: 2.5rem;
  height: 3px;
  border-radius: 0 0 2px 2px;
  background-color: var(--primary);
  opacity: 0.55;
}

.contact-card-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.contact-card-sub {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  margin: 0 0 1.875rem;
  max-width: 52ch;
}

/* ─── Details sidebar ───────────────────────────────────────────────── */
.contact-details-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.details-card {
  background-color: var(--background);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.375rem;
}

.details-heading {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 1rem;
}

/* ─── Contact list ──────────────────────────────────────────────────── */
.details-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.details-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.details-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background-color: oklch(0.32 0 0 / 0.08);
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

.details-item-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.details-item-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: oklch(0.50 0 0);
}

.details-item-value {
  font-size: 0.9375rem;
  color: var(--foreground);
  line-height: 1.5;
  font-weight: 500;
}

.details-item-value--link {
  display: inline-block;
  min-height: 1.5rem;
  padding-block: 0.25rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.15s ease;
}
.details-item-value--link:hover {
  opacity: 0.7;
}

.details-address {
  font-style: normal;
}

/* ─── Hours ─────────────────────────────────────────────────────────── */
.hours-list {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  margin: 0;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
}

.details-card .hours-days {
  color: var(--muted-foreground);
  white-space: nowrap;
}

.details-card .hours-time {
  color: var(--foreground);
  font-weight: 500;
  text-align: right;
}

.details-card .hours-closed {
  color: oklch(0.50 0 0);
  font-style: italic;
  font-weight: 400;
}

/* ─── Servicing area ────────────────────────────────────────────────── */
.details-area {
  font-size: 0.9375rem;
  color: var(--foreground);
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

/* ─── Map section ───────────────────────────────────────────────────── */
.map-section {
  padding: 5rem 0;
  background-color: var(--background);
}

.map-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.map-label {
  display: flex;
  flex-direction: column;
}

.map-address {
  font-size: 0.9375rem;
  color: var(--muted-foreground);
  margin: 0;
  line-height: 1.5;
}

.map-frame {
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1.5px solid var(--border);
  height: 28rem;
}

.map-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .contact-main-inner {
    grid-template-columns: 1fr;
  }

  .contact-details-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  .contact-intro {
    padding: 3rem 0 2.5rem;
  }

  .contact-main {
    padding: 3.5rem 0;
  }

  .contact-form-card {
    padding: 1.75rem 1.25rem;
  }

  .contact-details-col {
    grid-template-columns: 1fr;
  }

  .contact-main-inner > *,
  .contact-details-col > *,
  .contact-form-card {
    min-width: 0;
  }

  .supervisor-link,
  .details-item-value--link {
    overflow-wrap: anywhere;
  }

  .map-section {
    padding: 3.5rem 0;
  }

  .map-frame {
    height: 20rem;
  }
}

@media (max-width: 540px) {
  .contact-h1 {
    font-size: 1.875rem;
  }
}

/* ─── Page-specific: 404.astro <style> block ─── */
.nf {
  padding: 7rem 0;
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
}
.nf-inner {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.875rem;
}
.eyebrow-rule {
  display: block;
  width: 2rem;
  height: 2px;
  background-color: var(--primary);
  border-radius: 1px;
}
.nf-h1 {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--foreground);
  margin: 0 0 1.25rem;
}
.nf-lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--muted-foreground);
  margin: 0 0 2.25rem;
  max-width: 46ch;
}
.nf-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.nf-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.875rem 1.75rem;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.nf-btn--primary {
  background-color: var(--accent-strong);
  color: var(--accent-foreground);
  border-radius: var(--radius-pill);
}
.nf-btn--primary:hover {
  background-color: var(--accent);
  transform: translateY(-2px);
}
.nf-btn--ghost {
  color: var(--foreground);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
}
.nf-btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── Responsive ────────────────────────────────────────────────────── */
/* Every other intro/hero section on the site (home hero, services-intro,
   about-intro, contact-intro) tightens its section padding and steps its
   H1 down further on small phones — this section had no such override,
   leaving it disproportionately tall and large-typed at narrow widths. */
@media (max-width: 540px) {
  .nf {
    padding: 4rem 0;
  }

  .nf-h1 {
    font-size: 2rem;
  }
}

/* ─── Subcontractor form additions ──────────────────────────────────── */
.cf-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.cf-legend {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--foreground);
  padding: 0 0 0.625rem;
  margin: 0 0 -0.5rem;
  border-bottom: 1px solid var(--border);
  width: 100%;
}

.cf-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.cf-radio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--foreground);
  cursor: pointer;
}

.cf-radio-option input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--accent-strong);
  cursor: pointer;
}

.cf-static-note {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  background-color: oklch(0.975 0 0);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin: 0;
}

.cf-signature-pad {
  border: 1.5px solid oklch(0.65 0 0);
  border-radius: 0.375rem;
  background-color: oklch(0.99 0 0);
  touch-action: none;
  cursor: crosshair;
  display: block;
  width: 100%;
  height: 180px;
}

.cf-signature-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.cf-signature-clear {
  min-height: 1.75rem;
  min-width: 3rem;
  background: none;
  border: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.contact-main-inner--wide {
  grid-template-columns: 1fr;
  max-width: 52rem;
}

/* ─── Privacy note + policy page ────────────────────────────────────── */
.cf-privacy-note {
  margin: 0.875rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: oklch(0.45 0 0);
}

.cf-privacy-note a,
.footer-privacy-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-privacy-link {
  margin-left: 0.75rem;
}

.policy-body {
  max-width: 46rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}

.policy-body h2 {
  font-size: 1.375rem;
  margin: 2.5rem 0 0.75rem;
}

.policy-body p,
.policy-body li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--foreground);
}

.policy-body ul {
  padding-left: 1.25rem;
  margin: 0.5rem 0 1rem;
}

.policy-body a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.policy-updated {
  color: oklch(0.45 0 0);
  font-size: 0.875rem;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}