/* ==========================================================================
   GHARAY VENTURES — Design Language v2 "Karakoram"
   Resilience · Together · Harmony · Sustainable Growth · Exploration
   ========================================================================== */

/* Everything below is wrapped in Tailwind's own `components` layer so that
   Tailwind utility classes (e.g. `hidden`, `sm:inline-flex`) — which live in
   the higher-priority `utilities` layer — can correctly override plain
   classes here (e.g. `.btn { display: inline-flex }`) at equal specificity.
   Unlayered CSS always beats layered CSS per the Cascade Layers spec, so
   without this wrapper, main.css would always win regardless of source
   order, breaking responsive utility overrides like the mobile nav toggle.

   This file loads before the Tailwind CDN script, so it is parsed first —
   without declaring the full layer order up front, `@layer components {}`
   below would register "components" as the FIRST (lowest-priority) layer,
   landing it even below Tailwind's own `base` (Preflight) layer and letting
   Preflight's `* { padding: 0 }` reset beat this file's component styles.
   Declaring the exact order Tailwind itself uses, before that happens,
   pins "components" correctly between "base" and "utilities". */
@layer theme, base, components, utilities;

@layer components {

:root {
  /* ---------- Color: Karakoram Palette ---------- */
  --bg-primary: #08131F;        /* Midnight Rock */
  --bg-surface: #0E1B29;
  --bg-surface-raised: #13202F;
  --text-primary: #F8FAF9;      /* Glacier White */
  --text-secondary: #96A0AA;    /* derived from Slate, AA-safe at body size */
  --text-tertiary: #788592;     /* derived from Slate, AA-safe at small size */
  --slate-raw: #627180;         /* Slate — decorative / large text / borders only */
  --accent: #46C8D8;            /* River Cyan */
  --accent-dim: rgba(70, 200, 216, 0.14);
  --moss: #3F7564;              /* Alpine Moss — large text & icons only */
  --copper: #B97A45;            /* Copper Earth — premium accent, AA-safe */
  --mist: #E6EDF2;              /* Mist — light surfaces, used sparingly */
  --border: rgba(230, 237, 242, 0.08);
  --border-strong: rgba(230, 237, 242, 0.16);

  /* ---------- Type ---------- */
  --font-display: 'Space Grotesk', 'Neue Montreal', 'Geist', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-editorial: 'Fraunces', serif; /* Canela substitute — manifestos, quotes only */

  /* ---------- Motion (nature, not software) ---------- */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.5s;
  --dur-med: 1s;
  --dur-slow: 1.8s;

  /* ---------- 8pt Spacing Scale ---------- */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px;
  --sp-9: 160px; --sp-10: 192px;

  /* ---------- Shape: Summit Geometry ---------- */
  --radius-sm: 12px;
  --radius-lg: 24px;
  --summit-cut: 22px; /* master angle clip, derived from the logo's peak */

  --container-max: 1440px;
  --gutter: clamp(1.5rem, 5vw, 6rem);
}

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

html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
  overscroll-behavior: none;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--bg-primary); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ---------- Typography ---------- */
.font-display { font-family: var(--font-display); letter-spacing: -0.02em; font-weight: 500; }
.font-editorial { font-family: var(--font-editorial); font-weight: 400; font-style: italic; letter-spacing: -0.01em; }

h1, h2, h3, .h-display {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-weight: 500;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 500;
}
.eyebrow-cyan { color: var(--accent); }
.eyebrow-dim {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
}

.body-lg {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.6;
  color: var(--text-secondary);
  font-weight: 400;
}

.text-gradient {
  background: linear-gradient(120deg, var(--text-primary) 30%, var(--accent) 70%, var(--text-primary) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.quote-editorial {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--mist);
}

.split-line { overflow: hidden; display: block; }
.split-word { display: inline-block; will-change: transform; }
.split-char { display: inline-block; will-change: transform; }

/* ---------- Layout ---------- */
.container-ed {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  position: relative;
  padding-top: clamp(var(--sp-7), 12vw, var(--sp-8));
  padding-bottom: clamp(var(--sp-7), 12vw, var(--sp-8));
}

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

/* ---------- Texture: stone / paper grain ---------- */
.noise {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Geological-layer texture — horizontal strata, subtle */
.strata {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(230,237,242,0.015) 0px,
    rgba(230,237,242,0.015) 1px,
    transparent 1px,
    transparent 48px
  );
  opacity: 0.6;
}

/* ---------- Glass (used only where appropriate) ---------- */
.glass-panel {
  background: linear-gradient(180deg, rgba(230,237,242,0.04), rgba(230,237,242,0.01));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
}

/* ---------- Coordinate marks (Signature Motif 5) ---------- */
.coord-mark {
  position: absolute;
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.coord-mark::before {
  content: '';
  width: 5px; height: 5px;
  border: 1px solid var(--copper);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.coord-tl { top: var(--sp-3); left: var(--gutter); }
.coord-tr { top: var(--sp-3); right: var(--gutter); }
.coord-br { bottom: var(--sp-3); right: var(--gutter); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: var(--sp-3) var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8, 19, 31, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding-top: var(--sp-2); padding-bottom: var(--sp-2);
}

.nav-link {
  position: relative;
  font-size: 0.875rem;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  width: 0%; height: 1px; background: var(--accent);
  transition: width var(--dur-fast) var(--ease-out);
}
.nav-link:hover { color: var(--text-primary); }
.nav-link:hover::after { width: 100%; }

.menu-line {
  transition: transform var(--dur-fast) var(--ease-out);
  transform-origin: center;
}
#menu-toggle.open .menu-line-1 { transform: translateY(3px) rotate(45deg); }
#menu-toggle.open .menu-line-2 { transform: translateY(-3px) rotate(-45deg); }

/* ---------- Buttons — clean architectural rectangle, 12px max radius ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 1rem 1.85rem;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn-primary { background: var(--text-primary); color: var(--bg-primary); }
.btn-primary:hover {
  box-shadow: 0 0 0 1px var(--accent), 0 10px 34px -8px rgba(70, 200, 216, 0.4);
  transform: translateY(-2px);
}
.btn-ghost { border: 1px solid var(--border-strong); color: var(--text-primary); }
.btn-ghost:hover { border-color: var(--accent); background: var(--accent-dim); transform: translateY(-2px); }
.btn-arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero {
  position: relative; height: 100svh; min-height: 640px; width: 100%;
  overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
}
/* Mountain silhouette layers — the primary "mountain spirit" read.
   The Three.js wireframe sits above these as a fine elevation-line detail. */
.hero-mountains { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.hero-mountains .peak-far { fill: #0C1A28; }
.hero-mountains .peak-mid { fill: #0A1622; }
.hero-mountains .peak-near { fill: var(--bg-primary); }
.hero-mountains .rim-light { fill: none; stroke: var(--copper); stroke-width: 1.5; opacity: 0.55; }

#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero-vignette {
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(8,19,31,0.92) 10%, rgba(8,19,31,0) 60%),
    linear-gradient(180deg, rgba(8,19,31,0.5) 0%, rgba(8,19,31,0.08) 30%, rgba(8,19,31,0.8) 100%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 3; padding: 0 var(--gutter) clamp(var(--sp-5), 7vw, var(--sp-6)); }

/* Mist drift particles */
#mist-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.mist-particle {
  position: absolute;
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; /* organic, non-circular blob */
  background: radial-gradient(circle, rgba(230,237,242,0.05), transparent 70%);
  filter: blur(6px);
}

.scroll-indicator {
  position: absolute; bottom: var(--sp-4); left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem; color: var(--text-tertiary);
}
.scroll-indicator .line {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: scrollpulse 2.6s var(--ease-in-out) infinite;
}
@keyframes scrollpulse {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0.3; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0.3; }
}

/* ---------- Cards — angled summit corner, never pure rounded rect ---------- */
.card {
  position: relative;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 2px;
  clip-path: polygon(0 0, calc(100% - var(--summit-cut)) 0, 100% var(--summit-cut), 100% 100%, 0 100%);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.card:hover { border-color: var(--border-strong); background: var(--bg-surface-raised); transform: translateY(-4px); }

.category-card {
  padding: clamp(var(--sp-3), 2.5vw, var(--sp-4));
  min-height: 220px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.category-card .cat-icon { transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.category-card:hover .cat-icon { transform: translateY(-2px); color: var(--accent); }

/* ---------- Five Principles ---------- */
.principle-card {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-4);
}
.principle-num {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--copper);
  letter-spacing: 0.1em;
}
.principle-shape {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}

/* ---------- Timeline (Studio Model) ---------- */
.timeline-stage { border-top: 1px solid var(--border); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.timeline-stage:last-child { border-bottom: 1px solid var(--border); }
.timeline-stage:hover { background: rgba(230,237,242,0.015); }
.timeline-stage .stage-num { font-family: var(--font-display); color: var(--text-tertiary); transition: color var(--dur-fast) var(--ease-out); }
.timeline-stage.active .stage-num, .timeline-stage:hover .stage-num { color: var(--accent); }
.timeline-stage .stage-body { max-height: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease-in-out), opacity var(--dur-med) var(--ease-out); opacity: 0; }
.timeline-stage.active .stage-body { max-height: 260px; opacity: 1; }
.timeline-stage .stage-plus { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.timeline-stage .stage-plus::before, .timeline-stage .stage-plus::after {
  content: ''; position: absolute; background: var(--text-secondary);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.timeline-stage .stage-plus::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.timeline-stage .stage-plus::after { left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%); }
.timeline-stage.active .stage-plus::after { transform: translateX(-50%) rotate(90deg) scale(0); }
.timeline-stage.active .stage-plus::before, .timeline-stage.active .stage-plus::after { background: var(--accent); }

/* ---------- Comparison ---------- */
.compare-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); }
.compare-row:last-child { border-bottom: 1px solid var(--border); }
.compare-cell { padding: 1.6rem 1.5rem; }
.compare-cell.vc { color: var(--text-tertiary); }
.compare-cell.gharay { color: var(--text-primary); }
.compare-divider { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--accent), transparent); }

/* ---------- Venture Cards ---------- */
.venture-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 2px;
  clip-path: polygon(0 0, calc(100% - var(--summit-cut)) 0, 100% var(--summit-cut), 100% 100%, 0 100%);
  background: linear-gradient(160deg, var(--bg-surface), var(--bg-primary));
  overflow: hidden;
}
.status-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(70, 200, 216, 0.24);
  border-radius: var(--radius-sm);
  padding: 0.4em 0.85em;
}

/* ---------- Team ---------- */
.team-photo {
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 2px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  overflow: hidden; position: relative;
  background: linear-gradient(160deg, var(--bg-surface-raised), var(--bg-surface));
  border: 1px solid var(--border);
}

/* ---------- Journal ---------- */
.journal-card .journal-image {
  aspect-ratio: 16/11;
  border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--border);
  background: linear-gradient(150deg, var(--bg-surface-raised), var(--bg-surface));
  position: relative;
}

/* ---------- Footer ---------- */
.footer-watermark {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.04em; line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1px rgba(230,237,242,0.10);
  font-size: clamp(4rem, 16vw, 13rem); user-select: none; white-space: nowrap;
}

/* ---------- Ambient light (Wind motif) ---------- */
.ambient-orb { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; opacity: 0.5; }

/* ---------- River system connector (flowing, never straight) ---------- */
.river-divider { width: 100%; height: 140px; opacity: 0.4; overflow: visible; }

.reveal { opacity: 0; }
.reveal-up { opacity: 0; transform: translateY(40px); }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--bg-surface-raised); border: 2px solid var(--bg-primary); border-radius: 8px; }

@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;
  }
}

@media (max-width: 900px) {
  .compare-row { grid-template-columns: 1fr; }
  .compare-cell.gharay { border-top: 1px solid var(--border); }
  .compare-divider { display: none; }
  .coord-mark { display: none; }
}

@media (max-width: 640px) {
  .footer-watermark { -webkit-text-stroke: 0.6px rgba(230,237,242,0.10); }
  .btn { --summit-cut: 14px; }
  .card, .venture-card { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
}

/* ==========================================================================
   v3 additions — visual/motion techniques drawn from the pitch-deck study.
   Content stays the site's own (multi-section, non-linear); this layer is
   purely presentational polish: intro loader, custom cursor, numbered
   section labels, expanding principle cards, scrub progress hairline.
   ========================================================================== */

/* ---------- Intro Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 300;
  background: var(--bg-primary);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity 0.9s var(--ease-out), visibility 0.9s var(--ease-out);
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-mark {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--text-primary);
  display: flex; gap: 0.05em;
}
.loader-mark span { display: inline-block; opacity: 0; transform: translateY(20px); }
.loader-line {
  width: 0; height: 1px; background: var(--text-primary);
  margin-top: var(--sp-4); opacity: 0.4;
}
.loader-coord {
  font-size: 0.7rem; letter-spacing: 0.3em; color: var(--text-tertiary);
  margin-top: var(--sp-3); opacity: 0; text-transform: uppercase;
}

/* ---------- Custom Cursor (desktop only) ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none;
  z-index: 290; border-radius: 50%; will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px; background: var(--text-primary);
  mix-blend-mode: difference; transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(248, 250, 249, 0.4);
  mix-blend-mode: difference; transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.cursor-ring.hover {
  width: 60px; height: 60px;
  border-color: var(--accent);
  background: rgba(70, 200, 216, 0.08);
}
@media (max-width: 1023px), (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}
@media (min-width: 1024px) and (hover: hover) {
  .cursor-active { cursor: none; }
  .cursor-active * { cursor: none !important; }
}

/* ---------- Scroll Progress Hairline ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px;
  background: var(--accent); z-index: 101; width: 0%;
  pointer-events: none;
}

/* ---------- Numbered section labels (chapter-label style) ---------- */
.section-label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: 0.7rem; letter-spacing: 0.3em;
  color: var(--text-tertiary); text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.section-label .n { color: var(--copper); }
.section-label .l { width: 48px; height: 1px; background: var(--border-strong); }

/* ---------- Five Principles — expanding cards ---------- */
.principles-row {
  display: flex; gap: var(--sp-2);
  min-height: 380px;
}
@media (max-width: 900px) {
  .principles-row { flex-direction: column; min-height: 0; }
}
.principle-x {
  flex: 1; border: 1px solid var(--border);
  padding: var(--sp-3); display: flex; flex-direction: column;
  justify-content: space-between; cursor: pointer;
  transition: flex 0.7s var(--ease-in-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  background: var(--bg-surface);
  position: relative; overflow: hidden;
}
.principle-x:hover, .principle-x.expanded {
  flex: 2.4; border-color: var(--border-strong);
  background: var(--bg-surface-raised);
}
.principle-x .principle-num { font-family: var(--font-display); font-size: 0.75rem; color: var(--copper); letter-spacing: 0.15em; }
.principle-x .principle-name {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: -0.01em; margin-top: var(--sp-2); transition: color var(--dur-fast) var(--ease-out);
}
.principle-x:hover .principle-name, .principle-x.expanded .principle-name { color: var(--accent); }
.principle-x .principle-shape-x { color: var(--accent); margin-bottom: var(--sp-2); }
.principle-x .principle-desc {
  font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary);
  margin-top: var(--sp-2); opacity: 0; max-height: 0;
  transition: opacity 0.4s var(--ease-out) 0.15s, max-height 0.6s var(--ease-in-out);
}
.principle-x:hover .principle-desc, .principle-x.expanded .principle-desc { opacity: 1; max-height: 200px; }

/* ---------- One Company, Many Projects — structural stat row ---------- */
.structure-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3);
  margin-top: var(--sp-5);
}
@media (max-width: 700px) { .structure-stats { grid-template-columns: repeat(2, 1fr); } }
.structure-stat { border-top: 1px solid var(--border-strong); padding-top: var(--sp-2); }
.structure-stat .num {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem); color: var(--text-primary); letter-spacing: -0.02em;
}
.structure-stat .label { margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-tertiary); letter-spacing: 0.03em; }

/* ---------- Timeline progress rail ---------- */
.timeline-rail { position: relative; height: 2px; background: var(--border); margin-bottom: var(--sp-2); }
.timeline-rail-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: var(--accent); }

/* ==========================================================================
   FULL-SITE additions — audience band, contact form, newsletter, misc.
   Same Karakoram language: summit cuts, hairlines, cyan accent, no bounce.
   ========================================================================== */

/* ---------- Audience band ("Who we build with") ---------- */
.audience-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
  margin-top: var(--sp-5);
}
@media (max-width: 900px) { .audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .audience-grid { grid-template-columns: 1fr; } }
.audience-cell {
  border: 1px solid var(--border);
  background: var(--bg-surface);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 2px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
  min-height: 200px;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.audience-cell:hover { border-color: var(--border-strong); background: var(--bg-surface-raised); transform: translateY(-4px); }
.audience-cell .a-icon { width: 30px; height: 30px; color: var(--text-secondary); transition: color var(--dur-fast) var(--ease-out); }
.audience-cell:hover .a-icon { color: var(--accent); }
.audience-cell h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; }
.audience-cell p { font-size: 0.85rem; line-height: 1.6; color: var(--text-secondary); }
.audience-cell .a-link { margin-top: auto; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); display: inline-flex; gap: 0.5rem; align-items: center; transition: color var(--dur-fast) var(--ease-out); }
.audience-cell:hover .a-link { color: var(--accent); }

/* ---------- Heritage full-bleed quote band ---------- */
.heritage-band {
  position: relative; overflow: hidden;
  padding-top: clamp(var(--sp-8), 16vw, var(--sp-10));
  padding-bottom: clamp(var(--sp-8), 16vw, var(--sp-10));
  background: #050C15;
}
.heritage-topo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.5; }
.heritage-band .container-ed { position: relative; z-index: 2; }

/* ---------- Contact split (form + rail) ---------- */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--sp-4), 6vw, var(--sp-7));
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

.form-field { margin-bottom: var(--sp-3); position: relative; }
.form-field label {
  display: block; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 0.6rem;
}
.form-input, .form-textarea, .form-select {
  width: 100%; background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0.95rem 1.1rem; font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-tertiary); }
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none; border-color: var(--accent);
  background: var(--bg-surface-raised);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.form-textarea { resize: vertical; min-height: 130px; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23788592' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; padding-right: 2.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.form-status { font-size: 0.85rem; margin-top: var(--sp-2); min-height: 1.2em; }
.form-status.ok { color: var(--accent); }
.form-status.err { color: var(--copper); }

.contact-detail { border-top: 1px solid var(--border); padding: var(--sp-3) 0; }
.contact-detail:first-of-type { border-top: none; padding-top: 0; }
.contact-detail .cd-label { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 0.5rem; }
.contact-detail .cd-value { font-family: var(--font-display); font-size: 1.25rem; }
.contact-detail .cd-value a { transition: color var(--dur-fast) var(--ease-out); }
.contact-detail .cd-value a:hover { color: var(--accent); }

/* ---------- Newsletter band ---------- */
.newsletter-band {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: clamp(var(--sp-6), 9vw, var(--sp-7)) 0;
  position: relative; overflow: hidden;
}
.newsletter-form { display: flex; gap: var(--sp-2); max-width: 520px; }
@media (max-width: 520px) { .newsletter-form { flex-direction: column; } }
.newsletter-form .form-input { flex: 1; }

/* ---------- Links default/hover (design palette, not browser blue) ---------- */
a { color: inherit; }
.prose-link { color: var(--accent); transition: color var(--dur-fast) var(--ease-out); }
.prose-link:hover { color: var(--text-primary); }

} /* end @layer components */