/* ==========================================================================
   Crestbrick homepage redesign — editorial layer.
   Page-scoped (index.html only). Reuses tokens/vars from css/styles.css so
   colours stay identical to the rest of the site — this file only changes
   layout, spacing, typography scale and motion for the homepage sections.
   ========================================================================== */

/* ---- Spacing / measure utilities ---------------------------------------- */
.section--spacious { padding-block: clamp(72px, 12vw, 168px); }
.section--spacious + .section--spacious { padding-top: 0; }
.measure { max-width: 60ch; }
.measure-sm { max-width: 44ch; }
@media (max-width: 640px) {
  .section--spacious { padding-block: clamp(64px, 14vw, 100px); }
  .measure, .measure-sm { max-width: 36ch; }
}

/* Oversized editorial heading — bigger ceiling than the sitewide .headline */
.h-xl { font-size: clamp(2.4rem, 6.2vw, 5.4rem); line-height: .98; letter-spacing: -.03em; font-weight: 800; }
.h-xl .accent, .h-xl .serif-i { font-family: var(--serif); font-weight: 400; font-style: italic; }

/* ---- Nav: cinematic overlay state (home hero only) ---------------------- */
body.home .nav-outer { transition: padding .3s ease; }
body.home .nav-outer.is-overlay .nav {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  box-shadow: none;
}
body.home .nav-outer.is-overlay .nav__brand,
body.home .nav-outer.is-overlay .nav__links a,
body.home .nav-outer.is-overlay .nav__dd-btn,
body.home .nav-outer.is-overlay .nav__sep { color: var(--cream); }
body.home .nav-outer.is-overlay .nav__links a:hover,
body.home .nav-outer.is-overlay .nav__dd-btn:hover { color: var(--lime); }
body.home .nav-outer.is-overlay .nav__sep { background: rgba(246,242,239,.35); }
body.home .nav-outer.is-overlay .nav__account { background: transparent; border-color: rgba(246,242,239,.4); color: var(--cream); }
body.home .nav-outer:not(.is-overlay) .nav { transition: background .3s ease, box-shadow .3s ease; }

/* Mega menu (Invest dropdown, homepage copy only) */
.nav__dd-menu--mega { min-width: 460px; padding: 22px; grid-template-columns: 1.3fr 1fr; gap: 22px; }
.nav__dd.open .nav__dd-menu--mega { display: grid; }
@media (hover: hover) and (min-width: 901px) { .nav__dd:hover .nav__dd-menu--mega { display: grid; } }
.nav__dd-menu--mega .mega__rows { display: flex; flex-direction: column; }
.nav__dd-menu--mega .mega__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 10px; border-radius: 10px; }
.nav__dd-menu--mega .mega__row:hover { background: var(--paper); }
.nav__dd-menu--mega .mega__row b { font-size: 1.02rem; font-weight: 700; color: var(--green-950); }
.nav__dd-menu--mega .mega__row span { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lime-700); }
.nav__dd-menu--mega .mega__all { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 14px; font-weight: 700; font-size: .9rem; color: var(--green-950); }
.nav__dd-menu--mega .mega__media { border-radius: 12px; overflow: hidden; position: relative; }
.nav__dd-menu--mega .mega__media img { width: 100%; height: 100%; object-fit: cover; }
.nav__dd-menu--mega .mega__media span { position: absolute; left: 10px; bottom: 10px; background: rgba(15,36,23,.72); color: var(--cream); font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; padding: .4em .7em; border-radius: 999px; }
@media (max-width: 900px) { .nav__dd-menu--mega { grid-template-columns: 1fr; min-width: 0; } .nav__dd-menu--mega .mega__media { display: none; } }

/* ---- Hero: cinematic, typography-led ------------------------------------ */
.hero--cinematic { min-height: 92vh; display: flex; align-items: flex-end; padding-top: 0; padding-bottom: clamp(56px, 8vw, 96px); }
.hero--cinematic .hero__stage { position: absolute; inset: 0; z-index: 0; }
.hero--cinematic .hero__stage img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero--cinematic .hero__stage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,42,30,.55) 0%, rgba(12,42,30,.55) 30%, rgba(12,42,30,.88) 78%, rgba(12,42,30,.97) 100%);
}
.hero--cinematic .wrap { position: relative; z-index: 2; width: 100%; }
.hero--cinematic .hero__eyebrow-row { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.hero--cinematic .hero__eyebrow-row .rule { flex: 0 0 60px; height: 1px; background: var(--line-dark); }
.hero--cinematic .hero__headline { max-width: 15ch; }
.hero--cinematic .hero__sub { margin-top: 26px; max-width: 42ch; color: var(--muted-dark); }
.hero--cinematic .btn-row { margin-top: 34px; }
@media (max-width: 640px) {
  .hero--cinematic { min-height: 82vh; align-items: flex-end; }
  .hero--cinematic .hero__sub { max-width: 34ch; }
}

/* ---- Credibility strip --------------------------------------------------- */
.cred-strip { display: flex; flex-wrap: wrap; }
.cred-item { flex: 1 1 0; min-width: 140px; padding: 0 28px; border-left: 1px solid var(--line-dark); }
.cred-item:first-child { border-left: 0; padding-left: 0; }
.cred-num { font-family: var(--sans); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -.02em; line-height: 1; color: var(--lime); }
.cred-cap { font-size: .84rem; color: var(--muted-dark); margin-top: 8px; }
.cred-trust { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; font-size: .8rem; color: var(--muted-dark); }
.cred-trust b { color: var(--cream); font-weight: 700; }
@media (max-width: 700px) {
  .cred-item { flex: 1 1 45%; border-left: 0; padding: 0; margin-bottom: 18px; }
  .cred-item::before { content: ""; display: block; width: 28px; height: 1px; background: var(--line-dark); margin-bottom: 12px; }
}

/* ---- Thesis --------------------------------------------------------------- */
.thesis__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 800px) { .thesis__grid { grid-template-columns: 1fr; } }
.criteria-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 34px 0 30px; }
.criteria-chip {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); padding: .3em 0; opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}
.criteria-line.in .criteria-chip { opacity: 1; transform: none; }
.criteria-line.in .criteria-chip:nth-child(1) { transition-delay: .05s; }
.criteria-line.in .criteria-chip:nth-child(3) { transition-delay: .2s; }
.criteria-line.in .criteria-chip:nth-child(5) { transition-delay: .35s; }
.criteria-line.in .criteria-chip:nth-child(7) { transition-delay: .5s; }
.criteria-line.in .criteria-chip:nth-child(9) { transition-delay: .65s; }
.criteria-sep { color: var(--lime-700); padding: 0 .7em; opacity: .7; }
.criteria-label { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lime-700); display: block; margin-bottom: 4px; }

/* ---- Where we invest: editorial rows -------------------------------------- */
.mkt-rows { border-top: 1px solid var(--line-dark); }
.bg-cream .mkt-rows, .bg-paper .mkt-rows { border-top-color: var(--line); }
.mkt-row {
  position: relative; display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 24px;
  padding: clamp(28px, 4vw, 46px) 4px; border-bottom: 1px solid var(--line-dark); overflow: hidden;
  text-decoration: none; color: inherit;
}
.bg-cream .mkt-row, .bg-paper .mkt-row { border-bottom-color: var(--line); }
.mkt-row__num { font-family: var(--mono); font-size: .85rem; color: var(--lime-700); }
.mkt-row__main { position: relative; z-index: 2; }
.mkt-row__name { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: 10px; }
.mkt-row__tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lime-700); display: block; margin-bottom: 10px; }
.mkt-row__desc { max-width: 46ch; color: var(--muted); }
.bg-green .mkt-row__desc, .bg-green-950 .mkt-row__desc { color: var(--muted-dark); }
.mkt-row__go { position: relative; z-index: 2; font-weight: 700; font-size: .92rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .4em; }
.mkt-row__go .arrow { display: inline-block; transition: transform .2s ease; }
.mkt-row__media { position: absolute; inset: 0; z-index: 1; opacity: .12; transition: opacity .5s ease; }
.mkt-row__media img { width: 100%; height: 100%; object-fit: cover; }
.mkt-row__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--green-950) 0%, rgba(15,36,23,.55) 45%, rgba(15,36,23,.15) 75%, transparent 100%); }
.bg-cream .mkt-row__media::after, .bg-paper .mkt-row__media::after { background: linear-gradient(90deg, var(--cream) 0%, rgba(243,240,230,.7) 45%, rgba(243,240,230,.25) 75%, transparent 100%); }
@media (hover: hover) and (min-width: 901px) {
  .mkt-row:hover .mkt-row__media { opacity: 1; }
  .mkt-row:hover .mkt-row__go .arrow { transform: translateX(5px); }
}
@media (max-width: 900px) {
  .mkt-row { grid-template-columns: 40px 1fr; }
  .mkt-row__go { grid-column: 2; margin-top: 4px; }
  .mkt-row__media { opacity: .22; }
}

/* ---- Featured opportunities ------------------------------------------------ */
.opp-feature-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; }
.opp-feature { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; color: var(--cream); }
.opp-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s ease; }
.opp-feature:hover img { transform: scale(1.035); }
.opp-feature::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12,42,30,0) 30%, rgba(12,42,30,.92) 100%); }
.opp-feature__body { position: relative; z-index: 2; padding: 30px 32px; width: 100%; }
.opp-feature__tag { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); margin-bottom: 10px; display: block; }
.opp-feature__name { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }
.opp-feature__stats { display: flex; gap: 32px; margin-bottom: 16px; flex-wrap: wrap; }
.opp-feature__stats b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--lime); }
.opp-feature__stats span { font-size: .78rem; color: var(--muted-dark); }
.opp-feature__why { max-width: 46ch; font-size: .92rem; color: #e7eede; margin-bottom: 16px; }
.opp-mini-stack { display: flex; flex-direction: column; gap: 22px; }
.opp-mini { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 210px; display: flex; align-items: flex-end; color: var(--cream); flex: 1; }
.opp-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s ease; }
.opp-mini:hover img { transform: scale(1.035); }
.opp-mini::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12,42,30,0) 35%, rgba(12,42,30,.9) 100%); }
.opp-mini__body { position: relative; z-index: 2; padding: 20px 22px; width: 100%; }
.opp-mini__tag { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); display: block; margin-bottom: 6px; }
.opp-mini__name { font-size: 1.15rem; font-weight: 700; margin-bottom: 4px; }
.opp-mini__meta { font-size: .8rem; color: var(--muted-dark); }
@media (max-width: 900px) {
  .opp-feature-grid { grid-template-columns: 1fr; }
  .opp-mini-stack { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); scrollbar-width: none; }
  .opp-mini-stack::-webkit-scrollbar { display: none; }
  .opp-mini { flex: 0 0 82%; scroll-snap-align: start; min-height: 240px; }
}

/* ---- The Crestbrick Difference: chapters ----------------------------------- */
.diff-chapter { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.diff-chapter + .diff-chapter { margin-top: clamp(64px, 8vw, 120px); }
.diff-chapter--rev { grid-template-columns: 1.05fr .95fr; }
.diff-chapter--rev .diff-chapter__media { order: 2; }
@media (max-width: 860px) { .diff-chapter, .diff-chapter--rev { grid-template-columns: 1fr; } .diff-chapter--rev .diff-chapter__media { order: 0; } }
.diff-chapter__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
.diff-chapter__media img { width: 100%; height: 100%; object-fit: cover; }
.diff-timeline { margin-top: 28px; }
.diff-step { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line-dark); }
.diff-step:last-child { padding-bottom: 0; }
.diff-step__n { font-family: var(--mono); font-size: .78rem; color: var(--lime); flex: 0 0 auto; }
.diff-step__body h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.diff-step__body p { font-size: .92rem; color: var(--muted-dark); max-width: 40ch; }
.care-journey { display: flex; flex-direction: column; margin-top: 28px; }
.care-stage { display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.care-stage:last-child { border-bottom: 1px solid var(--line); }
.care-stage__tag { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lime-700); }
.care-stage__body h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.care-stage__body p { color: var(--muted); max-width: 46ch; font-size: .95rem; }
@media (max-width: 640px) { .care-stage, .diff-step { grid-template-columns: 60px 1fr; } }

/* ---- Track record: big numbers, no cards ----------------------------------- */
.track-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.track-item { padding-top: 20px; border-top: 1px solid var(--line); }
.track-num { font-weight: 800; font-size: clamp(2.6rem, 5.5vw, 4.2rem); letter-spacing: -.03em; line-height: 1; color: var(--green-950); }
.track-cap { margin-top: 10px; color: var(--muted); font-size: .92rem; }
@media (max-width: 800px) { .track-grid { grid-template-columns: repeat(2, 1fr); } }
.partners--muted .logos-track img { opacity: .5; }
.partners--muted .logos-track img:hover { opacity: 1; }

/* ---- Reference desk: featured + list --------------------------------------- */
.ref-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (max-width: 860px) { .ref-grid { grid-template-columns: 1fr; } }
.ref-featured { display: block; text-decoration: none; color: inherit; }
.ref-featured__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/11; background: var(--green-850); margin-bottom: 20px; }
.ref-featured__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ref-featured:hover .ref-featured__media img { transform: scale(1.03); }
.ref-featured__tag { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lime-700); display: block; margin-bottom: 10px; }
.ref-featured__title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.ref-featured__dek { color: var(--muted); max-width: 52ch; }
.ref-list__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.ref-list__row:last-child { border-bottom: 1px solid var(--line); }
.ref-list__tag { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lime-700); display: block; margin-bottom: 6px; }
.ref-list__row h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.ref-list__row .arrow { transition: transform .2s ease; flex: 0 0 auto; }
.ref-list__row:hover .arrow { transform: translateX(5px); }

/* ---- Founders / human section ---------------------------------------------- */
.founders { position: relative; border-radius: var(--radius); overflow: hidden; }
.founders__media { aspect-ratio: 16/9; }
.founders__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founders__panel {
  position: relative; margin-top: -100px; z-index: 2; max-width: 620px; margin-inline: auto;
  background: var(--paper); border-radius: var(--radius); padding: 34px clamp(24px, 4vw, 44px);
  box-shadow: var(--shadow); text-align: left;
}
.founders__panel p { color: var(--muted); max-width: 58ch; }
@media (max-width: 700px) {
  .founders__panel { margin-top: -56px; padding: 24px; }
}

/* ---- Final CTA: 2-step enquiry ---------------------------------------------- */
.cta-step { transition: opacity .3s ease; }
.cta-step[hidden] { display: none; }
.cta-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; max-width: 440px; }
.cta-choice {
  font: inherit; text-align: left; padding: 16px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  cursor: pointer; font-weight: 700; font-size: .98rem; transition: background .15s, border-color .15s;
}
.cta-choice:hover, .cta-choice:focus-visible { background: #fff; border-color: var(--lime-700); }
.cta-back { background: none; border: 0; color: var(--muted); font-size: .85rem; margin-bottom: 16px; cursor: pointer; padding: 0; text-decoration: underline; }

/* ---- Instagram follow (footer, replacing full section) --------------------- */
.footer__follow { font-size: .85rem; }
.footer__follow a { display: inline; padding: 0; text-decoration: underline; }

/* ---- Reveal timing stagger for grouped items -------------------------------- */
.stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* ---- Generic arrow-hover + link-arrow utility ------------------------------ */
.link-arrow { font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: .4em; }
.arrow { display: inline-block; transition: transform .2s ease; }
.opp-feature:hover .arrow, .opp-mini:hover .arrow, .ref-featured:hover .arrow { transform: translateX(5px); }

/* ---- Refinement pass: hero proof line, trust bar, journey/logo density ---- */
.hero--cinematic .hero__proof { margin-top: 24px; font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--muted-dark); }
.hero--cinematic .hero__proof span { color: var(--lime); font-weight: 700; }

.trust-bar { padding: 14px 0; }
.trust-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; color: var(--muted-dark); }
.trust-bar__inner b { color: var(--cream); font-weight: 700; }
.trust-bar__sep { opacity: .5; }
.trust-bar__link { margin-left: auto; color: var(--lime); font-weight: 700; text-decoration: none; }
.trust-bar__link:hover { color: var(--cream); }
@media (max-width: 640px) { .trust-bar__link { margin-left: 0; width: 100%; } }

.care-journey--dark .care-stage { border-top-color: var(--line-dark); }
.care-journey--dark .care-stage:last-child { border-bottom-color: var(--line-dark); }
@media (min-width: 901px) {
  .care-journey { flex-direction: row; gap: 32px; }
  .care-journey .care-stage { display: flex; flex-direction: column; gap: 8px; border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 22px; }
  .care-journey--dark .care-stage { border-left-color: var(--line-dark); }
  .care-journey .care-stage:last-child { border-bottom: 0; }
}

.partners--muted .logos-track { gap: clamp(28px, 4vw, 56px); animation: linear-scroll-3 28s linear infinite; }
.partners--muted .logos-track img { height: 60px; }
@keyframes linear-scroll-3 { 0% { transform: translateX(0); } 100% { transform: translateX(-33.3334%); } }
@media (prefers-reduced-motion: reduce) { .partners--muted .logos-track { animation: none; } }

.field__optional { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .65; }