/* v7 · Home — the flagship.
   One long, calm read: a full-bleed Royal Exchange head with the figures lifted over its foot; a split
   section head (heading left, serif lede right) over four photographed audiences; the three steps as large
   photographs with a white panel laid over each; the fee band as a full-width navy plate; a seven-tile
   library; and a full-bleed close. Layout and look only: the text, its order and the menu are untouched. */

/* full-bleed bands align their text with the page column through the core's --gutter (v7.css) */

/* ── photographs (each used once on this page) ── */
body[data-page="index"] {
  --hero: url("../img/photos/royal-exchange.jpg"); --hero-pos: 50% 35%; --hero-blend: normal;
  --cta: url("../img/photos/about-team.jpg"); --cta-pos: 50% 58%; --cta-blend: luminosity;
}
body[data-page="index"] .who-card:nth-child(1) { --img: url("../img/photos/aud-family-sm.jpg"); --img-pos: 55% 26% }
body[data-page="index"] .who-card:nth-child(2) { --img: url("../img/photos/aud-institutions-sm.jpg"); --img-pos: 50% 45% }
body[data-page="index"] .who-card:nth-child(3) { --img: url("../img/photos/aud-hnw-sm.jpg"); --img-pos: 50% 58% }
body[data-page="index"] .who-card:nth-child(4) { --img: url("../img/photos/aud-desks-sm.jpg"); --img-pos: 50% 58% }
body[data-page="index"] .three > .card:nth-child(1) .stage { --img: url("../img/photos/dc-corridor.jpg"); --img-pos: 50% 50% }
body[data-page="index"] .three > .card:nth-child(2) .stage { --img: url("../img/photos/mac-light.jpg"); --img-pos: 60% 40% }
body[data-page="index"] .three > .card:nth-child(3) .stage { --img: url("../img/photos/hero-security.jpg"); --img-pos: 50% 50% }
/* "Go deeper": each tile shows the hero of the page it opens */
body[data-page="index"] .library > .card:nth-child(1) .stage { --img: url("../img/photos/london-bluehour-sm.jpg"); --img-pos: 50% 60% }
body[data-page="index"] .library > .card:nth-child(2) .stage { --img: url("../img/photos/hero-platform-sm.jpg"); --img-pos: 50% 55% }
body[data-page="index"] .library > .card:nth-child(3) .stage { --img: url("../img/photos/hero-research-sm.jpg"); --img-pos: 50% 70% }
body[data-page="index"] .library > .card:nth-child(4) .stage { --img: url("../img/photos/dc-hall-white-sm.jpg"); --img-pos: 50% 50% }
body[data-page="index"] .library > .card:nth-child(5) .stage { --img: url("../img/photos/london-city-day-sm.jpg"); --img-pos: 50% 50% }
body[data-page="index"] .library > .card:nth-child(6) .stage { --img: url("../img/photos/hero-strategies-sm.jpg"); --img-pos: 50% 45% }
body[data-page="index"] .library > .card:nth-child(7) .stage { --img: url("../img/photos/nyc-sunrise-sm.jpg"); --img-pos: 50% 55% }

/* ── type scale for the flagship ── */
body[data-page="index"] .poster h2 { font-size: clamp(2.3rem, 4.5vw, 3.9rem); line-height: .98 }
body[data-page="index"] .sh { grid-template-columns: minmax(0, 1fr); gap: .9rem }
body[data-page="index"] .sh-num { font-size: .78rem; letter-spacing: .14em }
body[data-page="index"] .poster > section:has(> .who-grid) .sh-num { font-size: 1.25rem; line-height: 1 }

/* ── head: a taller plate, a stronger veil on the text side, the specs as a ruled strip ── */
body[data-page="index"] .hero {
  min-height: clamp(640px, 92vh, 900px);
  padding-top: clamp(4.4rem, 9vh, 7rem);
  padding-bottom: calc(clamp(3rem, 6vh, 4.4rem) + 5rem);
}
@media (min-width: 641px) {
  body[data-page="index"] .hero {
    background-image:
      linear-gradient(90deg, rgba(11, 19, 34, .92) 0%, rgba(11, 19, 34, .78) 36%, rgba(11, 19, 34, .32) 66%, rgba(11, 19, 34, .1) 100%),
      linear-gradient(0deg, rgba(11, 19, 34, .72), rgba(11, 19, 34, 0) 46%),
      var(--hero);
  }
}
/* tablets: the text runs nearly the full width over the bright stone, so the veil holds across */
@media (min-width: 641px) and (max-width: 1100px) {
  body[data-page="index"] .hero {
    background-image:
      linear-gradient(90deg, rgba(11, 19, 34, .92) 0%, rgba(11, 19, 34, .84) 45%, rgba(11, 19, 34, .7) 80%, rgba(11, 19, 34, .6) 100%),
      linear-gradient(0deg, rgba(11, 19, 34, .72), rgba(11, 19, 34, 0) 46%),
      var(--hero);
  }
}
body[data-page="index"] .hero h1 { font-size: clamp(3rem, 5.8vw, 5.6rem); max-width: 17ch; margin-top: 1rem }
body[data-page="index"] .hero .chips {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0;
  margin: 1.9rem 0 0; border-block: 1px solid rgba(255, 255, 255, .28); max-width: max-content;
}
body[data-page="index"] .hero .chip {
  background: none; border: 0; border-radius: 0; backdrop-filter: none;
  padding: .9rem 1.5rem; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
body[data-page="index"] .hero .chip:first-child { padding-left: 0 }
body[data-page="index"] .hero .chip + .chip { border-left: 1px solid rgba(255, 255, 255, .28) }
body[data-page="index"] .hero .lede { font-size: 1.24rem; line-height: 1.55; max-width: 42rem; margin-top: 1.5rem; color: rgba(255, 255, 255, .9) }
body[data-page="index"] .hero .actions { margin-top: 2rem }
body[data-page="index"] .hero .firm { max-width: 54rem; color: rgba(255, 255, 255, .8); padding-top: 1.2rem }

/* ── the lifted figures band ── */
body[data-page="index"] .stats-band { margin-top: -5.2rem }
body[data-page="index"] .stat { padding: 2.1rem 2rem 2rem }
body[data-page="index"] .stat::before { content: ""; display: block; width: 2.2rem; height: 2px; background: var(--gold); margin-bottom: 1.5rem }
body[data-page="index"] .stat-num { font-size: clamp(2.4rem, 4.4vw, 3.9rem); margin-bottom: .7rem }
body[data-page="index"] .stat-label { font-size: .72rem }

/* ── split section heads: the heading on the left, the serif lede on the right, one rule across ── */
body[data-page="index"] .poster > section:has(> .section-lead) {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: end;
}
body[data-page="index"] .poster > section:has(> .section-lead)::before { content: ""; grid-column: 1 / -1; border-top: 2px solid var(--fg) }
body[data-page="index"] .poster > section:has(> .section-lead) > * { grid-column: 1 / -1; min-width: 0 }
body[data-page="index"] .poster > section:has(> .section-lead) > .sh { grid-column: 1; border-top: 0; padding-top: 1.5rem; margin: 0 }
body[data-page="index"] .poster > section:has(> .section-lead) > .section-lead { grid-column: 2; margin: 0; padding-top: 1.5rem; font-size: 1.32rem; line-height: 1.5; max-width: 40rem; color: #3A4458 }

/* ── who this is for: four photographed audiences, editorial (no boxes), ruled ledger lists ── */
body[data-page="index"] .who-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.6rem 1.6rem; margin-top: clamp(2.4rem, 4vw, 3.4rem) }
body[data-page="index"] .who-card { background: none; border: 0; border-radius: 0; overflow: visible; padding: 0 }
body[data-page="index"] .who-card::before { aspect-ratio: 4 / 5; border-radius: var(--radius); margin-bottom: 1.5rem }
body[data-page="index"] .who-card > * { padding-inline: 0 }
body[data-page="index"] .who-card h3 { font-size: 1.42rem; line-height: 1.1; min-height: 2.2em; text-wrap: wrap; margin: 0; padding-bottom: .9rem; border-bottom: 2px solid var(--fg) }
body[data-page="index"] .who-card ul { list-style: none; margin: 0; padding: 0 }
body[data-page="index"] .who-card li { margin: 0; padding: .72rem 0; border-bottom: 1px solid var(--line); font-size: .93rem; line-height: 1.45; color: var(--muted) }

/* ── how it works: each step a large photograph with a white panel laid over it ── */
body[data-page="index"] .three { gap: clamp(3rem, 7vw, 6rem); margin-top: clamp(2.6rem, 5vw, 4rem) }
body[data-page="index"] .three > .card {
  background: none; border: 0; border-radius: 0; overflow: visible;
  grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center;
}
body[data-page="index"] .three > .card .stage {
  grid-column: 1 / span 8; grid-row: 1; order: 0; align-self: stretch;
  min-height: clamp(520px, 46vw, 640px); height: auto; border-radius: var(--radius);
}
body[data-page="index"] .three > .card .body {
  grid-column: 7 / -1; grid-row: 1; position: relative; z-index: 1;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(2rem, 3.4vw, 3.2rem); gap: .8rem;
}
body[data-page="index"] .three > .card:nth-child(even) .stage { grid-column: 5 / -1 }
body[data-page="index"] .three > .card:nth-child(even) .body { grid-column: 1 / span 6 }
body[data-page="index"] .three > .card .body > span:first-child { font-size: .76rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem }
body[data-page="index"] .three > .card .body h3 { font-size: clamp(1.9rem, 2.9vw, 2.6rem) }
body[data-page="index"] .three > .card .body p { font-family: var(--serif); font-size: 1.12rem; line-height: 1.55; color: #3A4458 }
body[data-page="index"] .three > .card ul.tick { gap: 0; margin-top: .5rem; border-top: 1px solid var(--line) }
body[data-page="index"] .three > .card ul.tick li { padding: .62rem 0; border-bottom: 1px solid var(--line); font-size: .93rem; line-height: 1.45 }
body[data-page="index"] .three > .card ul.tick li::before { margin-top: .5em; width: 5px; height: 5px }

/* ── the fee band: a full-width navy plate, split head, the two outcomes, the split bar ── */
body[data-page="index"] .poster > section:has(> .share) { padding-block: 0 }
body[data-page="index"] .share {
  width: 100vw; margin: 0 0 0 calc(50% - 50vw); border-radius: 0;
  padding: clamp(4rem, 8vw, 6.8rem) var(--gutter);
  background: var(--navy);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 6vw, 6rem); row-gap: 0; align-items: end;
}
body[data-page="index"] .share::before { content: ""; grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .32) }
body[data-page="index"] .share > * { grid-column: 1 / -1; min-width: 0 }
body[data-page="index"] .share > .sh { grid-column: 1; border-top: 0; padding-top: 1.5rem; margin: 0 }
body[data-page="index"] .share > .lead { grid-column: 2; padding-top: 1.5rem; font-size: 1.22rem; line-height: 1.5; color: #CDD4DF }
body[data-page="index"] .share h2 { font-size: clamp(2.2rem, 4vw, 3.5rem) }
body[data-page="index"] .share > .two { gap: 1.4rem; margin-top: clamp(2.4rem, 4vw, 3.4rem) }
body[data-page="index"] .share .card { background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .14) }
body[data-page="index"] .share .stage { background: rgba(5, 10, 20, .35); border-bottom: 1px solid rgba(255, 255, 255, .1) }
body[data-page="index"] .share .stage svg.scene { height: clamp(170px, 17vw, 230px); padding: 1.2rem 1.4rem .6rem }
body[data-page="index"] .share .body { padding: 1.6rem 1.8rem 1.9rem }
body[data-page="index"] .share .body h3 { font-size: 1.6rem }
body[data-page="index"] .share .body p { font-size: 1rem; color: #BCC4D2 }
body[data-page="index"] .share .two > .card:nth-child(1) .k { color: var(--gold-light) !important }
body[data-page="index"] .share .two > .card:nth-child(2) .k { color: #C9D0DC !important }
/* the charts redrawn in the house palette: gold for the figures, white for the headline number */
body[data-page="index"] .share svg [stroke="#5CC08C"], body[data-page="index"] .share svg [stroke="#E9D3A1"] { stroke: var(--gold-light) }
body[data-page="index"] .share svg [fill="#5CC08C"], body[data-page="index"] .share svg [fill="#E9D3A1"] { fill: var(--gold-light) }
body[data-page="index"] .share svg text[fill="#5CC08C"] { fill: #fff }
body[data-page="index"] .share svg rect[fill="#5CC08C"] { opacity: .5 }
body[data-page="index"] .share svg circle[r="3.5"] { r: 2.4px }
body[data-page="index"] .share svg [stroke="#2A3B5E"] { stroke: #3A4C6E }
body[data-page="index"] .share svg text { font-family: var(--mono); opacity: .95 }
body[data-page="index"] .share svg text[fill="#A9B2C4"] { fill: #AEB7C6 }
body[data-page="index"] .share .bar { height: 54px; margin-top: 2rem; font-family: var(--mono); font-weight: 500; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase }
body[data-page="index"] .share .bar .you { padding-inline: 1.3rem }
/* the 10% reads across at every width (the core turns it upright only above 640px), as on Fees */
body[data-page="index"] .share .bar .us { writing-mode: horizontal-tb; font-size: .78rem; min-width: 3.4rem; padding: 0 .4rem }
body[data-page="index"] .share .bar-legend { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: #A3ADBF; margin-top: .9rem }

/* ── go deeper: a seven-tile library on a four-column grid; the first tile runs double ── */
body[data-page="index"] .library { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2.4rem }
body[data-page="index"] .library > .card:first-child { grid-column: span 2 }
body[data-page="index"] .library > .card .stage { aspect-ratio: auto; height: clamp(190px, 15.5vw, 230px) }
/* the core lays the white mark over a darkened foot; Home's foot is a touch deeper and lifts on hover */
body[data-page="index"] .library > .card .stage::after { background: linear-gradient(180deg, rgba(11, 19, 34, 0) 34%, rgba(11, 19, 34, .74)); transition: background-color .3s ease }
/* the white data hall needs a deeper foot for its arrow */
body[data-page="index"] .library > .card:nth-child(4) .stage::after { background-image: linear-gradient(180deg, rgba(11, 19, 34, .14) 0%, rgba(11, 19, 34, .22) 40%, rgba(11, 19, 34, .9) 84%) }
body[data-page="index"] .library > a.card:hover .stage::after { background-color: rgba(11, 19, 34, .12) }
body[data-page="index"] .library .stage-num { padding: 1rem 1.25rem; letter-spacing: -.03em }
body[data-page="index"] .library > .card .body { padding: 1.4rem 1.5rem 1.6rem }
/* the double tile lets its photograph take up the slack so the row ends level */
body[data-page="index"] .library > .card:first-child { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch }
body[data-page="index"] .library > .card:first-child .stage { height: auto; min-height: clamp(190px, 15.5vw, 230px) !important }
body[data-page="index"] .library > .card .body h3 { font-size: 1.32rem }
body[data-page="index"] .library > .card:first-child .body h3 { font-size: 1.6rem }

/* ── the close: a full-bleed photograph, the call stacked on the left; the core joins it to the footer.
   This is the house closing band: How it works, Platform, Strategies, Fees and Infrastructure repeat it. ── */
body[data-page="index"] .cta-band {
  grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 2rem;
  min-height: clamp(440px, 60vh, 600px); align-content: center; margin-top: 0;
  background-image: linear-gradient(90deg, rgba(11, 19, 34, .94) 0%, rgba(11, 19, 34, .8) 40%, rgba(11, 19, 34, .3) 100%), var(--cta);
}
body[data-page="index"] .cta-band h2 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); margin-bottom: 1rem }
body[data-page="index"] .cta-band p { font-size: 1.28rem; color: rgba(255, 255, 255, .86) }

/* ── responsive ── */
@media (max-width: 1100px) {
  body[data-page="index"] .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  body[data-page="index"] .who-card::before { aspect-ratio: 4 / 3 }
  body[data-page="index"] .who-card h3 { min-height: 0 }
  body[data-page="index"] .library { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  body[data-page="index"] .library > .card .stage { height: clamp(180px, 24vw, 240px) }
  body[data-page="index"] .library > .card:first-child .stage { min-height: clamp(220px, 32vw, 320px) !important }
}
@media (max-width: 1000px) {
  body[data-page="index"] .three > .card .body { grid-column: 6 / -1 }
  body[data-page="index"] .three > .card:nth-child(even) .body { grid-column: 1 / span 7 }
}
@media (max-width: 860px) {
  body[data-page="index"] .stat { padding-inline: 1.1rem }
  body[data-page="index"] .stat-num { font-size: 2rem }
  body[data-page="index"] .poster > section:has(> .section-lead) { grid-template-columns: minmax(0, 1fr) }
  body[data-page="index"] .poster > section:has(> .section-lead) > .section-lead { grid-column: 1; padding-top: 1rem }
  body[data-page="index"] .three > .card { grid-template-columns: minmax(0, 1fr) }
  body[data-page="index"] .three > .card .stage,
  body[data-page="index"] .three > .card:nth-child(even) .stage { grid-column: 1; grid-row: 1; min-height: clamp(260px, 52vw, 420px) }
  body[data-page="index"] .three > .card .body,
  body[data-page="index"] .three > .card:nth-child(even) .body { grid-column: 1; grid-row: 2; margin: -4rem clamp(.8rem, 4vw, 2rem) 0 }
  body[data-page="index"] .share { grid-template-columns: minmax(0, 1fr) }
  body[data-page="index"] .share > .lead { grid-column: 1; padding-top: 1rem }
}
@media (max-width: 640px) {
  body[data-page="index"] .hero { min-height: 600px; padding: 5.5rem 1rem 6.4rem; background-image: linear-gradient(0deg, rgba(11, 19, 34, .95) 0%, rgba(11, 19, 34, .82) 50%, rgba(11, 19, 34, .66) 100%), linear-gradient(0deg, rgba(11, 19, 34, 0), rgba(11, 19, 34, 0)), var(--hero) }
  body[data-page="index"] .hero h1 { font-size: clamp(2.5rem, 11.4vw, 3.4rem) }
  body[data-page="index"] .hero .lede { font-size: 1.12rem }
  body[data-page="index"] .hero .chips { grid-template-columns: repeat(2, auto) }
  body[data-page="index"] .hero .chip { padding: .75rem 1rem; font-size: .68rem }
  body[data-page="index"] .hero .chip:nth-child(3) { border-left: 0; padding-left: 0 }
  body[data-page="index"] .hero .chip:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .28) }
  body[data-page="index"] .stats-band { margin-top: -3.4rem; grid-template-columns: repeat(2, minmax(0, 1fr)) }
  body[data-page="index"] .stat { padding: 1.4rem 1.2rem 1.3rem }
  body[data-page="index"] .stat::before { margin-bottom: 1rem; width: 1.6rem }
  body[data-page="index"] .stat-num { font-size: min(2.2rem, 7vw) }
  body[data-page="index"] .stat-label { font-size: .66rem }
  body[data-page="index"] .who-grid { grid-template-columns: minmax(0, 1fr) }
  body[data-page="index"] .who-card::before { aspect-ratio: 3 / 2 }
  body[data-page="index"] .section-lead { font-size: 1.15rem !important }
  body[data-page="index"] .three > .card .stage,
  body[data-page="index"] .three > .card:nth-child(even) .stage { min-height: 250px }
  body[data-page="index"] .three > .card .body,
  body[data-page="index"] .three > .card:nth-child(even) .body { margin: -2.6rem .6rem 0; padding: 1.5rem 1.3rem 1.6rem }
  body[data-page="index"] .share { padding: 3.4rem 1rem }
  body[data-page="index"] .share .body { padding: 1.3rem 1.3rem 1.5rem }
  body[data-page="index"] .library { grid-template-columns: minmax(0, 1fr) }
  body[data-page="index"] .library > .card:first-child { grid-column: auto }
  body[data-page="index"] .library > .card .stage,
  body[data-page="index"] .library > .card:first-child .stage { height: 200px; min-height: 0 !important }
  /* the phone band: the core's veil and headline size (one line at 390), a little more air */
  body[data-page="index"] .cta-band { min-height: 0; gap: 1.6rem; padding: 4.4rem 1rem; background-image: linear-gradient(180deg, rgba(11, 19, 34, .86), rgba(11, 19, 34, .74) 55%, rgba(11, 19, 34, .9)), var(--cta) }
  body[data-page="index"] .cta-band h2 { font-size: clamp(2rem, 9vw, 2.4rem); margin-bottom: .8rem }
  body[data-page="index"] .cta-band p { font-size: 1.12rem }
}