/* ==========================================================================
   /assets/css/global.css
   Base stylesheet. Font (Inter) is linked once in tpl.head — do NOT @import
   fonts here, it blocks rendering. See snippet at bottom of chat message.
   ========================================================================== */

/* ---------- 1. Variables ---------- */
:root {
    --font-main: "Inter", Arial, sans-serif;

    --color-primary: #800000;
    --color-primary-dark: #5c0000;
    --color-text: #000000;
    --color-text-muted: #4d4d4d;
    --color-bg: #ffffff;
    --color-bg-alt: #f7f5f4;
    --color-border: #800000;
    --color-border-light: #e0dcdc;

    --color-charcoal: #1d1d1d;
    --color-charcoal-soft: #2a2422;
    --color-on-dark: #f5f1ed;
    --color-on-dark-muted: #cfc6c0;

    --radius: 0px;

    --container: 1440px;
    --gutter: clamp(16px, 3vw, 48px);
    --section-y: clamp(48px, 8vw, 120px);

    --ease: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-silk: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 0.2s;
    --dur-base: 0.4s;
    --dur-slow: 0.7s;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family: var(--font-main);
    font-size: clamp(15px, 0.9vw + 0.6rem, 18px);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100svh;
    overflow-x: hidden;
}

ul,
ol {
    list-style: none;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

a {
    color: inherit;
    text-decoration: none;
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

h1 {
    font-size: clamp(2.25rem, 1.4rem + 3.5vw, 5rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
    font-weight: 700;
}

h3 {
    font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
}

h4 {
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
}

p {
    max-width: 68ch;
}

.eyebrow {
    display: inline-block;
    font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 1em;
}

.text-muted {
    color: var(--color-text-muted);
}

/* ---------- 4. Layout / container ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: var(--section-y);
}

.section--tight {
    padding-block: calc(var(--section-y) * 0.6);
}

.section--alt {
    background: var(--color-bg-alt);
}

.grid {
    display: grid;
    gap: var(--gutter);
}

.flex {
    display: flex;
    gap: var(--gutter);
}

.flex--center {
    align-items: center;
    justify-content: center;
}

.flex--between {
    align-items: center;
    justify-content: space-between;
}

/* ---------- 5. Links (inline text links, not buttons) ---------- */
.link {
    position: relative;
    display: inline-block;
    color: var(--color-text);
    padding-bottom: 2px;
}

.link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(1);
    transform-origin: right;
    transition: transform var(--dur-base) var(--ease);
}

.link:hover::after {
    transform: scaleX(0);
    transform-origin: left;
}

/* ---------- 6. Buttons ---------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    padding: 1em 2em;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate;
    white-space: nowrap;
    transition: color var(--dur-base) var(--ease);
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.btn__arrow {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke: currentColor;
    transition: transform var(--dur-base) var(--ease);
}

.btn:hover .btn__arrow {
    transform: translateX(4px);
}

/* Primary: background wipe on hover via ::before */
.btn--primary {
    background: var(--color-primary);
    color: #ffffff;
    border: 1px solid var(--color-primary);
}

.btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-primary-dark);
    transform: translateX(-101%);
    transition: transform var(--dur-base) var(--ease);
    z-index: -1;
}

.btn--primary:hover::before {
    transform: translateX(0);
}

/* Outline: fill left-to-right on hover via clip-path */
.btn--outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn--outline::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--dur-base) var(--ease);
    z-index: -1;
}

.btn--outline:hover {
    color: #ffffff;
}

.btn--outline:hover::before {
    clip-path: inset(0 0 0 0);
}

/* Text button: underline slide, no border/background */
.btn--text {
    padding: 0.4em 0;
    color: var(--color-text);
}

.btn--text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-base) var(--ease);
}

.btn--text:hover::after {
    transform: scaleX(1);
}

/* Shared shine sweep — same premium hover language used on the header CTA
   and hero ecosystem blocks. Add to any .btn--primary to match that feel. */
.btn--shine {
    position: relative;
    overflow: hidden;
}

.btn--shine::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left 0.7s var(--ease-silk);
}

.btn--shine:hover::after {
    left: 130%;
}

@media (prefers-reduced-motion: reduce) {
    .btn--shine::after {
        transition: none !important;
    }
}

/* Icon button: fixed square */
.btn--icon {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-primary);
}

.btn--icon svg {
    width: 1.25em;
    height: 1.25em;
    stroke: currentColor;
}

.btn--icon:hover {
    background: var(--color-primary);
    color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .btn::before,
    .btn__arrow,
    .link::after,
    .btn--text::after {
        transition: none !important;
    }
}

/* ---------- 7. Forms ---------- */
input,
textarea,
select {
    width: 100%;
    padding: 0.9em 1em;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
    transition: border-color var(--dur-fast) var(--ease);
}

textarea {
    min-height: 140px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
}

label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5em;
}

.form-field {
    margin-bottom: 1.25em;
}

.form-field--error input,
.form-field--error textarea {
    border-color: #b3261e;
}

.form-error {
    display: block;
    margin-top: 0.4em;
    font-size: 0.8rem;
    color: #b3261e;
}

.form-success {
    padding: 1em 1.25em;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

/* ---------- 8. Accessibility ---------- */
.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;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 1em;
    z-index: 1000;
    padding: 0.75em 1.25em;
    background: var(--color-primary);
    color: #ffffff;
    transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus {
    top: 1em;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---------- 9. Reveal / scroll-animation utility classes ----------
   JS (animations.js) toggles .is-visible via IntersectionObserver.
   These are intentionally generic — GSAP can hook onto the same
   classes/attributes instead if you decide to drive it from GSAP
   timelines rather than plain CSS transitions. */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal--fade {
    transform: none;
}

.reveal--scale {
    transform: scale(1.06);
}

.reveal--scale.is-visible {
    transform: scale(1);
}

.reveal--clip {
    clip-path: inset(0 0 100% 0);
    transform: none;
    transition: clip-path var(--dur-slow) var(--ease);
}

.reveal--clip.is-visible {
    clip-path: inset(0 0 0% 0);
}

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal--clip,
    .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
}

/* ---------- 10. Utility classes ---------- */
.hidden { display: none !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.text-center { text-align: center; }
.no-overflow { overflow: hidden; }

/* ---------- 11. Responsive breakpoints (component CSS hooks into these) ---------- */
@media (max-width: 1200px) {
    :root { --section-y: clamp(40px, 7vw, 96px); }
}

@media (max-width: 768px) {
    .flex { flex-wrap: wrap; }
    h1 { letter-spacing: -0.005em; }
}

@media (max-width: 600px) {
    :root {
        --gutter: clamp(20px, 5vw, 32px);
    }
}

@media (max-width: 480px) {
    .btn { padding: 0.9em 1.5em; font-size: 0.875rem; }
}
/* ========================================================================== 
   Browka Luxury System v5 — unified visual language
   ========================================================================== */
:root {
    --color-primary: #8d0808;
    --color-primary-dark: #510606;
    --color-text: #171212;
    --color-text-muted: #786c68;
    --color-bg: #fffdfb;
    --color-bg-alt: #f8f2ee;
    --color-border: #8d0808;
    --color-border-light: rgba(78, 42, 36, .14);

    --lux-wine-950: #2a0505;
    --lux-wine-900: #3d0606;
    --lux-wine-800: #5b0707;
    --lux-wine-700: #790808;
    --lux-wine-600: #8d0808;
    --lux-ivory: #fffaf6;
    --lux-paper: #fffdfb;
    --lux-paper-2: #f8f1ed;
    --lux-champagne: #d2aa86;
    --lux-champagne-2: #b98661;
    --lux-ink: #171212;
    --lux-muted: #786c68;
    --lux-line: rgba(85, 46, 39, .14);
    --lux-line-wine: rgba(141, 8, 8, .18);
    --lux-radius-sm: 14px;
    --lux-radius-md: 20px;
    --lux-radius-lg: 30px;
    --lux-radius-xl: 36px;
    --lux-shadow: 0 38px 96px -58px rgba(77, 9, 9, .44), 0 18px 44px -34px rgba(0, 0, 0, .22);
    --lux-shadow-hover: 0 46px 100px -54px rgba(97, 10, 10, .42), 0 22px 48px -34px rgba(0, 0, 0, .22);

    --radius: var(--lux-radius-md);
    --container: 1440px;
    --gutter: clamp(16px, 3vw, 48px);
    --section-y: clamp(58px, 7.5vw, 112px);
    --ease-silk: cubic-bezier(.16, 1, .3, 1);
    --ease-lux: cubic-bezier(.22, 1, .36, 1);
}

html { background: var(--lux-paper); }

body {
    color: var(--lux-ink);
    background:
        radial-gradient(900px 520px at 100% 0%, rgba(141, 8, 8, .035), transparent 68%),
        radial-gradient(780px 480px at 0% 46%, rgba(210, 170, 134, .035), transparent 70%),
        var(--lux-paper);
}

h1, h2 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 450;
    letter-spacing: -.035em;
}

h3, h4, h5, h6 { letter-spacing: -.02em; }

.eyebrow {
    margin-bottom: .82rem;
    color: var(--lux-wine-600);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .23em;
}

/* One button language everywhere. */
.btn {
    min-height: 50px;
    padding: .9rem 1.55rem;
    gap: .72rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    transform: translateZ(0);
    transition:
        transform .45s var(--ease-silk),
        box-shadow .45s var(--ease-silk),
        color .35s ease,
        border-color .35s ease,
        background-color .35s ease;
}

.btn--primary {
    background: linear-gradient(135deg, var(--lux-wine-600), #a10d0d);
    border-color: rgba(141, 8, 8, .95);
    box-shadow: 0 18px 38px -22px rgba(141, 8, 8, .72);
}

.btn--primary::before {
    background: linear-gradient(135deg, var(--lux-wine-900), var(--lux-wine-700));
    transform: scaleX(0);
    transform-origin: left;
}

.btn--primary:hover::before { transform: scaleX(1); }

.btn--outline {
    background: rgba(255,255,255,.72);
    border-color: rgba(141, 8, 8, .28);
    color: var(--lux-wine-600);
    backdrop-filter: blur(10px);
}

.btn--outline::before {
    background: var(--lux-wine-600);
    clip-path: circle(0% at 50% 50%);
    transition: clip-path .55s var(--ease-silk);
}

.btn--outline:hover::before { clip-path: circle(150% at 50% 50%); }

.btn:hover { transform: translateY(-2px); }
.btn--primary:hover { box-shadow: 0 24px 48px -24px rgba(141, 8, 8, .8); }
.btn__arrow { width: 16px; height: 16px; transition: transform .45s var(--ease-silk); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--icon {
    border-radius: 50%;
    border-color: rgba(141, 8, 8, .22);
}

/* Shared panel. */
.lux-panel {
    position: relative;
    overflow: hidden;
    max-width: var(--container);
    margin-inline: auto;
    background:
        radial-gradient(640px 260px at 50% -20%, rgba(210, 170, 134, .12), transparent 70%),
        linear-gradient(150deg, #fffefd 0%, #fff9f5 55%, #f7efea 100%);
    border: 1px solid var(--lux-line-wine);
    border-radius: var(--lux-radius-lg);
    box-shadow: var(--lux-shadow);
}

/* Shared hero for Courses / course categories / Services. */
.academy-intro {
    padding: clamp(18px, 2.4vw, 34px) var(--gutter) clamp(38px, 4.8vw, 70px);
}

.academy-intro__frame {
    --intro-x: 74%;
    --intro-y: 30%;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
    min-height: clamp(390px, 35vw, 510px);
    max-width: var(--container);
    margin-inline: auto;
    overflow: hidden;
    color: #fff9f5;
    border: 1px solid rgba(210, 170, 134, .32);
    border-radius: var(--lux-radius-lg);
    background:
        radial-gradient(520px circle at var(--intro-x) var(--intro-y), rgba(226, 182, 145, .18), transparent 58%),
        linear-gradient(128deg, #310606 0%, #550707 44%, #850909 76%, #4b0606 100%);
    box-shadow: 0 50px 104px -58px rgba(80, 0, 0, .72), 0 20px 42px -30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

.academy-intro__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(110deg, transparent 0 47%, rgba(255,255,255,.035) 48%, transparent 51%),
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 36%);
}

.academy-intro__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(46px, 6vw, 88px) clamp(30px, 6vw, 92px) clamp(66px, 7vw, 96px);
}

.academy-intro__back {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    width: fit-content;
    margin-bottom: clamp(30px, 4vw, 52px);
    padding: .72rem 1rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    color: rgba(255,250,246,.76);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    transition: transform .4s var(--ease-silk), background .3s ease, border-color .3s ease, color .3s ease;
}

.academy-intro__back::before { content: "←"; color: var(--lux-champagne); }
.academy-intro__back:hover { transform: translateX(-3px); color: #fff; border-color: rgba(210,170,134,.48); background: rgba(255,255,255,.09); }

.academy-intro .eyebrow { color: #dfba99; }

.academy-intro__title {
    max-width: 12ch;
    margin: 0;
    color: #fffaf7;
    font-size: clamp(3.65rem, 2.2rem + 4.8vw, 6.9rem);
    font-weight: 410;
    line-height: .9;
    letter-spacing: -.05em;
    text-wrap: balance;
    overflow-wrap: anywhere;
    text-shadow: 0 20px 44px rgba(0,0,0,.18);
}

.academy-intro__text {
    max-width: 52ch;
    margin-top: 1.3rem;
    color: rgba(255,248,244,.7);
    font-size: .94rem;
    line-height: 1.7;
}
.academy-intro__text:empty { display: none; }

.academy-intro__microcopy {
    margin-top: clamp(24px, 3vw, 36px);
    color: rgba(229,191,158,.72);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.academy-intro__mark {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-left: 1px solid rgba(255,255,255,.08);
    background: radial-gradient(circle at 50% 50%, rgba(223,183,149,.11), transparent 58%);
}

.academy-intro__monogram {
    position: relative;
    z-index: 3;
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(7.5rem, 10vw, 11rem);
    font-weight: 400;
    line-height: 1;
    color: rgba(255,249,245,.96);
    text-shadow: 0 24px 50px rgba(0,0,0,.22);
}

.academy-intro__orbit {
    position: absolute;
    border: 1px solid rgba(218,174,139,.28);
    border-radius: 50%;
    pointer-events: none;
}
.academy-intro__orbit--outer { width: min(31vw, 430px); aspect-ratio: 1; animation: luxOrbit 28s linear infinite; }
.academy-intro__orbit--inner { width: min(22vw, 300px); aspect-ratio: 1; border-style: dashed; border-color: rgba(255,255,255,.13); animation: luxOrbitReverse 38s linear infinite; }
.academy-intro__orbit::before, .academy-intro__orbit::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lux-champagne);
    box-shadow: 0 0 24px rgba(210,170,134,.62);
}
.academy-intro__orbit::before { top: -4px; left: 50%; }
.academy-intro__orbit::after { right: 28%; bottom: -4px; }

.academy-intro__mark-top,
.academy-intro__mark-bottom {
    position: absolute;
    z-index: 4;
    color: rgba(255,248,244,.62);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .28em;
}
.academy-intro__mark-top { top: 13%; }
.academy-intro__mark-bottom { bottom: 13%; }

.academy-intro__rail {
    position: absolute;
    z-index: 4;
    left: clamp(28px, 4vw, 58px);
    right: clamp(28px, 4vw, 58px);
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255,248,244,.38);
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.academy-intro__rail i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(210,170,134,.34), rgba(210,170,134,.07)); }

@keyframes luxOrbit { to { transform: rotate(360deg); } }
@keyframes luxOrbitReverse { to { transform: rotate(-360deg); } }

/* Never hide content just because JS failed. JS animates visible elements with WAAPI/GSAP. */
.reveal,
.reveal--fade,
.reveal--scale,
.reveal--clip,
.reveal-stagger > * {
    opacity: 1;
    transform: none;
    clip-path: none;
}

[data-lux-card] { --lux-pointer-x: 50%; --lux-pointer-y: 35%; }

@media (max-width: 980px) {
    .academy-intro__frame { grid-template-columns: 1fr; min-height: 390px; }
    .academy-intro__mark { position: absolute; inset: 0 0 0 auto; width: 46%; border-left: 0; opacity: .26; }
    .academy-intro__content { padding: 48px 30px 72px; }
    .academy-intro__title { max-width: 11ch; font-size: clamp(3.2rem, 8vw, 5.1rem); }
}

@media (max-width: 680px) {
    .academy-intro { padding-inline: 12px; }
    .academy-intro__frame { border-radius: 24px; }
    .academy-intro__content { padding: 38px 22px 68px; }
    .academy-intro__title { font-size: clamp(2.85rem, 14vw, 4.35rem); }
    .academy-intro__mark { width: 64%; opacity: .2; }
    .academy-intro__rail { left: 22px; right: 22px; bottom: 15px; }
    .academy-intro__rail span:last-child { display: none; }
    .btn { min-height: 48px; font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
    .academy-intro__orbit { animation: none !important; }
    .btn, .btn::before, .btn::after { transition: none !important; }
}

/* Generic editorial page used for non-specialised resources (About / Products). */
.generic-page{padding:clamp(24px,3vw,42px) var(--page-pad,clamp(16px,4vw,72px)) 0}.generic-page__hero{max-width:var(--container,1320px);min-height:430px;margin:auto;padding:clamp(52px,7vw,90px);display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;border-radius:clamp(28px,3.4vw,44px);background:radial-gradient(circle at 78% 7%,rgba(203,63,52,.25),transparent 32%),linear-gradient(135deg,#2b0707,#810705);color:#fff6ef;box-shadow:0 30px 85px rgba(76,0,0,.15)}.generic-page__hero::after{content:"B";position:absolute;right:4%;top:50%;transform:translateY(-50%);font-family:Fraunces,serif;font-size:300px;line-height:.7;color:rgba(255,255,255,.045)}.generic-page__hero>*{position:relative;z-index:1}.generic-page__hero .eyebrow{color:#ebc18c}.generic-page__title{max-width:850px;margin:12px 0 0;font-family:Fraunces,serif;font-size:clamp(58px,7.5vw,108px);font-weight:400;line-height:.88;letter-spacing:-.045em}.generic-page__lead{max-width:650px;margin:20px 0 0;color:rgba(255,246,238,.68);line-height:1.8}.generic-page__content{max-width:900px;margin:clamp(55px,7vw,95px) auto 0;font-size:16px;line-height:1.9;color:#604e4a}.generic-page__content h2,.generic-page__content h3{font-family:Fraunces,serif;font-weight:400;color:#211615}.generic-page__content h2{font-size:clamp(38px,5vw,62px)}
@media(max-width:620px){.generic-page{padding-inline:12px}.generic-page__hero{min-height:380px;padding:40px 25px;border-radius:26px}.generic-page__hero::after{font-size:210px}.generic-page__title{font-size:clamp(52px,17vw,76px)}}