/* ==========================================================================
   Media Channels — Design Tokens
   ========================================================================== */
:root {
  /* Colors */
  --bg: #0a0a0b;
  --bg-alt: #111113;
  --surface: #17161a;
  --surface-2: #1e1c21;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --gold: #d4af37;
  --gold-light: #f1d879;
  --gold-dark: #9c7c1f;
  --gold-soft: rgba(212, 175, 55, 0.12);

  --text: #f4f1ea;
  --text-dim: #b9b4a8;
  --text-mute: #7d786f;

  --success: #4caf7d;
  --danger: #e0604f;

  /* Type scale */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  /* Spacing (8pt) */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4rem;
  --sp-8: 6rem;
  --sp-9: 8rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --container: 1240px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;

  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 8px 24px rgba(212, 175, 55, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* `clip` rather than `hidden`: both stop sideways overflow, but `hidden`
   turns these into scroll containers, which breaks `position: sticky`
   (the pinned hero stage silently scrolls away). */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Heebo", "Segoe UI", Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  width: 100%;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  top: -60px;
  right: var(--sp-3);
  z-index: 1000;
  background: var(--gold);
  color: #14110a;
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus {
  top: var(--sp-2);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-light);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

h2.section-title {
  font-size: clamp(1.75rem, 1.2rem + 2vw, var(--fs-3xl));
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-block: var(--sp-2) var(--sp-2);
}

.section-lead {
  color: var(--text-dim);
  font-size: var(--fs-md);
  max-width: 640px;
}

.section-head {
  margin-bottom: var(--sp-6);
}
.section-head.center {
  text-align: center;
  margin-inline: auto;
}
.section-head.center .section-lead { margin-inline: auto; }

section { position: relative; }
.section-pad { padding-block: var(--sp-8); }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--fs-sm);
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-dark));
  color: #14110a;
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(212, 175, 55, 0.35); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--gold); }

.btn-lg { padding: 1.05rem 2rem; font-size: var(--fs-base); }
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding-block: var(--sp-2);
  transition: background var(--dur-base) var(--ease), padding var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(10, 10, 11, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--border);
  padding-block: 0.4rem;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.brand img,
.brand .brand-media {
  height: 54px;
  width: auto;
  border-radius: 10px;
  display: block;
  transition:
    height var(--dur-base) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}
.site-header.scrolled .brand img,
.site-header.scrolled .brand .brand-media { height: 42px; }

/* it doubles as the back-to-top control, so give it a real hover/focus cue */
.brand:hover .brand-media,
.brand:focus-visible .brand-media {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.32);
}
.brand:active .brand-media { transform: translateY(0) scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .brand .brand-media { transition: height var(--dur-base) var(--ease); }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.nav-links a {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-dim);
  position: relative;
  padding-block: 4px;
  transition: color var(--dur-fast) var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width var(--dur-base) var(--ease);
}
.nav-links a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); }
.header-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text);
  /* stays a comfortable tap target once the number itself is hidden on phones */
  min-height: 44px;
  min-width: 44px;
}
.header-phone svg { width: 18px; height: 18px; color: var(--gold); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.nav-toggle svg { width: 22px; height: 22px; }

/* ==========================================================================
   Hero — scroll-driven billboard
   The section is tall; its inner stage is pinned, and scroll progress drives
   both the frame sequence on the canvas and which statement is showing.
   ========================================================================== */
.hero-scroll {
  position: relative;
  /* kept short on purpose: the longer this is, the less the billboard turns
     per wheel notch, which reads as lag rather than as a slow reveal */
  height: 200vh;
  background: var(--bg);
}
.hero-scroll-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  /* first frame as a poster, so the stage is never blank while the
     sequence is still loading — the canvas paints over it once ready */
  background: var(--bg) url("../assets/hero/frames/f001.jpg") center / cover no-repeat;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,8,9,0.62) 0%, rgba(8,8,9,0.34) 40%, rgba(8,8,9,0.88) 100%),
    /* The copy sits on the right in this RTL layout, so the heavy end of the
       scrim belongs on the right. Reversed, it left the text sitting on the
       bright billboard and body copy dropped to ~2.9:1. */
    linear-gradient(90deg, rgba(8,8,9,0.10) 0%, rgba(8,8,9,0.40) 46%, rgba(8,8,9,0.88) 100%);
}
.hero-scroll-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  padding-top: 5rem;
}

/* Every panel sits in the same spot; one is visible at a time. Children move
   in a short stagger rather than the block sliding as one lump. */
.hero-panel {
  position: absolute;
  inset-inline-start: var(--sp-4);
  inset-inline-end: auto;
  max-width: 620px;
  visibility: hidden;
  transition: visibility 0s linear 700ms;
}
.hero-panel.is-open {
  visibility: visible;
  transition-delay: 0s;
}
.hero-panel > * {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition:
    opacity 700ms var(--ease),
    transform 700ms var(--ease),
    filter 700ms var(--ease);
}
.hero-panel.is-open > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.hero-panel.is-open > :nth-child(1) { transition-delay: 40ms; }
.hero-panel.is-open > :nth-child(2) { transition-delay: 110ms; }
.hero-panel.is-open > :nth-child(3) { transition-delay: 180ms; }
.hero-panel.is-open > :nth-child(4) { transition-delay: 250ms; }
.hero-panel h1 {
  font-size: clamp(2.3rem, 1.5rem + 3.4vw, var(--fs-4xl));
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-4);
}
.hero-panel .lead {
  font-size: var(--fs-md);
  /* brighter than the usual dimmed body colour: this text sits over moving
     footage that runs from near-black to a white billboard */
  color: #e8e4dc;
  max-width: 560px;
  margin-bottom: var(--sp-5);
}
.hero-panel .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* the three statements that run while the billboard turns */
.hero-kicker {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(212, 175, 55, 0.45);
}
.hero-panel-side h2 {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.3rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
}
.hero-panel-side p {
  font-size: var(--fs-md);
  color: #e8e4dc;
  max-width: 44ch;
}

/* thin gold progress rule along the bottom of the stage */
.hero-progress {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.08);
}
.hero-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
}

.hero-scroll .scroll-cue {
  z-index: 3;
  transition: opacity var(--dur-base) var(--ease);
}
.hero-scroll .scroll-cue.is-hidden { opacity: 0; pointer-events: none; }

@media (max-width: 860px) {
  .hero-scroll { height: 170vh; }
  .hero-panel { inset-inline: var(--sp-3); max-width: none; }
  /* the billboard keeps the top band, the copy sits underneath it */
  .hero-scroll-inner {
    align-items: flex-end;
    padding-top: 0;
    padding-bottom: 8vh;
  }
  /* stay light over the billboard, go dark only where the text lands */
  .hero-vignette {
    background: linear-gradient(180deg,
      rgba(8,8,9,0.30) 0%,
      rgba(8,8,9,0.14) 30%,
      rgba(8,8,9,0.72) 52%,
      rgba(8,8,9,0.94) 72%,
      rgba(8,8,9,0.98) 100%);
  }
  /* tuned so the longest panel still fits in the lower half */
  .hero-panel h1 { font-size: clamp(1.75rem, 1.1rem + 3.2vw, 2.3rem); margin-bottom: var(--sp-3); }
  .hero-panel .lead { font-size: 0.95rem; margin-bottom: var(--sp-4); }
  .hero-panel .btn-lg { padding: 0.85rem 1.35rem; font-size: 0.9rem; }
  .hero-panel-side h2 { font-size: clamp(1.6rem, 1rem + 3.2vw, 2.2rem); }
  .hero-panel-side p { font-size: 0.95rem; }
}

/* Reduced motion / no-JS: no pinning, no scrubbing — a plain stacked hero. */
.hero-scroll.no-scrub { height: auto; }
.hero-scroll.no-scrub .hero-scroll-sticky { position: relative; height: auto; }
.hero-scroll.no-scrub .hero-scroll-inner {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-7);
  padding-block: calc(var(--sp-8) + 4rem) var(--sp-8);
}
.hero-scroll.no-scrub .hero-panel {
  position: relative;
  inset: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.hero-scroll.no-scrub .hero-progress,
.hero-scroll.no-scrub .scroll-cue { display: none; }

/* ==========================================================================
   Hero (previous static variant — unused since the scroll hero landed,
   kept so the old version can be restored without rewriting it)
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 6rem;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img,
.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,8,9,0.55) 0%, rgba(8,8,9,0.78) 55%, var(--bg) 100%),
    linear-gradient(90deg, rgba(8,8,9,0.85) 0%, rgba(8,8,9,0.25) 55%);
}
.hero-content { position: relative; z-index: 1; max-width: 760px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--gold-soft);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--gold-light);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: var(--sp-4);
}
.hero-badge svg { width: 15px; height: 15px; }

.hero h1 {
  font-size: clamp(2.4rem, 1.6rem + 3.5vw, var(--fs-4xl));
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-4);
}
.hero h1 .gold-text {
  background: linear-gradient(100deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead {
  font-size: var(--fs-md);
  color: var(--text-dim);
  max-width: 560px;
  margin-bottom: var(--sp-5);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--sp-6);
}
.hero-stat .num {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--gold-light);
  display: block;
}
.hero-stat .label {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  margin-top: 2px;
}

.scroll-cue {
  position: absolute;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-mute);
  font-size: var(--fs-xs);
  animation: bob 2.4s ease-in-out infinite;
}
.scroll-cue svg { width: 18px; height: 18px; }
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* ==========================================================================
   Marquee strip (client / work types)
   ========================================================================== */
.strip {
  border-block: 1px solid var(--border);
  background: var(--bg-alt);
  padding-block: var(--sp-3);
  overflow: hidden;
}
.strip-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: max-content;
  animation: marquee 26s linear infinite;
}
.strip:hover .strip-inner { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}
@media (prefers-reduced-motion: reduce) { .strip-inner { animation: none; } }
.strip-inner span {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-mute);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.strip-inner span::after {
  content: "•";
  color: var(--gold-dark);
  margin-inline-start: var(--sp-6);
}

/* ==========================================================================
   Services (bento grid)
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-3);
}
.service-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-4);
  grid-column: span 3;
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.service-card:nth-child(1) { grid-column: span 4; min-height: 340px; }
.service-card:nth-child(2) { grid-column: span 2; }
.service-card:nth-child(3) { grid-column: span 2; }
.service-card:nth-child(4) { grid-column: span 4; }
.service-card:nth-child(5) { grid-column: span 6; min-height: 220px; }

.service-card:hover { transform: translateY(-4px); border-color: rgba(212,175,55,0.4); }
.service-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 900ms var(--ease);
}
.service-card:hover img { transform: scale(1.06); }
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0.15) 0%, rgba(10,10,11,0.92) 88%);
  z-index: 1;
}
.service-icon {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--gold-soft);
  border: 1px solid rgba(212,175,55,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
  color: var(--gold-light);
}
.service-icon svg { width: 24px; height: 24px; }
.service-card h3 {
  position: relative;
  z-index: 2;
  font-size: var(--fs-lg);
  font-weight: 800;
  margin-bottom: 6px;
}
.service-card p {
  position: relative;
  z-index: 2;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  max-width: 46ch;
}

/* ==========================================================================
   Process
   ========================================================================== */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.process-step {
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  position: relative;
}
.process-step .step-num {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  margin-bottom: var(--sp-2);
  display: block;
}
.process-step h4 { font-size: var(--fs-md); font-weight: 700; margin-bottom: 6px; }
.process-step p { color: var(--text-dim); font-size: var(--fs-sm); }

/* ==========================================================================
   Gallery
   ========================================================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.filter-chip {
  padding: 0.55rem 1.15rem;
  min-height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: all var(--dur-fast) var(--ease);
}
.filter-chip:hover { border-color: var(--gold); color: var(--text); }
.filter-chip.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #14110a;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  grid-auto-flow: dense;
}
.gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  grid-column: span 1;
  transition: transform var(--dur-fast) var(--ease);
}
.gallery-item.wide { grid-column: span 2; }
.gallery-item.tall { grid-row: span 2; aspect-ratio: auto; }
.gallery-item img, .gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.gallery-item:hover img, .gallery-item:hover video { transform: scale(1.08); }
.gallery-item .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8,8,9,0.9) 100%);
  display: flex;
  align-items: flex-end;
  padding: var(--sp-3);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.gallery-item:hover .overlay,
.gallery-item:focus-visible .overlay { opacity: 1; }
.gallery-item .overlay span {
  font-size: var(--fs-sm);
  font-weight: 700;
}
.play-badge {
  position: absolute;
  top: var(--sp-2);
  inset-inline-end: var(--sp-2);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(10,10,11,0.65);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
}
.play-badge svg { width: 16px; height: 16px; }
.gallery-item[hidden] { display: none; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6,6,7,0.94);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease);
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-content {
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  position: relative;
}
.lightbox-content img, .lightbox-content video {
  max-width: 100%;
  max-height: 88vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.lightbox-close {
  position: absolute;
  top: -54px;
  inset-inline-end: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.lightbox-close svg { width: 20px; height: 20px; }

/* ==========================================================================
   About
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.about-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4/5;
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-media-badge {
  position: absolute;
  bottom: var(--sp-4);
  right: var(--sp-4);
  background: rgba(10,10,11,0.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.about-media-badge .num { font-size: var(--fs-xl); font-weight: 800; color: var(--gold-light); }
.about-media-badge .txt { font-size: var(--fs-xs); color: var(--text-dim); max-width: 12ch; }

.value-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.value-item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.value-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--gold-soft);
  border: 1px solid rgba(212,175,55,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
}
.value-icon svg { width: 20px; height: 20px; }
.value-item h4 { font-size: var(--fs-base); font-weight: 700; margin-bottom: 2px; }
.value-item p { color: var(--text-dim); font-size: var(--fs-sm); }

/* ==========================================================================
   Contact / Quote
   ========================================================================== */
.contact-section {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--sp-7);
}
.contact-info-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.contact-info-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.contact-info-item:hover { border-color: var(--gold); transform: translateX(-3px); }
.contact-info-item .value-icon { background: rgba(212,175,55,0.14); }
.contact-info-item .lbl { font-size: var(--fs-xs); color: var(--text-mute); }
.contact-info-item .val { font-weight: 700; font-size: var(--fs-base); }

.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-dim); }
.field .req { color: var(--gold-light); margin-inline-start: 2px; }
.field input,
.field select,
.field textarea {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  color: var(--text);
  font-size: var(--fs-base);
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.18);
}
.field small.hint { color: var(--text-mute); font-size: var(--fs-xs); }
.field small.error {
  color: var(--danger);
  font-size: var(--fs-xs);
  display: none;
}
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: var(--danger); }
.field.invalid small.error { display: block; }

.form-submit-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  flex-wrap: wrap;
}
.form-status {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.form-status.success { color: var(--success); }
.form-status.error { color: var(--danger); }

/* ==========================================================================
   Legal pages (accessibility statement / privacy policy)
   ========================================================================== */
.legal-page {
  padding-top: calc(var(--sp-8) + 4rem);
  padding-bottom: var(--sp-8);
}
.legal-content {
  max-width: 760px;
  margin-inline: auto;
}
.legal-content h1 {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, var(--fs-2xl));
  font-weight: 800;
  margin-bottom: var(--sp-2);
}
.legal-updated {
  color: var(--text-mute);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-6);
}
.legal-content h2 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--gold-light);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}
.legal-content p {
  color: var(--text-dim);
  margin-bottom: var(--sp-3);
  max-width: 68ch;
}
.legal-content ul {
  display: grid;
  gap: 10px;
  margin-bottom: var(--sp-3);
  padding-inline-start: 1.4rem;
  list-style: disc;
}
.legal-content ul li {
  color: var(--text-dim);
}
.legal-content a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.legal-contact-box {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.legal-contact-box h3 { font-size: var(--fs-md); font-weight: 700; margin-bottom: var(--sp-2); }
.legal-contact-box .contact-info-list { margin-top: var(--sp-3); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--sp-7) var(--sp-5);
  background: var(--bg);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr 1fr 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.footer-brand img { height: 56px; border-radius: 6px; margin-bottom: var(--sp-3); }
.footer-brand p { color: var(--text-dim); font-size: var(--fs-sm); max-width: 34ch; }
.footer-col h5 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: var(--sp-3);
  letter-spacing: 0.02em;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a, .footer-col span {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  transition: color var(--dur-fast) var(--ease);
}
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-mute);
}

/* ==========================================================================
   Accessibility widget
   The statement page is still linked from every footer, but the home page is
   ~9,800px tall — reaching it meant scrolling the whole site. This button is
   one click away from anywhere, and now opens a real in-page toolbar instead
   of only linking out to the statement.
   ========================================================================== */
.a11y-float {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;
  z-index: 210;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(23, 22, 26, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.55);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.a11y-float svg { width: 27px; height: 27px; }
.a11y-float:hover,
.a11y-float:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold-light);
}
.a11y-float[aria-expanded="true"] { border-color: var(--gold-light); color: var(--gold-light); box-shadow: 0 0 0 3px var(--gold-soft), 0 8px 22px rgba(0, 0, 0, 0.45); }
@media (max-width: 640px) {
  .a11y-float { width: 46px; height: 46px; bottom: 18px; inset-inline-end: 16px; }
  .a11y-float svg { width: 24px; height: 24px; }
}

.a11y-panel {
  position: fixed;
  bottom: 86px;
  inset-inline-end: 24px;
  z-index: 200;
  width: 328px;
  max-width: calc(100vw - 32px);
  max-height: min(640px, calc(100vh - 110px));
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.97);
  transform-origin: bottom left;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
[dir="rtl"] .a11y-panel { transform-origin: bottom right; }
.a11y-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
@media (max-width: 640px) {
  .a11y-panel { bottom: 74px; inset-inline-end: 16px; width: 300px; }
}

.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.a11y-panel-header h2 { font-size: var(--fs-md); font-weight: 700; margin: 0; }
.a11y-panel-close {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.a11y-panel-close:hover, .a11y-panel-close:focus-visible { color: var(--gold-light); border-color: var(--gold); }
.a11y-panel-close svg { width: 16px; height: 16px; }

.a11y-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
}
.a11y-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--sp-2) 4px;
  min-height: 74px;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.a11y-item svg { width: 22px; height: 22px; }
.a11y-item .a11y-item-glyph { font-size: var(--fs-md); font-weight: 800; line-height: 1; }
.a11y-item span { font-size: 0.7rem; font-weight: 600; line-height: 1.2; }
.a11y-item:hover, .a11y-item:focus-visible { color: var(--text); border-color: var(--gold-dark); }
.a11y-item.is-active {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold-light);
}

.a11y-panel-footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--border);
}
.a11y-reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: border-color var(--dur-fast) var(--ease);
}
.a11y-reset-btn:hover, .a11y-reset-btn:focus-visible { border-color: var(--gold); color: var(--gold-light); }
.a11y-reset-btn svg { width: 16px; height: 16px; }
.a11y-panel-links { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.a11y-panel-links a { font-size: var(--fs-xs); color: var(--text-mute); text-decoration: underline; text-underline-offset: 2px; }
.a11y-panel-links a:hover, .a11y-panel-links a:focus-visible { color: var(--gold-light); }

/* ---------- Effects the widget toggles on the page itself ---------- */
html.a11y-readable-font, html.a11y-readable-font body,
html.a11y-readable-font * {
  font-family: Arial, "Segoe UI", Tahoma, sans-serif !important;
  letter-spacing: 0.01em;
}
html.a11y-links a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  outline: 1px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}
html.a11y-headings h1, html.a11y-headings h2, html.a11y-headings h3,
html.a11y-headings h4, html.a11y-headings h5, html.a11y-headings h6 {
  outline: 2px dashed var(--gold) !important;
  outline-offset: 4px;
  background: var(--gold-soft) !important;
  border-radius: 4px;
}
html.a11y-stop-anim, html.a11y-stop-anim *, html.a11y-stop-anim *::before, html.a11y-stop-anim *::after {
  animation-play-state: paused !important;
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
html.a11y-big-cursor, html.a11y-big-cursor * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24"><path d="M3 2l7.07 18.97 2.51-7.39 7.39-2.51z" fill="%23ffe14d" stroke="%23111" stroke-width="1.5" stroke-linejoin="round"/></svg>') 4 4, auto !important;
}
html.a11y-strong-focus *:focus {
  outline: 3px solid var(--gold-light) !important;
  outline-offset: 3px !important;
}

html[data-a11y-color="contrast"] { filter: contrast(1.35) brightness(1.05); }
html[data-a11y-color="bw"] * {
  background-color: #000 !important;
  background-image: none !important;
  color: #ffe600 !important;
  border-color: #ffe600 !important;
}
html[data-a11y-color="bw"] img, html[data-a11y-color="bw"] video, html[data-a11y-color="bw"] canvas {
  filter: grayscale(1) contrast(1.2);
}
html[data-a11y-color="invert"] { filter: invert(1) hue-rotate(180deg); }
html[data-a11y-color="invert"] img, html[data-a11y-color="invert"] video, html[data-a11y-color="invert"] canvas {
  filter: invert(1) hue-rotate(180deg);
}
html[data-a11y-color="grayscale"] { filter: grayscale(1); }
html[data-a11y-color="sepia"] { filter: sepia(0.85); }

/* ==========================================================================
   WhatsApp floating button
   ========================================================================== */
.wa-float {
  position: fixed;
  bottom: 24px;
  inset-inline-start: 24px;
  z-index: 90;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /* the official mark is green on transparent, so it needs a light disc
     behind it — on the brand green it would simply disappear */
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.4);
  transition: transform var(--dur-fast) var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float img {
  width: 38px;
  height: 38px;
  display: block;
}
/* The pulsing ring was removed at the owner's request — the button sits still.
   The element is kept in the markup but draws nothing. */
.wa-pulse { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 460px; margin-inline: auto; }
  .contact-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .header-phone span.txt { display: none; }
  .service-card,
  .service-card:nth-child(1),
  .service-card:nth-child(2),
  .service-card:nth-child(3),
  .service-card:nth-child(4),
  .service-card:nth-child(5) { grid-column: span 6; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 640px) {
  :root { --sp-8: 4rem; --sp-9: 5rem; }
  .container { padding-inline: var(--sp-3); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item.wide { grid-column: span 2; }
  .form-row { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1 1 auto; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .about-media-badge { position: static; margin-top: var(--sp-3); }
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(8,8,9,0.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease);
}
.mobile-nav.open { opacity: 1; visibility: visible; }
.mobile-nav a { font-size: var(--fs-xl); font-weight: 700; }
.mobile-nav .btn { margin-top: var(--sp-3); }