@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Elsie:wght@400;900&family=Poppins:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

:root {
    color-scheme: light;
    --ink: #27282c;
    --muted: #8b8883;
    --line: #e4dfd8;
    --paper: #ffffff;
    --wash: #f7f4ef;
    --tan: #c1a78c;
    --sand: #d4cbc2;
    --accent: #a9835f;

    /* Brand typography (Ashaeiynn) — Elsie for display headings, Poppins for
       nav/UI chrome, Inter for body copy: the same three-family split the
       live marketing site uses. */
    --font-display: 'Elsie', Georgia, serif;
    --font-nav: 'Poppins', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* The source sets the hero badge and other small-caps marks in Cinzel. */
    --font-mark: 'Cinzel', Georgia, serif;

    /* Design tokens (Sprint L3) — one small system every public screen draws
       from, instead of each module hand-picking its own radius/shadow/spacing. */
    --accent-ink: #ffffff;
    --radius-sm: .4rem;
    --radius: .75rem;
    --radius-lg: 1.25rem;
    --pill: 999px;
    --shadow-sm: 0 1px 2px rgba(23, 32, 42, .07);
    --shadow: 0 10px 30px rgba(23, 32, 42, .08);
    --shadow-lg: 0 20px 48px rgba(23, 32, 42, .14);
    --content-width: 72rem;
    --content-width-narrow: 48rem;
    --space-2xs: .35rem;
    --space-xs: .65rem;
    --space-sm: 1.1rem;
    --space-md: 1.75rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    /* Source-measured: the live site runs 16px on a 1.4 leading. Ours ran
       17/1.65, which is what made every band taller than its counterpart. */
    font: 16px/1.4 var(--font-body);
}

a { color: var(--accent); }

h1, h2, h3, h4, h5, h6,
.pb-heading, .site-brand:not(.site-brand-logo) {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -.01em;
}

.site-nav a, .site-footer-nav a, .site-nav-toggle-btn { font-family: var(--font-nav); }

/* Skip link + screen-reader-only text — every PublicShell document emits both. */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: var(--paper);
    padding: .75rem 1.25rem;
    border-radius: 0 0 var(--radius-sm) 0;
    z-index: 100;
    text-decoration: none;
}
.skip-link:focus { left: 0; }

.admin-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Shared public shell — header/nav/footer (Sprint L1) */

.site-brand-logo img { display: block; height: 4rem; width: auto; }

/* WordPress-parity transparent header: on pages whose opening section is the
   brand tan (or dark) band, the source site's header floats over that band
   with white nav text. Applied per-page via body.header-overlay — a page that
   opens on white keeps the solid bordered header below. */
body.header-overlay .site-header {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 30;
    background: transparent;
    border-bottom: 0;
}
/* White header ink only over the darker tan/dark bands; a page opening on
   the light sand band keeps dark header ink (matching the source). */
body.header-overlay-light .site-brand { color: #ffffff; }
body.header-overlay-light .site-nav a { color: #ffffff; }
body.header-overlay-light .site-nav a:hover,
body.header-overlay-light .site-nav a:focus-visible { color: var(--ink); }
body.header-overlay-light .site-header-cta { color: #ffffff; border-color: #ffffff; }
body.header-overlay-light .site-header-cta:hover { background: #ffffff; color: var(--ink); }
body.header-overlay-light .site-nav-toggle-icon,
body.header-overlay-light .site-nav-toggle-icon::before,
body.header-overlay-light .site-nav-toggle-icon::after { background: #ffffff; }

.site-header { border-bottom: 1px solid var(--line); }

.site-header-row {
    /* The source header runs nearly edge-to-edge (~39px gutters at 1440),
       wider than the body content column — the full nav plus the CTA must
       fit on one line at desktop. */
    width: min(100% - 4rem, 87rem);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-md);
    min-height: 6.5rem;
}

.site-header-cta {
    display: inline-block;
    flex-shrink: 0;
    padding: .8rem 2rem;
    border-radius: var(--pill);
    font-family: var(--font-nav);
    font-weight: 500;
    font-size: .8125rem;
    letter-spacing: .125em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    border: 1px solid var(--ink);
    transition: background-color .15s ease, color .15s ease;
}
.site-header-cta:hover { background: var(--ink); color: #ffffff; }

.site-header-minimal .site-header-row { justify-content: center; }

.site-brand {
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-decoration: none;
}

/* Centered between the brand and the CTA, matching the source header. */
.site-nav-toggle { position: relative; margin-inline: auto; }

.site-nav-toggle-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    list-style: none;
}
.site-nav-toggle-btn::-webkit-details-marker { display: none; }
.site-nav-toggle-btn:hover { background: var(--wash); }

.site-nav-toggle-icon,
.site-nav-toggle-icon::before,
.site-nav-toggle-icon::after {
    display: block;
    width: 1.4rem;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
}
.site-nav-toggle-icon { position: relative; }
.site-nav-toggle-icon::before,
.site-nav-toggle-icon::after { content: ''; position: absolute; left: 0; }
.site-nav-toggle-icon::before { top: -6px; }
.site-nav-toggle-icon::after { top: 6px; }

/* A closed <details> hides its non-summary content — in Chromium, via an
   internal `::details-content` box governed by `content-visibility`, not
   plain `display: none` on the child itself — so above the mobile
   breakpoint (desktop: no toggle affordance is shown at all, the nav must
   always render) both the pseudo-element and the <nav> need an explicit
   override, or the nav lays out with zero size despite `display` looking
   correct on the <nav> element in devtools. Scoped to this range only: the
   mobile media query below is what makes the collapsed default work. */
@media (min-width: 64.0625rem) {
    .site-nav-toggle::details-content {
        content-visibility: visible !important;
        block-size: auto !important;
        overflow: visible !important;
    }
    .site-nav-toggle .site-nav {
        display: block !important;
        content-visibility: visible !important;
        contain: none !important;
        contain-intrinsic-size: auto !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
    }
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav a {
    color: var(--ink);
    font-weight: 400;
    font-size: 1rem;
    text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible { color: var(--accent); }

/* Footer — mirrors the WordPress source: four columns (Follow Us / Contact /
   Info / Download App) on the brand tan, then a legal bar. */
.site-footer { background: var(--tan); }

.site-footer-row {
    width: min(100% - 2rem, var(--content-width));
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.site-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1.2fr .8fr 1fr;
    gap: var(--space-lg);
    align-items: start;
    padding-block: 3.5rem 2.5rem;
}

/* The source's footer mark is the full 474x182 lockup, not the small header
   glyph — it is the last thing on the page and reads as a signature. */
/* Source's layered wave divider: 144px tall, flipped, filled in the footer's
   tan so it reads as the footer growing up into the page above it. */
/* The wave is painted on whatever the page's closing band was, so the two
   read as one shape. Default is the page ground; the body class names the
   band's colour when it is not white. */
.site-footer-wave { line-height: 0; margin-block-end: -1px; background-color: var(--paper); }
body.footer-on-sand .site-footer-wave { background-color: var(--sand); }
body.footer-on-light .site-footer-wave { background-color: var(--wash); }
body.footer-on-paper .site-footer-wave { background-color: var(--paper); }
body.footer-on-tan .site-footer-wave { background-color: var(--tan); }
body.footer-on-dark .site-footer-wave { background-color: var(--ink); }
/* Plain (non-builder) pages close on the article ground. */
body.public-page .site-footer-wave { background-color: var(--paper); }
.site-footer-wave svg { display: block; width: 100%; height: 144px; transform: rotate(180deg); fill: var(--tan); }
@media (max-width: 42rem) { .site-footer-wave svg { height: 84px; } }

.site-footer-mark { padding-block: 2.75rem 0; }
.site-footer-logo { display: block; width: min(100%, 474px); height: auto; }
/* The columns start straight after the mark, so all four heads read as one line. */
.site-footer-grid { padding-block: 1.75rem 2.5rem; }
/* A point up on the whole footer — the source's is set a size larger than
   the body copy above it. */
.site-footer { font-size: 1.0625rem; }

.site-footer-col h4 {
    font-family: var(--font-display);
    font-weight: 400;
    /* Source-measured: the footer column heads are 32/38.4. */
    font-size: 32px;
    line-height: 38.4px;
    color: var(--ink);
    margin: 0 0 .85rem;
}
.site-footer-col p { color: var(--ink); margin: 0 0 .85rem; }

.site-footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
/* The social marks sit in a row of icons, as the source shows them. */
.site-footer-col:first-child .site-footer-list { flex-direction: row; gap: 1rem; align-items: center; }
.site-footer-list a svg { width: 26px; height: 26px; display: block; }
.site-footer-list a:hover svg { color: #ffffff; }
.site-footer-list a { color: var(--ink); text-decoration: none; }
.site-footer-list a:hover { color: #ffffff; }

.site-footer-badges { display: flex; gap: .6rem; flex-wrap: wrap; }
.site-footer-badges img { display: block; }

.site-footer-legalrow { border-top: 1px solid rgba(39, 40, 44, .25); }
.site-footer-legalrow .site-footer-row { padding-block: 1.25rem; }

.site-footer-minimal { background: var(--paper); border-top: 1px solid var(--line); }
.site-footer-minimal .site-footer-copy { color: var(--muted); }
.site-footer-minimal { display: flex; justify-content: center; padding-block: 1.75rem; }

.site-footer-copy { color: var(--ink); font-size: .95rem; margin: 0; }

.site-footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer-nav a { color: var(--ink); text-decoration: none; font-size: .9rem; }
.site-footer-nav a:hover { color: #ffffff; }

@media (max-width: 64rem) { .site-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 42rem) { .site-footer-grid { grid-template-columns: 1fr; } }

@media (max-width: 42rem) {
    /* Narrow phones: logo + hamburger only, like the source's mobile header. */
    .site-header-cta { display: none; }
    .site-brand-logo img { height: 3rem; }
    .pb-section.pb-w-half, .pb-section.pb-w-third { width: 100%; min-width: 0; }
}

@media (max-width: 64rem) {
    .site-nav-toggle-btn { display: inline-flex; }

    .site-nav-toggle .site-nav {
        display: none;
        position: absolute;
        right: 0;
        left: auto;
        top: 100%;
        margin-top: .5rem;
        min-width: 12rem;
        max-width: min(20rem, calc(100vw - 2rem));
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: var(--space-xs);
        z-index: 20;
    }

    .site-nav-toggle[open] .site-nav { display: block; }
    .site-nav-toggle[open] .site-nav ul { flex-direction: column; gap: var(--space-2xs); }
    .site-nav-toggle[open] .site-nav a { display: block; padding: .6rem .5rem; }
}

/* Public page body (Pages, Funnel Landing/Thank-You) */

/* Plain-body article template — mirrors the source: full-bleed sand title
   band beneath the transparent header, then a wide reading column. */
body.public-page .site-main { width: 100%; padding-block: 0; }

body.public-error .site-main {
    width: min(100% - 2rem, var(--content-width));
    margin-inline: auto;
    padding-block: clamp(3rem, 8vw, 7rem);
}

.page-title-band {
    background: var(--sand);
    text-align: center;
    padding-block: clamp(8rem, 16vh, 10rem) clamp(2.5rem, 6vh, 4rem);
    padding-inline: 1.5rem;
}
.page-title-band h1 {
    margin: 0;
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    overflow-wrap: break-word;
}

.page-article {
    width: min(100% - 3rem, 82rem);
    margin-inline: auto;
    padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem);
}

.page-media {
    overflow: hidden;
    margin: 0 0 2.5rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #dce7ff, #f4eaff);
    box-shadow: var(--shadow);
}

.page-media {
    background: none;
    box-shadow: none;
}
.page-media img {
    display: block;
    max-width: 100%;
    width: auto;
    max-height: 36rem;
    margin-inline: auto;
    border-radius: var(--radius-lg);
}

.page-body {
    color: var(--muted);
    font-size: 1rem;
}
.page-body h2, .page-body h3 { color: var(--ink); }

.public-error-panel {
    max-width: 30rem;
    margin-inline: auto;
    text-align: center;
    padding-block: var(--space-xl);
}
.public-error-panel h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin: 0 0 var(--space-sm); }
.public-error-panel p { color: var(--muted); margin: 0 0 var(--space-md); }

@media (max-width: 42rem) {
    .page-media img { min-height: 11rem; }
}

/* Archives (Blog, Team, Category/Tag, Author) */

body.public-archive .site-main {
    width: min(100% - 2rem, var(--content-width));
    margin-inline: auto;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

body.public-archive .site-main h1 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    letter-spacing: -.02em;
    margin: 0 0 var(--space-md);
}

.archive-kicker {
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .05em;
    margin-block-end: .25rem;
}

.archive-empty { color: var(--muted); padding-block: 2rem; }

.post-list,
.team-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.75rem;
    margin-block-start: 1.5rem;
}

.post-card,
.team-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease;
}

.post-card:hover,
.team-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.post-card-media img,
.team-card-media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.post-card h2,
.team-card h2 {
    font-size: 1.15rem;
    margin: 1rem 1rem 0;
}

.post-card h2 a,
.team-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover,
.team-card h2 a:hover { color: var(--accent); }

.post-card-date { color: var(--muted); font-size: .85rem; margin: .35rem 1rem 0; }
.post-card-excerpt,
.team-card-bio { color: var(--muted); margin: .5rem 1rem 1rem; }
.post-card-terms { margin: 0 1rem 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.post-term {
    font-size: .78rem;
    color: var(--accent);
    background: var(--wash);
    border-radius: .3rem;
    padding: .15rem .5rem;
    text-decoration: none;
}

.archive-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-block: 2.5rem;
    padding-block-start: 1.5rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

/* Page Builder — public render */

/* Builder-rendered pages are full-bleed: the page's own sections carry every
   background and vertical rhythm, exactly as the WordPress source does. The
   boxed, heavily padded plain-page main (below) is what produced the large
   blank band under the header and the floating inset hero — so builder pages
   use this class INSTEAD of `public-page`, never both. Top-level sections
   center their content to the site width while their backgrounds run
   edge-to-edge; nested sections inherit their parent's gutter and add none. */
body.public-builder .site-main { width: 100%; padding-block: 0; }
/* Builder bands run to the source's own band width (1382px at 1440, i.e. the
   viewport less a 2% gutter each side), not the narrower reading column the
   article template uses. Matching it is what keeps copy wrapping — and so
   card heights — the same on both sites. */
.pb-root {
    --builder-width: 86.375rem;
    /* The source's paper texture behind a highlighted programme card. A theme
       asset, not page content — it is chrome the layout owns. */
    --pb-card-texture: url('/assets/card-texture.png');
}
/* Builder images carry intrinsic width/height so a lazy image reserves its
   box; without an explicit height:auto that presentational attribute would
   also force the intrinsic pixel height instead of scaling to the column.
   Rules that deliberately size an image (badge, gallery tile) are more
   specific and still win. */
.pb-root img { max-width: 100%; height: auto; }
.pb-root > .pb-section { padding-inline: max(1.8rem, calc((100% - var(--builder-width)) / 2)); }
/* Source-measured band widths: the hero content column spans ~1382px at 1440
   (near-full-bleed), far wider than the standard reading column. */
.pb-root > .pb-section.pb-max-wide { padding-inline: max(1.5rem, calc((100% - 87rem) / 2)); }
.pb-root > .pb-section.pb-max-full { padding-inline: 1.5rem; }

/* A band whose own children sit in one wrapping row — a pair of buttons that
   should read as a single control group rather than a stack. */
.pb-section.pb-section-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.pb-section.pb-section-row > * { margin-block: 0; }

.pb-section.pb-minh-screen { min-height: 100vh; }
.pb-section.pb-valign-middle { display: flex; flex-direction: column; justify-content: center; }
.pb-section.pb-valign-middle > * { width: 100%; }

/* Background-video band (the source hero: muted Vimeo loop under the section
   color at 95%). Stacking: video 0 → color scrim 1 → content 2. */
.pb-section.pb-has-media-bg { position: relative; overflow: hidden; }
.pb-section-bgvideo { position: absolute; inset: 0; z-index: 0; }
.pb-section-bgvideo iframe {
    position: absolute;
    top: 50%; left: 50%;
    width: max(100%, 177.78vh);
    height: max(100%, 56.25vw);
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}
.pb-section-bgvideo video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
}
.pb-section-scrim { position: absolute; inset: 0; z-index: 1; }
.pb-bg-tan .pb-section-scrim { background: rgba(193, 167, 140, .95); }
.pb-bg-sand .pb-section-scrim { background: rgba(212, 203, 194, .95); }
.pb-bg-dark .pb-section-scrim { background: rgba(39, 40, 44, .95); }
.pb-bg-light .pb-section-scrim, .pb-bg-none .pb-section-scrim, .pb-bg-paper .pb-section-scrim { background: rgba(255, 255, 255, .95); }
.pb-section-content { position: relative; z-index: 2; }
.pb-section.pb-has-media-bg.pb-valign-middle { justify-content: center; }
.pb-section.pb-has-media-bg.pb-valign-middle > .pb-section-content { width: 100%; }

/* Circular play button + zero-script <details> video overlay (source: 100px
   white circle, inset tan glow, black triangle, opens the hero video). */
/* Overlay variant: the control floats centred on its column's media, the way
   the source places it on the diya photo. */
.pb-column { position: relative; }
.pb-video-popup.pb-vp-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.pb-video-popup.pb-vp-overlay > summary { pointer-events: auto; }
.pb-video-popup.pb-vp-overlay[open] > summary { position: fixed; }

.pb-video-popup summary { list-style: none; cursor: pointer; display: inline-block; }
.pb-video-popup summary::-webkit-details-marker { display: none; }
.pb-play-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: inset 0 0 15px rgba(193, 167, 140, .9);
}
.pb-play-tri {
    display: block;
    width: 0; height: 0;
    border-style: solid;
    border-width: 17.5px 0 17.5px 30px;
    border-color: transparent transparent transparent #000000;
    margin-inline-start: 6px;
}
.pb-video-popup[open] > summary {
    position: fixed; inset: 0; z-index: 998;
    background: rgba(0, 0, 0, .65);
}
.pb-video-popup[open] > summary .pb-play-circle { display: none; }
.pb-video-modal {
    position: fixed; inset: 0; z-index: 999;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.pb-video-frame {
    width: min(90vw, 960px);
    aspect-ratio: 16 / 9;
    pointer-events: auto;
    background: #000;
    box-shadow: var(--shadow-lg);
}
.pb-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Hero portrait composition — measured from the source at 1440×900:
   photo 534×534, radius 300px/100px, right-aligned; black badge 180×283,
   radius 100px, overlapping the photo's left edge ~20% down; sun sketch
   150px behind the photo's top-left corner. */
.pb-hero-media { position: relative; width: min(100%, 500px); margin-inline-start: auto; }
.pb-hero-photo { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 300px 100px; }
.pb-hero-sun {
    position: absolute; top: -34px; left: -52px;
    width: 150px; height: 150px;
    z-index: 1; pointer-events: none;
    /* The asset carries no intrinsic height, so it collapsed to 0 without this. */
    display: block;
    animation: pb-rotate360 8s linear infinite;
}
@keyframes pb-rotate360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pb-hero-sun { animation: none; } }
.pb-hero-badge {
    position: absolute;
    top: 20%;
    left: -65px;
    width: 180px;
    height: 283px;
    z-index: 2;
    background: #000000;
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.5rem 1rem;
    text-align: center;
}
.pb-hero-badge img { width: 43px; height: 43px; }
.pb-hero-badge p { color: #ffffff; font-family: var(--font-mark); font-size: 25px; line-height: 30px; margin: 0; }

/* Screening's variant of the same composition. Source-measured: the portrait
   is 390x487 on a flat 309px radius (a tall oval, not Home's square blob),
   and the badge hangs off the bottom-left corner overlapping the photo by
   only ~20px instead of sitting a fifth of the way down. */
.pb-hero-media-oval .pb-hero-photo {
    aspect-ratio: 390 / 487;
    border-radius: 309px;
}
.pb-hero-media-badge-bottom .pb-hero-badge {
    /* Source-measured at 1440: artwork top 233 / height 551, badge top 679 —
       81% down the artwork, hanging 56px past its left edge. */
    top: 81%;
    left: -56px;
    height: 253px;
}
/* Source-measured at 209px on this page, against Home's 150px. */
.pb-hero-media-oval .pb-hero-sun { width: 209px; height: 209px; top: -46px; left: -70px; }
@media (min-width: 42.0625rem) and (max-width: 68rem) {
    .pb-hero-media-badge-bottom .pb-hero-badge { height: 190px; left: -26px; }
}

/* Typed strapline. The caret only appears once the enhancement claims the
   line, so a script-less render shows a clean static sentence. */
.pb-fancy { margin: 0; color: var(--muted); }
.pb-fancy-center { text-align: center; }
.pb-fancy-start { text-align: left; }
.pb-fancy-end { text-align: right; }
.pb-fancy-word { color: var(--accent); }
/* Author text is trimmed on the way in, so the word-spaces around the cycling
   word cannot live in the values themselves — they are set here instead. */
.pb-fancy-prefix { margin-inline-end: .26em; }
.pb-fancy-suffix { margin-inline-start: .26em; }
.pb-fancy-caret { display: none; }
.pb-fancy[data-typing-active] .pb-fancy-caret {
    display: inline-block;
    width: 1px;
    height: 1em;
    margin-inline: 1px -2px;
    background: currentColor;
    vertical-align: -.14em;
    animation: pb-caret 1s steps(1) infinite;
}
@keyframes pb-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .pb-fancy[data-typing-active] .pb-fancy-caret { animation: none; }
}

/* Between stacking and full desktop the photo column is narrow — shrink the
   badge proportionally so it keeps overlapping the photo, not the text. */
@media (min-width: 42.0625rem) and (max-width: 68rem) {
    .pb-hero-badge {
        width: 132px;
        height: 208px;
        left: -34px;
        border-radius: 70px;
        padding: 1rem .75rem;
    }
    .pb-hero-badge p { font-size: 18px; line-height: 22px; }
    .pb-hero-badge img { width: 32px; height: 32px; }
    .pb-hero-sun { width: 110px; height: 110px; left: -14px; }
}

@media (max-width: 42rem) {
    .pb-hero-media { margin-inline: auto; }
    .pb-hero-badge { transform: scale(.8); transform-origin: top left; left: -8px; }
    .pb-hero-sun { display: none; }
    .pb-play-circle { width: 72px; height: 72px; }
    .pb-section.pb-minh-screen { min-height: 0; }
    /* The absolute overlay header sits on top of the opening band — on
       mobile the band's first content must clear it. */
    body.header-overlay .pb-root > .pb-section:first-child { padding-block-start: 8rem; }
}

body.public-builder h1.pb-heading { font-size: clamp(2.25rem, 3.7vw, 3.25rem); line-height: 1.15; }
/* Source-measured display sizes: the live site sets band headings at 42/50.4
   and the hero line at 52/62, not a viewport clamp. */
body.public-builder h2.pb-heading { font-size: 42px; line-height: 50.4px; }
/* A four-up feature row is a caption grid, not four bands: the source sets
   those headings at 23/27.6 and reserves two lines so a one-line title does
   not pull its paragraph up out of line with its neighbours. */
.pb-columns.pb-cols-4 > .pb-column > .pb-heading,
.pb-columns.pb-cols-4 .pb-column .pb-heading {
    font-size: 23px;
    line-height: 27.6px;
    min-height: 55.2px;
    margin-block: .35rem;
}
.pb-columns.pb-cols-4 > .pb-column { align-content: start; }
body.public-builder h3.pb-heading { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }

.pb-root { display: flex; flex-direction: column; gap: 0; }
.pb-section { padding-block: 2rem; }
.pb-section.pb-pad-none { padding-block: 0; }
.pb-section.pb-pad-sm { padding-block: 1rem; }
.pb-section.pb-pad-lg { padding-block: 4rem; }
/* Source-measured deep band (the Explore-Our-Programs strip: 72px / 144px). */
.pb-section.pb-pad-xl { padding-block: 4.5rem 9rem; }
.pb-section.pb-bg-light { background-color: var(--wash); }
.pb-section.pb-bg-dark { background-color: var(--ink); color: var(--paper); }
.pb-section.pb-bg-dark a { color: #d8c6b3; }
/* Section background texture from a Media asset (custom property set inline
   by the renderer from the gateway-resolved URL). */
.pb-section.pb-has-bgimg { background-image: var(--pb-bg-image); }
.pb-section.pb-bgfit-cover { background-size: cover; background-position: center; background-repeat: no-repeat; }
.pb-section.pb-bgfit-tile { background-size: auto; background-repeat: repeat; }

/* Scrolling keyword ticker (source's dark strip). Pure CSS, seamless via a
   duplicated run; motion is disabled for reduced-motion users. */
.pb-marquee { overflow: hidden; width: 100%; }
.pb-marquee-track { display: flex; width: max-content; animation: pb-marquee-scroll 30s linear infinite; }
.pb-marquee-slow .pb-marquee-track { animation-duration: 48s; }
.pb-marquee-fast .pb-marquee-track { animation-duration: 18s; }
.pb-marquee-run { display: flex; align-items: center; gap: 1.25rem; padding-inline-end: 1.25rem; }
.pb-marquee-item {
    font-family: var(--font-nav);
    font-size: .8125rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}
img.pb-marquee-sep { width: 34px; height: auto; flex: none; }
span.pb-marquee-sep { opacity: .55; }
@keyframes pb-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .pb-marquee-track { animation: none; }
    .pb-marquee { overflow-x: auto; }
}

.pb-section.pb-bg-sand { background-color: var(--sand); }
.pb-section.pb-bg-paper { background-color: var(--paper); }
/* The source's floral line-pattern surface (Home second section). */
.pb-section.pb-bg-pattern { background: #ffffff url('/assets/pattern-floral.png') center / cover repeat; }
/* A white card on a light band reads as a card only with the soft lift the
   source gives it — scoped to the combination, not to every section. */
.pb-section.pb-bg-paper.pb-rounded { box-shadow: var(--shadow-sm); }
.pb-section.pb-bg-tan { background-color: var(--tan); color: #ffffff; }
.pb-section.pb-bg-tan a,
.pb-section.pb-bg-tan .pb-text { color: #ffffff; }
.pb-section.pb-bg-tan h1, .pb-section.pb-bg-tan h2, .pb-section.pb-bg-tan h3 { color: #ffffff; }

.pb-container { width: min(100% - 2rem, 60rem); margin-inline: auto; }
.pb-container.pb-width-full { width: 100%; }

.pb-columns {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(2, 1fr);
}
/* Grid items default to min-width:auto, which lets an overflowing carousel
   stretch its column instead of scrolling inside it. */
.pb-column { min-width: 0; }
.pb-columns.pb-cols-1 { grid-template-columns: 1fr; }
.pb-columns.pb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pb-columns.pb-cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Ratio applies only above the stacking breakpoint — its higher specificity
   must never defeat the mobile single-column collapse below. */
@media (min-width: 42.0625rem) {
    .pb-columns.pb-cols-2.pb-ratio-wide-left { grid-template-columns: 1.5fr 1fr; }
    .pb-columns.pb-cols-2.pb-ratio-wide-right { grid-template-columns: 1fr 1.5fr; }
}
.pb-column.pb-col-start { text-align: left; }
.pb-column.pb-col-center { text-align: center; }
.pb-column.pb-col-center .pb-icon-image,
.pb-column.pb-col-center .pb-button { margin-inline: auto; }
.pb-column.pb-col-center .pb-button { display: table; }

/* Outlined card. Source-measured: 10px radius, 1px hairline, 20px padding
   (weekly-class listings); the `tan` variant is the programme card — brand
   hairline and 30px padding. */
.pb-column.pb-col-card {
    background: var(--paper);
    border: 1px solid rgba(39, 40, 44, .55);
    border-radius: 10px;
    padding: 20px;
}
.pb-column.pb-col-card > * + * { margin-block-start: .6rem; }
.pb-column.pb-col-card .pb-heading { margin-block: 0 .35rem; }
.pb-column.pb-col-card .pb-text { margin-block: 0; }
/* Hero copy column — the source holds the strapline to a 500px measure so it
   clears the black badge instead of running under it, and sets the display
   line at 52/62. */
.pb-root > .pb-section:first-child .pb-text { max-width: 500px; }
/* That 500px measure exists for the hero's left-hand copy column. A centred
   band inside the same hero — the source's "An Institute which … the astral
   world" strapline — must not inherit it, or the line centres inside a 500px
   box still pinned to the left edge instead of across the page. Source-
   measured at 15/21. */
.pb-root > .pb-section:first-child .pb-align-center > .pb-text {
    max-width: none;
    font-size: 15px;
    line-height: 21px;
}
.pb-root > .pb-section:first-child h1.pb-heading { line-height: 62px; }

/* A card reads left-aligned even inside a centred band — the source centres
   the band's heading and standfirst, never the copy inside its cards. */
.pb-column.pb-col-card { text-align: start; }

.pb-column.pb-col-card-tan { border-color: var(--tan); padding: 30px; }
/* The source's two highlighted programme cards: the same tan hairline card
   filled with the brand tan (a repeating paper texture sits beneath it at
   10%, which shifts the rendered colour by only a few units). */
.pb-column.pb-col-card-tan-fill { border-color: var(--tan); padding: 30px; }
/* Hovering a programme card brings up the same tan-over-texture the source's
   two highlighted cards already wear, rather than only shifting colour. The
   texture is layered under a 0.9 tan wash exactly as the source does, so a
   hovered card and a permanently-highlighted one look identical. */
.pb-column.pb-col-card-tan,
.pb-column.pb-col-card-tan-fill {
    background-color: #ffffff;
    background-image: linear-gradient(rgba(193, 167, 140, .9), rgba(193, 167, 140, .9)), var(--pb-card-texture, none);
    /* The texture is a tall 800x1280 plate. Left at its natural size only its
       top-left corner shows, which reads as a zoomed crop; `cover` fits the
       whole plate to the card the way the source's own card does. */
    background-size: auto, cover;
    background-position: 0 0, center;
    background-repeat: repeat, no-repeat;
    transition: background-image .25s ease, box-shadow .25s ease;
}
/* Off by default: the wash only paints once the card is hovered. */
.pb-column.pb-col-card-tan { background-image: none; }
.pb-column.pb-col-card-tan:hover,
.pb-column.pb-col-card-tan:focus-within {
    background-image: linear-gradient(rgba(193, 167, 140, .9), rgba(193, 167, 140, .9)), var(--pb-card-texture, none);
    box-shadow: var(--shadow);
}
/* On a filled card the copy stays ink. Left at the muted body grey it washes
   out against the tan and becomes hard to read — which is exactly what the
   source avoids by setting both heading and paragraph to #27282C. */
.pb-column.pb-col-card-tan-fill .pb-text,
.pb-column.pb-col-card-tan-fill .pb-heading,
.pb-column.pb-col-card-tan:hover .pb-text,
.pb-column.pb-col-card-tan:hover .pb-heading,
.pb-column.pb-col-card-tan:focus-within .pb-text,
.pb-column.pb-col-card-tan:focus-within .pb-heading { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    .pb-column.pb-col-card-tan, .pb-column.pb-col-card-tan-fill { transition: none; }
}

/* Drawn list glyphs sit on the text baseline at the copy's own size. */
.pb-icon svg { width: 1.05em; height: 1.05em; display: block; }
.pb-icon { display: inline-flex; align-items: center; }

/* Decorative brand marks — purely ornamental, so they never take pointer
   events and are hidden from assistive technology. */
/* Lifted out of the flow: a decoration must never add height to its band. */
.pb-decor { position: absolute; pointer-events: none; z-index: 0; line-height: 0; }
.pb-decor-astart { left: 1rem; }
.pb-decor-acenter { left: 50%; transform: translateX(-50%); }
.pb-decor-aend { right: 1rem; }
.pb-decor-ptop { top: 1.5rem; }
.pb-decor-pmiddle { top: 50%; }
.pb-decor-pbottom { bottom: 1.5rem; }
.pb-section { position: relative; }
/* Real content stays above the ornament.
   The background-video and scrim layers are excluded on purpose: they are
   absolutely positioned by design, and a blanket `position: relative` here
   dropped them back into the flow — which is what put the hero's background
   video on top of the page instead of behind its scrim. */
.pb-section > *:not(.pb-decor):not(.pb-section-bgvideo):not(.pb-section-scrim):not(.pb-section-content) {
    position: relative;
    z-index: 1;
}
/* The marks are square; stating it means they reserve their box even if a
   viewer's SVG never loads. */
/* The wrapper is absolutely positioned, so it has no width of its own to
   inherit — the size must live on the wrapper, not on the image inside it,
   or the mark collapses to nothing. */
.pb-decor img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.pb-decor-sm { width: 120px; }
.pb-decor-md { width: 214px; }
.pb-decor-lg { width: 300px; }
.pb-decor-xl { width: 460px; }
/* A flat tinted disc — the pale round wash the source floats behind its
   photographs. No asset needed; it is a shape, not a drawing. */
.pb-decor-disc { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; background: rgba(193, 167, 140, .55); }
/* The vine is line art: it must not be filled, and it reads at low contrast. */
.pb-decor img[src$="decor-vine.svg"] { aspect-ratio: 558 / 627; opacity: .55; }
.pb-decor-spin img { animation: pb-rotate360 8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pb-decor-spin img { animation: none; } }
@media (max-width: 42rem) { .pb-decor { width: 110px; } }

/* Carousel position dots — the source shows a small black bullet per page. */
.pb-car-dots { display: flex; justify-content: center; gap: 8px; margin-block-start: 14px; }
.pb-car-dots[hidden] { display: none; }
.pb-car-dot {
    width: 9px; height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--ink);
    opacity: .3;
    cursor: pointer;
}
.pb-car-dot[aria-current="true"] { opacity: 1; }
.pb-car-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* "Load more" reveal button. */
.pb-more { display: flex; justify-content: center; margin-block-start: 1.25rem; }
.pb-more-start { justify-content: flex-start; }
.pb-more[hidden] { display: none; }

.pb-columns.pb-col-middle { align-items: center; }
/* Middle-aligned hero rows breathe like the source: airy stack gaps and a
   set-off heading. Scoped to pb-col-middle so card grids stay compact. */
.pb-columns.pb-col-middle .pb-column > * + * { margin-block-start: 1.5rem; }
.pb-columns.pb-col-middle h1.pb-heading { margin-block: 3.75rem .25rem; }
/* Source-faithful per-column downward offsets; reset when columns stack. */
@media (min-width: 42.0625rem) {
    .pb-column.pb-off-sm { margin-block-start: 2rem; }
    .pb-column.pb-off-md { margin-block-start: 4rem; }
    .pb-column.pb-off-lg { margin-block-start: 8rem; }
}
/* The count classes carry higher specificity than the bare collapse rule —
   name them explicitly or 3/4-column grids never stack on phones. */
@media (max-width: 42rem) {
    .pb-columns,
    .pb-columns.pb-cols-3,
    .pb-columns.pb-cols-4 { grid-template-columns: 1fr; }
}

.pb-heading { margin-block: .5rem; overflow-wrap: break-word; }
.pb-text { color: var(--muted); margin-block: .5rem; }
/* Author copy carries bare URLs. A long one is a single unbreakable token and
   pushes the whole page sideways on a narrow screen, so let it break rather
   than overflow — only when it genuinely does not fit. */
.pb-text, .pb-heading, .pb-accordion-body, .prose { overflow-wrap: break-word; }
.pb-image { margin: 0 0 1rem; }
.pb-image img { width: 100%; max-width: 100%; height: auto; display: block; }
/* Per-block, admin-selected modifiers — never applied site-wide. */
.pb-image.pb-radius-sm img { border-radius: var(--radius-sm); }
.pb-image.pb-radius-lg img { border-radius: var(--radius-lg); }
/* The photograph beside the review strip is rounded in the source. Scoped to
   images that state no radius of their own — otherwise this out-specifies
   `pb-radius-circle` and squares off every medallion on the page. */
.pb-root .pb-columns .pb-image:not([class*="pb-radius-"]) img { border-radius: var(--radius-lg); }
/* The source site's signature organic corner shape (hero portrait, badges). */
.pb-image.pb-radius-blob img { border-radius: min(300px, 42%) min(100px, 16%); }
.pb-image.pb-radius-circle img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }
.pb-heading.pb-tone-accent { color: var(--tan); }
/* Inline form embed (same-origin /forms page). */
.pb-form-embed iframe { width: 100%; border: 0; display: block; }
.pb-form-h-sm iframe { height: 30rem; }
.pb-form-h-md iframe { height: 44rem; }
.pb-form-h-lg iframe { height: 58rem; }
/* Scroll-snap carousel variant of the gallery: `columns` slides visible at a
   time on desktop, `tablet`/`mobile` below. A native scroller — swipeable,
   keyboard-scrollable, and needs no script. */
.pb-gallery-gap-none { gap: 0; }
.pb-gallery-gap-sm { gap: .5rem; }
.pb-gallery-gap-md { gap: .8rem; }
.pb-gallery-gap-lg { gap: 1.5rem; }

.pb-gallery-ratio-square .pb-gallery-item img { aspect-ratio: 1 / 1; object-fit: cover; }
.pb-gallery-ratio-wide .pb-gallery-item img { aspect-ratio: 16 / 10; object-fit: cover; }
.pb-gallery-ratio-portrait .pb-gallery-item img { aspect-ratio: 3 / 4; object-fit: cover; }
.pb-gallery-ratio-auto .pb-gallery-item img { aspect-ratio: auto; height: auto; object-fit: contain; }

/* Feature line-art icons (source-extracted, sanitized theme assets). */
.pb-icon-image { display: block; margin: 0 0 .85rem; }
.pb-align-center .pb-icon-image { margin-inline: auto; }
.pb-icon-xs { width: 40px; height: 40px; }
.pb-icon-sm { width: 56px; height: 56px; }
/* Tan disc behind the glyph (the source's stage list). */
.pb-icon-disc {
    background: var(--sand);
    border-radius: 50%;
    padding: 8px;
    box-sizing: content-box;
}
/* Stage row: disc icon beside its label. */
.pb-stage-row { display: flex; align-items: center; gap: .8rem; }
.pb-stage-row .pb-icon-image { margin: 0; flex: none; }
.pb-stage-row .pb-heading { margin: 0; font-size: 1.05rem; }
.pb-icon-md { width: 84px; height: 84px; }
.pb-icon-lg { width: 110px; height: 110px; }

/* Event counter (server-rendered; see BuilderTreeRenderer::renderCountdown). */
.pb-countdown-grid { display: flex; gap: 1.5rem; justify-content: inherit; }
.pb-countdown-cell { text-align: center; }
.pb-countdown-value { display: block; font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.05; }
.pb-countdown-label { display: block; font-family: var(--font-nav); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pb-align-center .pb-countdown-grid { justify-content: center; }
.pb-countdown-expired .pb-countdown-value { opacity: .5; }

/* Google review cards — source-measured: 251px wide, 16px radius, soft lift,
   22/20 padding; 46px avatar disc in Google's palette with the G badge;
   Inter 15/600 name, 12.5px grey date, 16px #FBBC04 stars, 14px/21.7 body. */
.pb-greviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.pb-greviews-carousel {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 4px 10px;
    scrollbar-width: none;
}
.pb-greviews-carousel::-webkit-scrollbar { display: none; }
/* Three per view at desktop, exactly as the source row does. */
.pb-greviews-carousel > .pb-gr-card { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; }
.pb-gr-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
    padding: 22px 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    min-height: 236px;
}
.pb-gr-top { margin-bottom: 12px; }
.pb-gr-rate { margin-bottom: 9px; }
.pb-gr-top { display: flex; align-items: center; gap: .7rem; }
.pb-gr-av {
    position: relative;
    flex: none;
    width: 46px; height: 46px;
    border-radius: 50%;
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.pb-gr-g {
    position: absolute; right: -2px; bottom: -2px;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: #ffffff;
    color: #4285F4;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.pb-gr-id { display: flex; flex-direction: column; min-width: 0; }
.pb-gr-name { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: #1F2937; }
.pb-gr-date { font-family: var(--font-body); font-size: 12.5px; color: #9AA0A6; }
.pb-gr-rate { display: flex; align-items: center; gap: .4rem; }
.pb-gr-star { font-size: 16px; color: #DADCE0; line-height: 1; }
.pb-gr-star.is-on { color: #FBBC04; }
.pb-gr-verified { color: #4285F4; font-size: 13px; }
.pb-gr-text {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 21.7px;
    color: #5F6368;
    flex: 1;
}
.pb-gr-more { color: #5C1A11; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pb-gr-more:hover, .pb-gr-more:focus-visible { text-decoration: underline; }
.pb-gr-foot { text-align: center; margin: 18px 0 0; }
.pb-gr-foot a {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: #5C1A11;
    text-decoration: none;
}
.pb-gr-foot a:hover, .pb-gr-foot a:focus-visible { text-decoration: underline; }
@media (max-width: 64rem) { .pb-greviews-carousel > .pb-gr-card { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 37.5rem) { .pb-greviews-carousel > .pb-gr-card { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .pb-greviews-carousel { scroll-behavior: auto; } }

/* The wrapper must clip: a flex scroll strip still reports its max-content
   width to ancestors, which would otherwise scroll the whole page sideways.
   `clip` rather than `hidden` so it never becomes a scroll box of its own. */
/* A form rendered inside our own iframe: no site chrome, no page gutter —
   the host block already provides both. */
body.public-form-embed .site-main { width: 100%; max-width: none; padding: 0; }
body.public-form-embed { background: transparent; }

.pb-carousel { position: relative; overflow-x: clip; }
/* Arrow controls — the source's round white buttons overlapping the strip.
   Rendered `hidden` and revealed by the script, so a no-JS reader never sees
   a control that would do nothing. */
.pb-carousel-arrows { padding-inline: 0; }
.pb-car-btn {
    position: absolute;
    top: 44%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    /* A hairline and a firmer shadow, or the control disappears against a
       pale photograph — which is exactly what it sits on top of. */
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
}
.pb-car-btn[hidden] { display: none; }
.pb-car-prev { left: 10px; }
.pb-car-next { right: 10px; }
.pb-car-btn:hover { background: var(--tan); color: var(--ink); border-color: var(--tan); }
.pb-car-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 42rem) { .pb-car-btn { width: 34px; height: 34px; font-size: 18px; } }

/* Review lightbox — a thumbnail that opens a shared screenshot set.
   `:target` carries the open state, so it opens, closes and is linkable with
   no script at all, and one gallery serves every trigger on the page. */
.pb-lightbox-trigger {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    color: inherit;
    padding: .35rem;
    border-radius: var(--radius-sm);
}
.pb-lightbox-trigger:hover { background: rgba(39, 40, 44, .05); }
.pb-lightbox-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-lightbox-trigger img {
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
    box-shadow: var(--shadow-sm);
}
.pb-lightbox-label { font-family: var(--font-body); color: var(--muted); }

.pb-lightbox-panel { display: none; }
.pb-lightbox-panel:target {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 60;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
}
/* A full-bleed link behind the card, so clicking away closes it. */
.pb-lightbox-scrim { position: absolute; inset: 0; background: rgba(23, 24, 27, .82); }
.pb-lightbox-inner {
    position: relative;
    width: min(100%, 60rem);
    background: var(--paper);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-lg);
    max-height: 90vh;
    overflow: auto;
}
.pb-lightbox-close {
    position: absolute;
    top: -14px; right: -14px;
    z-index: 62;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    font-size: 26px;
    line-height: 44px;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--shadow);
}
.pb-lightbox-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.pb-lightbox-track::-webkit-scrollbar { display: none; }
.pb-lightbox-track > * { flex: 0 0 100%; scroll-snap-align: center; margin: 0; }
.pb-lightbox-track img { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }
@media (max-width: 42rem) { .pb-lightbox-close { top: 4px; right: 4px; } }

/* YouTube channel header — the avatar, name and blurb the source's feed shows
   above its video wall. */
.pb-channel { display: flex; align-items: flex-start; gap: 1rem; text-align: start; margin-block-end: 1.5rem; }
.pb-channel img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; display: block; }
.pb-channel-name { font-family: var(--font-body); font-weight: 600; color: var(--ink); margin: 0 0 .2rem; }
.pb-channel-blurb { font-family: var(--font-body); color: var(--muted); margin: 0; white-space: pre-line; }

/* A video tile: the real thumbnail with a play mark, linking out — the source
   shows these rather than nine embedded players, which is why its wall stays
   clean of iframe chrome. */
.pb-gallery-play .pb-gallery-item { position: relative; }
.pb-gallery-play .pb-gallery-item img { aspect-ratio: 16 / 9; }
.pb-gallery-play .pb-gallery-item a { display: block; position: relative; }
.pb-gallery-play .pb-gallery-item a::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 68px; height: 48px;
    border-radius: 12px;
    background: rgba(23, 24, 27, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 26px no-repeat;
    transition: background-color .2s ease;
}
.pb-gallery-play .pb-gallery-item a:hover::after { background-color: #cc0000; }

/* Post listing block — the article grid the source's Pathshala page shows. */
.pb-posts { display: grid; gap: 30px; grid-template-columns: repeat(3, 1fr); }
.pb-posts-2 { grid-template-columns: repeat(2, 1fr); }
.pb-posts-4 { grid-template-columns: repeat(4, 1fr); }
.pb-posts-carousel {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-block: .25rem .75rem;
}
.pb-posts-carousel::-webkit-scrollbar { display: none; }
.pb-posts-carousel > .pb-post-card { flex: 0 0 calc((100% - 60px) / 3); scroll-snap-align: start; }
.pb-post-card { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.pb-post-link { color: inherit; text-decoration: none; display: block; }
.pb-post-media { margin: 0; border-radius: var(--radius-sm); overflow: hidden; }
.pb-post-media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.pb-post-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.35;
    margin: .6rem 0 0;
    color: var(--ink);
}
.pb-post-link:hover .pb-post-title, .pb-post-link:focus-visible .pb-post-title { text-decoration: underline; }
.pb-post-date { margin: 0; font-family: var(--font-body); font-size: .8rem; color: var(--muted); }
.pb-post-terms { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pb-post-term {
    font-family: var(--font-body);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tan);
    text-decoration: none;
}
.pb-post-term:hover, .pb-post-term:focus-visible { text-decoration: underline; }
.pb-post-excerpt { margin: 0; font-family: var(--font-body); font-size: .9rem; line-height: 1.6; color: var(--muted); }
.pb-post-more { margin: .1rem 0 0; }
.pb-post-more a {
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
}
.pb-post-more a::after { content: " ➔"; }
.pb-post-more a:hover, .pb-post-more a:focus-visible { text-decoration: underline; }
@media (max-width: 64rem) {
    .pb-posts, .pb-posts-2, .pb-posts-4 { grid-template-columns: repeat(2, 1fr); }
    .pb-posts-carousel > .pb-post-card { flex-basis: calc((100% - 30px) / 2); }
}
@media (max-width: 42rem) {
    .pb-posts, .pb-posts-2, .pb-posts-4 { grid-template-columns: 1fr; }
    .pb-posts-carousel > .pb-post-card { flex-basis: 82%; }
}
.pb-carousel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.pb-gallery.pb-gallery-carousel {
    display: grid;
    grid-auto-flow: column;
    /* The grid variant's explicit template must be cleared, or its first N
       tracks still claim the row and collapse to zero width beside the auto
       columns — the first few slides then render as invisible slivers. */
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 1.6rem) / 3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-block-end: .75rem;
}
.pb-gallery.pb-gallery-carousel.pb-gallery-cols-2 { grid-auto-columns: calc((100% - .8rem) / 2); }
.pb-gallery.pb-gallery-carousel.pb-gallery-cols-4 { grid-auto-columns: calc((100% - 2.4rem) / 4); }
.pb-gallery.pb-gallery-carousel > .pb-gallery-item { scroll-snap-align: start; }

@media (max-width: 64rem) and (min-width: 42.0625rem) {
    .pb-gallery-carousel.pb-gallery-t1 { grid-auto-columns: 100%; }
    .pb-gallery-carousel.pb-gallery-t2 { grid-auto-columns: calc((100% - .8rem) / 2); }
    .pb-gallery-carousel.pb-gallery-t3 { grid-auto-columns: calc((100% - 1.6rem) / 3); }
}
@media (max-width: 42rem) {
    .pb-gallery-carousel.pb-gallery-m1 { grid-auto-columns: 88%; }
    .pb-gallery-carousel.pb-gallery-m2 { grid-auto-columns: calc((100% - .8rem) / 2); }
}
@media (prefers-reduced-motion: reduce) {
    .pb-gallery.pb-gallery-carousel { scroll-behavior: auto; }
}
.pb-image.pb-shadow-soft img { box-shadow: var(--shadow); }
.pb-image.pb-w-half img { width: 50%; margin-inline: auto; }
.pb-image.pb-w-third img { width: 33.333%; margin-inline: auto; }

/* Weekly-class cards (Ashaeiynn Classes): a paired row's headings run from
   one to three lines depending on the session name, which pushes the body
   copy below to different heights and makes the pair read as off-line even
   though the cards themselves are already grid-paired. Reserving the
   longest heading's height on every card keeps the description's start
   aligned across a row regardless of title length. */
@media (min-width: 42.0625rem) {
    .pb-column.pb-col-card > section h2.pb-heading { min-height: 151.2px; }
}

/* The two sessions in a paired row also carry very different body-copy
   lengths (Mega Shaktipath's paragraph runs roughly twice Rigorous
   Negativity's), so even with headings equalised the Mon-Tue / Wed-Thu day
   badge below each paragraph still lands at a different height. The outer
   card pair already grid-stretches both `.pb-col-card`s to equal height;
   this cascades that height down through the nested section/columns/column
   wrapper so the day badge can be pinned to the card's bottom edge instead
   of sitting wherever its own paragraph happens to end. */
@media (min-width: 42.0625rem) {
    .pb-column.pb-col-card { display: flex; flex-direction: column; }
    .pb-column.pb-col-card > section { flex: 1; display: flex; }
    .pb-column.pb-col-card > section > .pb-columns { flex: 1; }
    .pb-column.pb-col-card > section > .pb-columns > .pb-column:first-child {
        display: flex;
        flex-direction: column;
    }
    .pb-column.pb-col-card > section > .pb-columns > .pb-column:first-child .pb-icon-list {
        margin-block-start: auto;
        padding-block-start: .6rem;
    }
}

/* Explore Our Programs cards: descriptions vary in length, which used to
   leave each card's "Know More" button at a different height. The grid row
   already stretches cards to equal height, so pinning the button to the
   bottom with margin-top:auto lines every button in a row up. */
.pb-column.pb-col-card-tan,
.pb-column.pb-col-card-tan-fill {
    display: flex;
    flex-direction: column;
}
.pb-column.pb-col-card-tan > .pb-button,
.pb-column.pb-col-card-tan-fill > .pb-button {
    margin-block-start: auto;
}

/* Join band: the back-of-head diya photo sits alone in a half column next
   to an intentionally empty spacer column. Source (ashaeiynn.com) runs the
   same photo noticeably larger; bleeding it past its own column into the
   empty one next door (nothing else lives there) matches that size without
   restructuring the grid. */
.pb-image img[src*="01M0DGPH7K3YYXCC66187YGM9G"] {
    width: 132%;
    max-width: 132%;
}
.pb-section.pb-rounded { border-radius: var(--radius-lg); overflow: hidden; }
/* Tall-oval "badge" surface — the source's Where-Third-Eye-Recreates card. */
.pb-section.pb-rounded-pill { border-radius: 50% / 45%; overflow: hidden; }
/* Perfect-circle badge surface (the source's "Journey Begins Now" disc). */
.pb-section.pb-rounded-circle {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.pb-section.pb-rounded-circle .pb-image { margin: 0; }
/* Inside a disc the text must stay within the inscribed square, so the
   heading steps down and the padding is generous. */
.pb-section.pb-rounded-circle { padding: 14% 16%; }
.pb-section.pb-rounded-circle .pb-heading { font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.25; margin: 0; }
.pb-section.pb-align-center { text-align: center; }
.pb-section.pb-w-half { width: 50%; }
.pb-section.pb-w-third { width: 38%; min-width: 14rem; }

.pb-button {
    display: inline-block;
    /* Source-measured: 15px/40px padding, 13px/1 line, 2px tracking, 45px tall. */
    padding: .9375rem 2.5rem;
    line-height: 1;
    border-radius: var(--pill);
    font-family: var(--font-nav);
    font-weight: 500;
    font-size: .8125rem;
    letter-spacing: .154em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    margin-block: .5rem;
    transition: box-shadow .15s ease, transform .15s ease, background-color .15s ease, color .15s ease;
}
/* The source suffixes every pill CTA with a small arrow. */
.pb-button::after, .site-header-cta::after { content: " ➔"; font-family: var(--font-body); }
.pb-button-primary { background: var(--ink); color: #ffffff; box-shadow: var(--shadow-sm); }
.pb-button-primary:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.pb-button-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.pb-button-secondary:hover { background: var(--ink); color: #ffffff; }
.pb-bg-dark .pb-button-secondary, .pb-bg-tan .pb-button-secondary { color: #ffffff; border-color: #ffffff; }
.pb-bg-dark .pb-button-secondary:hover, .pb-bg-tan .pb-button-secondary:hover { background: #ffffff; color: var(--ink); }
.pb-bg-dark .pb-button-primary, .pb-bg-tan .pb-button-primary { background: transparent; color: #ffffff; border-color: #ffffff; box-shadow: none; }
.pb-bg-dark .pb-button-primary:hover, .pb-bg-tan .pb-button-primary:hover { background: #ffffff; color: var(--ink); }

.pb-icon { font-size: 1.5rem; display: inline-block; margin-block: .5rem; }
.pb-divider { border: none; border-top: 1px solid var(--line); margin-block: 1.5rem; }
.pb-spacer-sm { height: var(--space-xs); }
.pb-spacer-md { height: var(--space-lg); }
.pb-spacer-lg { height: var(--space-xl); }

.pb-counter { text-align: center; margin-block: 1rem; }
.pb-counter-number { display: block; font-size: clamp(1.9rem, 4.5vw, 2.5rem); font-weight: 700; line-height: 1.1; }
.pb-counter-label { display: block; color: var(--muted); margin-block-start: .25rem; }

.pb-video { position: relative; aspect-ratio: 16 / 9; margin-block: 1rem; max-width: 100%; }
.pb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-sm); }

.pb-icon-list { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.pb-icon-list-item { display: flex; align-items: center; gap: .6rem; }
.pb-icon-list-item a { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.pb-icon-list-item .pb-icon { margin-block: 0; font-size: 1.1rem; }

.pb-accordion { margin-block: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.pb-accordion-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem 1rem; }
.pb-accordion-item summary { cursor: pointer; font-weight: 600; }
.pb-accordion-item summary:hover { color: var(--accent); }
.pb-accordion-content { color: var(--muted); margin-block-start: .6rem; }

.pb-gallery { display: grid; gap: .8rem; margin-block: 1rem; grid-template-columns: repeat(3, 1fr); }
.pb-gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pb-gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 42rem) { .pb-gallery { grid-template-columns: repeat(2, 1fr); } }
.pb-gallery-item { margin: 0; }
.pb-gallery-item img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 20px; display: block; }
/* Crop the artwork in rather than fit it: the source renders a 459px image in
   a 406px slide (about 1.13x), so its posters read larger than a fitted one. */
.pb-gallery-zoom-in .pb-gallery-item,
.pb-gallery-zoom-more .pb-gallery-item { overflow: hidden; border-radius: 20px; }
.pb-gallery-zoom-in .pb-gallery-item img { transform: scale(1.13); border-radius: 0; }
.pb-gallery-zoom-more .pb-gallery-item img { transform: scale(1.25); border-radius: 0; }
.pb-gallery-item figcaption { color: var(--muted); font-size: .85rem; margin-block-start: .35rem; }

/* Public forms (Sprint 6) */

body.public-form-page .site-main {
    width: min(100% - 2rem, var(--content-width-narrow));
    margin-inline: auto;
    padding-block: clamp(3rem, 8vw, 6rem);
}
body.public-form-page .site-main h1 {
    font-size: clamp(1.85rem, 4.5vw, 2.5rem);
    margin: 0 0 var(--space-md);
    letter-spacing: -.02em;
}

.public-form { max-width: 34rem; margin-block-start: 1.5rem; }

.admin-form-field { margin-block-end: 1.1rem; }
.admin-form-field label { display: block; font-weight: 600; margin-block-end: .35rem; }
.admin-form-field input[type="text"],
.admin-form-field input[type="email"],
.admin-form-field input[type="tel"],
.admin-form-field select,
.admin-form-field textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .65rem .8rem;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-form-field input:focus-visible,
.admin-form-field select:focus-visible,
.admin-form-field textarea:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(36, 87, 214, .15);
}
.admin-form-field textarea { min-height: 6rem; resize: vertical; }

.admin-confirm { display: flex; align-items: center; gap: .5rem; font-weight: 500; }

.admin-field-error { color: #b3261e; font-size: .85rem; margin: .3rem 0 0; }

.admin-alert {
    border: 1px solid #f0c1bd;
    background: #fdecea;
    color: #8c2a22;
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    margin-block-end: 1.25rem;
}
.admin-alert-danger li { margin-inline-start: 1.1rem; }

.admin-notice {
    border: 1px solid #bfe3cf;
    background: #eafaf1;
    color: #1c6b45;
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    margin-block-end: 1.25rem;
}

.admin-btn-primary,
.admin-btn-secondary {
    display: inline-block;
    padding: .85rem 1.75rem;
    border-radius: var(--pill);
    font-family: var(--font-nav);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .03em;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}
.admin-btn-primary { background: var(--ink); color: #ffffff; box-shadow: var(--shadow-sm); }
.admin-btn-primary:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.admin-btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.admin-btn-secondary:hover { background: var(--ink); color: #ffffff; }

/* Off-screen, not display:none — some bots skip fields their own parser
   flags as invisible only via display/visibility. */
.form-honeypot { position: absolute; left: -9999px; top: -9999px; }

/* Funnel Landing/Checkout/Thank-You (Sprint L9) */

.funnel-cta { margin-block-start: var(--space-md); }

body.funnel-step-checkout .site-main,
body.funnel-step-thankyou .site-main {
    width: min(100% - 2rem, var(--content-width-narrow));
    margin-inline: auto;
    padding-block: clamp(2.5rem, 6vw, 5rem);
}
body.funnel-step-checkout .site-main h1,
body.funnel-step-thankyou .site-main h1 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    margin: 0 0 var(--space-md);
}
body.funnel-step-thankyou .site-main { text-align: center; }

/* Checkout wore the bare admin-ish white page. It is a brand surface like any
   other: the sand ground the rest of the site opens on, the form and summary
   on a raised paper card, and the site's own pill button. */
body.funnel-step-checkout,
body.funnel-step-thankyou { background: var(--wash); }
body.funnel-step-checkout .site-main,
body.funnel-step-thankyou .site-main {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    margin-block: clamp(2rem, 5vw, 4rem);
}
body.funnel-step-checkout .site-main h1,
body.funnel-step-thankyou .site-main h1 { font-family: var(--font-display); }
body.funnel-step-checkout .public-form button[type="submit"],
body.funnel-step-checkout .admin-btn-primary {
    background: var(--ink);
    color: #ffffff;
    border: 1px solid var(--ink);
    border-radius: var(--pill);
    padding: 15px 40px;
    font-family: var(--font-nav);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
}
body.funnel-step-checkout .public-form button[type="submit"]:hover,
body.funnel-step-checkout .admin-btn-primary:hover { background: var(--tan); color: var(--ink); border-color: var(--tan); }
body.funnel-step-checkout .site-header { background: transparent; border-bottom: none; }

.funnel-order-summary {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
    text-align: left;
}
.funnel-order-summary td,
.funnel-order-summary th {
    padding: .65rem 0;
    border-bottom: 1px solid var(--line);
}
.funnel-order-summary tfoot th,
.funnel-order-summary tfoot td {
    border-bottom: none;
    border-top: 2px solid var(--ink);
    font-size: 1.1rem;
    padding-top: .9rem;
}

.funnel-order-reference {
    background: var(--wash);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-block-end: var(--space-md);
}