/* ==========================================================================
   Deluxe Glazing - shared stylesheet
   Design language: cold-glass palette (slate + smoke + steel-blue accent),
   soft-rounded cards, pill CTAs, restrained motion. One accent, one radius
   system, locked light theme with a dark-mode pass.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* Palette - smoke neutrals + a maroon accent, matched to the real
     Deluxe Glazing logo mark rather than a generic brand pick. */
  --bg: #ffffff;
  --bg-raised: #ffffff;
  --bg-sunken: #f7f8f7;
  --ink: #14181b;
  --ink-soft: #4b5459;
  --ink-faint: #7a8388;
  --line: #e7e9e7;
  --line-strong: #d2d6d3;
  --accent: #844552;
  --accent-ink: #ffffff;
  --accent-soft: #f0e9ea;
  --accent-deep: #5a121f;
  --shadow-color: 350 15% 18%;

  --radius-card: 14px;
  --radius-input: 8px;
  --radius-pill: 999px;

  --container: 1200px;
  --font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* White theme is locked on purpose: the whole site always renders on the
   light palette above, regardless of the visitor's OS/browser dark-mode
   setting. */
:root { color-scheme: light; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* .site-header is position:fixed, so it no longer reserves its own
     space in normal flow - compensate here instead, and match its
     shrink-on-scroll height so nothing jumps. */
  padding-top: 92px;
  transition: padding-top 0.25s ease;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 0.5em;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 700;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.015em; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; color: var(--ink-soft); max-width: 60ch; }
a { color: inherit; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; fill: currentColor; flex-shrink: 0; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s ease, box-shadow 0.18s ease, color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 1px 0 hsl(var(--shadow-color) / 0.05);
}
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-on-photo {
  background: rgba(20, 24, 27, 0.55);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
}
.btn-on-photo:hover { background: rgba(20, 24, 27, 0.72); }
.btn-block { width: 100%; }

/* ---- Header ---- */
/* A zero-height sentinel sitting exactly at the scroll boundary flickers
   .is-scrolled on/off on the tiniest scroll wobble (trackpad jitter,
   momentum scroll). Giving it real height creates a dead zone, so the
   header only commits to a state once the page has genuinely scrolled. */
#header-sentinel {
  position: absolute;
  top: 0;
  width: 1px;
  height: 60px;
  pointer-events: none;
}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  /* backdrop-filter is left untransitioned: animating blur radius every
     frame is expensive and was the other source of the jitter. */
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.35s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 12px 30px -22px hsl(var(--shadow-color) / 0.5);
}
body:has(.site-header.is-scrolled) { padding-top: 72px; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 92px;
  transition: height 0.25s ease;
}
.site-header.is-scrolled .header-inner { height: 72px; }
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-logo {
  height: 58px;
  width: auto;
  display: block;
  transition: height 0.25s ease;
}
.site-header.is-scrolled .brand-logo { height: 44px; }
.footer-logo { height: 40px; }

.main-nav { display: flex; align-items: center; gap: 4px; }
/* Nav links use an editorial underline rather than a pill: a slim bar sits
   under the active link and grows out from the centre on hover. */
.main-nav a {
  position: relative;
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.94rem;
  padding: 8px 14px;
  transition: color 0.2s ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
  transform: scaleX(0);
  opacity: 0.6;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, background 0.3s ease;
}
.main-nav a:hover { color: var(--ink); }
.main-nav a:hover::after { transform: scaleX(0.5); }
.main-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.main-nav a[aria-current="page"]::after { transform: scaleX(1); opacity: 1; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-phone {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.92rem;
  transition: color 0.3s ease;
}
.header-phone .icon { color: var(--accent); font-size: 1.1rem; transition: color 0.3s ease; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: color 0.3s ease, border-color 0.3s ease;
}

/* ---- Homepage-only: transparent overlay header ----
   On index.html the header starts see-through over the hero photo (logo
   inverted to white, nav/actions restyled for a dark backdrop, plus its
   own top-down scrim so it stays legible no matter which rotating photo
   is behind it) and crossfades to the normal solid header the moment the
   page scrolls past the hero sentinel. Scoped to .site-header-overlay +
   body.home so every other page keeps the plain white header. */
body.home { padding-top: 0; }
.site-header-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Covers the whole header height at a fairly even strength - the hero
     photo rotates through several images of very different brightness
     (a bright sky in one is nowhere near as dark as another), so the
     scrim can't taper away to nothing by the bottom of the header the
     way a photo-specific one could. */
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.site-header-overlay.is-scrolled::before,
body.nav-open .site-header-overlay::before { opacity: 0; }
body:not(.nav-open) .site-header-overlay:not(.is-scrolled) { background: transparent; backdrop-filter: none; }
body:not(.nav-open) .site-header-overlay:not(.is-scrolled) .main-nav a,
body:not(.nav-open) .site-header-overlay:not(.is-scrolled) .header-phone,
body:not(.nav-open) .site-header-overlay:not(.is-scrolled) .header-phone .icon {
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
/* Over the photo the underline switches from accent to white. */
body:not(.nav-open) .site-header-overlay:not(.is-scrolled) .main-nav a { color: rgba(255,255,255,0.78); }
body:not(.nav-open) .site-header-overlay:not(.is-scrolled) .main-nav a:hover,
body:not(.nav-open) .site-header-overlay:not(.is-scrolled) .main-nav a[aria-current="page"] { color: #fff; }
body:not(.nav-open) .site-header-overlay:not(.is-scrolled) .main-nav a::after {
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,0.7);
}
body:not(.nav-open) .site-header-overlay:not(.is-scrolled) .header-phone,
body:not(.nav-open) .site-header-overlay:not(.is-scrolled) .header-phone .icon { color: rgba(255,255,255,0.95); }
body:not(.nav-open) .site-header-overlay:not(.is-scrolled) .header-actions .btn-secondary {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.45);
  color: #fff;
  backdrop-filter: blur(6px);
}
body:not(.nav-open) .site-header-overlay:not(.is-scrolled) .header-actions .btn-secondary:hover { background: rgba(255,255,255,0.2); }
body:not(.nav-open) .site-header-overlay:not(.is-scrolled) .nav-toggle { border-color: rgba(255,255,255,0.5); color: #fff; }

@media (max-width: 900px) {
  .main-nav { display: none; }
  .header-phone span { display: none; }
  .header-actions .btn { padding: 0.55em 1.1em; font-size: 0.82rem; }
  .header-actions .btn-secondary { display: none; }
  .nav-toggle { display: flex; }
  body.nav-open .main-nav {
    display: flex;
    position: absolute;
    top: 92px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 16px;
    gap: 2px;
    transition: top 0.25s ease;
  }
  body.nav-open .site-header.is-scrolled .main-nav { top: 72px; }
  body.nav-open .main-nav a { padding: 12px 10px; }
  body.nav-open .main-nav a::after {
    left: 10px;
    right: auto;
    width: 22px;
    bottom: 6px;
    transform-origin: left;
  }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 72px;
}
.hero .container { position: relative; right: 10%; z-index: 1; }
@media (max-width: 870px) {
  /* Below this width the container is nearly edge-to-edge (24px side
     padding), so a 10% left shift runs out of room and starts clipping
     the hero copy against .hero's overflow:hidden. Drop the offset. */
  .hero .container { right: 0; }
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

/* ---- Ambient background: two soft, slow-drifting colour fields behind
   the hero/page-header, plus a cursor-tracked glow (React bit) layered on
   top. Kept very light so the white theme stays white, not muddy. ---- */
.ambient-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ambient-bg::before,
.ambient-bg::after {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  filter: blur(100px);
}
.site-header.site-header-overlay:not(.is-scrolled) {
    filter: drop-shadow(0 4px 8px rgba(192, 172, 172, 0.527));
}
.ambient-bg::before { background: var(--accent-soft); top: -200px; left: -140px; opacity: 0.4; }
.ambient-bg::after { background: color-mix(in srgb, var(--accent) 16%, transparent); bottom: -240px; right: 8%; opacity: 0.8; }
@media (prefers-reduced-motion: no-preference) {
  .ambient-bg::before { animation: ambient-drift-a 18s ease-in-out infinite alternate; }
  .ambient-bg::after { animation: ambient-drift-b 22s ease-in-out infinite alternate; }
}
@keyframes ambient-drift-a { from { transform: translate(0, 0); } to { transform: translate(70px, 50px); } }
@keyframes ambient-drift-b { from { transform: translate(0, 0); } to { transform: translate(-60px, -40px); } }

.cursor-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hero:hover .cursor-glow, .hero:focus-within .cursor-glow,
.page-header:hover .cursor-glow, .page-header:focus-within .cursor-glow { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cursor-glow { transition: none; }
}
.hero-copy h1 { margin-bottom: 0.4em; }
.hero-copy p.lede {
  font-size: 1.1rem;
  max-width: 46ch;
  color: var(--ink-soft);
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.6em; }

/* Full-bleed hero background: several stacked photo layers cross-fade into
   one another (rotated by script.js), rather than a single static image.
   The whole stack fades/scales in together on load; ::after is a static
   gradient scrim, kept for legibility rather than motion. */
.hero.has-photo {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 120px 0;
}
.hero-bg-rotator {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transform: scale(1.06);
  animation: hero-photo-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-bg-layer.is-active { opacity: 1; }
.hero.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgba(15,19,21,0.82) 0%, rgba(15,19,21,0.6) 42%, rgba(15,19,21,0.15) 75%);
}
@keyframes hero-photo-in {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-rotator { animation: none; opacity: 1; transform: none; }
  .hero-bg-layer { transition: none; }
}
.hero.has-photo .hero-copy { max-width: 620px; }
.hero.has-photo .hero-copy h1,
.hero.has-photo .hero-copy p.lede { color: #fff; }
.hero.has-photo .hero-copy p.lede { color: rgba(255,255,255,0.85); }

@media (max-width: 900px) {
  .hero.has-photo { min-height: 580px; padding: 96px 0; }
}

/* ---- Small page header (non-home pages) ---- */
.page-header {
  position: relative;
  overflow: hidden;
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--line);
}
.page-header .container { position: relative; z-index: 1; }
.page-header .eyebrow { margin-bottom: 0.6em; }
.page-header p.lede { font-size: 1.05rem; max-width: 60ch; }

/* ---- Sections & rhythm ---- */
section { padding: 72px 0; }
section.tight { padding: 48px 0; }
.section-head { max-width: 62ch; margin-bottom: 2.6em; }
.section-head p { font-size: 1.02rem; }
.bg-raised { background: var(--bg-raised); }
.bg-sunken { background: var(--bg-sunken); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bg-accent { background: var(--accent-deep); color: #fff; }
.bg-accent h2, .bg-accent h3 { color: #fff; }
.bg-accent p { color: color-mix(in srgb, #fff 78%, transparent); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- Trust strip ---- */
.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-strip .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 20px;
  border-left: 1px solid var(--line);
}
.trust-item:first-child { border-left: none; }
.trust-item .icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.trust-item .icon-circle .icon { font-size: 1.25rem; }
.trust-item strong { display: block; font-size: 0.92rem; }
.trust-item span { font-size: 0.82rem; color: var(--ink-faint); }

@media (max-width: 900px) {
  .trust-strip .container { grid-template-columns: repeat(2, 1fr); }
  .trust-item { border-left: none; border-top: 1px solid var(--line); }
  .trust-item:nth-child(odd) { border-right: 1px solid var(--line); }
}

/* ---- Bento services grid ---- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(140px, auto);
  gap: 18px;
}
.bento-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  text-decoration: none;
  color: inherit;
}
.bento-card.span-4 { grid-column: span 4; }
.bento-card.span-2 { grid-column: span 2; }
.bento-card.span-3 { grid-column: span 3; }
.bento-card.has-photo { color: #fff; min-height: 320px; }
.bento-card.has-photo::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
}
.bento-card.has-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,19,21,0) 30%, rgba(12,16,18,0.86) 100%);
}
.bento-card.has-photo h3, .bento-card.has-photo p { color: #fff; position: relative; z-index: 1; }
.bento-card.has-photo p { color: rgba(255,255,255,0.82); }
.bento-card.plain {
  background: var(--bg-raised);
  border: 1px solid var(--line);
}
.bento-card .icon.lead {
  font-size: 1.9rem;
  color: var(--accent);
  margin-bottom: 14px;
}
.bento-card.has-photo .icon.lead { color: #fff; }
.bento-card .tag {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.3);
  margin-bottom: 12px;
}
.bento-card.plain .tag { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.bento-card h3 { margin-bottom: 0.3em; }
.bento-card p { margin: 0; max-width: 34ch; font-size: 0.92rem; }
.bento-card .link-row { margin-top: 14px; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.88rem; position: relative; z-index: 1; }
.bento-card .link-row .icon { font-size: 1rem; transition: transform 0.18s ease; }
.bento-card:hover .link-row .icon { transform: translateX(3px); }

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card.span-4, .bento-card.span-2, .bento-card.span-3 { grid-column: span 1; }
}

/* ---- Gallery teaser / grid ---- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.photo-grid a, .photo-grid figure { margin: 0; }
.photo-tile {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 1;
  position: relative;
  display: block;
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.photo-tile:hover img { transform: scale(1.05); }
.photo-tile.tall { grid-row: span 2; aspect-ratio: auto; }
.photo-caption { margin-top: 10px; font-size: 0.85rem; color: var(--ink-faint); }

@media (max-width: 900px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-tile.tall { grid-row: span 1; aspect-ratio: 1; }
}

/* ---- Split feature rows (services page) ---- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
.feature-row:last-child { border-bottom: none; }
.feature-row.reverse .feature-media { order: 2; }
.feature-media { border-radius: 18px; overflow: hidden; aspect-ratio: 4/3; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-copy .icon.lead { font-size: 1.7rem; color: var(--accent); margin-bottom: 14px; }
.feature-list { list-style: none; margin: 1.2em 0 0; padding: 0; display: grid; gap: 10px; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; color: var(--ink-soft); }
.feature-list .icon { color: var(--accent); font-size: 1.05rem; margin-top: 2px; flex-shrink: 0; }
.feature-row.no-divider { border-bottom: none; padding-top: 0; }

/* ---- Material comparison tabs (services page): swap the copy/photo
   pair for UPVC, aluminium and composite instead of stacking all three,
   so the page reads as a comparison rather than a scroll of repeats. ---- */
.tab-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
}
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0.75em 1.4em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.tab-btn .icon { font-size: 1.05rem; }
.tab-btn:hover { border-color: var(--accent); color: var(--ink); }
.tab-btn:active { transform: scale(0.97); }
.tab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab-btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .tab-panel.is-active { animation: tab-fade-in 0.35s cubic-bezier(0.16,1,0.3,1) both; }
}
@keyframes tab-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 560px) {
  .tab-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  .tab-btn { flex-shrink: 0; }
}

@media (max-width: 860px) {
  .feature-row, .feature-row.reverse { grid-template-columns: 1fr; }
  .feature-row.reverse .feature-media { order: 0; }
}

/* ---- Process timeline ---- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.process-step { position: relative; padding-top: 8px; }
.process-step .num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--accent-soft);
  -webkit-text-stroke: 1.5px var(--accent);
  color: transparent;
  margin-bottom: 8px;
  display: block;
}
.process-step h3 { margin-bottom: 0.4em; }
.process-step p { font-size: 0.92rem; }

@media (max-width: 900px) {
  .process { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .process { grid-template-columns: 1fr; }
}

/* ---- Values / list blocks ---- */
.value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
}
.value-item { padding-top: 16px; border-top: 1px solid var(--line); }
.value-item .icon.lead { font-size: 1.5rem; color: var(--accent); margin-bottom: 10px; }
@media (max-width: 700px) { .value-grid { grid-template-columns: 1fr; } }


/* ---- Full-bleed photo break (rhythm change between two card-grid
   sections; a single, quiet image with one honest line over it) ---- */
.media-break {
  position: relative;
  height: 46vh;
  min-height: 320px;
  max-height: 480px;
  overflow: hidden;
  border-radius: 24px;
}
.media-break img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.1); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .media-break img {
      animation: media-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes media-parallax {
  from { transform: scale(1.1) translateY(-4%); }
  to { transform: scale(1.1) translateY(4%); }
}
.media-break::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15,19,21,0.72) 0%, rgba(15,19,21,0.1) 55%);
}
.media-break-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 40px;
}
.media-break-text p {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.8vw, 1.9rem);
  line-height: 1.3;
  max-width: 22ch;
  margin: 0;
  z-index: 1;
}
@media (max-width: 700px) {
  .media-break { height: 40vh; min-height: 260px; border-radius: 18px; }
  .media-break-text { padding: 26px; }
}

/* ---- Testimonial ---- */
.quote-block { max-width: 760px; margin: 0 auto; text-align: center; }
.quote-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.quote-block blockquote {
  margin: 0 0 1em;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.quote-block cite {
  font-style: normal;
  color: var(--ink-faint);
  font-size: 0.92rem;
}
.stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 22px; color: var(--accent); font-size: 1.1rem; }

/* ---- CTA banner ---- */
.cta-banner {
  border-radius: 24px;
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-banner h2 { margin-bottom: 0.2em; }
.cta-banner p { color: color-mix(in srgb, #fff 78%, transparent); margin: 0; }
.cta-banner-text { max-width: 46ch; }
.cta-banner-photo {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent-deep) 90%, transparent), color-mix(in srgb, var(--accent-deep) 58%, transparent)),
    var(--img) center/cover;
  color: #fff;
}
.cta-banner-photo h2 { color: #fff; }

/* ---- FAQ accordion ---- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 4px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { color: var(--accent); transition: transform 0.2s ease; flex-shrink: 0; }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-item .faq-answer { padding: 0 4px 22px; }
.faq-item .faq-answer p { margin: 0; }

/* ---- Forms ---- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.form-field .hint { font-size: 0.78rem; color: var(--ink-faint); }
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  padding: 12px 14px;
  border-radius: var(--radius-input);
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  color: var(--ink);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-faint); }
.form-field input,
.form-field select,
.form-field textarea {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid transparent;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: 0.82rem; color: var(--ink-faint); margin-top: 14px; }

.quote-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: start; }
.quote-panel {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 34px;
}
.contact-card { background: var(--accent-deep); color: #fff; border-radius: var(--radius-card); padding: 34px; }
.contact-card h3 { color: #fff; }
.contact-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; }
.contact-row .icon { color: #fff; font-size: 1.2rem; margin-top: 2px; opacity: 0.85; }
.contact-row strong { display: block; font-size: 0.94rem; }
.contact-row span, .contact-row a { display: block; font-size: 0.9rem; color: rgba(255,255,255,0.78); text-decoration: none; }
.contact-row a:hover { color: #fff; text-decoration: underline; }
.contact-card hr { border: none; border-top: 1px solid rgba(255,255,255,0.2); margin: 24px 0; }
.map-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 600; font-size: 0.9rem; color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .quote-layout { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---- Footer ---- */
.site-footer {
  background: var(--bg-sunken);
  border-top: 1px solid var(--line);
  padding: 56px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: 40px;
}
.footer-brand p { max-width: 34ch; font-size: 0.92rem; }
.footer-col h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 1em; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { text-decoration: none; color: var(--ink-soft); font-size: 0.92rem; }
.footer-col a:hover { color: var(--accent); }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact .icon { color: var(--accent); margin-top: 3px; flex-shrink: 0; }
.footer-bottom {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  text-decoration: none;
}
.social-row a:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---- React bits: ShinyText ---- */
.shiny-text {
  background-image: linear-gradient(100deg, var(--ink) 32%, var(--accent) 50%, var(--ink) 68%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .shiny-text { animation: shiny-sweep 4.5s ease-in-out infinite; }
}
@keyframes shiny-sweep {
  0% { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}
.hero.has-photo .shiny-text {
  background-image: linear-gradient(100deg, #fff 32%, var(--accent-soft) 50%, #fff 68%);
}

/* ---- React bits: SpotlightCard ---- */
.spotlight-host { position: relative; overflow: hidden; }
.spotlight-host > *:not(.spotlight-layer) { position: relative; z-index: 1; }
.spotlight-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}
.spotlight-host:hover .spotlight-layer,
.spotlight-host:focus-within .spotlight-layer { opacity: 1; }
.contact-card.spotlight-host .spotlight-layer {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
  .spotlight-layer { transition: none; }
}

/* ---- React bits: TestimonialCarousel ---- */
.testimonial-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.testimonial-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--line-strong);
  cursor: pointer;
}
.testimonial-dots button[aria-current="true"] { background: var(--accent); width: 22px; border-radius: 999px; }
.testimonial-dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.testimonial-slide { transition: opacity 0.4s ease; }
@media (prefers-reduced-motion: reduce) {
  .testimonial-slide { transition: none; }
}

/* ---- Reveal-on-scroll (motivated: draws attention to content entering view) ----
   .stagger containers get --i set on each child by script.js, so a grid of
   cards/photos/steps enters in sequence rather than all at once. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .reveal.is-visible { opacity: 1; transform: none; }

  /* Process steps: a smaller lift and a slightly slower reveal than the
     site's default stagger, for a more deliberate, considered cascade. */
  .process > .process-step {
    transform: translateY(5px);
    transition-duration: 0.9s;
  }

  .reveal-img {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 0.9s cubic-bezier(0.16,1,0.3,1);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .reveal-img.is-visible { clip-path: inset(0 0 0 0%); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-img { clip-path: none; }
}

/* ---- CTA banner sheen (motivated: signals the page's primary conversion
   action without relying on a static color block alone) ---- */
.cta-banner { position: relative; overflow: hidden; }
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.16) 40%, transparent 60%);
  background-size: 220% 100%;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .cta-banner::before { animation: cta-sheen 6s ease-in-out infinite; }
}
@keyframes cta-sheen {
  0%, 15% { background-position: 140% 0; }
  50%, 100% { background-position: -40% 0; }
}
.cta-banner > * { position: relative; z-index: 1; }

/* ---- React bits: magnetic pull target (JS sets transform on pointermove) ---- */
.magnetic { transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); will-change: transform; }

/* ---- React bits: TiltCard ---- */
.tilt-host { transform-style: preserve-3d; transition: transform 0.3s ease; will-change: transform; }

/* ---- React bits: Lightbox ---- */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  animation: lightbox-in 0.25s ease forwards;
}
@keyframes lightbox-in { to { opacity: 1; } }
.lightbox-figure {
  position: relative;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  transform: scale(0.96);
  animation: lightbox-scale 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes lightbox-scale { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .lightbox-overlay, .lightbox-figure { animation: none; opacity: 1; transform: none; }
}
.lightbox-figure img { max-width: 100%; max-height: 80vh; border-radius: 12px; display: block; margin: 0 auto; }
.lightbox-caption { color: #fff; text-align: center; margin-top: 14px; font-size: 0.92rem; opacity: 0.85; }
.lightbox-close, .lightbox-nav {
  position: absolute;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 999px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.24); }
.lightbox-close { top: -18px; right: -18px; }
.lightbox-nav.prev { left: -60px; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { right: -60px; top: 50%; transform: translateY(-50%); }
@media (max-width: 760px) {
  .lightbox-close { top: -52px; right: 0; }
  .lightbox-nav.prev { left: 4px; }
  .lightbox-nav.next { right: 4px; }
}

/* ---- React bits: CountUp ---- */
.count-up { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Marquee: a slow, endless single-row band. Reused for both the
   trust-phrase strip (home) and the coverage-area strip (about) so the
   pattern only exists once in the stylesheet. Max one per page. ---- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunken);
  padding: 20px 0;
}
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 14px;
}
.marquee .phrase {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.marquee .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee-scroll 26s linear infinite; }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
}

/* ---- Process connector: a line grows left-to-right behind the step
   numbers as the section scrolls into view (native CSS scroll-timeline,
   no scroll listener). Desktop only; a 4-step horizontal line makes no
   sense once the grid collapses to one column. ---- */
.process { position: relative; }
.process::before,
.process::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 6%;
  height: 2px;
}
.process::before { right: 6%; background: var(--line); }
.process::after {
  width: 0;
  background: var(--accent);
  transform-origin: left center;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .process::after {
      animation: process-line-fill linear both;
      animation-timeline: view();
      animation-range: entry 25% cover 65%;
    }
  }
}
@keyframes process-line-fill { from { width: 0; } to { width: 88%; } }
.process-step { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .process::before, .process::after { display: none; }
}

/* ---- Ken Burns: a slow idle zoom on a single portrait photo (not
   scroll-linked, just ambient life on an otherwise static shot). ---- */
@media (prefers-reduced-motion: no-preference) {
  .kenburns { overflow: hidden; }
  .kenburns img { animation: kenburns-zoom 16s ease-in-out infinite alternate; }
}
@keyframes kenburns-zoom {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.08) translate(-1.5%, -1%); }
}

/* ---- Gallery hover cue: a small zoom-in glyph fades in over a tile on
   hover, signalling it opens the lightbox (distinct from the tilt). ---- */
.photo-tile { position: relative; }
.photo-tile .zoom-cue {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: linear-gradient(0deg, rgba(15,19,21,0.35), transparent 45%);
}
.photo-tile:hover .zoom-cue, .photo-tile:focus-visible .zoom-cue { opacity: 1; }
.photo-tile .zoom-cue span {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  transform: scale(0.85);
  transition: transform 0.2s ease;
}
.photo-tile:hover .zoom-cue span { transform: scale(1); }

@media (max-width: 700px) {
  section { padding: 52px 0; }
  .cta-banner { padding: 36px 24px; flex-direction: column; align-items: flex-start; }
}

/* ---- WhatsApp floating button: fixed bottom-right on every page, with a
   pulsing ring to draw the eye, opening a WhatsApp chat in a new tab. ---- */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  text-decoration: none;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.45);
  transition: transform 0.2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float .icon { position: relative; z-index: 1; font-size: 1.7rem; }
.whatsapp-float-ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  opacity: 0.55;
}
@media (prefers-reduced-motion: no-preference) {
  .whatsapp-float-ping { animation: whatsapp-blink 1.8s ease-out infinite; }
}
@keyframes whatsapp-blink {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float-ping { display: none; }
}
@media (max-width: 700px) {
  .whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .whatsapp-float .icon { font-size: 1.5rem; }
}

/* ---- Brochure page: three brochures side by side, each a photo thumbnail
   with its title underneath - the whole card (thumbnail included) opens
   that brochure's PDF in a new tab. ---- */
.brochure-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.brochure-item {
  display: block;
  text-decoration: none;
  color: inherit;
}
.brochure-thumb {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 20px 40px -24px hsl(var(--shadow-color) / 0.4);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.brochure-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}
.brochure-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,19,21,0) 45%, rgba(12,16,18,0.82) 100%);
}
.brochure-item:hover .brochure-thumb {
  transform: translateY(-4px);
  box-shadow: 0 28px 52px -24px hsl(var(--shadow-color) / 0.5);
}
.brochure-item:hover .brochure-thumb::before { transform: scale(1.05); }
.brochure-thumb-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(4px);
}
.brochure-thumb-icon {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 1;
  color: #fff;
  font-size: 1.6rem;
}
.brochure-item h3 { margin: 16px 0 4px; font-size: 1.05rem; }
.brochure-item-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
}
.brochure-item-meta .icon { font-size: 0.9rem; transition: transform 0.18s ease; }
.brochure-item:hover .brochure-item-meta .icon { transform: translateX(3px); }
@media (max-width: 760px) {
  .brochure-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- Brochure lead popup (our-services.html) ---- */
.btn-ghost { background: transparent; color: var(--accent); border-color: transparent; }
.btn-ghost:hover { background: var(--accent-soft); }
.lead-modal {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: none;
  border-radius: 20px;
  background: var(--bg-raised);
  color: var(--ink);
  box-shadow: 0 40px 80px -30px hsl(var(--shadow-color) / 0.55);
}
.lead-modal::backdrop { background: rgba(12, 16, 18, 0.55); backdrop-filter: blur(4px); }
@media (prefers-reduced-motion: no-preference) {
  .lead-modal[open] { animation: lead-modal-in 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
}
@keyframes lead-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.lead-form-view,
.lead-done-view { padding: 36px 32px 28px; }
.lead-modal h2 { font-size: 1.45rem; margin-bottom: 0.35em; padding-right: 32px; }
.lead-modal-kicker {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.lead-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.lead-modal-close:hover { background: var(--accent-soft); }
.lead-form .form-grid { grid-template-columns: 1fr; gap: 14px; margin: 20px 0 16px; }
.form-field .optional { font-weight: 400; color: var(--ink-faint); }
.lead-error { color: #b42318; font-size: 0.86rem; margin: 0 0 12px; }
.lead-done-view { text-align: center; }
.lead-done-view h2 { padding-right: 0; }
.lead-done-view p { margin-left: auto; margin-right: auto; }
.lead-done-view .btn + .btn { margin-top: 8px; }
.lead-done-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
}