/* ==========================================================================
   Wachira Speaks - site stylesheet
   Hand written, no build step required. Palette and type carried over from
   the original React/Tailwind build. Brand palette: sap #001524, sap2 #06265B.
   ========================================================================== */

:root {
    --sap: #001524;
    --sap-800: #04223a;
    --sap-700: #0a2f4d;
    --sap2: #06265b;
    --sap2-600: #0e3a81;
    --sap2-400: #2a59b2;

    --gold: #c88a36;
    --gold-soft: #e6d3a8;

    --ink: #0d1b26;
    --body: #374d5c;
    --muted: #6b7f8d;
    --line: #dfe6ec;
    --line-soft: #eef2f6;
    --bg: #ffffff;
    --bg-soft: #f6f8fb;
    --bg-dark: var(--sap);

    --ok: #17795e;
    --ok-bg: #e6f5f0;
    --warn: #9a6412;
    --warn-bg: #fdf3e2;
    --err: #b3261e;
    --err-bg: #fdecea;

    --radius: 14px;
    --radius-sm: 9px;
    --shadow-sm: 0 1px 2px rgba(0, 21, 36, .06), 0 2px 8px rgba(0, 21, 36, .05);
    --shadow: 0 8px 30px rgba(0, 21, 36, .10);
    --shadow-lg: 0 24px 60px rgba(0, 21, 36, .16);

    --serif: "Poppins", sans-serif;
    --sans: "Poppins", sans-serif;
    --ui: "Poppins", sans-serif;
    --quote: "Poppins", sans-serif;

    --wrap: 1180px;
    --gutter: 22px;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

/* scroll-padding keeps #anchors clear of the 74px sticky header. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    color: var(--body);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    /* Long emails, URLs and pasted references wrap instead of widening the page. */
    overflow-wrap: break-word;
}
/* Set by site.js while the phone menu is open. */
body.nav-open { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--sap2); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--sap2-600); }

h1, h2, h3, h4, h5 {
    font-family: var(--serif);
    color: var(--ink);
    line-height: 1.18;
    margin: 0 0 .6em;
    font-weight: 700;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }

blockquote {
    font-family: var(--quote);
    font-size: 1.35rem;
    line-height: 1.55;
    color: var(--sap);
    border-left: 3px solid var(--gold);
    margin: 1.8rem 0;
    padding: .2rem 0 .2rem 1.2rem;
}

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--bg-soft); padding: .12em .4em; border-radius: 5px; }

::selection { background: var(--sap2); color: #fff; }

/* ------------------------------------------------------------- layout --- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 780px; }

.section { padding: clamp(48px, 7vw, 92px) 0; }
.section-soft { background: var(--bg-soft); }
.section-dark { background: var(--sap); color: #c6d4de; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }

/* min(…, 100%) lets a track shrink below its minimum on a narrow phone, so a
   300px card never forces a 320px screen to scroll sideways. */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.grid > * { min-width: 0; }
@media (max-width: 560px) { .grid { gap: 18px; } }

/* Button rows wrap onto a second line rather than squashing their labels.
   A search form is the exception: its input should shrink beside the button. */
.flex { display: flex; gap: 14px; flex-wrap: wrap; }
form.flex { flex-wrap: nowrap; }
form.flex input { flex: 1 1 auto; min-width: 0; }
form.flex .btn { flex: none; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .6rem; } .mt-2 { margin-top: 1.2rem; } .mt-3 { margin-top: 2rem; }
.mb-1 { margin-bottom: .6rem; } .mb-2 { margin-bottom: 1.2rem; } .mb-3 { margin-bottom: 2rem; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }

/* ----------------------------------------------------- section headings -- */
.eyebrow {
    font-family: var(--ui);
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .72rem;
    font-weight: 600;
    color: var(--sap2);
    margin: 0 0 .7rem;
    display: block;
}
.section-dark .eyebrow { color: var(--gold); }

.section-head { max-width: 720px; margin-bottom: 2.4rem; }
.section-head.center { margin-inline: auto; }
.section-head p { color: var(--muted); margin-bottom: 0; }

.rule { width: 54px; height: 3px; background: var(--gold); border-radius: 2px; margin: 1rem 0 1.3rem; }
.center .rule { margin-inline: auto; }

/* ------------------------------------------------------------ buttons --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--ui); font-weight: 600; font-size: .93rem; letter-spacing: .02em;
    padding: .78rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
    cursor: pointer; transition: all .18s ease; text-align: center; line-height: 1.2;
}
.btn-primary { background: var(--sap2); color: #fff; }
.btn-primary:hover { background: var(--sap2-600); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-dark { background: var(--sap); color: #fff; }
.btn-dark:hover { background: var(--sap-700); color: #fff; }
.btn-gold { background: var(--gold); color: #1b1405; }
.btn-gold:hover { background: #d9b877; color: #1b1405; }
.btn-outline { border-color: var(--sap2); color: var(--sap2); background: transparent; }
.btn-outline:hover { background: var(--sap2); color: #fff; }
.btn-ghost-light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-ghost-light:hover { background: #fff; color: var(--sap); }
.btn-light { background: #eef3fb; color: var(--sap2); border-color: #dbe5f5; }
.btn-light:hover { background: var(--sap2); color: #fff; border-color: var(--sap2); }
.btn-sm { padding: .5rem 1rem; font-size: .82rem; }
.btn-lg { padding: .95rem 2rem; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }

/* ------------------------------------------------------------- badges --- */
.badge {
    display: inline-block; font-family: var(--ui); font-size: .7rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px;
    background: var(--line-soft); color: var(--body);
}
.badge-free { background: var(--ok-bg); color: var(--ok); }
.badge-paid { background: #e8effa; color: var(--sap2); }
.badge-live { background: var(--err-bg); color: var(--err); }
.badge-past { background: var(--line-soft); color: var(--muted); }
.badge-gold { background: #f6edd8; color: #7a5a12; }

/* ------------------------------------------------------------- header --- */
.site-header {
    position: sticky; top: 0; z-index: 60;
    background: rgba(0, 21, 36, .92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 74px; }
.brand { display: flex; align-items: center; gap: .65rem; color: #fff; min-width: 0; }
/* Grows only where the 74px bar has room: 52px leaves 11px clearance top and
   bottom, and the floor holds at today's 40px below ~910px, where the brand
   text and the toggle already use most of the row. */
.brand img { height: clamp(40px, 4.4vw, 52px); width: auto; }
.brand img { flex: none; }
.brand-text { font-family: var(--serif); font-weight: 700; font-size: 1.12rem; color: #fff; line-height: 1.1; white-space: nowrap; }
.brand-text small { display: block; font-family: var(--ui); font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); font-weight: 500; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
    font-family: var(--ui); font-size: .82rem; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; color: #b9c8d4; padding: .55rem .8rem; border-radius: 8px;
    white-space: nowrap;
}

/* Small laptops and landscape tablets: the full nav only just fits beside the
   brand, so tighten the tracking and padding instead of letting the brand
   name break over three lines. */
@media (min-width: 941px) and (max-width: 1180px) {
    .nav { gap: 0; }
    .nav a { letter-spacing: .06em; padding: .55rem .6rem; font-size: .78rem; }
    .nav .btn { margin-left: .4rem; }
    .brand-text small { letter-spacing: .16em; }
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav a.active { color: #fff; }
.nav a.active::after { content: ""; display: block; height: 2px; background: var(--gold); border-radius: 2px; margin-top: 4px; }
.nav .btn { margin-left: .6rem; }
/* .nav a is more specific than .btn-gold and was turning the label pale grey. */
.nav .btn-gold, .nav .btn-gold:hover { color: #1b1405; }
.nav .btn-gold:hover { background: #d9b877; }

.nav-toggle {
    display: none; background: transparent; border: 0; color: #fff; cursor: pointer;
    padding: .55rem; margin-right: -.55rem; border-radius: 8px; flex: none;
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Sub-menu expander, only shown in the phone menu. */
.drop-toggle { display: none; }

/* dropdown */
.has-drop { position: relative; }

/* The trigger must fill its wrapper. As an inline element its box is only the
   text line, so the hover target stopped ~10px short of the panel and the
   active underline sat out of line with the plain nav links. */
.has-drop > a { display: block; }

.drop {
    position: absolute; top: calc(100% + 10px); left: 0; min-width: 210px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow); padding: .4rem; display: none; z-index: 70;
}

/* Invisible bridge across the 10px gap above the panel. Without it the pointer
   leaves .has-drop on the way down and the menu closes before you reach it. */
.drop::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }

/* Hover/focus opening is desktop only - in the phone menu a tap on the
   expander would leave focus inside and the panel could never close. */
@media (min-width: 941px) {
    .has-drop:hover .drop, .has-drop:focus-within .drop { display: block; }
}
.drop a {
    display: block; color: var(--body); text-transform: none; letter-spacing: 0;
    font-size: .9rem; padding: .5rem .7rem; border-radius: 6px; font-family: var(--sans);
}
.drop a:hover { background: var(--bg-soft); color: var(--sap2); }

@media (max-width: 940px) {
    .nav-toggle { display: inline-flex; }
    .nav {
        position: fixed; inset: 74px 0 auto 0; flex-direction: column; align-items: stretch;
        background: var(--sap); padding: .8rem var(--gutter) 1.6rem; gap: 2px;
        border-bottom: 1px solid rgba(255,255,255,.1); display: none;
        max-height: calc(100vh - 74px); max-height: calc(100dvh - 74px);
        overflow-y: auto; overscroll-behavior: contain;
        box-shadow: 0 24px 40px rgba(0, 0, 0, .35);
    }
    .nav.open { display: flex; }
    .nav > a:not(.btn), .has-drop > a { padding: .85rem .4rem; font-size: .9rem; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 0; }
    .nav a.active { color: var(--gold); }
    .nav a.active::after { display: none; }

    /* Trigger link on the left, chevron button on the right. */
    .has-drop { display: flex; flex-wrap: wrap; align-items: stretch; }
    .has-drop > a { flex: 1 1 auto; }
    .drop-toggle {
        display: grid; place-items: center; flex: none; width: 48px;
        background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.06);
        color: #b9c8d4; cursor: pointer;
    }
    .drop-toggle svg { width: 18px; height: 18px; transition: transform .2s ease; }
    .has-drop.open .drop-toggle svg { transform: rotate(180deg); }

    .drop { position: static; flex-basis: 100%; box-shadow: none; border: 0; background: transparent; padding: .3rem 0 .5rem 1rem; }
    .has-drop.open .drop { display: block; }
    .drop::before { display: none; }   /* no hover here - the bridge would sit over the links */
    .drop a { color: #94a8b8; padding: .6rem .7rem; }
    .drop a:hover { background: rgba(255,255,255,.06); color: #fff; }
    .nav .btn { margin: 1.1rem 0 0; padding-block: .85rem; font-size: .9rem; }
}

/* Very small phones: the tagline and the menu button compete for the row. */
@media (max-width: 360px) {
    .brand-text { font-size: 1rem; }
    .brand-text small { letter-spacing: .14em; }
}

/* --------------------------------------------------------------- hero --- */
.hero {
    position: relative; color: #fff; overflow: hidden;
    background: var(--sap);
    min-height: min(88vh, 760px); display: flex; align-items: center;
}
.hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--hero-img, none);
    background-size: cover; background-position: center;
    opacity: .3; transform: scale(1.03);
    /* for hero opacity */
}
/* Heavy over the copy on the left, then clearing to the right so the photo
   still reads. The stops used to all sit at 0%, which flattened the gradient
   into a single 50% wash over the whole image. */
.hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, rgba(0,21,36,.82) 0%, rgba(0,21,36,.5) 48%, rgba(6,38,91,.22) 100%);
}
/* Narrow screens put the copy over the full width, so the clear end has to go. */
@media (max-width: 760px) {
    .hero::before { opacity: .45; }
    .hero::after {
        background: linear-gradient(160deg, rgba(0,21,36,.8) 0%, rgba(0,21,36,.62) 55%, rgba(6,38,91,.55) 100%);
    }
}
.hero .wrap { position: relative; z-index: 2; padding-block: 90px; }
.hero-inner { max-width: 760px; }
.hero h1 { color: #fff; font-size: clamp(2.3rem, 6vw, 4.1rem); margin-bottom: .35em; }
.hero .lead { font-size: clamp(1rem, 1.7vw, 1.2rem); color: #cddbe6; max-width: 610px; margin-bottom: 2rem; }
.hero .eyebrow { color: var(--gold); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.typed { border-right: 2px solid var(--gold); padding-right: 4px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { border-color: transparent; } }

.hero-stats { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 3rem; }
.hero-stats div span { display: block; font-family: var(--serif); font-size: 2rem; color: #fff; line-height: 1; }
.hero-stats div small { font-family: var(--ui); text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; color: var(--gold-soft); }

@media (max-width: 560px) {
    .hero { min-height: 0; }
    .hero .wrap { padding-block: 56px 48px; }
    /* Room for two lines, so the copy below does not jump while it types. */
    .hero h1 { min-height: 2.4em; }
    .hero-actions .btn { flex: 1 1 100%; }
    /* Three stats in one row, each under a gold hairline. */
    .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 2.4rem; }
    .hero-stats div { border-top: 2px solid rgba(200, 138, 54, .5); padding-top: .75rem; min-width: 0; }
    .hero-stats div span { font-size: 1.5rem; }
    .hero-stats div small { font-size: .6rem; letter-spacing: .1em; }
}

/* page header (interior pages) */
.page-head {
    background: var(--sap); color: #fff; padding: clamp(56px, 8vw, 92px) 0 clamp(40px, 6vw, 66px);
    position: relative; overflow: hidden;
}
.page-head::before {
    content: ""; position: absolute; inset: 0; opacity: .3;  /* darksetting in page here */
    /* Scrim first so it sits over the photo, keeping the heading readable if a
       bright image is uploaded. Its dark stop is --sap itself and its far stop
       is fully transparent, so headers with no --head-img are unchanged. */
    background-image:
        linear-gradient(105deg, rgba(0,21,36,.6) 0%, rgba(0,21,36,.25) 55%, rgba(6,38,91,0) 100%),
        var(--head-img, none);
    background-size: cover; background-position: center;
}
@media (max-width: 760px) {
    .page-head::before { opacity: .42; }
}
.page-head .wrap { position: relative; z-index: 2; }
.page-head h1 { color: #fff; margin-bottom: .3em; }
.page-head p { color: #b7c8d5; max-width: 640px; margin-bottom: 0; }

.crumbs { font-family: var(--ui); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #8ea6b8; margin-bottom: 1rem; }
.crumbs a { color: #b7c8d5; }
.crumbs a:hover { color: #fff; }
.crumbs span { opacity: .5; margin: 0 .45rem; }

/* --------------------------------------------------------------- cards -- */
.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-media { position: relative; aspect-ratio: 16 / 10; background: var(--bg-soft); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 1.16rem; margin-bottom: .4rem; }
.card-body h3 a { color: var(--ink); }
.card-body h3 a:hover { color: var(--sap2); }
.card-body p { color: var(--muted); font-size: .92rem; margin-bottom: 1rem; }
/* A badge is a label, not a bar - the column flexbox would otherwise stretch it. */
.card-body .badge { align-self: flex-start; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-meta { font-family: var(--ui); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.card-flat { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; background: #fff; }
.card-flat .icon {
    width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    background: #e8effa; color: var(--sap2); margin-bottom: 1rem; font-size: 1.2rem;
}

/* role / service cards */
.role-card { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; color: #fff; }
.role-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.role-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,21,36,.95) 8%, rgba(0,21,36,.15) 70%); }
.role-card .role-body { position: relative; z-index: 2; padding: 1.4rem; }
.role-card h3 { color: #fff; margin-bottom: .35rem; font-size: 1.25rem; }
.role-card p { color: #c4d3de; font-size: .88rem; margin: 0; }
/* Six full-height cards stacked on a phone made a very long scroll. */
@media (max-width: 640px) { .role-card { min-height: 240px; } }

/* video cards */
.video-card .card-media { aspect-ratio: 16 / 9; }
.play-badge {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(0,21,36,.35); opacity: 0; transition: opacity .2s ease;
}
.card:hover .play-badge { opacity: 1; }
/* Touch screens have no hover, so show the play button outright. */
@media (hover: none) {
    .play-badge { opacity: 1; background: rgba(0,21,36,.18); }
    .play-badge span { width: 46px; height: 46px; font-size: .95rem; }
}
.play-badge span {
    width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.94);
    display: grid; place-items: center; color: var(--sap); font-size: 1.1rem; padding-left: 4px;
}
.duration {
    position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.78); color: #fff;
    font-family: var(--ui); font-size: .72rem; padding: .12rem .4rem; border-radius: 4px;
}

/* event cards */
.event-card .card-media { aspect-ratio: 16 / 9; }
.event-date {
    position: absolute; left: 12px; top: 12px; background: #fff; border-radius: 10px;
    padding: .45rem .7rem; text-align: center; box-shadow: var(--shadow-sm); min-width: 58px;
}
.event-date strong { display: block; font-family: var(--serif); font-size: 1.3rem; color: var(--sap); line-height: 1; }
.event-date span { font-family: var(--ui); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.event-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .85rem; color: var(--muted); margin-bottom: .9rem; }
.event-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.price-tag { font-family: var(--ui); font-weight: 600; color: var(--sap); }

/* testimonials */
.testimonial {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.7rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; height: 100%;
}
.testimonial .quote { font-family: var(--quote); font-size: 1.22rem; line-height: 1.5; color: var(--ink); margin: 0; }
.testimonial .who { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.testimonial .who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonial .who strong { display: block; font-size: .92rem; color: var(--ink); font-family: var(--ui); }
.testimonial .who span { font-size: .8rem; color: var(--muted); }
.stars { color: var(--gold); font-size: .95rem; letter-spacing: .1em; }

/* scroller */
.scroller { display: flex; gap: 22px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { flex: 0 0 min(360px, 84vw); scroll-snap-align: start; }

/* gallery */
/* ----------------------------------------------------------- gallery --- */
/* Uniform cards, three to a row, with the caption always on show. */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (min-width: 1300px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .gallery { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 430px)  { .gallery { grid-template-columns: 1fr; } }

.g-item {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.g-item:hover, .g-item:focus-visible {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 14px 34px rgba(6, 38, 91, .18);
}

/* Fixed frame, so cards stay the same size whatever the source ratio. */
.g-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sap); }
.g-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.g-item:hover .g-media img, .g-item:focus-visible .g-media img { transform: scale(1.06); }

/* Gold rule that draws across the foot of the photo on hover. */
.g-media::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform .35s ease;
}
.g-item:hover .g-media::after, .g-item:focus-visible .g-media::after { transform: scaleX(1); }

.g-zoom {
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .94); color: var(--sap2);
    opacity: 0; transform: scale(.85);
    transition: opacity .28s ease, transform .28s ease;
}
.g-item:hover .g-zoom, .g-item:focus-visible .g-zoom { opacity: 1; transform: none; }
@media (hover: none) { .g-zoom { opacity: 1; transform: none; } }

/* Caption block - always visible, never dependent on hover. */
.g-cap {
    padding: .85rem 1rem 1rem;
    border-top: 1px solid var(--line-soft);
    display: flex; flex-direction: column; gap: .25rem;
    flex: 1 1 auto;
}
.g-cap b {
    font-family: var(--ui); font-size: .92rem; font-weight: 600; line-height: 1.35;
    color: var(--sap);
}
.g-cap span {
    font-family: var(--ui); font-size: .76rem; letter-spacing: .04em;
    color: var(--sap2); display: flex; align-items: center; gap: .4rem;
}
.g-cap span::before {
    content: ""; width: 12px; height: 2px; border-radius: 2px;
    background: var(--gold); flex: none;
}
@media (prefers-reduced-motion: reduce) {
    .g-item, .g-media img, .g-media::after, .g-zoom { transition: none; }
    .g-item:hover { transform: none; }
    .g-item:hover .g-media img { transform: none; }
}

/* ---------------------------------------------------------- lightbox --- */
.lightbox {
    position: fixed; inset: 0; z-index: 200;
    display: none; place-items: center;
    background: rgba(0, 21, 36, .94);
    padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.open { display: grid; }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lightbox img {
    max-width: 100%; max-height: 78vh; border-radius: var(--radius);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.lightbox figcaption { margin-top: 1rem; color: #fff; font-family: var(--ui); }
.lightbox figcaption b { display: block; font-size: 1rem; font-weight: 600; }
.lightbox figcaption span { display: block; font-size: .82rem; color: var(--gold-soft); margin-top: .25rem; }
.lb-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.12); color: #fff; font-size: 1.5rem; line-height: 1;
    display: grid; place-items: center; transition: background .2s ease, color .2s ease;
}
.lb-btn:hover { background: var(--gold); color: var(--sap); }
.lb-prev { left: clamp(.5rem, 2vw, 2rem); }
.lb-next { right: clamp(.5rem, 2vw, 2rem); }
.lb-close { top: clamp(.8rem, 2vw, 1.6rem); right: clamp(.8rem, 2vw, 1.6rem); transform: none; }
.lb-count {
    position: absolute; bottom: clamp(.8rem, 2vw, 1.6rem); left: 50%; transform: translateX(-50%);
    font-family: var(--ui); font-size: .78rem; letter-spacing: .1em; color: var(--gold-soft);
}
@media (max-width: 560px) {
    .lb-btn { width: 40px; height: 40px; }
    .lightbox img { max-height: 66vh; }
}

/* prose (blog + pages) */
/* ------------------------------------------------------- article view --- */

/* Post header. The brand runs through the whole article in a fixed order:
   sap for headings, sap2 for anything interactive, gold for accents. */
.post-head {
    padding-block: clamp(2rem, 5vw, 3.4rem) 1.6rem;
    background: linear-gradient(180deg, #f3f7fb 0%, var(--bg) 100%);
    border-top: 3px solid var(--gold);
}
/* .crumbs is built for the dark page-head, so it has to be re-lit here. */
.post-head .crumbs { color: var(--muted); margin-bottom: 1.1rem; }
.post-head .crumbs a { color: var(--sap2); }
.post-head .crumbs a:hover { color: var(--gold); }
.post-head .badge { background: #f6edd8; color: #7a5a12; }
.post-head h1 {
    color: var(--sap);
    font-size: clamp(1.95rem, 4.2vw, 3rem);
    line-height: 1.15; letter-spacing: -.015em; margin-bottom: .5rem;
}
.post-head .post-standfirst {
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    line-height: 1.6; color: var(--muted); max-width: 62ch; margin: 0 0 1.4rem;
}
.post-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .8rem;
    font-family: var(--ui); font-size: .83rem; color: var(--muted);
    padding-top: 1.1rem; position: relative;
}
/* Hairline that fades sap2 into gold. */
.post-meta::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--sap2) 0%, var(--gold) 55%, transparent 100%);
    border-radius: 2px;
}
.post-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.post-meta strong { color: var(--sap2); font-weight: 600; }

/* One column shared by the header, the cover and the body, so the image and
   the text line up on the same edges. Two thirds of the viewport, capped so it
   does not sprawl on a very wide screen, and full width once space is tight. */
.post-measure {
    width: 100%;
    max-width: min(66.6vw, 1180px);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
@media (max-width: 1100px) {
    .post-measure { max-width: var(--wrap); }
}

/* Cover - a banner, not a wall, with a hard height cap. */
.post-cover-wrap {
    width: 100%; max-width: min(66.6vw, 1180px);
    margin-inline: auto; padding-inline: var(--gutter);
}
@media (max-width: 1100px) {
    .post-cover-wrap { max-width: var(--wrap); }
}
.post-cover {
    display: block; width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 520px;
    object-fit: cover; object-position: center;
    border-radius: var(--radius);
    background: var(--bg-soft);
    box-shadow: 0 10px 34px rgba(6, 38, 91, .16);
}
.post-cover-cap {
    font-size: .8rem; color: var(--muted); text-align: center;
    margin: .7rem auto 0; max-width: 70ch;
}
@media (max-width: 700px) {
    .post-cover { aspect-ratio: 16 / 10; max-height: 300px; border-radius: var(--radius-sm); }
}

/* Share row */
.post-share {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; margin-top: 2.6rem; padding-top: 1.4rem; position: relative;
}
.post-share::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--sap2) 0%, var(--gold) 55%, transparent 100%);
    border-radius: 2px;
}
.post-share .label-sm {
    font-family: var(--ui); font-size: .8rem; font-weight: 600;
    letter-spacing: .04em; color: var(--sap);
}
.post-share .flex { gap: .5rem; }

/* "Keep reading" - sap heading over a gold underline. */
.post-related h2 { color: var(--sap); margin-bottom: .6rem; }
.post-related .rule {
    width: 56px; height: 3px; border-radius: 2px; background: var(--gold);
    margin: 0 auto 2.2rem;
}

.prose { font-size: 1.08rem; line-height: 1.78; color: #33475a; }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.35rem; }
/* Opening paragraph carries a little more weight. */
.prose > p:first-of-type { font-size: 1.16rem; line-height: 1.68; color: var(--body); }
.prose h2 {
    color: var(--sap); font-size: 1.7rem; margin: 2.6rem 0 .8rem;
    scroll-margin-top: 90px; letter-spacing: -.01em;
}
/* Short gold rule marking the start of each section. */
.prose h2::before {
    content: ""; display: block; width: 40px; height: 3px; border-radius: 2px;
    background: var(--gold); margin-bottom: .8rem;
}
.prose h3 { color: var(--sap2); font-size: 1.3rem; margin: 2rem 0 .6rem; scroll-margin-top: 90px; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.35rem; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--gold); }
.prose img { border-radius: var(--radius); margin: 1.9rem 0; display: block; }
.prose figure { margin: 1.9rem 0; }
.prose figure img { margin: 0; }
.prose figcaption { font-size: .82rem; color: var(--muted); text-align: center; margin-top: .6rem; }
.prose a { color: var(--sap2-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--gold); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote {
    margin: 2rem 0; padding: 1.2rem 1.4rem 1.2rem 1.5rem;
    border-left: 4px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: linear-gradient(90deg, rgba(6, 38, 91, .05), rgba(6, 38, 91, 0));
    font-family: var(--quote); font-size: 1.18rem; line-height: 1.62;
    color: var(--sap); font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote cite { display: block; margin-top: .7rem; font-size: .85rem; font-style: normal; color: var(--sap2); }
.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em; background: var(--bg-soft); border: 1px solid var(--line-soft);
    border-radius: 5px; padding: .12em .38em;
}
.prose pre {
    background: var(--sap); color: #dbe7f1; border-radius: var(--radius);
    padding: 1.1rem 1.2rem; overflow-x: auto; margin: 1.7rem 0; font-size: .88rem; line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
/* Brand rule instead of a flat grey line. */
.prose hr {
    border: 0; height: 2px; margin: 2.6rem 0; border-radius: 2px;
    background: linear-gradient(90deg, var(--sap2), var(--gold) 55%, transparent);
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .94rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; }
.prose th { background: #eef3fb; color: var(--sap); }
/* A wide table should scroll rather than burst the measure. */
.prose .table-wrap { overflow-x: auto; margin: 1.6rem 0; }
/* Editor content rarely comes wrapped, so on a phone the table scrolls itself. */
@media (max-width: 700px) {
    .prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .prose { font-size: 1.02rem; }
    .prose > p:first-of-type { font-size: 1.08rem; }
    .prose h2 { font-size: 1.45rem; }
    .prose blockquote { padding: 1rem 1.1rem; font-size: 1.08rem; }
}
/* Videos and maps pasted into a post or page body. */
.prose iframe, .prose video, .prose embed { max-width: 100%; }
.prose iframe[src*="youtube"], .prose iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }

/* -------------------------------------------------------------- forms --- */
.field { margin-bottom: 1.1rem; }
.field label, .label {
    display: block; font-family: var(--ui); font-size: .82rem; font-weight: 600;
    letter-spacing: .04em; color: var(--ink); margin-bottom: .35rem;
}
.field .hint { font-size: .78rem; color: var(--muted); margin-top: .3rem; }

input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number],
input[type=password], input[type=date], input[type=datetime-local], input[type=search],
select, textarea {
    width: 100%; font-family: var(--sans); font-size: .95rem; color: var(--ink);
    background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    padding: .68rem .85rem; transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: 0; border-color: var(--sap2); box-shadow: 0 0 0 3px rgba(6,38,91,.12);
}
input::placeholder, textarea::placeholder { color: #9fb0bd; }
/* iOS Safari zooms the page into any field under 16px and leaves it zoomed. */
@media (max-width: 760px) {
    input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number],
    input[type=password], input[type=date], input[type=datetime-local], input[type=search],
    select, textarea { font-size: 16px; }
}
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7f8d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 18px; padding-right: 2.2rem; }

.check { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; }
.check input { width: auto; margin-top: .25rem; }

.form-error { color: var(--err); font-size: .82rem; margin-top: .3rem; }
.input-error { border-color: var(--err) !important; }

.honeypot { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }

/* payment method picker */
.pay-options { display: grid; gap: 12px; }
.pay-option {
    display: flex; gap: .9rem; align-items: flex-start; border: 1.5px solid var(--line);
    border-radius: var(--radius-sm); padding: 1rem 1.1rem; cursor: pointer; transition: all .15s ease;
}
.pay-option:hover { border-color: var(--sap2-400); background: #fbfcfe; }
.pay-option input { margin-top: .3rem; width: auto; }
.pay-option strong { display: block; font-family: var(--ui); color: var(--ink); }
.pay-option span { font-size: .85rem; color: var(--muted); }
.pay-option.selected { border-color: var(--sap2); background: #f5f8fd; box-shadow: 0 0 0 3px rgba(6,38,91,.08); }

/* alerts */
.alert { border-radius: var(--radius-sm); padding: .9rem 1.1rem; margin-bottom: 1.3rem; font-size: .93rem; border: 1px solid transparent; }
.alert-ok { background: var(--ok-bg); color: var(--ok); border-color: #bfe3d6; }
.alert-err { background: var(--err-bg); color: var(--err); border-color: #f3c9c5; }
.alert-warn { background: var(--warn-bg); color: var(--warn); border-color: #f0dcb8; }
.alert-info { background: #eaf1fb; color: var(--sap2); border-color: #cddcf3; }
.alert ul { margin: .5rem 0 0; padding-left: 1.1rem; }

/* ticket / summary box */
.summary { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: .5rem 0; font-size: .93rem; border-bottom: 1px dashed var(--line); }
.summary-row > * { min-width: 0; }
.summary-row > :last-child { text-align: right; }
.summary-row:last-child { border-bottom: 0; }
.summary-row.total { font-family: var(--ui); font-weight: 700; color: var(--ink); font-size: 1.05rem; padding-top: .9rem; }

.ticket {
    border: 2px dashed var(--sap2); border-radius: var(--radius); padding: 1.6rem;
    text-align: center; background: #f7faff;
}
.ticket .code {
    font-family: var(--ui); font-size: clamp(1.25rem, 6vw, 1.7rem); font-weight: 700; letter-spacing: .18em;
    color: var(--sap); margin: .5rem 0;
}
@media (max-width: 560px) {
    .summary, .ticket, .card-flat { padding: 1.15rem; }
}

/* spinner */
.spinner {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
    animation: spin .8s linear infinite; display: inline-block;
}
.spinner-dark { border-color: rgba(6,38,91,.25); border-top-color: var(--sap2); }
@keyframes spin { to { transform: rotate(360deg); } }

/* pagination */
.pagination { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 2.6rem; font-family: var(--ui); font-size: .9rem; list-style: none; padding: 0; }
.pagination li span, .pagination li a {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
    padding: 0 .6rem; border: 1px solid var(--line); border-radius: 9px; color: var(--body); background: #fff;
}
.pagination li a:hover { border-color: var(--sap2); color: var(--sap2); }
.pagination .active span { background: var(--sap2); border-color: var(--sap2); color: #fff; }
.pagination .disabled span { opacity: .45; }
.pagination svg { width: 16px; height: 16px; }

/* empty state */
.empty { text-align: center; padding: 3.5rem 1rem; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--bg-soft); }
.empty h3 { color: var(--ink); }

/* filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.8rem; }
.chip {
    font-family: var(--ui); font-size: .82rem; padding: .42rem .95rem; border-radius: 999px;
    border: 1px solid var(--line); color: var(--body); background: #fff;
}
.chip:hover { border-color: var(--sap2); color: var(--sap2); }
.chip.active { background: var(--sap); border-color: var(--sap); color: #fff; }

/* partners strip */
.partners { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px 0; }
.partners img { opacity: .9; }

/* CTA band */
.cta-band {
    background: linear-gradient(120deg, var(--sap) 0%, var(--sap2) 130%);
    color: #fff; border-radius: var(--radius); padding: clamp(30px, 5vw, 54px);
    display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin-bottom: .3rem; }
.cta-band p { color: #c3d3e0; margin: 0; }
.cta-band .btn { white-space: nowrap; }
@media (max-width: 560px) {
    .cta-band { padding: 26px 22px; }
    .cta-band > *, .cta-band .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------- footer -- */
.site-footer { background: var(--sap); color: #93a8b8; padding: 62px 0 0; font-size: .92rem; }
.site-footer h4 { color: #fff; font-family: var(--ui); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.1rem; }
.site-footer a { color: #93a8b8; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 34px; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; }
/* min-width: 0 stops the newsletter input's intrinsic width from pushing a
   one-column footer wider than a phone screen. */
.footer-grid > * { min-width: 0; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* Phones: brand and contact full width, the two short link lists side by side. */
@media (max-width: 520px) {
    .site-footer { padding-top: 48px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
    .footer-brand, .footer-grid > :last-child { grid-column: 1 / -1; }
    .footer-bottom { margin-top: 36px; flex-direction: column; gap: 6px; }
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
/* The mark is drawn in hairlines, so it needs size to read on the navy.
   Ceiling of 78px keeps it ~138px wide - well inside the 1.6fr column. */
.footer-brand img { height: clamp(58px, 6.4vw, 78px); width: auto; margin-bottom: 1.1rem; }
.socials { display: flex; gap: 10px; margin-top: 1.1rem; }
.socials a {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.07); color: #cfdce6; transition: all .18s ease;
}
.socials a:hover { background: var(--gold); color: var(--sap); transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }

/* The bare .socials colours are white-on-navy for the footer; on a light page
   they would be an invisible white circle. Must stay after .socials a - equal
   specificity, so source order is what makes it win. */
.socials-ink a { background: var(--bg-soft); border: 1px solid var(--line); color: var(--sap2); }
.socials-ink a:hover { background: var(--sap2); border-color: var(--sap2); color: #fff; }

.watch-connect { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 1.6rem; }
.watch-connect .socials { margin-top: 0; }
.watch-connect-label {
    font-family: var(--ui); font-size: .74rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted);
}
.footer-newsletter { margin-top: 1.6rem; }
.newsletter-note { color: #7d93a4; font-size: .86rem; line-height: 1.55; margin: -.5rem 0 0; }
.newsletter-form { margin-top: .9rem; }

/* one pill capsule: icon + input + inset gold button */
.newsletter-field {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.16);
    border-radius: 999px; padding: 5px 5px 5px 14px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.newsletter-field:focus-within {
    background: rgba(255,255,255,.09); border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200,138,54,.18);
}
.newsletter-icon { width: 17px; height: 17px; flex: none; fill: #7d93a4; }
.newsletter-field:focus-within .newsletter-icon { fill: var(--gold-soft); }
.newsletter-field input[type=email] {
    flex: 1 1 auto; min-width: 0; width: auto;
    background: transparent; border: 0; border-radius: 0; padding: .42rem 0;
    color: #fff; font-size: .9rem;
}
.newsletter-field input[type=email]:focus { outline: 0; border: 0; box-shadow: none; }
.newsletter-field input[type=email]::placeholder { color: #7d93a4; }
.newsletter-field .btn { flex: none; white-space: nowrap; padding: .48rem 1.15rem; }
.newsletter-msg { font-size: .8rem; margin: .5rem 0 0; }
.newsletter-msg.is-error { color: #f0a9a3; }

@media (max-width: 360px) {
    .newsletter-field { flex-wrap: wrap; border-radius: var(--radius); padding: 10px 12px; }
    .newsletter-field .btn { width: 100%; }
}
.footer-bottom {
    margin-top: 48px; border-top: 1px solid rgba(255,255,255,.09); padding: 20px 0;
    display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .84rem;
}

/* whatsapp float */
.wa-float {
    position: fixed; z-index: 55;
    right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
    width: 52px; height: 52px; border-radius: 50%; background: #25d366; color: #fff;
    display: grid; place-items: center; box-shadow: var(--shadow);
}
.wa-float:hover { color: #fff; transform: translateY(-2px); }
.wa-float svg { width: 26px; height: 26px; fill: currentColor; }
@media (max-width: 560px) {
    .wa-float { width: 48px; height: 48px; right: 14px; bottom: 14px; }
    /* Keep the last footer line clear of the floating button. */
    .site-footer { padding-bottom: 60px; }
}

/* utilities */
.aspect-video { aspect-ratio: 16 / 9; }
.embed { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Thumbnail beside its title - never wraps, the title column shrinks instead. */
.media-row { display: flex; gap: 12px; align-items: flex-start; }
.media-row img { width: 112px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
.media-row > span { min-width: 0; }
@media (max-width: 360px) { .media-row img { width: 96px; height: 54px; } }

.sticky-side { position: sticky; top: 100px; }
/* A page can set its own column ratio with style="--split: 1.4fr 1fr". Setting
   grid-template-columns inline instead would beat the breakpoint below and
   keep two cramped columns on a phone. */
.split { display: grid; grid-template-columns: var(--split, 1.7fr 1fr); gap: 44px; align-items: start; }
.split > * { min-width: 0; }
.split-center { align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } .sticky-side { position: static; } }

/* --------------------------------------------- about / meet wachira -- */
/* Scoped to this section: .split is shared with the video page. */
.about-split { grid-template-columns: 1.5fr 1fr; }

/* The copy runs to three long paragraphs while the portrait is short, which
   left most of the right column empty. Sticky walks it down beside the text.
   100px clears the 74px sticky header, matching .sticky-side. */
.about-portrait { position: sticky; top: 100px; margin: 0; }
.about-portrait img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
}

/* A lead paragraph, so the block opens with something to land on rather than
   three equal-weight slabs. */
.about-prose > p:first-of-type { font-size: 1.15rem; line-height: 1.75; color: var(--ink); }

.about-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }

/* A section head with a button beside it: stack the button under the title on
   phones rather than leave it floating on its own line at the left. */
@media (max-width: 560px) {
    .section-head.flex-between { margin-bottom: 1.8rem; gap: 12px; }
    .section-head.flex-between h2 { margin-bottom: 0; }
}

/* Mobile-only jump link from an event's header down to its booking form. */
.jump-cta { display: none; }
@media (max-width: 900px) { .jump-cta { display: inline-flex; margin-top: 1.2rem; } }

@media (max-width: 900px) {
    /* .about-split is declared after the shared .split breakpoint above, so the
       single column has to be restated here or it would win and stay at two. */
    .about-split { grid-template-columns: 1fr; }
    /* lead with the portrait instead of burying it under the copy */
    .about-portrait { position: static; order: -1; max-width: 420px; }
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 200; background: #fff; padding: .6rem 1rem; border-radius: 8px; }

@media print {
    .site-header, .site-footer, .wa-float, .no-print { display: none !important; }
    body { color: #000; }
}