/* ════════════════════════════════════════════════════════════════
   CHORD SITE THEME
   Centralized design tokens + reusable component styles for the
   public-facing site (templates/header.php + templates/footer.php
   and everything rendered inside them - Home, Members, Organizations).
   Change the variables in :root to re-theme the whole site; avoid
   hardcoding colors elsewhere in the project.

   Loaded after bootstrap.min.css, so these overrides win the cascade.
   The Admin panel uses its own admin_header.php/admin_footer.php and
   intentionally does not load this file.
   ════════════════════════════════════════════════════════════════ */

:root {
    --saffron: #FF6B00;
    --saffron-deep: #C44A00;
    --saffron-glow: #FF9040;
    --saffron-pale: #FFF3E8;
    --gold: #D4A017;
    --gold-lt: #F5CE5A;
    --cream: #FAF6EF;
    --earth: #1E0D00;
    --earth-mid: #3B1A00;
    --earth-rich: #5C2E00;
    --ink: #1A0D00;
    --muted: #7A6050;
    --red-india: #FF2400;
    --green-india: #138808;

    --ff-display: 'Cinzel', serif;
    --ff-serif: 'Cormorant Garamond', serif;
    --ff-body: 'Inter', sans-serif;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    /* Bootstrap semantic variables - retint links/focus rings from
       this one spot instead of overriding each component individually.
       Deliberately NOT overriding --bs-body-bg/--bs-body-color here:
       Bootstrap 5.3 reuses that same pair as the default background/text
       color for .form-control, .card, .dropdown-menu, .table, .modal,
       etc., so doing it at root would darken form inputs too and kill
       their contrast against the dark page. The page background is set
       explicitly on the body element below instead, leaving those
       components on their normal light background for legibility. */
    --bs-primary: var(--saffron);
    --bs-primary-rgb: 255, 107, 0;
    --bs-link-color: var(--saffron-glow);
    --bs-link-color-rgb: 255, 144, 64;
    --bs-link-hover-color: var(--saffron);
    --bs-link-hover-color-rgb: 255, 107, 0;
    --bs-body-font-family: var(--ff-body);

}

/* Same light parchment gradient as .mission-section, used as the
   whole public site's page background (Home, Members, Organizations)
   - Bootstrap's own default --bs-secondary-color (a dark, near-black
   tone) is already correct for a light background like this, so
   unlike the old dark theme this needs no override at all. */
/* Sticky footer: on pages shorter than the viewport (e.g. the
   Organizations/Members forms), body/main/footer are plain block-flow
   siblings with nothing forcing the footer down to the bottom edge -
   the light body background used to blend into the equally-dark
   footer below it, so the gap was invisible; against this light
   background it would show as a stray pale band under the footer. */
body {
    overflow-x: hidden;
    background: linear-gradient(180deg, #FFF9F2 0%, #FDF3E8 55%, #F9EBDD 100%);
    /* Same muted tone as .mission-section .about-body-text (which this
       background is matched to) - headings stay solid var(--ink),
       see the h1-h6 rule below. */
    color: rgba(26, 13, 0, 0.72);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1 0 auto;
}

body > .site-footer {
    flex-shrink: 0;
}

/* Placeholder text lives inside .form-control's light input box, not
   on the dark page - it needs a normal muted gray, not the light
   --bs-secondary-color above (which is what .text-muted deliberately
   uses instead, for the opposite reason). Same specificity as
   Bootstrap's own .form-control::placeholder rule, loaded after it,
   so this wins the cascade. */
.form-control::placeholder {
    color: #6c757d;
    opacity: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-display);
}

/* Solid dark heading color against the new light body background,
   matching .section-title.dark's treatment in .mission-section -
   scoped to body's own direct-child <main> (this file's public pages
   only: Home/Members/Organizations) so it can't bleed into the
   Admin/Org Portal, which also loads theme.css but nests its own
   <main> inside a wrapper div instead of a direct body child. */
body > main h1,
body > main h2,
body > main h3,
body > main h4,
body > main h5,
body > main h6 {
    color: var(--ink);
}

/* Bootstrap bakes each component's colors into local custom
   properties rather than referencing --bs-primary directly, so
   .btn-primary needs its own override to pick up the theme. */
.btn-primary {
    --bs-btn-bg: var(--saffron);
    --bs-btn-border-color: var(--saffron-deep);
    --bs-btn-hover-bg: var(--saffron-deep);
    --bs-btn-hover-border-color: var(--saffron-deep);
    --bs-btn-active-bg: var(--saffron-deep);
    --bs-btn-active-border-color: var(--saffron-deep);
    --bs-btn-disabled-bg: var(--saffron);
    --bs-btn-disabled-border-color: var(--saffron);
}

.btn-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--saffron-deep) 0%, var(--saffron) 60%, var(--saffron-glow) 100%);
    color: #FFF;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: 0.05em;
    padding: 15px 36px;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 10px 30px rgba(196, 74, 0, 0.24);
}

.btn-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
    transform: translateX(-100%) skewX(-15deg);
    transition: transform 0.5s ease;
}

.btn-main:hover::before {
    transform: translateX(200%) skewX(-15deg);
}

.btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 38px rgba(196, 74, 0, 0.3);
    color: #FFF;
}

.btn-main.btn-white {
    background: rgba(255, 255, 255, 0.55);
    color: var(--earth-rich);
    box-shadow: none;
    border: 1px solid rgba(196, 74, 0, 0.28);
}

.btn-main.btn-white:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(196, 74, 0, 0.4);
    color: var(--saffron-deep);
    box-shadow: none;
}

/* Small size variant, same idea as Bootstrap's .btn-sm - .btn-main has
   no size modifiers of its own by default. */
.btn-main.btn-sm {
    padding: 8px 18px;
    font-size: 12px;
    gap: 6px;
}

/* ── Navbar ── */
.nav-wrap {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(180deg, #fff1df 0%, #ffd8a8 45%, #f8c16f 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(196, 74, 0, 0.18);
    box-shadow: 0 10px 28px rgba(140, 55, 0, 0.12);
}

.nav-wrap .navbar {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 32px;
}

/* .container-fluid brings its own 12px horizontal gutter by default,
   which was stacking on top of the 32px above - 44px of dead space
   pushing the logo/toggler in from the edge, worst on narrow phones
   where that's a big chunk of the screen. The nav's own padding is
   the only horizontal inset needed here. */
.nav-wrap .navbar > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
}

.logo-block {
    max-width: 100px;
    height: auto;
}

/* Bigger logo in the public site's own nav only - .logo-block is
   shared with the Admin/Organization Portal login pages, which must
   keep their current (smaller) size untouched. */
.nav-wrap .logo-block {
    max-width: 200px;
}

.logo-block img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.nav-links .nav-link {
    color: #7a3a00;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}

.nav-links .nav-link:hover,
.nav-links .nav-link.active {
    color: #a14f00;
    background: rgba(255, 255, 255, 0.35);
}

/* Themed dropdown (e.g. Media > Press Release) - matches the nav's
   own warm palette instead of Bootstrap's plain white default. */
.nav-links .dropdown-menu {
    background: var(--cream);
    border: 1px solid rgba(196, 74, 0, 0.18);
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(140, 55, 0, 0.18);
    padding: 8px;
    margin-top: 10px;
}

.nav-links .dropdown-item {
    color: #7a3a00;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 10px 14px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}

.nav-links .dropdown-item:hover,
.nav-links .dropdown-item:focus,
.nav-links .dropdown-item.active {
    color: #a14f00;
    background: rgba(255, 107, 0, 0.1);
}

/* ── Reusable page-title band (see templates/page_header.php): a
   full-bleed gradient header for any content page, using the same
   gradient as the Home page hero/banner. Breaks out of <main>'s
   .container via the 50vw technique - body already has
   overflow-x:hidden (see top of file), which is what keeps this from
   causing a horizontal scrollbar. ── */
.page-header-band {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -1.5rem;
    margin-bottom: 48px;
    background: linear-gradient(135deg, var(--saffron-pale) 0%, #fce4b8 45%, #f7bf71 100%);
    border-bottom: 1px solid rgba(255, 107, 0, 0.15);
    padding: 48px 24px;
}

@media (max-width: 768px) {
    .page-header-band {
        padding: 32px 20px;
        margin-bottom: 32px;
    }
}

/* Press Release thumbnail - object-fit:contain (not cover) so the
   whole image always shows regardless of whether it's portrait or
   landscape, letterboxed on a neutral ground rather than cropped. */
.pr-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--saffron-pale);
    overflow: hidden;
}

.pr-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Share button - a small circular icon overlaid on the listing card's
   thumbnail, and reused plain (as a labeled .btn-main) on the detail
   page. z-index:2 beats the card's .stretched-link (Bootstrap sets
   that pseudo-element's z-index to 1), so clicking the icon shares
   instead of triggering the whole-card link to the detail page. */
.pr-thumb-wrap {
    position: relative;
}

.share-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--saffron-deep);
    border: 1px solid rgba(196, 74, 0, 0.22);
    box-shadow: 0 4px 10px rgba(30, 13, 0, 0.18);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.share-btn:hover {
    background: #fff;
    transform: translateY(-1px);
}

/* PDF.js viewer (see assets/js/pdf-viewer.js) - a themed container
   that fills with one <canvas> per rendered page. */
.pdf-viewer {
    background: #f4efe6;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(30, 13, 0, 0.12);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.pdf-viewer-status {
    padding: 60px 0;
}

/* Zoom In/Out toolbar - see assets/js/pdf-viewer.js. Not sticky: this
   viewer is typically only a few pages, so a fixed control bar wasn't
   worth the complexity of sitting correctly under the sticky navbar. */
.pdf-viewer-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid rgba(196, 74, 0, 0.2);
    border-radius: 999px;
    padding: 6px 10px;
    box-shadow: 0 4px 14px rgba(30, 13, 0, 0.1);
}

.pdf-zoom-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--saffron-pale);
    color: var(--saffron-deep);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
}

.pdf-zoom-btn:hover {
    background: rgba(255, 107, 0, 0.25);
}

.pdf-zoom-label {
    min-width: 46px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--earth-mid);
}

.pdf-viewer-pages {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Each page gets its own horizontal scroller instead of the whole
   .pdf-viewer-pages stack scrolling as one flex row: a canvas centered
   via flex align-items can't be scrolled all the way to its start-side
   edge once zoomed past the container width in most browsers. A plain
   (non-flex) text-align:center wrapper doesn't have that limitation. */
.pdf-page-scroll {
    width: 100%;
    overflow-x: auto;
    text-align: center;
}

.pdf-viewer-page {
    display: inline-block;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.share-btn-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    white-space: nowrap;
    background: var(--ink);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
}

.nav-wrap .navbar-toggler {
    border-color: rgba(255, 107, 0, 0.3);
}

.nav-wrap .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 0, 0.25);
}

/* ════════════════════════════════════
   HERO SECTION
════════════════════════════════════ */
.hero-section {
    position: relative;
    min-height: 90vh;
    overflow: hidden;
    background: linear-gradient(135deg, var(--saffron-pale) 0%, #fce4b8 45%, #f7bf71 100%);
    color: var(--earth);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mandala-3d {
    position: absolute;
    right: -6vw;
    top: 50%;
    transform: translateY(-50%);
    width: 55vw;
    max-width: 820px;
    aspect-ratio: 1;
    z-index: 2;
    pointer-events: none;
}

.mandala-3d svg {
    width: 100%;
    height: 100%;
    animation: mandalaRotate 60s linear infinite;
    filter: drop-shadow(0 0 40px rgba(255, 107, 0, 0.25));
}

.mandala-3d .ring-1 { animation: ringRotate1 20s linear infinite; transform-origin: center; }
.mandala-3d .ring-2 { animation: ringRotate2 35s linear infinite reverse; transform-origin: center; }
.mandala-3d .ring-3 { animation: ringRotate3 50s linear infinite; transform-origin: center; }

@keyframes mandalaRotate { from { transform: rotateZ(0deg); } to { transform: rotateZ(10deg); } }
@keyframes ringRotate1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ringRotate2 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes ringRotate3 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.hero-portrait-wrap {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 46vw;
    max-width: 700px;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}

.hero-portrait-img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: brightness(0.92) contrast(1.05);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 20%, black 45%, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 20%, black 45%, black 100%);
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 1280px;
    margin: 0 auto;
    /* Less top/bottom padding than before - with this much text
       (eyebrow + 3-line title + subtitle + lead paragraph + button)
       centered in .hero-section's 90vh, the old 80px both sides left
       the .scroll-indicator below (position:absolute; bottom:24px on
       the section) sitting right at or past the fold on shorter
       laptop viewports. */
    padding: 56px 48px 32px;
    width: 100%;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 20px;
    border-radius: 100px;
    border: 1px solid rgba(196, 74, 0, 0.22);
    background: rgba(255, 255, 255, 0.62);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--saffron-deep);
    margin-bottom: 28px;
    backdrop-filter: blur(8px);
}

.hero-eyebrow-dot {
    width: 6px;
    height: 6px;
    background: var(--saffron);
    border-radius: 50%;
    animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.7); }
    50% { box-shadow: 0 0 0 6px rgba(255, 107, 0, 0); }
}

.hero-devanagari {
    font-family: var(--ff-serif);
    font-size: clamp(16px, 2vw, 22px);
    font-style: italic;
    color: rgba(255, 180, 80, 0.8);
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}

.hero-title {
    font-family: var(--ff-display);
    font-size: clamp(34px, 5.5vw, 58px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--earth-rich);
    margin-bottom: 10px;
}

/* Not scoped to .hero-title only - the Bridge section's pull-quote
   ("trust" / "understanding" / "common good") reuses this same
   gradient-text treatment. */
.accent {
    background: linear-gradient(135deg, var(--saffron-deep), var(--saffron));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-title .accent {
    font-size: clamp(34px, 5.85vw, 72px);
}

.hero-title-sub {
    display: block;
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 600;
    color: rgba(36, 18, 0, 0.9);
    margin-top: 10px;
    letter-spacing: 0.01em;
}

.hero-lead {
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.85;
    color: rgba(36, 18, 0, 0.9);
    max-width: 520px;
    margin: 24px 0 36px;
}

.hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Part of .hero-content's own centered flex flow (not absolutely
   pinned to the section's bottom edge) - that used to let it collide
   with the CTA button on shorter viewports, since .hero-content is
   centered independently of wherever a bottom:24px anchor landed. */
.scroll-indicator {
    margin-top: 40px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(36, 18, 0, 0.4);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
}

.scroll-mouse {
    width: 22px;
    height: 36px;
    /* Dark tones, not light - the hero background is now a light
       cream/gold gradient, not the dark one this used to sit on. */
    border: 1.5px solid rgba(36, 18, 0, 0.35);
    background: rgba(36, 18, 0, 0.05);
    border-radius: 11px;
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.scroll-mouse::after {
    content: '';
    width: 3px;
    height: 8px;
    background: rgba(255, 107, 0, 0.6);
    border-radius: 2px;
    animation: scrollDown 2s ease-in-out infinite;
}

@keyframes scrollDown {
    0%, 100% { transform: translateY(0); opacity: 1; }
    80% { transform: translateY(10px); opacity: 0; }
}

/* ════════════════════════════════════
   GENERIC SECTION UTILITIES
════════════════════════════════════ */
.section {
    padding: 100px 0;
}

.section-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--saffron);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-eyebrow::before {
    content: '';
    width: 30px;
    height: 1.5px;
    background: var(--saffron);
    border-radius: 1px;
}

.section-title {
    font-family: var(--ff-display);
    font-size: clamp(28px, 3.5vw, 46px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: 0.01em;
}

.section-title.light { color: #FFF; }

.ornament {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ornament-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 0, 0.4), transparent);
}

/* ════════════════════════════════════
   ABOUT SECTION
════════════════════════════════════ */
.about-section {
    background: linear-gradient(180deg, #0A0400 0%, #1E0D00 40%, #130800 100%);
    position: relative;
    overflow: hidden;
}

.about-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 0, 0.3), transparent);
}

.about-body-text {
    font-size: 16px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 16px;
}

.about-checklist {
    list-style: none;
    margin: 24px 0 36px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.about-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

.check-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 107, 0, 0.15);
    border: 1.5px solid rgba(255, 107, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--saffron-glow);
    font-size: 11px;
}

.quote-card {
    background: rgba(255, 107, 0, 0.06);
    border: 1px solid rgba(255, 107, 0, 0.2);
    border-left: 4px solid var(--saffron);
    border-radius: 12px;
    padding: 32px 36px;
    position: relative;
    overflow: hidden;
    margin-bottom: 32px;
}

.quote-card::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 20px;
    font-family: var(--ff-serif);
    font-size: 120px;
    color: rgba(255, 107, 0, 0.08);
    line-height: 1;
    pointer-events: none;
}

.quote-text {
    font-family: var(--ff-serif);
    font-size: clamp(16px, 2vw, 20px);
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 16px;
}

.quote-attr {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--saffron-glow);
}

.about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 107, 0, 0.12);
    border-radius: 12px;
    padding: 22px 20px;
    text-align: center;
    transition: all 0.3s;
}

.stat-card:hover {
    border-color: rgba(255, 107, 0, 0.3);
    transform: translateY(-3px);
}

.stat-num {
    font-family: var(--ff-display);
    font-size: 38px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--saffron-glow), var(--gold-lt));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1;
    margin-bottom: 6px;
}

.stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

/* ════════════════════════════════════
   LEGAL CONTENT PAGES (Privacy Policy, Terms & Conditions, SMS Consent)
════════════════════════════════════ */
.legal-content {
    max-width: 820px;
    margin: 0 auto 64px;
    font-size: 16px;
    line-height: 1.8;
}

.legal-meta {
    display: flex;
    flex-wrap: wrap;
    column-gap: 28px;
    row-gap: 6px;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 107, 0, 0.15);
    font-size: 14px;
    color: var(--muted);
}

.legal-meta strong {
    color: var(--ink);
}

.legal-intro {
    font-size: 17px;
    color: rgba(26, 13, 0, 0.78);
    margin-bottom: 40px;
}

.legal-section {
    margin-bottom: 36px;
}

.legal-section h2 {
    font-size: 22px;
    color: var(--earth-mid);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 107, 0, 0.12);
}

.legal-section p {
    margin-bottom: 14px;
}

.legal-section ul {
    margin: 0 0 14px;
    padding-left: 0;
    list-style: none;
}

.legal-section li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
}

.legal-section li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--saffron);
}

/* ════════════════════════════════════
   FOOTER
════════════════════════════════════ */
.site-footer {
    background: #050200;
    border-top: 1px solid rgba(255, 107, 0, 0.12);
    padding: 32px 0;
}

.footer-legal {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 107, 0, 0.12);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

.footer-legal-dot {
    opacity: 0.35;
}

.footer-legal a {
    color: rgba(255, 107, 0, 0.6);
    text-decoration: none;
}

.footer-legal a:hover {
    color: var(--saffron-glow);
}

.footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.footer-bottom > span {
    justify-self: start;
}

.footer-bottom a {
    color: rgba(255, 107, 0, 0.6);
    text-decoration: none;
}

.footer-bottom a:hover {
    color: var(--saffron-glow);
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    justify-self: center;
}

.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 107, 0, 0.28);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}

.footer-social a:hover,
.footer-social a:focus-visible {
    color: var(--saffron-glow);
    border-color: rgba(255, 107, 0, 0.65);
    background: rgba(255, 107, 0, 0.12);
    transform: translateY(-2px);
}

.footer-social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/*
 * "Maker's seal" credit: a small dashed badge holding the Webmobi
 * Technologies icon mark that continuously, gently opens to reveal
 * the studio name (as two stacked lines, so nothing needs to be wide
 * enough to overflow narrow viewports) and closes again on a loop -
 * not gated behind hover, so it reads the same on touch devices -
 * instead of a plain static "Design and developed by" line sitting in
 * the footer.
 */
.maker-seal {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.45);
}

.maker-seal-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 107, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    animation: makerBadgePulse 6s ease-in-out infinite;
}

/*
 * The source logo is a wide icon+wordmark lockup (2500x490). Only the
 * angular "W" icon mark (its first ~650px) is used here - scaling the
 * whole image to a 24px-tall strip and clipping a 32px-wide window
 * shows just that icon, cropped via CSS rather than a second asset.
 */
.maker-logo-crop {
    width: 32px;
    height: 24px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.maker-logo-crop img {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: auto;
    max-width: none;
}

/*
 * Same slide-open reveal as before (badge stays put, text max-width
 * grows from 0), just retargeted to fit the two stacked lines
 * ("Design & developed by" / "Webmobi Technologies Inc.") - each line
 * is narrower than the old single-line version, so 180px comfortably
 * fits both without overflowing even the narrowest viewports.
 */
.maker-seal-text {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.5;
    font-size: 12px;
    letter-spacing: 0.02em;
    animation: makerTextReveal 6s ease-in-out infinite;
}

.maker-seal-text strong {
    color: var(--saffron-glow);
    font-weight: 600;
}

@keyframes makerBadgePulse {
    0%, 55%, 100% {
        border-color: rgba(255, 107, 0, 0.5);
        background: transparent;
        box-shadow: none;
    }
    70%, 90% {
        border-color: var(--saffron);
        background: rgba(255, 107, 0, 0.12);
        box-shadow: 0 0 12px rgba(255, 107, 0, 0.35);
    }
}

@keyframes makerTextReveal {
    0%, 55%, 100% {
        max-width: 0;
        opacity: 0;
        margin-left: 0;
    }
    70%, 90% {
        max-width: 180px;
        opacity: 1;
        margin-left: 10px;
    }
}

/*
 * Hover/focus only nudges the link's own color - it deliberately does
 * NOT try to pause/force-open the badge or text. animation-play-state:
 * paused freezes at whatever the loop's current frame is rather than
 * snapping to "open", so pairing it with a static max-width/opacity
 * override fought the animation engine instead of guaranteeing the
 * open state.
 */
.maker-seal:hover,
.maker-seal:focus-visible {
    color: rgba(255, 255, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
    .maker-seal-badge,
    .maker-seal-text {
        animation: none;
    }

    .maker-seal-text {
        max-width: 180px;
        opacity: 1;
        margin-left: 10px;
    }
}

/* ════════════════════════════════════
   HOME PAGE: CHORD LAYOUT
   New sections for the redesigned Home page (Mission / Vision-Bridge /
   Join CTA). Reuses .hero-*, .section-*, .btn-main/.btn-white,
   .ornament, .about-body-text etc. above wherever the visual pattern
   already matches - only classes with no existing equivalent are
   added here.
════════════════════════════════════ */

/* Centered mandala watermark behind the Hero's centered text - the
   existing .mandala-3d is offset to the right, meant to sit behind a
   portrait photo, which this hero doesn't have. Reuses the ring
   rotation keyframes already defined above under HERO SECTION. */
.mandala-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(54vw, 780px);
    /* Below ~520px viewport, 54vw shrinks the 400-unit SVG viewBox down
       far enough that its thin (0.6-0.9px) ring strokes round to under
       a device pixel and disappear entirely - only the bold Aum
       glyph stayed visible. A floor keeps the rings themselves
       legible on phones; .hero-section's own overflow:hidden clips
       anything that would otherwise poke past the viewport edge. */
    min-width: 320px;
    aspect-ratio: 1;
    z-index: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 40px rgba(255, 107, 0, 0.18));
    opacity: 0.9;
}

.mandala-wrap .ring-1 { animation: ringRotate1 22s linear infinite; transform-origin: center; }
.mandala-wrap .ring-2 { animation: ringRotate2 38s linear infinite reverse; transform-origin: center; }
.mandala-wrap .ring-3 { animation: ringRotate3 55s linear infinite; transform-origin: center; }

/* Small serif ornament symbol used between the .ornament-lines. */
.ornament-sym {
    font-family: var(--ff-serif);
    font-size: 18px;
    color: rgba(255, 107, 0, 0.4);
    letter-spacing: 8px;
}

/* Dark-text variant of .section-title, for sections on a light
   background (.mission-section below) - .light above already covers
   dark backgrounds. */
.section-title.dark {
    color: var(--ink);
}

/* Centered sections (Mission/Bridge) want a dash on both sides of the
   eyebrow label, not just the leading one .section-eyebrow::before
   already provides for the existing left-aligned About section. */
.mission-section .section-eyebrow::after,
.bridge-section .section-eyebrow::after {
    content: '';
    width: 30px;
    height: 1.5px;
    background: var(--saffron);
    border-radius: 1px;
}

/* ── Mission section: light parchment band between the dark Hero and
   the Bridge/CTA sections below ── */
.mission-section {
    background: linear-gradient(180deg, #FFF9F2 0%, #FDF3E8 55%, #F9EBDD 100%);
    position: relative;
    overflow: hidden;
    padding-block: 100px;
    border-top: 1px solid rgba(255, 107, 0, 0.12);
    border-bottom: 1px solid rgba(255, 107, 0, 0.12);
}

.mission-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top center, rgba(255, 107, 0, 0.08), transparent 62%);
    pointer-events: none;
}

/* .about-body-text is styled for the dark theme (light text) - this
   section has a light background instead, so it needs the opposite
   contrast, same reasoning as the admin panel's body/text-muted
   overrides. */
.mission-section .about-body-text {
    color: rgba(26, 13, 0, 0.72);
}

/* ── Vision/Bridge section: a single large pull-quote ── */
.bridge-section {
    background: var(--cream);
    padding-block: 100px;
    position: relative;
    overflow: hidden;
}

.bridge-inner {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    padding: 0 40px;
}

.big-quote {
    font-family: var(--ff-serif);
    font-size: clamp(22px, 3.5vw, 40px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    color: var(--earth-mid);
    margin-bottom: 32px;
}

.bridge-taglines {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}

.tagline-pill {
    padding: 10px 24px;
    border-radius: 100px;
    border: 1.5px solid rgba(255, 107, 0, 0.3);
    background: rgba(255, 107, 0, 0.07);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--earth-mid);
    transition: background 0.2s, border-color 0.2s;
}

/* ── Welcome Banner: a centered section title (same double-dash
   treatment as About CHORD / Our Vision for Canada) sits above an
   image + copy row - matches how every other section on this page
   titles itself, even though the row underneath is a 2-column layout
   rather than the single centered column Mission/Bridge use. ── */
.welcome-banner-section {
    padding-block: 60px;
}

.welcome-banner-eyebrow {
    justify-content: center;
    margin-bottom: 32px;
}

.welcome-banner-eyebrow::after {
    content: '';
    width: 30px;
    height: 1.5px;
    background: var(--saffron);
    border-radius: 1px;
}

/* Image/content columns and their mobile stacking are plain Bootstrap
   .row/.col-lg-4/.col-lg-8 now (see home.php) - only the visual
   treatment Bootstrap doesn't provide lives here. */
.welcome-banner-image img {
    max-height: 520px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(30, 13, 0, 0.18);
}

/* .about-body-text defaults to light text for the dark .about-section -
   this section sits on the page's light background instead, same fix
   as .mission-section .about-body-text above. */
.welcome-banner-content .about-body-text {
    color: rgba(26, 13, 0, 0.72);
}


.welcome-banner-tagline {
    font-family: var(--ff-serif);
    font-size: 20px;
    font-style: italic;
    font-weight: 600;
    color: var(--earth-mid);
    margin-bottom: 16px;
}

.welcome-banner-hashtags .tagline-pill {
    padding: 8px 18px;
    font-size: 11px;
}

@media (max-width: 991.98px) {
    .welcome-banner-image img {
        max-width: 360px;
        max-height: 440px;
        margin: 0 auto;
    }
}

.tagline-pill:hover {
    background: rgba(255, 107, 0, 0.14);
    border-color: rgba(255, 107, 0, 0.55);
}

/* ── Join CTA band ── */
.cta-band {
    background: linear-gradient(135deg, #0D0500 0%, var(--earth-mid) 50%, #0D0500 100%);
    border-top: 1px solid rgba(255, 107, 0, 0.15);
    border-bottom: 1px solid rgba(255, 107, 0, 0.15);
    padding: 80px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(255, 107, 0, 0.08), transparent);
}

.cta-band-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--saffron-glow);
    margin-bottom: 16px;
    position: relative;
}

.cta-band-title {
    font-family: var(--ff-display);
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 500;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
    position: relative;
}

.cta-band-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    max-width: 580px;
    margin: 0 auto 40px;
    line-height: 1.85;
    position: relative;
}

.cta-band-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media (max-width: 1024px) {
    .about-section .row > [class^="col-"] {
        margin-bottom: 40px;
    }
}

/* The mandala's rings are deliberately faint on a large laptop/desktop
   screen, where the mandala itself renders large enough for that
   subtlety to still read clearly. Shrunk down on tablet/mobile
   (< 992px, matching the lg breakpoint used elsewhere in the project),
   those same low-opacity strokes become hard to make out - CSS wins
   over the SVG's own inline stroke/fill attributes, so this darkens
   just the ring/petal strokes and the Aum glyph for smaller screens
   only, leaving the laptop/desktop look untouched. */
@media (max-width: 991px) {
    .mandala-wrap {
        opacity: 1;
    }

    .mandala-wrap .ring-circles-outer { stroke: rgba(255, 107, 0, 0.32); }
    .mandala-wrap .ring-circles-mid   { stroke: rgba(255, 150, 40, 0.3); }
    .mandala-wrap .ring-circles-inner { stroke: rgba(212, 160, 23, 0.38); }
    .mandala-wrap .ring-1 { stroke: rgba(255, 107, 0, 0.34); }
    .mandala-wrap .ring-2 { stroke: rgba(255, 150, 40, 0.36); }
    .mandala-wrap .ring-3 { stroke: rgba(212, 160, 23, 0.46); }
    .mandala-wrap .om-glyph { fill: rgba(255, 150, 40, 0.4); }
}

@media (max-width: 768px) {
    .nav-wrap .navbar {
        padding: 12px 16px;
    }

    .hero-portrait-wrap {
        width: 100%;
        opacity: 0.25;
    }

    .hero-content {
        /* The old 100px top padding was sized to clear a portrait photo
           that doesn't exist in this hero - .hero-section already
           vertically centers .hero-content via justify-content:center,
           so a much smaller value is enough breathing room and stops
           a large empty gap forming above the eyebrow on short/mobile
           viewports. */
        padding: 32px 24px 60px;
    }

    .mandala-3d {
        right: -20%;
        width: 80vw;
    }

    .section,
    .mission-section,
    .bridge-section {
        padding-block: 64px;
    }

    .cta-band {
        padding: 64px 20px;
    }

    .bridge-taglines {
        gap: 8px;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-bottom > span,
    .footer-social,
    .maker-seal {
        justify-self: center;
    }
}
.canada-flag {
    width: 22px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}