/* A shared type scale and reading grid for the homepage. */
.home-page {
  --home-body:clamp(16px,1.2vw,17px);
  --home-heading:clamp(29px,3vw,40px);
}
.home-page .hero-copy {
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:calc(100% - 2 * var(--gutter));
  max-width:1276px;
}
.home-page .hero-subtitle { margin-bottom:22px; font-size:clamp(18px,1.5vw,20px); line-height:1.45; }
.home-page .hero .intro,
.home-page .hero-definition,
.home-page .editorial-grid p:not(.eyebrow):not(.quote-attribution),
.home-page .invitation-copy p,
.home-page .building-intro,
.home-page .reef-editorial p:not(.eyebrow) {
  font-size:var(--home-body);
  line-height:1.65;
  letter-spacing:normal;
}
.home-page .hero .intro,
.home-page .hero-definition { max-width:60ch; }
.home-page .editorial-grid,
.home-page .invitation-copy,
.home-page .reef-editorial { align-items:start; }
.home-page .editorial-grid h2,
.home-page .invitation-copy h2,
.home-page .building-heading h2,
.home-page .reef-editorial h2 {
  font-size:var(--home-heading);
  line-height:1.15;
  letter-spacing:-.035em;
  margin-top:0;
  text-wrap:balance;
}
.home-page .client-quote { margin:0; max-width:none; }
.home-page .client-quote h2 { max-width:20ch; }
.home-page .proof-section .quote-attribution {
  margin:18px 0 0 22px;
  font:13px/1.6 'Instrument Sans',sans-serif;
  letter-spacing:normal;
}
/* The bank's outcomes open one at a time beneath ruled lines. */
.outcome-list { margin-top:30px; border-bottom:1px solid var(--rule); interpolate-size:allow-keywords; }
.outcome { border-top:1px solid var(--rule); }
.outcome summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:20px 0;
  color:var(--paper);
  font-size:clamp(17px,1.35vw,19px);
  font-weight:500;
  line-height:1.35;
  letter-spacing:-.015em;
  transition:color .2s ease;
}
.outcome summary::-webkit-details-marker { display:none; }
.outcome summary:hover,.outcome[open] summary { color:#c9d4ff; }
.outcome summary:focus-visible { outline-offset:4px; }
.outcome-icon {
  flex:none;
  position:relative;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid rgba(243,240,232,.3);
  color:var(--paper);
  transition:transform .3s ease,border-color .2s ease,color .2s ease;
}
.outcome-icon::before,.outcome-icon::after { content:''; position:absolute; top:50%; left:50%; background:currentColor; border-radius:1px; transform:translate(-50%,-50%); }
.outcome-icon::before { width:11px; height:1.5px; }
.outcome-icon::after { width:1.5px; height:11px; }
.outcome summary:hover .outcome-icon { border-color:#b7c6ff; color:#b7c6ff; }
.outcome[open] .outcome-icon { transform:rotate(45deg); border-color:#b7c6ff; color:#b7c6ff; }
.home-page .outcome p { max-width:54ch; padding:0 52px 24px 0; opacity:0; transform:translateY(-6px); transition:opacity .35s ease,transform .35s ease; }
.outcome[open] p { opacity:1; transform:none; }
.outcome::details-content { block-size:0; overflow:hidden; transition:block-size .35s ease,content-visibility .35s allow-discrete; }
.outcome[open]::details-content { block-size:auto; }
.home-page .building-heading,
.home-page .building-layout { max-width:1276px; margin-left:auto; margin-right:auto; }
.home-page .building-caption {
  margin-bottom:22px;
  max-width:34ch;
  font-size:14px;
  line-height:1.5;
  color:var(--depth-muted);
}
.home-page .building-heading h2 { max-width:none; }
.home-page .building-intro { max-width:76ch; }
.home-page .home-footer { padding:0; }
.home-footer .reef-editorial .text-link { color:#b7c6ff; }
.home-footer .reef-editorial > div + div { padding-top:37px; }
.home-footer .reef-definition { max-width:1420px; margin:auto; padding:16px var(--gutter) 32px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:clamp(24px,4vw,56px); }
.home-footer .reef-definition p { max-width:none; font-size:13px; line-height:1.65; color:#bdc7d8; }
.home-footer .reef-contact { justify-self:end; white-space:nowrap; font-size:13px; line-height:1.65; color:#b7c6ff; border-bottom:1px solid currentColor; padding-bottom:3px; }
.thesis-section {
  position:relative;
  border-top:1px solid var(--rule);
  background:var(--paper);
}
.thesis-section.thesis-enhanced {
  height:275svh;
}
.thesis-sticky {
  max-width:1420px;
  margin:0 auto;
  padding:56px var(--gutter);
}
.thesis-section.thesis-enhanced .thesis-sticky {
  position:sticky;
  top:0;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:36px var(--gutter);
}
.thesis-grid {
  width:100%;
  max-width:1276px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,2.6vw,36px);
  align-items:stretch;
}
.thesis-card {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid var(--rule);
  background:var(--paper);
  padding:clamp(24px,2.6vw,34px);
  will-change:transform,opacity;
}
/* Sized so card 2's first sentence holds one line and both headings stay two lines tall. */
.thesis-card-copy h2 {
  font-size:clamp(20px,2.1vw,30px);
  line-height:1.15;
  letter-spacing:-.032em;
  margin:10px 0 0;
  text-wrap:balance;
}
.thesis-card-body {
  margin-top:16px;
  will-change:transform,opacity;
}
.thesis-card-body .lead {
  font-size:clamp(16px,1.25vw,18px);
  line-height:1.45;
  color:var(--ink);
}
.thesis-card-body p + p {
  margin-top:12px;
  font-size:clamp(14.5px,1.08vw,16px);
  line-height:1.6;
  color:#4e4d49;
}
.thesis-card-art {
  margin:20px 0 0;
  padding-top:14px;
  border-top:1px solid rgba(17,17,17,.1);
  will-change:transform,opacity;
}
.thesis-card-art svg {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:560 / 272;
  overflow:visible;
}
.thesis-card-art .trace-key {
  margin-top:10px;
  justify-content:space-between;
}
@media(max-width:960px) {
  .thesis-section.thesis-enhanced { height:auto; }
  .thesis-section.thesis-enhanced .thesis-sticky { position:static; min-height:0; display:block; padding:48px var(--gutter); }
  .thesis-grid { grid-template-columns:1fr; gap:24px; }
  .thesis-card-copy h2 { font-size:25px; }
}
@media(max-width:759px) {
  .home-page .hero {
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    min-height:100svh;
    height:auto;
    padding:180px var(--gutter) 60px;
  }
  .home-page .hero-copy {
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:100%;
  }
  .home-page .building-caption { order:2; margin-bottom:16px; font-size:13px; }
  .home-footer .reef-editorial > div + div { padding-top:0; }
  .home-footer .reef-definition { grid-template-columns:1fr; gap:16px; }
  .home-footer .reef-contact { justify-self:start; }
  .outcome summary { padding:18px 0; }
  .home-page .outcome p { padding-right:0; }
}
/* Fit the drawing to the actual mobile heading height without changing the pin. */
@media (max-width:759px) and (prefers-reduced-motion:no-preference) {
  .home-page .building-enhanced .building-sticky {
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    gap:10px;
    padding-bottom:40px;
  }
  .home-page .building-enhanced .building-layout { height:auto; min-height:0; width:100%; margin:0 auto; align-self:stretch; gap:8px; }
  .home-page .building-enhanced .building-art { overflow:hidden; }
  .home-page .building-enhanced .building-skip { bottom:12px; }
}
/* Compact the copy and controls only when the phone viewport is short. */
@media (max-width:759px) and (max-height:680px) and (prefers-reduced-motion:no-preference) {
  .home-page .building-enhanced .building-sticky { padding-top:14px; }
  .home-page .building-enhanced .building-heading h2 { font-size:22px; line-height:1.12; }
  .home-page .building-enhanced .building-intro { margin-top:6px; font-size:13px; line-height:1.4; }
  .home-page .building-enhanced .building-copy { padding-top:0; }
  .home-page .building-enhanced .depth-choices { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:8px; }
  .home-page .building-enhanced .depth-choice { flex-direction:column; justify-content:center; align-items:flex-start; min-height:58px; padding:6px; gap:3px; }
  .home-page .building-enhanced .depth-choice .depth-choice-number { width:auto; font-size:10px; }
  .home-page .building-enhanced .depth-choice .depth-choice-label { font-size:11px; line-height:1.2; }
  .home-page .building-enhanced .depth-panels { min-height:72px; }
  .home-page .building-enhanced .depth-panel h3 { margin-top:4px; font-size:18px; line-height:1.2; }
  .home-page .building-enhanced .building-caption { margin:6px 0 0; font-size:11px; line-height:1.35; max-width:none; }
}
@media(prefers-reduced-motion:reduce) {
  .thesis-section.thesis-enhanced { height:auto; }
  .thesis-section.thesis-enhanced .thesis-sticky { position:static; min-height:0; display:block; }
  .outcome-icon,.home-page .outcome p { transition:none; }
  .outcome::details-content { transition:none; }
}
