/* HOTEL BUSINESS HUB — hoja base
   Viene del prototipo de Claude Design (Home.html). El diseño manda: aquí solo se extrae
   el CSS a un archivo compartido y se corrige la ruta de la fuente, que ahora es propia. */
@font-face {
    font-family: "Triplett";
    src: url("assets/fuentes/triplett-bold-agency.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  :root {
    --bg: #000000;
    --surface: #0D0D0D;
    --surface-2: #0D0D0D;
    --fg: #ffffff;
    --fg-72: rgba(255,255,255,0.82);
    --fg-60: rgba(255,255,255,0.72);
    --fg-40: #666666;
    --fg-20: rgba(255,255,255,0.20);
    --fg-10: rgba(255,255,255,0.10);
    --fg-06: rgba(255,255,255,0.06);
    --accent: #C9A96E;

    --display: "Triplett", "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
    --body: "Jost", "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: "Jost", "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { background: var(--bg); color: var(--fg); }
  body {
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.75;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }

  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
  .mono { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-60); }

  /* ─────── HEADER ─────── */
  .site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 22px 48px;
    display: flex; align-items: center; justify-content: space-between;
    transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease, padding .35s ease;
    border-bottom: 1px solid transparent;
  }
  .site-header.scrolled {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--fg-10);
    padding: 16px 48px;
  }
  .brand-mark { display: flex; gap: 12px; align-items: center; }
  .brand-mark svg { width: 22px; height: 26px; fill: var(--fg); display: block; }
  .brand-mark .wm { font-family: var(--display); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; }
  .brand-mark .wm small { display: block; font-family: var(--body); font-size: 9px; letter-spacing: 0.3em; color: var(--fg-40); margin-top: 5px; font-weight: 400; text-transform: uppercase; }

  nav.primary { display: flex; align-items: center; gap: 36px; }
  nav.primary a {
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--fg);
    transition: color .2s;
  }
  nav.primary a:hover, nav.primary a.active { color: var(--fg); }
  nav.primary a.active { color: var(--accent); }

  .lang {
    display: flex; align-items: center; gap: 10px; margin-left: 28px;
    padding-left: 28px; border-left: 1px solid var(--fg-20);
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  }
  .lang button { background: none; border: 0; color: var(--fg-40); font: inherit; letter-spacing: inherit; cursor: pointer; padding: 0; }
  .lang button.active { color: var(--fg); }
  .lang .sep { color: var(--fg-20); }

  .menu-toggle { display: none; background: none; border: 0; color: var(--fg); cursor: pointer; padding: 6px; }

  /* ─────── HERO ─────── */
  .hero {
    min-height: 100vh;
    padding: 180px 48px 80px;
    position: relative;
    display: flex; flex-direction: column; justify-content: center;
    max-width: 1280px; margin: 0 auto;
  }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 14px;
    color: var(--accent);
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    margin-bottom: 48px;
  }
  .hero-eyebrow .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
  .hero-eyebrow .rl { width: 48px; height: 1px; background: var(--accent); opacity: 0.5; }

  .hero h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(64px, 9.2vw, 132px);
    line-height: 0.94;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    max-width: 15ch;
  }
  .hero h1 em {
    font-family: var(--serif);
    font-weight: 300;
    font-style: italic;
    text-transform: none;
    color: var(--fg);
    letter-spacing: -0.02em;
  }

  .hero-sub {
    margin-top: 56px;
    max-width: 50ch;
    font-family: var(--body);
    font-weight: 300;
    font-size: 20px;
    line-height: 1.7;
    color: var(--fg);
    letter-spacing: 0;
  }

  .hero-foot {
    position: absolute; bottom: 48px; left: 48px; right: 48px;
    display: flex; justify-content: space-between; align-items: flex-end;
    padding-top: 32px; border-top: 1px solid var(--fg-10);
  }
  .hero-foot-meta { display: grid; grid-template-columns: repeat(3, auto); gap: 56px; }
  .hero-foot-meta dt { font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; color: var(--fg-40); text-transform: uppercase; margin-bottom: 12px; }
  .hero-foot-meta dd { font-family: var(--display); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: 0; line-height: 1.1; }

  .scroll-ind {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-40);
  }
  .scroll-ind .line { position: relative; width: 1px; height: 40px; background: var(--fg-20); overflow: hidden; }
  .scroll-ind .line::after {
    content: ""; position: absolute; top: -20px; left: 0; width: 1px; height: 20px; background: var(--fg);
    animation: scrollDrop 2.2s infinite cubic-bezier(.7,0,.3,1);
  }
  @keyframes scrollDrop {
    0% { top: -20px; } 60% { top: 40px; } 100% { top: 40px; }
  }

  /* ─────── SECTIONS ─────── */
  section.band { padding: 140px 0; position: relative; }
  .section-label {
    display: flex; align-items: center; gap: 16px;
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-60);
    margin-bottom: 72px;
  }
  .section-label .idx { color: var(--accent); }
  .section-label .tick { width: 32px; height: 1px; background: var(--fg-20); }

  /* ─────── PORTFOLIO ─────── */
  .portfolio {
    padding: 140px 48px;
    max-width: 1280px;
    margin: 0 auto;
  }
  .portfolio-head {
    display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end;
    margin-bottom: 120px;
  }
  .portfolio-head h2 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(44px, 5vw, 72px);
    line-height: 0.98; letter-spacing: -0.005em; text-transform: uppercase;
    max-width: 14ch;
  }
  .portfolio-head h2 em {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    text-transform: none; letter-spacing: -0.01em; color: var(--fg);
  }
  .portfolio-head .meta {
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-40);
    text-align: right; line-height: 1.9;
  }
  .portfolio-head .meta b { color: var(--fg); font-weight: 400; }

  /* Gallery wall — logos as protagonists */
  .logo-field {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--fg-10);
    border: 1px solid var(--fg-10);
    position: relative;
  }
  .logo-item {
    display: flex; flex-direction: column; justify-content: space-between;
    background: var(--bg);
    min-height: 360px;
    padding: 40px;
    cursor: pointer;
    text-align: left;
    transition: background .3s ease;
    position: relative;
  }
  .logo-item:hover { background: var(--surface); }
  .logo-item .idx {
    font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.28em;
    color: var(--fg-40); text-transform: uppercase;
  }
  .logo-item .idx b { color: var(--accent); font-weight: 400; }
  .logo-item .lock {
    flex: 1;
    display: flex; flex-direction: column; justify-content: center;
    margin: 32px 0;
  }
  .logo-item .lg {
    font-family: var(--display); font-weight: 700;
    color: var(--fg);
    text-transform: uppercase;
    font-size: clamp(40px, 4.2vw, 56px);
    line-height: 0.92; letter-spacing: -0.005em;
    transition: color .3s ease;
  }
  .logo-item:hover .lg { color: var(--accent); }
  .logo-item .foot {
    display: flex; justify-content: space-between; align-items: flex-end;
    padding-top: 24px; border-top: 1px solid var(--fg-10);
  }
  .logo-item .co {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 17px; color: var(--fg);
    letter-spacing: 0; line-height: 1.3;
  }
  .logo-item .sec {
    font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg-40);
    text-align: right; margin-left: 24px; flex-shrink: 0;
    line-height: 1.6;
  }
  .logo-item .arr {
    position: absolute; top: 40px; right: 40px;
    width: 16px; height: 12px; opacity: 0; transform: translateX(-6px);
    transition: opacity .3s ease, transform .3s ease;
  }
  .logo-item:hover .arr { opacity: 1; transform: translateX(0); }

  /* Coord markers — decorative */
  .coord { display: none; }

  /* ─────── USP BAND ─────── */
  .usp {
    padding: 180px 48px;
    max-width: 1280px; margin: 0 auto;
    position: relative;
  }
  .usp-inner {
    display: grid; grid-template-columns: 120px 1fr; gap: 80px; align-items: start;
  }
  .usp-index { position: sticky; top: 120px; }
  .usp-index .n { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 0.95; color: var(--accent); }
  .usp-index .t { font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; color: var(--fg-40); text-transform: uppercase; margin-top: 14px; }

  .usp-head {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start;
    padding-bottom: 64px; border-bottom: 1px solid var(--fg-10);
  }
  .usp h2 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(44px, 5.4vw, 80px);
    line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase;
    max-width: 18ch;
    text-wrap: balance;
  }
  .usp-sub {
    margin-top: 32px;
    font-family: var(--body); font-weight: 300;
    font-size: 17px; line-height: 1.7; color: var(--fg);
    max-width: 52ch;
  }
  .usp-sub em {
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: 1.12em;
    color: var(--accent);
    letter-spacing: 0;
  }
  .usp-sub em {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    color: var(--accent);
  }
  .usp h2 em {
    display: block;
    font-family: var(--serif); font-weight: 300; font-style: italic;
    font-size: 0.82em;
    text-transform: none; letter-spacing: -0.02em; color: var(--fg);
    margin-top: 8px;
  }
  .usp-lede {
    font-family: var(--body); font-weight: 300;
    font-size: 18px; line-height: 1.7; color: var(--fg);
    max-width: 42ch;
  }
  .usp-lede .accent-label {
    display: block;
    font-family: var(--body); font-weight: 400; font-size: 11px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
  }

  /* Three-step flow */
  .flow {
    display: flex; flex-direction: column; gap: 0;
    max-width: 46ch;
  }
  .flow .accent-label {
    display: block;
    font-family: var(--body); font-weight: 400; font-size: 11px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 32px;
  }
  .flow-step {
    display: grid; grid-template-columns: 56px 1fr; gap: 24px;
    padding: 24px 0;
    border-top: 1px solid var(--fg-10);
    position: relative;
  }
  .flow-step:last-child { border-bottom: 1px solid var(--fg-10); }
  .flow-step .fs-num {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 28px; line-height: 1; color: var(--accent);
    padding-top: 4px;
  }
  .flow-step .fs-body { }
  .flow-step .fs-who {
    font-family: var(--display); font-weight: 700;
    font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--fg);
    margin-bottom: 8px;
  }
  .flow-step .fs-what {
    font-family: var(--body); font-weight: 300;
    font-size: 16px; line-height: 1.55; color: var(--fg);
  }
  .flow-step .fs-what em {
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: 1.08em;
    color: var(--fg);
    letter-spacing: 0;
  }

  .usp-cta-wrap {
    margin-top: 64px;
  }
  .usp-cta-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 24px;
  }
  .usp-cta-label {
    font-family: var(--body); font-weight: 400; font-size: 11px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--accent);
  }
  .usp-cta-hint {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: 14px; color: var(--fg-40);
  }

  .usp-cta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--fg-10);
    border: 1px solid var(--fg-10);
  }
  .btn {
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px; padding: 36px 40px;
    font-family: var(--body); font-weight: 400; font-size: 12px;
    letter-spacing: 0.22em; text-transform: uppercase;
    background: var(--bg); color: var(--fg);
    border: 0; cursor: pointer; text-decoration: none;
    transition: background .25s ease, color .25s ease;
    min-height: 120px;
  }
  .btn:hover { background: var(--surface); color: var(--accent); }
  .btn .btn-label { flex: 1; line-height: 1.5; }
  .btn .btn-num {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 15px; letter-spacing: 0; text-transform: none;
    color: var(--fg-40);
  }
  .btn .arr { width: 24px; height: 12px; flex-shrink: 0; }

  /* ─────── BLOG ─────── */
  .blog {
    padding: 140px 48px;
    max-width: 1280px; margin: 0 auto;
  }
  .blog-head {
    display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end;
    margin-bottom: 96px; padding-bottom: 32px; border-bottom: 1px solid var(--fg-10);
  }
  .blog-head h2 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(44px, 5vw, 72px);
    line-height: 0.98; letter-spacing: -0.005em; text-transform: uppercase;
  }
  .blog-head h2 em {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    text-transform: none; letter-spacing: -0.01em; color: var(--fg);
  }
  .blog-head .all {
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; color: var(--fg-60); text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .blog-head .all:hover { color: var(--accent); }

  .articles {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--fg-10);
  }
  .article {
    background: var(--bg);
    padding: 0;
    display: flex; flex-direction: column;
    cursor: pointer;
    transition: background .3s ease;
    position: relative;
  }
  .article:hover { background: var(--surface); }

  .article-img {
    aspect-ratio: 16 / 10;
    background: #2a2a2a;
    margin-bottom: 32px;
  }

  .article-body {
    padding: 32px 32px 32px;
    display: flex; flex-direction: column; flex: 1;
  }
  .article-cat {
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 24px;
  }
  .article-title {
    font-family: var(--display); font-weight: 700;
    font-size: 30px; line-height: 1.05; letter-spacing: -0.005em; text-transform: uppercase;
    text-wrap: balance;
    margin-bottom: 20px;
  }
  .article-excerpt {
    font-family: var(--body); font-weight: 300;
    font-size: 14px; line-height: 1.75; color: var(--fg-60);
    margin-bottom: 32px;
  }
  .article-foot {
    margin-top: auto;
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 24px; border-top: 1px solid var(--fg-10);
  }  .article-date { font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.22em; color: var(--fg-40); text-transform: uppercase; }
  .article-more {
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; color: var(--fg); text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .article-more svg { width: 14px; height: 10px; transition: transform .3s ease; }
  .article:hover .article-more svg { transform: translateX(6px); }
  .article:hover .article-more { color: var(--accent); }

  .blog-foot {
    margin-top: 96px; padding-top: 56px;
    border-top: 1px solid var(--fg-10);
    display: grid; grid-template-columns: 1fr auto;
    gap: 64px; align-items: center;
  }
  .blog-foot-eyebrow {
    display: block;
    font-family: var(--body); font-weight: 500; font-size: 11px;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
  }
  .blog-foot-copy {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 22px; line-height: 1.55; color: var(--fg-60);
    max-width: 680px; text-wrap: pretty;
  }
  .blog-foot-cta {
    display: inline-flex; align-items: center; gap: 18px;
    padding: 22px 36px;
    border: 1px solid var(--fg-20);
    font-family: var(--body); font-weight: 400; font-size: 11px;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg);
    white-space: nowrap;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
  }
  .blog-foot-cta svg { width: 14px; height: 10px; transition: transform .3s ease; }
  .blog-foot-cta:hover {
    background: var(--accent); border-color: var(--accent); color: var(--bg);
  }
  .blog-foot-cta:hover svg { transform: translateX(6px); }

  @media (max-width: 780px) {
    .blog-foot { grid-template-columns: 1fr; gap: 40px; }
  }

  /* ─────── FOOTER ─────── */
  footer.site {
    padding: 120px 48px 56px;
    max-width: 1280px; margin: 0 auto;
    border-top: 1px solid var(--fg-10);
    margin-top: 80px;
  }
  .ft-top {
    display: flex; justify-content: center; margin-bottom: 72px;
  }
  .ft-top svg { width: 44px; height: 52px; fill: var(--fg); }

  .ft-nav {
    display: flex; justify-content: center; gap: 48px; flex-wrap: wrap;
    padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--fg-10);
  }
  .ft-nav a {
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; color: var(--fg-60); text-transform: uppercase;
  }
  .ft-nav a:hover { color: var(--accent); }

  .ft-row {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 48px; align-items: center;
  }
  .ft-copy { font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.22em; color: var(--fg-40); text-transform: uppercase; }
  .ft-social { display: flex; gap: 16px; justify-content: center; }
  .ft-social a {
    width: 36px; height: 36px; border: 1px solid var(--fg-20);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .25s ease;
  }
  .ft-social a:hover { border-color: var(--accent); }
  .ft-social svg { width: 14px; height: 14px; fill: var(--fg); transition: fill .25s ease; }
  .ft-social a:hover svg { fill: var(--accent); }
  .ft-lang { justify-self: end; display: flex; align-items: center; gap: 10px; font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
  .ft-lang button { background: none; border: 0; color: var(--fg-40); font: inherit; letter-spacing: inherit; cursor: pointer; padding: 0; }
  .ft-lang button.active { color: var(--fg); }
  .ft-lang .sep { color: var(--fg-20); }

  /* ─────── USP TABLET ─────── */
  @media (max-width: 1100px) and (min-width: 901px) {
    .usp-head { grid-template-columns: 1fr; gap: 56px; }
    .usp-title { max-width: none; }
    .usp-sub { max-width: 60ch; }
    .flow { max-width: 56ch; }
  }

  /* ─────── PORTFOLIO MID-VIEWPORT ─────── */
  @media (max-width: 1100px) and (min-width: 901px) {
    .logo-field { grid-template-columns: repeat(2, 1fr); }
    .logo-item { min-height: 300px; padding: 32px; }
  }

  /* ─────── MOBILE ─────── */
  @media (max-width: 900px) {
    .wrap, .hero, .portfolio, .usp, .blog, footer.site { padding-left: 24px; padding-right: 24px; }
    .site-header { padding: 18px 24px; }
    .site-header.scrolled { padding: 14px 24px; }

    nav.primary, .lang { display: none; }
    .menu-toggle { display: inline-flex; }

    .hero { padding: 140px 24px 140px; min-height: 100vh; }
    .hero h1 { font-size: clamp(48px, 12vw, 72px); max-width: 100%; line-height: 0.9; }
    .hero-sub { font-size: 16px; margin-top: 36px; }
    .hero-foot { position: static; display: block; margin-top: 80px; padding-top: 24px; }
    .hero-foot-meta { grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
    .scroll-ind { display: none; }

    .portfolio-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 64px; }
    .portfolio-head .meta { text-align: left; }

    .logo-field { grid-template-columns: 1fr; }
    .logo-item { min-height: 240px; padding: 32px 24px; }
    .logo-item .lg { font-size: 40px; }
    .logo-item .arr { top: 32px; right: 24px; }

    .usp { padding: 120px 24px; }
    .usp-inner { grid-template-columns: 1fr; gap: 32px; }
    .usp-index { position: static; }
    .usp-index .n { font-size: 44px; }
    .usp h2 { font-size: clamp(40px, 10vw, 64px); }
    .usp-head { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
    .usp-lede { font-size: 16px; }
    .usp-cta { grid-template-columns: 1fr; margin-top: 40px; }
    .usp-cta .btn { padding: 28px 24px; min-height: 0; gap: 20px; font-size: 11px; }

    .blog-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 48px; }
    .articles { grid-template-columns: 1fr; }
    .article { min-height: 0; }
    .article-body { padding: 28px 24px; }
    .article-img { aspect-ratio: 16 / 10; }

    footer.site { padding: 80px 24px 40px; }
    .ft-nav { gap: 20px 28px; }
    .ft-row { grid-template-columns: 1fr; gap: 24px; text-align: center; }
    .ft-lang { justify-self: center; }
  }

/* ═══ ABOUT ═══ */
@font-face {
    font-family: "Triplett";
    src: url("assets/fonts/OPTITriplettBoldAgency.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
:root {
    --bg: #000000;
    --surface: #0D0D0D;
    --surface-2: #111111;
    --fg: #ffffff;
    --fg-72: rgba(255,255,255,0.82);
    --fg-60: rgba(255,255,255,0.60);
    --fg-40: #666666;
    --fg-20: rgba(255,255,255,0.20);
    --fg-10: rgba(255,255,255,0.10);
    --fg-06: rgba(255,255,255,0.06);
    --accent: #C9A96E;

    --display: "Triplett", "Cormorant Garamond", Georgia, serif;
    --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
    --body: "Jost", "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --pad-x: 48px;
    --max: 1280px;
  }
body {
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.75;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
img, svg { display: block; max-width: 100%; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); }
.label {
    font-family: var(--body); font-weight: 400; font-size: 11px;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-40);
  }
.label.accent { color: var(--accent); }
.label.on { color: var(--fg); }
/* ─────── HEADER ─────── */
  .site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 22px 0;
    transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease, padding .35s ease;
    border-bottom: 1px solid transparent;
  }
.site-header .hdr-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex; align-items: center; justify-content: space-between;
  }
.site-header.scrolled {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--fg-10);
    padding: 16px 0;
  }
.brand-mark svg { width: 22px; height: 26px; fill: var(--fg); }
nav.primary a:hover { color: var(--accent); }
.lang { display: inline-flex; gap: 8px; align-items: center; font-family: var(--body); font-size: 11px; letter-spacing: 0.22em; color: var(--fg-40); }
.lang button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; letter-spacing: inherit; }
.lang .sep { opacity: 0.4; }
/* ─────── PLACEHOLDER PATTERNS ─────── */
  .ph-cinematic {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.85) 100%),
      repeating-linear-gradient(115deg, #1a1713 0 3px, #121010 3px 6px);
  }
.ph-cinematic.warm {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.85) 100%),
      repeating-linear-gradient(108deg, #1f1a14 0 4px, #14110d 4px 8px);
  }
.ph-cinematic.cool {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.85) 100%),
      repeating-linear-gradient(72deg, #16181a 0 4px, #0e0f10 4px 8px);
  }
.ph-cinematic.neutral {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%),
      repeating-linear-gradient(95deg, #1a1a1a 0 3px, #0f0f0f 3px 6px);
  }
.ph-tag-tl, .ph-tag-tr, .ph-tag-bl, .ph-tag-br {
    position: absolute; z-index: 1;
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: rgba(255,255,255,0.40);
  }
.ph-tag-tl { top: 28px; left: 32px; }
.ph-tag-tr { top: 28px; right: 32px; }
.ph-tag-bl { bottom: 28px; left: 32px; color: rgba(255,255,255,0.60); }
.ph-tag-br { bottom: 28px; right: 32px; }
.ph-corner-tl { position: absolute; top: 20px; left: 20px; width: 14px; height: 14px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); z-index: 2; }
.ph-corner-br { position: absolute; bottom: 20px; right: 20px; width: 14px; height: 14px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); z-index: 2; }
/* ─────── ABOUT HERO — CINEMATIC PORTRAIT ─────── */
  .a-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    border-bottom: 1px solid var(--fg-10);
  }
.a-hero-img {
    position: absolute; inset: 0;
  }
.a-hero-meta {
    position: absolute; top: 140px; left: 0; right: 0; z-index: 3;
  }
.a-hero-meta .wrap {
    display: grid; grid-template-columns: 200px 1fr;
    gap: 64px; align-items: start;
  }
.a-hero-meta .doc-id {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 18px; color: var(--accent); line-height: 1; margin-bottom: 18px;
  }
.a-hero-meta .doc-sub {
    font-family: var(--body); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--fg-60); line-height: 1.7;
  }
.a-hero-meta .kicker {
    font-family: var(--body); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--fg-60);
  }
.a-hero-headline {
    position: absolute; left: 0; right: 0; bottom: 120px; z-index: 3;
  }
.a-hero-headline .wrap {
    display: grid; grid-template-columns: 200px 1fr; gap: 64px; align-items: end;
  }
.a-hero-headline h1 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(56px, 9vw, 132px);
    line-height: 0.92;
    letter-spacing: -0.018em;
    text-transform: uppercase;
    max-width: 12ch;
    text-wrap: balance;
  }
.a-hero-headline h1 .it {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    text-transform: none; letter-spacing: -0.025em;
    color: var(--fg);
    display: block;
  }
.a-hero-headline .left-col {
    padding-bottom: 18px;
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg-60); line-height: 1.7;
  }
.a-hero-headline .left-col .signed {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 18px; color: var(--accent); letter-spacing: 0;
    text-transform: none; line-height: 1;
    margin-bottom: 14px;
  }
.a-hero-fine {
    position: absolute; left: 0; right: 0; bottom: 40px; z-index: 3;
  }
.a-hero-fine .wrap {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg-60);
    border-top: 1px solid var(--fg-20);
    padding-top: 28px;
    gap: 32px; flex-wrap: wrap;
  }
.a-hero-fine .dot { color: var(--accent); }
/* ─────── SECTION SHELL (matches Portfolio Viewer / Investments) ─────── */
  section.d-section { padding: 140px var(--pad-x); border-top: 1px solid var(--fg-10); position: relative; }
.d-section-head {
    display: grid; grid-template-columns: 200px 1fr; gap: 64px;
    margin-bottom: 96px; align-items: start;
  }
.d-section-head .idx { padding-top: 8px; }
.d-section-head h2 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(36px, 4.5vw, 64px); line-height: 0.98;
    letter-spacing: -0.005em; text-transform: uppercase;
    text-wrap: balance; max-width: 20ch;
  }
.d-section-head h2 .it {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    text-transform: none; letter-spacing: -0.01em;
  }
.d-section-head .lede {
    margin-top: 32px; max-width: 52ch;
    font-size: 17px; line-height: 1.75; color: var(--fg-72);
  }
/* ─────── STORY (Section 1 narrative blocks) ─────── */
  .story-stack {
    display: flex; flex-direction: column;
    gap: 0;
  }
.story-block {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    gap: 64px;
    padding: 72px 0;
    border-top: 1px solid var(--fg-10);
    align-items: start;
  }
.story-block:first-child { border-top: 0; padding-top: 0; }
.story-block .marker {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 20px; color: var(--accent); line-height: 1.2;
    padding-top: 8px;
  }
.story-block .marker .num {
    display: block;
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg-40);
    margin-bottom: 12px; font-style: normal;
  }
.story-block h3 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(28px, 2.6vw, 36px);
    line-height: 1.05; letter-spacing: -0.005em;
    text-transform: uppercase;
    text-wrap: balance;
    margin-bottom: 28px;
    max-width: 18ch;
  }
.story-block h3 .it {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    text-transform: none; letter-spacing: -0.01em;
  }
.story-block .body p {
    font-family: var(--body); font-weight: 300;
    font-size: 16px; line-height: 1.85; color: var(--fg-72);
    margin-bottom: 20px;
    max-width: 44ch;
  }
.story-block .body p:last-child { margin-bottom: 0; }
.story-block .body p .placeholder-note {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 13px; color: var(--fg-40);
    display: block; margin-top: 6px; letter-spacing: 0.02em;
  }
.story-block .figure {
    aspect-ratio: 4/5;
    position: relative;
    border: 1px solid var(--fg-10);
    overflow: hidden;
  }
.story-block .figure.wide { aspect-ratio: 4/3; }
.story-block.reversed { grid-template-columns: 200px 1fr 1fr; }
.story-block.reversed .body { order: 3; }
.story-block.reversed .figure { order: 2; }
.story-block.full {
    grid-template-columns: 200px 1fr;
  }
.story-block.full .figure {
    grid-column: 2 / -1;
    aspect-ratio: 21/9;
    margin-top: 0;
  }
.story-block.full .body {
    grid-column: 2 / -1;
    margin-top: 32px;
    max-width: 64ch;
  }
.story-block.full .body p { max-width: 64ch; font-size: 17px; }
/* Pull quote inside story */
  .story-pull {
    grid-column: 2 / -1;
    margin-top: 48px;
    padding: 32px 0;
    border-top: 1px solid var(--fg-10);
    border-bottom: 1px solid var(--fg-10);
  }
.story-pull p {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(24px, 2.4vw, 32px); line-height: 1.4;
    color: var(--fg);
    max-width: 28ch;
    text-wrap: pretty;
  }
.story-pull p::before {
    content: "“";
    font-family: var(--serif); font-style: italic;
    font-size: 64px; color: var(--accent); line-height: 0.2;
    margin-right: 8px;
    vertical-align: -0.25em;
  }
.story-pull .attr {
    margin-top: 18px;
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg-40);
  }
.story-pull .attr .dash { color: var(--accent); margin-right: 10px; }
/* ─────── TIMELINE / ORIGIN (Section 2) ─────── */
  #origin { background: var(--surface); }
.origin-stack {
    display: flex; flex-direction: column;
  }
.origin-moment {
    display: grid;
    grid-template-columns: 200px 140px 1fr;
    gap: 64px;
    padding: 64px 0;
    border-top: 1px solid var(--fg-10);
    align-items: start;
    position: relative;
  }
.origin-moment:first-child { border-top: 0; padding-top: 0; }
.origin-moment .year {
    font-family: var(--display); font-weight: 700;
    font-size: 56px; line-height: 0.95; letter-spacing: -0.01em;
    color: var(--fg);
  }
.origin-moment .year .seq {
    display: block;
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 16px; color: var(--accent); letter-spacing: 0;
    margin-bottom: 14px;
    line-height: 1;
  }
.origin-moment .seasonal {
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg-40);
    padding-top: 18px;
    line-height: 1.7;
  }
.origin-moment .moment-body h4 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.05; letter-spacing: -0.005em;
    text-transform: uppercase;
    text-wrap: balance;
    max-width: 22ch;
    margin-bottom: 24px;
  }
.origin-moment .moment-body h4 .it {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    text-transform: none; letter-spacing: -0.01em;
  }
.origin-moment .moment-body p {
    font-family: var(--body); font-weight: 300;
    font-size: 16px; line-height: 1.8; color: var(--fg-72);
    max-width: 56ch;
    margin-bottom: 16px;
  }
.origin-moment .moment-body p .placeholder-note {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 13px; color: var(--fg-40);
    display: block; margin-top: 6px; letter-spacing: 0.02em;
  }
/* Pull quote treatment as one of the timeline moments */
  .origin-moment.pull {
    align-items: center;
    padding: 96px 0;
  }
.origin-moment.pull .seasonal { color: var(--accent); }
.origin-moment.pull .moment-body p.q {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.25; color: var(--fg);
    max-width: 22ch;
    text-wrap: pretty;
    margin-bottom: 0;
  }
.origin-moment.pull .moment-body p.q .accent { color: var(--accent); }
.origin-moment.pull .moment-body .attr {
    margin-top: 28px;
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg-40);
  }
.origin-moment.pull .moment-body .attr .dash { color: var(--accent); margin-right: 10px; }
.origin-foot {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--fg-10);
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: 24px;
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 20px; color: var(--fg-60); line-height: 1.5;
  }
.origin-foot em { color: var(--accent); font-style: italic; }
/* ─────── MISSION & VISION (Section 3) ─────── */
  .mv-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px; background: var(--fg-10);
    border-top: 1px solid var(--fg-10);
    border-bottom: 1px solid var(--fg-10);
  }
.mv-cell {
    background: var(--bg);
    padding: 80px 64px 96px;
    display: flex; flex-direction: column;
    min-height: 520px;
    position: relative;
  }
.mv-cell::before {
    content: "";
    position: absolute; top: 0; left: 0;
    width: 64px; height: 1px;
    background: var(--accent);
  }
.mv-cell .mv-label {
    font-family: var(--body); font-weight: 400; font-size: 11px;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 56px;
    display: flex; align-items: center; gap: 16px;
  }
.mv-cell .mv-label .num {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 16px; letter-spacing: 0; text-transform: none;
    color: var(--fg-40);
  }
.mv-cell .mv-text {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.15; letter-spacing: -0.005em;
    text-transform: uppercase;
    text-wrap: balance;
    max-width: 18ch;
    margin-bottom: 32px;
  }
.mv-cell .mv-text .it {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    text-transform: none; letter-spacing: -0.01em;
    color: var(--fg);
  }
.mv-cell .mv-detail {
    font-family: var(--body); font-weight: 300;
    font-size: 16px; line-height: 1.8; color: var(--fg-72);
    max-width: 40ch;
    margin-bottom: 16px;
  }
.mv-cell .mv-detail .placeholder-note {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 13px; color: var(--fg-40);
    display: block; margin-top: 8px; letter-spacing: 0.02em;
  }
.mv-cell .mv-foot {
    margin-top: auto;
    padding-top: 32px;
    border-top: 1px solid var(--fg-10);
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 16px; color: var(--fg-40);
  }
.mv-cell .mv-foot .dash { color: var(--accent); margin-right: 10px; }
.mv-cell .editable-tag {
    position: absolute; top: 32px; right: 32px;
    font-family: var(--body); font-size: 9px; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--fg-40);
    display: inline-flex; align-items: center; gap: 8px;
  }
.mv-cell .editable-tag::before {
    content: "";
    width: 6px; height: 6px; background: var(--accent);
    border-radius: 50%;
  }
/* ─────── PILLARS (four operating pillars) ─────── */
  .pillars-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 80px 0 40px;
    border-bottom: 1px solid var(--fg-10);
    margin-bottom: 0;
    flex-wrap: wrap; gap: 16px;
  }
.pillars-head h3 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(28px, 2.8vw, 40px); line-height: 1;
    letter-spacing: -0.005em; text-transform: uppercase;
    text-wrap: balance; max-width: 22ch;
  }
.pillars-head h3 .it {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    text-transform: none; letter-spacing: -0.01em;
  }
.pillars-head .label-line {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 17px; color: var(--fg-60); letter-spacing: 0;
  }
.pillars-head .label-line em { color: var(--accent); font-style: italic; }
.pillar-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: var(--fg-10);
    border-bottom: 1px solid var(--fg-10);
  }
.pillar-cell {
    background: var(--bg);
    padding: 56px 36px 56px;
    display: flex; flex-direction: column;
    min-height: 360px;
    position: relative;
  }
.pillar-cell .p-num {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 28px; line-height: 1; color: var(--accent);
    margin-bottom: 36px;
    letter-spacing: 0;
  }
.pillar-cell h4 {
    font-family: var(--display); font-weight: 700;
    font-size: 19px; line-height: 1.15; letter-spacing: 0.01em;
    text-transform: uppercase;
    margin-bottom: 24px;
    text-wrap: balance;
  }
.pillar-cell h4 .amp { color: var(--fg-40); font-weight: 400; }
.pillar-cell .p-detail {
    font-family: var(--body); font-weight: 300;
    font-size: 14px; line-height: 1.75; color: var(--fg-72);
    max-width: 28ch;
    margin-bottom: 24px;
  }
.pillar-cell .p-foot {
    margin-top: auto;
    padding-top: 28px;
    border-top: 1px solid var(--fg-10);
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg-40);
  }
.pillar-cell .p-foot .accent { color: var(--accent); }
.pillar-foot {
    padding: 56px 0 0;
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: 24px;
  }
.pillar-foot p {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 20px; line-height: 1.5; color: var(--fg-60);
    max-width: 48ch; text-wrap: pretty;
  }
.pillar-foot p em { color: var(--accent); font-style: italic; }
.pillar-foot .pillar-cta {
    display: inline-flex; align-items: center; gap: 16px;
    padding: 20px 32px;
    border: 1px solid var(--fg-20);
    font-family: var(--body); font-weight: 400; font-size: 11px;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg);
    white-space: nowrap;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
  }
.pillar-foot .pillar-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.pillar-foot .pillar-cta svg { width: 14px; height: 10px; transition: transform .3s ease; }
.pillar-foot .pillar-cta:hover svg { transform: translateX(6px); }
/* ─────── FOOTER (matches Investments) ─────── */
  footer.site {
    padding: 120px 0 56px;
    background: var(--bg);
    border-top: 1px solid var(--fg-10);
  }
.ft-top {
    display: flex; justify-content: center; align-items: center;
    padding-bottom: 64px; border-bottom: 1px solid var(--fg-10);
    margin-bottom: 64px;
  }
.ft-top svg { width: 38px; height: auto; fill: var(--fg); opacity: 0.7; }
.ft-nav {
    display: flex; justify-content: center; gap: 56px;
    margin-bottom: 80px; flex-wrap: wrap;
  }
.ft-nav a {
    font-family: var(--body); font-weight: 400; font-size: 11px;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-60);
    transition: color .2s;
  }
.ft-nav a:hover, .ft-nav a.active { color: var(--accent); }
.ft-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 32px; flex-wrap: wrap;
    font-family: var(--body); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--fg-40);
  }
.ft-social { display: flex; gap: 20px; }
.ft-social a { opacity: 0.6; transition: opacity .2s; }
.ft-social a:hover { opacity: 1; }
.ft-social svg { width: 16px; height: 16px; fill: var(--fg); }
.ft-lang { display: inline-flex; gap: 8px; }
.ft-lang button { background: none; border: 0; color: var(--fg-40); font: inherit; cursor: pointer; letter-spacing: inherit; }
/* ─────── RESPONSIVE ─────── */
  @media (max-width: 1024px) {
    .pillar-grid { grid-template-columns: 1fr 1fr; }
    .a-hero-meta .wrap, .a-hero-headline .wrap { grid-template-columns: 160px 1fr; gap: 32px; }
  }
@media (max-width: 820px) {
    :root { --pad-x: 24px; }
    .site-header, .site-header.scrolled { padding: 16px 0; }
    nav.primary { display: none; }
    section.d-section { padding: 80px var(--pad-x); }
    .d-section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
    .d-section-head .idx { padding-top: 0; }

    .a-hero { min-height: 92vh; }
    .a-hero-meta { top: 100px; }
    .a-hero-meta .wrap { grid-template-columns: 1fr; gap: 16px; }
    .a-hero-meta .doc-id { font-size: 16px; margin-bottom: 8px; }
    .a-hero-headline { bottom: 90px; }
    .a-hero-headline .wrap { grid-template-columns: 1fr; gap: 32px; }
    .a-hero-headline h1 { font-size: clamp(44px, 12vw, 72px); }
    .a-hero-headline .left-col { padding-bottom: 0; }
    .a-hero-fine { bottom: 24px; }
    .a-hero-fine .wrap { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 16px; }

    .story-block, .story-block.reversed, .story-block.full {
      grid-template-columns: 1fr; gap: 32px; padding: 56px 0;
    }
    .story-block .marker { padding-top: 0; }
    .story-block.full .figure, .story-block.full .body { grid-column: auto; }
    .story-block .figure { aspect-ratio: 4/3; }
    .story-pull { grid-column: auto; margin-top: 16px; }

    .origin-moment, .origin-moment.pull {
      grid-template-columns: 1fr; gap: 24px; padding: 48px 0;
    }
    .origin-moment .year { font-size: 44px; }
    .origin-moment .seasonal { padding-top: 0; }
    .origin-moment.pull .moment-body p.q { font-size: 28px; }

    .mv-grid { grid-template-columns: 1fr; }
    .mv-cell { min-height: 0; padding: 56px 28px 64px; }

    .pillars-head { padding: 56px 0 32px; flex-direction: column; align-items: flex-start; }
    .pillar-grid { grid-template-columns: 1fr; }
    .pillar-cell { min-height: 0; padding: 40px 28px; }
    .pillar-foot { flex-direction: column; align-items: flex-start; padding-top: 40px; }

    .ft-nav { gap: 32px 28px; }
    .ft-row { justify-content: flex-start; }
  }

/* ═══ PORTFOLIO VIEWER ═══ */
:root {
    --bg: #000000;
    --surface: #0D0D0D;
    --surface-2: #141414;
    --fg: #ffffff;
    --fg-72: rgba(255,255,255,0.82);
    --fg-60: rgba(255,255,255,0.72);
    --fg-40: #666666;
    --fg-20: rgba(255,255,255,0.20);
    --fg-10: rgba(255,255,255,0.10);
    --fg-06: rgba(255,255,255,0.06);
    --accent: #C9A96E;

    --display: "Triplett", "Cormorant Garamond", Georgia, serif;
    --serif: "Cormorant Garamond", Georgia, serif;
    --body: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
html, body {
    background: var(--bg); color: var(--fg);
    font-family: var(--body); font-size: 16px; font-weight: 300; line-height: 1.75;
    -webkit-font-smoothing: antialiased; letter-spacing: 0;
  }
button { font-family: inherit; }
img { max-width: 100%; display: block; }
/* Reusable placeholders — diagonal hairline hatch, no illustration */
  .ph {
    background:
      repeating-linear-gradient(135deg,
        rgba(255,255,255,0.035) 0 1px,
        transparent 1px 14px),
      linear-gradient(180deg, #0f0f0f 0%, #050505 100%);
    position: relative; overflow: hidden;
  }
.ph::after {
    content: attr(data-ph);
    position: absolute; left: 18px; bottom: 14px;
    font-family: var(--body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--fg-40);
  }
.ph.center::after {
    left: 50%; bottom: 50%; transform: translate(-50%, 50%);
  }
/* Chrome header (simplified, to root the prototype) */
  .chrome {
    position: sticky; top: 0; z-index: 5;
    padding: 18px 0;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--fg-10);
  }
.chrome-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 48px;
    display: flex; align-items: center; justify-content: space-between;
  }
.chrome .brand { display: flex; gap: 12px; align-items: center; }
.chrome .brand svg { width: 20px; height: 24px; fill: var(--fg); }
.chrome .brand .wm { font-family: var(--display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; }
.chrome .brand .wm small { display: block; font-family: var(--body); font-size: 9px; letter-spacing: 0.3em; color: var(--fg-40); margin-top: 5px; font-weight: 400; text-transform: uppercase; }
.crumb { display:flex; align-items:center; gap: 14px; font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-60); }
.crumb .dv { color: var(--fg-20); }
.crumb .cur { color: var(--accent); }
/* ───────── PORTFOLIO GRID (launchpad) ───────── */
  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.launch { padding: 96px 48px 140px; }
.launch-head {
    display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end;
    margin-bottom: 72px; padding-bottom: 32px; border-bottom: 1px solid var(--fg-10);
  }
.launch-head h1 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(40px, 5vw, 64px); line-height: 0.98;
    letter-spacing: -0.005em; text-transform: uppercase;
  }
.launch-head h1 em {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    text-transform: none; letter-spacing: -0.01em; color: var(--fg);
  }
.launch-head .meta { font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; color: var(--fg-40); text-transform: uppercase; text-align: right; line-height: 1.9; }
.launch-head .meta b { color: var(--fg); font-weight: 400; }
.logo-field {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--fg-10); border: 1px solid var(--fg-10);
  }
.logo-item {
    display: flex; flex-direction: column; justify-content: space-between;
    background: var(--bg); min-height: 320px; padding: 36px;
    cursor: pointer; text-align: left; transition: background .3s ease;
    position: relative; border: 0;
    color: var(--fg); width: 100%;
  }
.logo-item .mono {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--fg-20);
    font-family: var(--display); font-weight: 700;
    font-size: 13px; letter-spacing: 0.04em;
    color: var(--fg-60);
    margin-top: 22px;
    transition: border-color .35s ease, color .35s ease;
    flex-shrink: 0;
  }
.logo-item .mono::before {
    content: "[ logo ]";
    position: absolute;
    margin-top: -34px;
    font-family: var(--body); font-weight: 400;
    font-size: 8px; letter-spacing: 0.24em;
    color: var(--fg-40); text-transform: uppercase;
    opacity: 0;
    transition: opacity .3s ease;
  }
.logo-item:hover .mono { border-color: var(--accent); color: var(--accent); }
.logo-item:hover .mono::before { opacity: 1; }
.logo-item .lock { flex: 1; display: flex; flex-direction: column; justify-content: center; margin: 22px 0; }
.logo-item .lg { font-family: var(--display); font-weight: 700; color: var(--fg); text-transform: uppercase; font-size: clamp(34px, 3.6vw, 48px); line-height: 0.92; letter-spacing: -0.005em; transition: color .3s ease; text-align: left; }
.logo-item .foot { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 20px; border-top: 1px solid var(--fg-10); gap: 20px; }
.logo-item .co { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 15px; color: var(--fg); }
.logo-item .sec { font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-40); text-align: right; flex-shrink: 0; }
.logo-item .status-dot {
    position: absolute; top: 36px; right: 36px;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--body); font-weight: 400; font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-40);
  }
.logo-item .status-dot::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-40);
  }
.logo-item[data-status="seeking"] .status-dot::before,
  .logo-item[data-status="available"] .status-dot::before { background: var(--accent); }
.logo-item[data-status="seeking"] .status-dot,
  .logo-item[data-status="available"] .status-dot { color: var(--accent); }
/* ───────── LEVEL 1 — OVERLAY ───────── */
  .overlay {
    position: fixed; inset: 0; z-index: 100;
    background: var(--bg);
    opacity: 0; pointer-events: none;
    transition: opacity .45s cubic-bezier(.6,0,.2,1);
  }
.overlay.open { opacity: 1; pointer-events: auto; }
.ov-close {
    position: absolute; top: 28px; right: 32px; z-index: 3;
    width: 44px; height: 44px;
    border: 1px solid var(--fg-20); background: transparent; color: var(--fg);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: border-color .25s, color .25s;
  }
.ov-close:hover { border-color: var(--accent); color: var(--accent); }
.ov-close svg { width: 14px; height: 14px; }
.ov-counter {
    position: absolute; top: 40px; left: 32px; z-index: 3;
    font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-60);
  }
.ov-counter b { color: var(--accent); font-weight: 400; }
.ov-counter .dv { color: var(--fg-20); margin: 0 10px; }
.ov-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3; width: 56px; height: 56px;
    border: 1px solid var(--fg-20); background: rgba(0,0,0,0.6); color: var(--fg);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .25s;
    backdrop-filter: blur(8px);
  }
.ov-nav:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,0,0,0.8); }
.ov-nav.prev { left: 28px; }
.ov-nav.next { right: 28px; }
.ov-nav svg { width: 18px; height: 14px; }
.ov-body {
    position: absolute; inset: 0;
    display: grid; grid-template-columns: 60fr 40fr;
  }
.ov-left {
    position: relative; overflow: hidden;
    background: #111;
  }
.ov-screenshot {
    position: absolute; inset: 0;
    transition: opacity .4s ease;
  }
.ov-screenshot::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.92) 100%);
    pointer-events: none;
  }
.ov-title-wrap {
    position: absolute; left: 48px; right: 48px; bottom: 40px; z-index: 2;
  }
.ov-title-eyebrow {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
    margin-bottom: 20px;
  }
.ov-title-eyebrow .dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.ov-title-eyebrow .rl { flex: 1; max-width: 72px; height: 1px; background: var(--accent); opacity: 0.5; }
.ov-title {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(54px, 6.4vw, 104px);
    line-height: 0.92; letter-spacing: -0.015em; text-transform: uppercase;
    color: var(--fg);
  }
.ov-title em {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    text-transform: none; letter-spacing: -0.02em;
  }
.ov-url {
    margin-top: 20px;
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-60);
  }
.ov-url::before { content: "— "; color: var(--fg-40); }
.ov-right {
    padding: 96px 56px 56px;
    display: flex; flex-direction: column;
    background: var(--bg);
    border-left: 1px solid var(--fg-10);
    overflow-y: auto;
  }
.ov-right::-webkit-scrollbar { width: 2px; }
.ov-right::-webkit-scrollbar-thumb { background: var(--fg-20); }
.ov-founder {
    display: flex; align-items: center; gap: 16px; margin-bottom: 40px;
  }
.ov-founder-inline {
    margin-top: 4px; margin-bottom: 16px;
  }
.ov-founder-inline .av {
    width: 40px; height: 40px; font-size: 14px;
  }
.ov-founder-inline .nm { font-size: 12px; }
.ov-founder-inline .rl { font-size: 9px; margin-top: 5px; }
/* Company mark (top of right panel — replaces the founder-as-identity) */
  .ov-company {
    margin-bottom: 32px; padding-bottom: 28px;
    border-bottom: 1px solid var(--fg-10);
  }
.ov-company .logo-mark {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 0.96; letter-spacing: -0.01em; text-transform: uppercase;
    color: var(--fg);
  }
.ov-company .logo-mark em {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    text-transform: none; letter-spacing: -0.02em; color: var(--fg);
  }
.ov-company-meta {
    margin-top: 10px;
    font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-40);
  }
.ov-founder .av {
    width: 52px; height: 52px; border-radius: 50%;
    background: #1a1a1a; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--fg-10);
    font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--fg-40);
    letter-spacing: 0.04em;
    overflow: hidden;
  }
.ov-founder .nm { font-family: var(--display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; }
.ov-founder .rl { font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.22em; color: var(--fg-40); text-transform: uppercase; margin-top: 7px; }
.ov-div {
    height: 1px; background: var(--accent); opacity: 0.6;
    width: 64px; margin-bottom: 28px;
  }
.ov-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border: 1px solid var(--fg-20);
    font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg);
    line-height: 1;
  }
.pill.sector { color: var(--fg-60); border-color: var(--fg-10); }
.pill.status { padding-left: 10px; }
.pill.status::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-40);
  }
.pill.status[data-status="active"] { border-color: var(--fg-20); color: var(--fg); }
.pill.status[data-status="active"]::before { background: var(--fg); }
.pill.status[data-status="seeking"] { border-color: var(--accent); color: var(--accent); }
.pill.status[data-status="seeking"]::before { background: var(--accent); }
.pill.status[data-status="available"] { border-color: var(--accent); color: var(--accent); background: rgba(201,169,110,0.05); }
.pill.status[data-status="available"]::before { background: var(--accent); }
.pill.status[data-status="closed"] { border-color: var(--fg-10); color: var(--fg-40); }
.pill.status[data-status="sale"] { border-color: var(--accent); color: var(--accent); }
.pill.status[data-status="sale"]::before { background: var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.ov-desc {
    font-family: var(--body); font-weight: 300;
    font-size: 17px; line-height: 1.7; color: var(--fg);
    margin-bottom: 32px;
  }
.ov-note {
    padding: 24px 0 24px 24px;
    border-left: 1px solid var(--accent);
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 18px; line-height: 1.5; color: var(--fg-60);
    text-wrap: pretty;
    margin-bottom: 32px;
  }
.ov-note::before { content: "“"; font-size: 1.4em; color: var(--accent); margin-right: 2px; }
.ov-note::after { content: "”"; font-size: 1.4em; color: var(--accent); margin-left: 2px; }
.ov-note .sig {
    display: block; margin-top: 16px;
    font-family: var(--body); font-style: normal; font-weight: 400; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-40);
  }
.ov-social { display: flex; gap: 10px; margin-bottom: 36px; }
.ov-social a {
    width: 36px; height: 36px; border: 1px solid var(--fg-20);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .25s;
  }
.ov-social a:hover { border-color: var(--accent); }
.ov-social svg { width: 14px; height: 14px; fill: var(--fg); transition: fill .25s; }
.ov-social a:hover svg { fill: var(--accent); }
.ov-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--fg-10); border: 1px solid var(--fg-10); margin-bottom: 32px; }
.ov-btn {
    padding: 22px 20px; background: var(--bg);
    display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--fg); cursor: pointer; border: 0; text-align: left;
    transition: background .25s, color .25s;
  }
.ov-btn:hover { background: var(--surface); color: var(--accent); }
.ov-btn.primary { background: var(--fg); color: var(--bg); }
.ov-btn.primary:hover { background: var(--accent); color: var(--bg); }
.ov-btn svg { width: 14px; height: 10px; flex-shrink: 0; }
.ov-prevnext {
    margin-top: auto; padding-top: 32px; border-top: 1px solid var(--fg-10);
    display: flex; justify-content: space-between; gap: 20px;
    font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  }
.ov-prevnext .side { cursor: pointer; color: var(--fg-60); display: flex; align-items: center; gap: 10px; transition: color .25s; background: transparent; border: 0; padding: 0; }
.ov-prevnext .side:hover { color: var(--accent); }
.ov-prevnext .side .nm { font-family: var(--display); font-weight: 700; color: var(--fg); font-size: 13px; letter-spacing: 0; margin-top: 4px; text-transform: none; line-height: 1; }
.ov-prevnext .side:hover .nm { color: var(--accent); }
.ov-prevnext .side .col { display: flex; flex-direction: column; }
.ov-prevnext .side.next .col { align-items: flex-end; text-align: right; }
/* ───────── LEVEL 2 — DETAIL PAGE ───────── */
  .detail {
    display: none;
    min-height: 100vh;
  }
body.page-detail .detail { display: block; }
body.page-detail .launch { display: none; }
/* Hero */
  .d-hero {
    position: relative;
    min-height: 88vh;
    padding: 140px 48px 96px;
    display: flex; flex-direction: column; justify-content: flex-end;
    overflow: hidden;
  }
.d-hero-bg {
    position: absolute; inset: 0; z-index: 0;
  }
.d-hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.75) 80%, rgba(0,0,0,0.95) 100%);
  }
.d-hero-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; width: 100%; }
.d-hero-logo { margin-bottom: 40px; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 0.02em; color: var(--fg); text-transform: uppercase; opacity: 0.9; line-height: 1; display: inline-flex; align-items: center; gap: 10px; }
.d-hero-logo::before { content: ""; width: 28px; height: 1px; background: var(--accent); }
.d-eyebrow {
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
    margin-bottom: 28px;
  }
.d-eyebrow .dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.d-hero h1 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(64px, 8.4vw, 132px);
    line-height: 0.92; letter-spacing: -0.015em; text-transform: uppercase;
    max-width: 16ch;
  }
.d-hero h1 em { font-family: var(--serif); font-weight: 300; font-style: italic; text-transform: none; letter-spacing: -0.02em; }
.d-hero-meta {
    margin-top: 48px; padding-top: 32px;
    border-top: 1px solid var(--fg-20);
    display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center;
  }
.d-hero-stats {
    margin-top: 24px; display: flex; gap: 56px; flex-wrap: wrap;
    font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-40);
  }
.d-hero-stats b { display: block; font-family: var(--display); font-size: 18px; color: var(--fg); font-weight: 700; letter-spacing: 0; margin-top: 8px; text-transform: uppercase; }
/* Sections */
  section.d-section {
    padding: 140px 48px;
    max-width: 1280px; margin: 0 auto;
    border-top: 1px solid var(--fg-10);
  }
.d-section-head {
    display: grid; grid-template-columns: 160px 1fr; gap: 64px; align-items: start;
    margin-bottom: 72px;
  }
.d-section-head .label {
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
    padding-top: 14px;
  }
.d-section-head h2 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(40px, 4.6vw, 64px);
    line-height: 0.98; letter-spacing: -0.005em; text-transform: uppercase;
    text-wrap: balance;
  }
.d-section-head h2 em { font-family: var(--serif); font-weight: 300; font-style: italic; text-transform: none; letter-spacing: -0.01em; color: var(--fg); }
/* Story */
  .d-story-grid {
    display: grid; grid-template-columns: 160px 1fr; gap: 64px;
  }
.d-story-grid .spacer { }
.d-story-body { max-width: 68ch; }
.d-story-body p {
    font-family: var(--body); font-weight: 300;
    font-size: 18px; line-height: 1.8; color: var(--fg);
    margin-bottom: 28px;
  }
.d-pull {
    margin: 64px 0;
    padding: 32px 0;
    border-top: 1px solid var(--fg-10);
    border-bottom: 1px solid var(--fg-10);
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(28px, 3.2vw, 44px); line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--accent);
    text-wrap: balance;
  }
.d-pull::before { content: "“ "; opacity: 0.5; }
.d-pull::after { content: " ”"; opacity: 0.5; }
.d-alej {
    margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--fg-10);
    display: grid; grid-template-columns: 120px 1fr; gap: 40px; align-items: start;
  }
.d-alej .av {
    width: 120px; height: 120px; border-radius: 50%;
    background: #1a1a1a; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--fg-10);
    font-family: var(--display); font-weight: 700; font-size: 36px; color: var(--fg-40);
    overflow: hidden;
  }
.d-alej .note {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 22px; line-height: 1.5; color: var(--fg);
    text-wrap: pretty; max-width: 56ch;
  }
.d-alej .sig {
    display: block; margin-top: 20px;
    font-family: var(--body); font-style: normal; font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-40);
  }
.d-alej .sig b { color: var(--fg); font-weight: 400; }
/* Metrics */
  .d-metrics {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--fg-10); border: 1px solid var(--fg-10);
  }
.metric {
    background: var(--surface); padding: 48px 40px;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 260px;
  }
.metric .m-n {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(48px, 5.4vw, 80px);
    line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase;
    color: var(--fg);
  }
.metric .m-n em { font-family: var(--serif); font-weight: 300; font-style: italic; text-transform: none; color: var(--accent); }
.metric .m-n .u { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 0.45em; color: var(--accent); letter-spacing: 0; text-transform: none; margin-left: 6px; }
.metric .m-l {
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-40);
    margin-top: 24px; line-height: 1.5;
  }
.metric .m-i { font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.28em; color: var(--accent); }
/* Gallery */
  .d-gallery {
    columns: 3; column-gap: 1px;
    background: var(--fg-10);
    border: 1px solid var(--fg-10);
  }
.d-gallery .g-img {
    break-inside: avoid; margin-bottom: 1px;
    width: 100%;
  }
.d-gallery .g-img.tall { height: 520px; }
.d-gallery .g-img.short { height: 340px; }
.d-gallery .g-img.wide { height: 300px; }
.d-video {
    margin-top: 56px;
    width: 100%; aspect-ratio: 16 / 9;
    border: 1px solid var(--fg-10);
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
.d-video .play {
    width: 84px; height: 84px; border-radius: 50%;
    border: 1px solid var(--fg);
    background: rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .3s;
    color: var(--fg);
  }
.d-video .play:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,0,0,0.6); }
.d-video .play svg { width: 22px; height: 22px; margin-left: 4px; }
.d-video .caption {
    position: absolute; bottom: 24px; left: 28px;
    font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-60);
  }
.d-social-feed {
    margin-top: 56px;
    padding-top: 40px; border-top: 1px solid var(--fg-10);
  }
.d-social-feed-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 28px;
  }
.d-social-feed-head .lab { font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.d-social-feed-head .at { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 16px; color: var(--fg-60); }
.d-social-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--fg-10); border: 1px solid var(--fg-10); }
.d-social-row .cell { aspect-ratio: 1; position: relative; }
.d-social-row .cell .ov-meta {
    position: absolute; bottom: 12px; left: 14px; right: 14px;
    font-family: var(--body); font-weight: 400; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-60);
    display: flex; justify-content: space-between;
  }
/* Investment */
  .d-invest-kinds {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 36px;
  }
.d-invest-desc {
    font-family: var(--body); font-weight: 300;
    font-size: 18px; line-height: 1.7; color: var(--fg);
    max-width: 64ch; margin-bottom: 56px;
  }
.d-form {
    display: grid; grid-template-columns: 160px 1fr; gap: 64px; align-items: start;
    padding-top: 48px; border-top: 1px solid var(--fg-10);
  }
.d-form-lab {
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
    padding-top: 8px;
  }
.d-form-lab small {
    display: block; font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 14px; color: var(--fg-40); letter-spacing: 0; text-transform: none; margin-top: 16px; line-height: 1.5;
  }
.d-form-body { max-width: 640px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--fg-10); margin-bottom: 1px; }
.f-full { margin-bottom: 1px; }
.f-field {
    background: var(--bg); padding: 20px 24px;
    display: flex; flex-direction: column; gap: 10px;
    border: 1px solid var(--fg-10); border-top: 0; border-left: 0;
  }
.f-row .f-field:first-child { border-left: 0; }
.f-field label {
    font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-40);
  }
.f-field input, .f-field select, .f-field textarea {
    background: transparent; border: 0; color: var(--fg);
    font-family: var(--body); font-weight: 300; font-size: 16px; line-height: 1.5;
    outline: none; padding: 0; width: 100%;
  }
.f-field textarea { resize: vertical; min-height: 100px; }
.f-field select { appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23C9A96E'><path d='M1 1l4 4 4-4'/></svg>");
    background-repeat: no-repeat; background-position: right 0 center; background-size: 10px 6px;
  }
.f-field input::placeholder, .f-field textarea::placeholder { color: var(--fg-40); }
.f-submit {
    margin-top: 32px;
    display: inline-flex; align-items: center; gap: 18px;
    padding: 22px 36px;
    background: var(--fg); color: var(--bg); border: 0; cursor: pointer;
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
    transition: background .25s, color .25s;
  }
.f-submit:hover { background: var(--accent); color: var(--bg); }
.f-submit svg { width: 14px; height: 10px; }
.f-disclaim {
    margin-top: 20px;
    font-family: var(--body); font-weight: 300; font-size: 12px; color: var(--fg-40); line-height: 1.6;
    max-width: 52ch;
  }
/* Footer nav */
  .d-foot {
    padding: 80px 48px 56px;
    max-width: 1280px; margin: 0 auto;
    border-top: 1px solid var(--fg-10);
  }
.d-foot-row {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 48px; align-items: center;
  }
.d-foot .back {
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg);
    cursor: pointer; background: transparent; border: 0; padding: 0;
    transition: color .25s, gap .25s;
  }
.d-foot .back:hover { color: var(--accent); gap: 18px; }
.d-foot .back svg { width: 14px; height: 10px; }
.d-foot .center {
    font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-40);
  }
.d-foot .pair {
    display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; align-items: stretch;
    border: 1px solid var(--fg-10); min-width: 460px;
    justify-self: end;
  }
.d-foot .pair .rule { background: var(--fg-10); }
.d-foot .pair button {
    background: transparent; border: 0; cursor: pointer; text-align: left;
    padding: 20px 24px;
    display: flex; flex-direction: column; gap: 8px;
    color: var(--fg); transition: background .25s;
  }
.d-foot .pair button:hover { background: var(--surface); }
.d-foot .pair button.next { text-align: right; align-items: flex-end; }
.d-foot .pair .l { font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-40); display: inline-flex; gap: 10px; align-items: center; }
.d-foot .pair .n { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.01em; text-transform: uppercase; }
.d-foot .pair button:hover .n { color: var(--accent); }
/* ───────── MOBILE ───────── */
  @media (max-width: 900px) {
    .chrome { padding: 14px 20px; }
    .wrap { padding: 0 20px; }
    .launch { padding: 56px 20px 80px; }
    .launch-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
    .launch-head .meta { text-align: left; }
    .logo-field { grid-template-columns: 1fr; }
    .logo-item { min-height: 220px; padding: 28px 24px; }
    .logo-item .lg { font-size: 38px; }
    .logo-item .status-dot { top: 28px; right: 24px; }

    /* Overlay mobile: stacked */
    .ov-body { grid-template-columns: 1fr; grid-template-rows: 42vh 1fr; }
    .ov-right { padding: 32px 24px 32px; border-left: 0; border-top: 1px solid var(--fg-10); }
    .ov-title-wrap { left: 24px; right: 24px; bottom: 24px; }
    .ov-title { font-size: clamp(40px, 12vw, 56px); }
    .ov-title-eyebrow { margin-bottom: 14px; }
    .ov-close { top: 16px; right: 16px; width: 38px; height: 38px; }
    .ov-counter { top: 26px; left: 20px; font-size: 9px; }
    .ov-nav { display: none; }
    .ov-buttons { grid-template-columns: 1fr; }
    .ov-founder { margin-bottom: 28px; }
    .ov-desc { font-size: 15px; }
    .ov-note { font-size: 16px; padding: 18px 0 18px 18px; }
    .ov-prevnext .side .nm { font-size: 12px; }

    /* Detail mobile */
    .d-hero { padding: 100px 20px 56px; min-height: 72vh; }
    .d-hero h1 { font-size: clamp(44px, 12vw, 64px); }
    .d-hero-stats { gap: 28px; }
    section.d-section { padding: 72px 20px; }
    .d-section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
    .d-section-head .label { padding-top: 0; }
    .d-story-grid { grid-template-columns: 1fr; gap: 0; }
    .d-story-grid .spacer { display: none; }
    .d-story-body p { font-size: 16px; }
    .d-alej { grid-template-columns: 1fr; gap: 20px; }
    .d-alej .av { width: 72px; height: 72px; font-size: 22px; }
    .d-alej .note { font-size: 18px; }
    .d-metrics { grid-template-columns: repeat(2, 1fr); }
    .metric { padding: 32px 24px; min-height: 200px; }
    .d-gallery { columns: 2; }
    .d-gallery .g-img.tall { height: 360px; }
    .d-gallery .g-img.short { height: 240px; }
    .d-gallery .g-img.wide { height: 220px; }
    .d-social-row { grid-template-columns: repeat(2, 1fr); }
    .d-form { grid-template-columns: 1fr; gap: 24px; }
    .f-row { grid-template-columns: 1fr; }
    .d-foot { padding: 56px 20px 40px; }
    .d-foot-row { grid-template-columns: 1fr; gap: 28px; }
    .d-foot .pair { min-width: 0; justify-self: stretch; }
    .d-foot .center { text-align: left; }
  }
/* Keyboard-hint badge (top-right of left panel, under counter) */
  .kbd-hint {
    position: absolute; top: 40px; right: 32px; z-index: 3;
    display: flex; gap: 18px; align-items: center;
    font-family: var(--body); font-weight: 400; font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-40);
  }
.kbd-hint kbd {
    display: inline-block; padding: 3px 8px; border: 1px solid var(--fg-20);
    font-family: var(--body); font-size: 10px; color: var(--fg-60); letter-spacing: 0; text-transform: none;
    margin-right: 6px;
  }
@media (max-width: 900px) { .kbd-hint { display: none; } }

/* ═══ INVESTMENTS ═══ */
/* ─────── HERO ─────── */
  .hero {
    min-height: 100vh;
    padding: 180px var(--pad-x) 100px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative;
  }
.hero .inner { display: grid; grid-template-columns: 200px 1fr; gap: 64px; }
.hero .meta-col { padding-top: 12px; }
.hero .meta-col .doc-id {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 18px; color: var(--accent); line-height: 1; margin-bottom: 18px;
  }
.hero .meta-col .doc-sub {
    font-family: var(--body); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--fg-40); line-height: 1.7;
  }
.hero h1 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(56px, 8vw, 112px);
    line-height: 0.94;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    max-width: 14ch;
    text-wrap: balance;
  }
.hero h1 .it {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    text-transform: none; letter-spacing: -0.02em;
    color: var(--fg);
  }
.hero .sub {
    font-family: var(--body); font-weight: 300;
    font-size: 18px; line-height: 1.75; color: var(--fg-72);
    max-width: 58ch; margin-top: 48px;
  }
.hero-anchors {
    margin-top: 96px;
    padding-top: 40px; border-top: 1px solid var(--fg-10);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--fg-10);
  }
.hero-anchor {
    background: var(--bg);
    padding: 32px 0 8px;
    display: flex; align-items: baseline; justify-content: space-between;
    font-family: var(--body); font-weight: 400; font-size: 12px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--fg);
    transition: color .3s ease, padding .3s ease;
    padding-right: 24px;
  }
.hero-anchor .num {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 13px; color: var(--accent); letter-spacing: 0;
    text-transform: none;
  }
.hero-anchor .txt { display: inline-flex; align-items: baseline; gap: 18px; }
.hero-anchor .arr {
    width: 12px; height: 12px; stroke: currentColor;
    transition: transform .3s ease;
  }
.hero-anchor:hover { color: var(--accent); }
.hero-anchor:hover .arr { transform: translateY(4px); }
.hero-fine {
    position: absolute;
    bottom: 48px;
    right: var(--pad-x);
    display: flex; gap: 48px;
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg-40);
  }
.hero-fine .dot { color: var(--accent); }
/* ─────── SECTION SHELL ─────── */
  section.slab { padding: 140px var(--pad-x); border-top: 1px solid var(--fg-10); position: relative; }
section.slab.wrap { padding-left: var(--pad-x); padding-right: var(--pad-x); }
.section-head {
    display: grid; grid-template-columns: 200px 1fr; gap: 64px;
    margin-bottom: 96px; align-items: start;
  }
.section-head .idx { padding-top: 8px; }
.section-head h2 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(36px, 4.5vw, 64px); line-height: 0.98;
    letter-spacing: -0.005em; text-transform: uppercase;
    text-wrap: balance; max-width: 20ch;
  }
.section-head h2 .it {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    text-transform: none; letter-spacing: -0.01em;
  }
.section-head .lede {
    margin-top: 32px; max-width: 52ch;
    font-size: 17px; line-height: 1.75; color: var(--fg-72);
  }
/* ─────── MODEL (3-col) ─────── */
  .model-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: var(--fg-10);
    border-top: 1px solid var(--fg-10);
    border-bottom: 1px solid var(--fg-10);
  }
.model-cell {
    background: var(--bg);
    padding: 64px 48px 72px;
    display: flex; flex-direction: column;
    min-height: 440px;
    position: relative;
  }
.model-cell .num {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 72px; line-height: 1; color: var(--accent);
    margin-bottom: 56px;
  }
.model-cell h3 {
    font-family: var(--display); font-weight: 700;
    font-size: 22px; letter-spacing: 0.01em; text-transform: uppercase;
    margin-bottom: 28px; line-height: 1.15;
  }
.model-cell h3 .slash { color: var(--fg-40); font-weight: 400; margin: 0 10px; }
.model-cell p {
    font-family: var(--body); font-weight: 300;
    font-size: 15px; line-height: 1.8; color: var(--fg-72);
    max-width: 32ch;
  }
.model-cell .arrow-link {
    margin-top: auto;
    padding-top: 48px;
    font-family: var(--body); font-weight: 400; font-size: 10px;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--fg-40);
    display: inline-flex; align-items: center; gap: 14px;
  }
.model-foot {
    margin-top: 64px;
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 20px; color: var(--fg-60); line-height: 1.6;
    padding-top: 32px;
  }
.model-foot em { color: var(--accent); font-style: italic; }
/* ─────── OPEN OPPORTUNITIES ─────── */
  #opportunities { background: var(--bg); }
.opp-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 40px; border-bottom: 1px solid var(--fg-10);
    margin-bottom: 64px;
  }
.opp-head .count {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 17px; color: var(--fg-40);
  }
.opp-head .count em { color: var(--accent); font-style: italic; font-size: 22px; margin-right: 6px; }
.opp-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px; background: var(--fg-10);
    border-top: 1px solid var(--fg-10);
    border-bottom: 1px solid var(--fg-10);
  }
.opp-card {
    background: var(--bg);
    display: flex; flex-direction: column;
    position: relative;
    cursor: pointer;
    transition: background .3s ease;
  }
.opp-card:hover { background: var(--surface); }
.opp-img {
    aspect-ratio: 16/10;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--fg-10);
  }
/* cinematic placeholder — subtle tonal blocking */
  .opp-img .ph {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 28px 32px;
  }
.opp-img .ph::before {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%),
      repeating-linear-gradient(115deg, #1a1713 0 3px, #121010 3px 6px);
    opacity: 0.92;
  }
.opp-img.var-b .ph::before {
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.8) 100%),
      repeating-linear-gradient(72deg, #16181a 0 4px, #0e0f10 4px 8px);
  }
.opp-img .ph .ph-tag {
    position: relative; z-index: 1;
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg-60);
  }
.opp-img .ph .ph-img-label {
    position: absolute; top: 28px; left: 32px; z-index: 1;
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: rgba(255,255,255,0.35);
  }
.opp-status {
    position: absolute; top: 28px; right: 32px; z-index: 2;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg);
    border: 1px solid var(--fg-20);
  }
.opp-status .pulse {
    width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
    box-shadow: 0 0 0 0 var(--accent);
    animation: pulse 2.4s ease-out infinite;
  }
.opp-status.soon .pulse { background: var(--fg-40); animation: none; }
.opp-status.closed .pulse { background: transparent; border: 1px solid var(--fg-40); animation: none; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(201,169,110,0.55); }
    100% { box-shadow: 0 0 0 10px rgba(201,169,110,0); }
  }
.opp-body {
    padding: 40px 44px 44px;
    display: flex; flex-direction: column; flex: 1;
  }
.opp-tags {
    display: flex; gap: 18px; align-items: center;
    margin-bottom: 24px;
  }
.opp-tag {
    font-family: var(--body); font-weight: 400; font-size: 10px;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-40);
  }
.opp-tag.type { color: var(--accent); }
.opp-tag .sep { color: var(--fg-20); margin: 0 2px; }
.opp-name {
    font-family: var(--display); font-weight: 700;
    font-size: 38px; line-height: 1.02; letter-spacing: 0;
    text-transform: uppercase; margin-bottom: 20px;
    text-wrap: balance;
  }
.opp-name .it {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    text-transform: none; letter-spacing: -0.005em;
  }
.opp-hook {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 20px; line-height: 1.45; color: var(--fg-72);
    max-width: 36ch; margin-bottom: 36px;
    text-wrap: pretty;
  }
.opp-meta {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 20px; padding: 24px 0;
    border-top: 1px solid var(--fg-10);
    border-bottom: 1px solid var(--fg-10);
    margin-bottom: 28px;
  }
.opp-meta .m dt {
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg-40);
    margin-bottom: 6px;
  }
.opp-meta .m dd {
    font-family: var(--display); font-weight: 700; font-size: 15px;
    letter-spacing: 0; text-transform: uppercase; color: var(--fg);
  }
.opp-meta .m dd.sans {
    font-family: var(--body); font-weight: 300; font-size: 13px;
    text-transform: none; color: var(--fg-72);
  }
.opp-cta {
    margin-top: auto;
    display: inline-flex; justify-content: space-between; align-items: center;
    padding-top: 24px; border-top: 1px solid var(--fg-10);
    font-family: var(--body); font-weight: 400; font-size: 11px;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg);
  }
.opp-cta .arr { width: 20px; height: 10px; stroke: currentColor; transition: transform .3s ease; }
.opp-card:hover .opp-cta { color: var(--accent); }
.opp-card:hover .opp-cta .arr { transform: translateX(8px); }
.opp-card[data-status="closed"] { opacity: 0.5; }
.opp-card[data-status="closed"]:hover { background: var(--bg); cursor: default; }
.opp-foot {
    margin-top: 64px; padding-top: 56px;
    border-top: 1px solid var(--fg-10);
    display: grid; grid-template-columns: 1fr auto;
    gap: 48px; align-items: center;
  }
.opp-foot-copy {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 24px; line-height: 1.5; color: var(--fg-72);
    max-width: 52ch; text-wrap: pretty;
  }
.opp-foot-cta {
    display: inline-flex; align-items: center; gap: 18px;
    padding: 22px 36px;
    border: 1px solid var(--fg-20);
    font-family: var(--body); font-weight: 400; font-size: 11px;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg);
    white-space: nowrap;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
  }
.opp-foot-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.opp-foot-cta svg { width: 14px; height: 10px; transition: transform .3s ease; }
.opp-foot-cta:hover svg { transform: translateX(6px); }
/* ─────── STARTUP APPLICATION ─────── */
  #startup { background: var(--surface); }
#startup.slab { border-top: 1px solid var(--fg-10); }
.startup-grid {
    display: grid; grid-template-columns: 1fr 1.15fr;
    gap: 96px;
    align-items: start;
  }
.founder {
    position: sticky; top: 120px;
  }
.founder-portrait {
    aspect-ratio: 3/4;
    background: var(--bg);
    position: relative;
    border: 1px solid var(--fg-10);
    overflow: hidden;
    margin-bottom: 40px;
  }
.founder-portrait .ph {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%),
      repeating-linear-gradient(100deg, #1b1815 0 3px, #101010 3px 6px);
  }
.founder-portrait .tl {
    position: absolute; top: 20px; left: 20px; width: 14px; height: 14px;
    border-top: 1px solid var(--accent); border-left: 1px solid var(--accent);
  }
.founder-portrait .br {
    position: absolute; bottom: 20px; right: 20px; width: 14px; height: 14px;
    border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent);
  }
.founder-portrait .cap {
    position: absolute; bottom: 28px; left: 32px;
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg-60);
  }
.founder-portrait .frame-label {
    position: absolute; top: 28px; right: 32px;
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: rgba(255,255,255,0.35);
  }
.founder-name {
    font-family: var(--display); font-weight: 700;
    font-size: 22px; letter-spacing: 0.01em; text-transform: uppercase;
    margin-bottom: 8px;
  }
.founder-role {
    font-family: var(--body); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--fg-40);
    margin-bottom: 40px;
  }
.founder-statement {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 26px; line-height: 1.4; color: var(--fg);
    max-width: 24ch; text-wrap: pretty;
    padding-top: 32px; border-top: 1px solid var(--fg-10);
  }
.founder-statement::before {
    content: "“";
    display: block;
    font-family: var(--serif); font-style: italic;
    font-size: 64px; color: var(--accent); line-height: 0.5;
    margin-bottom: 16px;
  }
.founder-sign {
    margin-top: 28px;
    font-family: var(--body); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--fg-40);
  }
.founder-sign .dash { color: var(--accent); margin-right: 10px; }
/* Form — private document feel */
  .form {
    background: var(--bg);
    border: 1px solid var(--fg-10);
    padding: 56px 56px 48px;
    position: relative;
  }
.form::before {
    content: "";
    position: absolute; top: 0; left: 0; height: 1px; width: 64px;
    background: var(--accent);
  }
.form-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 32px; border-bottom: 1px solid var(--fg-10);
    margin-bottom: 40px;
  }
.form-head .title {
    font-family: var(--display); font-weight: 700;
    font-size: 22px; letter-spacing: 0.01em; text-transform: uppercase;
  }
.form-head .title .it {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    text-transform: none; letter-spacing: -0.005em; color: var(--fg-60);
  }
.form-head .ref {
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg-40);
  }
.fields {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--fg-10);
  }
.field {
    position: relative;
    border-bottom: 1px solid var(--fg-10);
    border-right: 1px solid var(--fg-10);
    padding: 22px 0 18px;
  }
.field:nth-child(2n) { border-right: 0; }
.field.full { grid-column: 1 / -1; border-right: 0; }
.field label {
    display: block;
    font-family: var(--body); font-weight: 400; font-size: 10px;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-40);
    margin-bottom: 10px;
    transition: color .25s ease;
  }
.field label .req { color: var(--accent); margin-left: 4px; }
.field input,
  .field select,
  .field textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--fg);
    font-family: var(--body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    padding: 0 0 6px;
    outline: none;
    caret-color: var(--accent);
    -webkit-appearance: none;
    appearance: none;
  }
.field textarea { resize: none; min-height: 72px; font-size: 15px; }
.field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23C9A96E' stroke-width='1'><path d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0 center;
  }
.field select option { background: #0D0D0D; color: var(--fg); }
.field::after {
    content: "";
    position: absolute; left: 0; right: 16px; bottom: 17px;
    height: 1px; background: var(--fg-20);
    transition: background .25s ease, right .25s ease;
  }
.field:focus-within::after { background: var(--accent); right: 0; }
.field:focus-within label { color: var(--accent); }
.field.full::after { right: 0; }
/* side padding inside each field */
  .field {
    padding-left: 28px; padding-right: 28px;
  }
.field:nth-child(2n) { padding-right: 28px; }
.field:nth-child(2n-1) { padding-left: 0; }
.field.full { padding-left: 0; padding-right: 0; }
.field::after { left: 0; right: 0; }
.field:nth-child(2n-1)::after { right: 28px; }
.field:nth-child(2n)::after { left: 28px; }
.field:nth-child(2n-1):focus-within::after { right: 0; }
.field:nth-child(2n):focus-within::after { left: 0; }
.form-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 40px; gap: 24px; flex-wrap: wrap;
  }
.form-foot .fine {
    font-family: var(--body); font-size: 11px; color: var(--fg-40);
    max-width: 36ch; line-height: 1.6;
  }
.form-foot .fine em {
    font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent);
  }
.submit {
    display: inline-flex; align-items: center; justify-content: space-between;
    gap: 48px;
    padding: 22px 28px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-family: var(--body); font-weight: 400; font-size: 11px;
    letter-spacing: 0.24em; text-transform: uppercase;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, padding .25s ease;
    min-width: 280px;
  }
.submit:hover { background: var(--accent); color: var(--bg); }
.submit .arr { width: 20px; height: 10px; stroke: currentColor; transition: transform .3s ease; }
.submit:hover .arr { transform: translateX(6px); }
/* ─────── INVESTOR CONTACT ─────── */
  #investor { background: var(--bg); }
.investor-wrap {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: start;
  }
.investor-left h3 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(36px, 4vw, 56px); line-height: 1;
    letter-spacing: -0.005em; text-transform: uppercase;
    text-wrap: balance; max-width: 14ch;
    margin-bottom: 48px;
  }
.investor-left h3 .it {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    text-transform: none; letter-spacing: -0.01em; color: var(--fg);
  }
.investor-promise {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 22px; line-height: 1.5; color: var(--fg-72);
    max-width: 38ch; text-wrap: pretty;
    padding: 32px 0; border-top: 1px solid var(--fg-10); border-bottom: 1px solid var(--fg-10);
  }
.investor-promise em { color: var(--accent); font-style: italic; }
.investor-channels {
    margin-top: 40px;
    display: flex; flex-direction: column; gap: 0;
  }
.ch {
    display: grid; grid-template-columns: 140px 1fr;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--fg-10);
    align-items: baseline;
  }
.ch .k {
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg-40);
  }
.ch .v {
    font-family: var(--display); font-weight: 700; font-size: 17px;
    letter-spacing: 0; text-transform: uppercase; color: var(--fg);
  }
.ch .v.sans { font-family: var(--body); font-weight: 300; font-size: 15px; text-transform: none; color: var(--fg-72); letter-spacing: 0; }
.investor-right .form { padding: 48px 48px 40px; }
.investor-right .fields { grid-template-columns: 1fr; }
.investor-right .field { border-right: 0; padding-left: 0 !important; padding-right: 0 !important; }
.investor-right .field::after { left: 0 !important; right: 0 !important; }
/* ─────── FOOTER ─────── */
  footer.site {
    padding: 120px 0 56px;
    background: var(--bg);
    border-top: 1px solid var(--fg-10);
  }
/* ─────── TWEAKS PANEL ─────── */
  #tweaks {
    position: fixed; bottom: 24px; right: 24px;
    background: rgba(13,13,13,0.95);
    backdrop-filter: blur(18px);
    border: 1px solid var(--fg-20);
    padding: 20px 22px 22px;
    min-width: 260px;
    z-index: 200;
    font-family: var(--body);
    display: none;
  }
#tweaks.on { display: block; }
#tweaks h6 {
    font-family: var(--body); font-weight: 500; font-size: 10px;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
    margin-bottom: 16px; display: flex; justify-content: space-between;
  }
#tweaks .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--fg-10); }
#tweaks .row label { font-size: 11px; color: var(--fg-72); letter-spacing: 0.05em; }
#tweaks .row input[type=color] { width: 34px; height: 22px; border: 1px solid var(--fg-20); background: transparent; padding: 0; cursor: pointer; }
#tweaks .row select { background: #000; color: var(--fg); border: 1px solid var(--fg-20); padding: 4px 8px; font: inherit; font-size: 11px; }
#tweaks .row input[type=checkbox] { accent-color: var(--accent); }
/* ─────── RESPONSIVE ─────── */
  @media (max-width: 1024px) {
    .startup-grid { grid-template-columns: 1fr; gap: 64px; }
    .founder { position: static; }
    .investor-wrap { grid-template-columns: 1fr; gap: 64px; }
    .opp-grid { grid-template-columns: 1fr; }
  }
@media (max-width: 820px) {
    :root { --pad-x: 24px; }
    .site-header, .site-header.scrolled { padding: 16px 0; }
    nav.primary { display: none; }
    .hero { padding: 140px 0 80px; }
    .hero .inner { grid-template-columns: 1fr; gap: 32px; }
    .hero .meta-col { padding-top: 0; display: flex; gap: 24px; align-items: baseline; }
    .hero .meta-col .doc-id { margin-bottom: 0; }
    .hero-anchors { grid-template-columns: 1fr; }
    .hero-anchor { padding: 22px 0 14px; }
    .hero-fine { position: static; margin-top: 64px; padding: 0 var(--pad-x); flex-direction: column; gap: 12px; }
    section.slab { padding: 80px var(--pad-x); }
    .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
    .section-head .idx { padding-top: 0; }
    .model-grid { grid-template-columns: 1fr; }
    .model-cell { min-height: 0; padding: 48px 32px; }
    .model-cell .num { font-size: 56px; margin-bottom: 32px; }
    .model-foot { flex-direction: column; align-items: flex-start; gap: 16px; font-size: 17px; }
    .opp-head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .opp-body { padding: 32px 28px; }
    .opp-name { font-size: 30px; }
    .opp-hook { font-size: 17px; }
    .opp-meta { grid-template-columns: 1fr 1fr; gap: 16px; }
    .opp-foot { grid-template-columns: 1fr; gap: 32px; }
    .opp-foot-copy { font-size: 18px; }
    .form { padding: 32px 24px 28px; }
    .form-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .fields { grid-template-columns: 1fr; }
    .field { border-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
    .field::after { left: 0 !important; right: 0 !important; }
    .form-foot { flex-direction: column; align-items: stretch; }
    .submit { width: 100%; justify-content: space-between; min-width: 0; }
    .ft-nav { gap: 32px 28px; }
    .ft-row { justify-content: flex-start; }
    .founder-statement { font-size: 22px; }
  }

/* ═══ CONTACT ═══ */
/* ─────── HEADER (same as Investments.html) ─────── */
  .site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 22px 0;
    transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease, padding .35s ease;
    border-bottom: 1px solid transparent;
  }
/* ─────── HERO ─────── */
  .c-hero {
    padding: 200px var(--pad-x) 80px;
    position: relative;
  }
.c-hero .inner {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 64px;
    align-items: start;
  }
.c-hero .meta-col { padding-top: 12px; }
.c-hero .meta-col .doc-id {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 18px; color: var(--accent); line-height: 1; margin-bottom: 18px;
  }
.c-hero .meta-col .doc-sub {
    font-family: var(--body); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--fg-40); line-height: 1.7;
  }
.c-hero h1 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(64px, 9vw, 144px);
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    max-width: 12ch;
    text-wrap: balance;
  }
.c-hero h1 .it {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    text-transform: none; letter-spacing: -0.025em;
  }
.c-hero .sub {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(20px, 1.7vw, 24px); line-height: 1.5;
    color: var(--fg-72);
    max-width: 46ch; margin-top: 40px;
    text-wrap: pretty;
  }
.c-hero .sub em { color: var(--accent); font-style: italic; }
/* ─────── BODY (form + sidebar) ─────── */
  .c-body {
    padding: 60px var(--pad-x) 140px;
    border-top: 1px solid var(--fg-10);
  }
.c-body .inner {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 64px;
  }
.c-body .idx { padding-top: 8px; }
/* ─────── FORM (.d-form / .f-row / .f-field / .f-submit) ─────── */
  .d-form {
    display: grid; grid-template-columns: 160px 1fr; gap: 64px; align-items: start;
    padding-top: 48px; border-top: 1px solid var(--fg-10);
  }
.d-form-body { max-width: 720px; width: 100%; }
.f-field {
    background: var(--bg); padding: 22px 24px;
    display: flex; flex-direction: column; gap: 10px;
    border: 1px solid var(--fg-10); border-top: 0; border-left: 0;
    transition: background .2s ease;
  }
.f-field:focus-within { background: var(--surface); }
.f-field label {
    font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-40);
    transition: color .2s ease;
  }
.f-field label .req { color: var(--accent); margin-left: 4px; }
.f-field:focus-within label { color: var(--accent); }
.f-field input, .f-field select, .f-field textarea {
    background: transparent; border: 0; color: var(--fg);
    font-family: var(--body); font-weight: 300; font-size: 16px; line-height: 1.5;
    outline: none; padding: 0; width: 100%;
    caret-color: var(--accent);
  }
.f-field textarea { resize: vertical; min-height: 140px; }
.f-field select { appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23C9A96E'><path d='M1 1l4 4 4-4'/></svg>");
    background-repeat: no-repeat; background-position: right 0 center; background-size: 10px 6px;
  }
.f-field select option { background: #0D0D0D; color: var(--fg); }
.f-disclaim em { font-family: var(--serif); font-style: italic; color: var(--accent); }
/* ─────── DIRECT BLOCK ─────── */
  .c-direct {
    margin-top: 96px;
    padding-top: 56px;
    border-top: 1px solid var(--fg-10);
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 64px;
  }
.c-direct .lab {
    font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
    padding-top: 8px;
  }
.c-direct .lab small {
    display: block; font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 14px; color: var(--fg-40); letter-spacing: 0; text-transform: none; margin-top: 16px; line-height: 1.5;
  }
.c-direct-rows { max-width: 720px; }
.c-direct .row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 32px;
    padding: 28px 0;
    border-bottom: 1px solid var(--fg-10);
    align-items: baseline;
  }
.c-direct .row:first-child { border-top: 1px solid var(--fg-10); }
.c-direct .row .k {
    font-family: var(--body); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg-40);
  }
.c-direct .row .v {
    font-family: var(--display); font-weight: 700; font-size: 22px;
    letter-spacing: 0; text-transform: uppercase; color: var(--fg);
    transition: color .2s ease;
  }
.c-direct .row a.v:hover { color: var(--accent); }
.c-direct .row .arr {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 18px; color: var(--fg-40);
    transition: transform .25s ease, color .25s ease;
    display: inline-block;
  }
.c-direct .row a:hover ~ .arr,
  .c-direct .row a:hover .arr { color: var(--accent); }
.c-direct .row a.v { display: inline-flex; align-items: baseline; gap: 14px; }
.c-direct .row a.v:hover .arr { color: var(--accent); transform: translateX(6px); }
/* ─────── FOOTER (same as Investments.html) ─────── */
  footer.site {
    padding: 120px 0 56px;
    background: var(--bg);
    border-top: 1px solid var(--fg-10);
  }
/* ─────── RESPONSIVE ─────── */
  @media (max-width: 1024px) {
    .c-hero .inner,
    .c-body .inner { grid-template-columns: 1fr; gap: 32px; }
    .c-hero .meta-col { display: flex; gap: 24px; align-items: baseline; padding-top: 0; }
    .c-hero .meta-col .doc-id { margin-bottom: 0; }
    .d-form { grid-template-columns: 1fr; gap: 32px; }
    .c-direct { grid-template-columns: 1fr; gap: 32px; }
  }
@media (max-width: 820px) {
    :root { --pad-x: 24px; }
    .site-header, .site-header.scrolled { padding: 16px 0; }
    nav.primary { display: none; }
    .c-hero { padding: 140px 0 60px; }
    .c-hero h1 { font-size: clamp(52px, 14vw, 88px); }
    .c-hero .sub { font-size: 18px; margin-top: 28px; }
    .c-body { padding: 48px var(--pad-x) 80px; }
    .f-row { grid-template-columns: 1fr; }
    .f-field { padding: 18px 20px; }
    .f-submit { width: 100%; justify-content: space-between; }
    .c-direct { margin-top: 64px; padding-top: 40px; }
    .c-direct .row {
      grid-template-columns: 1fr;
      gap: 8px;
      padding: 22px 0;
    }
    .c-direct .row .v { font-size: 18px; }
    .c-direct .row .arr { display: none; }
    .ft-nav { gap: 32px 28px; margin-bottom: 56px; }
    .ft-row { justify-content: flex-start; }
  }

/* ═══ FAQ ═══ */
/* ─────── HERO ─────── */
  .hero {
    min-height: 78vh;
    padding: 180px var(--pad-x) 100px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative;
  }
.hero h1 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(56px, 8.4vw, 132px);
    line-height: 0.94;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    max-width: 14ch;
    text-wrap: balance;
  }
.hero h1 .punct {
    color: var(--accent);
    font-family: var(--serif); font-style: italic; font-weight: 300;
  }
.hero .sub {
    font-family: var(--body); font-weight: 300;
    font-size: 18px; line-height: 1.75; color: var(--fg-72);
    max-width: 56ch; margin-top: 48px;
  }
.hero-anchors {
    margin-top: 96px;
    padding-top: 40px; border-top: 1px solid var(--fg-10);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--fg-10);
  }
.hero-anchor {
    background: var(--bg);
    padding: 28px 24px 12px 0;
    display: flex; align-items: baseline; justify-content: space-between;
    font-family: var(--body); font-weight: 400; font-size: 11px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--fg);
    transition: color .3s ease;
    cursor: pointer;
  }
.hero-anchor .txt { display: inline-flex; align-items: baseline; gap: 14px; }
/* ─────── SECTION SHELL ─────── */
  section.slab { padding: 120px var(--pad-x); border-top: 1px solid var(--fg-10); position: relative; }
.section-head {
    display: grid; grid-template-columns: 200px 1fr; gap: 64px;
    margin-bottom: 80px; align-items: start;
  }
/* ─────── FAQ ─────── */
  .faq-frame {
    display: grid; grid-template-columns: 200px 1fr;
    gap: 64px; align-items: start;
  }
.faq-side {
    position: sticky; top: 120px;
  }
.faq-side .cat-list {
    display: flex; flex-direction: column; gap: 0;
    border-top: 1px solid var(--fg-10);
  }
.faq-side .cat {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--fg-10);
    font-family: var(--body); font-weight: 400; font-size: 11px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--fg-60);
    cursor: pointer;
    transition: color .2s ease, padding .25s ease;
  }
.faq-side .cat .ix {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 13px; color: var(--accent); letter-spacing: 0;
    text-transform: none;
  }
.faq-side .cat:hover { color: var(--fg); padding-left: 6px; }
.faq-side .cat.active { color: var(--accent); }
.faq-side .cat.active .ix { color: var(--fg); }
.faq-side .aside-note {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--fg-10);
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 17px; line-height: 1.5; color: var(--fg-60);
    max-width: 22ch; text-wrap: pretty;
  }
.faq-side .aside-note em { color: var(--accent); font-style: italic; }
.faq-list {
    border-top: 1px solid var(--fg-10);
  }
.faq-item {
    border-bottom: 1px solid var(--fg-10);
  }
.faq-q {
    display: grid; grid-template-columns: 56px 1fr 40px;
    gap: 24px;
    align-items: baseline;
    padding: 36px 8px 36px 0;
    cursor: pointer;
    transition: padding .3s ease;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    color: inherit;
    font: inherit;
  }
.faq-q:hover { padding-left: 8px; }
.faq-q .qn {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 17px; color: var(--accent); line-height: 1;
    align-self: center;
  }
.faq-q .qt {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(22px, 2vw, 28px);
    letter-spacing: 0; text-transform: uppercase;
    line-height: 1.2;
    text-wrap: balance;
    transition: color .3s ease;
  }
.faq-q .qt .it {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    text-transform: none; letter-spacing: -0.005em;
  }
.faq-q .toggle {
    width: 24px; height: 24px;
    position: relative;
    align-self: center;
    justify-self: end;
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
  }
.faq-q .toggle::before,
  .faq-q .toggle::after {
    content: "";
    position: absolute;
    background: var(--fg);
    transition: background .3s ease, transform .4s cubic-bezier(.2,.7,.2,1);
  }
.faq-q .toggle::before {
    left: 0; right: 0; top: 50%;
    height: 1px; transform: translateY(-50%);
  }
.faq-q .toggle::after {
    top: 0; bottom: 0; left: 50%;
    width: 1px; transform: translateX(-50%);
  }
.faq-item.open .faq-q .toggle { transform: rotate(135deg); }
.faq-item.open .faq-q .toggle::before,
  .faq-item.open .faq-q .toggle::after { background: var(--accent); }
.faq-item.open .faq-q .qt { color: var(--accent); }
.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1);
  }
.faq-a > .faq-a-inner { overflow: hidden; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner {
    display: grid; grid-template-columns: 56px 1fr 40px;
    gap: 24px;
    padding: 0 8px 0 0;
  }
.faq-a-inner .a-col {
    grid-column: 2 / 3;
    padding: 0 0 44px;
    max-width: 64ch;
  }
.faq-a-inner .a-col p {
    font-family: var(--body); font-weight: 300;
    font-size: 17px; line-height: 1.8; color: var(--fg-72);
    margin-bottom: 18px;
    text-wrap: pretty;
  }
.faq-a-inner .a-col p:last-child { margin-bottom: 0; }
.faq-a-inner .a-col p em {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    color: var(--fg);
  }
.faq-a-inner .a-col .a-tag {
    display: inline-block;
    font-family: var(--body); font-weight: 400; font-size: 10px;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-40);
    margin-bottom: 18px;
  }
.faq-a-inner .a-col .a-tag::before { content: "—"; color: var(--accent); margin-right: 10px; }
.faq-a-inner .a-col .a-foot {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--fg-10);
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--body); font-weight: 400; font-size: 10px;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-40);
  }
.faq-a-inner .a-col .a-foot a {
    color: var(--fg);
    border-bottom: 1px solid var(--fg-20);
    padding-bottom: 2px;
    transition: color .25s ease, border-color .25s ease;
  }
.faq-a-inner .a-col .a-foot a:hover { color: var(--accent); border-color: var(--accent); }
/* category stripe between groups */
  .faq-cat-head {
    padding: 56px 0 28px;
    display: grid; grid-template-columns: 56px 1fr 40px;
    gap: 24px; align-items: baseline;
    border-bottom: 1px solid var(--fg-10);
  }
.faq-cat-head:first-child { padding-top: 0; }
.faq-cat-head .ix {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 17px; color: var(--accent); line-height: 1;
  }
.faq-cat-head .lbl {
    font-family: var(--body); font-weight: 400; font-size: 11px;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg);
  }
.faq-cat-head .ct {
    justify-self: end;
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 14px; color: var(--fg-40);
  }
/* ─────── STILL HAVE QUESTIONS ─────── */
  #still { background: var(--surface); }
.still-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 96px; align-items: start;
  }
.still-left h3 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(36px, 4.5vw, 64px); line-height: 0.98;
    letter-spacing: -0.005em; text-transform: uppercase;
    text-wrap: balance; max-width: 14ch;
    margin-bottom: 40px;
  }
.still-left h3 .it {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    text-transform: none; letter-spacing: -0.01em; color: var(--fg);
  }
.still-left h3 .punct {
    color: var(--accent);
    font-family: var(--serif); font-style: italic; font-weight: 300;
  }
.still-promise {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 22px; line-height: 1.5; color: var(--fg-72);
    max-width: 38ch; text-wrap: pretty;
    padding: 32px 0; border-top: 1px solid var(--fg-10); border-bottom: 1px solid var(--fg-10);
  }
.still-promise em { color: var(--accent); font-style: italic; }
.still-right {
    display: flex; flex-direction: column; gap: 0;
    border-top: 1px solid var(--fg-10);
  }
.still-row {
    display: grid; grid-template-columns: 64px 1fr auto;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid var(--fg-10);
    align-items: baseline;
    transition: padding .3s ease;
  }
.still-row:hover { padding-left: 6px; }
.still-row .ix {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 17px; color: var(--accent);
  }
.still-row .who {
    font-family: var(--display); font-weight: 700; font-size: 22px;
    letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.2;
  }
.still-row .who .it {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    text-transform: none; letter-spacing: -0.005em; color: var(--fg-60);
  }
.still-row .what {
    font-family: var(--body); font-size: 11px; letter-spacing: 0.05em;
    color: var(--fg-60);
    margin-top: 6px;
    line-height: 1.5;
    text-transform: none;
  }
.still-row .arr {
    font-family: var(--body); font-size: 11px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--fg-40);
    display: inline-flex; align-items: center; gap: 12px;
    transition: color .25s ease;
  }
.still-row:hover .arr { color: var(--accent); }
.still-row .arr svg { width: 18px; height: 10px; stroke: currentColor; transition: transform .3s ease; }
.still-row:hover .arr svg { transform: translateX(6px); }
/* ─────── RESPONSIVE ─────── */
  @media (max-width: 1024px) {
    .still-grid { grid-template-columns: 1fr; gap: 64px; }
    .faq-frame { grid-template-columns: 1fr; gap: 40px; }
    .faq-side { position: static; }
    .faq-side .cat-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; border-top: 1px solid var(--fg-10); }
    .faq-side .aside-note { display: none; }
  }
@media (max-width: 820px) {
    :root { --pad-x: 24px; }
    .site-header, .site-header.scrolled { padding: 16px 0; }
    nav.primary { display: none; }

    .hero { padding: 130px 0 80px; min-height: 0; }
    .hero .inner { grid-template-columns: 1fr; gap: 32px; padding: 0 var(--pad-x); }
    .hero .meta-col { padding-top: 0; display: flex; gap: 24px; align-items: baseline; }
    .hero .meta-col .doc-id { margin-bottom: 0; }
    .hero h1 { font-size: clamp(56px, 16vw, 96px); }
    .hero .sub { margin-top: 32px; font-size: 16px; }
    .hero-anchors { grid-template-columns: 1fr; margin-top: 64px; }
    .hero-anchor { padding: 20px 0 12px; }
    .hero-fine { position: static; margin-top: 56px; padding: 0 var(--pad-x); flex-direction: column; gap: 12px; }

    section.slab { padding: 72px var(--pad-x); }
    .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
    .section-head .idx { padding-top: 0; }

    .faq-side .cat-list { grid-template-columns: 1fr; }

    .faq-q { grid-template-columns: 32px 1fr 24px; gap: 16px; padding: 28px 0; }
    .faq-q .qn { font-size: 14px; }
    .faq-q .qt { font-size: 19px; }
    .faq-q .toggle { width: 18px; height: 18px; }
    .faq-a-inner { grid-template-columns: 32px 1fr 24px; gap: 16px; }
    .faq-a-inner .a-col { padding-bottom: 32px; }
    .faq-a-inner .a-col p { font-size: 15px; }
    .faq-cat-head { grid-template-columns: 32px 1fr 24px; gap: 16px; padding: 40px 0 20px; }

    .still-grid { gap: 48px; }
    .still-row { grid-template-columns: 36px 1fr; gap: 16px; }
    .still-row .arr { grid-column: 2 / 3; padding-top: 12px; }
    .still-row .who { font-size: 18px; }

    .ft-nav { gap: 24px 24px; }
    .ft-row { justify-content: flex-start; }
  }

/* ═══ AJUSTES DEL SITIO REAL ═══
   El prototipo usaba rectángulos oscuros de relleno donde ahora van fotos reales.
   Con fotos claras el texto blanco encima se pierde, así que la portada lleva su velo. */
.a-hero-img { position: relative; }
.a-hero-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 32%, rgba(0,0,0,.72) 78%, rgba(0,0,0,.94) 100%),
    linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.12) 55%);
}
.story-block .figure, .story-block .figure.wide { position: relative; overflow: hidden; }

/* El menú y el pie se alinean con el ancho del contenido (1280 px), no con el borde de la pantalla.
   Al juntar el CSS de las siete páginas, la versión sin contenedor quedaba de última y los pegaba
   a los extremos en pantallas anchas. */
.site-header .hdr-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; }
footer.site > .wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 900px) {
  .site-header .hdr-inner, footer.site > .wrap { padding: 0 24px; }
}

/* El titular de Nosotros va de corrido: la itálica venía como bloque y partía la frase
   justo después de la palabra en cursiva. */
.a-hero-headline h1 .it { display: inline; }
.a-hero-headline h1 { max-width: 16ch; }

/* ═══ PANTALLAS INTERMEDIAS Y MÓVIL ═══ */

/* El menú no cabía de corrido entre 900 y 1200 px: los últimos enlaces se salían. */
@media (min-width: 901px) and (max-width: 1200px) {
  .site-header .hdr-inner { padding: 0 24px; gap: 20px; }
  nav.primary > div:first-child { gap: 20px; }
  nav.primary a { font-size: 10px; letter-spacing: .14em; }
  .lang { margin-left: 16px; padding-left: 16px; }
  .brand-mark .wm { font-size: 14px; }
}
@media (min-width: 901px) and (max-width: 1040px) { .lang { display: none; } }

/* Portada de Nosotros: por debajo de 1200 deja de ser capas superpuestas y pasa a fluir.
   La línea fina de abajo se parte en varios renglones y se montaba encima del titular. */
@media (max-width: 1200px) {
  .a-hero {
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 100svh; padding: 120px 0 28px;
  }
  .a-hero-meta, .a-hero-headline, .a-hero-fine { position: static; }
  .a-hero-meta { margin-bottom: auto; }
  .a-hero-headline { margin-top: 40px; }
  .a-hero-fine { margin-top: 28px; }
  .a-hero-headline h1 { max-width: 100%; }
}
@media (max-width: 560px) {
  .a-hero-headline h1 { font-size: clamp(38px, 11.5vw, 60px); }
  .a-hero { padding-top: 104px; }
}

/* En móvil manda el botón de menú. Esta regla va al final a propósito: el CSS de las páginas
   nuevas volvía a declarar nav.primary como flex y revivía el menú en pantallas pequeñas. */
@media (max-width: 900px) {
  nav.primary { display: none !important; }
  .menu-toggle { display: inline-flex !important; }

  nav.primary.abierto {
    display: flex !important; flex-direction: column; align-items: flex-start; gap: 0;
    position: fixed; inset: 64px 0 0; z-index: 99;
    background: rgba(0,0,0,.97); backdrop-filter: blur(20px);
    padding: 24px; overflow-y: auto;
  }
  nav.primary.abierto > div:first-child { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  nav.primary.abierto a {
    display: block; width: 100%; padding: 20px 0; font-size: 13px; letter-spacing: .2em;
    border-bottom: 1px solid var(--fg-10);
  }
  nav.primary.abierto .lang {
    display: flex !important; margin: 24px 0 0; padding: 0; border: 0;
  }
  body.menu-abierto { overflow: hidden; }
}

/* ── TABLET (641–1024) ──
   El sitio saltaba de tres columnas a una sola: en un iPad se leía como un móvil estirado.
   Aquí vive el estado intermedio: dos columnas, fichas en fila y titulares a escala. */
@media (min-width: 641px) and (max-width: 1024px) {
  .hero .inner, .c-hero .inner, .c-body .inner { grid-template-columns: 1fr !important; gap: 32px; }
  .hero .meta-col, .c-hero .meta-col { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; padding-top: 0; }
  .hero .meta-col .doc-id, .c-hero .meta-col .doc-id { margin-bottom: 0; }
  .hero-anchors { grid-template-columns: repeat(2, 1fr) !important; }
  .logo-field { grid-template-columns: repeat(2, 1fr) !important; }
  .logo-item { min-height: 300px; padding: 32px; }
  .logo-item .lg { font-size: clamp(32px, 5vw, 44px); }
  .model-grid, .pillar-grid, .mv-grid, .opp-grid, .articles { grid-template-columns: repeat(2, 1fr) !important; }
  .faq-frame { grid-template-columns: 1fr !important; }
  .faq-side .cat-list { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .d-form { grid-template-columns: 1fr !important; }
  .hero-foot-meta { grid-template-columns: repeat(3, auto) !important; gap: 28px; }
  .hero-foot-meta dd { font-size: 17px; }
  .usp-inner { grid-template-columns: 1fr !important; gap: 32px; }
  .usp-head { grid-template-columns: 1fr !important; gap: 40px; }
  .usp-cta { grid-template-columns: repeat(2, 1fr) !important; }
  .portfolio-head, .blog-head { grid-template-columns: 1fr !important; gap: 20px; }
  .story-block, .story-block.reversed { grid-template-columns: 1fr !important; }
  .origin-moment { grid-template-columns: 1fr !important; gap: 12px; }
}

/* ── TELÉFONO (≤640) ── todo en una columna */
@media (max-width: 640px) {
  .hero .inner, .c-hero .inner, .c-body .inner { grid-template-columns: 1fr !important; gap: 28px; }
  .hero .meta-col, .c-hero .meta-col { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; padding-top: 0; }
  .hero-anchors { grid-template-columns: 1fr !important; }
  .model-grid, .pillar-grid, .mv-grid, .opp-grid, .articles, .logo-field { grid-template-columns: 1fr !important; }
  .faq-frame, .d-form, .f-row, .usp-cta { grid-template-columns: 1fr !important; }
  .hero-foot-meta { grid-template-columns: 1fr 1fr !important; gap: 20px; }
}

/* En cualquier pantalla pequeña, un titular largo puede partir antes que salirse */
@media (max-width: 1024px) {
  .hero h1, .c-hero h1, .a-hero-headline h1, .slab h2, .section-head h2 { overflow-wrap: anywhere; }
}

/* En tarjeta angosta, la descripción y el sector no caben hombro con hombro */
@media (max-width: 1024px) {
  .logo-item .foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .logo-item .sec { text-align: left; margin-left: 0; }
}

/* Reconocimientos: un icono de línea fina por tipo (premio, prensa, charla) */
.origin-moment .seasonal .rec-ico {
  display: block; width: 26px; height: 26px; margin-bottom: 14px;
  color: var(--accent); opacity: .9;
}
@media (max-width: 1024px) {
  .origin-moment .seasonal .rec-ico { margin-bottom: 8px; }
}