/* =====================================================================
   PDAL Foundation - THEME 2 "NEW"
   Layout language drawn from ytds.org and the Charifund charity template,
   re-skinned in the PDAL palette.

   Signatures: pill everything, rounded-blob hero imagery, big-number pillar
   cards, donation progress bars, a multi-step donate panel, four-up
   get-involved tiles, partner marquee, FAQ accordion, curved section edges.
   ===================================================================== */

:root {
    --green: #4E8A4D;
    --green-dark: #3E7140;
    --green-soft: #EDF5ED;
    --green-tint: #F3F8F3;
    --charcoal: #37373C;
    --ink: #444444;
    --muted: #6B6B72;
    --light: #F8F9FA;
    --line: #E8E8E8;
    --amber: #E8A33D;

    /* WOArchitect brand red, sampled from their logo artwork */
    --woa: #BD202E;
    --woa-dark: #9C1A26;

    --head: 'Poppins', system-ui, 'Segoe UI', sans-serif;
    --body: 'Nunito Sans', system-ui, 'Segoe UI', sans-serif;

    --r: 10px;
    --r-sm: 6px;
    --r-lg: 24px;
    --pill: 50rem;
    --shadow: 0 10px 30px rgba(0,0,0,.08);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.13);
    --t: all .3s ease;
}

/* ------------------------------------------------ base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ink);
    background: #fff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--head);
    font-weight: 700;
    color: var(--charcoal);
    line-height: 1.25;
    letter-spacing: -.015em;
}

a { color: var(--green); text-decoration: none; transition: var(--t); }
a:hover { color: var(--green-dark); }
img { max-width: 100%; height: auto; }
::selection { background: var(--green); color: #fff; }
:focus-visible { outline: 3px solid rgba(78,138,77,.45); outline-offset: 2px; }

/* Two stacked sections meet at padding + padding, so this value is halved at
   every join: 80px here reads as a 160px gap between sections. */
.section { padding: 80px 0; }
.section-sm { padding: 52px 0; }
.bg-tint { background: var(--green-tint); }
.bg-soft { background: var(--light); }
.bg-dark-pdal { background: var(--charcoal); color: rgba(255,255,255,.78); }

/* Curved top edge, a Charifund signature */
.curve-top {
    position: relative;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    margin-top: -24px;
    background: #fff;
    z-index: 2;
}

.hashtag {
    display: inline-block;
    font-family: var(--head); font-weight: 700; font-size: .82rem;
    letter-spacing: .04em;
    color: var(--green);
    background: var(--green-soft);
    padding: .35rem 1.05rem;
    border-radius: var(--pill);
    margin-bottom: 1rem;
}

.sec-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: .85rem; }
.sec-sub { color: var(--muted); max-width: 700px; }
.text-center .sec-sub { margin-inline: auto; }
.sec-head { margin-bottom: 3rem; }
.lead-sm { color: var(--muted); font-size: .96rem; }
.note { font-size: .84rem; color: var(--muted); }

/* ------------------------------------------------ buttons (fully pill) */
.btn {
    font-family: var(--head);
    font-weight: 600;
    font-size: .92rem;
    padding: .78rem 1.85rem;
    border-radius: var(--pill);
    border: 2px solid transparent;
    transition: var(--t);
}
.btn-lg-p { padding: .95rem 2.3rem; }
.btn-pdal { background: var(--green); border-color: var(--green); color: #fff; }
.btn-pdal:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; transform: translateY(-3px); box-shadow: 0 12px 26px rgba(78,138,77,.32); }
.btn-line { background: transparent; border-color: var(--green); color: var(--green); }
.btn-line:hover { background: var(--green); color: #fff; transform: translateY(-3px); }
.btn-white { background: #fff; border-color: #fff; color: var(--green); }
.btn-white:hover { background: var(--charcoal); border-color: var(--charcoal); color: #fff; transform: translateY(-3px); }
.btn-white-line { background: transparent; border-color: rgba(255,255,255,.75); color: #fff; }
.btn-white-line:hover { background: #fff; border-color: #fff; color: var(--green); transform: translateY(-3px); }

.arrow-link {
    font-family: var(--head); font-weight: 600; font-size: .9rem;
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--green);
}
.arrow-link i { transition: transform .3s ease; }
.arrow-link:hover i { transform: translateX(5px); }

/* ------------------------------------------------ topbar + nav */
.topbar { background: var(--charcoal); color: rgba(255,255,255,.8); font-size: .86rem; padding: .5rem 0; }
.topbar a { color: rgba(255,255,255,.8); }
.topbar a:hover { color: var(--green); }
.topbar .item { display: inline-flex; align-items: center; gap: .5rem; margin-right: 1.5rem; }
.topbar .item i { color: var(--green); }
.topbar .soc a { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.08); margin-left: .35rem; }
.topbar .soc a:hover { background: var(--green); color: #fff; }

.site-nav {
    position: sticky; top: 0; z-index: 1030;
    background: #fff;
    padding: .45rem 0;
    border-bottom: 1px solid var(--line);
    /* Only paint properties transition here. The navbar used to shrink its
       padding and logo on scroll, but resizing a sticky element reflows the
       content below it, which nudges the scroll position back across the
       trigger point and makes the bar flicker. Height is now constant. */
    transition: box-shadow .25s ease, border-color .25s ease;
}
.site-nav.small { box-shadow: var(--shadow); border-bottom-color: transparent; }
.site-nav .navbar-brand img { height: 78px; width: auto; }

.site-nav .nav-link {
    font-family: var(--head); font-weight: 600; font-size: .92rem;
    color: var(--charcoal);
    padding: .5rem .85rem !important;
    border-radius: var(--pill);
}
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--green); background: var(--green-soft); }

.navbar-toggler { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .45rem .6rem; }
.navbar-toggler:focus { box-shadow: none; }
.tog { display: block; width: 22px; height: 2px; background: var(--charcoal); margin: 4px 0; border-radius: 2px; transition: var(--t); }
.navbar-toggler[aria-expanded="true"] .tog:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .tog:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] .tog:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------ hero */
.hero {
    position: relative;
    padding: 58px 0 78px;
    background: var(--charcoal);
    overflow: hidden;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}
/* Temporary splash: an event photograph from the WOArchitect Career Conclave.
   Desaturated so it sits behind the PDAL green rather than competing with it. */
.hero-photo {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 38%;
    filter: saturate(.3) brightness(.55);
}
.hero::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgba(12,12,14,.96) 0%, rgba(12,12,14,.86) 50%, rgba(12,12,14,.66) 100%);
}
.hero .container { position: relative; z-index: 2; }

.hero .hashtag { background: rgba(255,255,255,.12); color: #fff; }

.hero h1 { margin-bottom: 1.25rem; }

/* Brand lockup */
.hero-lead {
    display: block;
    font-family: var(--head);
    font-weight: 600;
    font-size: clamp(1.3rem, 2.4vw, 2.4rem);
    line-height: 1.22;
    letter-spacing: -.01em;
    color: #fff;
    margin-bottom: 1.2rem;
    position: relative;
    padding-left: 4.4rem;
    text-shadow: 0 2px 18px rgba(0,0,0,.45);
    animation: leadRise .9s cubic-bezier(.22,.9,.3,1) both;
}

/* Each word is held together: the capitals below are inline-block so they can
   be transformed, which otherwise lets the browser break a line between the
   capital and the rest of its word. */
.hero-lead .w { white-space: nowrap; }

/* The four letters that spell out PDAL, lifted from the words they start.
   text-transform renders the "a" of "and" as a capital so the acronym reads. */
.hero-lead .cap {
    display: inline-block;
    color: var(--green);
    font-weight: 800;
    font-size: 1.2em;
    text-transform: uppercase;
    line-height: 1;
    vertical-align: baseline;
    animation: capPop .55s cubic-bezier(.34,1.56,.64,1) both;
}
.hero-lead .cap:nth-of-type(1) { animation-delay: .45s; }
.hero-lead .cap:nth-of-type(2) { animation-delay: .60s; }
.hero-lead .cap:nth-of-type(3) { animation-delay: .75s; }
.hero-lead .cap:nth-of-type(4) { animation-delay: .90s; }

/* second line: the short form, tracked out under the full name */
.hero-lead-sub {
    display: block;
    margin-top: .6rem;
    animation: leadRise .8s 1.0s cubic-bezier(.22,.9,.3,1) both;
    font-family: var(--body);
    font-weight: 600;
    font-size: .48em;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
}
.hero-lead::before {
    content: "";
    position: absolute; left: 0; top: .55em;
    width: 3.5rem; height: 3px; background: var(--green);
    transform-origin: left center;
    animation: ruleDraw .7s .15s cubic-bezier(.22,.9,.3,1) both;
}
.hero-word {
    display: block;
    font-family: var(--head);
    font-weight: 800;
    font-size: clamp(3.4rem, 8.5vw, 6.2rem);
    line-height: 1;
    letter-spacing: -.02em;
    color: #fff;
}
.hero-tag {
    display: block;
    font-family: var(--body);
    font-weight: 400;
    font-size: clamp(1.05rem, 2.2vw, 1.6rem);
    color: rgba(255,255,255,.92);
    margin-top: .5rem;
}
.hero-tag .accent { color: var(--green); }

.hero p.intro { font-size: 1.05rem; color: rgba(255,255,255,.8); max-width: 560px; margin-bottom: 2rem; }

/* Blob-cropped hero image, a ytds/Charifund device */
/* Image frame shaped after the PDAL logo mark: rounded on three corners with
   a square top-right, the same silhouette the favicon uses. */
.blob {
    position: relative;
    border-radius: 20% 0 20% 20%;
    overflow: hidden;
    aspect-ratio: 1/1;
    background: var(--light);
    box-shadow: var(--shadow-lg);
    border: 6px solid rgba(255,255,255,.14);
}
/* object-position pulled left of centre so the framed content sits further
   right inside the frame, clearing the floating stat card. */
.blob img { width: 100%; height: 100%; object-fit: cover; object-position: 22% center; }

/* The green corner mark itself, traced from the logo: a thick top bar meeting
   a thick right bar. Polygon values match the favicon path proportions. */
.brand-mark {
    position: absolute;
    /* The clip-path puts the inner corner of the L at 60%/40% of the box, so
       offsetting by 40% of the size lands that corner exactly on the collage's
       top-right corner and the two bars hug its top and right edges. */
    top: -37px; right: -37px;
    width: 92px; height: 92px;
    background: var(--green);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%, 60% 40%, 0 40%);
    z-index: 3;
    pointer-events: none;
}

.float-stat {
    position: absolute;
    background: #fff;
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: .9rem 1.2rem;
    display: flex; align-items: center; gap: .8rem;
    z-index: 3;
}
.float-stat .ic { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); }
.float-stat strong { display: block; font-family: var(--head); font-size: 1.2rem; line-height: 1.1; color: var(--charcoal); }
.float-stat span { font-size: .8rem; color: var(--muted); }
/* Kept to the corners so neither card covers the WOArchitect mark
   sitting in the middle of the circle. */
.float-a { left: -14px; bottom: 62%; }
.float-b { right: -14px; bottom: 16%; }

/* Inner page head */
.page-head {
    position: relative;
    padding: 72px 0;
    background: var(--green-tint);
    overflow: hidden;
}
.page-head::before {
    content: ""; position: absolute; top: -150px; right: -120px;
    width: 420px; height: 420px; border-radius: 50%;
    background: rgba(78,138,77,.09);
}
.page-head .container { position: relative; z-index: 2; }
.page-head h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .4rem; }
.page-head p { color: var(--muted); margin-bottom: .6rem; }
.page-head .crumb { font-family: var(--head); font-weight: 600; font-size: .85rem; color: var(--muted); }
.page-head .crumb .now { color: var(--green); }
.page-head .crumb .sep { margin: 0 .45rem; opacity: .5; }

/* Photo-backed variant used on the inner pages */
.page-head.has-photo { background: var(--charcoal); padding: 92px 0; }
.page-head.has-photo::before { display: none; }
.page-head .head-photo {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(.45) brightness(.9);
}
.page-head.has-photo::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgba(18,18,20,.9) 0%, rgba(18,18,20,.66) 55%, rgba(18,18,20,.34) 100%);
}
.page-head.has-photo h1 { color: #fff; }
.page-head.has-photo p { color: rgba(255,255,255,.8); }
.page-head.has-photo .crumb { color: rgba(255,255,255,.7); }
.page-head.has-photo .crumb a { color: rgba(255,255,255,.7); }
.page-head.has-photo .crumb a:hover { color: var(--green); }

/* ------------------------------------------------ pillar cards (the "4Es" device)
   No intrinsic height: add Bootstrap's .h-100 where a grid needs equal-height
   cards. Baking height:100% in here made stacked cards inside one flex column
   each expand to the full column height and overflow the section. */
.pillar {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 2rem 1.6rem;
    text-align: center;
    transition: var(--t);
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.pillar .ic {
    width: 62px; height: 62px; margin: 0 auto 1.1rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--green-soft); color: var(--green);
    font-size: 1.4rem;
    transition: var(--t);
}
.pillar:hover .ic { background: var(--green); color: #fff; }
.pillar .big {
    font-family: var(--head); font-weight: 800;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: var(--green); line-height: 1;
    margin-bottom: .35rem;
}
.pillar h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.pillar p { font-size: .92rem; color: var(--muted); margin-bottom: 1rem; }

/* ------------------------------------------------ cause cards with progress */
.cause {
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: var(--t);
}
.cause:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.cause-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--light); }
.cause-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cause:hover .cause-media img { transform: scale(1.06); }
.cause-media .chip {
    position: absolute; left: 1rem; top: 1rem;
    font-family: var(--head); font-weight: 600; font-size: .74rem;
    background: #fff; color: var(--green);
    padding: .3rem .85rem; border-radius: var(--pill);
    box-shadow: var(--shadow);
}
.cause-body { padding: 1.5rem; }
.cause-body h3 { font-size: 1.1rem; margin-bottom: .55rem; }
.cause-body p { font-size: .93rem; color: var(--muted); margin-bottom: 1.1rem; }

.bar { height: 8px; border-radius: var(--pill); background: var(--green-soft); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: var(--pill); background: var(--green); }
.bar-meta { display: flex; justify-content: space-between; font-size: .84rem; margin-top: .5rem; }
.bar-meta strong { font-family: var(--head); color: var(--charcoal); }

/* ------------------------------------------------ get involved tiles */
.involve {
    display: block; height: 100%;
    border-radius: var(--r-lg);
    overflow: hidden;
    position: relative;
    background: var(--charcoal);
    min-height: 280px;
}
.involve img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; transition: transform .5s ease; }
.involve:hover img { transform: scale(1.07); }
.involve::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(30,30,34,.9)); }
.involve-body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem; }
.involve-body .ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; margin-bottom: .85rem; }
.involve-body h3 { color: #fff; font-size: 1.1rem; margin-bottom: .3rem; }
.involve-body p { color: rgba(255,255,255,.78); font-size: .88rem; margin-bottom: 0; }

/* ------------------------------------------------ donate panel with steps */
.donate-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 2.25rem;
    box-shadow: var(--shadow);
}

.steps { display: flex; gap: .5rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.step {
    flex: 1 1 0;
    display: flex; align-items: center; gap: .55rem;
    font-family: var(--head); font-weight: 600; font-size: .82rem;
    color: var(--muted);
    padding: .55rem .75rem;
    border-radius: var(--pill);
    background: var(--light);
    white-space: nowrap;
}
.step .n {
    width: 22px; height: 22px; flex: 0 0 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--line); color: var(--charcoal);
    font-size: .72rem;
}
.step.on { background: var(--green-soft); color: var(--green-dark); }
.step.on .n { background: var(--green); color: #fff; }

.amt-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.amt { flex: 1 1 110px; }
.amt input { position: absolute; opacity: 0; width: 0; height: 0; }
.amt span {
    display: block; text-align: center;
    font-family: var(--head); font-weight: 700; font-size: 1rem;
    padding: .8rem .4rem;
    border: 2px solid var(--line);
    border-radius: var(--pill);
    background: #fff;
    cursor: pointer; transition: var(--t);
}
.amt span:hover { border-color: var(--green); }
.amt input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.amt input:focus-visible + span { outline: 3px solid rgba(78,138,77,.45); outline-offset: 2px; }

.cust { position: relative; }
.cust .cur { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); font-family: var(--head); font-weight: 700; color: var(--green); }
.cust .form-control { padding-left: 2.3rem; }

.anon-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--pill);
    background: var(--green-tint);
    border: 1px solid var(--green-soft);
}
.anon-row .form-check-input { width: 2.6rem; height: 1.4rem; margin: 0; cursor: pointer; }

/* WOArchitect initiative mark - logo sits unframed */
.woa-mark {
    display: block;
    max-width: 210px;
    margin: 0 auto 1.25rem;
    transition: var(--t);
}
.woa-mark img { width: 100%; height: auto; display: block; }
.woa-mark:hover { transform: translateY(-3px); }

/* Button in the WOArchitect brand red, sampled from their logo (#BD202E) */
/* Outlined in the WOArchitect red rather than filled: a solid red block
   competes with the logo directly above it. Fills on hover. */
.btn-woa {
    background: transparent;
    border-color: var(--woa);
    color: var(--woa);
}
.btn-woa:hover {
    background: var(--woa);
    border-color: var(--woa);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(189,32,46,.3);
}

/* Activity row with a photo thumbnail + funding bar (donate page sidebar) */
.act-row {
    display: flex; gap: 1rem; align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: .85rem 1.1rem .85rem .85rem;
    margin-bottom: .85rem;
    transition: var(--t);
}
.act-row:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.act-thumb {
    flex: 0 0 78px; width: 78px; height: 78px;
    border-radius: var(--r); overflow: hidden; background: var(--light);
}
.act-thumb img { width: 100%; height: 100%; object-fit: cover; }
.act-body { flex: 1 1 auto; min-width: 0; }
.act-body h3 { font-size: .98rem; margin-bottom: .55rem; }

/* ------------------------------------------------ forms */
.form-label { font-family: var(--head); font-weight: 600; font-size: .85rem; color: var(--charcoal); margin-bottom: .35rem; }
.form-control, .form-select {
    font-size: .94rem; padding: .78rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    background: var(--light);
    transition: var(--t);
}
textarea.form-control { border-radius: var(--r); min-height: 130px; resize: vertical; }
.form-control:focus, .form-select:focus { background: #fff; border-color: var(--green); box-shadow: 0 0 0 .2rem rgba(78,138,77,.15); }
.form-check-input:checked { background-color: var(--green); border-color: var(--green); }
.form-check-input:focus { border-color: var(--green); box-shadow: 0 0 0 .2rem rgba(78,138,77,.15); }
.form-check-label { font-size: .9rem; color: var(--muted); }
.invalid-feedback { padding-left: 1.1rem; }

/* ------------------------------------------------ counters band */
.counters { position: relative; background: var(--charcoal); padding: 72px 0; overflow: hidden; }
.counters::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 18%, rgba(78,138,77,.36), transparent 50%); }
.counters .container { position: relative; z-index: 1; }
.cnt { text-align: center; padding: 1rem .5rem; }
.cnt .ic { width: 54px; height: 54px; margin: 0 auto .9rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--green); font-size: 1.25rem; }
.cnt .n { font-family: var(--head); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.7rem); color: #fff; line-height: 1; }
.cnt .n .sfx { color: var(--green); }
.cnt .l { font-size: .9rem; color: rgba(255,255,255,.7); margin: .35rem 0 0; }

/* ------------------------------------------------ partner marquee */
.marquee { overflow: hidden; position: relative; }
.marquee::before, .marquee::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, #fff, transparent); }
/* 80s over a ~6800px travel is roughly 85px/s. The original 32s worked out at
   over 200px/s, which read as uncomfortably fast. Raise the duration to slow
   it further; the distance is fixed by the number of logos. */
.marquee-track { display: flex; gap: 1rem; width: max-content; animation: slide 80s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.plogo {
    width: 210px; flex: 0 0 210px;
    display: flex; flex-direction: column; align-items: center;
    padding: .9rem .8rem .85rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
}



@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

/* ------------------------------------------------ gallery */
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2.5rem; }
.pills button {
    font-family: var(--head); font-weight: 600; font-size: .86rem;
    padding: .5rem 1.3rem; border-radius: var(--pill);
    border: 1px solid var(--line); background: #fff; color: var(--charcoal);
    cursor: pointer; transition: var(--t);
}
.pills button:hover { border-color: var(--green); color: var(--green); }
.pills button.active { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 8px 18px rgba(78,138,77,.25); }

.tile { position: relative; display: block; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden; background: var(--light); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile:hover img { transform: scale(1.07); }
.tile .ov {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    background: rgba(78,138,77,.8); color: #fff; text-align: center; padding: 1rem;
    opacity: 0; transition: var(--t);
}
.tile:hover .ov { opacity: 1; }
.tile .ov .z { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.2); }
/* Hover shows the zoom cue alone. The caption still reaches assistive tech
   through the image alt, and the lightbox prints it from data-caption. */
.tile .ov .c,
.tile .ov .k { display: none; }

.event-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    background: var(--green-tint);
    border-radius: var(--pill);
    padding: .85rem 1.5rem;
    margin-bottom: 1.35rem;
}
.event-bar .n {
    width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center;
    border-radius: 50%; background: var(--green); color: #fff;
    font-family: var(--head); font-weight: 700; font-size: .85rem;
}
.event-bar h3 { font-size: 1.05rem; margin: 0; }
.event-bar .m { font-size: .84rem; color: var(--muted); }

/* ------------------------------------------------ FAQ */
.acc .accordion-item { border: 1px solid var(--line); border-radius: var(--r) !important; margin-bottom: .8rem; overflow: hidden; }
.acc .accordion-button { font-family: var(--head); font-weight: 600; font-size: 1rem; color: var(--charcoal); padding: 1.1rem 1.35rem; box-shadow: none; }
.acc .accordion-button:not(.collapsed) { background: var(--green-soft); color: var(--green-dark); }
.acc .accordion-button:focus { box-shadow: none; }
.acc .accordion-body { color: var(--muted); font-size: .95rem; }

/* ------------------------------------------------ contact tiles + map */
.ctile {
    height: 100%; background: #fff;
    border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 2rem 1.5rem; text-align: center; transition: var(--t);
}
.ctile:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.ctile .ic { width: 58px; height: 58px; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 1.3rem; transition: var(--t); }
.ctile:hover .ic { background: var(--green); color: #fff; }
.ctile h4 { font-size: 1.03rem; margin-bottom: .45rem; }
.ctile p, .ctile a { font-size: .93rem; color: var(--muted); margin: 0; word-break: break-word; }
.ctile a:hover { color: var(--green); }

.map { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-tall { height: 430px; }

/* ------------------------------------------------ CTA band */
.cta {
    position: relative; overflow: hidden;
    background: var(--green); color: #fff;
    border-radius: var(--r-lg);
    padding: 3rem 2.5rem;
}
.cta::before { content: ""; position: absolute; top: -90px; right: -70px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.1); }
.cta::after { content: ""; position: absolute; bottom: -110px; left: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.08); }
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.9); margin-bottom: 0; }

/* ------------------------------------------------ footer */
.foot { background: var(--charcoal); color: rgba(255,255,255,.72); padding: 76px 0 0; font-size: .94rem; }
.foot h5 { color: #fff; font-size: 1.03rem; margin-bottom: 1.2rem; }
.foot .flogo { height: 74px; width: auto; margin-bottom: 1.1rem; }
.flinks { list-style: none; padding: 0; margin: 0; }
.flinks li { margin-bottom: .55rem; }
.flinks a { color: rgba(255,255,255,.72); font-size: .93rem; }
.flinks a:hover { color: var(--green); padding-left: 4px; }
.fcont { list-style: none; padding: 0; margin: 0; }
.fcont li { display: flex; gap: .7rem; margin-bottom: .6rem; line-height: 1.6; }
.fcont i { color: var(--green); margin-top: .35rem; flex: 0 0 15px; }
.fcont a { color: rgba(255,255,255,.72); }
.fcont a, .fcont span { overflow-wrap: anywhere; }
.fcont a:hover { color: var(--green); }
.fsoc a { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-right: .45rem; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; }
.fsoc a:hover { background: var(--green); transform: translateY(-3px); }
.fcont-org { display: block; color: #fff; font-weight: 600; margin-bottom: .15rem; }

/* Footer map: the panel is bright against the charcoal, so it is kept small
   and rounded to read as a card rather than a hole in the footer. */
.fmap { height: 178px; border-radius: var(--r); overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
.fmap iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Attribution note, sitting above the divider that closes the footer. */
.foot-note {
    max-width: 900px;
    margin: 46px auto 0;
    text-align: center;
    font-size: .82rem;
    line-height: 1.75;
    color: rgba(255,255,255,.55);
}

.foot-bot { margin-top: 22px; padding: 1.2rem 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .87rem; }

/* Organisation name set in running copy: the four initials pick up the same
   green treatment the hero lead uses, without changing the line height. */
.pdal-name { font-family: var(--head); font-weight: 600; color: var(--charcoal); }
.pdal-name .cap { color: var(--green); font-weight: 800; text-transform: uppercase; }

/* Profile modal: the founder bios run long, so the body scrolls inside the
   dialog rather than pushing it past the viewport. */
#bioModal .modal-body { max-height: 68vh; overflow-y: auto; }
#bioModal .modal-title { font-size: 1.12rem; }
#bioModal #bioRole { font-size: .92rem; margin-bottom: .9rem !important; }
#bioModal #bioText { font-size: .88rem; line-height: 1.75; }
#bioModal .bio-link {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: 1.2rem;
    font-family: var(--head); font-weight: 600; font-size: .85rem;
    color: var(--green-dark);
    text-decoration: none;
}
#bioModal .bio-link:hover { text-decoration: underline; }

/* WOArchitect sub-brand lockup inside a focus card: the artwork already
   carries its own wordmark and rule, so the card adds no heading of its own. */
.woa-sub { display: block; width: 100%; max-width: 168px; margin: 0 auto 1.3rem; }
.woa-sub img { display: block; width: 100%; height: auto; }

/* Consent checkbox above the donate button. The feedback line is a sibling of
   the input, so Bootstrap's .was-validated rules reveal it on submit. */
.consent-check { margin-top: 1.6rem; padding-left: 1.9rem; }
.consent-check .form-check-input { margin-left: -1.9rem; margin-top: .28rem; width: 1.1rem; height: 1.1rem; }
.consent-check .form-check-label { font-size: .92rem; line-height: 1.7; color: var(--ink); }
.consent-check a { color: var(--green-dark); font-weight: 600; text-decoration: underline; }
.consent-check a:hover { color: var(--green); }

/* ------------------------------------------------ legal pages
   Long-form policy text: a single measured column, numbered headings and a
   registration panel at the top. */
.legal { max-width: 880px; margin: 0 auto; }

.legal-meta {
    background: var(--green-tint);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.6rem 1.8rem;
    margin-bottom: 3rem;
}
.legal-meta h3 { font-size: 1.05rem; margin-bottom: .15rem; }
.legal-meta .lm-sub { color: var(--muted); font-size: .9rem; margin-bottom: 1.1rem; }
.lm-list { list-style: none; padding: 0; margin: 0; }
.lm-list li {
    display: flex; flex-wrap: wrap; gap: .1rem .8rem;
    font-size: .9rem; color: var(--ink);
    padding: .45rem 0;
    border-top: 1px solid rgba(0,0,0,.06);
}
.lm-list li span {
    flex: 0 0 220px;
    font-family: var(--head); font-weight: 600; color: var(--charcoal);
}

.legal-body h2 {
    display: flex; align-items: baseline; gap: .7rem;
    font-size: 1.12rem;
    margin: 2.6rem 0 .9rem;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h2 .ln {
    flex: 0 0 auto; min-width: 1.35rem;
    font-size: 1em; font-weight: 700;
    color: var(--green);
}
.legal-body p {
    color: var(--ink); font-size: .95rem; line-height: 1.9;
    margin-bottom: 1.05rem;
}
.legal-body ul { list-style: none; padding: 0; margin: 0 0 1.3rem; }
.legal-body li {
    position: relative; padding-left: 1.4rem; margin-bottom: .7rem;
    font-size: .95rem; line-height: 1.85; color: var(--ink);
}
.legal-body li::before {
    content: ""; position: absolute; left: 0; top: .78em;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green);
}
.legal-body a { color: var(--green-dark); text-decoration: underline; }

.legal-more {
    margin-top: 3rem; padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: .95rem; color: var(--muted);
}

@media (max-width: 575.98px) {
    .legal-meta { padding: 1.2rem 1.1rem; }
    .lm-list li span { flex: 0 0 100%; }
}

/* ------------------------------------------------ misc */
.modal-content { border: 0; border-radius: var(--r-lg); }
.modal-title { font-family: var(--head); font-weight: 700; }
.qr {
    width: 190px; height: 190px; margin: 0 auto;
    display: grid; place-items: center; text-align: center; padding: 1rem;
    border: 2px dashed var(--line); border-radius: var(--r);
    background: var(--light); color: var(--muted); font-size: .82rem;
}
.brow { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.brow:last-child { border-bottom: 0; }
.brow span { color: var(--muted); }
.brow strong { font-family: var(--head); font-weight: 600; color: var(--charcoal); text-align: right; word-break: break-all; }

.bio-photo { border-radius: var(--r); overflow: hidden; aspect-ratio: 3/4; background: var(--light); }
.bio-photo img { width: 100%; height: 100%; object-fit: cover; }

.person { display: block; background: none; border: 0; padding: 0; width: 100%; text-align: center; cursor: pointer; }
/* Advisor cards are anchors to LinkedIn rather than dialog triggers, so they
   need the link defaults cleared to match the founder buttons beside them. */
a.person { text-decoration: none; color: inherit; }

/* Portrait rectangle rather than a circle: a 1:1 circular crop cut the
   shoulders off the studio portraits and lost the framing of the shot. */
.person-photo {
    display: block;
    aspect-ratio: 3/4;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--light);
    box-shadow: var(--shadow);
    margin: 0 auto 1.1rem;
    max-width: 250px;
    transition: var(--t);
}
.person:hover .person-photo { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s ease; }
.person:hover .person-photo img { transform: scale(1.06); }
.person h4 { display: block; font-size: 1.05rem; margin-bottom: .15rem; transition: color .3s ease; }
.person:hover h4 { color: var(--green); }
.person .role { font-family: var(--head); font-weight: 600; font-size: .82rem; color: var(--green); display: block; }


.to-top {
    position: fixed; right: 20px; bottom: 20px; z-index: 1040;
    width: 46px; height: 46px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: var(--green); color: #fff;
    box-shadow: var(--shadow); cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--t);
}
.to-top.on { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--green-dark); }

/* ------------------------------------------------ responsive */
@media (max-width: 991.98px) {
    .section { padding: 58px 0; }
    .site-nav .navbar-collapse { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--line); max-height: 72vh; overflow-y: auto; }
    .site-nav .nav-link { padding: .65rem .9rem !important; }
    .nav-cta { margin-top: .9rem; }
    .nav-cta .btn { width: 100%; }
    .hero { padding: 56px 0 66px; }
    .hero-visual { margin-top: 2.5rem; }
    .float-a { left: 0; top: 8%; }
    .float-b { right: 0; bottom: 6%; }
    .cta { padding: 2rem 1.5rem; }
    .plogo { width: 150px; flex: 0 0 150px; }
}

@media (max-width: 767.98px) {
    .section { padding: 46px 0; }
    .hero h1 { font-size: 2rem; }
    .float-stat { position: static; margin-top: 1rem; }
    .blob { border-radius: 14% 0 14% 14%; }
    .brand-mark { width: 62px; height: 62px; top: -25px; right: -25px; }
    .donate-panel { padding: 1.4rem; }
    .amt { flex: 1 1 calc(50% - .6rem); }
    .steps { display: grid; grid-template-columns: 1fr 1fr; }
    .map-tall { height: 300px; }
    .anon-row { border-radius: var(--r); }
}


/* ------------------------------------------------ advisor slider
   Scroll-snap track: four cards visible, one card per nav click.
   Native scrolling keeps touch/trackpad swipe working for free. */
.adv-slider { position: relative; padding: 0 8px; }

.adv-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .5rem .25rem 1.25rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.adv-track::-webkit-scrollbar { display: none; }
.adv-track:focus-visible { outline: 3px solid rgba(78,138,77,.45); outline-offset: 4px; }

/* 4 up: subtract the 3 gaps between them */
.adv-item {
    flex: 0 0 calc((100% - 4.5rem) / 4);
    scroll-snap-align: start;
}

.adv-nav {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    cursor: pointer;
    transition: all .3s ease;
}
.adv-prev { left: -18px; }
.adv-next { right: -18px; }
.adv-nav:disabled { opacity: .3; cursor: default; }

@media (max-width: 1199.98px) {
    .adv-item { flex: 0 0 calc((100% - 3rem) / 3); }
}
@media (max-width: 767.98px) {
    .adv-item { flex: 0 0 calc((100% - 1.5rem) / 2); }
    .adv-prev { left: -10px; }
    .adv-next { right: -10px; }
}
@media (max-width: 575.98px) {
    .adv-item { flex: 0 0 100%; }
    .adv-nav { width: 38px; height: 38px; }
}.adv-nav {
    background: #fff;
    color: var(--charcoal);
    box-shadow: var(--shadow);
}
.adv-nav:hover:not(:disabled) { background: var(--green); color: #fff; transform: translateY(-50%) scale(1.06); }
/* ------------------------------------------------ journey activity lists */
.journey-list {
    list-style: none;
    padding: 0;
    margin: .25rem 0 0;
}
.journey-list li {
    position: relative;
    padding-left: 1.9rem;
    margin-bottom: .85rem;
    font-size: .95rem;
    color: var(--ink);
    line-height: 1.7;
}
.journey-list li:last-child { margin-bottom: 0; }
.journey-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: .35rem;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    font-size: .6rem;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--green);
}
/* ------------------------------------------------ lightbox */
.lb {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem 4rem;
    background: rgba(18, 18, 20, .93);
    backdrop-filter: blur(3px);
}
.lb.open { display: flex; }

.lb-figure { margin: 0; max-width: min(1080px, 92vw); text-align: center; }
.lb-figure img {
    max-width: 100%;
    max-height: 78vh;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    display: block;
    margin: 0 auto;
}
.lb-caption {
    margin-top: 1rem;
    font-family: var(--head);
    font-weight: 600;
    font-size: .95rem;
    color: rgba(255, 255, 255, .9);
}
.lb-caption:empty { display: none; }

.lb-close, .lb-nav {
    position: absolute;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    transition: var(--t);
}
.lb-close:hover, .lb-nav:hover { background: var(--green); }
.lb-close { top: 1.5rem; right: 1.5rem; }
.lb-prev  { left: 1.5rem;  top: 50%; transform: translateY(-50%); }
.lb-next  { right: 1.5rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 767.98px) {
    .lb { padding: 1rem .75rem 3.5rem; }
    .lb-close, .lb-nav { width: 38px; height: 38px; font-size: .9rem; }
    .lb-close { top: .75rem; right: .75rem; }
    .lb-prev { left: .5rem; }
    .lb-next { right: .5rem; }
    .lb-figure img { max-height: 68vh; }
}
/* ------------------------------------------------ hero activity collage
   Four activity photos filling the brand-shaped frame. Keeps .blob's mask,
   aspect ratio and shadow; only the inside becomes a 2x2 grid. */
.blob-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px;
    background: #fff;
}
.blob-collage img {
    width: 100%;
    height: 100%;
    /* .blob img is nudged off-centre for the single-photo version; the
       collage tiles are already square-cropped, so recentre them */
    object-fit: cover;
    object-position: center;
    transition: transform .5s ease;
}
.blob-collage img:hover { transform: scale(1.06); }

@media (max-width: 575.98px) {
    .blob-collage { gap: 3px; }
}

@media (max-width: 767.98px) {
    /* drop the rule indent so the bigger lead line keeps full width */
    .hero-lead { padding-left: 0; }
    .hero-lead::before { display: none; }
    .hero-lead-sub { letter-spacing: .16em; }
}

/* ------------------------------------------------ hero lead animation */
@keyframes leadRise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}
@keyframes capPop {
    0%   { opacity: 0; transform: translateY(14px) scale(.72); }
    60%  { opacity: 1; transform: translateY(0) scale(1.14); }
    100% { opacity: 1; transform: none; }
}
@keyframes ruleDraw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Anyone who has asked for less motion gets the finished state, no movement */
@media (prefers-reduced-motion: reduce) {
    .hero-lead,
    .hero-lead .cap,
    .hero-lead-sub,
    .hero-lead::before { animation: none !important; }
}

/* ------------------------------------------------ intro: single shot + vision
   Both columns stretch to a shared height. The image drops its fixed aspect
   ratio and fills its column, so it always matches the height of the vision
   card beside it instead of running taller or shorter as the text reflows.
   object-fit on the img keeps the photo from distorting as the box changes. */
.intro-shot {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    min-height: 340px;
    box-shadow: var(--shadow-lg);
}
/* Taking the photo out of flow is what makes the match work: an in-flow <img>
   reports its own intrinsic height, so the picture would drive the row and the
   card would just centre inside it. Absolute-positioned, the tile has no
   content height of its own and simply stretches to the card beside it. */
.intro-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vision-card {
    position: relative;
    width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 2.4rem 2.2rem 2.2rem;
    box-shadow: var(--shadow);
}
.vision-card .ic {
    position: absolute;
    top: -26px; left: 2.2rem;
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 8px 18px rgba(78,138,77,.32);
}
.vision-card .hashtag { margin-top: .6rem; }
.vision-card .sec-title { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: .9rem; }
.vision-card p { color: var(--muted); font-size: 1.02rem; }

@media (max-width: 991.98px) {
    .vision-card { padding: 2.2rem 1.5rem 1.8rem; }
    .vision-card .ic { left: 1.5rem; }
    /* stacked: give the photo a sensible shape again */
    .intro-shot { aspect-ratio: 4/3; min-height: 0; }
}

/* ------------------------------------------------ WOArchitect lockup
   The supplied artwork is the mark plus wordmark only; the "An Initiative by
   PDAL Foundation" line sits under it as live text (it is slide text in the
   source deck, not part of the logo file). Kept as text so it stays crisp at
   any size and can be edited without re-exporting the image. */
.woa-strap {
    display: block;
    margin-top: .55rem;
    padding-top: .5rem;
    border-top: 3px solid #3a3a3a;
    font-family: var(--body);
    font-size: .78rem;
    font-weight: 400;
    color: #3a3a3a;
    letter-spacing: .01em;
    text-align: center;
}
.woa-strap strong { font-weight: 700; }

/* ------------------------------------------------ supporter / organization grid
   Logos arrive at wildly different shapes and aspect ratios, so each sits in a
   fixed box with object-fit: contain - never cropped, never stretched, and all
   optically the same size regardless of whether the source is wide or square. */

/* ------------------------------------------------ supporter marquee tiles
   Logos stay in full colour. Sources vary wildly in shape, so each sits in a
   fixed box with object-fit: contain - never cropped, never stretched, and all
   optically the same size whether the original is wide or square. */
.plogo-img {
    display: grid;
    place-items: center;
    height: 74px;
    width: 100%;
    margin-bottom: .5rem;
}
.plogo-img img {
    max-width: 100%;
    max-height: 74px;
    width: auto;
    object-fit: contain;
}
.plogo-name {
    font-family: var(--head);
    font-weight: 600;
    font-size: .74rem;
    line-height: 1.3;
    color: var(--charcoal);
    text-align: center;
    margin-top: auto;
}

@media (max-width: 575.98px) {
    .plogo { width: 168px; flex: 0 0 168px; }
    .plogo-img { height: 60px; }
    .plogo-img img { max-height: 60px; }
}

/* ------------------------------------------------ journey timeline
   Vertical rail with a year marker per milestone. The rail is drawn on the
   <ul> and inset behind the markers, so it reads as one continuous line. */
.timeline {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 27px;
    top: .5rem;
    bottom: .5rem;
    width: 2px;
    background: var(--line);
}
.timeline-item {
    position: relative;
    padding-left: 4.5rem;
    padding-bottom: 2rem;
}
.timeline-item:last-child { padding-bottom: 0; }

.timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: var(--head);
    font-weight: 700;
    font-size: .82rem;
    /* white ring punches the marker out of the rail behind it */
    box-shadow: 0 0 0 6px var(--green-tint);
}

.timeline-body {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.25rem 1.35rem;
    transition: var(--t);
}
.timeline-body:hover {
    transform: translateY(-4px);
    border-color: var(--green);
    box-shadow: var(--shadow);
}
.timeline-body h4 {
    font-family: var(--head);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: .4rem;
    color: var(--charcoal);
}
.timeline-body p {
    font-size: .93rem;
    color: var(--muted);
    margin: 0;
}

@media (max-width: 575.98px) {
    .timeline::before { left: 22px; }
    .timeline-item { padding-left: 3.6rem; }
    .timeline-marker { width: 46px; height: 46px; font-size: .74rem; }
}

/* ------------------------------------------------ supporters page grid
   Same contained-logo treatment as the marquee tiles, laid out as a grid for
   the dedicated Supporters page. Logos stay in full colour. */
.sup-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1rem .9rem;
    text-align: center;
    transition: var(--t);
}
.sup-card:hover {
    transform: translateY(-4px);
    border-color: var(--green);
    box-shadow: var(--shadow);
}
.sup-logo {
    display: grid;
    place-items: center;
    height: 80px;
    margin-bottom: .6rem;
}
.sup-logo img {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    object-fit: contain;
}
.sup-name {
    font-family: var(--head);
    font-weight: 600;
    font-size: .76rem;
    line-height: 1.35;
    color: var(--charcoal);
    margin-top: auto;
}

/* ------------------------------------------------ event cards
   Used by the Upcoming Events page once events are published. */
.event-card {
    display: flex;
    gap: 1.1rem;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.35rem;
    transition: var(--t);
}
.event-card:hover {
    transform: translateY(-4px);
    border-color: var(--green);
    box-shadow: var(--shadow);
}
.event-date {
    flex: 0 0 66px;
    height: 72px;
    display: grid;
    place-content: center;
    text-align: center;
    border-radius: var(--r);
    background: var(--green-soft);
    color: var(--green-dark);
    font-family: var(--head);
    line-height: 1.1;
}
.event-date strong { display: block; font-size: 1.5rem; font-weight: 800; }
.event-date span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.event-body h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.event-meta {
    font-size: .84rem;
    color: var(--muted);
    margin-bottom: .5rem;
}
.event-meta i { color: var(--green); margin-right: .25rem; }
.event-meta .dot { margin: 0 .4rem; }

@media (max-width: 575.98px) {
    .sup-logo { height: 62px; }
    .sup-logo img { max-height: 62px; }
    .sup-name { font-size: .72rem; }
    .event-card { flex-direction: column; }
}