/* ===================================================================
     RGM Pay: palette taken directly from the logo
     brand amber #FAA32F   ·   brand grey #5E5F61
     =================================================================== */
  :root{
    --brand:#FAA32F;          /* logo amber: fills, marks, rules */
    /* One orange for the whole site: the logo orange, as used on the headings. */
    --brand-ink:#FAA32F;
    --brand-display:#FAA32F;
    --on-brand:#26241E;       /* ink that sits on the amber */
    --brand-soft:#FDEDD8;

    --bg:#F7F3EA;             /* warm cream ground */
    --bg-raised:#F1ECDF;
    --bg-sunk:#EAE4D3;
    --text:#26241E;
    --text-muted:#5C584F;     /* the logo's grey, warmed to sit on cream */
    --border:#DCD5C2;
    --hairline:#E7E1D2;

    --good:#2C7A55;
    --good-soft:#E2EFE4;
    --focus:#1C6FE0;

    --logo-lock: url("logo-lock.png");
    --logo-mark: url("logo-mark.png");
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --brand:#FAA32F;
      --brand-ink:#FAA32F;
      --brand-display:#FAA32F;
      --on-brand:#1A1206;
      --brand-soft:#2E2415;

      --bg:#191712;
      --bg-raised:#231F18;
      --bg-sunk:#12100B;
      --text:#F1EDE4;
      --text-muted:#A8A296;
      --border:#34302A;
      --hairline:#2A2721;

      --good:#62C295;
      --good-soft:#16301C;
      --focus:#7EB2FF;

      --logo-lock: url("logo-lock-dark.png");
      --logo-mark: url("logo-mark-dark.png");
    }
  }
  :root[data-theme="dark"]{
    --brand:#FAA32F;
    --brand-ink:#FAA32F;
    --brand-display:#FAA32F;
    --on-brand:#1A1206;
    --brand-soft:#2E2415;

    --bg:#191712;
    --bg-raised:#231F18;
    --bg-sunk:#12100B;
    --text:#F1EDE4;
    --text-muted:#A8A296;
    --border:#34302A;
    --hairline:#2A2721;

    --good:#62C295;
    --good-soft:#16301C;
    --focus:#7EB2FF;

    --logo-lock: url("logo-lock-dark.png");
    --logo-mark: url("logo-mark-dark.png");
  }

  /* ============ Base ============ */
  *,*::before,*::after{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:16px;
    line-height:1.58;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,h4{
    margin:0;
    font-family:"Archivo","Public Sans",sans-serif;
    font-variation-settings:"wdth" 112;
    text-wrap:balance;
    color:var(--text);
  }
  h1,h2{
    text-transform:uppercase;
    font-weight:800;
    letter-spacing:-0.005em;
    line-height:1.02;
    color:var(--brand-display);
  }
  p{ margin:0; }
  a{ color:inherit; }
  ul{ margin:0; padding:0; list-style:none; }

  /* the tagline device from the logo: wide, letterspaced caps */
  .eyebrow{
    font-family:"Archivo",sans-serif;
    font-variation-settings:"wdth" 108;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.2em;
    font-size:0.7rem;
    color:var(--text-muted);
  }
  .eyebrow.quiet{ color:var(--text-muted); }

  .num{
    font-family:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
    font-variant-numeric:tabular-nums;
    font-weight:600;
  }

  /* Links use the one orange as an underline rather than as text colour,
     the logo orange is too light to read at body size on the cream ground. */
  main a:not(.btn):not(.choice):not(.logo):not(.payslip-thumb){
    color:inherit;
    text-decoration:underline;
    text-decoration-color:var(--brand);
    text-decoration-thickness:2px;
    text-underline-offset:3px;
  }
  main a:not(.btn):not(.choice):not(.logo):not(.payslip-thumb):hover{ text-decoration-thickness:3px; }

  a:focus-visible,button:focus-visible,summary:focus-visible{
    outline:2px solid var(--focus);
    outline-offset:3px;
  }
  ::selection{ background:var(--brand-soft); color:var(--text); }

  .wrap{ max-width:1140px; margin:0 auto; padding:0 28px; }

  /* ============ Logo ============ */
  .logo{
    display:block;
    background-repeat:no-repeat;
    background-position:left center;
    background-size:contain;
    flex:none;
  }
  /* wordmark only where the strapline would be illegible */
  .logo-nav{ background-image:var(--logo-mark); width:129px; height:26px; }
  /* full lockup, strapline and all, where there is room for it */
  .logo-foot{ background-image:var(--logo-lock); width:135px; height:34px; }
  .logo-cta{ background-image:var(--logo-lock); width:175px; height:44px; margin-bottom:22px; }
  @media (max-width:520px){ .logo-cta{ width:139px; height:35px; } }



  /* ============ Fill-me placeholders ============ */
  .todo{
    background:var(--brand-soft);
    border-bottom:2px dotted var(--brand-ink);
    color:var(--brand-ink);
    font-weight:700;
    padding:0 4px;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
  }

  /* ============ Joint & several liability ============ */
  .jsl{ background:var(--bg-sunk); }
  .jsl-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:start; }
  .jsl-lead{ font-size:1.05rem; margin-bottom:18px; }
  .jsl-body p + p{ margin-top:14px; }
  .jsl-body p{ color:var(--text-muted); font-size:0.96rem; }
  .jsl-date{
    display:inline-flex; align-items:baseline; gap:10px;
    background:var(--brand-soft); border-left:3px solid var(--brand);
    padding:10px 16px; margin-bottom:22px;
  }
  .jsl-date b{
    font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
    font-size:1.05rem; color:var(--brand-ink);
  }
  .jsl-date span{ font-size:0.86rem; color:var(--text-muted); }
  .checklist{ border:1px solid var(--border); background:var(--bg); }
  .checklist h2, .checklist h3{
    font-size:0.95rem; font-weight:700; padding:16px 20px;
    border-bottom:1px solid var(--border); margin:0;
    font-variation-settings:"wdth" 104;
  }
  .checklist li{
    display:grid; grid-template-columns:auto 1fr; gap:12px;
    padding:14px 20px; border-bottom:1px solid var(--hairline);
    font-size:0.9rem;
  }
  .checklist li:last-child{ border-bottom:none; }
  .checklist .q{ color:var(--text); }
  .checklist .a{ margin-top:5px; font-size:0.84rem; color:var(--text-muted); display:block; }
  /* A closing note that belongs to the whole list, not to its last row. Inside
     the last <li> it read as a description of that row. */
  .checklist-foot{
    margin:0; padding:14px 20px;
    border-top:1px solid var(--border);
    font-size:0.84rem; color:var(--text-muted);
  }
  .checklist .mark{
    width:17px; height:17px; margin-top:3px; flex:none; border-radius:2px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:0.62rem; font-weight:700;
    background:var(--good-soft); color:var(--good);
  }
  @media (max-width:880px){ .jsl-grid{ grid-template-columns:1fr; gap:34px; } }

  /* ============ Who you're dealing with ============ */
  .who{ display:grid; grid-template-columns:auto 1fr; gap:36px; align-items:start; }
  /* Sized for the real headshot, not for the placeholder: 240px square sits
     level with the bio beside it, so dropping an <img> in here changes nothing
     about the layout. Swap the div for:
       <img class="who-avatar" src="rizwan.jpg" alt="Rizwan Mahmood" width="240" height="240">
     and object-fit below crops it rather than squashing it. */
  .who-avatar{
    width:240px; height:240px; flex:none; border-radius:2px;
    background:var(--bg-sunk); border:1px dashed var(--border);
    object-fit:cover; object-position:center top;
    display:flex; align-items:center; justify-content:center;
    font-family:"IBM Plex Mono",monospace; font-size:0.72rem; letter-spacing:0.08em;
    color:var(--text-muted); text-align:center; line-height:1.6; padding:8px;
  }
  img.who-avatar{ border-style:solid; }
  .who-body p{ color:var(--text-muted); font-size:0.96rem; max-width:72ch; }
  .who-body p + p{ margin-top:12px; }
  .who-name{ font-size:1.15rem; font-weight:700; color:var(--text); }
  .who-role{ font-size:0.84rem; color:var(--text-muted); margin-top:2px; margin-bottom:14px; }
  /* Narrower than this the photo would leave too little room for the bio, so
     it stacks above it at a size that still reads as a portrait. */
  @media (max-width:780px){ .who{ grid-template-columns:1fr; gap:20px; }
    .who-avatar{ width:180px; height:180px; } }

  /* ---- About us: the story, then the person behind it ---- */
  .about-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:start; }
  .about-lead{ max-width:60ch; }
  .about-lead p{ color:var(--text-muted); margin-bottom:18px; }
  .about-lead p:first-child{ color:var(--text); font-size:1.05rem; }
  .about-lead p:last-child{ margin-bottom:0; }
  .about-facts{ margin:0; border:1px solid var(--border); background:var(--bg-raised); }
  .about-facts > div{ padding:16px 20px; border-bottom:1px solid var(--hairline); }
  .about-facts > div:last-child{ border-bottom:none; }
  .about-facts dt{
    font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 108;
    font-weight:600; text-transform:uppercase; letter-spacing:0.14em;
    font-size:0.64rem; color:var(--text-muted); margin-bottom:6px;
  }
  .about-facts dd{ margin:0; font-size:0.9rem; line-height:1.5; }
  /* The second half of the section keeps the full section-head treatment,
     eyebrow, display heading and note, so it reads as its own part. */
  .about-split{ margin-top:64px; padding-top:52px; border-top:1px solid var(--border); }
  .about-split h3{
    font-size:clamp(1.7rem,3vw,2.3rem); margin-top:12px;
    text-transform:uppercase; font-weight:800; letter-spacing:-0.005em;
    line-height:1.02; color:var(--brand-display); font-variation-settings:"wdth" 112;
  }
  /* The side panel travels with the reader instead of leaving dead space below
     itself once the longer column runs past it. Same behaviour as the contact
     card. Both revert to static below, where the grid folds to one column. */
  .about-grid > .about-facts,
  .about-grid > .checklist{ position:sticky; top:88px; align-self:start; }
  @media (max-width:880px){
    .about-grid{ grid-template-columns:1fr; gap:34px; }
    .about-grid > .about-facts,
    .about-grid > .checklist{ position:static; }
  }

  /* ---- Numbered walkthrough (the deduction order) ---- */
  .ranked{ border-top:1px solid var(--border); max-width:80ch; }
  .ranked li{
    display:grid; grid-template-columns:auto 1fr; gap:22px;
    padding:22px 0; border-bottom:1px solid var(--hairline);
    align-items:start;
  }
  .ranked li:last-child{ border-bottom:1px solid var(--border); }
  .rank{
    font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
    font-size:0.95rem; font-weight:700; letter-spacing:0.04em;
    color:var(--brand-ink); padding-top:1px; min-width:2.4ch;
  }
  .ranked h3{ font-size:1.04rem; font-weight:700; margin-bottom:7px; font-variation-settings:"wdth" 104; }
  .ranked p{ color:var(--text-muted); font-size:0.94rem; }
  .ranked p + p{ margin-top:12px; }
  @media (max-width:560px){ .ranked li{ gap:14px; } }

  /* ============ Registered details ============ */
  .legal{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--border); border:1px solid var(--border);
    margin-top:28px;
  }
  .legal div{ background:var(--bg); padding:14px 16px; }
  .legal dt{
    font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 108;
    text-transform:uppercase; letter-spacing:0.14em; font-size:0.62rem;
    color:var(--text-muted); font-weight:600; margin-bottom:6px;
  }
  .legal dd{ margin:0; font-size:0.85rem; }
  @media (max-width:860px){ .legal{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:460px){ .legal{ grid-template-columns:1fr; } }

  /* ============ Nav ============ */
  header.site{
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    gap:24px; overflow:visible;
    padding-top:19px; padding-bottom:19px;   /* never the shorthand; .wrap owns the side gutters */
  }
  /* shares the page's left edge with the hero, the headings and the other logos */
  .nav-brand{ margin-left:0; }
  .nav-links{ display:flex; align-items:center; gap:22px; }
  .nav-links a{
    text-decoration:none; font-size:0.875rem; font-weight:600; color:var(--text-muted);
    padding:4px 0; border-bottom:2px solid transparent; white-space:nowrap;
    transition:color .15s ease, border-color .15s ease;
  }
  .nav-links a:hover{ color:var(--text); border-bottom-color:var(--brand); }
  /* the page you are on stays in the bar, underlined, rather than disappearing */
  .nav-links a[aria-current="page"]{ color:var(--text); border-bottom-color:var(--brand); }

  /* ---- Dropdowns: each page's own sections, on hover ---- */
  .nav-item{ position:relative; display:flex; align-items:center; }
  .nav-item > a{ display:inline-flex; align-items:center; gap:5px; }
  .nav-item .caret{
    width:7px; height:7px; flex:none; margin-top:-2px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg); opacity:0.55; transition:opacity .15s ease;
  }
  .nav-item:hover .caret{ opacity:1; }

  .nav-drop{
    position:absolute; top:100%; left:-14px; z-index:60;
    min-width:216px; padding:7px 0;
    background:var(--bg); border:1px solid var(--border);
    border-top:2px solid var(--brand);
    box-shadow:0 12px 28px -12px rgba(38,36,30,0.28);
    display:flex; flex-direction:column;
    opacity:0; visibility:hidden; transform:translateY(-4px);
    transition:opacity .14s ease, transform .14s ease, visibility .14s;
  }
  /* the gap between the link and the panel would otherwise drop the hover */
  .nav-item::after{
    content:""; position:absolute; top:100%; left:0; right:0; height:14px;
  }
  .nav-item:hover .nav-drop,
  .nav-item:focus-within .nav-drop{ opacity:1; visibility:visible; transform:translateY(0); }

  .nav-drop a{
    padding:8px 18px; border-bottom:none; font-weight:500;
    font-size:0.85rem; color:var(--text-muted); white-space:nowrap;
  }
  .nav-drop a:hover{ color:var(--text); background:var(--bg-sunk); border-bottom-color:transparent; }
  .nav-drop a.is-current{ color:var(--text); background:var(--brand-soft); border-bottom-color:transparent; }

  /* ---- Burger: touch and narrow screens get a panel, not a hover menu ---- */
  .nav-toggle{
    display:none; align-items:center; justify-content:center;
    width:42px; height:38px; flex:none; padding:0;
    background:none; border:1px solid var(--border); border-radius:2px;
    cursor:pointer; color:var(--text);
  }
  .nav-toggle .bars{ display:block; position:relative; width:18px; height:2px; }
  .nav-toggle .bars,
  .nav-toggle .bars::before,
  .nav-toggle .bars::after{
    background:currentColor; border-radius:1px;
    transition:transform .18s ease, opacity .12s ease;
  }
  .nav-toggle .bars::before,
  .nav-toggle .bars::after{
    content:""; position:absolute; left:0; width:18px; height:2px;
  }
  .nav-toggle .bars::before{ top:-6px; }

  /* per-item expander, only in the burger panel */
  .nav-expand{
    display:none; align-items:center; justify-content:center;
    width:44px; align-self:stretch; flex:none;
    background:none; border:none; cursor:pointer; color:var(--text-muted);
  }
  .nav-expand .chev{
    width:8px; height:8px; display:block; margin-top:-3px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg); transition:transform .18s ease;
  }
  .nav-expand[aria-expanded="true"] .chev{ transform:rotate(-135deg); margin-top:2px; }
  .nav-toggle .bars::after{ top:6px; }
  .nav-toggle[aria-expanded="true"] .bars{ background:transparent; }
  .nav-toggle[aria-expanded="true"] .bars::before{ transform:translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars::after{ transform:translateY(-6px) rotate(-45deg); }

  /* No hover on touch: the parent link just goes to the page. */
  @media (hover:none){
    .nav-item .caret{ display:none; }
  }

  /* Where a nav jump lands. The offset is measured to the section's BOX, but
     what the reader sees is its first line of text, 50px lower because of the
     section padding (28px inside a strip). So the offset is the clearance we
     want minus that padding: 54 + 50 lands the text 24px under an 80px header,
     76 + 28 does the same for a strip. Raise both by the same amount to open
     the gap up, lower them to tighten it. */
  section[id]{ scroll-margin-top:54px; }
  div.strip{ scroll-margin-top:76px; }
  /* Same 24px for the section that opens a page, which no one jumps to but
     everyone lands on. The chooser band keeps its own padding: it is a
     coloured block, not a run of text starting under the header. */
  main > section:first-child:not(.chooser-band){
    padding-top:24px;
    /* Its padding is 24px, not the 50px the rule above assumes, so its own
       landing offset has to be 26px larger or a jump to it tucks the heading
       under the header: 80 + 24 = the same 24px clearance as everywhere else. */
    scroll-margin-top:80px;
  }
  /* #top is <main>, which begins directly under the sticky header, so a logo
     link landed at the header's own height and left it overhanging the first
     card. This is a back-to-top link: any offset larger than that height makes
     the browser clamp the jump to the true top of the page. */
  #top{ scroll-margin-top:400px; }
  .nav-cta{ display:flex; align-items:center; gap:12px; }
  @media (max-width:1080px){ .nav-links{ gap:17px; } .nav-links a{ font-size:0.83rem; } }
  /* too narrow for one row: everything folds into a burger panel */
  @media (max-width:940px){
    .nav{ padding-top:15px; padding-bottom:15px; }
    .nav-toggle{ display:inline-flex; order:3; }

    .nav-links{
      order:4; width:100%;
      display:none; flex-direction:column; align-items:stretch; gap:0;
      margin-top:14px; padding-top:6px; padding-bottom:4px;
      border-top:1px solid var(--border);
      max-height:min(70vh, 520px); overflow-y:auto;
      -webkit-overflow-scrolling:touch;
    }
    .nav.is-open{ flex-wrap:wrap; }
    .nav.is-open .nav-links{ display:flex; }

    .nav-item{
      display:flex; flex-wrap:wrap; align-items:center; position:static;
      border-bottom:1px solid var(--hairline);
    }
    .nav-item > a{ flex:1 1 auto; }
    .nav-expand{ display:inline-flex; }
    .nav-item .caret{ display:none; }

    .nav-item > a,
    .nav-links > a{
      display:flex; padding:12px 2px; font-size:0.98rem; color:var(--text);
    }
    .nav-links > a{ border-bottom:1px solid var(--hairline); }
    .nav-item:last-child,
    .nav-links > a:last-child{ border-bottom:none; }

    /* children sit under their parent, always open, with no nested tapping */
    .nav-drop{
      position:static; opacity:1; visibility:visible; transform:none;
      min-width:0; padding:2px 0 10px; margin:0;
      background:none; border:none; box-shadow:none;
      flex:1 1 100%; flex-direction:column;
      display:none;                      /* closed until the chevron is tapped */
    }
    .nav-item.is-expanded > .nav-drop{ display:flex; }
    .nav-item::after{ display:none; }
    .nav-drop a{
      padding:9px 2px 9px 18px; font-size:0.9rem;
      border-left:2px solid var(--border); margin-left:2px;
    }
    .nav-drop a:hover,
    .nav-drop a.is-current{ background:none; border-left-color:var(--brand); color:var(--text); }

    /* Header is 69px here, so the same clearance needs smaller offsets. */
    section[id]{ scroll-margin-top:42px; }
    div.strip{ scroll-margin-top:64px; }
    main > section:first-child:not(.chooser-band){ scroll-margin-top:68px; }
  }
  @media (max-width:460px){ .nav-cta .btn-primary{ display:none; } }
  @media (max-width:640px){ .nav{ gap:12px; } }
  @media (max-width:460px){ .nav-cta .btn-ghost{ display:none; } .logo-nav{ width:108px; height:22px; } }

  /* ============ Buttons ============ */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 22px; font-weight:700; font-size:0.94rem;
    text-decoration:none; border:1px solid transparent; cursor:pointer;
    white-space:nowrap; border-radius:2px;
    transition:background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .btn-primary{ background:var(--brand); color:var(--on-brand); }
  .btn-primary:hover{ background:color-mix(in srgb, var(--brand) 88%, #000); }
  .btn-ghost{ background:transparent; border-color:var(--border); color:var(--text); }
  .btn-ghost:hover{ border-color:var(--text); }
  .btn-sm{ padding:9px 16px; font-size:0.85rem; }

  @media (prefers-reduced-motion: no-preference){
    .reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; }
    .reveal.is-visible{ opacity:1; transform:none; }
  }

  /* ============ Hero ============ */
  /* Top padding matches the 24px a nav jump lands on, so arriving at the top
     of a page and jumping to a section put the first line in the same place. */
  .hero{ padding:24px 0 58px; border-bottom:1px solid var(--border); }
  /* Top-aligned, not bottom: end-alignment dropped the sectors panel to the
     foot of the heading column and opened dead space above it. */
  .hero-grid{ display:grid; grid-template-columns:1.12fr 0.88fr; gap:56px; align-items:start; }
  .hero-grid > .hero-card{ position:sticky; top:88px; align-self:start; }
  .hero-flag{ display:flex; align-items:center; gap:11px; margin-bottom:20px; }
  .hero-flag .dot{
    width:7px; height:7px; border-radius:50%; background:var(--brand); flex:none;
    box-shadow:0 0 0 3px var(--brand-soft);
  }
  h1.hero-head{ font-size:clamp(1.95rem,3.9vw,3.05rem); max-width:16ch; }
  h1.hero-head em{ font-style:normal; }
  .hero-sub{ margin-top:22px; max-width:50ch; font-size:1.06rem; color:var(--text-muted); }
  .hero-actions{ margin-top:30px; display:flex; flex-wrap:wrap; gap:13px; }

  .hero-card{ border:1px solid var(--border); background:var(--bg-raised); padding:24px; border-radius:2px; }
  .hero-card-title{ display:block; margin-bottom:15px; }
  .chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
  .chips-note{ font-size:0.8rem; color:var(--text-muted); margin-bottom:20px; }
  /* dashed edge marks the open end of the list, but full-strength text,
     because muted grey reads as "disabled" rather than "and beyond" */
  .chip-more{ border-style:dashed; }
  .chip{
    border:1px solid var(--border); background:var(--bg);
    padding:5px 11px; font-size:0.78rem; font-weight:600; border-radius:2px;
  }
  .kv{
    display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    padding:10px 0; border-top:1px solid var(--hairline); font-size:0.88rem;
  }
  .kv:first-of-type{ border-top:none; }
  .kv span:first-child{ color:var(--text-muted); }
  .kv b{ font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:0.84rem; text-align:right; }
  @media (max-width:880px){
    .hero-grid{ grid-template-columns:1fr; gap:40px; }
    .hero-grid > .hero-card{ position:static; }
  }

  /* ============ Stat strip ============ */
  .strip{ border-bottom:1px solid var(--border); background:var(--bg-sunk); }
  .strip-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
  .strip-item{ padding:28px 26px; border-left:1px solid var(--border); }
  .strip-item:first-child{ border-left:none; padding-left:0; }
  .strip-num{
    font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
    font-size:1.65rem; font-weight:600; color:var(--brand-ink);
    display:block; margin-bottom:7px;
  }
  .strip-label{ font-size:0.85rem; color:var(--text-muted); }
  @media (max-width:880px){
    .strip-grid{ grid-template-columns:repeat(2,1fr); }
    .strip-item:nth-child(2n+1){ border-left:none; padding-left:0; }
    .strip-item:nth-child(n+3){ border-top:1px solid var(--border); }
  }
  @media (max-width:520px){
    .strip-grid{ grid-template-columns:1fr; }
    .strip-item{ border-left:none; padding-left:0; }
    .strip-item+.strip-item{ border-top:1px solid var(--border); }
  }

  /* ============ Section shell ============ */
  section{ padding:50px 0; border-bottom:1px solid var(--border); }
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:28px; margin-bottom:32px; flex-wrap:wrap;
  }
  .section-head h1, .section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin-top:12px; }
  .section-note{ max-width:35ch; color:var(--text-muted); font-size:0.93rem; }

  /* "Who you're dealing with" carries the one note long enough that bottom
     alignment lifts its first line above its own eyebrow. Top-align it so it
     starts level with Accountability. Width deliberately left at the shared
     35ch: widening it here pushed the row past the container once the real
     Archivo heading is loaded, and the note wrapped underneath the heading. */
  #who .section-head{ align-items:flex-start; }

  /* The payslip section lifts its specimen image up beside the section note,
     so its top edge starts level with the note's first line.
     The note has to be on its own row under the heading for that to be safe,
     or the image would rise straight over it. "What your payslip will look
     like" is long enough that it already wraps that way once real Archivo
     loads; forcing the wrap here makes it do so at every width, which is what
     the lift is measured against. Desktop only: on phones the image follows
     the copy in a single column. */
  @media (min-width:881px){
    #payslip .section-head > div{ flex:1 0 100%; }
    .payslip-thumb{ margin-top:-79px; }
  }

  /* ============ Value props ============ */
  .props{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:1px; background:var(--border); border:1px solid var(--border);
  }
  .prop{ background:var(--bg); padding:30px 26px; }
  .prop-rule{ width:34px; height:3px; background:var(--brand); margin-bottom:18px; }
  .prop h3{
    font-size:1.22rem; font-weight:700; margin-bottom:10px;
    font-variation-settings:"wdth" 106;
  }
  .prop p{ color:var(--text-muted); font-size:0.93rem; }
  @media (max-width:880px){ .props{ grid-template-columns:1fr; } }

  /* ============ Steps ============ */
  .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
  .step{ position:relative; padding-top:22px; }
  .step::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--border); }
  .step.is-first::before{ background:var(--brand); }
  .step-num{
    font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
    font-size:0.78rem; letter-spacing:0.08em; font-weight:700;
    color:var(--brand-ink);
    display:block; margin-bottom:12px;
  }
  .step h3{ font-size:1.04rem; font-weight:700; margin-bottom:8px; font-variation-settings:"wdth" 104; }
  .step p{ font-size:0.89rem; color:var(--text-muted); }
  @media (max-width:880px){ .steps{ grid-template-columns:repeat(2,1fr); row-gap:34px; } }
  @media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

  /* ============ Pricing ledger ============ */
  .ledger-wrap{ display:grid; grid-template-columns:1fr 1.25fr; gap:48px; align-items:start; }
  .ledger{ background:var(--bg-sunk); border:1px solid var(--border); border-radius:2px; overflow:hidden; }
  .ledger-top{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; column-gap:12px; row-gap:3px;
    padding:15px 20px; border-bottom:1px solid var(--border);
    font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 108;
    font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase;
    font-weight:600; color:var(--text-muted);
  }
  /* Each half stays on one line, so when the pair no longer fits it breaks
     between them rather than interleaving two wrapped halves at phone width.
     Nothing changes above that point: on desktop both still sit on one row. */
  .ledger-top > span{ white-space:nowrap; }
  .ledger-row{
    display:flex; justify-content:space-between; align-items:baseline; gap:20px;
    padding:16px 20px; border-bottom:1px dashed var(--border); font-size:0.94rem;
  }
  .ledger-row .amt{ font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:0.88rem; color:var(--text-muted); white-space:nowrap; }
  .ledger-row.total{ background:var(--brand-soft); border-bottom:none; }
  .ledger-row.total .label{ font-weight:700; }
  .ledger-row.total .amt{ color:var(--brand-ink); font-size:1.12rem; font-weight:700; }
  .ledger-foot{ padding:15px 20px; font-size:0.8rem; color:var(--text-muted); border-top:1px solid var(--border); }

  /* Prose left, the fixed-terms panel right, the same two-column rhythm
     the rest of the page uses, so the right half isn't left empty. */
  .price-copy{ margin-top:44px; display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:start; }
  .price-copy-text{ max-width:60ch; }
  .price-copy h3{ font-size:1.42rem; font-weight:700; margin-bottom:14px; font-variation-settings:"wdth" 106; }
  .price-copy p{ color:var(--text-muted); margin-bottom:20px; }
  .price-copy .checklist h3{ font-size:0.95rem; font-weight:700; margin-bottom:0; }
  @media (max-width:880px){ .price-copy{ grid-template-columns:1fr; gap:34px; } }
  .check-list li{ display:flex; gap:11px; padding:10px 0; font-size:0.93rem; border-top:1px solid var(--hairline); }
  .check-list li:first-child{ border-top:none; }
  .tick{
    flex:none; width:18px; height:18px; margin-top:3px; border-radius:2px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--good-soft); color:var(--good); font-size:0.66rem; font-weight:700;
  }
  @media (max-width:880px){ .ledger-wrap{ grid-template-columns:1fr; gap:36px; } }



  /* ============ Audience chooser ============ */
  .chooser-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  /* The band is the sunk cream and the cards sit a shade lighter on it, so the
     orange top rule and the card's own edge carry the separation the orange
     band used to. --bg-sunk / --bg keep both themes working from one pair. */
  .chooser-band{ background:var(--bg-sunk); padding:34px 0; }
  .choice{
    display:flex; flex-direction:column; gap:7px;
    border:1px solid var(--border); border-top:3px solid var(--brand);
    background:var(--bg); padding:22px 24px;
    text-decoration:none; border-radius:2px;
    box-shadow:0 2px 14px rgba(38,36,30,0.14);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .choice:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(38,36,30,0.20); }
  .choice-kicker{
    font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 108;
    text-transform:uppercase; letter-spacing:0.16em; font-size:0.66rem;
    font-weight:600; color:var(--brand-ink);
  }
  .choice-head{
    font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 106;
    font-size:1.18rem; font-weight:700; color:var(--text); line-height:1.25;
  }
  .choice-list{ font-size:0.86rem; color:var(--text-muted); }
  .choice-go{
    margin-top:6px; font-size:0.84rem; font-weight:700; color:var(--brand-ink);
  }
  @media (max-width:760px){ .chooser-grid{ grid-template-columns:1fr; } }

  /* ============ Margin tiers ============ */
  .tiers{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:1px; background:var(--border); border:1px solid var(--border);
    margin-bottom:34px;
  }
  .tier{ background:var(--bg); padding:20px 22px; display:flex; flex-direction:column; gap:4px; }
  .tier-when{
    font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 108;
    text-transform:uppercase; letter-spacing:0.16em; font-size:0.64rem;
    font-weight:600; color:var(--text-muted);
  }
  .tier-price{
    font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
    font-size:1.85rem; font-weight:600; color:var(--brand-ink); line-height:1.15;
  }
  .tier-year{ font-size:0.8rem; color:var(--text-muted); }
  .tier-year b{ color:var(--text); font-weight:700; font-family:"IBM Plex Mono",monospace; }
  .tier-note{
    margin-top:14px; font-size:0.78rem; color:var(--text-muted); line-height:1.6;
    max-width:86ch; scroll-margin-top:120px;
  }
  .tier-note strong{ color:var(--brand-ink); }
  @media (max-width:700px){ .tiers{ grid-template-columns:1fr; } }

  /* ============ Take-home calculator ============ */
  .calc{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:40px; align-items:start; }
  @media (max-width:940px){ .calc{ grid-template-columns:1fr; gap:30px; } }
  /* The breakdown follows the inputs, so the figures stay in view while the
     rate is changed. Height gate deliberate: pinned and taller than the window,
     its last row (take-home pay) could never be scrolled into view. */
  @media (min-width:941px) and (min-height:880px){
    .calc-out{ position:sticky; top:88px; align-self:start; }
  }

  .calc-inputs{
    border:1px solid var(--border); background:var(--bg-raised);
    padding:22px; border-radius:2px;
    display:flex; flex-direction:column; gap:17px;
  }
  .calc-inputs-head{ padding-bottom:4px; border-bottom:1px solid var(--border); }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field label{ font-size:0.84rem; font-weight:600; }
  .field .hint{ font-size:0.75rem; color:var(--text-muted); line-height:1.45; }
  .field input, .field select{
    font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
    font-size:0.9rem; color:var(--text); background:var(--bg);
    border:1px solid var(--border); border-radius:2px;
    padding:9px 10px; width:100%; min-width:0;
    -webkit-appearance:none; appearance:none;
  }
  /* No spinner arrows on number fields anywhere: the figures are typed, and a
     stepper on a rate invites accidental nudges on trackpads and touchscreens. */
  input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; appearance:none; margin:0; }
  .field select{
    font-family:"Public Sans",sans-serif; font-variant-numeric:normal;
    background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-position:calc(100% - 16px) 55%, calc(100% - 11px) 55%;
    background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
    padding-right:32px;
  }
  .field input:focus, .field select:focus{ outline:2px solid var(--focus); outline-offset:1px; border-color:transparent; }
  .field-pair{ display:grid; grid-template-columns:auto 1fr 1.15fr; align-items:stretch; gap:0; }
  .field-pair .prefix{
    display:flex; align-items:center; padding:0 10px;
    border:1px solid var(--border); border-right:none; border-radius:2px 0 0 2px;
    background:var(--bg-sunk); font-family:"IBM Plex Mono",monospace; font-size:0.9rem;
    color:var(--text-muted);
  }
  .field-pair input{ border-radius:0; border-right:none; }
  .field-pair select{ border-radius:0 2px 2px 0; }

  .calc-out .ledger{ margin:0; }

  /* Minimum-wage gate. When the rate is unlawful we show the reason instead of
     a take-home figure, and grey the ledger so no number reads as an answer. */
  .calc-alert{
    border:1px solid var(--brand);
    border-left:4px solid var(--brand);
    background:var(--brand-soft);
    padding:20px 22px; border-radius:2px; margin-bottom:18px;
  }
  .calc-alert h3{
    font-size:1.02rem; font-weight:700; margin-bottom:9px;
    font-variation-settings:"wdth" 104; color:var(--text);
  }
  .calc-alert p{ font-size:0.9rem; color:var(--text); margin:0; }
  .calc-alert b{ font-weight:700; }
  .alert-figures{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    background:var(--border); border:1px solid var(--border);
    margin:15px 0; border-radius:2px; overflow:hidden;
  }
  .alert-figures div{ background:var(--bg); padding:11px 14px; }
  .alert-figures span{
    display:block; font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 108;
    font-weight:600; text-transform:uppercase; letter-spacing:0.12em;
    font-size:0.6rem; color:var(--text-muted); margin-bottom:4px;
  }
  .alert-figures b{
    font-family:"IBM Plex Mono",monospace; font-size:0.94rem;
    font-weight:700; color:var(--brand-ink);
  }
  .calc-alert .alert-how{ font-size:0.86rem; color:var(--text-muted); }
  .calc-alert .alert-note{
    font-size:0.84rem; color:var(--text-muted);
    margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
  }
  .calc-out.is-blocked .ledger{ opacity:0.4; }
  .calc-inputs input[aria-invalid="true"]{ border-color:var(--brand); }
  @media (max-width:520px){ .alert-figures{ grid-template-columns:1fr; } }
  .ledger-row .amt.neg::before{ content:"\2212 "; }
  .ledger-row.sub{
    background:var(--bg-sunk);
    border-bottom:1px solid var(--border);
    border-top:1px solid var(--border);
  }
  .ledger-row.sub .label{ font-weight:700; }
  .ledger-row .label small{ display:block; font-weight:400; font-size:0.76rem; color:var(--text-muted); margin-top:2px; }
  .ledger-row.sub .label small{ display:block; font-weight:400; font-size:0.76rem; color:var(--text-muted); margin-top:2px; }
  .ledger-row.sub .amt{ font-weight:700; color:var(--text); }
  .ledger-row.is-hidden{ display:none; }

  .periods{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .periods div{ display:flex; flex-direction:column; gap:3px; }
  .periods span{ font-size:0.68rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-muted); }
  .periods b{ font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:0.98rem; color:var(--text); }
  @media (max-width:520px){ .periods{ grid-template-columns:repeat(2,1fr); row-gap:16px; } }

  .calc-note{ margin-top:14px; font-size:0.78rem; color:var(--text-muted); line-height:1.6; }

  /* ============ Specimen payslip ============ */
  .payslip-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:44px; align-items:start; }
  .payslip-copy p{ color:var(--text-muted); font-size:0.96rem; max-width:62ch; }
  .payslip-copy p + p{ margin-top:14px; }
  .payslip-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px; }
  .payslip-meta{ font-family:"IBM Plex Mono",monospace; font-size:0.76rem; color:var(--text-muted); }
  /* The thumbnail is the proof, so it gets the page's only drop shadow outside
     the chooser cards. Border and background keep it legible in dark mode,
     where a white document would otherwise float on nothing. */
  .payslip-thumb{
    display:block; border:1px solid var(--border); background:#fff;
    /* The PDF itself now prints with a 13mm page margin, so the mat only has
       to separate the sheet from its edge, not supply the whole border. */
    padding:9px; text-decoration:none;
    box-shadow:0 4px 18px rgba(38,36,30,0.16); border-radius:2px;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .payslip-thumb:hover{ transform:translateY(-2px); box-shadow:0 8px 26px rgba(38,36,30,0.22); }
  .payslip-thumb img{ display:block; width:100%; height:auto; }
  /* The crop stops just past take-home pay and fades out, so the panel shows the
     figures rather than a postage stamp of a whole A4 page. */
  /* The caption sits on the same white as the mat, divided by a hairline, so
     the whole thing reads as one sheet rather than a panel with a strip. */
  .payslip-thumb::after{
    content:"Specimen payslip \2014\a0 one page, PDF";
    display:block; margin-top:14px; padding-top:11px;
    font-size:0.74rem; letter-spacing:0.02em; color:#5C584F;
    border-top:1px solid #DCD5C2;
  }
  @media (max-width:880px){
    .payslip-grid{ grid-template-columns:1fr; gap:28px; }
    .payslip-thumb{ max-width:452px; padding:8px; }
  }
  /* The asterisk is a jump to the note under the breakdown, not decoration. */
  a.fn{ text-decoration:none; color:var(--brand-ink); font-weight:700; padding:0 2px; }
  a.fn:hover{ text-decoration:underline; }
  .calc-note strong{ color:var(--brand-ink); }
  #fn-margin{ scroll-margin-top:120px; }


  /* ============ Enquiry form ============ */
  .bookform{ max-width:820px; }
  .bookform-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .bookform .field-wide{ grid-column:1 / -1; }
  .bookform textarea{
    font-family:"Public Sans",sans-serif; font-size:0.95rem; color:var(--text);
    background:var(--bg); border:1px solid var(--border); border-radius:2px;
    padding:10px 12px; width:100%; resize:vertical; line-height:1.55;
  }
  .bookform textarea:focus{ outline:2px solid var(--focus); outline-offset:1px; border-color:transparent; }
  .bookform .req{
    font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 108;
    text-transform:uppercase; letter-spacing:0.12em; font-size:0.58rem;
    color:var(--text-muted); font-weight:600; margin-left:6px;
  }
  .bookform .field input[aria-invalid="true"],
  .bookform .field textarea[aria-invalid="true"]{ border-color:var(--brand-ink); }
  .bookform-hidden{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  /* Spam trap. Off-screen rather than display:none, because some bots skip
     fields that are hidden outright. It is aria-hidden and tabindex -1 in
     the markup, so neither a screen reader nor the tab key reaches it. */
  .hp{
    position:absolute; left:-9999px; top:auto;
    width:1px; height:1px; overflow:hidden;
  }
  .bookform-captcha{ margin-top:22px; display:flex; flex-direction:column; gap:8px; }
  .captcha-note{ font-size:0.72rem; color:var(--text-muted); max-width:44ch; line-height:1.5; }
  .captcha-note a{ color:var(--text-muted); }
  .bookform-captcha.is-unavailable #bfCaptcha{ display:none; }
  .captcha-placeholder{
    width:304px; max-width:100%; min-height:78px;
    border:1px dashed var(--border); border-radius:3px;
    background:var(--bg-sunk);
    display:flex; align-items:center; gap:12px; padding:0 14px;
  }
  .captcha-placeholder-box{
    width:24px; height:24px; flex:none; border-radius:2px;
    border:2px solid var(--border); background:var(--bg);
  }
  .captcha-placeholder-text{ font-size:0.74rem; color:var(--text-muted); line-height:1.4; }
  .bookform-foot{
    display:flex; align-items:center; gap:22px; flex-wrap:wrap;
    margin-top:22px;
  }
  .bookform-privacy{ font-size:0.78rem; color:var(--text-muted); max-width:46ch; line-height:1.55; }
  .bookform-status{
    margin-top:16px; font-size:0.9rem; padding:12px 16px; border-radius:2px;
    display:none;
  }
  .bookform-status.is-ok{ display:block; background:var(--good-soft); color:var(--good); }
  .bookform-status.is-err{ display:block; background:var(--brand-soft); color:var(--brand-ink); }
  @media (max-width:640px){ .bookform-grid{ grid-template-columns:1fr; } }

  /* Contact page: the form beside a short panel of the other ways to reach us. */
  .contact-grid{ display:grid; grid-template-columns:1.25fr 0.75fr; gap:48px; align-items:start; }
  .contact-grid .bookform{ max-width:none; }
  .contact-card{ position:sticky; top:88px; }
  @media (max-width:940px){
    .contact-grid{ grid-template-columns:1fr; gap:36px; }
    .contact-card{ position:static; }
  }

  /* ============ Roadmap ============ */
  .roadmap{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .road{ border:1px solid var(--border); border-top:3px solid var(--border); padding:26px; border-radius:2px; }
  .road.now{ border-top-color:var(--good); }
  .road.due{ background:var(--brand-soft); border-top-color:var(--brand); }
  .road-when{
    font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 108;
    font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; font-weight:600;
    color:var(--text-muted); display:block; margin-bottom:14px;
  }
  .road.now .road-when{ color:var(--good); }
  .road.due .road-when{ color:var(--brand-ink); }
  .road h3{ font-size:1.12rem; font-weight:700; font-variation-settings:"wdth" 104; }
  .road p{ font-size:0.89rem; color:var(--text-muted); margin-top:10px; }
  @media (max-width:880px){ .roadmap{ grid-template-columns:1fr; } }

  /* ============ FAQ ============ */
  .faq{ max-width:830px; }
  details{ border-top:1px solid var(--border); padding:20px 0; }
  details:last-child{ border-bottom:1px solid var(--border); }
  summary{
    cursor:pointer; list-style:none; display:flex; justify-content:space-between;
    align-items:center; gap:22px; font-weight:700; font-size:1.01rem;
  }
  summary::-webkit-details-marker{ display:none; }
  summary .plus{
    font-family:"IBM Plex Mono",monospace; color:var(--brand-ink);
    font-size:1.15rem; flex:none; line-height:1;
    transition:transform .2s ease;
  }
  details[open] summary .plus{ transform:rotate(45deg); }
  .faq-a{ margin-top:13px; color:var(--text-muted); max-width:66ch; font-size:0.94rem; }

  /* ============ CTA ============ */
  .cta-band{ border-bottom:none; background:var(--bg-raised); }
  .cta-inner{ display:flex; justify-content:space-between; align-items:flex-end; gap:36px; flex-wrap:wrap; }
  .cta-inner h2{ font-size:clamp(1.6rem,3.2vw,2.3rem); max-width:22ch; margin-top:0; }
  .cta-actions{ display:flex; gap:13px; flex-wrap:wrap; }

  /* ============ Footer ============ */
  footer{ padding:46px 0 60px; }
  .foot-grid{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:36px;
    padding-bottom:30px; border-bottom:1px solid var(--border);
  }
  .foot-brand p{ color:var(--text-muted); font-size:0.87rem; max-width:34ch; margin-top:16px; }
  .foot-cols{ display:flex; gap:60px; flex-wrap:wrap; }
  .foot-col h3{
    font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 108;
    text-transform:uppercase; letter-spacing:0.18em; font-size:0.68rem;
    color:var(--text-muted); margin-bottom:14px; font-weight:600;
  }
  .foot-col a{ text-decoration:none; }
  .foot-col a:hover{ color:var(--brand-ink); }
  .foot-col li{ padding:6px 0; font-size:0.89rem; }
  .foot-bottom{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    padding-top:22px; font-size:0.79rem; color:var(--text-muted);
  }

  .callout{
    margin-top:34px; padding:22px 26px;
    background:var(--bg-sunk); border-left:3px solid var(--brand);
  }
  .callout h3{ font-size:1.05rem; font-weight:700; margin-bottom:8px; }
  .callout p{ color:var(--text-muted); font-size:0.94rem; }