/* Home page sections from data/home.js (loaded on index.html only, last).
   Thesis statement, the ITI Group platform (blocks assemble on scroll;
   Alternatives has an orbit) and what Fund I proved (five-column proof row).
   How we invest is a painted strip styled in paint.css.
   Motion is transform / clip-path only and stops under reduced motion. */

.home-h2 { max-width: 22ch; }
.home-h2 em { font-style: italic; }

/* ---------------------------------------------------------------- thesis */

.thesis { display: grid; gap: 18px; max-width: 46ch; }
.thesis__lead {
  font-family: var(--face-text);
  font-stretch: normal;
  font-weight: 300;
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.4rem);
  line-height: 1.24;
  letter-spacing: -0.012em;
  color: var(--ink-warm);
}
.thesis__close {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--face-display);
  font-weight: 500;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  color: var(--red);
}
.thesis__close::before { content: ""; width: 40px; height: 2px; background: var(--accent); }

/* -------------------------------------------------------------- platform */

.group-home__head { display: grid; gap: 18px; max-width: 60ch; }
.group-home__lede { color: var(--ink-soft); }
.group-home__figures {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--rule-strong);
}
.group-home__figures li { padding: 18px 16px 18px 0; }
.group-home__figures li + li { border-left: 1px solid var(--rule); padding-left: clamp(14px, 2vw, 24px); }
.group-home__value { display: block; font-family: var(--face-display); font-weight: 500; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); line-height: 1; letter-spacing: -0.02em; }
.group-home__label { display: block; margin-top: 8px; font-size: 0.9rem; color: var(--muted); }
.group-home__src { margin-top: 8px; font-size: 0.78rem; color: var(--muted); }

.assemble {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(36px, 5vw, 64px);
}
.assemble__block {
  position: relative;
  padding: clamp(20px, 2.4vw, 30px);
  background: #fbf9f4;
  border: 1px solid rgba(67, 63, 60, 0.12);
  transition: transform 1100ms cubic-bezier(0.2, 0.8, 0.1, 1) var(--d, 0ms), box-shadow 300ms ease;
}
.assemble__block h3 { margin: 14px 0 8px; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); }
.assemble__block p { font-size: 0.95rem; color: var(--ink-soft); max-width: 34ch; }
.assemble__n { font-family: var(--face-display); font-size: 0.8125rem; color: var(--red); font-variant-numeric: tabular-nums; }
.assemble__block:not(.assemble__block--alt):hover { box-shadow: 0 16px 40px rgba(46, 43, 41, 0.1); }
/* before the section arrives the blocks sit scattered; they fly into the grid */
.home-motion .assemble:not(.is-in) .assemble__block {
  transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(0.94);
}

.assemble__block--alt {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.assemble__block--alt h3 { color: var(--paper); }
.assemble__block--alt > .alt__copy > p { color: rgba(244, 241, 233, 0.82); }
.assemble__block--alt .assemble__n { color: #f29d88; }
.alt__funds { list-style: none; margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.alt__fund {
  display: grid;
  gap: 2px;
  padding: 12px 0 12px 14px;
  border-left: 2px solid rgba(244, 241, 233, 0.3);
}
.alt__fund--here { border-left-color: var(--accent); }
.alt__tag { font-family: var(--face-display); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244, 241, 233, 0.75); }
.alt__fund--here .alt__tag { color: #f29d88; }
.alt__name { font-family: var(--face-display); font-weight: 500; font-size: 1.05rem; color: var(--paper); }
.alt__note { font-size: 0.9rem; color: rgba(244, 241, 233, 0.82); }

/* the orbit: Cat III and Cat II circling a common core */
.alt__orbit { position: relative; min-height: 240px; align-self: stretch; }
.alt__ring, .alt__core, .alt__node { position: absolute; left: 50%; top: 50%; }
.alt__ring { border: 1px solid rgba(244, 241, 233, 0.16); border-radius: 50%; transform: translate(-50%, -50%); }
.alt__ring--1 { width: 64px; height: 64px; }
.alt__ring--2 { width: 150px; height: 150px; border-style: dashed; }
.alt__ring--3 { width: 236px; height: 236px; }
.alt__core { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--accent); animation: core 3.6s ease-in-out infinite; }
@keyframes core { 0%, 100% { box-shadow: 0 0 0 0 rgba(222, 64, 25, 0.5); } 50% { box-shadow: 0 0 0 16px rgba(222, 64, 25, 0); } }
.alt__node {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--face-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--night);
  border: 1px solid rgba(244, 241, 233, 0.6);
  color: var(--paper);
}
.alt__node--ii { background: var(--red); border-color: var(--red); color: var(--white); }  /* #B0330F keeps white text at AA */
.alt__node--iii { --r: 118px; transform: rotate(200deg) translateX(var(--r)) rotate(-200deg); }
.alt__node--ii { --r: 75px; transform: rotate(20deg) translateX(var(--r)) rotate(-20deg); }
.home-motion .assemble.is-in .alt__node--iii { animation: orbit-iii 26s linear infinite; }
.home-motion .assemble.is-in .alt__node--ii { animation: orbit-ii 16s linear infinite; }
@keyframes orbit-iii { from { transform: rotate(200deg) translateX(118px) rotate(-200deg); } to { transform: rotate(560deg) translateX(118px) rotate(-560deg); } }
@keyframes orbit-ii { from { transform: rotate(20deg) translateX(75px) rotate(-20deg); } to { transform: rotate(380deg) translateX(75px) rotate(-380deg); } }
.home-motion .assemble.is-in .alt__ring--2 { animation: spin 40s linear infinite; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ----------------------------------------------------------------- proof */

.proof__head { display: grid; gap: 14px; max-width: 58ch; }
.proof__lede { color: var(--ink-soft); }
.proof {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--rule-strong);
}
.proof__item { display: flex; border-right: 1px solid var(--rule); transition: transform 900ms cubic-bezier(0.2, 0.8, 0.1, 1) var(--d, 0ms); }
.proof__item:last-child { border-right: 0; }
.home-motion .proof:not(.is-in) .proof__item { transform: translateY(32px); }
.proof__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 24px 18px 26px;
  transition: background 300ms ease;
}
.proof__item:first-child .proof__link { padding-left: 0; }
.proof__link:hover { background: rgba(67, 63, 60, 0.04); }
.proof__logo { display: flex; align-items: center; height: 44px; }
.proof__logo img { max-height: 32px; max-width: 120px; width: auto; object-fit: contain; transition: transform 500ms cubic-bezier(0.2, 0.75, 0.1, 1); }
.proof__link:hover .proof__logo img { transform: translateY(-3px); }
.proof__name { font-family: var(--face-display); font-weight: 500; font-size: 1.05rem; }
.proof__layer { font-family: var(--face-display); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.proof__figure {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--face-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--red);
  overflow-wrap: anywhere;
}
.proof__label { font-size: 0.9rem; line-height: 1.4; color: var(--ink-soft); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proof__item:nth-child(3) { border-right: 0; }
  .proof__item:nth-child(n + 4) { border-top: 1px solid var(--rule); }
  .proof__item:nth-child(4) .proof__link { padding-left: 0; }
  .assemble { grid-template-columns: 1fr 1fr; }
  .assemble__block--alt { grid-template-columns: 1fr; }
  .alt__orbit { min-height: 220px; }
}
@media (max-width: 820px) {
  .group-home__figures { grid-template-columns: 1fr 1fr; }
  .group-home__figures li:nth-child(3) { border-left: 0; padding-left: 0; }
  .group-home__figures li:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .alt__funds { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .assemble { grid-template-columns: 1fr; }
  .proof { grid-template-columns: 1fr 1fr; }
  .proof__item { border-right: 0; border-top: 1px solid var(--rule); }
  .proof__item .proof__link { padding-left: 0 !important; }
  .home-motion .assemble:not(.is-in) .assemble__block { transform: translateY(24px); }
}

@media (prefers-reduced-motion: reduce) {
  .assemble__block, .proof__item { transition: none !important; }
  .alt__core, .alt__node, .alt__ring { animation: none !important; }
}

/* figures and the proof row must fit at 320px and under WCAG 1.4.12 spacing */
.group-home__figures li, .proof__item, .assemble__block { min-width: 0; }
.group-home__value { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .group-home__value { font-size: clamp(1.3rem, 6vw, 1.8rem); }
  .group-home__figures li + li { padding-left: 12px; }
}
/* the scattered pre-assembly positions must never widen the page */
.platform-section, .proof-section { overflow-x: clip; }

/* ------------------------------------------------------------- focus
   The thesis statement as a full-screen moment, built on one grid: text in
   the left half, a square figure in the right half, both centred on the
   same horizontal axis. The text block is sized to the figure's height so
   their top and bottom edges line up. */
.focus { position: relative; height: 230vh; background: var(--paper); border-top: 1px solid var(--rule); }
.focus__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; overflow: hidden; container-type: inline-size; }
.focus__grid {
  --gap: clamp(40px, 6vw, 96px);
  /* the figure is as tall as the screen allows and never wider than its column */
  --col: calc((min(100cqw, var(--shell)) - 2 * var(--gutter) - var(--gap)) / 2);
  --fig: min(68vh, 600px, var(--col));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: center;
  padding-top: 40px; /* clears the floating header so the optical centre is the true centre */
}
.focus__text { max-width: 33rem; min-height: var(--fig); display: grid; align-content: space-between; gap: 22px; }
.focus__eyebrow { display: flex; align-items: center; gap: 14px; color: var(--ink-soft); }
.focus__eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--accent); }
.focus .thesis__lead {
  font-size: clamp(1.9rem, 1.1rem + 2vw, 3rem);
  line-height: 1.08;
  max-width: 16ch;
}
.focus__body { font-size: clamp(1rem, 0.94rem + 0.25vw, 1.15rem); line-height: 1.6; color: var(--ink-soft); max-width: 44ch; }
.focus .thesis__close { font-size: clamp(1rem, 0.92rem + 0.3vw, 1.15rem); }
.focus__figure { margin: 0; justify-self: center; width: var(--fig); aspect-ratio: 1; position: relative; }
.focus__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* the stats now sit in their own band under the focus section */
.intro { padding-block: clamp(36px, 5vw, 64px) clamp(40px, 5vw, 72px); }
.intro .stats { margin-top: 0; }

/* proof: four companies */
.proof { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof__item:nth-child(4) { border-right: 0; }

/* funds section sits tighter now it has no heading */
#funds.section { padding-block: clamp(36px, 5vw, 72px); }

@media (max-width: 1080px) {
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof__item:nth-child(2n) { border-right: 0; }
  .proof__item:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .proof__item:nth-child(3) .proof__link { padding-left: 0; }
}
@media (max-width: 900px) {
  .focus { height: auto; }
  .focus__sticky { position: relative; height: auto; padding-block: 88px 64px; }
  .focus__grid { grid-template-columns: 1fr; row-gap: 48px; padding-top: 0; --fig: min(86vw, 440px); }
  .focus__text { min-height: 0; align-content: start; }
}

/* proof: every figure starts on one line, whatever the label length.
   Each card shares the row tracks of its neighbours through subgrid, so
   logo, name, layer, figure and label line up across the row. */
@supports (grid-template-rows: subgrid) {
  .proof { grid-auto-rows: auto; }
  .proof__item { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
  .proof__link { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 8px; align-content: start; }
  .proof__figure { margin-top: 0; align-self: end; }
  .proof__label { align-self: start; }
}