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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Logo switching for themes */
.logo-light { display: none !important; }
.theme-light .logo-light { display: inline !important; }
.theme-light .logo-dark { display: none !important; }
.logo-light.brand-logo { height: 44px; }

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

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

@media (min-width: 769px) {
    .nav-drawer,
    .nav-scrim {
        display: none;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.features {
    padding: 0 0 160px;
}

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

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

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

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

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

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

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

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

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

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

.presence-header {
    max-width: 540px;
    margin-bottom: 32px;
}

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

/* The count line sits inside .presence-header's 540px cap (sized for the
   heading/subtitle), so it would wrap. On wide screens there's room to let it
   run on one line; below 1000px it wraps normally to avoid overflow. */
@media (min-width: 1000px) {
    .presence-provider-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;
}

#presence-map {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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-bottom: 12px;
}

.academy-header p {
    font-size: 18px;
    color: var(--text-2);
    margin: 0;
}

.academy-header .academy-tagline {
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 6px;
}

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

.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: center;
    gap: 4px;
    font-size: 14px;
    color: var(--text-2);
    flex-wrap: wrap;
}

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mission-block blockquote {
    position: relative;
    background: none;
    border: none;
    padding: 32px 48px;
    margin: 28px 0;
    font-size: 18px;
    font-style: italic;
    line-height: 1.7;
    text-align: center;
    color: var(--text-2);
}

.mission-block blockquote::before {
    content: '\201C';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 64px;
    line-height: 1;
    color: var(--primary);
    font-style: normal;
    font-family: Georgia, serif;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Colored top accent bar */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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 .logo-light.brand-logo { height: 22px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.approvals-section-bar 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 768px) {
    .nav-links, .theme-toggle { display: none; }
    .nav-burger { display: inline-flex; }

    .hero { margin-bottom: 10vh; }
    .stats-grid { gap: 24px; flex-wrap: wrap; }

    .feature-row { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .story-layout { grid-template-columns: 1fr; gap: 32px; }
    .story-photos { order: 2; }
    .story-content { order: 1; }
    .trust-grid { grid-template-columns: 1fr; }
    .approvals-teaser { padding: 80px 0 0; }
    .approvals-teaser-top { flex-direction: column; gap: 24px; }

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

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

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

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

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

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

    .advisory-badge { width: 140px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* M3 center-aligned top app bar: brand wordmark centred, Menu
       action trailing right. Empty left reads as deliberate symmetry
       with the right action, not as wasted space. */
    .nav-container {
        height: 64px;
        gap: 12px;
        position: relative;
        padding: 0 16px;
    }
    .nav-brand {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, calc(-50% + 4px));
    }
    .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; }

    /* 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.
       ID specificity (#presence-map) needed to win over the JS-injected
       style block. */
    #presence-map .presence-marker-dot {
        width: 5px;
        height: 5px;
        box-shadow: 0 0 4px rgba(243, 146, 0, .55);
    }
    #presence-map .presence-marker-pulse {
        width: 5px;
        height: 5px;
        background: rgba(243, 146, 0, .25);
    }

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

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

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

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

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

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

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

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

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

.service-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    /* Use the bottom of the photo — yellow boat hull, less busy than
       the rope-knot pattern in the middle. */
    background-position: 50% 100%;
    /* Slight blur softens any remaining texture so the foreground
       text reads cleanly against it. */
    filter: blur(2px);
    /* 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, .45) 0%,
        rgba(0, 0, 0, .25) 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-attribution {
    margin: 8px 0 0;
    font-size: 12px;
    opacity: 0.55;
    text-align: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

/* Calendar-style start-date badge in the top-left corner of the cover image */
.cover-date-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #ffffff;
    color: #1a1a1a;
    border-radius: 10px;
    padding: 8px 12px 6px;
    text-align: center;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(0,0,0,.25);
    z-index: 1;
}

.cover-date-day {
    display: block;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.5px;
}

.cover-date-month {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    margin-top: 3px;
    color: #555;
}

.cover-date-badge--detail {
    top: 22px;
    left: 22px;
    padding: 12px 18px 10px;
}

.cover-date-badge--detail .cover-date-day { font-size: 34px; }
.cover-date-badge--detail .cover-date-month { font-size: 13px; }

.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 */
.academy-cta {
    margin-top: 40px;
    text-align: center;
}

/* /academy page hero */
.academy-hero {
    padding: 140px 0 24px;
    text-align: center;
}

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

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

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

/* /academy page course sections */
.academy-courses-section {
    padding: 56px 0;
}

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

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

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

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

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

.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 iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* M3-inspired hero on phones: no photo at all. The hero shares the
       page surface (no elevation seam — elevation in M3 signals contained
       content like cards, not headers). A subtle primary-tinted radial
       glow gives the headline some warmth without becoming a "card".
       Height fits content + breathing room — no large void under the
       headline before the next section starts. */
    .hero-banner {
        height: auto;
        min-height: 0;
        padding: 40px 0 16px;
        margin-top: 64px;
        background:
            radial-gradient(ellipse 70% 55% at 50% 50%, rgba(243, 146, 0, .08) 0%, transparent 70%),
            var(--surface-0);
    }
    .hero-stats {
        margin-top: 16px;
    }
    .hero-stats-heading {
        margin-bottom: 20px;
    }
    .hero-banner-track,
    .hero-overlay {
        display: none;
    }
    .hero-title {
        color: var(--text-1);
        text-shadow: none;
    }
    .hero-subtitle {
        color: var(--text-2);
        text-shadow: none;
    }
    .hero {
        padding: 0 16px 48px;
    }

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

.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;
    z-index: -2;
}

.operate-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, .55) 0%,
        rgba(0, 0, 0, .75) 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, .5) 0%,
        rgba(0, 0, 0, .55) 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;
    max-width: 880px;
}

.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;
    max-width: 880px;
}

.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-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.operate-bridge-photos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.operate-bridge-photos img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.operate-bridge-text .operate-needs {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 880px) {
    .operate-bridge-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .operate-bridge-photos {
        order: -1;
        flex-direction: row;
    }

    .operate-bridge-photos img {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 600px) {
    .operate-bridge-photos {
        flex-direction: column;
    }
}

.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: row;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-0);
    color: var(--text-1);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
}

.operate-needs-check {
    flex-shrink: 0;
    color: var(--primary);
    font-size: 22px;
    line-height: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Talk to us CTA */
.operate-section--cta {
    padding-bottom: 96px;
}

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

.operate-cta-header h2 {
    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: 80px 0;
}

.home-actions-section .home-actions-heading {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 8px;
    letter-spacing: -.3px;
}

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

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

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

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

.home-action-icon .material-symbols-outlined {
    color: var(--primary);
    font-size: 30px;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.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: 28px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 8px;
    letter-spacing: -.3px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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