/* ==========================================================================
   JAAS CREATIONS - Official Agency Stylesheet (Cosmic Atmospheric Edition)
   Deep obsidian midnight canvas (#06030c), luminous electric purple accents,
   ambient nebula lighting, and a fine tactile matte grain texture.
   ========================================================================== */


:root {
  /* --------------------------------------------------------------------
     Brand palette. Cosmic Violet & Electric Indigo Theme.
     Atmospheric obsidian dark canvas with luminous royal purple accents.
     -------------------------------------------------------------------- */
  --brand-purple: #7928ca;        /* primary electric royal violet */
  --brand-purple-deep: #4c1d95;   /* pressed / recessed deep indigo-violet */
  --brand-purple-lift: #8b5cf6;   /* hover, hairlines, focus luminous violet */
  --brand-magenta: #9333ea;       /* vibrant cosmic purple */
  --brand-green: #10b981;         /* status / active indicators */
  --brand-orange: #c084fc;        /* glowing lilac / energetic purple accent */
  --brand-tint: #c084fc;          /* brand luminous violet tint for text on dark */
  --brand-glow: rgba(139, 92, 246, 0.55);
  --brand-glow-lg: rgba(124, 58, 237, 0.35);

  /* WhatsApp brand green */
  --whatsapp: #25d366;
  --whatsapp-dark: #1da851;

  /* --------------------------------------------------------------------
     Surfaces. Deep obsidian midnight purple-black hierarchy.
     -------------------------------------------------------------------- */
  --surface-0: #06030d;
  --surface-1: #0c0717;
  --surface-2: #140c24;
  --surface-3: #1e1235;

  --border-subtle: rgba(139, 92, 246, 0.16);
  --border-strong: rgba(168, 85, 247, 0.38);
  --border-brand-faint: rgba(139, 92, 246, 0.25);
  --border-brand: rgba(139, 92, 246, 0.45);
  --border-brand-strong: rgba(168, 85, 247, 0.75);

  --text-white: #ffffff;
  --text-soft: #ede9fe;
  --text-muted: #b4a9d4;
  --text-dim: #7f739f;

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-mono-tag: 'Space Grotesk', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale */
  --text-3xs: 0.625rem;
  --text-2xs: 0.703rem;
  --text-xs: 0.79rem;
  --text-sm: 0.889rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.266rem;
  --text-2xl: 1.424rem;
  --text-3xl: 1.602rem;
  --text-4xl: 2.027rem;
  --text-5xl: 2.281rem;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Layout */
  --container-max: 1280px;
  --container-pad: 24px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Shadows with rich cosmic purple undertones */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 10px 30px rgba(10, 4, 20, 0.8);
  --shadow-lg: 0 24px 60px rgba(6, 2, 14, 0.9);
  --shadow-brand: 0 12px 36px rgba(0, 0, 0, 0.55);
  --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.14);

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: #0e051d;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--text-white);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* The page backdrop sits on its own fixed layer instead of using
   background-attachment: fixed on body, which forced a full-screen repaint on
   every scroll frame. Body stays transparent; html carries the base colour. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transform: translateZ(0);
  background-color: #0e051d;
  background-image:
    /* 1. Fine tactile film grain texture applied across the background canvas */
    url('../assets/grain.png'),
    /* 2. Reference Image 1: Main vibrant electric purple light beam cutting diagonally across canvas */
    radial-gradient(ellipse 95% 60% at 88% 12%, rgba(192, 132, 252, 0.88) 0%, rgba(168, 85, 247, 0.72) 20%, rgba(124, 58, 237, 0.48) 45%, rgba(76, 29, 149, 0.22) 70%, transparent 85%),
    /* 3. Reference Image 1: Secondary diagonal cosmic violet glow extending through mid-left */
    radial-gradient(ellipse 85% 55% at 12% 55%, rgba(147, 51, 234, 0.65) 0%, rgba(109, 40, 217, 0.42) 32%, rgba(67, 24, 138, 0.2) 62%, transparent 80%),
    /* 4. Reference Image 2: Top atmospheric royal violet stage spotlight */
    radial-gradient(ellipse 80% 40% at 50% -5%, rgba(168, 85, 247, 0.7) 0%, rgba(124, 58, 237, 0.42) 35%, rgba(76, 29, 149, 0.18) 65%, transparent 82%),
    /* 5. Reference Image 2: Bottom ambient cosmic purple floor glow */
    radial-gradient(ellipse 90% 45% at 50% 105%, rgba(147, 51, 234, 0.62) 0%, rgba(91, 33, 182, 0.38) 38%, rgba(59, 7, 100, 0.18) 65%, transparent 80%),
    /* 6. Deep obsidian midnight violet canvas foundation */
    linear-gradient(160deg, #1f0b3e 0%, #110524 35%, #0e041d 60%, #180832 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 256px 256px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, center, center, center, center, center;
}

/* Atmospheric Service Visual Cards & Alternating Section Styles */
.service-visual-card {
  background: radial-gradient(circle at 65% 25%, rgba(147, 51, 234, 0.55) 0%, rgba(88, 28, 135, 0.5) 45%, rgba(18, 8, 36, 0.98) 100%) !important;
  min-height: 320px;
  border-radius: 16px;
  border: 1px solid var(--border-brand-strong) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  text-align: center;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.service-visual-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--brand-tint) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.service-alt-section {
  background: radial-gradient(ellipse at 85% 40%, rgba(139, 92, 246, 0.24) 0%, transparent 60%),
              radial-gradient(ellipse at 15% 70%, rgba(124, 58, 237, 0.2) 0%, transparent 55%),
              rgba(18, 8, 38, 0.35) !important;
  border-bottom: 1px solid var(--border-subtle);
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button, input, select, textarea {
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   Focus. The stylesheet previously had exactly one :focus rule and no
   :focus-visible at all, so every keyboard user got the browser default or,
   on the form fields, nothing. One ring, applied everywhere, in the brand
   colour with a dark spacer so it stays visible against both the black
   ground and the purple buttons.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brand-tint);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Only suppress the default ring where :focus-visible is supported, so older
   browsers keep theirs rather than losing focus indication entirely. */
:focus:not(:focus-visible) {
  outline: none;
}

/* Keyboard users need to be able to reach the content past a nav repeated on
   every page. There was no skip link. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--brand-purple);
  color: #fff;
  font-family: var(--font-mono-tag);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

[disabled],
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.gst-badge {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
}

/* Sticky Header & Navigation */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-smooth), border-color var(--transition-smooth);
}

.header.scrolled {
  background: rgba(0, 0, 0, 0.98);
  border-bottom-color: var(--border-strong);
}

/* Three columns so the menu sits on the page centre, not in the gap left
   between a wide logo and a narrow CTA. Columns are explicit because the
   menu leaves the flow (fixed drawer) below 992px. */
.navbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
  padding: 14px 0;
}

.navbar > .brand-logo-wrap {
  grid-column: 1;
  justify-self: start;
}

.navbar > .nav-links {
  grid-column: 2;
}

.navbar > .nav-actions {
  grid-column: 3;
  justify-self: end;
}

.brand-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo-img {
  height: 40px;
  width: auto;
}

.brand-text-block {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: 1.2px;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.1;
}

.brand-subtitle {
  font-size: var(--text-3xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.33px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-link {
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.75px;
  position: relative;
  padding: 8px 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
  cursor: pointer;
}

.nav-link:hover, .nav-link.active {
  color: #fff;
}

.nav-link:active {
  transform: translateY(1px);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand-purple-lift);
  transition: width var(--transition-fast);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Contact sits in the mobile menu only; "Talk to Us" covers it on wider screens. */
.nav-item-contact {
  display: none;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--brand-purple);
  color: #fff;
  font-family: var(--font-mono-tag);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.75px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-primary:active {
  transform: translateY(1px);
  background: var(--brand-purple-deep);
  box-shadow: none;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  color: #fff;
  font-family: var(--font-mono-tag);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.75px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

/* This inverted to a white fill but kept white text, so the label disappeared
   on hover. Dark text on the white fill. */
.btn-outline:hover {
  background: #fff;
  color: var(--surface-0);
  border-color: #fff;
}

.btn-outline:active {
  transform: translateY(1px);
}

/* Dark text on the green, not white: white on #25d366 is 1.98:1 and fails
   AA outright. Black is 10.6:1. */
.btn-whatsapp {
  background: var(--whatsapp);
  color: var(--surface-0);
  font-weight: 700;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.btn-whatsapp:hover {
  background: var(--whatsapp-dark);
  box-shadow: none;
  color: var(--surface-0);
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: var(--text-2xl);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

/* This had no hover, focus or press state of any kind. */
.mobile-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

.mobile-menu-toggle:active {
  transform: translateY(1px);
}

/* ==========================================================================
   HERO SECTION - Black & Royal Purple Blend
   ========================================================================== */
/* The header sits in normal flow above the hero, so a
   plain 100svh section would start under a toolbar and read as a panel rather
   than a screen. Pulling .hero-media up by the height of that chrome lets the
   footage run to the very top of the page and sit behind a header that is
   transparent until you scroll. The number only decides how far the film bleeds
   upward behind transparent chrome. js/main.js keeps it equal to the real header
   height; these values are only the no-JS fallback. */
:root {
  --site-chrome: 78px;
}

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: calc(100svh - var(--site-chrome));
  padding: 120px 0 104px;
}

.hero-media {
  position: absolute;
  top: calc(-1 * var(--site-chrome));
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background-color: var(--surface-0);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
}

/* Atmospheric purple vignette & scrim blending into deep space */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 75% 20%, rgba(121, 40, 202, 0.22) 0%, transparent 65%),
    linear-gradient(180deg,
      rgba(6, 3, 12, 0.8) 0%,
      rgba(6, 3, 12, 0.32) 34%,
      rgba(6, 3, 12, 0.68) 78%,
      #06030c 100%),
    linear-gradient(90deg, rgba(6, 3, 12, 0.6) 0%, rgba(6, 3, 12, 0) 62%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Single call to action in the hero, so the stacking margin the shared rule
   carries would only leave a gap above the fold. */
.hero .hero-actions {
  margin-bottom: 0;
}

/* A real anchor, not a caption. No "scroll" label, just the affordance. */
.hero-scroll-link {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.2);
  animation: hero-scroll-drift 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.hero-scroll-link:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

@keyframes hero-scroll-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* The home page is the only one where the chrome floats over footage. */
body.home .header:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* No autoplaying film for anyone who asked for less motion: the poster frame
   stands in, and the scroll affordance stops drifting. */
@media (prefers-reduced-motion: reduce) {
  .hero-media {
    background-image: url('../assets/hero-transition-poster.jpg');
  }

  .hero-video {
    display: none;
  }

  .hero-scroll-link {
    animation: none;
  }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: #ffffff;
}

/* Solid brand colour on the one word, not a gradient clipped through text.
   The span already exists in the markup to single this line out; it does not
   need a three-stop fade to do that job. */
.hero-title .highlight-brand {
  display: block;
  color: var(--brand-tint);
}

.hero-slogan {
  font-family: var(--font-mono-tag);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-slogan::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--brand-orange);
}

.hero-desc {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 36px;
  max-width: 58ch;
}

.intro-overview-text {
  font-size: clamp(1.02rem, 1.2vw, 1.12rem);
  line-height: 1.85;
  color: var(--text-soft);
  max-width: 980px;
  margin: 0 auto 36px auto;
  text-align: center;
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.intro-overview-text.in-view {
  opacity: 1;
  transform: translateX(0);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  margin-bottom: 6px;
}

.stat-label {
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.75px;
  color: var(--text-muted);
}

/* ==========================================================================
   PRODUCTION VERTICALS - 4 BIG EDITORIAL SHOWCASE WINDOWS
   ========================================================================== */
/* Vertical rhythm. Previously a single 100px applied to every section on
   every page, which is what made the pages feel stamped out. Three weights
   now, chosen per section rather than by default. */
.section-padding {
  padding: var(--space-9) 0;
}

.section-padding.rhythm-tight {
  padding: calc(var(--space-8) + var(--space-2)) 0;
}

.section-padding.rhythm-generous {
  padding: calc(var(--space-9) + var(--space-7)) 0;
}

/* #verticals follows the stats row; a full generous top stacked on #intro's
   bottom padding left an oversized gap. */
#verticals.section-padding {
  padding-top: var(--space-8);
}

.section-header-block {
  margin-bottom: 60px;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-mono-tag);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-purple-lift);
  margin-bottom: 12px;
}

.section-title-huge {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 900px;
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--text-muted);
  margin-top: 16px;
  max-width: 64ch;
}

/* 4 Large Modular Showcase Windows */
.verticals-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.vertical-card {
  background: linear-gradient(145deg, rgba(26, 12, 52, 0.96) 0%, rgba(14, 6, 28, 0.98) 100%);
  border: 1px solid var(--border-brand-faint);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md), var(--edge-top);
  transition: border-color var(--transition-smooth), transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.vertical-card:hover {
  border-color: var(--border-brand-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-brand), var(--edge-top);
}

.vertical-card-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: stretch;
}

.vertical-card.reversed .vertical-card-inner {
  grid-template-columns: 1.1fr 1fr;
}

.vertical-card.reversed .vertical-info-side {
  order: 2;
}

.vertical-card.reversed .vertical-media-side {
  order: 1;
}

.vertical-info-side {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vertical-heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  color: #fff;
}

.vertical-description {
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 28px;
}

.vertical-deliverables {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
  margin-bottom: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.deliverable-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--text-soft);
  font-weight: 500;
}

.deliverable-item svg {
  width: 16px;
  height: 16px;
  color: var(--brand-purple-lift);
  flex-shrink: 0;
}

.vertical-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.vertical-cta-row .btn-primary,
.vertical-cta-row .btn-outline {
  flex: 0 1 auto;
  padding: 12px 16px;
  font-size: clamp(0.65rem, 0.9vw, var(--text-sm));
}

/* Media Side (Animation Ready Window) */
.vertical-media-side {
  position: relative;
  background: rgba(16, 8, 32, 0.7);
  border-left: 1px solid var(--border-subtle);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.vertical-card.reversed .vertical-media-side {
  border-left: none;
  border-right: 1px solid var(--border-subtle);
}

.media-canvas-viewport {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  z-index: 2;
}

.media-visual-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

.vertical-card:hover .media-visual-backdrop {
  opacity: 0.38;
  transform: scale(1.03);
}

/* Project photo filling the media side, captioned bottom-left with the job. */
.media-canvas-viewport.has-photo {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 28px 32px;
  text-align: left;
  overflow: hidden;
}

.viewport-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.media-canvas-viewport.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(6, 3, 12, 0) 45%, rgba(6, 3, 12, 0.88) 100%);
  pointer-events: none;
}

.vertical-card:hover .viewport-photo {
  transform: scale(1.03);
}

.has-photo .viewport-label {
  font-size: var(--text-lg);
  margin-bottom: 4px;
}

.has-photo .viewport-hint {
  color: rgba(255, 255, 255, 0.72);
  max-width: none;
}

/* Stylized placeholder graphics for each vertical. */
.bg-stall {
  background: linear-gradient(135deg, rgba(121, 40, 202, 0.6), rgba(12, 7, 23, 0.95)),
              radial-gradient(circle at center, var(--brand-purple) 0%, transparent 70%);
}

.bg-corporate {
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.6), rgba(12, 7, 23, 0.95)),
              radial-gradient(circle at center, var(--brand-purple-deep) 0%, transparent 70%);
}

.bg-concert {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.5), rgba(12, 7, 23, 0.95)),
              radial-gradient(circle at center, var(--brand-purple-lift) 0%, transparent 70%);
}

.bg-wedding {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.55), rgba(12, 7, 23, 0.95)),
              radial-gradient(circle at center, var(--brand-magenta) 0%, transparent 70%);
}

.viewport-icon-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.18);
  border: 1px solid var(--border-brand-strong);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #fff;
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.vertical-card:hover .viewport-icon-circle {
  transform: scale(1.1);
  background: var(--brand-purple-lift);
  box-shadow: none;
}

.viewport-icon-circle svg {
  width: 36px;
  height: 36px;
}

.viewport-label {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.33px;
  color: #fff;
  margin-bottom: 6px;
}

.viewport-hint {
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  color: var(--text-muted);
  max-width: 320px;
}

/* ==========================================================================
   IN-HOUSE FABRICATION & TECHNICAL CAPABILITIES (ATMOSPHERIC MATRIX)
   ========================================================================== */
.light-section-contrast {
  background-color: rgba(14, 7, 28, 0.45);
  color: #ffffff;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.light-section-contrast .section-title-huge {
  color: #ffffff;
}

.light-section-contrast .section-subtitle {
  color: var(--text-muted);
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  row-gap: 0;
  counter-reset: capability;
}

.capability-card {
  /* Read as a spec sheet: numbered columns under a rule, no card chrome. */
  border-top: 1px solid var(--border-brand);
  padding: 22px 8px 48px 0;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-items: start;
  counter-increment: capability;
}

.capability-card > div::before {
  content: counter(capability, decimal-leading-zero);
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
  color: var(--brand-tint);
}

/* Asymmetric Bento Layout */
.capability-card.span-7 {
  grid-column: span 7;
}

.capability-card.span-5 {
  grid-column: span 5;
}

.capability-card.span-4 {
  grid-column: span 4;
}

.capability-card.span-8 {
  grid-column: span 8;
}

.capability-card.span-6 {
  grid-column: span 6;
}

.capability-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.capability-text {
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.capability-specs-list {
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cap-spec {
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cap-spec::before {
  content: '■';
  color: var(--brand-tint);
  font-size: var(--text-3xs);
}

/* ==========================================================================
   4-STAGE EXECUTION WORKFLOW (BLACK & PURPLE BLEND)
   ========================================================================== */
.workflow-section {
  background: transparent;
  border-top: 1px solid var(--border-subtle);
}

.workflow-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  margin-top: 40px;
}

.workflow-timeline::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-purple), var(--brand-tint));
  z-index: 1;
  opacity: 0.4;
}

.workflow-step-card {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(26, 12, 50, 0.95) 0%, rgba(14, 6, 28, 0.98) 100%);
  border: 1px solid var(--border-brand-faint);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), var(--edge-top);
  transition: border-color var(--transition-smooth), transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.workflow-step-card:hover {
  border-color: var(--border-brand-strong);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
}

.step-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(121, 40, 202, 0.25);
  border: 2px solid var(--border-brand-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono-tag);
  font-weight: 800;
  font-size: var(--text-md);
  color: var(--brand-tint);
  margin-bottom: 24px;
  box-shadow: none;
}

.step-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}

.step-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

/* ==========================================================================
   INTERACTIVE QUOTE & SPECIFICATION DESK
   ========================================================================== */
.quote-section {
  background: rgba(14, 7, 28, 0.55);
  border-top: 1px solid var(--border-subtle);
}

.quote-layout-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: flex-start;
}

.quote-info-panel h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 20px;
}

.quote-info-panel p {
  color: var(--text-muted);
  font-size: var(--text-md);
  line-height: 1.7;
  margin-bottom: 36px;
}

.direct-contact-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.direct-contact-card {
  background: linear-gradient(145deg, rgba(26, 12, 50, 0.95) 0%, rgba(14, 6, 28, 0.98) 100%);
  border: 1px solid var(--border-brand-faint);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.direct-contact-card:hover {
  border-color: var(--brand-purple-lift);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

.card-icon-box {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: rgba(121, 40, 202, 0.25);
  border: 1px solid var(--border-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: none;
}

.card-icon-box svg {
  width: 22px;
  height: 22px;
}

.card-detail-label {
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.card-detail-val {
  font-size: var(--text-md);
  font-weight: 700;
  color: #fff;
}

/* Quote & Talk Form Container (AMOLED Panel) */
.quote-form-card {
  background: linear-gradient(145deg, rgba(26, 12, 52, 0.96) 0%, rgba(14, 6, 28, 0.98) 100%);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-xl);
  padding: 44px 40px;
  box-shadow: var(--shadow-lg), var(--edge-top);
}

.form-header-text {
  margin-bottom: 28px;
}

.form-header-text h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.33px;
  color: var(--text-soft);
}

.form-control {
  background: var(--surface-0);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: #fff;
  font-size: var(--text-md);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus-visible {
  outline: 2px solid var(--brand-tint);
  outline-offset: 2px;
  border-color: var(--brand-purple-lift);
  background: var(--surface-1);
}

.form-control:focus {
  border-color: var(--brand-purple-lift);
  background: var(--surface-1);
  box-shadow: 0 0 0 3px rgba(121, 40, 202, 0.45);
}

.form-control::placeholder {
  color: var(--text-dim);
}

select.form-control option {
  background: var(--surface-1);
  color: #fff;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

.form-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.btn-full {
  width: 100%;
}

.form-note {
  font-size: var(--text-xs);
  color: var(--text-dim);
  text-align: center;
  margin-top: 12px;
}

.form-note a {
  color: var(--brand-tint);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   OFFICIAL BUSINESS FOOTER & LOCAL CREDENTIALS (AMOLED)
   ========================================================================== */
.footer {
  background: rgba(8, 4, 16, 0.88);
  border-top: 1px solid var(--border-subtle);
  padding: 80px 0 30px;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 0.9fr 1.2fr;
  gap: 48px;
  margin-bottom: 60px;
}

.footer-brand-bio {
  margin-top: 20px;
  color: var(--text-muted);
  font-size: var(--text-md);
  line-height: 1.7;
  max-width: 42ch;
}

.footer-col-title {
  font-family: var(--font-mono-tag);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  margin-bottom: 24px;
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-list a {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.footer-links-list a:hover {
  color: #fff;
  padding-left: 4px;
}

.footer-office-address {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: 16px;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-soft);
  font-size: var(--text-sm);
  margin-bottom: 8px;
}

.footer-bottom-bar {
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.gst-highlight-box {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid var(--border-brand);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono-tag);
  color: var(--brand-tint);
}

/* Floating Quick Actions (Mobile & Desktop) */
.floating-actions-dock {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.floating-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.floating-btn:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-md);
}

.floating-btn:active {
  transform: scale(0.98);
}

.floating-btn.btn-wa {
  background: var(--whatsapp);
}

.floating-btn.btn-call {
  background: var(--brand-purple-lift);
}

.floating-btn svg {
  width: 26px;
  height: 26px;
}

/* ==========================================================================
   SUBPAGE & DYNAMIC MULTI-PAGE STYLES
   ========================================================================== */
.page-hero {
  position: relative;
  padding: 80px 0 60px;
  background: 
    radial-gradient(ellipse 75% 65% at 85% 15%, rgba(139, 92, 246, 0.45) 0%, rgba(91, 33, 182, 0.22) 45%, transparent 68%),
    radial-gradient(ellipse 55% 55% at 15% 85%, rgba(124, 58, 237, 0.28) 0%, transparent 60%),
    rgba(6, 3, 13, 0.6);
  border-bottom: 1px solid var(--border-brand-faint);
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  color: var(--text-dim);
  margin-bottom: 20px;
  letter-spacing: 0.33px;
}

.breadcrumb-nav a {
  color: var(--text-soft);
}

.breadcrumb-nav a:hover {
  color: #fff;
  text-decoration: underline;
}

.breadcrumb-nav .separator {
  color: var(--brand-purple-lift);
}

.breadcrumb-nav .current {
  color: var(--brand-tint);
}

.page-title-massive {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.page-hero-desc {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 68ch;
  line-height: 1.7;
}

.page-hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}

/* Deep Feature Cards */
.deep-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}

/* Dynamic Grid Bento Layouts */
#layout .grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 28px;
}

/* grid-1 */
#layout [data-grid="1"] .item:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
#layout [data-grid="1"] .item:nth-child(2) { grid-column: 2; grid-row: 1; }
#layout [data-grid="1"] .item:nth-child(3) { grid-column: 1; grid-row: 3; }
#layout [data-grid="1"] .item:nth-child(4) { grid-column: 2; grid-row: 2 / 4; }

#layout [data-grid="2"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
#layout [data-grid="2"] .item:nth-child(1),
#layout [data-grid="2"] .item:nth-child(4) { grid-row: 1 / 3; }

#layout [data-grid="3"] .item:nth-child(4) { grid-column: 1; grid-row: 1; }
#layout [data-grid="3"] .item:nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
#layout [data-grid="3"] .item:nth-child(2) { grid-column: 1; grid-row: 2 / 4; }
#layout [data-grid="3"] .item:nth-child(1) { grid-column: 2; grid-row: 3; }

#layout [data-grid="4"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
#layout [data-grid="4"] .item:nth-child(1) { grid-column: 1; grid-row: 1; }
#layout [data-grid="4"] .item:nth-child(2) { grid-column: 1; grid-row: 2; }
#layout [data-grid="4"] .item:nth-child(3),
#layout [data-grid="4"] .item:nth-child(4) { grid-row: 1 / 3; }

/* Direct support if data-grid is placed on .grid-layout inside #layout */
#layout.grid-layout,
#layout[data-grid] {
  display: grid;
  gap: 28px;
}
#layout[data-grid="1"] .item:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
#layout[data-grid="1"] .item:nth-child(2) { grid-column: 2; grid-row: 1; }
#layout[data-grid="1"] .item:nth-child(3) { grid-column: 1; grid-row: 3; }
#layout[data-grid="1"] .item:nth-child(4) { grid-column: 2; grid-row: 2 / 4; }

#layout[data-grid="2"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
#layout[data-grid="2"] .item:nth-child(1),
#layout[data-grid="2"] .item:nth-child(4) { grid-row: 1 / 3; }

#layout[data-grid="3"] .item:nth-child(4) { grid-column: 1; grid-row: 1; }
#layout[data-grid="3"] .item:nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
#layout[data-grid="3"] .item:nth-child(2) { grid-column: 1; grid-row: 2 / 4; }
#layout[data-grid="3"] .item:nth-child(1) { grid-column: 2; grid-row: 3; }

#layout[data-grid="4"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
#layout[data-grid="4"] .item:nth-child(1) { grid-column: 1; grid-row: 1; }
#layout[data-grid="4"] .item:nth-child(2) { grid-column: 1; grid-row: 2; }
#layout[data-grid="4"] .item:nth-child(3),
#layout[data-grid="4"] .item:nth-child(4) { grid-row: 1 / 3; }

.deep-card {
  background: linear-gradient(145deg, rgba(26, 12, 50, 0.95) 0%, rgba(14, 6, 28, 0.98) 100%);
  border: 1px solid var(--border-brand-faint);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), var(--edge-top);
  transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.deep-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-brand-strong);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}

.deep-card-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-sm);
  background: rgba(121, 40, 202, 0.25);
  border: 1px solid var(--border-brand-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-tint);
  margin-bottom: 24px;
  box-shadow: none;
}

.deep-card-icon svg {
  width: 24px;
  height: 24px;
}

.deep-card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px;
}

.deep-card-desc {
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: 1.6;
}

/* Specification Tables (AMOLED) */
.table-hint {
  display: none;
}

.spec-table-wrap {
  background: linear-gradient(145deg, rgba(22, 11, 42, 0.7) 0%, rgba(10, 5, 20, 0.85) 100%);
  border: 1px solid var(--border-brand-faint);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.spec-table th {
  background: rgba(28, 14, 54, 0.8);
  padding: 16px 24px;
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  letter-spacing: 0.33px;
  color: var(--brand-tint);
  border-bottom: 1px solid var(--border-brand-faint);
}

.spec-table td {
  padding: 18px 24px;
  font-size: var(--text-md);
  color: var(--text-soft);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.spec-table tr:last-child td {
  border-bottom: none;
}

.spec-table tr:hover td {
  background: rgba(139, 92, 246, 0.08);
}

/* Internal Page CTAs (Cosmic Atmospheric Banner) */
.subpage-cta-banner {
  background: radial-gradient(circle at center, rgba(139, 92, 246, 0.45) 0%, rgba(76, 29, 149, 0.45) 50%, rgba(14, 7, 28, 0.95) 100%) !important;
  border: 1px solid var(--border-brand-strong) !important;
  border-radius: var(--radius-xl);
  padding: 60px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 60px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.subpage-cta-text h3 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
}

.subpage-cta-text p {
  color: var(--text-muted);
  font-size: var(--text-md);
  max-width: 56ch;
}

/* Dynamic Interactive Quote & Cost Estimator */
.estimator-container {
  background: linear-gradient(145deg, rgba(24, 12, 48, 0.8) 0%, rgba(10, 5, 20, 0.9) 100%);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-xl);
  padding: 48px;
  margin-top: 40px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.estimator-step-title {
  font-family: var(--font-mono-tag);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--brand-tint);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.calc-options-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}

.calc-pill {
  background: rgba(22, 11, 42, 0.75);
  border: 1px solid var(--border-brand-faint);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  user-select: none;
}

.calc-pill:hover {
  border-color: var(--brand-purple-lift);
  background: rgba(38, 18, 72, 0.85);
  box-shadow: none;
}

.calc-pill.selected {
  border-color: var(--brand-tint);
  background: rgba(121, 40, 202, 0.35);
  box-shadow: 0 0 0 2px var(--brand-purple-lift);
}

.calc-pill-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.calc-pill-sub {
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.estimator-summary-box {
  background: linear-gradient(145deg, rgba(32, 16, 64, 0.85) 0%, rgba(14, 7, 28, 0.95) 100%);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  box-shadow: none;
}

.estimator-summary-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.summary-scope-label {
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.summary-scope-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: #fff;
}

/* Megamenu Dropdown */
.has-dropdown { position: relative; }
.dropdown-megamenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(15px); background: rgba(12, 6, 24, 0.95); border: 1px solid var(--border-brand-strong); min-width: 540px; display: grid; grid-template-columns: repeat(2, minmax(210px, 1fr)); gap: 28px; padding: 26px 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.85); border-radius: 12px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; transform-origin: top; margin-top: 15px; z-index: 1000; backdrop-filter: blur(24px); }
.dropdown-megamenu--single, .dropdown-megamenu:has(:where(> .dropdown-col:only-child)) { min-width: 280px; grid-template-columns: 1fr; }
.has-dropdown:hover .dropdown-megamenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown-col { display: flex; flex-direction: column; gap: 14px; }
.dropdown-category-title { font-family: var(--font-mono-tag); font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--brand-purple-lift); padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 2px; }
.dropdown-col a { color: var(--text-soft); font-size: 0.95rem; text-decoration: none; transition: color 0.2s ease, padding 0.2s ease; }
.dropdown-col a:hover { color: var(--brand-tint); padding-left: 4px; }

/* Quote & Story Layout Grid */
.quote-layout-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 992px) {
  .quote-layout-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Card Flip Effect for CEO */
.flip-card-container {
  perspective: 2000px;
  width: 100%;
  height: 480px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.77,0,0.175,1);
}
.flip-card-container:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(24, 12, 48, 0.85) 0%, rgba(12, 6, 24, 0.95) 100%);
  border: 1px solid var(--border-brand);
  box-shadow: var(--shadow-lg), var(--edge-top);
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.flip-card-front {
  background: linear-gradient(145deg, rgba(28, 14, 56, 0.9) 0%, rgba(10, 5, 20, 0.95) 100%);
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.flip-card-back {
  transform: rotateY(180deg);
}

.flip-glow-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.flip-glow-ring {
  position: absolute;
  border-radius: 50%;
  box-shadow: none;
  animation: flipRipple 3s linear infinite;
  opacity: 0;
}
@keyframes flipRipple {
  0% { transform: scale(0.1); opacity: 0; box-shadow: none; }
  50% { opacity: 1; box-shadow: none; }
  100% { transform: scale(1.5); opacity: 0; box-shadow: none; }
}
.flip-card-front-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.flip-card-front-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(121, 40, 202, 0.25);
  border: 2px solid var(--border-brand-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--brand-tint);
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}
.flip-card-container:hover .flip-card-front-icon {
  transform: scale(1.1);
}


/* ==========================================================================
   CONTACT PAGE REDESIGN
   ========================================================================== */
.contact-layout-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 992px) {
  .contact-layout-grid {
    grid-template-columns: 1fr;
  }
}

.contact-card-panel {
  background: linear-gradient(145deg, rgba(26, 12, 52, 0.96) 0%, rgba(14, 6, 28, 0.98) 100%);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-lg), var(--edge-top);
}

.contact-badge {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(121, 40, 202, 0.25);
  border: 1px solid var(--border-brand-strong);
  color: var(--brand-tint);
  font-family: var(--font-mono-tag);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 100px;
  margin-bottom: 16px;
  box-shadow: none;
}

.contact-channel-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.contact-channel-row:last-child {
  border-bottom: none;
}

.contact-channel-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid var(--border-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-tint);
  box-shadow: none;
}

.contact-channel-details {
  display: flex;
  flex-direction: column;
}

.contact-channel-label {
  font-family: var(--font-mono-tag);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.contact-channel-value {
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Contact Form */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-soft);
}

.form-label span.optional {
  font-weight: 400;
  color: var(--text-dim);
  font-size: 0.8rem;
  margin-left: 4px;
}

.form-input, .form-select, .form-textarea {
  background: rgba(18, 9, 36, 0.7);
  border: 1px solid var(--border-brand-faint);
  border-radius: 8px;
  padding: 14px 16px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--brand-tint);
  background: rgba(28, 14, 56, 0.85);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.45);
}

.phone-input-group {
  display: flex;
  align-items: stretch;
  border-radius: 8px;
  transition: box-shadow 0.25s ease;
}

.phone-prefix {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-brand-faint);
  border-right: none;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 14px 16px;
  color: var(--brand-tint);
  font-weight: 600;
  display: flex;
  align-items: center;
  user-select: none;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.phone-field {
  flex: 1;
  min-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.phone-input-group:focus-within .phone-prefix {
  border-color: var(--brand-tint);
}

/* Validation States */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: #f87171;
  background: rgba(69, 10, 20, 0.35);
}

.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.35);
}

.phone-input-group.is-invalid .phone-prefix {
  border-color: #f87171;
  background: rgba(69, 10, 20, 0.35);
  color: #fca5a5;
}

.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid {
  border-color: rgba(52, 211, 153, 0.55);
}

.phone-input-group.is-valid .phone-prefix {
  border-color: rgba(52, 211, 153, 0.55);
}

.form-error {
  display: none;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #fca5a5;
  font-weight: 500;
  margin-top: 2px;
}

.form-error.visible {
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-error.visible::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(248, 113, 113, 0.22);
  border: 1px solid #f87171;
  color: #fca5a5;
  font-size: 0.68rem;
  font-weight: 800;
  flex-shrink: 0;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-submit-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #7928ca 50%, #4c1d95 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 16px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all 0.3s ease;
  width: 100%;
}

.form-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff;
}

/* ==========================================================================
   CLIENT LOGO MARQUEE (two rows, opposite directions, seamless loop)
   Each track holds the logo set twice; sliding it by exactly -50% lands on
   an identical frame, so the loop never shows a jump. Spacing is margin on
   every card (not flex gap) to keep both halves exactly equal in width.
   ========================================================================== */
.client-marquee {
  --logo-card-w: 220px;
  --logo-card-h: 76px;
  --logo-card-gap: 26px;
  --logo-row-gap: 22px;
  position: relative;
  width: 100%;
  margin-top: var(--space-7, 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--logo-row-gap);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.client-marquee-row {
  /* Height reserved before logos load: no layout shift */
  height: calc(var(--logo-card-h) + 12px);
  padding: 6px 0;
  box-sizing: border-box;
}

.client-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation:
    client-marquee var(--marquee-duration, 100s) linear infinite,
    client-marquee-in 0.9s ease-out both;
}

.client-marquee-row[data-direction="right"] .client-marquee-track {
  animation-direction: reverse, normal;
}

.client-marquee-set {
  display: flex;
  flex-shrink: 0;
}

@keyframes client-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes client-marquee-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.client-logo-card {
  position: relative;
  flex-shrink: 0;
  width: var(--logo-card-w);
  height: var(--logo-card-h);
  margin-right: var(--logo-card-gap);
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* White slanted card behind the (unskewed) logo */
.client-logo-card::before {
  content: '';
  position: absolute;
  inset: 0 calc(var(--logo-card-h) * 0.17);
  z-index: -1;
  background: #ffffff;
  border: 1px solid var(--border-brand-faint);
  border-radius: 10px;
  transform: skewX(-18deg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition: box-shadow 300ms ease, border-color 300ms ease;
}

.client-logo-card img {
  display: block;
  width: 64%;
  height: 62%;
  object-fit: contain;
  transform: scale(var(--logo-scale, 1));
  opacity: 0.9;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 300ms ease;
}

@media (hover: hover) {
  .client-logo-card:hover {
    transform: translateY(-3px);
  }

  .client-logo-card:hover::before {
    border-color: var(--brand-purple-lift);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  }

  .client-logo-card:hover img {
    opacity: 1;
  }
}

@media (max-width: 1024px) {
  .client-marquee {
    --logo-card-w: 180px;
    --logo-card-h: 64px;
    --logo-card-gap: 20px;
    --logo-row-gap: 16px;
  }
}

@media (max-width: 600px) {
  .client-marquee {
    --logo-card-w: 148px;
    --logo-card-h: 56px;
    --logo-card-gap: 14px;
    --logo-row-gap: 12px;
    margin-top: var(--space-6, 32px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }

  .client-logo-card img {
    width: 68%;
    height: 64%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .client-marquee-row {
    height: auto;
  }

  .client-marquee-track {
    width: 100%;
    animation: none;
    transform: none;
  }

  .client-marquee-set {
    flex-shrink: 1;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--logo-row-gap);
    width: 100%;
  }

  .client-marquee-set[aria-hidden="true"] {
    display: none;
  }

  .client-logo-card,
  .client-logo-card::before {
    transition: none;
  }
}




/* ==========================================================================
   UIVERSE ANIMATED BUTTON (THEMED FOR JAAS CREATIONS)
   ========================================================================== */
.animated-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 40px;
  border: 2px solid var(--border-brand);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: var(--brand-purple);
  border-radius: 8px;
  color: #ffffff;
  box-shadow: none;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button svg {
  position: absolute;
  width: 22px;
  height: 22px;
  fill: #ffffff;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
  right: 18px;
}

.animated-button .arr-2 {
  left: -25%;
}

.animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: var(--brand-tint);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
  position: relative;
  z-index: 1;
  transform: translateX(-10px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  white-space: nowrap;
}

.animated-button:hover {
  box-shadow: 0 0 0 4px rgba(121, 40, 202, 0.35);
  color: #ffffff;
  border-radius: 8px;
  border-color: var(--brand-tint);
}

.animated-button:hover .arr-1 {
  right: -25%;
}

.animated-button:hover .arr-2 {
  left: 18px;
}

.animated-button:hover .text {
  transform: translateX(10px);
}

.animated-button:hover svg {
  fill: #ffffff;
}

.animated-button:active {
  transform: scale(0.95);
  box-shadow: 0 0 0 4px var(--brand-tint);
}

.animated-button:hover .circle {
  width: 320px;
  height: 320px;
  opacity: 1;
}

/* ==========================================================================
   SCROLL & POP-UP ANIMATIONS
   ========================================================================== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

.animate-slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-slide-left.in-view {
  opacity: 1;
  transform: translateX(0);
}

.animate-slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-slide-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Fast Spring Pop-up / Pop-in Directional Animations */
.animate-pop-left {
  opacity: 0;
  transform: translateX(-60px) scale(0.92);
  transition: opacity 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.animate-pop-left.in-view {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.animate-pop-right {
  opacity: 0;
  transform: translateX(60px) scale(0.92);
  transition: opacity 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.animate-pop-right.in-view {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.animate-pop-up {
  opacity: 0;
  transform: translateY(60px) scale(0.92);
  transition: opacity 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.animate-pop-up.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.animate-pop-down {
  opacity: 0;
  transform: translateY(-60px) scale(0.92);
  transition: opacity 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.animate-pop-down.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ==========================================================================
   FLIP FADE 3D TEXT ANIMATION
   ========================================================================== */
.flip-fade-wrapper {
  perspective: 1000px;
  display: block;
  transform-style: preserve-3d;
}

.flip-fade-word-container {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.28em;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.flip-fade-word-token {
  display: inline-flex;
  white-space: nowrap;
  gap: 0.04em;
  transform-style: preserve-3d;
}

.flip-fade-letter {
  display: inline-block;
  transform-style: preserve-3d;
  opacity: 0;
  transform: rotateX(90deg) translateY(20px);
  transition: 
    transform 0.6s cubic-bezier(0.2, 0.65, 0.3, 0.9),
    opacity 0.6s cubic-bezier(0.2, 0.65, 0.3, 0.9);
}

.flip-fade-letter.animate-in {
  opacity: 1;
  transform: rotateX(0deg) translateY(0px);
}

.flip-fade-letter.animate-out {
  opacity: 0;
  transform: rotateX(-90deg) translateY(-20px);
  transition: 
    transform 0.4s ease-in,
    opacity 0.4s ease-in;
}

/* ==========================================================================
   SERVICE CATALOG & MEDIA PLACEHOLDER BLANKS
   ========================================================================== */
.service-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

@media (max-width: 1100px) {
  .service-catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .service-catalog-grid {
    grid-template-columns: 1fr;
  }
}

.service-catalog-card {
  background: linear-gradient(145deg, rgba(24, 11, 46, 0.85) 0%, rgba(12, 6, 24, 0.95) 100%);
  border: 1px solid var(--border-brand-faint);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), var(--edge-top);
  transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
  position: relative;
}

.service-catalog-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-brand-strong);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75);
}

/* Image Blank / Placeholder Frame */
.service-media-blank {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 200px;
  background: radial-gradient(circle at 50% 40%, rgba(139, 92, 246, 0.18) 0%, rgba(20, 9, 38, 0.9) 80%);
  border-bottom: 1px dashed var(--border-brand-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all var(--transition-smooth);
}

.service-media-blank::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(192, 132, 252, 0.3);
  border-radius: var(--radius-md);
  pointer-events: none;
  transition: border-color var(--transition-fast);
}

.service-catalog-card:hover .service-media-blank::before {
  border-color: rgba(192, 132, 252, 0.7);
}

.service-media-blank img.service-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-smooth);
}

.service-catalog-card:hover .service-media-blank img.service-card-img {
  transform: scale(1.05);
}

.placeholder-visual-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 16px;
  z-index: 2;
}

.placeholder-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(121, 40, 202, 0.25);
  border: 1px solid var(--border-brand-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-tint);
  box-shadow: none;
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.service-catalog-card:hover .placeholder-icon-wrap {
  transform: scale(1.08);
  background: rgba(121, 40, 202, 0.45);
}

.placeholder-icon-wrap svg {
  width: 22px;
  height: 22px;
}

.placeholder-badge {
  font-family: var(--font-mono-tag);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(139, 92, 246, 0.25);
  color: var(--brand-tint);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-brand-faint);
}

.placeholder-hint {
  font-size: var(--text-2xs);
  color: var(--text-dim);
  letter-spacing: 0.2px;
  max-width: 220px;
}

.service-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.service-category-pill {
  font-family: var(--font-mono-tag);
  font-size: var(--text-3xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--brand-tint);
  background: rgba(121, 40, 202, 0.15);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(139, 92, 246, 0.25);
}

.service-catalog-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.service-catalog-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 18px;
  flex-grow: 1;
}

.service-feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
}

.service-pill-item {
  font-family: var(--font-mono-tag);
  font-size: var(--text-3xs);
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.service-pill-item::before {
  content: '•';
  color: var(--brand-purple-lift);
}

.service-card-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.service-btn-wa {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(37, 211, 102, 0.12);
  color: #25d366;
  border: 1px solid rgba(37, 211, 102, 0.35);
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.service-btn-wa:hover {
  background: #25d366;
  color: #000;
  box-shadow: none;
}

/* Category Filter Bar */
.service-filter-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-bottom: 8px;
}

.filter-chip-btn {
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-chip-btn:hover,
.filter-chip-btn.active {
  background: var(--brand-purple);
  color: #fff;
  border-color: var(--brand-tint);
  box-shadow: none;
}

/* About Page Specific Layouts */
.about-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  margin-top: 40px;
}

@media (max-width: 992px) {
  .about-hero-grid {
    grid-template-columns: 1fr;
  }
}

.about-feature-blank {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 280px;
  background: radial-gradient(circle at 60% 40%, rgba(139, 92, 246, 0.22) 0%, rgba(16, 8, 32, 0.95) 100%);
  border: 1px dashed var(--border-brand-strong);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.about-feature-blank::before {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px dashed rgba(192, 132, 252, 0.35);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

/* Filled slot: real photo instead of the dashed placeholder */
.about-feature-photo {
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
}

.about-feature-photo::before {
  content: none;
}

.about-feature-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-facility-highlight-card {
  background: radial-gradient(ellipse at top right, rgba(139, 92, 246, 0.28) 0%, rgba(18, 9, 36, 0.96) 60%);
  border: 1px solid var(--border-brand-strong);
  border-radius: var(--radius-xl);
  padding: 48px;
  margin-top: 48px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), var(--edge-top);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 992px) {
  .about-facility-highlight-card {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }
}

.about-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 36px;
}

@media (max-width: 1100px) {
  .about-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .about-pillars-grid {
    grid-template-columns: 1fr;
  }
}

.about-pillar-card {
  background: linear-gradient(145deg, rgba(26, 12, 50, 0.9) 0%, rgba(12, 6, 24, 0.95) 100%);
  border: 1px solid var(--border-brand-faint);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  transition: transform var(--transition-smooth), border-color var(--transition-smooth);
}

.about-pillar-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-brand-strong);
}

.about-pillar-num {
  font-family: var(--font-mono-tag);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--brand-tint);
  margin-bottom: 12px;
  opacity: 0.8;
}

.about-pillar-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.about-pillar-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.founder-quote-banner {
  background: linear-gradient(145deg, rgba(30, 14, 58, 0.95) 0%, rgba(14, 7, 28, 0.98) 100%);
  border: 1px solid var(--border-brand-strong);
  border-radius: var(--radius-xl);
  padding: 48px;
  margin-top: 50px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
}

.founder-quote-banner::before {
  content: '“';
  position: absolute;
  top: -20px;
  left: 24px;
  font-family: var(--font-display);
  font-size: 160px;
  color: rgba(139, 92, 246, 0.12);
  line-height: 1;
  pointer-events: none;
}

.founder-quote-text {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.founder-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.founder-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: #fff;
}

.founder-role {
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  color: var(--brand-tint);
  letter-spacing: 0.3px;
}






/* ==========================================================================
   Vertical pages: project strip + service ledger
   Real JAAS jobs go straight under the hero, and the service list reads as
   a ruled index rather than a wall of icon cards.
   ========================================================================== */

.work-strip {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
  margin-top: -28px;
  position: relative;
}

.work-strip figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.work-strip figure:first-child {
  grid-row: 1 / 3;
  border-radius: var(--radius-md);
}

.work-strip img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-strip figure:first-child img {
  aspect-ratio: auto;
  min-height: 100%;
}

.work-strip figure:hover img {
  transform: scale(1.03);
}

.work-strip figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 36px 16px 12px;
  background: linear-gradient(to top, rgba(6, 3, 13, 0.88), transparent);
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  letter-spacing: 0.2px;
  color: var(--text-soft);
}

.work-strip figure:first-child figcaption {
  padding: 48px 22px 18px;
  font-size: var(--text-sm);
}

.service-ledger {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border-top: 1px solid var(--border-brand-faint);
  counter-reset: ledger;
}

.ledger-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 12px 32px;
  align-items: baseline;
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--border-subtle);
  scroll-margin-top: 110px;
}

.ledger-row::before {
  counter-increment: ledger;
  content: counter(ledger, decimal-leading-zero);
  font-family: var(--font-mono-tag);
  font-size: var(--text-xs);
  color: var(--brand-tint);
  letter-spacing: 0.5px;
}

.ledger-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}

.ledger-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-md);
  line-height: 1.7;
  max-width: 60ch;
}

.ledger-row:target .ledger-title,
.ledger-row:hover .ledger-title {
  color: var(--brand-tint);
}

@media (max-width: 768px) {
  .work-strip {
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
    gap: 10px;
  }

  .work-strip figure:first-child {
    grid-column: 1 / 3;
    grid-row: auto;
  }

  .work-strip figure:first-child img {
    aspect-ratio: 4 / 3;
  }

  .work-strip figcaption {
    padding: 28px 10px 8px;
    font-size: var(--text-2xs);
  }

  .ledger-row {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 22px 0 24px;
  }

  .ledger-desc {
    grid-column: 2;
  }
}

/* Weddings and socials: the client asked for warmer accents on these pages,
   so the violet tint gives way to champagne gold here only. */
.tone-warm {
  --brand-tint: #e3c48d;
  --brand-purple-lift: #d4ad6a;
  --border-brand-faint: rgba(227, 196, 141, 0.22);
  --border-brand-strong: rgba(227, 196, 141, 0.5);
  --border-subtle: rgba(227, 196, 141, 0.14);
}

/* The site backdrop is violet and the hero is see-through, so the warm
   pages need a mostly opaque base of their own. */
.tone-warm .page-hero {
  background:
    radial-gradient(ellipse 70% 70% at 88% 0%, rgba(201, 150, 82, 0.26) 0%, rgba(120, 70, 40, 0.12) 45%, transparent 72%),
    #0d0809;
}

.tone-warm .subpage-cta-banner {
  background:
    radial-gradient(ellipse 60% 90% at 15% 0%, rgba(201, 150, 82, 0.22) 0%, transparent 70%),
    #120b0b !important;
  border-color: rgba(227, 196, 141, 0.35) !important;
}

.ledger-title a {
  color: inherit;
}

/* Read by screen readers, not shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}