/* ═══════════════════════════════════════════════════════
   PRK — A Life in Motion
   Art Direction: Editorial / Cinematic / Responsive
   ═══════════════════════════════════════════════════════ */

/* ── FONT ── */
@font-face {
  font-family: 'Mokoto';
  src: url("./assets/SARA_3050_Custom.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: SARA;
  src: url("./assets/SARA_3050_Custom.ttf") format("truetype");
  font-display: swap;
}

/* ── TOKENS ── */
:root {
  --bg: #080808;
  --paper: #e8e2d7;
  --muted: #8b877f;
  --line: #292824;
  --accent: #b9a07a;
  --white: #f3f0e9;
  --gutter: 6.5vw;
  --font-main: 'Orbitron', 'Mokoto', sans-serif;
  --font-display: 'Orbitron', 'Mokoto', sans-serif;
  --font-tech: 'Orbitron', 'Mokoto', sans-serif;
  --font-body: 'Roboto', 'Inter', sans-serif;
}


/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--font-main);
}

body, button, input, select, textarea, p, span, a, small, b, em, div,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

/* ── NOISE OVERLAY ── */
.noise {
  position: fixed;
  inset: -50%;
  z-index: 50;
  pointer-events: none;
  opacity: .015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noise .18s steps(2) infinite;
}
@keyframes noise {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(2%, 1%); }
  50%  { transform: translate(-1%, 2%); }
  75%  { transform: translate(1%, -1%); }
  100% { transform: translate(0, 0); }
}

/* ── CURSOR ── */
.cursor {
  position: fixed;
  left: 0; top: 0;
  width: 12px; height: 12px;
  border: 1px solid var(--paper);
  border-radius: 50%;
  z-index: 100;
  pointer-events: none;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s;
}
.cursor span {
  position: absolute;
  inset: 3px;
  background: var(--paper);
  border-radius: 50%;
}
.cursor.big { width: 55px; height: 55px; }

/* ── PRELOADER ── */
.preloader {
  position: fixed;
  inset: 0;
  background: #080808;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.preloader-mark {
  font-family: var(--font-display);
  font-size: clamp(42px, 7vw, 110px);
  letter-spacing: .08em;
}
.preloader-bottom {
  position: absolute;
  bottom: 7vh;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 10px;
  letter-spacing: .2em;
  color: #777;
  font-family: var(--font-tech);
}
.loader-line {
  width: 150px;
  height: 1px;
  background: #272727;
  overflow: hidden;
}
.loader-line i {
  display: block;
  height: 100%;
  background: var(--paper);
  width: 0;
}

/* ── NAV ── */
.nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 78px;
  z-index: 80;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(#080808c9, transparent);
}
.brand {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: .12em;
}
.nav nav {
  display: flex;
  gap: 42px;
  margin-left: auto;
}
.nav nav a {
  font-family: var(--font-tech);
  font-size: 9px;
  letter-spacing: .18em;
  color: #b7b3aa;
}
.nav-social {
  display: flex;
  gap: 16px;
  margin-left: 42px;
  margin-right: 80px;
}
.nav-social__link {
  color: #6a6560;
  transition: color 0.3s;
}
.nav-social__link:hover {
  color: var(--accent);
}
.nav-social__link svg {
  width: 18px;
  height: 18px;
}
.nav-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: #151515;
}
.nav-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  height: 100svh;
  min-height: 720px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 78% 40%, #1b1b19 0, #0b0b0a 28%, #080808 58%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, transparent, black 30%, transparent);
}
.hero-orbit {
  position: absolute;
  border: 1px solid rgba(185,160,122,.22);
  border-radius: 50%;
  transform: rotate(-25deg);
}
.orbit-a { width: 75vw; height: 28vw; right: -15vw; top: 13vw; }
.orbit-b { width: 45vw; height: 16vw; right: 6vw; top: 27vw; border-color: rgba(255,255,255,.09); }

/* Hero visual — right side image field */
.hero-visual {
  position: absolute;
  right: -4vw;
  top: -5%;
  width: 52%;
  height: 115%;
  z-index: 1;
  overflow: hidden;
  mask-image: linear-gradient(to left, black 55%, transparent 100%),
               linear-gradient(to bottom, transparent 0%, black 12%, black 85%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to left, black 55%, transparent 100%),
                      linear-gradient(to bottom, transparent 0%, black 12%, black 85%, transparent 100%);
  -webkit-mask-composite: source-in;
}
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.55) contrast(1.08) brightness(.72);
  will-change: transform;
}
.hero-visual-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--bg) 0%,
    transparent 30%,
    transparent 60%,
    rgba(8,8,8,.4) 100%
  );
}

/* Hero copy */
.hero-copy {
  position: absolute;
  left: var(--gutter);
  top: 19vh;
  z-index: 2;
  max-width: 58%;
}
.eyebrow,
.section-number,
.section-head > span,
.now-title > span,
.contact > span {
  font-size: 9px;
  letter-spacing: .25em;
  color: var(--accent);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(52px, 9.5vw, 155px);
  line-height: .84;
  letter-spacing: -.03em;
  margin: 25px 0 34px;
  font-weight: 800;
  text-transform: uppercase;
}
.hero h1 span { display: block; }
.hero-role {
  font-family: var(--font-tech);
  font-size: 11px;
  letter-spacing: .18em;
  color: #c9c3b8;
}
.hero-meta {
  font-family: var(--font-tech);
  font-size: 11px;
  color: #77736d;
  margin-top: 13px;
}
.enter {
  font-family: var(--font-tech);
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin-top: 65px;
  font-size: 9px;
  letter-spacing: .25em;
  color: var(--accent);
}
.enter b {
  width: 35px; height: 35px;
  border: 1px solid #47423a;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 400;
}
.hero-side {
  position: absolute;
  right: 8vw;
  top: 38%;
  width: 150px;
  border-left: 1px solid var(--accent);
  padding-left: 17px;
  display: grid;
  gap: 12px;
  font-size: 11px;
  color: #b0aaa0;
  line-height: 1.3;
  z-index: 2;
}
.hero-scan {
  position: absolute;
  left: 0; bottom: 18%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b9a07a33, transparent);
  animation: scan 6s linear infinite;
}
@keyframes scan {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ═══════════════════════════════════════════
   TIMELINE
═══════════════════════════════════════════ */
.timeline-section {
  position: relative;
  min-height: 2600px;
  padding: 180px var(--gutter);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 22% 42% 36%;
  gap: 0;
}
.timeline-intro {
  position: sticky;
  top: 150px;
  height: 300px;
}
.timeline-intro h2,
.section-head h2,
.now-title h2 {
  font-size: clamp(34px, 4vw, 65px);
  line-height: .88;
  letter-spacing: -.055em;
  margin: 25px 0 16px;
}
.timeline-intro p,
.section-head p {
  font-size: 11px;
  color: #77736d;
  line-height: 1.7;
}
.timeline-legend {
  display: grid;
  gap: 10px;
  margin-top: 80px;
}
.timeline-legend span {
  font-size: 8px;
  letter-spacing: .18em;
  color: #777;
}
.timeline-legend i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6d665c;
  margin-right: 10px;
}

/* Timeline spine */
.timeline { position: relative; }
.timeline-line {
  position: absolute;
  left: 106px;
  top: 12px;
  height: calc(100% - 24px);
  width: 1px;
  background: #2c2b28;
}
.timeline-line i {
  display: block;
  width: 100%;
  height: 0;
  background: var(--accent);
}
.timeline-items { display: grid; gap: 75px; }
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 82px 48px 1fr;
  min-height: 110px;
  opacity: .32;
  transition: opacity .5s, transform .5s;
}
.timeline-item.active { opacity: 1; transform: translateX(5px); }
.timeline-item .year {
  font-size: 11px;
  color: #bcb5a8;
  text-align: right;
  padding-top: 2px;
}
.timeline-item .dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid #817766;
  background: #0b0b0b;
  margin: 0 auto;
  z-index: 2;
}
.timeline-item.active .dot {
  background: var(--accent);
  box-shadow: 0 0 0 5px #b9a07a12;
}
.event small {
  font-size: 8px;
  letter-spacing: .17em;
  color: var(--accent);
}
.event h3 {
  font-size: 17px;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 7px 0 5px;
}
.event p {
  font-size: 10px;
  line-height: 1.5;
  color: #77736d;
  margin: 0;
}

/* Timeline media panel */
.timeline-media {
  position: sticky;
  top: max(100px, 12vh);
  height: min(75vh, 680px);
  min-height: 400px;
  margin-left: 20px;
  overflow: hidden;
  border: 1px solid #232321;
  background: #0c0c0b;
}
.media-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s cubic-bezier(.25,.46,.45,.94), transform 1.4s cubic-bezier(.25,.46,.45,.94);
  will-change: opacity, transform;
}
.media-frame.active {
  opacity: 1;
  transform: scale(1);
}
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 50%);
  filter: saturate(.55) contrast(1.05);
  opacity: .75;
}
.media-frame img[style*="object-fit:contain"] {
  object-fit: contain !important;
}
.media-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 24px;
  background: linear-gradient(transparent, rgba(8,8,8,.7));
}
.media-overlay span {
  font-size: 8px;
  letter-spacing: .3em;
  color: var(--accent);
}

/* Special placeholders */
.media-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%, #24221e, #090909 62%);
  color: #6f695e;
  font-size: 10px;
  letter-spacing: .4em;
}
.media-placeholder--origin {
  background: radial-gradient(ellipse at 40% 60%, #2a1f0e, #0a0807 60%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 40px;
  gap: 0;
}
.mp-year {
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(72px, 8vw, 120px);
  line-height: .8;
  letter-spacing: -.06em;
  color: var(--paper);
  opacity: .18;
}
.mp-location {
  font-size: 9px;
  letter-spacing: .25em;
  color: var(--accent);
  margin-top: 20px;
  line-height: 1.8;
}
.media-placeholder--learning {
  background: radial-gradient(circle at 50% 40%, #1a1e14, #090909 60%);
}
.media-placeholder--finance {
  background: radial-gradient(circle at 50% 50%, #0f130f, #090909 60%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.media-placeholder--finance::after {
  content: "";
  display: block;
  width: 180px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
}

/* ═══════════════════════════════════════════
   STATEMENT
═══════════════════════════════════════════ */
.statement {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12vw 10vw;
  border-bottom: 1px solid var(--line);
}
.statement-kicker {
  font-size: 9px;
  color: var(--accent);
  letter-spacing: .25em;
  margin-bottom: 35px;
}
.statement h2 {
  font-size: clamp(48px, 9vw, 150px);
  line-height: .86;
  letter-spacing: -.03em;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
}
.statement h2 em { font-style: normal; color: #68645c; }
.statement p {
  margin-top: 50px;
  font-size: 10px;
  letter-spacing: .18em;
  color: #74706a;
  font-family: var(--font-tech);
}

/* ═══════════════════════════════════════════
   SYSTEMS
═══════════════════════════════════════════ */
.systems,
.universe,
.skills {
  padding: 150px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.section-head {
  display: grid;
  grid-template-columns: 60px 1fr 250px;
  align-items: end;
  margin-bottom: 70px;
}
.section-head h2 { margin: 0; }
.section-head p  { margin: 0; }

.system-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.system-card {
  position: relative;
  min-height: 300px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .5s, transform .5s;
}
.system-card:hover { background: #10100f; transform: translateY(-5px); }
.system-card > b  { font-size: 8px; color: #555; }
.system-icon {
  position: absolute;
  right: 28px; top: 25px;
  font-size: 18px;
  color: #8c7a5c;
}
.system-card h3 {
  margin-top: 115px;
  font-size: 22px;
  letter-spacing: .05em;
}
.system-card p {
  font-size: 10px;
  line-height: 1.7;
  color: #6f6b64;
}

/* ═══════════════════════════════════════════
   VENTURE UNIVERSE
═══════════════════════════════════════════ */
.universe { min-height: 800px; }
.universe-orbit-wrap {
  position: relative;
  height: 520px;
  border: none;
  background: radial-gradient(circle, #141310 0, #090909 54%);
  overflow: hidden;
}
.orbit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.orbit-ring {
  fill: none;
  stroke: #2a2824;
  stroke-width: 1;
  stroke-dasharray: 4 6;
}
.orbit-line {
  stroke: #2a2824;
  stroke-width: 1;
}
.orbit-node-dot {
  fill: #a08b6d;
}
.orbit-core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 110px; height: 110px;
  border: 1px solid rgba(160, 139, 109, 0.4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0b0b0a;
  z-index: 2;
}
.orbit-core__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.orbit-core__label {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--paper);
  z-index: 2;
}
.orbit-core__ring {
  position: absolute;
  inset: -10px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0.2;
  animation: pulse-ring 4s infinite linear;
}
@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.3); opacity: 0; }
}

.eco-node {
  position: absolute;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  z-index: 2;
  padding: 10px;
  transition: transform 0.3s;
}
.eco-node:hover {
  transform: translateY(-5px);
}
.eco-node__name {
  display: block;
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--paper);
  font-weight: 600;
}
.eco-node__sub {
  display: block;
  color: #6d6962;
  font-size: 9px;
  letter-spacing: .08em;
  margin-top: 6px;
  margin-bottom: 8px;
}
.eco-node__status {
  display: inline-block;
  font-size: 7px;
  letter-spacing: .18em;
  padding: 4px 8px;
  border-radius: 2px;
  background: #111;
}
.eco-node[data-status="building"] .eco-node__status { color: #7fba6a; border: 1px solid #3a5530; }
.eco-node[data-status="exploring"] .eco-node__status { color: var(--accent); border: 1px solid #5a4a30; }
.eco-node[data-status="concept"] .eco-node__status { color: #a07aaa; border: 1px solid #4a3055; }
.eco-node[data-status="vision"] .eco-node__status { color: #7aaabf; border: 1px solid #2a455a; }

.eco-node--n1 { left: 10%; top: 16%; }
.eco-node--n2 { right: 10%; top: 16%; text-align: right; }
.eco-node--n3 { left: 6%; top: 50%; transform: translateY(-50%); }
.eco-node--n4 { right: 6%; top: 50%; transform: translateY(-50%); text-align: right; }
.eco-node--n3:hover { transform: translateY(-50%) translateY(-5px); }
.eco-node--n4:hover { transform: translateY(-50%) translateY(-5px); }
.eco-node--n5 { left: 10%; bottom: 12%; }
.eco-node--n6 { right: 10%; bottom: 12%; text-align: right; }
.eco-node--n7 { left: 50%; top: 2%; transform: translateX(-50%); text-align: center; }
.eco-node--n7:hover { transform: translateX(-50%) translateY(-5px); }

/* ═══════════════════════════════════════════
   BUILDS — EDITORIAL PANELS
═══════════════════════════════════════════ */
.builds {
  padding: 150px var(--gutter);
  border-bottom: 1px solid var(--line);
}

.builds .section-head h2 {
  font-family: 'Orbitron', 'Oxanium', 'Michroma', SARA, sans-serif;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.build-editorial {
  display: flex;
  flex-direction: column;
  gap: clamp(120px, 20vh, 250px);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* Master Brand Container — Borderless, clean, identical dimensions */
.build-panel {
  width: 100%;
  height: clamp(540px, 42vw, 680px);
  min-height: 540px;
  background: #080808;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
}

/* Alternating Direction: Reversed (Even) */
.build-panel.build-panel--reverse,
.build-panel:nth-child(even) {
  flex-direction: row-reverse;
}

/* ─────────────────────────────────────────────────────────
   IMAGE GROUP (50% OF CARD)
   Normal: Vertical (64%) | Square + Logo (36%)
   Reverse: Square + Logo (36%) | Vertical (64%)
   ───────────────────────────────────────────────────────── */
.bp-collage {
  width: 50%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #0c0c0c;
  border: none;
}

.build-panel.build-panel--reverse .bp-collage,
.build-panel:nth-child(even) .bp-collage {
  grid-template-columns: auto 1fr;
}

/* Zone I: Large Main Portrait Image */
.bp-collage__main {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  background: #0c0c0c;
  border: none;
  min-width: 0;
}

.build-panel.build-panel--reverse .bp-collage__main,
.build-panel:nth-child(even) .bp-collage__main {
  order: 2;
}

/* Zone II: Stacked Square Image + Square Logo (Both exact 1:1 squares) */
.bp-collage__sec {
  height: 100%;
  aspect-ratio: 1 / 2;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  overflow: hidden;
  position: relative;
  background: #060606;
  border: none;
}

.build-panel.build-panel--reverse .bp-collage__sec,
.build-panel:nth-child(even) .bp-collage__sec {
  order: 1;
}

/* Square product frame */
.brand-img--square {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}

/* Square logo frame */
.bp-collage__logo-badge {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  background: #040404;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

/* ─────────────────────────────────────────────────────────
   FORAA AI & PRATEEKEXIM: FULL ADJUSTED HORIZONTAL / RECTANGULAR IMAGE
   ───────────────────────────────────────────────────────── */
.bp-collage--foraaai,
.bp-collage--prateekexim,
.bp-collage--full {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  background: #080808;
  border: none;
}

.bp-collage--foraaai .brand-img-wrap,
.bp-collage--prateekexim .brand-img-wrap,
.brand-img--full,
.brand-img--horizontal,
.brand-img--rect {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080808;
}

.bp-collage--foraaai img,
.bp-collage--prateekexim img,
.bp-collage--full img {
  object-fit: contain !important;
  object-position: center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}


/* ─────────────────────────────────────────────────────────
   IMAGE WRAPPERS & FULL BLEED RENDERING (ZERO PADDING / EDGE-TO-EDGE)
   ───────────────────────────────────────────────────────── */
.brand-img-wrap {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  border: none;
  outline: none;
  box-shadow: none;
}

.brand-img-wrap picture {
  width: 100%;
  height: 100%;
  display: block;
}


.brand-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border: none !important;
  outline: none !important;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.brand-img-wrap.loaded img {
  opacity: 1;
}

/* Logo Slot: Full bleed edge-to-edge fit with zero inside borders/space */
.brand-img--logo img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Loading Spinner */
.img-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  position: absolute;
  z-index: 2;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────
   ZONE III: BRAND INFORMATION AREA (50% OF CARD)
   ───────────────────────────────────────────────────────── */
.bp-content {
  width: 50%;
  height: 100%;
  padding: clamp(28px, 3vw, 48px) clamp(28px, 3.8vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  background: #080808;
  border: none;
}

/* ── TOP ROW: Index number + category tags ── */
.bp-top-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(16px, 2vw, 26px);
}
.bp-index {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #3a3631;
  flex-shrink: 0;
  font-family: var(--font-main);
}
.bp-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bp-tag {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  border: 1px solid rgba(185,160,122,0.2);
  padding: 3px 8px;
  border-radius: 2px;
  font-family: var(--font-main);
  transition: border-color 0.3s, background 0.3s;
}
.bp-tag:hover {
  background: rgba(185,160,122,0.06);
  border-color: rgba(185,160,122,0.45);
}

/* ── NAME WRAP: Brand headline + subline ── */
.bp-name-wrap {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bp-brand-name {
  font-family: var(--font-main);
  font-size: clamp(30px, 3.6vw, 58px);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fdfcf9;
  margin: 0;
  position: relative;
  overflow: hidden;
}
/* Letter-split animation helper spans injected by JS */
.bp-brand-name .char {
  display: inline-block;
  will-change: transform, opacity;
}
.bp-subline {
  font-family: var(--font-main);
  font-size: clamp(9.5px, 0.88vw, 12px);
  letter-spacing: 0.12em;
  color: #6e6860;
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
}

/* ── DESCRIPTION (MINIMALISTIC WITH TOP MARGIN) ── */
.bp-desc {
  font-size: clamp(11.5px, 0.95vw, 13.5px);
  line-height: 1.75;
  color: #6e6a64;
  max-width: 480px;
  margin: clamp(18px, 1.8vw, 26px) 0 clamp(18px, 2vw, 28px) 0;
  font-family: var(--font-body) !important;
  font-weight: 400;
}
.bp-desc em { color: var(--accent); font-style: normal; }


/* ── STATUS BAR: Live indicator row ── */
.bp-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(12px, 1.4vw, 18px);
  padding: 8px 12px;
  background: rgba(255,255,255,0.022);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px;
}
.bp-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.bp-status-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  animation: dot-pulse 2.2s ease-out infinite;
  opacity: 0;
}
@keyframes dot-pulse {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}
.bp-dot--building  { background: #7fba6a; color: #7fba6a; }
.bp-dot--exploring { background: var(--accent); color: var(--accent); }
.bp-dot--concept   { background: #a07aaa; color: #a07aaa; }
.bp-dot--vision    { background: #7aaabf; color: #7aaabf; }

.bp-status-text {
  font-family: var(--font-main);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #c4bfa5;
}
.bp-status-rule {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.07);
}
.bp-status-role {
  font-family: var(--font-main);
  font-size: 7.5px;
  letter-spacing: 0.16em;
  color: #55514a;
  font-weight: 600;
}

/* ── BUILD META: Data table row ── */
.build-meta {
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  margin-bottom: clamp(12px, 1.4vw, 20px);
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap;
}
.build-meta span {
  font-family: var(--font-main);
  font-size: 7.5px;
  letter-spacing: 0.16em;
  color: #403d39;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 700;
  text-transform: uppercase;
}
.build-meta span b {
  font-family: var(--font-main);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #a09a8e;
  font-weight: 600;
}

/* ── BRAND LINKS ── */
.bp-brand-links {
  display: flex;
  gap: 8px;
  margin-top: auto;
  flex-wrap: wrap;
}
.bp-brand-link {
  font-family: var(--font-main);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  background: transparent;
  color: #6a6560;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-decoration: none;
  font-weight: 700;
  transition: border-color 250ms ease, color 250ms ease, background 250ms ease, transform 250ms ease;
}
.bp-brand-link:hover {
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}
.bp-brand-link svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

/* ── SCAN LINE (decorative animated line per panel) ── */
.bp-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(185,160,122,0.5) 50%, transparent 100%);
  top: -2px;
  opacity: 0;
  pointer-events: none;
  animation: scan-sweep 8s linear infinite;
}
@keyframes scan-sweep {
  0%   { top: 0%;   opacity: 0; }
  3%   { opacity: 1; }
  97%  { opacity: 0.4; }
  100% { top: 100%; opacity: 0; }
}
.bp-brand-name .char {
  display: inline-block;
}

/* ── BP NUMBER (ghost) ── */
.bp-number {
  position: absolute;
  right: 28px;
  bottom: 8px;
  font-family: var(--font-main);
  font-size: clamp(80px, 10vw, 150px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: #ffffff;
  opacity: 0.03;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}



.bp-content small {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--accent, #b9a07a);
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
  font-weight: 600;
  font-family: var(--font-main);
}

.bp-content h3 {
  font-family: var(--font-main);
  font-size: clamp(28px, 3.4vw, 54px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fdfcf9;
  margin: 0 0 12px 0;
}

.bp-subline {
  font-family: var(--font-main);
  font-size: clamp(11px, 0.95vw, 13.5px);
  letter-spacing: 0.06em;
  color: #a09a8d;
  margin: 0 0 14px 0;
  font-weight: 500;
}

.bp-content > p:not(.bp-subline):not(.bp-flagship) {
  font-size: clamp(11px, 0.92vw, 13px);
  line-height: 1.65;
  color: #787267;
  max-width: 480px;
  margin: 0 0 14px 0;
  font-family: var(--font-main);
}

.bp-flagship {
  font-family: var(--font-main);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #66615a;
  margin: 0 0 14px 0;
}
.bp-flagship b {
  color: var(--accent, #b9a07a);
  font-weight: 600;
  font-family: var(--font-main);
  letter-spacing: 0.06em;
}

.sara-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.sara-pillars span {
  font-family: var(--font-main);
  font-size: 8px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: #8b877f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 8px;
  border-radius: 2px;
}

.build-meta {
  display: flex;
  gap: clamp(20px, 2.5vw, 40px);
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}
.build-meta span {
  font-family: var(--font-main);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #55514a;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
  text-transform: uppercase;
}
.build-meta span b {
  font-family: var(--font-main);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #c4bfa5;
  font-weight: 600;
}

.bp-brand-links {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.bp-brand-link {
  font-family: var(--font-main);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  background: transparent;
  color: #a8a49c;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-decoration: none;
  font-weight: 600;
  transition: border-color 250ms ease, color 250ms ease, background 250ms ease, transform 250ms ease;
}
.bp-brand-link:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}
.bp-brand-link svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

.bp-number {
  position: absolute;
  right: 28px;
  bottom: 8px;
  font-family: var(--font-main);
  font-size: clamp(80px, 10vw, 150px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: #ffffff;
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────
   BUILDS RESPONSIVE (MOBILE & TABLET)
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* ── BUILDS: Clean mobile card layout with EXACT desktop collage proportions ── */
  .builds {
    padding: 60px var(--gutter, 20px);
  }
  .build-editorial {
    gap: clamp(100px, 15vh, 160px);
  }
  /* Card stacks vertically on mobile */
  .build-panel,
  .build-panel.build-panel--reverse,
  .build-panel:nth-child(even) {
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    background: #080808;
    max-width: 540px;
    margin: 0 auto;
    width: 100%;
  }

  /* TOP: Image collage with EXACT desktop geometry (Vertical rectangle + 2 stacked 1:1 squares) */
  .bp-collage,
  .build-panel.build-panel--reverse .bp-collage,
  .build-panel:nth-child(even) .bp-collage {
    width: 100% !important;
    height: 270px !important;
    min-height: 270px !important;
    max-height: 270px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #0a0a0a !important;
    border: none !important;
    order: 1 !important;
  }

  /* Left: Tall vertical rectangle image */
  .bp-collage__main,
  .build-panel.build-panel--reverse .bp-collage__main,
  .build-panel:nth-child(even) .bp-collage__main {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    border: none !important;
    order: 1 !important;
  }

  /* Right: Stacked 1:1 square product + 1:1 square logo */
  .bp-collage__sec,
  .build-panel.build-panel--reverse .bp-collage__sec,
  .build-panel:nth-child(even) .bp-collage__sec {
    width: auto !important;
    height: 100% !important;
    aspect-ratio: 1 / 2 !important;
    display: grid !important;
    grid-template-rows: 1fr 1fr !important;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    order: 2 !important;
  }

  .bp-collage__sec .brand-img--square,
  .bp-collage__sec .bp-collage__logo-badge {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* FORAA AI & PRATEEKEXIM: full horizontal rectangle */
  .bp-collage--foraaai,
  .bp-collage--prateekexim,
  .bp-collage--full {
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #080808 !important;
    order: 1 !important;
  }
  .bp-collage--foraaai img,
  .bp-collage--prateekexim img,
  .bp-collage--full img {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* BOTTOM: Brand editorial content panel */
  .bp-content {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 26px 20px 30px !important;
    order: 2 !important;
    background: #080808 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: visible !important;
  }
  .bp-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 16px 0 !important;
    flex-wrap: wrap !important;
  }
  .bp-index {
    font-size: 8.5px !important;
    letter-spacing: 0.22em !important;
    color: #4a453e !important;
  }
  .bp-tags {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .bp-tag {
    font-size: 7px !important;
    padding: 3px 8px !important;
    letter-spacing: 0.16em !important;
  }
  .bp-name-wrap {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .bp-brand-name {
    font-size: clamp(24px, 6.8vw, 36px) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    letter-spacing: 0.02em !important;
    word-break: break-word !important;
  }
  .bp-subline {
    font-size: 10px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.09em !important;
    color: #78726b !important;
    margin: 0 !important;
  }
  .bp-desc {
    font-size: 12.5px !important;
    line-height: 1.68 !important;
    color: #726e67 !important;
    margin: 16px 0 20px 0 !important;
    max-width: 100% !important;
    font-family: var(--font-body) !important;
  }
  .sara-pillars {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin: 0 0 18px 0 !important;
  }
  .sara-pillars span {
    font-size: 7.5px !important;
    padding: 3px 8px !important;
    background: rgba(122, 170, 191, 0.08) !important;
    border: 1px solid rgba(122, 170, 191, 0.25) !important;
    color: #7aaabf !important;
    border-radius: 2px !important;
    font-family: var(--font-main) !important;
    letter-spacing: 0.12em !important;
  }
  .bp-status-bar {
    padding: 8px 12px !important;
    margin: 0 0 18px 0 !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 3px !important;
  }
  .bp-status-text {
    font-size: 8px !important;
    letter-spacing: 0.2em !important;
  }
  .bp-status-role {
    font-size: 7.5px !important;
    letter-spacing: 0.14em !important;
  }
  .build-meta {
    display: flex !important;
    gap: 16px !important;
    margin: 0 0 18px 0 !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    flex-wrap: wrap !important;
  }
  .build-meta span {
    font-size: 7px !important;
    letter-spacing: 0.16em !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  .build-meta span b {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }
  .bp-brand-links {
    display: flex !important;
    margin-top: 4px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .bp-brand-link {
    padding: 8px 14px !important;
    font-size: 8px !important;
    letter-spacing: 0.16em !important;
  }
  .bp-scan-line { display: none !important; }
  .bp-number { display: none !important; }
}


/* ═══════════════════════════════════════════
   CAPABILITY / SKILLS
═══════════════════════════════════════════ */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.cap-card {
  padding: 35px;
  border: 1px solid #1a1917;
  background: #0a0a09;
  position: relative;
}
.cap-card__icon {
  font-size: 20px;
  color: #655d4e;
  margin-bottom: 24px;
}
.cap-card small {
  display: block;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--accent);
  margin-bottom: 20px;
}
.cap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cap-tags span {
  font-size: 10px;
  color: #a7a198;
  background: #111110;
  padding: 6px 14px;
  border: 1px solid #22201d;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════
   RIGHT NOW
═══════════════════════════════════════════ */
.now {
  min-height: 700px;
  padding: 160px 10vw;
  display: grid;
  grid-template-columns: 35% 65%;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.status-list { border-top: 1px solid var(--line); }
.status-list div {
  display: flex;
  justify-content: space-between;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: .1em;
}
.status-list b {
  font-size: 8px;
  color: var(--accent);
  font-weight: 500;
}

/* ═══════════════════════════════════════════
/* ═══════════════════════════════════════════
   WHAT COMES NEXT — ANIMATED BAR CHART
═══════════════════════════════════════════ */
.future {
  min-height: 100svh;
  position: relative;
  padding: 150px var(--gutter) 100px;
  overflow: hidden;
}
.future-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 50%, #1a1814, transparent 30%),
    radial-gradient(circle at 50% 50%, #0f0f0d, transparent 55%);
}
.future > *:not(.future-bg) { position: relative; }

/* Bar chart container */
.future-bars {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  height: 520px;
  border-bottom: 1px solid rgba(185,160,122,0.18);
  margin-top: 60px;
  padding-bottom: 0;
}

/* Individual bar */
.future-bar {
  flex: 1;
  height: var(--bar-h, 40%);
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: default;
  transition: flex 0.4s ease;
}
.future-bar:hover {
  flex: 1.6;
}

/* The actual coloured bar fill that animates upward */
.future-bar__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(185, 160, 122, 0.22) 0%,
    rgba(185, 160, 122, 0.05) 100%
  );
  border-top: 1px solid rgba(185, 160, 122, 0.45);
  border-left: 1px solid rgba(185, 160, 122, 0.12);
  border-right: 1px solid rgba(185, 160, 122, 0.12);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--bar-delay, 0s);
  border-radius: 2px 2px 0 0;
}
.future-bar.bar--in .future-bar__fill {
  transform: scaleY(1);
}

/* Shimmer sweep on bar fill */
.future-bar__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  animation: bar-shimmer 3s ease-in-out infinite;
}
@keyframes bar-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Content lives at the bottom of each bar */
.future-bar__content {
  position: relative;
  z-index: 2;
  padding: 20px 16px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease calc(var(--bar-delay, 0s) + 0.6s),
              transform 0.8s ease calc(var(--bar-delay, 0s) + 0.6s);
}
.future-bar.bar--in .future-bar__content {
  opacity: 1;
  transform: translateY(0);
}
.future-bar__time {
  display: block;
  font-family: var(--font-main);
  font-size: 7.5px;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
}
.future-bar__word {
  display: block;
  font-family: var(--font-main);
  font-size: clamp(16px, 2.2vw, 36px);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--paper);
  line-height: 1;
  margin-bottom: 12px;
}
.future-bar__desc {
  font-family: var(--font-body);
  font-size: clamp(10px, 0.9vw, 13px);
  line-height: 1.65;
  color: #5a5651;
  font-weight: 400;
  margin: 0;
}
.future-bar:hover .future-bar__desc {
  color: #8a857e;
  transition: color 0.3s;
}

/* Hover accent top line */
.future-bar:hover .future-bar__fill {
  border-top-color: var(--accent);
  background: linear-gradient(
    to top,
    rgba(185, 160, 122, 0.3) 0%,
    rgba(185, 160, 122, 0.08) 100%
  );
}

/* Old future-line classes — nullified */
.future-line, .future-desc { display: none; }


/* ═══════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════ */
.contact {
  min-height: 100svh;
  padding: 150px 8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.contact-orbit {
  position: absolute;
  width: 60vw; height: 25vw;
  border: 1px solid #292721;
  border-radius: 50%;
  right: -10vw; top: 15vw;
  transform: rotate(-20deg);
}
.contact h2 {
  font-size: clamp(65px, 11vw, 170px);
  line-height: .78;
  letter-spacing: -.08em;
  margin: 35px 0;
}
.contact h2 em { font-style: normal; color: #726c61; }
.contact > p {
  font-size: 10px;
  letter-spacing: .18em;
  color: #78736b;
}
.contact-cta {
  display: flex;
  gap: 16px;
  margin-top: 55px;
}
.contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  font-size: 11px;
  letter-spacing: .2em;
  color: #111;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.contact-link svg {
  width: 18px; height: 18px;
}
.contact-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}
.contact-link--primary {
  background: #F2F0EA;
  color: #000;
}
.contact-link--whatsapp {
  background: #25D366;
  color: #fff;
}
.contact-bottom {
  position: absolute;
  bottom: 40px;
  left: 8vw; right: 8vw;
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  letter-spacing: .18em;
  color: #65615b;
  border-top: 1px solid #1f1e1b;
  padding-top: 18px;
}

/* ═══════════════════════════════════════════
   RESPONSIVE — TABLET (900px–1200px)
═══════════════════════════════════════════ */
@media (max-width: 1200px) {
  /* Hero visual smaller on tablet */
  .hero-visual { width: 48%; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 900px)
═══════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --gutter: 20px; }

  /* ── Nav: hide desktop links, show 3-line hamburger ── */
  .nav {
    height: 60px;
    padding: 0 20px;
    background: rgba(8, 8, 8, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 200;
  }
  .main-nav { display: none !important; }
  .nav-social { display: none !important; }
  .nav-hamburger {
    display: flex !important;
    margin-left: auto;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
  }

  /* ── Hero: Centered content, compact spacing ── */
  .hero {
    height: 100svh;
    min-height: 560px;
    padding: 70px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
  }
  .hero-copy {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    z-index: 5;
  }
  .hero h1 {
    font-size: clamp(38px, 12.5vw, 68px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 0 0 12px 0;
  }
  .hero-role {
    font-size: clamp(9px, 2.5vw, 12px);
    letter-spacing: 0.15em;
    text-align: left;
    align-self: flex-start;
    margin: 10px 0 12px 0;
    max-width: 90%;
    color: rgba(255, 255, 255, 0.85);
  }
  .hero-meta {
    font-size: 9px;
    letter-spacing: 0.12em;
    text-align: left;
    align-self: flex-start;
    margin: 0 0 24px 0;
    color: rgba(255, 255, 255, 0.6);
  }
  .enter {
    margin: 0 auto;
    font-size: 8.5px;
    padding: 11px 22px;
  }
  .hero-side { display: none !important; }

  /* Hero visual: soft centered backdrop */
  .hero-visual {
    width: 100%;
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    height: 55%;
    opacity: 0.25;
    mask-image: linear-gradient(to top, black 30%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 30%, transparent 100%);
  }
  .hero-visual-vignette {
    background: linear-gradient(to bottom, var(--bg) 0%, transparent 40%);
  }

  /* ── Section Paddings: Minimized & centered ── */
  .systems, .universe, .skills, .statement, .future, .contact, .now {
    padding: 60px 20px;
  }
  .section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 32px;
    gap: 6px;
    grid-template-columns: unset;
  }
  .section-head span {
    font-size: 10px;
    color: var(--accent);
    letter-spacing: 0.2em;
  }
  .section-head h2 {
    font-size: clamp(26px, 8vw, 40px);
    text-align: center;
    margin: 0;
    line-height: 1;
  }
  .section-head p {
    display: block !important;
    font-size: 11px;
    text-align: center;
    color: #726e67;
    max-width: 320px;
    margin: 4px auto 0;
    line-height: 1.5;
    font-family: var(--font-body) !important;
  }

  /* ── Systems Section ── */
  .system-grid {
    grid-template-columns: 1fr;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    max-width: 520px;
    margin: 0 auto;
  }
  .system-card {
    min-height: auto;
    padding: 22px 18px;
    text-align: left;
  }
  .system-card h3 {
    margin-top: 20px;
    font-size: 17px;
  }

  /* ── Universe / Ecosystem ── */
  .universe { min-height: auto; }
  .universe-orbit-wrap {
    height: 380px;
    max-width: 460px;
    margin: 0 auto;
    border-radius: 4px;
  }
  .universe-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
  }
  .orbit-core {
    width: 86px;
    height: 86px;
  }
  .orbit-core__label {
    font-size: 22px;
  }
  .eco-node__name { font-size: 9px; }
  .eco-node__sub { font-size: 7px; }

  /* ── Skills / Capability ── */
  .capability-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
  }
  .cap-card {
    padding: 24px 20px;
    border-radius: 4px;
  }

  /* ── What Comes Next (Future) ── */
  .future { min-height: auto; }
  .future-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
    border: none;
    margin-top: 24px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }
  .future-bar {
    height: auto !important;
    flex: none !important;
    border: 1px solid rgba(185, 160, 122, 0.15);
    border-left: 3px solid var(--accent);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.02);
    padding: 14px 16px;
    cursor: default;
  }
  .future-bar__fill { display: none; }
  .future-bar__content {
    padding: 0;
    opacity: 1 !important;
    transform: none !important;
  }
  .future-bar__time {
    font-size: 7.5px;
    color: var(--accent);
    margin-bottom: 4px;
  }
  .future-bar__word {
    font-size: 20px;
    margin-bottom: 6px;
  }
  .future-bar__desc {
    font-size: 11.5px;
    line-height: 1.5;
    color: #7a756e;
    font-family: var(--font-body) !important;
  }

  /* ── Contact ── */
  .contact {
    padding: 60px 20px;
    min-height: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .contact h2 {
    font-size: clamp(34px, 10.5vw, 60px);
    line-height: 0.95;
    letter-spacing: -0.04em;
    margin: 20px 0;
    text-align: center;
  }
  .contact-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
  .contact-link {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
    font-size: 9.5px;
  }
  .contact-bottom {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    border-top: 1px solid #1f1e1b;
    padding-top: 16px;
    width: 100%;
  }

  /* ── Cursor off on touch ── */
  .cursor { display: none; }
}

/* ═══════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════
   NEW CONTENT ELEMENTS
═══════════════════════════════════════════ */

/* Preloader subtitle */
.preloader-sub {
  font-size: 9px;
  letter-spacing: .35em;
  color: var(--accent);
  margin-top: 14px;
  opacity: .7;
}

/* Hero statement line */
.hero-statement {
  font-size: 13px;
  color: #a09a91;
  line-height: 1.6;
  margin-top: 10px;
  max-width: 400px;
}

/* System card keywords + projects */
.system-kw {
  font-size: 8px;
  letter-spacing: .12em;
  color: var(--accent);
  margin: 0 0 12px;
  opacity: .8;
}
.system-proj {
  font-size: 8px;
  letter-spacing: .1em;
  color: #55514a;
  margin: 8px 0 0;
}

/* Universe legend */
.universe-legend {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding-top: 20px;
}
.ul-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 32px;
  margin-bottom: 8px;
  font-size: 9px;
  letter-spacing: .1em;
  color: #65615b;
}
.ul-status {
  font-size: 7px;
  letter-spacing: .18em;
  padding: 4px 10px;
  border-radius: 2px;
  font-weight: 600;
}
.ul-building  { color: #7fba6a; border: 1px solid #3a5530; }
.ul-exploring { color: var(--accent); border: 1px solid #5a4a30; }
.ul-concept   { color: #a07aaa; border: 1px solid #4a3055; }
.ul-vision    { color: #7aaabf; border: 1px solid #2a455a; }

/* Build subline + flagship */
.bp-subline {
  font-size: 10px;
  letter-spacing: .12em;
  color: #77726a;
  margin: -12px 0 16px;
}
.bp-flagship {
  font-size: 9px;
  letter-spacing: .08em;
  color: #66615a;
  margin: 8px 0 0;
}
.bp-flagship b {
  color: var(--accent);
  font-weight: 500;
}

/* Statement alt line */
.statement-alt {
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: .14em;
  color: #55514a;
}

/* Future horizon descriptions */
.future-desc {
  font-size: 9px;
  color: #55514a;
  line-height: 1.6;
  margin: 8px 0 0;
  letter-spacing: .04em;
}

/* Status-list right column with description */
.status-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 4px;
}
.status-right p {
  font-size: 9px;
  color: #55514a;
  margin: 0;
  line-height: 1.5;
  letter-spacing: .04em;
}

/* ── LEARNING SECTION ── */
.learning-section {
  padding: 150px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse at 20% 50%, #12100d, #080808 55%);
}
.learning-inner {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 80px;
  align-items: center;
}
.learning-left .section-number { display: block; margin-bottom: 20px; }
.learning-left h2 {
  font-size: clamp(34px, 4vw, 65px);
  line-height: .88;
  letter-spacing: -.055em;
  margin: 0 0 24px;
}
.learning-left p {
  font-size: 11px;
  color: #77736d;
  line-height: 1.7;
  margin: 0;
}
.learning-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.learning-tags span {
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--accent);
  border: 1px solid #3a3530;
  padding: 8px 16px;
  border-radius: 2px;
  transition: background .3s, border-color .3s;
}
.learning-tags span:hover {
  background: #1a1710;
  border-color: #6a5a40;
}
.learning-loop {
  font-size: 9px;
  letter-spacing: .18em;
  color: #55514a;
  margin: 0;
}

/* ── PHILOSOPHY SECTION ── */
.philosophy {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 150px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse at 80% 50%, #14120e, #080808 55%);
}
.philosophy-inner {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  gap: 60px;
  align-items: start;
  width: 100%;
}
.philosophy-lines p {
  font-size: clamp(16px, 2.2vw, 30px);
  letter-spacing: -.02em;
  line-height: 1.4;
  margin: 0 0 12px;
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
}
.philosophy-alt {
  padding-top: 6px;
}
.philosophy-alt p {
  font-size: 12px;
  color: #55514a;
  letter-spacing: .06em;
  line-height: 1.8;
  margin: 0 0 4px;
}

/* ── CONTACT TAGLINE ── */
.contact-tagline {
  position: absolute;
  bottom: 70px;
  left: 8vw;
  font-size: 8px;
  letter-spacing: .28em;
  color: #3d3a35;
  margin: 0;
}

/* ── RESPONSIVE ADDITIONS ── */
@media (max-width: 900px) {
  .hero-statement { font-size: 11px; max-width: 100%; }
  .learning-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .learning-left, .learning-right { text-align: center; }
  .learning-tags { justify-content: center; }
  .learning-section { padding: 60px 20px; }
  .philosophy { padding: 60px 20px; min-height: auto; }
  .philosophy-inner { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .philosophy-inner .section-number { display: none; }
  .philosophy-lines p { font-size: clamp(18px, 5vw, 26px); text-align: center; }
  .philosophy-alt { text-align: center; }
  .social-strip { padding: 40px 20px 50px; }
  .social-strip__links { gap: 20px; }
  .social-strip__sep { display: none; }
}

/* ═══════════════════════════════════════════
   SOCIAL STRIP
═══════════════════════════════════════════ */
.social-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 80px var(--gutter) 100px;
  position: relative;
  overflow: hidden;
}
.social-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, #1a1610 0%, transparent 70%);
  pointer-events: none;
}
.social-strip__label {
  font-size: 8px;
  letter-spacing: .35em;
  color: #3a3730;
  font-weight: 600;
}
.social-strip__links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.social-strip__sep {
  font-size: 20px;
  color: #2a2825;
  line-height: 1;
  margin: 0 4px;
  user-select: none;
}
.social-strip__line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--line), transparent);
  margin-top: 8px;
}

/* Individual social link button */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid #2a2723;
  border-radius: 3px;
  background: rgba(255,255,255,.018);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #6a6560;
  text-decoration: none;
  font-size: 8.5px;
  letter-spacing: .22em;
  font-weight: 600;
  transition:
    color .35s,
    border-color .35s,
    background .35s,
    box-shadow .35s;
  will-change: transform;
}
.social-link:hover {
  color: var(--paper);
  border-color: #4a4540;
  background: rgba(255,255,255,.045);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 8px 32px rgba(0,0,0,.55),
    0 0 24px rgba(200,170,110,.06);
}
.social-link__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.social-link__icon svg {
  width: 18px;
  height: 18px;
  transition: color .35s;
}

/* Icon-specific accent colour on hover */
.social-link[aria-label="Instagram"]:hover { color: #e1a0c0; border-color: #7a3555; box-shadow: 0 0 32px rgba(220,100,160,.1), 0 8px 24px rgba(0,0,0,.5); }
.social-link[aria-label="LinkedIn"]:hover  { color: #7aaacf; border-color: #2a5580; box-shadow: 0 0 32px rgba(80,140,200,.1), 0 8px 24px rgba(0,0,0,.5); }
.social-link[aria-label="Website"]:hover   { color: #c8b87a; border-color: #6a5a30; box-shadow: 0 0 32px rgba(200,180,100,.08), 0 8px 24px rgba(0,0,0,.5); }

.social-link__name {
  letter-spacing: .2em;
}

/* ═══════════════════════════════════════════
   TIMELINE — HI-TECH ACTIVE STATE
═══════════════════════════════════════════ */

/* Active dot: double-ring pulse */
.timeline-item .dot { position: relative; }
.timeline-item.active .dot {
  background: var(--accent);
  box-shadow:
    0 0 0 3px rgba(185,160,122,.18),
    0 0 12px rgba(185,160,122,.35);
}
.timeline-item.active .dot::before,
.timeline-item.active .dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: tl-pulse 2.4s ease-out infinite;
}
.timeline-item.active .dot::after {
  animation-delay: 1.2s;
}
@keyframes tl-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(3.2); opacity: 0;   }
}

/* Active year glow */
.timeline-item .year {
  transition: color .45s ease, opacity .45s ease;
}
.timeline-item.active .year {
  color: var(--paper);
  text-shadow: 0 0 18px rgba(185,160,122,.3);
}

/* Active event text — always visible, no collapse */
.timeline-item .event p {
  transition: opacity .45s ease;
}
.timeline-item.active .event p { opacity: .72; }
.timeline-item.active .event h3 { color: var(--paper); }
.timeline-item.active .event small { opacity: 1; }

/* Media panel hi-tech scan line overlay */
.timeline-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,.08) 3px,
    rgba(0,0,0,.08) 4px
  );
  pointer-events: none;
  z-index: 3;
}
.timeline-media::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(185,160,122,.6), transparent);
  z-index: 4;
  animation: media-scan 4s linear infinite;
  pointer-events: none;
}
@keyframes media-scan {
  0%   { top: -2px; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Corner brackets on media panel */
.timeline-media .media-bracket {
  position: absolute;
  width: 22px; height: 22px;
  z-index: 5;
  pointer-events: none;
}
.timeline-media .media-bracket--tl { top: 8px;  left: 8px;  border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.timeline-media .media-bracket--tr { top: 8px;  right: 8px; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.timeline-media .media-bracket--bl { bottom: 8px; left: 8px;  border-bottom: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.timeline-media .media-bracket--br { bottom: 8px; right: 8px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }

/* ── MOBILE TIMELINE OVERHAUL ── */
@media (max-width: 900px) {
  /* Stack: image first (centered), then items below */
  .timeline-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 20px 80px;
    min-height: auto;
  }
  .timeline-intro {
    position: relative;
    top: auto;
    height: auto;
    width: 100%;
    margin-bottom: 48px;
    text-align: center;
  }
  .timeline-intro h2 { font-size: clamp(38px, 10vw, 64px); }
  .timeline-legend { display: flex; justify-content: center; gap: 18px; margin-top: 24px; }

  /* Media panel: sits between intro and items, centered, sticky-like */
  .timeline-media {
    position: sticky;
    top: 72px;
    width: min(88vw, 460px);
    aspect-ratio: 4 / 3;
    max-height: 40vh;
    margin: 0 auto 56px;
    border-radius: 4px;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
  }

  /* Timeline spine: centered */
  .timeline {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  .timeline-line {
    left: 56px;
  }
  .timeline-item {
    grid-template-columns: 48px 40px 1fr;
    min-height: 90px;
    opacity: .3;
  }
  .timeline-item.active {
    opacity: 1;
    transform: translateX(4px);
  }
  .timeline-item .year { font-size: 9px; text-align: right; }
  .timeline-items { gap: 56px; }
}


/* ═══════════════════════════════════════════
   SYSTEM SIGNAL HUD — FUTURISTIC FLOATING PANEL
═══════════════════════════════════════════ */
.system-hud {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 240px;
  background: rgba(8, 8, 8, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(185, 160, 122, 0.18);
  border-radius: 4px;
  padding: 18px 18px 14px;
  z-index: 999;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  font-family: var(--font-main);
  box-shadow:
    0 0 0 1px rgba(185,160,122,0.08),
    0 20px 60px rgba(0,0,0,0.6),
    0 0 40px rgba(185,160,122,0.05);
}
.system-hud.hud--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}
.system-hud.hud--exit {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
}
.hud-bracket {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
}
.hud-bracket--tl { top: -1px; left: -1px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.hud-bracket--br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.hud-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hud-diamond { font-size: 12px; color: var(--accent); line-height: 1; }
.hud-title { font-size: 9px; font-weight: 700; letter-spacing: 0.22em; color: #c4bfa5; flex: 1; }
.hud-live {
  font-size: 7px; letter-spacing: 0.22em; font-weight: 700; color: #7fba6a;
  padding: 2px 6px; border: 1px solid rgba(127,186,106,0.35); border-radius: 2px;
  animation: hud-blink 1.6s ease-in-out infinite;
}
@keyframes hud-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.hud-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0;
}
.hud-row + .hud-row { border-top: 1px solid rgba(255,255,255,0.04); }
.hud-label { font-size: 7.5px; letter-spacing: 0.2em; color: #4a4640; font-weight: 700; }
.hud-val { font-size: 8px; letter-spacing: 0.12em; color: #8a857e; font-weight: 600; }
.hud-strong { color: #7fba6a; }
.hud-bar {
  flex: 1; height: 3px; background: rgba(255,255,255,0.06);
  border-radius: 2px; overflow: hidden; margin: 0 8px; max-width: 80px;
}
.hud-fill {
  display: block; height: 100%; width: 74%;
  background: linear-gradient(90deg, var(--accent), #d4ba8a);
  border-radius: 2px; animation: hud-load 3s ease infinite;
}
@keyframes hud-load { 0%, 100% { width: 74%; } 50% { width: 78%; } }
.hud-bottom { margin-top: 4px; padding-top: 8px !important; border-top: 1px solid rgba(255,255,255,0.06) !important; }
.hud-dismiss {
  position: absolute; top: 8px; right: 10px; background: none; border: none;
  color: #3a3631; font-size: 10px; cursor: pointer; padding: 4px; line-height: 1;
  transition: color 0.2s; font-family: var(--font-main);
}
.hud-dismiss:hover { color: #888; }
@media (max-width: 900px) {
  .system-hud { display: none !important; }
}


/* ═══════════════════════════════════════════
   BODY / PARAGRAPH TEXT — ROBOTO
═══════════════════════════════════════════ */
.bp-desc,
.future-bar__desc,
p:not(.hero-role):not(.hero-meta):not(.bp-subline):not(.section-head p):not(.contact-tagline),
.system-card p,
.cap-desc,
.skills-body {
  font-family: var(--font-body) !important;
  font-weight: 400;
}
/* Keep nav, headings, labels in Orbitron */
h1, h2, h3, h4, h5,
.nav nav a, .brand, .bp-tag, .bp-index,
.bp-brand-name, .build-meta, .bp-status-bar,
.future-bar__time, .future-bar__word,
.section-head span, .section-head h2 {
  font-family: var(--font-main);
}


/* ═══════════════════════════════════════════
   HAMBURGER BUTTON
═══════════════════════════════════════════ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: 16px;
  z-index: 200;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--paper);
  transition: transform 0.35s ease, opacity 0.25s ease, width 0.3s ease;
  transform-origin: center;
}
/* Open state */
.nav-hamburger.is-open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-hamburger.is-open span:nth-child(2) {
  opacity: 0;
  width: 0;
}
.nav-hamburger.is-open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ═══════════════════════════════════════════
   MOBILE DRAWER
═══════════════════════════════════════════ */
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(6, 6, 5, 0.97);
  backdrop-filter: blur(12px);
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.mobile-drawer.drawer--open {
  opacity: 1;
  pointer-events: all;
}
.mobile-link {
  font-family: var(--font-main);
  font-size: clamp(24px, 8vw, 44px);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #3a3631;
  text-decoration: none;
  padding: 14px 32px;
  display: block;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 0.2s ease, background 0.2s ease;
  transform: translateY(30px);
  opacity: 0;
  transition: color 0.2s, background 0.2s, transform 0.4s ease, opacity 0.4s ease;
}
.mobile-drawer.drawer--open .mobile-link {
  transform: translateY(0);
  opacity: 1;
}
.mobile-drawer.drawer--open .mobile-link:nth-child(1) { transition-delay: 0.05s; }
.mobile-drawer.drawer--open .mobile-link:nth-child(2) { transition-delay: 0.10s; }
.mobile-drawer.drawer--open .mobile-link:nth-child(3) { transition-delay: 0.15s; }
.mobile-drawer.drawer--open .mobile-link:nth-child(4) { transition-delay: 0.20s; }
.mobile-drawer.drawer--open .mobile-link:nth-child(5) { transition-delay: 0.25s; }
.mobile-link:hover, .mobile-link:focus {
  color: var(--paper);
  background: rgba(185,160,122,0.05);
}


/* ═══════════════════════════════════════════
   ECOSYSTEM SECTION — THEME BLEND
═══════════════════════════════════════════ */
/* Darker ring strokes to match bg */
.orbit-ring  { stroke: rgba(185,160,122,0.1); }
.orbit-line  { stroke: rgba(185,160,122,0.08); }
.orbit-node-dot { fill: rgba(185,160,122,0.5); }

/* Core circle refined */
.orbit-core {
  background: #080808;
  border-color: rgba(185,160,122,0.3);
  box-shadow: 0 0 40px rgba(185,160,122,0.06);
}

/* Eco node labels */
.eco-node__label {
  font-family: var(--font-main);
  color: #8a857e;
}
.eco-node__name {
  font-family: var(--font-main);
  color: var(--paper);
}
.eco-node:hover .eco-node__name {
  color: var(--accent);
}

/* Radial gradient background that matches site */
.universe-orbit-wrap {
  background: radial-gradient(ellipse at 50% 50%, #0f0e0c 0%, #080808 70%);
}


/* ═══════════════════════════════════════════
   MOBILE TWEAKS FOR SMALL PHONES (≤ 600px)
═══════════════════════════════════════════ */
@media (max-width: 600px) {
  :root { --gutter: 16px; }

  /* Hero */
  .hero-copy h1 { font-size: clamp(34px, 12vw, 54px); }
  .hero-role { font-size: 8px; }
  .enter { font-size: 8px; padding: 10px 18px; }

  /* Builds Collage height on small phones */
  .bp-collage,
  .build-panel.build-panel--reverse .bp-collage,
  .build-panel:nth-child(even) .bp-collage {
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
  }
  .bp-collage--foraaai,
  .bp-collage--full {
    height: 190px !important;
    min-height: 190px !important;
  }
  .bp-content { padding: 22px 18px 26px !important; }
  .bp-brand-name { font-size: clamp(22px, 6.5vw, 30px) !important; line-height: 1.12 !important; }
  .bp-subline { font-size: 9.5px !important; line-height: 1.4 !important; }
  .bp-desc { font-size: 12px !important; line-height: 1.6 !important; margin-bottom: 16px !important; }

  /* What Comes Next (Future) */
  .future-bar__desc { font-size: 11px; }

  /* Capability tags */
  .cap-tags span { font-size: 8.5px; padding: 4px 8px; }

  /* Ecosystem wrap */
  .universe-orbit-wrap { 
    height: 420px; 
    min-height: 420px;
    margin: 0 -20px; /* pull out to edges to give more space */
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS FOR HAMBURGER & TEXT
═══════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Dynamic resize for hamburger menu */
  .nav-hamburger {
    position: absolute !important;
    right: 20px !important;
    width: clamp(38px, 8vw, 48px) !important;
    height: clamp(38px, 8vw, 48px) !important;
  }
  .nav-hamburger span {
    width: clamp(22px, 5vw, 28px) !important;
    height: clamp(1.5px, 0.4vw, 2.5px) !important;
  }
  .nav-hamburger.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }
  .nav-hamburger.is-open span:nth-child(2) {
    opacity: 0 !important;
    width: 0 !important;
  }
  .nav-hamburger.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }
  
  /* Overall text dynamic resize for mobile */
  html, body {
    font-size: clamp(14px, 3.5vw, 18px);
  }
  p, .bp-desc {
    font-size: clamp(13px, 3.2vw, 16px) !important;
    line-height: 1.6 !important;
  }
}