/* =============================================================
   INTEGRITY AGENCY
   Private Advisory & Growth Infrastructure
   Black / gold / Cormorant Garamond luxury system
   ============================================================= */

/* Self-hosted fonts — Cormorant Garamond + Inter (Latin subset) */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-500italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 600; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-600italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 700; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-700italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url('/assets/fonts/inter-v20-latin-200.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/inter-v20-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-v20-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-v20-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-v20-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/inter-v20-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/inter-v20-latin-800.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/fonts/inter-v20-latin-900.woff2') format('woff2'); }

:root {
  /* Surfaces */
  --bg-0: #000000;
  --bg-1: #070707;
  --bg-2: #0d0d0d;
  --bg-3: #141414;
  --bg-card: #0a0a0a;

  /* Gold spectrum */
  --gold: #F0C85F;
  --gold-hot: #FDE58C;
  --gold-soft: #D2A03E;
  --gold-dim: #9E6E26;
  --gold-glow: rgba(240, 200, 95, 0.14);
  /* Gold-gloss gradient for metallic text (verbatim port from
     jobyweeks.com — multi-stop polished-metal gradient clipped
     to text gives "Rolex" sheen on numerals, italics, CTAs). */
  /* The single canonical brand gold. Used everywhere gold appears.
     180° vertical multi-stop polished metal gradient. */
  --gold-gloss: linear-gradient(180deg, #FFF7CD 0%, #FDE58C 12%, #F0C85F 33%, #C89637 47%, #AF7A26 50%, #D2A03E 54%, #F2CA64 68%, #D2A03C 84%, #9E6E26 96%, #76501C 100%);
  /* Lines — solid opaque gold matching the Joby logo palette.
     No more semi-transparent fade. Every divider renders as clean gold. */
  --gold-line: #F0C85F;
  --gold-hairline: #F0C85F;
  /* Polished metallic shimmer for prominent horizontal rules */
  --gold-shimmer: linear-gradient(90deg, #AF7A26 0%, #D2A03E 10%, #F0C85F 30%, #FDE58C 50%, #F0C85F 70%, #D2A03E 90%, #AF7A26 100%);

  /* Text — IA silver/shine, cool metallic */
  --text-0: #F5F5F5;
  --text-1: #DCDCDC;
  --text-2: #B0B0B0;
  --text-3: #757575;
  --text-muted: rgba(245, 245, 245, 0.58);

  /* Type */
  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Geometry */
  --max: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 2px;
  --radius-card: 4px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-med: 360ms;
  --t-slow: 720ms;

  /* Triple-stack gold shine/glow — reusable across all borders/lines */
  --glow-major:
    0 0 14px rgba(240, 200, 95, 0.55),
    0 0 28px rgba(240, 200, 95, 0.28),
    0 1px 6px rgba(240, 200, 95, 0.4);
  --glow-med:
    0 0 8px rgba(240, 200, 95, 0.28),
    0 0 20px rgba(240, 200, 95, 0.13),
    inset 0 0 2px rgba(240, 200, 95, 0.35);
  --glow-subtle:
    0 0 5px rgba(240, 200, 95, 0.18),
    0 0 14px rgba(240, 200, 95, 0.08),
    inset 0 0 1px rgba(240, 200, 95, 0.28);
  --glow-hover:
    0 0 12px rgba(240, 200, 95, 0.42),
    0 0 28px rgba(240, 200, 95, 0.18),
    inset 0 0 3px rgba(240, 200, 95, 0.5);
}

/* =============================================================
   Reset & base
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
  background: var(--bg-0);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  color: var(--text-1);
  background: transparent;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 300;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Subtle film grain for luxury feel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Diagonal pinstripes per section, alternating +30deg / -30deg by nth-of-type */
main, header, footer, section { position: relative; z-index: 1; }
section { isolation: isolate; }
section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: repeating-linear-gradient(
    var(--stripe-angle, 30deg),
    transparent 0px,
    transparent 63px,
    rgba(255,255,255,0.022) 63px,
    rgba(255,255,255,0.022) 64px
  );
}
section:nth-of-type(even)::before { --stripe-angle: -30deg; }


img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, textarea, select, button { font: inherit; color: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: 16px; top: 16px;
  background: var(--gold-gloss);
  color: #000;
  padding: 8px 14px;
  z-index: 10000;
}

/* =============================================================
   Type primitives
   ============================================================= */

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: var(--gold-gloss);
  /* At small text heights the vertical gradient compresses and the dark stops
     dominate. Stretch the gradient 250% taller and anchor to top so the
     visible portion shows only the bright top half (cream → bright gold →
     gold yellow). The deep amber + dark brown stops fall below the element. */
  background-size: 100% 250%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 28px;
  text-shadow:
    0 0 10px rgba(240, 200, 95, 0.35),
    0 0 2px rgba(244, 214, 120, 0.6);
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-0);
  line-height: 1.05;
}

h1 em, h2 em, h3 em {
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  font-weight: 500;
}

/* Polished metallic treatment for the large gold italic clauses in hero and
   section headlines. Stays inside the site's gold palette but adds a diagonal
   gradient + warm drop-shadow so the text reads as cast metal, not flat paint.
   Scoped to large headlines only — small gold UI (eyebrows, buttons, chips,
   nav CTAs) keeps flat --gold since gradient doesn't read at small sizes. */
.hero-headline em,
.section-headline em {
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 0 14px rgba(240, 200, 95, 0.22))
    drop-shadow(0 0 2px rgba(244, 214, 120, 0.55));
}

.section-headline {
  font-size: clamp(24px, 5.4vw, 68px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin-bottom: 24px;
  overflow-wrap: break-word;
  word-break: normal;
}

.section-body {
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 60ch;
}

/* =============================================================
   Layout
   ============================================================= */

.section { padding: clamp(56px, 7vw, 100px) 0; position: relative; }
.section-dark { background: transparent; }

/* When anchor-scrolled via header nav, pull the scroll target up by
   the section's padding-top so the eyebrow lands just below the fixed
   header (hiding the hairline + padding behind it — no double-line). */
.section,
.inquiry-section {
  scroll-margin-top: calc(-1 * clamp(56px, 7vw, 100px));
}
.section-inner {
  max-width: var(--max);
  padding: 0 var(--gutter);
  margin: 0 auto;
  position: relative;
}
.section-header { margin-bottom: clamp(32px, 4vw, 56px); }
.section-header-center { text-align: center; margin-inline: auto; }
.section-header-center .section-body { margin-inline: auto; }

.hairline {
  height: 1px;
  width: 100%;
  background: var(--gold-gloss);
  opacity: 1;
}

/* =============================================================
   Header / Nav
   ============================================================= */

#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 18px 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  transition: padding var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
#site-header.scrolled {
  padding: 10px 0;
  background: rgba(0, 0, 0, 0.92);
}
#site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--gold-gloss);
  pointer-events: none;
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}
.nav-logo img {
  height: 56px;
  width: auto;
  /* Override the global img { max-width: 100% } reset — at tight viewports
     that rule was forcing horizontal compression while height stayed fixed,
     squashing the logo's aspect ratio. */
  max-width: none;
  display: block;
}
/* Paint the gold-gloss gradient onto the gold portions of the logo only.
   The mask PNG is white where the original logo was gold (with anti-aliased
   edges), transparent elsewhere. The gradient overlay sits exactly on top of
   the gold pixels of the underlying img and replaces their dull solid fill
   with polished-metal gloss + a specular highlight band.

   Stack (back to front):
     1. var(--gold-gloss) scaled 220% tall so the visible portion shows the
        bright top half + amber mid (avoids the deepest dark-brown stops that
        would otherwise sit at the bottom of a 56px box and read as muddy).
     2. A thin specular highlight band at ~28% — suggests a single light source
        catching a polished surface, gives the gold the feel of luxury-watch
        casework rather than flat tinted paint.
   Both layers are masked to the gold pixels of the logo. */
.nav-logo::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 56px;
  width: 100%;
  background:
    linear-gradient(180deg,
      transparent 18%,
      rgba(255, 252, 224, 0.55) 26%,
      rgba(255, 252, 224, 0.0) 34%,
      transparent 100%) 0 0 / 100% 100% no-repeat,
    var(--gold-gloss) 0 0 / 100% 220% no-repeat;
  -webkit-mask: url('/assets/logo-gold-mask.png') left center / auto 56px no-repeat;
  mask: url('/assets/logo-gold-mask.png') left center / auto 56px no-repeat;
  pointer-events: none;
  filter:
    drop-shadow(0 0 10px rgba(253, 229, 140, 0.5))
    drop-shadow(0 0 22px rgba(240, 200, 95, 0.22))
    drop-shadow(0 0 1px rgba(244, 214, 120, 0.7));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
}
.nav-links a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-1);
  position: relative;
  padding: 8px 0;
  transition: color var(--t-fast) var(--ease);
}
.nav-links a:hover { background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; }

.nav-cta {
  padding: 10px 22px !important;
  border: 1px solid var(--gold-hot);
  border-radius: var(--radius-pill);
  background: var(--gold-gloss) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  box-shadow: var(--glow-subtle);
  text-shadow:
    0 0 6px rgba(240, 200, 95, 0.55),
    0 0 14px rgba(240, 200, 95, 0.25),
    0 0 1px rgba(244, 214, 120, 0.85);
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), text-shadow var(--t-med) var(--ease);
}
.nav-cta:hover {
  background: radial-gradient(ellipse at center, rgba(240, 200, 95, 0.16) 0%, rgba(240, 200, 95, 0.06) 55%, transparent 100%);
  color: #F4D678 !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  box-shadow:
    0 0 18px rgba(240, 200, 95, 0.6),
    0 0 38px rgba(240, 200, 95, 0.32),
    0 0 3px rgba(244, 214, 120, 0.7),
    inset 0 0 10px rgba(240, 200, 95, 0.2);
  text-shadow:
    0 0 8px rgba(244, 214, 120, 0.95),
    0 0 22px rgba(240, 200, 95, 0.65),
    0 0 2px rgba(255, 231, 161, 1);
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--text-0);
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast);
  margin-left: auto;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =============================================================
   Hero
   ============================================================= */

.hero {
  position: relative;
  /* Header height = 93px + 1 section-pad of breathing room below the
     header. (Half the previous value, which added 2× section-pad.) */
  padding-top: calc(94px + clamp(56px, 7vw, 100px));
  padding-right: var(--gutter);
  padding-bottom: clamp(56px, 7vw, 100px);
  padding-left: var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
}

.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  animation: fadeUp 1100ms var(--ease-out) both;
}

.hero-headline {
  font-family: var(--serif);
  font-size: clamp(28px, 6.9vw, 102px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--text-0);
  margin-bottom: 28px;
  padding-bottom: 0;
  overflow-wrap: break-word;
  word-break: normal;
}
.hero-headline em {
  display: inline-block;
  padding: 0.02em 0.08em 0.08em;
  line-height: 1.15;
  font-style: italic;
  font-weight: 500;
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
}

.hero-subhead {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 30px);
  font-style: italic;
  font-weight: 400;
  color: var(--text-0);
  margin-bottom: 14px;
  letter-spacing: 0.005em;
}

.hero-body {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 300;
  color: var(--text-2);
  max-width: 62ch;
  margin: 0 auto 26px;
  line-height: 1.65;
}

/* Match the .eyebrow typography exactly so this line reads as the same
   class of label/caption as every other small-caps gold tag on the site. */
.hero-meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: var(--gold-gloss);
  background-size: 100% 250%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow:
    0 0 10px rgba(240, 200, 95, 0.35),
    0 0 2px rgba(244, 214, 120, 0.6);
}
.hero-meta .dot {
  width: 3px; height: 3px;
  background: var(--gold-gloss);
  border-radius: 50%;
}

.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0.7;
  animation: fadeIn 1800ms 600ms both;
}
.hero-scroll svg {
  animation: scrollCue 2200ms infinite var(--ease);
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@keyframes scrollCue {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(5px); opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 0.7; }
}

/* =============================================================
   Cards (Practice / Who we serve)
   ============================================================= */

.cards {
  display: grid;
  gap: clamp(20px, 2vw, 28px);
}
.cards-3 {
  grid-template-columns: repeat(3, 1fr);
}

.card {
  background:
    linear-gradient(180deg, var(--bg-card) 0%, #040404 100%) padding-box,
    var(--gold-gloss) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  padding: clamp(22px, 2.5vw, 36px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--glow-med);
  transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, var(--gold-glow), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glow-hover);
}
.card:hover::before { opacity: 1; }

.card-tag {
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
  text-align: center;
}
.card-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  margin-bottom: 22px;
  color: var(--text-0);
  text-align: center;
  position: relative;
  padding-bottom: 14px;
}
.card-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  margin: 14px auto 0;
  background: var(--gold-gloss);
  box-shadow: 0 0 8px rgba(240, 200, 95, 0.35);
}
.card-body {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-2);
  line-height: 1.65;
  text-align: center;
}

/* =============================================================
   Pillars (Framework)
   ============================================================= */

.pillars {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.2vw, 48px);
}

.pillar {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding: clamp(28px, 3vw, 48px) clamp(24px, 2.5vw, 40px);
  position: relative;
  min-height: clamp(280px, 26vw, 360px);
}
/* The unified card rule below handles the full gradient border (--gold-gloss).
   No separate border-top needed; pillars are visually separated by the gap
   between cards. */

.pillar-marker {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pillar-num {
  font-family: var(--serif);
  font-size: clamp(72px, 8vw, 128px);
  font-style: italic;
  font-weight: 400;
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.pillar-tag {
  position: relative;
  display: inline-block;
  padding-top: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background: var(--gold-gloss);
  background-size: 100% 250%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow:
    0 0 10px rgba(240, 200, 95, 0.28),
    0 0 2px rgba(244, 214, 120, 0.55);
}
.pillar-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 1px;
  background: var(--gold-gloss);
  -webkit-mask: linear-gradient(90deg, white 0%, rgba(255,255,255,0.15) 100%);
  mask: linear-gradient(90deg, white 0%, rgba(255,255,255,0.15) 100%);
  box-shadow: 0 0 6px rgba(240, 200, 95, 0.35);
}

.pillar-body h3 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 14px;
  color: var(--text-0);
  max-width: 30ch;
}
.pillar-body p {
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 300;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 58ch;
}

/* =============================================================
   Intelligence grid
   ============================================================= */

.intel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.intel-grid li {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(20, 20, 20, 0.85) 0%, rgba(10, 10, 10, 0.92) 100%) padding-box,
    var(--gold-gloss) border-box;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: clamp(34px, 3.4vw, 48px) clamp(22px, 2.4vw, 32px) clamp(30px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  text-align: center;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, var(--glow-subtle);
  transition:
    transform var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    background var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
}
.intel-grid li::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gold-gloss);
  -webkit-mask: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
  opacity: 0.45;
  pointer-events: none;
}
.intel-grid li::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(240, 200, 95, 0.10) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  pointer-events: none;
  z-index: -1;
}
.intel-grid li:hover {
  transform: translateY(-4px);
  border-color: rgba(240, 200, 95, 0.48);
  background:
    linear-gradient(180deg, rgba(24, 24, 24, 0.9) 0%, rgba(12, 12, 12, 0.95) 100%);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.5),
    var(--glow-med);
}
.intel-grid li:hover::before { opacity: 1; }
.intel-grid li:hover::after { opacity: 1; }

.intel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  margin-bottom: 4px;
  filter:
    drop-shadow(0 0 4px rgba(240, 200, 95, 0.55))
    drop-shadow(0 0 10px rgba(240, 200, 95, 0.28))
    drop-shadow(0 0 1px rgba(240, 200, 95, 0.45));
  transition:
    filter var(--t-med) var(--ease),
    transform var(--t-med) var(--ease);
}
.intel-icon svg { width: 100%; height: 100%; display: block; }
.intel-grid li:hover .intel-icon {
  filter:
    drop-shadow(0 0 7px rgba(240, 200, 95, 0.85))
    drop-shadow(0 0 16px rgba(240, 200, 95, 0.45))
    drop-shadow(0 0 2px rgba(240, 200, 95, 0.6));
  transform: scale(1.12);
}

.intel-name {
  font-family: var(--serif);
  font-size: clamp(21px, 1.75vw, 25px);
  font-weight: 500;
  color: var(--text-0);
  line-height: 1.25;
  letter-spacing: 0.005em;
  padding-top: 14px;
  position: relative;
}
.intel-name::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 1px;
  background: var(--gold-gloss);
  transition: width var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.intel-grid li:hover .intel-name::before {
  width: 44px;
  background: var(--gold-gloss);
}

.intel-desc {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--text-2);
  line-height: 1.6;
  letter-spacing: 0.015em;
  max-width: 30ch;
  margin-top: 2px;
}

/* =============================================================
   Engine section (AI infrastructure)
   ============================================================= */

.engine-header { max-width: 820px; }
.engine-header .section-headline { margin-bottom: 22px; }
.engine-header .section-body {
  max-width: 62ch;
  margin-inline: auto;
}
.engine-header .section-body + .section-body {
  margin-top: clamp(16px, 1.6vw, 22px);
}

/* Pull quote — gold italic serif, flanked by hairline rules, centered */
.engine-pullquote {
  position: relative;
  max-width: 34ch;
  margin: clamp(22px, 2.5vw, 36px) auto;
  padding: clamp(22px, 2.4vw, 32px) 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-0);
  text-align: center;
  letter-spacing: -0.005em;
  quotes: none;
}
.engine-pullquote em {
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  font-weight: 500;
  text-shadow:
    0 0 14px rgba(240, 200, 95, 0.3),
    0 0 2px rgba(244, 214, 120, 0.5);
}
.engine-pullquote::before,
.engine-pullquote::after {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  margin: 0 auto;
  background: var(--gold-gloss);
  -webkit-mask: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
  opacity: 0.6;
}
.engine-pullquote::before { margin-bottom: clamp(20px, 2.2vw, 28px); }
.engine-pullquote::after  { margin-top:    clamp(20px, 2.2vw, 28px); }

/* Stat stamp — 10+ / 30+ / 1 — a compact scale row above the chips */
.engine-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
  max-width: 720px;
  margin: clamp(40px, 4.5vw, 60px) auto 0;
  padding: clamp(22px, 2.4vw, 30px) 0;
  border-style: solid;
  border-color: transparent;
  border-width: 1px 0;
  border-image: var(--gold-gloss) 1 stretch;
  border-image-width: 1 0;
}
.engine-stat {
  text-align: center;
  padding: 32px 14px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.engine-stat + .engine-stat {
  border-left: 1px solid transparent !important;
  border-image-source: var(--gold-gloss) !important;
  border-image-slice: 1 !important;
  border-image-repeat: stretch !important;
  border-image-width: 0 0 0 1 !important;
}
.engine-stat-figure {
  font-family: var(--serif);
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 500;
  line-height: 1;
  color: var(--text-0);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  text-shadow:
    0 0 18px rgba(240, 200, 95, 0.22),
    0 0 2px rgba(244, 214, 120, 0.35);
}
.engine-stat-figure span {
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 0.7em;
  font-weight: 500;
  vertical-align: super;
  margin-left: 2px;
}
.engine-stat-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
  line-height: 1.5;
}

/* Discretion/seal lines — small italic serif beneath a grid or chip row.
   Used by AI-Powered Infrastructure (engine) and The Advantage sections. */
.engine-discretion,
.advantage-seal {
  margin-top: clamp(28px, 3vw, 40px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  text-align: center;
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
}

.engine-capabilities {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 0;
  margin: clamp(36px, 4vw, 52px) auto 0;
  max-width: 880px;
  list-style: none;
  padding: 0;
}
.engine-capabilities li {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-1);
  padding: 4px 18px;
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
.engine-capabilities li::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--gold-gloss);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.75;
}
.engine-capabilities li:hover {
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.engine-footnote {
  margin-top: clamp(32px, 3.2vw, 44px);
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  background: linear-gradient(
    135deg,
    #F4F4F4 0%,
    #BCBCBC 22%,
    #FFFFFF 48%,
    #A9A9A9 72%,
    #E6E6E6 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.engine-footnote .brand-nirvani {
  background: none;
  -webkit-text-fill-color: var(--text-0);
  color: var(--text-0);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 0;
  padding: 0;
  display: inline-block;
  transition: opacity var(--t-fast) var(--ease);
}
.engine-footnote .brand-nirvani:hover {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0.9;
}
.engine-footnote .ia-gold {
  background: none;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 600;
  text-shadow:
    0 0 10px rgba(240, 200, 95, 0.35),
    0 0 2px rgba(244, 214, 120, 0.6);
}

/* Inline brand logos inside the footnote sentence. IA wordmark is scaled
   down so its two-word length sits on the line without dominating. */
.engine-footnote .inline-logo {
  display: inline-block;
  width: auto;
  margin: 0 1px;
  user-select: none;
  -webkit-user-drag: none;
  max-width: none; /* override global img max-width:100% */
  transition: filter var(--t-fast) var(--ease);
}
.engine-footnote .inline-logo-nirvani {
  height: 18px;
  vertical-align: -4px;
}
.engine-footnote .inline-logo-ia {
  height: 12px;
  vertical-align: -1px;
  margin-left: 1px;
  margin-right: 0;
}
.engine-footnote .brand-nirvani:hover .inline-logo-nirvani {
  filter: drop-shadow(0 0 6px rgba(240, 200, 95, 0.45));
}

/* =============================================================
   Principal engagements marquee (full-bleed edge-to-edge scroller)
   ============================================================= */

.marquee-band {
  width: 100%;
  margin: clamp(48px, 6vw, 80px) 0 0;
  padding: 0 0 clamp(8px, 1.2vw, 18px);
  border: 0;
  position: relative;
}

.marquee-eyebrow {
  text-align: center;
  margin-bottom: clamp(24px, 2.8vw, 36px);
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding: 0 var(--gutter);
}

/* Brand marquee — infinite horizontal scroll, full-bleed, edge-to-edge.
   Mix of real logo images + stylized text wordmarks for brands where
   no logo artwork is available. */
.brand-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}
.brand-marquee-track {
  display: flex;
  gap: clamp(56px, 6vw, 96px);
  width: max-content;
  align-items: center;
  animation: brandScroll 18s linear infinite;
  will-change: transform;
}
.brand-marquee-track:hover {
  animation-play-state: paused;
}
@keyframes brandScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.brand {
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.04em;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  height: clamp(32px, 3.2vw, 44px);
  padding: 0;
}

/* Real logo images — capped at same visual x-height as text brands for consistency */
.brand-logo {
  height: clamp(24px, 2.4vw, 34px);
  width: auto;
  max-width: clamp(90px, 10vw, 140px);
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: none;
}
.brand-logo.invert {
  /* Vitaminwater PNG is black text → invert to white for black bg */
  filter: invert(1);
}
.brand-naver {
  color: #03C75A;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  letter-spacing: -0.055em;
}
.brand-mnet {
  color: #FF0050;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  letter-spacing: -0.055em;
}
.brand-mbc {
  color: #00B140;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  letter-spacing: -0.035em;
}
.brand-fila {
  color: #002F87;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.04em;
}
.brand-cj {
  color: #F26522;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  letter-spacing: -0.055em;
}
.brand-kbs {
  color: #D51013;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  letter-spacing: -0.045em;
}
.brand-sbs {
  color: #2E7FD1;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  letter-spacing: -0.045em;
}
.brand-showbox {
  color: #E31E24;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  letter-spacing: -0.055em;
}
.brand-koreatimes {
  color: #D8D8D8;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  .brand-marquee-track {
    animation-duration: 60s !important;
    animation-iteration-count: infinite !important;
  }
}

/* =============================================================
   Proof row
   ============================================================= */

.proof {
  padding: clamp(40px, 5.5vw, 72px) 0;
  background: transparent;
  position: relative;
  border-style: solid;
  border-color: transparent;
  border-width: 1px 0;
  border-image: var(--gold-gloss) 1 stretch;
  border-image-width: 1 0;
}
/* Note: .proof::before is intentionally NOT used for hairlines anymore so the global
   section::before pinstripe overlay can render here. Hairlines live on the borders above. */
.proof-eyebrow { text-align: center; margin-bottom: 22px; }

.press-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 26px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.15vw, 32px);
  font-weight: 400;
  color: var(--text-1);
  letter-spacing: 0.005em;
  margin-bottom: clamp(32px, 4vw, 54px);
  padding: 0 var(--gutter);
}
.press-row > span:not(.press-sep) {
  transition: color var(--t-fast) var(--ease);
}
.press-row:hover > span:not(.press-sep) { color: var(--text-3); }
.press-row > span:not(.press-sep):hover { background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; }

.press-sep {
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 1em;
  transform: translateY(-2px);
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 32px);
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.stat {
  padding: 36px 24px;
  position: relative;
}

.stat-figure {
  font-family: var(--serif);
  font-size: clamp(44px, 5.6vw, 72px);
  font-weight: 500;
  line-height: 1;
  color: var(--text-0);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  /* Unified baseline: every figure (text or logo) occupies the same slot
     so "100+", "Global", and the Nexcite logo all center on the same y. */
  min-height: clamp(72px, 8.4vw, 104px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-plus {
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  font-weight: 400;
}

/* Shiny gold treatment — polished multi-stop gradient, clipped to text,
   with a slow shimmer sweep. Stays inside the site's gold family so the
   word reads as "the same gold, polished" rather than a different hue. */
.stat-figure--gold {
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(240, 200, 95, 0.38))
          drop-shadow(0 0 22px rgba(240, 200, 95, 0.18))
          drop-shadow(0 0 2px rgba(244, 214, 120, 0.45));
}

/* Logo variant — image sits inside the shared stat-figure slot.
   align-items: flex-end drops the image to the bottom of the slot; combined
   with a translateY nudge, the visible NEXCITE wordmark lines up with the
   cap-height of "Global" and "100+" beside it. The serif text figures center
   visually higher than their geometric center (extra bottom em-box padding),
   so the logo needs to be pushed down to match. */
.stat-figure--logo {
  padding: 0;
  align-items: flex-end;
}
.stat-figure--logo img {
  display: block;
  height: clamp(62px, 7.2vw, 92px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateY(10%);
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.10))
    drop-shadow(0 0 22px rgba(255, 255, 255, 0.05));
}

.stat-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
  line-height: 1.5;
}
/* When the figure is the Nexcite logo, push 'Strategic Partner' down so it
   visually centers with the labels in the other two cards. */
.stat-figure--logo + .stat-label { margin-top: 24px; }

/* =============================================================
   Inquiry section
   ============================================================= */

.inquiry-section {
  padding: clamp(56px, 7vw, 100px) 0;
  background: transparent;
  position: relative;
}
.inquiry-section .section-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 4vw, 56px);
}
.inquiry-section .section-header { max-width: 720px; }
.inquiry-section .inquiry-form {
  width: 100%;
  max-width: 980px;
}
.inquiry-signoff {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-align: center;
  margin: 0;
}
.inquiry-signoff--centered {
  max-width: 640px;
}
.inquiry-signoff em {
  font-style: italic;
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.inquiry-assurances {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inquiry-assurances--inline {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(240, 200, 95, 0.10);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.inquiry-assurances--inline li {
  font-size: 13px;
  letter-spacing: 0.02em;
}
.inquiry-assurances li {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 14px;
  letter-spacing: 0.01em;
}
.inquiry-assurances .bullet {
  width: 5px; height: 5px;
  background: var(--gold-gloss);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Form */
.inquiry-form {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    var(--gold-gloss) border-box;
  border: 1px solid transparent;
  border-radius: 18px;
  padding: clamp(22px, 2.8vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  backdrop-filter: blur(4px);
  box-shadow: var(--glow-med);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.inquiry-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.inquiry-form label.full { grid-column: 1 / -1; }

.label-text {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.label-text .req {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.02em;
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-transform: none;
  font-weight: 400;
}
.label-text .opt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-3);
  text-transform: none;
  font-weight: 400;
}

.inquiry-form input,
.inquiry-form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(245, 241, 232, 0.15);
  color: var(--text-0);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  padding: 12px 0;
  transition: border-color var(--t-fast) var(--ease);
  border-radius: 0;
  outline: none;
}
.inquiry-form textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
  padding: 14px 0;
}
.inquiry-form input:focus,
.inquiry-form textarea:focus {
  border-bottom-color: #FDE58C;
  color: var(--text-0);
  box-shadow:
    0 2px 10px rgba(240, 200, 95, 0.35),
    0 4px 22px rgba(240, 200, 95, 0.18),
    0 1px 0 rgba(240, 200, 95, 0.4);
}
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder {
  color: var(--text-3);
  font-style: italic;
}
.inquiry-form label.invalid input,
.inquiry-form label.invalid textarea {
  border-bottom-color: #a84c4c;
}

.form-footer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 6px;
}
.form-disclaimer {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.65;
}

.btn-primary {
  align-self: flex-start;
  background: transparent;
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  border: 1px solid var(--gold-hot);
  border-radius: var(--radius-pill);
  padding: 14px 32px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--glow-subtle);
  text-shadow:
    0 0 6px rgba(240, 200, 95, 0.6),
    0 0 14px rgba(240, 200, 95, 0.28),
    0 0 1px rgba(244, 214, 120, 0.85);
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), text-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
  position: relative;
  overflow: hidden;
}
.btn-primary:hover {
  background: radial-gradient(ellipse at center, rgba(240, 200, 95, 0.18) 0%, rgba(240, 200, 95, 0.07) 55%, transparent 100%);
  color: #F4D678;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  box-shadow:
    0 0 20px rgba(240, 200, 95, 0.65),
    0 0 42px rgba(240, 200, 95, 0.35),
    0 0 4px rgba(244, 214, 120, 0.75),
    inset 0 0 12px rgba(240, 200, 95, 0.22);
  text-shadow:
    0 0 9px rgba(244, 214, 120, 0.95),
    0 0 24px rgba(240, 200, 95, 0.7),
    0 0 2px rgba(255, 231, 161, 1);
}
.btn-primary:hover .btn-arrow { transform: translateX(4px); }
.btn-arrow {
  transition: transform var(--t-med) var(--ease);
  font-size: 14px;
}
.btn-primary:disabled { opacity: 0.6; cursor: wait; }
.btn-primary.loading .btn-arrow {
  animation: spin 800ms linear infinite;
  transform-origin: center;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-status {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  min-height: 1em;
  padding: 0;
}
.form-status.success {
  position: relative;
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding: 18px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  box-shadow: var(--glow-subtle);
  text-shadow: 0 0 8px rgba(253, 229, 140, 0.4);
}
.form-status.success::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gold-gloss);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.form-status.success::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(240, 200, 95, 0.08);
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
}
.form-status.error {
  color: #d88b8b;
  padding: 14px 0;
}
.form-status a {
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =============================================================
   Footer
   ============================================================= */

#site-footer {
  background: transparent;
  padding: 36px 0 22px;
  position: relative;
}
#site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold-gloss);
  pointer-events: none;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
}
.footer-brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-brand-link {
  display: inline-block;
  line-height: 0;
  position: relative;
  transition: opacity var(--t-fast) var(--ease), filter var(--t-med) var(--ease);
}
.footer-brand-link::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 56px;
  width: 100%;
  background:
    linear-gradient(180deg,
      transparent 18%,
      rgba(255, 252, 224, 0.55) 26%,
      rgba(255, 252, 224, 0.0) 34%,
      transparent 100%) 0 0 / 100% 100% no-repeat,
    var(--gold-gloss) 0 0 / 100% 220% no-repeat;
  -webkit-mask: url('/assets/logo-gold-mask.png') left top / auto 56px no-repeat;
  mask: url('/assets/logo-gold-mask.png') left top / auto 56px no-repeat;
  pointer-events: none;
  filter:
    drop-shadow(0 0 10px rgba(253, 229, 140, 0.5))
    drop-shadow(0 0 22px rgba(240, 200, 95, 0.22))
    drop-shadow(0 0 1px rgba(244, 214, 120, 0.7));
}
.footer-brand-link:hover {
  opacity: 0.88;
  filter: drop-shadow(0 0 12px rgba(240, 200, 95, 0.22));
}
.footer-brand img {
  height: 56px;
  width: auto;
  /* Same reason as the nav logo — override the global img max-width:100% so
     the logo never gets horizontally compressed while height stays fixed. */
  max-width: none;
  margin-bottom: 10px;
  display: block;
}
.footer-brand p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.35;
  letter-spacing: 0.01em;
  /* Prevent one-word-per-line fallback — the column minmax() protects width,
     but in case any container ever forces narrower, at least force breaks
     between words rather than inside them. */
  word-spacing: normal;
  hyphens: manual;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: center;
}
.footer-links a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease);
}
.footer-links a:hover { background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; }

.footer-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
  margin-top: 6px;
  border-top: 1px solid rgba(240, 200, 95, 0.10);
}
.footer-pledge {
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity var(--t-med) var(--ease), filter var(--t-med) var(--ease);
}
.footer-pledge img {
  height: 44px;
  width: auto;
  display: block;
}
.footer-pledge:hover {
  opacity: 1;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.18));
}

.footer-legal {
  margin: 0;
  padding: 0;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
  text-align: center;
  max-width: 640px;
}


/* =============================================================
   Responsive
   ============================================================= */

@media (max-width: 960px) {
  .pillar {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .pillar-marker {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 24px;
  }
  .pillar-num { font-size: 64px; }

  .inquiry-section .section-inner {
    grid-template-columns: 1fr;
  }
  .inquiry-copy { position: static; }
}

@media (max-width: 760px) {
  .cards-3 { grid-template-columns: 1fr; }

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

  .stats-row { grid-template-columns: 1fr; gap: 8px; }
  .stat { border-left: 0; padding: 28px 12px; }

  .engine-stats { grid-template-columns: 1fr; gap: 0; }
  .engine-stat { padding: 20px 8px; }
  .engine-stat + .engine-stat {
    border-left: 0 !important;
    border-top: 1px solid transparent !important;
    border-image-source: var(--gold-gloss) !important;
    border-image-slice: 1 !important;
    border-image-repeat: stretch !important;
    border-image-width: 1 0 0 0 !important;
  }

  .form-row { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
}

@media (max-width: 768px) {
  /* Disable the site-header's backdrop-filter on mobile — it creates a
     containing block that clamps the fixed-position drawer to the header's
     height instead of the viewport. Header stays solid black which is
     what we want on mobile anyway. */
  #site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #000000 !important;
  }

  .nav-toggle { display: flex; position: relative; z-index: 1002; }
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(84vw, 380px);
    background: #000000;
    border-left: 1px solid transparent;
    border-image: var(--gold-gloss) 1 stretch;
    border-image-width: 0 0 0 1;
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.55);
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 100px 36px 40px;
    transform: translateX(100%);
    transition: transform var(--t-med) var(--ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1001;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-links { transform: translateX(0); }
  .nav-links a {
    font-size: 14px;
    padding: 14px 0;
    width: 100%;
    border-bottom: 1px solid rgba(240, 200, 95, 0.1);
  }
  /* Mobile CTA — prominent full-width button at the end of the drawer.
     Solid gold fill so it reads as the primary action even after a long
     scroll through the nav links. Sits below all the regular nav items. */
  .nav-cta {
    margin-top: 28px !important;
    align-self: stretch !important;
    width: 100%;
    text-align: center;
    padding: 16px 24px !important;
    background: var(--gold-gloss);
    color: #0A0807 !important;
    -webkit-text-fill-color: #0A0807;
    border: 1px solid rgba(255, 247, 205, 0.7);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    box-shadow:
      0 0 20px rgba(240, 200, 95, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-bottom: none !important;
    font-weight: 700;
    letter-spacing: 0.18em;
  }
  .nav-cta:hover {
    background: var(--gold-gloss) !important;
    color: #0A0807 !important;
  }

  /* Scrim behind the drawer so the rest of the page dims when open */
  body.nav-open::before {
    content: '';
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0, 0, 0, 0.62);
    z-index: 1000;
    pointer-events: none;
  }
}

@media (max-width: 640px) {
  .hero-headline { font-size: clamp(26px, 8.5vw, 48px); line-height: 1.15; }
  .hero-headline em { padding: 0 0.04em; }
  .hero-subhead { font-size: clamp(15px, 4vw, 22px); }
  .hero-body { font-size: clamp(14px, 3.6vw, 16px); }
  .section-headline { font-size: clamp(22px, 7vw, 40px); line-height: 1.18; }

  .intel-grid { grid-template-columns: 1fr; }

  .press-row { font-size: 16px; gap: 8px 14px; flex-wrap: wrap; justify-content: center; }
  .press-sep { display: none; }
}

@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .hero-headline { font-size: clamp(22px, 8vw, 36px); }
  /* .hero-meta intentionally NOT overridden here — keep it identical to
     .eyebrow at all viewport widths. */
}

/* =============================================================
   Motion safety
   ============================================================= */

@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;
  }
  /* Hero intro animation (fadeUp) leaves the element stuck at its
     initial translateY state in some reduce-motion browsers. Force
     it to its final state so layout measures correctly. */
  .hero-inner {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =============================================================
   Reveal on scroll (progressive enhancement — optional)
   ============================================================= */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }

/* =============================================================
   IA custom cursor — IA favicon mark with layered gold glow.
   Hover-capable devices only; touch devices keep the system cursor.
   ============================================================= */

.ia-cursor {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  html, body {
    cursor: none;
  }
  /* Kill the system cursor on every interactive affordance. !important
     because some rules (e.g., button { cursor: pointer }) would otherwise win. */
  a, button, input, textarea, select, label, summary,
  [role="button"], [role="link"], .nav-cta, .nav-toggle,
  .card, .card-cta, .inquiry-submit, .filter-btn {
    cursor: none !important;
  }

  .ia-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    pointer-events: none;
    z-index: 10000;
    background-image: url('/assets/favicon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
    transition:
      width 280ms var(--ease),
      height 280ms var(--ease),
      filter 280ms var(--ease),
      opacity 220ms var(--ease);
    filter:
      drop-shadow(0 0 2px rgba(244, 214, 120, 0.30))
      drop-shadow(0 0 6px rgba(240, 200, 95, 0.20))
      drop-shadow(0 0 14px rgba(240, 200, 95, 0.08));
    will-change: transform, width, height, filter;
    display: block;
    animation: ia-cursor-shimmer 5.2s ease-in-out infinite;
  }

  /* Soft companion halo — sits behind the mark, drifts slightly slower.
     Near-invisible at rest; blooms gold on hover (see .is-hovering below). */
  .ia-cursor-halo {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    background: radial-gradient(
      ellipse at center,
      rgba(240, 200, 95, 0.06) 0%,
      rgba(240, 200, 95, 0.025) 40%,
      rgba(240, 200, 95, 0.008) 70%,
      transparent 100%
    );
    transform: translate3d(-200px, -200px, 0) translate(-50%, -50%);
    transition:
      width 380ms var(--ease),
      height 380ms var(--ease),
      opacity 280ms var(--ease);
    will-change: transform, width, height;
    display: block;
    mix-blend-mode: screen;
  }

  /* Breathing shimmer on the mark itself — very gentle */
  @keyframes ia-cursor-shimmer {
    0%, 100% {
      filter:
        drop-shadow(0 0 2px rgba(244, 214, 120, 0.30))
        drop-shadow(0 0 6px rgba(240, 200, 95, 0.20))
        drop-shadow(0 0 14px rgba(240, 200, 95, 0.08));
    }
    50% {
      filter:
        drop-shadow(0 0 3px rgba(255, 235, 168, 0.42))
        drop-shadow(0 0 9px rgba(244, 214, 120, 0.28))
        drop-shadow(0 0 20px rgba(240, 200, 95, 0.12));
    }
  }

  /* Hover on interactive element — gentle bloom */
  .ia-cursor.is-hovering {
    width: 30px;
    height: 30px;
  }
  .ia-cursor-halo.is-hovering {
    width: 60px;
    height: 60px;
    background: radial-gradient(
      ellipse at center,
      rgba(244, 214, 120, 0.15) 0%,
      rgba(240, 200, 95, 0.06) 45%,
      rgba(240, 200, 95, 0.01) 75%,
      transparent 100%
    );
  }

  /* Click — quick pinch inward */
  .ia-cursor.is-active {
    width: 18px;
    height: 18px;
    transition: width 120ms ease-out, height 120ms ease-out, filter 120ms ease-out;
  }
  .ia-cursor-halo.is-active {
    width: 34px;
    height: 34px;
    transition: width 120ms ease-out, height 120ms ease-out;
  }

  /* Inside text fields the cursor vanishes so the I-beam isn't fought for */
  input:focus ~ .ia-cursor,
  textarea:focus ~ .ia-cursor {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ia-cursor { animation: none; }
}

/* =============================================================
   BESPOKE CARD — same documentary-credential aesthetic as the
   Joby site's .record-cell ("A life, in facts" + "Titles Held").
   8 thin gold L-brackets at corners, diagonal shimmer overlay
   on hover, lift + tilt + brighter brackets.
   Applied to .card and .intel-grid li.
   ============================================================= */

/* Obsolete duplicate rules removed — the unified .card/.engine-stat/.intel-grid li/.stat/.pillar rule below handles all bracket-corner + gradient-border treatment in one place. */

/* Older .card, .intel-grid li::before rule removed — its !important on
   background was pinning background-position to -100% 0 and blocking the
   hover sheen slide. The unified .card / .engine-stat / .intel-grid li /
   .stat / .pillar::before rule below handles this cleanly. */

/* Older .card, .intel-grid li:hover rule removed — superseded by the unified
   .card / .engine-stat / .intel-grid li / .stat / .pillar:hover rule below
   so the glass treatment can land cleanly on every card-class element. */

/* === Infinite glass-gliding shine on every card-class element ===
   Lifted directly from jobyweeks.com .btn::before — a skewed white band that
   glides diagonally across the card every ~4.6s, on a permanent loop. */
.card::after,
.engine-stat::after,
.intel-grid li::after,
.stat::after,
.pillar::after {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -120% !important;
  right: auto !important;
  bottom: auto !important;
  width: 70% !important;
  height: 200% !important;
  background: linear-gradient(
    100deg,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 62%) !important;
  transform: skewX(-22deg) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  opacity: 1 !important;
  animation: ia-card-glide 4.6s cubic-bezier(0.55, 0.06, 0.42, 0.98) infinite !important;
}
@keyframes ia-card-glide {
  0%   { left: -120%; }
  55%  { left: 160%; }
  100% { left: 160%; }
}
@media (prefers-reduced-motion: reduce) {
  .card::after,
  .engine-stat::after,
  .intel-grid li::after,
  .stat::after,
  .pillar::after { animation: none !important; }
}

/* =============================================================
   BRACKET-CORNER CARD CHROME (the documentary credential frame)
   8 gold L-brackets at each corner of every card-class element,
   plus a diagonal gold shimmer that brushes across on hover, plus
   a subtle 3D tilt-back lift. Applies to .card, .engine-stat,
   .intel-grid li, and .stat. Kept clean and brand-consistent so
   each component reads as part of the same archival vocabulary.
   ============================================================= */

/* Shared bracket-corner background pattern. Each corner is two 22x1px
   gold strips forming an L. Eight gradients total: 4 corners × 2 strips.
   The card's own dark background sits behind. */
/* Match jobyweeks.com card baseline EXACTLY: 8 gold brackets at corners, flat dark bg, no border, no box-shadow. */
.card,
.engine-stat,
.intel-grid li,
.stat,
.pillar {
  background:
    var(--gold-gloss) top 10px left 10px / 22px 1px no-repeat padding-box,
    var(--gold-gloss) top 10px left 10px / 1px 22px no-repeat padding-box,
    var(--gold-gloss) top 10px right 10px / 22px 1px no-repeat padding-box,
    var(--gold-gloss) top 10px right 10px / 1px 22px no-repeat padding-box,
    var(--gold-gloss) bottom 10px left 10px / 22px 1px no-repeat padding-box,
    var(--gold-gloss) bottom 10px left 10px / 1px 22px no-repeat padding-box,
    var(--gold-gloss) bottom 10px right 10px / 22px 1px no-repeat padding-box,
    var(--gold-gloss) bottom 10px right 10px / 1px 22px no-repeat padding-box,
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    var(--gold-gloss) border-box !important;
  border: 1px solid transparent !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  transition: transform 460ms var(--ease), background 460ms var(--ease);
  transform-origin: center center;
}

/* Diagonal shimmer sweep — a soft gold gloss that brushes across the card
   on hover, like a polished metal surface catching light. */
/* Glass-gliding sheen: bright narrow specular highlight that slides diagonally
   across the card on hover. Bright white at the peak so it reads as light
   catching glass, not warm gold like the bracket palette. */
.card::before,
.engine-stat::before,
.intel-grid li::before,
.stat::before,
.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 42%,
    rgba(255, 255, 255, 0.06) 47%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0.06) 53%,
    transparent 58%);
  background-size: 220% 100%;
  background-position: -100% 0;
  transition: background-position 900ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}
.card > *,
.engine-stat > *,
.intel-grid li > *,
.stat > *,
.pillar > * { position: relative; z-index: 1; }

/* Hover lift + 3D tilt + brighter brackets. The brackets grow from 22px to
   32px on hover, and the dim inset shadow becomes a warm radial glow. */
/* Hover: lift + 3D tilt + brackets grow 22 -> 32px brighter gold + warm radial corner glow.
   Match jobyweeks.com EXACTLY. No box-shadow, no glass insets, no backdrop-filter. */
.card:hover,
.engine-stat:hover,
.intel-grid li:hover,
.stat:hover,
.pillar:hover {
  transform: perspective(1000px) translateY(-4px) rotateX(2.5deg);
  background:
    var(--gold-gloss) top 10px left 10px / 32px 1px no-repeat padding-box,
    var(--gold-gloss) top 10px left 10px / 1px 32px no-repeat padding-box,
    var(--gold-gloss) top 10px right 10px / 32px 1px no-repeat padding-box,
    var(--gold-gloss) top 10px right 10px / 1px 32px no-repeat padding-box,
    var(--gold-gloss) bottom 10px left 10px / 32px 1px no-repeat padding-box,
    var(--gold-gloss) bottom 10px left 10px / 1px 32px no-repeat padding-box,
    var(--gold-gloss) bottom 10px right 10px / 32px 1px no-repeat padding-box,
    var(--gold-gloss) bottom 10px right 10px / 1px 32px no-repeat padding-box,
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(253, 229, 140, 0.07), transparent 70%) padding-box,
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    var(--gold-gloss) border-box !important;
}
.card:hover::before,
.engine-stat:hover::before,
.intel-grid li:hover::before,
.stat:hover::before,
.pillar:hover::before {
  background-position: 200% 0;
}

@media (prefers-reduced-motion: reduce) {
  .card:hover,
  .engine-stat:hover,
  .intel-grid li:hover,
  .stat:hover { transform: none; }
}

/* =============================================================
   GOLD-GLOSS EM TREATMENT — every <em> inside section headlines
   (and the hero) gets the rich gold-gloss text fill that the Joby
   site uses on emphasis. Reads as polished metal type instead of
   flat gold.
   ============================================================= */
.section-headline em,
.hero-headline em {
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  filter: drop-shadow(0 0 22px rgba(253, 229, 140, 0.4));
}

/* =============================================================
   AMBIENT BACKGROUND — desktop only
   Static gold radial gradients pinned to the body background.
   No animation, no mix-blend-mode, no infinite-loop filters.
   Mobile gets none of this (iOS WebKit can crash on heavy GPU
   effects under memory pressure).
   ============================================================= */
@media (min-width: 821px) {
  body {
    background:
      radial-gradient(ellipse 80% 60% at 15% 15%, rgba(240, 200, 95, 0.05), transparent 55%),
      radial-gradient(ellipse 70% 60% at 85% 85%, rgba(210, 160, 62, 0.045), transparent 55%),
      var(--bg-0) !important;
    background-attachment: fixed;
  }
}


/* =============================================================
   MOBILE iOS WEBKIT CRASH GUARD
   Same defense as the Joby site. Kill the heavy GPU effects on
   mobile that can OOM-crash iOS Safari/Chrome.
   ============================================================= */
@media (max-width: 820px) {
  /* Film grain mix-blend overlay — kill on mobile */
  body::before { display: none !important; }

  /* All backdrop-filter usage — flatten on mobile */
  #site-header,
  .nav-links,
  .nav-cta {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* =============================================================
   BESPOKE CARD — universal aesthetic (ported verbatim from
   jobyweeks.com). Layers, in order:
     1. Glassy frosted base — translucent fill + inset top highlight
     2. 8 thin gold L-bracket corners (22px legs, drawn in background)
     3. Always-running diagonal sheen sweep (4.6s loop, ::before)
     4. Diagonal shimmer wipe on hover (1.1s, ::after)
     5. Hot-gold metallic text (numerals, titles, CTAs) via
        background-clip: text + drop-shadow glow
     6. Hover state — bigger lift (8px) + 3D tilt + brackets brighten
        from --gold to --gold-hot and grow 22px→32px + corner radial
        wash + multi-layer gold halo shadow

   Targets:
     .card           — Audiences trio (Founders / Enterprise / Public Figures)
     .pillar         — Three-pillar framework rows
     .intel-grid li  — Intelligence grid tiles

   Companion text targets (gold-gloss + glow):
     .card-tag, .card-title em
     .pillar-num, .pillar-tag, .pillar-body h3 em
     .intel-name, .intel-name em
   ============================================================= */

/* Always-running diagonal sheen (4.6s loop) — verbatim btn-sheen
   timing from jobyweeks.com. Sweeps a soft gold wash across each
   card constantly, so the cards visibly shimmer at rest. */
@keyframes ia-card-sheen {
  0%   { background-position: -100% 0; }
  55%  { background-position: 200% 0; }
  100% { background-position: 200% 0; }
}

/* Wipe conflicting borders/shadows/backgrounds on the targets so
   the bracket-as-background-image system can take over cleanly. */
.card,
.pillar,
.intel-grid li {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Apply the bespoke bracket treatment + glassy frosted fill.
   Layers (top to bottom in the background stack):
     - 8× linear-gradient L-bracket corners
     - radial-gradient soft ambient gold wash from top-right
     - linear-gradient frosted-glass tint (subtle inset highlight up top)
     - flat --bg-card as the bottom layer */
.card,
.pillar,
.intel-grid li {
  position: relative;
  background:
    var(--gold-gloss) top 10px left 10px / 22px 1px no-repeat,
    var(--gold-gloss) top 10px left 10px / 1px 22px no-repeat,
    var(--gold-gloss) top 10px right 10px / 22px 1px no-repeat,
    var(--gold-gloss) top 10px right 10px / 1px 22px no-repeat,
    var(--gold-gloss) bottom 10px left 10px / 22px 1px no-repeat,
    var(--gold-gloss) bottom 10px left 10px / 1px 22px no-repeat,
    var(--gold-gloss) bottom 10px right 10px / 22px 1px no-repeat,
    var(--gold-gloss) bottom 10px right 10px / 1px 22px no-repeat,
    radial-gradient(ellipse 110% 80% at 100% 0%, rgba(253, 229, 140, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 247, 205, 0.04) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.35) 100%),
    var(--bg-card);
  /* Glassy frosted edge highlight at the top + soft inner shadow */
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 205, 0.10),
    inset 0 0 0 1px rgba(240, 200, 95, 0.05),
    0 8px 24px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden;
  transition: transform 460ms var(--ease), background 460ms var(--ease), box-shadow 320ms var(--ease);
  transform-origin: center center;
  isolation: isolate;
}

/* Always-on diagonal sheen — the "visible at rest" shimmer.
   Soft gold wash continuously sweeping across every card. */
.card::before,
.pillar::before,
.intel-grid li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(253, 229, 140, 0.09) 50%,
    transparent 62%);
  background-size: 220% 100%;
  background-position: -100% 0;
  pointer-events: none;
  z-index: 0;
  /* Reset properties from any prior ::before declarations on these classes */
  top: auto; left: auto; right: auto; height: auto;
  opacity: 1;
  animation: ia-card-sheen 4.6s cubic-bezier(0.55, 0.06, 0.42, 0.98) infinite;
}

/* On-hover diagonal shimmer wipe — stronger sweep that fires
   in response to pointer (layered above the always-on sheen). */
.card::after,
.pillar::after,
.intel-grid li:hover::after,
.intel-grid li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 32%,
    rgba(253, 229, 140, 0.18) 50%,
    transparent 68%);
  background-size: 220% 100%;
  background-position: -100% 0;
  transition: background-position 1100ms var(--ease);
  pointer-events: none;
  z-index: 0;
  /* Reset from prior .intel-grid li::after radial wash */
  top: auto; left: auto; right: auto; height: auto;
  opacity: 1;
}

/* Children sit above both shimmer layers */
.card > *,
.pillar > *,
.intel-grid li > * {
  position: relative;
  z-index: 1;
}

/* Hover state: bigger lift (8px) + 3D tilt + brackets shift to
   hot-gold and grow from 22px to 32px + corner radial wash +
   multi-layer gold halo shadow. */
.card:hover,
.pillar:hover,
.intel-grid li:hover {
  transform: perspective(1000px) translateY(-8px) rotateX(2.5deg);
  background:
    var(--gold-gloss) top 10px left 10px / 32px 1px no-repeat,
    var(--gold-gloss) top 10px left 10px / 1px 32px no-repeat,
    var(--gold-gloss) top 10px right 10px / 32px 1px no-repeat,
    var(--gold-gloss) top 10px right 10px / 1px 32px no-repeat,
    var(--gold-gloss) bottom 10px left 10px / 32px 1px no-repeat,
    var(--gold-gloss) bottom 10px left 10px / 1px 32px no-repeat,
    var(--gold-gloss) bottom 10px right 10px / 32px 1px no-repeat,
    var(--gold-gloss) bottom 10px right 10px / 1px 32px no-repeat,
    radial-gradient(ellipse 90% 70% at 0% 0%, rgba(253, 229, 140, 0.13), transparent 70%),
    radial-gradient(ellipse 110% 80% at 100% 100%, rgba(253, 229, 140, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(255, 247, 205, 0.06) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0.4) 100%),
    var(--bg-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 205, 0.18),
    inset 0 0 0 1px rgba(240, 200, 95, 0.10),
    0 0 0 1px rgba(240, 200, 95, 0.32),
    0 22px 56px rgba(0, 0, 0, 0.7),
    0 0 56px rgba(253, 229, 140, 0.22),
    0 0 120px rgba(253, 229, 140, 0.08) !important;
}
.card:hover::after,
.pillar:hover::after,
.intel-grid li:hover::after {
  background-position: 200% 0;
}

/* ===== Metallic gold-gloss text on numerals, italics, CTAs =====
   Multi-stop gold gradient clipped to text + drop-shadow halo.
   Verbatim from jobyweeks.com .action-card__num / .gold-gloss. */
/* Small-to-medium gold text (uppercase tags, italic emphasis) — these
   benefit from the bright top half of the gradient since the dark stops
   would otherwise compress and dominate at this scale. */
.card-tag,
.card-title em,
.pillar-tag,
.pillar-body h3 em,
.intel-name em {
  background: var(--gold-gloss);
  background-size: 100% 250%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow:
    0 0 10px rgba(240, 200, 95, 0.35),
    0 0 2px rgba(244, 214, 120, 0.6);
  filter: drop-shadow(0 1px 0 rgba(253, 229, 140, 0.15));
}

/* Pillar Roman numerals (I/II/III) — large enough that the full gradient
   develops into the polished-metal look with the signature shadow valley. */
.pillar-num {
  background: var(--gold-gloss);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 14px rgba(253, 229, 140, 0.32);
  filter: drop-shadow(0 1px 0 rgba(253, 229, 140, 0.15));
}

/* The intel name's own ::before underline can't coexist with
   the card's ::before sheen — re-emit the underline as a child
   element style instead. Use a dedicated outline above. */
.intel-name::before {
  display: none !important;
}

/* Reduced motion: kill the always-on sheen + the hover transform */
@media (prefers-reduced-motion: reduce) {
  .card::before,
  .pillar::before,
  .intel-grid li::before {
    animation: none;
  }
  .card:hover,
  .pillar:hover,
  .intel-grid li:hover {
    transform: none;
  }
}

/* =============================================================
   GOLD-GLOSS GRADIENT BORDER on pill buttons.
   Uses mask-composite to clip a gradient background to the border
   ring only — respects border-radius (pill / capsule shapes).
   ============================================================= */
.nav-cta,
.btn-primary {
  position: relative;
  border: 1px solid transparent !important;
}
.nav-cta::before,
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gold-gloss);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* =============================================================
   NIRVANI-TILE — verbatim port of nirvani.ai .tile-grid--jw-glass
   Class prefix mk-tile-* to avoid collisions. Palette tokens bound
   to IA gold spectrum. Source: ~/.claude/skills/nirvani-tile/.
   ============================================================= */

.mk-tile-grid {
  --tile-radius: 14px;
  --tile-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tile-accent: #F0C85F;            /* IA --gold */
  --tile-cream:  #FDE58C;            /* IA --gold-hot — hover brackets brighten to this */
  --tile-warm:   240, 200, 95;       /* IA gold RGB */
}

.mk-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 8px;
  align-items: start;
  perspective: 1200px;
}
@media (max-width: 1024px) { .mk-tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .mk-tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .mk-tile-grid { grid-template-columns: repeat(2, 1fr); } }

.mk-tile-grid--equal { align-items: stretch; }
.mk-tile-grid--equal .mk-tile { align-self: stretch; min-height: 130px; }
.mk-tile-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .mk-tile-grid--cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .mk-tile-grid--cols-3 { grid-template-columns: repeat(2, 1fr); } }

.mk-tile {
  --mx: 50%;
  --my: 50%;
  position: relative;
  background: rgba(10, 10, 10, 0.4);
  border: 1px solid rgba(var(--tile-warm), 0.45);
  border-radius: var(--tile-radius);
  padding: 24px 22px;
  cursor: pointer;
  transition: all 0.4s var(--tile-ease);
  overflow: hidden;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 0 10px rgba(var(--tile-warm), 0.12),
    0 0 25px rgba(var(--tile-warm), 0.06);
  align-self: start;
  transform-style: preserve-3d;
  will-change: transform;
  background-image: radial-gradient(
    600px circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.07),
    transparent 40%
  );
}
.mk-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  opacity: 0.5;
  transition: opacity 0.4s ease;
  background: linear-gradient(90deg, transparent, var(--tile-accent), #FFFFFF, var(--tile-accent), transparent);
}
.mk-tile::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0.15;
  transition: opacity 0.4s ease;
  pointer-events: none;
  background: radial-gradient(ellipse at top center, rgba(255,255,255,0.06), transparent 70%);
}
.mk-tile:hover, .mk-tile.active {
  border-color: rgba(var(--tile-warm), 0.70);
  transform: translateY(-4px);
  box-shadow:
    0 0 14px rgba(var(--tile-warm), 0.18),
    0 0 30px rgba(var(--tile-warm), 0.08),
    inset 0 0 20px rgba(var(--tile-warm), 0.05);
  background: rgba(255, 255, 255, 0.05);
}
.mk-tile:hover::before, .mk-tile.active::before { opacity: 1; }
.mk-tile:hover::after,  .mk-tile.active::after  { opacity: 1; }

.mk-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: radial-gradient(circle at 35% 30%, rgba(var(--tile-warm), 0.18) 0%, rgba(0,0,0,0.6) 70%);
  border: 1px solid rgba(var(--tile-warm), 0.4);
  transition: all 0.4s ease;
  color: var(--tile-accent);
  box-shadow:
    0 0 10px rgba(var(--tile-warm), 0.25),
    0 0 22px rgba(var(--tile-warm), 0.12),
    inset 0 0 10px rgba(var(--tile-warm), 0.06);
}
.mk-tile:hover .mk-tile-icon, .mk-tile.active .mk-tile-icon {
  background: radial-gradient(circle at 35% 30%, rgba(var(--tile-warm), 0.28) 0%, rgba(0,0,0,0.35) 70%);
  border-color: rgba(var(--tile-warm), 0.45);
  box-shadow: 0 0 28px rgba(var(--tile-warm), 0.25), inset 0 0 14px rgba(var(--tile-warm), 0.08);
}
.mk-tile-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* When the inner SVG uses an explicit fill (e.g. goldShine gradient on the
   intel icons), let that fill render instead of the stroke default. */
.mk-tile-icon svg [fill] { stroke: none; }
.mk-tile-icon--roman {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  font-style: italic;
  letter-spacing: 0.5px;
  color: var(--tile-accent);
  text-shadow: 0 0 8px rgba(var(--tile-warm), 0.35);
}
.mk-tile:hover .mk-tile-icon--roman,
.mk-tile.active .mk-tile-icon--roman {
  color: var(--tile-cream);
}

.mk-tile-name {
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
  color: rgba(255, 255, 255, 0.92);
}
.mk-tile:hover .mk-tile-name, .mk-tile.active .mk-tile-name { color: #fff; }

.mk-tile-desc {
  position: relative;
  z-index: 1;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.4s ease,
              margin-top 0.4s ease;
  opacity: 0;
  margin-top: 0;
}
.mk-tile.active .mk-tile-desc {
  max-height: 400px;
  opacity: 1;
  margin-top: 12px;
}
.mk-tile-desc p {
  font-family: inherit;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}
.mk-tile-desc a {
  color: var(--tile-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--tile-warm), 0.45);
  padding-bottom: 1px;
}
.mk-tile-desc a:hover { color: #fff; border-color: #fff; }

.mk-tile-expand {
  position: absolute;
  bottom: 10px;
  right: 12px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: all 0.3s ease;
  z-index: 1;
}
.mk-tile.active .mk-tile-expand { transform: rotate(180deg); }
.mk-tile-expand svg {
  width: 14px;
  height: 14px;
  stroke: var(--tile-accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.6))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

/* ----- JW-glass variant — chrome L-brackets, opaque body, diagonal sweep, 3D tilt ----- */
.mk-tile-grid--jw-glass { align-items: start; }
.mk-tile-grid--jw-glass .mk-tile {
  align-self: start;
  min-height: 210px;
  justify-content: center;
  padding: 30px 22px 28px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--tile-radius);
  overflow: hidden;
  background:
    linear-gradient(rgba(var(--tile-warm), 0.55), rgba(var(--tile-warm), 0.55)) top    12px left  12px / 22px 1px no-repeat,
    linear-gradient(rgba(var(--tile-warm), 0.55), rgba(var(--tile-warm), 0.55)) top    12px left  12px / 1px 22px no-repeat,
    linear-gradient(rgba(var(--tile-warm), 0.55), rgba(var(--tile-warm), 0.55)) top    12px right 12px / 22px 1px no-repeat,
    linear-gradient(rgba(var(--tile-warm), 0.55), rgba(var(--tile-warm), 0.55)) top    12px right 12px / 1px 22px no-repeat,
    linear-gradient(rgba(var(--tile-warm), 0.55), rgba(var(--tile-warm), 0.55)) bottom 12px left  12px / 22px 1px no-repeat,
    linear-gradient(rgba(var(--tile-warm), 0.55), rgba(var(--tile-warm), 0.55)) bottom 12px left  12px / 1px 22px no-repeat,
    linear-gradient(rgba(var(--tile-warm), 0.55), rgba(var(--tile-warm), 0.55)) bottom 12px right 12px / 22px 1px no-repeat,
    linear-gradient(rgba(var(--tile-warm), 0.55), rgba(var(--tile-warm), 0.55)) bottom 12px right 12px / 1px 22px no-repeat,
    linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(10, 10, 10, 0.96));
  background-image: radial-gradient(
    600px circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.07),
    transparent 40%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 8px 30px rgba(0, 0, 0, 0.6);
  transition:
    transform 460ms var(--tile-ease),
    background 460ms var(--tile-ease),
    border-color 460ms var(--tile-ease),
    box-shadow 460ms var(--tile-ease);
  transform-origin: center center;
}
.mk-tile-grid--jw-glass .mk-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  height: auto; width: auto;
  background: linear-gradient(115deg,
    transparent 32%,
    rgba(240, 232, 206, 0.18) 50%,
    transparent 68%);
  background-size: 220% 100%;
  background-position: -100% 0;
  opacity: 1;
  transition: background-position 1100ms var(--tile-ease);
  pointer-events: none;
  z-index: 0;
}
.mk-tile-grid--jw-glass .mk-tile::after { display: none; }
.mk-tile-grid--jw-glass .mk-tile > * { position: relative; z-index: 1; }
.mk-tile-grid--jw-glass .mk-tile:hover,
.mk-tile-grid--jw-glass .mk-tile.active {
  transform: perspective(1000px) translateY(-6px) rotateX(2.5deg);
  border-color: rgba(var(--tile-warm), 0.65);
  background:
    linear-gradient(var(--tile-cream), var(--tile-cream)) top    12px left  12px / 32px 1px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) top    12px left  12px / 1px 32px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) top    12px right 12px / 32px 1px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) top    12px right 12px / 1px 32px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) bottom 12px left  12px / 32px 1px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) bottom 12px left  12px / 1px 32px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) bottom 12px right 12px / 32px 1px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) bottom 12px right 12px / 1px 32px no-repeat,
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(var(--tile-warm), 0.10), transparent 70%),
    radial-gradient(600px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.07), transparent 40%),
    linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(14, 14, 14, 0.98));
  box-shadow:
    0 0 0 1px rgba(var(--tile-warm), 0.35),
    0 0 20px rgba(var(--tile-warm), 0.20),
    0 0 50px rgba(var(--tile-warm), 0.12),
    0 16px 50px rgba(0, 0, 0, 0.6);
}
.mk-tile-grid--jw-glass .mk-tile:hover::before,
.mk-tile-grid--jw-glass .mk-tile.active::before {
  background-position: 200% 0;
}
@media (prefers-reduced-motion: reduce) {
  .mk-tile-grid--jw-glass .mk-tile:hover,
  .mk-tile-grid--jw-glass .mk-tile.active { transform: translateY(-2px); }
}
.mk-tile-grid--jw-glass .mk-tile .mk-tile-expand {
  bottom: 6px;
  right: 50%;
  transform: translateX(50%);
  width: 22px;
  height: 22px;
}
.mk-tile-grid--jw-glass .mk-tile.active .mk-tile-expand {
  transform: translateX(50%) rotate(180deg);
}

/* ----- "stacked" modifier — full-width rows, each card a horizontal
         row (icon on the left, title + body on the right). Keeps brackets,
         sheen, hover. Use for sequenced narratives like the pillars. ----- */
.mk-tile-grid--stacked {
  grid-template-columns: 1fr !important;
  gap: 18px;
}
.mk-tile-grid--stacked .mk-tile {
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 32px;
  row-gap: 6px;
  text-align: left;
  min-height: 0 !important;
  padding: 34px 42px !important;
  justify-items: start;
  align-items: start;
}
.mk-tile-grid--stacked .mk-tile-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
  width: 58px;
  height: 58px;
  border-radius: 12px;
}
.mk-tile-grid--stacked .mk-tile-icon--roman { font-size: 26px; }
.mk-tile-grid--stacked .mk-tile-name {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
  font-size: 19px;
}
.mk-tile-grid--stacked .mk-tile-desc {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  text-align: left;
}
.mk-tile-grid--stacked .mk-tile-desc p { text-align: left; font-size: 14.5px; }
@media (max-width: 640px) {
  .mk-tile-grid--stacked .mk-tile { padding: 28px 22px !important; column-gap: 18px; }
  .mk-tile-grid--stacked .mk-tile-icon { width: 48px; height: 48px; }
}

/* ----- "open" modifier — brackets permanently bright, descriptions
         always visible, no accordion. Hover still lifts and sheens. ----- */
.mk-tile-grid--open .mk-tile { cursor: default; }
.mk-tile-grid--open .mk-tile-expand { display: none; }
.mk-tile-grid--open .mk-tile-desc {
  max-height: none;
  opacity: 1;
  margin-top: 12px;
}
.mk-tile-grid--open.mk-tile-grid--jw-glass .mk-tile {
  min-height: 260px;
  align-self: stretch;
  justify-content: flex-start;
}
/* Audience grid only — enforce cross-row uniform height. */
#practice .mk-tile-grid--open.mk-tile-grid--jw-glass .mk-tile {
  min-height: 320px;
}

/* Audience + Intel cards — bare icon, no boxed container. The seal stands on
   its own with a soft gold drop-shadow halo. Powerful people don't get boxed. */
#practice .mk-tile-icon,
#intelligence .mk-tile-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  width: auto;
  height: auto;
  margin-bottom: 16px;
}
#practice .mk-tile-icon svg,
#intelligence .mk-tile-icon svg {
  width: 50px !important;
  height: 50px !important;
  shape-rendering: geometricPrecision;
  filter: drop-shadow(0 0 6px rgba(var(--tile-warm), 0.35));
  transition: filter 0.4s ease, transform 0.4s ease;
}
#practice .mk-tile:hover .mk-tile-icon,
#practice .mk-tile.active .mk-tile-icon,
#intelligence .mk-tile:hover .mk-tile-icon,
#intelligence .mk-tile.active .mk-tile-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
#practice .mk-tile:hover .mk-tile-icon svg,
#practice .mk-tile.active .mk-tile-icon svg,
#intelligence .mk-tile:hover .mk-tile-icon svg,
#intelligence .mk-tile.active .mk-tile-icon svg {
  filter: drop-shadow(0 0 10px rgba(var(--tile-warm), 0.5));
  transform: scale(1.04);
}
.mk-tile-grid--open.mk-tile-grid--jw-glass .mk-tile {
  background:
    linear-gradient(var(--tile-cream), var(--tile-cream)) top    12px left  12px / 32px 1px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) top    12px left  12px / 1px 32px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) top    12px right 12px / 32px 1px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) top    12px right 12px / 1px 32px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) bottom 12px left  12px / 32px 1px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) bottom 12px left  12px / 1px 32px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) bottom 12px right 12px / 32px 1px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) bottom 12px right 12px / 1px 32px no-repeat,
    linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(10, 10, 10, 0.96));
  border-color: rgba(var(--tile-warm), 0.45);
}
.mk-tile-grid--open.mk-tile-grid--jw-glass .mk-tile:hover {
  background:
    linear-gradient(var(--tile-cream), var(--tile-cream)) top    12px left  12px / 32px 1px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) top    12px left  12px / 1px 32px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) top    12px right 12px / 32px 1px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) top    12px right 12px / 1px 32px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) bottom 12px left  12px / 32px 1px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) bottom 12px left  12px / 1px 32px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) bottom 12px right 12px / 32px 1px no-repeat,
    linear-gradient(var(--tile-cream), var(--tile-cream)) bottom 12px right 12px / 1px 32px no-repeat,
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(var(--tile-warm), 0.10), transparent 70%),
    radial-gradient(600px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.07), transparent 40%),
    linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(14, 14, 14, 0.98));
  border-color: rgba(var(--tile-warm), 0.65);
}