/* AKARD — River Oaks register: cream parchment, deep ink, hunter green
   and antique gold. Restrained classical typography, generous whitespace.
   No dark theatrics, no city skyline, no refinery flame. Members-only
   feel. */

/* Premium first-impression: 420ms body fade-in masks paint-stage
   transitions (font swap when Cormorant loads, marble image fill-in,
   survey panel hydration). One smooth reveal instead of discrete paint
   events. Honors prefers-reduced-motion. Also declared inline in each
   index.html so it fires before styles.css finishes loading. */
body {
  animation: akard-reveal 420ms ease-out both;
}
@keyframes akard-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

/* Self-hosted woff2 (latin subset only). font-display:swap so the system
   serif renders instantly while the web font streams; the swap is barely
   visible because Georgia is the immediate fallback for Cormorant.
   Cormorant Garamond ships one woff2 covering 300/400/500/600 (variable);
   italics ship one woff2 covering 300i/400i. Fonts live in /brand/fonts/
   and are fingerprinted by Vercel's immutable cache headers. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('brand/fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('brand/fonts/cormorant-garamond-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('brand/fonts/cormorant-sc-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('brand/fonts/cormorant-sc-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('brand/fonts/cinzel-600.woff2') format('woff2');
}

:root {
  --bg:        #F2EBDC;           /* warm parchment */
  --bg-deep:   #ECE4D0;           /* deeper parchment for elevation */
  --bg-soft:   #F8F2E5;           /* paler cream for surfaces */
  --ink:       #0E1320;           /* deep navy-black, main type */
  --ink-dim:   rgba(14, 19, 32, 0.66);
  --ink-faint: rgba(14, 19, 32, 0.42);
  --ink-soft:  rgba(14, 19, 32, 0.14);
  --gold:      #BE9A48;           /* natural antique gold — warm amber, less saturated than canonical */
  --gold-deep: #8E7128;           /* deeper natural for hover/active */
  --gold-soft: rgba(190, 154, 72, 0.22);
  --green:     #00563F;           /* British Racing Green, lighter */
  --green-deep: #004225;          /* British Racing Green */
  --rule:      rgba(14, 19, 32, 0.14);
  --rule-soft: rgba(14, 19, 32, 0.07);
  --rule-gold: rgba(190, 154, 72, 0.32);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* html/body background = deepest stop of the inquiry marble so overscroll
   past the footer reveals the marble's darkest pool, not a clashing color.
   Now #052015 (deep emerald) to match the green marble's darkest gradient
   stop — same logic as the previous blue-marble pass. */
html { scrollbar-width: none; -ms-overflow-style: none; overflow-x: hidden; overflow-x: clip; background: #052015; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body {
  background: #052015;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, .hero-title, .section-title, .factor-name, .pillar-name { text-wrap: balance; }
p, .hero-lede, .section-sub, .factor-desc, .pillar-desc { text-wrap: pretty; }

/* SMOOTH SCROLL — momentum on anchor jumps; native, no library. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* CROSS-DOCUMENT VIEW TRANSITIONS — Chrome 126+/Safari 18+. Animates
   navigation between locales (EN ↔ ES ↔ AR ↔ ZH) as a smooth cross-
   fade instead of a hard cut. Named transitions on the nav + footer
   keep persistent chrome anchored while the content swaps. Browsers
   without support fall back to a normal navigation — no JS error. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: cubic-bezier(0.22, 0.6, 0.22, 1);
}
::view-transition-old(root) { animation-name: vt-fade-out; }
::view-transition-new(root) { animation-name: vt-fade-in; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } }
/* Persistent chrome — nav, lang switcher, footer don't fade, they stay
   visually anchored during the transition (gives the "page translated
   in place" feel rather than "everything redrew"). */
nav         { view-transition-name: site-nav; }
.nav-mark   { view-transition-name: site-mark; }
.nav-lang   { view-transition-name: site-lang; }
footer      { view-transition-name: site-footer; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* SCROLL-TRIGGERED FADE-INS — section enters viewport, IntersectionObserver
   adds .in-view, content fades + lifts. Initial state hides via opacity:0
   so JS-disabled users get a fallback via .no-js (added below).
   .fade-in--instant skips the transition entirely (used for above-the-fold
   sections on first paint, so the page doesn't appear to "settle" during
   the first 700ms). */
.fade-in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: opacity, transform;
}
.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}
.fade-in--instant {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.no-js .fade-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
}

/* STICKY-SHRINKING NAV — when scrolled past 60px, nav padding drops and a
   soft shadow lifts the bar off the page. Communicates "the site is paying
   attention to your position."

   NO backdrop-filter: a live blur on a sticky bar forces the GPU to
   re-sample everything scrolling behind it every frame — the single worst
   source of scroll stutter in mobile in-app webviews. A solid bar with a
   faint shadow reads more institutional and composites for free. */
nav { transition: padding 0.3s ease, box-shadow 0.3s ease; }
nav.scrolled {
  padding: 0.7rem 0;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--rule-gold), 0 8px 24px -16px rgba(14, 19, 32, 0.22);
}

/* PILLAR-NAME SHIMMER — gradient text already in place; on hover, sweep
   the gradient horizontally so the gold appears to catch light. */
.pillar-name {
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 0.9s ease;
}
.pillar:hover .pillar-name {
  background-position: 100% 50%;
}

/* ─────────────────────────────────────────────────────────────────────
   FUTURISTIC SURVEY — one question at a time. Glass panel over marble
   with an animated gradient mesh, spring-eased slide transitions
   between steps, progress bar, auto-advancing chips. State + transition
   logic in /widget/futuristic-survey.js.
   ───────────────────────────────────────────────────────────────────── */
.akard-survey {
  position: relative;
  margin: 2.5rem auto 0;
  max-width: 760px;
  min-height: 560px;
}
/* Polished black stone: institutional finance register PLUS visible
   stone texture (SVG fractalNoise grain). Reads as cut & polished
   basalt/granite, not flat black plastic. No veining (caused diagonal
   streak at this panel size); just uniform stone grain + subtle
   depth gradient + sharp institutional corners. */
.fs-shell {
  position: relative;
  background:
    /* Subtle vertical depth gradient: slightly lighter top, darker bottom. */
    linear-gradient(180deg, #0e0e12 0%, #050507 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 3px;  /* Near-sharp corners: institutional */
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,   /* polished top highlight */
    0 -1px 0 rgba(0, 0, 0, 0.5) inset,         /* deep bottom edge */
    0 28px 72px -16px rgba(0, 0, 0, 0.85),     /* deep lift off the marble */
    0 4px 12px -2px rgba(0, 0, 0, 0.55);       /* close shadow for solidity */
}
/* Real black-stone texture via the verde antique marble image,
   aggressively filtered to read as polished black marble:
   - grayscale(1) drops all color
   - brightness(0.22) takes the medium-dark marble down to deep black
   - contrast(1.6) sharpens the veining + grain so it stays visible
     after the brightness drop
   The actual veining patterns and stone surface come through —
   this is real cut polished stone, not procedural noise pretending. */
.fs-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background:
    /* Polished-surface sheen layer on top of the marble */
    radial-gradient(60% 40% at 18% 8%, rgba(255, 255, 255, 0.06) 0%, transparent 65%),
    /* The filtered marble itself — real stone veining and texture */
    url('brand/marble-green.webp') center center / cover no-repeat;
  filter: grayscale(1) brightness(0.22) contrast(1.6) saturate(0);
  animation: none;
}
@keyframes fs-mesh-drift {
  0%   { background-position: 0% 0%,   0% 0%,   0% 0%; }
  50%  { background-position: 10% -8%, -12% 6%,  8% -10%; }
  100% { background-position: -6% 5%,  8% -10%, -8% 6%; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-mesh { animation: none; }
}

/* Progress strip — fills as the user advances through questions. */
.fs-progress {
  position: relative;
  z-index: 2;
  height: 2px;
  background: rgba(245, 240, 228, 0.08);
}
.fs-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #BE9A48, #E8C470, #BE9A48);
  background-size: 200% 100%;
  animation: fs-bar-sheen 6s linear infinite;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fs-bar-sheen {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Step counter — top right */
.fs-meta {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.4rem 0;
  font-family: 'Cormorant SC', serif;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 240, 228, 0.5);
}
.fs-step-count { color: rgba(232, 196, 112, 0.85); font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.18em; }

/* Question stage — viewport where cards slide in/out. min-height
   sized for the longest locale's welcome content (ES title is ~17
   words, multi-line title + lead + meta + button must fit inside
   the card's overflow:hidden box). */
.fs-stage {
  position: relative;
  z-index: 1;
  min-height: 400px;
  padding: 2rem 1.6rem 1.6rem;
  overflow: hidden;
}
.fs-card {
  position: absolute;
  inset: 2rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  overflow: hidden;
}
/* Scrollable middle layer — chips or inputs overflow into a scrolling
   container, so the prompt/hint stay at the top and the actions row
   stays anchored at the bottom no matter how many chips render. */
.fs-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 196, 112, 0.3) transparent;
}
.fs-content::-webkit-scrollbar { width: 4px; }
.fs-content::-webkit-scrollbar-thumb { background: rgba(232, 196, 112, 0.3); border-radius: 2px; }
.fs-content::-webkit-scrollbar-track { background: transparent; }
.fs-card--active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.fs-card--leaving {
  opacity: 0;
  transform: translateX(-24px);
}
.fs-card--entering {
  opacity: 0;
  transform: translateX(24px);
}
/* Back-direction variants — when user clicks Back, new card slides
   in from the LEFT (the direction they came from) instead of right. */
.fs-card--entering-back {
  opacity: 0;
  transform: translateX(-24px);
}
.fs-card--leaving-back {
  opacity: 0;
  transform: translateX(24px);
}
@media (prefers-reduced-motion: reduce) {
  .fs-card { transition: opacity 0.2s ease; transform: none !important; }
}

.fs-prompt {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.25;
  color: rgba(250, 246, 234, 0.98);
  text-wrap: balance;
  letter-spacing: -0.01em;
}
.fs-prompt em { font-style: italic; color: #E8C470; }
.fs-hint {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: rgba(245, 240, 228, 0.58);
  margin-top: -0.6rem;
}

/* Single-line text inputs — underline only, focus glow */
.fs-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: rgba(250, 246, 234, 1);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 300;
  padding: 0.4rem 0 0.6rem;
  border-bottom: 1px solid rgba(245, 240, 228, 0.25);
  transition: border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  caret-color: #E8C470;
  letter-spacing: -0.005em;
}
.fs-input::placeholder {
  color: rgba(245, 240, 228, 0.32);
  font-style: italic;
}
.fs-input:focus {
  border-bottom-color: #E8C470;
  padding-bottom: 0.55rem;
  box-shadow: 0 1px 0 0 #E8C470;
}

.fs-textarea {
  width: 100%;
  background: rgba(3, 22, 14, 0.32);
  border: 1px solid rgba(245, 240, 228, 0.18);
  border-radius: 6px;
  outline: none;
  color: rgba(250, 246, 234, 1);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.65;
  padding: 0.85rem 1rem;
  min-height: 120px;
  resize: vertical;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  caret-color: #E8C470;
}
.fs-textarea::placeholder {
  color: rgba(245, 240, 228, 0.4);
  font-style: italic;
}
.fs-textarea:focus {
  border-color: rgba(232, 196, 112, 0.5);
  box-shadow: 0 0 0 4px rgba(232, 196, 112, 0.08);
}

/* Choice chips — auto-advance on click. Big tap targets, gold halo
   on selection. */
.fs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.fs-chip {
  flex: 1 1 auto;
  min-width: max(140px, 30%);
  background: rgba(8, 24, 16, 0.35);
  border: 1px solid rgba(245, 240, 228, 0.18);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: rgba(250, 246, 234, 0.92);
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.25s ease,
              background 0.25s ease,
              box-shadow 0.25s ease;
}
.fs-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(232, 196, 112, 0.4);
  background: rgba(8, 24, 16, 0.5);
}
.fs-chip:active { transform: translateY(0) scale(0.98); }
.fs-chip--selected {
  border-color: #E8C470;
  background: linear-gradient(135deg, rgba(232, 196, 112, 0.22), rgba(190, 154, 72, 0.12));
  box-shadow: 0 0 0 1px rgba(232, 196, 112, 0.5),
              0 8px 24px -8px rgba(232, 196, 112, 0.35);
  color: rgba(250, 246, 234, 1);
}
.fs-chip-label {
  display: block;
  font-style: italic;
}
.fs-chip-note {
  display: block;
  font-family: 'Cormorant SC', serif;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 240, 228, 0.45);
  margin-top: 0.35rem;
}
.fs-chip--selected .fs-chip-note { color: rgba(232, 196, 112, 0.8); }

/* Action row — Next / Skip / Back. flex-shrink: 0 + no margin-top:auto
   so the row stays anchored at the bottom of the card regardless of
   how the content above renders. */
.fs-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
/* margin-left: auto only applies in the action row, not in the
   centered welcome card. Was causing the Begin button to drift to
   the bottom-right corner instead of centering. */
.fs-actions .fs-next { margin-left: auto; }
.fs-back {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Cormorant SC', serif;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(245, 240, 228, 0.45);
  padding: 0.5rem 0.2rem;
  transition: color 0.2s;
}
.fs-back:hover { color: rgba(232, 196, 112, 0.8); }
.fs-back[disabled] { opacity: 0.25; cursor: not-allowed; }
.fs-skip {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(245, 240, 228, 0.42);
  transition: color 0.2s;
}
.fs-skip:hover { color: rgba(232, 196, 112, 0.7); }
.fs-next {
  background: linear-gradient(180deg, #C8A24C 0%, #B48E32 50%, #A47E28 100%);
  border: 1px solid #6F5018;
  border-radius: 999px;
  color: #052015;
  cursor: pointer;
  font-family: 'Cormorant SC', serif;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.2s ease,
              box-shadow 0.25s ease;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 240, 170, 0.25);
}
.fs-next:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 240, 170, 0.3); }
.fs-next:active { transform: translateY(0) scale(0.98); }
.fs-next[disabled] { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4); }
.fs-next-arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fs-next:hover .fs-next-arrow { transform: translateX(3px); }

/* Welcome card — first screen with begin button. Sized to fit the
   LONGEST locale title (ES: "El sistema para la Mecánica de Nuevos
   Emprendimientos. Diseñado para una aventura de toda una vida.")
   without clipping the Begin button at the bottom. Tighter gap and
   padding, slightly smaller title cap, and a wider title max-width
   so long lines wrap to fewer rows. */
.fs-welcome {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.95rem;
  padding: 0.9rem 1rem;
}
.fs-welcome-eyebrow {
  font-family: 'Cormorant SC', serif;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #E8C470;
}
.fs-welcome-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  line-height: 1.22;
  color: rgba(250, 246, 234, 0.98);
  text-wrap: balance;
  max-width: 640px;
}
.fs-welcome-title em { font-style: italic; color: #E8C470; }
.fs-welcome-lead {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(245, 240, 228, 0.86);
  max-width: 520px;
  margin-top: -0.2rem;
  /* Balance distributes words evenly so "layer." doesn't orphan on
     its own line. The two sentences end up one per line. */
  text-wrap: balance;
}
.fs-welcome-meta {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(245, 240, 228, 0.5);
}

/* Submission state */
.fs-done {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 2rem 1rem;
  min-height: 320px;
  animation: fs-done-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fs-done-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fs-done-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(232, 196, 112, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(232, 196, 112, 0.08);
  position: relative;
}
.fs-done-mark::before,
.fs-done-mark::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(232, 196, 112, 0.3);
  animation: fs-done-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.fs-done-mark::before { inset: -8px; }
.fs-done-mark::after  { inset: -16px; animation-delay: 0.6s; }
@keyframes fs-done-pulse {
  0% { opacity: 0.6; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(1.25); }
}
.fs-done-tick {
  width: 22px; height: 22px;
  stroke: #E8C470; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: fs-done-tick 0.6s cubic-bezier(0.55, 0.06, 0.68, 0.19) 0.25s forwards;
}
@keyframes fs-done-tick {
  to { stroke-dashoffset: 0; }
}
.fs-done-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  color: rgba(250, 246, 234, 1);
}
.fs-done-title em { font-style: italic; color: #E8C470; }
.fs-done-note {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: rgba(245, 240, 228, 0.72);
  max-width: 460px;
  line-height: 1.7;
}
/* Post-review "learn more" links to the area-of-focus pages. */
.fs-done-areas {
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.fs-done-areas-label {
  font-family: 'Cormorant SC', serif;
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 240, 228, 0.5);
}
.fs-done-areas-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.fs-done-area {
  position: relative;
  font-family: 'Cormorant SC', serif;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #E8C470;
  text-decoration: none;
  padding-bottom: 0.22rem;
  transition: color 0.3s;
}
.fs-done-area::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  transition: opacity 0.3s;
}
.fs-done-area:hover { color: rgba(250, 246, 234, 1); }
.fs-done-area:hover::after { opacity: 0.6; }
@media (max-width: 560px) {
  .fs-done-areas-row { flex-direction: column; gap: 1rem; }
}

/* Error toast */
.fs-error {
  margin: 0.6rem 1.4rem;
  padding: 0.6rem 0.9rem;
  background: rgba(140, 42, 31, 0.18);
  border-left: 2px solid rgba(232, 140, 120, 0.6);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: rgba(245, 240, 228, 0.88);
  font-size: 0.95rem;
  border-radius: 0 4px 4px 0;
  animation: fs-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes fs-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* Mobile */
@media (max-width: 640px) {
  .akard-survey { min-height: 540px; }
  .fs-stage { padding: 1.4rem 1rem 1.2rem; min-height: 420px; }
  .fs-card { inset: 1.4rem 1rem 1.2rem; gap: 1.1rem; }
  .fs-prompt { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .fs-input { font-size: 1.4rem; }
  .fs-meta { padding: 0.7rem 1.1rem 0; font-size: 0.56rem; letter-spacing: 0.22em; }
  .fs-actions { flex-wrap: wrap; gap: 0.8rem; }
  .fs-next { width: 100%; justify-content: center; }
  .fs-back { order: 3; }

  /* Welcome card — Begin button should stay auto-width and centered,
     not stretch full-width like the question-card Next button. */
  .fs-welcome { padding: 0.8rem 0.5rem; gap: 0.9rem; justify-content: space-evenly; }
  .fs-welcome-title { font-size: clamp(1.25rem, 5.2vw, 1.65rem); line-height: 1.2; }
  .fs-welcome-lead { font-size: 1rem; max-width: 92%; }
  .fs-welcome-meta { font-size: 0.85rem; }
  .fs-welcome .fs-next { width: auto; padding: 0.8rem 1.8rem; }

  /* Chips — let two narrow chips share a row on 320–375px screens.
     Drop min-width and let flex grow distribute remaining space. */
  .fs-chip { min-width: 0; flex: 1 1 calc(50% - 0.6rem); padding: 0.85rem 1rem; font-size: 1rem; }
  .fs-chip-note { font-size: 0.5rem; letter-spacing: 0.18em; }
}

/* Extra-narrow phones — chips stack one per row to avoid cramped text. */
@media (max-width: 380px) {
  .fs-chip { flex: 1 1 100%; }
  .fs-welcome-title { font-size: clamp(1.15rem, 5.8vw, 1.5rem); }
}

[dir="rtl"] .fs-card--leaving { transform: translateX(24px); }
[dir="rtl"] .fs-card--entering { transform: translateX(-24px); }
[dir="rtl"] .fs-next-arrow { transform: scaleX(-1); }
[dir="rtl"] .fs-next:hover .fs-next-arrow { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .fs-progress-fill { left: auto; right: 0; }

/* ─────────────────────────────────────────────────────────────────────
   INQUIRY CHAT — kept for fallback / future use; superseded by the
   futuristic survey above. Styles remain but no longer mount by default.
   ───────────────────────────────────────────────────────────────────── */
.akard-inquiry-chat {
  position: relative;
  margin: 2.5rem auto 0;
  max-width: 760px;
  min-height: 360px;
}
.aic-root {
  display: flex;
  flex-direction: column;
  background: rgba(8, 24, 16, 0.55);
  border: 1px solid rgba(245, 240, 228, 0.18);
  border-radius: 6px;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.aic-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid rgba(245, 240, 228, 0.12);
  font-family: 'Cormorant SC', serif;
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(245, 240, 228, 0.88);
}
.aic-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34C759;
  box-shadow: 0 0 6px rgba(52, 199, 89, 0.5);
  display: inline-block;
}
.aic-feed {
  flex: 1;
  padding: 1.2rem;
  overflow-y: auto;
  max-height: 460px;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.aic-feed::-webkit-scrollbar { width: 0; height: 0; }
.aic-row {
  display: flex;
}
.aic-row--akard {
  justify-content: flex-start;
  padding-right: 2.5rem;
}
.aic-row--user {
  justify-content: flex-end;
  padding-left: 2.5rem;
}
[dir="rtl"] .aic-row--akard {
  justify-content: flex-end;
  padding-right: 0;
  padding-left: 2.5rem;
}
[dir="rtl"] .aic-row--user {
  justify-content: flex-start;
  padding-left: 0;
  padding-right: 2.5rem;
}
.aic-bubble {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.6;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  max-width: 85%;
  word-break: break-word;
  text-wrap: pretty;
}
.aic-bubble--akard {
  background: rgba(5, 32, 21, 0.6);
  color: rgba(250, 246, 234, 0.96);
  border: 1px solid rgba(245, 240, 228, 0.1);
}
.aic-bubble--user {
  background: linear-gradient(180deg, #BD9844 0%, #A98429 100%);
  color: #052015;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  border: 1px solid #6F5018;
}
.aic-br { height: 0.7em; }
.aic-bubble--thinking {
  padding: 0.85rem 1rem;
}
.aic-dots {
  display: inline-flex;
  gap: 4px;
}
.aic-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(245, 240, 228, 0.6);
  animation: aic-dot-pulse 1.4s ease-in-out infinite;
}
.aic-dot:nth-child(2) { animation-delay: 0.18s; }
.aic-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes aic-dot-pulse {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.aic-submitted {
  text-align: center;
  padding: 1.4rem;
  margin: 0.4rem 0;
  background: rgba(5, 32, 21, 0.45);
  border: 1px solid rgba(232, 196, 112, 0.32);
  border-radius: 6px;
}
.aic-submitted-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  color: #E8C470;
  margin-bottom: 0.5rem;
}
.aic-submitted-note {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  color: rgba(245, 240, 228, 0.78);
  line-height: 1.6;
}
.aic-error {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(232, 140, 120, 0.95);
  padding: 0.5rem 0.85rem;
  border-left: 2px solid rgba(232, 140, 120, 0.5);
  margin: 0.2rem 0;
}
.aic-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.7rem;
  border-top: 1px solid rgba(245, 240, 228, 0.12);
  background: rgba(3, 22, 14, 0.4);
}
.aic-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: rgba(250, 246, 234, 0.98);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.55;
  padding: 0.5rem 0.6rem;
  max-height: 160px;
  overflow-y: auto;
}
.aic-input::placeholder {
  color: rgba(245, 240, 228, 0.5);
  font-style: italic;
}
.aic-input:focus { outline: none; }
.aic-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, #BD9844 0%, #997520 100%);
  color: #052015;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.aic-send:hover { filter: brightness(1.08); }
.aic-send:active { transform: scale(0.95); }
.aic-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (max-width: 640px) {
  .aic-feed { padding: 0.9rem; max-height: 420px; }
  .aic-bubble { font-size: 0.98rem; }
  .aic-input { font-size: 16px; } /* prevent iOS auto-zoom */
  .aic-header { padding: 0.7rem 1rem; }
  .akard-inquiry-chat { min-height: 320px; }
}

/* ─────────────────────────────────────────────────────────────────────
   RTL OVERRIDES — applied when <html dir="rtl"> (Arabic locale at /ar/).
   Mirrors direction-sensitive properties; CJK locales (Chinese) use a
   separate font-family override embedded in their inline critical CSS.
   ───────────────────────────────────────────────────────────────────── */
[dir="rtl"] .field select {
  /* Chevron flips to the left side; padding-right becomes padding-left */
  background-position: 14px center, 8px center;
  padding-right: 0.95rem;
  padding-left: 1.8rem;
}
[dir="rtl"] .form-actions .btn {
  order: 2;                /* button visually on the right in RTL = "left" in reading order */
}
[dir="rtl"] .form-status {
  order: 1;
  margin-left: 0;
  margin-right: auto;
}
[dir="rtl"] .form-status {
  text-align: right;
}
[dir="rtl"] .check-row {
  flex-direction: row-reverse;
}
[dir="rtl"] .req {
  margin-right: 0.15em;
}
/* Arabic doesn't use Latin letter-spacing the same way — reset where the
   Latin tracking would split connected glyphs awkwardly. Caps/eyebrows
   keep mild tracking. */
[dir="rtl"] .pillar-name,
[dir="rtl"] .level-name,
[dir="rtl"] .factor-name {
  letter-spacing: 0;
}

a { color: inherit; text-decoration: none; transition: opacity 0.25s, color 0.25s; }

/* Subtle parchment grain — a very faint two-spot gradient that warms the
   page without competing with the type. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 18% 18%, rgba(142, 106, 60, 0.06) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 82% 85%, rgba(44, 74, 62, 0.04) 0%, transparent 65%);
}

nav, main, footer { position: relative; z-index: 1; }
main { background: var(--bg); }

/* GLOBAL — international footprint above the footer */
.global {
  border-top: 1px solid var(--rule-soft);
  padding: 5.5rem 0 5rem;
  text-align: center;
}
.global-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.global .section-sub {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.4rem;
}
.global-regions {
  font-family: 'Cormorant SC', serif;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* Global stats grid — three IEA / World Bank figures that anchor
   the case for worldwide reach. Numbers in Cinzel serif (matches
   .trade-number visual language); labels in small caps. */
.global-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: 880px;
  margin: 3rem auto 3.2rem;
  padding: 0 1rem;
}
.global-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.7rem;
}
.global-stat-number {
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--green-deep);
}
.global-stat-label {
  font-family: 'Cormorant SC', serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-wrap: balance;
  max-width: 14ch;
  line-height: 1.45;
}

/* Mobile: stack stats vertically with slight scale reduction */
@media (max-width: 720px) {
  .global-stats {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    margin: 2.4rem auto 2.6rem;
  }
  .global-stat-number {
    font-size: 2.6rem;
  }
}
.global-hq {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-dim);
  margin-top: 0.9rem;
}

/* FOOTER — restored Estable attribution */
footer {
  border-top: 1px solid var(--rule-gold);
  padding: 1.1rem 0;
  background: var(--bg);          /* matches .global (Operating Worldwide) — seamless transition */
  color: var(--ink);
}
.footer-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-brand {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.98rem;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-dim);
  letter-spacing: -0.005em;
}
.footer-meta {
  font-family: 'Cormorant SC', serif;
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.footer-link {
  text-decoration: none;
  transition: color 0.25s;
  cursor: pointer;
}
.footer-link:hover {
  color: var(--gold-deep);
  opacity: 1;
}

/* NAV */
nav {
  position: sticky;
  top: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--rule-gold);
  z-index: 50;
  padding: 1.25rem 0;
}
.nav-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav-mark {
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav-mark:hover { color: var(--gold-deep); opacity: 1; }
.nav-status {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.86rem;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}

/* LANGUAGE SWITCHER — top right of nav. Cormorant SC small caps, the
   same typographic register as section-eyebrow and footer-meta. EN
   active = full ink; ES = faded; both fade to gold on hover. */
.nav-lang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Cormorant SC', serif;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.nav-lang-opt {
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.2s;
  padding: 0.2rem 0.1rem;
}
.nav-lang-opt.active {
  color: var(--ink);
}
.nav-lang-opt:hover,
.nav-lang-opt:focus-visible {
  color: var(--gold-deep);
  opacity: 1;
}
.nav-lang-sep {
  color: var(--ink-faint);
  user-select: none;
}

/* SECTIONS — every section centers content to a single max-width. */
.hero-inner,
.mandate-inner,
.levels-inner,
.factors-inner,
.cta-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 2.5rem;
  text-align: center;
}

/* HERO */
.hero { padding: 6.5rem 0 5rem; }
.hero-eyebrow {
  font-family: 'Cormorant SC', serif;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--gold-deep);
  letter-spacing: 0.36em;
  margin-bottom: 2.4rem;
}
.hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 auto 1.8rem;
  max-width: 820px;
}
.hero-lede {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.15rem, 1.5vw, 1.32rem);
  font-weight: 400;
  color: var(--ink-dim);
  line-height: 1.85; /* Graceful pass: 1.65 → 1.85 for breathing room */
  max-width: 680px;
  margin: 0 auto 0.8rem;
}

/* GRACEFUL PASS: italic emphasis on the brand phrase within the
   hero title.  Cormorant italic gives "New Venture Mechanics" a
   Roman-inscription cadence that lifts the whole line. */
.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}

/* GRACEFUL + FUTURE-FOCUSED: aspirational sub-tagline beneath the
   lede.  Smaller than the lede, italic Cormorant, set in gold-deep
   to echo the eyebrow above.  Reads as a forward-pointing closer:
   "Engineered for what comes next." */
.hero-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  font-weight: 400;
  color: var(--gold-deep);
  line-height: 1.6;
  letter-spacing: 0.02em;
  margin: 1.4rem auto 0;
  max-width: 540px;
  opacity: 0.88;
}

/* FUTURE-FOCUSED SCROLL REVEAL: each major section (below the hero)
   fades up 28px as it enters the viewport.  IntersectionObserver
   in the inline script toggles .is-visible when ≥5% of the section
   crosses the viewport edge.  700ms ease-out — restrained, not
   showy.  Modern reading-app cadence, signals motion as content
   unfolds.  Body fade-in already handles the hero on first paint. */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* PILLAR STAGGER: when .mandate scroll-reveals into view, its three
   pillars (Compute / Progress / Unified) cascade in one after the
   other.  120ms stagger between each.  Subtle but unmistakable
   sense of build-order. */
.mandate.scroll-reveal .pillar {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mandate.scroll-reveal.is-visible .pillar {
  opacity: 1;
  transform: translateY(0);
}
.mandate.scroll-reveal.is-visible .pillar:nth-child(1) { transition-delay: 200ms; }
.mandate.scroll-reveal.is-visible .pillar:nth-child(2) { transition-delay: 320ms; }
.mandate.scroll-reveal.is-visible .pillar:nth-child(3) { transition-delay: 440ms; }

/* LEVELS STAGGER: same treatment for the agent hierarchy
   (Operating Associate / Asset Manager / Analyst). */
.levels.scroll-reveal .level {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.levels.scroll-reveal.is-visible .level {
  opacity: 1;
  transform: translateY(0);
}
.levels.scroll-reveal.is-visible .level:nth-child(1) { transition-delay: 200ms; }
.levels.scroll-reveal.is-visible .level:nth-child(2) { transition-delay: 320ms; }
.levels.scroll-reveal.is-visible .level:nth-child(3) { transition-delay: 440ms; }

/* FACTORS STAGGER: Land / Labor / Capital / Entrepreneurship. */
.factors.scroll-reveal .factor {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.factors.scroll-reveal.is-visible .factor {
  opacity: 1;
  transform: translateY(0);
}
.factors.scroll-reveal.is-visible .factor:nth-child(1) { transition-delay: 180ms; }
.factors.scroll-reveal.is-visible .factor:nth-child(2) { transition-delay: 280ms; }
.factors.scroll-reveal.is-visible .factor:nth-child(3) { transition-delay: 380ms; }
.factors.scroll-reveal.is-visible .factor:nth-child(4) { transition-delay: 480ms; }

/* GLOBAL STATS STAGGER: 4B / 700M / 2.3B count in one after another. */
.global.scroll-reveal .global-stat {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.global.scroll-reveal.is-visible .global-stat {
  opacity: 1;
  transform: translateY(0);
}
.global.scroll-reveal.is-visible .global-stat:nth-child(1) { transition-delay: 200ms; }
.global.scroll-reveal.is-visible .global-stat:nth-child(2) { transition-delay: 320ms; }
.global.scroll-reveal.is-visible .global-stat:nth-child(3) { transition-delay: 440ms; }

/* HONOR REDUCED MOTION: skip all scroll reveals; everything visible
   immediately.  No transitions, no transforms. */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal .pillar,
  .scroll-reveal .level,
  .scroll-reveal .factor,
  .scroll-reveal .global-stat {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* GRACEFUL PASS: hairline gold rules between major sections.
   A thin 80px-wide centered rule with a subtle gradient fade
   marks each section transition without shouting.  This is what
   private banks and HBR use to pace long-form layouts.  Apply
   via a wrapper class so it can sit naturally between sections. */
.section-rule {
  display: block;
  width: 80px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--rule-gold) 25%,
    var(--rule-gold) 75%,
    transparent 100%
  );
  opacity: 0.7;
}

/* SHARED SECTION HEADERS */
.section-eyebrow {
  font-family: 'Cormorant SC', serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  color: var(--gold-deep);
  text-transform: uppercase;
  margin-bottom: 1.3rem;
}
.section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 auto 1.6rem;
  max-width: 760px;
}
.section-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  font-weight: 400;
  color: var(--ink-dim);
  line-height: 1.65;
  max-width: 660px;
  margin: 0 auto 2rem;
}

/* THE FOUR FACTORS — definitive horizontal-row list. Name column is
   wide enough for "Entrepreneurship" so nothing overlaps. */
.factors {
  padding: 5.5rem 0 5rem;
  border-top: 1px solid var(--rule-gold);
  background: var(--bg-deep);  /* matches .trade — same deeper-parchment band */
}
.factor-list {
  display: flex;
  flex-direction: column;
  margin: 2.5rem auto 0;
  border-top: 1px solid var(--rule-gold);
  border-bottom: 1px solid var(--rule-gold);
  max-width: 920px;
  text-align: left;
}
.factor {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  padding: 2.1rem 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.factor:last-child { border-bottom: none; }
.factor-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.4rem, 2.1vw, 1.75rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
  color: var(--green-deep);
  line-height: 1.2;
  margin: 0;
}
.factor-desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  font-weight: 400;
  font-style: italic;
  color: var(--ink-dim);
  line-height: 1.65;
  margin: 0;
}

/* THE HIERARCHY — multi-level agent model: director, manager, operator.
   Reuses the .factor row pattern for visual consistency. */
.levels {
  padding: 5.5rem 0 5rem;
  border-top: 1px solid var(--rule-gold);
}
.levels .section-sub {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
/* Data Governance footnote — small institutional treatment for the
   privacy statement below section-sub. Thin gold rule above sets it
   apart visually without breaking the section's design language. */
.section-privacy {
  max-width: 64ch;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(190, 154, 72, 0.25);
  text-align: center;
}
.privacy-eyebrow {
  display: block;
  font-family: 'Cormorant SC', serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: var(--gold-deep);
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}
.privacy-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: rgba(50, 40, 22, 0.72);
  margin: 0;
}
.level-list {
  display: flex;
  flex-direction: column;
  margin: 2.5rem auto 0;
  border-top: 1px solid var(--rule-gold);
  border-bottom: 1px solid var(--rule-gold);
  max-width: 920px;
  text-align: left;
}
.level {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 3rem;
  padding: 2.1rem 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.level:last-child { border-bottom: none; }
.level-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.4rem, 2.1vw, 1.75rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
  color: var(--green-deep);
  line-height: 1.2;
  margin: 0;
}
.level-desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  font-weight: 400;
  font-style: italic;
  color: var(--ink-dim);
  line-height: 1.65;
  margin: 0;
}

/* THE TRADE — monumental stat block. Macro framing for the size of
   the white-collar knowledge-work opportunity. */
.trade {
  padding: 5.5rem 0 5rem;
  border-top: 1px solid var(--rule-gold);
  background: var(--bg-deep);
  text-align: center;
}
.trade-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.trade-number {
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(4rem, 9vw, 6.5rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--green-deep);
  margin: 1.4rem auto 0.6rem;
}
.trade-tag {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
  max-width: 620px;
  margin: 0 auto 1.6rem;
  text-wrap: balance;
}
.trade-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 400;
  color: var(--ink-dim);
  line-height: 1.9; /* Graceful pass: 1.75 → 1.9 for prose breathing */
  max-width: 620px;
  margin: 0 auto;
  /* Even line distribution: forces "two-thirds" + "is white-collar
     knowledge work" to balance across lines instead of one orphan
     short tail line. */
  text-wrap: balance;
}
.trade-question {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-deep);
  line-height: 1.45;
  max-width: 620px;
  margin: 1.8rem auto 0;
  text-wrap: balance;
}
/* Declarative closer for the Trade section. Upright (no italic),
   slightly larger than body, ink color — speaks as the section's
   resolution. */
.trade-call {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  max-width: 620px;
  margin: 1.8rem auto 0;
  text-wrap: balance;
  letter-spacing: -0.005em;
}

/* THE MANDATE — three-pillar grid, centered. Green marble register
   matching the inquiry section. No vertical dividers between pillars
   (the marble carries the structure visually); no horizontal hairlines
   above or below the grid (would compete with the marble's own veining). */
.mandate {
  /* Pieter Bruegel the Elder — "The Tower of Babel" (1563, Kunsthistorisches
     Museum Vienna; public domain via Wikimedia Commons). Renaissance oil
     depicting the Babylonian tower, used as the atmospheric backdrop for
     the operations layer. Strong dark overlay on ::after preserves text
     legibility while the painting reads as architectural ambition behind
     the operations claim. */
  padding: 5.5rem 0 5rem;
  position: relative;
  overflow: hidden;
  background: rgba(8, 22, 12, 0.92);  /* Fallback under pseudo-element */
}
.mandate::before {
  content: '';
  position: absolute;
  /* Modest negative inset to compensate for the 1.08× zoom. */
  inset: -8%;
  /* Tower of Babel anchored to the top of the section — the image shifts
     down inside the container so only the top of the painting (sky and
     upper tower) fills the visible area; the foreground crops below. */
  background: url('brand/babel-bruegel.jpg') center top / cover no-repeat;
  /* Light treatment: preserve the painting's natural Renaissance palette
     (warm earthtones, cream sky, period architecture). No hue-rotate
     toward green, no heavy sepia — let the Renaissance character read. */
  transform: scale(1.08);
  filter: brightness(0.85) contrast(1.02) saturate(0.95);
  z-index: 0;
  pointer-events: none;
}
.mandate::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Warm sepia-tinged dark overlay enhances the Renaissance period
     feeling rather than fighting it with green. Strengthened from
     prior values now that the visible crop is the bright cream sky
     of the painting — text contrast (especially gold eyebrow) needs
     more separation against the high-luminance backdrop. */
  background: linear-gradient(135deg, rgba(18, 12, 4, 0.64) 0%, rgba(26, 18, 8, 0.54) 50%, rgba(14, 10, 3, 0.7) 100%);
  z-index: 1;
  pointer-events: none;
}
.mandate-inner {
  position: relative;
  z-index: 2;
}
/* Gold against the cream sky + tan tower stone of the Bruegel painting
   needs stronger contrast — both background regions are warm-toned and
   similar in luminance to the original gold. Brighter gold + triple-
   layered black halo guarantees the eyebrow reads at any viewport. */
.mandate .section-eyebrow {
  color: #F0CE7A;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.95),
    0 2px 8px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(0, 0, 0, 0.55);
}
.mandate .section-title { color: #FBF6E8; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.92), 0 1px 4px rgba(0, 0, 0, 0.75); }
.mandate .section-sub { color: rgba(248, 244, 232, 0.98); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.88), 0 1px 4px rgba(0, 0, 0, 0.7); }
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 2.5rem;
}
.pillar {
  padding: 2.6rem 2rem;
  text-align: center;
}
.pillar-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  /* Natural-gold gradient text — compressed contrast, warmer amber stops.
     Reads as gilt manuscript / aged foil instead of polished metal. */
  background: linear-gradient(180deg, #D2B068 0%, #BE9A48 40%, #A88528 75%, #7E601A 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);         /* halo still renders behind the transparent glyphs */
  margin-bottom: 0.85rem;
  letter-spacing: -0.005em;
}
.pillar-desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(250, 246, 234, 1);                      /* pure cream, full opacity */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);         /* subtle halo */
  line-height: 1.6;
}


/* CTA */
.cta-section {
  padding: 6rem 0 7rem;
  border-top: 1px solid var(--rule-gold);
}
.cta-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.5rem;
}

/* INQUIRY FORM — "Get an offer for automation work" — letterhead-style
   intake. Cream surface, gold hairline rules between sections, ink
   text, hunter-green submit. Generous whitespace, classical register. */
.inquiry {
  padding: 6rem 0 7rem;
}
.inquiry-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 2.5rem;
  text-align: center;
}
.inquiry-form {
  margin-top: 3rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.form-section {
  border: none;
  padding: 0;
  margin: 0;
  padding-top: 1.8rem;
}
.form-section:first-of-type { padding-top: 0; }
.form-legend {
  font-family: 'Cormorant SC', serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  color: var(--gold-deep);
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  padding: 0;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem 1.6rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.field--wide { grid-column: 1 / -1; }
.field label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.92rem;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-dim);
  letter-spacing: 0;
}
.field .req {
  color: var(--gold-deep);
  font-style: normal;
  margin-left: 0.15em;
}
.field input,
.field select,
.field textarea {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-soft);
  border-radius: 0;
  padding: 0.5rem 0;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: light;
}
.field textarea {
  border: 1px solid var(--ink-soft);
  padding: 0.7rem 0.85rem;
  line-height: 1.55;
  resize: vertical;
  min-height: 110px;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-deep) 50%),
                    linear-gradient(135deg, var(--gold-deep) 50%, transparent 50%);
  background-position: calc(100% - 14px) 14px, calc(100% - 8px) 14px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 1.8rem;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold-deep);
}
.field--check .check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.98rem;
  font-style: italic;
  color: var(--ink-dim);
  line-height: 1.55;
  padding: 0.6rem 0;
}
.field--check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--ink-soft);
  background: transparent;
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
  margin-top: 0.2rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.field--check input[type="checkbox"]:checked {
  background: var(--green-deep);
  border-color: var(--green-deep);
}
.field--check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.5px;
  width: 5px;
  height: 9px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.field--check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.2rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
/* HTML order is <span.form-status> then <button>, but we want the
   button visually first (left). Flex order: button=1, status=2.
   margin-left: auto on the status pushes it to the far right. */
.form-actions .btn {
  flex: 0 0 auto;
  order: 1;
}
.form-status {
  order: 2;
  margin-left: auto;
}
.form-status:not(:empty) {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.98rem;
  font-style: italic;
  color: var(--ink-dim);
}
.form-status--ok    { color: var(--green-deep); }
.form-status--error { color: #8C2A1F; }
.form-fineprint {
  font-family: 'Cormorant SC', serif;
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-top: 1.2rem;
}

/* INQUIRY — Deep green marble register (Babylon-cover inspired —
   the alternate green edition of the same cover). Layered radial-
   gradients build the large marble swirls; two inline SVG noise
   overlays (large-scale fractalNoise for milky veining + fine for
   stone grain) finish the texture. Form retains cream text + gold
   accents — gold-on-emerald reads as classical (mirrors the cover's
   gilt-on-green title). All inline, no extra network requests. */
.inquiry {
  /* Same real-marble image as .mandate. Same darker overlay so the form
     fields read cleanly against the texture. Different position so the
     two sections show different marble regions. */
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(3, 22, 14, 0.88) 0%, rgba(8, 38, 26, 0.8) 50%, rgba(3, 22, 14, 0.92) 100%),
    url('brand/marble-green.webp') center bottom / cover no-repeat;
}
.inquiry-inner {
  position: relative;
  z-index: 1;
}
.inquiry .section-eyebrow,
.inquiry .form-legend {
  color: #BE9A48;                                                                  /* brightest gold */
}
.inquiry .section-title {
  color: #FBF6E8;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);                                      /* halo */
}
.inquiry .section-sub {
  color: rgba(248, 244, 232, 0.98);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);                                       /* halo */
}
.inquiry .form-section {
  border-top-color: rgba(201, 163, 110, 0.32);
}
.inquiry .field label {
  color: rgba(250, 246, 234, 1);                                                   /* full opacity cream */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);                                       /* subtle halo */
}
.inquiry .field .req {
  color: #BE9A48;                                                                  /* brightest gold */
}
.inquiry .field input,
.inquiry .field select,
.inquiry .field textarea {
  color: var(--bg);
  border-color: rgba(242, 235, 220, 0.62);                                         /* was 0.42 */
  background-color: rgba(3, 22, 14, 0.32);                                         /* longhand so .field select chevron position/size survives */
}
.inquiry .field textarea {
  border: 1px solid rgba(242, 235, 220, 0.62);                                     /* was 0.42 */
  background-color: rgba(3, 22, 14, 0.32);
}
.inquiry .field input::placeholder,
.inquiry .field textarea::placeholder {
  color: rgba(242, 235, 220, 0.72);                                                /* was 0.6 */
}
.inquiry .field input:focus,
.inquiry .field select:focus,
.inquiry .field textarea:focus {
  border-color: #BE9A48;                          /* brighter focus ring */
}
.inquiry .field select {
  background-image: linear-gradient(45deg, transparent 50%, #BE9A48 50%),
                    linear-gradient(135deg, #BE9A48 50%, transparent 50%);
}
.inquiry .field--check .check-row {
  color: rgba(245, 240, 228, 0.92);               /* was 0.78 */
}
.inquiry .field--check input[type="checkbox"] {
  border-color: rgba(242, 235, 220, 0.52);        /* was 0.32 */
}
.inquiry .field--check input[type="checkbox"]:checked {
  background: #BE9A48;                            /* brighter gold check */
  border-color: #BE9A48;
}
.inquiry .field--check input[type="checkbox"]:checked::after {
  border-color: var(--green-deep);
}
.inquiry .form-status {
  color: rgba(242, 235, 220, 0.88);               /* was 0.72 */
}
.inquiry .form-status:not(:empty) {
  color: rgba(242, 235, 220, 0.95);               /* was 0.85 */
}
.inquiry .form-fineprint {
  color: rgba(242, 235, 220, 0.78);                                                /* was 0.62 */
}
.inquiry .btn-primary {
  /* OLD MONEY GOLD — aged brass / satin finish. Low-contrast gradient
     across warm muted brass tones (no bright #F4D976 highlight, no
     glossy 3D effect). Reads as a stamped foil signet or a Patek
     dial chapter ring — not a video-game item drop. */
  background: linear-gradient(180deg, #BD9844 0%, #A98429 45%, #997520 100%);
  color: var(--green-deep);
  border: 1px solid #6F5018;                               /* darker rim grounds it */
  box-shadow:
    inset 0 1px 0 rgba(220, 195, 140, 0.18),               /* faint satin sheen, not glossy strip */
    inset 0 -1px 0 rgba(40, 25, 5, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.2);                          /* small contact shadow, not floaty */
  /* No text-shadow — was reading as 3D engraved letterpress (tacky) */
}
.inquiry .btn-primary:hover {
  /* Slight brass-lift on hover — gradient brightens by ~8%, shadow
     deepens marginally. Restrained, not theatrical. */
  background: linear-gradient(180deg, #C8A24C 0%, #B48E32 45%, #A47E28 100%);
  color: var(--green-deep);
  border-color: #7A581C;
  box-shadow:
    inset 0 1px 0 rgba(230, 205, 150, 0.22),
    inset 0 -1px 0 rgba(40, 25, 5, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.25);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.8rem;
  font-family: 'Cormorant SC', serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  transition: all 0.3s;
}
.btn-primary {
  background: var(--green-deep);
  color: var(--bg);
  border: 1px solid var(--green-deep);
}
.btn-primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  opacity: 1;
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.btn-ghost:hover {
  border-color: var(--gold-deep);
  color: var(--gold-deep);
  opacity: 1;
}
.btn-arrow {
  font-style: normal;
  font-family: -apple-system, sans-serif;
  font-size: 0.85em;
  letter-spacing: 0;
  transition: transform 0.25s;
}
.btn:hover .btn-arrow { transform: translateX(3px); }

/* TM mark */
.tm {
  font-size: 0.42em;
  font-weight: 400;
  font-style: normal;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 0.05em;
  color: var(--ink-faint);
}

/* SKIP-TO-MAIN — visually-hidden (clip) pattern. Clipped to zero size when
   not focused, so it can never peek above the fold or flash on load, and
   revealed in place ONLY on genuine keyboard focus (:focus-visible) — never
   for touch/programmatic focus, and with no slide transition that could
   read as a stray black box "dropping down." Still fully present for
   keyboard and screen-reader users. */
.skip-to-main {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1001;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--ink);
  color: var(--bg);
  font-family: 'Cormorant SC', serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
}
.skip-to-main:focus-visible {
  width: auto;
  height: auto;
  padding: 0.6rem 1rem;
  clip: auto;
  clip-path: none;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* FOCUS */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn:focus-visible { outline-offset: 3px; }
.btn-primary:focus-visible { outline-color: var(--ink); }

/* RESPONSIVE — five-tier responsive scale.
   Defensive: no element exceeds 100% width; every inner shrinks via
   padding rather than fixed widths so the page never horizontal-scrolls. */

/* Safety net — anything inside main shouldn't overflow the viewport */
img, svg, video { max-width: 100%; height: auto; }

/* Wide screens (default max-widths handle this; nothing to do) */

/* Laptop / small desktop — 1100px and below: nudge in margins so
   centered blocks don't kiss the edges on common 13" displays. */
@media (max-width: 1100px) {
  .nav-inner { padding-left: 2rem; padding-right: 2rem; }
}

/* Tablet — 900px and below */
@media (max-width: 900px) {
  .nav-inner, .hero-inner, .trade-inner, .mandate-inner, .levels-inner, .factors-inner, .cta-inner, .inquiry-inner, .global-inner, .footer-inner {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
  .hero { padding: 4.5rem 0 3.5rem; }
  .trade { padding: 4.5rem 0 4rem; }
  .mandate { padding: 4.5rem 0 4rem; }
  .levels { padding: 4.5rem 0 4rem; }
  .factors { padding: 4.5rem 0 4rem; }
  .cta-section { padding: 4.5rem 0 5.5rem; }
  .inquiry { padding: 4.5rem 0 5.5rem; }
  .global { padding: 4.5rem 0 4rem; }
  .factor, .level { grid-template-columns: 220px 1fr; gap: 2rem; padding: 1.8rem 0; }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar { padding: 2rem 0; }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Large phone — 640px and below */
@media (max-width: 640px) {
  .nav-inner, .hero-inner, .trade-inner, .mandate-inner, .levels-inner, .factors-inner, .cta-inner, .inquiry-inner, .global-inner, .footer-inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .trade { padding: 3.5rem 0 3rem; }
  .trade-tag { font-size: 1.1rem; }
  .trade-body { font-size: 1rem; }
  .inquiry { padding: 3.5rem 0 4.5rem; }
  .global { padding: 3.5rem 0 3rem; }
  .global-regions { font-size: 0.72rem; letter-spacing: 0.26em; }
  .levels { padding: 3.5rem 0 3rem; }
  .level { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.6rem 0; }
  .level-name { font-size: 1.3rem; }
  .level-desc { font-size: 1rem; }
  /* Privacy footnote — tighter on mobile. */
  .section-privacy { margin: 1.5rem auto 0; padding-top: 1.2rem; max-width: 92%; }
  .privacy-eyebrow { font-size: 0.58rem; letter-spacing: 0.26em; margin-bottom: 0.55rem; }
  .privacy-body { font-size: 0.86rem; line-height: 1.5; }
  .inquiry-form { gap: 2rem; margin-top: 2.2rem; }
  .form-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .form-actions { flex-direction: column; align-items: stretch; gap: 0.8rem; }
  .form-actions .btn { width: 100%; }
  .form-status { text-align: center; margin-right: 0; }
  /* MOBILE FOOTER — improved presentation per founder direction.
     Center-aligned with a hairline gold ornament above the brand
     line (echoes the .section-rule treatment between sections).
     Generous vertical padding, refined typography sizes.
     Reads as a member-only club's signoff, not a left-corner footer. */
  footer { padding: 1.8rem 0 1.6rem; }
  .footer-inner {
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 0 1.5rem;
    text-align: center;
  }
  /* Gold hairline ornament above the brand line */
  .footer-inner::before {
    content: '';
    display: block;
    width: 56px;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, var(--rule-gold) 25%, var(--rule-gold) 75%, transparent 100%);
    opacity: 0.7;
    margin-bottom: 0.3rem;
  }
  .footer-brand {
    font-size: 0.95rem;
    line-height: 1.4;
  }
  .footer-meta {
    font-size: 0.54rem;
    letter-spacing: 0.3em;
  }
  .hero { padding: 3.5rem 0 3rem; }
  .hero-eyebrow { font-size: 0.62rem; letter-spacing: 0.28em; margin-bottom: 1.5rem; }
  .hero-title { font-size: clamp(2.2rem, 10vw, 3.2rem); margin-bottom: 1.4rem; }
  .hero-lede { font-size: 1.05rem; }
  .section-eyebrow { font-size: 0.62rem; letter-spacing: 0.28em; margin-bottom: 1.1rem; }
  .section-title { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  .section-sub { font-size: 1.02rem; margin-bottom: 1.8rem; }
  .mandate { padding: 3.5rem 0 3rem; }
  .pillar { padding: 1.6rem 0; }
  .pillar-name { font-size: 1.35rem; }
  .pillar-desc { font-size: 1rem; }
  /* BABEL PAINTING MOBILE FIX. On mobile, anchor the painting to the
     top of the section so only the top of the painting (sky, tower
     peak) fills the visible crop. Painting has its own composition,
     so no horizontal mirror — let the tower sit in its native
     orientation. */
  .mandate::before {
    transform: none;
    inset: 0;
    background-size: cover;
    background-position: center top;
  }
  /* Inquiry: shift the cover anchor slightly upward and let the
     gradient overlay continue to grade the marble.  background-size
     left as cover — without the mandate's compounded scale the
     standard cover crop on a 375px viewport reads as a proper marble
     close-up, not a smear. */
  .inquiry {
    background-size: cover, cover;
    background-position: center center, center 30%;
  }
  .factors { padding: 3.5rem 0 3rem; }
  .factor { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.6rem 0; }
  .factor-name { font-size: 1.3rem; }
  .factor-desc { font-size: 1rem; }
  .nav-status { font-size: 0.78rem; }
  .nav-mark { font-size: 0.95rem; letter-spacing: 0.2em; }
  .cta-section { padding: 3.5rem 0 4.5rem; }
  .cta-row { width: 100%; gap: 0.6rem; flex-direction: column; align-items: stretch; }
  .btn { padding: 0.95rem 1.4rem; font-size: 0.68rem; letter-spacing: 0.22em; width: 100%; justify-content: center; }
}

/* Small phone — 400px and below: final tightening */
@media (max-width: 400px) {
  .hero-title { font-size: clamp(2rem, 11vw, 2.8rem); }
  .section-title { font-size: clamp(1.55rem, 8vw, 2rem); }
  .factor-name { font-size: 1.2rem; }
  .level-name { font-size: 1.2rem; }
  .pillar-name { font-size: 1.25rem; }
  .nav-status { font-size: 0.7rem; }
}


/* PRINT */
@media print {
  html, body { background: #fff; color: #000; }
  .skip-to-main, .nav-status { display: none !important; }
  nav, footer { background: #fff; color: #000; border-color: #999; }
  .hero-title, .section-title, .factor-name, .nav-mark, .trade-number, .trade-tag, .footer-brand { color: #000; }
  .hero-lede, .section-sub, .factor-desc, .trade-body, .footer-meta { color: #333; }
  .btn-primary { background: #000; color: #fff; border-color: #000; }
  .btn-ghost { background: none; color: #000; border-color: #999; }
  a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}