/* ==========================================================================
   Sentrynex — public design system
   Direction: Confident Professional
   Layer 2 of 2, loaded after public/vendor/bootstrap/bootstrap.min.css.
   Single source of truth for the public site. No build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typeface — self-hosted Inter (variable, latin + latin-ext)
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter/inter-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;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter/inter-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;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */

:root {
    /* Ink */
    --sx-ink: #0F172A;
    --sx-ink-2: #334155;
    --sx-body: #475569;
    --sx-muted: #64748B;
    --sx-on-dark: #F8FAFC;
    --sx-on-dark-2: #B8C4D4;

    /* Surface */
    --sx-surface: #FFFFFF;
    --sx-surface-alt: #F4F7FA;
    --sx-surface-deep: #0B1B2B;
    --sx-rule: #E2E8F0;
    --sx-rule-strong: #CBD5E1;

    /* Brand */
    --sx-accent: #0066CC;
    --sx-accent-hover: #0057AD;
    --sx-accent-deep: #0B4F8A;
    --sx-accent-subtle: #EAF2FB;
    --sx-accent-ring: rgba(0, 102, 204, 0.4);
    --sx-danger: #9B3232;
    --sx-danger-border: #C0564F;
    --sx-success: #2F6B4F;

    /* Space — 4px base, 1 / 4 / 9 rhythm */
    --sx-1: 4px;
    --sx-2: 8px;
    --sx-3: 12px;
    --sx-4: 16px;
    --sx-5: 20px;
    --sx-6: 24px;
    --sx-8: 32px;
    --sx-9: 36px;
    --sx-10: 40px;
    --sx-12: 48px;
    --sx-16: 64px;
    --sx-20: 80px;
    --sx-24: 96px;

    /* Radius */
    --sx-radius-sm: 6px;
    --sx-radius: 10px;
    --sx-radius-lg: 14px;

    /* Elevation — one scale, replaces six ad-hoc shadows */
    --sx-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
    --sx-shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08);
    --sx-shadow-3: 0 12px 32px rgba(15, 23, 42, 0.10);

    /* Motion */
    --sx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --sx-dur: 200ms;

    /* Rhythm */
    --sx-section-y: clamp(64px, 8vw, 112px);
    --sx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
}

/* Remap Bootstrap's own custom properties so its components inherit the
   system instead of fighting it. */
:root {
    --bs-primary: #0066CC;
    --bs-primary-rgb: 0, 102, 204;
    --bs-body-color: var(--sx-body);
    --bs-body-font-family: var(--sx-font);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.65;
    --bs-border-color: var(--sx-rule);
    --bs-border-radius: var(--sx-radius);
    --bs-border-radius-sm: var(--sx-radius-sm);
    --bs-border-radius-lg: var(--sx-radius-lg);
    --bs-emphasis-color: var(--sx-ink);
    --bs-link-color: var(--sx-accent);
    --bs-link-hover-color: var(--sx-accent-hover);
    --bs-form-invalid-color: var(--sx-danger);
    --bs-form-invalid-border-color: var(--sx-danger-border);
    --bs-form-valid-color: var(--sx-success);
    --bs-heading-color: var(--sx-ink);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--sx-font);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--sx-body);
    background-color: var(--sx-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sx-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

::selection {
    background: var(--sx-accent-subtle);
    color: var(--sx-accent-deep);
}

/* Tighter container measure on large screens reads as editorial rather than
   stretched. */
@media (min-width: 1200px) {
    .container {
        max-width: 1160px;
    }
}

/* Focus: one consistent, always-visible ring. */
:focus-visible {
    outline: 2px solid var(--sx-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The brand accent is too dark to read on the deep surfaces. */
.sx-hero :focus-visible,
.sx-page-head :focus-visible,
.sx-footer :focus-visible,
.sx-section--deep :focus-visible,
.sx-section--accent :focus-visible,
.sx-cta :focus-visible {
    outline-color: #9CC7EF;
}

.sx-skip {
    position: absolute;
    left: var(--sx-4);
    top: var(--sx-4);
    z-index: 1200;
    padding: 0.75rem 1rem;
    background: var(--sx-surface);
    color: var(--sx-accent-deep);
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: var(--sx-radius-sm);
    box-shadow: var(--sx-shadow-2);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform 150ms var(--sx-ease);
}

.sx-skip:focus {
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.sx-section {
    padding-block: var(--sx-section-y);
}

/* Sections saved with the same background colour would otherwise run together
   with no visible seam. A hairline guarantees the boundary whatever colours
   are configured. */
.sx-section + .sx-section {
    border-top: 1px solid var(--sx-rule);
}

.sx-section--alt {
    background-color: var(--sx-surface-alt);
}

.sx-section--accent {
    background-color: var(--sx-accent-deep);
    color: var(--sx-on-dark-2);
}

.sx-section--deep {
    background-color: var(--sx-surface-deep);
    color: var(--sx-on-dark-2);
}

.sx-section--accent h2,
.sx-section--deep h2,
.sx-section--accent h3,
.sx-section--deep h3,
.sx-section--accent h4,
.sx-section--deep h4 {
    color: var(--sx-on-dark);
}

.sx-section--accent .sx-lead,
.sx-section--deep .sx-lead {
    color: var(--sx-on-dark-2);
}

/* The generic heading rule above would leak into cards sitting on a dark
   band, where the card supplies its own light surface. */
.sx-section--accent .sx-card h2,
.sx-section--deep .sx-card h2,
.sx-section--accent .sx-card h3,
.sx-section--deep .sx-card h3,
.sx-section--accent .sx-card h4,
.sx-section--deep .sx-card h4,
.sx-section--accent .sx-card h5,
.sx-section--deep .sx-card h5 {
    color: var(--sx-ink);
}

/* --------------------------------------------------------------------------
   5. Section headings
   -------------------------------------------------------------------------- */

.sx-eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sx-accent);
}

.sx-section--accent .sx-eyebrow,
.sx-section--deep .sx-eyebrow {
    color: #9CC7EF;
}

.sx-section-head {
    margin-bottom: var(--sx-8);
}

.sx-section-head h2 {
    margin: var(--sx-3) 0 0;
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.sx-lead {
    margin: var(--sx-4) 0 0;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--sx-body);
    max-width: 62ch;
}

.sx-section-head--center {
    text-align: center;
}

.sx-section-head--center .sx-lead {
    margin-inline: auto;
}

/* A short rule before a left-aligned eyebrow. */
.sx-section-head:not(.sx-section-head--center) .sx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sx-2);
}

.sx-section-head:not(.sx-section-head--center) .sx-eyebrow::before {
    content: '';
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--sx-radius-sm);
    --bs-btn-padding-y: 0.6875rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--sx-accent-ring);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-lg {
    --bs-btn-padding-y: 0.875rem;
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-font-size: 1.0625rem;
    min-height: 52px;
}

.btn-sm {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 0.875rem;
    min-height: 40px;
}

.btn-primary {
    --bs-btn-bg: var(--sx-accent);
    --bs-btn-border-color: var(--sx-accent);
    --bs-btn-hover-bg: var(--sx-accent-hover);
    --bs-btn-hover-border-color: var(--sx-accent-hover);
    --bs-btn-active-bg: var(--sx-accent-deep);
    --bs-btn-active-border-color: var(--sx-accent-deep);
    --bs-btn-disabled-bg: var(--sx-accent);
    --bs-btn-disabled-border-color: var(--sx-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--sx-accent);
    --bs-btn-border-color: var(--sx-rule-strong);
    --bs-btn-hover-color: var(--sx-accent-deep);
    --bs-btn-hover-bg: var(--sx-accent-subtle);
    --bs-btn-hover-border-color: var(--sx-accent);
    --bs-btn-active-color: var(--sx-accent-deep);
    --bs-btn-active-bg: var(--sx-accent-subtle);
    --bs-btn-active-border-color: var(--sx-accent-deep);
}

/* For dark surfaces: the hero, the deep bands, the footer. */
.btn-ghost {
    --bs-btn-color: var(--sx-on-dark);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(255, 255, 255, 0.4);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.7);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.16);
    --bs-btn-active-border-color: #fff;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
    --bs-btn-disabled-color: rgba(255, 255, 255, 0.6);
    --bs-btn-disabled-border-color: rgba(255, 255, 255, 0.25);
}

/* --------------------------------------------------------------------------
   7. Navbar
   -------------------------------------------------------------------------- */

.sx-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--sx-surface);
    border-bottom: 1px solid var(--sx-rule);
    transition: box-shadow var(--sx-dur) var(--sx-ease);
}

.sx-navbar.is-stuck {
    box-shadow: var(--sx-shadow-2);
}

.sx-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding-block: var(--sx-2);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sx-ink);
    text-decoration: none;
}

.sx-navbar__logo {
    display: block;
    max-height: 36px;
    width: auto;
}

.sx-navbar__mark {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
}

.sx-navbar .nav-link {
    position: relative;
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--sx-ink-2);
    transition: color var(--sx-dur) var(--sx-ease);
}

/* ::before, not ::after — Bootstrap spends ::after on the dropdown caret. */
.sx-navbar .nav-link::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--sx-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 180ms var(--sx-ease);
}

.sx-navbar .nav-link:hover {
    color: var(--sx-accent);
}

.sx-navbar .nav-link:hover::before,
.sx-navbar .nav-link.active::before {
    transform: scaleX(1);
}

.sx-navbar .nav-link.active {
    color: var(--sx-accent-deep);
    font-weight: 600;
}

.sx-navbar .dropdown-menu {
    padding: var(--sx-2);
    margin-top: var(--sx-2) !important;
    min-width: 15rem;
    border: 1px solid var(--sx-rule);
    border-radius: var(--sx-radius);
    box-shadow: var(--sx-shadow-2);
}

.sx-navbar .dropdown-item {
    padding: 0.625rem 0.75rem;
    border-radius: var(--sx-radius-sm);
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--sx-ink-2);
    white-space: normal;
}

.sx-navbar .dropdown-item:hover,
.sx-navbar .dropdown-item:focus {
    background-color: var(--sx-accent-subtle);
    color: var(--sx-accent-deep);
}

.sx-navbar .dropdown-item.active {
    background-color: var(--sx-accent-subtle);
    color: var(--sx-accent-deep);
    font-weight: 600;
}

.sx-navbar .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--sx-rule-strong);
    border-radius: var(--sx-radius-sm);
}

.sx-navbar .navbar-toggler:focus {
    box-shadow: none;
}

@media (min-width: 992px) {
    .sx-navbar__nav {
        align-items: center;
        gap: var(--sx-6);
    }
}

@media (max-width: 991.98px) {
    .sx-navbar__collapse {
        margin-top: var(--sx-4);
        padding-top: var(--sx-4);
        border-top: 1px solid var(--sx-rule);
    }

    .sx-navbar .nav-link {
        padding: 0.75rem 0;
        font-size: 1rem;
    }

    .sx-navbar .nav-link::before {
        display: none;
    }

    .sx-navbar__nav {
        gap: 0;
    }

    .sx-navbar__cta {
        width: 100%;
        margin-top: var(--sx-4);
    }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.sx-hero {
    position: relative;
    background-color: var(--sx-surface-deep);
    color: var(--sx-on-dark);
    overflow: hidden;
}

.sx-hero__slide {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(360px, 44vh, 520px);
}

.sx-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.sx-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Directional scrim: opaque at the text edge, clear on the far side. Text
   legibility without flattening the photograph. */
.sx-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        100deg,
        rgba(11, 27, 43, 0.94) 0%,
        rgba(11, 27, 43, 0.80) 42%,
        rgba(11, 27, 43, 0.34) 100%
    );
}

.sx-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: clamp(56px, 6.5vw, 88px);
}

.sx-hero__title {
    max-width: 22ch;
    margin: 0;
    font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
}

.sx-hero__lead {
    max-width: 52ch;
    margin: var(--sx-4) 0 0;
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
}

.sx-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sx-3);
    margin-top: var(--sx-8);
}

.sx-hero__eyebrow {
    display: inline-block;
    margin-bottom: var(--sx-4);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9CC7EF;
}

/* No sliders uploaded yet: the page still opens with a real hero rather than
   a bare section. Single-hue depth, no cyan. */
.sx-hero--fallback {
    background-image: radial-gradient(
        120% 100% at 85% 12%,
        #123C63 0%,
        var(--sx-surface-deep) 58%
    );
}

.sx-hero--fallback .sx-hero__scrim {
    display: none;
}

.sx-hero .carousel-indicators {
    z-index: 3;
    margin: 0;
    bottom: var(--sx-6);
    gap: var(--sx-2);
}

.sx-hero .carousel-indicators [data-bs-target] {
    width: 30px;
    height: 3px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.36);
    opacity: 1;
    text-indent: -9999px;
    transition: background-color var(--sx-dur) var(--sx-ease);
}

.sx-hero .carousel-indicators [data-bs-target]:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.sx-hero .carousel-indicators .active {
    background-color: #fff;
}

.sx-hero .carousel-control-prev,
.sx-hero .carousel-control-next {
    z-index: 3;
    width: 64px;
    opacity: 1;
}

.sx-hero .carousel-control-prev-icon,
.sx-hero .carousel-control-next-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.14);
    background-size: 36%;
    transition: background-color var(--sx-dur) var(--sx-ease);
}

.sx-hero .carousel-control-prev:hover .carousel-control-prev-icon,
.sx-hero .carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(255, 255, 255, 0.28);
}

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */

/* No height here: a card that stretches is the exception, not the default. A
   percentage height resolves against a flex-stretched Bootstrap column, so a
   column holding two cards would make each of them 100% tall and overflow.
   Use Bootstrap's .h-100 where equal-height cards are actually wanted. */
.sx-card {
    padding: var(--sx-6);
    background-color: var(--sx-surface);
    border: 1px solid var(--sx-rule);
    border-radius: var(--sx-radius);
    box-shadow: var(--sx-shadow-1);
    transition: box-shadow var(--sx-dur) var(--sx-ease),
        border-color var(--sx-dur) var(--sx-ease);
}

/* Card header row: title on the left, a status pill on the right. */
.sx-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sx-4);
}

.sx-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border-radius: 999px;
}

.sx-status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.sx-status--open {
    color: var(--sx-success);
    background-color: #EEF6F1;
}

.sx-status--closed {
    color: var(--sx-danger);
    background-color: #FBEDEC;
}

/* Opening hours: day on the left, time on the right, so times line up. */
.sx-hours {
    display: grid;
    gap: var(--sx-3);
    margin: 0;
    padding: 0;
}

.sx-hours__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sx-4);
}

.sx-hours dt {
    color: var(--sx-ink-2);
}

.sx-hours dd {
    margin: 0;
    font-weight: 600;
    color: var(--sx-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sx-hours__note {
    margin: var(--sx-5) 0 0;
    font-size: 0.8125rem;
    color: var(--sx-muted);
}

/* Only lift things a pointer can actually act on. */
.sx-card--interactive:hover {
    border-color: var(--sx-rule-strong);
    box-shadow: var(--sx-shadow-2);
}

.sx-card__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
}

.sx-card__text {
    margin: var(--sx-3) 0 0;
    color: var(--sx-body);
}

/* --------------------------------------------------------------------------
   10. Icon tiles
   Desaturated, at consistent lightness, so admin-chosen colours stop clashing
   with the brand. Stored names map onto them, so existing rows keep working.
   -------------------------------------------------------------------------- */

.sx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    font-size: 1.125rem;
    border-radius: var(--sx-radius-sm);
    background-color: var(--sx-accent-subtle);
    color: var(--sx-accent);
}

.sx-icon--sm {
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
}

.sx-icon--lg {
    width: 56px;
    height: 56px;
    font-size: 1.375rem;
}

.sx-icon--accent  { background-color: #EAF2FB; color: #0066CC; }
.sx-icon--deep    { background-color: #E7EDF4; color: #0B4F8A; }
.sx-icon--slate   { background-color: #EEF1F5; color: #475569; }
.sx-icon--green   { background-color: #E8F3EC; color: #2F6B4F; }
.sx-icon--amber   { background-color: #FBF0E2; color: #8A5A16; }
.sx-icon--red     { background-color: #FBEAEA; color: #9B3232; }

/* --------------------------------------------------------------------------
   11. Feature list
   -------------------------------------------------------------------------- */

.sx-checklist {
    display: grid;
    gap: var(--sx-5);
    margin: var(--sx-8) 0 0;
    padding: 0;
    list-style: none;
}

.sx-checklist > li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sx-4);
}

.sx-checklist__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.sx-checklist__text {
    margin: var(--sx-1) 0 0;
    color: var(--sx-body);
    font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   12. Stats
   -------------------------------------------------------------------------- */

.sx-stat {
    padding-top: var(--sx-5);
    border-top: 2px solid var(--sx-accent-subtle);
}

.sx-section--accent .sx-stat,
.sx-section--deep .sx-stat {
    border-top-color: rgba(255, 255, 255, 0.18);
}

.sx-stat__num {
    display: block;
    font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--sx-ink);
    font-variant-numeric: tabular-nums;
}

.sx-section--accent .sx-stat__num,
.sx-section--deep .sx-stat__num {
    color: var(--sx-on-dark);
}

.sx-stat__label {
    margin: var(--sx-2) 0 0;
    font-size: 0.9375rem;
    color: var(--sx-muted);
}

.sx-section--accent .sx-stat__label,
.sx-section--deep .sx-stat__label {
    color: var(--sx-on-dark-2);
}

/* --------------------------------------------------------------------------
   13. Testimonials
   -------------------------------------------------------------------------- */

.sx-quote {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--sx-6);
    background-color: var(--sx-surface);
    border: 1px solid var(--sx-rule);
    border-radius: var(--sx-radius);
    box-shadow: var(--sx-shadow-1);
}

.sx-quote__mark {
    display: block;
    margin-bottom: var(--sx-4);
    font-size: 1.25rem;
    color: var(--sx-accent);
}

.sx-quote__text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--sx-ink-2);
}

.sx-quote__author {
    display: flex;
    align-items: center;
    gap: var(--sx-3);
    margin-top: var(--sx-6);
    padding-top: var(--sx-5);
    border-top: 1px solid var(--sx-rule);
}

.sx-quote__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--sx-accent-subtle);
    color: var(--sx-accent-deep);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.sx-quote__name {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sx-ink);
}

.sx-quote__role {
    margin: 0;
    font-size: 0.875rem;
    color: var(--sx-muted);
}

/* --------------------------------------------------------------------------
   14. Accordion (FAQ)
   -------------------------------------------------------------------------- */

.sx-accordion .accordion-item {
    margin-bottom: var(--sx-3);
    overflow: hidden;
    background-color: var(--sx-surface);
    border: 1px solid var(--sx-rule);
    border-radius: var(--sx-radius);
}

.sx-accordion .accordion-header {
    margin: 0;
    font-size: inherit;
}

.sx-accordion .accordion-button {
    padding: var(--sx-5) var(--sx-6);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--sx-ink);
    background-color: transparent;
    box-shadow: none;
}

.sx-accordion .accordion-button:not(.collapsed) {
    color: var(--sx-accent-deep);
    background-color: var(--sx-accent-subtle);
}

.sx-accordion .accordion-button:focus {
    box-shadow: none;
    outline: 2px solid var(--sx-accent);
    outline-offset: -2px;
}

.sx-accordion .accordion-body {
    padding: 0 var(--sx-6) var(--sx-6);
    color: var(--sx-body);
}

.sx-accordion .accordion-button:not(.collapsed) + .accordion-collapse .accordion-body {
    padding-top: var(--sx-2);
}

/* --------------------------------------------------------------------------
   15. Timeline
   -------------------------------------------------------------------------- */

.sx-timeline {
    display: grid;
    gap: var(--sx-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sx-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sx-5);
}

/* Connector runs from the marker to the next item's marker. */
.sx-timeline__item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 50px;
    bottom: calc(-1 * var(--sx-6));
    width: 2px;
    background-color: var(--sx-rule);
}

.sx-timeline__marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--sx-accent);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sx-timeline__title {
    margin: var(--sx-1) 0 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

.sx-timeline__text {
    margin: var(--sx-2) 0 0;
    color: var(--sx-body);
}

/* Text sitting directly on a dark band needs the lighter ink. Cards bring
   their own surface, so they are exempt and keep the default ink. */
.sx-section--accent .sx-checklist__text,
.sx-section--deep .sx-checklist__text,
.sx-section--accent .sx-timeline__text,
.sx-section--deep .sx-timeline__text {
    color: var(--sx-on-dark-2);
}

.sx-section--accent .sx-timeline__item:not(:last-child)::before,
.sx-section--deep .sx-timeline__item:not(:last-child)::before {
    background-color: rgba(255, 255, 255, 0.2);
}

/* --------------------------------------------------------------------------
   16. CTA band
   -------------------------------------------------------------------------- */

.sx-cta {
    padding: clamp(32px, 4vw, 56px);
    border-radius: var(--sx-radius-lg);
    background-color: var(--sx-surface-deep);
    color: var(--sx-on-dark-2);
}

.sx-cta h2 {
    color: #fff;
}

.sx-cta .sx-lead {
    color: var(--sx-on-dark-2);
}

/* The panel is dark regardless of the band it sits on, so the accent-coloured
   eyebrow would fail contrast here. */
.sx-cta .sx-eyebrow {
    color: #9CC7EF;
}

.sx-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sx-3);
    margin-top: var(--sx-8);
}

.sx-cta--accent {
    background-color: var(--sx-accent-deep);
}

/* --------------------------------------------------------------------------
   17. Case study cards
   -------------------------------------------------------------------------- */

.sx-case-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: var(--sx-surface);
    border: 1px solid var(--sx-rule);
    border-radius: var(--sx-radius);
    box-shadow: var(--sx-shadow-1);
    transition: box-shadow var(--sx-dur) var(--sx-ease),
        border-color var(--sx-dur) var(--sx-ease);
}

.sx-case-card:hover {
    border-color: var(--sx-rule-strong);
    box-shadow: var(--sx-shadow-2);
}

.sx-case-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--sx-accent-subtle);
}

.sx-case-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--sx-ease);
}

.sx-case-card:hover .sx-case-card__media img {
    transform: scale(1.03);
}

/* The frame holds its height even if the file fails to load. */
.sx-case-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: var(--sx-6);
}

.sx-case-card__chip {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: var(--sx-3);
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sx-accent-deep);
    background-color: var(--sx-accent-subtle);
    border-radius: 999px;
}

.sx-case-card__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
}

.sx-case-card__text {
    margin: var(--sx-3) 0 var(--sx-6);
    color: var(--sx-body);
    font-size: 0.9375rem;
    flex: 1 1 auto;
}

.sx-case-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sx-accent);
    text-decoration: none;
}

.sx-case-card__link:hover {
    color: var(--sx-accent-hover);
}

.sx-case-card__link i {
    transition: transform 180ms var(--sx-ease);
}

.sx-case-card:hover .sx-case-card__link i {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   18. Page header band
   -------------------------------------------------------------------------- */

.sx-page-head {
    padding-block: clamp(48px, 6vw, 80px);
    background-color: var(--sx-surface-deep);
    color: var(--sx-on-dark);
}

.sx-page-head__eyebrow {
    display: inline-block;
    margin-bottom: var(--sx-3);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9CC7EF;
}

.sx-page-head h1 {
    margin: 0;
    font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
}

.sx-page-head__lead {
    max-width: 60ch;
    margin: var(--sx-4) 0 0;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--sx-on-dark-2);
}

/* A predictable frame for the featured image, whatever was uploaded. */
.sx-page-image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: var(--sx-10);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--sx-radius);
}

/* --------------------------------------------------------------------------
   19. Forms
   -------------------------------------------------------------------------- */

.sx-field {
    margin-bottom: var(--sx-5);
}

.sx-field__label {
    display: block;
    margin-bottom: var(--sx-2);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sx-ink);
}

/* The asterisk is decoration; the `required` attribute is the real signal. */
.sx-field__req {
    color: var(--sx-danger);
}

.sx-field__hint {
    margin: var(--sx-2) 0 0;
    font-size: 0.875rem;
    color: var(--sx-muted);
}

.form-control,
.form-select {
    min-height: 48px;
    padding: 0.6875rem 0.875rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--sx-ink);
    background-color: var(--sx-surface);
    border: 1px solid var(--sx-rule-strong);
    border-radius: var(--sx-radius-sm);
}

textarea.form-control {
    min-height: 8.5rem;
    resize: vertical;
}

.form-control::placeholder {
    color: var(--sx-muted);
}

.form-control:focus,
.form-select:focus {
    color: var(--sx-ink);
    background-color: var(--sx-surface);
    border-color: var(--sx-accent);
    box-shadow: none;
    outline: 2px solid var(--sx-accent);
    outline-offset: 1px;
}

/* Bootstrap's own icons are inconsistent with ours; the adjacent text carries
   the message, and an icon is added in markup. */
.form-control.is-invalid,
.form-select.is-invalid {
    padding-right: 0.875rem;
    background-image: none;
    border-color: var(--sx-danger-border);
}

.form-control.is-invalid:focus {
    outline-color: var(--sx-danger-border);
    box-shadow: none;
}

.sx-field__error {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: var(--sx-2) 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sx-danger);
}

/* --------------------------------------------------------------------------
   20. Alerts
   -------------------------------------------------------------------------- */

.sx-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sx-3);
    padding: var(--sx-4) var(--sx-5);
    margin-bottom: var(--sx-6);
    border: 1px solid;
    border-radius: var(--sx-radius-sm);
    font-size: 0.9375rem;
}

.sx-alert--success {
    color: var(--sx-success);
    background-color: #EEF6F1;
    border-color: #C6E0D1;
}

.sx-alert--error {
    color: var(--sx-danger);
    background-color: #FBEDEC;
    border-color: #EBC7C4;
}

.sx-alert__text {
    margin: 0;
}

/* --------------------------------------------------------------------------
   21. Contact details list
   -------------------------------------------------------------------------- */

.sx-details {
    display: grid;
    gap: var(--sx-5);
    margin: 0;
}

.sx-details__row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sx-4);
}

.sx-details__term {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sx-muted);
}

.sx-details__value {
    margin: var(--sx-1) 0 0;
    font-size: 1rem;
    color: var(--sx-ink-2);
}

.sx-details__value a {
    color: var(--sx-accent);
    text-decoration: none;
}

.sx-details__value a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   22. Footer
   -------------------------------------------------------------------------- */

.sx-footer {
    padding-block: var(--sx-16) var(--sx-6);
    background-color: var(--sx-surface-deep);
    color: var(--sx-on-dark-2);
    font-size: 0.9375rem;
}

.sx-footer__grid {
    display: grid;
    gap: var(--sx-10);
}

@media (min-width: 768px) {
    .sx-footer__grid {
        grid-template-columns: 1.6fr 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .sx-footer__grid {
        grid-template-columns: 1.6fr 1fr 1.2fr 0.8fr;
    }

    /* No social links configured: drop the fourth lane rather than leave it
       empty. */
    .sx-footer__grid--three {
        grid-template-columns: 1.6fr 1fr 1.2fr;
    }
}

.sx-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: var(--sx-4);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sx-on-dark);
}

.sx-footer__mark {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
}

.sx-footer__logo {
    display: block;
    max-height: 32px;
    width: auto;
    margin-bottom: var(--sx-4);
}

.sx-footer__text {
    margin: 0;
    max-width: 40ch;
}

.sx-footer__title {
    margin: 0 0 var(--sx-4);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sx-on-dark);
}

.sx-footer__list {
    display: grid;
    gap: var(--sx-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sx-footer a {
    color: var(--sx-on-dark-2);
    text-decoration: none;
    transition: color var(--sx-dur) var(--sx-ease);
}

.sx-footer a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sx-footer__contact {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sx-2) var(--sx-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sx-footer__contact i {
    width: 1rem;
    margin-top: 0.3rem;
    color: #9CC7EF;
}

.sx-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sx-2);
}

.sx-footer__social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--sx-radius-sm);
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--sx-on-dark);
    transition: background-color var(--sx-dur) var(--sx-ease);
}

.sx-footer__social a:hover {
    background-color: rgba(255, 255, 255, 0.16);
    color: #fff;
    text-decoration: none;
}

.sx-footer__legal {
    margin-top: var(--sx-10);
    padding-top: var(--sx-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.875rem;
    text-align: center;
}

.sx-footer__legal p {
    margin: 0;
}

/* --------------------------------------------------------------------------
   23. Cookie consent
   -------------------------------------------------------------------------- */

.sx-gdpr {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1080;
    padding-block: var(--sx-5);
    background-color: var(--sx-surface);
    border-top: 1px solid var(--sx-rule);
    box-shadow: var(--sx-shadow-3);
    visibility: hidden;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 320ms var(--sx-ease), opacity 320ms var(--sx-ease),
        visibility 0s linear 320ms;
}

.sx-gdpr.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: transform 320ms var(--sx-ease), opacity 320ms var(--sx-ease),
        visibility 0s linear 0s;
}

.sx-gdpr__inner {
    display: grid;
    gap: var(--sx-4);
    align-items: center;
}

@media (min-width: 992px) {
    .sx-gdpr__inner {
        grid-template-columns: 1fr auto;
        gap: var(--sx-6);
    }
}

.sx-gdpr__text {
    display: flex;
    align-items: flex-start;
    gap: var(--sx-3);
    margin: 0;
    font-size: 0.9375rem;
    color: var(--sx-body);
}

.sx-gdpr__text i {
    margin-top: 0.25rem;
    color: var(--sx-accent);
}

.sx-gdpr__text a {
    color: var(--sx-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sx-gdpr__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sx-3);
}

@media (max-width: 575.98px) {
    .sx-gdpr__actions .btn {
        flex: 1 1 auto;
    }
}

/* Keeps the fixed banner from covering the end of the page. */
.sx-has-gdpr {
    padding-bottom: 8rem;
}

/* --------------------------------------------------------------------------
   24. Prose — rendered page content from the editor
   -------------------------------------------------------------------------- */

.prose {
    max-width: 70ch;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--sx-body);
}

.prose > :first-child {
    margin-top: 0;
}

.prose > * + * {
    margin-top: var(--sx-5);
}

/* The editor can emit h1 inside body content. It is styled as a section
   heading so the visual hierarchy stays correct beneath the page h1. */
.prose h1 {
    margin-top: var(--sx-12);
    margin-bottom: var(--sx-3);
    font-size: clamp(1.625rem, 1.4rem + 1.1vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--sx-ink);
}

.prose h2 {
    margin-top: var(--sx-10);
    margin-bottom: var(--sx-3);
    font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--sx-ink);
}

.prose h3 {
    margin-top: var(--sx-8);
    margin-bottom: var(--sx-2);
    font-size: 1.25rem;
    line-height: 1.35;
    color: var(--sx-ink);
}

.prose h4 {
    margin-top: var(--sx-6);
    margin-bottom: var(--sx-2);
    font-size: 1.0625rem;
    color: var(--sx-ink);
}

.prose strong {
    font-weight: 600;
    color: var(--sx-ink);
}

/* The editor writes standalone bold lines as subheadings. A paragraph holding
   nothing but a <strong> is one; inline emphasis stays inline. */
.prose p > strong:only-child {
    display: block;
    margin-top: var(--sx-8);
    margin-bottom: var(--sx-2);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sx-ink);
}

.prose ul,
.prose ol {
    padding-left: 1.375rem;
}

.prose li {
    margin-top: var(--sx-2);
}

.prose li::marker {
    color: var(--sx-accent);
    font-weight: 600;
}

.prose a {
    color: var(--sx-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.prose a:hover {
    color: var(--sx-accent-hover);
    text-decoration-thickness: 2px;
}

.prose blockquote {
    margin-inline: 0;
    padding-left: var(--sx-6);
    border-left: 3px solid var(--sx-accent);
    color: var(--sx-ink-2);
    font-style: italic;
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sx-radius);
}

.prose hr {
    margin-block: var(--sx-10);
    border: 0;
    border-top: 1px solid var(--sx-rule);
}

.prose code {
    padding: 0.15em 0.4em;
    font-size: 0.9em;
    background-color: var(--sx-surface-alt);
    border-radius: 4px;
}

.prose pre {
    padding: var(--sx-5);
    overflow-x: auto;
    background-color: var(--sx-surface-deep);
    color: var(--sx-on-dark);
    border-radius: var(--sx-radius);
}

.prose pre code {
    padding: 0;
    background: none;
    color: inherit;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.prose th,
.prose td {
    padding: var(--sx-3);
    text-align: start;
    border: 1px solid var(--sx-rule);
}

.prose th {
    font-weight: 600;
    color: var(--sx-ink);
    background-color: var(--sx-surface-alt);
}

/* --------------------------------------------------------------------------
   25. Motion — entrance reveals
   Gated behind .sx-js so a failed script leaves content visible, never blank.
   -------------------------------------------------------------------------- */

.sx-js .sx-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms var(--sx-ease), transform 500ms var(--sx-ease);
}

.sx-js .sx-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .sx-js .sx-reveal {
        opacity: 1;
        transform: none;
    }

    .sx-case-card:hover .sx-case-card__media img {
        transform: none;
    }
}