/*
 * The approved pages' own stylesheets, copied whole.
 *
 * Whole on purpose: an earlier attempt lifted individual rules out with a
 * regex and lost their @media wrappers, so mobile rules applied at every
 * width and the front page layout collapsed. Nothing here is edited.
 */

/* ===== website/index.html — scoped to .asc-page-home ===== */
:root{
    --navy:#051d55; --purple:#45026d; --teal:#01777b; --gold:#c99700;
    --c-purple:#efe9f4; --c-yellow:#fef1d8; --c-teal:#e2f0f0;
  }
body.asc-page-home *{box-sizing:border-box;}
body.asc-page-home{margin:0; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       color:#23262e; background:#fff;}
body.asc-page-home .wrap{max-width:1150px; margin:0 auto; padding:18px 26px 40px;}
/* 1. header bar */
body.asc-page-home .hdr{display:flex; align-items:center; justify-content:space-between; padding:6px 0 18px;}
body.asc-page-home .hdr img.logo{height:46px;}
body.asc-page-home .nav{display:flex; gap:26px; flex-wrap:wrap;}
body.asc-page-home .nav a{color:#374151; text-decoration:none; font-weight:600; font-size:.95rem;}
body.asc-page-home .nav a.active{color:var(--navy); border-bottom:3px solid var(--purple); padding-bottom:4px;}
/* 2. hero */
body.asc-page-home .hero{display:flex; gap:30px; align-items:center; margin:6px 0 8px;}
body.asc-page-home .hero-l{flex:0.92;}
body.asc-page-home .hero-r{flex:1.18; text-align:right;}
body.asc-page-home .hero-r img{max-width:100%;}
body.asc-page-home .title{color:var(--navy); font-size:3rem; font-weight:800; line-height:1.1; margin:0 0 16px;}
body.asc-page-home .sub{font-size:1.18rem; color:#330060; line-height:1.4; margin:0 0 20px;}
body.asc-page-home .btns a{display:inline-block; border-radius:8px; padding:11px 20px; font-weight:700;
          font-size:.95rem; text-decoration:none; margin-right:12px;}
body.asc-page-home .btn-fill{background:var(--purple); color:#fff;}
body.asc-page-home .btn-out{border:2px solid var(--purple); color:var(--purple);}
/* 3. headline cards (row of 3 equal) */
body.asc-page-home .cards{display:flex; gap:18px; margin:20px 0 12px;}
body.asc-page-home .card{flex:1; border:1.5px solid; border-radius:16px; padding:16px 18px; background:#fff;
        display:flex; align-items:center; gap:16px;}
body.asc-page-home .card img.ic{width:74px; height:74px; flex:0 0 auto;}
body.asc-page-home .card .txt{flex:1;}
body.asc-page-home .card .val{font-size:1.55rem; font-weight:800; line-height:1.15;}
body.asc-page-home .card .lab{font-size:.86rem; color:#4b5563; margin-top:6px;}
body.asc-page-home .card .subv{font-size:.82rem; font-weight:700; margin-top:6px;}
/* 4. about + disclaimer row */
body.asc-page-home .aboutrow{display:flex; gap:36px; align-items:flex-start; justify-content:space-between; margin-top:18px;}
body.asc-page-home .about{flex:0 0 auto; background:#f0eaf4; color:var(--purple);
         border-radius:18px; padding:12px 28px 12px 14px; font-weight:700; font-size:1.05rem;
         display:flex; align-items:center; gap:12px; white-space:nowrap;}
body.asc-page-home .about img{width:42px; height:42px;}
body.asc-page-home .disc{flex:0 1 620px; font-size:.82rem; color:#3a3a3a; font-weight:500; line-height:1.55; text-align:left;}
/* 5. footer */
body.asc-page-home .foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
        margin-top:30px; padding-top:14px; border-top:1px solid #e6e6ee;
        color:#8a8a96; font-size:.78rem;}
/* a11y-retrofit v1 */
body.asc-page-home /* Keep individual elements inside the page. Deliberately NOT
     "body{overflow-x:hidden}
body.asc-page-home ": that hides a sideways overflow instead of
     fixing it, body.asc-page-home so the page silently loses its right-hand edge and the real
     cause never gets found. Tried on 18 August and immediately masked two
     genuinely broken pages. */
  img, body.asc-page-home svg, body.asc-page-home table{max-width:100%;}
body.asc-page-home h1, body.asc-page-home h2, body.asc-page-home h3{overflow-wrap:break-word;}
/* Colour contrast, measured 18 August against WCAG 2.1 AA.
     Three colours from the mockup failed as TEXT. Fills and colour coding are
     untouched — only the letters are darkened, so the pages look the same at a
     glance while the wording is legible to everyone.
       gold #c99700 -> #856400   was 2.66:1 on white, 3.49:1 on its own tint
       grey #6b7280 -> #6b7280   was 3.41:1, and it was in every page footer
       tags pale hues -> navy    was 2.91:1 at worst, on About */
body.asc-page-home [style*="--gold"]{color:#856400 !important;}
body.asc-page-home .foot, body.asc-page-home .foot span, body.asc-page-home .foot a{color:#6b7280;}
/* Each tag keeps its own hue — that is the colour coding — but darkened
     until the letters pass on their own background. A flat navy would have
     passed too, and thrown the coding away. */
body.asc-page-home .ds-blu .ds-tag{color:#17456f;}
body.asc-page-home .ds-grn .ds-tag{color:#2c5f30;}
body.asc-page-home .ds-gold .ds-tag{color:#6d5010;}
body.asc-page-home .ds-tel .ds-tag{color:#175f57;}
body.asc-page-home .ds-pnk .ds-tag{color:#93324b;}
body.asc-page-home a:focus-visible, body.asc-page-home button:focus-visible, body.asc-page-home select:focus-visible{
    outline:3px solid #c99700; outline-offset:2px;}
body.asc-page-home .skip{position:absolute; left:-9999px;}
body.asc-page-home .skip:focus{left:12px; top:12px; background:#fff; padding:10px 16px; z-index:10;
              border:2px solid #45026d; border-radius:8px;}
body.asc-page-home img{max-width:100%;}
  @media (max-width:900px){
body.asc-page-home .hdr{flex-direction:column; align-items:flex-start; gap:12px;}
  }
  @media (prefers-reduced-motion:reduce){
body.asc-page-home *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important;}
  }

  @media (max-width:900px){
body.asc-page-home .hero{flex-direction:column; align-items:flex-start; gap:18px;}
body.asc-page-home .hero-l, body.asc-page-home .hero-r{flex:1 1 auto; width:100%; text-align:left;}
body.asc-page-home .cards{flex-wrap:wrap;}
body.asc-page-home .card{flex:1 1 260px;}
body.asc-page-home .aboutrow{flex-direction:column; gap:20px;}
  }
  @media (max-width:560px){
body.asc-page-home .card{flex:1 1 100%;}
  }
  @media (max-width:760px){
body.asc-page-home .title{font-size:2.1rem;}
body.asc-page-home .hdr{flex-direction:column; align-items:flex-start; gap:12px;}
  }
  @media (max-width:480px){
body.asc-page-home .title{font-size:1.75rem;}
body.asc-page-home .lede, body.asc-page-home .sub{font-size:1rem;}
body.asc-page-home .btns a{display:block; margin-right:0; text-align:center;}
  }
/* end a11y-retrofit */

/* ===== website/how-to-use.html — scoped to .asc-page-how-to-use ===== */
  @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,500,0,0');
  :root{ --navy:#051d55; --purple:#45026d; --teal:#01777b; --gold:#cf9900; --blue:#1f6fb4; }
body.asc-page-how-to-use *{box-sizing:border-box;}
body.asc-page-how-to-use{margin:0; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#23262e; background:#fff;}
body.asc-page-how-to-use .wrap{max-width:1150px; margin:0 auto; padding:18px 26px 40px;}
body.asc-page-how-to-use .msym{font-family:'Material Symbols Rounded'; line-height:1; vertical-align:middle;}
/* header */
body.asc-page-how-to-use .hdr{display:flex; align-items:center; justify-content:space-between; padding:6px 0 18px;}
body.asc-page-how-to-use .hdr img.logo{height:46px;}
body.asc-page-how-to-use .nav{display:flex; gap:26px; flex-wrap:wrap;}
body.asc-page-how-to-use .nav a{color:#374151; text-decoration:none; font-weight:600; font-size:.95rem;}
body.asc-page-how-to-use .nav a.active{color:var(--navy); border-bottom:3px solid var(--purple); padding-bottom:4px;}
/* title */
body.asc-page-how-to-use .title{color:var(--navy); font-size:2.2rem; font-weight:800; margin:6px 0 6px;}
body.asc-page-how-to-use .sub{color:#2a2a2a; font-size:1.1rem; margin:0 0 18px;}
/* 2x2 concept grid */
body.asc-page-how-to-use .grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
body.asc-page-how-to-use .ccard{border-radius:16px; padding:22px 26px; display:flex; align-items:center; gap:22px;}
body.asc-page-how-to-use .ccard img.ci{height:62px; width:auto; flex:0 0 auto;}
body.asc-page-how-to-use .ctext{flex:1;}
body.asc-page-how-to-use .ctitle{font-weight:800; color:var(--navy); font-size:1.12rem; margin-bottom:7px;}
body.asc-page-how-to-use .cbody{color:#4b5563; font-size:.92rem; line-height:1.5;}
/* understanding panel */
body.asc-page-how-to-use .upanel{background:#f3f0f8; border-radius:16px; padding:20px 26px; margin-top:22px;}
body.asc-page-how-to-use .urow{display:flex; align-items:center; gap:28px;}
body.asc-page-how-to-use .uchart svg{width:100%; max-width:560px; height:auto; display:block;}
body.asc-page-how-to-use .uleft{flex:0 0 238px; display:flex; flex-direction:column; gap:18px;}
body.asc-page-how-to-use .uleft h3{color:var(--navy); font-weight:800; margin:0; font-size:1.18rem; white-space:nowrap;}
body.asc-page-how-to-use .legend{display:flex; flex-direction:column; gap:12px; font-size:.92rem;}
body.asc-page-how-to-use .legend div{display:flex; align-items:center; gap:10px;}
body.asc-page-how-to-use .sw{width:46px; height:0; border-top:3px solid var(--navy);}
body.asc-page-how-to-use .sw.dash{border-top:3px dashed var(--purple);}
body.asc-page-how-to-use .sw.band{height:16px; width:30px; border:0; background:#d9cdEb; border-radius:3px;}
body.asc-page-how-to-use .uchart{flex:1; display:flex; align-items:center; justify-content:center;}
body.asc-page-how-to-use .utext{flex:0 0 280px; display:flex; align-items:center; color:#4b5563; font-size:.92rem; line-height:1.55;}
/* continue button */
body.asc-page-how-to-use .cont{text-align:center; margin-top:24px;}
body.asc-page-how-to-use .cont a{display:inline-block; background:var(--purple); color:#fff; text-decoration:none;
          font-weight:700; padding:13px 34px; border-radius:10px; font-size:1rem;}
body.asc-page-how-to-use .foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:30px;
        padding-top:14px; border-top:1px solid #e6e6ee; color:#8a8a96; font-size:.78rem;}
/* a11y-retrofit v1 */
body.asc-page-how-to-use /* Keep individual elements inside the page. Deliberately NOT
     "body{overflow-x:hidden}
body.asc-page-how-to-use ": that hides a sideways overflow instead of
     fixing it, body.asc-page-how-to-use so the page silently loses its right-hand edge and the real
     cause never gets found. Tried on 18 August and immediately masked two
     genuinely broken pages. */
  img, body.asc-page-how-to-use svg, body.asc-page-how-to-use table{max-width:100%;}
body.asc-page-how-to-use h1, body.asc-page-how-to-use h2, body.asc-page-how-to-use h3{overflow-wrap:break-word;}
/* Colour contrast, measured 18 August against WCAG 2.1 AA.
     Three colours from the mockup failed as TEXT. Fills and colour coding are
     untouched — only the letters are darkened, so the pages look the same at a
     glance while the wording is legible to everyone.
       gold #c99700 -> #856400   was 2.66:1 on white, 3.49:1 on its own tint
       grey #6b7280 -> #6b7280   was 3.41:1, and it was in every page footer
       tags pale hues -> navy    was 2.91:1 at worst, on About */
body.asc-page-how-to-use [style*="--gold"]{color:#856400 !important;}
body.asc-page-how-to-use .foot, body.asc-page-how-to-use .foot span, body.asc-page-how-to-use .foot a{color:#6b7280;}
/* Each tag keeps its own hue — that is the colour coding — but darkened
     until the letters pass on their own background. A flat navy would have
     passed too, and thrown the coding away. */
body.asc-page-how-to-use .ds-blu .ds-tag{color:#17456f;}
body.asc-page-how-to-use .ds-grn .ds-tag{color:#2c5f30;}
body.asc-page-how-to-use .ds-gold .ds-tag{color:#6d5010;}
body.asc-page-how-to-use .ds-tel .ds-tag{color:#175f57;}
body.asc-page-how-to-use .ds-pnk .ds-tag{color:#93324b;}
body.asc-page-how-to-use a:focus-visible, body.asc-page-how-to-use button:focus-visible, body.asc-page-how-to-use select:focus-visible{
    outline:3px solid #c99700; outline-offset:2px;}
body.asc-page-how-to-use .skip{position:absolute; left:-9999px;}
body.asc-page-how-to-use .skip:focus{left:12px; top:12px; background:#fff; padding:10px 16px; z-index:10;
              border:2px solid #45026d; border-radius:8px;}
body.asc-page-how-to-use img{max-width:100%;}
  @media (max-width:900px){
body.asc-page-how-to-use .hdr{flex-direction:column; align-items:flex-start; gap:12px;}
  }
  @media (prefers-reduced-motion:reduce){
body.asc-page-how-to-use *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important;}
  }

  @media (max-width:900px){
body.asc-page-how-to-use .grid{grid-template-columns:1fr;}
body.asc-page-how-to-use .urow{flex-direction:column; align-items:stretch; gap:20px;}
body.asc-page-how-to-use .uleft, body.asc-page-how-to-use .utext{flex:1 1 auto; width:100%;}
  }
  @media (max-width:760px){
body.asc-page-how-to-use .title, body.asc-page-how-to-use .title-xl{font-size:2.1rem;}
body.asc-page-how-to-use .hdr{flex-direction:column; align-items:flex-start; gap:12px;}
  }
  @media (max-width:480px){
body.asc-page-how-to-use .title, body.asc-page-how-to-use .title-xl{font-size:1.75rem;}
  }
/* end a11y-retrofit */

/* ===== website/about.html — scoped to .asc-page-about ===== */
:root{ --navy:#051d55; --purple:#45026d; --link:#1f5fb0; }
body.asc-page-about *{box-sizing:border-box;}
body.asc-page-about{margin:0; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#23262e; background:#fff;}
body.asc-page-about .wrap{max-width:1150px; margin:0 auto; padding:18px 26px 0;}
/* 1. header bar (unchanged) */
body.asc-page-about .hdr{display:flex; align-items:center; justify-content:space-between; padding:6px 0 18px;}
body.asc-page-about .hdr img.logo{height:46px;}
body.asc-page-about .nav{display:flex; gap:26px; flex-wrap:wrap;}
body.asc-page-about .nav a{color:#374151; text-decoration:none; font-weight:600; font-size:.95rem;}
body.asc-page-about .nav a.active{color:var(--navy); border-bottom:3px solid var(--purple); padding-bottom:4px;}
/* 2. page title (unchanged) */
body.asc-page-about .title{color:var(--navy); font-size:2.2rem; font-weight:800; margin:6px 0 20px;}
/* 3. three cards (right one slightly smaller) */
body.asc-page-about .cols{display:grid; grid-template-columns:1fr 1.05fr 0.82fr; gap:26px; align-items:stretch;}
body.asc-page-about .card{border:1px solid #e2e2ec; border-radius:16px; padding:22px 24px; background:#fff;
        box-shadow:0 1px 4px rgba(0,0,0,.04); min-height:420px;}
body.asc-page-about .card.mid{display:flex; flex-direction:column;}
body.asc-page-about .mf-flow{flex:1; display:flex; flex-direction:column; justify-content:center;}
body.asc-page-about .card h2{color:var(--navy); font-weight:800; font-size:1.2rem; margin:0 0 18px;}
/* data-source rows: light tinted box + coloured tag + description */
body.asc-page-about .ds-row{display:flex; align-items:center; gap:16px; border-radius:14px; padding:13px 16px; margin-bottom:14px;}
body.asc-page-about .ds-tag{flex:0 0 auto; border-radius:10px; padding:9px 14px; font-weight:800; font-size:.84rem;}
body.asc-page-about .ds-desc{flex:1; color:#3a4250; font-size:.85rem; line-height:1.35;}
body.asc-page-about .ds-blu{background:#f5f9fe;}
body.asc-page-about .ds-blu .ds-tag{background:#b9defd; color:#1f5b9e;}
body.asc-page-about .ds-grn{background:#f6faf4;}
body.asc-page-about .ds-grn .ds-tag{background:#cee8c4; color:#3a7d3f;}
body.asc-page-about .ds-gold{background:#fefaf1;}
body.asc-page-about .ds-gold .ds-tag{background:#fedf81; color:#8a6510;}
body.asc-page-about .ds-tel{background:#f5faf9;}
body.asc-page-about .ds-tel .ds-tag{background:#b6e1d8; color:#1f7d72;}
body.asc-page-about .ds-pnk{background:#fef5f7;}
body.asc-page-about .ds-pnk .ds-tag{background:#feb1c4; color:#c0445f;}
/* middle card — model flow (empty boxes for now) */
body.asc-page-about .mf-sub{color:#4b5563; font-size:.9rem; line-height:1.45; margin:0 0 4px;}
body.asc-page-about .mf-tags{display:flex; gap:10px;}
body.asc-page-about .mf-tag{flex:1; height:44px; border:1px solid; border-radius:10px; display:flex;
          align-items:center; justify-content:center; font-weight:800; font-size:.8rem;}
body.asc-page-about .tg-grn{background:#daf2d5; color:#2f7d3f; border-color:#bce3b5;}
body.asc-page-about .tg-blu{background:#d3ddef; color:#2f4f9e; border-color:#bccaec;}
body.asc-page-about .tg-tel{background:#d8edeb; color:#1f7d72; border-color:#bbdfd9;}
body.asc-page-about .tg-pnk{background:#f8d7dd; color:#c0445f; border-color:#f1bfc8;}
body.asc-page-about .mf-model{width:50%; height:50px; border:1px solid #c4a3e4; background:#ddccf0; color:#5b2d8e;
            border-radius:10px; margin:0 auto; display:flex; align-items:center; justify-content:center;
            font-weight:800; font-size:1rem;}
body.asc-page-about .mf-forecast{width:66%; height:42px; border:1px solid #aedcaf; background:#cdeace; color:#2e7a47;
            border-radius:10px; margin:0 auto; display:flex; align-items:center; justify-content:center;
            font-weight:800; font-size:.95rem;}
body.asc-page-about .mf-arr{width:100%; height:52px; display:block;}
body.asc-page-about .mf-vert{display:block; margin:0 auto;}
body.asc-page-about .mf-link{border-top:1px solid #e6e6ee; padding-top:14px;}
body.asc-page-about .mf-link a{color:var(--link); text-decoration:none; font-size:.86rem;}
/* right card — In this section (shorter; rows with icon + text + chevron) */
body.asc-page-about .faqcard{align-self:start; display:flex; flex-direction:column; min-height:0;}
body.asc-page-about .faqcard h2{border-bottom:1px solid #e7e7ef; padding-bottom:16px; margin:0;}
body.asc-page-about .faq-list{display:flex; flex-direction:column;}
body.asc-page-about .faq-row{display:flex; align-items:center; gap:14px; padding:18px 2px; border-bottom:1px solid #eef0f4;}
body.asc-page-about .faq-row:last-child{border-bottom:0;}
body.asc-page-about .faq-row img{width:42px; height:42px; flex:0 0 auto;}
body.asc-page-about .faq-row .qt{flex:1; color:#2b4a8a; font-weight:600; font-size:.95rem; line-height:1.3;}
body.asc-page-about .faq-row .gt{color:#3a6abd; font-size:1.3rem; font-weight:600; flex:0 0 auto;}
/* footer */
body.asc-page-about .foot{border-top:1px solid #e6e6ee; margin-top:38px; padding:18px 0;
        display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
body.asc-page-about .foot .fl{color:#555; font-size:.82rem; line-height:1.5;}
body.asc-page-about .foot .fc a{color:var(--link); text-decoration:none; font-size:.86rem; margin:0 10px;}
body.asc-page-about .foot .fr{display:flex; align-items:center; gap:16px; color:#444; font-size:.82rem; max-width:400px;}
body.asc-page-about .foot .fr img{height:42px;}
/* a11y-retrofit v1 */
body.asc-page-about /* Keep individual elements inside the page. Deliberately NOT
     "body{overflow-x:hidden}
body.asc-page-about ": that hides a sideways overflow instead of
     fixing it, body.asc-page-about so the page silently loses its right-hand edge and the real
     cause never gets found. Tried on 18 August and immediately masked two
     genuinely broken pages. */
  img, body.asc-page-about svg, body.asc-page-about table{max-width:100%;}
body.asc-page-about h1, body.asc-page-about h2, body.asc-page-about h3{overflow-wrap:break-word;}
/* Colour contrast, measured 18 August against WCAG 2.1 AA.
     Three colours from the mockup failed as TEXT. Fills and colour coding are
     untouched — only the letters are darkened, so the pages look the same at a
     glance while the wording is legible to everyone.
       gold #c99700 -> #856400   was 2.66:1 on white, 3.49:1 on its own tint
       grey #6b7280 -> #6b7280   was 3.41:1, and it was in every page footer
       tags pale hues -> navy    was 2.91:1 at worst, on About */
body.asc-page-about [style*="--gold"]{color:#856400 !important;}
body.asc-page-about .foot, body.asc-page-about .foot span, body.asc-page-about .foot a{color:#6b7280;}
/* Each tag keeps its own hue — that is the colour coding — but darkened
     until the letters pass on their own background. A flat navy would have
     passed too, and thrown the coding away. */
body.asc-page-about .ds-blu .ds-tag{color:#17456f;}
body.asc-page-about .ds-grn .ds-tag{color:#2c5f30;}
body.asc-page-about .ds-gold .ds-tag{color:#6d5010;}
body.asc-page-about .ds-tel .ds-tag{color:#175f57;}
body.asc-page-about .ds-pnk .ds-tag{color:#93324b;}
body.asc-page-about a:focus-visible, body.asc-page-about button:focus-visible, body.asc-page-about select:focus-visible{
    outline:3px solid #c99700; outline-offset:2px;}
body.asc-page-about .skip{position:absolute; left:-9999px;}
body.asc-page-about .skip:focus{left:12px; top:12px; background:#fff; padding:10px 16px; z-index:10;
              border:2px solid #45026d; border-radius:8px;}
body.asc-page-about img{max-width:100%;}
  @media (max-width:900px){
body.asc-page-about .hdr{flex-direction:column; align-items:flex-start; gap:12px;}
  }
  @media (prefers-reduced-motion:reduce){
body.asc-page-about *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important;}
  }

  @media (max-width:1000px){
body.asc-page-about .cols{grid-template-columns:1fr;}
  }
  @media (max-width:900px){
body.asc-page-about .faq-row{flex-wrap:wrap;}
body.asc-page-about .foot .fr{max-width:100%;}
  }
  @media (max-width:760px){
body.asc-page-about .title, body.asc-page-about .title-xl{font-size:2.1rem;}
body.asc-page-about .hdr{flex-direction:column; align-items:flex-start; gap:12px;}
  }
  @media (max-width:480px){
body.asc-page-about .title, body.asc-page-about .title-xl{font-size:1.75rem;}
  }
/* end a11y-retrofit */

/* ===== website/people.html — scoped to .asc-page-people ===== */
:root{
    --navy:#051d55; --purple:#45026d; --teal:#01777b; --gold:#c99700;
    --c-purple:#efe9f4; --c-yellow:#fef1d8; --c-teal:#e2f0f0;
    --c-blue:#eaeffb; --c-lilac:#f3eefb;
  }
body.asc-page-people *{box-sizing:border-box;}
body.asc-page-people{margin:0; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       color:#23262e; background:#fff;}
body.asc-page-people .wrap{max-width:1150px; margin:0 auto; padding:18px 26px 40px;}
body.asc-page-people .hdr{display:flex; align-items:center; justify-content:space-between; padding:6px 0 18px;}
body.asc-page-people .hdr img.logo{height:46px;}
body.asc-page-people .nav{display:flex; gap:22px; flex-wrap:wrap;}
body.asc-page-people .nav a{color:#374151; text-decoration:none; font-weight:600; font-size:.95rem;}
body.asc-page-people .nav a:hover{color:var(--purple); text-decoration:underline;}
body.asc-page-people .nav a.active{color:var(--navy); border-bottom:3px solid var(--purple); padding-bottom:4px;}
body.asc-page-people .title{color:var(--navy); font-size:3rem; font-weight:800; line-height:1.1; margin:0 0 14px;}
/* Section pages use the oversized uppercase heading from the mockup. */
body.asc-page-people .title-xl{color:var(--navy); font-size:4.4rem; font-weight:800; line-height:1;
            letter-spacing:-.01em; text-transform:uppercase; margin:0 0 14px;}
body.asc-page-people .sub{font-size:1.18rem; color:#330060; line-height:1.45; margin:0 0 22px; max-width:820px;}
body.asc-page-people h2{color:var(--navy); font-size:1.35rem; margin:34px 0 12px;}
/* two-column section layout: sidebar + content */
body.asc-page-people .cols{display:flex; gap:30px; align-items:flex-start;}
body.asc-page-people .side{flex:0 0 288px;}
body.asc-page-people .main{flex:1 1 auto; min-width:0;}
body.asc-page-people .side h2{margin-top:0;}
body.asc-page-people .chooser{border:1.5px solid #e6e6ee; border-radius:16px; padding:16px 18px; margin-bottom:18px;}
body.asc-page-people .chooser .ch-t{color:var(--navy); font-weight:800; font-size:1.15rem;}
body.asc-page-people .chooser .ch-s{color:#4b5563; font-size:.88rem; margin:4px 0 12px;}
body.asc-page-people .chooser select{width:100%; padding:11px 12px; border:1.5px solid #d8d8e4; border-radius:9px;
                  font-size:.95rem; color:var(--navy); background:#fff; font-family:inherit;}
body.asc-page-people .findings{border:1.5px solid #e6e6ee; border-radius:16px; padding:16px 16px 6px;}
body.asc-page-people .findings .f-t{color:var(--navy); font-weight:800; font-size:1.08rem; margin-bottom:12px;}
body.asc-page-people .fcard{border-radius:12px; padding:13px 14px; margin-bottom:12px; display:flex; gap:12px;}
body.asc-page-people .fcard .f-ic{width:40px; height:40px; flex:0 0 auto;}
body.asc-page-people .fcard .f-ic svg{width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:1.8;
                   stroke-linecap:round; stroke-linejoin:round;}
/* Cropped artwork, so it is sized rather than coloured. */
body.asc-page-people .fcard .f-ic img{width:100%; height:100%; object-fit:contain; display:block;}
body.asc-page-people .fcard .f-mark{display:flex; flex-direction:column; align-items:center; gap:9px; flex:0 0 auto;}
body.asc-page-people .fcard .num{width:30px; height:30px; border-radius:50%; color:#fff; font-weight:800;
              font-size:.9rem; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
body.asc-page-people .fcard .f-h{font-weight:800; font-size:.93rem; line-height:1.32; margin-bottom:5px;}
body.asc-page-people .fcard .f-b{font-size:.82rem; color:#3f4652; line-height:1.5;}
/* Indicator cards. Three stacked layers, as on the mockup:
       1. icon + label      2. the figure      3. the change pill
     Laid out as a flex column with the middle layer growing, so the three sit
     top / centre / bottom and every card lines up whatever the label wraps to.
     An earlier version propped this up with min-heights measured off the
     longest label, which broke as soon as any wording changed. */
body.asc-page-people .metrics{display:flex; gap:12px; margin:22px 0 6px; flex-wrap:wrap; align-items:stretch;}
body.asc-page-people .metric{flex:1 1 128px; min-width:128px; border:1.5px solid #e6e6ee; border-radius:16px;
          padding:16px 14px 14px; display:flex; flex-direction:column; gap:14px;}
  /* Share one set of row heights across the whole row, so all three layers line
     up between cards however the labels wrap. Without this the middle layer
     absorbs a different amount of slack in each card and the figures stagger. */
  @supports (grid-template-rows: subgrid){
body.asc-page-people .metrics{display:grid; grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
             grid-template-rows:auto 1fr auto;}
/* min-width:0 so the card shrinks to its track: a grid item defaults to
       min-width:auto and card 4's "Independence" pushed the whole card 3px
       wider than its column, taking the label and pill over the edge with it. */
body.asc-page-people .metric{display:grid; grid-template-rows:subgrid; grid-row:span 3; min-width:0;}
  }
/* Each layer is itself a grid item, so it needs min-width:0 too — otherwise
     the row refuses to shrink below its content and pushes past the card. */
body.asc-page-people .metric .m-top{display:flex; align-items:flex-start; gap:10px; flex:0 0 auto; min-width:0;}
body.asc-page-people .metric .m-ic{width:42px; height:42px; border-radius:50%; flex:0 0 auto; margin-top:1px;
                display:flex; align-items:center; justify-content:center;}
body.asc-page-people .metric .m-ic svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9;
                    stroke-linecap:round; stroke-linejoin:round;}
body.asc-page-people .metric .m-ic img{width:24px; height:24px; object-fit:contain; display:block;}
/* min-width:0 because a flex/grid item will not shrink below its longest word
     by default, and "Independence" is wider than this column; hyphens let it
     break at a sensible point rather than mid-syllable. */
body.asc-page-people .metric .m-lab{font-size:.76rem; font-weight:700; color:var(--navy); line-height:1.3;
                 min-width:0; overflow-wrap:break-word; hyphens:auto;}
/* The middle layer takes the slack, which centres the figure between the
     label and the pill without any measured heights. */
body.asc-page-people .metric .m-val{flex:1 1 auto; display:flex; align-items:center; justify-content:center;
                 font-size:1.8rem; font-weight:800; color:var(--navy); line-height:1.05;
                 font-variant-numeric:tabular-nums; margin:0; min-width:0;}
body.asc-page-people .metric .m-val.m-text{font-size:1.05rem; line-height:1.3;}
body.asc-page-people .metric .m-val.m-long{font-size:1.5rem;}
/* Bottom layer: a full-width centred pill, like the mockup. */
body.asc-page-people .metric .m-change{flex:0 0 auto; min-height:30px; min-width:0;}
/* Allowed to wrap: "+91.2% since 2018" does not fit one line in a 146px card,
     and nowrap pushed it past the card edge. Subgrid keeps the row the same
     height everywhere, so a card that wraps does not knock the others out. */
body.asc-page-people .badge{display:block; border-radius:999px; padding:6px 8px; font-size:.71rem; font-weight:700;
         white-space:normal; text-align:center; line-height:1.35;}
body.asc-page-people .b-up{background:#e7f5ec; color:#136c37;}
body.asc-page-people .b-down{background:#fdeaea; color:#a41c1c;}
body.asc-page-people .b-flat{background:#eef0f4; color:#414a58;}
body.asc-page-people .foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
        margin-top:38px; padding-top:14px; border-top:1px solid #e6e6ee;
        color:#6b7280; font-size:.78rem;}
body.asc-page-people .foot a{color:#6b7280;}
body.asc-page-people a:focus-visible, body.asc-page-people button:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
body.asc-page-people .skip{position:absolute; left:-9999px;}
body.asc-page-people .skip:focus{left:12px; top:12px; background:#fff; padding:10px 16px; z-index:10;
              border:2px solid var(--purple); border-radius:8px;}
/* charts */
body.asc-page-people .chartbox{border:1.5px solid #e6e6ee; border-radius:16px; padding:16px 18px 12px; margin:6px 0 4px;}
body.asc-page-people .chart{width:100%; height:auto; display:block;}
body.asc-page-people .legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:10px; font-size:.84rem; color:#4b5563;}
body.asc-page-people .lg{display:flex; align-items:center; gap:7px;}
body.asc-page-people .lg i{width:15px; height:4px; border-radius:2px; display:inline-block;}
body.asc-page-people .lg-note{color:#6b7280; font-style:italic;}
/* figure cards */
body.asc-page-people .cards{display:flex; gap:18px; margin:22px 0 6px; flex-wrap:wrap;}
body.asc-page-people .card{flex:1 1 210px; border:1.5px solid; border-radius:16px; padding:16px 18px; background:#fff;}
body.asc-page-people .card .lab{font-size:.86rem; color:#4b5563; line-height:1.4;}
body.asc-page-people .card .val{font-size:1.7rem; font-weight:800; line-height:1.2; margin-top:8px;}
body.asc-page-people .card .subv{font-size:.82rem; font-weight:700; margin-top:6px;}
/* generic panel */
body.asc-page-people .panel{border-radius:18px; padding:18px 22px; margin:16px 0; line-height:1.6;}
body.asc-page-people .panel h3{margin:0 0 8px; font-size:1.05rem; letter-spacing:.02em; text-transform:uppercase;}
body.asc-page-people .panel p{margin:0 0 8px;}
body.asc-page-people .panel p:last-child{margin-bottom:0;}
body.asc-page-people .p-purple{background:var(--c-purple); color:#2c0247;}
body.asc-page-people .p-teal{background:var(--c-teal); color:#014b4e;}
body.asc-page-people .p-yellow{background:var(--c-yellow); color:#5a4400;}
/* Contact's two panels, coloured as on the mockup. */
body.asc-page-people .p-blue{background:var(--c-blue); color:#12307a;}
body.asc-page-people .p-lilac{background:var(--c-lilac); color:#3d1170;}
body.asc-page-people .pan-ic{display:flex; gap:20px; align-items:flex-start;}
body.asc-page-people .pan-ic .p-ic{width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,.62);
                display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:2px;}
body.asc-page-people .pan-ic .p-ic img{width:52px; height:52px; object-fit:contain; display:block;}
body.asc-page-people .pan-ic .p-ic svg{width:44px; height:44px; fill:none; stroke:currentColor; stroke-width:1.8;
                    stroke-linecap:round; stroke-linejoin:round;}
body.asc-page-people .vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
body.asc-page-people .btns{margin:22px 0 6px;}
body.asc-page-people .btns a{display:inline-block; border-radius:8px; padding:12px 22px; font-weight:700;
          font-size:.95rem; text-decoration:none; margin:0 12px 10px 0;}
body.asc-page-people .btn-fill{background:var(--purple); color:#fff;}
body.asc-page-people .btn-out{border:2px solid var(--purple); color:var(--purple);}
body.asc-page-people .note{font-size:.86rem; color:#4b5563; line-height:1.55;}
body.asc-page-people table.tbl{border-collapse:collapse; width:100%; font-size:.9rem; margin-top:8px;}
body.asc-page-people table.tbl caption{text-align:left; font-size:.86rem; color:#4b5563; padding-bottom:8px;}
body.asc-page-people table.tbl th, body.asc-page-people table.tbl td{border-bottom:1px solid #e6e6ee; padding:9px 10px; text-align:right;}
body.asc-page-people table.tbl th:first-child, body.asc-page-people table.tbl td:first-child{text-align:left;}
body.asc-page-people table.tbl thead th{color:var(--navy); border-bottom:2px solid #d8d8e4;}
body.asc-page-people .scroll{overflow-x:auto;}

  /* The sidebar is a fixed 288px next to a flexible column, so the two-column
     layout runs out of room well before a phone width. Stack at 900px, which is
     where the content actually starts to crowd rather than where a device is. */
  @media (max-width:900px){
body.asc-page-people .cols{flex-direction:column; align-items:stretch;}
body.asc-page-people .side, body.asc-page-people .main{flex:1 1 auto; width:100%; max-width:100%;}
body.asc-page-people .title-xl{font-size:3.4rem;}
  }
  @media (max-width:760px){
body.asc-page-people .title{font-size:2.1rem;}
body.asc-page-people .hdr{flex-direction:column; align-items:flex-start; gap:12px;}
body.asc-page-people .title-xl{font-size:2.6rem;}
  }
  /* Below this the oversized display heading overflows its own line box. */
  @media (max-width:480px){
body.asc-page-people .title-xl{font-size:2rem;}
body.asc-page-people .title{font-size:1.75rem;}
body.asc-page-people .btns a{display:block; margin-right:0; text-align:center;}
body.asc-page-people .metric{flex:1 1 100%;}
  }
  /* Respect a stated preference for less motion (WCAG 2.3.3). */
  @media (prefers-reduced-motion:reduce){
body.asc-page-people *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important; scroll-behavior:auto !important;}
  }


/* ===== website/expenditure.html — scoped to .asc-page-expenditure ===== */
:root{
    --navy:#051d55; --purple:#45026d; --teal:#01777b; --gold:#c99700;
    --c-purple:#efe9f4; --c-yellow:#fef1d8; --c-teal:#e2f0f0;
    --c-blue:#eaeffb; --c-lilac:#f3eefb;
  }
body.asc-page-expenditure *{box-sizing:border-box;}
body.asc-page-expenditure{margin:0; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       color:#23262e; background:#fff;}
body.asc-page-expenditure .wrap{max-width:1150px; margin:0 auto; padding:18px 26px 40px;}
body.asc-page-expenditure .hdr{display:flex; align-items:center; justify-content:space-between; padding:6px 0 18px;}
body.asc-page-expenditure .hdr img.logo{height:46px;}
body.asc-page-expenditure .nav{display:flex; gap:22px; flex-wrap:wrap;}
body.asc-page-expenditure .nav a{color:#374151; text-decoration:none; font-weight:600; font-size:.95rem;}
body.asc-page-expenditure .nav a:hover{color:var(--purple); text-decoration:underline;}
body.asc-page-expenditure .nav a.active{color:var(--navy); border-bottom:3px solid var(--purple); padding-bottom:4px;}
body.asc-page-expenditure .title{color:var(--navy); font-size:3rem; font-weight:800; line-height:1.1; margin:0 0 14px;}
/* Section pages use the oversized uppercase heading from the mockup. */
body.asc-page-expenditure .title-xl{color:var(--navy); font-size:4.4rem; font-weight:800; line-height:1;
            letter-spacing:-.01em; text-transform:uppercase; margin:0 0 14px;}
body.asc-page-expenditure .sub{font-size:1.18rem; color:#330060; line-height:1.45; margin:0 0 22px; max-width:820px;}
body.asc-page-expenditure h2{color:var(--navy); font-size:1.35rem; margin:34px 0 12px;}
/* two-column section layout: sidebar + content */
body.asc-page-expenditure .cols{display:flex; gap:30px; align-items:flex-start;}
body.asc-page-expenditure .side{flex:0 0 288px;}
body.asc-page-expenditure .main{flex:1 1 auto; min-width:0;}
body.asc-page-expenditure .side h2{margin-top:0;}
body.asc-page-expenditure .chooser{border:1.5px solid #e6e6ee; border-radius:16px; padding:16px 18px; margin-bottom:18px;}
body.asc-page-expenditure .chooser .ch-t{color:var(--navy); font-weight:800; font-size:1.15rem;}
body.asc-page-expenditure .chooser .ch-s{color:#4b5563; font-size:.88rem; margin:4px 0 12px;}
body.asc-page-expenditure .chooser select{width:100%; padding:11px 12px; border:1.5px solid #d8d8e4; border-radius:9px;
                  font-size:.95rem; color:var(--navy); background:#fff; font-family:inherit;}
body.asc-page-expenditure .findings{border:1.5px solid #e6e6ee; border-radius:16px; padding:16px 16px 6px;}
body.asc-page-expenditure .findings .f-t{color:var(--navy); font-weight:800; font-size:1.08rem; margin-bottom:12px;}
body.asc-page-expenditure .fcard{border-radius:12px; padding:13px 14px; margin-bottom:12px; display:flex; gap:12px;}
body.asc-page-expenditure .fcard .f-ic{width:40px; height:40px; flex:0 0 auto;}
body.asc-page-expenditure .fcard .f-ic svg{width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:1.8;
                   stroke-linecap:round; stroke-linejoin:round;}
/* Cropped artwork, so it is sized rather than coloured. */
body.asc-page-expenditure .fcard .f-ic img{width:100%; height:100%; object-fit:contain; display:block;}
body.asc-page-expenditure .fcard .f-mark{display:flex; flex-direction:column; align-items:center; gap:9px; flex:0 0 auto;}
body.asc-page-expenditure .fcard .num{width:30px; height:30px; border-radius:50%; color:#fff; font-weight:800;
              font-size:.9rem; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
body.asc-page-expenditure .fcard .f-h{font-weight:800; font-size:.93rem; line-height:1.32; margin-bottom:5px;}
body.asc-page-expenditure .fcard .f-b{font-size:.82rem; color:#3f4652; line-height:1.5;}
/* Indicator cards. Three stacked layers, as on the mockup:
       1. icon + label      2. the figure      3. the change pill
     Laid out as a flex column with the middle layer growing, so the three sit
     top / centre / bottom and every card lines up whatever the label wraps to.
     An earlier version propped this up with min-heights measured off the
     longest label, which broke as soon as any wording changed. */
body.asc-page-expenditure .metrics{display:flex; gap:12px; margin:22px 0 6px; flex-wrap:wrap; align-items:stretch;}
body.asc-page-expenditure .metric{flex:1 1 128px; min-width:128px; border:1.5px solid #e6e6ee; border-radius:16px;
          padding:16px 14px 14px; display:flex; flex-direction:column; gap:14px;}
  /* Share one set of row heights across the whole row, so all three layers line
     up between cards however the labels wrap. Without this the middle layer
     absorbs a different amount of slack in each card and the figures stagger. */
  @supports (grid-template-rows: subgrid){
body.asc-page-expenditure .metrics{display:grid; grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
             grid-template-rows:auto 1fr auto;}
/* min-width:0 so the card shrinks to its track: a grid item defaults to
       min-width:auto and card 4's "Independence" pushed the whole card 3px
       wider than its column, taking the label and pill over the edge with it. */
body.asc-page-expenditure .metric{display:grid; grid-template-rows:subgrid; grid-row:span 3; min-width:0;}
  }
/* Each layer is itself a grid item, so it needs min-width:0 too — otherwise
     the row refuses to shrink below its content and pushes past the card. */
body.asc-page-expenditure .metric .m-top{display:flex; align-items:flex-start; gap:10px; flex:0 0 auto; min-width:0;}
body.asc-page-expenditure .metric .m-ic{width:42px; height:42px; border-radius:50%; flex:0 0 auto; margin-top:1px;
                display:flex; align-items:center; justify-content:center;}
body.asc-page-expenditure .metric .m-ic svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9;
                    stroke-linecap:round; stroke-linejoin:round;}
body.asc-page-expenditure .metric .m-ic img{width:24px; height:24px; object-fit:contain; display:block;}
/* min-width:0 because a flex/grid item will not shrink below its longest word
     by default, and "Independence" is wider than this column; hyphens let it
     break at a sensible point rather than mid-syllable. */
body.asc-page-expenditure .metric .m-lab{font-size:.76rem; font-weight:700; color:var(--navy); line-height:1.3;
                 min-width:0; overflow-wrap:break-word; hyphens:auto;}
/* The middle layer takes the slack, which centres the figure between the
     label and the pill without any measured heights. */
body.asc-page-expenditure .metric .m-val{flex:1 1 auto; display:flex; align-items:center; justify-content:center;
                 font-size:1.8rem; font-weight:800; color:var(--navy); line-height:1.05;
                 font-variant-numeric:tabular-nums; margin:0; min-width:0;}
body.asc-page-expenditure .metric .m-val.m-text{font-size:1.05rem; line-height:1.3;}
body.asc-page-expenditure .metric .m-val.m-long{font-size:1.5rem;}
/* Bottom layer: a full-width centred pill, like the mockup. */
body.asc-page-expenditure .metric .m-change{flex:0 0 auto; min-height:30px; min-width:0;}
/* Allowed to wrap: "+91.2% since 2018" does not fit one line in a 146px card,
     and nowrap pushed it past the card edge. Subgrid keeps the row the same
     height everywhere, so a card that wraps does not knock the others out. */
body.asc-page-expenditure .badge{display:block; border-radius:999px; padding:6px 8px; font-size:.71rem; font-weight:700;
         white-space:normal; text-align:center; line-height:1.35;}
body.asc-page-expenditure .b-up{background:#e7f5ec; color:#136c37;}
body.asc-page-expenditure .b-down{background:#fdeaea; color:#a41c1c;}
body.asc-page-expenditure .b-flat{background:#eef0f4; color:#414a58;}
body.asc-page-expenditure .foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
        margin-top:38px; padding-top:14px; border-top:1px solid #e6e6ee;
        color:#6b7280; font-size:.78rem;}
body.asc-page-expenditure .foot a{color:#6b7280;}
body.asc-page-expenditure a:focus-visible, body.asc-page-expenditure button:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
body.asc-page-expenditure .skip{position:absolute; left:-9999px;}
body.asc-page-expenditure .skip:focus{left:12px; top:12px; background:#fff; padding:10px 16px; z-index:10;
              border:2px solid var(--purple); border-radius:8px;}
/* charts */
body.asc-page-expenditure .chartbox{border:1.5px solid #e6e6ee; border-radius:16px; padding:16px 18px 12px; margin:6px 0 4px;}
body.asc-page-expenditure .chart{width:100%; height:auto; display:block;}
body.asc-page-expenditure .legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:10px; font-size:.84rem; color:#4b5563;}
body.asc-page-expenditure .lg{display:flex; align-items:center; gap:7px;}
body.asc-page-expenditure .lg i{width:15px; height:4px; border-radius:2px; display:inline-block;}
body.asc-page-expenditure .lg-note{color:#6b7280; font-style:italic;}
/* figure cards */
body.asc-page-expenditure .cards{display:flex; gap:18px; margin:22px 0 6px; flex-wrap:wrap;}
body.asc-page-expenditure .card{flex:1 1 210px; border:1.5px solid; border-radius:16px; padding:16px 18px; background:#fff;}
body.asc-page-expenditure .card .lab{font-size:.86rem; color:#4b5563; line-height:1.4;}
body.asc-page-expenditure .card .val{font-size:1.7rem; font-weight:800; line-height:1.2; margin-top:8px;}
body.asc-page-expenditure .card .subv{font-size:.82rem; font-weight:700; margin-top:6px;}
/* generic panel */
body.asc-page-expenditure .panel{border-radius:18px; padding:18px 22px; margin:16px 0; line-height:1.6;}
body.asc-page-expenditure .panel h3{margin:0 0 8px; font-size:1.05rem; letter-spacing:.02em; text-transform:uppercase;}
body.asc-page-expenditure .panel p{margin:0 0 8px;}
body.asc-page-expenditure .panel p:last-child{margin-bottom:0;}
body.asc-page-expenditure .p-purple{background:var(--c-purple); color:#2c0247;}
body.asc-page-expenditure .p-teal{background:var(--c-teal); color:#014b4e;}
body.asc-page-expenditure .p-yellow{background:var(--c-yellow); color:#5a4400;}
/* Contact's two panels, coloured as on the mockup. */
body.asc-page-expenditure .p-blue{background:var(--c-blue); color:#12307a;}
body.asc-page-expenditure .p-lilac{background:var(--c-lilac); color:#3d1170;}
body.asc-page-expenditure .pan-ic{display:flex; gap:20px; align-items:flex-start;}
body.asc-page-expenditure .pan-ic .p-ic{width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,.62);
                display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:2px;}
body.asc-page-expenditure .pan-ic .p-ic img{width:52px; height:52px; object-fit:contain; display:block;}
body.asc-page-expenditure .pan-ic .p-ic svg{width:44px; height:44px; fill:none; stroke:currentColor; stroke-width:1.8;
                    stroke-linecap:round; stroke-linejoin:round;}
body.asc-page-expenditure .vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
body.asc-page-expenditure .btns{margin:22px 0 6px;}
body.asc-page-expenditure .btns a{display:inline-block; border-radius:8px; padding:12px 22px; font-weight:700;
          font-size:.95rem; text-decoration:none; margin:0 12px 10px 0;}
body.asc-page-expenditure .btn-fill{background:var(--purple); color:#fff;}
body.asc-page-expenditure .btn-out{border:2px solid var(--purple); color:var(--purple);}
body.asc-page-expenditure .note{font-size:.86rem; color:#4b5563; line-height:1.55;}
body.asc-page-expenditure table.tbl{border-collapse:collapse; width:100%; font-size:.9rem; margin-top:8px;}
body.asc-page-expenditure table.tbl caption{text-align:left; font-size:.86rem; color:#4b5563; padding-bottom:8px;}
body.asc-page-expenditure table.tbl th, body.asc-page-expenditure table.tbl td{border-bottom:1px solid #e6e6ee; padding:9px 10px; text-align:right;}
body.asc-page-expenditure table.tbl th:first-child, body.asc-page-expenditure table.tbl td:first-child{text-align:left;}
body.asc-page-expenditure table.tbl thead th{color:var(--navy); border-bottom:2px solid #d8d8e4;}
body.asc-page-expenditure .scroll{overflow-x:auto;}

  /* The sidebar is a fixed 288px next to a flexible column, so the two-column
     layout runs out of room well before a phone width. Stack at 900px, which is
     where the content actually starts to crowd rather than where a device is. */
  @media (max-width:900px){
body.asc-page-expenditure .cols{flex-direction:column; align-items:stretch;}
body.asc-page-expenditure .side, body.asc-page-expenditure .main{flex:1 1 auto; width:100%; max-width:100%;}
body.asc-page-expenditure .title-xl{font-size:3.4rem;}
  }
  @media (max-width:760px){
body.asc-page-expenditure .title{font-size:2.1rem;}
body.asc-page-expenditure .hdr{flex-direction:column; align-items:flex-start; gap:12px;}
body.asc-page-expenditure .title-xl{font-size:2.6rem;}
  }
  /* Below this the oversized display heading overflows its own line box. */
  @media (max-width:480px){
body.asc-page-expenditure .title-xl{font-size:2rem;}
body.asc-page-expenditure .title{font-size:1.75rem;}
body.asc-page-expenditure .btns a{display:block; margin-right:0; text-align:center;}
body.asc-page-expenditure .metric{flex:1 1 100%;}
  }
  /* Respect a stated preference for less motion (WCAG 2.3.3). */
  @media (prefers-reduced-motion:reduce){
body.asc-page-expenditure *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important; scroll-behavior:auto !important;}
  }


/* ===== website/local-authorities.html — scoped to .asc-page-local-authorities ===== */
:root{
    --navy:#051d55; --purple:#45026d; --teal:#01777b; --gold:#c99700;
    --c-purple:#efe9f4; --c-yellow:#fef1d8; --c-teal:#e2f0f0;
    --c-blue:#eaeffb; --c-lilac:#f3eefb;
  }
body.asc-page-local-authorities *{box-sizing:border-box;}
body.asc-page-local-authorities{margin:0; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       color:#23262e; background:#fff;}
body.asc-page-local-authorities .wrap{max-width:1150px; margin:0 auto; padding:18px 26px 40px;}
body.asc-page-local-authorities .hdr{display:flex; align-items:center; justify-content:space-between; padding:6px 0 18px;}
body.asc-page-local-authorities .hdr img.logo{height:46px;}
body.asc-page-local-authorities .nav{display:flex; gap:22px; flex-wrap:wrap;}
body.asc-page-local-authorities .nav a{color:#374151; text-decoration:none; font-weight:600; font-size:.95rem;}
body.asc-page-local-authorities .nav a:hover{color:var(--purple); text-decoration:underline;}
body.asc-page-local-authorities .nav a.active{color:var(--navy); border-bottom:3px solid var(--purple); padding-bottom:4px;}
body.asc-page-local-authorities .title{color:var(--navy); font-size:3rem; font-weight:800; line-height:1.1; margin:0 0 14px;}
/* Section pages use the oversized uppercase heading from the mockup. */
body.asc-page-local-authorities .title-xl{color:var(--navy); font-size:4.4rem; font-weight:800; line-height:1;
            letter-spacing:-.01em; text-transform:uppercase; margin:0 0 14px;}
body.asc-page-local-authorities .sub{font-size:1.18rem; color:#330060; line-height:1.45; margin:0 0 22px; max-width:820px;}
body.asc-page-local-authorities h2{color:var(--navy); font-size:1.35rem; margin:34px 0 12px;}
/* two-column section layout: sidebar + content */
body.asc-page-local-authorities .cols{display:flex; gap:30px; align-items:flex-start;}
body.asc-page-local-authorities .side{flex:0 0 288px;}
body.asc-page-local-authorities .main{flex:1 1 auto; min-width:0;}
body.asc-page-local-authorities .side h2{margin-top:0;}
body.asc-page-local-authorities .chooser{border:1.5px solid #e6e6ee; border-radius:16px; padding:16px 18px; margin-bottom:18px;}
body.asc-page-local-authorities .chooser .ch-t{color:var(--navy); font-weight:800; font-size:1.15rem;}
body.asc-page-local-authorities .chooser .ch-s{color:#4b5563; font-size:.88rem; margin:4px 0 12px;}
body.asc-page-local-authorities .chooser select{width:100%; padding:11px 12px; border:1.5px solid #d8d8e4; border-radius:9px;
                  font-size:.95rem; color:var(--navy); background:#fff; font-family:inherit;}
body.asc-page-local-authorities .findings{border:1.5px solid #e6e6ee; border-radius:16px; padding:16px 16px 6px;}
body.asc-page-local-authorities .findings .f-t{color:var(--navy); font-weight:800; font-size:1.08rem; margin-bottom:12px;}
body.asc-page-local-authorities .fcard{border-radius:12px; padding:13px 14px; margin-bottom:12px; display:flex; gap:12px;}
body.asc-page-local-authorities .fcard .f-ic{width:40px; height:40px; flex:0 0 auto;}
body.asc-page-local-authorities .fcard .f-ic svg{width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:1.8;
                   stroke-linecap:round; stroke-linejoin:round;}
/* Cropped artwork, so it is sized rather than coloured. */
body.asc-page-local-authorities .fcard .f-ic img{width:100%; height:100%; object-fit:contain; display:block;}
body.asc-page-local-authorities .fcard .f-mark{display:flex; flex-direction:column; align-items:center; gap:9px; flex:0 0 auto;}
body.asc-page-local-authorities .fcard .num{width:30px; height:30px; border-radius:50%; color:#fff; font-weight:800;
              font-size:.9rem; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
body.asc-page-local-authorities .fcard .f-h{font-weight:800; font-size:.93rem; line-height:1.32; margin-bottom:5px;}
body.asc-page-local-authorities .fcard .f-b{font-size:.82rem; color:#3f4652; line-height:1.5;}
/* Indicator cards. Three stacked layers, as on the mockup:
       1. icon + label      2. the figure      3. the change pill
     Laid out as a flex column with the middle layer growing, so the three sit
     top / centre / bottom and every card lines up whatever the label wraps to.
     An earlier version propped this up with min-heights measured off the
     longest label, which broke as soon as any wording changed. */
body.asc-page-local-authorities .metrics{display:flex; gap:12px; margin:22px 0 6px; flex-wrap:wrap; align-items:stretch;}
body.asc-page-local-authorities .metric{flex:1 1 128px; min-width:128px; border:1.5px solid #e6e6ee; border-radius:16px;
          padding:16px 14px 14px; display:flex; flex-direction:column; gap:14px;}
  /* Share one set of row heights across the whole row, so all three layers line
     up between cards however the labels wrap. Without this the middle layer
     absorbs a different amount of slack in each card and the figures stagger. */
  @supports (grid-template-rows: subgrid){
body.asc-page-local-authorities .metrics{display:grid; grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
             grid-template-rows:auto 1fr auto;}
/* min-width:0 so the card shrinks to its track: a grid item defaults to
       min-width:auto and card 4's "Independence" pushed the whole card 3px
       wider than its column, taking the label and pill over the edge with it. */
body.asc-page-local-authorities .metric{display:grid; grid-template-rows:subgrid; grid-row:span 3; min-width:0;}
  }
/* Each layer is itself a grid item, so it needs min-width:0 too — otherwise
     the row refuses to shrink below its content and pushes past the card. */
body.asc-page-local-authorities .metric .m-top{display:flex; align-items:flex-start; gap:10px; flex:0 0 auto; min-width:0;}
body.asc-page-local-authorities .metric .m-ic{width:42px; height:42px; border-radius:50%; flex:0 0 auto; margin-top:1px;
                display:flex; align-items:center; justify-content:center;}
body.asc-page-local-authorities .metric .m-ic svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9;
                    stroke-linecap:round; stroke-linejoin:round;}
body.asc-page-local-authorities .metric .m-ic img{width:24px; height:24px; object-fit:contain; display:block;}
/* min-width:0 because a flex/grid item will not shrink below its longest word
     by default, and "Independence" is wider than this column; hyphens let it
     break at a sensible point rather than mid-syllable. */
body.asc-page-local-authorities .metric .m-lab{font-size:.76rem; font-weight:700; color:var(--navy); line-height:1.3;
                 min-width:0; overflow-wrap:break-word; hyphens:auto;}
/* The middle layer takes the slack, which centres the figure between the
     label and the pill without any measured heights. */
body.asc-page-local-authorities .metric .m-val{flex:1 1 auto; display:flex; align-items:center; justify-content:center;
                 font-size:1.8rem; font-weight:800; color:var(--navy); line-height:1.05;
                 font-variant-numeric:tabular-nums; margin:0; min-width:0;}
body.asc-page-local-authorities .metric .m-val.m-text{font-size:1.05rem; line-height:1.3;}
body.asc-page-local-authorities .metric .m-val.m-long{font-size:1.5rem;}
/* Bottom layer: a full-width centred pill, like the mockup. */
body.asc-page-local-authorities .metric .m-change{flex:0 0 auto; min-height:30px; min-width:0;}
/* Allowed to wrap: "+91.2% since 2018" does not fit one line in a 146px card,
     and nowrap pushed it past the card edge. Subgrid keeps the row the same
     height everywhere, so a card that wraps does not knock the others out. */
body.asc-page-local-authorities .badge{display:block; border-radius:999px; padding:6px 8px; font-size:.71rem; font-weight:700;
         white-space:normal; text-align:center; line-height:1.35;}
body.asc-page-local-authorities .b-up{background:#e7f5ec; color:#136c37;}
body.asc-page-local-authorities .b-down{background:#fdeaea; color:#a41c1c;}
body.asc-page-local-authorities .b-flat{background:#eef0f4; color:#414a58;}
body.asc-page-local-authorities .foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
        margin-top:38px; padding-top:14px; border-top:1px solid #e6e6ee;
        color:#6b7280; font-size:.78rem;}
body.asc-page-local-authorities .foot a{color:#6b7280;}
body.asc-page-local-authorities a:focus-visible, body.asc-page-local-authorities button:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
body.asc-page-local-authorities .skip{position:absolute; left:-9999px;}
body.asc-page-local-authorities .skip:focus{left:12px; top:12px; background:#fff; padding:10px 16px; z-index:10;
              border:2px solid var(--purple); border-radius:8px;}
/* charts */
body.asc-page-local-authorities .chartbox{border:1.5px solid #e6e6ee; border-radius:16px; padding:16px 18px 12px; margin:6px 0 4px;}
body.asc-page-local-authorities .chart{width:100%; height:auto; display:block;}
body.asc-page-local-authorities .legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:10px; font-size:.84rem; color:#4b5563;}
body.asc-page-local-authorities .lg{display:flex; align-items:center; gap:7px;}
body.asc-page-local-authorities .lg i{width:15px; height:4px; border-radius:2px; display:inline-block;}
body.asc-page-local-authorities .lg-note{color:#6b7280; font-style:italic;}
/* figure cards */
body.asc-page-local-authorities .cards{display:flex; gap:18px; margin:22px 0 6px; flex-wrap:wrap;}
body.asc-page-local-authorities .card{flex:1 1 210px; border:1.5px solid; border-radius:16px; padding:16px 18px; background:#fff;}
body.asc-page-local-authorities .card .lab{font-size:.86rem; color:#4b5563; line-height:1.4;}
body.asc-page-local-authorities .card .val{font-size:1.7rem; font-weight:800; line-height:1.2; margin-top:8px;}
body.asc-page-local-authorities .card .subv{font-size:.82rem; font-weight:700; margin-top:6px;}
/* generic panel */
body.asc-page-local-authorities .panel{border-radius:18px; padding:18px 22px; margin:16px 0; line-height:1.6;}
body.asc-page-local-authorities .panel h3{margin:0 0 8px; font-size:1.05rem; letter-spacing:.02em; text-transform:uppercase;}
body.asc-page-local-authorities .panel p{margin:0 0 8px;}
body.asc-page-local-authorities .panel p:last-child{margin-bottom:0;}
body.asc-page-local-authorities .p-purple{background:var(--c-purple); color:#2c0247;}
body.asc-page-local-authorities .p-teal{background:var(--c-teal); color:#014b4e;}
body.asc-page-local-authorities .p-yellow{background:var(--c-yellow); color:#5a4400;}
/* Contact's two panels, coloured as on the mockup. */
body.asc-page-local-authorities .p-blue{background:var(--c-blue); color:#12307a;}
body.asc-page-local-authorities .p-lilac{background:var(--c-lilac); color:#3d1170;}
body.asc-page-local-authorities .pan-ic{display:flex; gap:20px; align-items:flex-start;}
body.asc-page-local-authorities .pan-ic .p-ic{width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,.62);
                display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:2px;}
body.asc-page-local-authorities .pan-ic .p-ic img{width:52px; height:52px; object-fit:contain; display:block;}
body.asc-page-local-authorities .pan-ic .p-ic svg{width:44px; height:44px; fill:none; stroke:currentColor; stroke-width:1.8;
                    stroke-linecap:round; stroke-linejoin:round;}
body.asc-page-local-authorities .vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
body.asc-page-local-authorities .btns{margin:22px 0 6px;}
body.asc-page-local-authorities .btns a{display:inline-block; border-radius:8px; padding:12px 22px; font-weight:700;
          font-size:.95rem; text-decoration:none; margin:0 12px 10px 0;}
body.asc-page-local-authorities .btn-fill{background:var(--purple); color:#fff;}
body.asc-page-local-authorities .btn-out{border:2px solid var(--purple); color:var(--purple);}
body.asc-page-local-authorities .note{font-size:.86rem; color:#4b5563; line-height:1.55;}
body.asc-page-local-authorities table.tbl{border-collapse:collapse; width:100%; font-size:.9rem; margin-top:8px;}
body.asc-page-local-authorities table.tbl caption{text-align:left; font-size:.86rem; color:#4b5563; padding-bottom:8px;}
body.asc-page-local-authorities table.tbl th, body.asc-page-local-authorities table.tbl td{border-bottom:1px solid #e6e6ee; padding:9px 10px; text-align:right;}
body.asc-page-local-authorities table.tbl th:first-child, body.asc-page-local-authorities table.tbl td:first-child{text-align:left;}
body.asc-page-local-authorities table.tbl thead th{color:var(--navy); border-bottom:2px solid #d8d8e4;}
body.asc-page-local-authorities .scroll{overflow-x:auto;}

  /* The sidebar is a fixed 288px next to a flexible column, so the two-column
     layout runs out of room well before a phone width. Stack at 900px, which is
     where the content actually starts to crowd rather than where a device is. */
  @media (max-width:900px){
body.asc-page-local-authorities .cols{flex-direction:column; align-items:stretch;}
body.asc-page-local-authorities .side, body.asc-page-local-authorities .main{flex:1 1 auto; width:100%; max-width:100%;}
body.asc-page-local-authorities .title-xl{font-size:3.4rem;}
  }
  @media (max-width:760px){
body.asc-page-local-authorities .title{font-size:2.1rem;}
body.asc-page-local-authorities .hdr{flex-direction:column; align-items:flex-start; gap:12px;}
body.asc-page-local-authorities .title-xl{font-size:2.6rem;}
  }
  /* Below this the oversized display heading overflows its own line box. */
  @media (max-width:480px){
body.asc-page-local-authorities .title-xl{font-size:2rem;}
body.asc-page-local-authorities .title{font-size:1.75rem;}
body.asc-page-local-authorities .btns a{display:block; margin-right:0; text-align:center;}
body.asc-page-local-authorities .metric{flex:1 1 100%;}
  }
  /* Respect a stated preference for less motion (WCAG 2.3.3). */
  @media (prefers-reduced-motion:reduce){
body.asc-page-local-authorities *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important; scroll-behavior:auto !important;}
  }


/* ===== website/contact.html — scoped to .asc-page-contact ===== */
:root{
    --navy:#051d55; --purple:#45026d; --teal:#01777b; --gold:#c99700;
    --c-purple:#efe9f4; --c-yellow:#fef1d8; --c-teal:#e2f0f0;
    --c-blue:#eaeffb; --c-lilac:#f3eefb;
  }
body.asc-page-contact *{box-sizing:border-box;}
body.asc-page-contact{margin:0; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       color:#23262e; background:#fff;}
body.asc-page-contact .wrap{max-width:1150px; margin:0 auto; padding:18px 26px 40px;}
body.asc-page-contact .hdr{display:flex; align-items:center; justify-content:space-between; padding:6px 0 18px;}
body.asc-page-contact .hdr img.logo{height:46px;}
body.asc-page-contact .nav{display:flex; gap:22px; flex-wrap:wrap;}
body.asc-page-contact .nav a{color:#374151; text-decoration:none; font-weight:600; font-size:.95rem;}
body.asc-page-contact .nav a:hover{color:var(--purple); text-decoration:underline;}
body.asc-page-contact .nav a.active{color:var(--navy); border-bottom:3px solid var(--purple); padding-bottom:4px;}
body.asc-page-contact .title{color:var(--navy); font-size:3rem; font-weight:800; line-height:1.1; margin:0 0 14px;}
/* Section pages use the oversized uppercase heading from the mockup. */
body.asc-page-contact .title-xl{color:var(--navy); font-size:4.4rem; font-weight:800; line-height:1;
            letter-spacing:-.01em; text-transform:uppercase; margin:0 0 14px;}
body.asc-page-contact .sub{font-size:1.18rem; color:#330060; line-height:1.45; margin:0 0 22px; max-width:820px;}
body.asc-page-contact h2{color:var(--navy); font-size:1.35rem; margin:34px 0 12px;}
/* two-column section layout: sidebar + content */
body.asc-page-contact .cols{display:flex; gap:30px; align-items:flex-start;}
body.asc-page-contact .side{flex:0 0 288px;}
body.asc-page-contact .main{flex:1 1 auto; min-width:0;}
body.asc-page-contact .side h2{margin-top:0;}
body.asc-page-contact .chooser{border:1.5px solid #e6e6ee; border-radius:16px; padding:16px 18px; margin-bottom:18px;}
body.asc-page-contact .chooser .ch-t{color:var(--navy); font-weight:800; font-size:1.15rem;}
body.asc-page-contact .chooser .ch-s{color:#4b5563; font-size:.88rem; margin:4px 0 12px;}
body.asc-page-contact .chooser select{width:100%; padding:11px 12px; border:1.5px solid #d8d8e4; border-radius:9px;
                  font-size:.95rem; color:var(--navy); background:#fff; font-family:inherit;}
body.asc-page-contact .findings{border:1.5px solid #e6e6ee; border-radius:16px; padding:16px 16px 6px;}
body.asc-page-contact .findings .f-t{color:var(--navy); font-weight:800; font-size:1.08rem; margin-bottom:12px;}
body.asc-page-contact .fcard{border-radius:12px; padding:13px 14px; margin-bottom:12px; display:flex; gap:12px;}
body.asc-page-contact .fcard .f-ic{width:40px; height:40px; flex:0 0 auto;}
body.asc-page-contact .fcard .f-ic svg{width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:1.8;
                   stroke-linecap:round; stroke-linejoin:round;}
/* Cropped artwork, so it is sized rather than coloured. */
body.asc-page-contact .fcard .f-ic img{width:100%; height:100%; object-fit:contain; display:block;}
body.asc-page-contact .fcard .f-mark{display:flex; flex-direction:column; align-items:center; gap:9px; flex:0 0 auto;}
body.asc-page-contact .fcard .num{width:30px; height:30px; border-radius:50%; color:#fff; font-weight:800;
              font-size:.9rem; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
body.asc-page-contact .fcard .f-h{font-weight:800; font-size:.93rem; line-height:1.32; margin-bottom:5px;}
body.asc-page-contact .fcard .f-b{font-size:.82rem; color:#3f4652; line-height:1.5;}
/* Indicator cards. Three stacked layers, as on the mockup:
       1. icon + label      2. the figure      3. the change pill
     Laid out as a flex column with the middle layer growing, so the three sit
     top / centre / bottom and every card lines up whatever the label wraps to.
     An earlier version propped this up with min-heights measured off the
     longest label, which broke as soon as any wording changed. */
body.asc-page-contact .metrics{display:flex; gap:12px; margin:22px 0 6px; flex-wrap:wrap; align-items:stretch;}
body.asc-page-contact .metric{flex:1 1 128px; min-width:128px; border:1.5px solid #e6e6ee; border-radius:16px;
          padding:16px 14px 14px; display:flex; flex-direction:column; gap:14px;}
  /* Share one set of row heights across the whole row, so all three layers line
     up between cards however the labels wrap. Without this the middle layer
     absorbs a different amount of slack in each card and the figures stagger. */
  @supports (grid-template-rows: subgrid){
body.asc-page-contact .metrics{display:grid; grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
             grid-template-rows:auto 1fr auto;}
/* min-width:0 so the card shrinks to its track: a grid item defaults to
       min-width:auto and card 4's "Independence" pushed the whole card 3px
       wider than its column, taking the label and pill over the edge with it. */
body.asc-page-contact .metric{display:grid; grid-template-rows:subgrid; grid-row:span 3; min-width:0;}
  }
/* Each layer is itself a grid item, so it needs min-width:0 too — otherwise
     the row refuses to shrink below its content and pushes past the card. */
body.asc-page-contact .metric .m-top{display:flex; align-items:flex-start; gap:10px; flex:0 0 auto; min-width:0;}
body.asc-page-contact .metric .m-ic{width:42px; height:42px; border-radius:50%; flex:0 0 auto; margin-top:1px;
                display:flex; align-items:center; justify-content:center;}
body.asc-page-contact .metric .m-ic svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9;
                    stroke-linecap:round; stroke-linejoin:round;}
body.asc-page-contact .metric .m-ic img{width:24px; height:24px; object-fit:contain; display:block;}
/* min-width:0 because a flex/grid item will not shrink below its longest word
     by default, and "Independence" is wider than this column; hyphens let it
     break at a sensible point rather than mid-syllable. */
body.asc-page-contact .metric .m-lab{font-size:.76rem; font-weight:700; color:var(--navy); line-height:1.3;
                 min-width:0; overflow-wrap:break-word; hyphens:auto;}
/* The middle layer takes the slack, which centres the figure between the
     label and the pill without any measured heights. */
body.asc-page-contact .metric .m-val{flex:1 1 auto; display:flex; align-items:center; justify-content:center;
                 font-size:1.8rem; font-weight:800; color:var(--navy); line-height:1.05;
                 font-variant-numeric:tabular-nums; margin:0; min-width:0;}
body.asc-page-contact .metric .m-val.m-text{font-size:1.05rem; line-height:1.3;}
body.asc-page-contact .metric .m-val.m-long{font-size:1.5rem;}
/* Bottom layer: a full-width centred pill, like the mockup. */
body.asc-page-contact .metric .m-change{flex:0 0 auto; min-height:30px; min-width:0;}
/* Allowed to wrap: "+91.2% since 2018" does not fit one line in a 146px card,
     and nowrap pushed it past the card edge. Subgrid keeps the row the same
     height everywhere, so a card that wraps does not knock the others out. */
body.asc-page-contact .badge{display:block; border-radius:999px; padding:6px 8px; font-size:.71rem; font-weight:700;
         white-space:normal; text-align:center; line-height:1.35;}
body.asc-page-contact .b-up{background:#e7f5ec; color:#136c37;}
body.asc-page-contact .b-down{background:#fdeaea; color:#a41c1c;}
body.asc-page-contact .b-flat{background:#eef0f4; color:#414a58;}
body.asc-page-contact .foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
        margin-top:38px; padding-top:14px; border-top:1px solid #e6e6ee;
        color:#6b7280; font-size:.78rem;}
body.asc-page-contact .foot a{color:#6b7280;}
body.asc-page-contact a:focus-visible, body.asc-page-contact button:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
body.asc-page-contact .skip{position:absolute; left:-9999px;}
body.asc-page-contact .skip:focus{left:12px; top:12px; background:#fff; padding:10px 16px; z-index:10;
              border:2px solid var(--purple); border-radius:8px;}
/* charts */
body.asc-page-contact .chartbox{border:1.5px solid #e6e6ee; border-radius:16px; padding:16px 18px 12px; margin:6px 0 4px;}
body.asc-page-contact .chart{width:100%; height:auto; display:block;}
body.asc-page-contact .legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:10px; font-size:.84rem; color:#4b5563;}
body.asc-page-contact .lg{display:flex; align-items:center; gap:7px;}
body.asc-page-contact .lg i{width:15px; height:4px; border-radius:2px; display:inline-block;}
body.asc-page-contact .lg-note{color:#6b7280; font-style:italic;}
/* figure cards */
body.asc-page-contact .cards{display:flex; gap:18px; margin:22px 0 6px; flex-wrap:wrap;}
body.asc-page-contact .card{flex:1 1 210px; border:1.5px solid; border-radius:16px; padding:16px 18px; background:#fff;}
body.asc-page-contact .card .lab{font-size:.86rem; color:#4b5563; line-height:1.4;}
body.asc-page-contact .card .val{font-size:1.7rem; font-weight:800; line-height:1.2; margin-top:8px;}
body.asc-page-contact .card .subv{font-size:.82rem; font-weight:700; margin-top:6px;}
/* generic panel */
body.asc-page-contact .panel{border-radius:18px; padding:18px 22px; margin:16px 0; line-height:1.6;}
body.asc-page-contact .panel h3{margin:0 0 8px; font-size:1.05rem; letter-spacing:.02em; text-transform:uppercase;}
body.asc-page-contact .panel p{margin:0 0 8px;}
body.asc-page-contact .panel p:last-child{margin-bottom:0;}
body.asc-page-contact .p-purple{background:var(--c-purple); color:#2c0247;}
body.asc-page-contact .p-teal{background:var(--c-teal); color:#014b4e;}
body.asc-page-contact .p-yellow{background:var(--c-yellow); color:#5a4400;}
/* Contact's two panels, coloured as on the mockup. */
body.asc-page-contact .p-blue{background:var(--c-blue); color:#12307a;}
body.asc-page-contact .p-lilac{background:var(--c-lilac); color:#3d1170;}
body.asc-page-contact .pan-ic{display:flex; gap:20px; align-items:flex-start;}
body.asc-page-contact .pan-ic .p-ic{width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,.62);
                display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:2px;}
body.asc-page-contact .pan-ic .p-ic img{width:52px; height:52px; object-fit:contain; display:block;}
body.asc-page-contact .pan-ic .p-ic svg{width:44px; height:44px; fill:none; stroke:currentColor; stroke-width:1.8;
                    stroke-linecap:round; stroke-linejoin:round;}
body.asc-page-contact .vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
body.asc-page-contact .btns{margin:22px 0 6px;}
body.asc-page-contact .btns a{display:inline-block; border-radius:8px; padding:12px 22px; font-weight:700;
          font-size:.95rem; text-decoration:none; margin:0 12px 10px 0;}
body.asc-page-contact .btn-fill{background:var(--purple); color:#fff;}
body.asc-page-contact .btn-out{border:2px solid var(--purple); color:var(--purple);}
body.asc-page-contact .note{font-size:.86rem; color:#4b5563; line-height:1.55;}
body.asc-page-contact table.tbl{border-collapse:collapse; width:100%; font-size:.9rem; margin-top:8px;}
body.asc-page-contact table.tbl caption{text-align:left; font-size:.86rem; color:#4b5563; padding-bottom:8px;}
body.asc-page-contact table.tbl th, body.asc-page-contact table.tbl td{border-bottom:1px solid #e6e6ee; padding:9px 10px; text-align:right;}
body.asc-page-contact table.tbl th:first-child, body.asc-page-contact table.tbl td:first-child{text-align:left;}
body.asc-page-contact table.tbl thead th{color:var(--navy); border-bottom:2px solid #d8d8e4;}
body.asc-page-contact .scroll{overflow-x:auto;}

  /* The sidebar is a fixed 288px next to a flexible column, so the two-column
     layout runs out of room well before a phone width. Stack at 900px, which is
     where the content actually starts to crowd rather than where a device is. */
  @media (max-width:900px){
body.asc-page-contact .cols{flex-direction:column; align-items:stretch;}
body.asc-page-contact .side, body.asc-page-contact .main{flex:1 1 auto; width:100%; max-width:100%;}
body.asc-page-contact .title-xl{font-size:3.4rem;}
  }
  @media (max-width:760px){
body.asc-page-contact .title{font-size:2.1rem;}
body.asc-page-contact .hdr{flex-direction:column; align-items:flex-start; gap:12px;}
body.asc-page-contact .title-xl{font-size:2.6rem;}
  }
  /* Below this the oversized display heading overflows its own line box. */
  @media (max-width:480px){
body.asc-page-contact .title-xl{font-size:2rem;}
body.asc-page-contact .title{font-size:1.75rem;}
body.asc-page-contact .btns a{display:block; margin-right:0; text-align:center;}
body.asc-page-contact .metric{flex:1 1 100%;}
  }
  /* Respect a stated preference for less motion (WCAG 2.3.3). */
  @media (prefers-reduced-motion:reduce){
body.asc-page-contact *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important; scroll-behavior:auto !important;}
  }
body.asc-page-contact .contactcard{border:1.5px solid #e6e6ee; border-radius:18px; padding:6px 24px; margin:18px 0 26px;}
body.asc-page-contact .crow{display:flex; align-items:center; gap:20px; padding:18px 0; border-bottom:1px solid #eeeef4;}
body.asc-page-contact .crow:last-child{border-bottom:none;}
body.asc-page-contact .crow .ico{width:52px; height:52px; border-radius:50%; background:#e8eefb;
             display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
body.asc-page-contact .crow .ico svg{width:25px; height:25px; stroke:#0b5cad; stroke-width:1.9;
                 fill:none; stroke-linecap:round; stroke-linejoin:round;}
body.asc-page-contact .crow .ico svg.brandmark{stroke:none; width:34px; height:34px;}
body.asc-page-contact .crow .ico:has(svg.brandmark){background:transparent;}
/* Same sizing for the cropped artwork. Without this the images render at
     their natural 4x size and burst out of the card over the text. */
body.asc-page-contact .crow .ico img{width:28px; height:28px; object-fit:contain; display:block;}
body.asc-page-contact .crow .ico img.brandmark{width:34px; height:34px;}
body.asc-page-contact .crow .ico:has(img.brandmark){background:transparent;}
body.asc-page-contact .crow .who{font-weight:800; color:var(--navy); font-size:1.08rem;}
body.asc-page-contact .crow .role{color:#4b5563; font-size:.92rem; line-height:1.45; margin-top:3px;}
body.asc-page-contact .crow a{color:#0b5cad;}