/* ========================================================
   CRALOG Homepage — confect.io inspired
   Clean, spacious, confident. Dark palette + orange accent.
   ======================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary:        #f39200;
    --primary-hover:  #ffb340;
    --btn-bg:         #0a8abf;
    --btn-bg-hover:   #0c9dd6;

    /* Accent palette */
    --color-approvals:    #4ade80;
    --color-verification: #60a5fa;
    --color-courses:      #c084fc;

    --surface-0:  #0e0e0e;
    --surface-1:  #171717;
    --surface-2:  #1f1f1f;
    --surface-3:  #282828;

    /* Distinct background for the Academy teaser — deep navy that
       complements the orange brand and lifts the section off the
       surrounding black surfaces (Oscar-style coloured slab). */
    --academy-bg: #0d1f3a;


    --text-1:     #ffffff;
    --text-2:     #ffffff;
    --text-3:     #c0bbb5;

    --border:       rgba(255,255,255,.07);
    --border-hover: rgba(255,255,255,.14);

    /* Presence map (server-rendered SVG, #3578). Same colours the old
       Google Maps dark style used: water #131313, land #242424 — keeping
       them preserves the section's look across the swap. */
    --map-water: #131313;
    --map-land:  #242424;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --radius: 10px;
    --radius-lg: 14px;
}

/* Light theme overrides */
.theme-light {
    --surface-0:  #ffffff;
    --surface-1:  #f8f9fa;
    --surface-2:  #e9ecef;
    --surface-3:  #dee2e6;

    /* Academy bg shifts to a pale-blue slab in light theme so it still
       feels like a distinct section, not a navy rectangle on white. */
    --academy-bg: #e8eff7;

    --text-1:     #212529;
    --text-2:     #212529;
    --text-3:     #495057;

    --border:       rgba(0,0,0,.08);
    --border-hover: rgba(0,0,0,.15);

    /* Matches the old Google Maps "silver" style: water #c9c9c9,
       land #f5f5f5. */
    --map-water: #c9c9c9;
    --map-land:  #f5f5f5;
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

/* Glue a phrase together so narrow viewports break BETWEEN units, never
   inside one — e.g. "Built on data" / "you can verify" and
   "in 23 countries" on the home page (#3596). */
.text-unit { white-space: nowrap; }

body {
    font-family: var(--font);
    background: var(--surface-0);
    color: var(--text-2);
    line-height: 1.65;
    font-size: 16px;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.section-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px);
}

/* =========================
   NAV — slim, confident
   ========================= */

.nav-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: var(--surface-0);
    border-bottom: 1px solid var(--border);
}

/* Any in-page anchor target needs to clear the fixed 88px .nav-bar
   above it — otherwise jumping to /page#section hides the section's
   heading under the nav. Applies to /become-an-asp#what-is-an-asp,
   /find-an-asp#network, /find-an-asp#quote-form, etc. */
section[id] {
    scroll-margin-top: 104px;
}

.nav-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
    height: 88px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-brand { display: flex; align-items: center; }
.brand-logo { height: 72px; width: auto; }

/* Logo switching for themes. Both variants are the same artwork at the
   same intrinsic size (1435×529) and both carry the ® — so they render
   to an identical box and the theme swap causes no layout shift (#3580). */
.logo-light { display: none !important; }
.theme-light .logo-light { display: inline !important; }
.theme-light .logo-dark { display: none !important; }
.brand-logo-link { display: inline-block; }

.nav-links {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.nav-link {
    padding: 8px 14px;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    transition: color .15s, background .15s;
}
.theme-light .nav-link {
    color: var(--text-1);
}

.nav-link:hover {
    color: var(--text-1);
    background: var(--border);
}

/* Login button at the top-right of the header (#3556) — outlined-ghost
   style so it reads as available action without competing with the
   nav links or the section CTAs. Lives to the right of the theme
   toggle; hidden on mobile (drawer carries its own login row). */
.nav-login {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--text-1);
    background: transparent;
    color: var(--text-1);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.nav-login:hover {
    background: var(--text-1);
    color: var(--surface-0);
}

.nav-burger {
    display: none;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-1);
    cursor: pointer;
    padding: 6px 10px;
    font: inherit;
}

.nav-burger-label {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .01em;
}

.nav-burger .material-symbols-outlined {
    font-size: 22px;
}

/* Modal Navigation Drawer (M3) — hidden on desktop, slides in from the
   leading edge on <=768px. Spec: m3.material.io/components/navigation-drawer
   - Slides from left (M3 modal drawer convention)
   - Surface-1 tonal elevation (closest equivalent to surface-container-low)
   - Items as 56dp tall pills with leading icon + label
   - Active item: tonal primary-container background with primary text/icon */
.nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--surface-1);
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: 88px 12px 24px;
    overflow-y: auto;
    visibility: hidden;
}

.nav-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

.nav-drawer .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    min-height: 56px;
    border-radius: 28px;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-2);
    white-space: normal;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.nav-drawer .nav-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.nav-drawer .nav-link .material-symbols-outlined {
    font-size: 22px;
    color: var(--text-3);
    flex-shrink: 0;
    transition: color .15s;
}

.nav-drawer .nav-link:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-1);
}

.nav-drawer .nav-link:hover .material-symbols-outlined {
    color: var(--text-1);
}

.nav-drawer .nav-link.nav-link--active {
    background: rgba(243, 146, 0, .18);
    color: var(--primary);
}

.nav-drawer .nav-link.nav-link--active .material-symbols-outlined {
    color: var(--primary);
}

.theme-light .nav-drawer .nav-link:hover {
    background: rgba(0, 0, 0, 0.04);
}

.nav-drawer-theme {
    margin: 12px 4px 0;
    padding: 0 16px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    color: var(--text-2);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    min-height: 56px;
}

.nav-drawer-theme .material-symbols-outlined {
    font-size: 22px;
    color: var(--text-3);
}

.nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s cubic-bezier(.4, 0, .2, 1);
}

.nav-scrim.is-visible {
    opacity: 1;
    pointer-events: auto;
}

body.nav-drawer-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .nav-drawer,
    .nav-scrim {
        transition: none;
    }
}

/* Hide the off-canvas drawer machinery only where the full nav-links row
   exists. MUST stay in lock-step with the burger's max-width: 980px
   breakpoint below — when these disagreed (769 vs 980), tablets showed a
   burger whose drawer was display:none, so clicking did nothing (#3601).
   Pinned by NavigationCssTests. */
@media (min-width: 981px) {
    .nav-drawer,
    .nav-scrim {
        display: none;
    }
}

/* =========================
   HERO — big, airy, dramatic spacing
   ========================= */

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 32px 80px;
    position: relative;
    overflow: hidden;
}

/* Hero image banner — slow scrolling behind text */
.hero-banner {
    position: relative;
    width: 100vw;
    height: 480px;
    overflow: hidden;
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-banner-track {
    position: absolute;
    inset: 0;
    display: flex;
    gap: 12px;
    height: 100%;
    width: max-content;
    animation: hero-scroll 260s linear infinite;
}

.hero-banner-track img {
    height: 100%;
    width: auto;
    object-fit: cover;
    opacity: .95;
    filter: saturate(1.05) brightness(0.78);
}

/* Light mode: localized dark scrim behind the text so the gallery stays
   bright while the white headline keeps contrast. */
.theme-light .hero-overlay {
    background:
        linear-gradient(to bottom, var(--surface-0) 0%, transparent 25%, transparent 75%, var(--surface-0) 100%),
        radial-gradient(ellipse 55% 60% at center, rgba(0,0,0,.6) 0%, rgba(0,0,0,.35) 50%, transparent 100%);
}

/* Gradient overlay for text readability */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom, var(--surface-0) 0%, transparent 25%, transparent 75%, var(--surface-0) 100%),
        radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, transparent 65%);
}

@keyframes hero-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Hero text — centered on the banner */
.hero-title {
    position: relative;
    z-index: 2;
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -2px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 30px rgba(0,0,0,.3);
    opacity: 0;
    transform: translateY(20px);
    animation: hero-fade-in .8s ease forwards;
}

.hero-subtitle {
    position: relative;
    z-index: 2;
    font-size: 18px;
    color: #fff;
    max-width: min(500px, 100%);
    margin: 20px auto 0;
    line-height: 1.6;
    text-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 30px rgba(0,0,0,.3);
    opacity: 0;
    animation: hero-fade-in .8s ease .3s forwards;
}

.theme-light .hero-subtitle {
    color: #fff;
}

.hero-cta {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding: 14px 28px;
    border-radius: var(--radius);
    background: var(--btn-bg);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font);
    text-decoration: none;
    transition: background .15s, transform .15s;
    opacity: 0;
    animation: hero-fade-in .8s ease .5s forwards;
}

.hero-cta:hover {
    background: var(--btn-bg-hover);
    transform: translateY(-1px);
}

.hero-cta .material-symbols-outlined {
    font-size: 20px;
}

@keyframes hero-fade-in {
    to { opacity: 1; transform: translateY(0); }
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons — confect style: large, rounded-md, generous padding */
.btn-primary, .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 500;
    transition: all .15s;
    cursor: pointer;
    border: none;
    font-family: var(--font);
}

.btn-primary {
    background: var(--btn-bg);
    color: #fff;
}
.btn-primary:hover {
    background: var(--btn-bg-hover);
}

.btn-secondary {
    background: var(--btn-bg);
    color: #fff;
    border: none;
}
.btn-secondary .material-symbols-outlined {
    color: #fff176;
}
.btn-secondary:hover {
    background: var(--btn-bg-hover);
    color: #fff;
}

.btn-primary .material-symbols-outlined,
.btn-secondary .material-symbols-outlined {
    font-size: 20px;
}

/* Stats — narrative sentence */
.hero-stats {
    margin-top: 80px;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s ease, transform .6s ease;
}

.hero-stats.visible {
    opacity: 1;
    transform: translateY(0);
}

.hero-stats-heading {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-1);
    margin-bottom: 40px;
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: 60px;
}

.stats-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.stats-number {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.stats-label {
    font-size: 14px;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.stats-weekly {
    margin-top: 40px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.stats-weekly .stats-number {
    font-size: clamp(24px, 3vw, 36px);
}

.stats-weekly .stats-label {
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-2);
}

.stat-number {
    display: block;
    font-size: 40px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -1px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* =========================
   TRUST LOGOS — confect-style logo cloud
   ========================= */

.trust-heading {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 48px;
}

.trust-logos-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
    margin-bottom: 64px;
}

.trust-logo-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-3);
    letter-spacing: .5px;
}

/* =========================
   SERVICE — standalone prominent card
   ========================= */

.service-section {
    padding: 0 0 80px;
}

.service-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.service-icon {
    margin-bottom: 20px;
}

.service-icon .material-symbols-outlined {
    font-size: 36px;
    color: var(--primary);
}

.service-card h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 12px;
}

.service-card > p {
    font-size: 16px;
    color: var(--text-2);
    max-width: 460px;
    margin: 0 auto 28px;
    line-height: 1.7;
}

.service-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-radius: var(--radius);
    background: var(--surface-0);
    border: 1px solid var(--border);
    max-width: 440px;
    margin: 0 auto;
}

.service-search .material-symbols-outlined {
    font-size: 22px;
    color: var(--text-3);
}

.service-search input {
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 16px;
    font-family: var(--font);
    width: 100%;
    outline: none;
}

/* =========================
   FEATURE CARDS — 3-up
   ========================= */

.features {
    padding: 0 0 160px;
}

.feature-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.feature-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.feature-card:hover {
    background: var(--surface-2);
    border-color: var(--border-hover);
}

.feature-icon {
    font-size: 28px;
    margin-bottom: 4px;
}

.feature-card--approvals .feature-icon   { color: var(--color-approvals); }
.feature-card--verification .feature-icon { color: var(--color-verification); }
.feature-card--courses .feature-icon      { color: var(--color-courses); }

.feature-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-1);
}

.feature-card p {
    font-size: 16px;
    color: var(--text-2);
    line-height: 1.65;
    flex: 1;
}

.feature-arrow {
    display: flex;
    align-items: center;
    margin-top: 12px;
}
.feature-arrow .material-symbols-outlined {
    font-size: 20px;
    color: var(--text-3);
    transition: color .15s, transform .15s;
}
.feature-card--approvals:hover .feature-arrow .material-symbols-outlined   { color: var(--color-approvals); transform: translateX(4px); }
.feature-card--verification:hover .feature-arrow .material-symbols-outlined { color: var(--color-verification); transform: translateX(4px); }
.feature-card--courses:hover .feature-arrow .material-symbols-outlined      { color: var(--color-courses); transform: translateX(4px); }

/* =========================
   GLOBAL PRESENCE
   ========================= */

.presence-section {
    padding: 80px 0;
}

.presence-header {
    margin-bottom: 32px;
    text-align: center;
}

.presence-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -.5px;
    margin-bottom: 16px;
}

.presence-header p {
    font-size: 17px;
    color: var(--text-2);
    line-height: 1.7;
}

.presence-provider-count {
    margin-top: 16px;
    line-height: 1.6;
}
.presence-provider-count .stat-number {
    display: inline;
    font-size: 36px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -1px;
}
.presence-provider-count .narrative-text {
    font-size: 18px;
}

/* Second line: blue numbers for Statements of Fitness closed this week,
   sized one notch smaller than the provider line so the orange line stays
   the headline. Uses --color-verification (same hex in both themes) so the
   blue reads consistently against white and black backgrounds. #3506 */
.presence-recent-count {
    margin-top: 8px;
    line-height: 1.6;
}
.presence-recent-count .stat-number {
    display: inline;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1px;
}
.presence-recent-count .narrative-text {
    font-size: 17px;
}
.stat-number--recent { color: var(--btn-bg); }

/* The count lines sit inside .presence-header's 540px cap (sized for the
   heading/subtitle), so they would wrap. On wide screens there's room to let
   them run on one line; below 1000px they wrap normally to avoid overflow. */
@media (min-width: 1000px) {
    .presence-provider-count,
    .presence-recent-count { white-space: nowrap; }
}

.presence-map {
    aspect-ratio: 16 / 7;
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Server-rendered SVG world map + absolutely-positioned marker divs
   (Components/PresenceMap.razor, #3578). The container's 16/7 aspect
   ratio matches the SVG viewBox exactly, so the percentage-positioned
   markers line up with the drawn coastlines at every width. */
#presence-map {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--map-water);
    pointer-events: none;
}

.presence-map-svg {
    display: block;
    width: 100%;
    height: 100%;
}
.presence-map-svg path {
    fill: var(--map-land);
    stroke: none;
}

/* Marker dot + pulse halo. Moved verbatim from the style block the old
   presence-map.js injected at runtime; orange = active service providers,
   blue = countries with a Statement of Fitness closed in the last 7 days
   (#3506). */
.presence-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.presence-marker-dot {
    width: 10px;
    height: 10px;
    background: #f39200;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(243,146,0,.6), 0 0 16px rgba(243,146,0,.3);
    position: relative;
    z-index: 2;
}
.presence-marker-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: rgba(243,146,0,.3);
    border-radius: 50%;
    transform: translate(-50%,-50%) scale(1);
    animation: presencePulse 2.5s ease-out infinite;
    z-index: 1;
}
.presence-marker--recent .presence-marker-dot {
    background: #0a8abf;
    box-shadow: 0 0 8px rgba(10,138,191,.6), 0 0 16px rgba(10,138,191,.3);
}
.presence-marker--recent .presence-marker-pulse {
    background: rgba(10,138,191,.3);
}
/* Count-scaled size: PresenceMap.razor sets --dot-size inline on the
   marker (10px + 1px per extra statement, capped at 18px). Read via a
   custom property — not inline width/height — so the phone media query
   below can still flatten all dots to one size. */
.presence-marker--recent .presence-marker-dot,
.presence-marker--recent .presence-marker-pulse {
    width: var(--dot-size, 10px);
    height: var(--dot-size, 10px);
}
@keyframes presencePulse {
    0%   { transform: translate(-50%,-50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(4); opacity: 0; }
}

.fact {
    display: flex;
    gap: 16px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
}
.fact:first-child { padding-top: 0; }
.fact:last-child { border-bottom: none; }

.fact > .material-symbols-outlined {
    font-size: 22px;
    margin-top: 2px;
    flex-shrink: 0;
}

.fact:nth-child(1) > .material-symbols-outlined { color: var(--color-verification); }
.fact:nth-child(2) > .material-symbols-outlined { color: var(--primary); }
.fact:nth-child(3) > .material-symbols-outlined { color: var(--color-approvals); }

.fact strong {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 4px;
}

.fact p {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.6;
}

/* =========================
   WHY CRALOG
   ========================= */

.why-section {
    padding: 160px 0;
    border-top: 1px solid var(--border);
}

.why-section h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -.5px;
    margin-bottom: 16px;
}

.why-intro {
    max-width: 580px;
    font-size: 17px;
    color: var(--text-2);
    line-height: 1.7;
    margin-bottom: 56px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.why-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px;
}

.why-card .material-symbols-outlined {
    font-size: 28px;
    margin-bottom: 20px;
    display: block;
}

.why-card:nth-child(1) .material-symbols-outlined { color: var(--primary); }
.why-card:nth-child(2) .material-symbols-outlined { color: var(--color-courses); }
.why-card:nth-child(3) .material-symbols-outlined { color: var(--color-verification); }

.why-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 8px;
}

.why-card p {
    font-size: 16px;
    color: var(--text-2);
    line-height: 1.65;
}

/* =========================
   APPROVALS TEASER
   ========================= */

.approvals-teaser {
    padding: 80px 0 0;
    padding-bottom: 80px;
    overflow: hidden;
}

.approvals-teaser-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 64px;
}

.approvals-teaser-content h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -.5px;
    margin-bottom: 16px;
}

.approvals-teaser-content > p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-2);
    max-width: 640px;
}

.approvals-teaser-top > .btn-primary {
    flex-shrink: 0;
    margin-top: 8px;
}

.approvals-marquee {
    width: 100%;
    overflow: hidden;
    padding: 40px 0 60px;
    background: var(--surface-2);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}

.approvals-marquee-track {
    display: flex;
    gap: 32px;
    animation: marqueeScroll 80s linear infinite;
    width: max-content;
}

/* Marquee logos follow the same plate-colour rules as .approval-logo on the
   Authorisations page — see ApprovalLogos.WhiteLogos for the shared list. */
.approvals-marquee-track img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background: #1a1a1a;
    border-radius: 18px;
    padding: 16px;
    flex-shrink: 0;
}

.theme-light .approvals-marquee-track img {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.approvals-marquee-track img.marquee-logo--white,
.theme-light .approvals-marquee-track img.marquee-logo--white {
    background: #6a6a6a;
    border-color: #6a6a6a;
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* =========================
   ACADEMY / COURSES
   ========================= */

.academy-section {
    padding: 48px 0;
    background: var(--academy-bg);
}

.academy-header {
    text-align: center;
    margin-bottom: 48px;
}

.academy-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -.5px;
    margin: 0;
}

/* Two-column teaser: text-block + feature list on the left, single
   hero photo on the right. Mirrors .story-layout below but the photo
   side carries a single image instead of a 4-photo grid. */
.academy-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: center;
}

.academy-title {
    font-size: 40px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -.5px;
    margin: 0;
}

.academy-title-accent {
    color: var(--text-1);
}

.academy-tagline {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: -.2px;
    margin: 6px 0 28px;
}

.academy-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.academy-feature {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--text-1);
    font-size: 16px;
    line-height: 1.4;
}

.academy-feature .material-symbols-outlined {
    color: var(--primary);
    font-size: 28px;
    flex-shrink: 0;
}

/* Oscar-style scatter collage: three photos at different sizes and
   slight offsets inside a square-ish container. Each photo is
   positioned absolutely, so the container needs an aspect-ratio to
   carry layout height. */
.academy-collage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.8;
}

.academy-collage img {
    position: absolute;
    object-fit: cover;
    display: block;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    transition: transform .4s ease;
}

.academy-collage img:hover {
    transform: scale(1.03);
}

/* Right hero — tall portrait, dominant. The orange-PPE harbour shot. */
.academy-collage-1 {
    top: 4%;
    right: 0;
    width: 54%;
    height: 92%;
}

/* Top-left — anchored to the same top edge as the right hero so the
   three photos fit inside one rectangle. Classroom helmets. */
.academy-collage-2 {
    top: 4%;
    left: 0;
    width: 42%;
    height: 44%;
}

/* Bottom-left — same width and height as top-left, anchored to the
   same bottom edge as the right hero. The two left photos stack neatly
   inside the hero's vertical extent. Outdoor team. */
.academy-collage-3 {
    bottom: 4%;
    left: 0;
    width: 42%;
    height: 44%;
}

.academy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
}

.course-card {
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform .2s ease, box-shadow .2s ease;
}

.course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.2);
}

.course-card-image {
    position: relative;
    height: 180px;
    overflow: hidden;
    /* Consumes --course-color set on the parent .course-card. Visible
       only when the <img> 404s (img otherwise covers via object-fit) or
       on the colour-only fallback (.course-card-image--color). Fallback
       to surface-1 keeps cards with no BannerColor neutral. */
    background-color: var(--course-color, var(--surface-1));
}

.course-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.course-card-image--color {
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-card-image--color .material-symbols-outlined {
    font-size: 48px;
    color: rgba(255,255,255,.6);
}

.course-card-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--course-color);
}

.course-card-body {
    padding: 20px 24px 24px;
}

.course-card-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
}

.course-card-dates .material-symbols-outlined {
    font-size: 16px;
}

.course-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 8px;
    line-height: 1.3;
}

.course-card-location {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 14px;
    color: var(--text-2);
    /* min-width: 0 lets the bare text node next to the icon wrap inside the
       flex container instead of expanding the row's intrinsic width and
       wrapping the whole row (icon and all). */
    min-width: 0;
}

.course-card-location .material-symbols-outlined {
    font-size: 16px;
    color: var(--text-3);
    /* Keep the icon at its natural width even when the text wraps. Pair
       with the align-items: flex-start above so the icon anchors to the
       top line of multi-line locations. */
    flex-shrink: 0;
    /* Nudge the icon down to match the cap height of the first text line. */
    margin-top: 1px;
}

.course-card-price {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--text-2);
    margin-top: 4px;
}

/* Admin-authored coloured note. Mirrors the meta-line layout
   (icon + label) used by .course-card-price and .course-card-location,
   but with a colour-coded tint that signals urgency.
   The detail-page variant adds extra spacing; colour rules below are
   shared between card and detail via .course-card-note--{colour}. */
.course-card-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 4px;
}

.course-card-note .material-symbols-outlined {
    font-size: 16px;
}

.course-card-note--green  { color: #4ade80; }   /* readable on dark bg */
.course-card-note--yellow { color: #fbbf24; }
.course-card-note--red    { color: #f87171; }

.theme-light .course-card-note--green  { color: #15803d; }
.theme-light .course-card-note--yellow { color: #b45309; }
.theme-light .course-card-note--red    { color: #b91c1c; }

.course-detail-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 24px 0;
    font-size: 16px;
    font-weight: 600;
}

.course-detail-note .material-symbols-outlined {
    font-size: 20px;
}

.course-card-price .material-symbols-outlined {
    font-size: 16px;
    color: var(--text-3);
}

.course-badge {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}


/* =========================
   TESTIMONIALS
   ========================= */

/* =========================
   OUR STORY
   ========================= */

.story-section {
    padding: 80px 0;
}

.story-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.story-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.story-photo {
    border-radius: 12px;
    overflow: hidden;
}

.story-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.story-photo:hover img {
    transform: scale(1.05);
}

.story-photo--wide {
    grid-column: span 2;
}

.story-photo--wide img {
    height: 180px;
}

.story-content h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -.5px;
    margin-bottom: 16px;
}

.story-content > p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-2);
    margin-bottom: 32px;
}

.story-milestones {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.story-milestone {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 15px;
    color: var(--text-2);
}

.story-milestone span {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    min-width: 40px;
    letter-spacing: .5px;
}

.story-milestone a {
    color: var(--text-2);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--border-hover);
    transition: color .15s;
}

.story-milestone a:hover {
    color: var(--primary);
}


.story-cta-group {
    display: flex;
    gap: 12px;
}

/* Mission page milestones */
.mission-milestones {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-top: 32px;
    border-top: 1px solid var(--border);
    padding-top: 28px;
}

.mission-milestone {
    padding: 0 20px;
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.6;
}

.mission-recognition {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: center;
    margin-top: 32px;
    padding: 20px 24px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.mission-recognition-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.mission-recognition-images img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--radius);
}

.mission-recognition-text h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--text-1);
}

.mission-recognition-text p {
    margin: 0;
    color: var(--text-2);
    line-height: 1.6;
    font-size: 14px;
}

@media (max-width: 800px) {
    .mission-recognition {
        grid-template-columns: 1fr;
    }

    .mission-recognition-images img {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .mission-recognition-images {
        grid-template-columns: 1fr;
    }

    .mission-recognition-images img {
        height: 200px;
    }
}

.mission-milestone span {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

@media (max-width: 900px) {
    .mission-milestones {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 0;
    }
}

@media (max-width: 500px) {
    .mission-milestones {
        grid-template-columns: 1fr;
        gap: 20px 0;
    }
}

/* =========================
   MISSION PAGE
   ========================= */

.mission-hero {
    padding: 140px 0 40px;
    text-align: center;
}

.mission-hero h1 {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -.5px;
    margin-bottom: 12px;
}

.mission-hero-subtitle {
    font-size: 18px;
    color: var(--text-2);
}

.mission-content {
    padding: 40px 0 80px;
}

.mission-block {
    max-width: 900px;
    margin: 0 auto 56px;
}

.mission-block:last-child {
    margin-bottom: 0;
}

.mission-block h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary);
}


.mission-block--sustainability h2 {
    border-bottom-color: #4caf50;
}

.mission-block h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-1);
    margin: 24px 0 8px;
}

.mission-split-content {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
}

.mission-split-content .mission-photo {
    width: 280px;
    flex-shrink: 0;
}

.mission-photo {
    border-radius: 12px;
    overflow: hidden;
}

.mission-photo img {
    width: 100%;
    display: block;
}

.conduct-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0;
}

.conduct-photo {
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
    border-radius: 12px 0 0 0;
}

.conduct-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 75%;
    display: block;
}

.conduct-intro {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    padding: 32px;
    background: var(--surface-1);
    border-radius: 0 12px 0 0;
}

.conduct-intro p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-1);
    margin: 0;
}

.conduct-rules {
    grid-column: 1 / -1;
    padding: 28px 32px;
    background: var(--surface-1);
    border-radius: 0 0 12px 12px;
    border-top: 1px solid var(--border);
}

.conduct-rules ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.conduct-rules ul li {
    position: relative;
    padding-left: 24px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-2);
}

.conduct-rules ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}

.mission-block p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-2);
    margin-bottom: 12px;
}

.mission-block ul {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.mission-block ul li {
    position: relative;
    padding-left: 24px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-2);
    margin-bottom: 10px;
}

.mission-block ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}

.mission-triple {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0;
}

.mission-triple-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}

.mission-triple-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mission-triple-item:hover {
    border-color: var(--primary);
    background: var(--surface-2);
}

.mission-triple-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    background: #fff;
    border-radius: 8px;
    padding: 4px;
}

/* BV-certified items in the Triple-Certified block: title + caption first,
   BV certification mark anchored to the bottom — same treatment as the
   /authorisations cards. #3373 */
.mission-triple-item--bv {
    justify-content: flex-start;
}
.mission-triple-bv-badge {
    margin-top: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}

/* IACS card uses the square BV mark — center it and cap height
   so the card matches the rectangular ISO badge cards. */
.mission-triple-item--iacs .mission-triple-bv-badge {
    width: auto;
    max-width: 60%;
    max-height: 140px;
    align-self: center;
}

.mission-triple-item h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 6px;
}

.mission-triple-item--iso h3 { color: var(--text-1); }
.mission-triple-item--iacs h3 { color: var(--text-1); }

.mission-triple-item p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-3);
    margin: 0;
}

.mission-fact {
    background: var(--surface-1);
    border-left: 3px solid var(--primary);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

/* Hioscar-style pull quote: circular orange-tint badge with a single
   opening quote glyph, then a large serif headline-style blockquote,
   then a small all-caps attribution. Replaces the previous italic
   centered blockquote that read as just an indented note. */
.mission-quote {
    margin: 40px 0;
    padding: 0;
    text-align: center;
}

.mission-quote-mark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(243, 146, 0, 0.12);
    color: var(--primary);
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mission-quote-mark .material-symbols-outlined {
    font-size: 28px;
}

.mission-block .mission-quote blockquote {
    background: none;
    border: none;
    padding: 0;
    margin: 0 auto;
    max-width: 780px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 600;
    font-style: normal;
    line-height: 1.3;
    color: var(--text-1);
    letter-spacing: -.2px;
}

.mission-quote-cite {
    margin-top: 24px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* The role hangs after a comma so the cite reads as one line:
   "IAN FLEMING MCCURDIE, MANAGING DIRECTOR". */
.mission-quote-cite-role::before {
    content: ', ';
}

.mission-sustainability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 24px 0 32px;
}

.mission-sustainability-grid > * {
    max-height: 280px;
}

.mission-sustainability-item {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

.mission-sustainability-item .material-symbols-outlined {
    font-size: 32px;
    color: #4caf50;
    margin-bottom: 12px;
}

.mission-sustainability-item h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0 0 8px;
}

.mission-sustainability-item p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-3);
    margin: 0;
}

.mission-sustainability-item--photo {
    padding: 0;
    overflow: hidden;
}

.mission-sustainability-item--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mission-sdg {
    text-align: center;
    margin: 40px 0;
}

.mission-sdg img {
    max-width: 280px;
    margin-bottom: 16px;
}

.mission-sdg p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-2);
}

.mission-closing {
    font-size: 17px;
    font-weight: 500;
    color: var(--text-1);
    text-align: center;
    padding-top: 16px;
}

@media (max-width: 768px) {
    .mission-triple { grid-template-columns: 1fr; }
    .mission-split-content { grid-template-columns: 1fr; }
    /* .conduct-grid: collapse to single column AND reset the children's
       explicit grid-column placements. Without resetting them, the
       explicit grid-column: 2 on .conduct-intro implicitly creates a
       second column and the "1fr" template is ignored. */
    .conduct-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .conduct-photo {
        grid-column: 1;
        grid-row: auto;
        border-radius: 12px 12px 0 0;
    }
    .conduct-intro {
        grid-column: 1;
        grid-row: auto;
        border-radius: 0;
        padding: 20px;
    }
    .conduct-rules {
        grid-column: 1;
        padding: 20px;
    }
    .conduct-intro p { font-size: 15px; line-height: 1.6; }
    .mission-sustainability-grid { grid-template-columns: 1fr 1fr; }
    /* Drop the photo on small screens and let the text cards size to their
       content (the 280px clamp clipped them and caused overlap). */
    .mission-sustainability-item--photo { display: none; }
    .mission-sustainability-grid > * { max-height: none; }
}

/* =========================
   TESTIMONIALS
   ========================= */

.trust-section {
    padding: 80px 0;
    background: var(--surface-1);
}

.trust-card cite em {
    font-style: normal;
    color: var(--primary);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.trust-card {
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.trust-portrait {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
}

.trust-card blockquote {
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-1);
    font-style: normal;
    margin-bottom: 24px;
    flex: 1;
}

/* Colored top accent bar */

.trust-card cite {
    font-style: normal;
}

.trust-card cite strong {
    display: block;
    font-size: 15px;
    color: var(--text-1);
}

.trust-card cite span {
    font-size: 14px;
    color: var(--text-3);
}

/* =========================
   FINAL CTA
   ========================= */

.final-cta {
    padding: 160px 0;
    text-align: center;
    border-top: 1px solid var(--border);
}

.final-cta h2 {
    font-size: 40px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -1px;
    margin-bottom: 16px;
}

.final-cta > .section-container > p {
    font-size: 18px;
    color: var(--text-2);
    margin-bottom: 40px;
}

.final-cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* =========================
   CONTACT PAGE
   ========================= */

.contact-hero {
    padding: 140px 0 60px;
    text-align: center;
}

.contact-hero h1 {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -.5px;
    margin-bottom: 12px;
}

.contact-hero-subtitle {
    font-size: 18px;
    color: var(--text-2);
    max-width: 520px;
    margin: 0 auto;
}

/* Contact info cards */
.contact-info-section {
    padding: 0 0 60px;
}

.contact-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.contact-addresses {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 24px;
}

.contact-address {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
}

.contact-address-icon {
    font-size: 24px;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-address h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.contact-address p {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0;
}

.contact-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 28px;
    text-align: center;
}

.contact-card-icon {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 4px;
}

.contact-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 4px;
}

.contact-card p {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.6;
}

.contact-card a {
    color: var(--btn-bg);
    text-decoration: none;
    font-weight: 600;
}

.contact-card a:hover {
    color: var(--btn-bg-hover);
}

.contact-card-secondary {
    margin-top: 10px;
    font-size: 13px !important;
    color: var(--text-3) !important;
}

.contact-card-secondary a {
    font-weight: 500;
}

.contact-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #25d366 !important;
    font-weight: 600 !important;
    white-space: nowrap;
}

.contact-whatsapp svg {
    flex-shrink: 0;
}

.contact-whatsapp:hover {
    color: #20bd5a !important;
}

/* Team section */
.contact-team-section {
    padding: 40px 0 100px;
}

.contact-team-heading {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 12px;
    text-align: center;
}

.contact-team-subtitle {
    font-size: 18px;
    font-weight: 500;
    color: var(--primary);
    line-height: 1.5;
    max-width: 640px;
    margin: 0 auto 40px;
    text-align: center;
}

.contact-team-subheading {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-1);
    margin-top: 48px;
    margin-bottom: 24px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Single-card grid: drop to one column with a centred narrower card
   (used by /become-an-asp's "Wanna talk more?"). The CTA button lives
   outside this grid in its own .operate-cta-row sibling. */
.team-grid--single {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: 0 auto;
}

/* CTA row sits outside the team-grid, centred under the card so the
   button is visually anchored to the section's axis. Tight gap so
   button + card read as one unit, not two floating elements. */
.operate-cta-row {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}
.operate-cta-row .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.operate-cta-row .btn-primary .material-symbols-outlined {
    font-size: 18px;
}

.team-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-areas:
        "photo header"
        "photo body";
    column-gap: 20px;
    row-gap: 6px;
    align-items: start;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: border-color .2s;
}

.team-card:hover {
    border-color: var(--border-hover);
}

/* Featured variant: the card sheds its frame (no background, border or
   padding) and the photo becomes a circular portrait. Used on
   /become-an-asp's "Wanna talk more?" card where the person should
   feel like a freestanding contact, not a directory row. */
.team-card--featured,
.team-card--featured:hover {
    background: transparent;
    border-color: transparent;
    padding: 0;
    grid-template-columns: 140px 1fr;
    column-gap: 28px;
}

.team-card--featured .team-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
}

/* The Kimberly-specific zoom was tuned for a 120x180 portrait crop;
   for a 140x140 circle her face sits centre naturally so reset the
   scale to keep more of the photo visible. */
.team-card--featured .team-photo img[src$="kimberly.png"] {
    transform: scale(1.1);
    transform-origin: center top;
}

.team-photo {
    grid-area: photo;
    width: 120px;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
}

/* Kimberly's shot is framed wider (full body + book) than the others, so she
   reads as further away in the card. Zoom in a touch, anchored to the top so
   her head stays in frame. */
.team-photo img[src$="kimberly.png"] {
    transform: scale(1.28);
    transform-origin: center top;
    /* Her shot is a touch flat — nudge the contrast. Re-state grayscale since
       this `filter` replaces the base .team-photo img one. */
    filter: grayscale(1) contrast(1.2);
}

.team-header {
    grid-area: header;
    min-width: 0;
}

.team-body {
    grid-area: body;
    min-width: 0;
}

.team-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 2px;
}

.team-title {
    display: block;
    font-size: 13px;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 8px;
}

.team-bio {
    font-size: 13px;
    color: var(--text-1);
    line-height: 1.5;
    margin-bottom: 10px;
}

.team-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.team-links a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-1);
    text-decoration: none;
    transition: color .15s;
}

.team-links a:hover {
    color: var(--btn-bg);
}

.team-links .material-symbols-outlined {
    font-size: 16px;
}

.team-links svg {
    flex-shrink: 0;
}


/* Company info — board + bank */
@media (max-width: 600px) {
    .contact-team-subtitle { font-size: 16px; }
}

.contact-company-section {
    padding: 0 0 80px;
}

.contact-company-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.contact-company-block {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
}

.contact-company-block h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 10px;
}

.contact-company-block p {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.7;
}

@media (max-width: 900px) {
    .contact-company-grid {
        grid-template-columns: 1fr;
    }

    .contact-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-addresses {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 550px) {
    .contact-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    /* Photo left + name/title right on the top row, bio full-width below. */
    .team-card {
        grid-template-columns: 96px 1fr;
        grid-template-areas:
            "photo header"
            "body  body";
        align-items: center;
        column-gap: 16px;
    }

    .team-photo {
        width: 96px;
        height: 128px;
    }

    .team-body {
        margin-top: 10px;
    }
}

/* =========================
   FOOTER
   ========================= */

.site-footer {
    padding: 80px 0 40px;
    background: var(--surface-1);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: 48px;
}

.footer-brand .brand-logo {
    height: 36px;
    width: auto;
    display: block;
    margin-bottom: 20px;
}

.footer-brand p {
    font-size: 15px;
    color: var(--text-3);
    line-height: 1.7;
}

.footer-vat {
    margin-top: 8px;
    font-size: 13px !important;
    opacity: .5;
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-2);
    transition: background .15s, color .15s;
}

.footer-social a:hover {
    background: var(--btn-bg);
    color: #fff;
}

.footer-links h4 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 16px;
}

.footer-links a {
    display: block;
    font-size: 15px;
    color: var(--text-3);
    padding: 5px 0;
    transition: color .12s;
}
.footer-links a:hover {
    color: var(--text-1);
}

.footer-bottom {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 13px;
    color: var(--text-3);
    opacity: .5;
}

/* Light theme: footer text is too pale on the off-white surface — darken
   address, headings and links to --text-1 for readable contrast. */
.theme-light .footer-brand p,
.theme-light .footer-links h4,
.theme-light .footer-links a,
.theme-light .footer-bottom {
    color: var(--text-1);
}

/* =========================
   RESPONSIVE
   ========================= */

/* =========================
   NAV — active link
   ========================= */

.nav-link--active {
    color: var(--text-1);
    background: var(--border);
}

/* =========================
   APPROVALS PAGE
   ========================= */

.approvals-hero {
    padding: 140px 32px 60px;
}

.approvals-hero-content {
    text-align: center;
}

.approvals-hero h1 {
    font-size: 44px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -.5px;
}

/* Section bar — inspired by the original cralog.com gray header bars */
.approvals-section {
    padding: 0 0 64px;
}

.approvals-section-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    margin-bottom: 32px;
    border-radius: var(--radius);
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.approvals-section-bar > .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-approvals);
    flex-shrink: 0;
}

.approvals-section-bar--la > .material-symbols-outlined {
    color: var(--primary);
}

.approvals-section-bar--class > .material-symbols-outlined {
    color: var(--color-verification);
}

.approvals-section-bar--membership > .material-symbols-outlined {
    color: var(--color-courses);
}

.approvals-section-bar--iso > .material-symbols-outlined {
    color: var(--primary);
}

.approvals-section-bar--awards > .material-symbols-outlined {
    color: var(--primary);
}

.approvals-section-bar h2 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.4;
}

/* Grid */
.approvals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.approvals-grid--iso {
    grid-template-columns: repeat(2, 1fr);
}

/* Advisory Roles: two equal cards. The DS "We participate in standardisation"
   badge belongs ONLY with ISO TC 8 (DS is the Danish member of ISO; IMO is
   a separate UN body) — so we embed the badge inside the ISO TC 8 card and
   keep IMO SSE alongside as a peer. */
.approvals-grid--advisory {
    grid-template-columns: 1fr 1fr;
}

/* Awards: same two-column layout and badge width as Advisory Roles
   so the section reads as a peer to the one below it. */
.approvals-grid--awards {
    grid-template-columns: 1fr 1fr;
}

.award-badge {
    flex-shrink: 0;
    width: 120px;
}
.award-badge img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.award-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Specificity bump (.approval-card.approval-card--with-badge) — the plain
   .approval-card rule below sets flex-direction: column with equal specificity
   and would otherwise win on cascade order. */
.approval-card.approval-card--with-badge {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
}

.advisory-badge {
    flex-shrink: 0;
    width: 120px;
}
.advisory-badge img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

.advisory-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Cards */
.approval-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .2s, background .2s;
}

.approval-card:hover {
    border-color: var(--border-hover);
    background: var(--surface-2);
}

.approval-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.35;
}

.approval-desc {
    font-size: 14px;
    color: var(--text-3);
    line-height: 1.5;
}

/* ISO cards — horizontal layout */
.approval-card--iso {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
}

.iso-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 64px;
    border-radius: 12px;
    background: rgba(243, 146, 0, .1);
    color: var(--primary);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.5px;
    flex-shrink: 0;
}

.approval-card--iso h3 {
    font-size: 18px;
    margin-bottom: 4px;
}

.approval-card--iso .approval-desc {
    font-size: 15px;
    line-height: 1.6;
}

/* Cards with logo — horizontal layout: icon left, text right */
.approval-card--has-logo {
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.approval-card--has-logo .approval-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Approval logo image — large square icon. Plate colour rules:
   - Dark theme: every logo sits on a dark plate (per user preference —
     coloured logos read fine, white logos pop).
   - Light theme: coloured logos get a white plate; white-on-transparent
     logos (PAN, MAI, RI, NOR, AB) override back to a dark plate so they
     remain visible against an otherwise white card. */
.approval-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    padding: 6px;
    border-radius: 14px;
    background: #1a1a1a;
    flex-shrink: 0;
}

.theme-light .approval-logo {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* White logos always sit on a medium-gray plate in both themes so they're
   never on a black-on-black or white-on-white surface. */
.approval-logo--white,
.theme-light .approval-logo--white {
    background: #6a6a6a;
    border-color: #6a6a6a;
}

/* "Certified to ISO Standards" cards: title + description on top, BV-issued
   certification mark anchored to the bottom of the card. The mark is a
   complete rectangular badge so it needs no plate or padding. #3373 */
.approval-card--bv {
    /* let the badge push to the bottom even when descriptions differ in length */
    justify-content: flex-start;
}
.approval-bv-badge {
    margin-top: auto;
    align-self: stretch;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}

/* Light theme: --text-3 is too pale on the card surface — push card body
   text to --text-1 (near-black) for stronger contrast. Dark theme keeps
   the softer grey since it reads well against the darker card. */
.theme-light .approval-desc {
    color: var(--text-1);
}

/* Download indicator on clickable cards */
a.approval-card {
    position: relative;
    text-decoration: none;
    cursor: pointer;
}

.approval-download {
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--text-3);
    transition: color .15s;
}

.approval-download .material-symbols-outlined {
    font-size: 20px;
}

a.approval-card:hover .approval-download {
    color: var(--primary);
}

/* Expiry date text */
.approval-expiry-text {
    font-size: 13px;
    color: var(--text-3);
    margin-top: auto;
}

/* Unavailable approval cards (file missing on disk) */
.approval-card--unavailable {
    opacity: 0.5;
    cursor: default;
}

.approval-unavailable-text {
    font-size: 12px;
    color: #b45309;
    margin-top: 4px;
    font-style: italic;
}

/* Error banner when DB query fails */
.approvals-load-error {
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .2);
    color: #ef4444;
    padding: 16px 24px;
    border-radius: 8px;
    text-align: center;
    font-size: 15px;
}

/* Top-of-page banner shown when a service degraded to an empty fallback
   (DB outage etc.). Amber, not red — the page still works for the user,
   we're just signalling that some numbers are unreliable right now. */
.page-degraded-banner {
    background: rgba(245, 158, 11, .12);
    border-bottom: 1px solid rgba(245, 158, 11, .35);
    color: #92400e;
    padding: 12px 24px;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
}

/* Cards with a public-register VerifyUrl (DMA, etc.) — outer is a <div>
   (no click-anywhere). The download icon at top-right matches peers; the
   "Verify on official list" chip lives in the body. Each link is a real
   <a> the user must hit explicitly. #3369 */
.approval-card--actions {
    position: relative;
}
.approval-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.approval-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.approval-action:hover {
    background: var(--surface-3);
    color: var(--text-1);
}
.approval-action .material-symbols-outlined {
    font-size: 16px;
}
.theme-light .approval-action { color: var(--text-1); }

/* The corner download icon is now a real <a> (it was a span inside an
   <a>-wrapped card before). Hover state lives on the icon itself since the
   card body isn't a link in the --actions variant. */
a.approval-download {
    text-decoration: none;
}
a.approval-download:hover { color: var(--primary); }

/* Theme switcher — Vercel-style 3-segment pill */
.theme-menu {
    position: relative;
}

.theme-toggle {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
}

.theme-light .theme-toggle {
    color: var(--text-1);
}

.theme-toggle:hover {
    color: var(--text-1);
    background: var(--surface-1);
}

.theme-toggle .material-symbols-outlined {
    font-size: 22px;
}

.theme-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    min-width: 200px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    z-index: 100;
}

.theme-menu.open .theme-menu-dropdown {
    display: block;
}

.theme-menu-dropdown button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    color: var(--text-2);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s;
    white-space: nowrap;
}

.theme-menu-dropdown button:hover {
    background: var(--surface-3);
}

.theme-menu-dropdown button .material-symbols-outlined:first-child {
    font-size: 20px;
    color: var(--text-3);
}

.theme-check {
    margin-left: auto;
    font-size: 18px !important;
    color: var(--primary) !important;
    display: none !important;
}

.theme-menu-dropdown button.active .theme-check {
    display: inline !important;
}

/* =========================
   RESPONSIVE
   ========================= */

/* Header nav collapses to the burger earlier than the rest of the
   layout — six nav links + login + theme toggle + logo don't fit
   below roughly ~960px, so wait that long and you'd see items
   overflow off the right edge before the 768px tablet breakpoint
   kicks in. Also centre the brand wordmark using the M3 center-
   aligned top-app-bar trick (absolute-position on a relative parent)
   so the logo doesn't sit awkwardly against the burger button. The
   height/padding/logo-size shrinks that go with truly-small viewports
   stay in the 600px block. */
@media (max-width: 980px) {
    .nav-links, .theme-toggle, .nav-login { display: none; }
    .nav-burger { display: inline-flex; }
    .nav-container { position: relative; }
    .nav-brand {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, calc(-50% + 4px));
    }
}

@media (max-width: 768px) {
    .hero { margin-bottom: 10vh; }
    .stats-grid { gap: 24px; flex-wrap: wrap; }

    .feature-row { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .story-layout { grid-template-columns: 1fr; gap: 32px; }
    .story-photos { order: 2; }
    .story-content { order: 1; }
    .academy-layout { grid-template-columns: 1fr; gap: 32px; }
    /* Mobile teaser is text + CTA only — the scatter collage takes
       a lot of vertical room without adding much to the message
       below the fold. Hide on narrow viewports. */
    .academy-collage { display: none; }
    .academy-content { order: 1; }
    .academy-title { font-size: 32px; }
    /* Testimonials ("What Our Partners Say") are three text-heavy cards;
       stacked single-column they cost several screens of scroll without
       adding much below the fold. Hide the whole section on narrow
       viewports — same call as .academy-collage above. */
    .trust-section { display: none; }
    .approvals-teaser { padding: 80px 0 0; }
    .approvals-teaser-top { flex-direction: column; gap: 24px; }

    .academy-grid { grid-template-columns: 1fr; }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .hero-narrative .stat-number { font-size: 28px; }
    .narrative-text { font-size: 15px; }

    .trust-logos-row { gap: 24px; }

    .approvals-grid { grid-template-columns: 1fr; }
    .approvals-grid--iso { grid-template-columns: 1fr; }
    .approvals-grid--advisory { grid-template-columns: 1fr; }

    .approval-card--iso,
    .approval-card--has-logo,
    .approval-card.approval-card--with-badge {
        flex-direction: column;
        gap: 16px;
    }

    .advisory-badge { width: 140px; }

    .approval-logo {
        width: 56px;
        height: 56px;
    }

    .provider-body {
        flex-direction: column;
        align-items: flex-start;
    }

    .provider-details {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Stack the name above the action so the button sizes to its content
       instead of stretching to the full height of a wrapped company name. */
    .provider-name {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .provider-cralog-link {
        align-self: stretch;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}

/* =========================
   PHONE TIER (<=600px)
   Aggressive collapse to single column for actual phones. The 768px
   block above handles tablet-ish widths; this block handles real phones
   where multi-column layouts and large fixed widths just don't fit.
   ========================= */
@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .home-actions-grid {
        grid-template-columns: 1fr;
    }

    .approvals-grid,
    .approvals-grid--iso,
    .approvals-grid--advisory {
        grid-template-columns: 1fr;
    }

    .academy-curriculum-grid {
        grid-template-columns: 1fr;
    }

    .contact-cards,
    .contact-addresses {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .operate-pillars,
    .operate-needs {
        grid-template-columns: 1fr;
    }

    /* M3 center-aligned top app bar — brand wordmark centred via
       the 980px block above; here we just shrink the chrome for
       truly-small viewports. */
    .nav-container {
        height: 64px;
        gap: 12px;
        padding: 0 16px;
    }
    .brand-logo { height: 44px; }

    .presence-section { padding: 40px 0; }
    .presence-header { margin-bottom: 20px; }
    .presence-header h2 { font-size: 26px; margin-bottom: 12px; }
    .presence-header p { font-size: 15px; line-height: 1.55; }
    .presence-provider-count { margin-top: 12px; line-height: 1.5; }
    .presence-provider-count .stat-number { font-size: 26px; }
    .presence-provider-count .narrative-text { font-size: 15px; }
    .presence-recent-count { margin-top: 6px; line-height: 1.5; }
    .presence-recent-count .stat-number { font-size: 22px; }
    .presence-recent-count .narrative-text { font-size: 14px; }

    /* Smaller, less bloomy map markers on phones — at 360px-wide the
       map is ~330px, and the desktop 10px dot + 16px glow + pulse
       scaling to 40px makes Europe/SE Asia blur into one orange smear. */
    .presence-marker-dot {
        width: 5px;
        height: 5px;
        box-shadow: 0 0 4px rgba(243, 146, 0, .55);
    }
    .presence-marker-pulse {
        width: 5px;
        height: 5px;
        background: rgba(243, 146, 0, .25);
    }
    /* Recent (blue) markers: same 5px as the orange dots — the count
       scaling (--dot-size) is desktop-only, since 11–18px blue dots dwarf
       5px orange ones on a phone-sized map. Colours stay blue (the old
       #presence-map ID prefix used to out-specify the --recent variant
       and repainted blue halos orange here). */
    .presence-marker--recent .presence-marker-dot {
        width: 5px;
        height: 5px;
        box-shadow: 0 0 4px rgba(10, 138, 191, .55);
    }
    .presence-marker--recent .presence-marker-pulse {
        width: 5px;
        height: 5px;
        background: rgba(10, 138, 191, .25);
    }

    /* Authorisations teaser — compact, M3-inspired phone layout */
    .approvals-teaser { padding: 32px 0 0; padding-bottom: 32px; }
    .approvals-teaser-top {
        margin-bottom: 24px;
        align-items: stretch;
    }
    .approvals-teaser-content h2 {
        font-size: clamp(24px, 7vw, 30px);
        line-height: 1.15;
        margin-bottom: 10px;
    }
    .approvals-teaser-content > p {
        font-size: 15px;
        line-height: 1.55;
    }
    .approvals-teaser-top > .btn-primary {
        align-self: stretch;
        text-align: center;
        margin-top: 4px;
    }
}

/* Marquee logos shrink on phones — the desktop 100×100 plates with
   32px gaps look cramped in the now-scrollable strip. */
@media (max-width: 768px) {
    .approvals-marquee {
        padding: 20px 0 28px;
    }
    .approvals-marquee-track {
        gap: 16px;
        padding: 0 16px;
    }
    .approvals-marquee-track img {
        width: 72px;
        height: 72px;
        padding: 10px;
        border-radius: 14px;
    }
}

/* Authorisations page — phone polish. The desktop "card-shaped" section
   bar reads as another card alongside the approval cards, which is wrong:
   section headers shouldn't claim card surface. And the approval cards
   themselves collapse to column on tablets (logo big and centred on top),
   which on a phone leaves each card almost half a screen tall. Switch to
   an M3 list-item pattern instead: small leading logo, text trailing. */
@media (max-width: 600px) {
    .approvals-section-bar {
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        margin-bottom: 16px;
    }
    .approvals-section-bar h2 {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.35;
        color: var(--text-2);
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .approval-card {
        padding: 16px;
    }
    .approval-card h3 {
        font-size: 15px;
    }
    .approval-expiry-text {
        font-size: 12px;
    }

    /* Override the >=768px column collapse — at <=600px we want row layout
       so cards stay compact list-item height instead of stacking the logo. */
    .approval-card--has-logo,
    .approval-card--iso,
    .approval-card.approval-card--with-badge {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        text-align: left;
    }
    .approval-logo {
        width: 56px;
        height: 56px;
        padding: 4px;
        border-radius: 12px;
    }
    .approval-card-actions {
        margin-top: 4px;
    }
    .approval-action {
        font-size: 13px;
    }
}

/* =========================
   TOUCH-PRIMARY DEVICES (any size)
   Enforce 48dp minimum tap targets on phones, tablets, touch laptops —
   independent of viewport width. Per M3 accessibility guidance.
   ========================= */
@media (pointer: coarse) {
    .nav-link,
    .nav-burger,
    .theme-toggle,
    .country-suggest-item,
    .btn-primary,
    .btn-secondary {
        min-height: 48px;
    }

    .country-suggest-item {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* =========================
   SERVICE PROVIDERS PAGE
   ========================= */

.service-hero {
    padding: 140px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.service-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    /* Use the bottom of the photo — yellow boat hull, less busy than
       the rope-knot pattern in the middle. */
    background-position: 50% 100%;
    /* Slight blur softens any remaining texture so the foreground
       text reads cleanly against it; brightness lifts the naturally
       dark photo so it doesn't read as near-black (#3596 follow-up,
       Ida 2026-06-11). */
    filter: blur(2px) brightness(1.35);
    /* Counter the blur's edge-fade against the section bounds by
       scaling up just a touch. */
    transform: scale(1.02);
    z-index: -2;
}

.service-hero-overlay {
    position: absolute;
    inset: 0;
    /* Light overlay so the yellow boat hull behind shows through.
       Darker at the top where the title sits (text contrast) and
       lighter toward the bottom (let the photo breathe), then fade
       into the page background. */
    background: linear-gradient(180deg,
        rgba(0, 0, 0, .35) 0%,
        rgba(0, 0, 0, .15) 70%,
        var(--surface-0) 100%);
    z-index: -1;
}

/* Light theme: the photo's natural brown reads heavy against the
   bright surrounding page. Brighten the photo aggressively and
   drop most of the scrim so the hero looks airy, not muddy. The
   text shadow does the heavy lifting for title legibility. */
.theme-light .service-hero-bg {
    filter: blur(2px) brightness(1.4) saturate(1.1);
}
.theme-light .service-hero-overlay {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, .2) 0%,
        rgba(0, 0, 0, .05) 70%,
        var(--surface-0) 100%);
}

.service-hero h1 {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    color: #fff;
    letter-spacing: -.5px;
    margin-bottom: 12px;
    /* Stronger shadow because the lighter overlay gives less natural
       contrast against the photo. */
    text-shadow: 0 2px 12px rgba(0, 0, 0, .85),
                 0 0 4px rgba(0, 0, 0, .6);
}

.service-hero-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .85),
                 0 0 4px rgba(0, 0, 0, .6);
}

.service-hero-subtitle strong {
    color: var(--primary);
    font-weight: 700;
}

/* Search */
.service-search-section {
    padding: 0 0 20px;
    margin-top: -28px;
}

.service-search-section .service-search {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border: none;
    padding: 0;
    background: none;
    max-width: none;
    margin: 0;
}

.service-search-submit {
    flex-shrink: 0;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
}


.service-search-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-1);
    transition: border-color .15s;
    position: relative;
}

.service-search-input:focus-within {
    border-color: var(--primary);
}

/* Country suggestion dropdown for /service search. Anchored to the
   search-input wrapper; full-width below it; floats above the page. */
.country-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 6px 0;
}

.country-suggest[hidden] {
    display: none;
}

.country-suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--text-1);
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s;
}

.country-suggest-item:hover,
.country-suggest-item.is-active {
    background: var(--surface-2, rgba(255, 255, 255, 0.06));
}

.service-search-input > .material-symbols-outlined {
    color: var(--text-3);
    font-size: 22px;
    flex-shrink: 0;
}

.service-search-input input {
    flex: 1;
    border: none;
    background: none;
    color: var(--text-1);
    font-size: 16px;
    font-family: inherit;
    outline: none;
}

.service-search-input input::placeholder {
    color: var(--text-3);
}

.service-search-clear {
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: color .15s;
}

.service-search-clear:hover {
    color: var(--text-1);
}

.service-search-clear .material-symbols-outlined {
    font-size: 20px;
}

/* Provider cards */
.service-list-section {
    padding: 48px 0 120px;
}

.service-list-heading {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 12px;
}

.service-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Provider card — flat layout */
.provider-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-left: 3px solid var(--btn-bg);
    border-radius: var(--radius-lg);
    transition: border-color .2s, box-shadow .2s;
    overflow: hidden;
}

.provider-card:hover {
    border-color: var(--border-hover);
    border-left-color: var(--btn-bg);
}

/* Dark theme: white left-stripe instead of the CRALOG blue, so the
   accent doesn't clash against the near-black card background. */
.theme-dark .provider-card,
.theme-dark .provider-card:hover {
    border-left-color: var(--text-1);
}



/* Name strip — recessed title bar (page-background tone), button right */
.provider-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--surface-0);
}

.provider-name h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.3;
    letter-spacing: .2px;
}

/* Body: details left, button right */
.provider-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    gap: 16px;
}

.provider-details {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    flex: 1;
}

.provider-country {
    font-size: 13px;
    color: rgba(255,255,255,.6);
    margin-left: 8px;
}

.theme-light .provider-country {
    color: var(--text-2);
}

.provider-address {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-1);
}

.provider-address .material-symbols-outlined {
    font-size: 16px;
}

.provider-flag {
    font-size: 14px;
    margin-right: 2px;
    line-height: 1;
}

.provider-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.provider-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    border: 1px solid var(--border);
    color: var(--text-1);
}

.provider-badge--lsa,
.provider-badge--la {
    border-color: var(--border);
    color: var(--text-1);
}

.provider-stat {
    font-size: 12px;
    color: var(--text-1);
}

.provider-contact {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.provider-contact a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-1);
    text-decoration: none;
    transition: color .15s;
}

.provider-contact a:hover {
    color: var(--primary);
}

.provider-contact .material-symbols-outlined {
    font-size: 18px;
}

.provider-cralog-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius);
    background: var(--btn-bg);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.provider-cralog-link:hover {
    background: var(--btn-bg-hover);
}

.provider-cralog-link .material-symbols-outlined {
    font-size: 16px;
}


/* =========================
   ACADEMY PAGE & COURSE DETAIL
   ========================= */

/* Coloured banner overlaid across the middle of the cover image,
   carrying the short CoverText. Falls back to the thin .course-card-banner
   stripe (or .course-detail-cover-banner) when CoverText is empty. */
.cover-band {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 16px;
    text-align: center;
    box-shadow: 0 -2px 12px rgba(0,0,0,.25);
    background-color: var(--course-color);
}

.cover-band-text {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .3px;
    text-transform: none;
    word-break: break-word;
}

.cover-band--detail {
    padding: 22px 24px;
}

.cover-band--detail .cover-band-text {
    font-size: 26px;
    letter-spacing: .5px;
}

/* Used when the card has NO image, so the band text sits on the colour-only
   placeholder area instead. */
.cover-band-text-only {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding: 0 16px;
}

.cover-band-text-only--detail {
    font-size: 36px;
}

.cover-band-text-light { color: #ffffff; }
.cover-band-text-dark  { color: #1a1a1a; }

/* Make course cards work as anchor tags without underline / inherit colour */
.course-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.course-card--link:hover { color: inherit; }

/* LiveHeld cards visually de-emphasised (enum: LiveUpcoming=0, LiveHeld=1).
   Hidden* never reach the public site so we don't style them. */
.course-card--status-1 {
    opacity: .7;
}

.course-card--status-1:hover {
    opacity: 1;
}

.course-badge--held {
    background: rgba(255,255,255,.08);
    color: var(--text-2);
}

.theme-light .course-badge--held { background: rgba(0,0,0,.06); }

/* Home academy teaser CTA — left-aligned inside the .academy-content
   column. Spacing above comes from .academy-features' margin-bottom. */
.academy-cta {
    margin-top: 0;
}

/* /academy page hero */
/* Hero + intro share the navy --academy-bg slab so the page-landing
   zone reads as one branded block — and matches the navy teaser
   visitors clicked through from on /home. Curriculum + videos +
   courses below stay on the regular page surface. */
.academy-hero {
    padding: 140px 0 24px;
    text-align: center;
    background: var(--academy-bg);
}

.academy-hero h1 {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -.5px;
    margin-bottom: 12px;
}

.academy-hero-tagline {
    font-size: 22px;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 16px;
}

.academy-hero-sub {
    font-size: 17px;
    color: var(--text-2);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* /academy page course sections */
/* ISO 23678 path framing (#3510) — one-paragraph link above Upcoming
   Courses that points visitors to the full Level 2 in-field block on
   /become-an-asp. The full block lives there because the assessment
   is bundled with the go.cralog.com subscription, alongside the other
   commercial commitments. */
.academy-path-frame {
    padding: 40px 0 8px;
}

.academy-path-frame p {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.6;
}

.academy-path-frame code {
    font-family: inherit;
    color: var(--primary);
    font-weight: 600;
}

.academy-path-frame a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.academy-path-frame a:hover {
    text-decoration: underline;
}

.academy-courses-section {
    padding: 56px 0;
}

.academy-courses-section h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0;
}

.academy-courses-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.academy-empty {
    color: var(--text-2);
    font-size: 16px;
    line-height: 1.6;
}

.academy-empty a { color: var(--primary); }

/* Online courses get their own section on /academy, immediately after the
   in-person "Upcoming courses" section. Slightly tighter top padding to
   read as a continuation rather than an unrelated block. */
.academy-courses-section--online {
    padding-top: 16px;
}

/* Seminars share the same continuation pattern as the online-courses
   section. Two seminar sub-sections may render back-to-back (Upcoming
   seminars & webinars, On-demand webinars); the smaller padding keeps
   them grouped as a single seminars block under the Academy page. */
.academy-courses-section--seminars {
    padding-top: 16px;
}

/* Where to find CRALOG — exhibitions live on the home page as a
   standalone block above OUR STORY. Same heading scale as the academy
   block (centred h2) so the two sections read as siblings rather than
   nested content. */
.where-to-find-section {
    padding: 80px 0;
    background: var(--surface-1);
}

/* Freeform multi-line opening-hours block on the exhibition detail
   page. The admin types newlines into a textarea; <pre> preserves
   them. Reset the default monospace font to match the body so the
   block doesn't read as code. */
.exhibition-opening-hours {
    font-family: inherit;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-1);
    margin: 0;
    padding: 0;
    background: none;
    white-space: pre-wrap;
}

/* On the home page, both "Upcoming Courses" and "Online Courses" live
   inside the single academy-section block under the centred "CRALOG
   Academy" h2. The smaller heading (h3 not h2) and the modest top margin
   separate adjacent grids without forcing them apart visually. The
   subhead is left-aligned so it reads as the start of its grid, not as a
   continuation of the centred parent heading. */
.academy-subhead {
    margin-top: 64px;
    margin-bottom: 18px;
}

.academy-subhead:first-of-type {
    /* The first subhead sits directly under the centred academy-header,
       which already has its own bottom margin — drop the extra top push. */
    margin-top: 0;
}

.academy-subhead h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0;
    letter-spacing: -.2px;
}

/* ===== Academy intro/media (#3402) ===== */
.academy-intro-section {
    padding: 8px 0 24px;
    overflow-x: hidden; /* guard against horizontal scroll from full-bleed gallery */
    background: var(--academy-bg);
}

.academy-intro {
    max-width: 900px;
    margin: 0 auto 28px;
    color: var(--text-1);
    font-size: 17px;
    line-height: 1.7;
}

.academy-intro p {
    margin: 0;
}

.academy-video {
    aspect-ratio: 16 / 9;
    max-width: 440px;
    margin: 24px auto 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--border);
}

.academy-video video,
.academy-video img {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* The interim poster is 3:2; the slot is 16:9 — centre-crop. */
    object-fit: cover;
}

.academy-video-row {
    display: grid;
    grid-template-columns: 440px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

.academy-video-row .academy-video {
    margin: 0;
    max-width: none;
}

.academy-video-caption h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-1);
}

.academy-video-caption p {
    margin: 0 0 10px;
    color: var(--text-2);
    font-size: 14.5px;
    line-height: 1.6;
}

.academy-video-caption p:last-child {
    margin-bottom: 0;
}

/* Inline links in the caption (e.g. the Quality Hotel The Reef link) need a
   visible affordance — they otherwise inherit the body text colour. */
.academy-video-caption a {
    color: var(--primary, #f39200);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity .15s;
}

.academy-video-caption a:hover {
    opacity: .8;
}

.academy-video-caption-meta {
    color: var(--text-3) !important;
    font-size: 13px !important;
    font-style: italic;
}

@media (max-width: 700px) {
    .academy-video-row {
        grid-template-columns: 1fr;
    }
    .academy-video-row .academy-video {
        max-width: 440px;
        margin: 0 auto;
    }
}

/* Gallery — auto-scrolling marquee, full-bleed (breaks out of section-container) */
.academy-gallery {
    overflow: hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 28px;
    margin-bottom: 28px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.academy-gallery-track {
    display: flex;
    gap: 16px;
    width: max-content;
    /* Duration scales with the number of gallery items: bump it when
       items are added so the visible scroll speed stays calm. 14 items
       × 2 passes → 210s lands roughly where the original 150s feels at
       10 items. */
    animation: academy-gallery-scroll 210s linear infinite;
}

.academy-gallery:hover .academy-gallery-track,
.academy-gallery:focus-within .academy-gallery-track {
    animation-play-state: paused;
}

@keyframes academy-gallery-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .academy-gallery-track { animation: none; }
    .academy-gallery {
        overflow-x: auto;
        -webkit-mask-image: none;
                mask-image: none;
    }
}

/* On phones, also drop the moving galleries — hover-to-pause does not
   fire on touch screens, so the auto-scroll runs forever with no user
   control. Convert to swipeable / static strips so users can stop and
   look. Tablets (iPad portrait 810px+) keep the animations. */
@media (max-width: 768px) {
    .hero-banner-track,
    .approvals-marquee-track,
    .academy-gallery-track {
        animation: none;
    }

    /* M3-inspired hero on phones: no photo at all. The hero shares the
       page surface (no elevation seam — elevation in M3 signals contained
       content like cards, not headers). A subtle primary-tinted radial
       glow gives the headline some warmth without becoming a "card".
       Height fits content + breathing room — no large void under the
       headline before the next section starts. */
    .hero-banner {
        height: auto;
        min-height: 0;
        padding: 0;
        margin-top: 0;
        background:
            radial-gradient(ellipse 70% 55% at 50% 50%, rgba(243, 146, 0, .08) 0%, transparent 70%),
            var(--surface-0);
    }
    .hero-stats {
        margin-top: 24px;
    }
    .hero-stats-heading {
        margin-bottom: 20px;
    }
    .hero-banner-track,
    .hero-overlay {
        display: none;
    }
    .hero-title {
        color: var(--text-1);
        text-shadow: none;
    }
    .hero-subtitle,
    .theme-light .hero-subtitle {
        color: var(--text-2);
        text-shadow: none;
    }
    /* Mobile hero acts as a single "front page" — title + subtitle +
       stats live in one viewport-tall container, vertically centred so
       they read as one block instead of split across the fold. */
    .hero {
        padding: 16px 16px 48px;
        margin-top: 64px;
        min-height: calc(100dvh - 64px);
        justify-content: center;
        gap: 12px;
    }

    .academy-gallery {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: none;
                mask-image: none;
    }

    /* The track renders two passes so the desktop infinite scroll can
       wrap seamlessly. On phones the animation is off and the user
       swipes; the second pass just doubles the swipe distance with
       duplicates. Hide it. */
    .academy-gallery-item[aria-hidden="true"] {
        display: none;
    }

    /* iOS Safari often refuses to autoplay these clips (Low Power Mode,
       Data Saver, or just first-load) and there's no poster set, so the
       video tiles render as blank black rectangles. Drop them on phones —
       the stills carry the story. */
    .academy-gallery-item:has(video) {
        display: none;
    }

    .approvals-marquee {
        -webkit-mask-image: none;
                mask-image: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.academy-gallery-item {
    flex-shrink: 0;
    height: 220px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-1);
}

.academy-gallery-item img,
.academy-gallery-item video {
    height: 100%;
    width: auto;
    display: block;
    object-fit: cover;
}

/* ===== Curriculum grid ("What you'll cover") ===== */
.academy-curriculum-section {
    padding: 32px 0;
}

.academy-curriculum-section h2 {
    margin: 0 0 8px;
    text-align: center;
}

.academy-curriculum-subtitle {
    margin: 0 auto 24px;
    max-width: 640px;
    text-align: center;
    font-size: 15px;
    color: var(--text-2);
}

.academy-curriculum-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1080px;
    margin: 0 auto;
}

.academy-curriculum-item {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.academy-curriculum-item h3 {
    margin: 0 0 8px;
    font-size: 17px;
    color: var(--primary);
    font-weight: 700;
}

.academy-curriculum-item p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-2);
}

.academy-curriculum-photo {
    position: relative;
    min-height: 160px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.academy-curriculum-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {
    .academy-curriculum-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .academy-curriculum-photo {
        min-height: 200px;
    }
}

@media (max-width: 600px) {
    .academy-curriculum-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Bottom video section ("What to expect") ===== */
.academy-video-section {
    padding: 48px 0 64px;
    background: var(--surface-1);
}


/* Course detail page */
.course-detail-section {
    padding: 120px 0 96px;
}

.course-detail-section .section-container {
    max-width: 880px;
}

.course-detail-cover {
    position: relative;
    height: 320px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid var(--border);
    /* Same --course-color pattern as .course-card-image. */
    background-color: var(--course-color, var(--surface-1));
}

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

.course-detail-cover--color {
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-detail-cover--color .material-symbols-outlined {
    font-size: 96px;
    color: rgba(255,255,255,.7);
}

.course-detail-cover-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background-color: var(--course-color);
}

.course-detail-status {
    margin-bottom: 12px;
}

.course-detail-status .course-badge { margin-top: 0; }

.course-detail-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -.5px;
    margin-bottom: 24px;
    line-height: 1.2;
}

.course-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px 32px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-bottom: 40px;
}

.course-detail-meta dt {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}

.course-detail-meta dd {
    font-size: 16px;
    color: var(--text-1);
    margin: 0;
    line-height: 1.5;
}

.course-detail-description {
    color: var(--text-2);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 40px;
}

/* E-learning snippet rail on online course pages (#3592): description
   left, excerpt videos right at desktop; the rail stacks below the
   description on narrow viewports. */
.course-detail-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: start;
}

.course-snippets h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 16px;
}

.course-snippet {
    margin: 0 0 20px;
}

.course-snippet video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.course-snippet figcaption {
    font-size: 13px;
    color: var(--text-3);
    margin-top: 6px;
}

@media (max-width: 900px) {
    .course-detail-body {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.course-detail-description h1,
.course-detail-description h2,
.course-detail-description h3,
.course-detail-description h4 {
    color: var(--text-1);
    font-weight: 700;
    margin-top: 28px;
    margin-bottom: 12px;
    line-height: 1.3;
}

.course-detail-description h1 { font-size: 26px; }
.course-detail-description h2 { font-size: 22px; }
.course-detail-description h3 { font-size: 18px; }
.course-detail-description h4 { font-size: 16px; }

.course-detail-description h1:first-child,
.course-detail-description h2:first-child,
.course-detail-description h3:first-child { margin-top: 0; }

.course-detail-description p { margin-bottom: 14px; }

/* Footnote convention: authors mark a footnote by italicising the whole line
   (_..._), so it renders as <p><em>…</em></p>. Drop the bottom margin on these
   so a run of footnotes reads as a contiguous block; the gap *above* the block
   is preserved by the preceding non-footnote paragraph's own margin. (#3467)
   NB: one non-nested :has() — :has() may not be nested inside :has(). */
.course-detail-description p:has(> em:only-child) {
    margin-bottom: 0;
}

.course-detail-description ul {
    margin: 0 0 14px 0;
    padding-left: 22px;
}

.course-detail-description li { margin-bottom: 6px; }

.course-detail-description a { color: var(--primary); }

.course-detail-description strong { color: var(--text-1); }

.course-detail-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Two-line button variant: bold label + smaller email/sub-label */
.btn-primary--stacked {
    align-items: center;
    padding: 12px 20px;
    line-height: 1.15;
}

.btn-stack-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.btn-stack-label {
    font-size: 16px;
    font-weight: 600;
}

.btn-stack-sub {
    font-size: 12px;
    font-weight: 500;
    opacity: .85;
    letter-spacing: .2px;
}

@media (max-width: 768px) {
    .academy-hero { padding: 72px 0 32px; }
    .academy-hero h1 { font-size: 36px; }
    .academy-hero-tagline { font-size: 18px; }
    .course-detail-cover { height: 220px; }
    .course-detail-title { font-size: 28px; }
    .course-detail-meta { padding: 20px; }
}

/* ============================================================
   /service — "What is an ASP" explanation
   ============================================================ */
/* ============================================================
   /find-an-asp — supporting context at the page footer. Single
   centred reassurance block + a deep-link to the canonical "what
   is an ASP" explanation on /become-an-asp.
   ============================================================ */
.service-asp-section {
    padding: 64px 0 32px;
    border-top: 1px solid var(--border);
    margin-top: 48px;
}

.service-asp-block--single {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.service-asp-block h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 10px;
    letter-spacing: -.1px;
}

.service-asp-block p {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.6;
}

.service-asp-block strong {
    color: var(--primary);
    font-weight: 700;
}

.service-asp-more {
    margin-top: 18px;
    font-size: 14px;
}

.service-asp-more a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.service-asp-more a:hover {
    text-decoration: underline;
}

.service-asp-more .material-symbols-outlined {
    font-size: 18px;
}

/* ============================================================
   /service — primary action headings. "Where do you need an
   inspection?" and "Or shall we find an ASP for you?" pair up as
   the two paths through the page. Same weight, same size.
   ============================================================ */
.service-network-bridge {
    padding: 72px 0 28px;
    text-align: center;
}

.service-network-bridge h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 8px;
    letter-spacing: -.4px;
}

/* ============================================================
   RFQ form (Request For Quote)
   ============================================================ */
.quote-form-section {
    padding: 56px 0 24px;
}

.quote-form-pitch {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0 0 20px;
    letter-spacing: -.4px;
    text-align: center;
}

.quote-form-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
}

.quote-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.quote-step {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quote-step legend {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 6px;
    padding: 0;
}

.quote-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.quote-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 600px) {
    .quote-row { grid-template-columns: 1fr; }
}

.quote-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.quote-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
}

.quote-field input,
.quote-field select,
.quote-field textarea {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-0);
    color: var(--text-1);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
    width: 100%;
    box-sizing: border-box;
}

.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
    border-color: var(--primary);
}

.quote-field textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    line-height: 1.5;
}

/* Equipment chips */
.quote-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quote-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface-0);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    user-select: none;
}

.quote-chip:hover {
    border-color: var(--border-hover);
}

.quote-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.quote-chip:has(input:checked) {
    border-color: var(--btn-bg);
    background: rgba(10, 138, 191, .12);
    color: var(--btn-bg);
}

/* Email preview */
.quote-preview {
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
}

.quote-preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

.quote-preview-header .material-symbols-outlined {
    color: var(--primary);
    font-size: 20px;
}

.quote-preview-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
}

.quote-preview-to {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-3);
}

.quote-preview-subject {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text-1);
}

.quote-preview-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .5px;
    flex-shrink: 0;
}

#rfq-subject {
    font-weight: 500;
    word-break: break-word;
}

.quote-preview-body {
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-2);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-height: 360px;
    overflow-y: auto;
}

.quote-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.quote-actions .btn-primary,
.quote-actions .btn-secondary {
    padding: 12px 24px;
    font-size: 15px;
}

.rfq-copy-confirm {
    color: #4ade80 !important;
}

@media (max-width: 600px) {
    .quote-form-card { padding: 20px; }
    .quote-form-pitch,
    .service-network-bridge h2 { font-size: 24px; }
    .quote-actions .btn-primary,
    .quote-actions .btn-secondary { width: 100%; justify-content: center; }
}

/* /service — light-theme high-contrast text. Promote the page's grey copy
   (--text-2 / --text-3) to --text-1 so labels, descriptions and unselected
   chips read as black on the bright background. Orange accents (--primary)
   and selected-chip styling are deliberately left alone — they're brand
   colour, not body text. */
.theme-light .service-asp-block p,
.theme-light .quote-label,
.theme-light .quote-chip,
.theme-light .quote-preview-to,
.theme-light .quote-preview-label,
.theme-light .quote-preview-body {
    color: var(--text-1);
}

/* ============================================================
   /become-an-asp — For Service Providers
   ============================================================ */
.operate-hero {
    padding: 140px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.operate-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* Modest lift — the lifeboat photo is naturally vivid; most of the
       brightening comes from the lighter scrim below (Ida, 2026-06-11). */
    filter: brightness(1.05);
    z-index: -2;
}

.operate-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, .5) 0%,
        rgba(0, 0, 0, .45) 70%,
        var(--surface-0) 100%);
    z-index: -1;
}

/* Light theme: soften the scrim slightly so the hero doesn't read
   as a heavy dark band, but keep enough cushion behind the white
   title for legibility against the bright lifeboat photo. */
.theme-light .operate-hero-overlay {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, .45) 0%,
        rgba(0, 0, 0, .4) 70%,
        var(--surface-0) 100%);
}

.operate-hero h1 {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    color: #fff;
    letter-spacing: -.5px;
    margin-bottom: 12px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}

.operate-hero-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, .9);
    max-width: 720px;
    margin: 0 auto;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

.operate-section {
    padding: 48px 0;
}

.operate-section h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 14px;
    letter-spacing: -.3px;
}

.operate-section h2 + p,
.operate-section > .section-container > p {
    font-size: 16px;
    color: var(--text-1);
    line-height: 1.65;
    margin-bottom: 14px;
}

.operate-section em {
    color: var(--text-1);
    font-style: italic;
    font-weight: 500;
}

.operate-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.operate-list li {
    padding-left: 20px;
    position: relative;
    color: var(--text-1);
    line-height: 1.55;
}

.operate-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.65em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
}

.operate-list strong {
    color: var(--text-1);
    font-weight: 600;
}

/* Bridge — "Training alone is not enough" */
.operate-section--bridge {
    background: var(--surface-1);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.operate-bridge-intro {
    max-width: 640px;
}

.operate-needs {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.operate-needs li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-0);
}

.operate-needs h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0 0 8px;
}

.operate-needs li p {
    font-size: 14px;
    color: var(--text-3);
    line-height: 1.55;
    margin: 0;
}

/* Custom flat-colour figures (wwwroot/images/operate/needs/*.svg) — each
   SVG carries its own tinted circle, so no background here. */
.operate-need-icon {
    width: 104px;
    height: 104px;
    display: block;
    margin-bottom: 16px;
}

@media (max-width: 880px) {
    .operate-needs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .operate-needs { grid-template-columns: 1fr; }
}

/* Four pillars */
.operate-pillars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 28px;
}

.operate-pillar {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.operate-pillar-num {
    position: absolute;
    top: -14px;
    left: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.operate-pillar h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-1);
    margin: 6px 0 0;
    letter-spacing: -.2px;
}

.operate-pillar-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin: 0 0 10px;
}

.operate-pillar p {
    font-size: 15px;
    color: var(--text-1);
    line-height: 1.55;
    margin: 0 0 6px;
}

.operate-pillar-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.operate-pillar-list li {
    padding-left: 14px;
    position: relative;
    color: var(--text-1);
    font-size: 14px;
    line-height: 1.5;
}

.operate-pillar-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary);
}

.operate-pillar-note {
    font-size: 13px !important;
    color: var(--text-1) !important;
    font-style: italic;
    margin-top: 4px !important;
}

.operate-pillar-link {
    margin-top: auto;
    padding-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
    transition: gap .15s;
}

.operate-pillar-link:hover {
    gap: 10px;
}

.operate-pillar-link .material-symbols-outlined {
    font-size: 18px;
}

/* When a pillar carries a photo, the link sits right under the copy and a
   small photo strip follows it. */
.operate-pillar--with-photo .operate-pillar-link {
    margin-top: 12px;
}

.operate-pillar-photo {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.operate-pillar-photo img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    object-position: center;
}

.operate-pillar-textlink {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 760px) {
    .operate-pillars { grid-template-columns: 1fr; }
}

/* Talk to us CTA */
/* "Wanna talk more?" sits on the navy --academy-bg slab — same
   coloured-band treatment as the home page's Academy teaser and
   What-do-you-need section. Gives the CTA visual identity instead
   of leaving four elements floating on the page background. */
/* Subscription + QA package side-by-side (#3510). Two cards on
   wide viewports, stacked on mobile. Each card carries the same
   surface treatment as .home-action-card so they read as a peer
   to other "pick a path" surfaces on the site. */
.operate-commercial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 32px;
}

.operate-commercial-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.operate-commercial-card-head h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0;
}

.operate-commercial-card-head code {
    font-family: inherit;
    color: var(--primary);
    font-weight: 600;
}

.operate-commercial-price {
    color: var(--primary);
    font-weight: 600;
    margin: 4px 0 0;
    font-size: 15px;
}

.operate-commercial-card h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 8px 0 0;
}

.operate-commercial-list {
    margin: 0;
    padding-left: 20px;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.6;
}

.operate-commercial-list li {
    margin-bottom: 4px;
}

/* ABS explainer film inside the QA package card (#3598): same
   poster + click-to-play shape as the course e-learning snippets. */
.operate-qa-video {
    margin: 18px 0 22px;
}

.operate-qa-video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.operate-qa-video figcaption {
    font-size: 13px;
    color: var(--text-3);
    margin-top: 6px;
}

.operate-commercial-cert {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--text-2);
}

@media (max-width: 768px) {
    .operate-commercial-grid { grid-template-columns: 1fr; }
}

/* ISO 23678 Level 2 in-field competence (#3510) — sits below the two
   commercial cards, full-width, with the same surface treatment. The
   detail is richer than the cards above (overview paragraph + Units
   list + Pre-requisites list + certificate validity) so it gets its
   own two-column internal layout: overview on the left, detail on
   the right, collapsing to one column on mobile. */
.operate-infield {
    margin-top: 24px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
}

.operate-infield-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0;
}

.operate-infield-subtitle {
    margin: 4px 0 20px;
    color: var(--primary);
    font-weight: 600;
    font-size: 15px;
}

.operate-infield-subtitle code {
    font-family: inherit;
}

.operate-infield-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

.operate-infield-text {
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.6;
}

.operate-infield-text p {
    margin: 0 0 12px;
}

.operate-infield-text code {
    font-family: inherit;
    color: var(--primary);
    font-weight: 600;
}

.operate-infield-detail h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 8px;
}

.operate-infield-detail h4:not(:first-child) {
    margin-top: 16px;
}

@media (max-width: 768px) {
    .operate-infield-content { grid-template-columns: 1fr; }
}

.operate-section--cta {
    padding: 80px 0 96px;
    background: var(--academy-bg);
}

.operate-cta-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 40px;
}

/* Match the larger section h2s used on the home page (Global Presence,
   Built on data, etc.) instead of the smaller operate-section h2 size. */
.operate-cta-header h2 {
    font-size: 36px;
    letter-spacing: -.5px;
    margin-bottom: 12px;
}

.operate-cta-header p {
    margin: 0 !important;
    color: var(--text-1);
}

@media (max-width: 600px) {
    .operate-section h2 { font-size: 24px; }
    .operate-hero h1 { font-size: 36px; }
}

/* ============================================================
   Home — "What do you need?" 3-up below presence
   ============================================================ */
.home-actions-section {
    padding: 96px 0;
}

.home-actions-section .home-actions-heading {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0 0 48px;
    letter-spacing: -.5px;
}

.home-actions-subheading {
    text-align: center;
    font-size: 16px;
    color: var(--text-2);
    margin-bottom: 36px;
}

.home-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.home-action-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-1);
}

.home-action-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(243, 146, 0, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-bottom: 12px;
}

.home-action-icon .material-symbols-outlined {
    color: var(--primary);
    font-size: 48px;
    /* FILL=1 + heavier wght axis gives a chunkier "illustrated"
       silhouette closer to Oscar's flat-color icons, even though
       Material Symbols is still an icon font and not custom art. */
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 48;
}

/* When a card uses a custom illustration instead of an icon-font
   glyph, the illustration fills the circle's bounds directly — no
   orange tint on the container needed (the illustration carries its
   own palette). Cards render both dark and light variants and the
   theme CSS shows whichever matches. */
.home-action-icon--illustration {
    background: transparent;
}
.home-action-icon--illustration img {
    width: 100%;
    height: 100%;
    display: block;
}
.home-action-icon--illustration .icon-light { display: none; }
.theme-light .home-action-icon--illustration .icon-dark { display: none; }
.theme-light .home-action-icon--illustration .icon-light { display: block; }

.home-action-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0;
    letter-spacing: -.2px;
    text-align: center;
}

.home-action-card p {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.home-action-cta {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius);
    background: var(--btn-bg);
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    margin-top: 12px;
    transition: background .15s, gap .15s;
}

.home-action-cta:hover {
    background: var(--btn-bg-hover);
    gap: 10px;
}

.home-action-cta .material-symbols-outlined {
    font-size: 18px;
    color: #fff;
}

@media (max-width: 880px) {
    .home-actions-grid { grid-template-columns: 1fr; gap: 14px; }
    .home-actions-section { padding: 56px 0; }
}

@media (max-width: 600px) {
    .home-actions-section { padding: 32px 0; }
    .home-action-card {
        padding: 20px;
        gap: 8px;
    }
    .home-action-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 4px;
    }
    .home-action-icon .material-symbols-outlined {
        font-size: 24px;
    }
    .home-action-card h3 {
        font-size: 17px;
    }
    .home-action-card p {
        font-size: 14px;
        line-height: 1.45;
    }
    .home-action-cta {
        padding: 10px 18px;
        font-size: 14px;
        margin-top: 6px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   "Built on data you can verify" front-page section (#3434 / epic #3433)
   Mirrors the home-actions card pattern (icon + heading + sentence) but
   informational rather than action-oriented — no CTAs.
   ───────────────────────────────────────────────────────────────────────── */

.data-section {
    padding: 80px 0;
}

.data-heading {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 8px;
    letter-spacing: -.5px;
}

.data-lead {
    text-align: center;
    font-size: 16px;
    color: var(--text-2);
    line-height: 1.5;
    max-width: 720px;
    margin: 0 auto 36px;
}

.data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.data-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-1);
}

/* Full-bleed photo header: negative margins cancel the card's 28px padding so
   the image spans edge-to-edge at the top, with the card's top corners. */
.data-card-photo {
    margin: -28px -28px 6px;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.data-card-photo img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.data-card:hover .data-card-photo img {
    transform: scale(1.04);
}

.data-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0;
    letter-spacing: -.2px;
    text-align: center;
}

.data-card p {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

@media (max-width: 880px) {
    .data-grid { grid-template-columns: 1fr; gap: 14px; }
    .data-section { padding: 56px 0; }
}

@media (max-width: 600px) {
    .data-section { padding: 32px 0; }
    .data-card { padding: 20px; gap: 8px; }
    .data-card-photo { margin: -20px -20px 6px; }
    .data-card-photo img { height: 170px; }
    .data-card h3 { font-size: 17px; }
    .data-card p { font-size: 14px; line-height: 1.45; }
}

/* ─────────────────────────────────────────────────────────────────────────
   /service country picker + ranking results (migration 043)
   ───────────────────────────────────────────────────────────────────────── */

.provider-active-countries {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.4;
}

.provider-active-countries .material-symbols-outlined {
    font-size: 16px;
    color: var(--text-3);
    flex-shrink: 0;
}

/* ============================================================
   Legal pages (/privacy, /terms, /data-security)
   Simple text-only pages — austere, reading-optimised. Hero
   pattern matches /about / /academy (text-only, no banner photo).
   ============================================================ */
.legal-hero {
    padding: 140px 0 40px;
    text-align: center;
}

.legal-hero h1 {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -.5px;
    margin-bottom: 12px;
}

.legal-hero-subtitle {
    font-size: 18px;
    color: var(--text-2);
    max-width: 720px;
    margin: 0 auto;
}

.legal-section {
    padding: 24px 0 80px;
}

.legal-content {
    max-width: 720px;
    margin: 0 auto;
    color: var(--text-1);
    line-height: 1.75;
    font-size: 16px;
}

.legal-content h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -.2px;
    margin-top: 48px;
    margin-bottom: 12px;
}

.legal-content h2:first-of-type {
    margin-top: 0;
}

.legal-content h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-1);
    margin-top: 28px;
    margin-bottom: 8px;
}

.legal-content p {
    margin-bottom: 16px;
}

.legal-content ul,
.legal-content ol {
    margin: 0 0 16px 24px;
    padding: 0;
}

.legal-content li {
    margin-bottom: 6px;
}

.legal-content a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-content a:hover {
    color: var(--primary-hover, var(--primary));
}

/* Contact / address block inline in a legal page — preserves line
   breaks (the <address> default), slight left rule for visual lift. */
.legal-address {
    margin: 0 0 24px;
    padding: 12px 16px;
    border-left: 3px solid var(--border);
    font-style: normal;
    line-height: 1.6;
}

/* Inline vendor / partner mark on a legal page — e.g. the Hetzner
   logo on /data-security identifying the hosting provider named in
   the body. Sized so the mark reads as supporting context, not as
   the page's primary visual element. */
.legal-vendor-mark {
    margin: 4px 0 24px;
}

.legal-vendor-mark img {
    height: 40px;
    width: auto;
    display: block;
}

/* Third-party certification badge — e.g. the SOCOTEC ISO/IEC 27001
   mark on /data-security. Constrained width so it doesn't dominate
   the reading column. Subtle background panel + rounded corners so
   it sits as a contained graphic next to flowing text. */
.legal-cert-badge {
    margin: 4px 0 24px;
    max-width: 480px;
}

.legal-cert-badge img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

/* Trailing date / version line on a legal page — quieter than body copy
   so it reads as a footer note rather than a content paragraph. */
.legal-footnote {
    margin-top: 40px;
    font-size: 14px;
    color: var(--text-3);
    font-style: italic;
}