/* ===================================================
   THEME - theme.css  (load LAST on every page)
   One place for the font, the type scale and the 3 brand colours.
   Change a value here and the whole site follows.
   =================================================== */
:root {
    /* McKinsey-style palette */
    --deep:     #051c2c;   /* deep blue    - dark sections, text on light */
    --electric: #2251ff;   /* electric blue - circle, mid sections, cards   */
    --cyan:     #00a9f4;   /* cyan          - accents, labels, hover        */

    /* Type scale (Arial everywhere) */
    --font: Arial, Helvetica, sans-serif;
    --fs-display: clamp(2.2rem, 4.6vw, 3.9rem);   /* hero statements          */
    --fs-h1:      clamp(2.2rem, 4.4vw, 3.6rem);   /* page / section titles    */
    --fs-h2:      clamp(1.8rem, 3.4vw, 2.75rem);  /* section headings         */
    --fs-h3:      1.5rem;                          /* card / item titles       */
    --fs-lead:    1.15rem;                         /* intro / quote text       */
    --fs-body:    1rem;                            /* normal paragraphs        */
    --fs-small:   .875rem;                         /* roles, notes, captions   */
    --fs-label:   .8rem;                           /* eyebrows, small caps     */
}

html, body, button, input, textarea, select { font-family: var(--font); }
body { font-size: var(--fs-body); line-height: 1.6; }
h1, h2, h3, h4, h5, h6, p, a, li, span, blockquote, label { font-family: var(--font); }

/* ---- Display / hero statements ---- */
.sh-title, .ab-statement, .ct-title, .cr-title { font-size: var(--fs-display); font-weight: 700; line-height: 1.08; letter-spacing: -1px; }
.site-menu-list a { font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 700; }

/* ---- Section titles ---- */
.sv-heading, .wd-title, .tm-title, .cta-title, .ab-mv-title, .ab-why-title, .ct-card h2, .cr-h2, .cm-title {
    font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -.5px;
}
.cm-title { font-size: 1.5rem; text-transform: none; }
.tm-title em { font-family: var(--font); font-style: normal; color: var(--cyan); }
.ab-why-title { font-weight: 700; }

/* ---- Card / item titles ---- */
.sv-card h3, .wd-item h3, .ab-steps h3, .ab-mv-h, .tm-name { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; }
.tm-name { font-size: 1.2rem; }

/* ---- Body copy ---- */
.ab-quote p, .ab-why-lead, .cta-text, .tm-text { font-size: var(--fs-lead); line-height: 1.7; }
.sv-card p, .wd-item p, .ab-mv p, .ab-steps p, .ct-info p, .cm-input { font-size: var(--fs-body); line-height: 1.7; }
.tm-role, .cm-note, .footer-links a, footer p { font-size: var(--fs-small); }

/* ---- Small labels ---- */
.sv-label, .wd-eyebrow, .tm-eyebrow, .ab-eyebrow, .ab-label, .ct-info .lbl {
    font-size: var(--fs-label); font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
}
.ab-label { font-weight: 400; font-size: 1rem; text-transform: none; letter-spacing: 1px; }

/* ---- Buttons ---- */
.cta-btn, .cm-submit { font-size: 1rem; font-weight: 700; letter-spacing: 1px; }

/* ---- Colour fixes so text stays readable on each blue ---- */
.wd-eyebrow { color: #fff; opacity: .85; }
.wd-arrow { color: var(--deep); }
.ab-mv-h { color: #fff; }
.ab-num { color: var(--deep); }
.cta { background: var(--cyan); }
.cta-title { color: var(--deep); }
.cta-text { color: var(--deep); }
.cta-btn { background: var(--deep); color: #fff; }
.cta-btn:hover { background: #fff; color: var(--deep); }
.cm-card { background: var(--electric); }
.cm-submit { background: var(--deep); }
.cm-submit:hover { background: #fff; color: var(--deep); }
.cm-input:focus { border-color: var(--cyan); }
.tm-arrow { color: var(--deep); }
.tm-arrow:hover { color: var(--deep); }
.ab-panel { background: var(--cyan); }
.ct-card { background: var(--electric); }
.ct-info .lbl { color: rgba(255, 255, 255, .75); }
.ct-info a:hover { color: var(--deep); }

/* floating + scroll buttons: cyan with deep-blue text */
.sh-scroll { color: var(--deep); font-family: var(--font); font-weight: 700; }
.sh-fab .gt { background: #fff; color: var(--deep); box-shadow: 0 6px 20px rgba(5, 28, 44, .35); }

/* footer: Location column */
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact .ft-ico { flex: 0 0 16px; margin-top: 3px; color: var(--cyan); }
.footer-contact a:hover { color: #fff !important; }
.footer-contact span.text-white-50, .footer-contact a { font-size: var(--fs-small); line-height: 1.6; }