/*
Theme Name: ArtLand
Theme URI: https://artland3d.com
Author: ArtLand Design
Author URI: https://artland3d.com
Description: Custom theme for ArtLand Design — a 3D visualization studio. Dark, gold-accented marketing theme with a manageable home page, a built-in portfolio, and styled Quform pages.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: artland
*/

/* ============================================================
   The design system + all component styles below are the
   ArtLand static-theme stylesheet (_source/style.css), used
   verbatim. General-template styles (blog, page, single, etc.)
   live in assets/css/general.css.
   ============================================================ */

/* =========================================================
   ArtLand Design — Landing Page Styles
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --bg:           #0a0a0a;
  --bg-elev:      #111111;
  --bg-card:      #141414;
  --bg-card-2:    #181818;
  --gold:         #d4a437;
  --gold-soft:    #b8901f;
  --gold-bright:  #e7b943;
  --text:         #ffffff;
  --text-dim:     #a5a5a5;
  --text-muted:   #6b6b6b;
  --border:       rgba(255, 255, 255, 0.08);
  --border-strong:rgba(255, 255, 255, 0.16);

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;

  --container: 1280px;
  --gutter:    24px;
  --section-y: 44px;

  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
p  { margin: 0; }

/* Lucide icons baseline */
[data-lucide] {
  width: 1em;
  height: 1em;
  stroke-width: 1.6;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
}
.eyebrow--center { display: block; text-align: center; }

.section-title {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  margin-top: 12px;
  color: var(--text);
}
.section-title--tight { line-height: 1.0; letter-spacing: -0.015em; }

.title-divider {
  display: block;
  width: 44px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  margin-top: 18px;
}
.section-desc {
  margin-top: 14px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.7;
  max-width: 620px;
}
.section-head--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 56px;
}
.section-head--center .section-desc { text-align: center; margin-left: auto; margin-right: auto; }

/* Centered title-divider variant (used by Our Services) */
.title-divider--center { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  --pad-y: 14px;
  --pad-x: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.btn-outline {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: transparent;
  /* Explicit per-property transitions so the lift, border, text color, bg, and
     shadow all animate smoothly together on hover (and any inherited
     `transition: all` from .btn doesn't shadow this). */
  transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    color 0.45s ease,
    background-color 0.45s ease,
    box-shadow 0.45s ease;
}
/* White sheen sweep — slides across left-to-right on hover, same idea as
   .featured-cta and the gold CTA button. */
.btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: translateX(-100%);
  transition: transform 0.8s ease;
  pointer-events: none;
}
.btn-outline:hover::before { transform: translateX(100%); }
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212, 164, 55, 0.06);
  /* !important required: in the hero, the keyframe `heroFadeUp` final state
     and any inline transform GSAP may have left would otherwise block this. */
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 30px rgba(212, 164, 55, 0.1);
}
.btn-solid {
  background: var(--gold);
  color: #0a0a0a;
  border: 1px solid var(--gold);
}
.btn-solid:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  box-shadow: 0 12px 30px -10px rgba(212, 164, 55, 0.55);
  transform: translateY(-1px);
}
.btn-lg  { --pad-y: 16px; --pad-x: 30px; }
.btn-sm  { --pad-y: 12px; --pad-x: 22px; font-size: 10.5px; }
.btn [data-lucide] { width: 14px; height: 14px; stroke-width: 2; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;                                    /* above .nav-backdrop (90) so the slide-out menu inside is never covered */
  padding: 18px 0;
  transition: padding 0.3s var(--ease), border-color 0.3s var(--ease);
  border-bottom: 1px solid transparent;
  /* Megamenu top offset — inherited by the fixed-position megamenu in the
     861–1200 range so its top edge sits at the same y as the wide-screen
     (absolute-positioned) one. Drops on .scrolled to follow the header. */
  --mm-top: 66px;
}
.site-header.scrolled { --mm-top: 56px; }
/* Scrolled-state background + blur lives on a ::before pseudo, NOT on
   .site-header itself. Putting backdrop-filter on the header would create
   a containing block for its position:fixed descendants — and that traps
   the slide-out nav at the header's height (the menu would render small). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.site-header.scrolled::before { opacity: 1; }
.site-header.scrolled { padding: 12px 0; }
/* Top-of-page scrim — soft dark gradient that anchors the nav over bright
   hero images. Visible at top-of-page (when ::before is hidden), fades out
   as soon as the scrolled background takes over. Extends ~40px below the
   header so the gradient tails off behind the hero content rather than
   ending in a hard edge. */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(100% + 48px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0) 100%);
  opacity: 1;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
  z-index: -2;
}
.site-header.scrolled::after { opacity: 0; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-mark { width: 30px; height: 30px; }
.brand--header { flex-shrink: 0; }
.brand--header .brand-logo {
  height: 44px;
  width: auto;
  max-width: none;          /* override the global `img { max-width: 100% }` reset
                               which was squishing the logo on narrow viewports */
  display: block;
  transition: height 0.3s var(--ease);
}
.site-header.scrolled .brand--header .brand-logo { height: 36px; }

.brand--footer .brand-logo {
  height: 36px;
  width: auto;
  display: block;
}
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.brand-sub {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.38em;
  color: var(--gold);
  margin-top: 3px;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 36px;
}
.primary-nav a {
  position: relative;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  /* Bright near-white so the menu is legible against bright hero images.
     Hover bumps to full --text (#fff) so the interactive delta is preserved
     even though the rest-state is already very light. */
  color: #ececec;
  padding: 6px 0;
  transition: color 0.25s var(--ease);
}
.primary-nav a:hover { color: var(--gold); }
.primary-nav a.active { color: var(--text); }
/* Underline anchored to the LEFT edge, growing rightward on hover/active.
   A soft gold box-shadow gives the bar a glow as it extends — reads as a
   light sweeping across the bottom of the link rather than a hard rule. */
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  box-shadow:
    0 0 6px rgba(212, 164, 55, 0.55),
    0 0 14px rgba(212, 164, 55, 0.30);
  transition: width 0.3s var(--ease);
  pointer-events: none;
}
.primary-nav a:hover::after,
.primary-nav a.active::after { width: 100%; }

/* ============================================================
   Mega menu — three-column dropdown anchored to nav items
   marked with .has-megamenu. Opens on hover/focus on desktop;
   collapses inline inside the slide-out mobile nav.
   ============================================================ */
.primary-nav li.has-megamenu { position: relative; }

/* Keep SERVICES + caret on a single line — they're separate inline elements
   so without this they can wrap onto two lines on narrow viewports. */
.primary-nav .has-megamenu > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Caret on the trigger label */
.primary-nav .has-megamenu > a .nav-caret {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  color: currentColor;
  opacity: 0.65;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.primary-nav .has-megamenu:hover > a .nav-caret,
.primary-nav .has-megamenu:focus-within > a .nav-caret,
.primary-nav .has-megamenu.is-open > a .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--gold);
}

/* The dropdown panel */
.primary-nav .megamenu {
  position: absolute;
  top: 100%;
  left: 0;                      /* anchor to the trigger's LEFT edge */
  transform: translateY(-8px);
  width: 760px;
  max-width: 92vw;
  margin-top: 18px;
  padding: 28px 32px;
  /* Frosted-glass panel — slight transparency + stronger blur so page
     content reads as a soft suggestion behind the menu. Subtle cool tint
     (11/13/17) keeps it from feeling like flat black. */
  background: rgba(11, 13, 17, 0.86);
  border: 1px solid rgba(212, 164, 55, 0.30);
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  box-shadow:
    0 22px 50px -14px rgba(0, 0, 0, 0.78),
    0 0 30px -8px rgba(212, 164, 55, 0.22);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: left;     /* override any inherited centering from header utility classes */
  justify-items: stretch; /* columns FILL their grid cells (default, but asserted) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 60;
  transition:
    opacity .22s var(--ease),
    transform .22s var(--ease),
    visibility 0s linear .22s;
}
.primary-nav .megamenu-col { text-align: left; width: 100%; min-width: 0; justify-self: stretch; }
/* Invisible bridge so moving the mouse from trigger to panel
   doesn't drop the hover (covers the 18px gap above the panel). */
.primary-nav .megamenu::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -22px;
  height: 22px;
}

.primary-nav li.has-megamenu:hover .megamenu,
.primary-nav li.has-megamenu:focus-within .megamenu,
.primary-nav li.has-megamenu.is-open .megamenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity .22s var(--ease),
    transform .22s var(--ease),
    visibility 0s linear 0s;
}

.megamenu-title {
  display: block;
  text-align: left;
  margin: 0 0 14px;
  padding-bottom: 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(212, 164, 55, 0.20);
}
/* Make the megamenu column heading clickable when it points at a real
   page (the hub URL like /3d-animation/ that the children sit under).
   No active-state highlight: the heading must keep looking like a category
   label regardless of whether you're currently on it. */
.megamenu-title-link {
  color: inherit;
  text-decoration: none;
  display: block;
  transition: color 0.2s var(--ease);
}
.megamenu-title-link:hover {
  color: var(--gold-bright, #f0c14b);
}
.megamenu-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* override .primary-nav ul's `align-items: center`,
                           which would otherwise center every <li> horizontally
                           in this column-direction flex container. */
  gap: 1px;
}
.megamenu-col ul a {
  position: relative;
  display: block;
  text-align: left;
  padding: 8px 10px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  /* The display font's "D" has a tight right side-bearing — at 12.5px / 500
     the gap after "3D" reads as missing. A small word-spacing nudges only
     space characters wider without disturbing letter-to-letter rhythm. */
  word-spacing: 0.1em;
  text-transform: none;
  color: var(--text-dim);
  text-decoration: none;
  border-radius: 4px;
  transition:
    color .2s var(--ease),
    background-color .2s var(--ease),
    padding-left .25s var(--ease);
}
/* Thin gold line on the left grows in on hover — replaces the messy chevron
   with a subtle indicator that doesn't clutter the inactive state. */
.megamenu-col ul a::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--gold);
  transform: translateY(-50%);
  transition: width .25s var(--ease);
}
.megamenu-col ul a:hover {
  color: var(--text);
  background: rgba(212, 164, 55, 0.04);
  padding-left: 18px;
}
.megamenu-col ul a:hover::before {
  width: 10px;
}
/* Active (current page) items inside the megamenu use the same subtle
   gold dash + brighter text as hover, instead of the heavy underline
   that .primary-nav a.active::after produces for top-level triggers. */
.megamenu-col ul a.active {
  color: var(--text);
  padding-left: 18px;
}
.megamenu-col ul a.active::before {
  width: 10px;
}
.megamenu-col ul a.active::after {
  display: none;
}

/* Intermediate viewports (above the mobile burger breakpoint but tight
   enough that the trigger-anchored 760px panel runs off the right edge).
   Switch to a viewport-centered fixed-position panel so it can't overflow. */
@media (min-width: 1025px) and (max-width: 1200px) {
  .primary-nav .megamenu {
    position: fixed;
    top: var(--mm-top, 66px);  /* matches wide-screen panel top; adapts on scroll */
    left: 50%;
    right: auto;
    width: min(760px, calc(100vw - 32px));
    max-width: none;
    transform: translate(-50%, -8px);
  }
  .primary-nav li.has-megamenu:hover .megamenu,
  .primary-nav li.has-megamenu:focus-within .megamenu,
  .primary-nav li.has-megamenu.is-open .megamenu {
    transform: translate(-50%, 0);
  }
  /* Bridge inherits the base left:0/right:0 — spans the full panel width
     so the mouse can never miss it while traveling down from SERVICES
     (the trigger is always inside the centered panel's x-range). */
}

.btn-contact {
  font-size: 10.5px;
  --pad-y: 11px;
  --pad-x: 22px;
  flex-shrink: 0;     /* don't let the header's flex layout squish or clip the button */
  white-space: nowrap;
}

.burger {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* respects mobile browser chrome */
  display: flex;
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #0a0a0a;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background-color: #0a0a0a;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.hero-bg.is-active { opacity: 1; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.30) 30%, rgba(10,10,10,0.85) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.10) 60%);
  z-index: -1;
}
.hero-inner {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(160px, 28vh, 280px);
  padding-bottom: 60px;
  min-height: inherit;
}
.hero-content {
  position: relative;
  max-width: 620px;
  padding-left: 55px;
}

/* --- Vertical nav + dots (replaces the old ::before line) --- */
.hero-nav {
  position: absolute;
  left: 0;
  top: -10px;
  bottom: -32px;
  width: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
  padding: 0;
  margin: 0;
}
.hero-nav::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  bottom: 14px;
  width: 2px;
  margin-left: -1px;
  background: var(--gold);
  opacity: 0.55;
}
.hero-nav-dot {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.25s var(--ease);
}
.hero-nav-dot::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}
.hero-nav-dot:hover { transform: scale(1.18); }
.hero-nav-dot:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.hero-nav-dot.is-active {
  background: var(--gold);
  box-shadow: 0 0 18px rgba(212, 164, 55, 0.65);
}

/* Auto-rotate progress: a gold bar that fills along the line over the slide duration.
   Geometry must match .hero-nav::before pixel-for-pixel so the two stack cleanly. */
.hero-nav-progress {
  position: absolute;
  left: 50%;
  top: 14px;
  bottom: 14px;
  width: 2px;
  margin-left: -1px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top center;
  pointer-events: none;
  z-index: 0;
  box-shadow: 0 0 10px rgba(212, 164, 55, 0.55);
}
.hero-nav-progress.is-animating {
  animation: heroProgress var(--hero-rotate-ms, 8000ms) linear forwards;
}
@keyframes heroProgress {
  to { transform: scaleY(1); }
}

/* --- Slide stack: cross-fades between titles --- */
.hero-slides {
  position: relative;
  min-height: 360px;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s var(--ease);
}
.hero-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.hero-title {
  font-size: clamp(40px, 6vw, 78px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--text);
}
.hero-title span {
  color: var(--gold);
  text-shadow:
    0 0 22px rgba(212, 164, 55, 0.28),
    0 0 55px rgba(212, 164, 55, 0.15);
}
.hero-subtitle {
  margin-top: 22px;
  font-size: 18.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 480px;
}
.hero-slide .btn { margin-top: 36px; }

.scroll-discover {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 9.5px;
  letter-spacing: 0.32em;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
}
.scroll-arrow {
  display: inline-flex;
  animation: bounce 2s infinite var(--ease);
}
.scroll-arrow [data-lucide] { width: 18px; height: 18px; stroke-width: 1.5; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(6px); opacity: 1; }
}

.play-reel {
  position: absolute;
  right: var(--gutter);
  bottom: 80px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.play-reel-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--text-dim);
  font-weight: 500;
}
.play-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gold);
  color: #0a0a0a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.play-btn:hover { transform: scale(1.07); box-shadow: 0 0 0 6px rgba(212,164,55,0.18); }

/* ============================================================
   Video modal — opened by the PLAY REEL button.
   Hosts a YouTube iframe in a centered 16:9 box with backdrop +
   close button. Reused for any data-video-id trigger.
   ============================================================ */
body.no-scroll { overflow: hidden; }

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.video-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--ease), visibility 0s linear 0s;
}
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.video-modal-inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.8),
    0 0 40px -10px rgba(212, 164, 55, 0.30);
  transform: scale(0.96);
  transition: transform .3s var(--ease);
}
.video-modal.is-open .video-modal-inner { transform: scale(1); }
.video-modal-inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-modal-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.video-modal-close:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(212, 164, 55, 0.06);
}
@media (max-width: 640px) {
  .video-modal { padding: 20px; }
  .video-modal-close { top: -40px; width: 34px; height: 34px; font-size: 19px; }
}
.play-btn [data-lucide] { width: 16px; height: 16px; stroke-width: 2.5; fill: currentColor; margin-left: 2px; }

/* hero entrance — page-load fade-up on the first slide only.
   Subsequent slide switches are handled by .hero-slide / .hero-bg transitions. */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Opacity-only variant for the hero button — using heroFadeUp on a button
   leaves it with a "filled-forwards" transform that blocks the hover lift
   from transitioning. The button still moves up on entrance via its parent
   .hero-slide's own translateY → 0 transition. */
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero-slide.is-active .hero-eyebrow,
.hero-slide.is-active .hero-title,
.hero-slide.is-active .hero-subtitle {
  animation: heroFadeUp 0.9s var(--ease) both;
}
.hero-slide.is-active .btn {
  animation: heroFadeIn 0.9s var(--ease) both;
}
.hero-slide.is-active .hero-title    { animation-delay: 0.05s; }
.hero-slide.is-active .hero-subtitle { animation-delay: 0.18s; }
.hero-slide.is-active .btn           { animation-delay: 0.30s; }

/* ---------- Featured Work ---------- */
.featured {
  padding: calc(var(--section-y) + 28px) 0 var(--section-y);
  background: var(--bg);
}
.featured-inner {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  gap: 60px;
  align-items: start;
}
.featured-intro { padding-top: 14px; }
.featured-intro .section-title { font-size: clamp(28px, 2.8vw, 38px); }
.featured-intro .section-desc { font-size: 13.5px; margin-top: 18px; }
.featured-intro .btn { margin-top: 32px; }

/* "See All Projects" pill — soft gold-bordered button with a white sheen
   that sweeps left-to-right on hover. */
.featured-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 280px;
  height: 62px;
  margin-top: 32px;
  border-radius: 16px;
  border: 1px solid rgba(212, 164, 55, 0.22);
  background: rgba(255, 255, 255, 0.015);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.45s ease,
    transform 0.45s ease,
    box-shadow 0.45s ease;
}
.featured-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}
.featured-cta:hover::before { transform: translateX(100%); }
.featured-cta:hover {
  border-color: rgba(212, 164, 55, 0.45);
  /* !important required: GSAP's scroll reveal targets `.featured-intro > *`,
     which includes this button, and leaves an inline transform behind that
     would otherwise block the hover lift. */
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 36px rgba(212, 164, 55, 0.08);
}
.featured-cta [data-lucide] { width: 18px; height: 18px; stroke-width: 2; }

.featured-grid { min-width: 0; }
/* clip-path clips horizontally at the swiper's left/right (so cards don't drift
   over the left title column when navigating) while still letting the vertical
   hover lift and outer glow render outside the strip. */
.projects-swiper {
  overflow: visible;
  clip-path: inset(-50px 0);
  padding: 8px 0;
}

/* Tall image card with overlay + category/title/footer at bottom */
.project-card {
  position: relative;
  width: 210px;
  height: 440px;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transform: translateY(0);
  /* !important required: Swiper writes inline `transition-property: transform`
     on slides, which would prevent border-color + box-shadow from animating. */
  transition:
    transform 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease !important;
}
.project-card:hover {
  /* !important required: GSAP's scroll-reveal animation leaves an inline
     transform on each card after it finishes (translate(0,0)), and inline
     styles override stylesheet rules. Without !important the hover lift is
     silently blocked by GSAP's leftover inline transform. */
  transform: translateY(-10px) !important;
  border-color: rgba(212, 164, 55, 0.25);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(212, 164, 55, 0.08);
}

.project-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.project-image img {
  width: 100%;
  height: 100%;
  /* Back to cover — fills the card with no letterbox gaps. Object-position
     biased to ~30 % from top so building façades (the meaningful detail in
     architectural shots) show instead of the middle of an empty wall. */
  object-fit: cover;
  object-position: center 30%;
  filter: brightness(0.85);
  transition: transform 1.2s ease;
}
.project-card:hover .project-image img { transform: scale(1.1); }

.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.72) 20%,
    rgba(0, 0, 0, 0.15) 55%,
    rgba(0, 0, 0, 0.55) 100%);
}
.project-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top center, rgba(212, 164, 55, 0.12), transparent 55%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.project-card:hover .project-overlay::before { opacity: 1; }

.project-content {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 22px;
  z-index: 2;
}
.project-category {
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.project-title {
  font-size: 20px;
  line-height: 1.18;
  font-weight: 600;
  margin: 0 0 20px;
  color: #f5f5f5;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.project-mini-line {
  position: relative;
  width: 50px;
  height: 2px;
  background: linear-gradient(to right, var(--gold), transparent);
}
.project-mini-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0c85d;
  box-shadow: 0 0 9px rgba(240, 200, 93, 0.8);
}
.project-arrow {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(212, 164, 55, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
.project-arrow [data-lucide] { width: 14px; height: 14px; stroke-width: 2.2; }
.project-card:hover .project-arrow {
  transform: translateX(6px);
  border-color: rgba(212, 164, 55, 0.45);
  box-shadow: 0 0 24px rgba(212, 164, 55, 0.15);
}

/* Navigation row beneath the project track */
.featured-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}
.featured-nav-btn {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(212, 164, 55, 0.18);
  background: rgba(255, 255, 255, 0.015);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition:
    border-color 0.4s var(--ease),
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.featured-nav-btn:hover {
  border-color: rgba(212, 164, 55, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(212, 164, 55, 0.08);
}
.featured-nav-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.featured-nav-btn [data-lucide] { width: 18px; height: 18px; stroke-width: 2; }
.featured-nav-btn.swiper-button-disabled { opacity: 0.4; cursor: default; }

.featured-dots {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 14px;
}
.featured-dots .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  opacity: 1;
  cursor: pointer;
  transition: all 0.4s var(--ease);
}
.featured-dots .swiper-pagination-bullet-active {
  width: 32px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--gold), #f0c85d);
  box-shadow: 0 0 14px rgba(212, 164, 55, 0.35);
}

/* ---------- Services (frosted-glass cards with numbered + hex icon) ---------- */
.services {
  padding: var(--section-y) 0;
  background: var(--bg);
}
.services-grid {
  display: grid;
  /* auto-fit + minmax = the column count steps down 5 → 4 → 3 → 2 → 1
     automatically as the viewport narrows, the moment a card would shrink
     below 220px. No media-query jumps. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.service-card {
  position: relative;
  min-height: 460px;
  border-radius: 24px;
  overflow: hidden;
  /* Solid dark bg matching the icon images so the icon edges blend cleanly
     into the card surface (no visible halo around the artwork). */
  background: #09090a;
  border: 1px solid rgba(212, 164, 55, 0.14);
  padding: 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    transform 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease;
}
/* Top-edge gold wash that gradually fades down through the card.
   Always visible at rest (now that the icons are transparent there's no
   rectangular-bounds issue), and intensifies on hover. The ellipse is
   wider than tall so the glow forms a band across the top of the card
   rather than a tight spotlight, then fades to transparent ~60 % of the
   way down — the lower half of the card stays clean dark for the title
   and copy to sit against. */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 110% 55% at top,
    rgba(212, 164, 55, 0.07) 0%,
    rgba(212, 164, 55, 0.035) 25%,
    rgba(212, 164, 55, 0.01) 45%,
    transparent 65%
  );
  opacity: 1;
  transition: background 0.5s ease;
  pointer-events: none;
}
.service-card:hover {
  transform: translateY(-10px);
  border-color: rgba(212, 164, 55, 0.28);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(212, 164, 55, 0.08);
}
/* Hover brings the wash back up to the previous rest level — same shape,
   moderate gold (the stronger pre-dial-down rest values). */
.service-card:hover::before {
  background: radial-gradient(
    ellipse 110% 55% at top,
    rgba(212, 164, 55, 0.14) 0%,
    rgba(212, 164, 55, 0.07) 25%,
    rgba(212, 164, 55, 0.02) 45%,
    transparent 65%
  );
}

/* Holographic light sweep — a FULL-WIDTH gold band that descends through
   the whole card on hover.
   - left:0/right:0 → the band always spans the card's entire width, so
     there's never an uncovered side or corner (a diagonal band can't do
     this on a tall card — it only ever covers a diagonal slice).
   - The gradient is a soft STRIPE (transparent → gold-peak → transparent)
     so it reads as a moving band of light, not a flat wash.
   - It's an ANIMATION that travels the band from above the card to below
     it and fades out at 100% — no resting state, no leftover.
   - z-index: 4 puts it OVER the content + icon (the icon image has a
     solid bg, so the sweep must pass over it, not behind).
   - The card's overflow: hidden clips the band to the card bounds. */
.service-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 55%;                 /* band thickness relative to the card */
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(212, 164, 55, 0.10) 35%,
    rgba(212, 164, 55, 0.42) 50%,
    rgba(212, 164, 55, 0.10) 65%,
    transparent 100%
  );
  transform: translateY(-180%); /* parked just above the card */
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.service-card:hover::after {
  animation: serviceCardSweep 0.9s ease-out;
}
@keyframes serviceCardSweep {
  0%   { transform: translateY(-180%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(280%);  opacity: 0; }
}

.service-card > * { position: relative; z-index: 2; }

.service-card-top { position: relative; }

.service-number {
  font-size: 36px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
  font-family: var(--font-display);
  /* On hover the number pops from ghost-white to gold for visual punch */
  transition: color 0.5s ease, text-shadow 0.5s ease;
}
.service-card:hover .service-number {
  color: var(--gold);
  text-shadow: 0 0 18px rgba(212, 164, 55, 0.35);
}
.service-mini-line {
  width: 30px;
  height: 2px;
  background: linear-gradient(to right, var(--gold), transparent);
  margin-bottom: 18px;
  position: relative;
}
.service-mini-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f0c85d;
  box-shadow: 0 0 8px rgba(240, 200, 93, 0.8);
}

/* Hex-shaped icon area — uses a clip-path polygon as a subtle hex outline.
   Image inside gently lifts and scales on hover. */
.service-icon-wrapper {
  position: relative;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
/* Behind-icon glow removed — replaced by a top-of-card wash on
   .service-card::before, see below. */
.service-icon-wrapper::before { display: none; }
.service-icon-wrapper img {
  position: relative;
  z-index: 1;
  max-width: 140px;
  max-height: 140px;
  object-fit: contain;
  /* Soft warm glow under the icon — safe to use because the WebP icons are
     transparent (drop-shadow traces the alpha channel, not a rectangular
     bounding box). */
  filter: drop-shadow(0 4px 18px rgba(212, 164, 55, 0.22));
  transition: transform 0.6s ease, filter 0.6s ease;
}
.service-card:hover .service-icon-wrapper img {
  transform: scale(1.06) translateY(-4px);
}
/* Card #10 (3D Print Modeling) — the printer body sits in the left-half of
   the source PNG, which makes the icon read as off-centre inside the hex.
   Nudging object-position rightward shifts the image so the heaviest visual
   element lines up with the hex's geometric centre. */
.services-grid .service-card:nth-child(10) .service-icon-wrapper img {
  object-position: 62% 50%;
}

.service-content { position: relative; }
.service-title {
  font-size: 19px;
  line-height: 1.22;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.service-description {
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.6;
  font-size: 13px;
  margin: 0 0 18px;
}

.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.service-view-more {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.service-arrow-btn {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(212, 164, 55, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
.service-arrow-btn [data-lucide] { width: 16px; height: 16px; stroke-width: 2.2; }
.service-card:hover .service-arrow-btn {
  transform: translateX(6px);
  border-color: rgba(212, 164, 55, 0.45);
  box-shadow: 0 0 24px rgba(212, 164, 55, 0.12);
}

/* Glowing gold accent bar centered at the very bottom of each card.
   On hover the bar stretches horizontally via scaleX (GPU-friendly) and the
   surrounding glow shadow intensifies, so the bottom edge "lights up". */
.service-bottom-glow {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scaleX(1);
  transform-origin: center;
  width: 70px;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  box-shadow: 0 0 12px rgba(212, 164, 55, 0.7);
  z-index: 3;
  transition: transform 0.6s ease, box-shadow 0.5s ease;
}
.service-card:hover .service-bottom-glow {
  transform: translateX(-50%) scaleX(3.4);
  box-shadow: 0 0 18px rgba(212, 164, 55, 0.9);
}

/* ---------- Stats (premium card with 4 stat boxes) ---------- */
.stats {
  padding: var(--section-y) 0;
}

.stats-card {
  position: relative;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(212, 164, 55, 0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 25px 80px rgba(0, 0, 0, 0.5);
}
/* Removed: top-center radial gold gradient on the wrapper. */

/* Left + right glowing gold accent bars (vertical) */
.stats-left-glow,
.stats-right-glow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 200px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  box-shadow: 0 0 18px rgba(212, 164, 55, 0.85);
  z-index: 5;
}
.stats-left-glow  { left: 0; }
.stats-right-glow { right: 0; }

.stats-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

/* Individual stat card */
.stat-card {
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 20px 38px;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 0.45s var(--ease);
}
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top center, rgba(212, 164, 55, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.stat-card:hover::before { opacity: 1; }
.stat-card:hover { transform: translateY(-6px); }

/* Vertical gold gradient separator between cards (none after last) */
.stat-card:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 65%;
  background: linear-gradient(to bottom, transparent, rgba(212, 164, 55, 0.22), transparent);
}

/* Right-pointing chevrons at the column boundaries — positioned on the grid
   itself (not inside cards) so they're never clipped by card overflow:hidden
   and always stack above the separator lines.
   `transform: translateY(-50%)` (no X translate) anchors the arrow's LEFT EDGE
   exactly at the column boundary, so the chevron sits immediately to the right
   of the separator line. */
.stats-divider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  z-index: 6;
  pointer-events: none;
}
/* The Lucide chevron-right path has ~37% padding on the left of its viewBox.
   For an 18px icon that's ~7px. Shift the box LEFT by that amount so the
   visible chevron starts exactly at the column boundary line, not 7px into the
   next card. */
.stats-divider-arrow[data-pos="1"] { left: calc(25% - 6px); }
.stats-divider-arrow[data-pos="2"] { left: calc(50% - 6px); }
.stats-divider-arrow[data-pos="3"] { left: calc(75% - 6px); }
.stats-divider-arrow [data-lucide] {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

/* Circular icon wrapper — double ring + glowing dot at top */
.stat-icon-wrapper {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(212, 164, 55, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: radial-gradient(circle at top, rgba(212, 164, 55, 0.08), transparent 70%);
  box-shadow:
    inset 0 0 22px rgba(212, 164, 55, 0.04),
    0 0 22px rgba(212, 164, 55, 0.05);
}
.stat-icon-wrapper::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(212, 164, 55, 0.08);
}
.stat-icon-dot {
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  background: #f1c859;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(241, 200, 89, 0.9);
}
.stat-icon-wrapper [data-lucide] {
  width: 32px;
  height: 32px;
  stroke-width: 1.6;
  color: var(--gold);
}

/* Big stat value */
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #f7f7f7;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.stat-value .stat-number {
  font-variant-numeric: tabular-nums;
}
.stat-value .stat-plus {
  color: var(--gold);
  font-size: 0.7em;
  margin-left: 4px;
  font-weight: 600;
}

.stat-label {
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  font-weight: 400;
}

/* Bottom accent — small gold gradient bar with a center dot */
.stat-bottom-line {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: 54px;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  box-shadow: 0 0 10px rgba(212, 164, 55, 0.6);
}
.stat-bottom-line::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  background: #f1c859;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(241, 200, 89, 0.75);
}

/* ---------- Generic section header styles (used by Featured / Services / Testimonials) ---------- */
.section-badge {
  display: block;
  width: max-content;
  margin: 0 auto;
  border: 1px solid rgba(212, 164, 55, 0.55);
  border-radius: 999px;
  padding: 11px 26px;
  color: var(--gold);
  letter-spacing: 0.32em;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(212, 164, 55, 0.03);
  box-shadow:
    0 0 15px rgba(212, 164, 55, 0.08),
    inset 0 0 10px rgba(212, 164, 55, 0.03);
}
.section-badge--left { margin: 0; }

.section-heading {
  text-align: center;
  margin-top: 26px;
  font-size: clamp(28px, 3.5vw, 44px); /* matches the --compact variant (used by Featured Work) */
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-family: var(--font-display);
  color: var(--text);
  text-transform: uppercase;
}
.section-heading span {
  color: var(--gold);
  text-shadow:
    0 0 18px rgba(212, 164, 55, 0.22),
    0 0 45px rgba(212, 164, 55, 0.12);
}
.section-heading--compact {
  font-size: clamp(28px, 3.5vw, 44px);
  text-align: left;
  margin-top: 18px;
}

.section-divider-fancy {
  margin: 24px auto 22px;
  width: 280px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  position: relative;
}
.section-divider-fancy::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd36d 0%, #d39a17 65%);
  box-shadow:
    0 0 14px rgba(212, 164, 55, 0.5),
    0 0 32px rgba(212, 164, 55, 0.24);
}
.section-divider-fancy--left {
  margin: 22px 0 22px;
  width: 200px;
  background: linear-gradient(to right, var(--gold), rgba(212, 164, 55, 0.1) 70%, transparent);
}
.section-divider-fancy--left::after {
  left: 30px;
  width: 12px;
  height: 12px;
}

.section-subtitle {
  text-align: center;
  color: var(--text-dim);
  max-width: 640px;
  margin: 0 auto 48px;
  line-height: 1.7;
  font-size: 16px;
  font-weight: 400;
}
.section-subtitle--compact {
  text-align: left;
  max-width: 320px;
  margin: 0 0 32px;
  font-size: 14px;
}

/* ---------- Testimonials (section frame + carousel) ---------- */
.testimonials {
  padding: var(--section-y) 0;
  background: var(--bg);
  position: relative;
  overflow: visible; /* allow glows to bleed into neighboring sections */
  isolation: isolate;
}
/* TOP glow — extends up into the section above for a smooth fade */
.testimonials::before {
  content: "";
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  max-width: 95vw;
  height: 320px;
  background: radial-gradient(ellipse at center, rgba(212, 164, 55, 0.07), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: -1;
}
/* BOTTOM glow — extends down into the section below */
.testimonials::after {
  content: "";
  position: absolute;
  bottom: -160px;
  right: -100px;
  width: 700px;
  max-width: 90vw;
  height: 320px;
  background: radial-gradient(ellipse at center, rgba(212, 164, 55, 0.05), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
}

.testimonials-carousel { position: relative; }
.testimonials-swiper {
  /* Replace overflow:hidden with a vertical-passthrough clip-path so the card
     glow shadow can render below/above without being cut off, while still
     clipping the cloned slides at the left/right edges in loop mode. */
  overflow: visible;
  clip-path: inset(-130px 0);
  padding: 8px 0;
}
/* Smooth easing on slide transitions */
.testimonials-swiper .swiper-wrapper {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Slides stay at full opacity — dimming the non-active ones caused a snap
   when the active class transferred during a swipe. Off-screen slides are
   already clipped by the swiper's clip-path. */
.testimonial-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
    rgba(8, 8, 8, 0.9);
  border: 1px solid rgba(212, 164, 55, 0.22);
  border-radius: 28px;
  padding: 26px 28px;
  /* Soft floor instead of a hard 440px — short testimonials (3 lines) no
     longer leave a huge dead zone, but the floor still prevents tiny one-
     sentence cards from looking stunted next to longer ones. The carousel
     keeps three cards visible at a time, so heights line up naturally
     within each viewport row. */
  min-height: 280px;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  height: auto;
  /* Explicit initial transform so the hover transition has two interpolatable
     values (browsers can't always animate from "none" to "translateY(...)"). */
  transform: translateY(0);
  will-change: transform;
  box-shadow:
    0 0 0 1px rgba(212, 164, 55, 0.04),
    0 0 25px rgba(212, 164, 55, 0.06);
  /* !important required: Swiper sets `transition-property: transform` inline on
     every .swiper-slide, which would prevent border-color and box-shadow from
     animating. Overriding the inline style is the only way to restore them. */
  transition:
    transform 0.55s var(--ease),
    border-color 0.55s var(--ease),
    box-shadow 0.55s var(--ease) !important;
}
.testimonial-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(212, 164, 55, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
  z-index: 0;
}
/* Thin glowing gold accent bars centered at the top and bottom edges (same idea
   as the CTA card top/bottom glows). Two backgrounds in one pseudo, then a
   drop-shadow filter that follows the alpha so the glow hugs only the bars. */
.testimonial-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(90deg, transparent, var(--gold) 50%, transparent) center top    / 60% 2px no-repeat,
    linear-gradient(90deg, transparent, var(--gold) 50%, transparent) center bottom / 60% 2px no-repeat;
  filter:
    drop-shadow(0 0 6px rgba(212, 164, 55, 0.6))
    drop-shadow(0 0 14px rgba(212, 164, 55, 0.25));
}
.testimonial-card > * { position: relative; z-index: 1; }
.testimonial-card:hover {
  transform: translateY(-8px);
  border-color: rgba(212, 164, 55, 0.45);
  box-shadow:
    0 0 0 1px rgba(212, 164, 55, 0.08),
    0 0 40px rgba(212, 164, 55, 0.14),
    0 0 90px rgba(212, 164, 55, 0.06);
}
.testimonial-card:hover::before { opacity: 1; }

.testimonial-card .card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.testimonial-card .profile {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.testimonial-card .avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2px solid rgba(212, 164, 55, 0.55);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(212, 164, 55, 0.12);
}
.testimonial-card .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testimonial-card .meta { padding-top: 2px; min-width: 0; }
.testimonial-card .rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.testimonial-card .rate-box {
  border: 1px solid rgba(212, 164, 55, 0.5);
  color: var(--gold);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.testimonial-card .stars {
  color: var(--gold);
  letter-spacing: 2px;
  font-size: 14px;
  line-height: 1;
}
.testimonial-card .name {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  font-family: var(--font-display);
  color: var(--text);
  letter-spacing: -0.01em;
}
.testimonial-card .flag {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.testimonial-card .flag img {
  width: 16px;
  height: 12px; /* clean 4:3 — midway between the previous 20×15 and 10×8 */
  display: block;
  border-radius: 2px;
  object-fit: cover;
}
.testimonial-card .quote-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 76px;
  line-height: 0.5;
  color: rgba(212, 164, 55, 0.9);
  text-shadow: 0 0 18px rgba(212, 164, 55, 0.25);
  margin-top: 6px;
  flex-shrink: 0;
}
.testimonial-card .text {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.75;
  font-size: 14.5px;
  font-weight: 400;
  flex: 1;
}

/* Controls row (prev / dots / next) */
.testimonials-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  margin-top: 42px;
}
.testimonials-controls .arrow {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(212, 164, 55, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  cursor: pointer;
  background: transparent;
  padding: 0;
  transition: background 0.35s var(--ease), transform 0.3s var(--ease), box-shadow 0.35s var(--ease);
  box-shadow: 0 0 12px rgba(212, 164, 55, 0.06);
}
.testimonials-controls .arrow:hover {
  background: rgba(212, 164, 55, 0.08);
  transform: translateY(-3px);
  box-shadow: 0 0 22px rgba(212, 164, 55, 0.2);
}
.testimonials-controls .arrow:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.testimonials-controls .arrow [data-lucide] { width: 22px; height: 22px; stroke-width: 2; }
.testimonials-controls .arrow.swiper-button-disabled { opacity: 0.4; cursor: default; pointer-events: none; }

.testimonials-dots {
  display: flex;
  gap: 10px;
  align-items: center;
}
.testimonials-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3a3a3a;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  border: 0;
  padding: 0;
  margin: 0;
}
.testimonials-dots .dot:hover { background: #555; }
.testimonials-dots .dot.active {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(212, 164, 55, 0.5);
}

/* ---------- Trusted By (infinite-marquee logos) ---------- */
.trusted {
  position: relative;
  padding: var(--section-y) 0 calc(var(--section-y) + 20px);
  overflow: visible; /* allow glows to bleed into neighboring sections */
  isolation: isolate;
  background: var(--bg);
}
/* subtle grid pattern overlay (stays within section bounds) */
.trusted::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 120px 120px;
  pointer-events: none;
  opacity: 0.35;
  z-index: 0;
}
/* TOP glow — extends up into the testimonials section above so the fade is smooth.
   The element itself is 360px tall starting 180px above the section edge; the
   gradient fades to fully transparent at its bounds, so there's no hard edge. */
.trusted::after {
  content: "";
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  max-width: 95vw;
  height: 360px;
  background: radial-gradient(ellipse at center, rgba(212, 164, 55, 0.10), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.trusted > * { position: relative; z-index: 1; }

/* BOTTOM glow — extends down into the CTA section so the bleed is symmetric */
.trusted-glow {
  position: absolute;
  left: 50%;
  bottom: -200px;
  transform: translateX(-50%);
  width: 800px;
  max-width: 95vw;
  height: 320px;
  background: radial-gradient(circle, rgba(212, 164, 55, 0.18), transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 18px 0 8px;
  margin-top: 8px;
}
/* Edge fades so logos slide in/out smoothly */
.marquee-wrapper::before,
.marquee-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 220px;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}
.marquee-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}
.marquee-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}

.marquee-track {
  display: flex;
  width: fit-content;
  animation: marqueeScroll 40s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logo-card {
  position: relative;
  flex-shrink: 0;
  width: 250px;
  height: 120px;
  margin: 0 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(212, 164, 55, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 0 0 rgba(212, 164, 55, 0);
  transition:
    transform 0.45s var(--ease),
    border-color 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
/* Top radial glow that fades in on hover */
.logo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top center, rgba(212, 164, 55, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
/* Bottom hairline gold accent */
.logo-card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 164, 55, 0.5), transparent);
  opacity: 0.7;
}
.logo-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 164, 55, 0.28);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.45),
    0 0 30px rgba(212, 164, 55, 0.08),
    inset 0 0 40px rgba(212, 164, 55, 0.03);
}
.logo-card:hover::before { opacity: 1; }

.logo-card img {
  max-width: 100%;
  max-height: 115px;
  object-fit: contain;
  opacity: 0.92;
  /* The source PNGs have built-in whitespace around the mark, so we scale up
     the rendered image and let the card's overflow:hidden crop the empty
     edges — the logo itself ends up much more prominent. */
  transform: scale(1.25);
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.logo-card:hover img {
  transform: scale(1.32);
  opacity: 1;
}

/* ---------- CTA (three-column card with hex logo, content, action panel) ---------- */
.cta {
  padding: var(--section-y) 0 calc(var(--section-y) + 16px);
}
.cta-section {
  position: relative;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  border: 1px solid rgba(212, 164, 55, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 20px 80px rgba(0, 0, 0, 0.45);
}
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top center, rgba(212, 164, 55, 0.08), transparent 55%);
  pointer-events: none;
}

/* thin glowing accent lines along the top and bottom of the card */
.cta-top-glow,
.cta-bottom-glow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  box-shadow: 0 0 18px rgba(212, 164, 55, 0.7);
  z-index: 3;
}
.cta-top-glow    { top: 0; }
.cta-bottom-glow { bottom: 0; }

.cta-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 200px 1fr 280px;
  align-items: center;
  gap: 40px;
  /* Only the vertical padding is trimmed (was 56) — keeps the card a touch
     shorter without shrinking any of the actual content sizes. */
  padding: 32px 60px;
}

/* ---- Left: logo with rotating hex outlines ---- */
.cta-left-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-hex-outline {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -75px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(212, 164, 55, 0.18);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
  animation: ctaHexSpin 16s linear infinite;
}
.cta-hex-outline--second {
  margin-top: -95px;
  margin-left: -95px;
  width: 190px;
  height: 190px;
  opacity: 0.35;
  animation-direction: reverse;
  animation-duration: 24s;
}
@keyframes ctaHexSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Logo sits on its own — no container box behind it, just the mark larger */
.cta-logo-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-logo-container img {
  width: 187px;
  height: 187px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(212, 164, 55, 0.35));
}

/* ---- Middle: heading + description, with a gold gradient divider on its left ---- */
.cta-content {
  position: relative;
  padding-left: 40px;
}
.cta-content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 140px;
  background: linear-gradient(to bottom, transparent, rgba(212, 164, 55, 0.4), transparent);
}
.cta-content h2 {
  font-size: clamp(22px, 2.8vw, 35px); /* 20% smaller than the previous clamp */
  line-height: 1.14; /* 20% taller than the previous 0.95 */
  letter-spacing: -0.02em;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
  font-family: var(--font-display);
  color: var(--text);
}
.cta-content h2 span {
  color: var(--gold);
  text-shadow:
    0 0 18px rgba(212, 164, 55, 0.22),
    0 0 45px rgba(212, 164, 55, 0.12);
}
.cta-description {
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  margin: 0;
  max-width: 520px;
}

/* ---- Right: small "have a project?" panel with icon + CTA button ---- */
.cta-action-panel {
  position: relative;
  padding-left: 36px;
}
.cta-action-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 150px;
  background: linear-gradient(to bottom, transparent, rgba(212, 164, 55, 0.35), transparent);
}
.cta-panel-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.cta-deco-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 164, 55, 0.35));
}
.cta-deco-line:last-child {
  background: linear-gradient(to left, transparent, rgba(212, 164, 55, 0.35));
}
.cta-icon-circle {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(212, 164, 55, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  box-shadow: 0 0 18px rgba(212, 164, 55, 0.08);
}
.cta-icon-circle [data-lucide] { width: 18px; height: 18px; stroke-width: 2; }
.cta-action-panel h3 {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 12px;
}
.cta-action-panel p {
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
  margin: 0 0 24px;
  font-size: 14px;
}

/* Gold gradient pill button with a moving sheen on hover */
.cta-button-new {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 58px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--gold), #f3ca5c);
  color: #111;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  box-shadow:
    0 0 28px rgba(212, 164, 55, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.cta-button-new::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transition: left 0.7s ease;
}

/* Shell wrapper around the button — it has its own padded hit area that stays
   anchored to the original layout box, so when the inner button translates up
   on hover the cursor remains within the shell and the hover state never
   toggles off. All hover effects are triggered via .cta-button-shell:hover. */
.cta-button-shell {
  position: relative;
  display: block;
  padding: 6px 0;
  margin: -6px 0;
}
.cta-button-shell:hover .cta-button-new {
  transform: translateY(-4px);
  box-shadow:
    0 12px 38px rgba(212, 164, 55, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.cta-button-shell:hover .cta-button-new::before { left: 120%; }
.cta-button-arrow {
  display: inline-flex;
  align-items: center;
}
.cta-button-arrow [data-lucide] { width: 16px; height: 16px; stroke-width: 2.5; }

/* Stack of two CTA buttons (Quote + Contact). Each button keeps its own
   .cta-button-shell so hovering one only lifts that one. */
.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Secondary (outline) variant of cta-button-new — used for the "Contact Us"
   button when paired with the primary gold "Get a Free Quote". */
.cta-button-new--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  box-shadow: none;
}
.cta-button-new--ghost::before { background: linear-gradient(90deg, transparent, rgba(212, 164, 55, 0.18), transparent); }
.cta-button-shell:hover .cta-button-new--ghost {
  border-color: rgba(212, 164, 55, 0.55);
  color: var(--gold);
  background: rgba(212, 164, 55, 0.04);
  box-shadow:
    0 10px 28px -12px rgba(0, 0, 0, 0.55),
    0 0 22px -6px rgba(212, 164, 55, 0.20);
}

/* ---- Responsive ----
   The CTA stays in its 3-column form down to ~768px (just with tighter
   gaps and column widths). Below that it collapses to a single centered
   column with a 260px button. */
@media (max-width: 1100px) {
  .cta-inner {
    /* Keep the 3-col widths intact so the action button has its full
       breathing room. Only the gaps + padding tighten. */
    gap: 24px;
    padding: 28px 36px;
  }
  .cta-content h2 { font-size: clamp(20px, 2.6vw, 30px); }
}

@media (max-width: 768px) {
  .cta-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px;
    padding: 40px 28px;
  }
  .cta-content,
  .cta-action-panel { padding-left: 0; }
  .cta-content::before,
  .cta-action-panel::before { display: none; }
  .cta-description { margin-left: auto; margin-right: auto; }
  .cta-action-panel {
    display: flex;
    flex-direction: column;
    align-items: center;   /* center the button within the column */
  }
  /* 260px-wide button, centered by its parent's align-items */
  .cta-button-shell { width: 260px; }
}

@media (max-width: 560px) {
  .cta-inner { padding: 36px 22px; }
  .cta-logo-container img { width: 110px; height: 110px; }
  .cta-hex-outline { margin-top: -65px; margin-left: -65px; width: 130px; height: 130px; }
  .cta-hex-outline--second { margin-top: -85px; margin-left: -85px; width: 170px; height: 170px; }
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 60px 0 0;
  background: #060606;
  border-top: 1px solid var(--border);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 60px;
  padding-bottom: 50px;
}
.footer-brand p {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-dim);
  max-width: 360px;
  line-height: 1.6;
}
.footer-cols {
  display: grid;
  /* Auto-fit so any number of columns the admin configures looks balanced.
     min track width keeps short label lists from collapsing too narrow. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px;
}
.footer-cols h4 {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  font-weight: 600;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.footer-cols a:hover { color: var(--text); }
.footer-col--social a svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.2s var(--ease);
}
.footer-col--social a:hover svg { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 22px 0;
}
.footer-bottom > .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.footer-bottom small,
.footer-bottom .footer-copy {
  color: var(--text-muted);
  font-size: 12px;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}
.footer-legal li { margin: 0; padding: 0; }
/* Separator dot between legal links — only between items, not before the first. */
.footer-legal li + li::before {
  content: "·";
  color: var(--text-muted);
  margin: 0 12px;
  opacity: 0.7;
}
.footer-legal a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.footer-legal a:hover { color: var(--text); }

/* ---------- Reveal animations baseline ----------
   Pre-hide ScrollTrigger targets BEFORE first paint so GSAP can
   animate them in without a visible flash. Only applied when JS
   is available — if GSAP fails to load, script.js removes the
   .js class on <html> and everything renders normally.
------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
}
.js .featured-intro > *,
.js .featured-nav,
.js .section-head--center > *,
.js .services-grid > .service-card,
.js .stats-card,
.js .stats-grid > .stat-card,
.js .testimonials-controls,
.js .marquee-wrapper,
.js .cta-section,
.js .projects-swiper .swiper-slide {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .featured-inner { grid-template-columns: 220px 1fr; gap: 40px; }
  .service-card { min-height: 420px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card:nth-child(2)::after { display: none; }
  .stats-divider-arrow { display: none; }
  .stat-card { min-height: 190px; }
  .stats-left-glow, .stats-right-glow { height: 160px; }
}

/* Hide the JS-injected backdrop on desktop — only visible inside
   the burger media query below. */
.nav-backdrop { display: none; }

/* While the window is being resized, suppress nav transitions so the
   slide-out menu doesn't visibly animate when crossing the 1024px
   media-query boundary. JS toggles the class with a debounce. */
html.is-resizing .primary-nav,
html.is-resizing .primary-nav *,
html.is-resizing .nav-backdrop,
html.is-resizing .site-header::before { transition: none !important; }

/* ============================================================
   Burger menu activates at <= 1024px (raised from 860 so the
   CONTACT US button + full nav don't clip on tablet-landscape).
   Hero/featured layout rules below stay at <= 860px.
   ============================================================ */
@media (max-width: 1024px) {
  .btn-contact { display: none; }
  .burger {
    display: inline-flex;
    position: relative;
    z-index: 110;          /* above the slide-out menu so the X stays clickable */
  }

  .primary-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 360px);
    padding: 88px 28px 32px;
    background: #0c0c0c;
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    z-index: 100;          /* above page content (was 45 — got beaten by .has-megamenu z-index: 60) */
    overflow-y: auto;      /* tall menus + long sub-lists scroll inside the panel */
    overscroll-behavior: contain;
  }
  .primary-nav.open { transform: translateX(0); }
  .primary-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .primary-nav a { font-size: 13px; }

  /* Backdrop dimmer behind the slide-out — fades in with the menu */
  .nav-backdrop {
    display: block;        /* override the global display: none */
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .nav-backdrop.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s var(--ease), visibility 0s linear 0s;
  }

  /* Lock background scroll while the slide-out is open (added on <body>) */
  body.nav-open { overflow: hidden; }

  /* Mega menu inline inside the mobile slide-out — flatten the panel
     so it reads as a simple grouped list under SERVICES. */
  .primary-nav li.has-megamenu { width: 100%; }
  .primary-nav .has-megamenu > a .nav-caret { display: none; }
  .primary-nav .megamenu {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    margin: 12px 0 4px;
    padding: 14px 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    grid-template-columns: 1fr;
    gap: 18px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }
  .primary-nav .megamenu::before { display: none; }
  .megamenu-title { font-size: 10.5px; margin-bottom: 8px; padding-bottom: 6px; }
  .megamenu-col ul a { font-size: 12.5px; padding: 6px 4px; }
}

@media (max-width: 860px) {
  :root { --gutter: 18px; }

  .hero { min-height: 86vh; min-height: 86svh; }
  .hero-inner { padding-top: 130px; padding-bottom: 90px; }
  .hero-title { font-size: clamp(36px, 9vw, 56px); }
  .hero-subtitle { font-size: 16px; }
  .hero-content { padding-left: 32px; }
  .hero-slides { min-height: 320px; }
  .play-reel { bottom: 30px; }

  .featured-inner { grid-template-columns: 1fr; gap: 32px; }
  .featured-intro .section-desc { font-size: 14px; max-width: 480px; }

  .featured { padding: calc(var(--section-y) + 20px) 0 var(--section-y); }
  .services { padding: var(--section-y) 0; }
  .section-head--center { margin-bottom: 40px; }

  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 650px) {
  /* On phones, hide the "PLAY REEL" caption next to the play button —
     the gold button alone communicates the action. */
  .play-reel-label { display: none; }
}

@media (max-width: 560px) {
  .hero-slides { min-height: 300px; }
  .service-card { min-height: auto; padding: 24px; }
  .service-number { font-size: 36px; }
  .service-icon-wrapper { height: 180px; }
  .service-icon-wrapper::before { width: 160px; height: 160px; }
  .service-icon-wrapper img { max-width: 150px; max-height: 150px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { min-height: 170px; padding: 24px 18px 34px; }
  .stat-card::after, .stats-divider-arrow { display: none; }
  .stat-card:not(:last-child) {
    border-bottom: 1px solid rgba(212, 164, 55, 0.08);
  }
  .stat-icon-wrapper { width: 70px; height: 70px; margin-bottom: 12px; }
  .stat-icon-wrapper [data-lucide] { width: 30px; height: 30px; }
  .stat-label { font-size: 11px; letter-spacing: 0.18em; }
  .stats-left-glow, .stats-right-glow { height: 130px; }
  /* Logo cards + logos keep their desktop dimensions on small screens
     (250×120 card, max-height 115px logo) per request — only the marquee
     animation speed adjusts here. */
  .marquee-track { animation-duration: 28s; }
  .marquee-wrapper::before,
  .marquee-wrapper::after { width: 80px; }

  .cta-card { flex-direction: column; align-items: flex-start; }
  .cta-right { flex-direction: column; align-items: flex-start; gap: 18px; }

  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

/* prefers-reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}