/* ============================================================
   RESET COMMERCIAL CLEANING — Black & Gold (v8)
   Same structure as the original layout (pinned hero, expanding
   mobile nav, sticky-reveal footer, marquee, Lenis/GSAP motion),
   re-themed to match the logo: near-black with #F4B94C gold.
   ============================================================ */

/* Self-hosted fonts (SIL Open Font License, latin subset from Google Fonts) —
   avoids a render-blocking third-party stylesheet. DM Sans is one variable file. */
@font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/dm-serif-display-latin.woff2) format('woff2'); }
@font-face { font-family: 'DM Serif Display'; font-style: italic; font-weight: 400; font-display: swap; src: url(assets/fonts/dm-serif-display-italic-latin.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(assets/fonts/dm-sans-latin.woff2) format('woff2'); }

:root {
  --bg: #0a0906;            /* page */
  --bg-2: #110f0a;          /* alternate band */
  --card: #16130d;          /* card surface */
  --card-2: #1c1810;
  --gold: #f4b94c;          /* logo gold */
  --gold-deep: #cd9601;     /* brand accent from live site */
  --gold-soft: rgba(244, 185, 76, 0.14);
  --text: #f3ead6;          /* primary text */
  --muted: #a89d86;         /* secondary text */
  --line: rgba(244, 185, 76, 0.16);
  --line-soft: rgba(243, 234, 214, 0.08);

  --radius: 16px;
  --radius-sm: 10px;
  --pill: 999px;
  --max: 1240px;
  --pad: 28px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
  --dur-fast: 0.3s;
  --stagger-step: 0.12s;
  --footer-h: 0px;
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.lenis-smooth { scroll-behavior: auto !important; }
html.lenis, html.lenis body { height: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
::selection { background: var(--gold); color: #0a0906; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
section[id] { scroll-margin-top: 90px; }

/* ---------- Type: DM Serif Display headings (sentence case) + DM Sans body ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.06;
  overflow-wrap: break-word;
  text-wrap: balance;
}
h2.display { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--gold); }
.gold { color: var(--gold); }
.inline-link { color: var(--gold); border-bottom: 1px solid currentColor; font-weight: 500; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
  border-radius: var(--pill); border: 1px solid var(--gold);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn svg { width: 15px; height: 15px; }
.btn-cta { background: var(--gold); color: #0a0906; }
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(244,185,76,0.6); }
.btn-outline { background: transparent; color: var(--gold); }
.btn-outline::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.btn-outline:hover { color: #0a0906; }
.btn-outline:hover::before { transform: scaleX(1); }

/* ---------- Header: logo + full menu ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding: 10px 0;
  background: linear-gradient(to bottom, rgba(10,9,6,0.85), rgba(10,9,6,0));
  transition: background-color 0.35s ease, padding 0.35s var(--ease), border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { background: rgba(10,9,6,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--line); padding: 6px 0; }
.header-inner { max-width: 1360px; margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; gap: 28px; }
.wordmark { display: flex; align-items: center; gap: 12px; flex: none; }
.wordmark img { height: 96px; width: 96px; transition: height 0.35s var(--ease), width 0.35s var(--ease); }
.site-header.is-scrolled .wordmark img { height: 72px; width: 72px; }
.wordmark-text { font-family: var(--font-body); font-weight: 800; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); line-height: 1.1; }
.wordmark-text span { display: block; color: var(--gold); font-size: 0.58rem; letter-spacing: 0.24em; margin-top: 3px; font-weight: 600; }

.main-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.main-nav a {
  position: relative; padding: 8px 11px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--text); opacity: 0.85; transition: opacity 0.2s ease, color 0.2s ease; white-space: nowrap;
}
.main-nav a::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.main-nav a:hover, .main-nav a[aria-current='page'] { opacity: 1; color: var(--gold); }
.main-nav a:hover::after, .main-nav a[aria-current='page']::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-book { padding: 10px 20px; }

.menu-toggle {
  display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  align-items: center; justify-content: center; color: var(--gold);
}
.toggle-icon { position: relative; width: 20px; height: 14px; display: block; }
.toggle-icon span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur-fast) ease, top var(--dur) var(--ease); }
.toggle-icon span:nth-child(1) { top: 0; }
.toggle-icon span:nth-child(2) { top: 6px; }
.toggle-icon span:nth-child(3) { top: 12px; }
.menu-toggle[aria-expanded='true'] .toggle-icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-toggle[aria-expanded='true'] .toggle-icon span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded='true'] .toggle-icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (max-width: 1180px) {
  .main-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-actions { margin-left: auto; }
}

/* Mobile/tablet expanding nav panel */
.nav-panel { position: fixed; top: 0; left: 0; right: 0; z-index: 250; max-height: 0; overflow: hidden; background: var(--bg); transition: max-height var(--dur) var(--ease); }
.nav-panel-scene { height: 90px; position: relative; overflow: hidden; margin-top: 116px; border-top: 1px solid var(--line); }
.blob {
  position: absolute; width: 200px; height: 200px; left: 50%; top: 50%; margin: -100px 0 0 -100px;
  background: radial-gradient(circle at 35% 35%, var(--gold), var(--gold-deep) 55%, transparent 72%);
  opacity: 0.45; filter: blur(8px);
  animation: blob-spin 26s linear infinite, blob-morph 9s ease-in-out infinite;
}
@keyframes blob-spin { to { transform: rotate(360deg); } }
@keyframes blob-morph { 0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; } 50% { border-radius: 60% 40% 38% 62% / 55% 62% 38% 45%; } }
.nav-panel-list { background: var(--bg-2); padding-bottom: 14px; }
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad); max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav-panel.rows-visible .nav-row { opacity: 1; transform: none; }
.nav-row span:first-child { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; }
.nav-row[aria-current='page'] span:first-child { color: var(--gold); }
.icon-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--gold); flex-shrink: 0; }
.icon-btn .fill { position: absolute; inset: 0; background: var(--gold); clip-path: circle(0% at 50% 50%); transition: clip-path var(--dur) var(--ease); }
.icon-btn svg { position: relative; z-index: 1; width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease), color var(--dur) var(--ease); }
.nav-row:hover .icon-btn .fill { clip-path: circle(75% at 50% 50%); }
.nav-row:hover .icon-btn svg { color: #0a0906; transform: rotate(45deg); }

/* ---------- Reveal (content is visible without JS; script.js adds .js) ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
/* Failsafe: script.js never ran (blocked or failed), so nothing may stay hidden. */
.no-reveal .reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .blob, .sweep, .hero-video { animation: none !important; }
}

/* ============================================================
   HERO — full-bleed cleaning video (or page photo) under a dark
   gold-tinted overlay, gold particle canvas on top, copy scrolls
   up over the pinned visual.
   ============================================================ */
.hero-pin { position: relative; height: calc(100vh + 150px); background: #000; } /* ~150px of pinned fade, then content */
.hero-visual { position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 0; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video { animation: hero-zoom 22s ease-in-out infinite alternate; }
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-visual::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(10,9,6,0.92) 0%, rgba(10,9,6,0.7) 45%, rgba(10,9,6,0.35) 100%),
    linear-gradient(to top, rgba(10,9,6,1) 0%, rgba(10,9,6,0) 35%);
}
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.hero-visual-vignette { display: none; }
.hero-copy { position: absolute; top: 30vh; left: 0; right: 0; z-index: 3; }
.hero-copy h1 { font-size: clamp(2.3rem, 4.8vw, 3.9rem); max-width: 18ch; margin-top: 16px; color: var(--text); }
.hero-copy h1 .gold { color: var(--gold); }
.hero-sub { margin-top: 20px; max-width: 46ch; font-size: clamp(0.95rem, 1.2vw, 1.08rem); color: var(--muted); font-weight: 300; }
.hero-sub .word { color: inherit; }
.hero-sub-long { max-width: 56ch; }
.hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-badges { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.hero-badges li {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--line);
  border-radius: var(--pill); font-size: 0.72rem; color: var(--text); background: rgba(10,9,6,0.4); backdrop-filter: blur(6px);
}
.hero-badges svg { width: 14px; height: 14px; color: var(--gold); }
.video-toggle {
  position: absolute; right: var(--pad); bottom: 28px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pill);
  border: 1px solid var(--line); background: rgba(10,9,6,0.6); color: var(--text); font-size: 0.72rem; cursor: pointer;
}
.video-toggle svg { width: 12px; height: 12px; color: var(--gold); }
.video-toggle.is-inline { position: static; margin-top: 14px; }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; z-index: 4; width: 22px; height: 36px; margin-left: -11px; border: 1px solid var(--line); border-radius: 12px; }
.scroll-cue::after { content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--gold); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
.hero-pin.hero-short { height: 110vh; }
.hero-pin.hero-short .hero-copy { top: 34vh; }
@media (max-width: 640px) {
  .hero-pin { height: calc(100vh + 110px); }
  .hero-copy { top: 22vh; }
  .hero-pin.hero-short .hero-copy { top: 24vh; }
  .scroll-cue { display: none; }
}
/* Phones and small tablets: the hero copy can be taller than a short screen, so keep it in
   the flow (pulled up over the sticky photo) and let the hero grow with it instead of
   spilling onto the next section. The photo stays pinned behind while the copy scrolls. */
@media (max-width: 767px) {
  .hero-pin:not(.hero-compact) { height: auto; min-height: calc(100vh + 110px); }
  .hero-pin:not(.hero-compact) .hero-copy { position: relative; top: auto; margin-top: -100vh; padding: 22vh 0 64px; }
  .hero-pin.hero-short:not(.hero-compact) .hero-copy { padding-top: 24vh; }
}

/* ---------- Sections ---------- */
.section { padding: 88px 0; position: relative; }
.section-dark { background: var(--bg-2); }
.section-head { max-width: 58ch; margin-bottom: 44px; }
.section-head h2 { margin-top: 12px; }
.section-head p { margin-top: 14px; color: var(--muted); font-size: 0.95rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow::after { content: ''; width: 22px; height: 1px; background: var(--gold); }

/* Gold hairline between sections */
.section + .section::before, .section + .section-dark::before {
  content: ''; position: absolute; top: 0; left: 50%; width: min(var(--max), 90%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* Ambient gold sweep (used behind icon-card groups) */
.why { overflow: hidden; }
.why-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.why-scene .sweep { position: absolute; width: 50vw; height: 50vw; max-width: 640px; max-height: 640px; border-radius: 50%; filter: blur(100px); background: radial-gradient(circle, rgba(244,185,76,0.35), transparent 70%); opacity: 0.18; animation: sweep 24s ease-in-out infinite; }
.why-scene .sweep:nth-child(2) { right: 0; bottom: 0; opacity: 0.12; animation-duration: 32s; animation-delay: -8s; }
@keyframes sweep { 0%, 100% { transform: translate(-15%, -10%); } 50% { transform: translate(30%, 20%); } }
.why .wrap { position: relative; z-index: 1; }

/* ============================================================
   ICON CARDS — the site's main building block
   ============================================================ */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.icon-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px 24px; border-radius: var(--radius);
  background: linear-gradient(160deg, var(--card-2), var(--card));
  border: 1px solid var(--line-soft); overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.icon-card::before {
  /* gold light that follows the pointer (set via --mx/--my in script.js) */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(244,185,76,0.14), transparent 60%);
}
.icon-card::after {
  content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease);
}
.icon-card:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: 0 24px 50px -30px rgba(244,185,76,0.45); }
.icon-card:hover::before { opacity: 1; }
.icon-card:hover::after { transform: scaleX(1); }
.icon-card .ic {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--gold-soft); border: 1px solid var(--line); color: var(--gold); margin-bottom: 6px;
  transition: transform 0.6s var(--ease), background-color 0.4s ease, color 0.4s ease;
}
.icon-card .ic svg { width: 22px; height: 22px; }
.icon-card:hover .ic { transform: rotate(-8deg) scale(1.08); background: var(--gold); color: #0a0906; }
.icon-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.22; }
.icon-card p { color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
.icon-card .price { margin-top: auto; padding-top: 10px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; color: var(--gold); }
.icon-card .more { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 600; color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; }
.icon-card .more svg { width: 13px; height: 13px; transition: transform 0.4s var(--ease); }
.icon-card:hover .more svg { transform: translateX(4px); }
.icon-card .num { position: absolute; top: 16px; right: 22px; font-family: var(--font-display); font-weight: 400; font-size: 2.5rem; color: rgba(244,185,76,0.1); line-height: 1; }
/* idle float on icons so the grid feels alive */
@media (prefers-reduced-motion: no-preference) {
  .icon-card .ic { animation: ic-float 5s ease-in-out infinite; }
  .icon-card:nth-child(2n) .ic { animation-delay: -1.6s; }
  .icon-card:nth-child(3n) .ic { animation-delay: -3.2s; }
  .icon-card:hover .ic { animation-play-state: paused; }
}
@keyframes ic-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* Stats: count-up numbers in cards */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.stat { padding: 22px; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--card); text-align: left; }
.stat b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 3.4vw, 2.9rem); line-height: 1; color: var(--gold); }
.stat span { display: block; margin-top: 8px; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ---------- Split image / copy ---------- */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split-grid.split-reverse .split-photo { order: 2; }
.split-copy h2 { margin-top: 12px; }
.split-copy p { margin-top: 14px; color: var(--muted); font-size: 0.95rem; max-width: 52ch; }
.split-photo { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.split-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.split-photo:hover img { transform: scale(1.05); }
.split-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,6,0.45), transparent 50%); pointer-events: none; }

/* ---------- Photo tiles (What We Clean) ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); }
.service-tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 1s var(--ease), filter 0.6s ease; }
.service-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,9,6,0) 40%, rgba(10,9,6,0.92) 100%); }
.service-tile:hover img { transform: scale(1.07); filter: saturate(1); }
.service-tile-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px; }
.service-tile-content h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.service-tile-content h3::before { content: ''; width: 18px; height: 1px; background: var(--gold); transition: width 0.5s var(--ease); }
.service-tile:hover .service-tile-content h3::before { width: 34px; }

/* ---------- Clients marquee ---------- */
.marquee { overflow: hidden; padding: 26px 0; }
.marquee__track { display: flex; width: max-content; align-items: center; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__track > span { display: flex; align-items: center; gap: 22px; padding-right: 22px; }
.logo-marquee { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logo-item { display: flex; align-items: center; height: 58px; padding: 10px 22px; border-radius: var(--radius-sm); background: #ffffff; }
/* Client logos in their original colours on white tiles */
.logo-item img { height: 100%; width: auto; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; width: auto; } }

/* ---------- Reviews ---------- */
.testi-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.testi-grid { grid-template-columns: repeat(3, 1fr); }
.testi-quote { position: relative; padding: 26px 24px 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line-soft); transition: transform 0.5s var(--ease), border-color 0.5s ease; }
.testi-quote:hover { transform: translateY(-4px); border-color: var(--line); }
.testi-quote .stars { display: flex; gap: 3px; color: var(--gold); margin-bottom: 12px; }
.testi-quote .stars svg { width: 14px; height: 14px; }
.testi-quote p { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.08rem; line-height: 1.55; color: var(--text); }
.testi-quote cite { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-style: normal; font-size: 0.78rem; font-weight: 600; color: var(--text); }
.testi-quote cite small { color: var(--muted); font-weight: 400; }
.testi-quote .avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #0a0906; font-weight: 700; font-size: 0.8rem; }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 10px; max-width: 860px; }
.faq-item { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--card); transition: border-color 0.4s ease; }
.faq-item.is-open { border-color: var(--line); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; text-align: left; }
.faq-q span:first-child { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; line-height: 1.3; }
.faq-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--gold); }
.faq-icon svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.faq-item.is-open .faq-icon { background: var(--gold); color: #0a0906; }
.faq-item.is-open .faq-icon svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease); }
.faq-a[hidden] { display: none; }
.faq-h { margin: 0; font: inherit; }
.faq-a p { padding: 0 20px 18px; color: var(--muted); font-size: 0.88rem; max-width: 70ch; }

/* ---------- Quote section ---------- */
.quote-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.quote-sticky-col { position: sticky; top: 120px; }
.quote-sticky-col h2 { margin-top: 12px; }
.quote-note { margin-top: 14px; color: var(--muted); font-size: 0.92rem; max-width: 42ch; }
.quote-quicklinks { margin-top: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.quote-email { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.85rem; color: var(--gold); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; overflow-wrap: anywhere; }
.quote-scroll-col { display: flex; flex-direction: column; gap: 22px; }
.quote-form { display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.form-title { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; line-height: 1.15; color: var(--gold); }
.form-intro { color: var(--muted); font-size: 0.85rem; margin-top: -6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; min-width: 0; background: rgba(243,234,214,0.03); border: 1px solid var(--line-soft); color: var(--text);
  padding: 11px 14px; font-family: var(--font-body); font-size: 0.88rem; border-radius: var(--radius-sm);
  transition: border-color 0.3s ease, background-color 0.3s ease; color-scheme: dark;
}
.field select option { background: var(--card); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); background: rgba(244,185,76,0.04); }
.field [aria-invalid='true'] { border-color: #e5645a; }
.field textarea { resize: vertical; min-height: 90px; }
.form-note { font-size: 0.72rem; color: var(--muted); }
.form-status:empty { display: none; }
.form-status { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--gold-soft); border: 1px solid var(--line); font-size: 0.82rem; }
.form-status.is-error { background: rgba(229,100,90,0.1); border-color: #e5645a; }
.contact-list { display: flex; flex-direction: column; }
.contact-list .glass-line { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.contact-list .glass-line:last-child { border-bottom: 1px solid var(--line-soft); }
.glass-line .l { display: block; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.glass-line .v { font-size: 0.9rem; }
.glass-line .v a { overflow-wrap: anywhere; }
.glass-line .v a:hover { color: var(--gold); }

/* ---------- Service detail rows (services page) ---------- */
.service-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line-soft); }
.service-detail-reverse .service-detail-photo { order: 2; }
.service-detail-photo { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 11; border: 1px solid var(--line-soft); }
.service-detail-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.service-detail:hover .service-detail-photo img { transform: scale(1.04); }
.service-detail-body .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-soft); border: 1px solid var(--line); color: var(--gold); margin-bottom: 16px; }
.service-detail-body .ic svg { width: 20px; height: 20px; }
.service-detail-body h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: 0.01em; }
.service-detail-body p { margin-top: 12px; color: var(--muted); font-size: 0.92rem; max-width: 48ch; }
.service-price { color: var(--gold) !important; font-weight: 600; font-size: 0.8rem !important; letter-spacing: 0.04em; }
.service-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.service-detail-checklist { list-style: none; margin-top: 16px; display: grid; gap: 8px; }
.service-detail-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; }
.service-detail-checklist svg { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; color: var(--gold); }

/* ---------- Work gallery ---------- */
.work-gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.work-gallery figure { margin: 0; position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1 / 1; border: 1px solid var(--line-soft); }
.work-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease), filter 0.5s ease; filter: saturate(0.8) brightness(0.9); }
.work-gallery figure:hover img { transform: scale(1.08); filter: none; }

/* ---------- Areas ---------- */
.area-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.area-list li { padding: 4px 11px; border: 1px solid var(--line-soft); border-radius: var(--pill); font-size: 0.76rem; color: var(--text); transition: border-color 0.3s ease, color 0.3s ease; }
.area-list li:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Mission / vision ---------- */
.mv-text { font-family: var(--font-display); font-style: italic; font-size: 1.12rem !important; color: var(--text) !important; line-height: 1.55 !important; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.blog-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 20px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line-soft); transition: transform 0.5s var(--ease), border-color 0.5s ease; }
.blog-card:hover { transform: translateY(-6px); border-color: var(--line); }
.blog-card-photo { display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 8px; }
.blog-card-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8); transition: transform 0.9s var(--ease), filter 0.5s ease; }
.blog-card:hover .blog-card-photo img { transform: scale(1.06); filter: none; }
.blog-card .eyebrow, .blog-card h3, .blog-card p, .blog-card .read-more { padding: 0 6px; }
.blog-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.25; }
.blog-card p { color: var(--muted); font-size: 0.84rem; }
.read-more svg { width: 14px; height: 14px; flex: 0 0 14px; }
.read-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }

/* ---------- Articles & legal ---------- */
.article { max-width: 720px; }
.article-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: 34px; border: 1px solid var(--line-soft); }
.article p { font-size: 0.98rem; line-height: 1.8; color: #d8ceb6; }
.article p + p { margin-top: 1.1em; }
.article h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; line-height: 1.2; color: var(--gold); margin: 34px 0 10px; }
.article a { color: var(--gold); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }

/* ---------- Footer (sticky reveal) ---------- */
.page-content { position: relative; z-index: 1; background: var(--bg); }
.footer-reveal .page-content { margin-bottom: var(--footer-h); }
.footer-reveal .footer-section { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; }
.footer-section { position: relative; background: #050403; padding: 64px 0 26px; border-top: 1px solid var(--line); }
.footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.footer-top .wordmark img { height: 84px; width: 84px; }
.footer-tagline { color: var(--muted); font-size: 0.85rem; max-width: 46ch; margin: 14px 0 40px; }
.socials-row { display: flex; gap: 10px; }
.socials-row a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--gold); transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease); }
.socials-row a:hover { background: var(--gold); color: #0a0906; transform: translateY(-3px); }
.socials-row svg { width: 16px; height: 16px; }
.footer-grid-mini { display: grid; grid-template-columns: 1.3fr 0.8fr 1fr 1.2fr; gap: 36px; }
.footer-col h3, .footer-h { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 16px; }
.footer-services { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-services a, .footer-nav a, .footer-legal a { font-size: 0.82rem; color: var(--muted); transition: color 0.2s ease; }
.footer-services a:hover, .footer-nav a:hover, .footer-legal a:hover { color: var(--gold); }
.footer-nav { display: flex; }
.footer-section .contact-list .glass-line { padding: 10px 0; }
.footer-section .glass-line .v { font-size: 0.82rem; color: var(--text); }
.footer-nav-row { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; list-style: none; }
.footer-bottom { margin-top: 18px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.74rem; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .card-grid, .services-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .split-grid, .service-detail, .quote-grid { grid-template-columns: 1fr; gap: 32px; }
  .split-grid.split-reverse .split-photo, .service-detail-reverse .service-detail-photo { order: 0; }
  .quote-sticky-col { position: static; }
  .work-gallery { grid-template-columns: repeat(3, 1fr); }
  .footer-grid-mini { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --pad: 18px; }
  body { font-size: 14.5px; }
  .section { padding: 64px 0; }
  .wordmark img { height: 68px; width: 68px; }
  .site-header.is-scrolled .wordmark img { height: 56px; width: 56px; }
  .wordmark-text { font-size: 0.8rem; }
  .header-book { display: none; }
  .nav-panel-scene { margin-top: 88px; height: 60px; }
  .card-grid, .card-grid.cols-2, .card-grid.cols-4, .services-grid, .blog-grid, .testi-list, .testi-grid, .form-row { grid-template-columns: 1fr; }
  .work-gallery { grid-template-columns: repeat(2, 1fr); }
  .footer-grid-mini { grid-template-columns: 1fr; }
  .quote-form { padding: 22px 18px; }
  .service-detail { padding: 40px 0; }
}
.video-toggle .i-play, .video-toggle[data-paused='true'] .i-pause { display: none; }
.video-toggle[data-paused='true'] .i-play { display: inline; }


/* ============================================================
   v9 additions: services dropdown, photo cards, mosaic,
   fancier icon cards (animated gold border, light sweep, tilt)
   ============================================================ */

/* ---------- Services dropdown (desktop) ---------- */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd-link { position: relative; padding: 8px 4px 8px 11px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; color: var(--text); opacity: 0.85; white-space: nowrap; transition: opacity 0.2s ease, color 0.2s ease; }
.nav-dd-link:hover, .nav-dd-link[aria-current='page'], .nav-dd:hover .nav-dd-link, .nav-dd.is-open .nav-dd-link { opacity: 1; color: var(--gold); }
.nav-dd-toggle { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--text); opacity: 0.85; transition: color 0.2s ease, transform 0.35s var(--ease); }
.nav-dd-toggle svg { width: 14px; height: 14px; }
.nav-dd:hover .nav-dd-toggle, .nav-dd.is-open .nav-dd-toggle { color: var(--gold); opacity: 1; transform: rotate(180deg); }
.nav-dd-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; width: min(940px, 94vw);
  padding: 18px; border-radius: 18px;
  background: rgba(16, 14, 9, 0.97); border: 1px solid var(--line);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(244,185,76,0.05);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px);
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease), visibility 0.3s;
}
.nav-dd-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* hover bridge */
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu, .nav-dd.is-open .nav-dd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-dd.is-closed .nav-dd-menu { opacity: 0; visibility: hidden; transform: translate(-50%, 10px); }
.nav-dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nav-dd-item { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid transparent; transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.3s var(--ease); }
.nav-dd-item:hover, .nav-dd-item:focus-visible { background: rgba(244,185,76,0.07); border-color: var(--line); transform: translateX(3px); }
.dd-thumb { width: 64px; height: 48px; flex: none; border-radius: 9px; overflow: hidden; border: 1px solid var(--line-soft); }
.dd-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.nav-dd-item:hover .dd-thumb img { transform: scale(1.1); }
.dd-text b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; line-height: 1.2; color: var(--text); }
.nav-dd-item:hover .dd-text b { color: var(--gold); }
.dd-text small { display: block; margin-top: 2px; font-size: 0.72rem; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nav-dd-all { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 11px; border-radius: 12px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #0a0906; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.nav-dd-all svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.nav-dd-all:hover svg { transform: translateX(4px); }

/* ---------- Services inside the mobile panel ---------- */
.nav-sub { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease) 0.2s, transform var(--dur) var(--ease) 0.2s; }
.nav-panel.rows-visible .nav-sub { opacity: 1; transform: none; }
.nav-sub a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line-soft); font-size: 0.78rem; color: var(--text); }
.nav-sub a:hover { border-color: var(--gold); color: var(--gold); }
.nav-sub svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
@media (max-width: 420px) { .nav-sub { grid-template-columns: 1fr; } }


/* ---------- Photo cards (services) ---------- */
.photo-card {
  position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, var(--card-2), var(--card)) padding-box,
              linear-gradient(160deg, rgba(244,185,76,0.35), rgba(244,185,76,0.04) 40%, rgba(244,185,76,0.2)) border-box;
  border: 1px solid transparent;
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
  transform-style: preserve-3d;
}
.photo-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(244,185,76,0.5), 0 10px 30px -10px rgba(0,0,0,0.6); }
.pc-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter 0.6s ease; filter: saturate(0.9); }
.pc-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,9,6,0) 45%, rgba(22,19,13,0.95) 100%); }
.photo-card:hover .pc-img img { transform: scale(1.08); filter: saturate(1.05); }
.pc-ic {
  position: absolute; top: calc(75% - 24px); left: 20px; z-index: 2; width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; color: #0a0906; background: linear-gradient(135deg, #ffd684, var(--gold) 50%, var(--gold-deep));
  box-shadow: 0 10px 24px -8px rgba(244,185,76,0.7); transition: transform 0.6s var(--ease);
}
.pc-ic svg { width: 22px; height: 22px; }
.photo-card:hover .pc-ic { transform: rotate(-8deg) scale(1.08); }
.pc-body { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 30px 20px 20px; flex: 1; }
.pc-body h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.22; }
.pc-body p { color: var(--muted); font-size: 0.84rem; line-height: 1.55; }
.pc-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-soft); }
.pc-foot .price { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; color: var(--gold); }
.pc-go { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--gold); transition: background-color 0.35s ease, color 0.35s ease, transform 0.45s var(--ease); }
.pc-go svg { width: 14px; height: 14px; }
.photo-card:hover .pc-go { background: var(--gold); color: #0a0906; transform: rotate(-45deg); }
.photo-card-cta { justify-content: center; background: radial-gradient(120% 80% at 0% 0%, rgba(244,185,76,0.22), transparent 60%), linear-gradient(180deg, var(--card-2), var(--card)) padding-box, linear-gradient(160deg, var(--gold), rgba(244,185,76,0.1)) border-box; }
.photo-card-cta .pc-ic { position: static; margin-bottom: 8px; }
.photo-card-cta .pc-body { padding-top: 26px; }

/* ---------- Photo mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 14px; }
.mosaic-item { position: relative; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-soft); }
.mosaic-item:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic-item:nth-child(4) { grid-column: span 2; }
.mosaic-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 0.6s ease; filter: saturate(0.9) brightness(0.92); }
.mosaic-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10,9,6,0.85)); }
.mosaic-item figcaption { position: absolute; left: 16px; bottom: 14px; z-index: 1; display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.mosaic-item figcaption::before { content: ''; width: 18px; height: 2px; background: var(--gold); transition: width 0.5s var(--ease); }
.mosaic-item:hover img { transform: scale(1.07); filter: none; }
.mosaic-item:hover figcaption::before { width: 34px; }
.mosaic:has(.mosaic-item:nth-child(3):last-child) { grid-template-columns: 2fr 1fr; grid-auto-rows: 200px; }
.mosaic:has(.mosaic-item:nth-child(3):last-child) .mosaic-item:first-child { grid-column: 1; grid-row: span 2; }
@media (max-width: 900px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .mosaic-item:first-child { grid-column: span 2; }
  .mosaic-item:nth-child(4) { grid-column: span 1; }
  .mosaic-item:nth-child(4):last-child { grid-column: span 2; } /* four tiles: no empty cell */
}
@media (max-width: 560px) {
  .mosaic, .mosaic:has(.mosaic-item:nth-child(3):last-child) { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .mosaic-item:first-child, .mosaic:has(.mosaic-item:nth-child(3):last-child) .mosaic-item:first-child { grid-column: auto; grid-row: auto; }
  .mosaic-item:nth-child(4):last-child { grid-column: auto; }
}

/* ---------- Fancier icon cards ---------- */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.icon-card {
  border: 1px solid transparent;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(244,185,76,0.08), transparent 55%) padding-box,
    linear-gradient(160deg, var(--card-2), var(--card)) padding-box,
    conic-gradient(from var(--ang), rgba(244,185,76,0.08), rgba(244,185,76,0.55) 10%, rgba(244,185,76,0.08) 22%, rgba(244,185,76,0.08) 100%) border-box;
  transform-style: preserve-3d; will-change: transform;
}
.icon-card:hover { animation: card-orbit 3.2s linear infinite; border-color: transparent; }
@keyframes card-orbit { to { --ang: 360deg; } }
.icon-card::after {
  /* light sweep instead of the top line */
  left: -60%; right: auto; top: 0; bottom: 0; width: 45%; height: auto; transform: skewX(-18deg); transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(255,228,170,0.12), transparent);
  transition: left 0.9s var(--ease);
}
.icon-card:hover::after { left: 120%; transform: skewX(-18deg); }
.icon-card .ic { background: linear-gradient(135deg, rgba(255,214,132,0.22), rgba(244,185,76,0.08)); box-shadow: inset 0 1px 0 rgba(255,230,180,0.2); }
.icon-card:hover .ic { background: linear-gradient(135deg, #ffd684, var(--gold) 50%, var(--gold-deep)); box-shadow: 0 10px 24px -8px rgba(244,185,76,0.7); }
.stat { background: radial-gradient(120% 90% at 0% 0%, rgba(244,185,76,0.08), transparent 55%), var(--card); transition: transform 0.5s var(--ease), border-color 0.5s ease; }
.stat:hover { transform: translateY(-4px); border-color: var(--line); }
@media (prefers-reduced-motion: reduce) { .icon-card:hover { animation: none; } }

/* Dropdown items must not inherit the top-level nav link styles */
.nav-dd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.main-nav .nav-dd-menu a { white-space: normal; opacity: 1; letter-spacing: normal; }
.main-nav .nav-dd-menu a::after { display: none; }
.main-nav .nav-dd-item { padding: 8px; font-size: inherit; }
.main-nav .nav-dd-all { padding: 11px; font-size: 0.74rem; letter-spacing: 0.08em; color: #0a0906; }
.dd-text { min-width: 0; }
.pc-media { position: relative; display: block; }
.pc-media .pc-ic { top: auto; bottom: -24px; }
.mosaic-item:nth-child(5), .mosaic-item:nth-child(6) { grid-column: span 2; }
@media (max-width: 900px) { .mosaic-item:nth-child(5), .mosaic-item:nth-child(6) { grid-column: span 1; } }
@media (max-width: 560px) { .mosaic-item:nth-child(5), .mosaic-item:nth-child(6) { grid-column: auto; } }


/* ============================================================
   Audit fixes (26 Sep 2026)
   ============================================================ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* F13: skip link */
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 1000; padding: 10px 16px; border-radius: 10px; background: var(--gold); color: #0a0906; font-weight: 600; transition: top 0.2s ease; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* Breadcrumbs */
.breadcrumbs { background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; padding-bottom: 14px; font-size: 0.78rem; color: var(--muted); }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; opacity: 0.6; }
.breadcrumbs a:hover { color: var(--gold); }
.breadcrumbs [aria-current] { color: var(--text); }

/* F05/F06: mobile panel. Closed = [hidden] (no focus, not rendered). */
.nav-panel { max-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.nav-panel[hidden] { display: none; }
.nav-panel.is-closing { pointer-events: none; }
.nav-row-group { justify-content: space-between; }
.nav-row-group > a { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; }
.nav-row-group > a[aria-current='page'] { color: var(--gold); }
.nav-sub-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--gold); transition: transform 0.35s var(--ease); }
.nav-sub-toggle svg { width: 16px; height: 16px; }
.nav-sub-toggle[aria-expanded='true'] { transform: rotate(180deg); }
.nav-sub[hidden] { display: none; }
.nav-sub a[aria-current='page'] { border-color: var(--gold); color: var(--gold); }
.nav-panel-cta { max-width: var(--max); margin: 0 auto; padding: 16px var(--pad) 24px; display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--line-soft); }

/* Header CTA button text is longer now */
.header-book { white-space: nowrap; }

/* Hero: poster first, video fades in only once playing */
.hero-poster { z-index: 0; }
.hero-video { opacity: 0; transition: opacity 0.8s ease; }
.hero-video.is-playing { opacity: 1; }
.video-toggle[hidden] { display: none; }
@media (max-width: 767px) { .hero-media { object-position: 30% center; } }

/* F15: utility pages get a short, un-pinned hero */
.hero-pin.hero-compact { height: auto; min-height: 0; }
.hero-pin.hero-compact .hero-visual { position: absolute; inset: 0; height: 100%; }
.hero-pin.hero-compact .hero-copy { position: relative; top: auto; padding: 150px 0 56px; }
.hero-pin.hero-compact h1 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
@media (max-width: 640px) { .hero-pin.hero-compact .hero-copy { padding: 120px 0 44px; } }

/* F07: form validation messages */
.form-errors { padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(229,100,90,0.1); border: 1px solid #e5645a; font-size: 0.85rem; }
.form-errors[hidden] { display: none; }
.form-errors ul { margin: 6px 0 0 18px; }
.form-errors a { color: var(--text); text-decoration: underline; }
.field-error { color: #ff9a90; font-size: 0.78rem; }
.field-error[hidden] { display: none; }
.field-hint { color: var(--muted); font-size: 0.76rem; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.more-fields { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 10px 14px; }
.more-fields summary { cursor: pointer; font-size: 0.82rem; color: var(--gold); }
.more-fields[open] summary { margin-bottom: 12px; }
.more-fields .form-row { margin-bottom: 12px; }
.form-status.is-success { background: rgba(120,190,120,0.12); border-color: #7bbf7b; }
.quote-form button[disabled] { opacity: 0.6; cursor: progress; }

/* F10/F13: client marquee with a pause control and readable names */
.marquee-wrap { position: relative; }
.marquee-toggle { position: absolute; right: var(--pad); bottom: -34px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--pill); border: 1px solid var(--line); font-size: 0.7rem; color: var(--muted); }
.marquee-toggle:hover { color: var(--gold); border-color: var(--gold); }
.marquee.is-paused .marquee__track, .marquee-wrap:focus-within .marquee__track { animation-play-state: paused; }

/* Service pages */
.suits { list-style: none; margin-top: 16px; display: grid; gap: 8px; }
.suits li { display: flex; gap: 10px; align-items: center; font-size: 0.9rem; }
.suits svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.price-basis { font-size: 0.8rem !important; color: var(--muted); margin-top: 6px !important; }
.scope-note { margin-top: 22px; display: flex; gap: 14px; padding: 20px 22px; border-radius: var(--radius); border: 1px dashed var(--line); background: rgba(244,185,76,0.04); }
.scope-note .ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--gold); background: var(--gold-soft); }
.scope-note .ic svg { width: 18px; height: 18px; }
.scope-note h3 { font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.scope-note ul { margin-left: 18px; display: grid; gap: 4px; color: var(--muted); font-size: 0.86rem; }
.scope-note a { color: var(--gold); }
.hub-note { margin-top: 26px; color: var(--muted); font-size: 0.9rem; }

/* Articles */
.article-meta { color: var(--muted); font-size: 0.82rem; margin-bottom: 26px; }
.checklist-box { margin: 34px 0; padding: 24px 26px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(160deg, var(--card-2), var(--card)); }
.checklist-box h2 { margin-top: 0; }
.checklist-box ul { list-style: none; display: grid; gap: 10px; }
.checklist-box li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; color: #d8ceb6; }
.checklist-box svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 3px; }
.article-links { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 0.9rem !important; }

.footer-small { margin-top: 10px; font-size: 0.74rem; color: var(--muted); }
.footer-col .footer-services { list-style: none; }

/* F10: reduced motion covers every continuous or scroll-linked effect */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue::after, .icon-card .ic, .marquee__track, .blob, .sweep { animation: none !important; }
  .icon-card:hover, .photo-card:hover, .stat:hover, .testi-quote:hover { transform: none; }
}

/* ---------- Standalone service pages (split services) ---------- */
figure.split-photo { margin: 0; }
.photo-note { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 1; font-size: 0.72rem; line-height: 1.4; color: rgba(243, 234, 214, 0.88); }
.photo-card-wide { grid-column: span 2; }
@media (max-width: 640px) { .photo-card-wide { grid-column: auto; } }
.icon-card .read-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.78rem; font-weight: 600; color: var(--gold); }

/* Preview-only owner confirmation note (never emitted in production builds) */
.owner-note { border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); background: rgba(244, 185, 76, 0.06); padding: 16px 0; font-size: 0.84rem; color: var(--text); }
.owner-note ul { margin: 8px 0 0 18px; display: grid; gap: 4px; color: var(--muted); }
.owner-note strong { color: var(--gold); }

/* Services hub groups + comparison table */
.svc-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 36px; }
.svc-jump a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 0.8rem; color: var(--text); transition: background-color 0.2s ease, color 0.2s ease; }
.svc-jump a:hover, .svc-jump a:focus-visible { background: var(--gold-soft); color: var(--gold); }
.svc-group + .svc-group { margin-top: 64px; }
.svc-group-h { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--gold); }
.svc-group-p { margin: 6px 0 26px; color: var(--muted); font-size: 0.9rem; }
.service-detail-body .service-detail-h { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: 0.01em; }
.svc-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.svc-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.svc-table th, .svc-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.svc-table thead th { font-family: var(--font-body); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); background: rgba(244, 185, 76, 0.05); }
.svc-table tbody tr:last-child td { border-bottom: 0; }
.svc-table td:nth-child(3) a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .svc-table thead { display: none; }
  .svc-table, .svc-table tbody, .svc-table tr, .svc-table td { display: block; width: 100%; }
  .svc-table tr { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .svc-table td { border: 0; padding: 4px 16px; }
  .svc-table td:nth-child(2)::before { content: 'Choose: '; color: var(--muted); }
  .svc-table td:nth-child(3)::before { content: 'Not the same as: '; color: var(--muted); }
}

/* Linked mosaic tiles (home): same look as captioned figures, plus a keyboard focus ring */
a.mosaic-item { display: block; color: var(--text); }
.mosaic-item .mosaic-cap { position: absolute; left: 16px; bottom: 14px; z-index: 1; display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.mosaic-item .mosaic-cap::before { content: ''; width: 18px; height: 2px; background: var(--gold); transition: width 0.5s var(--ease); }
.mosaic-item:hover .mosaic-cap::before, .mosaic-item:focus-visible .mosaic-cap::before { width: 34px; }
a.mosaic-item:hover .mosaic-cap, a.mosaic-item:focus-visible .mosaic-cap { color: var(--gold); }
a.mosaic-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Home services on phones: two compact columns (photo, icon, name). The full
   description and price stay on each service page and the Services page. */
@media (max-width: 640px) {
  .home-services .card-grid.cols-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .home-services .photo-card:not(.photo-card-cta) .pc-body p,
  .home-services .photo-card:not(.photo-card-cta) .pc-foot { display: none; }
  .home-services .photo-card:not(.photo-card-cta) .pc-body { padding: 30px 12px 16px; }
  .home-services .photo-card:not(.photo-card-cta) .pc-body h3 { font-size: 0.78rem; }
  .home-services .photo-card:not(.photo-card-cta) .pc-media .pc-ic { left: 12px; }
  .home-services .photo-card-wide { grid-column: span 2; }
}

/* ============================================================
   CREAM SECTIONS (trial on Home): alternate dark / cream bands.
   Tokens are redefined inside the section so every component
   follows. Contrast on #fff5d8: text 17.7:1, muted 7.2:1,
   gold text #7a5700 6.0:1. Bright logo gold is kept only for
   filled tiles/buttons with dark icons (11:1).
   ============================================================ */
.section-light {
  --text: #140e00; --muted: #5c513d;
  --gold: #7a5700; --gold-soft: rgba(205, 150, 1, 0.14);
  --card: #fffcf2; --card-2: #ffffff;
  --line: rgba(122, 87, 0, 0.30); --line-soft: rgba(20, 14, 0, 0.10);
  background: #fff5d8; color: var(--text);
}
.section-light .why-scene .sweep { opacity: 0.3; }
/* Cards: white surfaces, visible gold edge, soft warm shadow */
.section-light .icon-card {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(244, 185, 76, 0.12), transparent 55%) padding-box,
    linear-gradient(160deg, var(--card-2), var(--card)) padding-box,
    conic-gradient(from var(--ang), rgba(205, 150, 1, 0.28), rgba(205, 150, 1, 0.9) 10%, rgba(205, 150, 1, 0.28) 22%, rgba(205, 150, 1, 0.28) 100%) border-box;
  box-shadow: 0 1px 2px rgba(20, 14, 0, 0.05), 0 14px 32px -20px rgba(90, 65, 0, 0.35);
}
.section-light .icon-card:hover { box-shadow: 0 26px 50px -28px rgba(122, 87, 0, 0.5); }
.section-light .photo-card {
  background: linear-gradient(180deg, var(--card-2), var(--card)) padding-box,
              linear-gradient(160deg, rgba(205, 150, 1, 0.7), rgba(205, 150, 1, 0.18) 40%, rgba(205, 150, 1, 0.5)) border-box;
  box-shadow: 0 1px 2px rgba(20, 14, 0, 0.05), 0 16px 36px -22px rgba(90, 65, 0, 0.4);
}
.section-light .photo-card:hover { box-shadow: 0 30px 60px -30px rgba(122, 87, 0, 0.55), 0 10px 26px -14px rgba(20, 14, 0, 0.2); }
.section-light .photo-card-cta {
  background: radial-gradient(120% 80% at 0% 0%, rgba(244, 185, 76, 0.35), transparent 60%), linear-gradient(180deg, var(--card-2), var(--card)) padding-box,
              linear-gradient(160deg, #cd9601, rgba(205, 150, 1, 0.25)) border-box;
}
.section-light .pc-img::after { background: linear-gradient(180deg, rgba(255, 252, 242, 0) 55%, rgba(255, 252, 242, 0.85) 100%); }
.section-light .pc-ic { background: linear-gradient(135deg, #ffd684, #f4b94c 50%, #cd9601); }
.section-light .stat, .section-light .faq-item { box-shadow: 0 1px 2px rgba(20, 14, 0, 0.05), 0 12px 28px -22px rgba(90, 65, 0, 0.35); }
/* Filled states use the bright logo gold with dark icons */
.section-light .icon-card:hover .ic,
.section-light .photo-card:hover .pc-go,
.section-light .faq-item.is-open .faq-icon { background: #f4b94c; color: #0a0906; }

/* ---------- Bands site-wide: cream variants of the remaining components ---------- */
/* Two same-colour neighbours (e.g. FAQ then the black quote section) get a thin gold divider */
.section-light + .section-light { border-top: 1px solid rgba(122, 87, 0, 0.22); }
.section-dark + .section-dark { border-top: 1px solid rgba(244, 185, 76, 0.18); }
.section-light .btn-outline::before { background: #f4b94c; }
.section-light .logo-item { border: 1px solid rgba(20, 14, 0, 0.12); }
.section-light .article p, .section-light .checklist-box li { color: #2e2616; }
.section-light .testi-quote, .section-light .blog-card, .section-light .service-detail-photo, .section-light .work-gallery figure { box-shadow: 0 1px 2px rgba(20, 14, 0, 0.05), 0 14px 32px -22px rgba(90, 65, 0, 0.35); }
.section-light .testi-quote .avatar { background: #f4b94c; }
/* Photo captions sit on a dark photo overlay, so they stay light in every band */
.section-light .mosaic-item figcaption, .section-light .mosaic-item .mosaic-cap { color: #f3ead6; }
.section-light .mosaic-item figcaption::before, .section-light .mosaic-item .mosaic-cap::before { background: #f4b94c; }
.section-light a.mosaic-item:hover .mosaic-cap, .section-light a.mosaic-item:focus-visible .mosaic-cap { color: #f4b94c; }
.section-light a.mosaic-item:focus-visible { outline-color: #7a5700; }

/* ---------- Home "All services" panel: quick links + compare button ---------- */
.photo-card-hub:hover { transform: none; }
.photo-card-hub .pc-body { gap: 10px; }
.svc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; }
.svc-chips a { display: inline-flex; padding: 7px 14px; border-radius: var(--pill); border: 1px solid var(--line); font-size: 0.8rem; font-weight: 500; color: var(--text); transition: background-color 0.25s ease, border-color 0.25s ease; }
.svc-chips a:hover, .svc-chips a:focus-visible { background: var(--gold-soft); border-color: var(--gold); }
.photo-card-hub .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Phones/tablets: Call / Get a quote bar ---------- */
.mobile-cta { display: none; }
@media (max-width: 900px) {
  .mobile-cta:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; display: flex; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(10, 9, 6, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    transition: transform 0.35s var(--ease), visibility 0.35s;
  }
  .mobile-cta .btn { flex: 1; justify-content: center; padding: 11px 14px; }
  .mobile-cta.is-away { transform: translateY(110%); visibility: hidden; }
  body.has-mobile-cta { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .mobile-cta { transition: none !important; } }
/* Card numbers (About timeline years, How-it-works steps) carry information: readable at large-text contrast */
.icon-card .num { color: var(--gold); opacity: 0.7; }
/* Filled buttons keep the bright logo gold on cream (dark text 11:1); --gold is darkened only for text */
.section-light .btn-cta { background: #f4b94c; border-color: #cd9601; color: #0a0906; }
.section-light .btn-cta:hover { box-shadow: 0 10px 26px -12px rgba(122, 87, 0, 0.55); }
/* Printing never inherits the scroll fade */
@media print { main > .section > * { opacity: 1 !important; transform: none !important; } }

/* ============================================================
   MOTION ROUND 2 — every effect below is skipped with reduced motion.
   ============================================================ */
/* Hero heading words (split at build time) sit on their own line box for the rise */
.hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.hw > span { display: inline-block; }
/* Section heading words must be inline-blocks so they can rise (motion.js) */
.scrub-reveal .word { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance on page load: pure CSS, so there's no flash if a script is slow */
  .hero-copy .eyebrow { animation: hero-rise 0.8s var(--ease) 0.05s both; }
  .hw > span { animation: word-rise 0.8s var(--ease) both; animation-delay: calc(0.1s + var(--i) * 0.05s); }
  .hero-copy .hero-sub { animation: hero-rise 0.9s var(--ease) 0.55s both; }
  .hero-copy .hero-actions { animation: hero-rise 0.9s var(--ease) 0.7s both; }
  .hero-copy .hero-badges { animation: hero-rise 0.9s var(--ease) 0.85s both; }
  .hero-copy .video-toggle { animation: hero-rise 0.9s var(--ease) 0.95s both; }
  .hero-copy .eyebrow::before { animation: line-draw 0.9s var(--ease) 0.2s both; }

  /* Eyebrow line draws in when its block is revealed */
  .eyebrow::before { transition: width 0.9s var(--ease) 0.15s; }
  .js .reveal:not(.is-visible) .eyebrow::before, .js .eyebrow.reveal:not(.is-visible)::before { width: 0; }

  /* Cards: rise with a slight scale, staggered by the existing per-card delays */
  .js .icon-card.reveal:not(.is-visible), .js .photo-card.reveal:not(.is-visible),
  .js .testi-quote.reveal:not(.is-visible), .js .blog-card.reveal:not(.is-visible),
  .js .stat.reveal:not(.is-visible), .js .faq-item.reveal:not(.is-visible) { transform: translateY(34px) scale(0.965); }

  /* Photos open with a clipped wipe as they appear */
  .js .split-photo.reveal, .js .service-detail-photo.reveal, .js .mosaic-item.reveal {
    transform: none; clip-path: inset(14% 0 14% 0 round 16px);
    transition: clip-path 1.2s var(--ease), opacity 0.7s ease;
  }
  .js .split-photo.reveal.is-visible, .js .service-detail-photo.reveal.is-visible, .js .mosaic-item.reveal.is-visible { clip-path: inset(0 0 0 0 round 16px); }

  /* Parallax: motion.js adds .has-parallax and animates --py */
  .has-parallax .split-photo img, .has-parallax .service-detail-photo img, .has-parallax .mosaic-item img { scale: 1.14; translate: 0 var(--py, 0%); }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes word-rise { from { transform: translateY(105%); } }
@keyframes line-draw { from { width: 0; } }

/* Scroll progress line (created by motion.js, so it never exists with reduced motion) */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 600; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #cd9601, #f4b94c, #ffd684); }
/* The photo clip-path would cut off an outside focus ring, so tiles draw it inside */
a.mosaic-item:focus-visible, .section-light a.mosaic-item:focus-visible { outline: 3px solid #f4b94c; outline-offset: -5px; }

/* ============================================================
   GOOGLE ADS LANDING PAGE (lp-*): slim header, form in the first screen
   ============================================================ */
.lp-header .header-inner { justify-content: space-between; }
.lp-call { white-space: nowrap; }
@media (max-width: 480px) { .lp-call { padding: 10px 14px; font-size: 0.74rem; } }

.lp-hero { position: relative; padding: 150px 0 80px; background: #000; overflow: hidden; }
.lp-hero-media { position: absolute; inset: 0; }
.lp-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.lp-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,9,6,0.95) 0%, rgba(10,9,6,0.82) 48%, rgba(10,9,6,0.55) 100%), linear-gradient(to top, rgba(10,9,6,1) 0%, rgba(10,9,6,0) 30%); }
.lp-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; grid-template-areas: 'copy form' 'details form'; column-gap: 56px; row-gap: 0; align-items: start; }
.lp-hero-copy { grid-area: copy; align-self: end; }
.lp-form-card { grid-area: form; align-self: center; }
.lp-hero-details { grid-area: details; }
.lp-hero-copy h1 { margin-top: 14px; font-size: clamp(2.3rem, 4.6vw, 3.6rem); max-width: 16ch; color: var(--text); }
.lp-sub { margin-top: 18px; max-width: 46ch; color: var(--muted); font-size: 1.02rem; }
.lp-price { margin-top: 14px; color: var(--text); font-size: 0.95rem; }
.lp-price strong { color: var(--gold); }
.lp-trust { list-style: none; margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; max-width: 560px; }
.lp-trust li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: var(--text); }
.lp-trust svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--gold); }
.lp-hero-actions { margin-top: 28px; }
.lp-form-card { border-radius: 20px; padding: 6px; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(244,185,76,0.35); }
.lp-form-card .quote-form { background: #fffdf6; border: 0; border-radius: 16px; padding: 28px; }
.lp-submit { justify-content: center; padding: 14px 24px; font-size: 0.86rem; }
@media (max-width: 980px) {
  .lp-hero { padding: 130px 0 56px; }
  .lp-hero-grid { grid-template-columns: 1fr; grid-template-areas: 'copy' 'form' 'details'; row-gap: 26px; }
  .lp-hero-media img { object-position: 60% 20%; }
}
@media (max-width: 560px) { .lp-trust { grid-template-columns: 1fr; } .lp-form-card .quote-form { padding: 20px; } }

/* Forms on cream: white inputs with visible borders, readable error red */
.section-light .field input, .section-light .field textarea, .section-light .field select { background: #ffffff; border-color: #8a7f6a; color-scheme: light; }
.section-light .field input:focus, .section-light .field textarea:focus, .section-light .field select:focus { border-color: #7a5700; box-shadow: 0 0 0 3px rgba(205,150,1,0.25); background: #ffffff; }
.section-light .field [aria-invalid='true'] { border-color: #b3261e; }
.section-light .field-error { color: #b3261e; }
.section-light .form-errors { background: #fdecea; border-color: #b3261e; }
.section-light .form-status.is-error { background: #fdecea; border-color: #b3261e; }
.section-light .form-status.is-success { background: #e8f5e9; border-color: #2e7d32; }

.lp-final-inner { text-align: center; max-width: 720px; }
.lp-final-inner h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.lp-final-inner p { margin-top: 12px; color: var(--muted); }
.lp-final-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.lp-footer { padding: 40px 0 24px; }
.lp-footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.lp-footer-row p { font-size: 0.85rem; color: var(--muted); flex: 1 1 320px; }
.lp-footer-row a { color: var(--text); }

@media (prefers-reduced-motion: no-preference) {
  .lp-hero-copy .eyebrow { animation: hero-rise 0.8s var(--ease) 0.05s both; }
  .lp-price { animation: hero-rise 0.9s var(--ease) 0.5s both; }
  .lp-hero-details { animation: hero-rise 0.9s var(--ease) 0.65s both; }
  .lp-form-card { animation: hero-rise 1s var(--ease) 0.3s both; }
}
/* In-page jumps (#quote etc.) stop below the fixed header when native scrolling is used */
main [id] { scroll-margin-top: 96px; }
/* Reduced motion: the logo strip stops scrolling, so show one copy of the logos, not the duplicate */
@media (prefers-reduced-motion: reduce) { .marquee__track > span + span { display: none; } }
/* Landing page: re-clean guarantee line under the price */
.lp-guarantee { margin-top: 12px; display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--text); }
.lp-guarantee svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--gold); }
@media (prefers-reduced-motion: no-preference) { .lp-guarantee { animation: hero-rise 0.9s var(--ease) 0.55s both; } }

/* ---------- Bigger client logos (all pages) + landing page photos ---------- */
.logo-item { height: 88px; padding: 14px 28px; border-radius: 14px; }
.marquee__track > span { gap: 26px; padding-right: 26px; }
@media (max-width: 640px) { .logo-item { height: 72px; padding: 12px 20px; } }

/* "What's included" as photo cards (not links, so no hover lift) */
.lp-incl-card:hover { transform: none; }
.lp-incl-card .pc-body { padding-bottom: 24px; }

/* "Our work" gallery: 3 × 2 on desktop, 2 columns on phones */
.lp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-gallery figure { margin: 0; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-soft); }
.lp-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.lp-gallery figure:hover img { transform: scale(1.05); }
@media (max-width: 640px) { .lp-gallery { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* Why Reset: photo beside four points */
.lp-why { align-items: center; }
.lp-why-list { list-style: none; margin-top: 22px; display: grid; gap: 18px; }
.lp-why-list li { display: flex; gap: 14px; align-items: flex-start; }
.lp-why-list svg { width: 40px; height: 40px; flex: none; padding: 9px; border-radius: 12px; background: var(--gold-soft); border: 1px solid var(--line); color: var(--gold); }
.lp-why-list h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.2; }
.lp-why-list p { margin-top: 4px; color: var(--muted); font-size: 0.9rem; }

/* Final call to action over a darkened photo */
.lp-final-photo { position: relative; padding: 120px 0; overflow: hidden; background: #000; }
.lp-final-media { position: absolute; inset: 0; }
.lp-final-media img { width: 100%; height: 100%; object-fit: cover; }
.lp-final-media img { object-position: 50% 70%; }
.lp-final-media::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 90% at 50% 50%, rgba(10,9,6,0.93), rgba(10,9,6,0.78)); }
.lp-final-photo .lp-final-inner { position: relative; z-index: 1; }
.lp-final-photo h2 { color: var(--text); }
.lp-final-photo p { color: #d8ceb6; }
@media (max-width: 640px) { .lp-final-photo { padding: 84px 0; } }

/* ---------- Client stories (About, service pages, office landing page) ---------- */
.story-list { display: grid; gap: 20px; }
.client-story {
  display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 32px; align-items: start;
  padding: 30px; border-radius: var(--radius); border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, var(--card-2), var(--card));
}
.story-logos { display: grid; gap: 12px; }
.story-logos .logo-item { justify-content: center; height: 96px; padding: 16px 20px; }
.story-logos .logo-item img { max-width: 100%; }
.story-meta { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--gold); font-weight: 600; }
.story-body h3 { margin-top: 6px; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--text); }
.story-body p { margin-top: 12px; color: var(--muted); max-width: 62ch; }
.story-body p:first-of-type { margin-top: 0; }
.story-body h3 + p { color: var(--text); font-size: 1.05rem; }
.story-body .suits { margin-top: 14px; }
@media (max-width: 720px) {
  .client-story { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .story-logos { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .story-logos .logo-item { height: 80px; }
}

/* Phones and tablets: hero text spans most of the width, so the photo overlay must be dark across the whole
   width, not just on the left (measured contrast of subtitles fell to ~1.5–3.5:1 over the
   lighter right side of photos; this brings every hero text line to WCAG AA). */
@media (max-width: 1100px) {
  .hero-visual::after {
    background:
      linear-gradient(90deg, rgba(10,9,6,0.9) 0%, rgba(10,9,6,0.82) 100%),
      linear-gradient(to top, rgba(10,9,6,1) 0%, rgba(10,9,6,0) 35%);
  }
  .lp-hero-media::after {
    background:
      linear-gradient(90deg, rgba(10,9,6,0.93) 0%, rgba(10,9,6,0.86) 100%),
      linear-gradient(to top, rgba(10,9,6,1) 0%, rgba(10,9,6,0) 30%);
  }
}

/* Text over hero photos: measured per line against the photo behind it (WCAG AA 4.5:1).
   Subtitles use a lighter warm grey than body text; outline buttons get the same dark
   frosted fill as the hero badges, so they read on light parts of a photo too. */
.hero-copy .hero-sub, .lp-sub { color: #d9d0bd; }
.hero-copy .btn-outline, .lp-hero .btn-outline { background: rgba(10, 9, 6, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* Header over hero photos (before scrolling): a deeper fade behind the menu and full-opacity
   links keep menu text at 4.5:1 over light parts of a photo. */
.site-header:not(.is-scrolled) { background: linear-gradient(to bottom, rgba(10,9,6,0.92) 0%, rgba(10,9,6,0.7) 65%, rgba(10,9,6,0) 100%); }
.main-nav a { opacity: 1; }
.lp-call { background: rgba(10, 9, 6, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.photo-note { left: 12px; right: auto; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: 8px; background: rgba(10, 9, 6, 0.72); color: #f3ead6; }

/* ---------- Quote form: one-tap questions + what happens next ---------- */
.choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice legend { padding: 0; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.choice .optional { margin-left: 6px; font-size: 0.7rem; letter-spacing: 0; text-transform: none; opacity: 0.85; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: var(--pill);
  border: 1px solid var(--line); color: var(--text); font-size: 0.82rem; line-height: 1.2;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.chip:hover span { border-color: var(--gold); }
.chip input:checked + span { background: #f4b94c; border-color: #f4b94c; color: #0a0906; font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.next-steps { list-style: none; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.next-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8rem; line-height: 1.4; color: var(--muted); }
.next-steps .n { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); font-size: 0.72rem; font-weight: 600; }
@media (max-width: 640px) { .next-steps { grid-template-columns: 1fr; } }

/* Social icons in their brand colours (footer). Maps and Call keep the gold outline style. */
.socials-row a.soc { border-color: transparent; color: #ffffff; }
.socials-row a.soc-whatsapp { background: #25d366; }
.socials-row a.soc-facebook { background: #1877f2; }
.socials-row a.soc-youtube { background: #ff0000; }
.socials-row a.soc-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.socials-row a.soc-youtube svg path:last-child { fill: currentColor; }
.socials-row a.soc:hover { color: #ffffff; filter: brightness(1.12); transform: translateY(-3px); }
.socials-row a.soc-whatsapp:hover { background: #25d366; }
.socials-row a.soc-facebook:hover { background: #1877f2; }
.socials-row a.soc-youtube:hover { background: #ff0000; }
.socials-row a.soc-instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.socials-row a.soc svg { stroke-width: 2; }
.socials-row a.soc-facebook svg path { fill: currentColor; stroke: none; }
.socials-row a.soc-whatsapp svg .fill { fill: currentColor; stroke: none; }

/* Phone quick-contact bar: WhatsApp (brand green, icon-only) before Call and Get a quote. */
.mobile-cta .mcta-wa { flex: none; width: 48px; padding: 0; justify-content: center; background: #25d366; border-color: #25d366; color: #ffffff; }
.mobile-cta .mcta-wa svg { width: 22px; height: 22px; stroke-width: 2; }
.mobile-cta .mcta-wa svg .fill { fill: currentColor; stroke: none; }
.area-list a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.area-list a:hover { color: var(--gold); }
/* Long email addresses may wrap on very small screens rather than widen the page. */
a[href^="mailto:"] { overflow-wrap: anywhere; }
.scope-note > div { min-width: 0; }