/* ============================================================
   base.css - ERS design system (dark flagship, CWS-grade pass)
   Tokens: #0a0a0a bg with warm radial amber glows - amber ramp
   (300 #fcd34d / 400 #fbbf24 / 500 #F59E0B / 600 #d97706) - pill
   gradient CTAs with DARK text (--on-amber, AA verified) - elevated
   #141414 cards with subtle light borders - signature ease.
   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 {
  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #1c1c1c;
  --border: #2a2a2a;
  --border-lite: rgba(255, 255, 255, .07);
  --text: #fafafa;
  --muted: #a3a3a3;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber: #F59E0B;
  --amber-600: #d97706;
  --amber-hover: #d97f06;
  /* Dark text on amber: white-on-amber measured 2.15:1 (WCAG fail); #2a1a00 on
     amber-400 is 10.09:1, on amber-500 7.85:1, on amber-600 5.29:1 (all pass AA). */
  --on-amber: #2a1a00;
  --radius: 14px;
  --radius-lg: 22px;
  --wrap: 1160px;
  --gap: clamp(1rem, 3vw, 2rem);
  --ease: cubic-bezier(.16, .84, .44, 1);
  --shadow-md: 0 12px 30px -12px rgba(0, 0, 0, .55);
  --shadow-lg: 0 30px 70px -25px rgba(0, 0, 0, .7);
  --glow-amber: 0 10px 24px -8px rgba(245, 158, 11, .45);
  --glow-amber-lg: 0 16px 34px -8px rgba(245, 158, 11, .55);
  --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(--amber); 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.7rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -.028em; }
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; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 800; color: var(--amber); margin: 0 0 .7rem; }
.lede { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--muted); max-width: 60ch; }

/* ---------------- skip link + a11y ---------------- */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--amber); color: var(--on-amber); padding: .6rem 1rem; border-radius: var(--radius); z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
/* Amber ring fails 3:1 on light/amber surfaces - scope a dark ring there. */
.herocard :focus-visible { outline-color: #18181b; }
.tone-amber :focus-visible { outline-color: var(--on-amber); }

/* ---------------- 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; white-space: nowrap;
  padding: 1rem 1.6rem; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), 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: var(--glow-amber);
}
.btn-primary:hover { color: var(--on-amber); transform: translateY(-2px); box-shadow: var(--glow-amber-lg); }
.btn-ghost { background: rgba(255, 255, 255, .07); color: var(--text); border-color: rgba(255, 255, 255, .3); }
.btn-ghost:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .5); color: var(--text); }
.btn-block { width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

/* ---------------- announce bar ---------------- */
.announce {
  background: linear-gradient(90deg, #201603, #0f0d0a 70%);
  color: #d6d3d1; font-size: .86rem; border-bottom: 1px solid var(--border-lite);
}
.announce-inner { display: flex; align-items: center; justify-content: center; gap: .7rem; flex-wrap: wrap; padding-block: .5rem; }
.announce-badge { color: var(--amber-400); font-weight: 700; }
.announce-sep { opacity: .45; }
.announce-call { margin-left: auto; font-weight: 700; color: #fff; }
.announce-call:hover { color: var(--amber-400); text-decoration: none; }
@media (max-width: 680px) { .announce { display: none; } }

/* ---------------- header / nav ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 10, 10, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-lite);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .75); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 66px; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--text); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; color: var(--amber); }
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav a { color: var(--muted); font-weight: 600; font-size: .98rem; }
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav a:not(.nav-cta) { position: relative; }
.site-nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px;
  background: var(--amber); border-radius: 2px; transition: width .25s var(--ease);
}
.site-nav a:not(.nav-cta):hover::after { width: 100%; }
.nav-cta { color: var(--on-amber) !important; padding: .7rem 1.25rem; font-size: .92rem; }
.nav-burger { display: none; }

@media (max-width: 820px) {
  /* Solid header on mobile: backdrop-filter would become the containing block
     for the fixed drawer below and pin it to the header's box. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 10, 10, .97); }
  .site-header.nav-open { z-index: 60; }
  /* Hamburger is a real <button> - 44x44 tap target (WCAG 2.5.5), keyboard
     focusable, gets the global :focus-visible ring. Morphs into an X when open. */
  .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; position: relative; z-index: 3;
  }
  .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 (CWS pattern): 78vw dark panel, big links. */
  .site-nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(78vw, 340px); flex-direction: column; align-items: stretch; gap: 0;
    background: #121212; border-left: 1px solid var(--border);
    padding: calc(66px + 1.6rem) 1.5rem 2rem; overflow-y: auto;
    box-shadow: var(--shadow-lg);
    transition: transform .35s var(--ease);
  }
  .site-nav a { padding: .95rem .2rem; font-size: 1.15rem; color: var(--text); border-bottom: 1px solid var(--border-lite); }
  .site-nav a:not(.nav-cta)::after { display: none; }
  .nav-cta { margin: 1.2rem 0 0; text-align: center; border-bottom: 0 !important; font-size: 1rem; padding: 1rem 1.6rem; }
  /* 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/stacked 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; }
}

/* ---------------- cinematic full-bleed hero (home) ---------------- */
.hero-cine {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  overflow: hidden; padding: 3.5rem 0 5.5rem;
}
.hero-cine-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-cine-bg picture, .hero-cine-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; border: 0;
}
/* Slow-zoom Ken Burns on the poster photo under the video. */
.hero-cine-bg img { transform: scale(1.05); animation: slowzoom 20s ease-in-out infinite alternate; }
@keyframes slowzoom { to { transform: scale(1.14); } }
/* Duotone overlay: near-black into warm amber. Copy sits over the dark end.
   AA worst case (pure white frame): left 0-48% is >= .68 black -> #525252;
   every text color used there measures >= 4.6:1 (large-text h1 span >= 3.7). */
.hero-cine-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, rgba(0, 0, 0, .84) 0%, rgba(10, 10, 10, .68) 48%, rgba(245, 158, 11, .22) 100%);
}
/* Seamless fade into the page below. */
.hero-cine-overlay::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 72%, rgba(10, 10, 10, .92) 100%);
}
.hero-cine-inner {
  position: relative; z-index: 3; display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center; width: 100%;
}
@media (min-width: 920px) { .hero-cine-inner { grid-template-columns: 1.1fr .9fr; } }
.hero-cine .hero-eyebrow { color: var(--amber-300); letter-spacing: .2em; }
.hero-cine h1 {
  color: #fff; font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 700;
  letter-spacing: -.035em; text-shadow: 0 4px 30px rgba(0, 0, 0, .35); margin-bottom: .3em;
}
/* Gradient text on the key phrases (amber-300 to amber-500), with a solid
   amber fallback where background-clip:text is unsupported. */
.hero-cine h1 .hl { color: var(--amber-400); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero-cine h1 .hl {
    background: linear-gradient(120deg, var(--amber-300), var(--amber));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--amber-400);
  }
}
.hero-cine .hero-sub { color: #e5e5e5; font-size: 1.16rem; max-width: 34rem; margin: 0 0 2rem; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.hero-trust { display: flex; gap: clamp(1.4rem, 4vw, 2.4rem); flex-wrap: wrap; }
.hero-trust-item strong { display: block; font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; color: var(--amber-400); line-height: 1.05; font-family: var(--font-body); }
.hero-trust-item span { font-size: .85rem; color: #d4d4d4; }
.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;
  animation: bob 2s ease-in-out infinite;
}
.hero-scroll:hover { color: var(--amber-300); text-decoration: none; }
@keyframes bob { 50% { transform: translate(-50%, 8px); } }

/* hero conversion card */
.herocard {
  background: rgba(255, 255, 255, .97); color: #52525b;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 1.7rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  max-width: 30rem; justify-self: end; width: 100%;
}
.herocard-title { color: #18181b; font-family: var(--font-display); font-size: 1.45rem; margin: 0 0 .2rem; letter-spacing: -.02em; }
.herocard-sub { font-size: .95rem; color: #52525b; margin: 0 0 1.2rem; }
.herocard .btn-primary { width: 100%; }
.herocard .btn-ghost { width: 100%; margin-top: .7rem; color: #18181b; border-color: rgba(10, 10, 10, .35); background: transparent; }
.herocard .btn-ghost:hover { background: rgba(10, 10, 10, .06); border-color: rgba(10, 10, 10, .55); color: #18181b; }
.herocard-call { display: block; text-align: center; margin-top: .9rem; font-weight: 700; color: #18181b; }
.herocard-call:hover { color: var(--amber-600); text-decoration: none; }
.herocard-badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.1rem; }
.herocard-badges span { background: #e9e9eb; color: #3f3f46; font-size: .74rem; font-weight: 700; padding: .35em .85em; border-radius: 999px; }

/* ---------------- page hero (sub-pages) + sections ---------------- */
.hero {
  position: relative; text-align: center;
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(1100px 480px at 50% -20%, rgba(245, 158, 11, .14), transparent 60%),
    var(--bg);
}
.hero .lede { margin-inline: auto; }
.hero .cta-row { justify-content: center; }
.section { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.section-title { max-width: 26ch; margin-inline: auto; text-align: center; }
.section > .wrap > .eyebrow { text-align: center; }
.section-lead { color: var(--muted); font-size: 1.1rem; max-width: 60ch; margin: 0 auto 2.2rem; text-align: center; }
.tone-raise { background: var(--surface); border-block: 1px solid var(--border-lite); }
.tone-cta {
  background:
    radial-gradient(900px 420px at 80% 110%, rgba(245, 158, 11, .12), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg));
}
/* Full-bleed amber conversion band: the dark site's "dark gradient band"
   equivalent - maximum contrast moment. Dark text + dark buttons on amber. */
.tone-amber { background: linear-gradient(135deg, var(--amber-400), var(--amber-600)); }
.tone-amber h2, .tone-amber .section-title { color: var(--on-amber); }
.tone-amber p, .tone-amber .lede, .tone-amber .center-lede { color: var(--on-amber); }
.tone-amber .btn-primary { background: #141414; color: #fafafa; box-shadow: 0 14px 30px -10px rgba(42, 26, 0, .5); }
.tone-amber .btn-primary:hover { background: #000; color: #fff; }
.tone-amber .btn-ghost { color: var(--on-amber); border-color: rgba(42, 26, 0, .55); background: rgba(255, 255, 255, .14); }
.tone-amber .btn-ghost:hover { background: rgba(255, 255, 255, .3); color: var(--on-amber); border-color: rgba(42, 26, 0, .8); }
.cta-band { text-align: center; padding: clamp(1.5rem, 5vw, 3rem) 0; }
.cta-band .cta-row { justify-content: center; }

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

/* ---- card hover POP (lift + scale + 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, .brand-card, .post-card, .gallery-item, .flow-step, .team-card, .loc-card {
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover, .brand-card:hover, .post-card:hover, .gallery-item:hover,
  .flow-step:hover, .team-card:hover, .loc-card:hover {
    border-color: var(--amber);
    transform: translateY(-5px) scale(1.015);
    box-shadow: 0 18px 38px -14px rgba(0, 0, 0, .65);
  }
}
@media (hover: none) {
  .card, .brand-card, .post-card, .gallery-item, .flow-step, .team-card, .loc-card {
    box-shadow: 0 10px 26px -16px rgba(0, 0, 0, .6);
  }
  .card:active, .brand-card:active, .post-card:active, .gallery-item:active,
  .flow-step:active, .team-card:active, .loc-card:active {
    border-color: var(--amber);
    transform: scale(.985);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover, .brand-card:hover, .post-card:hover, .gallery-item:hover,
  .flow-step:hover, .team-card:hover, .loc-card:hover,
  .card:active, .brand-card:active, .post-card:active, .gallery-item:active,
  .flow-step:active, .team-card:active, .loc-card:active {
    transform: none;
  }
}
.card-icon { font-size: 1.8rem; margin-bottom: .6rem; color: var(--amber); }
.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; }
.card p { color: var(--muted); margin-bottom: .6rem; }
.card-link { font-weight: 600; }
.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; color: var(--amber); border: 1px solid var(--border); border-radius: 999px; padding: .2rem .7rem; 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: var(--gap); }
.quote { margin: 0; background: var(--surface); border: 1px solid var(--border-lite); border-left: 3px solid var(--amber); border-radius: var(--radius); padding: 1.4rem; 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 ---------------- */
.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-lite); }
.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: var(--gap); }
.gallery-item { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-lite); background: var(--surface); }
.gallery-item img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.gallery-item figcaption { padding: .8rem 1rem; color: var(--muted); font-size: .9rem; }

/* ---------------- blog ---------------- */
.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); }
.post-card { background: var(--surface); border: 1px solid var(--border-lite); border-radius: var(--radius-lg); padding: 1.4rem; }
.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: #cfcfcf; font-size: 1.08rem; }
.article-body :is(h2,h3) { color: var(--text); margin-top: 1.8rem; }

/* ---------------- forms ---------------- */
.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: 1px solid var(--border-lite); 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: 1px solid var(--border-lite); border-radius: var(--radius-lg); padding: 1.7rem; box-shadow: var(--shadow-md); }
.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 {
  width: 100%; margin-top: .35rem; background: var(--bg); 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 {
  border-color: var(--amber); outline: none;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .22);
}
/* 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 { outline: 2px 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: #34d399; }
.form-status.err { color: #f87171; }
.notice { padding: 1rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.2rem; border: 1px solid var(--border); }
.notice-ok { border-color: #14532d; background: rgba(34,197,94,.1); color: #86efac; }
.notice-muted { color: var(--muted); background: var(--surface-2); }

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

/* ---------------- footer ---------------- */
.site-footer { border-top: 1px solid var(--border-lite); background: var(--surface); margin-top: 3rem; padding: clamp(2rem, 5vw, 3.5rem) 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--gap); }
/* The full original Extreme Roofing Solutions lockup. The footer is the one
   place with the vertical room to run it stacked and still read. */
.footer-logo { display: block; width: auto; height: 96px; margin-bottom: .35rem; }
.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 footer 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(--amber); }
.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-lite); color: var(--muted); font-size: .84rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-cine-bg img { transform: none; }
  .hero-scroll { animation: none !important; }
}

/* ============================================================
   ERS Hub additions (ersroof.com) - flagship umbrella styling
   ============================================================ */

/* ---- header brand lockup ---- */
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand:hover { text-decoration: none; }
/* The roof chevron lifted from the original Extreme Roofing Solutions mark.
   White artwork on the dark header; the wordmark beside it carries the name. */
.brand-mark { display: block; height: 48px; width: auto; }
@media (max-width: 560px) { .brand-mark { height: 40px; } }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--text); letter-spacing: -.01em; }
.brand-sub { font-size: .72rem; color: var(--muted); font-weight: 600; }
@media (max-width: 400px) { .brand-sub { display: none; } .brand-name { font-size: .95rem; } }

/* ---- buttons: small variant ---- */
.btn-sm { padding: .65rem 1.1rem; font-size: .92rem; }

/* ---- rotating hero video (decorative, sits inside the cinematic hero bg) ---- */
.hero-video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.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; }
}

/* ---- section lead text ---- */
.center-lede { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- brand cards (the heart of the hub): media scrim + tag pill ---- */
.brand-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 720px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } }
.brand-card {
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  background: var(--surface); border: 1px solid var(--border-lite);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.brand-media { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--surface-2); }
.brand-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .brand-card:hover .brand-media img { transform: scale(1.06); }
}
.brand-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, .78), transparent 55%); }
.brand-media-tag {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  background: rgba(255, 255, 255, .92); color: #18181b;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .34em .9em; border-radius: 999px;
}
.brand-card-inner { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.4rem 1.5rem 1.6rem; }
.brand-card-top { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.brand-logo { width: 54px; height: 54px; border-radius: 12px; object-fit: contain; background: #fff; padding: 4px; flex: 0 0 auto; }
.brand-card-name { font-size: 1.15rem; margin: 0 0 .15rem; color: var(--text); font-family: var(--font-body); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.brand-card-tag { font-size: .85rem; color: var(--amber); font-weight: 600; margin: 0; }
.brand-card-body { color: var(--muted); font-size: .95rem; flex: 1 1 auto; }
.chip { display: inline-block; font-size: .74rem; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-lite); border-radius: 999px; padding: .35rem .8rem; margin-bottom: 1.1rem; }
.brand-card-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; }

/* ---- flow steps ---- */
.flow-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 720px) { .flow-grid { grid-template-columns: repeat(3, 1fr); } }
.flow-step { background: var(--bg); border: 1px solid var(--border-lite); border-radius: var(--radius-lg); padding: 1.7rem; position: relative; box-shadow: var(--shadow-md); }
.flow-num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: linear-gradient(135deg, var(--amber-400), var(--amber-600)); color: var(--on-amber); font-weight: 800; margin-bottom: .8rem; box-shadow: var(--glow-amber); }
.flow-step h3 { margin-bottom: .4rem; }
.flow-step p { color: var(--muted); }

/* ---- team ---- */
.team-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 620px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.team-card { background: var(--surface); border: 1px solid var(--border-lite); border-radius: var(--radius-lg); padding: 1.7rem; text-align: center; box-shadow: var(--shadow-md); }
.team-avatar { width: 68px; height: 68px; margin: 0 auto .8rem; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(135deg, var(--amber), #b45309); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; }
.team-name { margin: 0 0 .2rem; font-size: 1.15rem; }
.team-role { color: var(--amber); font-weight: 600; font-size: .9rem; margin: 0 0 .6rem; }
.team-bio { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---- locations ---- */
.loc-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; margin-bottom: 1.4rem; }
@media (min-width: 620px) { .loc-grid { grid-template-columns: repeat(2, 1fr); } }
.loc-card { background: var(--bg); border: 1px solid var(--border-lite); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-md); }
.loc-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.loc-card p { color: var(--muted); margin: 0 0 .4rem; }
.loc-meta { font-size: .85rem; color: var(--amber); }

/* ---- appointment types ---- */
.appt-types { margin-bottom: 1.6rem; }
.appt-meta { color: var(--amber); font-size: .85rem; font-weight: 600; margin: 0; }

/* ---- prose (about story) ---- */
.prose { max-width: 68ch; color: #cfcfcf; font-size: 1.08rem; margin-inline: auto; }
.prose p { margin-bottom: 1.1rem; }
.prose strong { color: var(--text); }

/* ---- footer extras ---- */
.footer-contact { margin: .2rem 0; font-size: .92rem; }
.footer-contact a { color: var(--muted); }
.footer-contact a:hover { color: var(--amber); }
.social-row { display: flex; gap: .6rem; margin-top: 1rem; }
.social-link { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-lite); color: var(--muted); transition: color .2s, border-color .2s, transform .2s var(--ease); }
.social-link:hover { color: var(--amber); border-color: var(--amber); text-decoration: none; transform: translateY(-2px); }
.loc-label { color: var(--text); font-weight: 700; font-size: .85rem; margin: .8rem 0 .1rem; }
.footer-sub-h { margin-top: 1.4rem; }
.footer-areas { font-size: .82rem; line-height: 1.7; }

/* ---- sticky mobile CTA bar: hidden until the hero clears (body.past-hero),
   then slides up over a gradient-to-transparent dark backdrop. ---- */
.mobile-cta { display: none; }
@media (max-width: 820px) {
  .mobile-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    gap: .5rem; padding: .8rem .8rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(10, 10, 10, .97) 55%, rgba(10, 10, 10, 0));
    transform: translateY(115%); opacity: 0; pointer-events: none;
    transition: transform .28s var(--ease), opacity .28s;
  }
  body.past-hero .mobile-cta { transform: none; opacity: 1; pointer-events: auto; }
  /* Without JS there is no past-hero toggle - keep the bar visible. */
  html:not(.js) .mobile-cta { transform: none; opacity: 1; pointer-events: auto; }
  .mcta { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 48px; border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; }
  .mcta-call { background: rgba(255, 255, 255, .1); color: var(--text); border: 1.5px solid rgba(255, 255, 255, .3); }
  .mcta-book { background: linear-gradient(135deg, var(--amber-400), var(--amber-600)); color: var(--on-amber); box-shadow: var(--glow-amber); }
  .mcta:hover { text-decoration: none; }
  body { padding-bottom: 76px; }
}

/* ---- mobile hero strip (CWS playbook): background + eyebrow + title + cue ---- */
@media (max-width: 760px) {
  .hero-cine { min-height: calc(100svh - 66px); align-items: flex-start; padding: 2.4rem 0 4rem; }
  .hero-cine .hero-sub, .hero-cine .hero-trust, .hero-cine .herocard { display: none; }
  .hero-cine h1 { font-size: clamp(2.2rem, 9vw, 2.8rem); }
  .hero-scroll { display: block; }
}

/* ============================================================
   Family parity with ERS Metals / the shared engine.
   Token shims first: the shared block below is written against
   --accent / --shadow-sm, which the hub's dark palette did not
   name. Amber IS the hub's accent, so these are aliases, not a
   palette change.
   ============================================================ */
:root {
  --accent: #F59E0B;
  --accent-hover: #d97f06;
  --accent-soft: rgba(245, 158, 11, .12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .3);
}

/* ============================================================
   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 hub's 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, .brand-card:focus-within, .post-card:focus-within,
.gallery-item:focus-within, .flow-step:focus-within, .team-card:focus-within,
.loc-card:focus-within,
.brand-card:focus-visible, .loc-card:focus-visible {
  border-color: var(--amber);
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 18px 38px -14px rgba(0, 0, 0, .65);
}
/* The focus ring is amber, which measures 2.15:1 on the amber band and on the
   white hero card - both fail the 3:1 non-text minimum. Match Metals' 3px and
   keep the existing dark-ring overrides for those two surfaces. */
:focus-visible { outline-width: 3px; }

/* 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;
}

/* The hero poster is now a permanent bright aerial rather than a rotating
   video whose frames were mostly dark, so the scroll cue sits on light pixels
   for the whole page life. Same shadow ers-installations-site already uses. */
.hero-scroll { text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }