/* GENERATED - this stylesheet has been run through PurgeCSS.
   It contains only the selectors used by the HTML in this folder as of
   2026-08-02. If you add markup with a class that is not already used
   somewhere on the site (a new Bootstrap utility, a new fa-* icon), the
   rule for it is NOT in here and the element will render unstyled.

   To regenerate after editing the HTML:
     cd "I:\Client Website\_SriYoga2-css-rollback-2026-08-02"
     node run.mjs && node install.mjs install
   Unpurged originals: I:\Client Website\_SriYoga2-css-rollback-2026-08-02\pre-purge-css
   To roll back entirely:  node install.mjs restore                    */
/* Sri Yoga Ashram - shared page UI
   Loaded after theme.css on every page except the dedicated Astro TTC page. */

body#bg {
    --site-ink: #352f2a;
    --site-copy: #625a53;
    --site-earth: #746355;
    --site-dark: #3f3832;
    --site-gold: #c39458;
    --site-cream: #fbf7f1;
    --site-white: #ffffff;
    --site-line: rgba(74, 62, 53, 0.16);
    --site-shadow: 0 12px 30px rgba(53, 47, 42, 0.08);
    color: var(--site-copy);
    font-size: 16px;
    line-height: 1.7;
}

body#bg .sya-skip-link {
    background: var(--site-dark);
    border-radius: 0 0 8px 8px;
    color: var(--site-white);
    left: 16px;
    padding: 10px 16px;
    position: fixed;
    top: 0;
    transform: translateY(-120%);
    transition: transform 160ms ease;
    z-index: 10000;
}

body#bg .sya-skip-link:focus {
    color: var(--site-white);
    outline: 3px solid var(--site-gold);
    outline-offset: 2px;
    transform: translateY(0);
}

body#bg .page-content {
    background: var(--site-white) !important;
}

/* Cream is the section default only. .content-area is deliberately not
   listed here - its background is set once, white, in the block below. */
body#bg .section-full {
    background-color: var(--site-cream) !important;
}

body#bg .section-full,
body#bg .page-content > .content-area {
    background-image: none !important;
    color: var(--site-copy);
    overflow: hidden;
    padding-bottom: 72px !important;
    padding-top: 72px !important;
    position: relative;
}

body#bg .section-full.bg-white,
body#bg .section-full.sya-white-section,
body#bg .section-full.sya-certification-section,
body#bg .section-full.sya-capital-section,
body#bg .section-full.sya-why-section,
body#bg .section-full.contact-style-1,
body#bg .page-content > .content-area {
    background-color: var(--site-white) !important;
}

body#bg .section-full.bg-gray,
body#bg .section-full.bg-grey,
body#bg .section-full.bg-img-fix,
body#bg .section-full[class*="overlay-"],
body#bg .section-full.sya-cream-section,
body#bg .section-full.sya-prep-section,
body#bg .section-full.sya-reach-section {
    /* Must stay !important: these sections can also carry .bg-white, whose
       rule above is !important and would otherwise win on source order. */
    background-color: var(--site-cream) !important;
    background-image: none !important;
}

/* Explicit band colour. The rules above assign a background from whichever
   legacy class a section happens to carry, which does not guarantee that
   consecutive bands differ. These two win over all of them, so a page can
   state its alternating sequence directly. Last in the background cascade
   on purpose - do not move them above the rules they are meant to beat. */
body#bg .section-full.sya-band-white {
    background-color: var(--site-white) !important;
    background-image: none !important;
}

body#bg .section-full.sya-band-cream {
    background-color: var(--site-cream) !important;
    background-image: none !important;
}

body#bg .section-full::before,
body#bg .section-full::after {
    display: none;
}

body#bg .section-full > .container,
body#bg .content-area > .container {
    max-width: 1180px;
}

/* Legacy pages put .text-white on copy that sat over a photo. Those photo
   backgrounds are removed above, so the text has to go back to ink. Buttons
   and chips keep their own dark fills though, so they must be excluded or
   they end up dark-on-dark and effectively invisible. */
body#bg .section-full .text-white:not(.site-button):not(.enroll-btn):not(.sya-discount-btn),
body#bg .section-full.text-white,
body#bg .section-full .text-white p,
body#bg .section-full .text-white li {
    color: var(--site-copy) !important;
}

/* Surfaces that are genuinely dark keep light text on them. Scoped through
   .section-full so this outranks the generic heading colour rule above, which
   would otherwise paint these headings ink-on-brown. */
body#bg .section-full .sya-prep-col-head,
body#bg .section-full .sya-prep-col-head :is(h1, h2, h3, h4),
body#bg .section-full .sya-prep-col-head :is(h1, h2, h3, h4) span,
body#bg .section-full .sya-prep-col-head p {
    color: var(--site-white) !important;
}

body#bg .section-full h1,
body#bg .section-full h2,
body#bg .section-full h3,
body#bg .section-full h4,
body#bg .content-area h1,
body#bg .content-area h2,
body#bg .content-area h3,
body#bg .content-area h4 {
    color: var(--site-ink) !important;
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
}

body#bg .section-full h1,
body#bg .content-area h1 {
    font-size: clamp(34px, 3.5vw, 44px);
    line-height: 1.16;
    margin-bottom: 22px;
}

body#bg .section-full h2,
body#bg .content-area h2 {
    font-size: clamp(29px, 2.7vw, 36px);
    line-height: 1.24;
    margin-bottom: 16px;
}

body#bg .section-full h3,
body#bg .content-area h3 {
    font-size: clamp(21px, 1.7vw, 25px);
    line-height: 1.35;
    margin-bottom: 12px;
}

body#bg .section-full h4,
body#bg .content-area h4 {
    font-size: 19px;
    line-height: 1.4;
    margin-bottom: 9px;
}

body#bg .section-full :is(h1, h2, h3, h4) .text-primary,
body#bg .content-area :is(h1, h2, h3, h4) .text-primary {
    color: inherit !important;
    font: inherit;
}

body#bg .section-full p,
body#bg .content-area p {
    color: var(--site-copy);
    font-size: 16px;
    line-height: 1.75;
    text-align: left;
}

/* The accommodation overview is a full-width composition around a three-card
   grid. Do not inherit the long-form article measure on its framing copy. */
body#bg .sya-accommodation-overview .section-content > .row:last-child > [class*="col-"] > p {
    max-width: none;
    width: 100%;
}

body#bg .section-head {
    /* No width cap: the heading block spans its container so section intros
       run the full measure like the body copy around them. The container is
       already capped at 1180px, which bounds the line length. */
    margin: 0 auto 34px;
    max-width: none;
    text-align: center;
}

/* Legacy pages use h2, h3, and h4 interchangeably for section titles. Their
   visual role - not the historical tag choice - sets their presentation. */
body#bg .section-head > :is(h1, h2, h3, h4) {
    font-size: clamp(29px, 2.7vw, 36px);
    line-height: 1.24;
    margin-bottom: 16px;
}

body#bg .section-head p {
    margin-left: auto;
    margin-right: auto;
    max-width: none;
    text-align: center;
}

body#bg .section-head.text-left {
    margin-left: 0;
    text-align: left;
}

body#bg .section-head.text-left p {
    margin-left: 0;
    text-align: left;
}

/* Replace the template's double rule with the approved ornament. Keep the
   ornament for primary page and section headlines only; subheadings stay
   typographic so nested content remains calm and easy to scan. */
body#bg .dez-separator-outer {
    display: block;
}

body#bg .dez-separator-outer,
body#bg .section-head:not(:has(.dez-separator-outer)) > :is(h1, h2)::after,
body#bg .tab-pane > .row > [class*="col-lg-12"]:not(:has(.dez-separator-outer)) > h2::after,
body#bg .sya-capital-header:not(:has(.dez-separator-outer)) > h2::after,
body#bg .sya-why-header:not(:has(.dez-separator-outer)) > h2::after,
body#bg .sya-prep-header:not(:has(.dez-separator-outer)) > h2::after,
body#bg .review-wall-head:not(:has(.dez-separator-outer)) > h2::after {
    background-image: url("../images/decorative/retro-calligraphic-heading-divider.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    display: block;
    /* asset is cropped to its ink, so the box is exactly the ornament */
    aspect-ratio: 4161 / 484;
    height: auto;
    margin: 22px auto 14px;
    mix-blend-mode: multiply;
    opacity: 0.9;
    pointer-events: none;
    width: clamp(160px, 18vw, 220px);
}

body#bg .section-head:not(:has(.dez-separator-outer)) > :is(h1, h2)::after,
body#bg .tab-pane > .row > [class*="col-lg-12"]:not(:has(.dez-separator-outer)) > h2::after,
body#bg .sya-capital-header:not(:has(.dez-separator-outer)) > h2::after,
body#bg .sya-why-header:not(:has(.dez-separator-outer)) > h2::after,
body#bg .sya-prep-header:not(:has(.dez-separator-outer)) > h2::after,
body#bg .review-wall-head:not(:has(.dez-separator-outer)) > h2::after {
    content: "";
}

/* The page's main heading carries the ornament too. It usually sits in a plain
   column wrapper rather than .section-head, so the rules above miss it. Every
   page has exactly one h1, so this cannot spray ornaments onto card titles.
   Aligned to the text rather than centred, since these blocks are left-aligned;
   the .text-center case below restores optical centring. */
body#bg .section-full .container:not(:has(.dez-separator-outer)) :is(h1, h2):not(.sya-no-ornament)::after {
    background-image: url("../images/decorative/retro-calligraphic-heading-divider.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    display: block;
    /* asset is cropped to its ink, so the box is exactly the ornament */
    aspect-ratio: 4161 / 484;
    height: auto;
    margin: 22px 0 14px;
    mix-blend-mode: multiply;
    opacity: 0.9;
    pointer-events: none;
    width: clamp(160px, 18vw, 220px);
}

/* Centre the ornament whenever the heading sits in a centred context. This is
   a DESCENDANT selector on purpose - the headings are usually wrapped in a
   spacing div inside the centred column, so a child combinator missed them and
   the ornament stayed left under a centred title. */
body#bg .section-full .container:not(:has(.dez-separator-outer)) :is(.text-center, .section-head) :is(h1, h2)::after {
    margin-inline: auto;
}

body#bg .dez-separator-outer .dez-separator {
    display: none;
}

/* Older tab panels placed their separator inside the first half-column,
   visually detaching it from the title. Hide that instance and let the title
   rule above render the ornament in the correct position. */
body#bg .tab-pane .dez-separator-outer {
    display: none;
}

body#bg .tab-pane :is(h1, h2) + .dez-separator-outer {
    display: block;
    margin-left: 0;
    margin-right: 0;
    width: 180px;
}

/* Full-width homepage narratives should fill their composition instead of
   inheriting the article measure used on long-form reading pages. */
body#bg.home-page .sya-capital-header {
    max-width: none;
}

body#bg.home-page :is(.sya-capital-lead, .sya-capital-intro-text, .sya-capital-outro-text),
body#bg.home-page .tab-pane > .row > [class*="col-lg-12"] > p,
body#bg.home-page .tab-pane > .row > p {
    max-width: none;
    width: 100%;
}

/* Review galleries sit outside the legacy section wrapper on a few course
   pages, so they participate in the same surface, type, and spacing system. */
body#bg .review-wall-section {
    background: var(--site-cream);
    padding-bottom: 72px;
    padding-top: 72px;
}

body#bg .review-wall-head {
    margin: 0 auto 34px;
    max-width: 860px;
}

body#bg .review-wall-head h2 {
    color: var(--site-ink);
    font-family: var(--font-heading);
    font-size: clamp(29px, 2.7vw, 36px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.24;
    margin-bottom: 16px;
}

body#bg .review-wall-head p {
    color: var(--site-copy);
    font-size: 16px;
    line-height: 1.75;
    text-align: center;
}

body#bg .section-head.text-left > h1::after,
body#bg .section-head.text-left > h2::after {
    margin-left: 0;
}

/* Layout and image placement */
body#bg .section-content > .row,
body#bg .content-area .row {
    row-gap: 24px;
}

body#bg .row > [class*="col-"] {
    min-width: 0;
}

body#bg .section-full img,
body#bg .content-area img {
    height: auto;
    max-width: 100%;
}

body#bg .section-full [class*="col-"] > img,
body#bg .sya-reach-img {
    border: 1px solid var(--site-line);
    border-radius: 12px;
    display: block;
    width: 100%;
}

body#bg .ow-entry-media,
body#bg .dez-post-media,
body#bg .dez-media,
body#bg .sya-reach-img-container {
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
}

body#bg .ow-entry-media img,
body#bg .blog-carousel .dez-post-media img {
    aspect-ratio: 16 / 10;
    display: block;
    object-fit: cover;
    width: 100%;
}

body#bg .sya-reach-img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

body#bg .sya-video-poster-container,
body#bg .sya-video-poster-img {
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    width: 100%;
}

body#bg .dez-thum img,
body#bg .dez-gallery-box img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

body#bg .dez-img-effect img,
body#bg .sya-reach-img-container img {
    transform: none;
    transition: none;
}

/* Restrained surfaces: borders establish groups; shadows are reserved for
   overlays and focused interaction rather than every content block. */
body#bg .box .card,
body#bg .ow-carousel-entry,
body#bg .dez-box.bg-gray,
body#bg .content-card,
body#bg .sya-learn-card,
body#bg .sya-why-grid-card {
    background: var(--site-white);
    border: 1px solid var(--site-line) !important;
    border-radius: 9px;
    box-shadow: none;
    transform: none;
}

body#bg .box .card {
    border-bottom: 2px solid var(--site-gold) !important;
}

body#bg .section-full .bg-grey.border-4 {
    background: var(--site-white) !important;
    border: 1px solid var(--site-line) !important;
    border-left: 3px solid var(--site-gold) !important;
    border-radius: 8px;
    box-shadow: none;
}

body#bg .box .card:hover,
body#bg .ow-carousel-entry:hover,
body#bg .icon-bx-wraper:hover,
body#bg .dez-box:hover,
body#bg [class*="sya-"][class*="-card"]:hover {
    box-shadow: none;
    transform: none;
}

body#bg .ow-entry-content,
body#bg .content-card {
    padding: 20px;
}

body#bg .ow-entry-title,
body#bg .dez-title {
    color: var(--site-ink);
}

body#bg .section-full .list-checked > li,
body#bg .section-full .list-check-circle > li {
    background: transparent;
    border: 0 !important;
    border-bottom: 1px solid var(--site-line) !important;
    border-radius: 0;
    box-shadow: none;
    color: var(--site-copy) !important;
    margin: 0;
    max-width: none;
    padding-bottom: 12px;
    padding-top: 12px;
}

body#bg .section-full .list-checked > li::before,
body#bg .section-full .list-check-circle > li::before {
    color: var(--site-gold);
}

/* Buttons and CTA bands */
body#bg .site-button,
body#bg .enroll-btn,
body#bg button[type="submit"],
body#bg input[type="submit"] {
    align-items: center;
    background: var(--site-dark) !important;
    border: 1px solid var(--site-dark) !important;
    border-radius: 8px;
    box-shadow: none;
    color: #fff !important;
    display: inline-flex;
    font-size: 15px;
    font-weight: 600;
    justify-content: center;
    letter-spacing: 0;
    min-height: 46px;
    padding: 12px 21px;
    text-transform: none;
}

body#bg .site-button:hover,
body#bg .site-button:focus-visible,
body#bg .enroll-btn:hover,
body#bg .enroll-btn:focus-visible,
body#bg button[type="submit"]:hover,
body#bg button[type="submit"]:focus-visible {
    background: var(--site-gold);
    border-color: var(--site-gold);
    color: var(--site-white);
}

body#bg .sya-discount-banner-section {
    background: var(--site-dark);
    background-image: none;
    padding: 26px 0;
}

body#bg .sya-discount-banner-section::before,
body#bg .sya-discount-banner-section::after {
    display: none;
}

body#bg .sya-discount-title,
body#bg .sya-discount-content {
    color: #fff;
}

body#bg .sya-discount-title {
    font-size: clamp(19px, 1.6vw, 24px);
    line-height: 1.35;
}

body#bg .sya-discount-badge {
    background: var(--site-gold) !important;
    color: var(--site-white);
}

body#bg .sya-discount-btn {
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #fff !important;
}

/* Tables */
body#bg .table-scroll {
    background: var(--site-white);
    border: 1px solid var(--site-line);
    border-radius: 10px;
    box-shadow: none;
    margin-bottom: 22px;
    overflow-x: auto;
}

body#bg .table-scroll > table,
body#bg table.table-inclusion {
    border: 0;
    border-collapse: collapse;
    box-shadow: none;
    margin: 0;
    width: 100%;
}

body#bg .section-full table th,
body#bg .content-area table th {
    background: var(--site-earth) !important;
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    padding: 14px 12px;
    text-align: center;
}

body#bg .section-full table td,
body#bg .content-area table td {
    background: #fff;
    border-color: var(--site-line) !important;
    color: var(--site-ink) !important;
    font-size: 15px;
    line-height: 1.5;
    padding: 14px 12px;
    vertical-align: middle;
}

body#bg .section-full table tbody tr:nth-child(even) td,
body#bg .content-area table tbody tr:nth-child(even) td {
    background: #fdfaf6;
}

body#bg .seats-left {
    background: var(--site-gold) !important;
    color: var(--site-white) !important;
}

/* Schedule */
body#bg .schedule {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 26px 0 24px;
}

body#bg .time-slot {
    background: #fff;
    border: 1px solid var(--site-line) !important;
    border-radius: 8px;
    box-shadow: none;
    color: var(--site-ink) !important;
    display: grid;
    gap: 12px;
    grid-template-columns: 124px 1fr;
    min-width: 0;
    padding: 10px;
}

body#bg .time-slot span {
    background: var(--site-gold) !important;
    border-radius: 6px;
    color: var(--site-white) !important;
    font-size: 13px;
    padding: 7px 8px;
    text-align: center;
}

/* Accordions */
body#bg .dez-accordion .panel {
    background: #fff;
    border: 1px solid var(--site-line);
    border-radius: 8px;
    box-shadow: none;
    margin-bottom: 10px;
    overflow: hidden;
}

body#bg .dez-accordion .acod-title {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

body#bg .dez-accordion .acod-head a {
    align-items: center;
    border: 0;
    color: var(--site-ink);
    display: flex;
    font-size: 16px;
    line-height: 1.5;
    min-height: 56px;
    padding: 13px 42px 13px 15px !important;
}

body#bg .dez-accordion .acod-title .hicon,
body#bg .dez-accordion .acod-title .fa {
    color: var(--site-gold);
    flex: 0 0 auto;
}

body#bg .dez-accordion .acod-body {
    border: 0;
    border-top: 1px solid var(--site-line);
}

body#bg .dez-accordion .acod-content {
    color: var(--site-copy);
    font-size: 15px;
    line-height: 1.7;
    margin: 15px 18px 17px;
}

/* Forms */
body#bg .contact-style-1 form,
body#bg .sya-apply-form {
    margin-left: auto;
    margin-right: auto;
    max-width: 860px;
}

body#bg input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
body#bg select,
body#bg textarea,
body#bg .form-control {
    background: #fff;
    border: 1px solid var(--site-line) !important;
    border-radius: 7px;
    box-shadow: none;
    color: var(--site-ink);
    font-size: 16px;
    min-height: 48px;
}

body#bg textarea,
body#bg textarea.form-control {
    min-height: 130px;
    resize: vertical;
}

body#bg .sya-apply-consent {
    margin-top: 18px;
    position: relative;
    text-align: left;
}

body#bg .sya-apply-consent input {
    left: 0;
    position: absolute;
    top: 5px;
}

body#bg .sya-apply-consent label {
    color: var(--site-copy);
    line-height: 1.6;
    margin: 0;
}

body#bg .sya-apply-consent .sya-terms-link {
    display: inline-block;
    margin-left: 20px;
    margin-top: 4px;
}

body#bg .sya-apply-consent input:focus-visible + label::before {
    outline: 2px solid var(--site-gold);
    outline-offset: 3px;
}

body#bg .sya-apply-consent {
    margin-top: 18px;
    position: relative;
    text-align: left;
}

body#bg .sya-apply-consent input {
    left: 0;
    position: absolute;
    top: 5px;
}

body#bg .sya-apply-consent label {
    color: var(--site-copy);
    line-height: 1.6;
    margin: 0;
}

body#bg .sya-apply-consent input:focus-visible + label::before {
    outline: 2px solid var(--site-gold);
    outline-offset: 3px;
}

body#bg input:focus,
body#bg select:focus,
body#bg textarea:focus,
body#bg .form-control:focus {
    border-color: var(--site-gold);
    box-shadow: 0 0 0 3px rgba(195, 148, 88, 0.14);
    outline: 0;
}

body#bg iframe {
    max-width: 100%;
}

body#bg .g-recaptcha {
    max-width: 100%;
    overflow: hidden;
}

/* Editorial and legal pages */
body#bg .content-area:not(:has(.dez-gallery-box)):not(:has(.sya-blog-grid)) > .container {
    max-width: 940px;
}

body#bg .content-area blockquote,
body#bg .section-full blockquote {
    background: transparent;
    border: 1px solid var(--site-line);
    border-left: 3px solid var(--site-gold);
    border-radius: 8px;
    box-shadow: none;
    color: var(--site-copy) !important;
    font-size: 15px;
    padding: 16px 18px;
}

body#bg a:focus-visible,
body#bg button:focus-visible,
body#bg [tabindex]:focus-visible {
    outline: 2px solid var(--site-gold);
    outline-offset: 3px;
}

@media (max-width: 991px) {
    body#bg .section-full,
    body#bg .page-content > .content-area,
    body#bg .review-wall-section {
        padding-bottom: 60px !important;
        padding-top: 60px !important;
    }

    body#bg .sya-discount-banner,
    body#bg .sya-discount-content {
        align-items: flex-start;
        flex-direction: column;
    }

    body#bg .sya-discount-banner {
        gap: 18px;
    }

    body#bg .sya-discount-content {
        gap: 12px;
    }

    body#bg .feature-grid,
    body#bg .sya-features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    body#bg {
        font-size: 16px;
    }

    body#bg .section-full,
    body#bg .page-content > .content-area,
    body#bg .review-wall-section {
        padding-bottom: 50px !important;
        padding-top: 50px !important;
    }

    body#bg .section-full h1,
    body#bg .content-area h1 {
        font-size: 32px;
    }

    body#bg .section-full h2,
    body#bg .content-area h2,
    body#bg .review-wall-head h2 {
        font-size: 28px;
    }

    body#bg .section-head > :is(h1, h2, h3, h4) {
        font-size: 28px;
    }

    body#bg .section-head {
        margin-bottom: 28px;
    }

    body#bg .feature-grid,
    body#bg .sya-features-grid,
    body#bg .schedule {
        grid-template-columns: 1fr;
    }

    body#bg .box .card {
        flex: 1 1 calc(50% - 10px);
        min-width: 0;
    }

    body#bg .time-slot {
        grid-template-columns: 112px 1fr;
    }

    body#bg .table-scroll table:not(:has(td[data-label])) {
        display: table;
        min-width: 680px;
    }

    body#bg .table-scroll table:not(:has(td[data-label])) thead {
        display: table-header-group;
    }

    body#bg .table-scroll table:not(:has(td[data-label])) tbody {
        display: table-row-group;
    }

    body#bg .table-scroll table:not(:has(td[data-label])) tr {
        display: table-row;
    }

    body#bg .table-scroll table:not(:has(td[data-label])) th,
    body#bg .table-scroll table:not(:has(td[data-label])) td {
        display: table-cell;
        text-align: left;
    }

    body#bg .contact-style-1,
    body#bg .contact-style-1 .container {
        overflow: visible;
    }
}

@media (max-width: 575px) {
    body#bg .box .card {
        flex-basis: 100%;
    }

    body#bg .ow-entry-content,
    body#bg .content-card {
        padding: 18px;
    }

    body#bg .time-slot {
        grid-template-columns: 104px 1fr;
    }

    body#bg .dez-accordion .acod-title,
    body#bg .dez-accordion .acod-head a {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body#bg *,
    body#bg *::before,
    body#bg *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        scroll-behavior: auto;
        transition-duration: 0.01ms;
    }

    body#bg .site-button,
    body#bg .enroll-btn,
    body#bg .ow-carousel-entry,
    body#bg .box .card {
        transition: none;
    }
}

/* Numbered list badges sat 3.6px above the text they label: the badge is a
   28px box pinned to top:0, while the first line box starts after the li's
   4px padding and is 27.2px tall, so its optical centre is at 17.6px. Centre
   the badge on that line, and centre the digit inside the badge (it was
   inheriting a 20.4px line-height inside a 28px circle). */
body#bg .list-num-count > li::before {
    align-items: center;
    display: flex;
    justify-content: center;
    line-height: 1;
    /* rem, not em: em here resolves against the badge's own 12px font-size,
       not the 16px/1.7 line box we are centring against. */
    top: calc(4px + (1.7rem - 28px) / 2);
}

/* ============================================================
   Refinement pass - buttons
   ------------------------------------------------------------
   The fill colour is untouched. A single lighting overlay is
   layered over whatever background-color the token supplies, so
   the same declaration lights both the dark default and the gold
   hover state. Plus a 1px inset top highlight (the letterpress
   trick that makes a control feel physical) and a two-part warm
   shadow: a tight contact shadow and a wide soft one.
   ============================================================ */
body#bg .site-button,
body#bg .enroll-btn,
body#bg button[type="submit"],
body#bg input[type="submit"] {
    background-color: var(--site-dark) !important;
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, 0.11) 0%,
        rgba(255, 255, 255, 0.02) 46%,
        rgba(0, 0, 0, 0.10) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 2px rgba(63, 56, 50, 0.16),
        0 8px 18px -8px rgba(63, 56, 50, 0.34);
    transition: background-color 0.28s ease, border-color 0.28s ease,
                box-shadow 0.28s ease, transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body#bg .site-button:hover,
body#bg .site-button:focus-visible,
body#bg .enroll-btn:hover,
body#bg .enroll-btn:focus-visible,
body#bg button[type="submit"]:hover,
body#bg button[type="submit"]:focus-visible {
    background-color: var(--site-gold) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 2px 4px rgba(63, 56, 50, 0.16),
        0 14px 26px -10px rgba(160, 116, 62, 0.52);
    transform: translateY(-1px);
}

/* pressed: the lift collapses and the light inverts */
body#bg .site-button:active,
body#bg .enroll-btn:active,
body#bg button[type="submit"]:active {
    box-shadow: inset 0 2px 5px rgba(45, 39, 34, 0.28);
    transform: translateY(0);
}

body#bg .site-button:focus-visible,
body#bg .enroll-btn:focus-visible,
body#bg button[type="submit"]:focus-visible {
    outline: 2px solid var(--site-gold);
    outline-offset: 3px;
}

/* The outlined "white" variant keeps its paper fill. It MUST also restate the
   text colour: the base rule above sets color:#fff for the dark button, and an
   opaque white fill on top of that leaves invisible white-on-white text. */
body#bg .site-button.white,
body#bg .site-button.white:link,
body#bg .site-button.white:visited {
    background-color: #ffffff !important;
    background-image: linear-gradient(180deg, #ffffff 0%, #fdfaf6 100%) !important;
    border-color: var(--site-line) !important;
    box-shadow: 0 1px 2px rgba(63, 56, 50, 0.06);
    color: var(--site-earth) !important;
}

body#bg .site-button.white:hover,
body#bg .site-button.white:focus-visible,
body#bg .site-button.white.active {
    background-color: var(--site-earth) !important;
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(0, 0, 0, 0.08) 100%) !important;
    border-color: var(--site-earth) !important;
    color: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
    body#bg :is(.site-button, .enroll-btn, button[type="submit"]) {
        transition: none;
        transform: none;
    }
}

/* ============================================================
   Refinement pass - card surfaces
   ------------------------------------------------------------
   Lives here rather than theme.css because the override block
   above sets box-shadow:none on these same cards and site-ui
   loads last. No colour or layout change: a barely-there paper
   wash replaces screen-flat #fff, and a single mid shadow
   becomes a tight contact shadow plus a wide soft one.
   ============================================================ */
body#bg :is(.sya-learn-card, .sya-aspect-card, .sya-why-card, .sya-perk-card,
            .sya-capital-card, .sya-prep-card, .sya-feature-card,
            .sya-why-grid-card, .sya-video-card, .content-card,
            .ow-carousel-entry) {
    background-image: linear-gradient(178deg, #ffffff 0%, #fdfaf6 100%);
    box-shadow:
        0 1px 2px rgba(63, 56, 50, 0.04),
        0 10px 26px -14px rgba(63, 56, 50, 0.14);
    transition: box-shadow 0.32s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.32s ease, transform 0.32s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body#bg :is(.sya-learn-card, .sya-aspect-card, .sya-why-card, .sya-perk-card,
            .sya-capital-card, .sya-prep-card, .sya-feature-card,
            .sya-why-grid-card, .sya-video-card, .content-card,
            .ow-carousel-entry):hover {
    border-color: rgba(199, 156, 102, 0.34) !important;
    box-shadow:
        0 2px 4px rgba(63, 56, 50, 0.05),
        0 20px 40px -18px rgba(99, 79, 52, 0.24);
}

@media (prefers-reduced-motion: reduce) {
    body#bg :is(.sya-learn-card, .sya-aspect-card, .sya-why-card, .sya-perk-card,
                .sya-capital-card, .sya-prep-card, .sya-video-card) {
        transition: none;
    }
}

/* Set by js/site-navigation.js from the heading's computed text-align, because
   the centring is inherited from too many different places to match reliably
   with a selector. See the comment in that file. */
body#bg .section-full .container:not(:has(.dez-separator-outer)) :is(h1, h2).sya-heading-centred::after,
body#bg .sya-heading-centred::after {
    margin-inline: auto;
}

/* Check-list glyphs sat ~6px above the text they label. The base rule pins the
   ::before at top:6px with the glyph's own 25.5px line-height, while the first
   text line starts after the li's padding inside a 27.2px line box - so the two
   never lined up, and any change to the li padding moved them further apart.
   Inheriting both values makes the glyph's line box identical to the text's,
   so they centre on each other automatically whatever the padding is. */
body#bg :is(.list-check, .list-checked, .list-check-circle) > li::before {
    height: auto;
    line-height: inherit;
    padding-top: inherit;
    top: 0;
}

/* ---- Video card ------------------------------------------------------
   The wrapper reserved a 127% padding-bottom box (a portrait ratio) for a
   16:9 poster, leaving ~300px of dead space under the video. Size it to
   the media it actually contains. */
body#bg .sya-video-wrapper {
    aspect-ratio: 16 / 9;
    height: auto;
    padding-bottom: 0;
}



/* The reach photo fills its grid track. Has to live here: site-ui sets
   `body#bg .section-full img { height: auto }` at a higher specificity than
   theme.css can reach, which left the photo at its intrinsic height inside a
   stretched figure. */
body#bg .sya-reach-figure img {
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 991px) {
    body#bg .sya-reach-figure img {
        height: auto;
        max-height: 320px;
    }
}