/* v7 · Fees — 0% on the book.
   The City by day for the head; the terms set as a term sheet (number, term, detail) beside a photograph
   that stays in view while you read; the performance-fee band as a navy plate with the balance photograph,
   its two charts redrawn in the house palette and the split bar read flat; the fee comparison on a white
   plate with the totals called out as figures. Layout and look only: the text, its order, the chart and the
   menu are untouched. */

/* ── photographs (each used once on this page) ── */
body[data-page="fees"] {
  --hero: url("../img/photos/london-city-day.jpg"); --hero-pos: 50% 42%; --hero-blend: normal;
  --cta: url("../img/photos/aud-desks.jpg"); --cta-pos: 50% 58%; --cta-blend: normal;
}

/* ── head: the house proportions and type scale (v7.css); a firmer veil on the text side ── */
@media (min-width: 641px) {
  body[data-page="fees"] .hero {
    background-image:
      linear-gradient(90deg, rgba(11, 19, 34, .92) 0%, rgba(11, 19, 34, .78) 40%, rgba(11, 19, 34, .3) 72%, rgba(11, 19, 34, .12) 100%),
      linear-gradient(0deg, rgba(11, 19, 34, .6), rgba(11, 19, 34, 0) 50%),
      var(--hero);
  }
}
body[data-page="fees"] .hero h1 { max-width: 10ch; margin-top: 1rem }
body[data-page="fees"] .hero .lede { max-width: 40rem; font-size: 1.3rem; line-height: 1.55; color: rgba(255, 255, 255, .9); margin-top: 1.6rem }

/* ── 01 · the terms: a term sheet beside a photograph that stays in view ── */
body[data-page="fees"] .poster > section:has(> ol.points) { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(2rem, 4.4vw, 4.4rem) }
body[data-page="fees"] .poster > section:has(> ol.points) > * { min-width: 0 }
body[data-page="fees"] .poster > section:has(> ol.points)::before {
  content: ""; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(20, 33, 58, .1);
  background: var(--navy) url("../img/photos/paper-sm.jpg") 58% 50% / cover no-repeat;
}
body[data-page="fees"] ol.points { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: clamp(1.6rem, 3vw, 2.4rem) }
body[data-page="fees"] ol.points li { grid-template-columns: 3rem minmax(0, 1fr); gap: 0; padding: 1.5rem 0 1.6rem }
body[data-page="fees"] ol.points li:first-child { border-top: 2px solid var(--fg) }
body[data-page="fees"] ol.points li:last-child { border-bottom: 1px solid var(--line) }
body[data-page="fees"] ol.points li > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .5rem clamp(1.4rem, 2.6vw, 2.4rem); align-items: baseline }
body[data-page="fees"] ol.points li strong { margin: 0; font-size: 1.3rem; line-height: 1.18 }
body[data-page="fees"] ol.points li p { font-family: var(--serif); font-size: 1.1rem; line-height: 1.58; color: #2F3A4F }
body[data-page="fees"] .poster > section:has(> ol.points) > .back {
  justify-self: start; margin-top: 1.4rem; padding: 0; text-transform: none; letter-spacing: 0;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--red);
  text-decoration: underline; text-decoration-color: rgba(184, 50, 58, .35); text-underline-offset: .3em;
}
body[data-page="fees"] .poster > section:has(> ol.points) > .back:hover { color: var(--fg); text-decoration-color: currentColor }
@media (min-width: 1001px) {
  body[data-page="fees"] .poster > section:has(> ol.points) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr) }
  body[data-page="fees"] .poster > section:has(> ol.points) > .sh { grid-column: 1 / -1; grid-row: 1 }
  body[data-page="fees"] .poster > section:has(> ol.points)::before {
    grid-column: 1; grid-row: 2 / span 2; align-self: start; position: sticky; top: 7rem;
    aspect-ratio: 1 / 1; margin-top: clamp(1.6rem, 3vw, 2.4rem);
  }
  body[data-page="fees"] .poster > section:has(> ol.points) > ol.points { grid-column: 2; grid-row: 2 }
  body[data-page="fees"] .poster > section:has(> ol.points) > .back { grid-column: 2; grid-row: 3 }
}

/* ── the performance-fee band: a navy plate with the balance photograph ── */
body[data-page="fees"] .poster > section:has(> .share) { padding-block: 0 }
body[data-page="fees"] .share {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 4.4rem); row-gap: 1.4rem;
  padding: clamp(2.4rem, 5vw, 4.4rem); margin-block: clamp(2rem, 4vw, 3.4rem);
  border-radius: var(--radius); background: var(--navy);
}
body[data-page="fees"] .share > * { grid-column: 1 / -1; min-width: 0 }
body[data-page="fees"] .share > .sh { grid-column: 1; grid-row: 1; margin: 0; align-self: start }
body[data-page="fees"] .share > .lead { grid-column: 1; grid-row: 2; align-self: start; font-size: 1.24rem; line-height: 1.55; color: #CDD4DF; max-width: 36rem }
body[data-page="fees"] .share::before {
  content: ""; grid-column: 2; grid-row: 1 / span 2; min-height: 300px; border-radius: 10px;
  background: var(--navy-deep) url("../img/photos/about-scales-sm.jpg") 70% 42% / cover no-repeat;
}
body[data-page="fees"] .share h2 { font-size: clamp(2.1rem, 3.8vw, 3.3rem) }
body[data-page="fees"] .share > .two { gap: 1.4rem; margin-top: 1.4rem }
body[data-page="fees"] .share .card { background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .14) }
body[data-page="fees"] .share .stage { background: rgba(5, 10, 20, .35); border-bottom: 1px solid rgba(255, 255, 255, .1) }
body[data-page="fees"] .share .stage svg.scene { height: clamp(170px, 16vw, 220px); padding: 1.2rem 1.4rem .6rem }
body[data-page="fees"] .share .body { padding: 1.6rem 1.8rem 1.9rem }
body[data-page="fees"] .share .body h3 { font-size: 1.6rem }
body[data-page="fees"] .share .body p { font-size: 1rem; color: #BCC4D2 }
body[data-page="fees"] .share .two > .card:nth-child(1) .k { color: var(--gold-light) !important }
body[data-page="fees"] .share .two > .card:nth-child(2) .k { color: #C9D0DC !important }
/* the charts in the house palette: gold for the figures, white for the headline number */
body[data-page="fees"] .share svg [stroke="#5CC08C"], body[data-page="fees"] .share svg [stroke="#E9D3A1"] { stroke: var(--gold-light) }
body[data-page="fees"] .share svg [fill="#5CC08C"], body[data-page="fees"] .share svg [fill="#E9D3A1"] { fill: var(--gold-light) }
body[data-page="fees"] .share svg text[fill="#5CC08C"] { fill: #fff }
body[data-page="fees"] .share svg [stroke="#2A3B5E"] { stroke: #3A4C6E }
body[data-page="fees"] .share .bar { height: 56px; margin-top: 1rem; font-family: var(--mono); font-weight: 500; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase }
body[data-page="fees"] .share .bar .you { padding-inline: 1.4rem }
body[data-page="fees"] .share .bar .us { writing-mode: horizontal-tb; font-size: .8rem; min-width: 3.4rem; padding: 0 .4rem }
body[data-page="fees"] .share .bar-legend { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: #A3ADBF; margin-top: -.4rem }

/* ── 02 · how the fees compare: a white plate, totals called out as figures ── */
body[data-page="fees"] .poster > section.machine:has(.compare-section) .section-lead { font-size: 1.24rem; color: #3A4458; max-width: 48rem }
body[data-page="fees"] .fee-legend { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); gap: .6rem 2rem; margin: 1rem 0 0 }
body[data-page="fees"] .fee-legend i { width: 14px; height: 14px; border-radius: 2px; margin-right: .6rem; vertical-align: -2px }
body[data-page="fees"] .compare-section {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(.6rem, 2vw, 1.4rem) clamp(1.4rem, 3.4vw, 3rem) clamp(1.6rem, 3vw, 2.6rem); gap: 0;
}
body[data-page="fees"] .compare-rows { gap: 0 }
body[data-page="fees"] .compare-row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: .8rem 2.4rem; padding: 1.8rem 0 1.9rem }
body[data-page="fees"] .compare-row + .compare-row { border-top: 1px solid var(--line) }
body[data-page="fees"] .compare-row-label { font-size: 1.4rem; letter-spacing: -.02em; line-height: 1.1 }
body[data-page="fees"] .compare-row-label small { font-size: .74rem; letter-spacing: .02em; margin-top: .5rem; line-height: 1.5 }
body[data-page="fees"] .bar-set { gap: .9rem }
body[data-page="fees"] .bar-row { grid-template-columns: 8.6rem minmax(0, 1fr) 7.4rem; column-gap: 1.1rem; row-gap: .45rem; font-size: .92rem }
body[data-page="fees"] .bar-row .bar-track { height: 20px }
body[data-page="fees"] .bar-hh span:first-child { color: var(--red) }
body[data-page="fees"] .bar-val { font-family: var(--display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.02em; color: var(--fg) }
body[data-page="fees"] .bar-hh .bar-val { color: var(--red) }
body[data-page="fees"] .bar-split { margin-top: 0; font-size: .72rem; letter-spacing: .02em }
body[data-page="fees"] .compare-foot { margin-top: .4rem; padding-top: 1.3rem; border-top: 2px solid var(--fg); font-size: .86rem; line-height: 1.6; max-width: none }

/* ── responsive ── */
@media (max-width: 1000px) {
  body[data-page="fees"] .poster > section:has(> ol.points)::before { grid-row: 2; aspect-ratio: 16 / 7; margin-top: 1.6rem }
}
@media (max-width: 860px) {
  body[data-page="fees"] ol.points li > div { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); column-gap: 1.6rem }
  body[data-page="fees"] .share { grid-template-columns: minmax(0, 1fr) }
  body[data-page="fees"] .share > .sh, body[data-page="fees"] .share > .lead { grid-column: 1 }
  body[data-page="fees"] .share::before { grid-column: 1; grid-row: 3; min-height: 0; aspect-ratio: 2 / 1 }
  body[data-page="fees"] .compare-row { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 640px) {
  body[data-page="fees"] .hero .lede { font-size: 1.12rem }
  body[data-page="fees"] .section-lead { font-size: 1.12rem !important }
  body[data-page="fees"] ol.points li { grid-template-columns: 2.4rem minmax(0, 1fr); padding: 1.2rem 0 1.3rem }
  body[data-page="fees"] ol.points li > div { grid-template-columns: minmax(0, 1fr) }
  body[data-page="fees"] ol.points li strong { font-size: 1.18rem }
  body[data-page="fees"] ol.points li p { font-size: 1.04rem }
  body[data-page="fees"] .share { padding: 1.8rem 1.2rem; margin-inline: 0 }
  body[data-page="fees"] .share .body { padding: 1.3rem 1.3rem 1.5rem }
  body[data-page="fees"] .share .bar { height: 50px; font-size: .7rem }
  body[data-page="fees"] .share .bar .you { padding-inline: .9rem }
  body[data-page="fees"] .share .bar .us { min-width: 2.8rem; font-size: .7rem }
  body[data-page="fees"] .compare-section { padding: .4rem 1.1rem 1.4rem }
  /* name and total on one line, the bar full width beneath, the split under it (text order unchanged) */
  body[data-page="fees"] .bar-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: .8rem; row-gap: .4rem; font-size: .86rem }
  body[data-page="fees"] .bar-row > span:first-child { grid-column: 1; grid-row: 1 }
  body[data-page="fees"] .bar-row > .bar-val { grid-column: 2; grid-row: 1; font-size: 1.05rem }
  body[data-page="fees"] .bar-row > .bar-track { grid-column: 1 / -1; grid-row: 2; height: 16px }
  body[data-page="fees"] .bar-row > .bar-split { grid-column: 1 / -1; grid-row: 3 }
}

/* ── the close: the house band, as on Home (the call stacked on the left); the core joins it to the footer ── */
body[data-page="fees"] .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="fees"] .cta-band h2 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); margin-bottom: 1rem }
body[data-page="fees"] .cta-band p { font-size: 1.28rem; color: rgba(255, 255, 255, .86) }
@media (max-width: 640px) {
  body[data-page="fees"] .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="fees"] .cta-band h2 { font-size: clamp(2rem, 9vw, 2.4rem); margin-bottom: .8rem }
  body[data-page="fees"] .cta-band p { font-size: 1.12rem }
}