/*
 * ds-chrome.css - the parts of the BotSpice design system every page uses (R8): fonts, tokens,
 * base, buttons, region bar, header and footer. Linked from bs-common/head.php, so it loads on
 * all pages; the redesigned pages add ds.css for their components.
 *
 * Only Inter is used here. Bricolage Grotesque is declared but downloads only on pages that
 * use it (the redesigned pages), so older pages gain one font family, not two.
 */

/* ---------- Fonts (self-hosted, Latin subset, OFL: see ../fonts/OFL-*.txt) ---------- */
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
    font-weight: 600 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
    /* Colour */
    --ds-teal: #00A39E;          /* brand: large headline accents, icons and graphics. Never under white text or as small text (3.1:1) */
    --ds-teal-700: #007A76;      /* small text and links on white; fill behind white text: buttons, CTA banner, number badges (5.4:1, WCAG AA) */
    --ds-teal-accent-band: #009B96; /* headline accent on tint/grey bands: 3.2:1 (brand teal is 2.9:1 there) */
    --ds-teal-50: #F0F8F8;       /* tinted bands, hero panel */
    --ds-teal-100: #E0F5F4;      /* pills, icon tiles */
    --ds-teal-200: #9EDCDA;      /* outline-button borders, wave lines */
    --ds-teal-150: #C9ECEA;      /* second wave line */
    --ds-panel-deep: #003D3B;    /* region bar, stat band, dark panels */
    --ds-panel-line: #095F64;    /* rules and waves on panel-deep */
    --ds-ink-teal: #0D444E;      /* dark cards, brand-tone headings */
    --ds-sea-950: #082231;       /* footer */
    --ds-mint: #8FE4E2;          /* accents and numbers on dark */
    --ds-coral: #F9566A;         /* one live dot per view only (Curio's eye counts) */
    --ds-navy: #030014;          /* card titles */
    --ds-deck-grey: #404040;     /* main part of section headlines */
    --ds-text: #2D3748;          /* body */
    --ds-text-muted: #4A5568;    /* secondary */
    --ds-text-soft: #696969;     /* tertiary, captions */
    --ds-on-dark: #E0F5F4;       /* body text on dark */
    --ds-on-dark-muted: #B8C4C6; /* secondary text on dark */
    --ds-on-dark-soft: #8C9A9D;  /* fine print on dark, logo strip text */
    --ds-surface: #FFFFFF;
    --ds-surface-soft: #F5F6F7;
    --ds-border: #E9E9E9;
    --ds-border-strong: #D5DADB;
    --ds-border-dashed: #B8C4C6;
    --ds-stage-light: #12606A;   /* Curio stage gradient, centre */
    --ds-stage-dark: #0A3540;    /* Curio stage gradient, edge */
    --ds-draft-bg: #FFF4D6;      /* draft notice on unapproved pages only */
    --ds-draft-text: #5F4500;
    --ds-draft-line: #F2D58A;

    /* Type */
    --ds-font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --ds-font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ds-fs-h1: clamp(42px, 5.2vw, 72px);
    --ds-fs-h2: clamp(32px, 3.6vw, 48px);
    --ds-fs-h2-sm: clamp(30px, 3.2vw, 44px);
    --ds-fs-h2-band: clamp(28px, 3vw, 40px);
    --ds-fs-h2-cta: clamp(30px, 3.4vw, 46px);
    --ds-fs-body: 16px;
    --ds-lh-body: 28px;
    --ds-fs-intro: 18px;
    --ds-lh-intro: 30px;
    --ds-fs-lead: 20px;
    --ds-lh-lead: 32px;
    --ds-fs-eyebrow: 18px;       /* was 13px; raised twice by Shiv on 3 Nov 2026 (15px, then 18px) */

    /* Layout */
    --ds-container: 1200px;
    --ds-gutter: clamp(20px, 4vw, 40px);
    --ds-section-y: clamp(64px, 8vw, 112px);
    --ds-section-y-sm: clamp(56px, 6vw, 88px);
    --ds-radius-btn: 14px;
    --ds-radius-btn-sm: 12px;
    --ds-radius-card-sm: 18px;
    --ds-radius-card: 24px;
    --ds-radius-panel: 32px;
    --ds-radius-pill: 999px;
    --ds-shadow-float: 0 18px 40px rgba(13, 68, 78, 0.14); /* floating hero cards only */
    --ds-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- Base ---------- */
.ds-page {
    margin: 0;
    background: var(--ds-surface);
    color: var(--ds-text);
    font-family: var(--ds-font-text);
    font-size: var(--ds-fs-body);
    line-height: var(--ds-lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
:where(.ds-page) *,
:where(.ds-page) *::before,
:where(.ds-page) *::after { box-sizing: border-box; }
:where(.ds-page) :where(img, svg) { max-width: 100%; }
:where(.ds-page) :where(img) { height: auto; }
:where(.ds-page) :where(h1, h2, h3, p, figure, blockquote, ul, ol) { margin: 0; }
:where(.ds-page) :where(a) { color: var(--ds-teal-700); }
:where(.ds-page) :where(a:hover) { color: var(--ds-ink-teal); }
.ds-page :focus-visible {
    outline: 3px solid var(--ds-teal-700);
    outline-offset: 3px;
    border-radius: 4px;
}
.ds-page ::selection { background: var(--ds-teal-100); color: var(--ds-navy); }

.ds-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ds-surface);
    color: var(--ds-ink-teal);
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 0 0 var(--ds-radius-btn-sm) 0;
}
.ds-skip:focus { left: 0; }

.ds-container {
    max-width: var(--ds-container);
    margin: 0 auto;
    padding-left: var(--ds-gutter);
    padding-right: var(--ds-gutter);
}
.ds-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .ds-page *, .ds-page *::before, .ds-page *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ---------- Older pages: keep the theme's global rules out of the header and footer ----------
 * On pages not yet rebuilt, bs-common/header.php and footer.php wrap the shared header and
 * footer in .ds-page.ds-chrome. Their theme (style.css) styles bare p, ul, li, a and button;
 * these resets outrank those element rules (one class) and sit before the components, which
 * come later and win on equal specificity. */
.ds-chrome { text-align: left; }
.ds-chrome :where(p, span, li, a, button, strong, nav, ul, img) { font-family: inherit; letter-spacing: normal; text-transform: none; }
.ds-chrome :where(p, li, span, strong) { font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit; margin: 0; }
.ds-chrome :where(ul) { margin: 0; padding: 0; list-style: none; }
.ds-chrome :where(img) { vertical-align: middle; }
.ds-chrome :where(svg, svg path) { transition: none; }
.ds-chrome :where(a) { transition: color 200ms var(--ds-ease), background-color 200ms var(--ds-ease); }
.ds-chrome .ds-skip:focus { position: fixed; }
/* Footer links outside the columns stay underlined, as on the redesigned pages (the theme removes underlines). */
.ds-chrome :is(.ds-footer__contact, .ds-footer__legal-links) a { text-decoration: underline; }
/* The theme gives every button big padding, a fixed height and an arrow icon (::after). */
.ds-chrome :where(button) { padding: 0; line-height: normal; font: inherit; position: static; transition: none; }
.ds-chrome button::before, .ds-chrome button::after { content: none; }
.ds-chrome .ds-menu-btn:hover, .ds-chrome .ds-menu-btn:focus { background: var(--ds-surface); color: var(--ds-ink-teal); border: 1.5px solid var(--ds-teal-200); }

/* ---------- Buttons ---------- */
.ds-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 26px;
    border-radius: var(--ds-radius-btn);
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: background-color 200ms var(--ds-ease), color 200ms var(--ds-ease), border-color 200ms var(--ds-ease);
}
.ds-page .ds-btn--primary { background: var(--ds-teal-700); color: #fff; }
.ds-page .ds-btn--primary:hover { background: var(--ds-ink-teal); color: #fff; }
.ds-page .ds-btn--outline { background: var(--ds-surface); color: var(--ds-ink-teal); border-color: var(--ds-teal-200); font-weight: 600; }
.ds-page .ds-btn--outline:hover { border-color: var(--ds-teal-700); color: var(--ds-ink-teal); }
.ds-page .ds-btn--white { background: #fff; color: var(--ds-ink-teal); }
.ds-page .ds-btn--white:hover { background: var(--ds-teal-50); color: var(--ds-ink-teal); }
.ds-page .ds-btn--outline-white { background: transparent; color: #fff; border: 2px solid #fff; }
.ds-page .ds-btn--outline-white:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.ds-btn--sm { min-height: 44px; padding: 10px 20px; font-size: 16px; border-radius: var(--ds-radius-btn-sm); }
.ds-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-decoration: none;
    min-height: 44px;
}

/* Draft notice on unapproved AU pages (never ships: the section is hidden until approved) */
.ds-draftbar { background: var(--ds-draft-bg); color: var(--ds-draft-text); font-size: 14px; line-height: 20px; padding: 10px 0; border-bottom: 1px solid var(--ds-draft-line); }

/* ---------- Header ---------- */
.ds-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: var(--ds-surface); border-bottom: 1px solid var(--ds-border);
    transition: background-color 250ms var(--ds-ease), box-shadow 250ms var(--ds-ease), border-color 250ms var(--ds-ease);
}
/* Fixed header (Shiv, 1 Nov 2026): once the page scrolls it turns to frosted glass, so the
   content shows through. The spacer keeps the page from sliding under it; ds.js keeps
   --ds-header-h equal to the header's real height. */
.ds-header.is-scrolled {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom-color: rgba(13, 68, 78, 0.08);
    box-shadow: 0 8px 24px rgba(13, 68, 78, 0.08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ds-header.is-scrolled { background: rgba(255, 255, 255, 0.96); }
}
.ds-header-spacer { height: var(--ds-header-h, 83px); }
html { scroll-padding-top: var(--ds-header-h, 83px); }
@media (max-width: 1023px) {
    .ds-header-spacer { height: var(--ds-header-h, 77px); }
    html { scroll-padding-top: var(--ds-header-h, 77px); }
}

/* Region switch: a small globe with Global / Australia, beside the menu on desktop and at the
   foot of the menu on phones. */
.ds-region { display: flex; align-items: center; gap: 2px; font-size: 13px; line-height: 18px; }
.ds-region__icon { color: var(--ds-text-soft); margin-right: 4px; flex-shrink: 0; }
.ds-page .ds-region a {
    color: var(--ds-text-soft); text-decoration: none; font-weight: 500;
    padding: 5px 9px; border-radius: var(--ds-radius-pill);
    display: inline-flex; align-items: center; min-height: 30px;
    transition: background-color 180ms var(--ds-ease), color 180ms var(--ds-ease);
}
.ds-page .ds-region a:hover { color: var(--ds-ink-teal); background: var(--ds-teal-50); }
.ds-page .ds-region a[aria-current="page"] { color: var(--ds-ink-teal); font-weight: 700; background: var(--ds-teal-100); }
.ds-region--bar { margin-left: auto; }
.ds-region--menu { display: none; }
@media (max-width: 1023px) {
    .ds-region--bar { display: none; }
    .ds-region--menu { display: flex; padding-top: 12px; }
    .ds-page .ds-region--menu a { min-height: 40px; font-size: 15px; }
}
.ds-header__row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px 32px;
    padding-top: 14px; padding-bottom: 14px;
}
.ds-header__logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.ds-header__logo img { display: block; height: 34px; width: auto; }
.ds-header__tag {
    background: var(--ds-teal-100); color: var(--ds-ink-teal);
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
    padding: 3px 9px; border-radius: 6px;
}
.ds-header__menu { display: flex; align-items: center; gap: 16px 32px; flex: 1; justify-content: flex-end; }
.ds-header__nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.ds-page .ds-header__nav a {
    color: var(--ds-text); font-size: 15px; font-weight: 500; text-decoration: none;
    display: inline-flex; align-items: center; min-height: 44px;
}
.ds-page .ds-header__nav a:hover { color: var(--ds-teal-700); }
.ds-header__actions { display: flex; gap: 12px; align-items: center; }
.ds-page .ds-header__login {
    color: var(--ds-ink-teal); font-weight: 600; font-size: 15px; text-decoration: none;
    padding: 10px 8px; min-height: 44px; display: inline-flex; align-items: center;
}
.ds-menu-btn {
    display: none;
    width: 48px; height: 48px;
    align-items: center; justify-content: center;
    background: var(--ds-surface); color: var(--ds-ink-teal);
    border: 1.5px solid var(--ds-teal-200); border-radius: var(--ds-radius-btn-sm);
    cursor: pointer;
}
.ds-menu-btn__close { display: none; }
.ds-header.is-open .ds-menu-btn__open { display: none; }
.ds-header.is-open .ds-menu-btn__close { display: block; }

@media (max-width: 1023px) {
    .ds-menu-btn { display: inline-flex; }
    .ds-header__menu {
        display: none;
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 8px;
        background: var(--ds-surface);
        border-bottom: 1px solid var(--ds-border);
        box-shadow: 0 18px 30px rgba(13, 68, 78, 0.10);
        padding: 8px var(--ds-gutter) 24px;
    }
    .ds-header.is-open .ds-header__menu { display: flex; }
    .ds-header__nav ul { flex-direction: column; gap: 0; }
    .ds-page .ds-header__nav a { width: 100%; min-height: 48px; font-size: 17px; border-bottom: 1px solid var(--ds-border); }
    .ds-header__actions { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 8px; }
    .ds-header__actions .ds-btn { width: 100%; }
}

/* Desktop menu ribbon (Shiv, 1 Nov 2026): the old site's black pill around the menu, redone in
   ink-teal. Menu items get a mint pill on hover and keyboard focus; Login is a mint outline that
   fills on hover; Book a Demo is mint with ink-teal text (white on brand teal fails contrast,
   review item 59). Phones keep the plain dropdown above. */
@media (min-width: 1024px) {
    .ds-header__menu {
        flex: 0 1 auto; margin-left: 16px; gap: 20px;
        background: var(--ds-ink-teal); border-radius: var(--ds-radius-pill);
        padding: 6px 6px 6px 14px;
        box-shadow: 0 10px 24px rgba(13, 68, 78, 0.16);
    }
    .ds-header.is-scrolled .ds-header__menu { background: rgba(13, 68, 78, 0.9); }
    /* The ribbon never shrinks or wraps; the region switch takes the space that's left. */
    .ds-header__menu { flex-shrink: 0; }
    .ds-header__nav ul { flex-wrap: nowrap; }
    .ds-page .ds-header__nav a, .ds-page .ds-header__login, .ds-page .ds-header__actions .ds-btn { white-space: nowrap; }
    .ds-header__logo { flex-shrink: 0; }
    .ds-region--bar { flex-shrink: 0; }
    .ds-header:not(:has(.ds-region--bar)) .ds-header__menu { margin-left: auto; }
    .ds-header__nav ul { gap: 2px; }
    .ds-page .ds-header__nav a {
        color: #fff; font-weight: 500; min-height: 40px; padding: 0 14px;
        border-radius: var(--ds-radius-pill);
        transition: background-color 180ms var(--ds-ease), color 180ms var(--ds-ease);
    }
    .ds-page .ds-header__nav a:hover,
    .ds-page .ds-header__nav a:focus-visible,
    .ds-page .ds-header__nav a[aria-current="page"] { background: rgba(143, 228, 226, 0.16); color: var(--ds-mint); }
    .ds-page .ds-header__nav a:focus-visible,
    .ds-page .ds-header__actions a:focus-visible { outline: 2px solid var(--ds-mint); outline-offset: 2px; }
    .ds-header__actions { gap: 8px; }
    .ds-page .ds-header__login {
        color: #fff; min-height: 40px; padding: 0 18px;
        border: 1.5px solid var(--ds-mint); border-radius: var(--ds-radius-pill);
        transition: background-color 180ms var(--ds-ease), color 180ms var(--ds-ease);
    }
    .ds-page .ds-header__login:hover { background: rgba(143, 228, 226, 0.16); color: var(--ds-mint); }
    .ds-page .ds-header__actions .ds-btn--primary {
        min-height: 40px; padding: 8px 20px; border-radius: var(--ds-radius-pill);
        background: var(--ds-mint); color: var(--ds-ink-teal);
        transition: background-color 180ms var(--ds-ease), transform 180ms var(--ds-ease);
    }
    .ds-page .ds-header__actions .ds-btn--primary:hover { background: #fff; color: var(--ds-ink-teal); transform: translateY(-1px); }
}
/* On desktop the region switch shows the globe and the region you can switch to ("Australia"
   on global pages, "Global" on AU pages, where the logo carries the AU tag). It sits quietly
   beside the ribbon; the phone menu shows both regions. */
@media (min-width: 1024px) {
    .ds-region--bar a[aria-current="page"] { display: none; }
    .ds-header__row { column-gap: 20px; }
    .ds-header__menu { gap: 12px; padding-left: 8px; }
    .ds-page .ds-header__nav a { padding: 0 12px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .ds-header__logo img { height: 28px; }
    .ds-header__row { gap: 12px; }
}
/* Small laptops: tighter spacing so the menu stays on one line inside the ribbon. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .ds-header__row { gap: 16px; }
    .ds-header__menu { gap: 10px; padding-left: 8px; }
    .ds-page .ds-header__nav a { padding: 0 9px; font-size: 14px; }
    .ds-page .ds-header__login { padding: 0 14px; font-size: 14px; }
    .ds-page .ds-header__actions .ds-btn--primary { padding: 8px 14px; font-size: 14px; }
}

/* Header dropdown (Resources). Phones: the button opens the list in place inside the menu.
   Desktop: a white card under the ribbon, opened by hover, keyboard focus or click (ds.js). */
.ds-header__nav .ds-nav-drop__menu { display: none; }
.ds-header__nav .ds-nav-drop.is-open .ds-nav-drop__menu { display: flex; flex-direction: column; }
.ds-nav-drop__btn {
    font: inherit; font-size: 15px; font-weight: 500; color: var(--ds-text);
    background: none; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0;
}
.ds-nav-drop__caret { transition: transform 180ms var(--ds-ease); }
.ds-nav-drop.is-open .ds-nav-drop__caret { transform: rotate(180deg); }
.ds-page .ds-header__nav .ds-nav-drop__menu a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.ds-nav-drop__menu strong { font-weight: 600; }
.ds-nav-drop__menu span { font-size: 13px; line-height: 18px; color: var(--ds-text-soft); font-weight: 400; }
@media (max-width: 1023px) {
    .ds-nav-drop__btn { width: 100%; min-height: 48px; font-size: 17px; justify-content: space-between; border-bottom: 1px solid var(--ds-border); }
    .ds-header__nav .ds-nav-drop__menu { padding-left: 16px; }
    .ds-page .ds-header__nav .ds-nav-drop__menu a { min-height: 60px; font-size: 16px; }
}
@media (min-width: 1024px) {
    .ds-nav-drop { position: relative; }
    .ds-nav-drop__btn {
        color: #fff; min-height: 40px; padding: 0 10px 0 12px; border-radius: var(--ds-radius-pill); white-space: nowrap;
        transition: background-color 180ms var(--ds-ease), color 180ms var(--ds-ease);
    }
    .ds-nav-drop__btn:hover, .ds-nav-drop__btn:focus-visible, .ds-nav-drop.is-open .ds-nav-drop__btn { background: rgba(143, 228, 226, 0.16); color: var(--ds-mint); }
    .ds-nav-drop__btn:focus-visible { outline: 2px solid var(--ds-mint); outline-offset: 2px; }
    .ds-header__nav .ds-nav-drop__menu {
        position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 10;
        width: 300px; margin-top: 14px; padding: 8px; gap: 2px;
        background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 16px;
        box-shadow: 0 18px 40px rgba(13, 68, 78, 0.16);
    }
    /* Bridges the gap between button and card so hover does not drop while the mouse crosses it. */
    .ds-header__nav .ds-nav-drop__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
    .ds-page .ds-header__nav .ds-nav-drop__menu a {
        color: var(--ds-text); white-space: normal; min-height: 0; padding: 10px 14px; border-radius: 10px;
    }
    .ds-page .ds-header__nav .ds-nav-drop__menu a:hover,
    .ds-page .ds-header__nav .ds-nav-drop__menu a:focus-visible { background: var(--ds-teal-50); color: var(--ds-ink-teal); }
    .ds-page .ds-header__nav .ds-nav-drop__menu a:focus-visible { outline: 2px solid var(--ds-teal); outline-offset: 0; }
}
@media (min-width: 1024px) and (hover: hover) {
    .ds-header__nav .ds-nav-drop:hover .ds-nav-drop__menu { display: flex; flex-direction: column; }
    .ds-nav-drop:hover .ds-nav-drop__caret { transform: rotate(180deg); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
    .ds-nav-drop__btn { padding: 0 7px 0 9px; font-size: 14px; }
}

/* ---------- Footer ---------- */
.ds-footer { background: var(--ds-sea-950); color: var(--ds-border-strong); font-size: 15px; line-height: 24px; }
.ds-footer__inner { padding-top: 64px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 48px; }
.ds-footer__cols { display: flex; flex-wrap: wrap; gap: 40px; }
.ds-footer__brand { flex: 2 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ds-footer__brand img { height: 32px; width: auto; align-self: flex-start; }
.ds-footer__brand p { max-width: 340px; color: var(--ds-on-dark-muted); }
/* Office line: smaller since 3 Nov 2026, each country a link to its region's pages. */
.ds-footer__brand .ds-footer__offices { font-size: 11px; line-height: 18px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-mint); max-width: none; }
.ds-page .ds-footer__offices a { color: var(--ds-mint); text-decoration: none; display: inline-block; padding: 6px 0; }
/* One line on every page: the brand column keeps at least the line's width (the global footer has
   more link columns, which used to squeeze it onto two lines). Phones may wrap. */
.ds-footer__brand .ds-footer__offices { white-space: nowrap; }
.ds-footer__brand { min-width: min(100%, 330px); }
@media (max-width: 479px) { .ds-footer__brand .ds-footer__offices { white-space: normal; } }
.ds-page .ds-footer__offices a:hover { color: #fff; text-decoration: underline; }
.ds-footer__contact { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-footer__contact li { display: flex; gap: 10px; align-items: center; color: var(--ds-on-dark-muted); }
.ds-footer__contact .ds-icon { color: var(--ds-mint); flex-shrink: 0; }
.ds-page .ds-footer__contact a { color: #fff; min-height: 36px; display: inline-flex; align-items: center; }
.ds-footer__social { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ds-page .ds-footer__social a {
    width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: var(--ds-on-dark-muted); border: 1px solid rgba(184, 196, 198, 0.35);
    transition: color 160ms, border-color 160ms, background 160ms;
}
.ds-page .ds-footer__social a:hover { color: var(--ds-panel-deep); background: var(--ds-mint); border-color: var(--ds-mint); }
.ds-footer__col { flex: 1 1 150px; min-width: 0; }
.ds-footer__title { color: #fff; font-weight: 700; margin-bottom: 10px; }
.ds-footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-page .ds-footer__col a { color: var(--ds-on-dark-muted); text-decoration: none; display: inline-flex; min-height: 34px; align-items: center; }
.ds-page .ds-footer a:hover { color: #fff; }
.ds-page .ds-footer__col a[aria-current="page"] { color: #fff; font-weight: 600; }
.ds-footer__bottom {
    border-top: 1px solid var(--ds-ink-teal); padding-top: 24px;
    display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
    font-size: 14px; color: var(--ds-on-dark-soft);
}
.ds-footer__legal-links { display: flex; gap: 20px; }
.ds-page .ds-footer__legal-links a { color: var(--ds-on-dark-muted); display: inline-flex; min-height: 34px; align-items: center; }


/* Cursor follower, as on the live site: a teal dot inside a teal ring at the pointer tip. The dot
   grows into a soft disc over links and buttons and the ring fades. ds.js adds it only for a mouse
   (not touch) and only on pages without the older .tf-mouse version. */
.ds-cursor {
    position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none;
    border-radius: 50%; visibility: hidden;
}
.ds-cursor.is-on { visibility: visible; }
.ds-cursor--dot {
    width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #00A39E;
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out, margin 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.ds-cursor--ring {
    width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 2px solid #00A39E; box-sizing: border-box;
    opacity: 0.5; transition: opacity 0.2s ease-out;
}
.ds-cursor--dot.is-hover { width: 80px; height: 80px; margin: -40px 0 0 -40px; opacity: 0.3; }
.ds-cursor--ring.is-hover { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .ds-cursor--dot, .ds-cursor--ring { transition: none; }
}