/* ============================================================
   base.css - ERS Installations design system (CWS-grade pass)
   LIGHT commercial theme: blue-tinted warm white bg, navy #0f2b4d
   dark family, #175fb5 accent, amber gradient CTAs (dark text).
   Inter (self-hosted) body - Paramount Sans display headings.
   No framework. Plain custom properties.
   ============================================================ */

/* ---------------- self-hosted fonts ---------------- */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/fonts/inter-800.woff2") format("woff2");
}
@font-face {
  font-family: "Paramount"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/paramount.woff2") format("woff2");
}

:root {
  /* navy brand family (industrial-premium commercial feel) */
  --navy-900: #0b2140;
  --navy-800: #0f2b4d;
  --navy-700: #123a6b;
  --blue-700: #144e96;
  --accent: #175fb5;
  --accent-hover: #124b8f;
  --accent-soft: rgba(23, 95, 181, .10);
  --sky-300: #8fc1f2;   /* 7.52:1 on navy-800 */
  --sky-200: #b9d9f8;   /* 5.60:1 on blue-700 */

  /* light surfaces */
  --bg: #f4f8fc;
  --surface: #ffffff;
  --surface-2: #e7eef7;
  --border: #d0deee;
  --text: #101c2e;
  --muted: #49607b;     /* 6.07:1 on bg */

  /* amber CTA family (dark text on amber per AA math) */
  --amber: #F59E0B;
  --amber-hover: #d97f06;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-600: #d97706; /* 5.29:1 with --on-amber */
  --on-amber: #2a1a00;
  --amber-text: #b45309;

  /* colored shadows tinted with the brand dark */
  --shadow-md: 0 12px 30px -12px rgba(15, 43, 77, .35);
  --shadow-lg: 0 30px 70px -25px rgba(15, 43, 77, .5);

  --radius: 18px;
  --radius-lg: 26px;
  --wrap: 1160px;
  --gap: clamp(1rem, 3vw, 2rem);
  --nav-h: 66px;
  --ease: cubic-bezier(.16, .84, .44, 1);
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: "Paramount", "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--muted);
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--text); font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -1px; }
h3 { font-size: 1.25rem; font-weight: 800; font-family: var(--font-body); }
p { margin: 0 0 1rem; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.center { text-align: center; }
.services-more { margin-top: 2.6rem; }
.eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: .8rem; font-weight: 700; color: var(--accent); margin: 0 0 .7rem; }
.lede { font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--muted); max-width: 60ch; }

/* centered section heads (CWS rhythm) */
.section-head { text-align: center; max-width: 46rem; margin: 0 auto 2.8rem; }
.section-head .section-title { margin-inline: auto; }
.section-head .lede { margin-inline: auto; margin-bottom: 0; }

/* ---------------- skip link + a11y ---------------- */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy-900); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 10px 0; font-weight: 600; z-index: 100; }
.skip-link:focus { left: 0; top: 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* ---------------- buttons (pill + gradient + glow) ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  font-weight: 700; font-size: 1rem; line-height: 1.15; font-family: inherit;
  padding: .9em 1.6em; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: linear-gradient(135deg, var(--amber-400), var(--amber-600));
  color: var(--on-amber);
  box-shadow: 0 10px 24px -8px rgba(217, 119, 6, .6);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -8px rgba(217, 119, 6, .7); color: var(--on-amber); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--text); transform: translateY(-2px); }
.btn-block { width: 100%; }
/* ghost variant on dark bands / heroes: translucent white */
:is(.hero-full, .page-hero, .tone-cta) .btn-ghost {
  background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .55);
}
:is(.hero-full, .page-hero, .tone-cta) .btn-ghost:hover { background: rgba(255, 255, 255, .26); color: #fff; border-color: rgba(255, 255, 255, .75); }
/* ...but not inside the white conversion card */
.quote-card .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.quote-card .btn-ghost:hover { border-color: var(--accent); color: var(--text); background: transparent; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

/* ---------------- announce bar ---------------- */
.announce { background: linear-gradient(90deg, var(--navy-900), var(--navy-700)); color: #dbe9fb; font-size: .86rem; }
.announce-inner { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; justify-content: center; padding-block: .55rem; }
.announce-badge { color: var(--amber-300); font-weight: 600; }
.announce-sep { opacity: .45; }
.announce-call { margin-left: auto; font-weight: 600; color: #fff; }
.announce-call:hover { color: var(--amber-300); text-decoration: none; }
@media (max-width: 680px) { .announce { display: none; } }

/* ---------------- header / nav ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(244, 248, 252, .84);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15, 43, 77, .08);
  transition: box-shadow .3s;
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: var(--nav-h); }
.site-nav { display: flex; align-items: center; gap: 1.35rem; }
.site-nav a { color: var(--text); font-weight: 600; font-size: .98rem; white-space: nowrap; position: relative; }
.site-nav a:hover { color: var(--accent); text-decoration: none; }
/* link hover: 2px underline grows from the left */
.site-nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px; background: var(--accent); transition: width .25s var(--ease); }
.site-nav a:not(.nav-cta):hover::after { width: 100%; }
.nav-cta { color: var(--on-amber) !important; }
.nav-burger { display: none; }

@media (max-width: 1023px) {
  /* The header's backdrop-filter would become the containing block for the
     fixed drawer (collapsing it to the header box and widening the layout),
     so the blur comes off where the drawer exists - solid bg instead. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(244, 248, 252, .97); }
  /* Hamburger is a real <button> - 44x44 tap target (WCAG 2.5.5), keyboard
     focusable, gets the global :focus-visible ring. */
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 44px; height: 44px; padding: 0; cursor: pointer;
    background: none; border: 0; color: inherit;
  }
  .nav-burger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
  .nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* slide-in right drawer, brand-dark panel, big white links */
  .site-nav {
    position: fixed; top: var(--nav-h); right: 0; bottom: 0; left: auto;
    width: min(78vw, 340px); height: calc(100dvh - var(--nav-h));
    flex-direction: column; align-items: stretch; gap: 0;
    background: linear-gradient(165deg, var(--navy-900), var(--navy-700));
    padding: 1.1rem 0 2rem; overflow: auto;
    box-shadow: var(--shadow-lg);
    transition: transform .35s var(--ease);
  }
  .site-nav a { color: #fff; font-size: 1.15rem; padding: .95rem 1.6rem; border-top: 1px solid rgba(255, 255, 255, .08); }
  .site-nav a:hover { color: var(--sky-200); }
  .site-nav a:not(.nav-cta)::after { display: none; }
  .nav-cta { margin: 1rem 1.6rem 0; text-align: center; border-top: 0 !important; font-size: 1rem !important; }
  /* With JS the menu is a disclosure: collapsed AND removed from the tab order
     (visibility:hidden) until the button opens it, so keyboard users don't tab
     onto invisible off-screen links. Without JS (.js absent) the nav stays
     visible so every link remains reachable. */
  .js .site-nav { transform: translateX(105%); visibility: hidden; }
  .js .site-header.nav-open .site-nav { transform: translateX(0); visibility: visible; }
}

/* brand lockup */
.brand { flex: none; display: flex; flex-direction: row; align-items: center; gap: .65rem; line-height: 1.05; color: var(--text); }
.brand-logo { height: 46px; width: auto; display: block; flex: none; }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--text); letter-spacing: -.02em; }
.brand-sub { font-size: .68rem; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.brand:hover { text-decoration: none; }
.brand:hover .brand-name { color: var(--accent); }
@media (max-width: 420px) {
  .brand-logo { height: 38px; }
  .brand-name { font-size: 1.05rem; }
  .brand-sub { font-size: .6rem; }
}

/* ============================================================
   HERO - full-bleed home hero (video + duotone + conversion card)
   ============================================================ */
.hero-full {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  overflow: hidden; padding: 3.5rem 0 5rem; color: #fff;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg picture, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bg img { object-fit: cover; border: 0; border-radius: 0; aspect-ratio: auto; transform: scale(1.05); animation: slowzoom 20s ease-in-out infinite alternate; }
@keyframes slowzoom { to { transform: scale(1.14); } }
/* rotating video layer sits above the poster, under the duotone overlay */
.hero-full .hero-video { position: absolute; inset: 0; z-index: 1; border: 0; border-radius: 0; overflow: hidden; pointer-events: none; }
.hero-full .hero-video::after { display: none; }
/* navy duotone gradient overlay - the brand wash over the footage */
.hero-overlay { position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(120deg, rgba(15, 43, 77, .88) 0%, rgba(18, 58, 107, .62) 48%, rgba(23, 95, 181, .30) 100%); }
.hero-full-inner { position: relative; z-index: 3; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.hero-eyebrow { color: var(--sky-200); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: .8rem; margin: 0 0 1rem; }
.hero-title { color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 700; letter-spacing: -1.5px; line-height: 1.04; text-shadow: 0 4px 30px rgba(0, 0, 0, .3); margin: 0; }
.hero-title .grad-text { background: linear-gradient(120deg, var(--amber-300), var(--amber)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--amber-300); }
.hero-sub { color: #e4eefb; font-size: 1.14rem; max-width: 34rem; margin: 1.4rem 0 0; text-shadow: 0 2px 12px rgba(0, 0, 0, .3); }
/* trust stat row */
.hero-trust { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 1.3rem 3rem; margin-top: 2.2rem; }
.hero-trust-item strong { display: block; font-size: 1.9rem; font-weight: 800; font-family: var(--font-body); color: var(--sky-300); line-height: 1; }
.hero-trust-item span { font-size: .85rem; color: #e4eefb; }
/* bobbing scroll cue */
.hero-scroll { position: absolute; z-index: 3; bottom: 1.3rem; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; font-weight: 600; letter-spacing: .2px; opacity: .92; animation: bob 2s ease-in-out infinite; text-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
@keyframes bob { 50% { transform: translate(-50%, 8px); } }

/* hero conversion card */
.quote-card { background: rgba(255, 255, 255, .97); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.7rem; color: var(--muted); backdrop-filter: blur(6px); }
.quote-card h2 { font-size: 1.4rem; font-family: var(--font-body); font-weight: 800; letter-spacing: -.02em; margin-bottom: .3rem; }
.quote-card > p { font-size: .93rem; margin-bottom: 1.2rem; }
.quote-card .btn { width: 100%; margin-top: .6rem; }
.quote-card .btn:first-of-type { margin-top: 0; }
.quote-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.1rem 0 0; }
.quote-chips li { font-size: .74rem; font-weight: 700; color: var(--navy-800); background: var(--surface-2); border-radius: 999px; padding: .35em .9em; }

@media (max-width: 920px) {
  .hero-full-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-scroll { display: none; }
}
/* Mobile: strip the hero to video + eyebrow + title + scroll cue */
@media (max-width: 760px) {
  .hero-full { min-height: calc(100svh - var(--nav-h)); padding: 2.2rem 0 3.5rem; align-items: stretch; }
  .hero-full-inner { align-content: start; }
  .hero-full .hero-sub, .hero-trust, .quote-card, .hero-full .cta-row { display: none; }
  .hero-scroll { display: block; }
}

/* ============================================================
   PAGE HERO - inner pages: navy duotone band, optional photo bg
   ============================================================ */
.page-hero { position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--navy-900), var(--blue-700));
  padding: clamp(3rem, 7vw, 5rem) 0; }
.page-hero.has-media { min-height: 54vh; display: flex; align-items: flex-end; padding: clamp(6rem, 12vw, 9rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.page-hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero-media picture, .page-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-hero-media img { object-fit: cover; }
.page-hero-overlay { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(15, 43, 77, .94) 0%, rgba(15, 43, 77, .82) 42%, rgba(18, 58, 107, .5) 72%, rgba(23, 95, 181, .22) 100%); }
.page-hero:not(.has-media) .page-hero-overlay { background:
  radial-gradient(900px 420px at 88% -10%, rgba(143, 193, 242, .18), transparent 60%),
  radial-gradient(700px 380px at 8% 110%, rgba(245, 158, 11, .12), transparent 60%); }
.page-hero-inner { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -1px; max-width: 22ch; text-shadow: 0 2px 18px rgba(4, 18, 38, .55); }
.page-hero .hero-sub { color: #e4eefb; max-width: 44rem; text-shadow: 0 1px 12px rgba(4, 18, 38, .55); margin-top: .8rem; }
@media (max-width: 720px) {
  .page-hero.has-media { min-height: 44vh; }
  .page-hero h1 { font-size: clamp(1.6rem, 6.5vw, 2.1rem); letter-spacing: -.5px; line-height: 1.15; max-width: none; }
  .page-hero .hero-sub { font-size: .98rem; line-height: 1.5; }
}

/* badge row (page-hero chips) */
.badge-row { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.4rem 0 0; }
.badge { font-size: .82rem; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: .35rem .9rem; }

/* ---------------- sections ---------------- */
.section { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }
:is(.hero-full, .page-hero) + .section { padding-top: clamp(2.4rem, 5vw, 4rem); }
.section-title { max-width: 26ch; }
.tone-raise { background: var(--surface); border-block: 1px solid var(--border); }
/* full-bleed dark gradient conversion band */
.tone-cta { background: linear-gradient(135deg, var(--navy-800), var(--blue-700)); }
.tone-cta :is(h2, h3) { color: #fff; }
.tone-cta .lede { color: #c9ddf6; }
.tone-cta .eyebrow { color: var(--sky-200); }
.tone-cta p { color: #c9ddf6; }
.cta-band { text-align: center; padding: clamp(1rem, 4vw, 2rem) 0; }
.cta-band .cta-row { justify-content: center; }
.cta-band .lede { margin-inline: auto; }

/* ---------------- cards ---------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.card { background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-md); }

/* ---- card hover POP (lift + shadow elevation) ----
   Applied to every card-like component. Hover-capable pointers get the full
   pop; touch devices get a subtle always-on elevation plus a press effect so
   the sense of depth is not hover-only. Transform animation is disabled under
   prefers-reduced-motion (border/shadow color feedback is kept). */
.card, .svc-card, .post-card, .gallery-item, .guarantee-item, .region-card {
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover, .svc-card:hover, .post-card:hover, .gallery-item:hover,
  .guarantee-item:hover, .region-card:hover {
    border-color: var(--accent);
    transform: translateY(-6px) scale(1.01);
    box-shadow: var(--shadow-lg);
  }
}
@media (hover: none) {
  .card:active, .svc-card:active, .post-card:active, .gallery-item:active,
  .guarantee-item:active, .region-card:active {
    border-color: var(--accent);
    transform: scale(.985);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover, .svc-card:hover, .post-card:hover, .gallery-item:hover,
  .guarantee-item:hover, .region-card:hover,
  .card:active, .svc-card:active, .post-card:active, .gallery-item:active,
  .guarantee-item:active, .region-card:active {
    transform: none;
  }
}
.card-icon { font-size: 1.8rem; margin-bottom: .6rem; }
.card h3, .card .card-title { color: var(--text); font-family: var(--font-body); font-weight: 800; font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 .4rem; }
.guarantee-item-title { color: var(--text); font-family: var(--font-body); font-weight: 800; font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 .5em; }
.card p { color: var(--muted); margin-bottom: .6rem; }
.card-link { font-weight: 700; color: var(--accent); }
.card-img { border-radius: var(--radius); margin-bottom: 1rem; aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.tag { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: .25rem .8rem; margin-bottom: .6rem; }
.price-note { color: var(--muted); font-size: .92rem; }
.empty { color: var(--muted); text-align: center; padding: 2rem 0; }

/* ---------------- quotes ---------------- */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; }
.quote { margin: 0; background: var(--surface); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-md); }
.quote p { color: var(--text); font-size: 1.05rem; }
.quote cite { color: var(--muted); font-style: normal; font-weight: 600; font-size: .9rem; }

/* ---------------- product detail (engine parity) ---------------- */
.product-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 780px) { .product-detail { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.product-hero-img { border-radius: var(--radius-lg); border: 1px solid var(--border); }
.product-body :is(h2,h3) { color: var(--text); margin-top: 1.5rem; }
.spec-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.spec-table th, .spec-table td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--border); }
.spec-table th { color: var(--muted); font-weight: 600; width: 45%; }
.spec-table td { color: var(--text); }

/* ---------------- gallery ---------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.4rem; }
.gallery-item { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-md); position: relative; }
.gallery-item img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 43, 77, .28), transparent 45%); pointer-events: none; }
.gallery-item figcaption { padding: .8rem 1rem; color: var(--muted); font-size: .9rem; }

/* ---------------- blog (engine parity) ---------------- */
.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); }
.post-card { background: var(--surface); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-md); }
.post-card h2 { font-size: 1.3rem; }
.post-meta { color: var(--muted); font-size: .85rem; }
.article { max-width: 760px; padding-block: clamp(2rem, 6vw, 3.5rem); }
.article-cover, .article img { border-radius: var(--radius-lg); margin: 1.2rem 0; }
.article-body { color: #34455c; font-size: 1.08rem; }
.article-body :is(h2,h3) { color: var(--text); margin-top: 1.8rem; }

/* ---------------- forms (12px inputs, soft focus ring) ---------------- */
.contact-grid { display: grid; gap: var(--gap); }
@media (min-width: 820px) { .contact-grid { grid-template-columns: 1fr 1.4fr; } }
.contact-info { background: var(--surface); border-radius: var(--radius-lg); padding: 1.7rem; box-shadow: var(--shadow-md); }
.contact-info h2 { font-size: 1.3rem; }
.contact-info strong { color: var(--text); }
.lead-form { background: var(--surface); border-radius: var(--radius-lg); padding: 1.7rem; box-shadow: var(--shadow-lg); }
.form-heading { font-size: 1.4rem; }
.form-sub { color: var(--muted); }
.lead-form label { display: block; color: var(--muted); font-size: .9rem; font-weight: 600; margin-bottom: 1rem; }
.field-row { display: grid; gap: 0; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; gap: 1rem; } }
.lead-form input, .lead-form textarea, .lead-form select {
  width: 100%; max-width: 100%; margin-top: .35rem; background: var(--surface); color: var(--text);
  border: 1.5px solid var(--border); border-radius: 12px; padding: .8rem .9rem; font: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus {
  border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(23, 95, 181, .15);
}
/* Keyboard users still get a clear focus ring on form fields (:focus-visible wins
   over the outline:none above, which only suppresses the ring for pointer focus). */
.lead-form input:focus-visible, .lead-form textarea:focus-visible, .lead-form select:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.2em; margin: .6rem 0 0; font-size: .9rem; }
.form-status.ok { color: #157f3d; }
.form-status.err { color: #c0392b; }
.notice { padding: 1rem 1.2rem; border-radius: 12px; margin-bottom: 1.2rem; border: 1px solid var(--border); }
.notice-ok { border-color: #9fd6bb; background: rgba(34,197,94,.12); color: #14532d; }
.notice-muted { color: var(--muted); background: var(--surface-2); }

/* ---------------- booking ---------------- */
.slot-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.book-types { margin-bottom: 1.6rem; }

/* ---------------- footer ---------------- */
.site-footer { background: linear-gradient(180deg, var(--navy-900), #081729); margin-top: 3rem; padding: clamp(2rem, 5vw, 3.5rem) 0 1.5rem;
  --text: #f2f6fb; --muted: #a5b8d0; --border: #2c4468; --accent: #8cc2ff; --accent-hover: #b3d7ff; color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--gap); }
.footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--text); }
.footer-tagline { color: var(--muted); font-size: .92rem; max-width: 34ch; }
.footer-legal-name { color: var(--muted); font-size: .85rem; }
.footer-col h3, .footer-col .footer-heading { color: var(--text); font-family: var(--font-body); font-weight: 800; font-size: .95rem; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 .8rem; }
.footer-col p { margin: .3rem 0; font-size: .92rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin: 0; }
.footer-links a, .footer-col a { color: var(--muted); }
/* Full 44px tap targets for the social + family link lists (WCAG 2.5.5). */
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-links a:hover, .footer-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .84rem; }

/* ---------------- rotating hero video core ---------------- */
.hero-video video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.hero-video video.hv-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-video video { display: none; transition: none; }
  .hero-bg img { animation: none; transform: none; }
  .hero-scroll { animation: none; }
}
.center-x { margin-inline: auto; }

/* ---------------- checklist ---------------- */
.checklist { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; }
.checklist li { position: relative; padding-left: 1.9rem; color: var(--text); }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 1.35rem; height: 1.35rem; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border-radius: 50%; font-size: .8rem; font-weight: 800; }

/* ---------------- service grid + cards (media scrim + tag pill) ---------------- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem; }
.svc-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); overflow: hidden; color: inherit; box-shadow: var(--shadow-md); position: relative; }
.svc-card:hover { text-decoration: none; }
.svc-card-media { aspect-ratio: 3/2; overflow: hidden; position: relative; }
.svc-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.svc-card:hover .svc-card-media img { transform: scale(1.08); }
/* bottom gradient scrim keeps the floating tag readable over bright photos */
.svc-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 43, 77, .38), transparent 55%); pointer-events: none; }
.svc-card-tag { position: absolute; top: .8rem; left: .8rem; z-index: 2; margin: 0; background: rgba(255, 255, 255, .93); color: var(--navy-800); box-shadow: 0 4px 14px -6px rgba(15, 43, 77, .5); transition: transform .35s var(--ease); }
.svc-card:hover .svc-card-tag { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .svc-card-media img { transition: none; }
  .svc-card:hover .svc-card-media img { transform: none; }
  .svc-card:hover .svc-card-tag { transform: none; }
}
.svc-card-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.svc-card-body h3, .svc-card-body .svc-card-title { color: var(--text); font-family: var(--font-body); font-weight: 800; font-size: 1.2rem; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .3em; }
.svc-card-body p { color: var(--muted); font-size: .95rem; margin: 0; flex: 1; }
.svc-card .card-link { color: var(--accent); font-weight: 700; margin-top: .8rem; }

/* ---------------- media feature (image + copy) ---------------- */
.media-feature { display: grid; gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
@media (min-width: 860px) { .media-feature { grid-template-columns: 1fr 1fr; } .media-feature.flip .media-feature-img { order: 2; } }
.media-feature-img img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--shadow-lg); }
.media-feature-copy h2 { margin-top: 0; }

/* ---------------- steps (ordered) ---------------- */
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 1rem; max-width: 46rem; margin-inline: auto; }
.steps li { position: relative; padding-left: 3.2rem; color: var(--text); }
.steps li strong { color: var(--text); }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -.2rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; background: linear-gradient(135deg, var(--amber-400), var(--amber-600)); color: var(--on-amber); border-radius: 50%; font-weight: 800; box-shadow: 0 8px 18px -8px rgba(217, 119, 6, .6); }

/* ---------------- 10-point guarantee ---------------- */
.guarantee-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .guarantee-list { grid-template-columns: 1fr 1fr; } }
.guarantee-item { display: flex; gap: 1rem; align-items: flex-start; background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-md); }
.guarantee-num { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border-radius: 50%; font-weight: 800; font-size: 1.05rem; }
.guarantee-item h3 { color: var(--text); margin-bottom: .2rem; }
.guarantee-item p { color: var(--muted); margin: 0; font-size: .95rem; }

/* ---------------- region grid ---------------- */
.region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.4rem; }
.region-card { background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-md); }
.region-card h3 { color: var(--text); font-size: 1.05rem; margin-bottom: .3rem; }
.region-card p { color: var(--muted); margin: 0; font-size: .95rem; }

/* ---------------- service detail layout ---------------- */
.detail-grid { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 900px) { .detail-grid { grid-template-columns: 1.6fr 1fr; } }
.detail-main p { color: #34455c; }
.detail-main h2 { margin-top: 1.6rem; font-size: 1.7rem; }
.aside-card { position: sticky; top: calc(var(--nav-h) + 20px); background: var(--surface); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-lg); }
.aside-card h3 { color: var(--text); }
.aside-card p { color: var(--muted); font-size: .95rem; }
.aside-card .btn { display: flex; text-align: center; margin-top: .6rem; }
.aside-note { font-size: .9rem; margin-top: 1rem !important; }

/* ---------------- FAQ ---------------- */
.faq { display: grid; gap: .8rem; max-width: 820px; margin-inline: auto; }
.faq-item { background: var(--surface); border-radius: 14px; padding: 0 1.4rem; box-shadow: var(--shadow-md); }
.faq-item summary { cursor: pointer; padding: 1.1rem 0; color: var(--text); font-weight: 700; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--accent); font-weight: 800; font-size: 1.2rem; line-height: 1.2; }
.faq-item[open] summary::after { content: "-"; }
.faq-item p { color: var(--muted); margin: 0 0 1.1rem; }

/* ---------------- sticky mobile CTA (past-hero reveal) ---------------- */
.mobile-cta { display: none; }
@media (max-width: 700px) {
  .mobile-cta {
    display: flex; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(11, 33, 64, .97) 55%, rgba(11, 33, 64, 0));
    transform: translateY(115%); opacity: 0; pointer-events: none;
    transition: transform .28s var(--ease), opacity .28s;
  }
  .mobile-cta .btn { width: 100%; max-width: 460px; }
  body.past-hero .mobile-cta { transform: none; opacity: 1; pointer-events: auto; }
  /* keep the bar out of the way while the drawer nav is open */
  .site-header.nav-open ~ .mobile-cta { transform: translateY(115%); opacity: 0; pointer-events: none; }
  body { padding-bottom: 4.4rem; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ============================================================
   Family parity with ERS Metals / the shared engine.
   Token shim first: the shared block uses --shadow-sm, which the
   navy palette did not name. Tinted with the brand dark like the
   other two shadow tokens.
   ============================================================ */
:root { --shadow-sm: 0 1px 2px rgba(15, 43, 77, .07), 0 2px 8px rgba(15, 43, 77, .06); }

/* ============================================================
   Shared system parity - the brand-agnostic half of the ERS
   Metals design pass, expressed only in tokens so the same block
   drops into the engine, ers-hub-site and ers-installations-site
   without touching any site's palette.

   Everything here is either a defect fix or a system rule that
   every ERS site needs. Anything that carries brand identity
   (hero treatment, colour choices, per-site components) stays in
   the site's own section below.
   ============================================================ */

/* ---- vertical rhythm -------------------------------------------------------
   Two tokens, because the two cases are not the same. --section-y is padding
   on a TRANSPARENT section, so two adjacent sections leave 2x of it as
   genuinely empty page. --band-y is padding inside a COLORED band, where the
   space is filled and reads as the band's own breathing room, so it can be
   larger. Both were a single ~5.5rem value, which left ~176px of dead page
   between any two plain sections. */
:root {
  --section-y: clamp(2.5rem, 5vw, 3.5rem);
  --band-y: clamp(3rem, 6vw, 4.5rem);
}
.section { padding: var(--section-y) 0; }
.section:is(.tone-raise, .tone-dark, .tone-cta, .tone-amber) { padding-block: var(--band-y); }
/* A trailing <p>/<ul>/<table> adds its own bottom margin on top of the
   section's padding, which is what pushed the worst gaps past 190px. The
   padding is the spacing contract; nothing inside gets to add to it. The
   second selector reaches one level in for a trailing <table> that sits inside
   .table-scroll and so escapes a direct-child reset. */
.section > .wrap > :last-child,
.section > .wrap > :last-child > :last-child,
.hero > .wrap > :last-child,
.article > :last-child,
.article-body > :last-child { margin-bottom: 0; }
/* A conversion band is rendered as section({tone, body: ctaBand()}), so its own
   padding stacked on the section's. Inside a section the section owns it. */
.section > .wrap > .cta-band { padding-block: 0; }

/* [hidden] must beat the layout display rules below (e.g. the lightbox flex),
   or a JS-toggled element stays on screen. */
[hidden] { display: none !important; }

/* ---- card elevation: two generic hooks -------------------------------------
   The per-component hover list above is a hand-kept allow-list, and plain CSS
   gives us no way to name a selector list once - which is exactly how a card
   family ships dead on hover. For any NEW component do NOT extend that list:
   put `lift` (or `lift-flat` for a wide element or a chip) in the class
   attribute instead. */
.lift, .lift-flat {
  /* colour + background ride along so a component whose hover is purely a
     colour change eases instead of snapping, without a second `transition`
     declaration that would overwrite this one. */
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
@media (hover: hover) {
  .lift:hover { transform: translateY(-6px) scale(1.015); box-shadow: var(--shadow-lg); }
  /* Wide cards and chips lift without scale - scaling a full-width card warps it. */
  .lift-flat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}
/* Keyboard parity. Deliberately OUTSIDE @media (hover: hover): a keyboard is
   not a mouse, and a tablet with one attached still needs the cue. Two focus
   pseudos, because there are two shapes of card - the ones that ARE the anchor
   take :focus-visible, the ones whose link is a CHILD take :focus-within. */
.lift:focus-visible, .lift:focus-within { transform: translateY(-6px) scale(1.015); box-shadow: var(--shadow-lg); }
.lift-flat:focus-visible, .lift-flat:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-md); }
@media (hover: none) {
  .lift:active, .lift-flat:active { transform: scale(.985); }
}
/* One ELEMENT list rather than a hover/active pseudo pair: matching the element
   means a newly added :focus-visible or :focus-within lift cannot slip through
   un-neutered. `* { transition: none }` further down only kills the tween; an
   untreated hover transform would still be an instant jump, which is precisely
   what this setting exists to prevent. */
@media (prefers-reduced-motion: reduce) {
  .lift, .lift-flat { transform: none !important; }
}

/* ---- forms -----------------------------------------------------------------
   `font: inherit` picked up the label's .9rem, so fields computed to ~15px.
   iOS Safari zooms the page in on any field under 16px and does NOT zoom back
   out afterwards, which strands mobile visitors mid-form on /contact and /book.
   The label stays .9rem; only the control is pinned to 16px. */
.lead-form input, .lead-form textarea, .lead-form select {
  font-size: 16px;
  min-height: 44px;               /* WCAG 2.5.5 tap target */
}
/* A bare <select> renders as a native control that ignores the field styling
   above on macOS/iOS. Strip the appearance and draw our own caret. */
.lead-form select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem top 55%, right .85rem top 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.lead-form textarea { min-height: 7rem; }

/* ---- tap targets -----------------------------------------------------------
   >=44px on every link list (WCAG 2.5.5; roughly two thirds of this traffic is
   mobile). min-width catches one-letter labels like the "X" social link. */
.footer-links a, .footer-meta a, .footer-contact-line a, .card-link {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
}
/* Gap-separated rather than " · " text: the 44px min-width made the interpuncts
   sit at visibly uneven distances from their labels. */
.footer-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 1.4rem; }

/* ---- small print -----------------------------------------------------------
   Warranty caveats, "confirm at time of order" and the like. Quieter than body
   copy but still meant to be read, so it keeps the muted colour rather than
   dropping below it. */
.note { color: var(--muted); font-size: .92rem; max-width: 68ch; margin-top: 1rem; }

/* ---- chips (filters, categories, tags) ------------------------------------
   Plain links, so filtering keeps working with JavaScript off. */
.chip {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .6rem 1.1rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--muted); font-size: .9rem; font-weight: 600;
}
.chip:hover, .chip:focus-visible { color: var(--text); border-color: var(--amber); text-decoration: none; }
.chip[aria-current], .chip-on { background: var(--amber); border-color: var(--amber); color: var(--on-amber); font-weight: 700; }
.chip-count, .chip-on span { font-size: .78rem; opacity: .8; font-variant-numeric: tabular-nums; }

/* ---- pager -----------------------------------------------------------------
   44x44 minimum like every other control on the site. */
.pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: calc(var(--gap) * 1.5); }
.pager-nums { display: flex; flex-wrap: wrap; gap: .35rem; }
.pager-num, .pager-step {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 .8rem;
  border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: .9rem;
}
.pager-num:hover, .pager-step:hover, .pager-num:focus-visible, .pager-step:focus-visible { color: var(--text); border-color: var(--amber); text-decoration: none; }
/* .pager-on is a <span>, not an anchor: the current page is not a target, so it
   gets neither the lift nor this hover. */
.pager-on { background: var(--amber); border-color: var(--amber); color: var(--on-amber); font-weight: 700; }

/* ---- long-form + tables ----------------------------------------------------
   Post bodies are DB-authored, so a bare URL or a long part number can appear
   anywhere. Without this a long unbroken token has no break opportunity and
   scrolls the whole page sideways at 320px. break-word only splits a word that
   cannot fit on its own line, so normal prose is untouched. */
.article-body, .prose, .faq-a { overflow-wrap: break-word; }
.prose { max-width: 68ch; }
.prose p { margin: 0 0 1rem; color: var(--muted); }
.prose p:last-child { margin-bottom: 0; }
/* Let a wide table scroll on its own rather than pushing the page sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .95rem; display: block; overflow-x: auto; }
.article-body :is(th, td) { border: 1px solid var(--border); padding: .6rem .8rem; text-align: left; vertical-align: top; }
.article-body th { background: var(--surface-2); color: var(--text); font-weight: 700; }
.article-body blockquote { margin: 1.4rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var(--amber); color: var(--text); font-style: italic; }
/* Anchor jumps must not land the heading under the sticky header. */
.article-body :is(h2, h3)[id] { scroll-margin-top: 6rem; }
.article-lede { font-size: 1.2rem; line-height: 1.55; color: var(--text); margin: 1rem 0 0; }

/* ---- blog cards with cover art --------------------------------------------
   The image has to run edge to edge inside the rounded corner, so padding moves
   off the card and onto the body. Gated on :has() so a post card that has NOT
   been rebuilt around .post-card-body keeps its own padding rather than
   collapsing to zero; a browser without :has() simply keeps the old layout. */
.post-card:has(.post-card-body) { overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.post-card-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-card-body > :last-child { margin-top: auto; }
.post-card-media { display: block; aspect-ratio: 16 / 9; background: var(--surface-2); }
.post-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-cat { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--amber); font-weight: 700; margin: 0 0 .35rem; }

/* ---- gallery affordance + lightbox ----------------------------------------
   The whole thumbnail is the target; the badge only advertises that. */
.gallery-link { display: block; position: relative; }
.gallery-link:hover { text-decoration: none; }
.gallery-title { display: block; color: var(--text); font-weight: 700; }
.gallery-caption { display: block; }
.gallery-zoom {
  position: absolute; right: .7rem; bottom: .7rem;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(20, 17, 13, .82); color: #f8f5f0; font-size: 1.05rem; line-height: 1;
  opacity: 0; transition: opacity .18s var(--ease);
}
.gallery-item:hover .gallery-zoom, .gallery-link:focus-visible .gallery-zoom { opacity: 1; }
/* Touch has no hover state to reveal it, so show the affordance outright. */
@media (hover: none) { .gallery-zoom { opacity: 1; } }

/* Dark band over the page: re-scope the tokens the way the footer does, so
   text, borders and the :focus-visible ring all stay legible on the scrim. */
.lb-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  --text: #f8f5f0; --muted: #c0b6a8; --border: #3d352b; --accent: #f5c563; --surface: #221d16;
  color: var(--muted);
}
.lightbox-scrim { position: absolute; inset: 0; background: rgba(14, 12, 9, .95); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lightbox-figure { position: relative; margin: 0; display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: min(1100px, 100%); max-height: 100%; }
/* Fill the stage on the long axis of the viewport, whatever the photo's shape.
   No border or fill: object-fit leaves empty box on odd aspect ratios, and the
   scrim should show through it rather than a visible frame. */
.lightbox-img { height: 62vh; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; border-radius: var(--radius-lg); }
@media (max-aspect-ratio: 1/1) { .lightbox-img { width: 100%; height: auto; max-height: 62vh; } }
.lightbox-meta { text-align: center; color: var(--muted); }
.lightbox-title { color: var(--text); font-size: clamp(1.1rem, 3vw, 1.5rem); margin: 0 0 .2rem; }
.lightbox-caption { margin: 0; }
.lightbox-caption:empty, .lightbox-title:empty { display: none; }
.lightbox-count { margin: .5rem 0 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.lightbox-btn {
  position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: 1.6rem; line-height: 1;
  /* Colour only, never transform: .lightbox-prev/.lightbox-next centre
     themselves with translateY(-50%) and any transform here would fight it. */
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.lightbox-btn:hover { border-color: var(--amber); color: var(--amber); text-decoration: none; }
.lightbox-close { top: clamp(.6rem, 2vw, 1.4rem); right: clamp(.6rem, 2vw, 1.4rem); font-size: 1.15rem; }
.lightbox-prev { left: clamp(.4rem, 2vw, 1.4rem); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: clamp(.4rem, 2vw, 1.4rem); top: 50%; transform: translateY(-50%); }

/* Reduced motion: kill every transition AND animation (Ken Burns slow-zoom,
   scroll-cue bob, drawer slide) sitewide; the hero video is hidden separately. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Keyboard parity for the installations card families (the hover list above is
   pointer-only, so a keyboard user got no depth cue at all). New components
   should use `lift` / `lift-flat` instead of extending this list. */
.card:focus-within, .svc-card:focus-within, .post-card:focus-within,
.gallery-item:focus-within, .guarantee-item:focus-within, .region-card:focus-within,
.svc-card:focus-visible, .region-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Present to screen readers and to the document outline, invisible on screen.
   The lightbox controls carry their accessible names this way; without the
   class those names render as literal text over the photo. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}