/* == DESIGN TOKENS — site-wide defaults. The Design panel overrides these from the DB. == */
:root{
/* ══════════════════════════════════════════════════════════════
   CONTROL PANEL — change any value here. Nothing is hardcoded
   anywhere else. Save, refresh, done.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. COLOURS ─────────────────────────────────────────────── */
 --page-h1:#1C244B;      /* H1 colour — set per service page      */
 --navy:#1C244B;
 --c-h2:#073579;      /* secondary — section headings */
 --c-h3:#1C244B;
 --c-h4:#815C00;         /* all headings H2/H3                    */
 --body:#324A6D;         /* all paragraph text                    */
 --gold:#815C00;
 --gold-bright:#D9A63C;  /* gold legible on dark surfaces         */         /* accent: bars, +, group labels         */
 --link:#336DC2;         /* links                                 */
 --sec:#073579;          /* secondary brand colour                */
 --blue-light:#DBE1E9;   /* light blue background                 */
 --link-hover:#815C00;   /* link hover                            */
 --btn:#5186F7;          /* button fill */
 --btn-txt:#FFFFFF;      /* button text */
 --btn-hov-bg:transparent;
 --btn-hov-txt:#5186F7;  /* hover text */
 --btn-hov-bd:#5186F7;   /* hover outline */          /* button fill                           */
 --line:#E2E6EC;         /* all borders                           */
 --bar:#F1F3F6;          /* section bar + panel background        */
 --white:#fff;

/* ── 2. FONT SIZES ──────────────────────────────────────────── */
 --fs-h1:44px;           /* page title                            */
 --fs-desc:17px;         /* title descriptor (right of H1)        */
 --fs-h2:30px;           /* big section headings                  */
 --fs-bar:22px;          /* text inside grey section bars         */
 --fs-h3:18px;           /* accordion / card titles               */
 --fs-body:16px;         /* paragraphs                            */
 --fs-small:15.5px;      /* accordion body, lists, chips          */
 --fs-label:14px;        /* gold group labels                     */
 --fs-h4:18px;           /* H4 / panel labels                     */

/* ── 3. FONT WEIGHTS ────────────────────────────────────────── */
 --fw-h1:700; --fw-h2:600; --fw-bar:600; --fw-h3:600; --fw-body:400;

/* ── 4. TEXT TRANSFORM  (none = normal, uppercase = ALL CAPS) ── */
 --tt-labels:none;       /* gold group labels + A/B panel labels  */

/* ── 5. SPACING ─────────────────────────────────────────────── */
 --sec-gap:25px;         /* SAME gap between every section        */
 --title-top:60px;       /* space above page title                */
 --title-bottom:36px;    /* space below page title                */
 --img-gap:0px;         /* space around images                   */
 --bar-pad:14px 20px;    /* padding inside grey bars              */
 --card-pad:16px 20px;   /* padding inside accordions             */
 --panel-pad:24px 26px;  /* padding inside A/B panels             */
 --p-gap:15px;
 --band-pad:84px;        /* padding inside screened image bands   */
 --hero-pad:48px;        /* hero breathing room, top AND bottom   */           /* gap under each paragraph              */

/* ── 6. LAYOUT ──────────────────────────────────────────────── */
 --wrap:1140px;          /* content width                         */
 --side-pad:10px;        /* left/right page padding (see breakpoints below) */
 --measure:92ch;         /* max paragraph line length             */
 --title-gap:60px;       /* gap between H1 and its descriptor     */
 --bar-stick:5px;        /* thickness of gold stick on bars       */
 --radius:0px;           /* corners (0 = square) — buttons keep 8px via page rules */
 --line-h:1.72;          /* body line-height                      */

/* ── 8. ALIGNMENT ───────────────────────────────────────────── */
 --h1-align:left; --h2-align:left; --h3-align:left; --p-align:left;
 --title-justify:flex-start;   /* title row: flex-start | center | space-between */
 --measure-margin:0;           /* 0 = left-anchored, auto = centred block */

/* ── 9. HEADING SPACING (above / below each level) ──────────── */
 --h1-mt:0px;  --h1-mb:0px;
 --h2-mt:0px;  --h2-mb:20px;
 --h3-mt:0px;  --h3-mb:8px;

/* ── 7. FONT FAMILY ─────────────────────────────────────────── */
 --font:"Roboto Flex",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

/* Tablet and phone need real edge margin — 10px let hero text touch the bezel.
   Declared after :root so the base block stays intact. */
@media(max-width:1200px){ :root{ --side-pad:30px; } }
@media(max-width:560px){  :root{ --side-pad:20px; } }