/* Flattened at startup by AssetPipeline: ui/css/og-design-system.css plus every @import layer, in authored order. */

/* ---- base/og-fonts.css ---- */
/* og / base / fonts -------------------------------------------------------

   Raleway, self-hosted.

   This replaces a render-blocking stylesheet on fonts.googleapis.com plus two
   preconnects to a second origin. That arrangement cost, before first paint:
   a DNS lookup, a TLS handshake and a round trip to googleapis.com to fetch a
   stylesheet, which only then revealed a font file on a THIRD origin
   (fonts.gstatic.com) needing its own connection. Self-hosting collapses all of
   that into one request to an origin the browser has already connected to, and
   the file can be preloaded because its URL is known at build time rather than
   discovered from a stylesheet.

   Google serves Raleway as a VARIABLE font, so a single file covers the whole
   400-700 range this site uses - there is no per-weight download. Only the latin
   and latin-ext subsets are carried; the site's content is English, and the
   cyrillic and vietnamese subsets Google also offers would be dead weight.

   font-display: swap is retained from the original request, so text paints
   immediately in the fallback and swaps when Raleway arrives - never invisible.

   The unicode-range declarations matter: without them the browser downloads
   latin-ext for every page even when no character in it is used. With them,
   latin-ext is fetched only if such a character actually appears.
   ------------------------------------------------------------------------- */

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/raleway-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/raleway-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- base/og-variables.css ---- */
/* =========================================================================
   og / base / variables
   Design tokens. The single source of truth for colour, type, space and
   elevation. Every value below is carried over from the existing site so the
   new layer renders in the established brand - no colours were invented.
   ========================================================================= */

:root {
    /* --- Brand ------------------------------------------------------------
       Sampled from the current theme: #0497aa is the dominant brand teal
       (39 declarations) and #dc4349 the accent red (18).

       ACCESSIBILITY NOTE. Measured against WCAG 2.1 AA (4.5:1 for normal text):

           #0497aa on white .............. 3.49:1  FAIL
           #dc4349 with white text ....... 4.25:1  FAIL
           #037a89 (primary-dark) ........ 5.06:1  PASS
           #b8353a (accent-dark) ......... 5.82:1  PASS

       The brand hues are unchanged and still carry the identity - rules, borders,
       focus rings, icon plates and tinted surfaces all use them. Wherever a brand
       colour meets TEXT, the darker shade of the same hue is used instead. Those
       shades were already in this palette as the hover states, so the change is a
       shift in which shade rests where, not a new colour. */
    --og-color-primary: #0497aa;
    --og-color-primary-dark: #037a89;
    --og-color-primary-light: #1cb4c8;
    --og-color-primary-subtle: #e6f6f8;

    --og-color-accent: #dc4349;
    --og-color-accent-dark: #b8353a;
    --og-color-accent-subtle: #fdeced;

    /* --- Neutrals --------------------------------------------------------- */
    --og-color-ink: #1e1e1e;
    --og-color-ink-muted: #707070;   /* was #7a7a7a: 4.29:1 on white, below AA */
    --og-color-ink-inverse: #ffffff;

    --og-color-surface: #ffffff;
    --og-color-surface-muted: #f7f7f7;
    --og-color-surface-inverse: #191a20;

    /* Dark BRANDED surface, as distinct from the neutral near-black above.
       A deeper step of --og-color-primary (#0497aa), so it belongs to the palette
       already in use rather than introducing a new hue: same teal, lower lightness.
       That teal is what sits between the two colours in the logo - its blue
       (#24a8d8) and its green (#00a854) - which is why the footer reads as part of
       the brand where #191a20 read as a generic dark bar.
       Added for the footer; surface-inverse is untouched and still serves
       .og-cta--inverse, .og-card--inverse and the inverse region. */
    --og-color-surface-brand: #025c67;

    --og-color-border: #e5e5e5;
    --og-color-border-strong: #cccccc;

    /* --- Status ----------------------------------------------------------- */
    --og-color-success: #22a359;
    --og-color-success-subtle: #e8f6ee;
    --og-color-info: #1494c9;
    --og-color-info-subtle: #e7f3fa;
    --og-color-warning: #f36f3a;
    --og-color-warning-subtle: #fef1ea;
    --og-color-danger: #dc4349;
    --og-color-danger-subtle: #fdeced;

    /* --- Focus ------------------------------------------------------------
       A single visible focus treatment used by every interactive component. */
    --og-color-focus: #0497aa;
    --og-focus-ring: 0 0 0 3px rgba(4, 151, 170, 0.35);
    --og-focus-offset: 2px;

    /* --- Typography -------------------------------------------------------
       Raleway is the established brand face and is already linked by the app. */
    --og-font-sans: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --og-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --og-font-size-xs: 0.75rem;    /* 12px */
    --og-font-size-sm: 0.875rem;   /* 14px */
    --og-font-size-md: 1rem;       /* 16px */
    --og-font-size-lg: 1.125rem;   /* 18px */
    --og-font-size-xl: 1.375rem;   /* 22px */
    --og-font-size-2xl: 1.75rem;   /* 28px */
    --og-font-size-3xl: 2.1875rem; /* 35px - matches the existing hero heading */
    --og-font-size-4xl: 2.75rem;   /* 44px */

    --og-font-weight-regular: 400;
    --og-font-weight-medium: 500;
    --og-font-weight-semibold: 600;
    --og-font-weight-bold: 700;

    --og-line-height-tight: 1.2;
    --og-line-height-snug: 1.4;
    --og-line-height-base: 1.6;
    --og-line-height-loose: 1.8;

    --og-letter-spacing-tight: -0.01em;
    --og-letter-spacing-base: 0;
    --og-letter-spacing-wide: 0.05em;

    /* --- Space -----------------------------------------------------------
       4px base step. Use tokens, never bare pixel values, in component CSS. */
    --og-space-0: 0;
    --og-space-1: 0.25rem;  /* 4px  */
    --og-space-2: 0.5rem;   /* 8px  */
    --og-space-3: 0.75rem;  /* 12px */
    --og-space-4: 1rem;     /* 16px */
    --og-space-5: 1.5rem;   /* 24px */
    --og-space-6: 2rem;     /* 32px */
    --og-space-7: 2.5rem;   /* 40px */
    --og-space-8: 3rem;     /* 48px */
    --og-space-9: 4rem;     /* 64px */
    --og-space-10: 5rem;    /* 80px */

    /* --- Sizing ----------------------------------------------------------- */
    --og-container-max: 1170px;      /* matches the existing Bootstrap 3 container */
    --og-container-narrow: 780px;
    --og-container-gutter: var(--og-space-4);

    --og-header-height: 80px;
    --og-header-height-lg: 100px;
    --og-hero-height: 95vh;
    --og-hero-height-sm: 60vh;

    /* --- Borders and elevation -------------------------------------------- */
    --og-radius-none: 0;
    --og-radius-sm: 3px;
    --og-radius-md: 6px;
    --og-radius-lg: 12px;
    --og-radius-pill: 999px;

    --og-border-width: 1px;

    --og-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --og-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --og-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    /* --- Motion -----------------------------------------------------------
       Every transition in the system references one of these. */
    --og-duration-fast: 120ms;
    --og-duration-base: 240ms;
    --og-duration-slow: 480ms;
    --og-easing-standard: cubic-bezier(0.2, 0, 0.2, 1);

    /* --- Layering ---------------------------------------------------------- */
    --og-z-base: 1;
    --og-z-raised: 10;
    --og-z-sticky: 100;
    --og-z-header: 200;
    --og-z-overlay: 300;
    --og-z-skip-link: 400;
}

/* Honour the operating system's reduced-motion preference across the system. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --og-duration-fast: 1ms;
        --og-duration-base: 1ms;
        --og-duration-slow: 1ms;
    }
}

/* ---- base/og-reset.css ---- */
/* =========================================================================
   og / base / reset
   Scoped normalisation. Everything here is deliberately low specificity so
   component CSS never needs !important to win.
   ========================================================================= */

.og-root *,
.og-root *::before,
.og-root *::after {
    box-sizing: border-box;
}

.og-root {
    margin: 0;
    font-family: var(--og-font-sans);
    font-size: var(--og-font-size-md);
    line-height: var(--og-line-height-base);
    color: var(--og-color-ink);
    background-color: var(--og-color-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Wrapped in :where() so these carry ZERO specificity.
   Without it, `.og-root img { height: auto }` (0,1,1) outranks a component rule
   like `.og-header__logo { height: 44px }` (0,1,0) and the image renders at its
   intrinsic size. That is exactly what happened to the header logo: it rendered
   at its natural 909px width and stretched every page to 993px, producing a
   horizontal scrollbar at every viewport below that.
   A reset must never beat the components layered on top of it. */
:where(.og-root) :where(img, picture, svg, video) {
    display: block;
    max-width: 100%;
}

:where(.og-root) :where(img, video) {
    height: auto;
}

:where(.og-root) :where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
}

.og-root button {
    cursor: pointer;
}

.og-root button[disabled] {
    cursor: not-allowed;
}

:where(.og-root) :where(ul[class], ol[class]) {
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(.og-root) :where(table) {
    border-collapse: collapse;
    border-spacing: 0;
}

/* One consistent, always-visible focus treatment. The legacy theme set
   outline:none in places; the design system never removes focus without
   providing an equally visible replacement. */
.og-root :focus-visible {
    outline: 2px solid var(--og-color-focus);
    outline-offset: var(--og-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
    .og-root *,
    .og-root *::before,
    .og-root *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- base/og-typography.css ---- */
/* =========================================================================
   og / base / typography
   Type scale and prose defaults. Heading sizes are tokens, so a page never
   picks a heading level for its size - only for its position in the outline.
   ========================================================================= */

.og-root h1,
.og-root h2,
.og-root h3,
.og-root h4,
.og-root h5,
.og-root h6 {
    margin: 0 0 var(--og-space-4);
    font-family: var(--og-font-sans);
    font-weight: var(--og-font-weight-semibold);
    line-height: var(--og-line-height-tight);
    color: var(--og-color-ink);
}

.og-root h1 { font-size: var(--og-font-size-3xl); }
.og-root h2 { font-size: var(--og-font-size-2xl); }
.og-root h3 { font-size: var(--og-font-size-xl); }
.og-root h4 { font-size: var(--og-font-size-lg); }
.og-root h5 { font-size: var(--og-font-size-md); }
.og-root h6 {
    font-size: var(--og-font-size-sm);
    letter-spacing: var(--og-letter-spacing-wide);
    text-transform: uppercase;
}

.og-root p {
    margin: 0 0 var(--og-space-4);
}

.og-root p:last-child {
    margin-bottom: 0;
}

/* Wrapped in :where() so the base link treatment carries element-level
   specificity only.
   As `.og-root a` it scored (0,1,1) and outranked `.og-btn--primary` (0,1,0),
   so EVERY anchor styled as a design-system button rendered its label in the
   link colour - which, after the contrast work, is the same primary-dark used
   for the button's own background. The labels were invisible site-wide: the
   hero call to action, "Read More" on the Home page, "Connect" on the Partner
   band and "Back to Home" on both error pages.
   A base rule must never outrank the components layered on top of it. */
:where(.og-root) a {
    /* primary-dark, not primary: #0497aa is 3.49:1 on white and fails AA for text. */
    color: var(--og-color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color var(--og-duration-fast) var(--og-easing-standard);
}

:where(.og-root) a:hover {
    color: var(--og-color-primary-dark);
    text-decoration-thickness: 2px;
}

.og-root strong,
.og-root b {
    font-weight: var(--og-font-weight-semibold);
}

.og-root small {
    font-size: var(--og-font-size-sm);
}

.og-root code,
.og-root kbd,
.og-root samp {
    font-family: var(--og-font-mono);
    font-size: 0.9em;
}

.og-root hr {
    height: 0;
    margin: var(--og-space-6) 0;
    border: 0;
    border-top: var(--og-border-width) solid var(--og-color-border);
}

/* Long-form content block. Applies vertical rhythm to unclassed markup,
   which is what migrated page bodies will mostly consist of. */
.og-prose > * + * {
    margin-top: var(--og-space-4);
}

.og-prose ul,
.og-prose ol {
    margin: 0 0 var(--og-space-4);
    padding-left: var(--og-space-5);
}

.og-prose li + li {
    margin-top: var(--og-space-2);
}

.og-prose > h2,
.og-prose > h3,
.og-prose > h4 {
    margin-top: var(--og-space-7);
}

.og-text-lead {
    font-size: var(--og-font-size-lg);
    line-height: var(--og-line-height-loose);
    color: var(--og-color-ink-muted);
}

/* ---- layout/og-container.css ---- */
/* =========================================================================
   og / layout / container
   Horizontal width constraint and gutters. Containers never set vertical
   spacing - that is the section's job.
   ========================================================================= */

.og-container {
    width: 100%;
    max-width: var(--og-container-max);
    margin-inline: auto;
    padding-inline: var(--og-container-gutter);
}

.og-container--narrow {
    max-width: var(--og-container-narrow);
}

.og-container--fluid {
    max-width: none;
}

.og-container--flush {
    padding-inline: 0;
}

/* ---- layout/og-grid.css ---- */
/* =========================================================================
   og / layout / grid
   Two primitives: an auto-fitting card grid and an explicit column grid.
   Both are CSS Grid, so no row wrappers and no negative margins.
   ========================================================================= */

.og-grid {
    display: grid;
    gap: var(--og-grid-gap, var(--og-space-5));
}

/* Explicit column counts. Collapse behaviour lives in responsive/. */
.og-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.og-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.og-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Asymmetric split used by content-plus-aside layouts. */
.og-grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* Auto-fitting grid: pass a minimum track width, let the browser decide the
   column count. Preferred for card collections - it needs no breakpoints. */
.og-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(var(--og-grid-min, 260px), 1fr));
}

.og-grid--gap-sm { --og-grid-gap: var(--og-space-3); }
.og-grid--gap-lg { --og-grid-gap: var(--og-space-7); }

.og-grid__span-2 { grid-column: span 2; }
.og-grid__span-full { grid-column: 1 / -1; }

/* Simple one-dimensional flow, for button rows and inline meta lists. */
.og-stack {
    display: flex;
    flex-direction: column;
    gap: var(--og-stack-gap, var(--og-space-4));
}

.og-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--og-cluster-gap, var(--og-space-3));
}

.og-cluster--end { justify-content: flex-end; }
.og-cluster--center { justify-content: center; }
.og-cluster--between { justify-content: space-between; }

/* ---- layout/og-regions.css ---- */
/* =========================================================================
   og / layout / regions
   The named regions the layout exposes: page shell, main, section bands.
   ========================================================================= */

.og-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.og-main {
    flex: 1 0 auto;
}

/* The header is in normal flow by default, so no page needs a hard-coded
   spacer to clear it. Only the sticky/transparent variants leave flow, and
   those reserve their own space - see components/og-header.css. */
.og-section {
    padding-block: var(--og-section-space, var(--og-space-9));
}

.og-section--tight { --og-section-space: var(--og-space-6); }
.og-section--loose { --og-section-space: var(--og-space-10); }
.og-section--flush { --og-section-space: 0; }

.og-section--muted {
    background-color: var(--og-color-surface-muted);
}

.og-section--inverse {
    color: var(--og-color-ink-inverse);
    background-color: var(--og-color-surface-inverse);
}

.og-section--inverse h1,
.og-section--inverse h2,
.og-section--inverse h3,
.og-section--inverse h4 {
    color: var(--og-color-ink-inverse);
}

/* Breaks an element out of its container to full viewport width without
   requiring the page to be restructured. */
.og-bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.og-region-divider {
    border-top: var(--og-border-width) solid var(--og-color-border);
}

/* ---- components/og-icon.css ---- */
/* og / components / icon ---------------------------------------------------
   Inline SVG sprite symbols. No icon font, so no FOIT, no font 404s and no
   dependency on a webfont being present.
   ------------------------------------------------------------------------- */

.og-icon {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
    flex: none;
}

.og-icon--sm { width: 1em; height: 1em; }
.og-icon--lg { width: 1.75em; height: 1.75em; }

/* ---- components/og-button.css ---- */
/* og / components / button ------------------------------------------------ */

.og-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--og-space-2);
    padding: var(--og-space-3) var(--og-space-5);
    border: var(--og-border-width) solid transparent;
    border-radius: var(--og-radius-sm);
    font-size: var(--og-font-size-md);
    font-weight: var(--og-font-weight-semibold);
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--og-duration-fast) var(--og-easing-standard),
                border-color var(--og-duration-fast) var(--og-easing-standard),
                color var(--og-duration-fast) var(--og-easing-standard);
}

.og-btn:disabled,
.og-btn[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

/* Sizes */
.og-btn--sm { padding: var(--og-space-2) var(--og-space-4); font-size: var(--og-font-size-sm); }
.og-btn--lg { padding: var(--og-space-4) var(--og-space-7); font-size: var(--og-font-size-lg); }

.og-btn--block { display: flex; width: 100%; }

/* Variants */
/* White on #0497aa is 3.49:1 - below AA. The button rests on the darker shade of
   the same hue (5.06:1) and deepens further on hover. */
.og-btn--primary {
    color: var(--og-color-ink-inverse);
    background-color: var(--og-color-primary-dark);
    border-color: var(--og-color-primary-dark);
}
.og-btn--primary:hover { color: var(--og-color-ink-inverse); background-color: #02616e; border-color: #02616e; }

.og-btn--secondary {
    color: var(--og-color-ink);
    background-color: var(--og-color-surface-muted);
    border-color: var(--og-color-border);
}
.og-btn--secondary:hover { color: var(--og-color-ink); background-color: var(--og-color-border); }

/* White on #dc4349 is 4.25:1 - just below AA. Same treatment as primary. */
.og-btn--accent {
    color: var(--og-color-ink-inverse);
    background-color: var(--og-color-accent-dark);
    border-color: var(--og-color-accent-dark);
}
.og-btn--accent:hover { color: var(--og-color-ink-inverse); background-color: #992b30; border-color: #992b30; }

.og-btn--outline {
    color: var(--og-color-primary-dark);
    background-color: transparent;
    border-color: var(--og-color-primary-dark);
}
.og-btn--outline:hover { color: var(--og-color-ink-inverse); background-color: var(--og-color-primary-dark); }

.og-btn--ghost {
    color: var(--og-color-primary-dark);
    background-color: transparent;
    border-color: transparent;
    padding-inline: var(--og-space-2);
}
.og-btn--ghost:hover { color: #02616e; background-color: var(--og-color-primary-subtle); }

.og-btn--success { color: var(--og-color-ink-inverse); background-color: var(--og-color-success); border-color: var(--og-color-success); }
.og-btn--info    { color: var(--og-color-ink-inverse); background-color: var(--og-color-info);    border-color: var(--og-color-info); }
.og-btn--warning { color: var(--og-color-ink-inverse); background-color: var(--og-color-warning); border-color: var(--og-color-warning); }
.og-btn--danger  { color: var(--og-color-ink-inverse); background-color: var(--og-color-danger);  border-color: var(--og-color-danger); }

.og-btn__icon { flex: none; }

/* ---- components/og-badge.css ---- */
/* og / components / badge ------------------------------------------------- */

.og-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--og-space-1);
    padding: var(--og-space-1) var(--og-space-3);
    border: var(--og-border-width) solid transparent;
    border-radius: var(--og-radius-sm);
    font-size: var(--og-font-size-xs);
    font-weight: var(--og-font-weight-semibold);
    line-height: 1.4;
    letter-spacing: var(--og-letter-spacing-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.og-badge--pill { border-radius: var(--og-radius-pill); }
.og-badge--sm { padding: 0 var(--og-space-2); font-size: 0.6875rem; }
.og-badge--lg { padding: var(--og-space-2) var(--og-space-4); font-size: var(--og-font-size-sm); }

.og-badge--primary   { color: var(--og-color-ink-inverse); background-color: var(--og-color-primary-dark); }
.og-badge--secondary { color: var(--og-color-ink); background-color: var(--og-color-surface-muted); border-color: var(--og-color-border); }
.og-badge--accent    { color: var(--og-color-ink-inverse); background-color: var(--og-color-accent-dark); }
.og-badge--success   { color: var(--og-color-ink-inverse); background-color: var(--og-color-success); }
.og-badge--info      { color: var(--og-color-ink-inverse); background-color: var(--og-color-info); }
.og-badge--warning   { color: var(--og-color-ink-inverse); background-color: var(--og-color-warning); }
.og-badge--danger    { color: var(--og-color-ink-inverse); background-color: var(--og-color-danger); }
.og-badge--outline   { color: var(--og-color-primary-dark); background-color: transparent; border-color: var(--og-color-primary-dark); }
.og-badge--ghost     { color: var(--og-color-ink-muted); background-color: transparent; }

/* ---- components/og-alert.css ---- */
/* og / components / alert ------------------------------------------------- */

.og-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--og-space-3);
    padding: var(--og-space-4) var(--og-space-5);
    border: var(--og-border-width) solid transparent;
    border-left-width: 4px;
    border-radius: var(--og-radius-sm);
}

.og-alert__icon { flex: none; margin-top: 0.15em; }
.og-alert__body { flex: 1 1 auto; }
.og-alert__title { margin: 0 0 var(--og-space-1); font-size: var(--og-font-size-md); font-weight: var(--og-font-weight-semibold); }
.og-alert__message { margin: 0; }

.og-alert__dismiss {
    flex: none;
    padding: var(--og-space-1);
    background: none;
    border: 0;
    color: inherit;
    opacity: 0.7;
    border-radius: var(--og-radius-sm);
}
.og-alert__dismiss:hover { opacity: 1; }

.og-alert--info    { color: #0d5f80; background-color: var(--og-color-info-subtle);    border-color: var(--og-color-info); }
.og-alert--success { color: #14663a; background-color: var(--og-color-success-subtle); border-color: var(--og-color-success); }
.og-alert--warning { color: #8a3a17; background-color: var(--og-color-warning-subtle); border-color: var(--og-color-warning); }
.og-alert--danger  { color: #8f2328; background-color: var(--og-color-danger-subtle);  border-color: var(--og-color-danger); }
.og-alert--primary { color: var(--og-color-primary-dark); background-color: var(--og-color-primary-subtle); border-color: var(--og-color-primary); }
.og-alert--accent  { color: var(--og-color-accent-dark);  background-color: var(--og-color-accent-subtle);  border-color: var(--og-color-accent); }
.og-alert--secondary,
.og-alert--outline,
.og-alert--ghost   { color: var(--og-color-ink); background-color: var(--og-color-surface-muted); border-color: var(--og-color-border-strong); }

/* ---- components/og-card.css ---- */
/* og / components / card -------------------------------------------------- */

.og-card {
    display: flex;
    flex-direction: column;
    background-color: var(--og-color-surface);
    border-radius: var(--og-radius-md);
    overflow: hidden;
}

.og-card--bordered { border: var(--og-border-width) solid var(--og-color-border); }
.og-card--elevated { box-shadow: var(--og-shadow-md); }
.og-card--muted    { background-color: var(--og-color-surface-muted); }
.og-card--inverse  { color: var(--og-color-ink-inverse); background-color: var(--og-color-surface-inverse); }

.og-card__media { flex: none; }

.og-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.og-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--og-space-2);
    flex: 1 1 auto;
    padding: var(--og-space-5);
}

.og-card__title { margin: 0; font-size: var(--og-font-size-lg); }

.og-card__subtitle {
    margin: 0;
    font-size: var(--og-font-size-sm);
    color: var(--og-color-ink-muted);
}

.og-card__text { margin: 0; }

.og-card__footer { margin-top: var(--og-space-4); }

/* Whole-card click target. The anchor covers the card via ::after so the
   card's own text stays selectable and nested links remain clickable. */
.og-card--linked { position: relative; transition: box-shadow var(--og-duration-base) var(--og-easing-standard); }
.og-card--linked:hover { box-shadow: var(--og-shadow-lg); }

.og-card__link { text-decoration: none; color: inherit; }

.og-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.og-card--linked:focus-within {
    outline: 2px solid var(--og-color-focus);
    outline-offset: var(--og-focus-offset);
}

/* ---- components/og-accordion.css ---- */
/* og / components / accordion ---------------------------------------------
   Panel visibility is the "hidden" attribute, not a class - so closed content
   is out of the accessibility tree and the tab order, and there is no
   class/stylesheet contract that can drift out of sync.
   ------------------------------------------------------------------------- */

.og-accordion {
    border-top: var(--og-border-width) solid var(--og-color-border);
}

.og-accordion__item {
    display: flex;
    align-items: flex-start;
    gap: var(--og-space-4);
    padding: var(--og-space-2) 0;
    border-bottom: var(--og-border-width) solid var(--og-color-border);
}

.og-accordion__media {
    flex: none;
    padding-top: var(--og-space-4);
}

.og-accordion__icon { width: 50px; height: 50px; object-fit: contain; }

.og-accordion__main { flex: 1 1 auto; min-width: 0; }

.og-accordion__heading { margin: 0; font-size: inherit; font-weight: inherit; }

.og-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--og-space-4);
    width: 100%;
    padding: var(--og-space-4) 0;
    color: var(--og-color-ink);
    background: none;
    border: 0;
    text-align: left;
    font-family: inherit;
    font-size: var(--og-font-size-lg);
    font-weight: var(--og-font-weight-semibold);
    line-height: var(--og-line-height-snug);
    transition: color var(--og-duration-fast) var(--og-easing-standard);
}

.og-accordion__trigger:hover { color: var(--og-color-primary-dark); }

.og-accordion__trigger[aria-expanded="true"] { color: var(--og-color-primary-dark); }

.og-accordion__label { flex: 1 1 auto; }

.og-accordion__note {
    display: inline;
    margin-left: var(--og-space-2);
    font-size: var(--og-font-size-sm);
    font-weight: var(--og-font-weight-regular);
    color: var(--og-color-ink-muted);
}

.og-accordion__chevron {
    flex: none;
    color: var(--og-color-primary);
    transition: transform var(--og-duration-base) var(--og-easing-standard);
}

.og-accordion__trigger[aria-expanded="true"] .og-accordion__chevron { transform: rotate(180deg); }

.og-accordion__panel { padding-bottom: var(--og-space-4); }

/* Belt and braces: [hidden] must win even against a display rule elsewhere. */
.og-accordion__panel[hidden] { display: none; }

.og-accordion__body { color: var(--og-color-ink); }
.og-accordion__body p { margin: 0 0 var(--og-space-3); text-align: justify; }
.og-accordion__body p:last-child { margin-bottom: 0; }

@media (max-width: 479px) {
    .og-accordion__item { gap: var(--og-space-3); }
    .og-accordion__icon { width: 40px; height: 40px; }
    .og-accordion__trigger { font-size: var(--og-font-size-md); }
}

/* ---- components/og-feature.css ---- */
/* og / components / feature ----------------------------------------------- */

.og-feature { display: flex; flex-direction: column; gap: var(--og-space-3); height: 100%; }

.og-feature--center { align-items: center; text-align: center; }
.og-feature--end { align-items: flex-end; text-align: right; }

/* Media beside the text rather than above it. Uses flex rather than a float, so
   the block cannot collapse and needs no clearfix. */
.og-feature--horizontal {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--og-space-4);
}

.og-feature__media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 64px;
    height: 64px;
    color: var(--og-color-primary);
    background-color: var(--og-color-primary-subtle);
    border-radius: var(--og-radius-md);
}

/* Image-based media carries its own artwork, so no icon plate is applied. */
.og-feature__media--image {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
}

.og-feature__image { width: 64px; height: 64px; object-fit: contain; }

.og-feature__body {
    display: flex;
    flex-direction: column;
    gap: var(--og-space-2);
    flex: 1 1 auto;
    min-width: 0;
}

.og-feature__title { margin: 0; font-size: var(--og-font-size-lg); }

.og-feature__text { margin: 0; color: var(--og-color-ink-muted); }

.og-feature__link {
    display: inline-flex;
    align-items: center;
    gap: var(--og-space-2);
    margin-top: auto;
    padding-top: var(--og-space-2);
    color: var(--og-color-primary-dark);
    font-weight: var(--og-font-weight-semibold);
    text-decoration: none;
}

.og-feature__link:hover { text-decoration: underline; }

/* 44px minimum pointer target without changing the visual size of the link. */
.og-feature__link::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 44px;
    vertical-align: middle;
}

/* ---- components/og-section-title.css ---- */
/* og / components / section-title ----------------------------------------- */

.og-section-title { margin-bottom: var(--og-space-6); max-width: 60ch; }

.og-section-title--center { margin-inline: auto; text-align: center; }
.og-section-title--end { margin-left: auto; text-align: right; }

.og-section-title__eyebrow {
    display: block;
    margin-bottom: var(--og-space-2);
    font-size: var(--og-font-size-sm);
    font-weight: var(--og-font-weight-semibold);
    letter-spacing: var(--og-letter-spacing-wide);
    text-transform: uppercase;
    color: var(--og-color-primary-dark);
}

.og-section-title__heading { margin: 0; }

.og-section-title__rule {
    width: 56px;
    height: 3px;
    margin-top: var(--og-space-4);
    background-color: var(--og-color-accent);
    border: 0;
}

.og-section-title--center .og-section-title__rule { margin-inline: auto; }
.og-section-title--end .og-section-title__rule { margin-left: auto; }

.og-section-title__description {
    margin-top: var(--og-space-4);
    font-size: var(--og-font-size-lg);
    color: var(--og-color-ink-muted);
}

/* ---- components/og-table.css ---- */
/* og / components / table ------------------------------------------------- */

/* Horizontal overflow is contained here, never on the page body. The region
   is focusable so keyboard users can scroll it. */
.og-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.og-table {
    width: 100%;
    font-size: var(--og-font-size-md);
}

.og-table__caption {
    padding-bottom: var(--og-space-3);
    font-size: var(--og-font-size-sm);
    color: var(--og-color-ink-muted);
    text-align: left;
    caption-side: top;
}

.og-table th,
.og-table td {
    padding: var(--og-space-3) var(--og-space-4);
    text-align: left;
    vertical-align: top;
}

.og-table thead th {
    font-weight: var(--og-font-weight-semibold);
    color: var(--og-color-ink);
    background-color: var(--og-color-surface-muted);
    border-bottom: 2px solid var(--og-color-border-strong);
    white-space: nowrap;
}

.og-table tbody tr + tr td,
.og-table tbody tr + tr th {
    border-top: var(--og-border-width) solid var(--og-color-border);
}

.og-table--bordered th,
.og-table--bordered td {
    border: var(--og-border-width) solid var(--og-color-border);
}

.og-table--striped tbody tr:nth-child(odd) {
    background-color: var(--og-color-surface-muted);
}

.og-table__cell--center { text-align: center; }
.og-table__cell--end { text-align: right; }

.og-table__empty {
    padding: var(--og-space-6);
    color: var(--og-color-ink-muted);
    text-align: center;
    background-color: var(--og-color-surface-muted);
    border: var(--og-border-width) dashed var(--og-color-border-strong);
    border-radius: var(--og-radius-sm);
}

/* ---- components/og-form.css ---- */
/* og / components / form -------------------------------------------------- */

.og-form { display: flex; flex-direction: column; gap: var(--og-space-5); }

.og-field { display: flex; flex-direction: column; gap: var(--og-space-2); }

/* Labels are always rendered and always visible. A placeholder is never a
   substitute for a label in this system. */
.og-field__label {
    font-size: var(--og-font-size-sm);
    font-weight: var(--og-font-weight-semibold);
    color: var(--og-color-ink);
}

.og-field__required {
    margin-left: var(--og-space-1);
    color: var(--og-color-danger);
}

.og-field__control {
    width: 100%;
    padding: var(--og-space-3) var(--og-space-4);
    color: var(--og-color-ink);
    background-color: var(--og-color-surface);
    border: var(--og-border-width) solid var(--og-color-border-strong);
    border-radius: var(--og-radius-sm);
    transition: border-color var(--og-duration-fast) var(--og-easing-standard),
                box-shadow var(--og-duration-fast) var(--og-easing-standard);
}

.og-field__control::placeholder { color: var(--og-color-ink-muted); }

.og-field__control:focus {
    border-color: var(--og-color-primary);
    box-shadow: var(--og-focus-ring);
    outline: none;
}

.og-field__control:disabled,
.og-field__control[readonly] {
    background-color: var(--og-color-surface-muted);
    cursor: not-allowed;
}

textarea.og-field__control { min-height: 8rem; resize: vertical; }

.og-field__help {
    font-size: var(--og-font-size-sm);
    color: var(--og-color-ink-muted);
}

.og-field__error {
    display: flex;
    align-items: center;
    gap: var(--og-space-2);
    font-size: var(--og-font-size-sm);
    font-weight: var(--og-font-weight-medium);
    color: var(--og-color-danger);
}

.og-field--invalid .og-field__control {
    border-color: var(--og-color-danger);
}

.og-field--invalid .og-field__control:focus {
    box-shadow: 0 0 0 3px rgba(220, 67, 73, 0.3);
}

.og-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--og-space-3);
    align-items: center;
}

/* Honeypot wrapper. Kept out of the visual flow without display:none or
   visibility:hidden - some bots skip fields hidden that way, which would defeat
   the trap. The field is also aria-hidden and tabindex="-1" in the markup, so a
   person using a keyboard or a screen reader never encounters it. */
.og-form__trap {
    position: absolute !important;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Privacy acknowledgement shown directly above the submit control. */
.og-form__notice {
    margin: 0;
    font-size: var(--og-font-size-sm);
    color: var(--og-color-ink-muted);
    max-width: 62ch;
}

/* ---- components/og-breadcrumb.css ---- */
/* og / components / breadcrumb -------------------------------------------- */

/* Spacing belongs to the breadcrumb itself. It is never used as a spacer for
   any other element, so a page without a breadcrumb still lays out correctly. */
.og-breadcrumb { font-size: var(--og-font-size-sm); }

.og-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--og-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.og-breadcrumb__item { display: flex; align-items: center; gap: var(--og-space-2); }

.og-breadcrumb__item + .og-breadcrumb__item::before {
    content: "/";
    color: var(--og-color-ink-muted);
    opacity: 0.6;
}

.og-breadcrumb__link { color: inherit; text-decoration: none; }
.og-breadcrumb__link:hover { text-decoration: underline; }

.og-breadcrumb__current { font-weight: var(--og-font-weight-semibold); color: var(--og-color-primary-dark); }

.og-page-banner--image .og-breadcrumb,
.og-page-banner--image .og-breadcrumb__current { color: var(--og-color-ink-inverse); }

/* ---- components/og-header.css ---- */
/* og / components / header ------------------------------------------------
   The header sits in normal document flow. Stickiness uses position:sticky,
   so it needs no JavaScript to stay put and no page-level spacer to clear it.
   JavaScript only toggles .is-scrolled for the condensed appearance.
   ------------------------------------------------------------------------- */

.og-header {
    position: relative;
    z-index: var(--og-z-header);
    background-color: var(--og-color-surface);
    border-bottom: var(--og-border-width) solid var(--og-color-border);
    transition: background-color var(--og-duration-base) var(--og-easing-standard),
                box-shadow var(--og-duration-base) var(--og-easing-standard);
}

.og-header--sticky { position: sticky; top: 0; }

.og-header.is-scrolled { box-shadow: var(--og-shadow-md); }

/* Overlay variant for pages whose hero starts at the very top. Reverts to the
   solid treatment as soon as the page scrolls. */
.og-header--transparent {
    position: absolute;
    inset-inline: 0;
    top: 0;
    background-color: transparent;
    border-bottom-color: transparent;
}

.og-header--transparent .og-header__link,
.og-header--transparent .og-nav__toggle,
.og-header--transparent .og-nav__link,
.og-header--transparent .og-nav__disclosure {
    color: var(--og-color-ink-inverse);
}

.og-header--transparent.is-scrolled {
    position: fixed;
    background-color: var(--og-color-surface);
    border-bottom-color: var(--og-color-border);
}

.og-header--transparent.is-scrolled .og-header__link,
.og-header--transparent.is-scrolled .og-nav__toggle,
.og-header--transparent.is-scrolled .og-nav__link,
.og-header--transparent.is-scrolled .og-nav__disclosure {
    color: var(--og-color-ink);
}

.og-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--og-space-5);
    min-height: var(--og-header-height);
    transition: min-height var(--og-duration-base) var(--og-easing-standard);
}

.og-header.is-scrolled .og-header__inner { min-height: var(--og-header-height); }

.og-header__brand { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; }

.og-header__link { display: inline-flex; align-items: center; text-decoration: none; }

.og-header__logo {
    width: auto;
    max-width: 100%;
    height: 44px;
    transition: height var(--og-duration-base) var(--og-easing-standard);
}

.og-header.is-scrolled .og-header__logo { height: 36px; }

/* Skip link: the first focusable element on the page. */
.og-skip-link {
    position: absolute;
    top: var(--og-space-2);
    left: var(--og-space-2);
    z-index: var(--og-z-skip-link);
    padding: var(--og-space-2) var(--og-space-4);
    color: var(--og-color-ink-inverse);
    /* The skip link carries white TEXT, so it needs 4.5:1 - the brand teal gives
       only 3.49:1. Same hue, darker shade. */
    background-color: var(--og-color-primary-dark);
    border-radius: var(--og-radius-sm);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--og-duration-fast) var(--og-easing-standard);
}

.og-skip-link:focus { color: var(--og-color-ink-inverse); transform: translateY(0); }

/* ---- components/og-navigation.css ---- */
/* og / components / navigation --------------------------------------------
   Submenus open on hover AND on focus AND on click. A parent item is a real
   <button> with aria-expanded, so it is reachable by keyboard - unlike an
   href="#" anchor, which is not.
   ------------------------------------------------------------------------- */

.og-nav { display: flex; align-items: center; }

.og-nav__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--og-color-ink);
    background: none;
    border: 0;
    border-radius: var(--og-radius-sm);
}

.og-nav__toggle-bar {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    background-color: currentColor;
    transition: transform var(--og-duration-base) var(--og-easing-standard),
                opacity var(--og-duration-fast) var(--og-easing-standard);
}

.og-nav__toggle-bar::before,
.og-nav__toggle-bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    transition: transform var(--og-duration-base) var(--og-easing-standard);
}

.og-nav__toggle-bar::before { top: -7px; }
.og-nav__toggle-bar::after { top: 7px; }

.og-nav__toggle[aria-expanded="true"] .og-nav__toggle-bar { background-color: transparent; }
.og-nav__toggle[aria-expanded="true"] .og-nav__toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.og-nav__toggle[aria-expanded="true"] .og-nav__toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

.og-nav__list {
    display: flex;
    align-items: center;
    gap: var(--og-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.og-nav__item { position: relative; }

.og-nav__link,
.og-nav__disclosure {
    display: inline-flex;
    align-items: center;
    gap: var(--og-space-2);
    padding: var(--og-space-3);
    color: var(--og-color-ink);
    background: none;
    border: 0;
    font-size: var(--og-font-size-sm);
    font-weight: var(--og-font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--og-radius-sm);
    transition: color var(--og-duration-fast) var(--og-easing-standard);
}

.og-nav__link:hover,
.og-nav__disclosure:hover { color: var(--og-color-primary-dark); }

/* Active state. The legacy nav had no way to show the current page. */
.og-nav__item.is-active > .og-nav__link,
.og-nav__item.is-active > .og-nav__disclosure { color: var(--og-color-primary-dark); }

.og-nav__item.is-active > .og-nav__link::after {
    content: "";
    position: absolute;
    inset-inline: var(--og-space-3);
    bottom: 0;
    height: 2px;
    background-color: var(--og-color-accent);
}

.og-nav__caret { flex: none; transition: transform var(--og-duration-fast) var(--og-easing-standard); }
.og-nav__disclosure[aria-expanded="true"] .og-nav__caret { transform: rotate(180deg); }

/* --- Submenu ------------------------------------------------------------- */

/* Closed submenus use display:none, not visibility:hidden.
   visibility:hidden still occupies layout, so these absolutely-positioned panels
   (min-width 15rem, and nested ones offset a further 100% to the right) extended
   the document's scrollable area and produced a horizontal scrollbar at every
   desktop width - 219px of overflow at 800px, 13px even at 1440px. */
.og-nav__submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--og-z-overlay);
    min-width: 15rem;
    margin: 0;
    padding: var(--og-space-2);
    list-style: none;
    background-color: var(--og-color-surface);
    border: var(--og-border-width) solid var(--og-color-border);
    border-radius: var(--og-radius-md);
    box-shadow: var(--og-shadow-lg);
    opacity: 1;
    transform: translateY(0);
}

.og-nav__item:hover > .og-nav__submenu,
.og-nav__item:focus-within > .og-nav__submenu,
.og-nav__item.is-open > .og-nav__submenu {
    display: block;
}

/* Fade in where the browser supports animating to/from display:none. Elsewhere the
   menu simply appears, which is the correct trade against a permanent scrollbar. */
@supports (transition-behavior: allow-discrete) {
    .og-nav__submenu {
        transition: opacity var(--og-duration-fast) var(--og-easing-standard),
                    transform var(--og-duration-fast) var(--og-easing-standard),
                    display var(--og-duration-fast) allow-discrete;
    }

    .og-nav__item:hover > .og-nav__submenu,
    .og-nav__item:focus-within > .og-nav__submenu,
    .og-nav__item.is-open > .og-nav__submenu {
        @starting-style {
            opacity: 0;
            transform: translateY(-4px);
        }
    }
}

/* The last few top-level items sit near the right edge, so their panels open
   leftward and cannot push the page wider while they are shown. */
.og-nav__list > .og-nav__item:nth-last-child(-n+3) > .og-nav__submenu {
    left: auto;
    right: 0;
}

.og-nav__list > .og-nav__item:nth-last-child(-n+3) .og-nav__submenu .og-nav__submenu {
    left: auto;
    right: 100%;
}

.og-nav__submenu .og-nav__link {
    display: flex;
    width: 100%;
    padding: var(--og-space-2) var(--og-space-3);
    font-weight: var(--og-font-weight-regular);
    white-space: normal;
}

.og-nav__submenu .og-nav__link:hover { background-color: var(--og-color-primary-subtle); }

/* Second-level submenu flies out to the side on desktop. */
.og-nav__submenu .og-nav__submenu { top: calc(var(--og-space-2) * -1); left: 100%; }

.og-nav__submenu .og-nav__disclosure {
    width: 100%;
    justify-content: space-between;
    padding: var(--og-space-2) var(--og-space-3);
    font-weight: var(--og-font-weight-regular);
}

.og-nav__submenu .og-nav__disclosure .og-nav__caret { transform: rotate(-90deg); }
.og-nav__submenu .og-nav__disclosure[aria-expanded="true"] .og-nav__caret { transform: rotate(90deg); }

/* ---- components/og-footer.css ---- */
/* og / components / footer ------------------------------------------------- */

/* The footer used --og-color-surface-inverse (#191a20), a neutral near-black. It
   carried no relationship to the white header, the teal/green/blue logo or the
   light pages above it, and it was the heaviest block on the site.

   It now uses the branded dark surface - a deeper step of the primary teal. Against
   white it measures 7.7:1 rather than 17.4:1, so it is materially lighter while
   still separating cleanly from the white page content that precedes it.

   Text was rgba(255,255,255,0.78), which is 5.4:1 here. That passes, but it left
   links and body text the same colour, so the two are split instead: body text
   opaque-ish at 0.86 (6.1:1) and links full white (7.7:1), which gives links a
   visible lift as well as their underline. */
.og-footer {
    color: rgba(255, 255, 255, 0.86);
    background-color: var(--og-color-surface-brand);
}

.og-footer__main { padding-block: var(--og-space-8); }

.og-footer__grid {
    display: grid;
    gap: var(--og-space-7);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.og-footer__headline {
    margin: 0 0 var(--og-space-3);
    font-size: var(--og-font-size-lg);
    color: var(--og-color-ink-inverse);
}

/* The address is 143 characters. The footer grid gives its only populated column
   the full 1138px content width, so from about 1366px up it rendered as a single
   143-character line running the whole page - roughly twice a comfortable measure,
   and it read as a stray strip of small text rather than an address block.
   60ch matches .og-cta__text, the measure already used elsewhere. */
.og-footer__address {
    margin: 0;
    max-width: 60ch;
    font-style: normal;
    line-height: var(--og-line-height-loose);
}

.og-footer__col-title {
    margin: 0 0 var(--og-space-4);
    font-size: var(--og-font-size-sm);
    font-weight: var(--og-font-weight-semibold);
    letter-spacing: var(--og-letter-spacing-wide);
    text-transform: uppercase;
    color: var(--og-color-ink-inverse);
}

.og-footer__list { margin: 0; padding: 0; list-style: none; }
.og-footer__list li + li { margin-top: var(--og-space-2); }

/* Full white against the 0.86 body text, so a link is distinguishable by colour and
   not only by the underline it gains on hover. */
.og-footer__link {
    color: var(--og-color-ink-inverse);
    text-decoration: none;
}

.og-footer__link:hover,
.og-footer__link:focus-visible { text-decoration: underline; }

/* The global focus ring is --og-color-focus (#0497aa). That is the same teal family
   as this background and would all but disappear on it, so the footer takes a white
   ring. Width and offset stay with the global rule. */
.og-footer :focus-visible { outline-color: var(--og-color-ink-inverse); }

.og-footer__bar {
    padding-block: var(--og-space-4);
    /* Lifted from 0.14 to 0.22: the divider has to read against a mid-tone teal
       rather than near-black. */
    border-top: var(--og-border-width) solid rgba(255, 255, 255, 0.22);
}

.og-footer__bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--og-space-3);
    font-size: var(--og-font-size-sm);
}

.og-footer__copyright { margin: 0; }

.og-footer__legal { display: flex; flex-wrap: wrap; gap: var(--og-space-4); margin: 0; padding: 0; list-style: none; }

.og-footer__contact { display: flex; flex-direction: column; gap: var(--og-space-3); }

.og-footer__icon img { width: 40px; height: 40px; object-fit: contain; }

/* ---- components/og-hero.css ---- */
/* og / components / hero --------------------------------------------------

   CORPORATE BANNER.

   This replaces a full-viewport hero. The banner is a fixed, modest height that
   never references 100vh, so it sits directly under the header, shows the top of
   the next section on every screen, and cannot be pushed off the fold by a short
   laptop or a phone in landscape.

   Reference: the parallel OneGlobal project. What is carried across is its
   restraint rather than its markup - modest type (its body sits at 16-18px and
   its headings do not shout), a calm 4px-based spacing rhythm, soft radii, a
   single primary call to action with a trailing arrow, and slide indicators
   where the active one is a short pill rather than a larger dot. That project
   has no full-bleed banner of its own: both of its heroes put text on a light
   background beside a contained image card. The full-bleed treatment here comes
   from this project's brief, and the brand colours, images and copy are this
   project's own.

   SPLIT, NOT OVERLAID. The copy sits on a light brand-tinted panel on the left
   and the photograph occupies the right, full height, bleeding to the edge and
   never dimmed.

   That division is forced by the source material, not chosen for style. Every
   photograph in this set places its subject on the LEFT, and with the image
   spanning the whole banner the box was wider than the source (3.1:1 against
   2:1), so `cover` scaled by width and cropped nothing horizontally - no focal
   point could move a subject out from under an overlaid panel. Text over the
   image was measured against the actual pixels: a mid-strength scrim reached
   only 4.16:1 for the title and 3.83:1 for the supporting line, both below AA,
   and the
   scrim needed to pass AA turned every subject into a silhouette. Separating
   the two costs nothing and gives dark text on the tint about 11.9:1 while the
   photograph keeps 100% of its luminance.
   ------------------------------------------------------------------------- */

.og-hero {
    /* Height is a fixed length, never a viewport unit. Overridable per page via
       the component model. */
    --og-hero-height: 460px;
    /* Fluid, not fixed. A flat 30rem is correct at 1440 but collides with the
       photograph at 1024, where the container has already gone full-width and
       the media still claims 52% - the copy overlapped the image by 4px. Taking
       the smaller of the two keeps a real gap at every desktop width without a
       separate breakpoint. */
    --og-hero-panel-width: min(30rem, 42vw);
    /* Share of the banner given to the photograph. Also positions the arrows,
       so the controls cannot drift onto the image. */
    --og-hero-media-width: 52%;

    /* The design system's muted ink is calibrated against WHITE, where it scores
       4.53:1. On this brand tint it drops to 4.46:1 - below the 4.5:1 AA
       threshold. Rather than lighten the panel or leave a known failure, the
       panel carries its own slightly darker neutral, which measures 5.75:1 here.
       Same precedent as the token itself, which was darkened from #7a7a7a for
       exactly this reason. Not a brand colour and used nowhere else. */
    --og-hero-ink-muted: #5f5f5f;

    /* The left edge of the container's content box, so the indicators and the
       arrows line up with the copy instead of floating against the viewport.
       Percentages resolve against the hero, which is these controls' containing
       block. */
    --og-hero-inset: max(
        var(--og-container-gutter),
        calc((100% - var(--og-container-max)) / 2 + var(--og-container-gutter))
    );

    position: relative;
    height: var(--og-hero-height);
    overflow: hidden;
    /* The panel ground. It also fills the whole banner before an image paints,
       so a slow network shows brand tint rather than a white or black flash. */
    background-color: var(--og-color-primary-subtle);
    color: var(--og-color-ink);
}

.og-hero__viewport { position: absolute; inset: 0; }

.og-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    /* A plain cross-fade. No zoom, no pan - a moving photograph behind text is
       restless on a corporate page and costs legibility for nothing. */
    transition: opacity var(--og-duration-slow) var(--og-easing-standard),
                visibility var(--og-duration-slow) var(--og-easing-standard);
}

.og-hero__slide.is-active { opacity: 1; visibility: visible; }

/* --- Media layer --------------------------------------------------------- */

/* The photograph takes the right of the banner and bleeds to the edge. */
.og-hero__media {
    position: absolute;
    inset: 0 0 0 auto;
    width: var(--og-hero-media-width);
}

.og-hero__media picture { display: block; width: 100%; height: 100%; }

.og-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Per-slide focal point, set as an inline custom property by the component.
       Splitting the banner inverted which axis this controls. The media box is
       now 749x460 (1.63:1) against a 2:1 source, so `cover` scales by HEIGHT:
       nothing is cropped vertically at all, and roughly 171px of width is
       trimmed. The horizontal value therefore decides which slice of the
       photograph survives - which is what makes it possible to hold every
       subject in frame, and was impossible while the image spanned the banner. */
    object-position: var(--og-slide-focal, 50% 50%);
}

/* --- Seam -----------------------------------------------------------------
   The only treatment applied to the photograph: a short fade on its leading
   edge, from the panel tint to fully transparent inside 10% of the media's
   width. It dissolves the join between panel and picture so the two read as one
   banner rather than two boxes butted together. No part of the image beyond that
   fade is touched - no scrim, no tint, no dimming. */
.og-hero__slide--overlay .og-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        var(--og-color-primary-subtle) 0%,
        rgba(230, 246, 248, 0.70) 4%,
        rgba(230, 246, 248, 0) 10%
    );
}

/* --- Text layer ---------------------------------------------------------- */

.og-hero__content {
    position: relative;
    z-index: var(--og-z-raised);
    display: flex;
    align-items: center;
    height: 100%;
    pointer-events: none;
}

.og-hero__content > .og-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Room at the foot for the indicator row, so the copy stays optically
       centred in the space that is actually free. */
    padding-bottom: var(--og-space-6);
}

/* Only genuinely interactive children accept pointer events, so the text layer
   never intercepts a click meant for a control. */
.og-hero__content a,
.og-hero__content button { pointer-events: auto; }

.og-hero__text {
    width: 100%;
    max-width: var(--og-hero-panel-width);
    /* A reserved block height, with the copy anchored to its top and the call to
       action pinned to its foot. Every slide therefore places its title, its
       supporting line and its button at exactly the same points, whatever the
       copy does in between. */
    min-height: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    color: var(--og-color-ink);
}

/* Scoped with .og-hero so these beat base/og-typography.css.
   `.og-root h2` and `.og-root p` score (0,1,1) and outrank a single component
   class (0,1,0), so `.og-hero__title` alone lost the cascade and the headline
   rendered at the generic h2 size.
   NOTE: this affects every component heading in the design system, not just the
   hero - see the report. It is scoped here rather than fixed in the base layer
   to keep this change inside the hero. */
.og-hero .og-hero__title {
    margin: 0 0 var(--og-space-3);
    /* Banner scale, not landing-page scale: 24px on a phone to 32px on a wide
       desktop. The previous hero ran to 44px, which read as advertising. */
    font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
    font-weight: var(--og-font-weight-semibold, 600);
    line-height: 1.2;
    letter-spacing: var(--og-letter-spacing-tight);
    color: var(--og-color-ink);
    /* A 24ch measure keeps every title in this set to two lines. Reserving those
       two lines means a one-line title leaves the same space as a two-line one,
       so nothing below moves as the slides rotate.

       The text is then pushed to the BOTTOM of that reservation. Left at the
       top, a one-line title ("Online Services") sat with a visible hole beneath
       it before the supporting line; bottom-aligned, the spare line falls above
       the title where it reads as ordinary headroom, and the subtitle and button
       still never move. */
    text-wrap: balance;
}

.og-hero .og-hero__subtitle {
    margin: 0 0 var(--og-space-6);
    font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
    font-weight: var(--og-font-weight-regular);
    line-height: 1.6;
    color: var(--og-hero-ink-muted);
    max-width: 46ch;
    /* Two lines reserved for the same reason as the title. */
    min-height: calc(2em * 1.6);
}

/* The single primary call to action is the shared design-system component - it
   inherits background, text colour, radius, padding, height, typography, hover
   and focus treatment from og-button.css, so every slide is identical by
   construction and there is nothing hero-specific to keep in sync. */
/* Pinned to the foot of the reserved block, so the call to action occupies the
   same point on every slide however the copy above it wrapped. */
.og-hero__text .og-btn { margin-top: auto; align-self: flex-start; }

/* --- Controls ------------------------------------------------------------
   Indicators sit at the foot of the banner, aligned to the copy above them.
   Arrows sit opposite. Both are inside the container's measure rather than
   pinned to the viewport edges, which is what makes them read as part of the
   banner rather than as browser chrome. */

.og-hero__dots {
    position: absolute;
    bottom: var(--og-space-5);
    left: var(--og-hero-inset);
    z-index: var(--og-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--og-space-2);
}

/* 44px hit area around a small indicator: pointer target size without visual
   bulk. */
.og-hero__dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    background-color: rgba(30, 30, 30, 0.6);
    border: 0;
    border-radius: var(--og-radius-pill);
    transition: width var(--og-duration-fast) var(--og-easing-standard),
                background-color var(--og-duration-fast) var(--og-easing-standard);
}

.og-hero__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.og-hero__dot:hover { background-color: rgba(30, 30, 30, 0.85); }

/* The active indicator is a short pill rather than a larger dot - the treatment
   used in the parallel project, and quieter than a colour change. */
.og-hero__dot[aria-current="true"] {
    width: 24px;
    background-color: var(--og-color-primary-dark);
}

.og-hero__nav {
    position: absolute;
    top: auto;
    bottom: var(--og-space-5);
    z-index: var(--og-z-sticky);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Larger and more clearly a control: a filled brand-tinted disc with a solid
       border, rather than a faint outline. Still well inside the banner - both
       arrows are positioned from the media edge, so they can never overlap the
       photograph or leave the band. */
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--og-color-primary-dark);
    background-color: var(--og-color-surface);
    border: 2px solid var(--og-color-primary-dark);
    box-shadow: 0 2px 10px rgba(2, 38, 43, 0.12);
    border-radius: var(--og-radius-pill);
    transform: none;
    transition: background-color var(--og-duration-fast) var(--og-easing-standard),
                border-color var(--og-duration-fast) var(--og-easing-standard);
}

/* 44px hit area around the 40px control, matching the indicators. The visual
   size stays 40px so the pair still reads as compact corporate chrome, but the
   touch target clears the recommended minimum now that these are shown on
   phones as well. */
.og-hero__nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
}

.og-hero__nav:hover {
    color: var(--og-color-ink-inverse);
    background-color: var(--og-color-primary-dark);
    border-color: var(--og-color-primary-dark);
}

/* Parked just inside the photograph's leading edge, so both arrows stay on the
   panel. Positioned from the same variable as the media, so they cannot drift
   onto the image when the split changes at a breakpoint. */
.og-hero__nav--next { left: auto; right: calc(var(--og-hero-media-width) + var(--og-space-5)); }
.og-hero__nav--prev { left: auto; right: calc(var(--og-hero-media-width) + var(--og-space-5) + 56px); }

/* Retained for any page that opts into a scroll cue. The Home banner does not:
   at 460px the following section is already on screen, so the cue would be
   pointing at something the visitor can already see. */
.og-hero__scroll {
    position: absolute;
    bottom: var(--og-space-5);
    left: var(--og-hero-inset);
    z-index: var(--og-z-sticky);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--og-color-ink-inverse);
    background-color: var(--og-color-accent-dark);
    border-radius: var(--og-radius-pill);
    text-decoration: none;
}

.og-hero__scroll:hover { color: var(--og-color-ink-inverse); background-color: #992b30; }

/* Single-slide banner: no controls, no transition. */
.og-hero--static .og-hero__slide { opacity: 1; visibility: visible; }

/* ---- components/og-page-banner.css ---- */
/* og / components / page-banner ------------------------------------------- */

.og-page-banner {
    position: relative;
    padding-block: var(--og-space-9);
    color: var(--og-color-ink);
    background-color: var(--og-color-surface-muted);
}

.og-page-banner--image {
    color: var(--og-color-ink-inverse);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.og-page-banner--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(25, 26, 32, 0.55);
}

.og-page-banner__inner { position: relative; z-index: var(--og-z-base); }

.og-page-banner__title { margin: 0; }

.og-page-banner--image .og-page-banner__title { color: var(--og-color-ink-inverse); }

.og-page-banner__subtitle {
    max-width: 60ch;
    margin: var(--og-space-3) 0 0;
    font-size: var(--og-font-size-lg);
    color: var(--og-color-ink-muted);
}

.og-page-banner--image .og-page-banner__subtitle { color: rgba(255, 255, 255, 0.88); }

.og-page-banner__breadcrumb { margin-bottom: var(--og-space-4); }

/* ---- components/og-cta.css ---- */
/* og / components / cta ---------------------------------------------------- */

.og-cta { padding-block: var(--og-space-8); }

.og-cta--muted   { background-color: var(--og-color-surface-muted); }
.og-cta--inverse { color: var(--og-color-ink-inverse); background-color: var(--og-color-surface-inverse); }
.og-cta--inverse .og-cta__title { color: var(--og-color-ink-inverse); }
.og-cta--inverse .og-cta__text  { color: rgba(255, 255, 255, 0.82); }

.og-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--og-space-6);
}

.og-cta--center .og-cta__inner { flex-direction: column; text-align: center; }
.og-cta--end .og-cta__inner { flex-direction: column; align-items: flex-end; text-align: right; }

/* 28rem is a WIDTH preference: "take a column of about 448px, grow into the space
   left over, shrink when there isn't any". flex-basis sizes the MAIN axis, though,
   so the moment .og-cta__inner becomes a column that 448px turns into a HEIGHT and
   reserves 448px of empty space under two lines of text. That was the whole reason
   the home page band measured 633px on a 390px phone around ~250px of content.

   The basis is therefore reset wherever the inner is a column: the two alignment
   modifiers below, and the <768px breakpoint in responsive/og-responsive.css. */
.og-cta__body { flex: 1 1 28rem; }

.og-cta--center .og-cta__body,
.og-cta--end .og-cta__body { flex-basis: auto; }
.og-cta__title { margin: 0; }
.og-cta__text { margin: var(--og-space-3) 0 0; max-width: 60ch; color: var(--og-color-ink-muted); }
.og-cta__actions { display: flex; flex-wrap: wrap; gap: var(--og-space-3); }

/* --- Image-backed CTA -----------------------------------------------------
   The scrim is supplied by --og-cta-overlay so the component stays generic and
   the specific treatment lives with the page that uses it. */
.og-cta--image {
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.og-cta--overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: var(--og-z-base);
    background: var(--og-cta-overlay, rgba(25, 26, 32, 0.6));
}

.og-cta--image .og-cta__inner { position: relative; z-index: var(--og-z-raised); }

.og-cta--image .og-cta__title { color: var(--og-color-ink-inverse); }
.og-cta--image .og-cta__text { color: var(--og-color-ink-inverse); }

/* ---- utilities/og-a11y.css ---- */
/* og / utilities / accessibility ------------------------------------------- */

/* Available to screen readers, hidden visually. */
.og-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* As above, but revealed when focused - the pattern used by the skip link. */
.og-visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.og-focus-ring:focus-visible {
    outline: 2px solid var(--og-color-focus);
    outline-offset: var(--og-focus-offset);
}

/* ---- utilities/og-spacing.css ---- */
/* og / utilities / spacing -------------------------------------------------
   Deliberately small. Utilities exist for one-off adjustments; anything used
   repeatedly belongs in a component.
   ------------------------------------------------------------------------- */

.og-m-0 { margin: 0 !important; }
.og-mt-0 { margin-top: 0 !important; }
.og-mb-0 { margin-bottom: 0 !important; }

.og-mt-2 { margin-top: var(--og-space-2) !important; }
.og-mt-4 { margin-top: var(--og-space-4) !important; }
.og-mt-6 { margin-top: var(--og-space-6) !important; }
.og-mt-8 { margin-top: var(--og-space-8) !important; }

.og-mb-2 { margin-bottom: var(--og-space-2) !important; }
.og-mb-4 { margin-bottom: var(--og-space-4) !important; }
.og-mb-6 { margin-bottom: var(--og-space-6) !important; }
.og-mb-8 { margin-bottom: var(--og-space-8) !important; }

.og-p-0 { padding: 0 !important; }
.og-p-4 { padding: var(--og-space-4) !important; }
.og-p-6 { padding: var(--og-space-6) !important; }

.og-py-6 { padding-block: var(--og-space-6) !important; }
.og-py-8 { padding-block: var(--og-space-8) !important; }

/* ---- utilities/og-text.css ---- */
/* og / utilities / text ---------------------------------------------------- */

.og-text-start { text-align: left !important; }
.og-text-center { text-align: center !important; }
.og-text-end { text-align: right !important; }

.og-text-muted { color: var(--og-color-ink-muted) !important; }
.og-text-primary { color: var(--og-color-primary-dark) !important; }
.og-text-accent { color: var(--og-color-accent-dark) !important; }
.og-text-inverse { color: var(--og-color-ink-inverse) !important; }

.og-text-sm { font-size: var(--og-font-size-sm) !important; }
.og-text-lg { font-size: var(--og-font-size-lg) !important; }

.og-font-regular { font-weight: var(--og-font-weight-regular) !important; }
.og-font-semibold { font-weight: var(--og-font-weight-semibold) !important; }

.og-text-uppercase { text-transform: uppercase !important; letter-spacing: var(--og-letter-spacing-wide); }
.og-text-nowrap { white-space: nowrap !important; }

.og-text-balance { text-wrap: balance; }

/* Clamp to a fixed number of lines. Set --og-line-clamp to override. */
.og-text-clamp {
    display: -webkit-box;
    -webkit-line-clamp: var(--og-line-clamp, 3);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- utilities/og-display.css ---- */
/* og / utilities / display ------------------------------------------------- */

.og-d-none { display: none !important; }
.og-d-block { display: block !important; }
.og-d-inline-flex { display: inline-flex !important; }
.og-d-flex { display: flex !important; }

.og-flex-wrap { flex-wrap: wrap !important; }
.og-items-center { align-items: center !important; }
.og-items-start { align-items: flex-start !important; }
.og-justify-center { justify-content: center !important; }
.og-justify-between { justify-content: space-between !important; }

.og-w-full { width: 100% !important; }
.og-h-full { height: 100% !important; }
.og-mx-auto { margin-inline: auto !important; }

.og-relative { position: relative !important; }
.og-overflow-hidden { overflow: hidden !important; }

/* Reserve intrinsic space for media so images cannot shift layout on load. */
.og-ratio-16x9 { aspect-ratio: 16 / 9; object-fit: cover; }
.og-ratio-4x3 { aspect-ratio: 4 / 3; object-fit: cover; }
.og-ratio-1x1 { aspect-ratio: 1 / 1; object-fit: cover; }

/* ---- responsive/og-responsive.css ---- */
/* =========================================================================
   og / responsive
   All breakpoint behaviour for the system lives here, so a component file is
   never the reason a layout collapses at an unexpected width.

   Breakpoints (aligned with the existing site's Bootstrap 3 tiers):
     xs   < 480px    small phones
     sm   < 768px    phones / mobile navigation threshold
     md   < 992px    tablets
     lg  >= 1200px   large desktop
   ========================================================================= */

/* --- Tablet and below ---------------------------------------------------- */
@media (max-width: 991px) {
    .og-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .og-grid--sidebar { grid-template-columns: minmax(0, 1fr); }
    /* Tablet: the split holds, with a shorter band, a narrower measure and a
       slightly smaller share for the photograph so the copy is not squeezed.
       The arrows are positioned from the media variable, so they follow it. */
    .og-hero {
        --og-hero-height: 400px;
        --og-hero-panel-width: 22rem;
        --og-hero-media-width: 40%;
    }

    .og-hero__text { min-height: 13rem; }
    .og-hero .og-hero__subtitle { max-width: 34ch; }
}

/* --- Navigation threshold (991px) -----------------------------------------
   The primary navigation carries eight top-level items; laid out horizontally it
   needs about 965px including the logo, so it cannot fit a 768px tablet. The
   drawer therefore takes over below 992px, not 768px. utils/og-viewport.js
   exports NAV_MAX with the same value - the two must be changed together.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* Header collapses to a disclosure panel. */
    .og-nav__toggle { display: inline-flex; }

    .og-header__inner { min-height: var(--og-header-height); }

    .og-nav__panel {
        position: absolute;
        inset-inline: 0;
        top: 100%;
        z-index: var(--og-z-overlay);
        display: none;
        padding: var(--og-space-3) var(--og-container-gutter) var(--og-space-5);
        background-color: var(--og-color-surface);
        border-bottom: var(--og-border-width) solid var(--og-color-border);
        box-shadow: var(--og-shadow-lg);
        max-height: calc(100vh - var(--og-header-height));
        overflow-y: auto;
    }

    .og-nav__panel.is-open { display: block; }

    .og-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

    .og-nav__link,
    .og-nav__disclosure {
        width: 100%;
        justify-content: space-between;
        padding: var(--og-space-3) 0;
        font-size: var(--og-font-size-md);
        border-bottom: var(--og-border-width) solid var(--og-color-border);
    }

    .og-nav__item.is-active > .og-nav__link::after { content: none; }

    /* Submenus become inline accordions. Hover and focus-within must not open
       them on touch, so only the explicit .is-open state applies here. */
    .og-nav__submenu,
    .og-nav__submenu .og-nav__submenu {
        position: static;
        display: none;
        min-width: 0;
        padding: 0 0 0 var(--og-space-4);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .og-nav__item:hover > .og-nav__submenu,
    .og-nav__item:focus-within > .og-nav__submenu { display: none; }

    .og-nav__item.is-open > .og-nav__submenu { display: block; }

    .og-nav__submenu .og-nav__disclosure .og-nav__caret { transform: rotate(0deg); }
    .og-nav__submenu .og-nav__disclosure[aria-expanded="true"] .og-nav__caret { transform: rotate(180deg); }

    /* Transparent header always uses the solid treatment on mobile, so the
       panel never overlays an image with unreadable contrast. */
    .og-header--transparent {
        position: relative;
        background-color: var(--og-color-surface);
        border-bottom-color: var(--og-color-border);
    }

    .og-header--transparent .og-header__link,
    .og-header--transparent .og-nav__toggle,
    .og-header--transparent .og-nav__link,
    .og-header--transparent .og-nav__disclosure { color: var(--og-color-ink); }
}

/* --- Mobile navigation threshold ----------------------------------------- */
@media (max-width: 767px) {
    .og-grid--2,
    .og-grid--3,
    .og-grid--4 { grid-template-columns: minmax(0, 1fr); }

    .og-section { --og-section-space: var(--og-space-7); }

    /* Stacking the CTA turns .og-cta__body's 28rem flex-basis from a width into a
       height - see the note in components/og-cta.css - so it is reset here, beside
       the rule that causes it. */
    .og-cta__inner { flex-direction: column; align-items: flex-start; }
    .og-cta__body { flex-basis: auto; }
    .og-page-banner { padding-block: var(--og-space-7); }
    /* MOBILE: the split has no room to be a split. Below 768px a 40% column is
       too narrow to hold a headline, so the photograph goes full width and the
       panel tint becomes a wash across the whole banner instead. The language is
       unchanged - light ground, dark text - so it reads as the same component,
       not a different one. */
    .og-hero {
        --og-hero-height: 300px;
        --og-hero-panel-width: none;
        --og-hero-media-width: 100%;
    }

    .og-hero__image {
        /* More of the width is trimmed at this size, so the subject is held
           closer to the visible edge. */
        object-position: var(--og-slide-focal-mobile, var(--og-slide-focal, 50% 50%));
    }

    /* Wash rather than seam: opaque under the copy, easing off to the right so a
       little of the photograph still shows through beside it. */
    .og-hero__slide--overlay .og-hero__media::after {
        background: linear-gradient(
            90deg,
            var(--og-color-primary-subtle) 0%,
            rgba(230, 246, 248, 0.95) 52%,
            rgba(230, 246, 248, 0.80) 100%
        );
    }

    .og-hero__content > .og-container { padding-bottom: var(--og-space-7); }

    .og-hero__text { min-height: 9.5rem; }

    .og-hero .og-hero__title { margin-bottom: var(--og-space-2); }

    .og-hero .og-hero__subtitle {
        margin-bottom: var(--og-space-5);
        max-width: 36ch;
    }

    /* Arrows stay on mobile. They are positioned from the media width on
       desktop, which is 100% here - that would push them off-screen - so at this
       size they anchor to the container edge instead, opposite the indicators.
       Both keep the 48px box and hit area from the component. */
    .og-hero__nav--next { right: var(--og-hero-inset); }
    .og-hero__nav--prev { right: calc(var(--og-hero-inset) + 56px); }

}

/* --- Small phones -------------------------------------------------------- */
@media (max-width: 479px) {
    /* Narrower screens: a slightly shorter band, and the copy wraps to more
       lines so the reservations grow with it rather than being fixed. */
    .og-hero { --og-hero-height: 280px; }
    .og-hero .og-hero__subtitle { max-width: 32ch; }

    .og-footer__bar-inner { flex-direction: column; align-items: flex-start; }
}

/* --- Short viewports (phone held in landscape) ----------------------------
   The banner is a fixed height at every width, which is the point - but on a
   viewport only ~300-400px tall even 400px pushes the call to action out of
   sight. This shortens the band rather than reintroducing a viewport-sized
   hero, so the whole banner including its CTA stays within reach. Width is
   irrelevant here, so this deliberately keys off height alone. */
@media (max-height: 520px) and (orientation: landscape) {
    .og-hero { --og-hero-height: 240px; }
    .og-hero__text { min-height: 8rem; }
    .og-hero .og-hero__title { margin-bottom: var(--og-space-2); }
    .og-hero .og-hero__subtitle { margin-bottom: var(--og-space-4); }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
    .og-header,
    .og-footer,
    .og-hero__nav,
    .og-hero__dots,
    .og-skip-link { display: none !important; }

    .og-root { color: #000; background: #fff; }
}