@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");

/* ==========================================================================
   CAPE CONSTRUCTION CO — DESIGN SYSTEM
   Swap the values below to re-skin the entire site.
   ========================================================================== */
:root {
  /* --- Color: brand ------------------------------------------------------ */
  --color-accent: #f7880a;          /* primary brand orange */
  --color-accent-strong: #d96f00;   /* hover / pressed */
  --color-accent-soft: #fde7c9;     /* tinted fills */
  --color-on-accent: #1c1d18;       /* text on orange (AA on #F7880A) */

  /* --- Color: neutrals --------------------------------------------------- */
  --color-ink: #1c1d18;             /* headings, dark sections */
  --color-ink-2: #24261f;           /* raised dark surfaces */
  --color-ink-3: #2f3129;           /* dark cards / hover */
  --color-body: #55574f;            /* body text on light (AA) */
  --color-muted: #767676;           /* meta text on light */
  --color-muted-dark: #b4b5ae;      /* meta text on dark (AA) */

  /* --- Color: surfaces --------------------------------------------------- */
  --color-bg: #fff8ed;              /* page background, cream */
  --color-surface: #ffffff;         /* cards */
  --color-surface-2: #fdf3e3;       /* alt light surface */
  --color-dark: var(--color-ink);   /* dark section background */

  /* --- Color: lines & states --------------------------------------------- */
  --color-line: rgba(28, 29, 24, 0.12);
  --color-line-strong: rgba(28, 29, 24, 0.22);
  --color-line-dark: rgba(255, 255, 255, 0.12);
  --color-focus: #0b63d6;           /* focus ring, high contrast on cream */
  --color-focus-dark: #ffd8a3;      /* focus ring on dark backgrounds */
  --color-success: #2f7d4f;
  --color-star: #f7880a;

  /* --- Typography -------------------------------------------------------- */
  --font-sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading: var(--font-sans);

  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md: 1.0625rem;    /* 17px */
  --text-lg: 1.25rem;      /* 20px */
  --text-xl: 1.5rem;       /* 24px */
  --text-2xl: 1.875rem;    /* 30px */
  --text-3xl: 2.25rem;     /* 36px */
  --text-4xl: 2.875rem;    /* 46px */
  --text-5xl: 3.75rem;     /* 60px */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.65;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Spacing scale ----------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  --section-y: var(--space-9);      /* vertical section rhythm (mobile) */
  --section-y-lg: var(--space-11);  /* vertical section rhythm (desktop) */
  --top-h: 132px;                   /* space the floating topbar + nav occupy */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: var(--space-5);

  /* --- Radius ------------------------------------------------------------ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* --- Elevation --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(28, 29, 24, 0.06), 0 2px 8px rgba(28, 29, 24, 0.04);
  --shadow-md: 0 8px 24px rgba(28, 29, 24, 0.08);
  --shadow-lg: 0 18px 48px rgba(28, 29, 24, 0.12);

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --duration: 200ms;

  /* --- Layers ------------------------------------------------------------ */
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 30;
  --z-overlay: 50;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

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

img {
  height: auto;
  background-color: var(--color-surface-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: var(--space-7) 0;
}

strong { color: var(--color-ink); font-weight: var(--weight-semibold); }

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

/* --- Focus visibility (WCAG 2.4.7) --------------------------------------- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.section--dark :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible { outline-color: var(--color-focus-dark); }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: var(--z-overlay);
  padding: var(--space-3) var(--space-5);
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-semibold);
  transition: top var(--duration) var(--ease);
}
.skip-link:focus { top: var(--space-4); }

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--space-8); }

.section--dark {
  background-color: var(--color-dark);
  color: var(--color-muted-dark);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }
.section--dark strong { color: #fff; }

.section--cream { background-color: var(--color-bg); }
.section--white { background-color: var(--color-surface); }

/* Faint decorative roof-line watermark, bottom-right of a section.
   Sits behind the content, is non-interactive, clipped so it can't cause
   horizontal scroll, and hidden on small screens. */
.has-shape { position: relative; overflow: hidden; }
.has-shape > .container { position: relative; z-index: 1; }
.section-shape {
  position: absolute;
  right: -1.5%;
  bottom: -72px;   /* fixed, not %, so tall sections don't swallow the shape */
  z-index: 0;
  width: min(40%, 480px);
  color: var(--color-ink);
  opacity: 0.05;
  pointer-events: none;
}
.section-shape svg { width: 100%; height: auto; display: block; }

/* Second shape, anchored top-left. Mirrored so the roof leans into the corner
   rather than away from it. Used where a section is tall enough to carry two. */
.section-shape--start {
  right: auto;
  bottom: auto;
  left: -1.5%;
  top: -48px;
  transform: scaleX(-1);
}
@media (max-width: 47.99em) {
  .section-shape { display: none; }
}

/* Centered "View All Services" button under the services grid. */
.svc-all { text-align: center; margin-top: var(--space-8); }

.stack > * + * { margin-top: var(--space-4); }

.grid { display: grid; gap: var(--space-5); }

.divider-line { height: 1px; background: var(--color-line); border: 0; }

/* ==========================================================================
   TYPOGRAPHIC UTILITIES
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(247, 136, 10, 0.18);
}
.section--dark .eyebrow { color: #fff; }

.display {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}

.lead {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-body);
}
.section--dark .lead { color: var(--color-muted-dark); }

.accent-word { color: var(--color-accent); }

.section-head { max-width: 700px; margin-bottom: var(--space-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p:last-child { margin-bottom: 0; }

.section-head--split { max-width: none; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease),
    color var(--duration) var(--ease), border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}
.btn:hover { background: var(--color-accent-strong); color: #fff; }

.btn svg { width: 18px; height: 18px; flex: none; }

.btn--dark { background: var(--color-ink); color: #fff; }
.btn--dark:hover { background: var(--color-ink-3); color: #fff; }

.btn--ghost {
  background: transparent;
  border-color: var(--color-line-strong);
  color: var(--color-ink);
}
.btn--ghost:hover { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }

.btn--ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn--ghost-light:hover { background: #fff; border-color: #fff; color: var(--color-ink); }

.btn--white { background: #fff; color: var(--color-ink); }
.btn--white:hover { background: var(--color-accent); color: var(--color-on-accent); }

.btn--block { width: 100%; }
.btn--lg { min-height: 56px; padding-inline: var(--space-7); font-size: var(--text-md); }

/* Orange pill with a dark arrow tile on the leading edge. */
.btn--arrow { padding-left: var(--space-2); gap: var(--space-3); }
.btn--arrow .btn-tile {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: #fff;
  transition: background-color var(--duration) var(--ease);
}
.btn--arrow .btn-tile svg { width: 17px; height: 17px; }
.btn--arrow:hover .btn-tile { background: #000; }
.btn--arrow.btn--lg .btn-tile { width: 44px; height: 44px; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.link-arrow svg { width: 16px; height: 16px; }
.link-arrow:hover { color: var(--color-accent-strong); border-bottom-color: var(--color-accent); }
.section--dark .link-arrow { color: #fff; }
.section--dark .link-arrow:hover { color: var(--color-accent); }

/* ==========================================================================
   TOP BAR + FLOATING HEADER
   Both float over the top of the hero so the photo runs edge to edge behind
   them. --top-h reserves the vertical space they occupy.
   ========================================================================== */
.site-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
}

.topbar {
  background: rgba(20, 21, 17, 0.5);
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--text-sm);
  backdrop-filter: blur(8px);
}
.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-3);
  text-align: center;
}
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.topbar-item svg { width: 15px; height: 15px; color: var(--color-accent); flex: none; }
.topbar a { color: #fff; font-weight: var(--weight-medium); }
.topbar a:hover { color: var(--color-accent); }
.topbar-item--hide { display: none; }

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.site-header {
  position: relative;
  padding-top: var(--space-4);
  padding-inline: var(--gutter);
  background: transparent;
}

/* The white pill that floats on top of the hero image. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 68px;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 40px rgba(20, 21, 17, 0.18);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  flex: none;
}
/* Brand mark: self-contained logo image (orange square + icon + rounded
   corners are baked into the PNG, with transparent corners). */
.brand-mark-img {
  width: 56px;
  height: 56px;
  flex: none;
  display: block;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text small {
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Mobile menu: CSS-only checkbox toggle. The checkbox stays focusable (never
   display:none) so the menu opens with Enter/Space, no JavaScript involved. */
.nav-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease);
}
.nav-toggle:hover { background: var(--color-surface-2); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }

.nav-checkbox:checked ~ .nav-toggle .icon-open { display: none; }
.nav-checkbox:checked ~ .nav-toggle .icon-close { display: block; }

.nav-checkbox:focus-visible ~ .nav-toggle {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.nav-panel {
  display: none;
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(100% + var(--space-2));
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(20, 21, 17, 0.24);
}
.nav-checkbox:checked ~ .nav-panel { display: block; }

.nav-list { display: flex; flex-direction: column; }

.nav-list > li > a {
  display: block;
  padding: var(--space-3) 0;
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
}
.nav-list > li > a:hover { color: var(--color-accent-strong); }
.nav-list a[aria-current="page"] { color: var(--color-accent-strong); }

.subnav { padding: var(--space-3) 0 var(--space-3) var(--space-4); }
.subnav li + li { margin-top: var(--space-1); }
.subnav a {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-body);
}
.subnav a:hover { color: var(--color-accent-strong); }
.subnav a[aria-current="page"] { color: var(--color-accent-strong); font-weight: var(--weight-semibold); }

.header-cta { display: none; }

/* ==========================================================================
   HERO (home)
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-ink-2);
}

/* Scroll-driven parallax on the hero background — pure CSS, no JavaScript.
   The photo drifts down and zooms slightly as the page scrolls, so it moves
   slower than the text and worker cutout in front of it. Guarded by @supports
   (browsers without scroll-timelines just show a static image) and disabled
   when the visitor prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero .hero-media img {
      transform-origin: center center;
      will-change: transform;
      animation: hero-parallax linear both;
      animation-timeline: scroll(root);
    }
    /* The timeline spans the whole page, so the motion is front-loaded into the
       first ~12% — roughly the point where the hero has scrolled out of view —
       then holds. This keeps the parallax visible across the first screen
       without relying on animation-range, which some engines ignore. */
    @keyframes hero-parallax {
      0%   { transform: scale(1.05) translate3d(0, 0, 0); }
      12%  { transform: scale(1.20) translate3d(0, 8%, 0); }
      100% { transform: scale(1.20) translate3d(0, 8%, 0); }
    }
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      100deg,
      rgba(20, 21, 17, 0.94) 0%,
      rgba(20, 21, 17, 0.86) 45%,
      rgba(20, 21, 17, 0.62) 100%
    );
}
.hero-inner {
  position: relative;
  padding-block: calc(var(--top-h) + var(--space-6)) var(--space-9);
}
.hero-content { position: relative; z-index: var(--z-raised); max-width: 640px; }

/* Cutout worker layered on top of the background photo. */
.hero-figure {
  display: none;
  position: absolute;
  right: calc(var(--space-8) * -1);
  bottom: 0;
  z-index: var(--z-base);
  width: auto;
  height: 96%;
  max-height: 780px;
  object-fit: contain;
  object-position: bottom right;
  background: none;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

/* Pill label above the headline. */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  backdrop-filter: blur(6px);
}
.hero-pill svg { width: 16px; height: 16px; color: var(--color-accent); flex: none; }

/* Two supporting points under the sub-headline. */
.hero-features {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-block: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.hero-feature { display: flex; align-items: center; gap: var(--space-4); }
.hero-feature-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 21, 17, 0.5);
  color: var(--color-accent);
}
.hero-feature-icon svg { width: 24px; height: 24px; }
.hero-feature span {
  color: #fff;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
}
.hero h1 {
  color: #fff;
  font-size: var(--text-4xl);
  letter-spacing: -0.03em;
}
.hero .eyebrow { color: #fff; }
.hero-sub {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.8);
  max-width: 52ch;
}
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line-dark);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.hero-badge svg { width: 16px; height: 16px; color: var(--color-accent); flex: none; }

/* Floating stat card on hero */
.hero-card {
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  display: grid;
  gap: var(--space-4);
}
.hero-card-row { display: flex; align-items: center; gap: var(--space-4); }
.hero-card-score {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: #fff;
  line-height: 1;
}
.hero-card-label { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.75); }
.stars { display: inline-flex; gap: 2px; color: var(--color-star); }
.stars svg { width: 16px; height: 16px; }

/* ==========================================================================
   PAGE HERO (interior pages)
   ========================================================================== */
.page-hero {
  position: relative;
  isolation: isolate;
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  text-align: center;
}
.page-hero .hero-media { position: absolute; inset: 0; z-index: -2; }
.page-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 21, 17, 0.9), rgba(20, 21, 17, 0.78));
}
.page-hero-inner { padding-block: calc(var(--top-h) + var(--space-6)) var(--space-9); }
.page-hero h1 { color: #fff; font-size: var(--text-3xl); margin-bottom: var(--space-3); }
.page-hero p {
  max-width: 60ch;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.8);
}
.page-hero .eyebrow { color: #fff; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
}
.breadcrumb a { color: rgba(255, 255, 255, 0.9); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: rgba(255, 255, 255, 0.4); }
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb [aria-current="page"] { color: var(--color-accent); }

/* ==========================================================================
   CARDS
   ========================================================================== */
/* Light-surface components can be dropped inside a .section--dark, so each one
   declares its own text color instead of inheriting the section's light text. */
.card,
.tier,
.beforeafter,
.faq-item,
.service-card,
.project-card,
.value-card,
.team-card,
.trust-strip,
.feature,
.form-card,
.contact-row { color: var(--color-body); }

.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}
.card:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--color-body); font-size: var(--text-base); }

.card-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  flex: none;
}
.card-icon svg { width: 26px; height: 26px; }

.card--dark {
  background: var(--color-ink-2);
  border-color: var(--color-line-dark);
  color: var(--color-muted-dark);
}
.card--dark h3 { color: #fff; }
.card--dark p { color: var(--color-muted-dark); }
.card--dark:hover { background: var(--color-ink-3); border-color: rgba(255, 255, 255, 0.2); }
.card--dark .card-icon { background: rgba(247, 136, 10, 0.16); color: var(--color-accent); }

.card-foot { margin-top: auto; padding-top: var(--space-5); }

/* Service card with image */
.service-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.service-card:hover { box-shadow: var(--shadow-lg); border-color: var(--color-line-strong); }
.service-card-media { position: relative; aspect-ratio: 16 / 10; background: var(--color-surface-2); }
.service-card-media img { width: 100%; height: 100%; object-fit: cover; }
.service-card-num {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.service-card-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-6); }
.service-card-body h3 { margin-bottom: var(--space-2); }
.service-card-body p { font-size: var(--text-base); }
.service-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-5);
}
.tag {
  padding: 4px var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-body);
}
.service-card-body .link-arrow { margin-top: auto; align-self: flex-start; }

/* --- Service card v2 (image · zigzag · title+icon · desc · Read More bar) ---
   The whole card is clickable via the stretched "Read More" link, and the
   icon circle + footer bar fill with the accent colour on hover. */
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.svc-card:hover { box-shadow: var(--shadow-lg); border-color: var(--color-line-strong); }

.svc-card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-2); }
.svc-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 450ms var(--ease);
}
.svc-card:hover .svc-card-media img { transform: scale(1.05); }

.svc-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  padding: var(--space-6) var(--space-6) var(--space-5);
}
.svc-zigzag { width: 46px; height: 12px; color: var(--color-line-strong); }

.svc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.svc-card-head h3 { margin: 0; font-size: var(--text-lg); }

.svc-card-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent-strong);
  box-shadow: 0 8px 20px rgba(28, 29, 24, 0.12);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.svc-card-icon svg { width: 26px; height: 26px; }
.svc-card:hover .svc-card-icon { background: var(--color-accent); color: var(--color-on-accent); }

.svc-card-body p { margin: 0; font-size: var(--text-base); color: var(--color-body); }

.svc-card-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: auto;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}
.svc-card:hover .svc-card-more {
  background: var(--color-accent);
  border-top-color: var(--color-accent);
  color: var(--color-on-accent);
}
.svc-more-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: transform var(--duration) var(--ease);
}
.svc-more-icon svg { width: 15px; height: 15px; }
.svc-card:hover .svc-more-icon { transform: translateX(3px); }

/* Stretched link: makes the whole card clickable while keeping one real link. */
.svc-card-more::after { content: ""; position: absolute; inset: 0; }
.svc-card-more:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }

/* ==========================================================================
   GRIDS
   ========================================================================== */
.grid-2,
.grid-3,
.grid-4 { display: grid; gap: var(--space-5); }

.split {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
.split--top { align-items: start; }

.media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-2);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.media-frame--tall img { aspect-ratio: 3 / 4; }
.media-frame--wide img { aspect-ratio: 16 / 9; }

/* Overlapping asymmetric image stack */
.media-stack { position: relative; padding-bottom: var(--space-8); }
.media-stack .media-frame--front {
  width: 62%;
  margin-top: calc(var(--space-8) * -1);
  margin-left: auto;
  border: 6px solid var(--color-bg);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: var(--z-raised);
}
.media-badge {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: var(--z-raised);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-lg);
  max-width: 200px;
}
.media-badge strong { display: block; font-size: var(--text-2xl); line-height: 1; }
.media-badge span { font-size: var(--text-sm); font-weight: var(--weight-medium); }

/* Checklist */
.checklist { display: grid; gap: var(--space-3); }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
}
.checklist svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  color: var(--color-accent-strong);
}
.section--dark .checklist svg { color: var(--color-accent); }
.checklist strong { display: block; color: var(--color-ink); }
.section--dark .checklist strong { color: #fff; }

/* Feature list, 2-up */
.feature-list { display: grid; gap: var(--space-5); }
.feature {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}
.feature svg { width: 26px; height: 26px; color: var(--color-accent-strong); flex: none; }
.feature h4 { margin-bottom: var(--space-1); font-size: var(--text-base); }
.feature p { font-size: var(--text-sm); margin: 0; }

/* ==========================================================================
   STATS
   ========================================================================== */
.stats {
  display: grid;
  gap: var(--space-5);
}
.stat {
  padding: var(--space-6);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-lg);
  background: var(--color-ink-2);
}
.stat-value {
  display: block;
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: #fff;
  letter-spacing: var(--tracking-tight);
}
.stat-value span { color: var(--color-accent); }
.stat-label {
  display: block;
  margin-top: var(--space-3);
  font-weight: var(--weight-semibold);
  color: #fff;
}
.stat p { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-muted-dark); }

.stats--light .stat {
  background: var(--color-surface);
  border-color: var(--color-line);
}
.stats--light .stat-value { color: var(--color-ink); }
.stats--light .stat-label { color: var(--color-ink); }
.stats--light .stat p { color: var(--color-muted); }

/* ==========================================================================
   PROCESS TIMELINE
   ========================================================================== */
.timeline {
  display: grid;
  gap: var(--space-6);
  position: relative;
}
.timeline-step {
  position: relative;
  padding-left: var(--space-8);
}
.timeline-step::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: calc(var(--space-6) * -1);
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--color-line-strong) 0 6px,
    transparent 6px 12px
  );
}
.timeline-step:last-child::before { display: none; }
.timeline-num {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.timeline-step h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.timeline-step p { font-size: var(--text-base); margin: 0; }
.timeline-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-strong);
}
.section--dark .timeline-meta { color: var(--color-accent); }
.section--dark .timeline-step::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--color-line-dark) 0 6px,
    transparent 6px 12px
  );
}

/* ==========================================================================
   BEFORE / AFTER
   ========================================================================== */
.beforeafter {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}
.ba-pane { position: relative; border-radius: var(--radius-md); overflow: hidden; }
.ba-pane img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ba-tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.ba-tag--before { background: rgba(28, 29, 24, 0.88); color: #fff; }
.ba-tag--after { background: var(--color-accent); color: var(--color-on-accent); }
.ba-caption {
  grid-column: 1 / -1;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.ba-caption strong { color: var(--color-ink); }

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--text-base);
}
caption {
  padding: var(--space-5) var(--space-5) 0;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
th, td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}
/* The table surface is always light, even inside a dark section — so cells set
   their own color rather than inheriting the section's light-on-dark text. */
td { color: var(--color-body); }
caption { color: var(--color-muted); }
thead th {
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
tbody th { font-weight: var(--weight-semibold); color: var(--color-ink); white-space: nowrap; }
tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--color-bg); }
.cell-best { color: var(--color-ink); font-weight: var(--weight-semibold); }

/* ==========================================================================
   FAQ (CSS-only accordion)
   ========================================================================== */
.faq { display: grid; gap: var(--space-3); }
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.faq-item[open] { border-color: var(--color-line-strong); box-shadow: var(--shadow-sm); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  min-height: 48px;
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-accent-strong); }
.faq-icon {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.faq-item[open] .faq-icon::after { display: none; }
.faq-answer { padding: 0 var(--space-5) var(--space-5); }
.faq-answer p { font-size: var(--text-base); color: var(--color-body); }

.faq--dark .faq-item {
  background: var(--color-ink-2);
  border-color: var(--color-line-dark);
}
.faq--dark .faq-item summary { color: #fff; }
.faq--dark .faq-item summary:hover { color: var(--color-accent); }
.faq--dark .faq-icon { border-color: var(--color-line-dark); color: #fff; }
.faq--dark .faq-item[open] .faq-icon { color: var(--color-on-accent); }
.faq--dark .faq-answer p { color: var(--color-muted-dark); }

/* Dedicated FAQ page — grouped accordions on a comfortable measure */
.faq-page { max-width: 860px; margin-inline: auto; }
.faq-group-title {
  margin: var(--space-8) 0 var(--space-5);
  font-size: var(--text-xl);
  color: var(--color-ink);
}
.faq-page > .faq-group-title:first-child { margin-top: 0; }
.faq-answer a { color: var(--color-accent-strong); text-decoration: underline; }
.faq-answer a:hover { color: var(--color-ink); }
.faq-still {
  margin: var(--space-7) 0 0;
  text-align: center;
  font-size: var(--text-base);
  color: var(--color-muted);
}
.faq-still a { color: var(--color-accent-strong); font-weight: var(--weight-semibold); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonial-grid { display: grid; gap: var(--space-5); }
.testimonial {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-ink-2);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-lg);
}
.testimonial blockquote {
  margin: var(--space-4) 0 var(--space-5);
  font-size: var(--text-md);
  color: #fff;
  line-height: 1.55;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line-dark);
}
.testimonial-author img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.testimonial-author strong { display: block; color: #fff; font-size: var(--text-base); }
.testimonial-author span { font-size: var(--text-sm); color: var(--color-muted-dark); }

.testimonial--light {
  background: var(--color-surface);
  border-color: var(--color-line);
}
.testimonial--light blockquote { color: var(--color-ink); }
.testimonial--light .testimonial-author { border-top-color: var(--color-line); }
.testimonial--light .testimonial-author strong { color: var(--color-ink); }
.testimonial--light .testimonial-author span { color: var(--color-muted); }

.review-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  text-align: center;
}
.review-summary strong { color: #fff; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.8);
}
.cta-band .hero-media { position: absolute; inset: 0; z-index: -2; }
.cta-band .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg, rgba(20, 21, 17, 0.95) 30%, rgba(20, 21, 17, 0.7));
}
.cta-band-inner { padding-block: var(--space-9); }
.cta-band h2 { color: #fff; font-size: var(--text-2xl); }
.cta-band p { max-width: 56ch; }
.cta-band .eyebrow { color: #fff; }

.cta-contacts {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.cta-contact {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
}
.cta-contact svg { width: 24px; height: 24px; color: var(--color-accent); flex: none; }
.cta-contact span { display: block; font-size: var(--text-sm); color: var(--color-muted-dark); }
.cta-contact strong { display: block; color: #fff; font-size: var(--text-md); }
.cta-contact a:hover { color: var(--color-accent); }

/* Accent CTA variant */
.cta-accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.cta-accent h2 { color: var(--color-on-accent); }
.cta-accent p { color: rgba(28, 29, 24, 0.78); max-width: 56ch; margin-inline: auto; }
.cta-accent .btn-row { justify-content: center; }
.cta-accent :focus-visible { outline-color: var(--color-ink); }

/* ==========================================================================
   TRUST / LOGO STRIP
   ========================================================================== */
.trust-strip {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}
.trust-item svg { width: 26px; height: 26px; color: var(--color-accent-strong); flex: none; }

/* ==========================================================================
   ABOUT US (home) — image collage + content
   ========================================================================== */
.about-grid { display: grid; gap: var(--space-8); }

/* --- Media collage --- */
.about-media {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.about-col { display: flex; flex-direction: column; gap: var(--space-4); }

.about-img { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-2); }
.about-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-img--tall img { aspect-ratio: 3 / 3.6; }
.about-img--taller img { aspect-ratio: 3 / 4.4; }

.about-stat {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: var(--color-muted-dark);
}
.about-stat strong { display: block; font-size: var(--text-3xl); line-height: 1; color: #fff; letter-spacing: var(--tracking-tight); }
.about-stat span { display: block; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: #fff; }

.about-satisfaction {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: var(--color-muted-dark);
}
/* Award / certification badges. Each sits on its own white tile: the supplied
   artwork is inconsistent (some transparent, GAF opaque white), so the tile
   normalises them and keeps every badge legible on the dark card. */
.about-creds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.about-creds li {
  display: grid;
  place-items: center;
  flex: 1 1 0;
  min-width: 0;
  padding: 5px;
  border-radius: var(--radius-sm);
  background: #fff;
}
/* The card is narrow, so let each badge fill its tile — capped only by the
   source width so it never upscales past its own resolution. */
.about-creds img {
  width: 100%;
  max-width: 88px;
  height: auto;
}
.about-satisfaction h3 { color: #fff; font-size: var(--text-lg); margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line-dark); }
.about-satisfaction p { margin: 0; font-size: var(--text-sm); }

/* Rotating "Contact Us" badge */
.about-badge {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--color-ink);
  box-shadow: var(--shadow-lg);
}
.about-badge-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: about-spin 16s linear infinite;
}
.about-badge-ring text {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
  fill: #fff;
}
.about-badge-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.about-badge-icon svg { width: 20px; height: 20px; }
@keyframes about-spin { to { transform: rotate(360deg); } }

/* --- Content --- */
.pill-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.pill-eyebrow svg { width: 15px; height: 15px; color: var(--color-accent); flex: none; }

.about-content h2 { font-size: var(--text-3xl); }
.about-content .lead { margin-top: var(--space-4); }

.about-features { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.about-feature {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.about-feature-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
}
.about-feature-icon svg { width: 22px; height: 22px; }
.about-feature h3 { margin: 0; font-size: var(--text-base); }

.about-checklist { display: grid; gap: var(--space-3); }
.about-checklist li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-base); color: var(--color-body); }
.about-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
}
.about-check svg { width: 13px; height: 13px; }

.about-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}
.about-help { display: flex; align-items: center; gap: var(--space-3); }
.about-help-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
}
.about-help-icon svg { width: 24px; height: 24px; }
.about-help-text strong { display: block; font-size: var(--text-md); color: var(--color-ink); }
.about-help-text a { font-size: var(--text-sm); color: var(--color-muted); }
.about-help-text a:hover { color: var(--color-accent-strong); }

@media (prefers-reduced-motion: reduce) {
  .about-badge-ring { animation: none; }
}

/* ==========================================================================
   SERVICE AREA
   ========================================================================== */
.area-grid { display: grid; gap: var(--space-3); }
.area-col h4 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-base);
}
.area-col h4 svg { width: 18px; height: 18px; color: var(--color-accent-strong); }
.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.area-list li {
  padding: 4px var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-body);
}

/* ==========================================================================
   PROJECTS
   ========================================================================== */
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  transition: box-shadow var(--duration) var(--ease);
}
.project-card:hover { box-shadow: var(--shadow-lg); }
.project-media { position: relative; aspect-ratio: 4 / 3; }
.project-media img { width: 100%; height: 100%; object-fit: cover; }
.project-chip {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: 6px var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.project-body { padding: var(--space-6); }
.project-body h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.project-meta div { display: flex; align-items: center; gap: var(--space-2); }
.project-meta svg { width: 16px; height: 16px; color: var(--color-accent-strong); }

/* Featured project (asymmetric) */
.project-feature {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-5);
  background: var(--color-ink);
  border-radius: var(--radius-xl);
  color: var(--color-muted-dark);
}
.project-feature h2 { color: #fff; font-size: var(--text-2xl); }
.project-feature .media-frame img { aspect-ratio: 16 / 10; }
.project-feature-body { padding: var(--space-4) var(--space-4) var(--space-6); }
.project-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line-dark);
}
.project-stats strong { display: block; color: #fff; font-size: var(--text-xl); }
.project-stats span { font-size: var(--text-sm); }

/* ==========================================================================
   TEAM / VALUES
   ========================================================================== */
.team-card {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}
.team-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.team-body { padding: var(--space-5); }
.team-body h3 { font-size: var(--text-base); margin-bottom: 2px; }
.team-body span { font-size: var(--text-sm); color: var(--color-muted); }

.value-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}
.value-num {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
}

/* ==========================================================================
   PRICING / PACKAGE TIERS
   ========================================================================== */
.tiers { display: grid; gap: var(--space-5); }
.tier {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}
.tier--featured {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-muted-dark);
}
.tier--featured h3 { color: #fff; }
.tier--featured .tier-price { color: #fff; }
.tier--featured .checklist strong { color: #fff; }
.tier--featured .checklist svg { color: var(--color-accent); }
.tier-badge {
  align-self: flex-start;
  margin-bottom: var(--space-4);
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.tier-price {
  margin: var(--space-2) 0 var(--space-5);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  letter-spacing: var(--tracking-tight);
}
.tier-price small {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-muted);
  letter-spacing: 0;
}
.tier--featured .tier-price small { color: var(--color-muted-dark); }
.tier .btn { margin-top: var(--space-6); }
.tier .checklist { margin-top: auto; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-card {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.form-grid { display: grid; gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.field .req { color: var(--color-accent-strong); }
.field .hint { font-size: var(--text-xs); color: var(--color-muted); }

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--text-base);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
textarea { min-height: 140px; resize: vertical; line-height: 1.5; }

input::placeholder,
textarea::placeholder { color: #8d8f86; }

input:hover,
select:hover,
textarea:hover { border-color: var(--color-ink); }

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-ink);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231C1D18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-8);
  cursor: pointer;
}

.field-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.field-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--color-accent-strong);
  cursor: pointer;
}
.field-check label { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-body); }

fieldset { margin: 0; padding: 0; border: 0; }
legend {
  padding: 0;
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.form-note { font-size: var(--text-sm); color: var(--color-muted); }

/* Contact info panel */
.contact-panel { display: grid; gap: var(--space-4); }
.contact-row {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.contact-row svg { width: 24px; height: 24px; color: var(--color-accent-strong); flex: none; }
.contact-row h3 { font-size: var(--text-base); margin-bottom: var(--space-1); }
.contact-row p { font-size: var(--text-base); margin: 0; }
.contact-row a:hover { color: var(--color-accent-strong); text-decoration: underline; }

.hours-list { display: grid; gap: var(--space-2); }
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px dashed var(--color-line);
  font-size: var(--text-base);
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list strong { color: var(--color-ink); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* The footer is a floating card: inset from the page edges so the cream page
   background frames it, with every corner rounded. */
.site-footer {
  position: relative;
  overflow: hidden;
  margin: var(--space-4);
  background: var(--color-ink);
  color: var(--color-muted-dark);
  border-radius: 40px;
}
.site-footer > .container { position: relative; z-index: 1; }

/* Faint white roof shapes, clipped to the rounded card, behind the content. */
.footer-shape {
  position: absolute;
  z-index: 0;
  color: #fff;
  opacity: 0.05;
  pointer-events: none;
}
.footer-shape svg { width: 100%; height: auto; display: block; }
.footer-shape--tr { top: -32px; right: -24px; width: 340px; }
.footer-shape--bl { bottom: -28px; left: -28px; width: 300px; transform: scaleX(-1); }
@media (max-width: 47.99em) {
  .footer-shape--bl { display: none; }   /* keep the tall mobile footer clean */
}

.footer-social { display: flex; gap: var(--space-2); }
.footer-social a {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.footer-social a svg { width: 18px; height: 18px; }
.footer-social a:hover { background: var(--color-accent); color: var(--color-on-accent); }

/* Social links on the contact page. Same shape as .footer-social, but this set
   sits on a light section, so it gets its own colours rather than the footer's. */
.socials { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.social-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  transition: background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              color var(--duration) var(--ease);
}
.social-link svg { width: 18px; height: 18px; }
.social-link:hover,
.social-link:focus-visible {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: #fff;
}

.footer-rule { border: 0; border-top: 1px solid var(--color-line-dark); margin: 0; }

/* --- Main columns: company · nav · hours · services ---
   Mobile-first: one column. 2-up at 40em, 4-up at 64em. --- */
.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-block: 5rem var(--space-9);   /* extra top room now the call strip is gone */
}
.footer-col { min-width: 0; }

.footer-h {
  margin: 0 0 1.75rem;
  color: #fff;
  font-size: var(--text-xl);            /* 24px, matches Roofin */
  font-weight: var(--weight-semibold);
}

/* Column 1 — company */
.footer-col--company .brand { color: #fff; }
.footer-col--company .brand-text small {
  font-size: var(--text-sm);
  text-align: center;
  letter-spacing: 0.14em;
  color: var(--color-muted-dark);
}
.footer-about {
  margin: var(--space-5) 0 0;
  max-width: 42ch;
  font-size: 1.0625rem;                 /* 17px, matches Roofin */
  line-height: 1.55;
  color: var(--color-muted-dark);
}
.footer-info { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.footer-info li { display: flex; gap: var(--space-3); font-size: var(--text-base); line-height: 1.5; }
.footer-info svg { width: 20px; height: 20px; color: var(--color-accent); flex: none; margin-top: 2px; }
.footer-info a { color: var(--color-muted-dark); transition: color var(--duration) var(--ease); }
.footer-info a:hover { color: #fff; }

.footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-5); }

/* Columns 2 & 3 — link lists (matches the Roofin footer: white link, a full-
   width divider under each row, arrow pushed right, orange on hover). */
.footer-links { display: grid; gap: 0; align-content: start; }
.footer-links a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-bottom: 13px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-line-dark);
  font-size: 1.0625rem;                 /* 17px */
  font-weight: var(--weight-medium);
  color: #fff;
  transition: color var(--duration) var(--ease), padding-left var(--duration) var(--ease);
}
.footer-links li:last-child a { margin-bottom: 0; }
.footer-links a svg {
  width: 18px; height: 18px; flex: none;
  color: currentColor;
  transition: transform var(--duration) var(--ease);
}
.footer-links a:hover,
.footer-links a:focus-visible { color: var(--color-accent); padding-left: var(--space-2); }
.footer-links a:hover svg,
.footer-links a:focus-visible svg { transform: translateX(4px); }

/* Hours — now lives in the company column, under the description */
.footer-hours { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.footer-hours li {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--text-base); color: var(--color-muted-dark);
}
.footer-hours strong { color: #fff; font-weight: var(--weight-semibold); }
.footer-note {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-muted-dark);
}

/* --- Bottom bar: copyright + legal --- */
.footer-bottom {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-line-dark);
  text-align: center;
}
.footer-copy { margin: 0; font-size: var(--text-sm); }
.footer-legal {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
}
.footer-legal li { position: relative; }
.footer-legal a {
  font-size: var(--text-sm);
  color: var(--color-muted-dark);
  transition: color var(--duration) var(--ease);
}
.footer-legal a:hover { color: #fff; }
/* Dot separators between legal links (desktop only — they'd collide when wrapped). */
@media (min-width: 48em) {
  .footer-legal li + li::before {
    content: "";
    position: absolute; left: calc(var(--space-5) / -2); top: 50%;
    width: 3px; height: 3px; margin-top: -1.5px;
    border-radius: 50%;
    background: var(--color-line-dark);
  }
}
.footer-totop {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-accent); color: var(--color-on-accent);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.footer-totop svg { width: 20px; height: 20px; }
.footer-totop:hover { background: var(--color-accent-strong); color: #fff; }

@media (min-width: 40em) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-6); }
  .footer-col--company { grid-column: 1 / -1; }
}

@media (min-width: 64em) {
  .footer-head { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-6); }
  .footer-cols { grid-template-columns: 1.8fr 1fr 1fr 1.3fr; gap: var(--space-8); }
  .footer-col--company { grid-column: auto; }
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
  /* Keep the copyright optically centred by pulling the to-top button out of flow. */
  .footer-totop { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .footer-legal { margin-right: 64px; }
}

/* ==========================================================================
   RESPONSIVE — TABLET (>= 640px)
   ========================================================================== */
@media (min-width: 40em) {
  :root { --gutter: var(--space-6); }

  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }

  .hero h1 { font-size: var(--text-5xl); }
  .page-hero h1 { font-size: var(--text-4xl); }
  .display { font-size: var(--text-4xl); }

  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .area-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .trust-strip { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .feature-list { grid-template-columns: repeat(2, 1fr); }
  .topbar-item--hide { display: inline-flex; }
  .hero-features { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .cta-contacts { grid-template-columns: repeat(2, 1fr); }
  .cta-accent { padding: var(--space-9) var(--space-8); }
}

/* ==========================================================================
   RESPONSIVE — DESKTOP (>= 64em)
   ========================================================================== */
@media (min-width: 64em) {
  :root {
    --section-y: var(--section-y-lg);
    --gutter: var(--space-7);
  }

  :root { --top-h: 148px; }

  .hero h1 { font-size: 4rem; }
  .hero-inner {
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding-block: calc(var(--top-h) + var(--space-7)) var(--space-9);
  }
  .hero-content { max-width: 58%; }
  /* The cutout only appears once there's room beside the copy for it. */
  .hero-figure { display: block; }
  .page-hero-inner { padding-block: calc(var(--top-h) + var(--space-8)) var(--space-10); }

  /* Desktop nav: <details> panel becomes an inline bar */
  .nav-toggle,
  .nav-checkbox { display: none; }
  .nav-panel {
    display: block;
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .nav-list {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
  }
  .nav-list > li { position: relative; }
  .nav-list > li > a {
    padding: var(--space-3) var(--space-4);
    border-bottom: 0;
    border-radius: var(--radius-pill);
    font-size: var(--text-base);
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
  }
  .nav-list > li > a:hover { background: var(--color-bg); }
  .nav-list a[aria-current="page"] { background: var(--color-bg); color: var(--color-accent-strong); }

  /* Dropdown: opens on hover AND keyboard focus */
  .has-sub > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  .has-sub .subnav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: var(--z-nav);
    width: 236px;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--duration) var(--ease), visibility var(--duration) var(--ease);
  }
  .has-sub:hover .subnav,
  .has-sub:focus-within .subnav { visibility: visible; opacity: 1; }
  .subnav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); }
  .subnav a:hover { background: var(--color-bg); }

  .header-cta { display: inline-flex; }
  .header-inner { min-height: 84px; }

  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats--3 { grid-template-columns: repeat(3, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-strip { grid-template-columns: repeat(4, 1fr); }
  .area-grid { grid-template-columns: repeat(3, 1fr); }
  .tiers { grid-template-columns: repeat(3, 1fr); }

  .split { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
  .split--reverse .split-media { order: 2; }
  .split--wide-media { grid-template-columns: 1.15fr 1fr; }
  .split--narrow-media { grid-template-columns: 1fr 1.15fr; }

  .section-head--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: end;
  }
  .section-head--split .section-head-action { justify-self: end; align-self: end; }

  /* About Us: media collage left, content right */
  .about-grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: var(--space-9);
    align-items: center;
  }
  .about-content h2 { font-size: var(--text-4xl); }
  .about-features { grid-template-columns: 1fr 1fr; }
  .about-foot { flex-wrap: nowrap; justify-content: space-between; }
  /* Second collage column dips down for the staggered look */
  .about-col--offset { margin-top: var(--space-8); }
  .about-badge { width: 116px; height: 116px; left: 58%; bottom: 5%; }

  /* Timeline goes horizontal on desktop */
  .timeline--horizontal { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
  .timeline--horizontal .timeline-step { padding-left: 0; padding-top: var(--space-8); }
  .timeline--horizontal .timeline-step::before {
    top: 17px;
    left: 44px;
    right: calc(var(--space-6) * -1);
    bottom: auto;
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(
      to right,
      var(--color-line-strong) 0 6px,
      transparent 6px 12px
    );
  }
  .section--dark .timeline--horizontal .timeline-step::before {
    background: repeating-linear-gradient(
      to right,
      var(--color-line-dark) 0 6px,
      transparent 6px 12px
    );
  }
  .timeline--horizontal .timeline-step:last-child::before { display: none; }

  .timeline--3 { grid-template-columns: repeat(3, 1fr); }
  .timeline--5 { grid-template-columns: repeat(5, 1fr); }

  .project-feature {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    padding: var(--space-6);
    gap: var(--space-8);
  }
  .project-feature-body { padding: 0 var(--space-4) 0 0; }

  /* Panes sit side by side only once there's room — below this they stack,
     so the two images never squeeze into slivers on a tablet. */
  .beforeafter {
    grid-template-columns: repeat(2, 1fr);
    padding: var(--space-6);
    gap: var(--space-5);
  }
  .cta-band-inner { padding-block: var(--space-10); }
  .cta-band .split { align-items: center; }
  /* In the split's narrow right column, stack the contact cards so the phone
     number and email sit on one line instead of wrapping. */
  .cta-contacts { grid-template-columns: 1fr; }


  .form-card { padding: var(--space-8); }
  .form-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .form-grid--2 .field--full { grid-column: 1 / -1; }
}

/* ==========================================================================
   SCROLL REVEAL — see assets/css/animations.css
   The data-reveal / data-reveal-img / data-parallax hooks now live in the
   animation library so they can be reused across projects. Nothing to do here.
   ========================================================================== */

/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */
@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;
  }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .site-header,
  .topbar,
  .site-footer,
  .cta-band,
  .cta-accent { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   LEGAL / PROSE PAGES — privacy, terms, accessibility
   Long-form running text. Narrow measure, generous rhythm, nothing fancy.
   ========================================================================== */
.legal { max-width: 72ch; }
.legal > * + * { margin-top: var(--space-5); }

.legal h2 {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-xl);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { margin-top: var(--space-6); font-size: var(--text-lg); }

.legal p,
.legal li { color: var(--color-muted); line-height: var(--leading-body); }
.legal strong { color: var(--color-ink); }

.legal ul { display: grid; gap: var(--space-3); padding-left: var(--space-5); list-style: disc; }
.legal li::marker { color: var(--color-accent); }

.legal a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--color-accent); }

/* Effective-date stamp under the H1 */
.legal-meta {
  margin-bottom: var(--space-7);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
}
.legal-meta p { margin: 0; }

/* 404 — opens straight into content with no .page-hero, so it has to reserve
   room for the absolutely-positioned header itself or the code hides behind it. */
.error-page { text-align: center; padding-top: var(--top-h); }
.error-code {
  display: block;
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-accent);
}
.error-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

/* ==========================================================================
   TABLES ON MOBILE
   A 5-6 column comparison table can't fit a phone. Rather than scroll it
   sideways — which also dragged the <caption> out of view, since the caption
   inherits the table's min-width — each row becomes its own card and each cell
   is labelled from its column header via data-label.
   ========================================================================== */
@media (max-width: 47.99em) {
  .table-wrap {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .table-wrap table {
    display: block;
    min-width: 0;      /* the 640px floor is what forced the sideways scroll */
    font-size: var(--text-base);
  }
  .table-wrap caption {
    display: block;
    padding: 0 0 var(--space-4);
  }

  /* Column headers are repeated per cell by data-label, so hide the row itself
     — visually only; screen readers still get it. */
  .table-wrap thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap th,
  .table-wrap td { display: block; }

  .table-wrap tbody tr {
    margin-bottom: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .table-wrap tbody tr:last-child { margin-bottom: 0; }

  .table-wrap tbody th[scope="row"] {
    padding: 0 0 var(--space-3);
    border-bottom: 1px solid var(--color-line);
    font-size: var(--text-lg);
    color: var(--color-ink);
  }

  .table-wrap tbody td {
    padding: var(--space-4) 0 0;
    border-bottom: 0;
  }
  .table-wrap tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-muted);
  }
  /* Blank column headers (some tables use &nbsp;) shouldn't leave a gap. */
  .table-wrap tbody td[data-label=""]::before,
  .table-wrap tbody td[data-label="&nbsp;"]::before { display: none; }

  /* Keep the "best" cell highlight readable in card form. */
  .table-wrap tbody td.cell-best {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
  }
}

/* ==========================================================================
   TEXTURED DARK SECTION
   A faint shingle photo over the dark base. The section's solid dark
   background-color still paints first, so the ::before texture only tints it
   and white text stays legible. Decorative → no markup image, no alt text.
   ========================================================================== */
.section--textured { position: relative; isolation: isolate; overflow: hidden; }
.section--textured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/texture-shingle.jpg") center / cover no-repeat;
  opacity: var(--texture-opacity, 0.07);   /* override per section, e.g. --textured-faint */
  pointer-events: none;
}
/* Same texture, dialled back further — for busier sections. */
.section--textured-faint { --texture-opacity: 0.04; }

/* ==========================================================================
   IN-PAGE SECTION NAV — sticky pill bar under a service-page hero.
   Jumps to the anchored sections below (pure anchors, no JavaScript).
   ========================================================================== */
.page-jumpnav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
}
.jumpnav-list {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) 0;
  list-style: none;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.jumpnav-list::-webkit-scrollbar { display: none; }
.jumpnav-list li { flex: none; }
.jumpnav-list a {
  display: block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-body);
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.jumpnav-list a:hover,
.jumpnav-list a:focus-visible { background: var(--color-accent); color: var(--color-on-accent); }

/* So anchored sections land below the sticky bar, not under it. */
.section[id] { scroll-margin-top: 72px; }

/* ==========================================================================
   ROOFING SERVICE BLOCKS — one section per service, rotating backgrounds,
   text on one side and a feature checklist card on the other (sides alternate).
   ========================================================================== */
.svc-split { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 64em) {
  .svc-split { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
  .svc--flip .svc-text { order: 2; }
}
.svc-text .eyebrow { margin: 0 0 var(--space-3); }
.svc-text h2 { margin: 0 0 var(--space-4); }
.svc-text p { margin: 0 0 var(--space-4); }
.svc-text .btn { margin-top: var(--space-2); }

.svc-features {
  display: grid; gap: var(--space-3);
  margin: 0; padding: var(--space-6);
  list-style: none;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
}
.svc-features li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-base); line-height: 1.5; color: var(--color-body); }
.svc-features svg { width: 22px; height: 22px; color: var(--color-accent); flex: none; margin-top: 1px; }

/* Per-section background variants */
.svc--white { background: var(--color-surface); }
.svc--cream { background: var(--color-bg); }
.svc--tint  { background: #fbe9d2; }
.svc--dark  { background: var(--color-dark); color: var(--color-muted-dark); }
.svc--dark h2 { color: #fff; }
.svc--dark .eyebrow { color: var(--color-accent); }
/* Feature card adapts so it always reads against its section */
.svc--white .svc-features { background: var(--color-bg); }
.svc--dark .svc-features { background: rgba(255, 255, 255, 0.05); border-color: var(--color-line-dark); box-shadow: none; }
.svc--dark .svc-features li { color: var(--color-muted-dark); }

/* ==========================================================================
   SERVICE PAGE — sidebar layout (Aurox-style)
   Sticky left sidebar (Explore Our Services + Contact) beside a main column
   of service blocks, each with an image.
   ========================================================================== */
.svc-layout { display: grid; gap: var(--space-7); }
@media (min-width: 64em) {
  .svc-layout { grid-template-columns: 330px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  .svc-sidebar { position: sticky; top: var(--space-4); }
}

/* Sidebar cards */
.sidebar-card {
  margin-bottom: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}
.sidebar-card__head {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}
.sidebar-nav { list-style: none; margin: 0; padding: var(--space-2) var(--space-5) var(--space-4); }
.sidebar-nav li + li { border-top: 1px solid var(--color-line); }
.sidebar-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0;
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  color: var(--color-ink);
  transition: color var(--duration) var(--ease), padding-left var(--duration) var(--ease);
}
.sidebar-nav a svg { width: 16px; height: 16px; color: var(--color-accent); flex: none; transition: transform var(--duration) var(--ease); }
.sidebar-nav a:hover, .sidebar-nav a:focus-visible { color: var(--color-accent); padding-left: var(--space-2); }
.sidebar-nav a:hover svg, .sidebar-nav a:focus-visible svg { transform: translateX(3px); }

/* Contact card: orange head, dark body */
.sidebar-card--contact { border: 0; background: var(--color-ink); }
.sidebar-card__body { padding: var(--space-5); }
.sidebar-contact-text { margin: 0 0 var(--space-5); color: var(--color-muted-dark); font-size: var(--text-base); line-height: 1.55; }
.sidebar-contact { list-style: none; margin: 0; display: grid; gap: var(--space-4); }
.sidebar-contact li { display: grid; gap: 2px; }
.sidebar-contact span { font-size: var(--text-sm); color: var(--color-muted-dark); }
.sidebar-contact a { font-size: var(--text-lg); font-weight: var(--weight-bold); color: #fff; transition: color var(--duration) var(--ease); }
.sidebar-contact a:hover { color: var(--color-accent); }

/* Main column: service blocks with images */
.svc-main { display: grid; gap: var(--space-9); }
.svc-item { scroll-margin-top: var(--space-5); }
.svc-item__media { margin: 0 0 var(--space-6); border-radius: var(--radius-lg); overflow: hidden; }
.svc-item__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.svc-item .eyebrow { margin: 0 0 var(--space-3); }
.svc-item h2 { margin: 0 0 var(--space-4); font-size: var(--text-2xl); }
.svc-item .lead { margin: 0 0 var(--space-4); }
.svc-item p { margin: 0 0 var(--space-4); }
.svc-item .svc-features {
  display: grid; gap: var(--space-3);
  margin: var(--space-5) 0 0; padding: 0;
  background: none; border: 0; box-shadow: none; border-radius: 0;
}
@media (min-width: 40em) { .svc-item .svc-features { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); } }

/* On mobile, content first — the sidebar (nav + contact) drops below it. */
@media (max-width: 63.99em) {
  .svc-sidebar { order: 2; }
  .svc-layout { display: flex; flex-direction: column; }
}

/* ==========================================================================
   SERVICE AREA PAGE — stats, Long Island map, town directory
   ========================================================================== */
.area-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-8); }
.area-stat { text-align: center; padding: var(--space-6) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-line); }
.area-stat strong { display: block; font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--color-accent); line-height: 1; }
.area-stat span { display: block; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--weight-semibold); }

.area-map { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-line); background: #d7e3ea; }
.li-map { width: 100%; height: auto; display: block; }
.li-map .li-water { fill: #8aa7b6; font-size: 15px; font-weight: 700; letter-spacing: 0.14em; }
.li-map .li-label { font-size: 22px; font-weight: 800; letter-spacing: 0.1em; }
.li-map .li-hq { fill: #1c1d18; font-size: 13px; font-weight: 700; }

.area-town-grid { columns: 3 240px; column-gap: var(--space-5); }
.area-town { break-inside: avoid; margin-bottom: var(--space-5); padding: var(--space-5); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-line); }
.section--white .area-town { background: var(--color-bg); }
.area-town h3 { margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-accent); font-size: var(--text-lg); color: var(--color-ink); }
.area-town ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.area-town li { font-size: var(--text-base); color: var(--color-body); }
.area-town li.is-hq { font-weight: var(--weight-bold); color: var(--color-ink); }
.area-town li.is-hq span { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-on-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; }

@media (max-width: 47.99em) { .area-stats { grid-template-columns: 1fr; gap: var(--space-4); } }

/* Service-area map is now a Google Maps embed */
.area-map iframe { display: block; width: 100%; height: 460px; border: 0; }
@media (max-width: 47.99em) { .area-map iframe { height: 340px; } }

/* ==========================================================================
   PROMOTIONS PAGE
   ========================================================================== */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
.promo-card {
  display: flex; flex-direction: column;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
}
.promo-card__tag {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-accent-strong);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.promo-card__value { margin: var(--space-4) 0 0; font-size: var(--text-3xl); font-weight: 800; color: var(--color-accent); line-height: 1; }
.promo-card h3 { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-lg); }
.promo-card p { margin: 0 0 var(--space-4); font-size: var(--text-base); color: var(--color-body); }
.promo-card .svc-features { margin: 0 0 var(--space-5); padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; gap: var(--space-2); }
.promo-code { margin: 0 0 var(--space-5); font-size: var(--text-sm); color: var(--color-muted); }
.promo-code strong { display: inline-block; margin-left: 4px; padding: 2px 9px; border: 1px dashed var(--color-accent); border-radius: var(--radius-sm); color: var(--color-ink); font-weight: 700; letter-spacing: 0.06em; }
.promo-card .btn { margin-top: auto; align-self: flex-start; }

.promo-terms { max-width: 82ch; }
.promo-terms h2 { margin: 0 0 var(--space-5); font-size: var(--text-xl); }
.promo-terms ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.promo-terms li { position: relative; padding-left: var(--space-5); font-size: var(--text-sm); color: var(--color-muted); line-height: 1.6; }
.promo-terms li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

/* Design credit link in the footer bottom bar */
.footer-copy a { color: var(--color-muted-dark); text-decoration: underline; text-underline-offset: 2px; transition: color var(--duration) var(--ease); }
.footer-copy a:hover, .footer-copy a:focus-visible { color: var(--color-accent); }