/* Page components. Black canvas; rules and type do the work. One turquoise band per page. */

.accent { color: var(--color-accent-text); }
.lede { font-size: var(--text-lead); font-weight: 300; max-width: var(--measure); }
.caveat { margin-top: var(--space-3); font-size: var(--text-small); font-weight: 300; font-style: italic; max-width: 52rem; }

.text-link {
  display: inline-flex; align-items: center; min-height: var(--hit-min);
  font-family: var(--font-headline); font-size: 1rem;
  color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}
.text-link--on-light { color: var(--bgc-black); }
.text-link--on-light:hover { color: var(--bgc-black); text-decoration-color: var(--bgc-black); }

/* Sections */
.section { padding-block: var(--space-7); }
.section--rule { border-top: var(--rule-full); }
.section__title { font-size: var(--text-h2); max-width: 22ch; margin-bottom: var(--space-3); }
.section__title--large { font-size: var(--text-h1); max-width: 16ch; }
.section__title--wide { max-width: none; }
.section__lede { margin-bottom: var(--space-5); }
.eyebrow { margin-bottom: var(--space-2); }

.split { display: grid; gap: var(--space-4); }
@media (min-width: 56rem) {
  .split { grid-template-columns: 5fr 6fr; gap: var(--space-6); align-items: start; }
  .split--media { grid-template-columns: 1fr 1fr; align-items: center; }
  .split--form { grid-template-columns: 4fr 6fr; }
}
.split > * > p + p { margin-top: var(--space-2); }

/* White section (bgc-brand "on white"): black text, turquoise labels at accessible weight */
.section--light { background: var(--bgc-white); color: var(--bgc-black); }
.section--light a { color: var(--bgc-black); }
.eyebrow--on-light { color: var(--bgc-black); }
.eyebrow--on-light::before { content: ""; display: inline-block; width: 0.75em; height: 0.75em; margin-right: 0.5em; background: var(--bgc-turquoise); vertical-align: -0.05em; }

/* Hero */
.hero { padding-block: 4.5rem var(--space-6); overflow: hidden; } /* top +50% (Al, 8 October) */
.hero__inner { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 64rem) { .hero__inner { grid-template-columns: 7fr 4fr; } }
.hero__title { font-size: var(--text-hero); line-height: 1; margin-bottom: var(--space-3); max-width: 12ch; }
.hero__lede { font-size: var(--text-lead); font-weight: 300; max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.hero__art { display: none; }
@media (min-width: 64rem) {
  .hero__art { display: block; justify-self: end; }
  .hero__art img { width: 100%; max-width: 22rem; height: auto; max-height: 58vh; object-fit: contain; }
  /* Same box as the static logo: 22rem wide at most, 58vh tall at most; aspect-ratio reserves the space before the script runs. */
  .hero__art bgc-tri-panel { width: min(22rem, calc(58vh * 3000 / 3852)); aspect-ratio: 3000 / 3852; }
}
@media (min-width: 64rem) and (max-height: 50rem) {
  .hero { padding-block: var(--space-5) var(--space-5); }
  .hero__title { font-size: clamp(3rem, 1.6rem + 4vw, 5.25rem); }
}

/* Page header (inner pages) */
.page-header { padding-block: var(--space-6) var(--space-5); } /* no rule below (Al, 8 October) */
.page-header h1 { max-width: 20ch; margin-bottom: var(--space-3); }
.page-header__lede { max-width: 42rem; }
.page-header p + p { margin-top: var(--space-2); }

/* Numbered steps */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; column-gap: var(--space-2); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-headline); font-size: 1.125rem; color: var(--color-accent-text); line-height: 1.4;
}
.section--light .steps li::before { color: var(--bgc-black); }
.steps h3 { font-size: var(--text-h3); }
.steps p { font-size: 0.9375rem; }
.steps--compact { margin-top: var(--space-3); }


/* Comparison table */
.table-scroll { overflow-x: auto; margin-top: var(--space-4); }
.table-scroll:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.compare { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 0.9375rem; }
.compare th, .compare td { text-align: left; padding: var(--space-2) var(--space-2); border-bottom: var(--rule); vertical-align: top; }
.compare thead th { font-family: var(--font-headline); font-weight: 400; font-size: 1rem; }
.compare tbody th { font-family: var(--font-headline); font-weight: 400; font-size: 1.0625rem; width: 30%; }
.compare .compare__ours { border-left: 2px solid var(--color-accent); font-weight: 600; }
.compare thead .compare__ours { color: var(--color-accent-text); }

/* Stage table: a table on wide screens, stacked rows on narrow ones */
.stages { width: 100%; border-collapse: collapse; }
.stages th, .stages td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-2); border-top: var(--rule); }
.stages thead th { font-family: var(--font-headline); font-weight: 400; font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); color: var(--color-accent-text); border-top: 0; padding-top: 0; }
.stages tbody th { font-family: var(--font-headline); font-weight: 400; font-size: var(--text-eyebrow); width: 24%; }
.stages__n { color: var(--color-accent-text); margin-right: 0.4em; }
@media (max-width: 48rem) {
  .stages thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stages tr { display: block; border-top: var(--rule); padding-block: var(--space-3); }
  .stages tbody th, .stages td { display: block; width: auto; border: 0; padding: 0; }
  .stages td { margin-top: var(--space-2); }
  .stages td::before { content: attr(data-label); display: block; font-family: var(--font-headline); color: var(--color-accent-text); font-size: 1rem; }
}

/* Money flow */
.flow { list-style: none; padding: 0; display: grid; gap: var(--space-4); margin-top: var(--space-4); }
@media (min-width: 56rem) { .flow { grid-template-columns: repeat(3, 1fr); } }
.flow__step { border-top: 2px solid var(--color-text); padding: var(--space-3) var(--space-2) var(--space-2); transition: border-color var(--duration), background-color var(--duration), transform var(--duration); }
.flow__step:hover { border-top-color: var(--color-accent); background: var(--color-hover-bg); transform: translateY(-3px); }
.flow__step:hover h3 { color: var(--color-accent-text); }
.flow__n { font-family: var(--font-headline); color: var(--color-accent-text); font-size: 1.125rem; }
.flow h3 { margin-block: var(--space-1); }

/* Commitments (the catch) */
.commitments { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.commitments li { border-top: var(--rule); padding-top: var(--space-3); }
.commitments h3 { margin-bottom: var(--space-1); color: var(--color-accent-text); }

/* Audience cards: whole card is the link target via the heading link */
.cards { list-style: none; padding: 0; display: grid; gap: var(--space-3); margin-top: var(--space-4); }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cards { grid-template-columns: repeat(4, 1fr); } }
.card { position: relative; border: var(--rule); padding: var(--space-3); transition: border-color var(--duration); }
.card:hover, .card:focus-within { border-color: var(--color-accent); }
.card h3 { margin-bottom: var(--space-2); }
.card__link { text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__link:focus-visible { outline: none; }
.card:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.card p { font-size: 0.9375rem; }

/* Tabs: landlord types as three choice cards joined to a bordered panel (Al, 8 October) */
.tabs__hint { display: none; margin-bottom: var(--space-3); max-width: var(--measure); }
.tabs--ready .tabs__hint { display: block; }
.tabs__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1); }
.tabs__tab {
  position: relative; display: grid; gap: 0.35rem; align-content: start; text-align: left;
  min-height: var(--hit-min); padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 1.75rem);
  font: inherit; color: var(--color-text); background: transparent;
  border: 1px solid var(--color-rule-soft); border-bottom: 0; cursor: pointer;
  transition: border-color var(--duration), background-color var(--duration), color var(--duration);
}
/* Radio-style marker: an empty square, filled when selected */
.tabs__tab::before {
  content: ""; position: absolute; left: var(--space-3); top: calc(var(--space-3) + 0.3rem);
  width: 1rem; height: 1rem; border: 2px solid currentColor;
}
.tabs__name { font-family: var(--font-headline); font-size: var(--text-eyebrow); line-height: 1.2; }
.tabs__desc { font-size: 0.9375rem; font-weight: 300; }
.tabs__tab:hover { border-color: var(--color-accent); }
.tabs__tab:hover .tabs__name { color: var(--color-accent-text); }
.tabs__tab[aria-selected="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--bgc-black); }
.tabs__tab[aria-selected="true"] .tabs__name { color: var(--bgc-black); }
.tabs__tab[aria-selected="true"]::before { background: var(--bgc-black); border-color: var(--bgc-black); }
.tabs__tab:focus-visible { outline-offset: -5px; }

.tabs__panel + .tabs__panel { margin-top: var(--space-6); }
.tabs--ready .tabs__panel + .tabs__panel { margin-top: 0; }
.tabs--ready .tabs__panel { border: 2px solid var(--color-accent); padding: var(--space-5); }
.tabs__heading { font-size: var(--text-h2); max-width: 26ch; margin-bottom: var(--space-2); }
.tabs__panel .lede { margin-bottom: var(--space-2); }
.tiles { list-style: none; padding: 0; display: grid; gap: var(--space-5); margin-block: var(--space-5); }
@media (min-width: 56rem) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tiles li { border-top: 2px solid var(--color-accent); padding-top: var(--space-3); }
.tiles p { line-height: 1.75; }
.tiles h4, .asks h4 { font-family: var(--font-headline); font-weight: 400; font-size: var(--text-h3); line-height: var(--leading-tight); margin-bottom: var(--space-2); }

/* Adviser questions: part of the panel, as link cards */
.asks { border-top: var(--rule-full); padding-top: var(--space-4); }
.asks__note { font-size: var(--text-small); margin-top: -0.5rem; margin-bottom: var(--space-3); }
.asks ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
@media (min-width: 56rem) { .asks ul { grid-template-columns: repeat(3, 1fr); } }
.asks li a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); height: 100%;
  min-height: var(--hit-min); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-rule-soft); text-decoration: none; line-height: 1.4;
  transition: border-color var(--duration), color var(--duration);
}
.asks li a::after { content: "\2192"; font-family: var(--font-headline); color: var(--color-accent-text); flex: none; }
.asks li a:hover { border-color: var(--color-accent); color: var(--color-accent-text); }

@media (max-width: 48rem) {
  .tabs__list { grid-template-columns: 1fr; }
  .tabs__tab { border-bottom: 1px solid var(--color-rule-soft); }
  .tabs__tab[aria-selected="true"] { border-bottom-color: var(--color-accent); }
  .tabs--ready .tabs__panel { padding: var(--space-3); margin-top: var(--space-1); }
}

/* Turquoise statement band (one per page) */
.band { background: var(--bgc-turquoise); color: var(--bgc-black); padding-block: var(--space-6); }
.band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.band__title { font-size: var(--text-h1); max-width: none; }
.button--on-band { background: var(--bgc-black); color: var(--bgc-white); border-color: var(--bgc-black); }
.button--on-band:hover { background: var(--bgc-white); color: var(--bgc-black); border-color: var(--bgc-black); }
.band :focus-visible { outline-color: var(--bgc-black); }

/* Forms */
.form-wrap { max-width: 40rem; }
.form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: 0.375rem; }
.field label { font-family: var(--font-headline); font-size: 1.0625rem; }
.field__optional { font-family: var(--font-body); font-size: 0.875rem; font-weight: 300; }
.field__hint { font-size: 0.875rem; font-weight: 300; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; min-height: var(--hit-min); padding: 0.625rem 0.75rem;
  font: inherit; font-size: 1rem; color: var(--bgc-black); background: var(--bgc-white);
  border: 2px solid var(--color-field-border); border-radius: 0;
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 2px var(--color-accent); }
.field__error { font-weight: 600; font-size: 0.9375rem; color: var(--color-text); }
.field__error::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; background: var(--color-accent); margin-right: 0.5em; vertical-align: 0.05em; }
.field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--space-2); }
.field--check input { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; accent-color: var(--bgc-turquoise); }
.field--check label { font-family: var(--font-body); font-size: 0.9375rem; }
.field--check .field__error { grid-column: 2; }
.form__status { font-weight: 600; min-height: 1.5em; }
.form__status:empty { min-height: 0; }
.form button[disabled] { opacity: 0.7; cursor: progress; }
.form-done:focus { outline: none; }
.form-done .lede { margin-bottom: var(--space-2); }
.form-intro__agent { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--rule); }
.honeypot { display: none; }

/* Phones: keep the hero CTA clear of the first-visit consent banner at 375x812 */
@media (max-width: 40rem) {
  .hero { padding-block: 2.25rem var(--space-5); }
  .hero__title { font-size: clamp(2.75rem, 1.5rem + 6vw, 3.25rem); margin-bottom: var(--space-2); }
  .hero__lede { font-size: 1rem; }
  .hero__actions { margin-top: var(--space-3); }
}

/* FAQ */
.faq__list, .faq__more { max-width: 52rem; } /* the filter row uses the full container width so it stays on one line */
.filter { flex-wrap: nowrap; }
@media (max-width: 64rem) { .filter { flex-wrap: wrap; } }
.filter { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); }
.filter__btn {
  min-height: var(--hit-min); padding: var(--space-1) var(--space-2);
  font-family: var(--font-headline); font-size: var(--text-eyebrow);
  background: transparent; color: var(--color-text); border: 1px solid var(--color-rule); cursor: pointer;
}
.filter__btn:hover { border-color: var(--color-accent); color: var(--color-accent-text); }
.filter__btn[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--bgc-black); }
.faq__item { border-top: var(--rule); }
.faq__item:last-child { border-bottom: var(--rule); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: var(--hit-min); padding-block: var(--space-2); cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 { font-size: var(--text-h3); }
.faq__q::after { content: "+"; font-family: var(--font-headline); font-size: 1.5rem; color: var(--color-accent-text); line-height: 1; flex: none; }
.faq__item[open] > .faq__q::after { content: "\2212"; }
.faq__a { padding-bottom: var(--space-3); max-width: var(--measure); }
.faq__a p + p { margin-top: var(--space-1); }
.faq__more { margin-top: var(--space-4); }

/* Checklists and the what-we-are comparison */
.checklist { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.checklist li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--space-2); align-items: baseline; font-size: var(--text-lead); font-weight: 300; }
/* Tick (drawn with two borders), turquoise */
.checklist li::before {
  content: ""; width: 0.45rem; height: 0.85rem; margin-left: 0.3rem;
  border-right: 3px solid var(--color-accent); border-bottom: 3px solid var(--color-accent);
  transform: translateY(-0.05em) rotate(45deg);
}
/* Cross (two diagonal strokes), brand grey */
.checklist--not li::before {
  width: 0.8rem; height: 0.8rem; margin-left: 0.1rem; border: 0; transform: translateY(0.1em);
  background:
    linear-gradient(45deg, transparent 42%, var(--color-rule) 42%, var(--color-rule) 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--color-rule) 42%, var(--color-rule) 58%, transparent 58%);
}
.compare-lists { display: grid; gap: var(--space-5); }
@media (min-width: 48rem) { .compare-lists { grid-template-columns: 1fr 1fr; } }
.compare-lists__title { font-size: var(--text-h2); margin-bottom: var(--space-3); }

/* Founders */
.people { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .people { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.person { border-top: 2px solid var(--color-accent); padding-top: var(--space-3); }
.person h3 { font-size: var(--text-h2); margin-bottom: var(--space-2); }

/* Static cards (no link) */
.cards--static .card:hover { border-color: var(--color-rule); }

/* Long-form text (privacy, cookies) */
.prose { max-width: 46rem; }
.prose h2 { font-size: var(--text-h2); margin-top: var(--space-5); margin-bottom: var(--space-2); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-3); margin-bottom: var(--space-1); }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: var(--space-2); }
.prose ul { padding-left: 1.2em; display: grid; gap: var(--space-1); }
.prose code { font-size: 0.875em; }
.compare--plain { min-width: 32rem; }
.compare--plain tbody th { width: auto; font-family: var(--font-body); font-size: 0.9375rem; }

/* Focus on light grounds: turquoise on white is under 3:1, so switch the ring to black there */
.section--light :focus-visible { outline-color: var(--bgc-black); }

/* Home: Investors -> Landlord -> Tenant flow (white section). The original diagram, corrected after round 1:
   the left box is the institutional investors, and Black Glass Capital sits above all three as the developer. */
.deal-flow { margin-block: var(--space-6) var(--space-4); } /* more room above and below the animation (Al, 8 October) */
.deal-flow__diagram { display: grid; grid-template-columns: 1fr 1.15fr 1fr 1.15fr 1fr; align-items: center; gap: var(--space-2); }
.deal-flow__node { text-align: center; }
.deal-flow__role { font-family: var(--font-headline); font-size: var(--text-h3); letter-spacing: 0.06em; text-transform: none; }
.deal-flow__who { font-size: 0.9375rem; margin-bottom: var(--space-1); }
.deal-flow__tile {
  aspect-ratio: 1 / 1; max-width: 11rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: center; padding: var(--space-2);
  border: 2px solid var(--bgc-black); font-size: 0.9375rem; line-height: 1.4;
}
.deal-flow__tile--fund { background: var(--bgc-black); border-color: var(--bgc-black); color: var(--bgc-white); font-family: var(--font-headline); font-size: 1.125rem; }
.deal-flow__tile--you { background: var(--bgc-turquoise); border-color: var(--bgc-turquoise); font-family: var(--font-headline); font-size: 1.125rem; }
.deal-flow__links { display: grid; gap: var(--space-4); }
.deal-flow__link { display: grid; gap: 0.35rem; text-align: center; }
.deal-flow__label { font-family: var(--font-headline); font-size: 1.0625rem; line-height: 1.2; }
.deal-flow__label small { display: block; font-family: var(--font-body); font-size: 0.8125rem; margin-top: 0.15rem; }
.deal-flow__arrow { position: relative; display: block; height: 2px; background: var(--bgc-black); }
.deal-flow__arrow::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: translateY(-50%);
}
.deal-flow__link--forward .deal-flow__arrow::after { right: -2px; border-left: 10px solid var(--bgc-black); }
.deal-flow__link--back .deal-flow__arrow::after { left: -2px; border-right: 10px solid var(--bgc-black); }

.deal-flow__split { max-width: 34rem; margin: var(--space-6) auto 0; text-align: center; }
.deal-flow__split-title { font-family: var(--font-headline); font-size: 1.0625rem; margin-bottom: var(--space-1); }
.deal-flow__bar { display: grid; grid-template-columns: 7fr 3fr; /* margin 30% on every screen (WEB-11, 14 October) */ min-height: var(--hit-min); font-size: 0.875rem; font-weight: 600; }
.deal-flow__bar span { display: flex; align-items: center; justify-content: center; padding: 0.5rem; }
.deal-flow__bar-ours { background: var(--bgc-black); color: var(--bgc-white); }
.deal-flow__bar-yours { background: var(--bgc-turquoise); color: var(--bgc-black); }
.deal-flow__caveat { margin-top: var(--space-5); }
.deal-flow__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.deal-flow__replay { background: none; border: 0; padding: 0; cursor: pointer; }

/* Phones: stack the flow vertically; forward arrows point down, return arrows up */
@media (max-width: 48rem) {
  .deal-flow__diagram { grid-template-columns: 1fr; gap: var(--space-3); }
  .deal-flow__tile { max-width: 9rem; aspect-ratio: auto; min-height: 6rem; }
  .deal-flow__links { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .deal-flow__link { justify-items: center; }
  .deal-flow__link--back { order: 2; }
  .deal-flow__arrow { width: 2px; height: 2.5rem; }
  .deal-flow__link--forward .deal-flow__arrow::after { right: auto; left: 50%; top: auto; bottom: -2px; transform: translateX(-50%); border: 6px solid transparent; border-top: 10px solid var(--bgc-black); border-bottom: 0; }
  .deal-flow__link--back .deal-flow__arrow::after { left: 50%; top: -2px; transform: translateX(-50%); border: 6px solid transparent; border-bottom: 10px solid var(--bgc-black); border-top: 0; }
  .deal-flow__link--back .deal-flow__arrow { order: 2; }
}

/* Animation: one orchestrated moment. Steps appear in order once the flow is in view. */
.deal-flow--animate [data-step] { opacity: 0; transition: opacity 500ms ease; }
.deal-flow--animate [data-step] .deal-flow__arrow { transform: scaleX(0); transition: transform 600ms ease; }
.deal-flow--animate .deal-flow__link--forward .deal-flow__arrow { transform-origin: left center; }
.deal-flow--animate .deal-flow__link--back .deal-flow__arrow { transform-origin: right center; }
.deal-flow--animate [data-step].is-on { opacity: 1; }
.deal-flow--animate [data-step].is-on .deal-flow__arrow { transform: none; }
.deal-flow--animate .deal-flow__bar-yours { transform: scaleX(0); transform-origin: left center; transition: transform 700ms ease 300ms; }
.deal-flow--animate .deal-flow__split.is-on .deal-flow__bar-yours { transform: none; }
@media (max-width: 48rem) {
  .deal-flow--animate [data-step] .deal-flow__arrow { transform: scaleY(0); }
  .deal-flow--animate .deal-flow__link--forward .deal-flow__arrow { transform-origin: center top; }
  .deal-flow--animate .deal-flow__link--back .deal-flow__arrow { transform-origin: center bottom; }
}


/* Black Glass Capital, the developer, across all three boxes: mark and role, then a bracket whose ends and middle
   drop to the centres of the three columns (9.43%, 50%, 90.57% of the 1 : 1.15 : 1 : 1.15 : 1 grid). */
.deal-flow__developer { margin-bottom: var(--space-3); }
.deal-flow__dev-head { display: flex; align-items: center; justify-content: center; gap: var(--space-2); text-align: left; max-width: 40rem; margin-inline: auto; }
.deal-flow__dev-head p { display: grid; gap: 0.15rem; }
.deal-flow__dev-what { font-size: 0.9375rem; line-height: 1.4; }
.deal-flow__dev-mark { flex: none; width: 2.5rem; height: auto; fill: var(--bgc-turquoise); }
.deal-flow__bracket { position: relative; display: block; height: 1.25rem; margin: var(--space-2) 9.43% 0; border: 2px solid var(--bgc-black); border-bottom: 0; }
.deal-flow__bracket::after { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; background: var(--bgc-black); transform: translateX(-50%); }
@media (max-width: 48rem) {
  .deal-flow__bracket { display: none; }
  .deal-flow__dev-head { align-items: flex-start; }
}

/* The text alternative: always visible under the diagram */
.deal-flow__steps-title { font-size: var(--text-h3); margin-top: var(--space-5); margin-bottom: var(--space-2); }
.deal-flow__steps { padding-left: 1.25rem; display: grid; gap: 0.375rem; max-width: 46rem; font-size: 0.9375rem; }

/* How the Deal works: money-flow fee note */
.money-fees { margin-top: var(--space-4); max-width: 46rem; }

/* About: team and partner cards react on hover (Al, 8 October) */
.people--interactive .person {
  padding: var(--space-3); border: 1px solid var(--color-rule-soft); border-top: 2px solid var(--color-accent);
  transition: border-color var(--duration), background-color var(--duration), transform var(--duration);
}
.people--interactive .person:hover { border-color: var(--color-accent); background: var(--color-hover-bg); transform: translateY(-3px); }
.people--interactive .person:hover h3 { color: var(--color-accent-text); }
.card p { font-size: var(--text-body); }
.cards--hover .card { transition: border-color var(--duration), background-color var(--duration), transform var(--duration); }
.cards--static.cards--hover .card:hover { border-color: var(--color-accent); background: var(--color-hover-bg); transform: translateY(-3px); }
.cards--hover .card:hover h3 { color: var(--color-accent-text); }

/* About: click-to-load map */
.map { margin-top: var(--space-5); border: 1px solid var(--color-rule-soft); aspect-ratio: 16 / 7; min-height: 18rem; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map__placeholder { height: 100%; display: grid; place-content: center; justify-items: center; gap: var(--space-2); padding: var(--space-4); text-align: center; }
.map__title { font-family: var(--font-headline); font-size: var(--text-eyebrow); }
.map__note { font-size: var(--text-small); font-weight: 300; }
@media (max-width: 48rem) { .map { aspect-ratio: 4 / 5; } }

/* Steps written as single sentences (request assessment page) */
.steps--sentences li::before { grid-row: auto; }
.steps--sentences p { font-size: var(--text-lead); font-weight: 300; line-height: 1.6; }

/* How the Deal works: stage rows react on hover, like the cards elsewhere (Al, 8 October) */
.stages tbody th, .stages tbody td { transition: background-color var(--duration), color var(--duration), box-shadow var(--duration); }
.stages tbody tr:hover th, .stages tbody tr:hover td { background: var(--color-hover-bg); }
.stages tbody tr:hover th { color: var(--color-accent-text); box-shadow: inset 3px 0 0 var(--color-accent); }
@media (max-width: 48rem) {
  .stages tbody tr { transition: background-color var(--duration), box-shadow var(--duration); }
  .stages tbody tr:hover { background: var(--color-hover-bg); box-shadow: inset 3px 0 0 var(--color-accent); }
  .stages tbody tr:hover th, .stages tbody tr:hover td { background: transparent; box-shadow: none; }
}

/* Band buttons about 50% larger, to sit level with the band heading (Al, 8 October) */
.button--on-band { font-size: 1.5rem; padding: 1rem 2rem; min-height: 4rem; }
@media (max-width: 40rem) { .button--on-band { font-size: 1.25rem; padding: 0.875rem 1.5rem; } }

/* Flow links about twice the size: 2rem (24pt) */
.deal-flow__actions .text-link { font-size: 2rem; min-height: 3.5rem; }
@media (max-width: 40rem) { .deal-flow__actions .text-link { font-size: 1.5rem; } }

/* Team: personal LinkedIn links, turquoise mark like the footer */
.people--interactive .person { display: flex; flex-direction: column; }
.person__social { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-width: var(--hit-min); min-height: var(--hit-min); margin-top: auto; margin-left: -0.375rem; padding-top: var(--space-2); color: var(--color-accent-text); }
.person__social svg { width: 28px; height: 28px; }
.person__social:hover { color: var(--color-text); }

/* Flow version switch (Landlord / Owner-occupier) */
.deal-flow__switch { display: inline-flex; border: 2px solid var(--bgc-black); margin-bottom: var(--space-5); }
.deal-flow__switch-btn {
  min-height: var(--hit-min); padding: 0.5rem 1.5rem; font-family: var(--font-headline); font-size: var(--text-eyebrow);
  background: transparent; color: var(--bgc-black); border: 0; cursor: pointer; transition: background-color var(--duration);
}
.deal-flow__switch-btn + .deal-flow__switch-btn { border-left: 2px solid var(--bgc-black); }
.deal-flow__switch-btn:hover { background: rgba(15, 213, 213, 0.25); }
.deal-flow__switch-btn[aria-pressed="true"] { background: var(--bgc-black); color: var(--bgc-white); }

/* Hero next step, sized like the band buttons */
.button--hero { font-size: 1.25rem; padding: 0.875rem 1.75rem; min-height: 3.5rem; }

.stack { display: grid; gap: var(--space-2); }
.stack h3 { margin-top: var(--space-2); }
.form__privacy { font-size: 0.9375rem; font-weight: 300; }

/* How it works header with its animation (Claude Design, 9 October).
   Desktop: copy left, aligned to the page edge, animation right (Al, 9 October). Phones: animation under the
   copy at full width. The 1200 x 960 stage is scaled to the column by fund-margin.js, so nothing inside it reflows. */
.page-header__split { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 64rem) {
  .page-header__split { grid-template-columns: 6fr 5fr; gap: var(--space-5); }
  .page-header__split .fund-margin, .page-header__split .page-header__art { justify-self: end; }
}
/* For agents and advisers: Tri-Panel to mail, right of the copy on desktop, under it on phones (Al, 9 October).
   The art box is 4100:3852; aspect-ratio reserves the space before the script runs. */
.page-header__mark { width: 100%; max-width: 22rem; }
.page-header__mark bgc-tri-panel-mail { width: 100%; aspect-ratio: 4100 / 3852; }
@media (max-width: 63.99rem) { .page-header__mark { max-width: 14rem; } }
/* FAQ: Tri-Panel to question mark, 3000:3852 like the static Tri-Panel; narrower, as the mark is tall */
.page-header__mark bgc-tri-panel-question { width: 100%; aspect-ratio: 3000 / 3852; }
.page-header__mark--tall { max-width: 15rem; }
@media (max-width: 63.99rem) { .page-header__mark--tall { max-width: 10rem; } }
/* FAQ desktop: the mark's right edge lines up with the end of the question rules (52rem, .faq__list) (Al, 9 October).
   A third track takes up the width beyond 52rem; percentages here are of the header's content width. */
@media (min-width: 64rem) {
  .page-header__split--faq { grid-template-columns: minmax(0, 1fr) 15rem max(0px, calc(100% - 52rem - var(--space-5))); }
}

/* For landlords: roof rent animation, 640:380, space reserved before the script runs */
roof-rent-animation { display: block; width: 100%; max-width: 37.5rem; aspect-ratio: 640 / 380; }
.fund-margin { position: relative; width: 100%; max-width: 37.5rem; aspect-ratio: 5 / 4; margin: 0; background: var(--color-bg); overflow: hidden; }
.fund-margin__stage { position: absolute; left: 0; top: 0; width: 1200px; height: 960px; transform-origin: 0 0; }
.fund-margin__stage * { box-sizing: border-box; }
.fund-margin .fm-abs { position: absolute; margin: 0; max-width: none; }
.fund-margin__wipe { width: 1720px; height: 10px; background: var(--bgc-turquoise); transform: rotate(-45deg); transform-origin: 50% 50%; display: none; }
.fund-margin__legend { left: 80px; top: 56px; display: flex; flex-direction: column; gap: 12px; opacity: 0; }
.fund-margin__key { display: flex; align-items: center; gap: 16px; margin: 0; font-family: var(--font-headline); font-size: 44px; line-height: 1.2; letter-spacing: 2px; }
.fund-margin__key span { width: 28px; height: 28px; flex: none; }
.fund-margin__key--margin { color: var(--bgc-turquoise); }
.fund-margin__key--margin span { background: var(--bgc-turquoise); }
.fund-margin__key--ours { color: var(--fm-label); }
.fund-margin__key--ours span { background: var(--fm-ours); }
.fund-margin__bar { position: absolute; bottom: 0; height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.fund-margin__bar > div { flex-shrink: 0; }
.fund-margin__base { left: 80px; top: 760px; width: 1040px; height: 3px; background: var(--fm-label); transform: scaleX(0); }
.fund-margin__axis { left: 80px; top: 784px; width: 1040px; display: flex; justify-content: space-between; font-family: var(--font-body); font-weight: 300; font-size: 36px; color: var(--fm-label); opacity: 0; }
.fund-margin__note { left: 80px; top: 856px; font-family: var(--font-body); font-style: italic; font-weight: 300; font-size: 36px; color: var(--color-text); opacity: 0; }

/* Light mode details (see tokens.css). Headline emphasis: black text on a turquoise underline bar. Eyebrows
   carry the turquoise square used on white sections. Ticks turn black so they keep 3:1 against white. */
:root[data-theme="light"] .accent { text-decoration: underline var(--bgc-turquoise); text-decoration-thickness: 0.14em; text-underline-offset: 0.1em; text-decoration-skip-ink: none; }
:root[data-theme="light"] .eyebrow:not(.eyebrow--on-light)::before { content: ""; display: inline-block; width: 0.75em; height: 0.75em; margin-right: 0.5em; background: var(--bgc-turquoise); vertical-align: -0.05em; }
:root[data-theme="light"] .checklist li::before { border-color: var(--bgc-black); }
:root[data-theme="light"] .fund-margin__key--margin { color: var(--bgc-black); }
:root[data-theme="light"] .section--light { border-block: var(--rule-full); }
:root[data-theme="light"] .site-nav a[aria-current="page"] { border-bottom-color: var(--bgc-turquoise); }

/* Theme switch: one button, sun or moon, in the header beside the menu and the call to action */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: var(--hit-min); min-height: var(--hit-min); padding: 0;
  background: transparent; color: var(--color-text); border: 1px solid var(--color-rule-soft); cursor: pointer;
  transition: border-color var(--duration), color var(--duration);
}
.theme-toggle:hover { border-color: var(--color-accent); }
.theme-toggle svg { width: 1.25rem; height: 1.25rem; }
.theme-toggle__sun { display: none; }
:root[data-theme="light"] .theme-toggle__sun { display: block; }
:root[data-theme="light"] .theme-toggle__moon { display: none; }
.site-header__tools { display: flex; align-items: center; gap: var(--space-2); }

/* The logo comes in a white and a black wordmark; show the one for the current theme */
.logo--light { display: none; }
:root[data-theme="light"] .logo--dark { display: none; }
:root[data-theme="light"] .logo--light { display: block; }

/* Tri-Panel animations (Home, agents and advisers, FAQ): black in light mode (Al, 14 October). CSS fill overrides
   the elements' turquoise fill attribute. The envelope's flap lines turn white so they still show on black. */
:root[data-theme="light"] .hero__art bgc-tri-panel polygon,
:root[data-theme="light"] bgc-tri-panel-mail polygon,
:root[data-theme="light"] bgc-tri-panel-question polygon,
:root[data-theme="light"] bgc-tri-panel-question path { fill: var(--bgc-black); }
:root[data-theme="light"] bgc-tri-panel-mail polyline { stroke: var(--bgc-white); }

/* Contact: Get in touch introduction sits directly above the form */
.contact-intro { margin-bottom: var(--space-5); }

/* Light mode, navigation bar: the Turquoise Square logo (Al, 19 October 2026), at the standard logo height. */