/* ==========================================================================
   BABA REAL ESTATE & DEVELOPERS
   Brand system taken directly from baba-logo-sheet.pdf
     Slate Ink   #12263A
     Brass       #C08A2E
     Lime Paper  #F7F4EE
     Wordmark    Caladea Bold   Descriptor  Carlito
   ========================================================================== */

/* ---- 0. Fonts (self-hosted) --------------------------------------------
   Caladea + Carlito, latin subsets, served from this origin. Self-hosting
   removes two third-party DNS + TLS handshakes from the critical path —
   with a render-blocking Google Fonts <link> nothing could paint until
   fonts.googleapis.com answered.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Caladea';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caladea-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Caladea';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/caladea-700-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Caladea';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caladea-400i-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/carlito-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/carlito-700-latin.woff2') format('woff2');
}

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  /* brand */
  --ink:          #12263A;
  --brass:        #C08A2E;
  --paper:        #F7F4EE;

  /* extended ink range */
  --ink-900:      #070F19;
  --ink-800:      #0B1826;
  --ink-700:      #0E1F33;
  --ink-600:      #12263A;
  --ink-500:      #1B3552;
  --ink-400:      #2A4A6E;

  /* extended brass range */
  --brass-700:    #8A6015;
  --brass-600:    #9E6F20;
  --brass-500:    #C08A2E;
  --brass-400:    #D8A64E;
  --brass-200:    #E9CD93;

  /* Brass for SMALL TYPE ON PAPER. The brand pairing (Brass #C08A2E on Lime
     Paper #F7F4EE) is only 2.77:1 — fine for the mark and for rules, too low
     for label copy people actually have to read. This deeper brass gives
     5.08:1 and still reads as brass. On ink, --brass-500 is 5.07:1 and is used
     unchanged. To go back to the literal brand colour everywhere, point this
     at var(--brass-500). */
  --brass-ink:    var(--brass-700);

  /* paper range */
  --paper-100:    #FFFFFF;
  --paper-200:    #F7F4EE;
  --paper-300:    #EFE9DD;
  --paper-400:    #E2D9C7;

  /* semantic */
  --bg:           var(--paper-200);
  --fg:           var(--ink-600);
  --rule:         rgba(18, 38, 58, .14);
  --rule-brass:   rgba(192, 138, 46, .32);

  /* type */
  --font-display: 'Caladea', Georgia, 'Times New Roman', serif;
  --font-ui:      'Carlito', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(1rem, .96rem + .18vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + .38vw, 1.45rem);
  --step-2:  clamp(1.55rem, 1.38rem + .82vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.1rem);
  --step-4:  clamp(2.5rem, 1.75rem + 3.4vw, 4.6rem);
  --step-5:  clamp(3rem, 1.7rem + 5.6vw, 6.5rem);

  /* layout */
  --shell:      min(1280px, 100% - 2 * var(--gutter));
  --shell-wide: min(1560px, 100% - 2 * var(--gutter));
  --gutter:     clamp(1.15rem, 4vw, 3.75rem);
  --section-y:  clamp(4.5rem, 9vw, 9.5rem);
  --header-h:   84px;

  --ease:       cubic-bezier(.22, .61, .36, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
}

/* ---- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
/* the width/height attributes map to presentational width/height hints —
   without this, `aspect-ratio` on an <img> is ignored (both sides definite) */
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
}

::selection { background: var(--brass); color: var(--paper-200); }

:focus-visible {
  outline: 2px solid var(--brass-400);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- 3. Primitives ------------------------------------------------------ */
.shell      { width: var(--shell); margin-inline: auto; }
.shell-wide { width: var(--shell-wide); margin-inline: auto; }
.section    { padding-block: var(--section-y); position: relative; }

/* NOTE: `content-visibility: auto` was tried here and removed deliberately.
   It relies on the browser deciding a section is "relevant to the user",
   which needs a running rendering lifecycle. Inside embedded webviews and
   preview panes that lifecycle can stall, and skipped sections then never
   render at all — blank bands, and heights frozen at their estimate so the
   page stops reflowing on resize. The saving was small; the failure was not.

   Long-running decorative animations are paused while off-screen so they
   stop occupying the compositor (and the battery). */
.ticker.is-idle .ticker__track,
.iband__seal.is-idle::after { animation-play-state: paused; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brass-ink);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: .85rem;
}
/* on the ink fields the literal brand brass already clears AA (5.07:1) */
.on-ink .eyebrow,
.vision .eyebrow,
.why .eyebrow,
.iband .eyebrow,
.hero .eyebrow { color: var(--brass-500); }
.eyebrow::before {
  content: "";
  width: clamp(24px, 4vw, 52px);
  height: 1px;
  background: currentColor;
  flex: none;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  max-width: 58ch;
  /* Softens whatever colour the section sets, instead of hard-coding Slate Ink.
     Hard-coding made this invisible on the dark sections (.vision, .why,
     .iband) — they set a light `color`, but this rule overrode the inheritance
     and painted ink-on-ink at 1.3:1. currentColor resolves to the inherited
     colour, so it now follows the section it sits in. */
  color: inherit;
  color: color-mix(in srgb, currentColor 78%, transparent);
}

.script {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brass-400);
}

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* on-ink surfaces */
.on-ink { background: var(--ink-600); color: var(--paper-200); }
.on-ink h1, .on-ink h2, .on-ink h3 { color: var(--paper-200); }
.on-ink .lede { color: rgba(247, 244, 238, .72); }
.on-ink .rule { background: rgba(247, 244, 238, .13); }

/* ---- 4. Buttons --------------------------------------------------------- */
.btn {
  --btn-fg: var(--paper-200);
  --btn-bg: var(--ink-600);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1.02rem 1.9rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease), transform .3s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brass-500);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
  z-index: -1;
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:hover { color: var(--ink-900); border-color: var(--brass-500); }
.btn:active { transform: translateY(1px); }
.btn .arw { transition: transform .35s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.btn--brass { --btn-bg: var(--brass-500); --btn-fg: var(--ink-900); }
.btn--brass::after { background: var(--paper-200); }
.btn--brass:hover { color: var(--ink-900); border-color: var(--paper-200); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  border-color: currentColor;
}
.btn--ghost::after { background: var(--brass-500); }

/* text link with sliding underline */
.link-u {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--brass-500);
  padding-bottom: .35rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .45s var(--ease-out), color .3s var(--ease);
}
.link-u:hover { background-size: 0% 1px; }

/* ---- 5. Logo lockup ----------------------------------------------------- */
.lockup { display: inline-flex; align-items: center; gap: .82rem; }
.lockup__mark { width: 46px; height: 46px; flex: none; }
.lockup__mark rect.badge { fill: var(--badge, var(--ink-600)); transition: fill .4s var(--ease); }
.lockup__mark path, .lockup__mark rect.plot { fill: var(--brass-500); }
.lockup__type { display: grid; gap: .18rem; line-height: 1; }
.lockup__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.38rem;
  letter-spacing: .06em;
  color: var(--word, var(--ink-600));
  transition: color .4s var(--ease);
}
.lockup__desc {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .565rem;
  letter-spacing: .215em;
  text-transform: uppercase;
  color: var(--brass-500);
  white-space: nowrap;
}
.lockup--sm .lockup__mark { width: 36px; height: 36px; }
.lockup--sm .lockup__word { font-size: 1.1rem; }
.lockup--sm .lockup__desc { font-size: .49rem; }
.lockup--lg .lockup__mark { width: 70px; height: 70px; }
.lockup--lg .lockup__word { font-size: 2.1rem; }
.lockup--lg .lockup__desc { font-size: .78rem; }

/* ---- 6. Header ---------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background .5s var(--ease), height .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.header__in {
  width: var(--shell-wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.header--over { --badge: var(--paper-200); --word: var(--paper-200); }
.header--over .nav__link { color: rgba(247, 244, 238, .82); }

.header.is-stuck {
  height: 70px;
  background: rgba(247, 244, 238, .93);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--rule);
  --badge: var(--ink-600);
  --word: var(--ink-600);
}
/* backdrop-filter repaints a blurred layer on every scroll frame — costly on
   phone GPUs. Below tablet, fall back to an opaque bar. */
@media (max-width: 900px) {
  .header.is-stuck {
    background: var(--paper-200);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.header.is-stuck .nav__link { color: var(--ink-600); }
/* the descriptor sits on paper once the bar turns light */
.header.is-stuck .lockup__desc { color: var(--brass-ink); }

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.4rem); }
.nav__link {
  position: relative;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding: .45rem 0;
  transition: color .35s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass-500);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__link:hover, .nav__link.is-active { color: var(--brass-500) !important; }

.nav__link--invest {
  color: var(--brass-500) !important;
  padding: .55rem 1.1rem;
  border: 1px solid var(--rule-brass);
  border-radius: 2px;
}
.nav__link--invest::after { display: none; }
.nav__link--invest:hover { background: var(--brass-500); color: var(--ink-900) !important; }

.header__cta { display: inline-flex; }

/* burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid currentColor; border-radius: 2px;
  cursor: pointer;
  /* Must be set explicitly. `color: inherit` picked up Slate Ink from <body>,
     which rendered the button at ~1.1:1 against the dark hero — invisible,
     and below 900px this is the only navigation control on the page. */
  color: var(--ink-600);
  transition: color .4s var(--ease);
}
.header--over .burger { color: var(--paper-200); }
.header.is-stuck .burger { color: var(--ink-600); }
.burger span {
  display: block; position: relative;
  width: 18px; height: 1.5px; background: currentColor;
  transition: background .25s var(--ease);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 1.5px; background: currentColor;
  transition: transform .35s var(--ease-out);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: var(--ink-800);
  display: grid;
  align-content: center;
  /* `safe` keeps the top reachable when the menu is taller than the screen
     (short landscape phones) — plain `center` would clip it out of scroll range */
  align-content: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6rem var(--gutter) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .65s var(--ease-out);
  pointer-events: none;
}
.drawer.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; }
.drawer__list { display: grid; gap: .2rem; }
.drawer__link {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(247, 244, 238, .1);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 8vw, 2.6rem);
  color: var(--paper-200);
}
.drawer__link i {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--brass-500);
}
.drawer__foot { margin-top: 2.6rem; display: grid; gap: 1rem; justify-items: start; }

/* short viewports (landscape phones, small tablets): tighten so the menu
   fits without needing to scroll */
@media (max-height: 780px) {
  .drawer { padding-top: 5rem; padding-bottom: 2rem; }
  .drawer__link { padding: .62rem 0; font-size: clamp(1.5rem, 6.2vw, 2.15rem); }
  .drawer__foot { margin-top: 1.8rem; }
}

/* ---- 7. Hero ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100vh;   /* fallback: some embedded webviews don't support svh */
  min-height: 100svh;
  display: grid;
  align-items: end;
  background: var(--ink-800);
  color: var(--paper-200);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg svg { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 85% at 78% 12%, rgba(192,138,46,.20), transparent 58%),
    linear-gradient(180deg, rgba(7,15,25,.72) 0%, rgba(7,15,25,.25) 42%, rgba(7,15,25,.92) 100%);
}
.hero__in {
  width: var(--shell-wide);
  margin-inline: auto;
  padding-block: clamp(6rem, 14vh, 9rem) clamp(3.5rem, 9vh, 6rem);
}
.hero h1 {
  font-size: var(--step-5);
  max-width: 15ch;
  margin-bottom: 1.6rem;
}
.hero h1 em { font-style: italic; color: var(--brass-400); }
.hero__sub { max-width: 46ch; color: rgba(247,244,238,.78); font-size: var(--step-1); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2rem, 6vh, 4rem);
  display: grid;
  justify-items: center;
  gap: .9rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(247,244,238,.55);
}
.hero__scroll i { display: block; width: 1px; height: 56px; background: rgba(247,244,238,.24); position: relative; overflow: hidden; }
.hero__scroll i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--brass-500);
  animation: scrollcue 2.4s var(--ease) infinite;
}
@keyframes scrollcue { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

/* hero marquee strip */
.ticker {
  border-block: 1px solid rgba(247,244,238,.12);
  /* Opaque. This was rgba(7,15,25,.55), which overrode the .on-ink background
     and then composited over the *paper* page behind it — the band rendered
     grey (115,118,121) with 2.6:1 label text, instead of continuing the dark
     field from the hero. */
  background: var(--ink-900);
  overflow: hidden;
  padding-block: .95rem;
}
.ticker__track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: ticker 34s linear infinite;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247,244,238,.62);
}
.ticker__track span { display: inline-flex; align-items: center; gap: 3.5rem; }
.ticker__track span::after { content: "◆"; color: var(--brass-500); font-size: .55em; letter-spacing: 0; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---- 8. Statement / pillars -------------------------------------------- */
.statement { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.statement__head h2 { font-size: var(--step-4); max-width: 16ch; }
.statement__body { display: grid; gap: 1.6rem; max-width: 62ch; }

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  border-top: 1px solid var(--rule);
}
.pillar {
  padding: 2.3rem 1.6rem 2.3rem 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.pillar + .pillar { padding-left: clamp(1.2rem, 2.6vw, 2.4rem); }
.pillar + .pillar::before {
  content: "";
  position: absolute; left: 0; top: 2.3rem; bottom: 2.3rem;
  width: 1px; background: var(--rule);
}
.pillar h3 { font-size: var(--step-2); margin-bottom: .4rem; }
.pillar p {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-ink);
}

/* ---- 9. Vision ---------------------------------------------------------- */
.vision { background: var(--ink-600); color: var(--paper-200); position: relative; overflow: hidden; }
.vision::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 12% 0%, rgba(192,138,46,.16), transparent 62%),
    radial-gradient(60% 60% at 100% 100%, rgba(42,74,110,.5), transparent 60%);
  pointer-events: none;
}
.vision > * { position: relative; }

.vision__top {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: end;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.vision__top h2 { font-size: var(--step-4); max-width: 14ch; }
.vision__top h2 .script { display: block; }

.vision__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  background: rgba(247,244,238,.13);
  border: 1px solid rgba(247,244,238,.13);
}
.vcard {
  background: var(--ink-600);
  padding: clamp(1.8rem, 3vw, 2.9rem);
  display: grid;
  gap: .85rem;
  align-content: start;
  position: relative;
  transition: background .5s var(--ease);
}
.vcard::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--brass-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.vcard:hover { background: var(--ink-700); }
.vcard:hover::after { transform: scaleX(1); }
.vcard__n {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--brass-500);
  line-height: 1;
}
.vcard h3 { font-size: var(--step-1); }
.vcard p { margin: 0; color: rgba(247,244,238,.66); font-size: .95rem; }

/* ---- 9b. Founder -------------------------------------------------------- */
.founder {
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid rgba(247, 244, 238, .13);
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.founder__portrait { margin: 0; display: grid; gap: 1.1rem; }
.founder__portrait img {
  width: 100%;
  /* matches the source photograph's 3:4 frame, so object-fit never crops it */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--rule-brass);
  border-radius: 3px;
  background: var(--ink-800);
}
.founder__portrait figcaption { display: grid; gap: .25rem; }
.founder__portrait strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  color: var(--paper-200);
  line-height: 1.1;
}
.founder__portrait span {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass-500);
}

.founder__letter { display: grid; gap: 1.6rem; align-content: start; }

.founder__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--brass-400);
  text-wrap: balance;
  max-width: 20ch;
}

.founder__body { display: grid; gap: 1.15rem; max-width: 62ch; }
.founder__body p { margin: 0; color: rgba(247, 244, 238, .74); }
.founder__body p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 3.1em;
  font-weight: 700;
  line-height: .82;
  float: left;
  padding: .06em .14em 0 0;
  color: var(--brass-500);
}

.founder__principles { display: flex; flex-wrap: wrap; gap: .55rem; }
.founder__principles span {
  padding: .5rem 1.05rem;
  border: 1px solid var(--rule-brass);
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, .78);
}

.founder__sign {
  display: grid;
  gap: .3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(247, 244, 238, .13);
}
.founder__signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1;
  color: var(--paper-200);
}
.founder__role {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass-500);
}

/* ---- 10. Gallery -------------------------------------------------------- */
.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.gallery__head h2 { font-size: var(--step-4); max-width: 15ch; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter {
  padding: .58rem 1.15rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  transition: all .35s var(--ease);
}
.filter:hover { border-color: var(--brass-500); color: var(--brass-ink); }
.filter.is-active { background: var(--ink-600); border-color: var(--ink-600); color: var(--paper-200); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  /* uniform row height keeps every tile full-bleed — wide tiles are wider, never taller */
  grid-auto-rows: clamp(280px, 25vw, 400px);
  gap: clamp(.9rem, 1.6vw, 1.5rem);
}
.card {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 3px;
  overflow: hidden;
  background: var(--ink-700);
  cursor: pointer;
  border: 0;
  padding: 0;
  text-align: left;
  color: var(--paper-200);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.card--wide { grid-column: span 2; }
.card--full { grid-column: 1 / -1; }
.card__media { position: absolute; inset: 0; overflow: hidden; }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter .6s var(--ease);
}
.card:hover .card__media img { transform: scale(1.06); }
.card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,15,25,.05) 25%, rgba(7,15,25,.86) 100%);
}
.card__body {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  display: grid; gap: .35rem;
}
.card__tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass-400);
}
.card__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.12; }
.card__meta {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(247,244,238,.62);
  display: flex; flex-wrap: wrap; gap: .35rem .9rem;
}
.card__plus {
  position: absolute; top: 1rem; right: 1rem;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(247,244,238,.35);
  border-radius: 50%;
  color: var(--paper-200);
  opacity: 0; transform: scale(.8);
  transition: opacity .4s var(--ease), transform .4s var(--ease-out), background .3s var(--ease);
}
.card:hover .card__plus { opacity: 1; transform: scale(1); }
.card:hover .card__plus { background: var(--brass-500); border-color: var(--brass-500); color: var(--ink-900); }
.card.is-hidden { display: none; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(7,15,25,.94);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__fig { max-width: 1100px; width: 100%; display: grid; gap: 1.2rem; }
.lightbox__fig img { width: 100%; border-radius: 3px; }
.lightbox__cap { color: var(--paper-200); display: grid; gap: .3rem; }
.lightbox__cap strong { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); }
.lightbox__cap span { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-400); }
.lightbox__x {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 46px; height: 46px; border-radius: 50%;
  background: none; border: 1px solid rgba(247,244,238,.3);
  color: var(--paper-200); cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.lightbox__x:hover { background: var(--brass-500); color: var(--ink-900); border-color: var(--brass-500); }

/* ---- 11. Why us --------------------------------------------------------- */
.why { background: var(--ink-800); color: var(--paper-200); }
.why__head { display: grid; gap: 1.4rem; max-width: 60ch; margin-bottom: clamp(2.6rem, 5vw, 4.2rem); }
.why__head h2 { font-size: var(--step-4); }

.why__list { border-top: 1px solid rgba(247,244,238,.13); }
.whyrow {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: start;
  padding: clamp(1.7rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid rgba(247,244,238,.13);
  position: relative;
  transition: padding-left .5s var(--ease-out);
}
.whyrow::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--brass-500);
  transform: scaleY(0); transform-origin: top;
  transition: transform .55s var(--ease-out);
}
.whyrow:hover { padding-left: 1.4rem; }
.whyrow:hover::before { transform: scaleY(1); }
.whyrow__n {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--brass-500);
  line-height: 1;
}
.whyrow h3 { font-size: var(--step-2); }
.whyrow p { margin: 0; color: rgba(247,244,238,.68); }

.assure {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  background: rgba(247,244,238,.13);
  border: 1px solid rgba(247,244,238,.13);
}
.assure__item {
  background: var(--ink-800);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: grid; gap: .45rem;
}
.assure__n {
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--paper-200);
  line-height: 1;
}
.assure__n b { color: var(--brass-500); font-weight: 400; }
.assure__item span {
  font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(247,244,238,.6);
}

/* ---- 12. Investor band -------------------------------------------------- */
.iband {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--ink-900) 0%, var(--ink-600) 45%, var(--ink-700) 100%);
  color: var(--paper-200);
  isolation: isolate;
}
.iband::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(192,138,46,.055) 38px 39px),
    radial-gradient(65% 120% at 88% 50%, rgba(192,138,46,.22), transparent 62%);
}
.iband__in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.iband h2 { font-size: var(--step-4); max-width: 16ch; margin-bottom: 1.3rem; }
.iband__seal {
  justify-self: center;
  width: min(280px, 70vw);
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule-brass);
  position: relative;
}
.iband__seal::before, .iband__seal::after {
  content: ""; position: absolute; border-radius: 50%; border: 1px solid var(--rule-brass);
}
.iband__seal::before { inset: 16px; }
.iband__seal::after  { inset: 34px; border-style: dashed; animation: spin 44s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.iband__seal div { text-align: center; display: grid; gap: .3rem; }
.iband__seal strong {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-3); color: var(--brass-400); line-height: 1;
}
.iband__seal span {
  font-size: .6rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(247,244,238,.6);
}

/* ---- 13. Contact -------------------------------------------------------- */
.contact { background: var(--paper-300); }
.contact__in {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2.4rem, 5vw, 5rem);
}
.contact h2 { font-size: var(--step-4); max-width: 12ch; margin-bottom: 1.2rem; }
.contact__detail { display: grid; gap: 1.5rem; margin-top: 2.4rem; }
.contact__detail div { display: grid; gap: .25rem; }
.contact__detail dt {
  font-size: .66rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass-ink);
}
.contact .link-u { color: var(--brass-ink); }
.contact__detail dd { margin: 0; font-size: var(--step-1); font-family: var(--font-display); overflow-wrap: anywhere; }

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field label {
  font-size: .64rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  /* 62% measured 4.18:1 at 10px — under AA. 78% clears it. */
  color: color-mix(in srgb, var(--ink-600) 78%, transparent);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: .95rem 1rem;
  background: var(--paper-100);
  border: 1px solid var(--rule);
  border-radius: 2px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 118px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brass-500);
  box-shadow: 0 0 0 3px rgba(192,138,46,.16);
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #B4472F; }
.field__err { font-size: .72rem; color: #B4472F; display: none; }
.field.is-invalid .field__err { display: block; }
/* 60% measured 3.95:1 at 12px — under AA. 75% clears it. */
.form__note { font-size: .78rem; line-height: 1.6; color: color-mix(in srgb, var(--ink-600) 75%, transparent); }
.form__ok {
  display: none;
  padding: 1rem 1.2rem;
  border: 1px solid var(--brass-500);
  background: rgba(192,138,46,.1);
  border-radius: 2px;
  font-size: .9rem;
}
.form__ok.is-shown { display: block; }

/* ---- 14. Footer --------------------------------------------------------- */
.footer { background: var(--ink-900); color: rgba(247,244,238,.72); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
/* Narrow-first and overflow-proof. The old `minmax(0,1.3fr) repeat(auto-fit,
   minmax(140px,1fr))` could exceed its container: four 140px floors plus three
   gaps needs ~656px, more than the shell has between ~640px and ~760px wide.
   `min(100%, 150px)` makes a track floor that can never exceed the container. */
.footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 2.8rem;
  border-bottom: 1px solid rgba(247,244,238,.12);
}
@media (min-width: 901px) {
  .footer__top { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
}
.footer h4 {
  font-family: var(--font-ui);
  font-size: .66rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass-500);
  margin-bottom: 1.1rem;
}
/* long email addresses have no break opportunity and would widen the column */
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .92rem; overflow-wrap: anywhere; }
.footer a:hover { color: var(--brass-400); }
.footer__blurb { max-width: 42ch; margin: 1.4rem 0 0; font-size: .92rem; color: rgba(247,244,238,.6); }
.footer__bot {
  padding-top: 1.8rem;
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem;
  justify-content: space-between;
  font-size: .76rem; letter-spacing: .06em;
  /* .45 measured 4.21:1 at 12px — just under AA */
  color: rgba(247,244,238,.6);
}

/* ---- 15. WhatsApp FAB --------------------------------------------------- */
.wa {
  position: fixed;
  right: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 2.4vw, 2rem);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 0;
  height: 60px;
  border-radius: 999px;
  background: #25D366;
  color: #062E14;
  box-shadow: 0 10px 28px rgba(7,15,25,.34), 0 2px 6px rgba(7,15,25,.2);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease), background .3s var(--ease);
  overflow: hidden;
  max-width: 60px;
}
.wa__ico { width: 60px; height: 60px; display: grid; place-items: center; flex: none; }
.wa__ico svg { width: 30px; height: 30px; fill: currentColor; }
.wa__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
  padding-right: 1.4rem;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.wa:hover, .wa:focus-visible {
  max-width: 320px;
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(7,15,25,.4);
}
.wa:hover .wa__label, .wa:focus-visible .wa__label { opacity: 1; }
.wa::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: wapulse 2.8s var(--ease) infinite;
  pointer-events: none;
}
@keyframes wapulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ---- 16. Reveal on scroll ---------------------------------------------- */
/* Gated on .js (set by an inline script in <head>). Content must never be
   hidden by a rule that only JavaScript can undo — if the script fails, or
   the observer never delivers, the page would simply be blank. Without .js
   everything renders normally, un-animated. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-reveal="line"] { transform: none; opacity: 1; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-out); }
.js [data-reveal="line"].is-in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal="line"] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .ticker__track, .iband__seal::after, .wa::before, .hero__scroll i::after { animation: none !important; }
}

/* ---- 17. Responsive ----------------------------------------------------- */
@media (max-width: 1080px) {
  .vision__top,
  .iband__in,
  .contact__in { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; }
  .founder__portrait { max-width: 380px; }
  .whyrow { grid-template-columns: 3.6rem 1fr; }
  .whyrow p { grid-column: 2; }
  .iband__seal { display: none; }
}

@media (max-width: 900px) {
  .nav, .header__cta { display: none; }
  .burger { display: inline-flex; }
  .card--wide { grid-column: span 1; }
  /* 4 stats in an auto-fit grid land 3 + 1, leaving a dead cell. 2x2 instead. */
  .assure { grid-template-columns: 1fr 1fr; }
}

/* Very narrow (320–380px, and the narrow side panels some apps embed pages in).
   The descriptor is `white-space: nowrap`, so at ~9px + .215em tracking it is
   wide enough to push the burger past the shell. Shrink the lockup instead of
   letting the header overflow. */
@media (max-width: 400px) {
  .header__in { gap: .75rem; }
  .lockup { gap: .6rem; }
  .lockup__mark { width: 38px; height: 38px; }
  .lockup__word { font-size: 1.15rem; }
  .lockup__desc { font-size: .5rem; letter-spacing: .12em; }
}
@media (max-width: 340px) {
  .lockup__desc { display: none; }
}

@media (max-width: 640px) {
  :root { --header-h: 68px; }
  .form__row { grid-template-columns: 1fr; }
  .pillar + .pillar { padding-left: 0; }
  .pillar + .pillar::before { display: none; }
  .hero__scroll { display: none; }
  .wa { height: 54px; max-width: 54px; }
  .wa__ico { width: 54px; height: 54px; }
  .wa::before { width: 54px; height: 54px; }
}