/* Legetty.
   Palette comes from the client's own logo and site: navy #28456E is the logo
   field, #4292D8 their step-badge blue. The link and badge blues are darkened
   from that blue so every text pair clears WCAG AA 4.5:1 on all three surfaces.
   No gradients. Buttons sit at 8px, per the house rule against pill shapes. */

@font-face{
  font-family:'Inter';src:url('/fonts/inter-latin-var.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
/* Poppins is the wordmark's own typeface: geometric, single-storey g, circular
   bowls. It ships as static weights, not a variable font, so only the two
   weights actually used are self-hosted. Asking for any other weight would
   make the browser synthesise a fake one. */
@font-face{
  font-family:'Poppins';src:url('/fonts/poppins-500-latin.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Poppins';src:url('/fonts/poppins-600-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  --navy:#28456E;          /* logo field, primary */
  --navy-deep:#16304F;     /* darkest, display headings */
  --blue:#2765A2;          /* links. 6.05 on white, 5.30 on sky */
  --badge:#3478B4;         /* numbered badges. white on it is 4.68 */
  --sky-text:#8CC2EE;      /* for use on navy only. 5.11 on navy */

  --ink:#1A2430;           /* body copy. 15.68 on white */
  --muted:#4A5968;         /* secondary copy. 7.19 on white */
  --line:#DCE4EC;
  --field:#7B858C;         /* control boundary. 3.77 on white */

  --bg:#ffffff;
  --cream:#F7F5F0;
  --sky:#E8F1FA;

  --r:8px;          /* controls */
  --r-card:16px;    /* cards and callouts */
  --r-media:22px;   /* photography and video */

  /* Shadows tinted with the brand navy rather than black, layered so the
     falloff is soft. Flat 1px borders everywhere is what reads as blocky. */
  --shadow-sm:0 1px 2px rgba(16,34,56,.04), 0 2px 8px rgba(16,34,56,.05);
  --shadow-md:0 2px 4px rgba(16,34,56,.04), 0 10px 28px rgba(16,34,56,.09);
  --shadow-lg:0 4px 10px rgba(16,34,56,.05), 0 24px 56px rgba(16,34,56,.14);
  --wrap:68rem;     /* container: headings, media and cards fill this */
  --measure:52rem;  /* body paragraphs only, about 75 characters */
  --wide:65rem;     /* everything else runs the full container */

  --display:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 1.1875rem/1.78 var(--sans);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--display);color:var(--navy-deep);margin:0 0 .75rem;
  font-weight:600;line-height:1.18;letter-spacing:-0.02em;text-wrap:pretty}
h1{font-size:clamp(2.25rem,5vw,3.5rem);font-weight:600;line-height:1.12}
h2{font-size:clamp(1.75rem,3.4vw,2.5rem);font-weight:600}
h3{font-size:clamp(1.25rem,2vw,1.5rem)}
h4{font-size:1.125rem;font-family:var(--sans);font-weight:600}

p,ul,ol{margin:0 0 1.25rem}
ul,ol{padding-left:1.35rem}
li{margin-bottom:.6rem}
strong{font-weight:600}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--navy-deep)}
img{max-width:100%;height:auto}

:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:2px}
.cta :focus-visible,.sitefoot :focus-visible,.section--navy :focus-visible{outline-color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}

/* One centred reading column, with media allowed to break out wider.
   The previous version put each section heading in a sticky left rail, which
   left a tall empty gutter down the page whenever a section ran long. Text now
   sits at a comfortable measure, centred so nothing is lopsided, and figures,
   video and tables widen to use the container. */
.content{
  display:grid;
  grid-template-columns:min(var(--wide),100%) minmax(0,1fr);
}
.content > *{grid-column:1}
.content > .breakout{
  grid-column:1 / -1;
  width:min(var(--wide),100%);
  justify-self:start;
  margin-top:2.5rem;
  margin-bottom:2.5rem;
}
.content > :first-child{margin-top:0}
.content > :last-child{margin-bottom:0}
.content > * + h2{margin-top:3rem}
.content > * + h3{margin-top:2.25rem}

/* Supporting card in a side column. */
.sidecard{background:var(--bg);border:1px solid rgba(16,34,56,.06);
  border-radius:var(--r-card);padding:2rem;box-shadow:var(--shadow-sm)}
.section--cream .sidecard,.section--sky .sidecard{background:var(--bg)}
.sidecard h3{margin-top:0;font-family:var(--sans);font-size:1.0625rem;font-weight:600}
.sidecard p{font-size:1rem;color:var(--muted)}
/* Numbered steps in a card. The number is generated content, so the ordered
   list is the single source of the numbering and copied text stays clean. */
.ministeps{list-style:none;margin:0;padding:0;counter-reset:ministep}
.ministeps li{counter-increment:ministep;display:flex;gap:1rem;align-items:flex-start;
  margin-bottom:1.25rem;font-size:1.0625rem}
.ministeps li:last-child{margin-bottom:0}
.ministeps li::before{content:counter(ministep);flex:0 0 auto;display:inline-flex;
  align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--sky);color:var(--navy-deep);font:600 .9375rem/1 var(--sans)}
.sidecard .ministeps li{font-size:1rem;color:var(--muted)}
.sidecard__note{font-size:.9375rem;margin:1.25rem 0 0;padding-top:1rem;
  border-top:1px solid var(--line)}

/* Inverted card: navy ground, white action. */
.sidecard--invert{background:var(--navy);border-color:var(--navy);color:#fff}
.section--cream .sidecard--invert,.section--sky .sidecard--invert{background:var(--navy)}
.sidecard--invert h3{color:#fff}
.sidecard--invert p{color:#DCE8F3}
.sidecard--invert .btn{background:#fff;color:var(--navy-deep);border-color:#fff}
.sidecard--invert .btn:hover{background:var(--sky);border-color:var(--sky);color:var(--navy-deep)}
.sidecard--invert :focus-visible{outline-color:#fff}

/* Legal documents have many short sections, so the display scale is too loud. */
.doc h2{font-size:1.375rem;margin-top:2.75rem}
.doc > :first-child{margin-top:0}
.doc h3{font-size:1.0625rem}
@media (min-width:60rem){.sidecard--sticky{position:sticky;top:3rem}}

/* Contact: expectations first, then the form, in one column. */
/* Full container width, so "Pick a time" starts on the same left edge as
   the section above it. It used to add max-width:--measure on top of .wrap,
   which indented the whole block by 104px against its neighbour. It must
   set no margin of its own: the class sits on the same element as .wrap,
   so margin:0 cancels that centring and throws the section to the far left.
   The intro line keeps the reading measure; the calendar and card do not. */
.contact__inner > div > p{max-width:var(--measure)}
/* The card follows the calendar's fallback line directly, so it needs the
   gap on top. The old bottom margin was doing nothing: it ends the section. */
.contact__inner .sidecard{margin-top:2.75rem;margin-bottom:0}

/* Available to assistive tech, not shown: the visible page title already
   names these regions. */
.visually-quiet{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Contents for the long legal documents, inline at the top of the page. */
.toc{background:var(--cream);border-radius:var(--r-card);padding:1.5rem 1.75rem;margin:0 0 2.5rem}
.toc__title{font:600 .9375rem/1.4 var(--sans);letter-spacing:.01em;
  color:var(--blue);margin:0 0 .5rem}
.toc ol{list-style:none;padding:0;margin:0;columns:2;column-gap:2rem}
@media (max-width:40rem){.toc ol{columns:1}}
.toc li{margin:0;break-inside:avoid}
.toc a{display:flex;align-items:center;min-height:40px;padding:.15rem 0;
  text-decoration:none;color:var(--ink);line-height:1.35}
.toc a:hover{color:var(--blue);text-decoration:underline}

.skip{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:.85rem 1.25rem;z-index:100;border-radius:0 0 var(--r) 0}
.skip:focus{left:0;top:0}

/* ---------------------------------------------------------------- header */
/* Sticky, solid, with a shadow once scrolled. Keeps the call to action
   reachable the whole way down. A translucent header over a dark photograph
   would put the navy logo and nav on an unpredictable ground. */
.masthead{background:var(--bg);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;transition:box-shadow .2s ease}
.masthead.is-stuck{box-shadow:0 1px 0 rgba(16,34,56,.06),0 8px 24px rgba(16,34,56,.08)}
[id]{scroll-margin-top:6rem}
@media (prefers-reduced-motion:reduce){.masthead{transition:none}}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding-top:1rem;padding-bottom:1rem}
.masthead__brand{display:inline-flex;align-items:center;min-height:44px}
.masthead__brand img{width:168px;height:auto;display:block}

.navtoggle{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.5rem .9rem;
  background:none;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);
  font:500 .9375rem/1 var(--sans);cursor:pointer}
.navtoggle__bars{display:block;width:18px;height:2px;background:currentColor;
  box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}

.sitenav{display:none;width:100%}
.sitenav.is-open{display:block}
.sitenav ul{list-style:none;margin:0;padding:.5rem 0;display:flex;flex-direction:column}
.sitenav li{margin:0}
.sitenav a{display:flex;align-items:center;min-height:48px;text-decoration:none;
  color:var(--ink);font-size:1rem;font-weight:500;border-bottom:1px solid var(--line)}
.sitenav a:hover{color:var(--blue)}
.sitenav a[aria-current]{color:var(--blue);font-weight:600}
.sitenav__contact{border-top:1px solid var(--line);margin-top:.35rem;padding-top:.35rem}

/* The About group. On narrow screens the hamburger is already a list, so the
   children are simply listed under a label and there is nothing to toggle;
   the control only becomes an actual button at the desktop breakpoint. */
.sitenav__toggle{display:flex;align-items:center;gap:.4rem;width:100%;
  min-height:48px;padding:0;background:none;border:0;cursor:default;
  font:inherit;font-size:1rem;color:var(--muted);text-align:left}
.sitenav__chev{display:none;flex:0 0 auto}
/* `.sitenav ul` is (0,1,1) and sets display:flex, so a bare `.submenu` loses
   to it and the menu renders visible and horizontal. Fifth time this shape
   of trap has bitten; qualify it. */
.sitenav ul.submenu{list-style:none;margin:0;padding:0 0 0 .9rem;
  flex-direction:column;gap:0}
.submenu li{margin:0}

/* The bar actions. Calling is the highest-value thing a visitor can do from a
   phone, so Call now stays visible in the bar at every width rather than
   hiding behind the menu button. Contact is the reverse: it is a button in
   the bar on wide screens and a row inside the menu on narrow ones. */
.masthead__actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;order:2}
.masthead__brand{order:1}
.navtoggle{order:3}
.sitenav{order:4}
.masthead__call{white-space:nowrap}
/* .btn sets display:inline-flex at equal specificity and is defined further
   down the sheet, so these need the extra class to win. Same trap the old nav
   CTA hit. */
.masthead__actions a.masthead__contact{display:none}

/* Below the breakpoint the bar carries the logo, Call now and Menu. Left at
   full size those wrap to a second row at every phone width, which nearly
   doubles the height of a sticky header. The logo comes in, the padding
   tightens, and under 390px the button drops to "Call". */
@media (max-width:63.99rem){
  .masthead__inner{gap:.5rem}
  .masthead__brand img{width:140px}
  .navtoggle{padding:.5rem .7rem;gap:.45rem}
  .masthead__actions .btn--sm{padding-left:.75rem;padding-right:.75rem}
}
@media (max-width:24.375rem){
  .masthead__brand img{width:124px}
  .masthead__callmore{display:none}
}
/* 320 is the reflow width and the row will not hold three labelled controls.
   The toggle goes to its bars alone; the button keeps its name from the
   aria-label rather than the hidden text. */
@media (max-width:20rem){
  .masthead__brand img{width:112px}
  .navtoggle__label{display:none}
  .navtoggle{padding:.5rem .6rem;min-width:44px;justify-content:center}
}

@media (min-width:64rem){
  .navtoggle{display:none}
  .sitenav{display:block;width:auto}
  .sitenav ul{flex-direction:row;align-items:center;gap:1.2rem;padding:0}
  .sitenav a{min-height:44px;border-bottom:0;font-size:.9375rem}
  .sitenav a[aria-current]{box-shadow:inset 0 -2px 0 var(--blue)}
  .sitenav__contact{display:none}
  .sitenav{margin-left:auto;order:2}
  .sitenav__group{position:relative}
  .sitenav__toggle{width:auto;min-height:44px;cursor:pointer;font-size:.9375rem;
    color:var(--ink)}
  .sitenav__toggle:hover{color:var(--blue)}
  .sitenav__toggle.is-here{box-shadow:inset 0 -2px 0 var(--blue);color:var(--blue);
    font-weight:600}
  .sitenav__chev{display:block;transition:transform .15s ease}
  .sitenav__toggle[aria-expanded="true"] .sitenav__chev{transform:rotate(180deg)}
  .sitenav ul.submenu{position:absolute;top:calc(100% + .55rem);left:50%;
    transform:translateX(-50%);min-width:12.5rem;padding:.5rem;background:var(--bg);
    border:1px solid var(--line);border-radius:var(--r-card);
    box-shadow:0 12px 32px rgba(16,34,56,.14);display:none;z-index:60}
  .sitenav__toggle[aria-expanded="true"] + ul.submenu{display:flex}
  .submenu a{display:flex;align-items:center;min-height:44px;padding:0 .75rem;
    border-radius:8px;white-space:nowrap;font-size:.9375rem}
  .submenu a:hover{background:var(--sky);color:var(--blue)}
  .submenu a[aria-current]{color:var(--blue);font-weight:600;box-shadow:none}
  @media (prefers-reduced-motion:reduce){.sitenav__chev{transition:none}}
  .masthead__actions{margin-left:0;order:3;gap:.5rem}
  .masthead__actions a.masthead__contact{display:inline-flex}
  .masthead__inner{gap:.85rem}
}

/* The row carries the logo, six links and two buttons. Between the point it
   unfolds and the point there is comfortable room, the logo and the button
   padding come in rather than letting a label wrap. Measured at 1024: 7.5px
   of slack before this, 44.9px after. */
@media (min-width:64rem) and (max-width:74.99rem){
  .masthead__brand img{width:150px}
  .masthead__actions .btn--sm{padding-left:.8rem;padding-right:.8rem}
  .sitenav ul{gap:1.05rem}
}

/* Contact sits on the legal row rather than in a band of its own, so the
   footer loses a whole stripe without losing anything. */
.sitefoot__legal{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:.5rem 2rem}
.sitefoot__contact{margin:0;font-style:normal;display:flex;
  flex-wrap:wrap;align-items:center;gap:.25rem .75rem;font-size:.9375rem}
.sitefoot__contact a{color:var(--sky-text);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}
.sitefoot__contact a:hover{color:#fff;text-decoration:underline}
.sitefoot__contact span{color:var(--sky-text);opacity:.6}

/* ---------------------------------------------- quote wall previews */
/* A: columns fill downwards, so a short quote takes a short box. */
.pqwall{margin-top:2.5rem;column-gap:2rem}
@media (min-width:46rem){.pqwall{column-count:2}}
@media (min-width:68rem){.pqwall{column-count:3}}
.pq{break-inside:avoid;margin:0 0 2rem;padding:1.5rem 1.6rem;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-card)}
.pq blockquote{margin:0}
.pq blockquote p{margin:0;font-size:1.0625rem;line-height:1.65;color:var(--ink)}
.pq--big{background:var(--sky);border-color:transparent}
.pq--big blockquote p{font:500 1.375rem/1.4 var(--display);color:var(--navy-deep)}

/* B: every fourth card inverts. */
.quote--invert{background:var(--navy-deep);border-color:var(--navy-deep)}
.quote--invert blockquote p{color:#fff}

/* C: a mark, and cards that hug their content. */
.gqwall{margin-top:2.5rem;column-gap:2rem}
@media (min-width:46rem){.gqwall{column-count:2}}
@media (min-width:68rem){.gqwall{column-count:3}}
.gq{break-inside:avoid;margin:0 0 2rem;padding:1.4rem 1.6rem 1.6rem;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card)}
.gq::before{content:"";display:block;width:26px;height:20px;margin-bottom:.85rem;
  background:var(--badge);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 20"><path d="M0 20V11C0 4.9 3.6.8 9.7 0l.9 3.6C7 4.5 5.2 6.6 5.2 9.3H9.6V20Zm16.4 0V11c0-6.1 3.6-10.2 9.7-11l.9 3.6c-3.6.9-5.4 3-5.4 5.7H26V20Z"/></svg>') no-repeat center/contain;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 20"><path d="M0 20V11C0 4.9 3.6.8 9.7 0l.9 3.6C7 4.5 5.2 6.6 5.2 9.3H9.6V20Zm16.4 0V11c0-6.1 3.6-10.2 9.7-11l.9 3.6c-3.6.9-5.4 3-5.4 5.7H26V20Z"/></svg>') no-repeat center/contain}
.gq blockquote{margin:0}
.gq blockquote p{margin:0;font-size:1.0625rem;line-height:1.65;color:var(--ink)}

/* D: grouped, each opened by one quote at display size. */
.tgroup{margin-top:3rem}
/* --blue, not --badge: badge blue is 4.6:1 on white, which is where
   .bcard__cat uses it, but only 4.29:1 on cream. Measured, not assumed. */
.tgroup__title{margin:0 0 1rem;font:600 .8125rem/1 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--blue)}
.tgroup__lead{margin:0 0 1.5rem;padding:1.9rem 2rem;background:var(--navy-deep);
  border-radius:var(--r-card)}
.tgroup__lead blockquote{margin:0}
.tgroup__lead blockquote p{margin:0;font:500 1.5rem/1.35 var(--display);color:#fff;
  text-wrap:pretty}
.tgroup__rest{display:grid;gap:1.5rem}
@media (min-width:46rem){.tgroup__rest{grid-template-columns:1fr 1fr}}

/* ------------------------------------------------------------- results */
/* Full container width, not the reading measure. It is fine print rather
   than body copy, and running it the width of the wall above it is the
   conventional look for a disclaimer. */
.quotes__note{margin:2.5rem 0 0;font-size:.9375rem;line-height:1.7;color:var(--muted)}
.quotes__more{margin:1.75rem 0 0}

.films{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:2rem}
@media (min-width:46rem){.films--2,.films--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:68rem){.films--3{grid-template-columns:repeat(3,1fr)}}
.films__item{margin:0;display:flex;flex-direction:column;gap:.85rem}
.films__item .video{margin:0}
.films__title{margin:0;font:600 1.0625rem/1.4 var(--sans);color:var(--navy-deep);
  text-wrap:balance}

/* ------------------------------------------------- transcript contents */
/* Option A: chapters carrying the timestamp from the video, so one list
   serves the player and the transcript. */
.chap{background:var(--cream);border-radius:var(--r-card);padding:1.75rem 1.9rem;margin:0 0 2.75rem}
.chap__title{margin:0 0 1rem;font:600 .9375rem/1.4 var(--sans);letter-spacing:.01em;color:var(--blue)}
.chap ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
@media (min-width:52rem){.chap ol{grid-template-columns:1fr 1fr;column-gap:2.5rem}}
.chap li{margin:0}
.chap a{display:flex;gap:.9rem;align-items:baseline;min-height:44px;padding:.35rem 0;
  text-decoration:none;color:var(--ink);line-height:1.45}
.chap a:hover .chap__name{color:var(--blue);text-decoration:underline}
.chap__time{flex:0 0 3.4rem;font:600 .875rem/1.6 var(--sans);color:var(--badge);
  font-variant-numeric:tabular-nums}
.chap__name{flex:1}

/* Option C: one line until it is asked for, so the transcript starts right
   after the player. */
.jump{border:1px solid var(--line);border-radius:var(--r-card);margin:0 0 1.75rem;
  background:var(--bg)}
.jump > summary{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:56px;padding:.85rem 1.5rem;cursor:pointer;list-style:none;
  font:600 1.0625rem/1.3 var(--sans);color:var(--navy-deep)}
.jump > summary::-webkit-details-marker{display:none}
.jump__sign{position:relative;width:14px;height:14px;flex:0 0 auto}
.jump__sign::before,.jump__sign::after{content:"";position:absolute;background:var(--badge);
  transition:transform .18s ease}
.jump__sign::before{top:6px;left:0;width:14px;height:2px}
.jump__sign::after{top:0;left:6px;width:2px;height:14px}
.jump[open] .jump__sign::after{transform:scaleY(0)}
@media (prefers-reduced-motion:reduce){.jump__sign::before,.jump__sign::after{transition:none}}
/* Multi-column, not a two column grid. A grid flows row by row, so reading
   down the left column gave sections 1, 3, 5, 7, 9, 11 and skipped the rest,
   which is wrong for a list that runs in the order the talk does. Columns
   fill downwards first and do it for any number of items, so nothing has to
   be hardcoded to the section count. */
.jump__list{list-style:none;margin:0;padding:0 1.5rem 1.25rem}
@media (min-width:52rem){.jump__list{column-count:2;column-gap:2.5rem}}
.jump__list li{break-inside:avoid}
.jump__list li{margin:0}
.jump__list a{display:flex;align-items:center;min-height:44px;color:var(--blue);
  text-decoration:none;line-height:1.45}
.jump__list a:hover{text-decoration:underline}

/* Preview variants for the jump list. */
.jump--num .jump__list a,.jump--time .jump__list a{gap:.85rem;align-items:baseline}
.jump__n{flex:0 0 1.6rem;font:600 .875rem/1.6 var(--sans);color:var(--badge);
  font-variant-numeric:tabular-nums}
.jump__time{flex:0 0 3.2rem;font:600 .875rem/1.6 var(--sans);color:var(--badge);
  font-variant-numeric:tabular-nums}
.jump__groups{padding:0 1.5rem 1.25rem;display:grid;gap:1.5rem}
@media (min-width:52rem){.jump__groups{grid-template-columns:1fr 1fr;column-gap:2.5rem}}
.jump__group ol{list-style:none;margin:0;padding:0}
.jump__group li{margin:0}
.jump__group a{display:flex;align-items:center;min-height:40px;color:var(--blue);
  text-decoration:none;line-height:1.45}
.jump__group a:hover{text-decoration:underline}
.jump__grouptitle{margin:0 0 .35rem;font:600 .8125rem/1 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}

/* Option B reuses the FAQ rail; it needs a heading and a list of its own. */
.rail__title{margin:0 0 .9rem;font:600 .9375rem/1.4 var(--sans);color:var(--navy-deep)}
.rail__list{list-style:none;margin:0;padding:0;counter-reset:rl}
.rail__list li{margin:0}
.rail__list a{display:flex;align-items:center;min-height:40px;padding:.3rem 0;
  color:var(--navy-deep);text-decoration:none;font-size:.9375rem;line-height:1.4}
.rail__list a:hover{color:var(--blue);text-decoration:underline}

/* ------------------------------------------------------------------ blog */
/* Card index in the shape of the reference the client sent: photograph,
   category, headline, standfirst. A static grid rather than their carousel,
   which hides most of its own content and needs script to work at all. */
.bloggrid{list-style:none;margin:0;padding:0;display:grid;gap:2rem}
@media (min-width:46rem){.bloggrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:68rem){.bloggrid{grid-template-columns:repeat(3,1fr);gap:2.25rem}}
.bloggrid--feature{grid-template-columns:1fr}
@media (min-width:46rem){.bloggrid--feature{grid-template-columns:1fr}}
@media (min-width:68rem){.bloggrid--feature{grid-template-columns:1fr}}

.bcard{position:relative;display:flex;flex-direction:column;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}
.bcard:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.bcard{transition:none}.bcard:hover{transform:none}}
.bcard__shot{margin:0;background:var(--sky)}
.bcard__shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.bcard__body{padding:1.5rem 1.5rem 1.75rem;display:flex;flex-direction:column;flex:1}
.bcard__cat{margin:0 0 .6rem;font:600 .8125rem/1 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--badge)}
.bcard__title{margin:0 0 .75rem;font-size:1.25rem;line-height:1.3;text-wrap:balance}
.bcard__title a{color:var(--navy-deep);text-decoration:none}
/* The headline link covers the card, so the whole card is the target and the
   image needs no link of its own. */
.bcard__title a::after{content:"";position:absolute;inset:0;z-index:1}
.bcard:hover .bcard__title a{color:var(--blue)}
.bcard__ex{margin:0 0 1.25rem;font-size:1rem;line-height:1.6;color:var(--muted)}
/* --field is a border token sized for the 3:1 UI rule, not for text: it
   measured 3.77:1 here. --muted is the text token and clears 4.5:1. */
.bcard__meta{margin:auto 0 0;font:600 .875rem/1 var(--sans);color:var(--muted)}

/* The featured card lies down on wide screens so it reads as the lead. */
@media (min-width:60rem){
  .bcard--feature{flex-direction:row;align-items:stretch}
  .bcard--feature .bcard__shot{flex:0 0 52%}
  .bcard--feature .bcard__shot img{height:100%;aspect-ratio:auto;min-height:320px}
  .bcard--feature .bcard__body{padding:2.5rem 2.75rem;justify-content:center}
  .bcard--feature .bcard__title{font-size:1.75rem}
  .bcard--feature .bcard__ex{font-size:1.0625rem}
}

.bpost__meta{margin:1.25rem 0 0;font:600 .9375rem/1 var(--sans);color:var(--muted)}
/* A post carries one group, so it wants neither the sticky header nor the
   top rule the /faq/ page uses to separate several. */
.faqgroup--flat{max-width:var(--measure)}
.faqgroup--flat > .faq__item:first-child{border-top:1px solid var(--line)}

/* --------------------------------------------------------------- booking */
.booking{margin:0}
.booking__frame{position:relative;min-height:320px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg);padding:.5rem}
.booking__frame.is-loading iframe{opacity:0}
.booking__frame iframe{display:block;width:100%;border:0}
.booking__loading{position:absolute;top:0;left:0;right:0;height:320px;margin:0;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-size:1rem;color:var(--muted)}
.booking__loading::before{content:"";width:18px;height:18px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--navy);
  animation:bookspin .8s linear infinite}
@keyframes bookspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.booking__loading::before{animation:none}}
.booking__fallback{margin:.9rem 0 0;font-size:.9375rem;line-height:1.6;color:var(--muted)}

/* ------------------------------------------------------------ contact rows */
.contactrows{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.9rem}
.contactrows li{margin:0}
.contactrows a{display:flex;align-items:center;gap:.6rem;min-height:44px;
  font-weight:600;text-decoration:none;color:var(--blue)}
.contactrows a:hover{text-decoration:underline}
.contactrows svg{flex:0 0 auto;color:var(--badge)}
.contactrows__note{margin:1.1rem 0 0;font-size:.9375rem;line-height:1.6;color:var(--muted)}
/* Two up once there is room, so the page opens on both ways to reach us
   rather than a stacked list. */
.contactrows--split{gap:1rem}
.contactrows--split a{min-height:auto;padding:1.15rem 1.35rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--sky);color:var(--navy-deep);
  align-items:center;gap:.9rem}
.contactrows--split a:hover{background:#DCE8F6;text-decoration:none}
.contactrows--split span{display:block}
.contactrows__label{display:block;font-size:.8125rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
@media (min-width:40rem){
  .contactrows--split{grid-template-columns:1fr 1fr}
}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;text-decoration:none;
  padding:1rem 1.75rem;border-radius:var(--r);font:600 1.0625rem/1 var(--sans);
  border:2px solid var(--navy);min-height:56px;cursor:pointer;text-align:center}
.btn:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.btn--sm{padding:.65rem 1.1rem;min-height:44px;font-size:.9375rem}
.btn--onnavy{background:#fff;color:var(--navy-deep);border-color:#fff}
.btn--onnavy:hover{background:var(--sky);border-color:var(--sky);color:var(--navy-deep)}
.btn--ghost{background:transparent;color:var(--navy-deep);border-color:var(--navy)}
.btn--ghost:hover{background:var(--sky);color:var(--navy-deep);border-color:var(--navy)}

/* -------------------------------------------------------------- sections */
.section{padding:clamp(3rem,7vw,5.5rem) 0}
/* Two sections that read as one block. The default pair of paddings puts
   176px between "Reach us directly" and "Pick a time" at 1440, which is a
   lot of nothing for two halves of the same question. */
.section--snug-b{padding-bottom:clamp(2rem,4vw,3rem)}
.section--snug-t{padding-top:clamp(2rem,4vw,3rem)}
/* Tighter again, for the player and the contents that index it: they are
   one unit and the section boundary between them is an artefact. */
.section--tight-b{padding-bottom:clamp(.75rem,1.5vw,1.25rem)}
.section--tight-t{padding-top:clamp(1rem,2vw,1.5rem)}
/* Pacing. Every section at identical height reads as a metronome, so the
   showcase sections breathe wider and the connective ones pull in. */
.section--roomy{padding:clamp(4rem,10vw,8rem) 0}
.section--tight{padding:clamp(2rem,4.5vw,3.25rem) 0}
.section--flush-top{padding-top:0}
.section--cream{background:var(--cream)}
.section--sky{background:var(--sky)}
.section--navy{background:var(--navy);color:#fff}
.section--navy h2,.section--navy h3{color:#fff}
.section--navy a{color:var(--sky-text)}
.section--navy a:hover{color:#fff}

.kicker{font:600 .9375rem/1.4 var(--sans);letter-spacing:.01em;
  color:var(--blue);margin:0 0 .85rem}
.section--navy .kicker{color:var(--sky-text)}
.lede{font-size:clamp(1.1875rem,2vw,1.375rem);line-height:1.6;color:var(--muted)}
.section--navy .lede{color:#DCE8F3}

/* ------------------------------------------------------------------ hero */
/* Dark hero. The photograph is the background of the band rather than an
   object sitting on it, under a flat navy overlay. The overlay is opaque
   enough that white text clears 4.5:1 even where the photograph underneath is
   pure white, so contrast does not depend on which image is used. */
.hero{position:relative;isolation:isolate;overflow:hidden;
  background:var(--navy-deep);color:#fff;padding:clamp(4.5rem,11vw,8rem) 0}
.hero__bg{position:absolute;inset:0;z-index:-1}
/* The photograph is desaturated so warm brick does not fight the navy.
   The overlay is weighted to the left, where the text is: .92 behind the
   copy falling to .50 at the right edge, so the building stays visible
   without the headline ever sitting on bare photograph. Measured against a
   pure white pixel, the worst case: .92 puts the lede at 8.40:1 where the
   old flat .78 gave 5.37:1.

   Flat on small screens, because the text spans the full width there and a
   horizontal fade would leave the end of each line on the thin side. */
.hero__bg img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.65)}
.hero__bg::after{content:"";position:absolute;inset:0;background:rgba(22,48,79,.88)}
@media (min-width:60rem){
  .hero__bg::after{background:linear-gradient(95deg,
    rgba(22,48,79,.94) 0%,
    rgba(22,48,79,.92) 40%,
    rgba(22,48,79,.74) 66%,
    rgba(22,48,79,.50) 100%)}
}
/* No measure cap here: this element already carries the container padding, so
   capping it again indented the hero a second time. The headline and lede
   carry their own caps. */
.hero__inner{position:relative}
.hero h1{color:#fff;font-size:clamp(2.5rem,5.6vw,4rem);max-width:17ch}
.hero .lede{margin-top:1.5rem;color:#DCE8F3;max-width:44ch;
  font-size:clamp(1.1875rem,2vw,1.4375rem)}
.hero__actions{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.85rem}
.hero .btn{background:#fff;color:var(--navy-deep);border-color:#fff}
.hero .btn:hover{background:var(--sky);border-color:var(--sky);color:var(--navy-deep)}
.hero .btn--ghost{background:rgba(11,28,48,.35);color:#fff;border-color:rgba(255,255,255,.7)}
.hero .btn--ghost:hover{background:rgba(11,28,48,.55);border-color:#fff;color:#fff}
.hero :focus-visible{outline-color:#fff}

.pagehead{background:var(--cream);padding:clamp(2.5rem,5vw,4rem) 0;border-bottom:1px solid var(--line)}
.pagehead .lede{margin-top:1rem;margin-bottom:0}
.pagehead h1{margin-bottom:0}
.pagehead__inner{max-width:var(--measure);margin:0 auto}

/* --------------------------------------------------- text beside an image */
.withmedia{display:grid;gap:2.5rem;align-items:center}
@media (min-width:60rem){
  .withmedia{grid-template-columns:1.35fr .65fr;gap:3.5rem;align-items:start}
}
.withmedia__text > :first-child{margin-top:0}
.withmedia__text > :last-child{margin-bottom:0}
.withmedia__fig{margin:0}
.withmedia__fig img{border-radius:var(--r-media);box-shadow:var(--shadow-md);
  display:block;width:100%;height:auto}
/* Photograph sitting beside the text rather than across the column. Taller
   crop than the letterboxed .figure--column, because a narrow column needs
   height to be worth including at all. */
.figure--side{margin:0}
.figure--side img{display:block;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;border-radius:var(--r-media);box-shadow:var(--shadow-md)}
/* Same reasoning, and it matters more here: the excavator is cropped 4:5
   at source, and forcing it into 16:9 discarded 55 percent of the frame,
   which is where the bucket is. */
@media (max-width:60rem){
  .figure--side img{aspect-ratio:auto;height:auto}
}
/* Photograph on the other side. Source order stays text first, so the
   reading order and the tab order do not change when the picture flips. */
@media (min-width:60rem){
  .withmedia--flip{grid-template-columns:.65fr 1.35fr}
  .withmedia--flip .withmedia__text{order:2}
  .withmedia--flip .withmedia__fig,.withmedia--flip .figure--side{order:1}
}

/* ------------------------------------------------------------ photography */
.figure{margin:0}
.figure img{display:block;width:100%;height:auto;border-radius:var(--r-media);box-shadow:var(--shadow-md)}
/* Letterboxed, not the full 3:2. At the column width a 3:2 photo is about
   690px tall and takes the whole screen, which is what Lance objected to. */
.figure--column{margin:0 0 1.75rem}
.figure--column img{height:clamp(10rem,18vw,15rem);object-fit:cover}
/* No crop in a single column. The letterbox exists to stop a 3:2 photo
   being 690px tall in a wide reading column; at 327px wide the same photo
   is 218px tall, so forcing it to 2.04:1 threw away a quarter of the
   picture for no reason. */
@media (max-width:48rem){
  .figure--column img{height:auto;aspect-ratio:auto}
}
.figure--band{margin:0 0 .5rem}

/* ----------------------------------------------------------------- video */
/* Width comes from .breakout on the grid; an own max-width here would cap it. */
.video{margin:0}
.video__play{display:block;width:100%;padding:0;border:0;background:var(--navy-deep);
  cursor:pointer;position:relative;border-radius:var(--r-media);overflow:hidden;line-height:0;
  box-shadow:var(--shadow-md);transition:box-shadow .2s ease}
.video__play img{display:block;width:100%;height:auto}
/* White disc on the poster, which separates from any frame underneath, with a
   shadow so it still reads over a light one. The accessible name lives on the
   button, so the icon itself is hidden from assistive tech. */
.video__badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(64px,8vw,88px);height:clamp(64px,8vw,88px);border-radius:50%;
  background:#fff;color:var(--navy-deep);box-shadow:0 6px 24px rgba(8,22,40,.38);
  transition:transform .2s ease,background .2s ease}
.video__badge svg{margin-left:4px}
.video__play:hover .video__badge{background:var(--sky);
  transform:translate(-50%,-50%) scale(1.06)}
@media (prefers-reduced-motion:reduce){.video__badge{transition:none}
  .video__play:hover .video__badge{transform:translate(-50%,-50%)}}
.video__play:hover{box-shadow:var(--shadow-lg)}
/* Pressed state. The player takes over a second to arrive and the press
   needs to register before it does, so the badge becomes a spinner and the
   poster dims rather than the whole thing sitting inert. */
.video__play.is-loading{cursor:progress}
.video__play.is-loading img{opacity:.55;transition:opacity .15s ease}
.video__play.is-loading .video__badge svg{display:none}
.video__play.is-loading .video__badge::after{content:"";display:block;
  width:26px;height:26px;border-radius:50%;border:3px solid rgba(22,48,79,.25);
  border-top-color:var(--navy-deep);animation:videospin .7s linear infinite}
@keyframes videospin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .video__play.is-loading .video__badge::after{animation:none}
}
.video__frame{aspect-ratio:16/9;border-radius:var(--r-media);overflow:hidden;background:#000;box-shadow:var(--shadow-md)}
.video__frame iframe{width:100%;height:100%;border:0;display:block}

/* --------------------------------------------------------- cross linking */
.cardgrid{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1rem}
@media (min-width:38rem){.cardgrid{grid-template-columns:1fr 1fr}}
@media (min-width:58rem){.cardgrid{grid-template-columns:repeat(4,1fr)}}
.xcard{margin:0}
.xcard a{display:flex;flex-direction:column;gap:.55rem;height:100%;
  background:var(--bg);border:1px solid rgba(16,34,56,.06);border-radius:var(--r-card);
  padding:1.6rem 1.45rem;text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease}
.xcard a:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);color:var(--ink)}
.xcard--here a{background:var(--sky);border-color:var(--sky)}
.xcard__num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--badge);color:#fff;font:600 .9375rem/1 var(--sans)}
.xcard--here .xcard__num{background:var(--navy)}
.xcard__title{font-weight:600;color:var(--navy-deep);line-height:1.3}
.xcard__blurb{font-size:.9375rem;color:var(--muted);line-height:1.5}

/* ------------------------------------------------------------------ stats */
/* Asymmetric. The twenty years is the fact that carries trust, so it leads at
   display size; the other two support rather than compete. Three equal columns
   implied three measurements of the same thing, which these are not. */
.stats{display:grid;gap:2rem;align-items:start;margin:0}
@media (min-width:46rem){.stats{grid-template-columns:1.25fr 1fr;gap:3.5rem}}
.stat{padding:0}
.stat--lead .stat__figure{font-size:clamp(3rem,6vw,4.25rem);font-weight:600;
  line-height:1;letter-spacing:-0.03em}
.stat--lead .stat__label{font-size:1.0625rem;margin-top:.75rem}
.stats__minor{display:grid;gap:0;align-self:center}
.stats__minor .stat{padding:1.25rem 0;border-top:1px solid var(--line)}
.stats__minor .stat:first-child{border-top:0;padding-top:0}
.stats__minor .stat:last-child{padding-bottom:0}
.stats__minor .stat__figure{font-family:var(--display);font-size:1.625rem;font-weight:600;
  line-height:1.15;letter-spacing:-0.02em}
.stats__minor .stat__label{font-size:1rem;margin-top:.3rem}
.stat__figure{display:block;font-family:var(--display);font-size:clamp(1.75rem,3.2vw,2.5rem);
  font-weight:500;color:var(--badge);line-height:1.05;letter-spacing:-0.02em}
.stat__label{display:block;margin-top:.5rem;font-size:.9375rem;color:var(--muted);line-height:1.5}

/* ----------------------------------------------------------------- steps */
/* Whole card is the target, but only the heading is the link, so the
   accessible name stays short instead of reading out the entire card. The
   numeral comes from a counter, so the ordered list supplies it once. */
.steps{list-style:none;margin:3rem 0 0;padding:0;display:grid;gap:1.5rem;counter-reset:step}
@media (min-width:52rem){.steps{grid-template-columns:1fr 1fr}}
.step{counter-increment:step;position:relative;margin:0;display:flex;flex-direction:column;
  background:var(--bg);border:1px solid rgba(16,34,56,.06);border-radius:var(--r-card);
  padding:2.5rem 2.25rem 2rem;box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease,transform .2s ease}
.step:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.step:focus-within{box-shadow:var(--shadow-md)}
.step__num{position:absolute;top:1.1rem;right:1.6rem;font-family:var(--display);
  font-size:4rem;font-weight:600;line-height:1;letter-spacing:-0.04em;color:#CBE0F2}
.step__num::before{content:"0" counter(step)}
/* No position here: the heading link's ::after overlay must resolve against
   .step so it covers the whole card. A positioned h3 traps it.
   Padding clears the numeral rather than a character cap, which forced the
   longest title onto three lines while a short one sat on one. */
.step h3{margin:0 0 .85rem;font-size:1.3125rem;padding-right:4.25rem;min-height:2.6em}
.step h3 a{color:var(--navy-deep);text-decoration:none}
.step h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.step:hover h3 a{color:var(--blue)}
.step p{color:var(--muted);font-size:1rem;margin:0 0 1.75rem;line-height:1.65}
/* `.step p` is (0,1,1) and defined above, so a single class loses to it.
   Same trap as the nav CTA and the bar Contact button. */
.step p.step__hook{margin:0 0 .85rem;font:600 1.0625rem/1.45 var(--sans);
  color:var(--navy-deep);text-wrap:balance}
.step__go{margin-top:auto;display:inline-flex;align-items:center;gap:.6rem;
  font-weight:600;color:var(--blue);font-size:1rem}
.step__go svg{transition:transform .2s ease}
.step:hover .step__go svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  .step,.step__go svg{transition:none}
  .step:hover{transform:none}
}

/* Cards that lead with the strategy's video poster. The poster is a link
   through to the page, not a player: the video itself stays on the deeper
   page so the home page does not carry an hour of embeds.

   The thumbnail is positioned, but it is not an ancestor of the heading
   link, so the a::after overlay still resolves against .step and still
   covers the whole card. It also sits below the overlay's z-index:1, which
   is what keeps the poster clickable rather than inert. Both are measured
   in the build check, because this is the second time this overlay has
   been broken by a positioned child. */
.step--media{padding-top:0;overflow:hidden}
/* The numeral sits in the text, under the poster, never on the poster
   itself. It is the same badge as .xcard__num on the strategy pages,
   because it numbers the same four things. In normal flow rather than
   absolutely positioned: the poster height is fluid, so there is no fixed
   offset that would clear it, and a positioned wrapper around the heading
   would capture the a::after overlay and shrink it to the text block. */
.step--media h3{padding-right:0;min-height:0}
.step__no{align-self:flex-start;display:inline-flex;align-items:center;
  justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--badge);color:#fff;font:600 .9375rem/1 var(--sans);
  margin:0 0 .9rem}
.step__no::before{content:counter(step)}
.step__thumb{position:relative;margin:0 -2.25rem 1.5rem;aspect-ratio:16/9;
  overflow:hidden;background:var(--navy-deep)}
.step__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.step__badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;color:var(--navy-deep);
  box-shadow:0 2px 10px rgba(10,22,38,.28);transition:transform .2s ease}
.step:hover .step__badge{transform:translate(-50%,-50%) scale(1.07)}
@media (prefers-reduced-motion:reduce){
  .step__badge{transition:none}
  .step:hover .step__badge{transform:translate(-50%,-50%)}
}

/* --------------------------------------------------- strategy page hero */
/* Option 1: headline, what the strategy gets you and the call to action on
   one side, the player on the other. The video is the thing the hero is
   offering rather than a block below it, and nothing needs a photograph,
   which matters because /tax-scholarships/ has none. */
.shero{background:var(--navy-deep);color:#fff;
  padding:clamp(2.5rem,5vw,3.5rem) 0 clamp(3rem,6vw,4.25rem)}
.shero__grid{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem;
  display:grid;gap:2.5rem;align-items:center}
@media (min-width:62rem){.shero__grid{grid-template-columns:1fr 1.05fr;gap:4rem}}
/* No media column to balance, so the copy takes the full band. The h1 and
   standfirst keep their own ch caps, which stops the line running long. */
@media (min-width:62rem){.shero--solo .shero__grid{grid-template-columns:1fr}}
/* No media column to sit beside, so the copy runs the full width of the
   band and breaks only where it has to. The ch caps that used to be here
   were inherited from the two column hero and forced three short lines out
   of a headline that fits in one or two. */
/* Doubled class, not a single one. `.shero h1` sets max-width:17ch at the
   same specificity and is defined further down the sheet, so a lone
   `.shero--solo h1` loses to it and the headline stays capped at 505px.
   Same trap as the nav CTA, the bar Contact button and the card hook. */
.shero.shero--solo h1{max-width:none}
.shero.shero--solo .shero__stand{max-width:none;margin-bottom:0}
.shero__kick{font:500 .9375rem/1 var(--sans);letter-spacing:.01em;
  color:var(--sky-text);margin:0 0 1rem}
.shero h1{color:#fff;font-size:clamp(1.9rem,4vw,2.875rem);line-height:1.1;
  margin:0 0 1rem;max-width:17ch}
.shero__stand{color:#DCE8F3;font-size:clamp(1.0625rem,1.6vw,1.1875rem);line-height:1.6;
  margin:0 0 1.5rem;max-width:44ch}
.shero__media .video{margin:0;border-radius:18px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.4)}

/* -------------------------------------------------- strategy page modules */
/* Numbered mechanism cards. The body used to be one 400 word run with the
   steps buried inside it as h3s; this makes the sequence scannable. */
.flow{list-style:none;margin:2.75rem 0 0;padding:0;counter-reset:flow;display:grid;gap:2.25rem}
@media (min-width:56rem){.flow{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.flow--two{grid-template-columns:1fr}
@media (min-width:56rem){.flow--two{grid-template-columns:1fr 1fr}}
.flow li{counter-increment:flow;position:relative;padding-top:3.5rem;background:none;
  border:0;box-shadow:none}
.flow li::before{content:counter(flow);position:absolute;top:0;left:0;
  width:2.75rem;height:2.75rem;border-radius:50%;background:var(--navy-deep);color:#fff;
  display:grid;place-items:center;font:600 1.0625rem/1 var(--sans);z-index:1;margin:0}
/* The rule that joins the markers. Only between them, so the last one ends. */
@media (min-width:56rem){
  .flow li::after{content:"";position:absolute;top:1.375rem;left:2.75rem;right:-1.5rem;
    height:2px;background:var(--line)}
  .flow li:last-child::after{display:none}
}
.flow h3{font-size:1.125rem;margin:0 0 .5rem;line-height:1.35}
.flow p{font-size:1rem;color:var(--muted);margin:0;line-height:1.6}

/* Who does what. The division of labour is the most common question on the
   call, so it gets a module instead of a sentence. */
.splitcols{display:grid;gap:1.5rem;margin-top:2rem}
@media (min-width:52rem){.splitcols{grid-template-columns:1fr 1fr}}
@media (min-width:60rem){.splitcols--three{grid-template-columns:repeat(3,1fr)}}
.splitcol{border-radius:16px;padding:1.9rem 2.1rem;background:var(--bg);
  border:1px solid rgba(16,34,56,.07);box-shadow:var(--shadow-sm)}
.splitcol--ours{background:var(--navy-deep);border-color:transparent;color:#fff}
.splitcol h3{font-size:1.1875rem;margin:0 0 1rem}
.splitcol--ours h3{color:#fff}
.splitcol ul{list-style:none;margin:0;padding:0}
.splitcol li{display:flex;gap:.7rem;margin-bottom:.7rem;font-size:1rem;line-height:1.55;
  color:var(--muted)}
.splitcol li:last-child{margin-bottom:0}
.splitcol li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--badge);margin-top:.55rem}
.splitcol--ours li{color:#DCE8F3}
.splitcol--ours li::before{background:var(--sky-text)}

/* A call to action partway down, so the only one is not at the very bottom. */
.midcta{background:var(--sky);padding:clamp(2.75rem,6vw,4.25rem) 0}
.midcta__in{max-width:44rem;margin:0 auto;padding:0 1.5rem;text-align:center}
.midcta p{margin:0 0 1.6rem;font-family:var(--display);font-weight:500;color:var(--navy-deep);
  font-size:clamp(1.5rem,3.2vw,2.125rem);line-height:1.25;text-wrap:balance}

/* Highlighted clause inside ordinary body copy, instead of lifting the
   sentence out into a quote block. The gradient starts high so it reads as
   a marker stroke; at 58 percent it looked like an underline and could be
   mistaken for a link. clone keeps the stroke intact when it wraps. */
/* Underlined clause inside ordinary body copy. An underline is the link
   signal, so this is deliberately not a link: the text stays navy rather
   than link blue, and the rule is thicker and set lower than the 3px
   offset links use. Colour alone is never the only difference. */
.hl{color:var(--navy-deep);font-weight:500;
  text-decoration:underline;
  text-decoration-color:var(--badge);
  text-decoration-thickness:2px;
  text-underline-offset:.22em;
  text-decoration-skip-ink:auto}
.section--navy .hl{color:#fff;text-decoration-color:var(--sky-text)}

/* The closing statement, attributed. It was a centred line floating on navy
   with nothing behind it; set left with a rule and a name under it, it reads
   as the founder saying something rather than a slogan. The pages are
   already written in his first person, so the attribution makes explicit
   what the page body already asserts. */
.stmt{background:var(--navy-deep);color:#fff;padding:clamp(3rem,7vw,5rem) 0}
/* Same container as every other section, so the rule lines up with the
   left edge of the headings above it instead of sitting inset. */
.stmt__in{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem;display:grid;gap:1.75rem;
  grid-template-columns:4px minmax(0,1fr);align-items:stretch}
.stmt__rule{background:var(--sky-text);border-radius:2px}
.stmt blockquote{margin:0}
.stmt p{margin:0;font-family:var(--display);font-weight:500;color:#fff;
  font-size:clamp(1.4rem,3.2vw,2.125rem);line-height:1.3;letter-spacing:-.01em;
  text-wrap:balance}
.stmt cite{display:block;margin-top:1.4rem;font-style:normal;color:#9FB8CE;
  font-size:.9375rem;font-family:var(--sans)}
@media (max-width:40rem){.stmt__in{gap:1.1rem}}

/* Before and after pair. Used where a section's point is a change: the old
   way on the left, what replaced it on the right, so the contrast is the
   first thing read rather than a conclusion underneath a reference table. */
.beforeafter{display:grid;gap:1.25rem;margin:2rem 0 0}
@media (min-width:48rem){.beforeafter{grid-template-columns:1fr 1fr}}
.ba{border-radius:16px;padding:1.75rem 2rem;border:1px solid rgba(16,34,56,.08);
  background:var(--bg);box-shadow:var(--shadow-sm)}
.ba--new{background:var(--navy-deep);color:#fff;border-color:transparent;box-shadow:none}
.ba h3{font-size:1rem;margin:0 0 .6rem;font-weight:600;color:var(--muted)}
.ba--new h3{color:var(--sky-text)}
.ba strong{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(1.4rem,2.8vw,1.875rem);line-height:1.15;color:var(--navy-deep);
  margin-bottom:.5rem}
.ba--new strong{color:#fff}
.ba p{margin:0;font-size:1rem;line-height:1.6;color:var(--muted)}
.ba--new p{color:#C6D7E8}

/* Reference detail, available but not leading. */
details.ref{margin-top:1.75rem;border-top:1px solid var(--line);padding-top:.25rem}
details.ref > summary{cursor:pointer;font-weight:600;color:var(--blue);list-style:none;
  padding:.7rem 0;min-height:44px;display:flex;align-items:center;box-sizing:border-box}
details.ref > summary::-webkit-details-marker{display:none}
details.ref > summary::before{content:"+";margin-right:.6rem;font-weight:600}
details.ref[open] > summary::before{content:"−"}
details.ref > summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px;
  border-radius:3px}

/* Safety net for tinted sections landing next to each other. The mid page
   call to action is sky, so a sky section following it merged into one
   undifferentiated block with no edge between them. Sections are reordered
   often enough that this will happen again; a hairline keeps the seam
   visible without changing either colour. */
.midcta + .section--sky,
.section--sky + .section--sky,
.section--cream + .section--cream,
.section--cream + .midcta,
.section--navy + .section--navy{border-top:1px solid rgba(16,34,56,.10)}
.section--navy + .section--navy{border-top-color:rgba(255,255,255,.14)}

/* A single number carrying a section, instead of two plain paragraphs. */
.figline{display:grid;gap:2rem;align-items:center;margin-top:2rem}
@media (min-width:52rem){.figline{grid-template-columns:auto minmax(0,1fr);gap:3.5rem}}
.figline__n{font-family:var(--display);font-weight:600;font-size:clamp(3.25rem,7.5vw,5.5rem);
  line-height:.9;color:var(--navy-deep);letter-spacing:-.03em;margin:0}
.figline__n span{display:block;font-family:var(--sans);font-size:.9375rem;font-weight:500;
  color:var(--muted);letter-spacing:0;margin-top:.65rem}
.figline p{margin:0 0 1rem}
.figline p:last-child{margin-bottom:0}

/* Let the browser even out the line lengths on the short display lines, so
   they stop breaking one word onto a line of their own. */
h1,h2,.pull p,.midcta p,.lede{text-wrap:balance}
.pull--feature em,.midcta em{font-style:normal;color:var(--blue)}

/* ----------------------------------------------- secondary page layout B */
/* Centred page head. Only the pages that opt in: the strategy pages keep
   the left aligned head so they still read as a set with each other. */
.pagehead--center .pagehead__inner{text-align:center}
.pagehead--center .lede{margin-left:auto;margin-right:auto;max-width:44rem}
/* One standfirst is meant to sit on a single line on desktop. The 44rem cap
   is what forces it to wrap, so it is lifted once there is room; no nowrap,
   so a narrower viewport or a different font metric still wraps rather than
   overflowing. Measured: the line is about 984px at the 22px ceiling, and
   the wrap gives 912px at 60rem rising with the viewport, while the font
   itself scales on 2vw below 1100px, so the two stay in step. */


/* The quote that sits in its own band between two sections. No rule down
   the side: it is the whole band, so it does not need to announce itself. */
/* Specificity, not order: the base .pull rule is defined further down the
   sheet and would otherwise win back the left rule and the padding. */
.pull.pull--feature{margin:0 auto;padding:0;border-left:0;max-width:52rem;text-align:center}
.pull.pull--feature p{font-size:clamp(1.5rem,3.2vw,2.125rem);line-height:1.32;max-width:none}

/* Sticky action bar. Sits last inside main, so it rides the bottom of the
   viewport while the page is in view and scrolls away at the footer rather
   than covering it. Deliberately not a landmark: it lives inside <main>,
   and a nested complementary role fails landmark-complementary-is-top-level. */
.actionbar{position:sticky;bottom:0;z-index:5;background:var(--navy-deep);
  color:#fff;padding:.85rem 0;box-shadow:0 -2px 14px rgba(10,22,38,.18)}
.actionbar__in{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem;display:flex;
  align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.actionbar strong{font-size:1rem;font-weight:600}
.actionbar span{color:#C6D7E8;font-size:.9375rem}
.actionbar .btn{white-space:nowrap}
/* On a phone the sentence wrapped to three lines and the bar grew to 178px,
   a fifth of the viewport, permanently covering what was being read. The
   button says what it does, so the copy goes and the button fills the bar. */
@media (max-width:40rem){
  .actionbar{padding:.6rem 0}
  .actionbar p{display:none}
  .actionbar__in{padding:0 1rem}
  .actionbar .btn{width:100%;text-align:center;padding:.8rem 1rem;font-size:1rem}
}

/* ------------------------------------------------- secondary layout rail */
/* Used on the FAQ, where nobody reads top to bottom and a persistent list
   of what is on the page earns its width. */
/* The sticky rail needs a column that is as tall as the row, with the
   sticky element inside it. A sticky grid item with align-items:start
   shrinks to its own content height, which leaves it no range to travel
   and it simply scrolls away. */
.railgrid{display:grid;gap:2.5rem;max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
@media (min-width:62rem){.railgrid{grid-template-columns:19rem minmax(0,1fr);gap:4.5rem}}
/* The rail is one panel, not three stacked pieces on white. Everything in
   it sits on sky: heading 11.72:1, body 13.74:1, the label 6.30:1 and the
   links 5.30:1, so the whole panel clears AA comfortably. */
.rail{background:var(--sky);border-radius:18px;padding:1.75rem 1.6rem}
.rail h1{font-size:clamp(1.625rem,2.8vw,1.9375rem);line-height:1.15;margin:0 0 .75rem}
.rail__stand{color:var(--muted);font-size:1rem;line-height:1.55;margin:0 0 1.4rem}
@media (min-width:62rem){.rail{position:sticky;top:5.5rem}}
.railnav{border-top:1px solid rgba(22,48,79,.16);padding-top:1.1rem;margin-bottom:1.4rem}
.railnav p{font:600 .9375rem/1 var(--sans);letter-spacing:.01em;
  color:var(--muted);margin:0 0 .6rem}
.railnav ol{list-style:none;margin:0;padding:0;counter-reset:rail}
.railnav li{counter-increment:rail;margin-bottom:.1rem}
.railnav a{display:flex;gap:.7rem;align-items:baseline;color:var(--navy-deep);
  text-decoration:none;font-size:.9375rem;line-height:1.45;padding:.5rem 0;min-height:44px;
  box-sizing:border-box}
.railnav a::before{content:counter(rail);color:var(--blue);font-weight:600;flex:0 0 auto}
.railnav a:hover{color:var(--blue);text-decoration:underline}
/* No nested box: the panel is already sky, so the call to action is divided
   by a rule rather than another tinted card inside a tinted card. */
.railcta{border-top:1px solid rgba(22,48,79,.16);padding-top:1.25rem}
.railcta p{margin:0 0 .9rem;font-size:.9375rem;line-height:1.55;color:var(--navy-deep)}
.railcta .btn{width:100%;text-align:center;font-size:.9375rem;padding:.8rem 1rem}
/* The group heading pins while its own questions scroll past it, so you can
   always see which of the five you are reading. It was 22px against a 19px
   question, three pixels and the same colour and weight, so the five themes
   read as one list of fifteen.

   It sticks at 5.5rem, the same offset the rail uses, because the masthead
   is sticky at top:0 and roughly that tall. z-index stays below the
   masthead's 50 so it slides under rather than over it. */
.faqgroup{margin-bottom:4rem}
.faqgroup:last-child{margin-bottom:0}
.faqgroup > h2{position:sticky;top:5.5rem;z-index:3;background:var(--bg);
  font-size:clamp(1.5rem,2.4vw,1.625rem);line-height:1.25;margin:0;
  padding:.9rem 0 .6rem;border-bottom:2px solid var(--navy-deep);
  scroll-margin-top:5.5rem}
/* The notes under each group heading are gone; they restated the questions
   beneath them, and the sticky heading now does the wayfinding they were
   helping with. They carried the gap down to the first question, so the
   first item takes it instead. */
/* h2 is the first child, so :first-child on the item never matched. */
.faqgroup > h2 + .faq__item{margin-top:1.4rem}

/* ---------------------------------------------------------- social proof */
/* Styled ahead of having any. See TESTIMONIALS in core.py: the band renders
   as nothing until real, compliance-reviewed quotes exist. */
/* Option C, chosen 2026-11-09. Columns fill downwards and the cards size to
   their content, so a six word quote takes six words of space instead of
   stretching to match a forty word neighbour. */
.quotes{margin-top:2.5rem;column-gap:1.5rem}
@media (min-width:52rem){.quotes{column-count:2}
@media (min-width:68rem){.quotes{column-count:3;column-gap:1.75rem}}}
.quote{margin:0;background:var(--bg);border:1px solid rgba(16,34,56,.06);
  border-radius:var(--r-card);padding:2rem 2.25rem;box-shadow:var(--shadow-sm)}
.quote{break-inside:avoid;margin:0 0 1.5rem;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-card);padding:1.4rem 1.75rem 1.6rem}
.quote::before{content:"";display:block;width:26px;height:20px;margin-bottom:.85rem;
  background:var(--badge);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 20"><path d="M0 20V11C0 4.9 3.6.8 9.7 0l.9 3.6C7 4.5 5.2 6.6 5.2 9.3H9.6V20Zm16.4 0V11c0-6.1 3.6-10.2 9.7-11l.9 3.6c-3.6.9-5.4 3-5.4 5.7H26V20Z"/></svg>') no-repeat center/contain;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 20"><path d="M0 20V11C0 4.9 3.6.8 9.7 0l.9 3.6C7 4.5 5.2 6.6 5.2 9.3H9.6V20Zm16.4 0V11c0-6.1 3.6-10.2 9.7-11l.9 3.6c-3.6.9-5.4 3-5.4 5.7H26V20Z"/></svg>') no-repeat center/contain}
.quotes--one{column-count:1;max-width:var(--measure)}
.quote blockquote{margin:0}
.quote blockquote p{margin:0;font-size:1.0625rem;line-height:1.65;color:var(--ink);
  text-wrap:pretty}
.quote figcaption{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--line);
  font-weight:600;color:var(--navy-deep);font-size:.9375rem}
.quote figcaption span{display:block;font-weight:400;color:var(--muted);margin-top:.2rem}

/* ------------------------------------------------------- continue reading */
.readon{margin:2.5rem 0 0;padding-top:1.75rem;border-top:1px solid var(--line)}
.readon a{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;
  font-family:var(--display);font-weight:600;font-size:clamp(1.125rem,2vw,1.375rem);
  letter-spacing:-0.01em;color:var(--navy-deep);text-decoration:none;line-height:1.3}
.readon a:hover{color:var(--blue)}
.readon a:hover .readon__arrow{transform:translateX(5px)}
.readon__arrow{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--sky);color:var(--navy-deep);
  transition:transform .2s ease}
.readon a:hover .readon__arrow{background:var(--blue);color:#fff}
@media (prefers-reduced-motion:reduce){.readon__arrow{transition:none}}

/* ------------------------------------------------------------ pull quote */
/* Centred statement, no rule down the side. The blue bar read as a blockquote
   from a different document; this is the line the section is actually about,
   so it is set as a statement and the phrase that matters takes the accent. */
.pull{margin:2.75rem auto;padding:0;border-left:0;max-width:40rem;text-align:center}
.pull p{font-family:var(--display);font-size:clamp(1.375rem,2.8vw,1.875rem);
  line-height:1.32;color:var(--navy-deep);font-weight:500;margin:0;text-wrap:balance}
.pull em{font-style:normal;color:var(--blue)}
.section--navy .pull p{color:#fff}
.section--navy .pull em{color:var(--sky-text)}

/* --------------------------------------------------------------- callout */
.note{background:var(--sky);border-radius:var(--r-card);padding:2rem;margin:2.5rem 0}
.note > :last-child{margin-bottom:0}
.note h2,.note h3{margin-top:0;font-family:var(--sans);font-weight:600;font-size:1.125rem;
  letter-spacing:0}
.section--sky .note{background:var(--bg)}

/* ------------------------------------------------------------------ list */
.ticks{list-style:none;padding:0}
.ticks li{position:relative;padding-left:1.9rem;margin-bottom:.85rem}
.ticks li::before{content:"";position:absolute;left:0;top:.65rem;width:10px;height:10px;
  border-radius:50%;background:var(--badge)}

/* ----------------------------------------------------------------- table */
.table-scroll{overflow-x:auto;margin:2rem 0;border:1px solid rgba(16,34,56,.06);
  border-radius:var(--r-card);box-shadow:var(--shadow-sm);background:var(--bg)}
.table-scroll:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
table{border-collapse:collapse;width:100%;font-size:1rem;min-width:30rem}
caption{text-align:left;color:var(--muted);font-size:.9375rem;padding:1rem 1.25rem .25rem}
th,td{text-align:left;padding:.85rem 1.25rem;border-bottom:1px solid var(--line)}
tr:last-child th,tr:last-child td{border-bottom:0}
thead th{background:var(--cream);font-weight:600;color:var(--navy-deep)}
tbody th{font-weight:500;color:var(--ink)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------- cta */
.cta{background:var(--navy);color:#fff;padding:clamp(3rem,7vw,5rem) 0}
.cta h2{color:#fff;margin-bottom:1rem}
.cta__kicker{font:600 .9375rem/1.4 var(--sans);letter-spacing:.01em;
  color:var(--sky-text);margin:0 0 .85rem}
.cta__body{color:#DCE8F3;max-width:42rem;font-size:1.0625rem;margin-bottom:0}
.cta__action{margin:1.75rem 0 0}
.cta__grid{display:grid;gap:1.5rem}
@media (min-width:60rem){
  .cta__grid{grid-template-columns:minmax(0,42rem) auto;justify-content:space-between;
    align-items:center;gap:3rem}
  .cta__action{margin:0}
}

/* ------------------------------------------------------------------- faq */
.faq__item{border-bottom:1px solid var(--line)}
/* Dead since the groups were introduced: h2 is the group's first child,
   so this never matched. The group heading's own rule does this job. */
.faqgroup > h2 + .faq__item{border-top:0}
.faq__item > summary{list-style:none;cursor:pointer;padding:1.5rem 3rem 1.5rem 0;
  position:relative;display:block}
.faq__item > summary::-webkit-details-marker{display:none}
.faq__item summary h2,.faq__item summary h3{font-family:var(--sans);font-size:1.1875rem;font-weight:600;
  color:var(--navy-deep);margin:0;letter-spacing:0;line-height:1.45;display:inline}
.faq__item > summary:hover h2,.faq__item > summary:hover h3{color:var(--blue)}
.faq__item > summary:focus-visible{outline:3px solid var(--navy);outline-offset:-3px;border-radius:2px}
.faq__sign{position:absolute;right:0;top:1.55rem;width:22px;height:22px;flex:0 0 auto}
.faq__sign::before,.faq__sign::after{content:"";position:absolute;background:var(--blue);
  border-radius:2px;transition:transform .2s ease}
.faq__sign::before{top:10px;left:0;width:22px;height:2px}
.faq__sign::after{left:10px;top:0;width:2px;height:22px}
.faq__item[open] .faq__sign::after{transform:scaleY(0)}
.faq__item p{color:var(--muted);margin:0;padding:0 3rem 1.75rem 0}
@media (prefers-reduced-motion:reduce){.faq__sign::before,.faq__sign::after{transition:none}}

/* ---------------------------------------------------------------- footer */
.sitefoot{background:var(--navy-deep);color:#C9D7E6;padding:clamp(2.5rem,5vw,4rem) 0 2rem;font-size:1rem}
.sitefoot a{color:#fff;text-decoration:none}
.sitefoot a:hover{text-decoration:underline;color:#fff}
.sitefoot__top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;
  align-items:center;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.22)}
.sitefoot__top > img{flex:0 0 auto}
.sitefoot__top > nav{flex:1 1 20rem}
.sitefoot__logo{width:180px;height:auto;display:block}
.sitefoot__nav ul,.sitefoot__bottom nav ul{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.25rem 1.75rem}
.sitefoot__nav a,.sitefoot__bottom nav a{display:inline-flex;align-items:center;min-height:44px}
/* One column running the full container width, as asked. The line is long at
   this width, so the leading is opened up a little to keep it trackable. */
.sitefoot__disclaimer{font-size:.875rem;line-height:1.85;color:#AFC2D6;
  padding:1.75rem 0;border-bottom:1px solid rgba(255,255,255,.22);margin:0}
/* Two rows. Three items competing for one row got crowded once the container
   narrowed, so the legal links sit on their own line and the copyright and
   credit share the one below. */
.sitefoot__bottom{padding-top:1.75rem;display:grid;gap:1.1rem}
.sitefoot__bottom nav a{font-size:.9375rem}
.sitefoot__meta{display:flex;flex-wrap:wrap;gap:.35rem 2rem;align-items:baseline;
  justify-content:space-between;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14)}
.sitefoot__meta p{margin:0;font-size:.875rem}
.sitefoot__credit{font-size:.875rem;color:#AFC2D6}
.sitefoot__credit a{color:#fff;text-decoration:underline}

/* Footer on small screens. Seven links at desktop gaps wrapped raggedly in a
   272px column, so they become full-width rows with dividers: predictable
   edges and a proper tap target each. The copyright and credit stop being
   pushed apart, and the disclaimer tightens, since at 320px it ran to
   seventeen lines. */
@media (max-width:48rem){
  .sitefoot__top{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .sitefoot__nav{width:100%}
  .sitefoot__nav ul,.sitefoot__bottom nav ul{flex-direction:column;gap:0;width:100%}
  .sitefoot__nav a,.sitefoot__bottom nav a{width:100%;min-height:48px;margin:0;
    border-bottom:1px solid rgba(255,255,255,.12)}
  .sitefoot__nav li:last-child a,.sitefoot__bottom nav li:last-child a{border-bottom:0}
  .sitefoot__disclaimer{font-size:.8125rem;line-height:1.7;padding:1.5rem 0}
  .sitefoot__meta{justify-content:flex-start;gap:.5rem;flex-direction:column}
  /* The legal links are full-width rows down here, so the contact details
     stack under them rather than trying to share the line. */
  .sitefoot__legal{display:block}
  .sitefoot__contact{margin-top:1rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}