/* ---------------------------------------------------------------- header */
/* Held one frame-width down, where it starts. Stuck at 0 it rose 6px under the
   frame the moment the page moved, and the pages that snap open a few pixels
   down (Home, Company, Owners' Manual) showed the logo 6px higher than every
   other page. */
.site-header{
  position:sticky; top:var(--frame); z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.site-header .wrap{
  display:flex; align-items:center; gap:clamp(1rem,2vw,2rem);
  min-height:72px; padding-block:.75rem;
  flex-wrap:nowrap;
}
/* Nothing in the header row may shrink. A flex item squeezed below its content
   does not wrap, it spills, and the links paint over the links beside them.
   When the row stops fitting the menu button takes over, below. */
.brand,.site-nav,.header-end{ flex:0 0 auto; }
.brand{ flex:0 0 auto; display:flex; align-items:center; min-height:44px; }
.brand img,.brand svg{ height:37px; width:auto; }

/* The nav follows the logo; the ticker and buttons hold the right edge. Centred
   between the two, it sat left of the page's centre (the right side is twice
   the logo's width) and read as a mistake. */
.site-nav{ display:flex; align-items:center; gap:clamp(.8rem,1.3vw,1.4rem); margin-inline-start:clamp(1rem,2.5vw,3rem); }
.header-end{ margin-inline-start:auto; }
.nav-login{ display:none; }
.site-nav a,
.site-nav .soon{
  color:var(--ink); font-size:var(--step--2); white-space:nowrap;
  padding-block:.35rem; border-bottom:2px solid transparent;
}
.site-nav a:hover{ text-decoration:none; border-bottom-color:var(--rule-strong); }
.site-nav a[aria-current="page"]{ color:var(--blue); border-bottom-color:var(--blue); font-weight:600; }

.header-end{ display:flex; align-items:center; gap:1rem; }
.btn-header{
  display:inline-block; background:var(--blue); color:var(--ink-inverse);
  padding:.5rem .95rem; font-size:var(--step--2); font-weight:600;
  white-space:nowrap; letter-spacing:.02em;
}
.btn-header:hover{ background:var(--blue-deep); text-decoration:none; }

.ticker{
  display:inline-flex; align-items:baseline; gap:.45rem;
  color:var(--ink-2); font-size:var(--step--2); white-space:nowrap;
  /* The price arrives by script a moment after the page. Sized to the code
     alone, the ticker grew 68px when it landed and slid the navigation left
     on every page. It holds the room for "A$0.00 +0.00" from the start. */
  min-width:12.8em; font-variant-numeric:tabular-nums;
}
.ticker b{ color:var(--ink); font-weight:600; letter-spacing:.04em; }
.ticker .price{ font-weight:500; }
/* Never red or green on a share price, per the concept. */
.ticker .chg[data-dir="up"]{ color:var(--blue); }
.ticker .chg[data-dir="down"]{ color:var(--ink-3); }

/* The menu button is three drawn lines, not a glyph in a box. A bordered box
   reads as a form control parked in the middle of the masthead; the lines read
   as part of the type. The button is 44px square for the thumb, while the icon
   inside it stays small. */
.menu-toggle{
  display:none; background:none; border:0; padding:0; cursor:pointer;
  width:44px; height:44px; flex:0 0 auto; position:relative;
  color:var(--ink); margin-right:-10px;   /* optical: the icon meets the gutter */
}
.menu-toggle .bars,
.menu-toggle .bars::before,
.menu-toggle .bars::after{
  position:absolute; width:21px; height:1.5px; background:currentColor;
}
.menu-toggle .bars{ left:50%; top:50%; margin-left:-10.5px; }
.menu-toggle .bars::before{ content:""; left:0; top:-6.5px; }
.menu-toggle .bars::after{ content:""; left:0; top:6.5px; }
.menu-toggle .bars::before,
.menu-toggle .bars::after{ transition:transform var(--dur-3) var(--ease); }
/* Open: the outer lines cross and the middle one is simply not there. */
.menu-toggle[aria-expanded="true"] .bars{ background:transparent; }
.menu-toggle[aria-expanded="true"] .bars::before{ transform:translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars::after{ transform:translateY(-6.5px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero */
.hero{ position:relative; background:var(--ink); }
.hero-media{ position:absolute; inset:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  /* Hold the top of the frame, so the sign on the building stays in shot. */
  object-position:50% 22%;
}
.hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.1)); }

.hero .wrap{ position:relative; padding-block:clamp(2.5rem,6vw,5.5rem); }

.hero-card{
  /* The paper, laid over the photograph and letting a little of it through,
     as the document draws it. */
  background:var(--cover); padding:clamp(1.5rem,3.5vw,2.75rem);
  max-width:46rem;
}
/* No eyebrow: the masthead directly above carries the company's name on every
   screen, so repeating it here costs a line and says nothing new. */
.hero-card .eyebrow{ display:none; }
/* The same proportional distance as every other heading on the site, rather
   than a fixed 1.25rem that made this the one heading out of step. */
.hero-card h1{ margin-block:0 0.68em; }
.hero-card h1 .accent{ color:var(--blue); }
/* The headline is three short sentences, one to a line. On a phone the type
   steps down just enough for the longest, "Partnerships compound.", to stay
   on its own line; wider screens keep the normal title size. */
.hero-card h1 .line{ display:block; }
.hero-card h1{ font-size:min(var(--step-title), calc((100vw - 5.5rem) / 12.4)); }
.hero-card .standfirst{ color:var(--ink-2); max-width:36rem; }

.hero-stats{
  display:grid; gap:1rem 1.5rem; margin-top:1.75rem; padding-top:1.75rem;
  border-top:1px solid var(--rule-strong);
  grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));
}
.hero-stats .v{ font-size:var(--step-1); font-weight:600; line-height:1.2; }
.hero-stats .k{ font-size:var(--step--1); color:var(--ink-3); margin-top:.15rem; }

/* On a phone the pair headings carry their own rule, as the section openers
   elsewhere on the site do. Left to the table's top border the line floats a
   clear 20px under the heading and reads as unattached to it. */
@media (max-width:899px){
  .cols-2 > * > h2 + .table-wrap > table.meta,
  .cols-2 > * > .ledger{ border-top:0; }
}

/* ------------------------------------------------- the hero on a phone
   The card is the whole of the first screen, so everything in it is competing
   for the same 780 pixels. Two lines of it said what the masthead directly
   above already says, and six more said what the Welcome letter says properly
   on the very next page. Both go, and what is left gets room to sit in. */
@media (max-width:899px){
  .hero .wrap{ padding-block:1.1rem; }
  .hero-card{ padding:1.6rem 1.35rem; }
  .hero-card .standfirst{ }
  .hero-stats{
    /* Evenly weighted: the same space above the rule as below it. */
    margin-top:1.35rem; padding-top:1.35rem; gap:1.15rem 1.25rem;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .hero-stats .v{ font-size:var(--step-1); }
  /* Small enough that every label holds one line, down to a 320px screen. */
  .hero-stats .k{  }
}

/* --------------------------------------------------------------- columns */
.cols{ display:grid; gap:clamp(1.75rem,4vw,3.5rem); }
/* On a phone the two halves of a pair are a full-height page each, so the gap
   that separates them on a desktop would push each page past its screen.
   This lives here rather than in base.css because the rule above it does. */
@media (max-width:899px){ .cols-2{ row-gap:0; } }
.cols > *{ min-width:0; }
.cols-2{ grid-template-columns:1fr; }
/* Two columns need enough width for each to hold a line of its own. At 760 a
   column is about 340px, which is narrower than most of the announcement
   titles, so the pair stays stacked until there is room for it. */
@media (min-width:900px){
  .cols-2{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  /* The rule lives in its own track, so the two columns stay identical. */
  .cols-2.with-rule{
    grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
    column-gap:clamp(1.5rem,2.6vw,2.75rem);
  }
  .cols-2.with-rule::before{
    content:""; grid-row:1; grid-column:2; background:var(--rule); align-self:stretch;
  }
  .cols-2.with-rule > :last-child{ grid-column:3; }
}

.prose p + p{ margin-top:1rem; }
.prose{ color:var(--ink-2); max-width:42rem; }
.prose .sign{ color:var(--ink); font-weight:400; margin-top:1.5rem; }
.prose .sign b{ font-weight:600; }

/* ---------------------------------------------------------------- ledger */
/* "Start here": a label, a title and an action, ruled like a contents page. */
.ledger{ border-top:1px solid var(--rule); margin-top:var(--block-top); }
.ledger-row{
  display:grid; gap:.25rem 1rem; align-items:baseline;
  grid-template-columns:minmax(0,1fr) auto;
  padding-block:.5rem; border-bottom:1px solid var(--rule);
  min-height:var(--row-h); align-content:center;
}
.ledger-row > *{ min-width:0; }
@media (max-width:899px){
  .ledger-row a.t{ padding-block:.6rem; margin-block:-.6rem; }
}
.ledger-row .t{ overflow-wrap:anywhere; }
.ledger-row .k{ grid-column:1/-1; font-size:var(--step--1); color:var(--ink-3); }
.ledger-row .t{ color:var(--ink); }
/* A link is blue and unruled, everywhere on the site. This one carried its
   own black-and-underlined treatment, so the same document read one way in a
   table and another on the home page. It follows the site now. */
.ledger-row a.t{
  color:var(--blue); text-decoration:none;
  text-decoration-thickness:1px; text-underline-offset:.28em;
  transition:color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease);
}
.ledger-row a.t:hover,
.ledger-row a.t:focus-visible{ text-decoration:underline; }

/* Each announcement opens a document, so the row says so and gives the eye a
   second thing to aim at. */
@media (min-width:640px){
  .ledger-row{ grid-template-columns:8rem minmax(0,1fr) auto; }
  /* No label column: the title already names what the document is. */
  .ledger-row.no-label{ grid-template-columns:minmax(0,1fr) auto; }
  .ledger-row .k{ grid-column:auto; }
}

/* ----------------------------------------------------------------- stats */
/* After a paragraph the figures take the block gap. Without it the intro on
   the Scoreboard and the Fact Sheet sat 0px above the first tile. */
.stat-grid{ margin-top:var(--block-top); }
.stat-grid{
  /* Separate tiles with a gap between them, as the document draws them. */
  display:grid; gap:clamp(.9rem,1.5vw,1.35rem); background:transparent; border:0;
  grid-auto-rows:1fr;
}
@media (min-width:600px){ .stat-grid{ grid-template-columns:repeat(3,1fr); } }
.stat{
  background:var(--blue-pale); border-top:3px solid var(--blue);
  padding:clamp(1.15rem,2.2vh,1.7rem) 1.4rem clamp(1.1rem,2vh,1.6rem);
  display:flex; flex-direction:column; gap:0;
}
.stat .v{
  font-size:var(--step-4); font-weight:700; color:var(--blue-deep);
  line-height:1; letter-spacing:-.025em;
}
/* On a phone a figure reads at the title's size, not the section heading's. */
@media (max-width:899px), (max-height:619px){ .stat .v{ font-size:var(--step-title); } }
.stat .v small{ font-size:.5em; font-weight:700; letter-spacing:0; }

/* The label uses the full width of its tile, so every one of them fits a single
   line. A 34ch cap was squeezing it to 333px inside a 522px tile, which is what
   forced the two longest labels to wrap. */
.stat .k{
  font-size:var(--step-0); color:var(--ink); line-height:1.45;
  margin-top:.6rem;
}

/* The note is a footnote on the figure, not a second label: it sits at the foot
   of the box, set smaller and in small capitals, so notes line up across a row
   and never compete with the label above them. */
/* The footnote follows the label immediately, small and quiet, the way the
   document sets it. Not pinned to the bottom of a tall box. */
.stat .n{ margin-top:.45rem; font-size:var(--step--1); color:var(--ink-3); }

/* ------------------------------------------------------------ principles */
.numbered{ list-style:none; display:grid; gap:0; }

/* Two columns read down, not across: 1 to 5 on the left, 6 to 10 on the right.
   Because both sit in one grid, each pair shares a row height, so the rule
   under 2 lands level with the rule under 7. Items stretch to fill their row,
   which is what puts the two sets of rules on the same lines. */
.numbered.paired{ position:relative; }
@media (min-width:760px){
  .numbered.paired{
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-template-rows:repeat(5, auto);
    grid-auto-flow:column;
    column-gap:clamp(2.25rem, 3.6vw, 3.75rem);
  }
  .numbered.paired > li{
    align-self:stretch;
    /* The spare height in a row is shared above and below the text, so a short
       principle beside a long one does not leave a void under it. */
    align-items:center;
  }
  .numbered.paired::before{
    content:""; position:absolute; top:0; bottom:0; left:50%;
    width:1px; background:var(--rule);
  }
}
.numbered li{
  display:grid; grid-template-columns:2.35rem minmax(0,1fr); gap:1rem;
  padding-block:clamp(.8rem,1.35vh,1.2rem); border-bottom:1px solid var(--rule); align-items:start;
}
.numbered .no{
  width:2.35rem; height:2.35rem; border-radius:50%;
  background:var(--blue-pale); color:var(--blue);
  display:grid; place-items:center; font-size:var(--step-0); font-weight:600;
}
.numbered p{ color:var(--ink-2); }

/* ----------------------------------------------------------------- table */
.table-wrap{ overflow-x:auto; }

/* ----------------------------------------------------------------- quote */
.quote-band{ background:var(--blue-pale); }
.quote-band blockquote{
  max-width:44rem; margin-inline:auto; text-align:center;
  font-size:var(--step-3); font-weight:500; line-height:1.4; color:var(--ink);
}
.quote-band figcaption{ text-align:center; margin-top:1.25rem; color:var(--ink-2); font-size:var(--step--1); }
.quote-band figcaption b{ display:block; color:var(--ink); font-size:var(--step-0); font-weight:400; }

/* ----------------------------------------------------------------- chart */
.chart figcaption{ font-size:var(--step--1); color:var(--ink-3); margin-top:.6rem; }
.chart svg{ width:100%; height:auto; display:block; touch-action:pan-y; }

/* The readout sits above the plot and holds its line whether or not a column
   is being pointed at, so nothing below it moves on hover. */
.chart-readout{
  display:flex; gap:.6rem; align-items:baseline; min-height:1.6rem;
  font-size:var(--step-0); color:var(--ink-3); margin-top:var(--block-top);
}
.chart-readout .period{ font-weight:600; color:var(--ink); }
.chart-readout .value{ color:var(--blue); font-weight:600; }

.chart .hit{ fill:transparent; }
.chart .bar-group{ cursor:default; outline:none; }
.chart .bar-group .bar{ transition:fill var(--dur-1) var(--ease); }
.chart .bar-group:hover .hit,
.chart .bar-group:focus-visible .hit{ fill:var(--blue-pale); }
.chart .bar-group:hover .bar,
.chart .bar-group:focus-visible .bar{ fill:var(--blue); }
.chart .bar-group:focus-visible .hit{ stroke:var(--blue); stroke-width:2; }

.chart .axis-val{ font-size:13px; fill:var(--ink-3); }

/* The control that opens the table. A quiet line of type, not a widget. */
.chart details{ margin-top:1.1rem; }
.chart details > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.5rem;
  /* It is the one thing on the chart you can act on, so it is set like the
     page's other calls to action rather than as small grey print. */
  font-size:var(--step-0); font-weight:600; color:var(--blue);
  border-bottom:1px solid var(--blue); padding-bottom:.25rem;
  transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.chart details > summary::-webkit-details-marker{ display:none; }
.chart details > summary::before{
  content:""; width:.5rem; height:.5rem; flex:0 0 auto;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); transition:transform var(--dur-2) var(--ease);
}
.chart details[open] > summary::before{ transform:rotate(45deg); }
.chart details > summary:hover{ color:var(--blue-deep); border-bottom-color:var(--blue-deep); }
.chart details > summary:focus-visible{ color:var(--blue); }
.chart details .table-wrap{ margin-top:1.1rem; padding-top:.25rem; }

/* The chart table runs the full width under the chart, in two halves, so
   twenty years read across rather than down a narrow strip. */
.table-split{ display:grid; grid-template-columns:1fr; gap:2.5rem clamp(2.5rem,5vw,5rem); }
/* The twenty years are split across two tables. Left to size themselves, each
   half measures its own contents, so the two sets of columns land in different
   places: 53/207/92 against 53/223/76 on a phone, and the same disagreement
   side by side on a desktop. Fixed proportions make the halves one table with
   a gap in it, which is what they are meant to read as. */
/* At every width: on a phone the halves stack as one run, and sized to their
   own contents the second half's columns sat about 35px left of the first's. */
.table-split table.data{ table-layout:fixed; }
.table-split table.data th:nth-child(1){ width:17%; }
.table-split table.data th:nth-child(2){ width:51%; }
.table-split table.data th:nth-child(3){ width:32%; }
/* A grid item defaults to min-width:auto, so it grows to fit the table's own
   minimum rather than holding the column. Without this the table runs off the
   right of the screen on a phone and on a tablet alike. */
.table-split > *{ min-width:0; }
/* Two halves need room for two lots of three columns. Below this the halves
   stack, so twenty years read as two runs of ten rather than off the edge. */
@media (min-width:1000px){ .table-split{ grid-template-columns:1fr 1fr; gap:0 clamp(2.5rem,5vw,5rem); } }

/* Stacked on a phone the two halves are one run of twenty years with a break
   in the middle of it, so the second set of headings repeats itself halfway
   down a single table and the gap reads as two tables rather than one. */
@media (max-width:999px){
  .table-split{ row-gap:0; }
  .table-split > *:not(:first-child) thead{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  .table-split > *:not(:first-child) table.data tbody tr:first-child td,
  .table-split > *:not(:first-child) table.data tbody tr:first-child th{
    border-top:1px solid var(--rule);
  }
  /* On a phone this is the one thing on the screen to press, so it reads as
     the site's other calls to action do rather than as grey small print. */
  .chart details > summary{
    color:var(--blue); font-weight:600;
    border-bottom-color:var(--blue); padding-bottom:.3rem;
  }
  .table-split table.data{ font-size:var(--step-0); }
  .table-split table.data td,
  .table-split table.data th[scope="row"]{ padding-block:.7rem; }
  .table-split table.data thead th{ font-size:var(--step--1); }
}
.chart svg{ width:100%; height:auto; }
/* The profit chart is drawn 1800 wide; scaled to a phone its labels came out
   at about 5px. Below 700px it keeps a readable size and scrolls sideways,
   as the photo galleries do. */
.chart-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:699px){ .chart-scroll > svg{ min-width:760px; } }
/* One of the two is shown. The wide box is 3.8 to 1 and suits a desktop
   column; the narrow one is close to square so the same twenty years are
   legible on a phone. Its type is set in its own viewBox units, which are
   roughly 2.8 times smaller on screen than the wide box's. */
.chart .chart-narrow{ display:none; }
.chart .chart-narrow .tick{ font-size:25px; }
.chart .chart-narrow .val{ font-size:31px; }
.chart .chart-narrow .axis-val{ font-size:25px; }
@media (max-width:899px){
  .chart .chart-wide{ display:none; }
  .chart .chart-narrow{ display:block; }
}
.chart .bar{ fill:var(--blue-mid); }
.chart .bar.latest{ fill:var(--blue-deep); }
.chart .axis{ stroke:var(--rule-strong); stroke-width:1; }
.chart .tick{ font-size:11px; fill:var(--ink-3); }
.chart .val{ font-size:13px; font-weight:700; fill:var(--blue); }

/* Nothing unverified reaches a shareholder without saying so. */
.unverified{
  background:var(--warn-bg); border:1px solid var(--warn-rule); color:var(--warn-ink);
  padding:.6rem .85rem; font-size:var(--step--1); margin-bottom:1rem;
}
.unverified b{ font-weight:600; }

/* ---------------------------------------------------------------- footer */
.site-footer{ background:var(--paper); color:var(--ink); border-top:1px solid var(--blue); }
.site-footer .wrap{ padding-block:clamp(2.75rem,5vw,4rem); }
.site-footer a{ color:var(--ink); }
.site-footer a:hover{ color:var(--blue); }
.footer-cols{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:640px){ .footer-cols{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .footer-cols{ grid-template-columns:1.5fr repeat(4,minmax(0,1fr)); gap:3rem; } }
.footer-cols > *{ min-width:0; }
.footer-cols h2{ font-size:var(--step--2); letter-spacing:.11em; text-transform:uppercase; font-weight:700; margin-bottom:1.1rem; color:var(--blue); }
.footer-cols ul{ list-style:none; display:grid; gap:.6rem; font-size:var(--step--1); }
/* A footer link was an 18px target on a phone. The row spacing already leaves
   the room; the link just was not claiming it. */
@media (max-width:899px){
  .footer-cols ul{ gap:.15rem; }
  /* Every item, not only the ones that are links: a list where the links are
     43px tall and the rest 22px reads as broken spacing. */
  .footer-cols li > a,
  .footer-cols li > .soon{ display:inline-block; padding-block:.65rem; }
}
.footer-cols li{ text-wrap:balance; }
.footer-blurb{ font-size:var(--step--1); color:var(--ink-2); max-width:24rem; line-height:1.6; }
.footer-blurb img{ height:40px; margin-bottom:1.1rem; }
.footer-base{
  border-top:1px solid var(--blue); margin-top:2.5rem; padding-top:1.4rem;
  display:flex; justify-content:space-between; gap:.75rem 1.5rem; flex-wrap:wrap;
  font-size:var(--step--1); color:var(--ink-3);
}
/* The legal documents sit with the legal line, under the rule. */
.footer-legal{ display:flex; gap:1.5rem; flex-wrap:wrap; }

@media (max-width:899px){
  /* The masthead is sticky and carries the mark the whole way down, so the
     sentence beside the footer's copy of it was saying what the page has
     already said. With the words gone the mark sits centred on its own as a
     closing device rather than as an orphaned line of type. */
  /* The mark is centred on the footer, not on whatever cell it lands in.
     Capped at 24rem and sitting in the first of two columns above 640px, a
     centred image was centred inside that column and so up to 232px left of
     the middle of the page. It spans the whole row here instead. */
  .footer-blurb{ grid-column:1 / -1; max-width:none; text-align:center; }
  .footer-blurb img{ display:block; margin-inline:auto; margin-bottom:0; }
  .footer-blurb p{ display:none; }
  .footer-cols{ gap:2.25rem; }
  .site-footer .wrap{ padding-block:3rem; }
  .footer-base{ margin-top:2.25rem; }
}

/* ----------------------------------------------------------- small print */
/* Below this the six nav items no longer fit beside the logo, the ticker and
   the two header buttons, so the nav becomes a panel behind the menu button
   rather than compressing. It was 1180 until Ask AI joined the row; at 1280
   the nav keeps 25px or more clear of the ticker (the buttons close up a
   little there, below). */
@media (max-width:1279.98px){
  .menu-toggle{ display:block; }
  .site-nav{
    /* The whole screen below the masthead, inside the blue frame: fixed, not
       hung off the header, so it reaches the foot of the screen whatever the
       page behind it is doing. --nav-top is the header's bottom edge, set by
       the script as the panel opens. */
    display:flex; position:fixed; left:var(--frame); right:var(--frame);
    top:var(--nav-top, var(--header-clear)); bottom:var(--frame);
    /* Hidden by visibility, not display, so it can arrive: it fades in and
       settles down 6px over the menu's duration, and leaves the same way. */
    visibility:hidden; opacity:0; transform:translateY(-6px);
    transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--rule);
    box-shadow:0 14px 28px -18px rgba(17,19,22,.35);
    padding:.25rem var(--gutter) 1.25rem;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .site-nav.open{ visibility:visible; opacity:1; transform:none; transition-delay:0s, 0s, 0s; }
  .site-nav a,
  .site-nav .soon{
    padding-block:.95rem; border-bottom:1px solid var(--rule);
    font-size:var(--step-0); border-bottom-width:1px;
  }
  /* In the panel the six sections are the menu, one to a row, and a section
     drops its pages beneath it. Restraint is the whole design: one weight
     for the sections, one hairline between rows drawn from gutter to gutter,
     a quiet chevron flush with that hairline's end, pages at reading size
     with no rules of their own, and blue for two things only, the page you
     are on and the login. The first cut had bold rows, two rules under an
     open section, plus signs 17px short of the edge and blue on four jobs. */
  .site-nav.open{ padding:0 var(--gutter) 2rem; }
  .site-nav .has-sub{
    display:grid; grid-template-columns:minmax(0,1fr); align-items:center;
    border-top:1px solid var(--rule);
  }
  .site-nav .has-sub:first-child{ border-top:0; }
  /* In the panel the section's link gives way to its button (below). */
  .site-nav .has-sub > a,
  .site-nav .has-sub > .soon{ display:none; }
  .site-nav .has-sub > a[aria-current="page"]{ color:var(--ink); border-bottom:0; }
  /* The section name is the control: the whole row opens and closes its
     pages, at the headings' weight (500) against the pages' regular (400),
     with a grey chevron on the rule's right end. A link here made the row a
     trap: a tap meant for the chevron took the reader to the page instead. */
  .site-nav .sub-toggle{
    appearance:none; background:transparent; border:0; margin:0; width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:1.05rem 0; cursor:pointer; text-align:left;
    font:inherit; font-size:var(--step-0); font-weight:500; line-height:1.3; color:var(--ink);
  }
  .site-nav .sub-toggle .chev{
    flex:0 0 auto; width:9px; height:9px; margin-right:2px;
    border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);
    transform:translateY(-2px) rotate(45deg);
    transition:transform var(--dur-3) var(--ease), border-color var(--dur-1) var(--ease);
  }
  .site-nav .has-sub.is-open .sub-toggle .chev{ transform:translateY(2px) rotate(-135deg); }
  @media (hover: hover){
    .site-nav .sub-toggle:hover{ color:var(--blue); }
    .site-nav .sub-toggle:hover .chev{ border-color:var(--blue); }
  }
  .site-nav .sub-toggle:focus-visible{ outline:2px solid var(--blue); outline-offset:-4px; }
  .site-nav .subnav{
    grid-column:1 / -1; display:block; padding:0 0 0 1.25rem;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease), padding var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
  }
  /* inherit, not visible: an open section inside a closed panel must stay
     out of the tab order with the rest of the panel. */
  .site-nav .has-sub.is-open .subnav{ max-height:24rem; opacity:1; visibility:inherit; padding-bottom:.85rem; transition-delay:0s; }
  .site-nav .subnav li{ border:0; }
  .site-nav .subnav a,
  .site-nav .subnav .soon,
  .site-nav .subnav li:last-child a,
  .site-nav .subnav li:last-child .soon{
    display:block; padding:.55rem 0; border:0;
    font-size:var(--step-0); font-weight:400; color:var(--ink-2); line-height:1.4;
  }
  .site-nav .subnav a[aria-current="page"]{ color:var(--blue); font-weight:400; border:0; }
  .site-nav > a:not(.nav-login){
    display:block; padding:1.05rem 0; border-bottom:1px solid var(--rule); border-top:1px solid var(--rule);
    font-size:var(--step-0); font-weight:500; color:var(--ink); line-height:1.3;
  }
  .site-nav > a[aria-current="page"]:not(.nav-login){ color:var(--ink); }
  /* The login stands at the foot of the screen, apart from the list: the
     free space above it is its margin, with 2rem as the least it gets, and
     the phone's home-indicator area is kept clear beneath it. */
  .site-nav > a:not(.nav-login){ margin-bottom:2rem; }
  .site-nav .nav-login{
    margin-top:auto; padding-block:.9rem; font-size:var(--step-0); font-weight:600;
  }
  .site-nav.open{ padding-bottom:calc(1.75rem + env(safe-area-inset-bottom, 0px)); }
  /* The login is the one thing in the panel you act on, so it is the button
     the header gives up when the row gets narrow. */
  .site-nav .nav-login{
    background:var(--blue); color:var(--ink-inverse);
    text-align:center; font-weight:600; border-bottom:0; padding-block:.95rem;
    letter-spacing:.02em;
  }
  .site-nav .nav-login:hover{ background:var(--blue-deep); text-decoration:none; }

  /* The page behind the panel is dimmed and held still, so a swipe moves the
     menu and not the page underneath it. */
  body.nav-open{ overflow:hidden; }
  html.nav-open{ scroll-snap-type:none; }
  /* Drawn on the page, not the body: the body's ::after is the blue frame, and
     borrowing it moved the frame's top edge down to the header's foot, which
     left the strip above the header open to the page scrolling beneath it. */
  body.nav-open .page::after{
    content:""; position:fixed; inset:var(--header-clear) 0 0 0; z-index:30;
    background:rgba(17,19,22,.30);
    animation:nav-dim var(--dur-2) var(--ease-out) both;
  }
  @keyframes nav-dim{ from{ opacity:0; } to{ opacity:1; } }
  @media (prefers-reduced-motion: reduce){ body.nav-open .page::after{ animation:none; } }
}

/* Phone and small tablet: the logo, the ticker and the menu button share one
   row, and nothing else. The login goes into the panel where it has room to
   be a button rather than a squeezed chip. */
@media (max-width:860px){
  .site-header .wrap{ gap:.75rem; min-height:64px; padding-block:.6rem; }
  .brand img,.brand svg{ height:32px; }
  .header-end{ gap:1rem; }
  .btn-header{ display:none; }
  .nav-login{ display:block; }
  .ticker{ font-size:calc(var(--step--2) * .96); }
}

@media (max-width:400px){
  .brand img,.brand svg{ height:29px; }
  .ticker .chg{ display:none; }   /* the price stays; the day change goes */
  .ticker{ min-width:8.2em; }
  .header-end{ gap:.7rem; }
}

/* A destination that exists in the structure but has not been built yet.
   Shown so the shape of the site is visible; never a link that 404s. */
.soon{ color:var(--ink-3); cursor:default; }
.site-footer .soon{ color:var(--ink); }
/* In the navigation the structure is the design, so these read as normal type
   until the page behind each one is built. */
.site-nav .soon{ color:var(--ink); }

/* ------------------------------------------------------------------- CTAs */
/* The concept's call to action: blue, semibold, with its own rule beneath. */
.cta{
  display:inline-block; margin-top:var(--block-top); color:var(--blue); font-weight:600;
  font-size:var(--step-0); text-decoration:none;
  border-bottom:1px solid var(--blue); padding-bottom:.35rem;
}
.cta:hover{ color:var(--blue-deep); border-bottom-color:var(--blue-deep); text-decoration:none; }
/* A call to action whose page is not built yet. It keeps the design's blue on
   this preview so the layout can be judged; it simply is not clickable. */
.cta.soon{ color:var(--blue); border-bottom-color:var(--blue); cursor:default; }

/* An eyebrow that carries a short rule, as the section openers do. */
.eyebrow.ruled{
  display:inline-block; border-bottom:1px solid var(--rule-strong);
  padding-bottom:.5rem; text-transform:none; letter-spacing:0;
  font-size:var(--step-0); color:var(--ink-2);
}

/* A heading with a rule above and below its standfirst. */

/* One rule under the heading, as everywhere else on the site. The document
   boxes its standfirst between two; that is not this site's convention. */
/* Superseded by the single heading rule below; kept out of the way here. */
.section-head .standfirst{
  padding-top:.75rem; color:var(--ink-2); font-size:var(--step-0); max-width:62rem;
}

/* ------------------------------------------------- the model: label boxes */
.panels{ margin-top:1.25rem; }
/* On a phone the gaps down a section read as one step rather than 12, 13, 20
   and 24px. Desktop keeps its own measure, where the heights are held to the
   window. */
/* The heading above already sets the distance; .panels adding its own made
   that one section's gap 30px against everyone else's 19. */
.section h2 + .panels{ margin-top:0; }
.panel-row{
  display:grid; gap:1rem; align-items:stretch;
  grid-template-columns:1fr;
  border-bottom:1px solid var(--rule);
  padding-bottom:clamp(.8rem,1.4vh,1.35rem); margin-bottom:clamp(.8rem,1.4vh,1.35rem);
}
@media (min-width:760px){
  .panel-row{ grid-template-columns:10rem minmax(0,1fr); gap:2rem; }
}
.panel-label{
  background:var(--blue); color:var(--ink-inverse);
  display:grid; place-items:center; text-align:center;
  font-weight:600; font-size:var(--step-1); padding:.75rem .5rem;
  /* Fills the height of its row rather than floating at the top of it. */
  align-self:stretch; min-height:3.25rem;
}
.panel-label.deep{ background:var(--blue-deep); }

/* On a phone the label has no column to sit in, so it spans the full width and
   a filled blue block the width of the screen reads as a button you should
   press. Here it is a label instead, set the way the site sets its other
   labels: small, blue, spaced capitals over the copy it names. */
@media (max-width:759px){
  .panel-label,
  .panel-label.deep{
    background:none; color:var(--blue);
    display:block; text-align:left; place-items:initial;
    padding:0; min-height:0; align-self:auto;
    font-size:var(--step-1); font-weight:600;
    letter-spacing:-.01em; text-transform:none; line-height:1.2;
  }
  .panel-row{ gap:0; padding-bottom:1.35rem; margin-bottom:1.35rem; }
  .panel-row:last-child{ border-bottom:0; margin-bottom:0; }
}
.panel-body{ display:grid; gap:1.25rem; grid-template-columns:1fr; min-width:0; font-size:var(--step-0); }
/* These panels explain the model; they are not captions. On a phone they are
   read at body size like the rest of the page. */
.panel-body > p:only-child{ max-width:92ch; }
@media (min-width:700px){ .panel-body.three{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.panel-body h3{ font-size:var(--step-1); font-weight:600; margin-bottom:.5rem; }
.panel-body p{ color:var(--ink-2); }

/* ---------------------------------------------- split: words left, picture */
.split{ display:grid; grid-template-columns:1fr; align-items:stretch; }
/* A grid item defaults to min-width:auto, so a wide item sets its own track
   rather than holding the column it was given. */
.split > *{ min-width:0; }
/* Side by side only once the half is wide enough for the words to fit in the
   height the photograph takes. Below this the words are much the taller of the
   two and the picture floats in a field of cream; stacked, it runs the full
   width and holds the foot of the section instead. */
@media (min-width:1100px){ .split{ grid-template-columns:1fr 1fr; } }
.split-words{
  /* This section bleeds to the edge so the photograph can, which means its
     words do not sit inside a .wrap and were finding their own left edge: 64px
     where every other section sat at 37px, and 131px where they sat at 156px.
     The left inset is the one .wrap computes, so the heading starts exactly
     where every other heading on the page does, and so does the footer under
     it. The right stays generous, because the photograph is what follows. */
  padding-block:clamp(2.25rem,3.5vh,3.25rem);
  padding-left:calc(max(0px, (100vw - var(--frame) * 2 - var(--content)) / 2) + var(--gutter));
  padding-right:clamp(1.5rem,4vw,4.5rem);
  display:flex; flex-direction:column; justify-content:center;
}
/* Stacked on a phone the photograph is no longer beside the words, so both
   sides take the page's gutter. */
@media (max-width:1099px){
  .split-words{ padding-inline:var(--gutter); }
}
/* The words carry half the frame, so they are set at the weight of a section
   opener rather than a caption floating in the middle of it. */
.split-words .inner{ max-width:44rem; width:100%; }
/* Set like every other section, not like a second hero. It was running a 48px
   heading over 21px copy against the rest of the page's 33px and 15px, which
   is what made it read as a different site. */
.split-words h2{ line-height:1.1; letter-spacing:-.015em; }
.split-words .prose{ max-width:36rem; color:var(--ink-2); line-height:1.6; }

/* Stacked, the words are read one after the other rather than against the
   photograph, so they no longer need to hold half a frame on their own. At the
   opener's size they ran to 551px on a phone above a 256px picture, which put
   the weight in the wrong place. Here they sit at the size the rest of the
   page uses, and the eyebrow goes: the heading says what the section is. */

/* The photograph is the whole firm, and the whole firm is the point of the
   section. Its own shape is 3:2. A box narrower than that crops people off the
   ends, where a box wider than it only loses ceiling and floorboards, so the
   box takes the picture's shape and the section becomes a band as tall as the
   picture. The concept document sets this section the same way. */
.split-media{ position:relative; width:100%; aspect-ratio:3/2; align-self:center; }
.split-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* --------------------------------------------------- label / value table */
.meta{ width:100%; }
.meta{ margin-top:var(--block-top); border-top:1px solid var(--rule); }
.meta th{
  text-align:left; font-weight:600; font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  padding:.5rem 1.25rem .5rem 0; vertical-align:middle; white-space:nowrap;
  border-bottom:1px solid var(--rule); width:6.5rem; height:var(--row-h);
}
.meta td{
  padding:.5rem 0; color:var(--ink); font-size:var(--step-0);
  border-bottom:1px solid var(--rule); vertical-align:middle;
  text-wrap:pretty; height:var(--row-h);
}
/* Beside a list the label sits with the first item, not halfway down the list. */
.meta tr:has(> td > ul) > th,
.meta tr:has(> td > ul) > td{ vertical-align:top; padding-top:1rem; }


/* --------------------------------------------------------- photo figures */
.photo-pair{ display:grid; gap:clamp(.75rem,1.4vw,1.15rem); margin-top:1.5rem; }
.photo-track{ display:grid; gap:clamp(.75rem,1.4vw,1.15rem); grid-template-columns:1fr; }
@media (min-width:560px){ .photo-track{ grid-template-columns:1fr 1fr; } }
.photo-pair img{ width:100%; aspect-ratio:16/11; object-fit:cover; }
.photo-pair figcaption{ font-size:var(--step--1); color:var(--ink-3); }

/* On a phone the two pictures are swiped rather than stacked: stacked they
   take most of a screen to say one thing. The second sits a little way into
   view so it is clear there is another, which does the job a row of dots
   would without adding any furniture. */
@media (max-width:559px){
  .photo-track{
    display:flex; gap:.6rem;
    overflow-x:auto; scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .photo-track::-webkit-scrollbar{ display:none; }
  .photo-track img{ flex:0 0 86%; width:86%; scroll-snap-align:start; }
  /* Room under the call to action above, so the pictures read as their own
     thing rather than as part of it. */
  .photo-pair{ margin-top:2.5rem; }
}

/* An announcement is one line, so the rows stay even and the last rule meets
   the bottom of the divider. A long title is trimmed with an ellipsis and the
   whole title stays on the link, so nothing is lost.
   That evenness is only asked for where the column fills a fixed height. On a
   narrow screen it buys nothing and costs the title: at 390px four of the
   seven were cut, the notice of the meeting among them. There the title runs
   to a second line instead. */
.ledger-row.one-line .t{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}
/* One line, as asked, once the column is wide enough that one line is most of
   the title rather than a third of it. */
@media (min-width:1200px){
  .ledger-row.one-line .t{
    display:block; white-space:nowrap; text-overflow:ellipsis; -webkit-line-clamp:none;
  }
}

/* A column that runs to the full height of the one beside it: the rows share
   the space that is left, so the last rule sits on the bottom of the divider
   and the call to action sits on the line below it. */
@media (min-width:1200px){
}
.chart .grid{ stroke:var(--rule); stroke-width:1; }

/* A section whose main block spreads down the frame rather than sitting in the
   middle of it. The block still stops short of the full height, so the figures
   stay a reasonable size on a very tall screen. */
@media (min-height: 620px) and (min-width: 700px){
  .fill-wrap{ display:flex; flex-direction:column; }
  /* Tall enough that a box with a footnote never outgrows one without, so both
     rows stay identical at every screen height. */
  .fill-wrap > .stat-grid{ grid-auto-rows:minmax(clamp(10rem, 21vh, 13rem), auto); }
}

/* The letter's own words, closing the column, in the pale blue of the concept. */
.quote-box{
  background:var(--blue-pale); padding:clamp(1.1rem,2.2vh,1.7rem) 1.1rem;
  margin-top:var(--block-top);
}
.quote-box .eyebrow{ text-transform:none; letter-spacing:0; font-size:var(--step--1); color:var(--ink-3); }
.quote-box blockquote{
  margin-top:.6rem; font-size:var(--step-0); line-height:1.55; color:var(--ink);
  text-wrap:normal;
}

/* The document sets the defining phrases of the model in the blue. */
.panel-body em{ font-style:normal; font-weight:600; color:var(--blue); }


/* ------------------------------------------- one rule for every section head
   Six of the nine headings carried a rule on a phone and two of the nine on a
   desktop, and the distance from a heading to the block under it ran 0, 12,
   14, 20 and 24px depending on which section you were in. Every section
   heading now carries its own rule, with the same air above and below it. */
main .section h2,
.cols-2 > * > h2{
  /* No rule: the sections are already divided from one another, so a second
     line directly under the heading divides what belongs together.
     The space below is set in em, so it is measured against the heading's own
     size and stays in proportion from a phone's 28px to a desktop's 44px
     rather than being the same 20px under both. */
  margin-bottom:0.68em;
}
/* Anything that opened with a rule of its own would double it. */
main .section h2 + .table-wrap > table.meta,
main .section h2 + .ledger,
.cols-2 > * > h2 + .table-wrap > table.meta,
.cols-2 > * > .ledger{ border-top:0; margin-top:0; }
main .section h2 + .table-wrap{ margin-top:0; }
.section-head .standfirst{ padding-top:0; }


/* The same proportion between a heading and the copy under it, whatever the
   heading's size: section openers, the model's labels, and the headings inside
   a panel all sat at different fractions of their own size before this. */
.panel-label{ margin-bottom:0.68em; }
.panel-body h3{ margin-bottom:0.68em; }


/* ======================================================= motion and states
   Everything that answers a press or a pointer does so at the same speed and
   on the same curve. Before this only five elements had any transition at all,
   across four durations and three curves, and nothing gave feedback on press.

   Hover is gated on a device that actually has a pointer. On a touchscreen a
   hover rule fires on tap and then stays applied until something else is
   touched, so a link the reader has finished with keeps looking active. */
a,
button,
summary,
.cta,
.btn-header,
.btn-ask,
.ledger-row a.t,
.footer-cols a,
.site-nav a,
.chart .bar-group{
  transition:
    color var(--dur-1) var(--ease),
    background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    text-decoration-color var(--dur-1) var(--ease),
    opacity var(--dur-1) var(--ease);
}

/* A press should be felt. These settle back on the same curve they left on. */
@media (hover: hover){
  .cta:hover{ color:var(--blue-deep); border-bottom-color:var(--blue-deep); }
  .footer-cols a:hover{ color:var(--blue); }
}
.cta:active,
.btn-header:active,
.btn-ask:active,
.footer-cols a:active,
.ledger-row a.t:active{ opacity:.7; }
.menu-toggle:active .bars,
.menu-toggle:active .bars::before,
.menu-toggle:active .bars::after{ opacity:.6; }

/* The slider moves under the thumb, but a jump to a slide is eased. */
.photo-track{ scroll-behavior:smooth; }

/* One place decides what happens when the reader has asked for less motion.
   The blanket rule in base.css already reduces every duration to nothing, so
   the per-component overrides that used to sit here said the same thing twice. */
@media (prefers-reduced-motion: reduce){
  .photo-track{ scroll-behavior:auto; }
}


/* The last section ends on a full-bleed photograph and the footer's rule sat
   directly on it, where a one-pixel line against a dark picture reads as the
   edge of the image rather than as a division. A band of paper between the two
   gives the rule something to sit on. */
.section.split + .site-footer,
.site-footer{ border-top:1px solid var(--blue); }
/* Only the last photograph on a page needs that band, and only on a phone.
   Applied to every photo section it put 2.25rem of white under the opener
   photographs, and then the next section's blue rule under that. */
@media (max-width:899px){
  main > .section.split:last-child{ margin-bottom:2.25rem; }
}
/* Where a photo section is stacked, its photograph is at its foot, and the
   bottom edge of the picture is the division: no blue rule under it. */
@media (max-width:1099px){
  .section.split + .section{ border-top:0; }
}


/* One distance between a block and the call to action under it. The split
   section's copy carried a 28px bottom margin of its own on top of the 24px
   the call to action already has, so that one sat twice as far down as the
   other five. */
.cta{ margin-top:var(--block-top); }
.split-words .prose{ margin-bottom:0 !important; }
.panels{ margin-bottom:0; }
.panels > .panel-row:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:0; }


/* ----------------------------------------------- Our Company, page units
   The same system the home page uses: on a phone a section that runs past one
   screen is divided at a point partway down a run of equal things, so each
   screen is a page rather than a third of one. Declared here so the script
   and the stylesheet name the same elements. */
@media (max-width:899px){
}


/* ------------------------------------------------------------- sub navigation
   "Our Company" carries three pages. On a desktop it opens under the pointer
   and on focus, so it is reachable from the keyboard without a script. On a
   phone the whole nav is already a panel, so the three simply sit indented
   beneath their parent rather than hiding behind anything. */
.has-sub{ position:relative; display:flex; align-items:center; }
.sub-toggle{ display:none; }
@media (max-width:1279.98px){ .sub-toggle{ display:flex; } }
.subnav{ list-style:none; margin:0; padding:0; }

@media (min-width:1280px){
  .subnav{
    position:absolute; top:100%; left:0; min-width:15rem; z-index:50;
    background:var(--paper); border:1px solid var(--rule);
    box-shadow:0 14px 28px -18px rgba(17,19,22,.35);
    padding:.35rem 0;
    opacity:0; visibility:hidden; transform:translateY(-.25rem);
    transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out),
               visibility 0s linear var(--dur-2);
  }
  .has-sub:hover .subnav,
  .has-sub:focus-within .subnav{
    opacity:1; visibility:visible; transform:none;
    transition-delay:0s, 0s, 0s;
  }
  .subnav a,
  .subnav .soon{
    display:block; padding:.55rem 1rem; white-space:nowrap;
    font-size:var(--step--2); border-bottom:0;
  }
  .subnav a:hover{ color:var(--blue); background:var(--blue-pale); text-decoration:none; }
}

/* In the panel the three are part of the list, one step in. */
@media (max-width:1279.98px){
  .has-sub{ display:block; }
  .subnav a,
  .subnav .soon{
    display:block; padding-block:.8rem; padding-left:1.1rem;
    border-bottom:1px solid var(--rule); font-size:var(--step--1); color:var(--ink-2);
  }
  .subnav li:last-child a,
  .subnav li:last-child .soon{ border-bottom:1px solid var(--rule); }
}


/* ------------------------------------------------------- KPG Intelligence
   Ask AI: the Group's question-and-answer tool, which lives on its own site.
   In the header an Ask AI button beside the login drops a card beneath it,
   as a menu would: what the tool is, one field, and a note that the answer
   is written by AI. A question opens the tool in a new tab, already asked.
   Once the nav folds into the menu, the same field sits at the top of it. */
.btn-ask{
  display:inline-flex; align-items:center; gap:.45rem;
  /* The login's height: its padding, less the hairline this one draws. */
  padding:calc(.5rem - 1px) .85rem; border:1px solid var(--rule-strong);
  background:transparent; color:var(--ink); cursor:pointer;
  font-size:var(--step--2); font-weight:600; letter-spacing:.02em; white-space:nowrap;
}
.btn-ask svg{ width:13px; height:13px; fill:var(--blue); flex:none; }
.btn-ask:hover{ text-decoration:none; }
@media (hover:hover){ .btn-ask:hover{ border-color:var(--blue); color:var(--blue); } }
.btn-ask[aria-expanded="true"]{ border-color:var(--blue); color:var(--blue); }
.btn-ask:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
@media (max-width:1279.98px){ .btn-ask{ display:none; } }
/* From 1280 to 1440 the row is at its fullest: the header's buttons sit a
   little closer, so the nav keeps 30px or more clear on either side. */
@media (min-width:1280px) and (max-width:1439.98px){
  .header-end{ gap:.75rem; }
  .btn-ask{ padding-inline:.7rem; }
}

/* Hung from the masthead's foot, so it stays with the header as it sticks.
   The layer itself is clear; the card sits at its right, under the button,
   and arrives as the dropdowns do: a fade, and a settle of 4px. */
.ask-panel{
  position:absolute; left:0; right:0; top:100%; z-index:1;
  pointer-events:none;
  visibility:hidden; opacity:0; transform:translateY(-.25rem);
  transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out),
             visibility 0s linear var(--dur-2);
}
.ask-panel.open{ visibility:visible; opacity:1; transform:none; transition-delay:0s, 0s, 0s; }
/* The masthead's .wrap is a flex row with a floor of 72px; this one is not. */
.site-header .ask-panel > .wrap{ display:flex; justify-content:flex-end; min-height:0; padding-block:.5rem 0; }
.ask-card{
  pointer-events:auto; position:relative; width:min(30rem, 100%);
  background:var(--paper); border:1px solid var(--rule);
  box-shadow:0 22px 44px -22px rgba(17,19,22,.45);
  padding:1.4rem 1.5rem 1.25rem;
}
/* The point of the card, under the middle of the button. The script sets
   --caret from where the button actually is; this is where it usually is. */
.ask-card::before{
  content:""; position:absolute; top:-7px; right:var(--caret, 12.8rem);
  width:12px; height:12px; background:var(--paper);
  border-left:1px solid var(--rule); border-top:1px solid var(--rule);
  transform:rotate(45deg);
}
.ask-title{
  display:flex; align-items:center; gap:.5rem; margin:0;
  font-size:var(--step-1); font-weight:600; line-height:1.3; color:var(--ink);
  letter-spacing:0; text-transform:none;
}
.ask-title .spark{ width:17px; height:17px; fill:var(--blue); flex:none; }
.ask-desc{ margin:.45rem 0 0; font-size:var(--step--1); line-height:1.55; color:var(--ink-2); }
.ask-card .field-row{ margin-top:1rem; }
/* Below 1280 the button has given way to the field in the menu. */
@media (max-width:1279.98px){ .ask-panel, .ask-scrim{ display:none; } }

/* The page beneath is dimmed a little, from the masthead's foot down, with
   the same fade as the card. */
.ask-scrim{
  /* Fixed, not hung from the header at 100vh tall: laid out there even while
     hidden, it added up to 78px of scroll below the footer of a short page. */
  position:fixed; inset:var(--header-clear) 0 0 0; cursor:pointer;
  background:rgba(17,19,22,.12);
  visibility:hidden; opacity:0;
  transition:opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
.ask-scrim.open{ visibility:visible; opacity:1; transition-delay:0s, 0s; }

/* In the menu panel: the title, the field and the note, above the list. */
.nav-ask{ display:none; }
@media (max-width:1279.98px){
  .site-nav .nav-ask{ display:block; padding:1.1rem 0 1.25rem; }
  .site-nav .nav-ask .ask-title{ font-size:var(--step-0); margin:0 0 .75rem; }
}


/* --------------------------------------------------------------- voices
   Three partners on the record. Set as quotations in a row with their
   attribution beneath, not as cards: the quotation marks and the rule above
   each one are the container. */
.voices{ display:grid; gap:0; margin-top:var(--block-top); }
.voice{ margin:0; padding-block:clamp(1rem,1.9vh,1.5rem); border-top:1px solid var(--rule); }
.voice:first-child{ border-top:0; padding-top:0; }
.voice blockquote{
  margin:0; font-size:var(--step-0); line-height:1.5; color:var(--ink);
  text-wrap:pretty; max-width:34rem;
}
.voice figcaption{ margin-top:.7rem; font-size:var(--step--1); color:var(--ink-3); }
.voice figcaption b{ display:block; color:var(--ink); font-weight:600; }
.voices-source{ margin-top:var(--block-top); font-size:var(--step--1); color:var(--ink-3); }

/* ------------------------------------------------------------------ cards
   The same card the partners' words sit in, for anything else that is a set
   of like things side by side: the two offices, the shareholder contacts.
   One fill, one padding, one grid, so a card is a card wherever it appears. */
.cards{ display:grid; gap:clamp(1rem,2vw,1.5rem); margin-top:var(--block-top); }
main .section h2 + .cards{ margin-top:0; }
/* Opening a section with no heading above, the cards sit at the section's
   own padding like everything else, not 25px lower. */
.wrap > .cards:first-child{ margin-top:0; }
.card{
  background:var(--blue-pale); padding:clamp(1.5rem,2.8vh,2.1rem);
  display:grid; align-content:start; gap:0;
}
/* A card's small label over its title. The EGM card's is a label, not a
   heading: as an h3 over the h2 it skipped a level for a screen reader. */
.card h3, .card > .card-kicker{
  font-size:var(--step--2); font-weight:600; color:var(--ink-3);
  letter-spacing:.1em; text-transform:uppercase; margin:0 0 .6rem;
}
.card p{ margin:0; }
.card p.lead{ font-size:var(--step-1); font-weight:600; color:var(--ink); line-height:1.4; text-wrap:pretty; }
.card p.lead + p{ margin-top:.6rem; font-size:var(--step--1); color:var(--ink-3); line-height:1.5; }
/* A paragraph in a card reads as body copy. Set as the lead, the meetups
   paragraph came out semibold near-black at subheading size: a style for a
   one-line lead (a name, an address), too heavy for a paragraph. */
.card p.copy{ font-size:var(--step-0); font-weight:400; color:var(--ink-2); line-height:1.6; text-wrap:pretty; }
.card p.copy + p.next{ margin-top:.9rem; font-size:var(--step--1); color:var(--ink-3); line-height:1.5; }
.card p.next b{ font-weight:600; font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase; margin-right:.5rem; }
@media (min-width:900px){
  .cards.contacts{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  /* One office: the photograph beside its details, not above them in half
     the width with an empty half beside it. */
  .cards.offices{ grid-template-columns:minmax(0,1fr); }
  .cards.offices .card.office{
    display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:auto 1fr; }
  .cards.offices .card.office img{ grid-column:1; grid-row:1 / span 2; height:100%; aspect-ratio:auto; }
  .cards.offices .card.office > h2,
  .cards.offices .card.office > .table-wrap{ grid-column:2; }
}

/* An office card carries its photograph across the top, edge to edge, at the
   ratio the group's own site shoots them, so nothing is cropped unseen. */
.card.office{ padding:0; }
.card.office img{
  display:block; width:100%; height:auto; aspect-ratio:1614/749; object-fit:cover;
}
.card.office h2{
  margin-top:clamp(1.25rem,2.4vh,1.75rem); margin-inline:clamp(1.35rem,2vw,1.75rem);
}
.card.office .table-wrap{ padding:0 clamp(1.35rem,2vw,1.75rem) clamp(1.25rem,2.4vh,1.75rem); }
/* The label/value table sits on the card's own tint, so its rules are drawn on
   the tint too; the last one is the card's edge and is not needed. */
.card.office table.meta tr:last-child th,
.card.office table.meta tr:last-child td{ border-bottom:0; }
.card.office h2 + .table-wrap{ margin-top:0; }
.card.office h2 + .table-wrap > table.meta{ border-top:0; }

/* A card that opens with a heading of its own. */
.card > h2{ line-height:1.15; margin-top:0; text-wrap:balance; }
.card > h3 + h2, .card > .card-kicker + h2{ margin-top:.35rem; }
/* A line under a card's title, such as a meeting's date: the title's
   supporting detail, lighter than it and close under it. */
.card > h2:has(+ .sub){ margin-bottom:.3rem; }
.card > .sub{ margin:0 0 1.1rem; font-size:var(--step-1); line-height:1.4; color:var(--ink-2); }
.card > .sub + .table-wrap{ margin-top:0; }
.card > .sub + .table-wrap > table.meta{ border-top:0; margin-top:0; }
.card > h2 + .table-wrap{ margin-top:0; }
.card > h2 + .table-wrap > table.meta,
.card > h2 + .contents{ border-top:0; margin-top:0; }
.card > .table-wrap + p{ margin:0; }
.card .cta{ margin-top:1.25rem; }
.card table.meta tr:last-child th,
.card table.meta tr:last-child td{ border-bottom:0; }
@media (min-width:900px){ .cards.pair{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* One solid card in the row, as the concept draws the meeting: the brand
   blue with everything on it reversed out, including the label/value table
   and the call to action. */
.card.solid{ background:var(--blue); color:var(--ink-inverse); }
.card.solid > h3, .card.solid > .card-kicker{ color:rgba(255,255,255,.88); }
.card.solid > h2{ color:var(--ink-inverse); }
.card.solid > .sub{ color:rgba(255,255,255,.8); }
.card.solid table.meta th,
.card.solid table.meta.stacked th{ color:rgba(255,255,255,.88); border-color:rgba(255,255,255,.22); }
.card.solid table.meta td,
.card.solid table.meta.stacked td{ color:var(--ink-inverse); border-color:rgba(255,255,255,.22); }
.card.solid table.meta.stacked tr{ border-color:rgba(255,255,255,.22); }
.card.solid .cta{ color:var(--ink-inverse); border-bottom-color:rgba(255,255,255,.6); }
.card.solid .cta:hover{ color:var(--ink-inverse); border-bottom-color:var(--ink-inverse); }
.card.solid a{ color:var(--ink-inverse); }

/* A document to take away: the blue card, with the document's cover beside
   the words on a wide screen and above them on a phone. */
.doc-card{ margin-top:var(--block-top); grid-template-columns:minmax(0,1fr) auto; gap:2rem; align-items:center; }
.doc-card p:not(.card-kicker){ margin:.6rem 0 0; max-width:52ch; }
.doc-card img{ width:260px; height:auto; box-shadow:0 6px 20px rgba(0,0,0,.25); }
@media (max-width:599.98px){
  .doc-card{ grid-template-columns:1fr; gap:1.25rem; }
  .doc-card img{ width:100%; order:-1; }
}

/* The papers: the manual's contents list with a number and a title, and no
   blurb, so it does not hold a two-line floor for a blurb it has not got. */

.contents.docs .t a{ color:var(--blue); display:inline-block; padding-block:.55rem; margin-block:-.55rem; }

/* Questions and answers in the right-hand column: the block sits at the top
   of its column, level with the heading on the left, and an answer runs the
   width its question does. Set at 64ch under a page-wide question, an
   answer was a 619px block beneath a 1366px line, which is what made the
   page read as a narrow paragraph in a wide room. */

@media (min-width:900px){
  .voices{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(2rem,3.2vw,3.25rem); }
  .voice{ border-top:1px solid var(--rule); padding-top:clamp(1rem,1.9vh,1.5rem); }
}


/* A label/value table whose labels are sentences rather than words. "Nomination
   and Remuneration Committee" cannot sit in a 6.5rem column without wrapping to
   a ribbon, and held on one line it pushed the table 79px off a 390px screen.
   Below the width where both fit side by side it stacks: label over value. */
@media (max-width:700px){
  table.meta,
  table.meta tbody,
  table.meta tr,
  table.meta th,
  table.meta td{ display:block; width:auto; }
  table.meta tbody tr{
    padding-block:.85rem; border-bottom:1px solid var(--rule);
  }
  table.meta tbody tr:last-child{ border-bottom:0; }
  table.meta tbody th[scope="row"]{
    height:auto; white-space:normal; border-bottom:0; padding:0 0 .25rem;
    font-weight:600; color:var(--ink-3);
    /* Its own case, as on a wide screen: "Address", not "ADDRESS". */
    /* Stacked, the label sits over its value instead of beside it, but it is
       the same label: it keeps the colour it has on a wide screen and lets
       the smaller size do the separating. */
    font-size:var(--step--2);
  }
  table.meta tbody td{ height:auto; border-bottom:0; padding:0; }
}

/* A ledger the width of the page: a fixed label column, as the concept sets
   it at 260px, and the value at reading size with the rest of the line. */
@media (min-width:701px){
  table.meta.wide th[scope="row"]{ width:16rem; white-space:normal; }
  table.meta.wide td{ font-size:var(--step-0); max-width:none; }
}

/* ------------------------------------------------- further page units
   The same measured system: these are only used where the section they sit in
   does not fit a screen on its own. */

/* Stacked on a phone the two halves are one list with a break in it, so the
   second must not start its own rule against the first's last row. */
@media (max-width:899px){
}

/* ======================================================================
   Concept B: the manual's own furniture

   The pages that follow are the Owners' Manual given a web job. Four things
   carry the idiom and none of them were in the first build: tables with a
   solid blue header and a dark row for totals, section openers with the
   photograph on the right, the mission set in circles, and the page number
   and document name under every section, as a page of the manual has.
   ====================================================================== */

/* ------------------------------------------------- the opener of a section
   Text left, photograph right, exactly as the manual opens a section. Built
   on .split, which already holds a column of words beside a full-bleed
   picture, so this adds only the small type above and below the title. */
.opener .inner{ display:flex; flex-direction:column; }
.opener h1{ margin-bottom:.68em; }
.opener .standfirst{ color:var(--ink-2); font-size:var(--step-0); max-width:34rem; }
/* The manual prints the document name at the foot of every page. On a tall
   screen it sits at the bottom of the opener; on a short one it follows the
   words, because pinning it down would open a hole in the middle. */
/* ------------------------------------------- the page number under a section
   '1.1  History' on the left, the company on the right, as the manual foots
   every page. It is the strongest single signal that this is the manual. */


/* ---------------------------------------------------- data table (figures)
   The manual's own table: a solid blue header, alternate rows tinted, a dark
   row for a total. One definition. It was two, a hairline base and this as an
   override, and every rule in the base was either restated here or beaten by
   it — including a phone rule for the column gutter that could never apply,
   because the gutter below is set after it at every width. */
table.data{
  width:100%; max-width:100%;
  font-size:var(--step--1);
  font-variant-numeric:tabular-nums lining-nums;
  border-collapse:collapse;
}
table.data thead th{
  background:var(--blue); color:var(--ink-inverse);
  font-size:var(--step--1); font-weight:600;
  letter-spacing:.01em; text-transform:none; text-align:left;
  padding:.7rem 1rem; border-bottom:0;
  vertical-align:middle;
  /* A heading held on one line sets the width of the whole table. */
  white-space:normal; text-wrap:balance;
}
table.data thead th:first-child{ padding-left:1.15rem; }
table.data thead th:last-child{ padding-right:1.15rem; }

table.data tbody td,
table.data tbody th[scope="row"]{
  padding:.72rem 1rem;
  border-bottom:1px solid var(--rule);
  vertical-align:top; text-align:left;
}
table.data tbody td{ font-weight:400; color:var(--ink-2); }
table.data tbody th[scope="row"]{
  padding-left:1.15rem; font-weight:600; color:var(--ink);
  /* A committee name is a sentence; held on one line it pushed the table well
     past a phone screen. */
  white-space:normal;
}
table.data tbody td:last-child{ padding-right:1.15rem; }
/* The cells carry their own padding, so the columns need only a small gutter. */
table.data th + th,
table.data td + td,
table.data th[scope="row"] + td{ padding-left:1rem; }

/* Alternate rows tinted, which is how the manual keeps a long table readable
   across a wide measure. */
table.data tbody tr:nth-child(even){ background:var(--blue-pale); }

/* Only figures are set right. The last column is usually prose and belongs on
   the left margin with everything else. */
table.data thead th.num,
table.data td.num{ text-align:right; }
table.data tbody td.num{ color:var(--blue); font-weight:500; }

/* A total is the dark band. The tint above outranks a bare tr.highlight, so
   this matches its weight and sits after it; otherwise a total landing on an
   even row came out white on pale blue. */
table.data tbody tr.highlight{ background:var(--blue-deep); }
table.data tbody tr.highlight th[scope="row"],
table.data tbody tr.highlight td{
  color:var(--ink-inverse); font-weight:600; border-bottom-color:var(--blue-deep);
}
table.data tbody tr.highlight td.num{ color:var(--ink-inverse); }
table.data tbody tr:last-child td,
table.data tbody tr:last-child th{ border-bottom:0; }
@media (max-width:360px){
  /* A period label is four characters and must not break across two lines. */
  table.data thead th,
  table.data tbody th[scope="row"]{ letter-spacing:0; padding-inline:.45rem; }
}
@media (max-width:640px){
  table.data thead th{ font-size:var(--step--2); padding:.6rem .7rem; }
  table.data tbody td,
  table.data tbody th[scope="row"]{ padding:.6rem .7rem; }
  table.data thead th:first-child,
  table.data tbody th[scope="row"]{ padding-left:.8rem; }
  table.data th + th,
  table.data td + td,
  table.data th[scope="row"] + td{ padding-left:.7rem; }
}

/* -------------------------------------------------- mission, values, vision
   Three circles, as the manual draws them: the two outer ones solid, the
   middle one tinted, each with a hairline ring inside its edge. */
.circles{
  display:grid; gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:1fr; margin-top:var(--block-top);
}
@media (min-width:760px){ .circles{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.circle-cell{ text-align:center; min-width:0; }
.circle{
  width:clamp(8.5rem,15vw,11.5rem); aspect-ratio:1; border-radius:50%;
  margin:0 auto clamp(1.25rem,2.5vh,2rem);
  display:grid; place-items:center;
  background:var(--blue); color:var(--ink-inverse);
  font-size:var(--step--2); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  /* The ring the manual draws inside the edge of each circle. */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
.circle.tint{
  background:var(--blue-pale); color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue-mid);
}
/* The three cells hold three different shapes of content. The circle and the
   blue keyline are what they share; inside, a statement stays a statement, a
   set of values is a numbered list, and a pair of ambitions is a pair of
   labelled statements. Everything readable is set at one size, so no cell
   looks more important than the others. */
.cell-key{ border-top:2px solid var(--blue); padding-top:1rem; text-align:left; }
.cell-count{
  display:block; margin-bottom:.8rem;
  font-size:var(--step--2); letter-spacing:.11em; text-transform:uppercase;
  font-weight:600; color:var(--ink-3);
}
.circle-cell .statement,
.circle-cell .cell-list li,
.circle-cell .cell-pairs dd{
  font-size:var(--step-0); line-height:1.5; color:var(--ink);
}
.cell-list{ list-style:none; display:grid; gap:0; padding:0; margin:0; }
.cell-list li{
  display:grid; grid-template-columns:1.6rem minmax(0,1fr); gap:.6rem;
  padding-block:.6rem;
}
.cell-list li + li{ border-top:1px solid var(--rule); }
.cell-list .n{ color:var(--blue); font-weight:600; }
.cell-pairs{ display:grid; gap:0; margin:0; }
.cell-pairs > div{ padding-block:.6rem; }
.cell-pairs > div + div{ border-top:1px solid var(--rule); }
.cell-pairs dt{
  font-size:var(--step--2); letter-spacing:.11em; text-transform:uppercase;
  font-weight:600; color:var(--blue); margin-bottom:.2rem;
}
.cell-pairs dd{ margin:0; }
/* Stacked, a cell is no longer competing for width, so the circle sits with
   its words rather than centred over them. */
@media (max-width:759px){
  .circle-cell{ text-align:left; }
  .circles .circle{ margin-inline:0; }
}

/* ------------------------------------------------------------- quote cards
   The partners' words sit on the pale blue of the manual's quote pages,
   rather than as loose text under a hairline. */
.voices.cards{ gap:clamp(1.25rem,2.5vw,2rem); }
.voices.cards .voice{
  background:var(--blue-pale); border-top:0;
  padding:clamp(1.35rem,2.6vh,2rem) clamp(1.35rem,2vw,1.75rem);
  display:flex; flex-direction:column;
}
.voices.cards .voice:first-child{ padding-top:clamp(1.35rem,2.6vh,2rem); }
.voices.cards .voice blockquote{ max-width:none; }
.voices.cards .voice figcaption{ margin-top:auto; padding-top:1.5rem; }

/* ---------------------------------------------------------- board portraits
   A portrait with the name on a blue bar across its foot, as the manual sets
   its directors. Where there is no photograph the initials stand in it. */
.portraits{ display:grid; gap:clamp(1.5rem,3vw,2.25rem); grid-template-columns:1fr; margin-top:var(--block-top); }
@media (min-width:620px){ .portraits{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .portraits{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.portrait{ min-width:0; margin:0; }
.portrait .shot{
  position:relative; background:var(--blue-pale);
  aspect-ratio:4/5; display:grid; place-items:center; overflow:hidden;
}
.portrait .shot img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.portrait .initials{ font-size:clamp(2.5rem,5vw,3.5rem); font-weight:700; color:var(--blue); letter-spacing:.02em; }
.portrait .bar{
  background:var(--blue); color:var(--ink-inverse);
  padding:.7rem 1rem;
}
.portrait .bar b{ display:block; font-size:var(--step-0); font-weight:600; }
.portrait .bar span{ display:block; font-size:var(--step--1); opacity:.85; margin-top:.1rem; }
/* Credentials under the name: fine print, a step below the tags, semibold and
   lightly spaced, never uppercased, so MTax and DipFS keep their own case. */
.portrait .bar .creds{ font-size:var(--step--3); font-weight:600; letter-spacing:.06em; opacity:.8; margin-top:.2rem; }
.portrait .bar .creds + .role{ margin-top:.35rem; }
/* Side by side, a row of portraits shares its tracks: the photographs, the
   bars, the bios and the committee lines each line up across the row, so a
   director whose credentials run to a second line does not start their bio
   20px lower than the one beside them. Gaps between rows move into padding,
   because a subgrid shares its parent's gaps. */
@supports (grid-template-rows: subgrid){
  @media (min-width:620px){
    .portraits{ row-gap:0; }
    .portrait{
      display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:0;
      align-content:start; padding-bottom:clamp(1.5rem,3vw,2.25rem);
    }
  }
}
.portrait .bio{ font-size:var(--step-0); color:var(--ink-2); margin-top:.9rem; }
.portrait .quals{ font-size:var(--step--1); color:var(--ink-3); margin-top:.7rem; }


/* ------------------------------------------------------------- document row
   A governance document is a title and a file, set on the tinted band so a
   list of eleven of them reads as a table rather than as loose links. */

/* ======================================================================
   The quiet register: the index table and the partners' words

   Concept A's idiom, in Concept B's typeface. No fills anywhere: the column
   labels sit in small capitals over one rule, the rows are separated by
   hairlines and by air, and the total is marked by a rule and by weight
   rather than by a slab of colour. The description leaves the grid and sits
   under the name it belongs to, at reading size, because it is a sentence
   and not a cell.
   ====================================================================== */
table.index{
  width:100%; max-width:100%; border-collapse:collapse;
  font-variant-numeric:tabular-nums lining-nums;
  margin-top:var(--block-top);
}
table.index thead th{
  text-align:left; vertical-align:bottom;
  padding:0 1.75rem .85rem 0;
  border-bottom:1px solid var(--ink);
  font-size:var(--step--2); letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--ink-3);
  white-space:normal;
}
table.index thead th.num{ text-align:right; padding-right:0; }
/* Every year's table puts its titles on the same line: sized to its own dates,
   each table started the column somewhere else. */
@media (min-width:900px){
  table.index.ann{ table-layout:fixed; }
  table.index.ann thead th:first-child{ width:9rem; }
}
table.index tbody th[scope="row"],
table.index tbody td{
  padding:1rem 1.75rem 1rem 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top; text-align:left; font-weight:400;
}
table.index tbody th[scope="row"]{
  font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color:var(--ink-3); white-space:nowrap;
}
table.index .t{
  display:block;
  font-size:var(--step-1); font-weight:600; letter-spacing:0;
  line-height:1.25; color:var(--ink);
}
/* The sentence under the name: reading size, held to a comfortable measure
   rather than stretched across the whole table. */
table.index .d{
  display:block; margin-top:.55rem;
  font-size:var(--step--1); line-height:1.45; color:var(--ink-3);
  max-width:64ch;
  /* A floor of two lines, so a one-line description does not make its row
     21px shorter than the rows either side of it. Rows came out 103, 124,
     124, 124, 124, 103; they are level now, and nothing is truncated to do
     it: a longer description still grows the row it is in. */
  min-height:calc(1.45em * 2);
}
table.index td.num{
  text-align:right; padding-right:0;
  font-size:var(--step-0); font-weight:500; color:var(--ink);
}
table.index tbody tr.total th[scope="row"],
table.index tbody tr.total td{
  border-bottom:0; border-top:1px solid var(--ink);
}
table.index tbody tr.total .t,
table.index tbody tr.total td.num{ font-weight:600; }
@media (max-width:700px){
  table.index, table.index thead, table.index tbody,
  table.index tr, table.index th, table.index td{ display:block; width:auto; }
  table.index thead{ display:none; }
  table.index tbody tr{ padding-block:1.25rem; border-bottom:1px solid var(--rule); }
  table.index tbody th[scope="row"],
  table.index tbody td{ padding:0; border:0; }
  table.index tbody td.num{
    text-align:left; margin-top:.35rem;
    font-size:var(--step-0); font-weight:500; color:var(--ink);
  }
  /* On a phone the count has lost the column heading that named it. Only the
     chapters table counts firms: unscoped, this put the word on every figure
     in every index table, so the founder's shareholding read "23,253,378
     firms" and "51.28% firms". */
  table.index.chapters.records tbody td.num::after{ content:" firms"; font-weight:400; }
  table.index tbody th[scope="row"]{ margin-bottom:.3rem; }
  table.index tbody tr.total{ border-bottom:0; border-top:1px solid var(--ink); padding-top:1.25rem; }
}

/* The partners' words as cards. A hairline frame with a blue keyline across
   the top: enough of a card to be a card, quiet enough to sit under a table
   that has had every fill taken out of it. A shared pair of rows gives every
   quotation the height of the longest, so the three names start on one line
   however long the quotations run. */
.voices.cards{
  display:grid; gap:clamp(1rem,2vw,1.5rem);
  /* No margin of its own: the heading above owns that distance. Set here it
     beat the heading's on specificity and made this the one section on the
     site whose words sat 24px under their heading instead of 22. */
  margin-top:var(--block-top);
}
main .section h2 + .voices.cards{ margin-top:0; }
/* Filled, not outlined. An outlined white card on a white page shows only its
   edges, so three of them stacked on a phone became a ladder: a grey bottom
   edge and a blue top edge seventeen pixels apart, three times over. A tint
   makes each one a block instead, and draws no lines at all. It is also the
   colour the manual gives its quotation pages. */
.voices.cards .voice{
  margin:0; display:grid; align-content:start;
  background:var(--blue-pale); border:0;
  padding:clamp(1.5rem,2.8vh,2.1rem);
}
.voices.cards .voice .mark{
  font-size:2rem; font-weight:700; color:var(--blue);
  /* A fixed box, so the three marks sit on one line whichever glyph metrics
     the browser gives them. Measured 1.8px apart when this was left to the
     line box. */
  line-height:1; height:1.4rem; margin-bottom:.9rem;
}
.voices.cards .voice blockquote{
  margin:0; line-height:1.5; color:var(--ink);
  max-width:none; text-wrap:pretty;
}
.voices.cards .voice figcaption{
  padding-top:1.5rem;
  font-size:var(--step--1); color:var(--ink-3); line-height:1.5;
}
.voices.cards .voice figcaption b{
  display:block; color:var(--ink); font-weight:600;
  font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:.25rem;
}
@media (min-width:900px){
  .voices.cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@supports (grid-template-rows: subgrid){
  @media (min-width:900px){
    /* Three rows shared across the cards: the mark, the words, the name. */
    .voices.cards{ grid-template-rows:auto auto auto; }
    .voices.cards .voice{ grid-row:span 3; grid-template-rows:subgrid; }
  }
}
.voices-source{ margin-top:var(--block-top); font-size:var(--step--1); color:var(--ink-3); }

/* ======================================================================
   Fewer rules on a phone

   Stacked into one column, every separator that reads as structure on a
   desktop becomes another rung on a ladder. Counted on the Company page at
   390px there were forty-four of them. A table needs a rule between its
   records; a list of three values, sitting under a circle that already names
   it, does not. These are the decorative ones, and they go.
   ====================================================================== */
@media (max-width:759px){
  /* The circle names the block; a keyline under it says nothing more. */
  .cell-key{ border-top:0; padding-top:0; }
  /* Values and ambitions are separated by space rather than by a rule. */
  .cell-list li + li,
  .cell-pairs > div + div{ border-top:0; }
  .cell-list li{ padding-block:.3rem; }
  .cell-pairs > div{ padding-block:.4rem; }
  .cell-list li:first-child,
  .cell-pairs > div:first-child{ padding-top:0; }
}

/* On a phone a table of records is a column of blocks, and a rule under every
   one of them is a ladder rather than a structure. The year, or the years,
   already separates one record from the next; space does the rest. */
@media (max-width:700px){ tbody, tr, th, td, tbody, tr, th, td{ display:block; width:auto; } thead, thead{ display:none; } tbody tr, tbody tr{ padding:0 0 1.5rem; border:0; } tbody tr:last-child, tbody tr:last-child{ padding-bottom:0; } tbody th[scope="row"], tbody th[scope="row"]{
    padding:0 0 .3rem; border:0; color:var(--blue);
    font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--ink-3);
  } tbody td, tbody td{ padding:0; border:0; max-width:none; }
  /* ...except the colour. The Published column read grey on a desktop and
     blue on a phone, which is two designs for one column. Each table keeps
     the colour it has on a wide screen. */
  tbody th[scope="row"], tbody th[scope="row"]{ color:inherit; }
  /* The index table is the same kind of thing, so it reads the same way:
     space between records, not a rule under each. Rules were put back here
     once and read as a ladder down the timeline, eleven lines deep; the
     records are a line apart instead. */
  /* One hairline under each record, as on a wide screen. Taken away, a long
     list read as loose lines of type with nothing to hold them; the ladder
     that was complained of came from rules on every cell of a stacked row,
     which this is not: one rule a record, on the row. */
  table.index{ border-top:0; }
  table.index tbody tr{ border-bottom:1px solid var(--rule); padding-block:.85rem; }
  table.index tbody tr:first-child{ padding-top:.15rem; }
  table.index tbody tr:has(+ tr.total){ border-bottom:0; }
  table.index tbody tr.total{ border-top:1px solid var(--ink); padding-top:1.5rem; }
  /* Stacked, the row and each of its three cells are all block elements, so a
     border meant to draw one line across the total drew four, 25 pixels
     apart. The row keeps it; the cells give it up. */
  table.index tbody tr.total th[scope="row"],
  table.index tbody tr.total td{ border-top:0; }
  /* Stacked, the header is a block of its own, so nowrap no longer widens a
     column -- it runs off the screen, which is what "Nomination and
     Remuneration Committee" did by 9px. On a wide screen the rule stands. */
  table.index tbody th[scope="row"]{ color:var(--ink-3); white-space:normal; }



  /* A record is a date, a title and one short thing beside the date: the
     kind of announcement, the letter's number, the year. Stacked one under
     another those took three lines and 113px; the short thing sits on the
     date's line now and the title has the width beneath. */
  table.index.records tbody tr{
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    column-gap:.75rem; row-gap:.2rem; align-items:baseline;
  }
  table.index.records tbody th[scope="row"]{ grid-column:1; grid-row:1; margin:0; }
  table.index.records tbody td.num,
  table.index.records tbody td.date{
    grid-column:2; grid-row:1; margin:0; text-align:right; white-space:nowrap;
  }
  table.index.records tbody td.num::after{ content:none; }
  table.index.records tbody td:not(.num):not(.date){ grid-column:1 / -1; }

  table.index.docs tbody td{ margin-top:.3rem; }

  /* A run of figures stays a table. Stacked, "FY07 $0m Unaudited" took a
     165px block, twenty times over, under every chart. */
  table.data{ display:table; width:100%; }
  table.data thead{ display:table-header-group; }
  table.data tbody{ display:table-row-group; }
  table.data tr{ display:table-row; padding:0; border:0; }
  table.data thead th,
  table.data tbody th[scope="row"],
  table.data tbody td{ display:table-cell; padding:.55rem .5rem; font-size:var(--step--1); }
  table.data tbody th[scope="row"]{ text-transform:none; letter-spacing:0; color:var(--ink); font-weight:600; }
  table.data thead th:first-child, table.data tbody th[scope="row"]{ padding-left:.7rem; }
  table.data tbody td:last-child, table.data thead th:last-child{ padding-right:.7rem; }

  /* Figures are read down a column, so this one stays a table. Stacked, the
     founder's six rows took 182px each -- 1,092px for twelve numbers -- and
     put every year out of reach of the one above it. */
  /* display:table shrinks to fit, so it sat 250px wide in a 352px column. */
  table.index.figures{ display:table; width:100%; border-top:0; }
  table.index.figures thead{ display:table-header-group; }
  table.index.figures tbody{ display:table-row-group; }
  table.index.figures tr{ display:table-row; }
  table.index.figures th,
  table.index.figures td{ display:table-cell; }
  table.index.figures thead th{
    font-size:var(--step--2); letter-spacing:.06em; padding:0 0 .5rem;
  }
  table.index.figures tbody th[scope="row"],
  table.index.figures tbody td{
    padding:.6rem .5rem .6rem 0; border-bottom:1px solid var(--rule);
    font-size:var(--step--1);
  }
  table.index.figures tbody th[scope="row"]{
    color:var(--ink); text-transform:none; letter-spacing:0; font-weight:600;
    white-space:nowrap;
  }
  table.index.figures tbody td.num{
    text-align:right; padding-right:0; margin-top:0;
    font-size:var(--step--1); font-weight:500; color:var(--ink);
  }
  table.index.figures tbody td.num::after{ content:none; }
  table.index.figures tbody tr.total th[scope="row"],
  table.index.figures tbody tr.total td{ border-top:1px solid var(--ink); }
}

/* ======================================================================
   The page title

   One size and one space beneath it, on every page. Board and Governance had
   no first-level heading at all: their titles were section headings, two
   steps smaller than the Company page's. Matching them to the hero's size
   made them too loud for a page that opens with a line of text, so the page
   title gets a step of its own, between the hero and a section heading.
   ====================================================================== */
main .section h1{
  font-size:var(--step-title);
  font-weight:500; letter-spacing:-0.015em; line-height:1.15;
  margin-bottom:0.68em;
}

}

/* ======================================================================
   The Owners' Manual page
   ====================================================================== */

/* The version line under the opener's call to action. */
.opener-meta{ margin-top:1.6rem; font-size:var(--step--2); color:var(--ink-3); }

/* The manual's contents: a number, the section's name, and one line saying
   what is in it. Set as the site sets its other numbered lists, with the
   figure in the blue. */
.contents{ list-style:none; padding:0; margin:var(--block-top) 0 0; display:grid; gap:0; }
.contents li{
  display:grid; grid-template-columns:2rem minmax(0,1fr); column-gap:1rem;
  padding-block:.85rem; border-top:1px solid var(--rule);
}
.contents li:first-child{ border-top:0; padding-top:0; }
.contents .no{ color:var(--blue); font-weight:600; font-size:var(--step-0); line-height:1.35; }
.contents .t{ font-size:var(--step-1); font-weight:600; color:var(--ink); line-height:1.35; }
.contents .d{
  grid-column:2; font-size:var(--step--1); color:var(--ink-3);
  margin-top:.2rem; max-width:52ch;
}

/* Who we are looking for: the manual's two-by-two. Built on the index table so
   it inherits the same rules and spacing as everything else, with the quadrant
   the company is after carrying the only fill on the page. */
table.index.matrix{ table-layout:fixed; }
table.index.matrix thead th{ text-align:center; }
table.index.matrix thead td{ border-bottom:1px solid var(--ink); }
table.index.matrix tbody th[scope="row"]{ white-space:normal; vertical-align:middle; }
table.index.matrix tbody td{
  text-align:center; vertical-align:middle;
  font-size:var(--step-0); font-weight:600; color:var(--ink);
  padding-block:2.25rem;
}
table.index.matrix tbody td.want{
  background:var(--blue); color:var(--ink-inverse); font-weight:600;
}
@media (max-width:700px){
  /* A two-by-two cannot stack: it stops being a two-by-two. It keeps its shape
     and its own scroll if the screen is too narrow for it. */
  table.index.matrix,
  table.index.matrix thead,
  table.index.matrix tbody,
  table.index.matrix tr,
  table.index.matrix th,
  table.index.matrix td{ display:revert; width:auto; }
  table.index.matrix thead{ display:table-header-group; }
  /* width:auto above let the headings size the table, so at 320px it ran 62px
     wider than the screen and the fourth quadrant -- the one the company is
     actually after -- sat off the edge behind a horizontal scroll. Fixed
     layout at full width divides the room evenly and wraps the labels
     instead. */
  /* The two-by-two keeps its head on a phone, and that head already draws
     the line above the grid, so it does not take the top rule the stacked
     tables need. */
  table.index.matrix{ width:100%; min-width:0; table-layout:fixed; border-top:0; }
  /* Fixed layout gives each heading exactly its share and no more, so
     "LOWER CONVICTION" and "HIGHER CONVICTION" met in the middle with nothing
     between them. */
  /* Equal thirds gave each heading 94px, and "CONVICTION" in spaced capitals
     needs more than that: the two ran together and the second one clipped.
     The label column is the short one, so it gives the room up. */
  table.index.matrix thead td,
  table.index.matrix tbody th[scope="row"]{ width:27%; }
  table.index.matrix thead th{
    width:36.5%; font-size:var(--step--2);
    letter-spacing:.04em; padding-inline:.45rem;
  }
  table.index.matrix tbody th[scope="row"]{ padding-right:.7rem; letter-spacing:.04em; }
  table.index.matrix tbody tr{ padding:0; border:0; }
  table.index.matrix tbody th[scope="row"],
  table.index.matrix tbody td{ padding:1.15rem .5rem; border-bottom:1px solid var(--rule); }
  table.index.matrix tbody td{ font-size:var(--step-0); }
  table.index.matrix tbody td.num::after{ content:none; }
}

/* The paired chart: two series of the same unit against one baseline, with a
   key under it because two colours need naming. */
.pair-chart .chart-key{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  margin-top:.9rem; font-size:var(--step--1); color:var(--ink-3);
}
.pair-chart .chart-key span{ display:inline-flex; align-items:center; gap:.5rem; }
.pair-chart .chart-key i{ width:.85rem; height:.85rem; flex:0 0 auto; }
.pair-chart .chart-key i.a{ background:var(--blue); }
.pair-chart .chart-key i.b{ background:#A9C8E2; }
/* Two series answer a hover in their own colours. The chart rule above turns
   every hovered bar the one blue, which on a paired chart would make the two
   bars of the year you are pointing at indistinguishable from each other. */
.pair-chart .bar.a{ fill:var(--blue); }
.pair-chart .bar.b{ fill:#A9C8E2; }
.pair-chart .bar-group:hover .bar.a,
.pair-chart .bar-group:focus-visible .bar.a{ fill:var(--blue-deep); }
.pair-chart .bar-group:hover .bar.b,
.pair-chart .bar-group:focus-visible .bar.b{ fill:#7FA9CF; }
.pair-chart .chart-standfirst{ margin-bottom:0; 
  font-size:var(--step-0); color:var(--ink-2); max-width:58ch; margin-bottom:var(--block-top);
}
.pair-chart h2{ margin-bottom:.5rem; }

/* A tag in a table cell: the kind of announcement, set small on the tint. */
.tag{
  display:inline-block; background:var(--blue-pale); color:var(--blue);
  font-size:var(--step--2); font-weight:600; letter-spacing:.06em;
  padding:.2rem .5rem; white-space:nowrap;
}
/* The date column in the letters table stays on one line. */
table.index td.date{ white-space:nowrap; color:var(--ink-3); font-size:var(--step--1); }

/* The next meetup, on the manual's quotation tint. */
.next-up{ background:var(--blue-pale); padding:1.15rem 1.35rem; margin-top:var(--block-top); }
.next-up .lab{
  display:block; font-size:var(--step--2); letter-spacing:.11em;
  text-transform:uppercase; font-weight:600; color:var(--ink-3); margin-bottom:.35rem;
}
.next-up p{ font-size:var(--step-0); color:var(--ink); }

/* Past meetups: a picture with its year and place on a blue bar. */
.meetups{ display:grid; gap:clamp(1.25rem,2.5vw,2rem); grid-template-columns:1fr; margin-top:var(--block-top); }
@media (min-width:620px){ .meetups{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .meetups{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.meetup{ margin:0; min-width:0; }
.meetup img{ width:100%; height:clamp(10rem,16vw,14rem); object-fit:cover; }
.meetup figcaption{ background:var(--blue); color:var(--ink-inverse); padding:.7rem .9rem; }
.meetup figcaption b{ font-weight:600; margin-right:.5rem; }
.meetup figcaption span{ font-size:var(--step--1); opacity:.85; }

/* A document that does not exist for a given year. A dash, not an empty cell,
   so a gap in the record reads as a gap and not as something that failed. */
table.index td .none{ color:var(--rule-strong); }

/* Ten years of announcements: the years are jumps across the top. */
.year-jump{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--block-top); }
.year-jump a{
  display:inline-block; padding:.4rem .75rem;
  background:var(--blue-pale); color:var(--blue);
  font-size:var(--step--2); font-weight:600; letter-spacing:.04em;
}
@media (hover: hover){ .year-jump a:hover{ background:var(--blue); color:var(--ink-inverse); text-decoration:none; } }
main .section h2 .count{
  font-size:var(--step--2); font-weight:600; color:var(--ink-3);
  letter-spacing:.09em; text-transform:uppercase; margin-left:.85rem;
}

/* ======================================================================
   Spacing belongs to the system

   These rules replace twenty-eight inline style attributes that were each
   deciding a margin on one page. A distance repeated on four pages is a rule,
   not a decision to be retaken every time a page is written.
   ====================================================================== */

/* A split section is edge to edge: its own padding would inset the photograph. */
.section.split{ padding-block:0; }

/* A second heading inside one section opens a new block, so it takes the same
   distance from what came before as any block does. */
main .section > .wrap > h2 ~ h2,
main .section .cols-2 > * > h2 ~ h2{ margin-top:var(--block-top); }

/* The legal and error pages are a title and prose, nothing else. They sit on
   the same rhythm as every other page rather than carrying their own. */
.plain h1{ margin-top:0; }
.plain .prose,
.plain .unverified{ margin-top:var(--block-top); }
.plain .footnote{
  margin-top:calc(var(--block-top) * 1.5);
  font-size:var(--step--1); color:var(--ink-3);
}
/* A standfirst under a heading, before the block it introduces. */
.prose.lead{ margin-block:0 var(--block-top); }

/* ======================================================================
   One distance under a heading

   The space under a heading was being set twice: by the heading's own
   margin-bottom, and again by a margin-top on whichever component followed.
   Margins collapse to the larger, so the distance came out 20, 22, 24 or 27
   pixels depending on which component happened to be next. Measured across
   the site that is four values for one relationship.

   The heading owns it, alone. Because its margin is set in em it stays
   proportional to the heading it belongs to, which is what makes a page
   read as one system rather than as a set of decisions.
   ====================================================================== */
main .section h1 + *,
main .section h2 + *,
main .section h3 + *,
.cols-2 > * > h2 + *{ margin-top:0; }

/* A table in a scroll wrapper is one element deeper, so the rule above reached
   the wrapper and the table kept its own top margin underneath it. That is why
   a heading sat 46px above an index table and 22px above a meta table on the
   same site. The gap belongs to the heading, so the table gives its margin up
   whenever it opens the block. */
main .section h1 + .table-wrap > table,
main .section h2 + .table-wrap > table,
main .section h3 + .table-wrap > table,
.cols-2 > * > h2 + .table-wrap > table{ margin-top:0; }

/* ======================================================================
   Two densities, not nine table variants

   Every table on the site is now one of three roles: `index` for a list of
   records, `data` for a run of figures under a blue header, and `meta` for
   label and value pairs. The only thing that varied between the old nine was
   how much air each row carried, so that is a density, named and documented,
   rather than a table of its own.

   `index`        a record with a name and a sentence under it: the chapters.
   `index dense`  a record on one line: a year, a date, a document, a figure.
   ====================================================================== */
table.index.dense tbody th[scope="row"],
table.index.dense tbody td{ padding-block:.85rem; }
@media (max-width:700px){
  /* Stacked, the row is the record and the cells are its lines, so the air
     belongs to the row. Left on the cells, the .85rem above carried into the
     phone layout and gave every editions row 54px of padding around two lines
     of text: 123px to say a date and a title. The row owns the spacing here;
     a figures table is still a table, so it keeps its own. */
  table.index.dense:not(.figures) tbody th[scope="row"],
  table.index.dense:not(.figures) tbody td{ padding-block:0; }
  table.index.dense tbody tr{ padding-block:.85rem; }
  table.index.dense tbody tr:first-child{ padding-top:.15rem; }
}

/* The documents table: the year is set as the names are, not as a small
   label, so "FY2026" and "FY26 Half-Year Financial Report" read as one line
   of type. */
table.index.docs tbody th[scope="row"]{
  font-size:var(--step-0); text-transform:none; letter-spacing:0;
  color:var(--ink); font-weight:600;
}

@media (max-width:700px){
  table.index.docs tbody th[scope="row"]{ font-size:var(--step-0); text-transform:none; letter-spacing:0; color:var(--ink); }
}

/* Financial Reports: a row to a year, and in each release its financial
   report, its presentation and the video of it being given, one above the
   next. The video carries a small play mark so it reads as something to
   watch, not another PDF. On a phone each release is named in small capitals,
   as the column heading would name it, its links share one line, and a
   release with nothing in it yet is left out rather than shown as a dash. */
.doclist{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
a.video{ display:inline-flex; align-items:center; gap:.4rem; }
a.video .play{ width:.7em; height:.7em; fill:currentColor; flex:none; }
@media (min-width:701px){
  table.releases tbody th[scope="row"],
  table.releases tbody td{ padding-block:1.15rem; }
}
@media (max-width:700px){
  /* Room on a phone: each year a clear block, each release a clear step
     within it. At the index table's own spacing the year sat 5px above its
     first release and each row of links 5px above the next release's name.
     Written at the documents table's specificity, which otherwise wins. */
  table.index.dense.docs.releases tbody tr{ padding-block:1.4rem; }
  table.index.dense.docs.releases tbody tr:first-child{ padding-top:.4rem; }
  table.index.docs.releases tbody th[scope="row"]{ margin-bottom:0; }
  table.index.docs.releases tbody td{ margin-top:1.15rem; }
  table.index.docs.releases tbody th[scope="row"] + td{ margin-top:.9rem; }
  table.releases tbody td::before{
    content:attr(data-label); display:block; margin-bottom:.5rem;
    font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase;
    font-weight:600; color:var(--ink-3);
  }
  table.releases .doclist{ display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; }
  table.releases td.empty{ display:none; }
}

/* --------------------------------------------------------- the history
   The home page's Welcome pair: the story on the left, and past the rule
   "At a glance", its four figures on the home page's ledger rows, each label
   with its figure at the end of the row. */
.history .prose{ max-width:40rem; }
.history .prose p{ line-height:1.7; text-wrap:pretty; }
.history .prose p:first-child{ color:var(--ink); }
/* On a phone the story reads on the body line: on a 1.7 line it ran the
   history past a screen and the page stopped clicking into place. */
@media (max-width:899px){ .history .prose p{ line-height:1.6; } }
.glance{ margin:0; }
.glance .t{ color:var(--ink-2); }
.glance dd{
  margin:0; font-size:var(--step-3); font-weight:600; line-height:1;
  color:var(--blue-deep); font-variant-numeric:tabular-nums lining-nums;
}

/* ---------------------------------------------------- a year of records
   The heading is the control: one year open, the others closed behind theirs,
   with the same plus and dash the questions use. */
details.year > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
details.year > summary::-webkit-details-marker{ display:none; }
details.year > summary > h2{ margin:0; }
details.year > summary::after{
  content:"+"; flex:0 0 auto; font-size:var(--step-1); font-weight:400; color:var(--blue); line-height:1;
}
details.year[open] > summary::after{ content:"\2013"; }
@media (hover: hover){ details.year > summary:hover > h2{ color:var(--blue); } }
details.year[open] > summary{ margin-bottom:1.25rem; }
details.year > summary + .table-wrap > table{ margin-top:0; }

/* ------------------------------------------------------------- gallery
   A meetup's photographs as a strip that is swiped or scrolled sideways: the
   phone photo track above, kept at every width. The next picture sits a
   little way into view, which says "there is more" without dots or arrows;
   the two buttons are for a mouse, which cannot swipe. */
.gallery{ position:relative; margin-top:var(--block-top); }
main .section h2 + .gallery, .meetup-row h3 + .gallery{ margin-top:.9rem; }
.gallery-track{
  display:flex; gap:.6rem; overflow-x:auto; scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.gallery-track::-webkit-scrollbar{ display:none; }
.gallery-track img{
  flex:0 0 86%; width:86%; aspect-ratio:16/9; object-fit:cover;
  scroll-snap-align:start; background:var(--blue-pale);
}
@media (min-width:700px){ .gallery-track img{ flex-basis:58%; width:58%; } }
@media (min-width:1100px){ .gallery-track img{ flex-basis:44%; width:44%; } }
.gallery-nav{ display:none; gap:.5rem; margin-top:.75rem; }
@media (hover: hover) and (pointer: fine){ .gallery-nav{ display:flex; } }
.gallery-nav button{
  appearance:none; background:transparent; border:1px solid var(--rule-strong);
  color:var(--blue); width:2.5rem; height:2.5rem; display:grid; place-items:center;
  font-size:var(--step-0); line-height:1; cursor:pointer;
}
.gallery-nav button:hover{ border-color:var(--blue); }
.gallery-nav button:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.gallery-count{ margin-left:auto; align-self:center; font-size:var(--step--1); color:var(--ink-3); }

/* One meetup after another: the year and the title, then its strip. */
.meetup-row + .meetup-row{ margin-top:clamp(2rem,4vh,3rem); padding-top:clamp(1.5rem,3vh,2.25rem); border-top:1px solid var(--rule); }
.meetup-row h3{ font-size:var(--step-1); font-weight:600; margin:0; }
.meetup-row h3 b{ color:var(--blue); font-weight:600; margin-right:.6rem; }

/* ----------------------------------------------------------- questions
   A run of questions a shareholder opens one at a time. Built on <details>,
   so it works before any script runs and a browser's own find-in-page can
   still reach the answers. */
.qa{ display:grid; gap:0; margin-top:var(--block-top); }
.qa-item{ border-top:1px solid var(--rule); }
.qa-item:last-child{ border-bottom:1px solid var(--rule); }
.qa-item summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:minmax(0,1fr) 1.5rem; gap:1rem; align-items:start;
  padding-block:1.1rem;
  font-size:var(--step-0); font-weight:600; color:var(--ink);
}
.qa-item summary::-webkit-details-marker{ display:none; }
/* Numbered as the ASX release is, 2 to 9 after its introduction: answer 4
   refers the reader to question 7. Not "numbered": that class already lays out the site's numbered lists, and
   on the answers' bullet lists it set every word on a line of its own. */
.qa.qa-numbered .qa-item summary{
  grid-template-columns:2.25rem minmax(0,1fr) 1.5rem; column-gap:1.25rem;
  /* Long questions run to three lines; set bold and tight they read as a block. */
  padding-block:1.5rem; line-height:1.55; font-weight:500;
}
.qa.qa-numbered .qa-no{ font-weight:600; }
.qa.qa-numbered .qa-body{ padding-left:3.5rem; padding-bottom:1.75rem; }
@media (max-width:599px){
  .qa.qa-numbered .qa-item summary{ grid-template-columns:1.5rem minmax(0,1fr) 1.25rem; column-gap:.85rem; padding-block:1.25rem; }
  .qa.qa-numbered .qa-body{ padding-left:2.35rem; }
}
.qa .qa-no{ color:var(--blue); font-weight:600; }
/* The release's section 1, labelled as its questions are. */
.qa-intro{ font-size:var(--step-0); font-weight:600; margin:1.5rem 0 .6rem; }
.qa-intro .qa-no{ color:var(--blue); margin-right:.6rem; }
.qa-intro ~ .prose + .prose{ margin-top:1em; }
/* The release's closing lines under the questions, as small print. */
.qa-notes{ margin-top:2rem; font-size:var(--step--1); color:var(--ink-3); line-height:1.6; }
.qa-notes p{ margin:0; }
.qa-notes h3{ font-size:var(--step--1); font-weight:600; color:var(--ink-2); margin:1.25rem 0 .35rem; }
.qa-item summary::after{
  content:"+"; justify-self:end;
  font-size:var(--step-1); font-weight:400; color:var(--blue); line-height:1;
}
.qa-item[open] summary::after{ content:"\2013"; }
@media (hover: hover){ .qa-item summary:hover{ color:var(--blue); } }
.qa-body{ padding-bottom:1.35rem; max-width:64ch; }
.qa-body p{ font-size:var(--step-0); color:var(--ink-2); line-height:1.6; }
.qa-body p + p,
.qa-body ul,
.qa-body ul + p{ margin-top:.8rem; }
.qa-body ul{ list-style:none; display:grid; gap:.5rem; }
.qa-body li{
  font-size:var(--step-0); color:var(--ink-2); line-height:1.6;
  padding-left:1.1rem; position:relative;
}
.qa-body li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; background:var(--blue); }

/* The same square dot the answers use, for any short list of names. */
ul.dots{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
ul.dots li{ padding-left:1.1rem; position:relative; line-height:1.5; }
ul.dots li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; background:var(--blue); }
table.index td > ul.dots{ margin:0; }

/* Questions and answers in the right-hand column: the block sits at the top of
   its column, level with the heading on the left, and an answer runs the width
   its question does. Set at 64ch under a page-wide question, an answer was a
   619px block beneath a 1366px line, which is what made the page read as a
   narrow paragraph in a wide room. The answer is body size, not a footnote:
   it is the content of the page. */
.cols-2 > * > .qa:first-child{ margin-top:0; }
.cols-2 .qa-body{ max-width:none; }
.qa-body p, .qa-body li{ font-size:var(--step-0); }

/* ======================================================================
   Refinements
   ====================================================================== */

/* A quotation page is a page, on every page of the site. The type was already
   the same as the home page's; what was missing was the room. Given only its
   content's height it came out 286px against the home page's 828 and read as
   a pull quote rather than as the pause it is meant to be. */
.quote-band{
  display:flex; align-items:center;
  min-height:calc(100dvh - var(--header-clear));
}
/* On a phone the band is as tall as the quotation. Held to a screen it was
   780px around 280px of words on Contact, once the spreads pages had let go
   of their floors; the pause is the desktop's. */
@media (max-width:899px), (max-height:619px){
  .quote-band{ min-height:0; }
}

/* A figure in an index table is read, not announced. The display size belongs
   to the thing a row is about, which in the chapters table is the count of
   firms; a share count and a percentage are ordinary figures and were coming
   out at 20.85px against body text of 14.6px. */
table.index tbody td.num{
  font-size:var(--step-0); font-weight:500; color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
}
table.index.chapters tbody td.num{ font-size:var(--step-2); }
/* The chapters as the concept's ledger row: period, chapter, count and the
   places, one baseline across the row on a wide screen. The cells are named
   .name and .where, not .t and .d: those names belong to an older rule that
   makes them blocks, and as blocks the cells stopped short of their row, so
   each row's line broke into pieces at four heights. */
@media (min-width:701px){
  table.index.chapters tbody th[scope="row"],
  table.index.chapters tbody td{ vertical-align:baseline; }
  table.index.chapters tbody th[scope="row"]{ width:9.5rem; }
  table.index.chapters td.name{ width:12rem; font-size:var(--step-0); font-weight:500; color:var(--ink); }
  table.index.chapters td.num{ width:4.5rem; }
  table.index.chapters td.where,
  table.index.chapters thead th.where{ padding-left:2rem; }
  table.index.chapters td.where{ font-size:var(--step--1); color:var(--ink-3); line-height:1.5; }
  table.index.chapters thead th.where{ text-align:left; }
}
@media (max-width:700px){
  /* Period and count on one line, the chapter under them, the places under
     that: the records grid does the first, the two cells that follow take
     the full width in turn. */
  table.index.chapters td.name{ font-size:var(--step-0); font-weight:500; color:var(--ink); }
  table.index.chapters td.where{ font-size:var(--step--1); color:var(--ink-3); line-height:1.5; margin-top:.15rem; }
  table.index.chapters tbody td.num{ font-size:var(--step-0); font-weight:500; color:var(--ink); }
}



/* ======================================================================
   Motion. Two speeds and one curve: --dur-1 for a colour or a line under a
   hover, --dur-3 for anything that arrives, opens or leaves. A press dims
   the control; the hand feels it. Everything here is switched off for a
   reader who has asked for less motion.
   ====================================================================== */

/* Hover on the two roles that had none. */
details.year > summary{ transition:color var(--dur-1) var(--ease); }
@media (hover: hover){
  details.year > summary:hover > h2{ color:var(--blue); }
  .site-nav .has-sub > a:hover{ color:var(--blue); }
}

/* A press, felt, on every control. */
.gallery-nav button:active,
.year-jump a:active,
.sub-toggle:active,
details > summary:active,
.card a:active,
.contents a:active{ opacity:.7; }
.gallery-nav button,
.year-jump a,
.sub-toggle,
details > summary{ transition:opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }

/* What a disclosure reveals arrives rather than appears. */
@keyframes arrive{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
details[open] > :not(summary){ animation:arrive var(--dur-3) var(--ease-out) both; }

/* A page changes to the next with a short cross-fade in browsers that can. */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation-duration:var(--dur-2); }
::view-transition-new(root){ animation-duration:var(--dur-3); }

/* Thumb-sized targets on a phone for the controls that were 31 to 33px. */
@media (max-width:899px){
  /* A thumb-sized target without moving the link: the hit area grows by an
     invisible layer, the words and their rule stay where they were. Done as
     padding and a negative margin it pulled every call to action up to 9px
     under the thing above it, from the 33px it should sit at. */
  .cta{ position:relative; }
  .cta::after{ content:""; position:absolute; inset:-.7rem -.4rem; }
  details > summary{ min-height:2.75rem; }
  .year-jump a{ min-height:2.75rem; display:inline-grid; place-items:center; padding-inline:.9rem; }
  .footer-cols ul a{ display:inline-block; padding-block:.55rem; margin-block:-.55rem; }
}

@media (prefers-reduced-motion: reduce){
  .site-nav, .site-nav .subnav, .gallery-nav button, .year-jump a, .sub-toggle, details > summary, details.year > summary, .ask-panel, .ask-scrim{ transition:none; }
  details[open] > :not(summary){ animation:none; }
  @view-transition{ navigation:none; }
}

/* The total row's chapter reads at the same weight as the others; its count keeps its weight. */
table.index.chapters tbody tr.total td.name{ font-weight:500; }

/* ---------------------------------------------------------------- sign-up
   Shareholder communications, at the top of the footer: the offer on the
   left, the address and the button on the right, a rule under both. One
   field, one button, the site's blue; nothing else to fill in. The KPG
   Intelligence forms (below) take this same field and button. */
.signup{
  /* Top, not end: the status line under the field is empty until a sign-up,
     and lining up at the foot pushed the field 51px above the heading. */
  display:grid; gap:1.25rem 3rem; align-items:start;
  padding-bottom:clamp(2rem,4vw,2.75rem); margin-bottom:clamp(2rem,4vw,2.75rem);
  border-bottom:1px solid var(--rule);
}
@media (min-width:900px){ .signup{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); } }
.signup h2{ font-size:var(--step-1); font-weight:600; line-height:1.3; color:var(--ink); margin:0 0 .35rem; letter-spacing:0; text-transform:none; }
.signup-words p{ font-size:var(--step--1); color:var(--ink-2); line-height:1.6; max-width:34rem; margin:0; }
.signup-row, .field-row{ display:flex; gap:.5rem; }
.signup input[type="email"],
.ask-form input[type="text"],
.reg-form input[type="text"],
.reg-form input[type="email"]{
  flex:1; min-width:0; height:2.75rem; padding:0 .9rem;
  /* A shade off the page, as a panel is: grey on white paper, white on cream.
     The same colour as the footer, the field read as a hole in it. */
  border:1px solid transparent; border-radius:0; background:var(--card);
  color:var(--ink); font:inherit; font-size:var(--step-0);
  transition:border-color var(--dur-1) var(--ease);
}
/* The field reads at the page's body size, not a size of its own: 16px beside
   13px copy was the odd one out. On a touch screen it never goes below 16px,
   because iOS zooms the page in on any field smaller than that. */
@media (pointer:coarse){
  .signup input[type="email"],
  .ask-form input[type="text"],
  .reg-form input[type="text"],
  .reg-form input[type="email"]{ font-size:max(1rem, var(--step-0)); }
}
.signup input[type="email"]::placeholder,
.ask-form input[type="text"]::placeholder,
.reg-form input::placeholder{ color:var(--ink-3); }
.signup input[type="email"]:focus,
.ask-form input[type="text"]:focus,
.reg-form input[type="text"]:focus,
.reg-form input[type="email"]:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); background:var(--paper); }
.signup button,
.ask-form button,
.reg-form button[type="submit"]{
  height:2.75rem; padding:0 1.35rem; border:0; border-radius:0; cursor:pointer;
  background:var(--blue); color:var(--ink-inverse); font:inherit; font-size:var(--step--1); font-weight:600;
  transition:background-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.signup button:hover, .ask-form button:hover, .reg-form button[type="submit"]:hover{ background:var(--blue-deep); }
.signup button:active, .ask-form button:active, .reg-form button[type="submit"]:active{ opacity:.8; }
.signup button:focus-visible, .ask-form button:focus-visible, .reg-form button[type="submit"]:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.signup button[disabled]{ opacity:.6; cursor:default; }
.signup-note{ margin:.6rem 0 0; font-size:var(--step--1); color:var(--ink-3); }
.signup-note a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:.2em; }
.signup-status{ margin:.35rem 0 0; min-height:1.5em; font-size:var(--step--1); }
.signup-status.ok{ color:var(--blue); font-weight:600; }
.signup-status.invalid, .signup-status.error{ color:var(--ink); font-weight:600; }
.signup .hp{ position:absolute; left:0; top:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.signup .hp *{ display:block; max-width:1px; }

/* ----------------------------------------------------------------- legal
   A long document to read, not to scan: one reading measure, the numbered
   sections as subheadings, the sub-sections as strong body text, and the
   lists indented under the paragraph that introduces them. */
.legal{ margin-top:var(--block-top); color:var(--ink-2); }
main .section h1 + .legal{ margin-top:0; }
.legal p, .legal li{ font-size:var(--step-0); line-height:1.7; text-wrap:pretty; }
.legal p + p, .legal p + ul, .legal p + ol, .legal ul + p, .legal ol + p{ margin-top:1em; }
.legal h2{
  font-size:var(--step-1); font-weight:600; line-height:1.35; color:var(--ink);
  margin:2.25em 0 .75em; letter-spacing:0; text-transform:none;
}
.legal h3{ font-size:var(--step-0); font-weight:600; color:var(--ink); margin:1.6em 0 .5em; }
.legal > :first-child{ margin-top:0; }
.legal ul, .legal ol{ padding-left:1.35rem; }
/* The site's own bullet, as the EGM answers and the other lists use it. */
.legal ul{ list-style:none; padding-left:0; }
.legal ul > li{ position:relative; padding-left:1.1rem; }
.legal ul > li::before{ content:""; position:absolute; left:0; top:.75em; width:5px; height:5px; background:var(--blue); }
.legal li + li{ margin-top:.45em; }
.legal a{ color:var(--blue); text-decoration:underline; text-underline-offset:.2em; overflow-wrap:anywhere; }
.legal strong{ font-weight:600; color:var(--ink); }

/* A blue section is its own division: its fill does what the hairline does,
   so no rule is drawn where a section meets a quote band, above or below it,
   nor where the footer meets one. */
.section + .section.quote-band,
.hero + .section.quote-band,
.section.quote-band + .section{ border-top:0; }
main:has(> .section.quote-band:last-child) + .site-footer{ border-top:0; }

/* A card's heading is a step below a section's: at the section size, the
   office names on Contact and the meeting dates on Events read as loud as
   the page's own headings. One size for every card heading. */
.card > h2, .card.office > h2{ font-size:var(--step-3); line-height:1.25; }

/* ------------------------------------------------------ register interest
   The Omaha meetup's registration of interest: a dialog over the Events page,
   and the whole screen on a phone. Its fields and button are the sign-up's.
   Without a script the same form is a page of its own. */
dialog.register{
  /* Centred in the window: the reset takes away the margin a dialog centres by. */
  margin:auto;
  width:min(34rem, calc(100vw - 2rem)); max-height:calc(100dvh - 2rem);
  padding:2rem 2rem 1.6rem; border:1px solid var(--rule);
  background:var(--paper); color:var(--ink);
  box-shadow:0 30px 60px -30px rgba(17,19,22,.55);
}
dialog.register::backdrop{ background:rgba(17,19,22,.35); }
/* The page behind holds still while the form is open. */
html:has(dialog.register[open]){ overflow:hidden; }
.reg-close{
  position:absolute; top:.6rem; right:.7rem; width:2.75rem; height:2.75rem;
  border:0; background:transparent; font-size:1.6rem; line-height:1; color:var(--ink-2); cursor:pointer;
}
.reg-close:hover{ color:var(--ink); }
.reg-close:focus-visible{ outline:2px solid var(--blue); outline-offset:-4px; }
dialog.register h2{ margin:0 2.5rem .45rem 0; font-size:var(--step-3); line-height:1.2; }
.register-page{ max-width:34rem; }
.reg-intro{ margin:0 0 1.3rem; font-size:var(--step--1); color:var(--ink-2); line-height:1.55; }
.reg-form{ display:grid; gap:.95rem; }
.reg-pair{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.reg-form label{ display:grid; gap:.35rem; font-size:var(--step--1); color:var(--ink-2); }
.reg-form fieldset{ border:0; margin:.2rem 0 0; padding:0; }
.reg-form legend{ padding:0; margin-bottom:.45rem; font-size:var(--step--1); color:var(--ink-2); }
.reg-radios{ display:flex; gap:2rem; }
.reg-form .reg-check{ display:flex; align-items:center; gap:.6rem; font-size:var(--step-0); color:var(--ink); cursor:pointer; }
.reg-form .reg-check input{ width:1.15rem; height:1.15rem; margin:0; accent-color:var(--blue); }
.reg-form button[type="submit"]{ margin-top:.4rem; }
.reg-status{ margin:0; min-height:1.4em; font-size:var(--step--1); }
.reg-status.ok{ color:var(--blue); font-weight:600; }
.reg-status.invalid, .reg-status.error{ color:var(--ink); font-weight:600; }
.reg-note{ margin:0; font-size:var(--step--2); color:var(--ink-3); line-height:1.5; }
.reg-form .hp{ position:absolute; left:0; top:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.reg-form .hp *{ display:block; max-width:1px; }
/* Sent: the fields give way to the thank-you. */
.reg-form.done > :not(.reg-status){ display:none; }
.reg-form.done .reg-status{ font-size:var(--step-0); }
@media (max-width:600px){
  dialog.register{
    width:100%; max-width:none; height:100dvh; max-height:none; margin:0; inset:0;
    padding:1.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px));
    border:0; box-shadow:none;
  }
  .reg-pair{ grid-template-columns:1fr; }
}

/* A link that sits inside a line of other text carries an underline, so it
   is not told apart by colour alone: the firms on the Fact Sheet, the Privacy
   Policy in the registration form's note. */
a.in-text, .reg-note a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; }