/*
 * 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: rgba(143, 228, 226, 0.16); color: var(--ds-mint); border: 1.5px solid rgba(143, 228, 226, 0.5); }

/* ---------- 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 ---------- */
/* One floating bar (Shiv, 9 Nov 2026, after yellow.ai): a rounded black bar holds the logo,
   region switch, menu and buttons, with a little space around it. Once the page scrolls the bar
   turns to glass, so the content shows through. The header itself is see-through and only the
   bar takes clicks. The spacer keeps the page from sliding under it; ds.js keeps --ds-header-h
   equal to the header's real height. */
.ds-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    pointer-events: none;
}
.ds-header .ds-header__row {
    pointer-events: auto;
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 16px 20px;
    /* Up to 1280px wide (as on yellow.ai), so the full menu fits on one line. */
    width: calc(100% - 2 * var(--ds-gutter) + 48px);
    max-width: 1280px;
    margin: 12px auto 0;
    padding: 8px 8px 8px 24px;
    /* Black (Shiv, 10 Nov 2026). */
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ds-radius-pill);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    transition: background-color 250ms var(--ds-ease), box-shadow 250ms var(--ds-ease);
}
.ds-header.is-scrolled .ds-header__row {
    background: rgba(0, 0, 0, 0.82);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ds-header.is-scrolled .ds-header__row { background: rgba(0, 0, 0, 0.96); }
}
.ds-header-spacer { height: var(--ds-header-h, 72px); }
html { scroll-padding-top: calc(var(--ds-header-h, 72px) + 8px); }
@media (max-width: 1199px) {
    .ds-header .ds-header__row {
        width: calc(100% - 2 * var(--ds-gutter) + 24px);
        margin-top: 10px;
        padding: 6px 6px 6px 12px;
    }
    .ds-header-spacer { height: var(--ds-header-h, 68px); }
    html { scroll-padding-top: calc(var(--ds-header-h, 68px) + 8px); }
}

.ds-header__logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.ds-header__logo img { display: block; height: 32px; width: auto; }
.ds-header__logo:focus-visible { outline: 2px solid var(--ds-mint); outline-offset: 4px; border-radius: 6px; }
.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;
}

/* Region switch: a small globe with Global / Australia, beside the logo on desktop (light on the
   dark bar) 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 { flex-shrink: 0; }
.ds-region--bar .ds-region__icon { color: rgba(255, 255, 255, 0.7); }
.ds-page .ds-region--bar a { color: rgba(255, 255, 255, 0.85); }
.ds-page .ds-region--bar a:hover, .ds-page .ds-region--bar a:focus-visible { color: var(--ds-mint); background: rgba(143, 228, 226, 0.16); }
.ds-page .ds-region--bar a:focus-visible { outline: 2px solid var(--ds-mint); outline-offset: 2px; }
.ds-region--menu { display: none; }
@media (max-width: 1199px) {
    .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__menu { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.ds-header__nav ul { list-style: none; padding: 0; display: flex; gap: 2px; }
.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-header__actions { display: flex; gap: 8px; 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;
}

/* Menu button (phones), light on the dark bar. */
.ds-menu-btn {
    display: none;
    width: 44px; height: 44px; flex-shrink: 0;
    align-items: center; justify-content: center;
    background: transparent; color: #fff;
    border: 1.5px solid rgba(143, 228, 226, 0.5); border-radius: var(--ds-radius-pill);
    cursor: pointer;
    transition: background-color 180ms var(--ds-ease), color 180ms var(--ds-ease);
}
.ds-menu-btn:hover, .ds-header.is-open .ds-menu-btn { background: rgba(143, 228, 226, 0.16); color: var(--ds-mint); }
.ds-menu-btn:focus-visible { outline: 2px solid var(--ds-mint); outline-offset: 2px; }
.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; }

/* Phones, tablets and small laptops (below 1200px, where the full menu no longer fits in the
   bar): the menu button opens the menu as a white card under the bar. */
@media (max-width: 1199px) {
    .ds-menu-btn { display: inline-flex; }
    .ds-header__menu {
        display: none;
        position: absolute; left: 0; right: 0; top: calc(100% + 8px);
        flex-direction: column; align-items: stretch; gap: 8px;
        background: var(--ds-surface);
        border: 1px solid var(--ds-border); border-radius: 20px;
        box-shadow: 0 18px 40px rgba(13, 68, 78, 0.18);
        padding: 8px 20px 20px;
        max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain;
    }
    .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: everything sits in the bar. 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). */
@media (min-width: 1200px) {
    .ds-header__nav { margin: 0 auto; }
    /* Nothing in the bar shrinks, so a menu that no longer fits shows up in testing. */
    .ds-header__nav, .ds-header__actions, .ds-header__nav li { flex-shrink: 0; }
    .ds-header__nav ul { flex-wrap: nowrap; }
    /* Centres links and the Resources button on one line (the older pages' theme sets a taller
       line height and lines them up on the text baseline). */
    .ds-header__nav > ul > li { display: flex; align-items: center; }
    .ds-page .ds-header__nav a, .ds-page .ds-header__login, .ds-page .ds-header__actions .ds-btn { white-space: nowrap; }
    .ds-page .ds-header__nav a {
        color: #fff; font-weight: 500; min-height: 40px; padding: 0 12px;
        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-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); }
    /* 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). The phone menu shows both. */
    .ds-region--bar a[aria-current="page"] { display: none; }
}
@media (min-width: 1200px) and (max-width: 1365px) {
    .ds-header__logo img { height: 28px; }
    .ds-header .ds-header__row { gap: 12px; padding-left: 20px; }
}
/* Small laptops: tighter spacing so the menu stays on one line inside the bar. */
@media (min-width: 1200px) and (max-width: 1365px) {
    .ds-header__menu { gap: 8px; }
    .ds-page .ds-header__nav a { padding: 0 8px; 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; }
    .ds-page .ds-region--bar a { padding: 5px 6px; }
}

/* Header dropdown panels (Platform, Industries, Resources), after yellow.ai's menus and the live
   site's Industry menu: one or more columns with a heading, items with an icon and a line under
   the label, and an optional featured card. Phones: the button opens the panel in place inside
   the menu. Desktop: a white panel centred under the bar, 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; }
.ds-header__nav .ds-nav-drop__list { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; }
.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; height: auto; padding: 0;
}
.ds-nav-drop__caret { flex-shrink: 0; transition: transform 180ms var(--ds-ease); }
.ds-nav-drop.is-open .ds-nav-drop__caret { transform: rotate(180deg); }
.ds-nav-drop__col { min-width: 0; }
.ds-page .ds-nav-drop__head {
    margin: 0 0 6px; padding: 4px 12px 10px; border-bottom: 1px solid var(--ds-border);
    font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ds-teal-700);
}
.ds-page .ds-header__nav .ds-nav-drop__list a { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
.ds-nav-drop__icon {
    flex: 0 0 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--ds-teal-50); color: var(--ds-teal-700);
    transition: background-color 180ms var(--ds-ease);
}
.ds-nav-drop__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-nav-drop__text strong { font-weight: 600; }
.ds-nav-drop__desc { font-size: 13px; line-height: 18px; color: var(--ds-text-soft); font-weight: 400; }
/* Featured card: the live site's teal gradient (teal-700, so white text passes contrast). */
.ds-page .ds-header__nav a.ds-nav-drop__feat {
    position: relative; overflow: hidden;
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px;
    padding: 20px; border-radius: 16px; white-space: normal;
    background: linear-gradient(140deg, var(--ds-teal-700) 0%, var(--ds-ink-teal) 100%); color: #fff;
    transition: box-shadow 180ms var(--ds-ease), transform 180ms var(--ds-ease);
}
.ds-page .ds-header__nav a.ds-nav-drop__feat::after {
    content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px;
    border-radius: 50%; background: rgba(255, 255, 255, 0.07); pointer-events: none;
}
.ds-page .ds-header__nav a.ds-nav-drop__feat:hover,
.ds-page .ds-header__nav a.ds-nav-drop__feat:focus-visible { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(13, 68, 78, 0.25); }
.ds-page .ds-header__nav a.ds-nav-drop__feat:focus-visible { outline: 2px solid var(--ds-teal); outline-offset: 2px; }
.ds-nav-drop__feat-img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 4px; }
.ds-nav-drop__feat-icon { color: var(--ds-mint); display: inline-flex; }
.ds-nav-drop__feat-tag {
    font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: #fff; background: rgba(255, 255, 255, 0.16); padding: 3px 10px; border-radius: var(--ds-radius-pill);
}
.ds-nav-drop__feat strong { font-size: 18px; line-height: 24px; font-weight: 700; }
.ds-nav-drop__feat-text { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.85); }
.ds-nav-drop__feat-more {
    display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px;
    font-size: 14px; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 1199px) {
    .ds-nav-drop__btn { width: 100%; min-height: 48px; font-size: 17px; justify-content: space-between; border-bottom: 1px solid var(--ds-border); border-radius: 0; }
    .ds-header__nav .ds-nav-drop.is-open .ds-nav-drop__menu { flex-direction: column; gap: 12px; padding: 10px 0 14px; }
    .ds-page .ds-nav-drop__head { padding: 0 0 6px; }
    .ds-page .ds-header__nav .ds-nav-drop__menu a { border-bottom: 0; }
    .ds-page .ds-header__nav .ds-nav-drop__list a { min-height: 56px; font-size: 16px; padding: 6px 0; }
    .ds-nav-drop__feat-img { width: 48px; height: 48px; }
}
@media (min-width: 1200px) {
    .ds-nav-drop { position: static; }
    .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; }
    /* Centred under the bar (the bar is the positioned parent), so wide panels never run off screen. */
    .ds-header__nav .ds-nav-drop__menu {
        position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 10;
        width: 360px; max-width: 100%; margin-top: 10px; padding: 16px; gap: 20px;
        background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 22px;
        box-shadow: 0 24px 48px rgba(13, 68, 78, 0.18);
    }
    .ds-header__nav .ds-nav-drop__menu--feat { width: 680px; }
    .ds-header__nav .ds-nav-drop__menu--c2.ds-nav-drop__menu--feat { width: 960px; }
    .ds-nav-drop__col { flex: 1 1 0; }
    .ds-page .ds-header__nav a.ds-nav-drop__feat { flex: 0 0 260px; }
    /* Bridges the gap between the bar and the panel 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: -22px; height: 22px; }
    .ds-page .ds-header__nav .ds-nav-drop__list a {
        color: var(--ds-text); white-space: normal; min-height: 0; padding: 10px 12px; border-radius: 12px;
    }
    .ds-page .ds-header__nav .ds-nav-drop__list a:hover,
    .ds-page .ds-header__nav .ds-nav-drop__list a:focus-visible { background: var(--ds-teal-50); color: var(--ds-ink-teal); }
    .ds-page .ds-header__nav .ds-nav-drop__list a:hover .ds-nav-drop__icon,
    .ds-page .ds-header__nav .ds-nav-drop__list a:focus-visible .ds-nav-drop__icon { background: var(--ds-teal-100); }
    .ds-page .ds-header__nav .ds-nav-drop__list a:focus-visible { outline: 2px solid var(--ds-teal); outline-offset: 0; }
}
@media (min-width: 1200px) and (hover: hover) {
    .ds-header__nav .ds-nav-drop:hover .ds-nav-drop__menu { display: flex; }
    .ds-nav-drop:hover .ds-nav-drop__caret { transform: rotate(180deg); }
}
@media (min-width: 1200px) and (max-width: 1365px) {
    .ds-nav-drop__btn { padding: 0 7px 0 9px; font-size: 14px; }
    .ds-page .ds-header__nav a.ds-nav-drop__feat { flex-basis: 220px; }
}

/* ---------- 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; }
}