@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
  --color-brand-primary: #1a2d6e;
  --color-brand-accent:  #c8102e;
  --color-brand-dark:    #060c1b;
  --color-brand-mid:     #091229;
  --color-brand-light:   #f0f6ff;
  --font-display: "Bricolage Grotesque", "Outfit", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
}

/* ── Lenis ── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #f5f7ff; }
::-webkit-scrollbar-thumb { background: #1a2d6e; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #c8102e; }

/* ── Grain (hero + CTA + footer only) ── */
.grain::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 2;
}

/* ── Grid overlays ── */
.grid-overlay {
  background-image:
    linear-gradient(rgba(26,45,110,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,45,110,.035) 1px, transparent 1px);
  background-size: 72px 72px;
}
.grid-overlay-dark {
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 72px 72px;
}

/* ── Glass (used inside dark sections) ── */
.glass {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.1);
}
.glass-dark {
  background: rgba(6,12,27,.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.07);
}

/* ── Gradient text ── */
.text-gradient-red {
  background: linear-gradient(130deg, #ff4d6a, #c8102e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-blue {
  background: linear-gradient(130deg, #7aa4ff, #1a2d6e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Navbar ── */
#navbar {
  transition: background 0.38s ease, backdrop-filter 0.38s ease, border-color 0.38s ease;
}
/* Default: over dark hero — transparent */

/* Scrolled: over light sections — white */
#navbar.scrolled {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(26,45,110,.08);
}
#navbar.scrolled .nav-link {
  color: rgba(12,20,39,.5) !important;
}
#navbar.scrolled .nav-link:hover {
  color: #0c1427 !important;
}
#navbar.scrolled .nav-link::after { background: #c8102e; }
#navbar.scrolled .nav-logo {
  filter: none !important;
  opacity: 1 !important;
}
#navbar.scrolled .btn-ghost {
  border-color: rgba(26,45,110,.18) !important;
  background: transparent !important;
  color: rgba(12,20,39,.6) !important;
}
#navbar.scrolled .btn-ghost:hover {
  background: rgba(26,45,110,.05) !important;
  border-color: #1a2d6e !important;
  color: #1a2d6e !important;
  transform: translateY(-1px);
}
#navbar.scrolled #menu-toggle {
  background: rgba(26,45,110,.06) !important;
  border-color: rgba(26,45,110,.12) !important;
  color: rgba(12,20,39,.6) !important;
}

.nav-logo {
  filter: brightness(0) invert(1);
  opacity: 0.88;
  transition: filter 0.38s ease, opacity 0.38s ease;
}
.nav-link {
  position: relative;
  color: rgba(255,255,255,.6);
  transition: color 0.2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1.5px;
  background: #c8102e;
  transition: width 0.25s ease;
}
.nav-link:hover { color: white; }
.nav-link:hover::after { width: 100%; }

/* ── Buttons ── */
.btn-primary {
  position: relative;
  background: linear-gradient(135deg, #e8122e, #a50d23);
  box-shadow: 0 8px 28px -6px rgba(200,16,46,.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -6px rgba(200,16,46,.6); }
.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
  color: rgba(255,255,255,.7);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.38);
  transform: translateY(-2px);
}

.btn-outline {
  border: 1.5px solid rgba(26,45,110,.22);
  background: transparent;
  color: #1a2d6e;
  transition: all 0.22s ease;
}
.btn-outline:hover {
  border-color: #1a2d6e;
  background: rgba(26,45,110,.05);
  transform: translateY(-1px);
}

/* ── Hero counter chips ── */
.counter-display { font-variant-numeric: tabular-nums; }

/* ── Line reveal (hero headline) ── */
.line-mask { overflow: hidden; }
.clip-word-inner {
  display: inline-block;
  transform: translateY(110%);
}

/* ── Marquee ── */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-left 32s linear infinite;
}
@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Services pinned stage ── */
#services { height: 100vh; overflow: hidden; }
.svc-card-fixed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100% !important;   /* overrides svc-cinematic's explicit height */
  border-radius: 0 !important;
  z-index: 1;
}
.svc-cinematic { height: min(78vh, 560px); }
.svc-img {
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.svc-overlay {
  background: linear-gradient(
    to top,
    rgba(6,12,27,.96) 0%,
    rgba(6,12,27,.62) 42%,
    rgba(6,12,27,.16) 78%,
    transparent 100%
  );
}
.svc-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Services progress indicator ── */
#svc-progress {
  position: absolute;
  bottom: 2rem;
  right: 2.5rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  user-select: none;
}
.svc-prog-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,.45);
}
.svc-prog-num .svc-prog-current {
  color: #c8102e;
  font-size: 18px;
  letter-spacing: 0.08em;
}
.svc-prog-dots {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
}
.svc-prog-dot {
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.22);
  transition: width 0.35s cubic-bezier(.16,1,.3,1), background 0.35s ease;
  width: 14px;
}
.svc-prog-dot.active {
  width: 32px;
  background: #c8102e;
}

/* ── SERVICE CARDS ── */
.service-card {
  will-change: transform, box-shadow;
}

/* ── WHY CHOOSE US — interactive showcase ── */
.why-label-item {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-weight: 700;
  color: #aab3c5;
  transition: color 0.6s ease;
}
.why-label-item.active {
  color: #c8102e;
}
.why-icon-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.8s ease, transform 1.8s ease;
  pointer-events: none;
}
.why-icon-item.active {
  opacity: 1;
  transform: translateY(0);
}
.why-detail {
  min-height: 190px;
}
.why-detail-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.8s ease, transform 1.8s ease;
  pointer-events: none;
}
.why-detail-item.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── PROCESS STEPS — scroll-active dim/highlight (md+ only; mobile shows a plain static list) ──
   Wider opacity gap + a slight lift so the active step reads clearly, not just a subtle fade. */
@media (min-width: 768px) {
  .process-step-v {
    opacity: .4;
    transform: translateY(0);
    transition: opacity 1.6s ease, transform 1.6s ease;
  }
  .process-step-v.active {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* ── PROCESS PROGRESS BAR ── */
.process-progress-track {
  position: relative;
  height: 2px;
  background: #e8ecf5;
  border-radius: 999px;
}
.process-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: #1a2d6e;
  border-radius: 999px;
}
.process-progress-dots {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}
.process-progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #e8ecf5;
  border: 2px solid #f5f7ff;
  flex-shrink: 0;
  transition: background 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.process-progress-dot.active {
  width: 13px;
  height: 13px;
  background: #1a2d6e;
}
.process-progress-puck {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.process-progress-puck-glow {
  position: absolute;
  inset: -22px;
  background: radial-gradient(circle, rgba(200,16,46,.32) 0%, rgba(200,16,46,.1) 55%, rgba(200,16,46,0) 75%);
  border-radius: 999px;
  pointer-events: none;
}
.process-progress-puck-box {
  position: relative;
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 16px 32px -10px rgba(26,45,110,.32), 0 4px 14px -4px rgba(26,45,110,.14);
  color: #1a2d6e;
}
.process-puck-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.process-puck-icon.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ── TESTIMONIAL CARDS ── */
.testimonial-card {
  background: white;
  border-radius: 24px;
  border: 1px solid rgba(26,45,110,.07);
}

/* ── CAROUSEL ── */
#carousel-track {
  will-change: transform;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #e8ecf5;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.35s cubic-bezier(.16,1,.3,1), background 0.3s ease;
}
.carousel-dot.active {
  width: 24px;
  background: #1a2d6e;
}

/* ── CTA BACKGROUND ── */
.cta-bg {
  background:
    radial-gradient(ellipse 80% 60% at 18% 50%, rgba(26,45,110,.48) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 82% 50%, rgba(200,16,46,.18) 0%, transparent 60%),
    #060c1b;
}

/* ── Footer ── */
.footer-link {
  color: rgba(255,255,255,.38);
  transition: color 0.2s ease;
}
.footer-link:hover { color: rgba(255,255,255,.85); }

/* ── Mobile menu ── */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.3s ease, transform 0.25s ease, opacity 0.25s ease;
}
#mobile-menu.open {
  max-height: 480px;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Zoom reveal utility */
.zoom-reveal { will-change: transform, opacity; }

/* Global Footprint: interactive world map markers */
.reach-marker {
  position: absolute;
  transform: translate(-50%, -50%);
}
.reach-marker-inner {
  will-change: transform, opacity;
}
.reach-bubble {
  position: relative;
  width: var(--bubble-size, 44px);
  height: var(--bubble-size, 44px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(200,16,46,.95), rgba(200,16,46,.5) 55%, rgba(200,16,46,.12) 100%);
  box-shadow: 0 0 0 6px rgba(200,16,46,.07), 0 0 26px rgba(200,16,46,.35);
}
.reach-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}
.reach-connector {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: clamp(14px, 3vw, 34px);
  background: linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,.4));
  transform: translateX(-50%);
}
.reach-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + clamp(14px, 3vw, 34px));
  transform: translateX(-50%);
  white-space: normal;
  width: max-content;
  max-width: clamp(84px, 24vw, 150px);
  text-align: center;
  font-weight: 700;
  font-size: clamp(7.5px, 1.1vw, 12px);
  line-height: 1.3;
  letter-spacing: .01em;
  color: rgba(255,255,255,.9);
  background: rgba(6,12,27,.6);
  padding: 3px 7px;
  border-radius: 8px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.reach-label-number {
  color: #c8102e;
  font-variant-numeric: tabular-nums;
}

/* ── Nav dropdown (inner pages — Services menu) ── */
.nav-dropdown-trigger svg { transition: transform 0.25s ease; }
.nav-dropdown-trigger.open svg { transform: rotate(180deg); }
.nav-dropdown-panel {
  min-width: 480px;
  /* Left-aligned to the trigger (not centered) — the trigger is a narrow
     "Services" button that can sit left-of-center in the navbar, so centering
     a 480px-wide panel under it (left:50%;-translate-x-1/2) pushed the panel
     off the left edge of the viewport at common widths. Left-aligning grows
     the panel rightward instead, into the roomier space toward Clients/Contact.
     `left: 0` here overrides the `left-1/2` Tailwind utility class still on
     the element in HTML — safe because this plain custom-CSS rule sits outside
     any Tailwind @layer, so it wins over the layered utility automatically. */
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.nav-dropdown-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 6px;
}
.nav-dropdown-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.nav-dropdown-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-dropdown-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #c8102e;
  opacity: .85;
}
.nav-dropdown-link-all {
  font-weight: 700;
  color: #fff;
}
.nav-dropdown-divider { height: 1px; background: rgba(255,255,255,.08); margin: 4px 6px; }
#navbar.scrolled .nav-dropdown-link { color: rgba(12,20,39,.6); }
#navbar.scrolled .nav-dropdown-link:hover { color: #0c1427; background: rgba(26,45,110,.06); }
#navbar.scrolled .nav-dropdown-link-all { color: #0c1427; }
#navbar.scrolled .nav-dropdown-panel { background: rgba(255,255,255,.98); border-color: rgba(26,45,110,.08); }
#navbar.scrolled .nav-dropdown-divider { background: rgba(26,45,110,.08); }

/* Mobile services dropdown (accordion inside #mobile-menu) */
.mobile-dropdown-trigger svg { transition: transform 0.25s ease; }
.mobile-dropdown-trigger.open svg { transform: rotate(180deg); }
.mobile-dropdown-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-dropdown-panel.open { max-height: 480px; }
.mobile-dropdown-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #c8102e;
  opacity: .85;
}
.mobile-dropdown-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.45);
  transition: color 0.2s ease;
}
.mobile-dropdown-link:hover { color: #fff; }

/* ── Light-card feature tag (inner pages — same pill as .svc-tag, tuned for
   a white/tinted card background instead of a dark photo overlay) ── */
.svc-tag-light {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #1a2d6e;
  background: rgba(26,45,110,.06);
  border: 1px solid rgba(26,45,110,.12);
}

/* Section label pill */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(26,45,110,.14);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(26,45,110,.5);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.section-label-dark {
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.45);
}

/* ── Services page: pinned scroll-driven card stack (services.blade.php only) ──
   Own hooks (#services-stack-stage / .stack-card), separate from the homepage's
   #services / .service-card pinned stack so app.js's homepage-only logic can't
   pick these up. */
#services-stack-stage {
  will-change: transform;
}
.stack-card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: #f5f7ff;
  will-change: transform, opacity, filter;
}
.stack-card-num {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(26,45,110,.45);
  margin-bottom: 14px;
}
.stack-counter-light {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid rgba(26,45,110,.18);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #1a2d6e;
  font-variant-numeric: tabular-nums;
}
#stack-progress {
  position: absolute;
  bottom: 2rem;
  right: 2.5rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  user-select: none;
}
.stack-progress-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(26,45,110,.4);
}
.stack-progress-num .stack-progress-current {
  color: #c8102e;
  font-size: 18px;
  letter-spacing: 0.08em;
}
.stack-progress-dots {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
}
.stack-progress-dot {
  height: 3px;
  border-radius: 2px;
  background: rgba(26,45,110,.15);
  transition: width 0.35s cubic-bezier(.16,1,.3,1), background 0.35s ease;
  width: 14px;
}
.stack-progress-dot.active {
  width: 32px;
  background: #c8102e;
}

/* ── Why Choose Us: editorial hover-list (about page) ──────────
   Index number uses a generic serif stack deliberately — the site has no
   serif webfont loaded, and that's the point: it's the one place a serif
   numeral appears, so it reads as an intentional editorial accent. */
.why-list { border-top: 0.5px solid #e2e5ee; }
.why-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 34px 2px;
  border-bottom: 0.5px solid #e2e5ee;
  transition: opacity 0.25s ease;
}
.why-index {
  font-family: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight: 300;
  font-size: 2.75rem;
  line-height: 1;
  color: #c8102e;
  flex-shrink: 0;
  width: 72px;
}
.why-content { flex: 1; min-width: 0; }
.why-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: #0c1427;
  margin-bottom: 6px;
}
.why-desc {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
  max-width: 640px;
}
.why-thumb-mobile { display: none; }

/* Desktop hover: dim siblings, float a thumbnail on the cursor. Gated on
   (hover:hover) so touch devices never see the dim/float behavior at all. */
@media (hover: hover) and (pointer: fine) {
  .why-row { cursor: pointer; }
  .why-list.hovering .why-row:not(.why-row-active) { opacity: 0.4; }
}
.why-float-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 180px;
  height: 120px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  transition: opacity 0.2s ease;
  z-index: 70;
  box-shadow: 0 24px 48px -16px rgba(12,20,39,.35);
}
.why-float-img.visible { opacity: 1; }

/* Mobile/touch: no hover choreography — static thumbnail per row instead. */
@media (max-width: 767px) {
  .why-row { gap: 16px; padding: 22px 0; }
  .why-index { font-size: 2rem; width: 48px; }
  .why-title { font-size: 1.05rem; }
  .why-desc { font-size: 0.85rem; }
  .why-thumb-mobile {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
  }
}

/* ── Related Services: cursor-follow image preview (service-detail page).
   GSAP quickTo drives position (see app.js); this just handles the visual
   stack — two <img> layers crossfade on row switch instead of hard-swapping
   `src`, and the wrapper itself fades/scales in on enter, out on leave. */
.related-hover-preview {
  box-shadow: 0 24px 48px -16px rgba(12,20,39,.35);
  transform: scale(0.9);
}
.related-hover-preview-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.related-hover-preview-img.active { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .related-hover-preview { display: none; }
}

/* ── Features: pinned split-scroll (service-detail page). Left image stack
   is CSS position:sticky (no GSAP pin needed) — it holds in place for as
   long as the right column (its grid sibling) is tall enough to scroll
   past it. GSAP ScrollTrigger only drives the image crossfade + step pulse,
   guarded to lg+ in app.js since the sticky/stack visual is desktop-only. */
.feature-stack-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.feature-stack-img.active { opacity: 1; }
.feature-stack-overlay { position: absolute; inset: 0; }
.feature-overlay-0 { background: linear-gradient(180deg, rgba(6,12,27,.1) 0%, rgba(6,12,27,.6) 100%); }
.feature-overlay-1 { background: linear-gradient(180deg, rgba(6,12,27,.28) 0%, rgba(6,12,27,.68) 100%); }
.feature-overlay-2 { background: linear-gradient(180deg, rgba(6,12,27,.02) 0%, rgba(6,12,27,.5) 100%); }

.feature-step-inner { transform: scale(1); }

/* ── Stats: "Cargo Manifest Strip" (service-detail "By The Numbers").
   Dividers are real elements (not CSS border utilities) so GSAP can draw
   them in via scaleY/scaleX — a plain border-right can't be transform-drawn. */
.stat-manifest-divider-v { width: 1px; border-right: 1px dashed #d6dcec; }
.stat-manifest-divider-h { height: 1px; border-bottom: 1px dashed #d6dcec; }

/* ── Service-detail hero upgrades ── */
.hero-bg-zoom { will-change: transform; }