/* style.css — Nubien-style components for Dancing Sky */

/* ========== layout helpers ========== */
.section__head,
.about,
.cta__inner,
.support__inner {
  text-align: center;
}

main > section {
  position: relative;
  padding-block: clamp(var(--space-16), 9vw, var(--space-24));
  padding-inline: var(--space-6);
}

/* Soft gradient transition between sections. Wider + softer than before so
   sections genuinely blend into each other with no visible seam. Uses two
   overlapping radial gradients for an organic aurora-style handoff. */
main > section + section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-1 * clamp(120px, 16vw, 240px));
  transform: translateX(-50%);
  width: 200vw;
  height: clamp(240px, 32vw, 480px);
  background:
    radial-gradient(ellipse 50% 100% at 35% 50%,
      rgba(34, 229, 195, 0.055) 0%,
      rgba(34, 229, 195, 0.025) 40%,
      transparent 100%),
    radial-gradient(ellipse 50% 100% at 65% 50%,
      rgba(138, 91, 255, 0.06) 0%,
      rgba(138, 91, 255, 0.028) 40%,
      transparent 100%);
  filter: blur(12px);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  /* Radial fade mask — guarantees no visible edges at viewport bounds. */
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 50% 50%, #000 0%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 100% at 50% 50%, #000 0%, transparent 100%);
}

main > section > * {
  max-width: var(--content-default);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

.section__head { margin-bottom: var(--space-12); display:flex; flex-direction:column; align-items:center; gap: var(--space-5); }

.section__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.025em;
}
.section__title .muted { color: var(--color-text-muted); font-weight: 500; }

.section__lede {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  max-width: 60ch;
  margin: var(--space-6) auto 0;
}

/* ========== pills & buttons ========== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px 6px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-full);
  font-size: 13px;
  color: var(--color-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.pill--eyebrow .pill__dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aurora-teal), var(--aurora-violet));
  box-shadow: 0 0 14px rgba(34, 229, 195, 0.6);
  flex: none;
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 14px rgba(34, 229, 195, 0.6); transform: scale(1); }
  50%      { box-shadow: 0 0 22px rgba(34, 229, 195, 0.9); transform: scale(1.08); }
}
.pill--year {
  background: rgba(124,91,255,0.15);
  border-color: rgba(124,91,255,0.35);
  color: #C7B6FF;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.pill--featured {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  background: var(--color-primary);
  color: white;
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 22px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  /* Smooth multi-property ease so every state change — hover lift,
     press settle, color tint, shadow bloom — blends together instead
     of snapping. Same curve used site-wide for coherent motion feel. */
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1),
    background 300ms ease,
    border-color 300ms ease,
    color 300ms ease,
    filter 300ms ease;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
/* Tactile press — gentle spring into the surface, then release.
   Combined with the transition above this reads as a soft push
   rather than a click-and-jump. */
.btn:active {
  transform: translateY(1px) scale(0.985);
  transition:
    transform 120ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 120ms ease,
    filter 120ms ease;
  filter: brightness(0.94);
}
.btn:focus-visible {
  outline: 2px solid var(--aurora-teal);
  outline-offset: 3px;
}
.btn--sm { padding: 9px 16px; font-size: 13px; }
.btn--primary {
  background: linear-gradient(135deg, var(--aurora-violet), #6E3DFF);
  color: white;
  box-shadow: 0 8px 28px rgba(138,91,255,0.38), 0 0 0 1px rgba(255,255,255,0.08) inset;
  position: relative;
  overflow: hidden;
}
.btn--primary::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: translateX(-120%);
  transition: transform 700ms cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(138,91,255,0.5), 0 0 30px rgba(34,229,195,0.25); }
.btn--primary:hover::before { transform: translateX(120%); }
.btn--primary:active { transform: translateY(1px) scale(0.985); box-shadow: 0 4px 14px rgba(138,91,255,0.35), 0 0 0 1px rgba(255,255,255,0.08) inset; }
.btn--ghost {
  background: rgba(255,255,255,0.04);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover { background: rgba(255,255,255,0.07); border-color: #34344E; transform: translateY(-1px); }
.btn--ghost:active { transform: translateY(1px) scale(0.985); background: rgba(255,255,255,0.10); }

/* ========== nav — floating centered pill ==========
   The header is a fixed-position floating pill: glass-blurred, centered
   horizontally, lifted off the page edge. Everything inside is laid out
   as one row that's perfectly centered: logo / links / CTA.
   On scroll-down it slides up + fades out; on scroll-up it springs back
   in. On mobile the links collapse into an animated hamburger that opens
   a full-screen overlay menu. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 22px 16px 0;
  pointer-events: none; /* let the pill itself capture pointer; transparent gutters pass through */
}
/* Page-entry animation — only when not running the page-arrive curtain wipe */
body:not(.is-arriving) .nav {
  animation: nav-enter 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes nav-enter {
  0%   { opacity: 0; transform: translate3d(0, -14px, 0) scale(0.96); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

.nav__pill {
  pointer-events: auto;
  display: inline-flex; /* shrink-to-fit, not stretch — keeps the pill compact */
  align-items: center;
  gap: 28px;
  padding: 11px 11px 11px 22px;
  border-radius: 999px;
  background: rgba(12, 12, 20, 0.60);
  border: 1px solid rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 10px 40px rgba(0, 0, 0, 0.35);
  transition:
    background-color 400ms ease,
    border-color 400ms ease,
    box-shadow 400ms ease,
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 400ms ease;
  will-change: transform, opacity;
  max-width: calc(100vw - 32px);
}

/* Scrolled state — slightly more solid + lifted glow */
.nav--scrolled .nav__pill {
  background: rgba(10, 10, 18, 0.72);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 12px 50px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(138, 91, 255, 0.12);
}

/* Logo block */
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--color-text);
  white-space: nowrap;
  transition: opacity 200ms ease;
}
.nav__logo:hover { opacity: 0.85; }
.nav__mark {
  height: 28px;
  width: auto;
  filter: drop-shadow(0 0 14px rgba(124,180,255,0.30));
}

/* Link row */
.nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  color: var(--color-text-muted);
  padding: 0 4px;
}
.nav__links a {
  position: relative;
  padding: 9px 16px;
  border-radius: 999px;
  color: var(--color-text-muted);
  transition: color 220ms ease;
  white-space: nowrap;
}
.nav__links a:hover { color: var(--color-text); }
.nav__links a.is-active { color: var(--color-text); }

/* Sliding active-section indicator — JS sets its left/width via custom props */
.nav__indicator {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 36px;
  transform: translate3d(var(--ind-x, 0), -50%, 0);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    width 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms ease;
  z-index: 0;
}
.nav__indicator.is-on { opacity: 1; }
.nav__links a { z-index: 1; }

/* CTA inside the pill — sized to match the larger pill proportions */
.nav__cta {
  white-space: nowrap;
  padding: 11px 22px;
  font-size: 15px;
}

/* Hamburger — hidden on desktop */
.nav__burger {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.nav__burger:hover { background: rgba(255,255,255,0.08); }
.nav__burger span {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.6px;
  background: var(--color-text);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 380ms cubic-bezier(0.65, 0, 0.35, 1),
    opacity 200ms ease,
    top 380ms cubic-bezier(0.65, 0, 0.35, 1);
  margin-left: -8px;
}
.nav__burger span:nth-child(1) { top: 13px; }
.nav__burger span:nth-child(2) { top: 18.2px; }
.nav__burger span:nth-child(3) { top: 23.4px; }

/* Burger morphs into X when menu is open */
.nav__burger[aria-expanded="true"] span:nth-child(1) {
  top: 18.2px; transform: rotate(45deg);
}
.nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0; transform: scaleX(0);
}
.nav__burger[aria-expanded="true"] span:nth-child(3) {
  top: 18.2px; transform: rotate(-45deg);
}

/* ===== Mobile overlay menu ===== */
.nav__mobile {
  position: fixed;
  inset: 0;
  /* Solid near-black background — the menu must read clearly over any hero
     content. A subtle radial aurora wash at the corners keeps it on-brand. */
  background:
    radial-gradient(60% 50% at 20% 10%, rgba(34, 229, 195, 0.10), transparent 70%),
    radial-gradient(55% 45% at 85% 90%, rgba(138, 91, 255, 0.12), transparent 70%),
    #05050a;
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
  z-index: 49;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 360ms ease, visibility 0s linear 360ms;
}
.nav__mobile.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 360ms ease, visibility 0s linear 0s;
}
.nav__mobile-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: 32px;
}
.nav__mobile-links a {
  display: block;
  padding: 10px 24px;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
              color 200ms ease;
}
.nav__mobile-links a:hover { color: var(--color-primary); }
.nav__mobile.is-open .nav__mobile-links a {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger the link reveal */
.nav__mobile.is-open .nav__mobile-links a:nth-child(1) { transition-delay: 80ms; }
.nav__mobile.is-open .nav__mobile-links a:nth-child(2) { transition-delay: 140ms; }
.nav__mobile.is-open .nav__mobile-links a:nth-child(3) { transition-delay: 200ms; }
.nav__mobile.is-open .nav__mobile-links a:nth-child(4) { transition-delay: 260ms; }
.nav__mobile.is-open .nav__mobile-links a:nth-child(5) { transition-delay: 320ms; }
.nav__mobile.is-open .nav__mobile-links a:nth-child(6) { transition-delay: 380ms; }
.nav__mobile.is-open .nav__mobile-links a:nth-child(7) { transition-delay: 460ms; }
.nav__mobile-cta {
  margin-top: 16px;
  font-size: 16px;
  padding: 14px 28px;
}
/* Lock page scroll when mobile menu is open */
body.nav-open { overflow: hidden; }

/* ===== Responsive: collapse to burger ===== */
@media (max-width: 900px) {
  .nav__links,
  .nav__cta { display: none; }
  .nav__burger { display: inline-block; }
  .nav__pill {
    padding: 8px 8px 8px 16px;
    gap: 12px;
  }
}

@media (max-width: 520px) {
  .nav { padding: 12px 12px 0; }
  .nav__pill { padding: 7px 7px 7px 14px; gap: 10px; }
  .nav__logo { font-size: 13.5px; gap: 8px; }
  .nav__mark { height: 22px; }
  .nav__burger { width: 36px; height: 36px; }
  .nav__burger span:nth-child(1) { top: 12px; }
  .nav__burger span:nth-child(2) { top: 17.2px; }
  .nav__burger span:nth-child(3) { top: 22.4px; }
  .nav__burger[aria-expanded="true"] span:nth-child(1),
  .nav__burger[aria-expanded="true"] span:nth-child(3) { top: 17.2px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav { animation: none; }
  .nav__pill,
  .nav__indicator,
  .nav__burger span,
  .nav__mobile,
  .nav__mobile-links a { transition-duration: 0.01ms; }
}

/* ========== hero ========== */
.hero {
  position: relative;
  text-align: center;
  /* Enough padding-top to clear the floating header pill (~80px tall + 22px
     gap above) without crowding the eyebrow tag. */
  padding-top: clamp(7rem, 13vw, 9rem) !important;
  padding-bottom: var(--space-24) !important;
  /* No overflow:hidden — we fade the halo with a mask instead so the aurora
     dissolves into the galaxy background without a hard horizontal edge. */
}



/* ========== AURORA v2 — Horizontal Folded Ribbons ==========
   Real aurora is not vertical rays shooting down. It's volumetric
   curtains of ionized gas that fold and ripple as they drift across
   the sky. We paint that with SVG: three soft radial-gradient
   ellipses, each warped by an animated feTurbulence + feDisplacementMap
   filter. The displacement distorts the ellipse into an organic,
   folded ribbon; the gaussian blur softens it into glowing light;
   the animated baseFrequency makes the folds slowly breathe and flow.
   Three ribbons stacked with mix-blend-mode: screen give the additive
   luminous look of real aurora against a black sky.
============================================================= */
.aurora-v2 {
  position: absolute;
  /* Bleed wider than the viewport so the radial gradient falloff
     happens OFF-screen — viewers only see the luminous middle of
     each ribbon, never the dim edges. That kills the 'bordered' look
     and gives real edge-to-edge coverage across any screen size. */
  left: 50%;
  top: -160px;
  transform: translateX(-50%);
  width: 140vw;
  height: 900px;
  max-width: none;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* Smooth vertical fade aligned to where the ribbons actually live.
     Ribbons sit in the top 40% of the container; mask holds full
     opacity across that band, then eases to transparent before the
     headline so text stays readable against a mostly-dark sky with
     aurora glowing above it. No hard stops anywhere. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.35) 4%,
    #000 14%,
    #000 42%,
    rgba(0, 0, 0, 0.70) 54%,
    rgba(0, 0, 0, 0.30) 70%,
    rgba(0, 0, 0, 0.08) 85%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.35) 4%,
    #000 14%,
    #000 42%,
    rgba(0, 0, 0, 0.70) 54%,
    rgba(0, 0, 0, 0.30) 70%,
    rgba(0, 0, 0, 0.08) 85%,
    transparent 100%
  );
}

.aurora-v2__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Screen blend so overlapping colors add up to white-hot cores
     and the ribbons bloom against the black background. */
  mix-blend-mode: screen;
  will-change: transform;
}

/* Each ribbon group gets a slow horizontal drift ON TOP of the
   turbulence warping, so the curtain flows sideways like real
   aurora caught in solar wind. Different durations + phases so
   the three layers never sync up — that's what sells "organic". */
.aurora-v2__ribbon {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

.aurora-v2__ribbon--back {
  animation:
    aurora-drift-a 38s ease-in-out infinite,
    aurora-breathe-a 17s ease-in-out infinite;
  opacity: 0.85;
}

.aurora-v2__ribbon--mid {
  animation:
    aurora-drift-b 46s ease-in-out infinite,
    aurora-breathe-b 13s ease-in-out infinite;
  opacity: 0.95;
}

.aurora-v2__ribbon--front {
  animation:
    aurora-drift-c 32s ease-in-out infinite,
    aurora-breathe-c 11s ease-in-out infinite;
  opacity: 0.9;
}

/* ===== Mobile: shrink the ribbons =====
   On narrow screens the aurora dominates the hero — text feels crowded.
   Scale each ribbon down and pull the whole container up so the bands
   read as a slim crown above the headline instead of a full drape. */
@media (max-width: 720px) {
  .aurora-v2 {
    top: -80px;
    height: 520px;
    width: 180vw;
    /* Mask aligned to where ribbons render on mobile — the luminous
       band sits in the top ~55% of the container, then fades into
       the dark sky before the headline. */
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,0.3) 4%,
      #000 14%,
      #000 46%,
      rgba(0, 0, 0, 0.65) 60%,
      rgba(0, 0, 0, 0.25) 76%,
      transparent 100%
    );
            mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,0.3) 4%,
      #000 14%,
      #000 46%,
      rgba(0, 0, 0, 0.65) 60%,
      rgba(0, 0, 0, 0.25) 76%,
      transparent 100%
    );
  }
  .aurora-v2__ribbon--back  { transform-origin: center; }
  .aurora-v2__ribbon--mid   { transform-origin: center; }
  .aurora-v2__ribbon--front { transform-origin: center; }
  /* Keep full ribbon volume on mobile — just softer drift. Scaling
     the ribbons flat made them disappear behind the mask. */
  .aurora-v2__ribbon--back {
    animation:
      aurora-drift-a-mobile 38s ease-in-out infinite,
      aurora-breathe-a 17s ease-in-out infinite;
  }
  .aurora-v2__ribbon--mid {
    animation:
      aurora-drift-b-mobile 46s ease-in-out infinite,
      aurora-breathe-b 13s ease-in-out infinite;
  }
  .aurora-v2__ribbon--front {
    animation:
      aurora-drift-c-mobile 32s ease-in-out infinite,
      aurora-breathe-c 11s ease-in-out infinite;
  }
}

/* Mobile drift variants — gentler horizontal flow, no vertical squish
   so the ribbons keep full volume and remain visible through the mask. */
@keyframes aurora-drift-a-mobile {
  0%   { transform: translate3d(-3%, 0, 0); }
  50%  { transform: translate3d(3%, -1%, 0); }
  100% { transform: translate3d(-3%, 0, 0); }
}
@keyframes aurora-drift-b-mobile {
  0%   { transform: translate3d(2%, 0.5%, 0); }
  50%  { transform: translate3d(-4%, -0.5%, 0); }
  100% { transform: translate3d(2%, 0.5%, 0); }
}
@keyframes aurora-drift-c-mobile {
  0%   { transform: translate3d(-2%, -0.5%, 0); }
  50%  { transform: translate3d(4%, 0.5%, 0); }
  100% { transform: translate3d(-2%, -0.5%, 0); }
}

/* Horizontal drift — ribbons slide sideways through the sky.
   Small vertical component so they also rise/fall slightly. */
@keyframes aurora-drift-a {
  0%   { transform: translate3d(-4%, 0, 0); }
  50%  { transform: translate3d(4%, -2%, 0); }
  100% { transform: translate3d(-4%, 0, 0); }
}
@keyframes aurora-drift-b {
  0%   { transform: translate3d(3%, 1%, 0); }
  50%  { transform: translate3d(-5%, -1%, 0); }
  100% { transform: translate3d(3%, 1%, 0); }
}
@keyframes aurora-drift-c {
  0%   { transform: translate3d(-2%, -1%, 0); }
  50%  { transform: translate3d(5%, 2%, 0); }
  100% { transform: translate3d(-2%, -1%, 0); }
}

/* Brightness breathing — ribbons pulse in and out of visibility
   like real aurora that surges then fades as charged particles
   hit the upper atmosphere. */
@keyframes aurora-breathe-a {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1.00; }
}
@keyframes aurora-breathe-b {
  0%, 100% { opacity: 0.70; }
  50%      { opacity: 1.00; }
}
@keyframes aurora-breathe-c {
  0%, 100% { opacity: 0.50; }
  50%      { opacity: 0.95; }
}


/* ===== Falling light particles =====
   Canvas of tiny drifting motes that look like sun rays / light shafts
   descending through the aurora. Positioned to overlap the full aurora
   area and fade out before reaching the headline. */
.aurora-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  /* Fade particles out toward the bottom so they don't clutter the text. */
  -webkit-mask-image: linear-gradient(to bottom,
      #000 0%, #000 30%, rgba(0,0,0,0.5) 55%, transparent 85%);
          mask-image: linear-gradient(to bottom,
      #000 0%, #000 30%, rgba(0,0,0,0.5) 55%, transparent 85%);
}

@media (prefers-reduced-motion: reduce) {
  .aurora-v2__ribbon { animation: none !important; }
  .aurora-v2__svg feTurbulence animate { display: none; }
  .aurora-particles { display: none; }
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  max-width: 880px;
  margin: 0 auto;
}
.hero__title {
  font-size: var(--text-hero);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}
.hero__title .muted { color: var(--color-text-muted); font-weight: 500; }
.hero__sub {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  max-width: 56ch;
}
.hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-3); }

/* logos strip */
.logos {
  position: relative;
  z-index: 1;
  margin-top: clamp(var(--space-16), 10vw, var(--space-24));
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6);
}
.logos > span { color: var(--color-text-faint); font-size: 13px; }
.logos__viewport {
  width: 100%;
  max-width: var(--content-default);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logos__track {
  display: flex;
  gap: var(--space-12);
  width: max-content;
  animation: logos-scroll 40s linear infinite;
}
.logos__row {
  display: flex; gap: var(--space-12);
  align-items: center;
  flex-shrink: 0;
  padding-right: var(--space-12);
}
.logos__mark {
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 14px;
  color: var(--color-text-muted);
  opacity: 0.7;
  white-space: nowrap;
  transition: color 250ms, opacity 250ms;
}
.logos__mark:hover { color: var(--aurora-teal); opacity: 1; }
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; }
  .logos__viewport { mask-image: none; -webkit-mask-image: none; }
}

/* ========== about ========== */
.about {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6);
}

/* ========== cards (capabilities + process) ========== */
.cards {
  display: grid;
  gap: var(--space-5);
}
.cards--6 { grid-template-columns: repeat(3, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cards--6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .cards--6, .cards--3 { grid-template-columns: 1fr; }
}

.card {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 1.2px) 0 0 / 14px 14px,
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  background-color: rgba(10, 10, 18, 0.55);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 220px;
  transition: transform 400ms cubic-bezier(0.16,1,0.3,1), border-color 400ms, box-shadow 400ms;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(138, 91, 255, 0.4);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 0 30px rgba(34,229,195,0.15);
}
.card h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.card p {
  color: var(--color-text-muted);
  font-size: 14.5px;
  line-height: 1.55;
}
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--aurora-teal), var(--aurora-violet));
  box-shadow: 0 6px 18px rgba(34,229,195,0.28), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 400ms cubic-bezier(0.16,1,0.3,1), box-shadow 400ms;
}
.card:hover .card__icon {
  transform: translateY(-2px) rotate(-3deg);
  box-shadow: 0 10px 28px rgba(34,229,195,0.45), inset 0 1px 0 rgba(255,255,255,0.28);
}
.card__step {
  font-size: 13px;
  color: var(--color-primary);
  letter-spacing: 0.18em;
  font-weight: 600;
}
.card__arrow {
  position: absolute;
  top: var(--space-5); right: var(--space-5);
  width: 36px; height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  font-size: 16px;
}
.card__arrow:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); }

/* ========== services grid ========== */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1000px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .services__grid { grid-template-columns: 1fr; } }

.service-card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(10, 10, 18, 0.55);
  display: flex; flex-direction: column;
  overflow: visible;
  transform: translateZ(0);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 280ms ease-out,
              box-shadow 280ms ease-out;
  isolation: isolate;
  will-change: transform;
}

/* OUTER aurora bleed removed — it was visibly breathing outside the
   card border. Inner ::after wash below stays clipped inside the card. */
.service-card::before { content: none; }

/* INNER aurora wash — glows from within the card, clipped to its rounded shape */
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(70% 90% at 20% 25%, rgba(34, 229, 195, 0.32), transparent 65%),
    radial-gradient(65% 85% at 80% 75%, rgba(138, 91, 255, 0.30), transparent 65%),
    radial-gradient(50% 70% at 55% 50%, rgba(94, 158, 255, 0.18), transparent 75%);
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
  animation: card-aurora-inner 14s ease-in-out infinite;
  will-change: transform;
  mix-blend-mode: screen;
}

/* slow, organic drift — staggered per card via animation-delay */
@keyframes card-aurora {
  0%, 100% {
    transform: translate3d(-3%, -2%, 0) scale(1.05);
    filter: blur(28px) hue-rotate(0deg);
  }
  33% {
    transform: translate3d(3%, -3%, 0) scale(1.12);
    filter: blur(32px) hue-rotate(-12deg);
  }
  66% {
    transform: translate3d(-2%, 3%, 0) scale(1.08);
    filter: blur(30px) hue-rotate(8deg);
  }
}

@keyframes card-aurora-inner {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(4%, -3%, 0) scale(1.08); }
  66% { transform: translate3d(-3%, 4%, 0) scale(1.05); }
}

/* stagger animations across the grid so they don't pulse in unison */
.services__grid .service-card:nth-child(1)::before,
.services__grid .service-card:nth-child(1)::after { animation-delay: 0s; }
.services__grid .service-card:nth-child(2)::before,
.services__grid .service-card:nth-child(2)::after { animation-delay: -2.3s; }
.services__grid .service-card:nth-child(3)::before,
.services__grid .service-card:nth-child(3)::after { animation-delay: -4.6s; }
.services__grid .service-card:nth-child(4)::before,
.services__grid .service-card:nth-child(4)::after { animation-delay: -6.9s; }
.services__grid .service-card:nth-child(5)::before,
.services__grid .service-card:nth-child(5)::after { animation-delay: -9.2s; }
.services__grid .service-card:nth-child(6)::before,
.services__grid .service-card:nth-child(6)::after { animation-delay: -11.5s; }

.service-card:hover {
  transform: translate3d(0, -4px, 0);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(34, 229, 195, 0.18),
    0 0 100px rgba(138, 91, 255, 0.16);
}
.service-card:hover::before {
  opacity: 0.95;
}
.service-card:hover::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .service-card::before,
  .service-card::after { animation: none; }
}
.service-card__body {
  position: relative;
  /* More generous internal padding so content has breathing room and
     doesn't crowd the border on any side. */
  padding: var(--space-8) var(--space-7) var(--space-7);
  display: flex; flex-direction: column;
  gap: var(--space-3);
  z-index: 2;
  background: linear-gradient(180deg, rgba(10, 10, 18, 0.30) 0%, rgba(10, 10, 18, 0.55) 100%);
  border-radius: inherit;
  backdrop-filter: blur(2px);
}
.service-card__body .card__icon {
  margin-bottom: var(--space-2);
}
.service-card__body h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.service-card__body p {
  color: var(--color-text-muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}
.service-card__body .card__arrow {
  margin-top: auto;
  padding-top: var(--space-3);
  align-self: flex-start;
  font-size: 18px;
  opacity: 0.5;
  transition: opacity 220ms ease-out, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.service-card:hover .card__arrow {
  opacity: 1;
  transform: translate3d(4px, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card .card__arrow {
    transition: none;
  }
  .service-card:hover { transform: none; }
}

/* ========== portfolio ========== */
.portfolio { display: flex; flex-direction: column; gap: var(--space-6); }
.feature {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background-color: rgba(10, 10, 18, 0.55);
  overflow: hidden;
  transition: border-color 450ms, box-shadow 450ms;
}
.feature:hover {
  border-color: rgba(138, 91, 255, 0.4);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 40px rgba(34, 229, 195, 0.14);
}
.feature__media img { transition: transform 1200ms cubic-bezier(0.16,1,0.3,1); }
.feature:hover .feature__media img { transform: scale(1.04); }
.feature--reverse { grid-template-columns: 1.1fr 1fr; }
.feature--reverse .feature__body { order: 2; }
.feature--reverse .feature__media { order: 1; }
.feature__body {
  padding: clamp(var(--space-8), 4vw, var(--space-12));
  display: flex; flex-direction: column; gap: var(--space-5);
  justify-content: center;
}
.feature__body h3 {
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.feature__media {
  background: #0a0a13;
  min-height: 360px;
}
.feature__media img {
  width: 100%; height: 100%; object-fit: cover;
}

.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist li {
  position: relative;
  padding-left: 28px;
  color: var(--color-text);
  font-size: 14.5px;
  line-height: 1.5;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-primary)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M5 12l4 4 10-10'/></svg>")
    center / 11px no-repeat;
  box-shadow: 0 0 10px rgba(124,91,255,0.4);
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 5px 11px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: var(--color-text-muted);
  background: rgba(255,255,255,0.025);
}

@media (max-width: 800px) {
  .feature, .feature--reverse { grid-template-columns: 1fr; }
  .feature--reverse .feature__body { order: 2; }
  .feature--reverse .feature__media { order: 1; }
  .feature__media { min-height: 240px; aspect-ratio: 4/3; }
}

/* ========== support / testimonial ========== */
.support__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  text-align: left;
}
.support__copy { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.support__copy .section__title { font-size: var(--text-xl); }
.support__copy p { color: var(--color-text-muted); }
.support__stack {
  position: relative;
  height: 460px;
}
.support__img {
  position: absolute;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}
.support__img--1 { width: 60%; height: 70%; left: 0; top: 0; transform: rotate(-4deg); }
.support__img--2 { width: 55%; height: 60%; right: 0; top: 18%; transform: rotate(3deg); z-index: 2; }
.support__img--3 { width: 50%; height: 55%; left: 18%; bottom: 0; transform: rotate(-2deg); z-index: 1; }

@media (max-width: 800px) {
  .support__inner { grid-template-columns: 1fr; text-align: center; }
  .support__copy { align-items: center; }
  .support__stack { height: 320px; }
}

/* ========== pricing ========== */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.pricing__grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .pricing__grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .pricing__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pricing__grid--4 { grid-template-columns: 1fr; } }

.tier--custom {
  border-style: dashed;
  border-color: rgba(255,255,255,0.18);
}
.tier--custom .tier__price { font-size: 28px; }

.commit-note {
  max-width: 680px;
  margin: var(--space-10) auto 0;
  text-align: center;
  padding: var(--space-5) var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  background-color: rgba(20, 20, 34, 0.4);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.commit-note p { color: var(--color-text-muted); font-size: 14.5px; }
.commit-note strong { color: var(--color-text); }

/* ========== profit boosters ========== */
.boosters__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .boosters__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .boosters__grid { grid-template-columns: 1fr; } }

.booster {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background-color: rgba(20, 20, 34, 0.5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.booster h4 { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.booster p { color: var(--color-text-muted); font-size: 14.5px; line-height: 1.55; }
.booster__price {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.booster__price span { font-size: 13px; color: var(--color-text-muted); font-weight: 500; margin-left: 2px; }
.booster--cta {
  background:
    radial-gradient(circle at 50% 0%, rgba(124,91,255,0.18), transparent 70%),
    rgba(20,20,34,0.6);
  border-color: rgba(124,91,255,0.35);
  justify-content: space-between;
}

.tier {
  position: relative;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background-color: rgba(20, 20, 34, 0.5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.tier--featured {
  border-color: rgba(124,91,255,0.4);
  background:
    radial-gradient(circle at 50% 0%, rgba(124,91,255,0.18), transparent 70%),
    rgba(20,20,34,0.6);
  box-shadow: 0 0 60px rgba(124,91,255,0.18);
}
.tier h3 { font-size: 18px; }
.tier__price {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.tier__price span { font-size: 14px; color: var(--color-text-muted); font-weight: 500; margin-left: 4px; }
.tier__note { color: var(--color-text-muted); font-size: 14px; }
.tier .checklist { margin-top: var(--space-2); }
.tier .btn { margin-top: auto; align-self: flex-start; }

/* ========== faq ========== */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 820px;
  margin: 0 auto;
}
.faq__item {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background-color: rgba(20, 20, 34, 0.5);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  font-size: 18px; line-height: 1;
  flex: none;
  transition: transform var(--transition-interactive), background var(--transition-interactive);
}
.faq__item[open] summary::after { content: "−"; background: var(--color-primary); color: white; border-color: var(--color-primary); }
.faq__item p {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.faq__item p a { color: var(--color-primary); }
.faq__item p a:hover { color: var(--color-primary-hover); }

/* ========== cta / contact ========== */
.cta {
  position: relative;
}
.cta__inner {
  max-width: 820px;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
}
.form {
  width: 100%;
  margin-top: var(--space-8);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background-color: rgba(14, 14, 22, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: var(--space-5);
  text-align: left;
  /* Anchor for the animated aurora gradient backdrop */
  position: relative;
  isolation: isolate;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* NOTE: the rectangular conic gradient that used to sit around the form
   card (.form::before) has been replaced with an organic aurora-wash on
   the enclosing section — see .aurora-wash--magenta on the .cta section.
   The form itself is now a clean rounded card on top of that wash. */
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__field span { font-size: 13px; color: var(--color-text-muted); letter-spacing: -0.005em; }
.form__field input,
.form__field select,
.form__field textarea {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14.5px;
  color: var(--color-text);
  width: 100%;
  font-family: inherit;
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(124,91,255,0.15);
}
.form__field textarea { resize: vertical; min-height: 110px; }

/* Prefill pulse — when a pricing CTA lands the visitor on the form with
   a package already selected, the select briefly glows in the aurora
   teal/violet gradient so the pre-selection is visible without being loud. */
.form__field select.is-prefilled {
  animation: prefill-pulse 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes prefill-pulse {
  0% {
    border-color: rgba(94, 230, 210, 0.9);
    box-shadow: 0 0 0 3px rgba(94, 230, 210, 0.28), 0 0 24px rgba(138, 91, 255, 0.45);
  }
  40% {
    border-color: rgba(138, 91, 255, 0.75);
    box-shadow: 0 0 0 4px rgba(138, 91, 255, 0.22), 0 0 28px rgba(94, 230, 210, 0.30);
  }
  100% {
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 0 rgba(138, 91, 255, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .form__field select.is-prefilled { animation: none; }
}
.form__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.form__optional { font-style: normal; opacity: 0.6; font-size: 12px; margin-left: 4px; }
.form__status { font-size: 13px; color: var(--color-text-muted); min-height: 1em; }
.form__status.is-success { color: #9CFFAA; }
.form__status.is-error { color: #FF8FB1; }
.form__status.is-sending { color: var(--color-text-muted); }

/* Honeypot — positioned off-screen so it's invisible to humans and
   screen readers (via aria-hidden on the wrapper), but present in the
   DOM so form-autofill bots see and fill the "website" field. Any
   submission with a non-empty value is silently rejected by /api/lead. */
.form__honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit button — pending state while the /api/lead call is in flight.
   We don't want a loud spinner (brand tone is quiet confidence) so we
   just dim the button and disable pointer events. */
.btn[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
  cursor: progress;
}

/* ========== footer ========== */
.footer {
  position: relative;
  padding: var(--space-16) var(--space-6) var(--space-10);
  text-align: center;
}
/* No hard divider above footer — let it blend into the page. */
.footer::before { content: none; }
.footer__inner {
  max-width: var(--content-default);
  margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.footer__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.footer__mark { height: 24px; width: auto; }
.footer__addr { color: var(--color-text-muted); font-size: 14px; }
.footer__addr a { color: var(--color-text); }
.footer__addr a:hover { color: var(--color-primary); }
.footer__small { color: var(--color-text-faint); font-size: 12.5px; }

/* ========== hiring teaser (small strip) ========== */
/* A compact strip that announces open roles without disrupting the sales
   flow. Smaller block padding than standard sections, a subtle two-tone
   aurora border so it reads as its own card, and a simple two-column
   layout that collapses on mobile. */
.hiring {
  /* Override default section padding — this is a small strip, not a full section. */
  padding-block: clamp(var(--space-8), 4vw, var(--space-12)) !important;
}
.hiring__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: var(--space-8);
  align-items: center;
  padding: clamp(var(--space-6), 2.5vw, var(--space-10)) clamp(var(--space-6), 3vw, var(--space-12));
  border-radius: var(--radius-xl);
  border: 1px solid rgba(138, 91, 255, 0.22);
  background:
    radial-gradient(120% 180% at 0% 50%, rgba(34, 229, 195, 0.08) 0%, transparent 55%),
    radial-gradient(120% 180% at 100% 50%, rgba(138, 91, 255, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, #0B0B13 0%, #08080E 100%);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.hiring__inner::before {
  /* Faint aurora streak running across the card to tie it to the site. */
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 70%;
  height: 180%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(212, 76, 255, 0.18) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.8;
}
.hiring__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  text-align: left;
}
.hiring__pill { background: rgba(34, 229, 195, 0.10); border-color: rgba(34, 229, 195, 0.28); color: #B9FFEA; }
.hiring__pill-dot { background: var(--aurora-mint); box-shadow: 0 0 10px var(--aurora-mint); }
.hiring__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.hiring__title .muted { color: var(--color-text-muted); font-weight: 500; margin-left: 0.35em; }
.hiring__lede {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 54ch;
  margin: 0;
}
.hiring__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}
.hiring__meta {
  color: var(--color-text-faint);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

@media (max-width: 800px) {
  .hiring__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    text-align: center;
  }
  .hiring__copy { align-items: center; text-align: center; }
  .hiring__actions { align-items: center; }
  .hiring__title .muted { display: block; margin-left: 0; }
}

/* ========== careers page ========== */
.careers-hero {
  padding-block: clamp(var(--space-16), 12vw, var(--space-24)) clamp(var(--space-10), 6vw, var(--space-16)) !important;
  text-align: center;
}
.careers-hero__eyebrow { margin-bottom: var(--space-5); }
.careers-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 auto var(--space-5);
  max-width: 22ch;
}
.careers-hero__lede {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.roles__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 820px;
  margin: 0 auto;
}
.role-card {
  position: relative;
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(12,12,20,0.92) 0%, rgba(8,8,14,0.92) 100%);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.role-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.role-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.2;
  margin: 0;
}
.role-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.role-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.03);
  color: var(--color-text-muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.role-tag--accent { border-color: rgba(138,91,255,0.35); color: #CEBFFF; background: rgba(138,91,255,0.08); }
.role-card__summary { color: var(--color-text-muted); margin: 0; }
.role-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
}
.role-fact__label {
  display: block;
  color: var(--color-text-faint);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.role-fact__value {
  display: block;
  color: var(--color-text);
  font-weight: 600;
  font-size: 15px;
}
.role-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.role-card__list li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--color-text-muted);
  font-size: 15px;
}
.role-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--aurora-mint);
  box-shadow: 0 0 8px var(--aurora-mint);
}
.role-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}

/* Apply section (launches Monday intake in new tab) */
.apply-embed {
  max-width: 720px;
  margin: 0 auto;
}
.apply-embed__head { text-align: center; margin-bottom: var(--space-10); }
.apply-card {
  position: relative;
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  border-radius: var(--radius-xl);
  border: 1px solid rgba(212, 76, 255, 0.22);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(138, 91, 255, 0.08) 0%, transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(212, 76, 255, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, #0B0B13 0%, #08080E 100%);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.apply-card__head { text-align: center; margin-bottom: var(--space-6); }
.apply-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  margin: 0 0 6px;
}
.apply-card__subtitle { margin: 0; color: var(--color-text-muted); font-size: 14px; }
.apply-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: grid;
  gap: var(--space-2);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.apply-card__list li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--color-text-muted);
  font-size: 15px;
}
.apply-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--aurora-magenta);
  box-shadow: 0 0 8px var(--aurora-magenta);
}
.apply-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.apply-card__note {
  text-align: center;
  margin: var(--space-5) 0 0;
  color: var(--color-text-faint);
  font-size: 13px;
}
.btn--lg { padding: 14px 28px; font-size: 16px; }

/* ========== Client Portal / Delivery page ========== */
.delivery-hero {
  position: relative;
  text-align: center;
  padding-top: clamp(var(--space-16), 11vw, var(--space-24)) !important;
  padding-bottom: var(--space-20) !important;
}
.delivery-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.delivery-hero__title {
  font-size: var(--text-hero);
  letter-spacing: -0.025em;
  font-weight: 600;
  line-height: 1.05;
}
.delivery-hero__title .muted { color: var(--color-text-muted); font-weight: 500; }
.delivery-hero__sub {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  max-width: 620px;
}

/* Delivery cards — photo / video panels, reusing .card visual language
   but laid out 2-up with a clearer call-to-action footer. */
.delivery-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (max-width: 760px) { .delivery-cards { grid-template-columns: 1fr; } }

.delivery-card {
  position: relative;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 1.2px) 0 0 / 14px 14px,
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  background-color: rgba(10, 10, 18, 0.6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  isolation: isolate;
  transition: transform 400ms cubic-bezier(0.16,1,0.3,1), border-color 400ms, box-shadow 400ms;
}
.delivery-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(60% 80% at 18% 22%, rgba(34, 229, 195, 0.35), transparent 70%),
    radial-gradient(55% 70% at 82% 78%, rgba(138, 91, 255, 0.35), transparent 70%);
  filter: blur(22px);
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.delivery-card:hover {
  transform: translateY(-4px);
  border-color: rgba(138, 91, 255, 0.4);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55), 0 0 32px rgba(34,229,195,0.18);
}
.delivery-card:hover::before { opacity: 0.7; }

.delivery-card--video::before {
  background:
    radial-gradient(60% 80% at 22% 24%, rgba(212, 76, 255, 0.40), transparent 70%),
    radial-gradient(55% 70% at 80% 76%, rgba(61, 123, 255, 0.40), transparent 70%);
}

.delivery-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}
.delivery-card__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--aurora-teal);
  box-shadow: 0 0 12px rgba(34,229,195,0.65);
}
.delivery-card--video .delivery-card__dot {
  background: var(--aurora-magenta);
  box-shadow: 0 0 12px rgba(212,76,255,0.65);
}
.delivery-card h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  letter-spacing: -0.02em;
  font-weight: 600;
}
.delivery-card p {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.6;
}
.delivery-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.delivery-card ul li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  color: var(--color-text-muted);
}
.delivery-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aurora-teal), var(--aurora-violet));
  box-shadow: 0 0 10px rgba(34,229,195,0.45);
}
.delivery-card--video ul li::before {
  background: linear-gradient(135deg, var(--aurora-magenta), var(--aurora-blue));
  box-shadow: 0 0 10px rgba(212,76,255,0.45);
}

/* Access / unlock panel — the private-delivery messaging block. */
.delivery-access {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.08);
  background-color: rgba(10, 10, 18, 0.55);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.delivery-access h2 {
  font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.5rem);
  letter-spacing: -0.02em;
}
.delivery-access p { color: var(--color-text-muted); max-width: 560px; }
.delivery-access__lock {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--aurora-teal), var(--aurora-violet));
  box-shadow: 0 10px 28px rgba(138,91,255,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* How-it-works row — three quick steps */
.delivery-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .delivery-steps { grid-template-columns: 1fr; } }

/* Footnote */
.delivery-footnote {
  text-align: center;
  color: var(--color-text-faint);
  font-size: 13px;
  margin-top: var(--space-8);
}

/* ============ CLIENT LOGIN PANEL ============
   Sits inside the .delivery-access aurora card on /delivery. Visible by
   default; swapped out for .delivery-view after a successful login. */
.delivery-login {
  width: 100%;
  max-width: 460px;
  margin: var(--space-2) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: left;
}
.delivery-login__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.delivery-login__label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}
.delivery-login__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(8, 8, 14, 0.7);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
  letter-spacing: 0.01em;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.delivery-login__input::placeholder { color: var(--color-text-faint); }
.delivery-login__input:hover {
  border-color: rgba(255,255,255,0.20);
}
.delivery-login__input:focus {
  outline: none;
  border-color: rgba(138,91,255,0.55);
  background: rgba(10, 10, 20, 0.85);
  box-shadow: 0 0 0 3px rgba(138,91,255,0.18), 0 0 22px rgba(34,229,195,0.12);
}
.delivery-login__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.delivery-login__submit {
  width: 100%;
  justify-content: center;
}
.delivery-login__hint {
  color: var(--color-text-faint);
  font-size: 13px;
  text-align: center;
  margin: 0;
}
.delivery-login__error {
  color: #FF9CB6;
  background: rgba(255, 80, 110, 0.08);
  border: 1px solid rgba(255, 80, 110, 0.28);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  text-align: left;
}
.delivery-login__error[hidden] { display: none; }
.delivery-login__submit[data-loading="true"] {
  pointer-events: none;
  opacity: 0.85;
}
.delivery-login__submit[data-loading="true"]::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: var(--space-2);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: dss-spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes dss-spin { to { transform: rotate(360deg); } }

/* ============ PRIVATE DELIVERY VIEW — Pixieset-inspired gallery ============
   The post-login experience is a luxury client gallery: a wide cover band
   with the project title floating over the first photo (or a calm
   gradient), a slim toolbar with the open-in-Drive + sign-out actions, then
   the photos themselves as the main event — either a custom masonry grid
   with a full-screen lightbox, or the Google Drive folder embed framed as
   a gallery window. Lots of breathing room, neutral canvas, minimal
   chrome. */
.delivery-view {
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-6), 3vw, var(--space-10));
}
/* Force `hidden` to beat any explicit display rules so the private area
   can never leak before sign-in. */
.portal-card[hidden],
.delivery-view[hidden],
.gallery-cover[hidden],
.gallery-toolbar[hidden],
.gallery-grid[hidden],
.gallery-window[hidden],
.gallery-empty[hidden],
.gallery-foot[hidden],
.lightbox[hidden] {
  display: none !important;
}

/* When delivered, settle the page background into a deeper, calmer canvas
   so the gallery feels like its own room — Pixieset-style "stage". */
.portal-body.is-delivered {
  background-color: #0a0814;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(138, 91, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 90%, rgba(34, 229, 195, 0.06), transparent 70%);
}

/* === Cover band ============================================== */
.gallery-cover {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: clamp(360px, 56vh, 620px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: clamp(var(--space-8), 5vw, var(--space-12));
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(138, 91, 255, 0.20), transparent 70%),
    linear-gradient(180deg, #14102a 0%, #0a0814 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 40px 100px rgba(0, 0, 0, 0.55);
}
.gallery-cover__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
  transform: scale(1.04);
  filter: saturate(105%);
}
.gallery-cover__media.has-image {
  /* Gentle ken-burns drift so the cover feels alive without distracting. */
  animation: dss-cover-drift 24s ease-in-out infinite alternate;
}
.gallery-cover__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(10, 8, 20, 0.55) 0%,
      rgba(10, 8, 20, 0.35) 35%,
      rgba(10, 8, 20, 0.78) 100%);
}
.gallery-cover__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 60ch;
}
.gallery-cover__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.4em 0.9em;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 8, 20, 0.45);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  align-self: flex-start;
}
.gallery-cover__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aurora-mint);
  box-shadow: 0 0 10px rgba(61, 240, 155, 0.7);
}
.gallery-cover__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.3rem + 4.5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.gallery-cover__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.gallery-cover__client {
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
}
.gallery-cover__sep[hidden],
.gallery-cover__date[hidden],
.gallery-cover__count[hidden],
.gallery-cover__client[hidden],
.gallery-cover__notes[hidden] { display: none; }
.gallery-cover__sep {
  opacity: 0.5;
}
.gallery-cover__notes {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  max-width: 56ch;
  margin: var(--space-2) 0 0;
  line-height: 1.6;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

@keyframes dss-cover-drift {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.08) translate(-1.2%, 1.2%); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-cover__media.has-image { animation: none; }
}

/* === Toolbar ================================================= */
.gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-2);
  flex-wrap: wrap;
}
.gallery-toolbar__label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.8em;
  min-width: 0;
}
.gallery-toolbar__tag {
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}
.gallery-toolbar__project {
  font-size: 15.5px;
  color: #fff;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60ch;
  font-weight: 500;
}
.gallery-toolbar__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.gallery-toolbar__open {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.gallery-toolbar__open-icon {
  transition: transform var(--transition-interactive);
}
.gallery-toolbar__open:hover .gallery-toolbar__open-icon {
  transform: translate(2px, -2px);
}
.gallery-toolbar__signout {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.75);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  padding: 0.4em 0.6em;
  letter-spacing: 0.04em;
  transition: color var(--transition-interactive);
}
.gallery-toolbar__signout:hover { color: #fff; }

/* === Custom photos[] grid (Pixieset-style) =================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(8px, 1vw, 16px);
}
.gallery-tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  cursor: zoom-in;
  isolation: isolate;
  box-shadow: none;
}
.gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
  opacity: 0;
  transition: opacity var(--transition-interactive);
  pointer-events: none;
}
.gallery-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), filter 400ms ease;
  filter: saturate(102%);
}
.gallery-tile:hover .gallery-tile__img,
.gallery-tile:focus-visible .gallery-tile__img {
  transform: scale(1.04);
}
.gallery-tile:hover::after,
.gallery-tile:focus-visible::after {
  opacity: 1;
}
.gallery-tile:focus-visible {
  outline: 2px solid rgba(138, 91, 255, 0.85);
  outline-offset: 3px;
}

/* === Drive iframe fallback — framed as a gallery window ======= */
.gallery-window {
  position: relative;
  isolation: isolate;
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 8, 20, 0.92);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 30px 90px rgba(0, 0, 0, 0.55);
}
.gallery-window__embed {
  display: block;
  width: 100%;
  height: clamp(620px, 78vh, 920px);
  border: 0;
  background: rgba(10, 8, 20, 0.92);
}

/* === Empty state ============================================ */
.gallery-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: clamp(var(--space-8), 6vw, var(--space-12)) var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(10, 8, 20, 0.55);
}
.gallery-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  background: rgba(138, 91, 255, 0.12);
  border: 1px solid rgba(138, 91, 255, 0.30);
}
.gallery-empty__title {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--color-text);
}
.gallery-empty__sub {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 46ch;
}
.gallery-empty__cta {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* === Foot ================================================== */
.gallery-foot {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--space-4);
}
.gallery-foot__line {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  margin: 0;
  letter-spacing: 0.04em;
}
.gallery-foot__help {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  margin: 0;
}
.gallery-foot__help a { color: rgba(255, 255, 255, 0.82); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.25); }
.gallery-foot__help a:hover { color: #fff; text-decoration-color: rgba(255,255,255,0.6); }

/* === Lightbox ==============================================
   Full-screen photo viewer. The image is centered with simple flex
   and constrained by viewport-relative max-width/height so it never
   collapses. Controls are absolutely positioned over the viewport
   so they never reshape the image's layout box.
   The image gets a hard opacity:1 / filter:none reset to neutralize
   any inherited fade/blur classes (e.g. .img-fade).
   The .lightbox element lives as a direct child of <body> (see
   delivery.html) so no transformed/will-change ancestor can establish
   a containing block for its position:fixed — that bug was what pushed
   the image offscreen to the right under .portal[data-reveal]. */
.lightbox:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  margin: 0;
  padding: 0;
}
.lightbox__stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 96px;
  box-sizing: border-box;
  margin: 0;
}
.lightbox__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Neutralize anything inherited (img-fade, reveal transforms, etc.). */
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  position: static !important;
}
.lightbox__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 3vh, 32px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9em 1.2em;
  color: #fff;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  padding: 0 24px;
  margin: 0;
  pointer-events: none;
  z-index: 2;
}
.lightbox__caption > * { pointer-events: auto; }
.lightbox__title {
  color: #fff;
  font-weight: 500;
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lightbox__counter {
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}
.lightbox__download {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
}
.lightbox__download:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}
.lightbox__download[hidden] { display: none; }
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  flex: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.lightbox__nav--prev {
  left: clamp(var(--space-3), 2vw, var(--space-5));
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__nav--next {
  right: clamp(var(--space-3), 2vw, var(--space-5));
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__close {
  top: clamp(var(--space-4), 3vw, var(--space-6));
  right: clamp(var(--space-4), 3vw, var(--space-6));
}
.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.06);
  outline: none;
}
.lightbox__nav--prev:hover,
.lightbox__nav--prev:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.06);
  outline: none;
}
.lightbox__nav--next:hover,
.lightbox__nav--next:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.06);
  outline: none;
}

body.is-lightbox-open { overflow: hidden; }
/* Hide the floating nav pill while the lightbox is up so it can't peek
   through over the photo. */
body.is-lightbox-open .nav { display: none !important; }

/* === Reveal animation ====================================== */
@keyframes dss-delivery-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dss-delivery-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.delivery-view.is-revealing .gallery-cover {
  animation: dss-delivery-rise 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.delivery-view.is-revealing .gallery-toolbar {
  animation: dss-delivery-fade 500ms ease-out 240ms both;
}
.delivery-view.is-revealing .gallery-grid,
.delivery-view.is-revealing .gallery-window,
.delivery-view.is-revealing .gallery-empty {
  animation: dss-delivery-rise 800ms cubic-bezier(0.16, 1, 0.3, 1) 280ms both;
}
.delivery-view.is-revealing .gallery-foot {
  animation: dss-delivery-fade 600ms ease-out 500ms both;
}
@media (prefers-reduced-motion: reduce) {
  .delivery-view.is-revealing .gallery-cover,
  .delivery-view.is-revealing .gallery-toolbar,
  .delivery-view.is-revealing .gallery-grid,
  .delivery-view.is-revealing .gallery-window,
  .delivery-view.is-revealing .gallery-empty,
  .delivery-view.is-revealing .gallery-foot {
    animation: none !important;
  }
}

/* === Mobile tuning ========================================== */
@media (max-width: 720px) {
  .delivery-view { gap: var(--space-6); }
  .gallery-cover {
    min-height: clamp(280px, 50vh, 420px);
    padding: var(--space-7) var(--space-5);
    border-radius: var(--radius-lg);
  }
  .gallery-window__embed {
    height: clamp(560px, 70vh, 760px);
  }
  .gallery-window { border-radius: var(--radius-lg); }
  .gallery-toolbar__open { width: 100%; justify-content: center; }
  .gallery-toolbar { padding: var(--space-2) 0; }
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
  }
  .lightbox__close,
  .lightbox__nav {
    width: 40px;
    height: 40px;
  }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__stage {
    padding: 56px 16px;
  }
  .lightbox__title { max-width: 32ch; }
  .lightbox__download { padding: 8px 12px; font-size: 12.5px; }
}

/* ========== Client Portal shell (revamped) ==========
   Calmer, utility-focused layout for existing clients. Static dark
   branded background — no animated aurora behind the portal — so the
   login card is the focal point and the page renders identically at
   every viewport width with no animated overflow strips. */
.portal-body {
  /* Solid dark-violet base with two static radial washes for brand color.
     Applied to the body so it always covers the full viewport (and the
     html element below it) without any animated layer producing edge
     artifacts. */
  background-color: #0d0a1a;
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 38%, rgba(138, 91, 255, 0.26), transparent 75%),
    radial-gradient(ellipse 80% 55% at 18% 30%, rgba(34, 229, 195, 0.10), transparent 70%),
    radial-gradient(ellipse 80% 55% at 82% 55%, rgba(212, 76, 255, 0.12), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  margin: 0;
  min-width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
}
.portal-main {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(96px, 14vh, 140px) var(--space-5) var(--space-12);
  isolation: isolate;
  overflow-x: hidden;
}

.portal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.portal-card {
  width: 100%;
  padding: var(--space-8) var(--space-6) var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 10, 18, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.portal-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}
.portal-card__lock {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  background: rgba(138, 91, 255, 0.14);
  border: 1px solid rgba(138, 91, 255, 0.35);
}
.portal-card__title {
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 1.875rem);
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
}
.portal-card__sub {
  color: var(--color-text-muted);
  font-size: 14.5px;
  max-width: 360px;
  margin: 0;
}
.portal-card__help {
  color: var(--color-text-faint);
  font-size: 13px;
  text-align: center;
  margin: 0;
}
.portal-card__help a { color: var(--color-text-muted); }
.portal-card__help a:hover { color: var(--color-text); }

/* Tighten the login form inside the portal card. */
.portal-card .delivery-login {
  margin: 0;
  max-width: none;
}
.portal-card .delivery-login__actions { margin-top: var(--space-1); }

/* Portal-mode delivery view — let it span much wider than the login
   card so the gallery feels like the main event. The cover/frame styles
   above handle their own backgrounds, so we only set width here. */
.portal .delivery-view {
  max-width: none;
}
@media (min-width: 720px) {
  .portal { max-width: 1180px; }
  .portal-card {
    max-width: 460px;
    margin: 0 auto;
  }
}
.portal-body.is-delivered .portal-main {
  padding-top: clamp(72px, 9vh, 112px);
  padding-bottom: var(--space-8);
  padding-left: clamp(var(--space-4), 3vw, var(--space-8));
  padding-right: clamp(var(--space-4), 3vw, var(--space-8));
  /* Once delivered, let the gallery size to content rather than stretching
     to the full viewport — prevents a tall dark void below the last row. */
  min-height: 0;
  justify-content: flex-start;
}
.portal-body.is-delivered {
  min-height: 0;
}
.portal-body.is-delivered .portal {
  max-width: 1320px;
}
.portal-body.is-delivered .footer--portal {
  padding: var(--space-5) var(--space-6);
}

/* Slimmer portal footer — single line of contact info, no marketing. */
.footer--portal {
  position: relative;
  z-index: 1;
  padding: var(--space-8) var(--space-6);
}
.footer--portal::before { content: none; }
.footer--portal .footer__inner {
  display: flex;
  justify-content: center;
  text-align: center;
}
.footer--portal .footer__small a { color: var(--color-text-muted); }
.footer--portal .footer__small a:hover { color: var(--color-text); }