/* ==========================================================================
   Koha Service — Section Layouts
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* HERO                                                                    */
/* ---------------------------------------------------------------------- */
/* The hero is deliberately capped to one viewport (min-height, not a
   larger fixed value) with every internal gap below built from vh-aware
   clamp()s — the whole badge → title → sub → actions → meta stack is
   sized to fit inside that single screen on first load, so visitors see
   the complete hero without having to scroll first. See the matching
   clamp()s on .hero-content / .hero-badge / .hero-sub / .hero-actions /
   .hero-meta below, plus the max-height fallback further down for very
   short viewports (small phones, landscape). */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--c-black-950);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-media video,
.hero-media .hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero-media .hero-slide {
  opacity: 0;
  transform: scale(1.12);
  animation: kenBurns 16s ease-in-out infinite;
  animation-play-state: paused;
  /* Cinematic dissolve between slides instead of a hard cut. */
  transition: opacity 2.2s var(--ease-in-out-cubic);
}
/* Ken Burns only actually runs while the hero is on-screen (see main.js
   initHeroPauseOffscreen) — an infinite filtered CSS animation still costs
   compositing time every frame even when scrolled out of the viewport. */
.hero.is-in-view .hero-media .hero-slide { animation-play-state: running; }
/* Before JS runs (or if it fails to load), default to running so the
   hero still animates on first paint. */
.hero:not(.js-hero-managed) .hero-media .hero-slide { animation-play-state: running; }
.hero-media .hero-slide.is-active { opacity: 1; }
.hero-media .hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-media .hero-slide:nth-child(2) { animation-delay: 8s; }

@keyframes kenBurns {
  0% { transform: scale(1.12) translate(0, 0); }
  50% { transform: scale(1.22) translate(-1.5%, -1%); }
  100% { transform: scale(1.12) translate(0, 0); }
}

.hero-media video { filter: saturate(0.85) contrast(1.05) brightness(0.9); }
.hero-media .hero-slide { filter: grayscale(0.35) sepia(0.18) saturate(1.3) brightness(0.62) contrast(1.12); }

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    var(--grad-dark-veil),
    radial-gradient(ellipse at 20% 15%, rgba(212,175,55,0.14), transparent 55%),
    linear-gradient(120deg, rgba(5,5,5,0.55), rgba(5,5,5,0.25) 40%, rgba(5,5,5,0.75));
}
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Slow diagonal light sweep — a soft gold beam that glides across the
   hero every ~11s, like a light catching brushed metal. Compositor-only
   (transform + opacity), so it's effectively free while scrolling. */
.hero-light-sweep {
  position: absolute;
  inset: -20% -60%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 42%,
    rgba(240, 215, 137, 0.05) 47%,
    rgba(212, 175, 55, 0.11) 50%,
    rgba(240, 215, 137, 0.05) 53%,
    transparent 58%);
  transform: translateX(-30%);
  animation: heroLightSweep 11s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes heroLightSweep {
  0%, 100% { transform: translateX(-35%); }
  50% { transform: translateX(35%); }
}

/* Ambient gold glow blobs — drifting depth behind the copy. */
.hero-glow-a { top: -10%; left: -6%; width: 46vw; height: 46vw; z-index: 1; animation-duration: 16s; }
.hero-glow-b { bottom: -18%; right: -8%; width: 38vw; height: 38vw; z-index: 1; animation-duration: 20s; animation-delay: -6s; }

/* Floating dust motes for atmosphere — pure transform/opacity keyframes. */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.hero-particle {
  position: absolute;
  bottom: -5%;
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: var(--color-accent-soft);
  opacity: 0;
  animation: heroParticleDrift var(--dur, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
  box-shadow: 0 0 6px 1px rgba(212, 175, 55, 0.45);
}
@keyframes heroParticleDrift {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: 0.55; }
  92%  { opacity: 0.35; }
  100% { transform: translateY(-105vh) translateX(var(--drift, 30px)); opacity: 0; }
}

/* A touch of glow on the gold headline word for a "catching light" feel. */
.hero-title .text-gold {
  text-shadow: 0 0 28px rgba(212, 175, 55, 0.35), 0 0 4px rgba(240, 215, 137, 0.25);
}

/* ---------------------------------------------------------------------- */
/* PAGE HERO — compact banner used at the top of standalone pages         */
/* (About / Services / Contact / legal pages)                             */
/* ---------------------------------------------------------------------- */
.page-hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-black-950);
}
.page-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: grayscale(0.4) sepia(0.16) saturate(1.3) brightness(0.55) contrast(1.1);
  transform: scale(1.08);
  animation: pageHeroZoom 18s ease-in-out infinite alternate;
}
@keyframes pageHeroZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1.16); }
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    var(--grad-dark-veil),
    radial-gradient(ellipse at 15% 10%, rgba(212,175,55,0.16), transparent 55%),
    linear-gradient(120deg, rgba(5,5,5,0.6), rgba(5,5,5,0.3) 45%, rgba(5,5,5,0.8));
}
.page-hero-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page-hero-content {
  position: relative;
  z-index: 3;
  /* padding-block only — see the matching comment on .hero-content;
     this element also carries .container and must not zero out its
     padding-inline (the left/right gutter), or the banner text on
     about.php/services.php/contact.php sits flush against the screen
     edges on mobile. */
  padding-block: calc(var(--space-3xl) + 3rem) var(--space-xl);
  width: 100%;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  color: var(--color-text-dim);
  margin-bottom: var(--space-md);
}
.breadcrumb a { color: var(--color-text-muted); transition: color var(--dur-fast) var(--ease-out-quart); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb-sep { display: inline-flex; width: 12px; height: 12px; opacity: 0.5; }
.breadcrumb-sep svg { width: 100%; height: 100%; }
.breadcrumb [aria-current] { color: var(--color-accent-soft); }

.page-hero-title {
  /* Dedicated (smaller) clamp instead of the shared --fs-h1 — the
     latter is also used by .cta-band h2 and shouldn't shrink there.
     Sized down per request so the banner titles on about/services/
     contact read a bit less heavy. */
  font-size: clamp(2.1rem, 2vw + 1.5rem, 4rem);
  max-width: 22ch;
}
.page-hero-lead {
  margin-top: var(--space-md);
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
  max-width: 56ch;
}

@media (max-width: 767px) {
  .page-hero { min-height: 40vh; }
  .page-hero-content { padding-top: calc(var(--space-2xl) + 3rem); }
}

.hero-content {
  position: relative;
  z-index: 3;
  /* padding-block only — this element also carries .container, which
     already sets padding-inline (the left/right gutter). A shorthand
     `padding: Y 0 Z` here would zero that out and pin the hero text
     flush to the screen edges, which is invisible on wide desktop
     viewports (the container's own max-width + auto-margin centering
     happens to fake a similar-looking gap) but very visible on mobile,
     where the container has no side margin to fall back on. */
  /* vh-aware clamps (not fixed rem values) so this shrinks on short
     viewports instead of pushing the hero past 100vh — the top value
     only needs to clear the fixed header (~90px). */
  padding-block: clamp(5.5rem, 14vh, 7rem) clamp(1.5rem, 5vh, 2.5rem);
  width: 100%;
}
/* .hero-content-inner is the target of the desktop-only mouse-parallax
   tilt (main.js → initHeroParallax) — kept as its own nested element so
   that effect never has to share a `transform` with anything else on
   the outer .hero-content. */
.hero-content-inner {
  will-change: transform;
}

.hero-badge {
  margin-bottom: clamp(0.85rem, 2vh, var(--space-md));
}
/* Keeps the badge on one line on narrow phones instead of wrapping to
   two — a wrapped badge was one of the things quietly inflating the
   hero's total height past one screen. */
@media (max-width: 420px) {
  .hero-badge-region { display: none; }
}

.hero-title {
  font-size: clamp(1.85rem, 2.6vw + 1.5rem, 5.5rem);
  line-height: var(--lh-tight);
  max-width: none;
  overflow: visible;
  color: var(--color-text);
  white-space: nowrap;
}
.hero-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  padding-right: 0.15em;
  white-space: nowrap;
}
.hero-title .line span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

.hero-cycle {
  margin-top: clamp(0.5rem, 1.5vh, var(--space-sm));
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 0.5vw + 1.05rem, 1.75rem);
  font-weight: 700;
  color: var(--color-accent);
  overflow: hidden;
}
.hero-cycle-inner {
  position: relative;
  display: block;
  height: 1.7em;
}
.hero-cycle-item {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.55s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
  font-weight: 700;
  white-space: nowrap;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 28px rgba(212, 175, 55, 0.35), 0 0 4px rgba(240, 215, 137, 0.25);
}
.hero-cycle-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hero-cycle-item.is-past {
  opacity: 0;
  transform: translateY(100%);
}

.hero-sub-check {
  display: inline-block;
  width: 1em;
  height: 1em;
  color: var(--color-accent);
  vertical-align: -0.15em;
  margin-right: 0.15em;
  stroke-width: 2.4;
}

.hero-sub {
  margin-top: clamp(0.75rem, 2vh, var(--space-md));
  /* A touch smaller than the shared --fs-lead (used only here) — extra
     safety margin so the hero reliably fits one screen on real devices,
     while staying comfortably readable. */
  font-size: clamp(0.95rem, 0.3vw + 0.88rem, 1.2rem);
  color: var(--color-text-muted);
  max-width: 46ch;
}

.hero-actions {
  margin-top: clamp(1rem, 3vh, var(--space-lg));
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.hero-meta {
  margin-top: clamp(1rem, 3vh, var(--space-lg));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(0.75rem, 2.5vh, var(--space-lg));
  max-width: 720px;
  border-top: 1px solid var(--color-border);
  padding-top: clamp(0.75rem, 2vh, var(--space-md));
}
.hero-meta-item .num {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 1.5vw, 1.9rem);
  color: var(--color-accent);
}
.hero-meta-item .label {
  font-size: var(--fs-small);
  color: var(--color-text-dim);
  margin-top: 0.2rem;
}

.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: var(--space-md);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text-dim);
  font-size: 0.7rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.scroll-indicator .mouse {
  width: 24px; height: 38px;
  border-radius: 14px;
  border: 1px solid var(--color-border-strong);
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.scroll-indicator .mouse .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 0; transform: translateY(12px); }
}

/* A 2-column stat grid is more compact (fewer rows) than the auto-fit
   default, which keeps the hero's total content height predictable on
   narrow phones — part of fitting the whole hero in one screen. */
@media (max-width: 640px) {
  .hero-meta { grid-template-columns: repeat(2, 1fr); }
}
/* On the narrowest phones the intro paragraph wraps to a 3rd line,
   which is enough on its own to push the hero past one screen — cap it
   at two lines there. */
@media (max-width: 340px) {
  .hero-sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

/* Extra compaction for short viewports (small phones, landscape) so the
   full hero — badge through scroll indicator — stays inside one screen
   without needing to scroll first. */
@media (max-height: 860px) {
  .hero-content { padding-block: clamp(4.5rem, 10vh, 5.5rem) 1rem; }
  .hero-meta { margin-top: 0.75rem; padding-top: 0.75rem; gap: 0.6rem; }
  /* .scroll-indicator is absolutely positioned against the bottom of
     .hero, so it doesn't reserve flow space the way a normal sibling
     would — on shorter viewports the (still visible) stat row ends up
     sitting right where the indicator is, so it's hidden here rather
     than only in the tier below where the stat row itself disappears. */
  .scroll-indicator { display: none; }
}
@media (max-height: 700px) {
  .hero-meta { display: none; }
  .scroll-indicator { display: none; }
}
/* Very short viewports (rotated phones etc.) — the stat row and scroll
   hint are already hidden above; trim the remaining stack (badge,
   title, intro, buttons) as far as it'll go so it still clears the
   fixed header and fits in one screen. */
@media (max-height: 480px) {
  .hero-content { padding-block: 5.25rem 0.75rem; }
  .hero-badge { display: none; }
  .hero-title { font-size: clamp(1.5rem, 7vh, 2.4rem); }
  .hero-sub {
    margin-top: 0.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .hero-actions { margin-top: 0.6rem; gap: 0.5rem; }
}

/* ---------------------------------------------------------------------- */
/* ABOUT / INTRO                                                          */
/* ---------------------------------------------------------------------- */
.about {
  background: var(--color-bg);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-xl); }
}

.about-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  isolation: isolate;
}
.about-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.55) sepia(0.15) saturate(1.4) contrast(1.08) brightness(0.92);
  transition: filter 0.6s var(--ease-out-quart), transform 1.2s var(--ease-out-quart);
}
.about-visual:hover img { filter: grayscale(0.15) sepia(0.1) saturate(1.2) contrast(1.05) brightness(0.98); transform: scale(1.04); }
.about-visual::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5,5,5,0.75) 100%);
  z-index: 1;
  pointer-events: none;
}
.about-visual-caption {
  position: absolute;
  left: var(--space-md); bottom: var(--space-md); right: var(--space-md);
  z-index: 2;
  font-size: var(--fs-small);
  color: var(--color-text);
}
.about-visual-caption strong { color: var(--color-accent); display: block; font-family: var(--font-heading); font-size: 1.4rem; }

.about-floating-card {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  z-index: 3;
  max-width: 210px;
}
@media (max-width: 640px) { .about-floating-card { position: static; margin-top: -2.5rem; margin-inline: var(--space-sm); } }
.about-floating-card .num { font-family: var(--font-heading); font-size: 2.2rem; color: var(--color-accent); }
.about-floating-card .label { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: 0.2rem; }

.about-body p + p { margin-top: var(--space-md); }
.about-list {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-md);
}
.about-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.about-list svg { color: var(--color-accent); flex-shrink: 0; margin-top: 3px; }

/* ---------------------------------------------------------------------- */
/* SERVICES                                                                */
/* ---------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 700px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card { display: flex; flex-direction: column; height: 100%; }
.service-card .tag-number { margin-bottom: var(--space-md); display: block; }
.service-card h3 { font-size: var(--fs-h4); margin-bottom: 0.6rem; }
.service-card p { color: var(--color-text-muted); font-size: 0.94rem; flex-grow: 1; }
.service-card .service-link {
  margin-top: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  color: var(--color-accent-soft);
  font-weight: 600;
}
.service-card .service-link svg { transition: transform var(--dur-fast) var(--ease-out-quart); }
.service-card:hover .service-link svg { transform: translateX(4px); }

/* ---------------------------------------------------------------------- */
/* FAQ — native <details>/<summary>, so it's fully keyboard/screen-reader */
/* accessible with zero JavaScript.                                       */
/* ---------------------------------------------------------------------- */
.faq-list {
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}
.faq-item[open],
.faq-item:hover { border-color: var(--color-border-strong); }
.faq-question {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 1.25rem 1.5rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ''; }
.faq-question .faq-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  transition: transform var(--dur-base) var(--ease-out-quart), background var(--dur-base) var(--ease-out-quart), color var(--dur-base) var(--ease-out-quart);
}
.faq-item[open] .faq-question .faq-icon {
  transform: rotate(45deg);
  background: var(--grad-gold);
  color: var(--c-black-950);
}
.faq-answer {
  padding: 0 1.5rem 1.35rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: var(--lh-body);
}

/* ---------------------------------------------------------------------- */
/* STATS / WHY CHOOSE US                                                  */
/* ---------------------------------------------------------------------- */
.stats {
  position: relative;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-md);
}
@media (min-width: 800px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-item { text-align: left; }
.stat-num {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 4rem);
  color: var(--color-accent);
  display: flex;
  align-items: baseline;
  gap: 0.15em;
}
.stat-label {
  margin-top: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  max-width: 22ch;
}

.why-grid {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 900px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why-item { padding: var(--space-md) 0; border-top: 1px solid var(--color-border); }
.why-item h4 { font-size: 1.05rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.6rem; }
.why-item h4 svg { color: var(--color-accent); }
.why-item p { color: var(--color-text-muted); font-size: 0.92rem; }

/* ---------------------------------------------------------------------- */
/* WORK / FLEET SHOWCASE                                                  */
/* ---------------------------------------------------------------------- */
.work-list { display: flex; flex-direction: column; gap: var(--space-md); }
.work-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
@media (min-width: 800px) { .work-item { grid-template-columns: 1.1fr 1fr; } }
.work-item:nth-child(even) .work-media { order: 2; }

.work-media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.work-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.5) sepia(0.12) saturate(1.3) contrast(1.08) brightness(0.85);
  transform: scale(1.01);
  transition: transform 1s var(--ease-out-quart), filter 0.6s var(--ease-out-quart);
  will-change: transform; /* smooths the hover scale/filter transition */
}
.work-item:hover .work-media img { transform: scale(1.08); filter: grayscale(0.1) sepia(0.08) saturate(1.15) contrast(1.05) brightness(0.95); }
.work-media::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 60%, rgba(5,5,5,0.6)); }

.work-info { padding: var(--space-lg); display: flex; flex-direction: column; justify-content: center; background: var(--color-surface); }
.work-info .tag-number { display: block; margin-bottom: var(--space-sm); }
.work-info h3 { font-size: var(--fs-h3); margin-bottom: var(--space-sm); }
.work-info p { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.work-info .work-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.work-info .work-tags span {
  font-size: 0.75rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-text-dim);
}

/* ---------------------------------------------------------------------- */
/* PROCESS                                                                 */
/* ---------------------------------------------------------------------- */
.process-list { position: relative; margin-top: var(--space-lg); }
.process-list::before {
  content: '';
  position: absolute;
  left: 27px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--color-border-strong) 10%, var(--color-border-strong) 90%, transparent);
}
@media (min-width: 700px) { .process-list::before { left: 39px; } }

.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-md);
  padding-block: var(--space-md);
}
@media (min-width: 700px) { .process-step { grid-template-columns: 80px 1fr; gap: var(--space-lg); } }

.process-index {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  color: var(--color-accent);
  font-size: 1.1rem;
  z-index: 1;
  transition: background var(--dur-base) var(--ease-out-quart), color var(--dur-base) var(--ease-out-quart);
}
@media (min-width: 700px) { .process-index { width: 80px; height: 80px; font-size: 1.4rem; } }
.process-step:hover .process-index { background: var(--grad-gold); color: var(--c-black-950); }

.process-body h3 { font-size: var(--fs-h4); margin-bottom: 0.4rem; }
.process-body p { color: var(--color-text-muted); max-width: 60ch; }

/* ---------------------------------------------------------------------- */
/* TESTIMONIALS                                                            */
/* ---------------------------------------------------------------------- */
.testimonials { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); overflow: hidden; }

/* Continuous auto-scrolling marquee — two identical copies of the track
   sit side by side and translateX animates exactly -50%, so the loop
   point is invisible. Paused on hover/focus and for reduced-motion. */
.testimonials-marquee {
  overflow: hidden;
  margin-top: var(--space-xl);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.testimonial-track {
  display: flex;
  gap: var(--space-md);
  width: max-content;
  padding-bottom: var(--space-sm);
  animation: testimonialMarquee 130s linear infinite;
}
.testimonials-marquee:hover .testimonial-track,
.testimonials-marquee:focus-within .testimonial-track {
  animation-play-state: paused;
}
@keyframes testimonialMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.testimonial-card {
  flex: 0 0 380px;
  width: 380px;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
}
.testimonial-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.testimonial-stars { color: var(--color-accent); display: flex; gap: 0.2rem; }
.testimonial-stars svg { width: 16px; height: 16px; fill: var(--color-accent); stroke: var(--color-accent); }
.testimonial-google-badge { display: inline-flex; opacity: 0.85; }
.testimonial-quote {
  font-size: 0.98rem;
  line-height: 1.65;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.testimonial-author { margin-top: var(--space-lg); display: flex; align-items: center; gap: 0.9rem; }
.testimonial-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--grad-gold);
  color: var(--c-black-950);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700;
  flex-shrink: 0;
}
.testimonial-author .name { font-weight: 600; font-size: 0.92rem; }
.testimonial-author .role { font-size: 0.8rem; color: var(--color-text-dim); }

.testimonial-cta { display: flex; justify-content: center; margin-top: var(--space-xl); }

@media (max-width: 600px) {
  .testimonial-card { flex-basis: 300px; width: 300px; }
}

/* ---------------------------------------------------------------------- */
/* CTA BAND                                                                */
/* ---------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-inline: var(--container-pad);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  isolation: isolate;
}
.cta-band-media { position: absolute; inset: 0; z-index: -2; }
.cta-band-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.6) sepia(0.15) brightness(0.45) contrast(1.1); }
.cta-band::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 50% 20%, rgba(212,175,55,0.22), transparent 60%), rgba(5,5,5,0.55);
}
.cta-band h2 { font-size: var(--fs-h1); max-width: 18ch; margin-inline: auto; }
.cta-band p { margin-top: var(--space-md); color: var(--color-text-muted); max-width: 50ch; margin-inline: auto; font-size: var(--fs-lead); }
.cta-band .hero-actions { justify-content: center; margin-top: var(--space-lg); }

/* ---------------------------------------------------------------------- */
/* CONTACT                                                                 */
/* ---------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}
@media (min-width: 950px) { .contact-grid { grid-template-columns: 0.9fr 1.1fr; } }

.contact-info-list { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.contact-info-item { display: flex; align-items: flex-start; gap: 1rem; }
.contact-info-item .icon-badge { margin-bottom: 0; flex-shrink: 0; width: 46px; height: 46px; }
.contact-info-item .icon-badge svg { width: 20px; height: 20px; }
.contact-info-item h4 { font-size: 0.95rem; margin-bottom: 0.25rem; }
.contact-info-item p, .contact-info-item a { color: var(--color-text-muted); font-size: 0.92rem; }
.contact-info-item a:hover { color: var(--color-accent-soft); }

.social-row { display: flex; gap: 0.6rem; margin-top: var(--space-lg); }
.social-row a {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.social-row a:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-3px); }

.contact-form-wrap { padding: var(--space-lg); border-radius: var(--radius-lg); }
.contact-map { margin-top: var(--space-2xl); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); aspect-ratio: 21/8; }
.contact-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.92) contrast(0.9); }

/* ---------------------------------------------------------------------- */
/* FOOTER                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer {
  background: var(--c-black-900);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-2xl) var(--space-lg);
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
}
@media (min-width: 800px) { .footer-top { grid-template-columns: 1.3fr repeat(3, 1fr); } }
.footer-brand p { color: var(--color-text-muted); margin-top: var(--space-md); max-width: 34ch; font-size: 0.92rem; }
.footer-col h5 { font-size: 0.85rem; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-dim); margin-bottom: var(--space-md); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a { color: var(--color-text-muted); font-size: 0.92rem; transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--color-accent); }
.footer-bottom {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--color-text-dim);
}
.footer-bottom-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-bottom-links a:hover { color: var(--color-accent); }
.footer-bottom-text { display: flex; flex-direction: column; gap: 0.3rem; }
.footer-credit { color: var(--color-text-dim); }
.footer-credit a { color: var(--color-text-muted); transition: color var(--dur-fast); }
.footer-credit a:hover { color: var(--color-accent); }