/* ============================================================
   BASE.CSS — Template owned. Do not edit in project clones.
   Override values using theme.css root variables instead.
   ============================================================ */

/* --- Google Fonts --- */
/* Import in theme.css via @import */

/* ── Variables ───────────────────────────────────────────── */
:root {

    /* Neutrals */
    --n-900: #0d0d0d;
    --n-800: #1a1a1a;
    --n-700: #333333;
    --n-600: #4d4d4d;
    --n-500: #666666;
    --n-400: #808080;
    --n-300: #b3b3b3;
    --n-200: #cccccc;
    --n-100: #e6e6e6;
    --n-050: #f5f5f5;

    /* Brand — override in theme.css */
    --color-primary:        #150A00;
    --color-primary-light:  #6D4E30;
    --color-primary-dark:   #0a0400;
    --color-accent:         #A97125;
    --color-cta:            #DD993C;

    /* Semantic */
    --color-success:    #198754;
    --color-warning:    #ffc107;
    --color-error:      #dc3545;
    --color-info:       #0dcaf0;

    /* Surface */
    --color-bg:         #ffffff;
    --color-bg-subtle:  #F0E2CE;
    --color-text:       var(--color-primary);
    --color-text-muted: var(--color-primary-light);
    --color-border:     #C3A581;

    /* Typography — override in theme.css */
    --font-body:    sans-serif;
    --font-heading: sans-serif;

    --text-xs:   1.0625rem;
    --text-sm:   1.125rem;
    --text-base: 1.25rem;
    --text-md:   1.375rem;
    --text-lg:   1.5rem;
    --text-xl:   1.875rem;
    --text-2xl:  2.375rem;
    --text-3xl:  2.75rem;
    --text-4xl:  3.75rem;
    --text-5xl:  4.75rem;

    /* Spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Border radius */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   1rem;
    --radius-full: 9999px;

    /* Layout */
    --header-height:  80px;
    --section-pad:    var(--space-20);

    /* Elevation */
    --shadow-sm:  0 1px 4px rgba(0,0,0,0.08);
    --shadow-md:  0 0 12px rgba(0,0,0,0.12);
    --shadow-lg:  0 4px 24px rgba(0,0,0,0.16);

    /* Border */
    --border-width: 1px;

    /* Transitions */
    --transition: 0.25s ease;

    /* ── Element tokens ─────────────────────────────────────
       Each inherits from a core token above. theme.css (written
       by the Style Editor) overrides an individual token with a
       literal value to break it from its source; deleting the
       override restores inheritance. */

    /* Header */
    --header-bg:         var(--color-primary);
    --header-link:       var(--color-bg);
    --header-link-hover: var(--color-cta);

    /* Footer */
    --footer-bg:      var(--color-primary);
    --footer-color:   var(--color-border);

    /* Cards */
    --card-bg:            var(--color-bg);
    --card-radius:        var(--radius-md);
    --card-shadow:        var(--shadow-md);
    --card-padding:       var(--space-6);
    --card-title-size:    var(--text-xl);
    --card-title-color:   var(--color-text);
    --card-text-color:    var(--color-text-muted);
    --card-footer-border: var(--color-border);
    /* --card-border (border shorthand) and --card-align (text-align)
       are consumed with fallbacks — set them only to override. */

    /* Buttons */
    --btn-radius:       var(--radius-full);
    --btn-border-width: 3px;
    --btn-padding-v:    0.5rem;
    --btn-padding-h:    1.5rem;
    --btn-font-size:    var(--text-base);

    /* Banner */
    --banner-bg:        var(--color-cta);
    --banner-color:     var(--color-primary);
    --banner-pad:       var(--space-3);
    --banner-font-size: var(--text-sm);
    --banner-spacing:   0.04em;
    --banner-transform: uppercase;
    --banner-duration:  30s;

    /* Badge */
    --badge-radius: var(--radius-md);
    --badge-shadow: none;
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html { overflow-x: hidden; }

body {
    /* releases the layout.pug FOUC guard the moment this sheet applies */
    visibility: visible;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* overflow-x: hidden; */
}
/* Keep the scrollbar while a modal or the mobile menu is open:
   Bootstrap's inline overflow:hidden would reset the scroll position
   (snapping the sticky header out of view), and its inline padding-right
   — compensating a scrollbar it thinks it hid — would narrow the header.
   No height clamp either: it would cut the sticky range to the first
   viewport and detach the header on scrolled pages. */
body.modal-open,
body.menu-toggled {
    overflow: visible !important;
    padding-right: 0 !important;
}

main {
    flex-grow: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Links ───────────────────────────────────────────────── */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--color-accent); }

/* Centered-expanding underline — opt-in with .link-emph */
.link-emph {
    position: relative;
}
.link-emph::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--transition), left var(--transition);
}
.link-emph:hover::after {
    left: calc(50% - 1rem);
    width: 2rem;
}

/* ── Subtext ─────────────────────────────────────────────── */
.subtext {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-cta);
    margin-top: 0;
    margin-bottom: var(--space-2);
}
.subtext--caps {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── Badge ───────────────────────────────────────────────── */
.badge-comp {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.65em;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: var(--badge-radius);
    box-shadow: var(--badge-shadow);
}
.badge-primary {
    background: var(--color-cta);
    color: var(--color-primary);
}
.badge-secondary {
    background: var(--color-primary);
    color: var(--color-bg);
}
.badge-cta {
    background: var(--color-cta);
    color: var(--color-primary);
}
.badge-outline-primary {
    background: transparent;
    border-color: var(--color-cta);
    color: var(--color-primary);
}
.badge-light {
    background: var(--color-bg);
    color: var(--color-primary);
}
.badge-outline-light {
    background: transparent;
    border-color: var(--color-bg);
    color: var(--color-bg);
}

/* ── Container ───────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* ── Sections ────────────────────────────────────────────── */
section {
    padding: var(--section-pad) 0;
}

/* Pseudo-element backgrounds — activated by .has-before / .has-after on section */
.has-before,
.has-after {
    position: relative;
    overflow: hidden;
}

.has-before::before,
.has-after::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.has-before::before {
    top:        var(--section-before-top,     0);
    left:       var(--section-before-left,    0);
    right:      var(--section-before-right,   auto);
    bottom:     var(--section-before-bottom,  auto);
    width:      var(--section-before-w,       100%);
    height:     var(--section-before-h,       100%);
    opacity:    var(--section-before-opacity, 1);
    background: var(--section-before-bg,      transparent);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.has-after::after {
    top:        var(--section-after-top,     0);
    left:       var(--section-after-left,    0);
    right:      var(--section-after-right,   auto);
    bottom:     var(--section-after-bottom,  auto);
    width:      var(--section-after-w,       100%);
    height:     var(--section-after-h,       100%);
    opacity:    var(--section-after-opacity, 1);
    background: var(--section-after-bg,      transparent);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Lift content above pseudo-element layers */
.has-before > .container,
.has-after > .container,
.has-before > .container-fluid,
.has-after > .container-fluid {
    position: relative;
    z-index: 1;
}

/* ── Header ──────────────────────────────────────────────── */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    height: var(--header-height);
    /* body.modal-open clamps the flex-column body to 100vh; as an
       in-flow (sticky, per theme) flex item the header must not shrink */
    flex-shrink: 0;
    background: var(--header-bg);
    display: flex;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled { box-shadow: 0 0 12px rgba(0,0,0,0.5); }
.site-header.is-hidden { transform: translateY(-100%); }

/* Brand */
.brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-bg);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-lg);
    text-decoration: none;
    transition: opacity var(--transition);
}
.brand:hover {
    color: var(--color-bg);
    opacity: 0.8;
}
/* Desktop nav */
.nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
}

.site-header .nav-list a {
    color: var(--header-link);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition);
}
.site-header .nav-list a:hover { color: var(--header-link-hover); }
.site-header .nav-list a.link-emph::after { background: var(--header-link); }

/* Hamburger */
#mobileToggle {
    position: relative;
    width: 36px;
    height: 36px;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.25s ease;
}
#mobileToggle::before,
#mobileToggle::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    height: 2px;
    width: 26px;
    background: var(--header-link);
    border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: top 0.25s 0.25s ease, transform 0.25s ease;
}
#mobileToggle::before { top: calc(50% - 5px); }
#mobileToggle::after  { top: calc(50% + 5px); }

/* Mobile offcanvas nav */
#mobileMenu {
    padding-top: var(--header-height);
}

/* Close X inside the panel; the header's hamburger fades out while the
   menu is open so the two never show at once. */
#mobileMenuClose {
    position: absolute;
    top: calc(var(--header-height) / 2);
    right: var(--space-6);
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
#mobileMenuClose::before,
#mobileMenuClose::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    height: 2px;
    width: 26px;
    background: var(--color-text);
    border-radius: 2px;
}
#mobileMenuClose::before { transform: translate(-50%, -50%) rotate(-45deg); }
#mobileMenuClose::after  { transform: translate(-50%, -50%) rotate(45deg); }
.menu-toggled #mobileToggle {
    opacity: 0;
    pointer-events: none;
}
#mobileMenu .offcanvas-body {
    padding: var(--space-8) var(--space-6);
}
#mobileMenu .nav-list {
    flex-direction: column;
    align-items: center;
    gap: 0;
}
#mobileMenu .nav-list li {
    width: 100%;
    text-align: center;
}
#mobileMenu .nav-list a {
    display: block;
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-primary);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}
#mobileMenu .nav-list a:hover { color: var(--color-accent); }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
    background: var(--footer-bg);
    color: var(--footer-color);
    padding: var(--space-16) 0 var(--space-8);
    margin-top: auto;
    font-size: var(--text-sm);
}

.site-footer a {
    color: var(--footer-color);
    text-decoration: none;
    transition: color var(--transition);
}
.site-footer a:hover {
    color: var(--color-bg);
}

.footer-brand .brand {
    color: var(--color-bg);
}
.footer-brand .brand:hover {
    color: var(--color-bg);
}

.footer-tagline {
    color: var(--n-500);
    font-size: var(--text-sm);
    margin-top: var(--space-3);
}

.footer-heading {
    color: var(--color-bg);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.footer-nav a {
    color: var(--n-400);
}
.footer-address {
    display: flex;
    flex-direction: column;
    font-style: normal;
    color: var(--n-400);
    font-size: var(--text-sm);
    line-height: 1.7;
    text-decoration: none;
}
a.footer-address:hover {
    color: var(--color-cta);
}

.footer-bottom {
    border-top: 1px solid var(--color-accent);
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    color: var(--footer-color);
    font-size: var(--text-xs);
}
@media (max-width: 768px) {
    .footer-bottom {
        justify-content: center;
    }
}
.footer-bottom a,
.footer-bottom p {
    color: var(--color-cta);
}

/* The reCAPTCHA badge is hidden site-wide; Google permits this only when
   the attribution line (footer.pug .footer-recaptcha) is shown instead */
.grecaptcha-badge {
    visibility: hidden !important;
}

.footer-recaptcha {
    flex-basis: 100%;
    opacity: 0.7;
    /* Pull the wrapped line up against the copyright row — the parent's
       flex gap is sized for the side-by-side items, not this full-width
       second row */
    margin-top: calc(-1 * var(--space-2));
}

.footer-recaptcha a {
    text-decoration: underline;
}
.one-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    
    text-decoration: underline !important;
    transition: opacity var(--transition);
}
.one-link:hover {
    opacity: 1;
    color: var(--footer-color);
}

/* Override link underline color for footer (white/gold on dark) */
.site-footer .link-emph::after {
    background: var(--color-cta);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: fit-content;
    text-align: center;
    padding: var(--btn-padding-v) var(--btn-padding-h);
    font-family: var(--font-body);
    font-size: var(--btn-font-size);
    font-weight: 500;
    line-height: 1.2;
    border-radius: var(--btn-radius);
    border: var(--btn-border-width) solid transparent;
    outline: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition), outline-color var(--transition), background var(--transition), border-color var(--transition);
}
.btn:focus,
.btn:focus-visible,
.btn:active {
    box-shadow: none;
    outline: none;
}
/* Size variants derive from the base tokens so they follow theme changes */
.btn-sm {
    padding: max(2px, calc(var(--btn-padding-v) - 4px)) max(8px, calc(var(--btn-padding-h) - 8px));
    font-size: max(10px, calc(var(--btn-font-size) - 2px));
}
.btn-lg {
    padding: calc(var(--btn-padding-v) + 4px) calc(var(--btn-padding-h) + 8px);
    font-size: calc(var(--btn-font-size) + 2px);
}

/* Primary — gold CTA */
.btn-primary {
    --bs-btn-hover-bg: var(--color-cta);
    --bs-btn-hover-border-color: var(--color-bg);
    --bs-btn-hover-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-cta);
    --bs-btn-active-border-color: var(--color-bg);
    --bs-btn-active-color: var(--color-primary);
    background: var(--color-cta);
    color: var(--color-primary);
    border-color: var(--color-bg);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active {
    outline-color: var(--color-primary);
}

/* Secondary — dark fill */
.btn-secondary {
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-bg);
    --bs-btn-hover-color: var(--color-cta);
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-bg);
    --bs-btn-active-color: var(--color-cta);
    background: var(--color-primary);
    color: var(--color-bg);
    border-color: var(--color-bg);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:focus-visible,
.btn-secondary:active {
    outline-color: var(--color-cta);
}

/* CTA — alias for primary */
.btn-cta {
    --bs-btn-hover-bg: var(--color-cta);
    --bs-btn-hover-border-color: var(--color-bg);
    --bs-btn-hover-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-cta);
    --bs-btn-active-border-color: var(--color-bg);
    --bs-btn-active-color: var(--color-primary);
    background: var(--color-cta);
    color: var(--color-primary);
    border-color: var(--color-bg);
}
.btn-cta:hover,
.btn-cta:focus,
.btn-cta:focus-visible,
.btn-cta:active {
    outline-color: var(--color-primary);
}

/* Outline Primary — no fill, fills on hover */
.btn-outline-primary {
    --bs-btn-hover-bg: var(--color-cta);
    --bs-btn-hover-border-color: var(--color-cta);
    --bs-btn-hover-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-cta);
    --bs-btn-active-border-color: var(--color-cta);
    --bs-btn-active-color: var(--color-primary);
    background: transparent;
    border-color: var(--color-cta);
    color: var(--color-primary);
}

/* Light — for use on dark backgrounds */
.btn-light {
    --bs-btn-hover-bg: var(--color-bg);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-bg);
    --bs-btn-active-border-color: var(--color-primary);
    --bs-btn-active-color: var(--color-primary);
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-light:hover,
.btn-light:focus,
.btn-light:focus-visible,
.btn-light:active {
    outline-color: var(--color-cta);
}

/* Outline Light — for use on dark backgrounds */
.btn-outline-light {
    --bs-btn-hover-bg: var(--color-bg);
    --bs-btn-hover-border-color: var(--color-bg);
    --bs-btn-hover-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-bg);
    --bs-btn-active-border-color: var(--color-bg);
    --bs-btn-active-color: var(--color-primary);
    background: transparent;
    border-color: var(--color-bg);
    color: var(--color-bg);
}

/* Link */
.btn-link {
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-hover-color: var(--color-cta);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-color: var(--color-cta);
    background: transparent;
    border-color: transparent;
    outline-color: transparent;
    color: var(--color-primary);
    padding-left: 0;
    padding-right: 0;
}

/* Loading state — add .loading to the <form> or directly to .btn */
form.loading .btn[type='submit'],
.btn.loading {
    color: transparent;
    pointer-events: none;
    position: relative;
}
form.loading .btn[type='submit']::after,
.btn.loading::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    transform: translate(-50%, -50%);
    border-top: 2px solid var(--color-primary);
    border-right: 2px solid transparent;
    border-bottom: 0;
    border-left: 2px solid var(--color-primary);
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}
/* Spinner color on light-text (dark bg) buttons */
form.loading .btn-secondary[type='submit']::after,
.btn-secondary.loading::after,
form.loading .btn-outline-light[type='submit']::after,
.btn-outline-light.loading::after {
    border-top-color: var(--color-bg);
    border-left-color: var(--color-bg);
}
@keyframes btn-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
    --bs-alert-bg: transparent;
    --bs-alert-border-radius: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    border-left: 3px solid currentColor;
    padding-left: var(--space-4);
}

/* ── Accordion ───────────────────────────────────────────── */
.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: inherit;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-border-color: var(--color-border);
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
}
.accordion-item {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0 !important;
}
.accordion-item:first-child {
    border-top: var(--bs-accordion-border-width, 1px) solid var(--color-border);
}
.accordion-button,
.accordion-button:not(.collapsed),
.accordion-button:hover,
.accordion-button:focus,
.accordion-button:focus-visible {
    background: transparent;
    box-shadow: none;
    color: inherit;
}

/* ── Social Links ────────────────────────────────────────── */
.social-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: 0;
}
.social-links--start  { justify-content: flex-start; }
.social-links--center { justify-content: center; }
.social-links--end    { justify-content: flex-end; }
.social-links--column {
    flex-direction: column;
    align-items: flex-end;
}
.social-links--column.social-links--start  { align-items: flex-start; }
.social-links--column.social-links--center { align-items: center; }
.social-links--column.social-links--end    { align-items: flex-end; }
.social-item a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
    transition: var(--transition);
}
.social-item a:hover {
    opacity: 1;
    color: var(--color-primary);
}
/* Light variant — white icons/text for dark backgrounds */
.social-links--light .social-item a {
    color: var(--color-bg);
}
.social-links--light .social-item a:hover {
    color: var(--color-bg);
    opacity: 0.7;
}
/* Dark variant — primary color forced regardless of context */
.social-links--dark .social-item a {
    color: var(--color-primary);
}
.social-links--dark .social-item a:hover {
    color: var(--color-primary-dark);
    opacity: 1;
}
.social-svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    display: block;
}

/* ── Forms ───────────────────────────────────────────────── */

/* Wrapper for each field */
.form-input {
    margin-bottom: var(--space-5);
}

.form-input label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.form-input input,
.form-input textarea,
.form-input select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--color-border);
    border-radius: 0;
    padding: var(--space-2) 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    outline: none;
    transition: border-color var(--transition);
    -webkit-appearance: none;
}

.form-input input:focus,
.form-input textarea:focus,
.form-input select:focus {
    border-bottom-color: var(--color-primary);
}

.form-input textarea {
    resize: vertical;
    min-height: 100px;
}

/* Error state */
.form-input.has-error input,
.form-input.has-error textarea,
.form-input.has-error select {
    border-bottom-color: var(--color-error);
}
.form-input.has-error label {
    color: var(--color-error);
}
.field-error {
    font-size: var(--text-xs);
    color: var(--color-error);
    margin-top: var(--space-1);
}

/* Light variant — for forms on dark backgrounds */
.form-input.light label {
    color: var(--color-bg);
}
.form-input.light input,
.form-input.light textarea,
.form-input.light select {
    border-bottom-color: rgba(255,255,255,0.4);
    color: var(--color-bg);
}
.form-input.light input::placeholder,
.form-input.light textarea::placeholder {
    color: rgba(255,255,255,0.5);
}
.form-input.light input:focus,
.form-input.light textarea:focus {
    border-bottom-color: var(--color-bg);
}

/* Form message (success/error feedback) */
.form-message {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition), padding var(--transition);
    font-size: var(--text-sm);
    border-left: 3px solid currentColor;
}
.form-message.show {
    max-height: 12rem;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}
.form-message.success {
    color: var(--color-success);
}
.form-message.error {
    color: var(--color-error);
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
    --bs-card-border-width: 0;
    border: var(--card-border, none);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    background: var(--card-bg);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition);
}

/* Image header with gradient overlay (jase_card style) */
.card-img-wrap {
    position: relative;
    aspect-ratio: 3/2;
    flex-shrink: 0;
    overflow: hidden;
}
.card-img-wrap > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.card-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--color-primary) 0%, transparent 65%);
    pointer-events: none;
}
.card-img-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-4) var(--space-6) var(--space-5);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}
.card-img-content .card-title {
    color: var(--color-bg);
    margin-bottom: 0;
}

.card-body {
    padding: var(--card-padding);
    text-align: var(--card-align, inherit);
    flex-grow: 1;
}
.card-footer {
    background: none;
    border-top: 1px solid var(--card-footer-border);
    padding: var(--space-4) var(--space-6);
    text-align: var(--card-align, inherit);
}
.card-title {
    font-size: var(--card-title-size);
    color: var(--card-title-color);
    font-weight: 600;
    margin-bottom: var(--space-3);
}
.card-text {
    color: var(--card-text-color);
    margin-bottom: 0;
}
.card-body > h1, .card-body > h2, .card-body > h3,
.card-body > h4, .card-body > h5, .card-body > h6 {
    font-size: var(--card-title-size);
    color: var(--card-title-color);
    font-weight: 600;
    margin-bottom: var(--space-3);
}
.card-body > p {
    color: var(--card-text-color);
    margin-bottom: var(--space-2);
}
.card-body > p:last-child { margin-bottom: 0; }
.card-img-content > h1, .card-img-content > h2, .card-img-content > h3,
.card-img-content > h4, .card-img-content > h5, .card-img-content > h6 {
    color: var(--color-bg);
    margin-bottom: 0;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
    min-height: calc(var(--hero-h, 100) * 1vh - var(--header-height));
    display: flex;
    align-items: center;
    background-color: var(--color-bg-subtle);
    background-size: cover;
    background-position: center;
    padding: var(--space-16) 0;
}
.hero .container {
    width: 100%;
}
.hero-title {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-4);
    line-height: 1.1;
}
.hero-subtitle {
    font-size: var(--text-xl);
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
    max-width: 620px;
}
.hero-ctas {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    align-items: center;
}
.hero-center .container { text-align: center; }
.hero-center .hero-subtitle { margin-left: auto; margin-right: auto; }
.hero-center .hero-ctas { justify-content: center; }
.hero-right .container { text-align: right; }
.hero-right .hero-subtitle { margin-left: auto; margin-right: 0; }
.hero-right .hero-ctas { justify-content: flex-end; }
.hero.has-video {
    position: relative;
    overflow: hidden;
}
.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}
.hero.has-video > .container {
    position: relative;
    z-index: 1;
}

/* ── Banner ──────────────────────────────────────────────── */
.banner {
    width: 100%;
    overflow: hidden;
    background: var(--banner-bg);
    color: var(--banner-color);
    padding: var(--banner-pad) 0;
    font-size: var(--banner-font-size);
    font-weight: 600;
    letter-spacing: var(--banner-spacing);
    text-transform: var(--banner-transform);
    line-height: 1;
}

/* Static: items distributed across full width */
.banner-static {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-2) var(--space-6);
    padding: 0 var(--space-8);
}

/* Carousel: continuous marquee scroll */
.banner-carousel {
    display: flex;
}

.banner-track {
    display: flex;
    align-items: center;
    width: max-content;
    white-space: nowrap;
    animation: banner-scroll var(--banner-duration) linear infinite;
    will-change: transform;
}

.banner:hover .banner-track {
    animation-play-state: paused;
}

.banner-item {
    display: inline-flex;
    text-wrap: nowrap;
    align-items: center;
    padding: 0 var(--space-8);
}

.banner-carousel .banner-item + .banner-item::before {
    content: '◆';
    font-size: 0.45em;
    opacity: 0.55;
    margin-right: var(--space-8);
}

@keyframes banner-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

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

/* ── YouTube Video Carousel ──────────────────────────────── */
.yt-player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.yt-thumbnail {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
    transition: opacity 0.3s;
}
.yt-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.yt-player.is-playing .yt-thumbnail {
    opacity: 0;
    pointer-events: none;
}

/* Video title — overlaid at the bottom of the thumbnail */
.yt-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 14px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, transparent 100%);
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    pointer-events: none;
}

.yt-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.yt-play-btn svg {
    width: 72px;
    height: 72px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
    transition: transform 0.2s;
}
.yt-thumbnail:hover .yt-play-btn svg {
    transform: scale(1.1);
}

.yt-embed-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.yt-embed-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Carousel stage clips overflow — side slides exit here at the section edge */
.yt-stage {
    position: relative;
    overflow: hidden;
}

/* Track translates horizontally to center the active slide */
.yt-track {
    display: flex;
    gap: 12px;
    transition: transform 0.4s ease;
}

/* Slides are fixed-width (JS sets px from --yt-slide-width %); opacity marks active */
.yt-slide {
    flex: 0 0 auto;
    opacity: 0.45;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.yt-slide.is-active {
    opacity: 1;
    cursor: default;
}

/* Prev / Next buttons */
.yt-prev-btn,
.yt-next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.yt-prev-btn:hover,
.yt-next-btn:hover {
    background: rgba(0, 0, 0, 0.85);
}
.yt-prev-btn { left: 8px; }
.yt-next-btn { right: 8px; }

/* Dot indicators */
.yt-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}
.yt-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--color-cta);
    opacity: 0.35;
    cursor: pointer;
    transition: opacity 0.2s;
}
.yt-dots button.active {
    opacity: 1;
}

/* ── Flash Messages ──────────────────────────────────────── */
.site-message,
.site-sub-message {
    padding: var(--space-3) 0;
}

/* ── Scroll To Top ───────────────────────────────────────── */
#scrollTop {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 2rem));
    transition: transform 0.3s ease;
    z-index: 990;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
}
#scrollTop.visible {
    transform: translateX(-50%) translateY(0);
}
#scrollTop svg {
    width: 1.1rem;
    height: 1.1rem;
}
@media (min-width: 992px) {
    #scrollTop {
        left: auto;
        right: 1.5rem;
        transform: translateY(calc(100% + 2rem));
    }
    #scrollTop.visible {
        transform: translateY(0);
    }
}

/* ── Utility ─────────────────────────────────────────────── */
.text-muted { color: var(--color-text-muted) !important; }

/* Responsive section padding */
@media (max-width: 768px) {
    :root { --section-pad: var(--space-12); }
    .hero-title { font-size: var(--text-4xl); }
    .hero-subtitle { font-size: var(--text-lg); }
    .container { padding: 0 var(--space-4); }
    .site-footer { padding: var(--space-12) 0 var(--space-6); }
}