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

/* =========================
   A11Y UTILITIES
   ========================= */

/* Removes an element visually while leaving it in the accessibility tree
   and the tab order. Used for headings that exist to fix a document
   outline (Contact.razor's section headings) — NOT for hiding content
   from sighted users. Deliberately avoids display:none / visibility:hidden,
   both of which also remove the element from assistive technology. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* First focusable element on every page (MainLayout). Off-screen until
   focused, then pinned over the fixed 88px .nav-bar — so a keyboard or
   screen-reader user reaches <main> without tabbing the 6 nav links, the
   theme toggle and the login link on all 13 pages. z-index sits above
   .nav-bar (100) and below .nav-drawer (200). */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 150;
    padding: 12px 20px;
    background: var(--primary);
    color: #000;
    font-weight: 600;
    border-radius: 0 0 6px 6px;
    transition: top .15s ease-in;
}

.skip-link:focus {
    top: 0;
}

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


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


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


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


.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;
}


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


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

/* LA / LSA discipline badges on in-person course cards (#3697). Neutral pill,
   matching the provider-card LSA/LA badge language — the label differentiates,
   not colour, so contrast holds in both themes. */
.course-card-disciplines {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 6px;
}

.course-discipline {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
}

/* /academy LA/LSA filter (#3697; restyled as a joined segmented control).
   The three loose outline pills read as unrelated buttons — one shared track
   groups them into a single obvious choice. Active chip still inverts
   (theme-aware) for a high-contrast selected state without leaning on a
   brand colour. */
.academy-course-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    margin: 0 0 24px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.course-filter-chip {
    padding: 7px 20px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-3);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s, color .15s, box-shadow .15s;
}

.course-filter-chip:hover:not(.is-active) {
    background: var(--surface-2);
    color: var(--text-1);
}

.course-filter-chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.course-filter-chip.is-active {
    background: var(--text-1);
    color: var(--surface-0);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* Hidden by the LA/LSA filter. !important so it beats .course-card's own
   explicit `display` (the reason the `hidden` attribute alone didn't work). */
.course-card.is-filtered-out {
    display: none !important;
}

.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;
}

/* =========================
   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-item:hover {
    border-color: var(--primary);
    background: var(--surface-2);
}


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


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

/* The SDG wheel's outer life-ring is white and vanished on the light page
   background — only the colour wheel stayed visible (#3635). Dark theme keeps
   the white rope; light theme swaps to a grey-rope variant so the ring stays
   legible. CRALOG's own rope is the only difference between the two assets —
   the UN colour wheel is identical in both. */
.mission-sdg .sdg-wheel-img--light { display: none; }
.theme-light .mission-sdg .sdg-wheel-img--dark { display: none; }
.theme-light .mission-sdg .sdg-wheel-img--light { display: inline; }


@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);
}


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


.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), the photo becomes a circular portrait, and the whole card is a
   centred vertical stack at EVERY width — a freestanding "primary contact",
   not a directory row. Used on /become-an-asp's "Ready to become a CRALOG
   ASP?" card.

   Centred at all widths on purpose (#3636): the earlier width-dependent
   side-by-side variant relied on equal-specificity source order against
   .team-card plus the max-width:600 media query matching. iOS Safari's
   first-paint (briefly laying out at a wide viewport before width=device-width
   applies) made it flash a left-aligned layout and flip intermittently
   between centred and left. The .team-card.team-card--featured double-class
   selector outranks every single-class .team-card rule, so nothing — no
   media-query timing, no source order — can knock the stack off centre. */
.team-card.team-card--featured,
.team-card.team-card--featured:hover {
    background: transparent;
    border-color: transparent;
    padding: 0;
    grid-template-columns: 1fr;
    grid-template-areas:
        "photo"
        "header"
        "body";
    justify-items: center;
    text-align: center;
    column-gap: 0;
    row-gap: 14px;
}

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

.team-card.team-card--featured .team-body {
    margin-top: 0;
}

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

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

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

    .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;
    }

    .narrative-text { font-size: 15px; }


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

    .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;
    }
}

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


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


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

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

    /* .operate-needs was here and had never applied: its base
       `grid-template-columns: repeat(4, 1fr)` is declared ~1,860 lines LATER, and
       a media query carries no specificity, so the unconditional later rule won
       at every width. The live responsive steps for that list now sit directly
       beneath the base rule. #3941 */

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

/* Opt-in contact person's name (#3694) — same row layout as the contact
   links, but a non-link label so it reads as the person, not an action. */
.provider-contact-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-1);
}

.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;
}

/* Provider card, narrow viewports (<= 768px).
   Must sit AFTER the unconditioned .provider-* rules above. A media query adds
   no specificity, so while these lived in the shared 768px block ~600 lines
   earlier, the later base rules won on source order and 5 of the 11
   declarations were silently defeated — a half-applied mobile layout.
   The visible one: .provider-cralog-link's `white-space: normal` lost to
   `nowrap` (site.css base), so ProviderCard's long "View Authorisations and
   Certified Technicians" label could not wrap and was clipped by
   .provider-card's `overflow: hidden` on every phone width.
   Do not move this block above the base rules again. */
@media (max-width: 768px) {
    .provider-body {
        flex-direction: column;
        align-items: flex-start;
    }

    /* flex-direction is deliberately absent: the base rule already sets
       column, so repeating it here would be noise. */
    .provider-details {
        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;
    }
}


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

/* Attendance note under the physical-courses heading (#3829) — pulled up
   towards the header it belongs to, clear of the filter chips / grid below.
   Italic per Ida: reads as an aside to the heading, not a second paragraph. */
.academy-courses-note {
    color: var(--text-2);
    font-size: 16px;
    font-style: italic;
    line-height: 1.6;
    margin: -12px 0 28px;
}

.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;
}

/* The Seminars (in-person) section shares the same continuation pattern
   as the Online section — reduced top padding keeps it reading as part of
   the Academy flow rather than a hard break. Webinars moved to the Online
   section; this holds in-person seminars only (#3696). */
.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 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;
}


@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;
}

/* MARTEC credit line under the rail heading — the clips are MARTEC's
   material and visible attribution is the condition for showing them. */
.course-snippets-attribution {
    font-size: 13px;
    color: var(--text-3);
    margin: -10px 0 16px;
}

.course-snippets-attribution a {
    color: inherit;
    text-decoration: underline;
}

.course-snippets-attribution a:hover {
    color: var(--text-1);
}

.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;
}

/* Responsive steps for .operate-needs. Both rules must stay BELOW the base
   `repeat(4, 1fr)` declaration above — a media query adds no specificity, so a
   media rule placed earlier in the file loses to a later unconditional one and
   simply never applies. That is not hypothetical: an identical
   `.operate-needs { grid-template-columns: 1fr }` sat in the @600 block ~1,860
   lines up and never had any effect, which left the single-column step to the
   @480 rule and gave 481-600px two columns — a band that holds no common phone
   width but does hold small tablets and split-screen windows. #3941

   ORDER IS THE MECHANISM: both conditions are max-width only and they overlap,
   so at <= 600px both match and the single-column rule wins by coming last.
   Keep it last.

   Do NOT bound the two-column rule with `min-width: 601px`. It reads as a
   harmless restatement of intent, but `(min-width: 601px)` and
   `(max-width: 600px)` do not meet: a viewport 600 < w < 601 matches NEITHER
   and falls through to the base `repeat(4, 1fr)`, which cannot shrink past its
   104px icons and overflows the container by ~100px — worse than the bug this
   list started with. Fractional viewport widths are ordinary, not exotic:
   browser zoom and fractional display scaling both produce them, measured in
   Chrome at 600.36, 600.49 and 600.60. That bound shipped briefly in 3c427899c;
   OperateNeedsLayoutTests.TheResponsiveStepsCoverTheirRangeWithNoGap now fails
   if it or anything like it comes back. #3941 */
@media (max-width: 880px) {
    .operate-needs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .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,
.operate-intro-video {
    margin: 18px 0 22px;
}

/* Centre the section heading above the two-column lead-in. */
#what-is-an-asp h2 {
    text-align: center;
}

/* Two-column lead-in: explanatory text left, intro film right. */
.operate-intro-layout {
    display: flex;
    gap: 28px;
    /* Centre the (shorter) video against the taller text column. */
    align-items: center;
}

.operate-intro-text {
    flex: 1 1 0;
    min-width: 0;
}

.operate-intro-video {
    flex: 0 0 45%;
    max-width: 45%;
}

/* Stack on narrow screens, video first so it stays the lead-in. The
   align-items override lets the stacked video fill the full width
   (the desktop rule pins it to flex-start). */
@media (max-width: 700px) {
    .operate-intro-layout {
        flex-direction: column;
        align-items: stretch;
    }

    .operate-intro-video {
        flex-basis: auto;
        max-width: 100%;
        order: -1;
    }
}

.operate-qa-video video,
.operate-intro-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,
.operate-intro-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-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;
}

/* Applicability table on /terms (GTC-01, #4160) — two short text
   columns, sized to sit inside the 720px reading column without
   horizontal scroll. */
.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: 15px;
}

.legal-content th,
.legal-content td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}

.legal-content th {
    font-weight: 700;
}

.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;
}



/* ========================================================
   LEGO QR LANDING  (/lego, #4089)
   ======================================================== */
.lego-hero {
    padding: 140px 0 24px;
    text-align: center;
}

/* The QR moment — kept above the campaign hero (#4152, Ida's call). */
.lego-scan-ack {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0 auto 16px;
}

.lego-hero-subtitle {
    font-size: 18px;
    color: var(--text-3);
    max-width: 640px;
    margin: 0 auto;
}

.lego-content {
    padding: 24px 0 96px;
    text-align: center;
}

/* Decorative CSS-only brick — a single stud row seen from above. Purely
   ornamental (aria-hidden in markup); token colours only so it reads
   correctly in both themes. Replaced by a build photo when marketing
   supplies one. */
.lego-brick {
    display: inline-flex;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 auto 36px;
    background: var(--primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.lego-brick span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-hover);
    border: 1px solid var(--border);
}

.lego-note {
    color: var(--text-3);
    max-width: 560px;
    margin: 0 auto 24px;
}

.lego-tagline {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-1);
    max-width: 560px;
    margin: 40px auto;
}

/* Closing paragraph — deliberately no button (#4152, Ida: we are on the
   homepage already), the copy itself is the invitation. */
.lego-cta-note {
    color: var(--text-3);
    max-width: 560px;
    margin: 0 auto;
}