/* ============================================================
   CHRIS ANNADORAI — MASTER STYLESHEET v2.0
   Architecture:
   1.  Foundations & Variables
   2.  Navigation
   3.  Buttons & Components
   4.  Hero Section
   5.  Stats Section
   6.  About Section
   7.  Portfolio / Work
   8.  Reassurance / Social Proof
   9.  Logo Marquee
   10. Multimedia + Services
   11. Contact Section
   12. Footer CTA + Footer
   13. Modals
   14. Scroll Reveal System
   15. WordPress Compat
   ============================================================ */

/* Fonts loaded via wp_enqueue_style in functions.php for better performance */

/* ============================================================
   1. FOUNDATIONS & VARIABLES
   ============================================================ */
:root {
    --gold:        #c5a059;
    --gold-light:  #dbb96a;
    --gold-dim:    #7a5c28;
    --dark-bg:     #0f0f0f;
    --light-bg:    #1a1a1a;
    --card-bg:     #111111;
    --light-grey:  #dddddd;
    --white:       #ffffff;
    --black:       #000000;
    --off-white:   #f5f2ed;
    --transition:  all 0.3s ease;

    /* Bootstrap token overrides */
    --bs-primary:         #c5a059;
    --bs-primary-rgb:     197, 160, 89;
    --bs-body-bg:         #0f0f0f;
    --bs-body-color:      #ffffff;
    --bs-border-color:    rgba(255,255,255,0.08);
    --bs-font-sans-serif: 'Onest', sans-serif;
}

html { scroll-behavior: smooth; }

body {
    overflow-x: hidden;
    background-color: var(--dark-bg);
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: var(--white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .poetic { font-family: 'Libre Baskerville', serif; }
p { letter-spacing: 0.02rem; }

::selection { background: var(--gold); color: #000; }

/* ============================================================
   GLOBAL LINK COLORS — fix the browser's default dark ":visited"
   color (illegible against this site's mostly-dark backgrounds).
   A universal safety net for any plain, unclassed link, plus an
   explicit override per named component so each keeps its own
   intended color once clicked. Hover still wins in every case,
   since ":hover" rules carry equal or higher specificity.
   ============================================================ */
a:visited { color: inherit; }
.btn-impact:visited      { color: var(--white); }
.btn-dark-impact:visited { color: #111; }
.footer-link:visited     { color: rgba(255, 255, 255, 0.5); }
.play-link:visited       { color: var(--white); }
.nav-link:visited        { color: var(--white) !important; }
.entry-content a:visited { color: var(--gold); }
.ca-story-card:visited   { color: inherit; }

/* Utilities */
.text-gold        { color: var(--gold) !important; }
.bg-gold          { background-color: var(--gold) !important; }
.tracking-widest  { letter-spacing: 0.12rem; }
/* Bootstrap only defines display-1 through display-6; extending the same scale for smaller section titles. */
.display-8 { font-size: 1.75rem; font-weight: 300; line-height: 1.2; }
.object-fit-cover { object-fit: cover; }

/* ============================================================
   2. NAVIGATION
   ============================================================ */
#mainNav {
    transition: background-color 0.45s ease,
                padding 0.45s ease,
                backdrop-filter 0.45s ease,
                border-bottom 0.45s ease;
}

.nav-transparent {
    background-color: transparent !important;
    backdrop-filter: blur(0px) !important;
    -webkit-backdrop-filter: blur(0px) !important;
    border-bottom: 1px solid transparent !important;
}

.nav-scrolled {
    background-color: rgba(15, 15, 15, 0.96) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(197, 160, 89, 0.12) !important;
}

.nav-link {
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    position: relative;
    margin: 0 0.5rem;
    padding: 0.5rem 0 !important;
    color: var(--white) !important;
    transition: var(--transition);
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 1px;
    background: var(--gold);
    transition: width 0.35s ease;
}
.nav-link:hover { color: var(--gold) !important; }
.nav-link:hover::after { width: 100%; }

.navbar-brand img { width: 220px; height: auto; display: block; }

/* Unambiguous left/right anchoring — logo left, toggler right, no drift */
#mainNav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#mainNav .navbar-brand {
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
}

/* Mobile toggler */
.navbar-toggler {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Animated hamburger ↔ close icon — same component in both states */
.ca-burger {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.ca-burger-box {
    position: relative;
    width: 22px;
    height: 16px;
    display: inline-block;
}
.ca-burger-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
                opacity 0.2s ease,
                top 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.ca-burger-line-1 { top: 0; }
.ca-burger-line-2 { top: 7px; }
.ca-burger-line-3 { top: 14px; }

/* Morph to X when the mobile menu is open */
.ca-burger.is-open .ca-burger-line-1 { top: 7px; transform: rotate(45deg); }
.ca-burger.is-open .ca-burger-line-2 { opacity: 0; }
.ca-burger.is-open .ca-burger-line-3 { top: 7px; transform: rotate(-45deg); }

/* Mobile menu — full-screen, slides down from the top with a slick easing curve */
.ca-mobile-nav.offcanvas-top {
    --bs-offcanvas-height: 100dvh;
    height: 100dvh;
    border-bottom: none !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ca-mobile-nav-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1.25rem 1.5rem;
}
.ca-mobile-nav-brand {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}
.ca-mobile-nav.show .ca-mobile-nav-brand,
.ca-mobile-nav.showing .ca-mobile-nav-brand {
    opacity: 1;
    transform: translateY(0);
}

/* Close (X) button — top-right of the mobile menu header */
.ca-mobile-nav-close {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}
.ca-mobile-nav.show .ca-mobile-nav-close,
.ca-mobile-nav.showing .ca-mobile-nav-close {
    opacity: 1;
    transform: translateY(0);
}
.ca-mobile-nav-close:focus {
    box-shadow: none;
}

/* ============================================================
   3. BUTTONS & COMPONENTS
   ============================================================ */
.btn-impact,
.btn-dark-impact {
    border-radius: 50px !important;
    padding: 12px 32px;
    transition: var(--transition);
    text-decoration: none;
    display: inline-block;
    font-family: 'Onest', sans-serif;
    font-weight: 400;
    font-size: 0.88rem;
    letter-spacing: 0.06rem;
}

.btn-impact {
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: var(--white);
    background: transparent;
}
.btn-impact:hover {
    background: var(--white);
    color: #000;
    transform: scale(1.04);
    border-color: var(--white);
    color: #000;
}

.btn-dark-impact {
    border: 1px solid #111;
    color: #111;
    background: transparent;
}
.btn-dark-impact:hover {
    background: #111;
    color: var(--white);
    transform: scale(1.04);
}

/* Marker Highlight */
.marker-highlight {
    position: relative; z-index: 1;
    white-space: nowrap; padding: 0 8px;
    font-style: italic;
}
.marker-highlight::before {
    content: "";
    position: absolute; top: 50%; left: 0;
    width: 100%; height: 110%;
    background-color: rgba(197, 160, 89, 0.75);
    z-index: -1;
    transform: translateY(-50%) rotate(-1.5deg) skewX(-10deg);
    clip-path: polygon(0% 45%, 99% 26%, 90% 92%, 4% 79%);
}

/* Cards */
.card { transition: var(--transition); border: none; }
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.5) !important;
}

/* ============================================================
   4. HERO SECTION
   ============================================================ */
.hero-video-container {
    position: relative;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.hero-video-bg {
    position: absolute;
    top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    z-index: 0;
    transform: translate(-50%, -50%);
    object-fit: cover;
    filter: brightness(0.32);
}
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 100%);
    z-index: 1;
}
/* Bottom fade — blends hero into the stats section below */
.hero-video-container::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 220px;
    background: linear-gradient(to bottom, transparent 0%, #000 100%);
    z-index: 3;
    pointer-events: none;
}
.hero-content { z-index: 4; }

/* Cinematic play button */
.play-link { text-decoration: none; color: var(--white); transition: var(--transition); }
.play-icon-wrap {
    width: 52px; height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.play-link:hover .play-icon-wrap {
    background: var(--gold); border-color: var(--gold); transform: scale(1.1);
}
.play-link:hover { color: var(--white); }

/* Scroll indicator */
.scroll-indicator {
    position: absolute; bottom: 48px; right: 5%; z-index: 5;
    writing-mode: vertical-rl;
}
.scroll-line {
    width: 1px; height: 80px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    margin: 0 auto; position: relative; overflow: hidden;
}
.scroll-line::after {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--white);
    animation: scroll-anim 2s infinite;
}
@keyframes scroll-anim {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* Hero load reveal */
.hero-content .reveal-text,
.hero-content h1,
.hero-content h6,
.hero-content p,
.hero-content .d-flex {
    opacity: 0;
    transform: translateY(28px);
    transition: all 1.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hero-loaded .reveal-text,
.hero-loaded h1,
.hero-loaded h6,
.hero-loaded p,
.hero-loaded .d-flex { opacity: 1; transform: translateY(0); }
.hero-loaded h6   { transition-delay: 0.15s; }
.hero-loaded h1   { transition-delay: 0.3s; }
.hero-loaded p    { transition-delay: 0.5s; }
.hero-loaded .d-flex { transition-delay: 0.7s; }

/* ============================================================
   5. STATS SECTION
   ============================================================ */
.impact-stat {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1.25rem, 3vw, 2.75rem);
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    letter-spacing: -0.03em;
    display: block;
}

/* ============================================================
   6. ABOUT SECTION
   ============================================================ */
.about-image-col {
    min-height: 700px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#about { background-color: var(--black); }
/* Top fade — blends in from the stats section above */
#about::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 220px;
    background: linear-gradient(to top, transparent 0%, #000 100%);
    z-index: 2;
    pointer-events: none;
}
/* Bottom fade — blends out into the work section below */
#about::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 220px;
    background: linear-gradient(to bottom, transparent 0%, #000 100%);
    z-index: 2;
    pointer-events: none;
}

/* ============================================================
   7. PORTFOLIO / WORK
   ============================================================ */
/* (Bootstrap card + hover from section 3 handles everything) */

/* ============================================================
   8. REASSURANCE — REDESIGNED
   Cinematic dark horizontal testimonial strip + award badges
   ============================================================ */
.ca-reassurance { background: var(--dark-bg); position: relative; }
/* Top fade — blends in from partners above */
#reassurance::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 220px;
    background: linear-gradient(to top, transparent 0%, #000 100%);
    z-index: 2;
    pointer-events: none;
}
/* Bottom fade — blends out into partners below */
#reassurance::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 220px;
    background: linear-gradient(to bottom, transparent 0%, #000 100%);
    z-index: 2;
    pointer-events: none;
}

/* Full-width testimonial slider with edge fade */
.ca-testi-slider-wrap {
    position: relative;
    width: 100%;
    overflow: hidden; /* clip the fades */
}
.ca-testi-fade-left,
.ca-testi-fade-right {
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.ca-testi-fade-left  { left:  0; background: linear-gradient(to right, var(--dark-bg) 0%, transparent 100%); }
.ca-testi-fade-right { right: 0; background: linear-gradient(to left,  var(--dark-bg) 0%, transparent 100%); }

/* Horizontal draggable testimonial strip */
.ca-testimonial-strip {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    padding: 0 120px 4px; /* indent so first/last card peek under the fades */
}
.ca-testimonial-strip::-webkit-scrollbar { display: none; }
.ca-testimonial-strip.is-dragging { cursor: grabbing; user-select: none; }

.ca-testimonial-card {
    flex: 0 0 370px;
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 2.5rem;
    position: relative;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.ca-testimonial-card:hover {
    border-color: rgba(197, 160, 89, 0.35);
    transform: translateY(-3px);
}
.ca-testimonial-card .quote-mark {
    font-family: 'Libre Baskerville', serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--gold);
    opacity: 0.15;
    position: absolute;
    top: 0.6rem; left: 1.5rem;
    user-select: none;
}
.ca-testimonial-card blockquote {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.72;
    color: #d8d0c4;
    border: none; padding: 0;
    margin: 0 0 1.75rem;
}
.ca-reviewer-initials {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--light-bg);
    border: 1px solid rgba(197, 160, 89, 0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700;
    color: var(--gold);
    flex-shrink: 0;
    letter-spacing: 0.05em;
}
.ca-reviewer-name { font-size: 0.88rem; font-weight: 600; color: var(--white); line-height: 1.2; }
.ca-reviewer-role { font-size: 0.72rem; color: #666; letter-spacing: 0.02em; line-height: 1.4; }

/* Award badge pills */
.ca-award-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.1rem;
    border: 1px solid rgba(197, 160, 89, 0.25);
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
    transition: var(--transition);
}
.ca-award-badge:hover {
    background: rgba(197, 160, 89, 0.08);
    border-color: var(--gold);
}

/* Drag hint */
.ca-drag-hint {
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #444;
}

/* ============================================================
   9. LOGO MARQUEE
   ============================================================ */
/* Wrapper carries the gradients; .logo-slider keeps overflow:hidden for the marquee */
.ca-partners-wrap {
    position: relative;
}
.ca-partners-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(to top, transparent 0%, #000 100%);
    z-index: 2;
    pointer-events: none;
}
.ca-partners-wrap::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent 0%, #000 100%);
    z-index: 2;
    pointer-events: none;
}
.logo-slider {
    background: var(--black);
    padding: 44px 0;
    overflow: hidden;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.logo-track {
    display: flex;
    width: max-content;
    animation: logo-scroll 40s linear infinite;
}
.logo-track:hover { animation-play-state: paused; }
.logo-slide {
    width: 260px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 2rem;
}
.logo-slide img {
    filter: grayscale(100%);
    opacity: 0.7;
    width: auto;
    height: auto;
    max-height: 60px;
    max-width: 200px;
    object-fit: contain;
    transition: filter 0.3s, opacity 0.3s;
}
.logo-slide img:hover { filter: grayscale(0%); opacity: 1; }
@keyframes logo-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================================
   10. MULTIMEDIA + SERVICES COMBO
   ============================================================ */

/* Top + bottom fades for the Ecosystem of Stories section */
#multimedia {
    position: relative;
}
#multimedia::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 220px;
    background: linear-gradient(to top, transparent 0%, #000 100%);
    z-index: 2;
    pointer-events: none;
}
#multimedia::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 220px;
    background: linear-gradient(to bottom, transparent 0%, #000 100%);
    z-index: 2;
    pointer-events: none;
}

/* Service rows (child theme "What I Do" style) */
.ca-service-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: start;
    gap: 1.5rem;
    padding: 1.6rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    transition: border-color 0.3s ease;
}
.ca-service-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.ca-service-row:hover      { border-top-color: var(--gold); }
.ca-service-row:hover .ca-svc-arrow { color: var(--gold); transform: translateX(5px); }
.ca-service-row:hover .ca-svc-title { color: var(--gold); }

.ca-svc-num   { font-size: 0.875rem; color: var(--gold-dim); letter-spacing: 0.05em; padding-top: 0.3rem; }
.ca-svc-title {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1.05rem, 2vw, 1.6rem);
    font-weight: 600;
    color: var(--white);
    letter-spacing: -0.01em;
    margin-bottom: 0.3rem;
    transition: color 0.3s ease;
}
.ca-svc-desc  { /*font-size: 0.86rem;*/ color: #888; line-height: 1.65; }
.ca-svc-arrow {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.1);
    transition: color 0.3s ease, transform 0.3s ease;
    padding-top: 0.15rem;
}
@media (max-width: 767px) {
    .ca-service-row { grid-template-columns: 44px 1fr; }
    .ca-svc-arrow  { display: none; }
}

/* ============================================================
   11. CONTACT SECTION
   ============================================================ */
/* Light section — uses Bootstrap utilities + btn-dark-impact */
.border-custom { border-color: var(--light-grey);}

/* ============================================================
   12. FOOTER CTA + FOOTER
   ============================================================ */
.footer-cta {
    background:
        linear-gradient(rgba(0,0,0,0.88), rgba(0,0,0,0.88)),
        url('https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.footer-link {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    display: inline-block;
    transition: var(--transition);
    position: relative;
    font-size: 0.88rem;
    line-height: 2.1;
}
.footer-link::after {
    content: '';
    position: absolute;
    width: 0; height: 1px;
    bottom: -1px; left: 0;
    background-color: var(--gold);
    transition: width 0.3s ease;
}
.footer-link:hover { color: var(--gold); transform: translateX(6px); }
.footer-link:hover::after { width: 100%; }

.social-circle {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--white);
    text-decoration: none;
    transition: var(--transition);
    font-size: 1rem;
}
.social-circle:hover {
    background: var(--gold); color: #000;
    border-color: var(--gold); transform: translateY(-4px);
}

/* Newsletter pill */
.ca-newsletter-input {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--white) !important;
    font-size: 0.88rem;
    border-radius: 50px 0 0 50px !important;
    padding: 0.7rem 1.25rem;
}
.ca-newsletter-input::placeholder { color: rgba(255, 255, 255, 0.32); }
.ca-newsletter-input:focus {
    outline: none; box-shadow: none !important;
    border-color: rgba(197, 160, 89, 0.5) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
.ca-newsletter-btn {
    border-radius: 0 50px 50px 0 !important;
    background: var(--gold) !important;
    border: 1px solid var(--gold) !important;
    color: #000 !important;
    font-family: 'Onest', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.7rem 1.4rem;
    transition: var(--transition);
}
.ca-newsletter-btn:hover {
    background: var(--gold-light) !important;
    border-color: var(--gold-light) !important;
}

/* ============================================================
   13. MODALS
   ============================================================ */
.modal.fade .modal-dialog {
    transform: scale(0.92);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.modal.show .modal-dialog { transform: scale(1); }
.modal-content { border-radius: 16px !important; }

/* ============================================================
   14. SCROLL REVEAL SYSTEM
   ============================================================ */
.ca-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.215, 0.61, 0.355, 1),
                transform 0.9s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.ca-reveal.is-visible { opacity: 1; transform: translateY(0); }
.ca-reveal-d1 { transition-delay: 0.1s; }
.ca-reveal-d2 { transition-delay: 0.22s; }
.ca-reveal-d3 { transition-delay: 0.36s; }

/* ============================================================
   15. WORDPRESS COMPAT
   ============================================================ */
.entry-content a { color: var(--gold); }
.entry-content a:hover { color: var(--gold-light); }
.generate-columns-container,
.inside-article,
.entry-content { max-width: none; padding: 0; }

/* WP Pagination */
.page-numbers { color: var(--gold); padding: 4px 8px; }
.page-numbers.current {
    background: var(--gold); color: #000;
    border-radius: 4px;
}

/* WP Alignment */
.alignfull  { max-width: 100%; }
.alignwide  { max-width: 1200px; margin: 0 auto; }

/* ============================================================
   Split sections (About / Contact) — full-bleed image + container-aligned text.
   The image is absolutely positioned to fill exactly 50% of the viewport.
   The .container sits on top in normal flow; text lives in one of its col-lg-6s,
   so headings align perfectly with every other section on the page.
   ============================================================ */
.ca-split-bg-left,
.ca-split-bg-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}
.ca-split-bg-left  { left:  0; }
.ca-split-bg-right { right: 0; }

/* Ensure the container and its children sit above the background image */
#about   .container,
#contact .container { position: relative; z-index: 3; }

/* Keep section content above gradient pseudo-elements (z-index 2) */
#reassurance .container,
#reassurance .ca-awards-grid,
#reassurance .ca-testi-slider-wrap,
#multimedia  .container { position: relative; z-index: 3; }

/* Modal trigger buttons — remove focus ring after modal closes */
[data-bs-target="#contactModal"]:focus,
[data-bs-target="#contactModal"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    color: inherit;
}

/* Footer column alignment — ensure links flush-left under their heading */
footer .list-unstyled { padding-left: 0 !important; margin-left: 0 !important; }
footer .list-unstyled li { padding-left: 0; }

/* Custom logo sizing — matches hardcoded <img style="width:280px"> */
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo-link img,
.custom-logo { width: 280px !important; height: auto !important; }

/* Featured project image — responsive height */
.ca-featured-img {
    object-fit: cover;
    max-height: 480px;
    width: 100%;
}

/* ============================================================
   16. STORYTELLING PAGE
   ============================================================ */

/* ── Hero ── */
.ca-st-hero {
    position: relative;
    min-height: 70vh;
    background-color: var(--dark-bg);
    overflow: hidden;
}

.ca-st-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        rgba(0,0,0,0.82) 0%,
        rgba(0,0,0,0.45) 65%,
        rgba(0,0,0,0.25) 100%
    );
    z-index: 0;
}

.ca-st-hero-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to bottom, transparent 0%, var(--dark-bg) 100%);
    z-index: 2;
    pointer-events: none;
}

/* ── Shared section styles ── */
.ca-st-section {
    position: relative;
    background: var(--dark-bg);
    padding: 6rem 0;
}

.ca-st-conservation {
    background: var(--black);
}

.ca-st-impact {
    background: var(--dark-bg);
    padding-bottom: 8rem;
}

/* Reuse the shared fade helpers */
.ca-section-fade-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to top, transparent 0%, #000 100%);
    z-index: 2;
    pointer-events: none;
}

.ca-section-fade-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to bottom, transparent 0%, var(--dark-bg) 100%);
    z-index: 2;
    pointer-events: none;
}

/* ── Project card ── */
.ca-story-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.35s ease;
}
.ca-story-card:hover { transform: translateY(-5px); }
.ca-story-card:hover .ca-story-card-overlay { opacity: 1; }
.ca-story-card:hover img { filter: grayscale(0%) brightness(0.55); }

/* Stories with no Video URL set render statically — no hover lift, no cursor, no "Explore" overlay */
.ca-story-card.is-static { cursor: default; }
.ca-story-card.is-static:hover { transform: none; }
.ca-story-card.is-static:hover img { filter: none; }
.ca-story-card.is-static .ca-story-card-overlay { display: none; }

.ca-story-card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--card-bg);
    border-radius: 3px 3px 0 0;
}

.ca-story-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%) brightness(0.85);
    transition: filter 0.5s ease;
}

.ca-story-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #111 0%, #1c1c1c 100%);
}

/* Format badge — top left corner */
.ca-format-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(197, 160, 89, 0.4);
    color: var(--gold);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2;
}

/* Hover overlay */
.ca-story-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 1.25rem 1.5rem;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 2;
}

.ca-story-card-cta {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--white);
    text-transform: uppercase;
}

/* Card body */
.ca-story-card-body {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: none;
    border-radius: 0 0 3px 3px;
    padding: 1.5rem;
    transition: border-color 0.3s ease;
}
.ca-story-card:hover .ca-story-card-body {
    border-color: rgba(197, 160, 89, 0.2);
}

.ca-story-card-title {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 400;
    color: var(--white);
    margin: 0 0 0.75rem;
    line-height: 1.35;
}

.ca-story-card-desc {
    font-size: 0.875rem;
    color: #777;
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* Focus tags */
.ca-focus-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.ca-focus-tag {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    padding: 0.25rem 0.65rem;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.ca-story-card:hover .ca-focus-tag {
    color: rgba(197, 160, 89, 0.7);
    border-color: rgba(197, 160, 89, 0.2);
}

/* ── CTA section ── */
.ca-st-cta {
    position: relative;
    padding: 8rem 0 7rem;
    background: var(--black);
    overflow: hidden;
}

.ca-st-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to top, transparent 0%, var(--dark-bg) 100%);
    pointer-events: none;
}

/* Empty state */
.ca-empty-state { opacity: 0.6; }

/* ── Storytelling page body override — no GeneratePress content wrapper ── */
#storytelling-page {
    overflow-x: clip;
}

/* ── Highlights & Awards page ── */
#highlights-awards-page {
    overflow-x: clip;
}

/* Condensed hero — intentionally shorter than the Home/Storytelling heroes */
.ca-ha-hero {
    position: relative;
    min-height: 90vh;
    padding: 8rem 0 3rem;
    background-color: var(--dark-bg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.ca-ha-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 65%, rgba(0,0,0,0.3) 100%);
    z-index: 0;
    /* No will-change / contain here (they were the only difference from the
       Storytelling hero and made the scroll zoom/fade update unevenly). */
}
.ca-ha-hero-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to top, var(--dark-bg) 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

.ca-ha-section-block {
    position: relative;
    background: var(--dark-bg);
    padding: 5rem 0 0;
}
.ca-ha-section-block:nth-of-type(even) { background: var(--black); }

/* Category column spacing — always applied, not only once the column has faded in.
   Adding the margin at reveal time changed the page height while scrolling; Chrome
   then nudges the scroll position to compensate (scroll anchoring), which made the
   hero's scroll effect jump on the way back up. Safari doesn't do this, so it looked fine there. */
.col-md-6.col-lg-4.ca-reveal {
    margin-bottom: 2rem;
}

/* Category cover — roughly half the height of a story card's image */
.ca-ha-cover {
    aspect-ratio: 8 / 5;
    overflow: hidden;
    border-radius: 8px;
    background: var(--card-bg);
}
.ca-ha-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Element button — transparent, no border; icon + label */
.ca-ha-element-btn {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.55em;
    padding: 1rem 1.5rem;
    background: transparent;
    border: #c5a05961 thin solid;
    border-radius: 16px;
    color: #F2F2F2;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    line-height: 1.3;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.ca-ha-element-btn .ca-ha-icon {
    flex: 0 0 auto;
    color: var(--gold);
    line-height: 1.3;
    transition: color 0.4s ease;
}
.ca-ha-element-btn .ca-ha-label {
    flex: 1 1 auto;
}
/* Keep visited/active links legible — no default browser dark visited color */
.ca-ha-element-btn:visited,
.ca-ha-element-btn:active {
    color: var(--gold-light);
}
a.ca-ha-element-btn:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
}
a.ca-ha-element-btn:hover .ca-ha-icon {
    color: #000;
}
.ca-ha-element-btn.is-static {
    cursor: default;
    opacity: 0.5;
}

/* Optional transition image between sections.
   Its fades are drawn by masking the image itself over the colours behind it:
   the top half shows the section's own background, the bottom half the dark
   colour (--dark-bg) the image fades into. One paint, no extra layers. */
.ca-ha-transition {
    position: relative;
    margin-top: 4rem;
    line-height: 0;
    background: linear-gradient(to bottom, transparent 0%, transparent 50%, var(--dark-bg) 50%, var(--dark-bg) 100%);
}
.ca-ha-transition img {
    width: 100%;
    height: auto;
    max-height: 675px;
    object-fit: cover;
    object-position: center top;
    display: block;
    /* Top: short fade into the section above. Bottom: the same tall, soft curve
       as the Storytelling hero (bottom 45% of the image), into the dark colour. */
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0, #000 min(160px, 30%),
        #000 55%,
        rgba(0,0,0,0.96) 63.1%,
        rgba(0,0,0,0.86) 69.85%,
        rgba(0,0,0,0.70) 76.15%,
        rgba(0,0,0,0.50) 82%,
        rgba(0,0,0,0.30) 87.4%,
        rgba(0,0,0,0.14) 92.35%,
        rgba(0,0,0,0.04) 96.4%,
        transparent 100%);
            mask-image: linear-gradient(to bottom,
        transparent 0, #000 min(160px, 30%),
        #000 55%,
        rgba(0,0,0,0.96) 63.1%,
        rgba(0,0,0,0.86) 69.85%,
        rgba(0,0,0,0.70) 76.15%,
        rgba(0,0,0,0.50) 82%,
        rgba(0,0,0,0.30) 87.4%,
        rgba(0,0,0,0.14) 92.35%,
        rgba(0,0,0,0.04) 96.4%,
        transparent 100%);
}

/* ============================================================
   17. RESPONSIVE — Mobile & Tablet Overrides
   ============================================================ */

/* ── md and below (< 992px) ── */
@media (max-width: 991.98px) {
    /* Navbar logo */
    .navbar-brand img { width: 180px; }

    /* Hero */
    .hero-video-container { min-height: 560px; }
    .hero-video-container::after { height: 120px; }

    /* About section fades */
    #about::before,
    #about::after { height: 120px; }

    /* Reassurance / Multimedia section fades */
    #reassurance::before,
    #reassurance::after,
    #multimedia::before,
    #multimedia::after { height: 120px; }

    /* Footer CTA parallax — disabled on mobile (flickers on iOS) */
    .footer-cta { background-attachment: scroll; }
}

/* ── sm and below (< 768px) ── */
@media (max-width: 767.98px) {
    /* Navbar */
    .navbar-brand img { width: 160px; }
    .navbar-toggler { padding: 0.5rem !important; } /* adequate touch target */

    /* Hero */
    .hero-video-container { min-height: 100svh; min-height: 100vh; }
    .hero-video-container::after { height: 80px; }

    /* Buttons — tighten padding on small screens */
    .btn-impact,
    .btn-dark-impact { padding: 10px 24px; }

    /* Testimonial strip — reduce card width and padding */
    .ca-testi-fade-left,
    .ca-testi-fade-right { width: 60px; }
    .ca-testimonial-strip { padding: 0 60px 4px; gap: 1rem; }
    .ca-testimonial-card { flex: 0 0 88vw; padding: 1.75rem; }

    /* Logo marquee slide */
    .logo-slide { width: 200px; padding: 0 1.25rem; }

    /* Featured project image */
    .ca-featured-img { max-height: 280px; }

    /* Work section featured card — stack cleanly */
    #work .card .row.g-0 { flex-direction: column; }

    /* Highlights & Awards */
    .ca-ha-hero { min-height: 55vh; min-height: 55svh; padding: 7rem 0 2.5rem; }
    .ca-ha-section-block { padding: 3.5rem 0 0; }

    /* Strategy & Impact */
    .ca-si-section { padding: 4rem 0; }
    .ca-si-cs-img-wrap { aspect-ratio: 16 / 10; margin-bottom: 2rem; }
    .ca-si-fade-b2d::after,
    .ca-si-fade-d2b::after { height: 100px; }
}

/* ── Strategy & Impact page ── */
#impact-filmmaking-page { overflow-x: clip; }

/* Hero → Key Outcomes: fade the hero's bottom into solid black instead of
   the shared .ca-ha-hero-fade's default dark-bg (scoped so the Highlights
   & Awards page, which also uses .ca-ha-hero-fade, is unaffected). */
#impact-filmmaking-page .ca-ha-hero-fade {
    background: linear-gradient(to top, var(--black) 0%, transparent 100%);
}

.ca-si-section { position: relative; overflow: hidden; padding: 6rem 0; }
.ca-si-section > .container { position: relative; z-index: 2; }
.ca-si-bg-dark { background: var(--dark-bg); }

/* Bottom-of-section fades, layered on top of the section's own solid
   background so the seam into the next section reads as a smooth gradient
   rather than a hard cut. */
.ca-si-fade-b2d::after,
.ca-si-fade-d2b::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 180px;
    pointer-events: none;
    z-index: 1;
}
.ca-si-fade-b2d::after { background: linear-gradient(to bottom, var(--black) 0%, var(--dark-bg) 100%); }
.ca-si-fade-d2b::after { background: linear-gradient(to bottom, var(--dark-bg) 0%, var(--black) 100%); }

/* Key Outcomes — 4-across, reuses the home page's big gold stat style */
.ca-si-outcome { padding: 1rem; }

/* Case study cover image (or placeholder while none is chosen yet) */
.ca-si-cs-img-wrap {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.06);
}
.ca-si-cs-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.ca-si-cs-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#111 0%,#1a1a1a 100%);
    color: rgba(255,255,255,0.2);
    font-size: 2.5rem;
}

.ca-si-cs-category {
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
}
.ca-si-cs-role { color: #777; font-size: 0.82rem; letter-spacing: 0.02em; }
.ca-si-cs-role strong { color: #999; font-weight: 600; }

.ca-si-impact-list { list-style: none; margin: 0; padding: 0; }
.ca-si-impact-list li {
    position: relative;
    padding-left: 1.15rem;
    margin-bottom: 0.9rem;
    color: #999;
    font-weight: 300;
    font-size: 0.92rem;
    line-height: 1.75;
}
.ca-si-impact-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.55em;
    width: 6px; height: 6px;
    background: var(--gold);
}
.ca-si-impact-list li strong { color: var(--white); font-weight: 600; }

/* Centered pull-quote below each case study's image + text row */
.ca-si-cs-quote {
    max-width: 62ch;
    margin: 3.5rem auto 0;
    text-align: center;
    position: relative;
}
.ca-si-cs-quote .quote-mark {
    font-family: 'Libre Baskerville', serif;
    font-size: 4rem;
    line-height: 1;
    color: var(--gold);
    opacity: 0.25;
    display: block;
    margin-bottom: 0.5rem;
}
.ca-si-cs-quote blockquote {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
    line-height: 1.55;
    color: #d8d0c4;
    border: none; padding: 0; margin: 0 0 1.25rem;
}
.ca-si-cs-quote cite {
    font-style: normal;
    color: var(--gold);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}

/* Services page — optional transition image under the service cards.
   Reuses .ca-ha-transition (Highlights & Awards); the bottom fades into black
   because the footer comes right after. */
#services-list.has-transition { padding-bottom: 0; }
.ca-sv-transition {
    background: linear-gradient(to bottom, transparent 0%, transparent 50%, var(--black) 50%, var(--black) 100%);
}

/* ── Impact Filmmaking — case studies (image + story, then "The Impact" points) ── */
.ca-si-case-text { padding-top: 0.25rem; }
.ca-si-case-category {
    color: var(--gold);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}
.ca-si-case-title {
    font-size: clamp(2rem, 1.4rem + 1.9vw, 3rem);
    line-height: 1.15;
    margin: 0.9rem 0 2rem;
}
.ca-si-case-role { color: #999; font-size: 1rem; margin-bottom: 2rem; }
.ca-si-case-role strong { color: var(--white); font-weight: 600; }
.ca-si-case-label {
    color: var(--gold);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}
.ca-si-case-story {
    color: #999;
    font-weight: 300;
    line-height: 1.85;
    max-width: 62ch;
    margin-bottom: 2.5rem;
}
/* Gold line closing the text column, level with the bottom of the image */
.ca-si-case-rule {
    width: 100%;
    height: 1px;
    background: var(--gold);
    opacity: 0.8;
}

.ca-si-case-impact { margin-top: 4rem; }
.ca-si-case-impact > .ca-si-case-label { margin-bottom: 1.75rem; }
.ca-si-impact-head {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    margin-bottom: 1rem;
}
.ca-si-impact-num {
    color: var(--gold);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
}
.ca-si-impact-title {
    font-family: 'Onest', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    line-height: 1.4;
    margin: 0;
}
.ca-si-impact-text {
    color: #999;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.8;
    margin: 0;
}

@media (max-width: 991.98px) {
    .ca-si-case .ca-si-cs-img-wrap { margin-bottom: 0; }   /* the row gutter already spaces image and text */
    .ca-si-case-title { margin-bottom: 1.5rem; }
    .ca-si-case-story { margin-bottom: 2rem; }
    .ca-si-case-impact { margin-top: 3rem; }
}

/* ── Consultancy page ── */
#consultancy-page { overflow-x: clip; }

/* Hero → How We Can Work Together: fade the hero's bottom into solid black
   instead of the shared .ca-ha-hero-fade's default dark-bg, since that
   section is black (scoped so Highlights & Awards, which also uses
   .ca-ha-hero-fade, is unaffected). */
#consultancy-page .ca-ha-hero-fade {
    background: linear-gradient(to top, var(--black) 0%, transparent 100%);
}

/* This hero has more copy than the condensed heroes it's based on
   (Highlights & Awards / Strategy & Impact), so centering it vertically
   inside .ca-ha-hero's min-height would leave less empty space above the
   heading than those shorter heroes get — the heading would sit noticeably
   higher. Anchor it to the top instead, at the same distance the shorter
   heroes' centering happens to produce, so the gap above the heading reads
   the same across all three pages regardless of how much body copy follows. */
.ca-cy-hero-align { align-items: flex-start; padding-top: 9.5rem; }
@media (max-width: 767.98px) {
    .ca-cy-hero-align { padding-top: 8.5rem; }
}

/* Services grid ("How We Can Work Together") */
.ca-cy-service {
    padding: 2rem;
    height: 100%;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.ca-cy-service:hover { border-color: rgba(197,160,89,0.4); transform: translateY(-4px); }
.ca-cy-service-cover {
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.ca-cy-service-cover img { width: 100%; height: 100%; object-fit: cover; }
.ca-cy-service-icon { color: var(--gold); font-size: 1rem; margin-bottom: 1.25rem; }
.ca-cy-service h5 { margin-bottom: 1.15rem; margin-top: 0.75rem; }
.ca-cy-service p { color: #999; font-weight: 300; font-size: 0.92rem; line-height: 1.75; margin: 0; }

/* Quote cards ("What Partners Say") */
.ca-cy-quote {
    height: 100%;
    padding: 2rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}
.ca-cy-quote .quote-mark {
    font-family: 'Libre Baskerville', serif;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--gold);
    opacity: 0.35;
    display: block;
    margin-bottom: 0.75rem;
}
.ca-cy-quote-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.75rem;
    border: 1px solid rgba(197,160,89,0.3);
}
.ca-cy-quote blockquote {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.7;
    color: #d8d0c4;
    border: none; padding: 0; margin: 0 0 1.25rem;
    flex: 1;
}
.ca-cy-quote cite {
    font-style: normal;
    display: block;
    color: var(--gold);
    font-size: 0.85rem;
    font-weight: 600;
}
.ca-cy-quote cite span {
    display: block;
    color: #777;
    font-weight: 400;
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

/* Featured Media card */
.ca-cy-media { padding: 2.5rem; }
.ca-cy-media-subtitle { color: var(--gold); font-size: 0.95rem; margin-bottom: 1rem; }
.ca-cy-media-desc { color: #999; font-weight: 300; line-height: 1.8; margin-bottom: 1.75rem; }

/* Top/bottom seams for a section with a PHOTO background, as opposed to
   .ca-si-fade-b2d/d2b which blend two flat colors and are fully opaque end
   to end — that opacity would black out most of a photo behind them. These
   fade from a solid color at the seam to fully transparent moving into the
   section, so the photo stays visible except right at the edges. */
.ca-cy-media-fade-top,
.ca-cy-media-fade-bottom {
    position: absolute;
    left: 0; right: 0;
    height: 220px;
    pointer-events: none;
    z-index: 1;
}
.ca-cy-media-fade-top    { top: 0;    background: linear-gradient(to bottom, var(--black) 0%, transparent 100%); }
.ca-cy-media-fade-bottom { bottom: 0; background: linear-gradient(to top, var(--dark-bg) 0%, transparent 100%); }
@media (max-width: 767.98px) {
    .ca-cy-media-fade-top,
    .ca-cy-media-fade-bottom { height: 120px; }
}

/* Audio "toast" player (Bootstrap toast, restyled to match the dark brand) */
.ca-cy-audio-toast {
    background: var(--card-bg);
    border: 1px solid rgba(197,160,89,0.3);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    max-width: 360px;
}
.ca-cy-audio-toast audio { width: 100%; height: 32px; }
.ca-cy-audio-toast audio::-webkit-media-controls-panel { background-color: var(--card-bg); }

/* Leadership — subsections rendered as HA-style columns, reusing .ca-ha-cover */
.ca-cy-leadership-sub h5 { margin: 1.5rem 0 1.25rem; }
.ca-cy-role-list { list-style: none; margin: 0; padding: 0; }
.ca-cy-role-list li {
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 0.92rem;
    line-height: 1.6;
    color: #999;
}
.ca-cy-role-list li:last-child { border-bottom: none; }
.ca-cy-role-title { color: var(--white); font-weight: 600; margin-bottom: 0.2rem; }
.ca-cy-role-org { color: #999; margin-bottom: 0.2rem; }
.ca-cy-role-dates { color: var(--gold); font-size: 0.82rem; }

/* Services line on the CTA section — reuse the award-badge pill look */
.ca-si-services .ca-award-badge { cursor: default; }

/* "Let's Build Your Story" — remove the shared footer-cta's parallax photo,
   scoped to this page only so the Home page's footer CTA is unaffected. */
#consultancy-page .footer-cta {
    background: var(--black);
    background-attachment: initial;
}

@media (max-width: 575.98px) {
    /* Navbar */
    .navbar-brand img { width: 140px; }

    /* Hero text */
    .hero-content p { font-size: clamp(0.9rem, 4vw, 1rem); }

    /* Stats — reduce padding */
    .impact-stat { font-size: clamp(1.5rem, 8vw, 2.25rem); }

    /* Testimonials */
    .ca-testi-fade-left,
    .ca-testi-fade-right { width: 40px; }
    .ca-testimonial-strip { padding: 0 40px 4px; }
    .ca-testimonial-card { flex: 0 0 92vw; padding: 1.5rem; }
    .ca-testimonial-card blockquote { font-size: 0.93rem; }

    /* Logo marquee */
    .logo-slide { width: 160px; padding: 0 1rem; }
    .logo-slide img { max-height: 48px; }

    /* Newsletter — stack input + button vertically */
    .input-group:has(.ca-newsletter-input) { flex-direction: column; }
    .ca-newsletter-input {
        border-radius: 50px !important;
        width: 100% !important;
    }
    .ca-newsletter-btn {
        border-radius: 50px !important;
        margin-top: 0.5rem;
        width: 100% !important;
    }

    /* Footer columns — single column on very small screens */
    footer .col-6 { flex: 0 0 100%; max-width: 100%; }

    /* Featured project image */
    .ca-featured-img { max-height: 220px; }

    /* Custom logo */
    .custom-logo-link img,
    .custom-logo { width: 180px !important; }

    /* Storytelling */
    .ca-st-hero { min-height: 100svh; min-height: 100vh; }
    .ca-st-section { padding: 4rem 0; }
    .ca-st-cta { padding: 5rem 0 4rem; }
    .ca-story-card-body { padding: 1.25rem; }

    /* About */
    .ca-ab-section { padding: 4rem 0; }
    .ca-ab-cinematic { min-height: 80vh; padding: 4rem 0; }
    .ca-ab-fade-top,
    .ca-ab-fade-bottom { height: 120px; }
}

/* ── About page ── */
#about-page { overflow-x: clip; }

.ca-ab-section { padding: 6rem 0; }

/* Bio / Impact split-image sections reuse .ca-split-bg-left / -right
   (already used by the home page's About section) so their content sits
   above the background image consistently with the rest of the site. */
#ab-bio .container,
#ab-impact .container,
#ab-mission .container { position: relative; z-index: 3; }

/* Three editable image cards on the left of Bio & Credentials, replacing
   the section's old single full-bleed portrait. Equal-width, stretched to
   fill the column height; each fades in up on its own via .ca-reveal /
   .ca-reveal-dN (see section 14), staggered one after another. */
.ca-ab-bio-cards {
    display: flex;
    gap: 1rem;
    width: 100%;
    min-height: 280px;
}
.ca-ab-bio-card {
    flex: 1 1 0;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background-color: #161616;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255,255,255,0.07);
}
.ca-ab-bio-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.15);
    font-size: 1.75rem;
}
@media (max-width: 991.98px) {
    .ca-ab-bio-cards { min-height: 213px; }
}
@media (max-width: 575.98px) {
    .ca-ab-bio-cards { min-height: 133px; }
}

/* Impact & Leadership — extra vertical breathing room beyond the shared
   py-5/py-2 utilities, desktop only so mobile keeps its tighter spacing. */
@media (min-width: 992px) {
    #ab-impact .col-lg-7,
    #ab-impact .col-lg-5 {
        padding-top: 12rem;
        padding-bottom: 12rem;
    }
}

/* Thin accent divider + credentials row on the merged Bio & Credentials
   section — a nod to the reference layout's rule line under its intro text. */
.ca-ab-divider {
    width: 64px;
    height: 2px;
    background: var(--gold);
    margin: 2.25rem 0 2rem;
}
.ca-ab-cred-stat {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}
.ca-ab-cred-stat .impact-stat { font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1; }
.ca-ab-cred-stat-lbl { color: #999; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; max-width: 12ch; margin-top: 0.5rem; }
.ca-ab-cred-body {
    flex: 1 1 260px;
    color: #999;
    font-weight: 300;
    font-size: 0.98rem;
    line-height: 1.85;
}

.ca-ab-mission blockquote {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem);
    line-height: 1.65;
    color: #e6ded0;
    border: none; padding: 0; margin: 0 auto;
    max-width: 46ch;
}

/* Cinematic full-bleed transition band (background image + dark overlay,
   same overlay technique as the condensed hero, .ca-ha-hero-overlay) */
.ca-ab-cinematic {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-color: var(--dark-bg);
    overflow: hidden;
}
.ca-ab-cinematic .container { position: relative; z-index: 2; }
.ca-ab-cinematic-eyebrow {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.78rem;
    margin-bottom: 1.25rem;
}
.ca-ab-cinematic p.ca-ab-cinematic-body {
    max-width: 20ch;
    margin: 0 auto;
    color: rgba(255,255,255,0.85);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.9;
}

/* Transition 1 — text now lives in a col-lg-6 column (see ab-cinematic.php)
   instead of being sized by the shared ch-based cap used elsewhere in this
   band, so that cap and its auto-centering are reset here; the column
   itself governs width and the section's text-md-start governs alignment.
   Mobile still centers (text-center wins below the md breakpoint), same
   as the rest of the band. */
.ca-ab-cinematic--left p.ca-ab-cinematic-body {
    max-width: none;
    margin: 0;
}

/* Organisation / brand logos under Transition 1's paragraph — flex-wraps
   onto additional rows on its own as more logos are added from the
   back office, no layout changes needed. Each logo sits in a fixed
   200x150 slot; an empty slot shows a placeholder icon until an image
   is chosen from the back office. */
.ca-ab-cinematic-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 2rem;
}
@media (min-width: 768px) {
    .ca-ab-cinematic--left .ca-ab-cinematic-logos { justify-content: flex-start; }
}
.ca-ab-cinematic-logo {
    flex: 0 0 auto;
    width: 200px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #161616;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    overflow: hidden;
}
.ca-ab-cinematic-logo img {
    display: block;
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}
.ca-ab-cinematic-logo-placeholder {
    color: rgba(255,255,255,0.15);
    font-size: 2rem;
}
@media (max-width: 575.98px) {
    .ca-ab-cinematic-logo { width: 140px; height: 105px; }
}

.ca-ab-cinematic blockquote {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    color: var(--white);
    font-size: clamp(1.6rem, 1rem + 2.6vw, 2.75rem);
    line-height: 1.35;
    max-width: 20ch;
    margin: 0 auto;
    border: none; padding: 0;
}

/* Top/bottom seams for the cinematic bands — solid at the seam, fully
   transparent moving into the section, so the photo stays visible except
   right at the edges (same technique as the Consultancy page's Featured
   Media fades). */
.ca-ab-fade-top,
.ca-ab-fade-bottom {
    position: absolute;
    left: 0; right: 0;
    height: 200px;
    pointer-events: none;
    z-index: 1;
}
.ca-ab-fade-top    { top: 0; }
.ca-ab-fade-bottom { bottom: 0; }

/* ============================================================
   SERVICES — listing page + single service page
   Append to the end of main.css. Reuses the existing tokens
   (--gold, --dark-bg, --black) and the .ca-cy-service card.
   ============================================================ */

/* Listing cards: the whole card is a link */
.ca-svc-card { color: var(--white); }
.ca-svc-card:hover { color: var(--white); }
.ca-svc-card:hover h5 { color: var(--gold); }
.ca-svc-card h5 { transition: color 0.3s ease; }

.ca-svc-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
}
.ca-svc-card-price { color: var(--gold); font-weight: 400; }
.ca-svc-card-more  { color: #999; white-space: nowrap; transition: color 0.3s ease; }
.ca-svc-card:hover .ca-svc-card-more { color: var(--gold); }

/* Back link (hero + closing section) */
.ca-svc-back {
    display: inline-block;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.3s ease;
}
.ca-svc-back:hover { color: var(--gold); }

/* Overview intro */
.ca-svc-intro {
    color: #b5b5b5;
    font-weight: 300;
    font-size: 1.08rem;
    line-height: 1.9;
    max-width: 64ch;
}

/* "At a glance" panel */
.ca-svc-glance {
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}
.ca-svc-facts { margin: 0; }
.ca-svc-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ca-svc-facts > div:last-child { border-bottom: 0; }
.ca-svc-facts dt { color: #8a8a8a; font-weight: 300; font-size: 0.9rem; }
.ca-svc-facts dd { margin: 0; text-align: right; color: var(--white); font-size: 0.95rem; }

.ca-svc-price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    margin-top: 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(197, 160, 89, 0.35);
}
.ca-svc-price span   { color: #8a8a8a; font-weight: 300; font-size: 0.9rem; }
.ca-svc-price strong { color: var(--gold); font-weight: 400; font-size: 1.1rem; text-align: right; }

/* How it works: step number */
.ca-svc-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 1rem;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold);
    font-size: 0.85rem;
}

/* FAQ accordion, dark */
.ca-svc-faq .accordion-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
}
.ca-svc-faq .accordion-item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ca-svc-faq .accordion-button {
    background: transparent;
    color: var(--white);
    padding: 1.35rem 0;
    font-family: 'Libre Baskerville', serif;
    font-size: 1.05rem;
    box-shadow: none;
}
.ca-svc-faq .accordion-button:not(.collapsed) { color: var(--gold); background: transparent; box-shadow: none; }
.ca-svc-faq .accordion-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ca-svc-faq .accordion-button::after { filter: invert(1) brightness(0.8); }
.ca-svc-faq .accordion-body {
    padding: 0 0 1.5rem;
    color: #a5a5a5;
    font-weight: 300;
    line-height: 1.85;
}

/* ============================================================
   STORY TYPE PAGES — /storytelling/<type>/
   Append to the end of main.css. Reuses .ca-st-hero, .ca-st-section
   and the story card styles from the Storytelling page.
   ============================================================ */

#story-type-page { overflow-x: clip; }

/* Hero: a little shorter than the Storytelling hero */
.ca-sty-hero { min-height: 58vh; }

.ca-sty-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
    font-size: 0.85rem;
}
.ca-sty-crumbs a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.3s ease; }
.ca-sty-crumbs a:hover { color: var(--gold); }
.ca-sty-crumbs span { color: rgba(255,255,255,0.3); }

.ca-sty-intro,
.ca-sty-intro p {
    color: rgba(255,255,255,0.7);
    font-size: clamp(1rem, 2.2vw, 1.12rem);
    line-height: 1.85;
    max-width: 58ch;
}
.ca-sty-intro p:last-child { margin-bottom: 0; }

/* Category filter */
.ca-sty-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.ca-sty-filter a {
    padding: 0.5rem 1.15rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50px;
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    text-decoration: none;
    transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.ca-sty-filter a:hover { border-color: var(--gold); color: var(--gold); }
.ca-sty-filter a[aria-current="page"] {
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
}
.ca-sty-filter a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.ca-sty-count { color: rgba(255,255,255,0.45); font-size: 0.85rem; }

/* Previous / Next chapter */
.ca-sty-more { background: var(--black); }

/* Top blend: from the dark story grid above into this black section */
.ca-sty-more::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 180px;
    background: linear-gradient(to bottom, var(--dark-bg) 0%, var(--black) 100%);
    pointer-events: none;
    z-index: 1;
}

.ca-sty-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 3rem;
}
.ca-sty-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    color: var(--white);
    text-decoration: none;
    max-width: 100%;
}
.ca-sty-nav-link.is-prev { margin-right: auto; text-align: left; }
.ca-sty-nav-link.is-next { margin-left: auto; text-align: right; }   /* sits on the right even when alone */
.ca-sty-nav-link:hover { color: var(--white); }

.ca-sty-nav-img {
    flex: 0 0 auto;
    width: 112px;
    height: 112px;
    border-radius: 12px;
    background: linear-gradient(135deg, #111 0%, #1c1c1c 100%) center / cover no-repeat;
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: grayscale(20%) brightness(0.9);
}
.ca-sty-nav-link:hover .ca-sty-nav-img { transform: scale(1.04); filter: none; }

.ca-sty-nav-text  { display: flex; flex-direction: column; gap: 0.3rem; }
.ca-sty-nav-label { font-style: italic; font-size: 0.95rem; color: rgba(255,255,255,0.55); }
.ca-sty-nav-eyebrow {
    color: var(--gold);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.ca-sty-nav-title { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2; transition: color 0.3s ease; }
.ca-sty-nav-cta   { color: rgba(255,255,255,0.65); font-size: 0.85rem; margin-top: 0.2rem; transition: color 0.3s ease; }
.ca-sty-nav-link:hover .ca-sty-nav-title,
.ca-sty-nav-link:hover .ca-sty-nav-cta { color: var(--gold); }
.ca-sty-nav-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 12px; }

@media (max-width: 767px) {
    .ca-sty-hero { min-height: 70svh; }
    .ca-sty-nav-img { width: 88px; height: 88px; border-radius: 10px; }
}

/* "View all [14] Conservation Stories" — gold circle around the story count.
   Append to the end of main.css. */
.ca-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9em;
    height: 1.9em;
    padding: 0 0.45em;          /* keeps 2–3 digit counts round-ish (pill) */
    margin: 0 0.35em;
    border-radius: 999px;
    background: var(--gold);
    color: #000;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
    transition: background-color 0.3s ease, color 0.3s ease;
}
/* The button turns white on hover — keep the badge readable against it */
.btn-impact:hover .ca-count-badge { background: #000; color: var(--gold); }

/* ============================================================
   HERO SCROLL EFFECT — reusable on any hero
   Markup: <section … data-ca-hero-scroll>
             <div class="ca-hero-bg" style="background-image:…"></div>   (zooms out + parallax)
             …existing overlay…
             <div class="ca-hero-dim"></div>                             (darkens)
             <div class="… " data-ca-hero-content>…text…</div>            (fades out)
   Driven by main.js → "HERO SCROLL EFFECT". Disabled for reduced-motion users.
   ============================================================ */
.ca-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.15);           /* starting zoom; JS eases it to 1 */
    transform-origin: 50% 50%;
    will-change: transform;
}
.ca-hero-dim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000;
    opacity: 0;                       /* JS raises it as you scroll */
    pointer-events: none;
    will-change: opacity;
}
[data-ca-hero-content] { will-change: opacity, transform; }

/* Home: the zoom layer holds the video/poster. The video fills the layer
   edge to edge so its framing can follow the Image / Video Position setting. */
.ca-hero-bg--media .hero-video-bg {
    top: 0; left: 0;
    width: 100%; height: 100%;
    min-width: 0; min-height: 0;
    transform: none;
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    .ca-hero-bg { transform: none; }
}

/* Page wrappers clip sideways overflow with "clip" rather than "hidden":
   "hidden" silently turns each wrapper into its own scroll container,
   which is the one structural difference from the Home page and can make
   scroll-linked effects (the hero zoom/fade) update unevenly.
   Older browsers without "clip" fall back to "hidden". */
@supports not (overflow-x: clip) {
    #storytelling-page, #highlights-awards-page, #impact-filmmaking-page,
    #consultancy-page, #about-page, #story-type-page { overflow-x: hidden; }
}

/* ============================================================
   CONDENSED HEROES — Services, Highlights & Awards, Impact Filmmaking,
   Consultancy, About, single Service. Built with the Storytelling hero
   structure (.ca-st-hero), which scrolls smoothly, but keep the shorter
   heights they had as .ca-ha-hero. (.ca-sv-hero kept as an alias.)
   ============================================================ */
.ca-st-hero.ca-hero-condensed,
.ca-st-hero.ca-sv-hero { min-height: 90vh; padding: 8rem 0 3rem; }
.ca-st-hero.ca-hero-condensed.ca-cy-hero-align { padding-top: 9.5rem; }   /* Consultancy: text anchored to the top */

/* Impact Filmmaking & Consultancy: hero fades into black (the next section is black) */
#impact-filmmaking-page .ca-st-hero-fade,
#consultancy-page .ca-st-hero-fade {
    background: linear-gradient(to bottom, transparent 0%, var(--black) 100%);
}

/* Highlights & Awards: same tall, soft fade as the Storytelling hero, but into
   black — the first section under this hero is black. */
#highlights-awards-page .ca-st-hero-fade {
    height: 45%;
    min-height: 220px;
    background: linear-gradient(to bottom,
        rgba(0,0,0,0)    0%,
        rgba(0,0,0,0.04) 18%,
        rgba(0,0,0,0.14) 33%,
        rgba(0,0,0,0.30) 47%,
        rgba(0,0,0,0.50) 60%,
        rgba(0,0,0,0.70) 72%,
        rgba(0,0,0,0.86) 83%,
        rgba(0,0,0,0.96) 92%,
        var(--black)     100%);
}

/* Storytelling: a taller, softer bottom fade so the hero image dissolves gradually
   into the first chapter instead of ending in a short band. The extra colour stops
   ease the curve (gentle at the top, solid only at the very bottom), which avoids a
   visible edge. Same colour as the section below (--dark-bg = #0f0f0f). */
#storytelling-page .ca-st-hero-fade {
    height: 45%;
    min-height: 220px;
    background: linear-gradient(to bottom,
        rgba(15,15,15,0)    0%,
        rgba(15,15,15,0.04) 18%,
        rgba(15,15,15,0.14) 33%,
        rgba(15,15,15,0.30) 47%,
        rgba(15,15,15,0.50) 60%,
        rgba(15,15,15,0.70) 72%,
        rgba(15,15,15,0.86) 83%,
        rgba(15,15,15,0.96) 92%,
        var(--dark-bg)      100%);
}

@media (max-width: 767.98px) {
    .ca-st-hero.ca-hero-condensed,
    .ca-st-hero.ca-sv-hero { min-height: 55vh; min-height: 55svh; padding: 7rem 0 2.5rem; }
    .ca-st-hero.ca-hero-condensed.ca-cy-hero-align { padding-top: 8.5rem; }
}

/* ============================================================
   HERO SCROLL EFFECT — CSS MODE  (<section data-ca-hero-scroll="css">)
   Same zoom-out + parallax, darkening and text fade as the JavaScript
   version, but run by the browser on the scroll position itself, so the
   motion can never lag a frame behind the page. Used where the script
   version staggered. Browsers without scroll-driven animations ignore
   this block and main.js runs the effect instead.
   Progress: hero top at the top of the screen (0%) → hero fully scrolled
   past (100%) = the view-timeline "exit" range.
   ============================================================ */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        [data-ca-hero-scroll="css"] { view-timeline: --ca-hero block; }

        [data-ca-hero-scroll="css"] .ca-hero-bg,
        [data-ca-hero-scroll="css"] .ca-hero-dim,
        [data-ca-hero-scroll="css"] [data-ca-hero-content] {
            animation-timing-function: linear;
            animation-fill-mode: both;
            animation-timeline: --ca-hero;
            animation-range: exit 0% exit 100%;
        }
        [data-ca-hero-scroll="css"] .ca-hero-bg            { animation-name: ca-hero-bg; }
        [data-ca-hero-scroll="css"] .ca-hero-dim           { animation-name: ca-hero-dim; }
        [data-ca-hero-scroll="css"] [data-ca-hero-content] { animation-name: ca-hero-content; }
    }
}
@keyframes ca-hero-bg {
    from { transform: translate3d(0, 0, 0)   scale(1.15); }   /* zoomed in */
    to   { transform: translate3d(0, 35%, 0) scale(1); }      /* zoomed out, drifted down (parallax) */
}
@keyframes ca-hero-dim {
    from { opacity: 0; }
    to   { opacity: 0.9; }                                     /* image "disappears" */
}
@keyframes ca-hero-content {
    0%      { opacity: 1; transform: translate3d(0, 0, 0); }
    71.4%   { opacity: 0; }                                    /* text gone at ~70% of the hero */
    100%    { opacity: 0; transform: translate3d(0, -40px, 0); }
}