/*
Theme Name: TWIN
Template: apparatus
Theme URI: https://www.pixouls.com/
Author: Pixouls
Author URI: https://www.pixouls.com/
Description: The Club at Twin Lakes — a luxury golf, dining and events destination in Allentown, PA. Built on the Apparatus framework by Pixouls.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: apparatus-child
Tags:
*/


/* $GLOBAL
--------------------------------------------------------*/
:root {
    /* Brand palette comes from config.json as --c-pri/sec/ter/qua/qui/d/l —
       we don't redeclare them here. Semantic accents below extend that set. */
    --c-accent: var(--c-sec);
    --c-accent-soft: color-mix(in srgb, var(--c-sec) 18%, transparent);
    --c-line: color-mix(in srgb, var(--c-fg) 15%, transparent);
    --c-line-soft: color-mix(in srgb, var(--c-fg) 8%, transparent);

    /* Typography */
    --font-display: "Fraunces", "Cormorant Garamond", "Times New Roman", serif;
    --font-body: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;

    /* Easing */
    --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out-quart: cubic-bezier(.76, 0, .24, 1);
    --ease-out-expo: cubic-bezier(.16, 1, .3, 1);

    /* Header height (kept in sync with .twin-hdr__inner) */
    --twin-hdr-h: 9.6rem;
}

html {
    font-family: var(--font-body);
}
body {
    background: var(--c-bg);
    color: var(--c-fg);
    font-family: var(--font-body);
    font-size: 1.6rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
}
.app {
    background: var(--c-bg);
    overflow-x: clip;
}
::selection {
    background-color: var(--c-sec);
    color: var(--c-pri);
    text-shadow: none;
}

/* $FORMS — Gravity Forms → Twin
   Remap GF theme-framework tokens + a few direct overrides so inputs,
   labels, focus, and submit match twin-btn / twin-book chrome. */
.app .gform_wrapper.gravity-theme,
.app .gform_wrapper.gform-theme--framework {
    --gf-color-primary: var(--c-pri);
    --gf-color-primary-rgb: 20, 40, 50;
    --gf-color-in-ctrl: var(--c-05);
    --gf-color-in-ctrl-dark-lighter: var(--c-10);
    --gf-color-in-ctrl-dark-darker: color-mix(in srgb, var(--c-fg) 28%, transparent);
    --gf-color-in-ctrl-contrast: var(--c-fg);
    --gf-color-in-ctrl-contrast-rgb: 20, 40, 50;
    --gf-color-in-ctrl-primary: var(--c-sec);
    --gf-ctrl-bg-color: var(--c-05);
    --gf-ctrl-bg-color-hover: var(--c-05);
    --gf-ctrl-bg-color-focus: var(--c-05);
    --gf-ctrl-border-color: var(--c-10);
    --gf-ctrl-border-color-hover: color-mix(in srgb, var(--c-fg) 22%, transparent);
    --gf-ctrl-border-color-focus: var(--c-sec);
    --gf-ctrl-border-width: 1px;
    --gf-ctrl-radius: 0.8rem;
    --gf-ctrl-shadow: none;
    --gf-ctrl-outline-width-focus: 0;
    --gf-ctrl-font-family: var(--font-body);
    --gf-ctrl-size: 4.8rem;
    --gf-ctrl-padding-x: 1.4rem;
    --gf-font-family-primary: var(--font-body);
    --gf-label-color: var(--c-fg);
    --gf-label-font-weight: 500;
}

.app .gform_wrapper.gravity-theme .gfield_label,
.app .gform_wrapper.gravity-theme .gfield_label .gfield_required {
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.02em;
}
.app .gform_wrapper.gravity-theme .gfield_label {
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
    color: var(--c-fg);
}
.app .gform_wrapper.gravity-theme .gfield_required {
    color: var(--c-sec);
    font-weight: 500;
}
.app .gform_wrapper.gravity-theme .gfield_header_item,
.app .gform_wrapper.gravity-theme .ginput_complex label {
    font-size: 1.2rem;
    font-weight: 400;
    color: color-mix(in srgb, var(--c-fg) 55%, transparent);
}

.app .gform_wrapper.gravity-theme input[type=color],
.app .gform_wrapper.gravity-theme input[type=date],
.app .gform_wrapper.gravity-theme input[type=datetime-local],
.app .gform_wrapper.gravity-theme input[type=datetime],
.app .gform_wrapper.gravity-theme input[type=email],
.app .gform_wrapper.gravity-theme input[type=month],
.app .gform_wrapper.gravity-theme input[type=number],
.app .gform_wrapper.gravity-theme input[type=password],
.app .gform_wrapper.gravity-theme input[type=search],
.app .gform_wrapper.gravity-theme input[type=tel],
.app .gform_wrapper.gravity-theme input[type=text],
.app .gform_wrapper.gravity-theme input[type=time],
.app .gform_wrapper.gravity-theme input[type=url],
.app .gform_wrapper.gravity-theme input[type=week],
.app .gform_wrapper.gravity-theme select,
.app .gform_wrapper.gravity-theme textarea {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-fg);
    background-color: var(--c-05);
    border: 0.1rem solid var(--c-10);
    border-radius: 0.8rem;
    box-shadow: none;
    transition: border-color 0.3s var(--ease-out-quint), background-color 0.3s var(--ease-out-quint);
}
.app .gform_wrapper.gravity-theme input[type=color],
.app .gform_wrapper.gravity-theme input[type=date],
.app .gform_wrapper.gravity-theme input[type=datetime-local],
.app .gform_wrapper.gravity-theme input[type=datetime],
.app .gform_wrapper.gravity-theme input[type=email],
.app .gform_wrapper.gravity-theme input[type=month],
.app .gform_wrapper.gravity-theme input[type=number],
.app .gform_wrapper.gravity-theme input[type=password],
.app .gform_wrapper.gravity-theme input[type=search],
.app .gform_wrapper.gravity-theme input[type=tel],
.app .gform_wrapper.gravity-theme input[type=text],
.app .gform_wrapper.gravity-theme input[type=time],
.app .gform_wrapper.gravity-theme input[type=url],
.app .gform_wrapper.gravity-theme input[type=week],
.app .gform_wrapper.gravity-theme select {
    min-height: 4.8rem;
    padding: 1.2rem 1.4rem;
}
.app .gform_wrapper.gravity-theme textarea {
    min-height: 12rem;
    padding: 1.2rem 1.4rem;
    resize: vertical;
}
.app .gform_wrapper.gravity-theme select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23142832' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.4rem center;
    background-size: 1.2rem 0.8rem;
    padding-right: 3.6rem;
}
.app .gform_wrapper.gravity-theme input::placeholder,
.app .gform_wrapper.gravity-theme textarea::placeholder {
    color: color-mix(in srgb, var(--c-fg) 42%, transparent);
    opacity: 1;
}
.app .gform_wrapper.gravity-theme input:hover,
.app .gform_wrapper.gravity-theme select:hover,
.app .gform_wrapper.gravity-theme textarea:hover {
    border-color: color-mix(in srgb, var(--c-fg) 22%, transparent);
}
.app .gform_wrapper.gravity-theme input:focus,
.app .gform_wrapper.gravity-theme select:focus,
.app .gform_wrapper.gravity-theme textarea:focus {
    outline: none;
    border-color: var(--c-sec);
    background-color: var(--c-05);
    box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--c-sec) 18%, transparent);
}

/* Choice inputs cover the whole .gchoice (inset: 0) — keep them invisible
   so GF/browser focus doesn't paint a muddy full-row background. */
.app .gform_wrapper.gravity-theme .gfield-choice-input,
.app .gform_wrapper.gravity-theme .gfield-choice-input:hover,
.app .gform_wrapper.gravity-theme .gfield-choice-input:focus,
.app .gform_wrapper.gravity-theme .gfield-choice-input:focus-visible,
.app .gform_wrapper.gravity-theme .gfield-choice-input:checked {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.app .gform_wrapper.gravity-theme .gfield_checkbox label::after,
.app .gform_wrapper.gravity-theme .gfield_radio label::after {
    background-color: var(--c-05);
    border-color: var(--c-10);
    border-radius: 0.4rem;
    box-shadow: none;
    transition: border-color 0.3s var(--ease-out-quint),
                box-shadow 0.3s var(--ease-out-quint);
}
.app .gform_wrapper.gravity-theme .gfield_radio label::after {
    border-radius: 50%;
}
.app .gform_wrapper.gravity-theme .gfield-choice-input:checked + label {
    color: var(--c-fg);
}
.app .gform_wrapper.gravity-theme .gfield-choice-input:checked + label::after {
    border-color: var(--c-pri);
    background-color: var(--c-05);
}
.app .gform_wrapper.gravity-theme .gfield-choice-input:focus-visible + label::after {
    border-color: var(--c-sec);
    box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--c-sec) 18%, transparent);
}
.app .gform_wrapper.gravity-theme .gfield_checkbox .gfield-choice-input:checked + label::after {
    background-image: url('assets/img/icon-check.svg');
}
.app .gform_wrapper.gravity-theme .gfield_radio .gfield-choice-input:checked + label::after {
    background-image: url('assets/img/icon-radio.svg');
}
.app .gform_wrapper.gravity-theme .gfield_checkbox label,
.app .gform_wrapper.gravity-theme .gfield_radio label {
    font-size: 1.4rem !important;
    color: color-mix(in srgb, var(--c-fg) 78%, transparent);
}

/* Form actions — twin-btn silhouette (pill + uppercase; solid gold hover.
   Covers submit + multipage Next/Previous; GF uses <input>, so no ::before.) */
.app .gform_wrapper.gravity-theme .gform_footer .gform_button,
.app .gform_wrapper.gravity-theme .gform_footer .gform_next_button,
.app .gform_wrapper.gravity-theme .gform_footer .gform_previous_button,
.app .gform_wrapper.gravity-theme .gform_footer .gform-theme-button,
.app .gform_wrapper.gravity-theme .gform_page_footer .gform_button,
.app .gform_wrapper.gravity-theme .gform_page_footer .gform_next_button,
.app .gform_wrapper.gravity-theme .gform_page_footer .gform_previous_button,
.app .gform_wrapper.gravity-theme .gform_page_footer .gform-theme-button,
.app .gform_wrapper.gravity-theme .gform_footer input[type=submit],
.app .gform_wrapper.gravity-theme .gform_footer input[type=button],
.app .gform_wrapper.gravity-theme .gform_footer button,
.app .gform_wrapper.gravity-theme .gform_page_footer input[type=submit],
.app .gform_wrapper.gravity-theme .gform_page_footer input[type=button],
.app .gform_wrapper.gravity-theme .gform_page_footer button {
    min-height: 5.6rem;
    padding: 1.6rem 2.8rem;
    background: var(--c-pri);
    color: var(--c-l);
    border: 0.1rem solid var(--c-pri);
    border-radius: 9.6rem;
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    transition: color 0.4s var(--ease-out-quint),
                background-color 0.4s var(--ease-out-quint),
                border-color 0.4s var(--ease-out-quint);
}
.app .gform_wrapper.gravity-theme .gform_footer .gform_button:hover,
.app .gform_wrapper.gravity-theme .gform_footer .gform_next_button:hover,
.app .gform_wrapper.gravity-theme .gform_footer .gform_previous_button:hover,
.app .gform_wrapper.gravity-theme .gform_footer .gform-theme-button:hover,
.app .gform_wrapper.gravity-theme .gform_page_footer .gform_button:hover,
.app .gform_wrapper.gravity-theme .gform_page_footer .gform_next_button:hover,
.app .gform_wrapper.gravity-theme .gform_page_footer .gform_previous_button:hover,
.app .gform_wrapper.gravity-theme .gform_page_footer .gform-theme-button:hover,
.app .gform_wrapper.gravity-theme .gform_footer input[type=submit]:hover,
.app .gform_wrapper.gravity-theme .gform_footer input[type=button]:hover,
.app .gform_wrapper.gravity-theme .gform_footer button:hover,
.app .gform_wrapper.gravity-theme .gform_page_footer input[type=submit]:hover,
.app .gform_wrapper.gravity-theme .gform_page_footer input[type=button]:hover,
.app .gform_wrapper.gravity-theme .gform_page_footer button:hover {
    color: var(--c-pri);
    background: var(--c-sec);
    border-color: var(--c-sec);
}

/* Previous — ghost outline so primary (Next / Submit) stays the heavier action */
.app .gform_wrapper.gravity-theme .gform_previous_button,
.app .gform_wrapper.gravity-theme .gform-theme-button--secondary {
    background: transparent;
    color: var(--c-fg);
    border-color: var(--c-line);
}
.app .gform_wrapper.gravity-theme .gform_previous_button:hover,
.app .gform_wrapper.gravity-theme .gform-theme-button--secondary:hover {
    color: var(--c-bg);
    background: var(--c-fg);
    border-color: var(--c-fg);
}

.app .gform_wrapper.gravity-theme .gfield_error input,
.app .gform_wrapper.gravity-theme .gfield_error select,
.app .gform_wrapper.gravity-theme .gfield_error textarea,
.app .gform_wrapper.gravity-theme .gfield_error [aria-invalid=true] {
    border-color: #b54a3c;
}
.app .gform_wrapper.gravity-theme .gfield_validation_message,
.app .gform_wrapper.gravity-theme .validation_message {
    border-color: color-mix(in srgb, #b54a3c 35%, transparent);
    color: #8a3428;
}


/* $CAREERS — Apparatus [careers] shortcode → Twin vendors accordion chrome
   (hairline rules, display titles, gold circular +) */
.app .careers {
    margin: 3.2rem 0 4rem;
    border-top: 0.1rem solid var(--c-line);
}
/* Empty state — give the notice air below the hairline (listings get
   that space from .careers__summary padding instead). */
.app .careers > p:first-child {
    margin: 0;
    padding: 2.4rem 0 0;
}
.app .careers__item {
    margin: 0;
    border: 0;
    border-bottom: 0.1rem solid var(--c-line);
}
.app .careers__summary {
    gap: 2.4rem;
    padding: 2.4rem 0;
    background: transparent;
    font-family: var(--font-display);
    font-size: clamp(2rem, 2.4vw, 2.6rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--c-pri);
    transition: color 0.3s var(--ease-out-quint);
}
.app .careers__summary:hover {
    background: transparent;
    color: var(--c-sec);
}
.app .careers__item[open] .careers__summary {
    background: transparent;
}
.app .careers__icon {
    flex: none;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 0.1rem solid var(--c-line);
    transition: background 0.3s var(--ease-out-quint),
                border-color 0.3s var(--ease-out-quint);
}
.app .careers__summary:hover .careers__icon {
    background: color-mix(in srgb, var(--c-sec) 14%, transparent);
    border-color: transparent;
}
.app .careers__icon::before,
.app .careers__icon::after {
    background: var(--c-sec);
}
.app .careers__icon::before {
    width: 1.4rem;
    height: 0.1rem;
}
.app .careers__icon::after {
    width: 0.1rem;
    height: 1.4rem;
}
.app .careers__content {
    padding: 0 0 2.8rem;
    font-size: 1.5rem;
    color: color-mix(in srgb, var(--c-fg) 72%, transparent);
}
.app .careers__content p,
.app .careers__content ul {
    line-height: 1.6;
}
.app .careers__content p:first-child { margin-top: 0; }
.app .careers__content p:last-child { margin-bottom: 0; }


/* $TYPE
--------------------------------------------------------*/
.twin-display,
.twin-h1,
.twin-h2,
.twin-h3 {
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--c-fg);
    text-wrap: balance;
    margin: 0;
}
.twin-display em,
.twin-h1 em,
.twin-h2 em,
.twin-h3 em {
    font-style: italic;
    /* Let optical sizing track the rendered size (matches the homepage section
       headings). Forcing opsz 144 made the italics look spindly at h2/h3 sizes. */
    font-optical-sizing: auto;
    color: var(--c-sec);
}

.twin-display { font-size: clamp(5.6rem, 9vw, 12.8rem); }
.twin-h1      { font-size: clamp(4.8rem, 7vw, 8.8rem); }
.twin-h2      { font-size: clamp(4rem, 5.4vw, 7.2rem); }
.twin-h3      { font-size: clamp(2.4rem, 2.8vw, 3.6rem); }

.twin-eyebrow {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-fg);
}

.twin-body {
    font-family: var(--font-body);
    font-size: 1.6rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--c-fg) 72%, transparent);
}

/* Bare element headings — Apparatus utility/flex-builder pages output
   unclassed HTML, so mirror the twin type scale on the elements themselves.
   Twin components carry their own classes (higher specificity) and are
   unaffected. Apparatus's flow margins (4.8rem 0 2.4rem) are kept. */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--c-fg);
}
h1 { font-size: clamp(4.8rem, 7vw, 8.8rem); }
h2 { font-size: clamp(4rem, 5.4vw, 7.2rem); }
h3 { font-size: clamp(2.4rem, 2.8vw, 3.6rem); }
h4 { font-size: 2.2rem; }
h1 em, h2 em, h3 em, h4 em {
    font-style: italic;
    font-optical-sizing: auto;
    color: var(--c-sec);
}

/* Gravity Forms section titles (h3) — GF's theme CSS outranks the element
   rule above, so restate the display treatment at higher specificity. */
.app .gform_wrapper.gravity-theme .gsection_title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.4rem, 2.8vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--c-fg);
}

/* $TITLE-Override
--------------------------------------------------------*/
.title {
    background: var(--c-pri);
    color-scheme: dark;
}
    .title__heading {
        padding-block: var(--s-xxl) var(--s-lg);
    }

/* $PIX-PRIVACY-POLICY
--------------------------------------------------------*/
.pix-privacy-policy h2 {
    font-size: clamp(2.4rem, 2.8vw, 3.6rem);
}
.pix-privacy-policy h3 {
    font-size: 2.2rem;
}

/* $SECTION-CHROME
--------------------------------------------------------*/
.twin-home > section {
    position: relative;
    scroll-margin-top: var(--twin-hdr-h);
}

/* $INTRO GHOST MARK — oversized brand turkey bleeding off the top-right of an
   intro section. Uses the pre-tinted qua SVG over a qui background, so the mark
   reads as a soft tonal ghost at full opacity. */
.twin-intro-ghost {
    position: relative;
    overflow: hidden;
}
    .twin-intro-ghost > * {
        position: relative;
        z-index: 1;
    }
    .twin-intro-ghost::before {
        content: '';
        position: absolute;
        top: clamp(2rem, 4vw, 6rem);
        right: clamp(2rem, 4vw, 6rem);
        width: clamp(34rem, 46vw, 62rem);
        aspect-ratio: 113.4099 / 80.1395;
        background: url('assets/img/logo-icon-qua.svg') no-repeat center / contain;
        pointer-events: none;
        z-index: 0;
    }

.twin-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 1.6rem;
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-fg);
}
    .twin-section__eyebrow-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 2.4rem;
        padding: 0 .8rem;
        border: .1rem solid var(--c-line);
        border-radius: 9.6rem;
        font-size: 1rem;
        color: color-mix(in srgb, var(--c-fg) 65%, transparent);
    }
    .twin-section__eyebrow-text {
        position: relative;
    }
    .twin-section__eyebrow-text::before {
        content: '';
        position: absolute;
        left: -.8rem;
        top: 50%;
        width: .4rem;
        height: .4rem;
        background: var(--c-sec);
        border-radius: 50%;
        transform: translate(-100%, -50%);
    }

.twin-section__eyebrow--inverse {
    color: var(--c-l);
}
    .twin-section__eyebrow--inverse .twin-section__eyebrow-num {
        border-color: color-mix(in srgb, var(--c-l) 28%, transparent);
        color: color-mix(in srgb, var(--c-l) 70%, transparent);
    }


/* $BUTTONS
--------------------------------------------------------*/
.twin-btn {
    --twin-btn-bg: var(--c-pri);
    --twin-btn-fg: var(--c-l);
    --twin-btn-border: var(--c-pri);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    padding: 1.6rem 2.4rem;
    min-height: 5.6rem;
    background: var(--twin-btn-bg);
    color: var(--twin-btn-fg);
    border: .1rem solid var(--twin-btn-border);
    border-radius: 9.6rem;
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: color .4s var(--ease-out-quint), border-color .4s var(--ease-out-quint);
    isolation: isolate;
}
.twin-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--c-sec);
    transform: translateY(100%);
    transition: transform .5s var(--ease-out-quint);
    z-index: -1;
}
.twin-btn:hover { color: var(--c-pri); border-color: var(--c-sec); }
.twin-btn:hover::before { transform: translateY(0); }
    .twin-btn__text { display: inline-block; }
    .twin-btn__arrow {
        font-size: 1.6rem;
        transition: transform .4s var(--ease-out-quint);
    }
    .twin-btn:hover .twin-btn__arrow {
        transform: translateX(.4rem);
    }

.twin-btn--primary { /* default */ }

.twin-btn--gold {
    --twin-btn-bg: var(--c-sec);
    --twin-btn-fg: var(--c-pri);
    --twin-btn-border: var(--c-sec);
}
/* Hover uses mode-aware --c-fg / --c-bg so the gold button stays visible
   on dark sections (color-scheme: dark). On light sections this resolves
   to the same dark-on-light it always was; on dark sections it inverts
   to light-fill + dark-text instead of disappearing into the bg. */
.twin-btn--gold::before { background: var(--c-fg); }
.twin-btn--gold:hover { color: var(--c-bg); border-color: var(--c-fg); }

.twin-btn--ghost {
    --twin-btn-bg: transparent;
    --twin-btn-fg: var(--c-fg);
    --twin-btn-border: var(--c-line);
}
.twin-btn--ghost::before { background: var(--c-fg); }
.twin-btn--ghost:hover { color: var(--c-bg); border-color: var(--c-fg); }

.twin-btn--ghost-inverse {
    --twin-btn-fg: var(--c-l);
    --twin-btn-border: color-mix(in srgb, var(--c-l) 32%, transparent);
}
.twin-btn--ghost-inverse::before { background: var(--c-l); }
.twin-btn--ghost-inverse:hover { color: var(--c-pri); border-color: var(--c-l); }


/* $REVEAL-ANIMATIONS
--------------------------------------------------------*/
[data-twin-reveal] {
    --twin-reveal-y: 2.4rem;
    opacity: 0;
    transform: translate3d(0, var(--twin-reveal-y), 0);
    transition: opacity .9s var(--ease-out-quint), transform 1.1s var(--ease-out-quint);
    transition-delay: calc(var(--twin-reveal-delay, 0) * 1ms);
    will-change: opacity, transform;
}
[data-twin-reveal].is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
    [data-twin-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* $HEADER (override parent .hdr architecture entirely)
--------------------------------------------------------*/
.twin-hdr {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    color: var(--c-l);
    pointer-events: none;
    transition: color .4s var(--ease-out-quint);
}
.twin-hdr.is-scrolled {
    color: var(--c-fg);
}
.twin-hdr.is-scrolled::before {
    transform: translateY(0);
    opacity: 1;
}
.twin-hdr::before {
    content: '';
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--c-bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(1.6rem);
            backdrop-filter: saturate(180%) blur(1.6rem);
    border-bottom: .1rem solid var(--c-line-soft);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform .5s var(--ease-out-quint), opacity .5s var(--ease-out-quint);
    pointer-events: none;
}
    .twin-hdr__inner {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2.4rem;
        width: var(--w-xl);
        height: var(--twin-hdr-h);
        margin-inline: auto;
        padding-inline: var(--s-sm);
        pointer-events: auto;
    }
        .twin-hdr__brand {
            display: inline-flex;
            align-items: center;
            gap: 1.6rem;
            color: currentColor;
            text-decoration: none;
        }
            .twin-hdr__brand-mark,
            .twin-hdr__brand-word {
                display: inline-flex;
                align-items: center;
                color: currentColor;
            }
            .twin-hdr__brand-mark svg {
                height: 4.8rem;
                width: auto;
                fill: currentColor;
                transition: transform .6s var(--ease-out-quint);
            }
            .twin-hdr__brand:hover .twin-hdr__brand-mark svg {
                transform: rotate(-6deg);
            }
            .twin-hdr__brand-word svg {
                height: 1.6rem;
                width: auto;
                fill: currentColor;
            }
        .twin-hdr__actions {
            display: inline-flex;
            align-items: center;
            gap: 2.4rem;
        }
        .twin-hdr__ctas {
            display: inline-flex;
            align-items: center;
            gap: 1.2rem;
        }
        .twin-hdr__cta {
            display: inline-flex;
            align-items: center;
            gap: .8rem;
            padding: 1.2rem 2.4rem;
            border: .1rem solid currentColor;
            border-radius: 9.6rem;
            color: currentColor;
            font-family: var(--font-body);
            font-size: 1.2rem;
            font-weight: 500;
            line-height: 1;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            text-decoration: none;
            transition: background-color .4s var(--ease-out-quint), color .4s var(--ease-out-quint), border-color .4s var(--ease-out-quint);
        }
        .twin-hdr__cta:hover {
            background: var(--c-sec);
            color: var(--c-pri);
            border-color: var(--c-sec);
        }
            .twin-hdr__cta-arrow {
                transition: transform .4s var(--ease-out-quint);
            }
            .twin-hdr__cta:hover .twin-hdr__cta-arrow {
                transform: translateX(.4rem);
            }
        .twin-hdr__toggle {
            display: inline-flex;
            align-items: center;
            gap: 1.2rem;
            padding: 1.2rem 1.6rem;
            background: transparent;
            border: 0;
            color: currentColor;
            font-family: var(--font-body);
            font-size: 1.2rem;
            font-weight: 500;
            line-height: 1;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            cursor: pointer;
        }
            .twin-hdr__toggle-label {
                position: relative;
                display: inline-block;
                height: 1.2rem;
                /* Wide enough to fit the longer of the two labels ("CLOSE")
                   at this font-size + letter-spacing without the leading
                   character getting clipped by overflow: hidden. */
                min-width: 6.4rem;
                text-align: right;
                overflow: hidden;
            }
                .twin-hdr__toggle-label-text {
                    display: inline-block;
                    position: absolute;
                    right: 0;
                    top: 0;
                    transition: transform .5s var(--ease-out-quint), opacity .3s var(--ease-out-quint);
                }
                [data-twin-toggle-text-closed] {
                    transform: translateY(0);
                }
                [data-twin-toggle-text-open] {
                    transform: translateY(120%);
                    opacity: 0;
                }
                .twin-hdr__toggle[aria-expanded="true"] [data-twin-toggle-text-closed] {
                    transform: translateY(-120%);
                    opacity: 0;
                }
                .twin-hdr__toggle[aria-expanded="true"] [data-twin-toggle-text-open] {
                    transform: translateY(0);
                    opacity: 1;
                }
            .twin-hdr__toggle-icon {
                position: relative;
                display: inline-block;
                width: 3.2rem;
                height: 1.6rem;
            }
                .twin-hdr__toggle-bar {
                    position: absolute;
                    left: 0;
                    width: 100%;
                    height: .1rem;
                    background: currentColor;
                    transform-origin: center;
                    transition: transform .5s var(--ease-out-quint), opacity .3s var(--ease-out-quint);
                }
                .twin-hdr__toggle-bar--top { top: 0; }
                .twin-hdr__toggle-bar--mid { top: 50%; transform: translateY(-50%); }
                .twin-hdr__toggle-bar--bot { bottom: 0; }
                .twin-hdr__toggle[aria-expanded="true"] .twin-hdr__toggle-bar--top {
                    transform: translateY(.75rem) rotate(45deg);
                }
                .twin-hdr__toggle[aria-expanded="true"] .twin-hdr__toggle-bar--mid {
                    transform: translateY(-50%) scaleX(0);
                    opacity: 0;
                }
                .twin-hdr__toggle[aria-expanded="true"] .twin-hdr__toggle-bar--bot {
                    transform: translateY(-.75rem) rotate(-45deg);
                }
        /* Weather — compact pill in the header actions row that expands to a
           forecast popover. Pill inherits currentColor so it adapts to the
           hero (light) vs scrolled (dark) header states; the popover sets its
           own explicit light-surface colors since it floats over the page. */
        .twin-hdr__weather {
            position: relative;
            display: inline-flex;
        }
            .twin-hdr__weather-pill {
                display: inline-flex;
                align-items: center;
                gap: .8rem;
                padding: 1.2rem 1.6rem;
                background: transparent;
                border: .1rem solid currentColor;
                border-radius: 9.6rem;
                color: currentColor;
                font-family: var(--font-body);
                font-size: 1.2rem;
                font-weight: 500;
                line-height: 1;
                letter-spacing: 0.08em;
                cursor: pointer;
                transition: color .4s var(--ease-out-quint), border-color .4s var(--ease-out-quint);
            }
            .twin-hdr__weather-pill:hover {
                color: var(--c-sec);
                border-color: var(--c-sec);
            }
                .twin-hdr__weather-pill-icon { font-size: 1.4rem; }
                .twin-hdr__weather-pill-temp { font-variant-numeric: tabular-nums; }

            .twin-hdr__weather-pop {
                position: absolute;
                top: calc(100% + 1.2rem);
                right: 0;
                z-index: 20;
                width: 30rem;
                max-width: calc(100vw - 4.8rem);
                padding: 2.4rem;
                background: var(--c-bg);
                color: var(--c-fg);
                border: .1rem solid var(--c-line-soft);
                border-radius: 1.6rem;
                box-shadow: 0 2.4rem 6.4rem -2.4rem color-mix(in srgb, var(--c-pri) 35%, transparent);
                opacity: 0;
                visibility: hidden;
                transform: translateY(-.8rem);
                transition: opacity .3s var(--ease-out-quint), transform .3s var(--ease-out-quint), visibility 0s linear .3s;
            }
            .twin-hdr__weather-pop[aria-hidden="false"] {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
                transition: opacity .3s var(--ease-out-quint), transform .3s var(--ease-out-quint), visibility 0s;
            }
                .twin-hdr__weather-now {
                    display: flex;
                    align-items: center;
                    gap: 1.6rem;
                    padding-bottom: 1.6rem;
                    border-bottom: .1rem solid var(--c-line-soft);
                }
                    .twin-hdr__weather-now-icon {
                        font-size: 3.2rem;
                        color: var(--c-sec);
                    }
                    .twin-hdr__weather-now-body {
                        display: flex;
                        flex-direction: column;
                        gap: .2rem;
                    }
                        .twin-hdr__weather-now-temp {
                            font-family: var(--font-display);
                            font-size: 3.2rem;
                            font-weight: 300;
                            line-height: 1;
                        }
                        .twin-hdr__weather-now-cond {
                            font-size: 1.3rem;
                            font-weight: 500;
                        }
                        .twin-hdr__weather-now-meta {
                            font-size: 1.2rem;
                            color: color-mix(in srgb, var(--c-fg) 60%, transparent);
                        }
                .twin-hdr__weather-blurb {
                    margin: 1.6rem 0 0;
                    font-family: var(--font-display);
                    font-style: italic;
                    font-size: 1.4rem;
                    line-height: 1.4;
                    color: color-mix(in srgb, var(--c-fg) 80%, transparent);
                }
                .twin-hdr__weather-forecast {
                    list-style: none;
                    margin: 1.6rem 0 0;
                    padding: 0;
                    display: flex;
                    flex-direction: column;
                    gap: .8rem;
                }
                    .twin-hdr__weather-day {
                        display: grid;
                        grid-template-columns: 1fr auto 6.4rem;
                        align-items: center;
                        gap: 1.6rem;
                        font-size: 1.3rem;
                    }
                        .twin-hdr__weather-day-name {
                            color: color-mix(in srgb, var(--c-fg) 70%, transparent);
                        }
                        .twin-hdr__weather-day-icon {
                            font-size: 1.4rem;
                            color: var(--c-sec);
                            justify-self: center;
                        }
                        .twin-hdr__weather-day-temps {
                            display: inline-flex;
                            gap: .8rem;
                            justify-self: end;
                            font-variant-numeric: tabular-nums;
                        }
                            .twin-hdr__weather-day-hi { font-weight: 600; }
                            .twin-hdr__weather-day-lo {
                                color: color-mix(in srgb, var(--c-fg) 50%, transparent);
                            }
                .twin-hdr__weather-foot {
                    margin: 1.6rem 0 0;
                    font-size: 1rem;
                    letter-spacing: 0.04em;
                    color: color-mix(in srgb, var(--c-fg) 45%, transparent);
                }

        /* Page nav — header "jump to section" pill + popover (single
           scrolling templates). Pill matches the CTA; popover mirrors the
           weather popover surface. */
        .twin-hdr__pagenav {
            position: relative;
            display: inline-flex;
        }
            .twin-hdr__pagenav-pill {
                display: inline-flex;
                align-items: center;
                gap: .8rem;
                padding: 1.2rem 1.6rem;
                background: transparent;
                border: .1rem solid currentColor;
                border-radius: 9.6rem;
                color: currentColor;
                font-family: var(--font-body);
                font-size: 1.2rem;
                font-weight: 500;
                line-height: 1;
                letter-spacing: 0.08em;
                cursor: pointer;
                transition: color .4s var(--ease-out-quint), border-color .4s var(--ease-out-quint);
            }
            .twin-hdr__pagenav-pill:hover {
                color: var(--c-sec);
                border-color: var(--c-sec);
            }
                .twin-hdr__pagenav-pill-icon { font-size: 1.3rem; }
                .twin-hdr__pagenav-pill-label {
                    max-width: 14rem;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .twin-hdr__pagenav-pill-caret {
                    font-size: 1rem;
                    transition: transform .4s var(--ease-out-quint);
                }
                .twin-hdr__pagenav-pill[aria-expanded="true"] .twin-hdr__pagenav-pill-caret {
                    transform: rotate(180deg);
                }

            .twin-hdr__pagenav-pop {
                position: absolute;
                top: calc(100% + 1.2rem);
                left: 0;
                z-index: 20;
                width: 28rem;
                max-width: calc(100vw - 4.8rem);
                max-height: calc(100vh - var(--twin-hdr-h) - 4rem);
                overflow-y: auto;
                overscroll-behavior: contain;
                padding: 1.6rem;
                background: var(--c-bg);
                color: var(--c-fg);
                border: .1rem solid var(--c-line-soft);
                border-radius: 1.6rem;
                box-shadow: 0 2.4rem 6.4rem -2.4rem color-mix(in srgb, var(--c-pri) 35%, transparent);
                opacity: 0;
                visibility: hidden;
                transform: translateY(-.8rem);
                transition: opacity .3s var(--ease-out-quint), transform .3s var(--ease-out-quint), visibility 0s linear .3s;
            }
            .twin-hdr__pagenav-pop[aria-hidden="false"] {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
                transition: opacity .3s var(--ease-out-quint), transform .3s var(--ease-out-quint), visibility 0s;
            }
                .twin-hdr__pagenav-pop-title {
                    display: block;
                    padding: .4rem .8rem 1.2rem;
                    font-size: 1rem;
                    font-weight: 500;
                    letter-spacing: 0.18em;
                    text-transform: uppercase;
                    color: color-mix(in srgb, var(--c-fg) 50%, transparent);
                    border-bottom: .1rem solid var(--c-line-soft);
                }
                .twin-hdr__pagenav-list {
                    list-style: none;
                    margin: .8rem 0 0;
                    padding: 0;
                }
                .twin-hdr__pagenav-link {
                    display: flex;
                    align-items: center;
                    gap: 1.2rem;
                    padding: 1.2rem .8rem;
                    border-radius: .8rem;
                    color: var(--c-fg);
                    text-decoration: none;
                    transition: background-color .3s var(--ease-out-quint), color .3s var(--ease-out-quint);
                }
                .twin-hdr__pagenav-link:hover {
                    background: color-mix(in srgb, var(--c-fg) 5%, transparent);
                }
                    .twin-hdr__pagenav-num {
                        font-size: 1.1rem;
                        font-variant-numeric: tabular-nums;
                        letter-spacing: .08em;
                        color: color-mix(in srgb, var(--c-fg) 45%, transparent);
                        transition: color .3s var(--ease-out-quint);
                    }
                    .twin-hdr__pagenav-text {
                        flex: 1;
                        font-size: 1.4rem;
                        font-weight: 500;
                    }
                    .twin-hdr__pagenav-dir {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        width: 1.6rem;
                        font-size: 1rem;
                        line-height: 1;
                        color: color-mix(in srgb, var(--c-fg) 35%, transparent);
                        display: none;
                    }
                        /* Class-based (not `> i`) so it works whether FA renders
                           an <i> webfont glyph or an inline <svg>. */
                        .twin-hdr__pagenav-dir-up,
                        .twin-hdr__pagenav-dir-down {
                            display: none;
                            width: 1rem;
                            font-size: 1rem;
                        }
                        .twin-hdr__pagenav-dir-now {
                            display: none;
                            width: .5rem;
                            height: .5rem;
                            border-radius: 50%;
                            background: currentColor;
                        }
                .twin-hdr__pagenav-link.is-above .twin-hdr__pagenav-dir-up { display: inline-block; }
                .twin-hdr__pagenav-link.is-below .twin-hdr__pagenav-dir-down { display: inline-block; }
                .twin-hdr__pagenav-link.is-active .twin-hdr__pagenav-dir { color: var(--c-sec); }
                .twin-hdr__pagenav-link.is-active .twin-hdr__pagenav-dir-now { display: inline-block; }
                .twin-hdr__pagenav-link.is-active {
                    background: color-mix(in srgb, var(--c-sec) 12%, transparent);
                }
                .twin-hdr__pagenav-link.is-active .twin-hdr__pagenav-num { color: var(--c-sec); }

@media only screen and (max-width: 768px) {
    :root { --twin-hdr-h: 7.2rem; }
    .twin-hdr__cta,
    .twin-hdr__ctas { display: none; }
    .twin-hdr__brand-word { display: none; }
    .twin-hdr__brand-mark svg { height: 3.6rem; }
    .twin-hdr__actions { gap: 1.2rem; }
    .twin-hdr__pagenav-pill-label { display: none; }
    .twin-hdr__pagenav-pop { left: auto; right: 0; }
}


/* $NAV (custom overlay — namespaced .twin-nav)
--------------------------------------------------------*/
.twin-nav {
    position: fixed;
    inset: 0;
    z-index: 890;
    color-scheme: dark;
    color: var(--c-l);
    overflow: hidden;
    pointer-events: none;
    /* Keep the overlay fully hidden while closed so internal chrome
       (list border, contact-card bg, util-card bg, etc.) doesn't leak
       through the veil. Visibility flips after the longest close beat
       (veil sweep-away at 0.2s delay + 0.6s = 0.8s total). */
    visibility: hidden;
    transition: visibility 0s linear .85s;
}
.twin-nav[aria-hidden="false"] {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
}
    .twin-nav__veil {
        position: absolute;
        inset: 0;
        background: var(--c-d);
        clip-path: inset(0 0 100% 0);
        /* Close: small delay so items can fade out FIRST, then sweep away. */
        transition: clip-path .6s var(--ease-out-quint) .2s;
    }
    .twin-nav[aria-hidden="false"] .twin-nav__veil {
        clip-path: inset(0 0 0 0);
        /* Open: no delay — veil sweeps in immediately, items cascade after. */
        transition: clip-path .8s var(--ease-out-quint) 0s;
    }
    .twin-nav__inner {
        position: relative;
        display: grid;
        grid-template-columns: 1.8fr 1fr;
        gap: 4rem;
        width: var(--w-xl);
        height: 100%;
        margin-inline: auto;
        padding-block: calc(var(--twin-hdr-h) + 4rem) 4rem;
        padding-inline: var(--s-sm);
        overflow-y: auto;
    }
        .twin-nav__primary {
            min-width: 0;
        }
        .twin-nav__list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
        }
            .twin-nav__item {
                position: relative;
                border-bottom: .1rem solid color-mix(in srgb, var(--c-l) 14%, transparent);
                opacity: 0;
                transform: translateY(2.4rem);
                /* Close: snap-fade with no stagger so the veil can sweep cleanly after. */
                transition: opacity .25s var(--ease-out-quint), transform .25s var(--ease-out-quint);
            }
            /* Top divider lives on the first item (not the list) so it fades with
               the cascade on close, instead of lingering until visibility hides. */
            .twin-nav__item:first-child {
                border-top: .1rem solid color-mix(in srgb, var(--c-l) 14%, transparent);
            }
            .twin-nav[aria-hidden="false"] .twin-nav__item {
                opacity: 1;
                transform: translateY(0);
                /* Open: longer + staggered for the editorial cascade. */
                transition: opacity .7s var(--ease-out-quint), transform .9s var(--ease-out-quint);
                transition-delay: calc(.25s + var(--twin-nav-i, 0) * .08s);
            }
                .twin-nav__link {
                    position: relative;
                    display: grid;
                    grid-template-columns: auto 1fr auto;
                    align-items: center;
                    gap: 3.2rem;
                    /* Horizontal padding gives the icon + arrow breathing
                       room from the hover background edges, and gives the
                       arrow somewhere to slide on hover without clipping. */
                    padding: 3.2rem 3.2rem;
                    color: var(--c-l);
                    text-decoration: none;
                    overflow: hidden;
                }
                .twin-nav__link::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background: color-mix(in srgb, var(--c-l) 4%, transparent);
                    transform: translateX(-100%);
                    transition: transform .6s var(--ease-out-quint);
                    z-index: 0;
                }
                .twin-nav__link:hover::before { transform: translateX(0); }
                    .twin-nav__icon {
                        position: relative;
                        z-index: 1;
                        width: 4rem;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 2.4rem;
                        line-height: 1;
                        color: color-mix(in srgb, var(--c-l) 55%, transparent);
                        transition: color .4s var(--ease-out-quint), transform .6s var(--ease-out-quint);
                    }
                    .twin-nav__link:hover .twin-nav__icon {
                        color: var(--c-sec);
                        transform: translateX(.4rem);
                    }
                    .twin-nav__label {
                        position: relative;
                        z-index: 1;
                        display: flex;
                        flex-direction: column;
                        gap: .8rem;
                    }
                        .twin-nav__label-text {
                            display: block;
                            font-family: var(--font-display);
                            font-weight: 300;
                            font-size: clamp(4.8rem, 8vw, 11.2rem);
                            line-height: 0.95;
                            letter-spacing: -0.02em;
                            transition: transform .6s var(--ease-out-quint), color .4s var(--ease-out-quint);
                        }
                        .twin-nav__link:hover .twin-nav__label-text {
                            transform: translateX(2.4rem);
                            color: var(--c-sec);
                            font-style: italic;
                        }
                        .twin-nav__label-meta {
                            display: block;
                            font-family: var(--font-body);
                            font-size: 1.3rem;
                            letter-spacing: 0.04em;
                            color: color-mix(in srgb, var(--c-l) 55%, transparent);
                        }
                    .twin-nav__arrow {
                        position: relative;
                        z-index: 1;
                        font-size: 2.4rem;
                        color: color-mix(in srgb, var(--c-l) 55%, transparent);
                        transition: transform .5s var(--ease-out-quint), color .4s var(--ease-out-quint);
                    }
                    .twin-nav__link:hover .twin-nav__arrow {
                        color: var(--c-sec);
                        transform: translateX(.8rem);
                    }
        .twin-nav__aside {
            display: flex;
            flex-direction: column;
            gap: 1.6rem;
            min-width: 0;
            opacity: 0;
            /* Close: fast, no delay — drops with the items. */
            transition: opacity .25s var(--ease-out-quint);
        }
        .twin-nav[aria-hidden="false"] .twin-nav__aside {
            opacity: 1;
            /* Open: delayed so it lands after the primary list cascade. */
            transition: opacity .7s var(--ease-out-quint) .55s;
        }
            .twin-nav__util {
                list-style: none;
                margin: 0;
                padding: 0;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 1.6rem;
            }
                .twin-nav__util-link {
                    display: flex;
                    flex-direction: column;
                    gap: .8rem;
                    padding: 2.4rem;
                    background: color-mix(in srgb, var(--c-l) 4%, transparent);
                    border: .1rem solid color-mix(in srgb, var(--c-l) 10%, transparent);
                    border-radius: 1.6rem;
                    color: var(--c-l);
                    text-decoration: none;
                    transition: background-color .4s var(--ease-out-quint), border-color .4s var(--ease-out-quint), transform .4s var(--ease-out-quint);
                }
                .twin-nav__util-link { position: relative; height: 100%; }
                .twin-nav__util-link:hover {
                    background: color-mix(in srgb, var(--c-sec) 16%, transparent);
                    border-color: var(--c-sec);
                    transform: translateY(-.4rem);
                }
                    .twin-nav__util-eyebrow {
                        font-size: 1rem;
                        font-weight: 500;
                        letter-spacing: 0.24em;
                        text-transform: uppercase;
                        color: color-mix(in srgb, var(--c-l) 60%, transparent);
                    }
                    .twin-nav__util-title {
                        font-family: var(--font-display);
                        font-size: 1.8rem;
                        font-weight: 400;
                        line-height: 1.25;
                    }
                    .twin-nav__util-ext {
                        position: absolute;
                        top: 1.6rem;
                        right: 1.6rem;
                        font-size: 1.2rem;
                        color: color-mix(in srgb, var(--c-l) 45%, transparent);
                        transition: color .4s var(--ease-out-quint), transform .4s var(--ease-out-quint);
                    }
                    .twin-nav__util-link:hover .twin-nav__util-ext {
                        color: var(--c-sec);
                        transform: translate(.3rem, -.3rem);
                    }

            /* App card — spans the full util grid (double-wide), styled like the others */
            .twin-nav__app-item {
                grid-column: 1 / -1;
            }
                .twin-nav__app {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: space-between;
                    gap: 1.6rem 2.4rem;
                    padding: 2.4rem;
                    border-radius: 1.6rem;
                    border: .1rem solid color-mix(in srgb, var(--c-l) 10%, transparent);
                    background: color-mix(in srgb, var(--c-l) 4%, transparent);
                }
                    .twin-nav__app-copy {
                        display: flex;
                        flex-direction: column;
                        gap: .6rem;
                        flex: 1 1 22rem;
                        min-width: 0;
                    }
                        .twin-nav__app-title {
                            font-family: var(--font-display);
                            font-size: 1.8rem;
                            font-weight: 400;
                            line-height: 1.25;
                        }
                        .twin-nav__app-text {
                            margin: 0;
                            font-size: 1.2rem;
                            line-height: 1.45;
                            color: color-mix(in srgb, var(--c-l) 55%, transparent);
                        }
                    .twin-nav__app-badges {
                        display: flex;
                        gap: 1rem;
                    }
                        .twin-nav__app-badge {
                            display: inline-flex;
                            align-items: center;
                            gap: .9rem;
                            padding: .9rem 1.3rem;
                            border-radius: 1rem;
                            border: .1rem solid color-mix(in srgb, var(--c-l) 16%, transparent);
                            color: var(--c-l);
                            text-decoration: none;
                            transition: border-color .4s var(--ease-out-quint), transform .4s var(--ease-out-quint), background-color .4s var(--ease-out-quint);
                        }
                        .twin-nav__app-badge:hover {
                            border-color: var(--c-sec);
                            background: color-mix(in srgb, var(--c-sec) 12%, transparent);
                            transform: translateY(-.3rem);
                        }
                            .twin-nav__app-badge-icon {
                                font-size: 1.9rem;
                                line-height: 1;
                            }
                            .twin-nav__app-badge-label {
                                display: flex;
                                flex-direction: column;
                                line-height: 1.15;
                            }
                            .twin-nav__app-badge-sm {
                                font-size: .9rem;
                                letter-spacing: 0.04em;
                                color: color-mix(in srgb, var(--c-l) 55%, transparent);
                            }
                            .twin-nav__app-badge-lg {
                                font-family: var(--font-display);
                                font-size: 1.4rem;
                                font-weight: 400;
                            }
            .twin-nav__contact {
                display: flex;
                flex-direction: column;
                gap: 2.4rem;
                padding: 3.2rem;
                background: color-mix(in srgb, var(--c-l) 4%, transparent);
                border-radius: 1.6rem;
            }
                .twin-nav__contact-block {
                    display: flex;
                    flex-direction: column;
                    gap: .8rem;
                }
                    .twin-nav__contact-eyebrow {
                        font-size: 1rem;
                        font-weight: 500;
                        letter-spacing: 0.24em;
                        text-transform: uppercase;
                        color: color-mix(in srgb, var(--c-l) 55%, transparent);
                    }
                    .twin-nav__contact-link {
                        font-family: var(--font-display);
                        font-size: 1.8rem;
                        font-weight: 400;
                        line-height: 1.3;
                        color: var(--c-l);
                        text-decoration: none;
                        transition: color .3s var(--ease-out-quint);
                    }
                    .twin-nav__contact-link:hover { color: var(--c-sec); }
            .twin-nav__social {
                display: flex;
                flex-wrap: wrap;
                gap: 1.6rem;
                list-style: none;
                margin: 0;
                padding: 0;
                font-size: 1.2rem;
                letter-spacing: 0.16em;
                text-transform: uppercase;
            }
                .twin-nav__social-link {
                    display: inline-flex;
                    align-items: center;
                    gap: .8rem;
                    color: color-mix(in srgb, var(--c-l) 70%, transparent);
                    text-decoration: none;
                    transition: color .3s var(--ease-out-quint);
                }
                .twin-nav__social-link i {
                    font-size: 1.2rem;
                    opacity: .6;
                }
                .twin-nav__social-link:hover { color: var(--c-sec); }

@media only screen and (max-width: 896px) {
    .twin-nav__inner {
        grid-template-columns: 1fr;
        gap: 4rem;
        padding-bottom: 8rem;
    }
        .twin-nav__util {
            grid-template-columns: 1fr;
        }
}
@media only screen and (max-width: 512px) {
    .twin-nav__link {
        grid-template-columns: auto 1fr;
        gap: 1.6rem;
        padding: 2.4rem 2.4rem;
    }
        .twin-nav__icon { width: 3.2rem; font-size: 2rem; }
        .twin-nav__arrow { display: none; }
    .twin-nav__app { flex-direction: column; align-items: stretch; }
        .twin-nav__app-badges { flex-wrap: wrap; }
            .twin-nav__app-badge { flex: 1 1 0; justify-content: center; }
}

/* Lock scroll when overlay open */
body.twin-nav-open {
    overflow: hidden;
}
/* When the overlay is open, the header always sits over the dark veil */
body.twin-nav-open .twin-hdr {
    color: var(--c-l);
}
body.twin-nav-open .twin-hdr::before {
    opacity: 0;
    transform: translateY(-100%);
}


/* $HERO
--------------------------------------------------------*/
.twin-hero {
    position: relative;
    min-height: 100svh;
    color-scheme: dark;
    color: var(--c-l);
    overflow: hidden;
    isolation: isolate;
    background: var(--c-d);
}
    .twin-hero__media {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
    }
    .twin-hero__media .vim--bg {
        position: absolute;
        inset: 0;
    }
        .twin-hero__veil {
            position: absolute;
            inset: 0;
            pointer-events: none;
            /* Layered in paint order: top-of-stack ➜ bottom-of-stack.
               Each stop uses color-mix() against transparent for clean alpha. */
            background:
                /* 1. Bottom-left brand wash — anchors the headline / lede / CTAs */
                linear-gradient(100deg,
                    color-mix(in srgb, var(--c-d) 85%, transparent) 0%,
                    color-mix(in srgb, var(--c-pri) 60%, transparent) 32%,
                    transparent 64%
                ),
                /* 2. Top fade — keeps the floating header legible while transparent */
                linear-gradient(180deg,
                    color-mix(in srgb, var(--c-d) 60%, transparent) 0%,
                    transparent 22%
                ),
                /* 3. Bottom fade — supports GPS labels + scroll cue */
                linear-gradient(0deg,
                    color-mix(in srgb, var(--c-d) 55%, transparent) 0%,
                    transparent 22%
                ),
                /* 4. Brand-tinted vignette — pulls fog into the corners */
                radial-gradient(130% 100% at 50% 45%,
                    transparent 38%,
                    color-mix(in srgb, var(--c-pri) 55%, transparent) 100%
                ),
                /* 5. Global fog sheen — unifies the video with the brand palette */
                color-mix(in srgb, var(--c-pri) 22%, transparent);
        }
    .twin-hero__content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3.2rem;
        width: var(--w-lg);
        margin-inline: auto;
        padding-block: var(--s-xxl);
        min-height: 100svh;
        justify-content: center;
    }
        .twin-hero__eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 1.2rem;
            font-family: var(--font-body);
            font-size: 1.2rem;
            font-weight: 500;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: color-mix(in srgb, var(--c-l) 80%, transparent);
        }
            .twin-hero__eyebrow-dot {
                display: inline-block;
                width: .8rem;
                height: .8rem;
                background: var(--c-sec);
                border-radius: 50%;
                box-shadow: 0 0 0 .4rem color-mix(in srgb, var(--c-sec) 30%, transparent);
            }
        .twin-hero__heading {
            font-family: var(--font-display);
            font-weight: 300;
            font-size: clamp(5.6rem, 9.2vw, 13.6rem);
            line-height: 0.96;
            letter-spacing: -0.025em;
            color: var(--c-l);
            margin: 0;
            max-width: 18ch;
        }
            .twin-hero__heading-line {
                display: block;
            }
            .twin-hero__heading-em,
            .twin-hero__heading em {
                font-style: italic;
                color: var(--c-sec);
                font-variation-settings: "opsz" 144, "SOFT" 100;
            }
        .twin-hero__lede {
            max-width: 56rem;
            font-family: var(--font-body);
            font-size: 1.8rem;
            line-height: 1.5;
            color: color-mix(in srgb, var(--c-l) 78%, transparent);
            margin: 0;
        }
        .twin-hero__actions {
            display: flex;
            flex-wrap: wrap;
            gap: 1.6rem;
            margin-top: 1.6rem;
        }
    .twin-hero__scroll {
        position: absolute;
        z-index: 2;
        bottom: 4rem;
        left: 50%;
        transform: translateX(-50%);
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 1.6rem;
        color: color-mix(in srgb, var(--c-l) 65%, transparent);
        text-decoration: none;
        font-size: 1.1rem;
        font-weight: 500;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        transition: color .3s var(--ease-out-quint);
    }
    .twin-hero__scroll:hover { color: var(--c-l); }
        .twin-hero__scroll-line {
            display: block;
            width: .1rem;
            height: 4.8rem;
            background: linear-gradient(180deg, currentColor 0%, transparent 100%);
            position: relative;
            overflow: hidden;
        }
        .twin-hero__scroll-line::after {
            content: '';
            position: absolute;
            top: -50%;
            left: 0;
            width: 100%;
            height: 50%;
            background: var(--c-sec);
            animation: twin-scroll-tick 2.2s var(--ease-in-out-quart) infinite;
        }
@keyframes twin-scroll-tick {
    0%   { transform: translateY(0); }
    100% { transform: translateY(300%); }
}

    .twin-hero__corners {
        position: absolute;
        z-index: 2;
        bottom: 3.2rem;
        left: 0;
        right: 0;
        width: var(--w-xl);
        margin-inline: auto;
        padding-inline: var(--s-sm);
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        pointer-events: none;
    }
    .twin-hero__corner {
        font-size: 1.1rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--c-l) 55%, transparent);
    }

@media only screen and (max-width: 768px) {
    .twin-hero__corners { bottom: 2.4rem; }
    .twin-hero__corner {
        font-size: 1rem;
        letter-spacing: 0.12em;
    }
    .twin-hero__corner-detail { display: none; }
    .twin-hero__content { gap: 2.4rem; }
    .twin-hero__lede { font-size: 1.6rem; }
}


/* $MANIFESTO
--------------------------------------------------------*/
.twin-manifesto {
    background: var(--c-qui);
    padding-block: var(--s-xl);
}
    .twin-manifesto__inner {
        width: var(--w-lg);
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        gap: 4.8rem;
    }
        .twin-manifesto__statement {
            font-family: var(--font-display);
            font-weight: 300;
            font-size: clamp(3.2rem, 4.8vw, 6.4rem);
            line-height: 1.12;
            letter-spacing: -0.018em;
            color: var(--c-pri);
            margin: 0;
            max-width: 24ch;
            text-wrap: balance;
        }
        .twin-manifesto__statement em {
            font-style: italic;
            color: var(--c-sec);
        }
        .twin-manifesto__highlight {
            position: relative;
            white-space: nowrap;
        }
        .twin-manifesto__highlight::after {
            content: '';
            position: absolute;
            left: -.2rem;
            right: -.2rem;
            bottom: .1em;
            height: .32em;
            background: var(--c-accent-soft);
            z-index: -1;
        }
        .twin-manifesto__signature {
            display: flex;
            align-items: center;
            gap: 1.6rem;
            padding-top: 3.2rem;
            border-top: .1rem solid var(--c-line);
            font-size: 1.2rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: color-mix(in srgb, var(--c-pri) 60%, transparent);
        }
            .twin-manifesto__signature-name {
                color: var(--c-pri);
                font-weight: 600;
            }


/* $PILLARS
--------------------------------------------------------*/
.twin-pillars {
    background: var(--c-qua);
    padding-block: var(--s-xl);
}
    .twin-pillars__inner {
        width: var(--w-lg);
        margin-inline: auto;
    }
    .twin-pillars__header {
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
        max-width: 80rem;
        margin: 0 0 8rem;
    }
        .twin-pillars__heading {
            font-family: var(--font-display);
            font-weight: 300;
            font-size: clamp(4rem, 6vw, 8.8rem);
            line-height: 1;
            letter-spacing: -0.022em;
            color: var(--c-pri);
            margin: 0;
        }
        .twin-pillars__heading em {
            font-style: italic;
            color: var(--c-sec);
        }
    .twin-pillars__grid {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.4rem;
    }
        .twin-pillars__card {
            position: relative;
        }
        .twin-pillars__link {
            display: flex;
            flex-direction: column;
            background: var(--c-qui);
            border-radius: 2.4rem;
            overflow: hidden;
            color: inherit;
            text-decoration: none;
            transition: transform .6s var(--ease-out-quint), box-shadow .6s var(--ease-out-quint);
            height: 100%;
        }
        .twin-pillars__link:hover {
            transform: translateY(-.8rem);
            box-shadow: 0 4rem 8rem -4rem color-mix(in srgb, var(--c-pri) 35%, transparent);
        }
            .twin-pillars__media {
                position: relative;
                aspect-ratio: 4/3; /* matches .twin-room__feature on the event pages */
                overflow: hidden;
                background: var(--c-pri);
            }
                .twin-pillars__img {
                    position: absolute;
                    inset: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    filter: saturate(.9) contrast(1.02);
                    transition: transform 1.2s var(--ease-out-quint), filter .6s var(--ease-out-quint);
                }
                .twin-pillars__link:hover .twin-pillars__img {
                    transform: scale(1.06);
                    filter: saturate(1.05) contrast(1.05);
                }
            .twin-pillars__body {
                display: flex;
                flex-direction: column;
                gap: 1.6rem;
                padding: 3.2rem;
                flex: 1;
            }
                .twin-pillars__icon {
                    /* Bold pillar mark — same FA icons as the nav so the
                       three brand pillars carry a consistent visual ID
                       wherever they appear. */
                    display: inline-flex;
                    align-items: center;
                    justify-content: flex-start;
                    height: 3.2rem;
                    margin-bottom: -.4rem;
                    font-size: 2.8rem;
                    line-height: 1;
                    color: color-mix(in srgb, var(--c-pri) 45%, transparent);
                    transition: color .4s var(--ease-out-quint), transform .5s var(--ease-out-quint);
                }
                .twin-pillars__link:hover .twin-pillars__icon {
                    color: var(--c-sec);
                    transform: translateY(-.4rem);
                }
                .twin-pillars__index {
                    font-family: var(--font-body);
                    font-size: 1.2rem;
                    font-weight: 500;
                    letter-spacing: 0.24em;
                    text-transform: uppercase;
                    color: color-mix(in srgb, var(--c-pri) 60%, transparent);
                }
                .twin-pillars__title {
                    font-family: var(--font-display);
                    font-weight: 300;
                    font-size: clamp(2.8rem, 3vw, 4rem);
                    line-height: 1.1;
                    letter-spacing: -0.02em;
                    color: var(--c-pri);
                    margin: 0;
                }
                .twin-pillars__text {
                    font-size: 1.5rem;
                    line-height: 1.55;
                    color: color-mix(in srgb, var(--c-pri) 72%, transparent);
                    margin: 0;
                }
                .twin-pillars__cta {
                    display: inline-flex;
                    align-items: center;
                    gap: .8rem;
                    margin-top: auto;
                    padding-top: 1.6rem;
                    font-size: 1.2rem;
                    font-weight: 500;
                    letter-spacing: 0.16em;
                    text-transform: uppercase;
                    color: var(--c-pri);
                }
                .twin-pillars__cta-arrow {
                    transition: transform .4s var(--ease-out-quint);
                }
                .twin-pillars__link:hover .twin-pillars__cta-arrow {
                    transform: translateX(.4rem);
                }
@media only screen and (max-width: 768px) {
    .twin-pillars__grid { grid-template-columns: 1fr; }
    .twin-pillars__media { aspect-ratio: 16/10; }
}


/* $SHOWCASE
--------------------------------------------------------*/
.twin-showcase {
    background: var(--c-d);
    color-scheme: dark;
    color: var(--c-l);
    padding-block: var(--s-xl);
    overflow: hidden;
}
    .twin-showcase__header {
        margin-bottom: 6.4rem;
    }
        .twin-showcase__header-inner {
            width: var(--w-lg);
            margin-inline: auto;
            display: flex;
            flex-direction: column;
            gap: 2.4rem;
        }
        .twin-showcase__heading {
            font-family: var(--font-display);
            font-weight: 300;
            font-size: clamp(4rem, 6.4vw, 9.6rem);
            line-height: 1;
            letter-spacing: -0.022em;
            color: var(--c-l);
            margin: 0;
            max-width: 18ch;
        }
        .twin-showcase__heading em {
            font-style: italic;
            color: var(--c-sec);
        }
    .twin-showcase__stage {
        position: relative;
    }
    .twin-showcase__swiper {
        overflow: visible;
    }
    .twin-showcase__track {
        align-items: stretch;
    }
        .twin-showcase__slide {
            width: 72%;
            max-width: 89.6rem;
            height: auto;
            opacity: .35;
            transition: opacity .6s var(--ease-out-quint);
        }
        .twin-showcase__slide.swiper-slide-active {
            opacity: 1;
        }
        .twin-showcase__slide.swiper-slide-next,
        .twin-showcase__slide.swiper-slide-prev {
            opacity: .7;
            cursor: pointer;
        }
            .twin-showcase__slide.swiper-slide-next:hover,
            .twin-showcase__slide.swiper-slide-prev:hover {
                opacity: .85;
            }
            .twin-showcase__media {
                aspect-ratio: 4/3;
                width: 100%;
                overflow: hidden;
                border-radius: 1.6rem;
                background: var(--c-pri);
            }
                .twin-showcase__img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 8s var(--ease-out-quint);
                }
                .twin-showcase__slide.swiper-slide-active .twin-showcase__img {
                    transform: scale(1.04);
                }
            .twin-showcase__caption {
                display: flex;
                flex-direction: column;
                gap: .8rem;
                margin-top: 2.4rem;
                color: color-mix(in srgb, var(--c-l) 75%, transparent);
            }
                .twin-showcase__caption-eyebrow {
                    font-size: 1rem;
                    font-weight: 500;
                    letter-spacing: 0.32em;
                    text-transform: uppercase;
                    color: var(--c-sec);
                }
                .twin-showcase__caption-text {
                    font-family: var(--font-display);
                    font-size: 1.8rem;
                    font-style: italic;
                    font-weight: 300;
                    line-height: 1.2;
                }
    .twin-showcase__controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3.2rem;
        margin-top: 6.4rem;
    }
        .twin-showcase__btn {
            width: 5.6rem;
            height: 5.6rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: .1rem solid color-mix(in srgb, var(--c-l) 24%, transparent);
            border-radius: 50%;
            color: var(--c-l);
            cursor: pointer;
            transition: background-color .4s var(--ease-out-quint), border-color .4s var(--ease-out-quint), color .4s var(--ease-out-quint);
        }
        .twin-showcase__btn:hover {
            background: var(--c-sec);
            border-color: var(--c-sec);
            color: var(--c-pri);
        }
            .twin-showcase__btn-arrow {
                font-size: 1.8rem;
                transition: transform .4s var(--ease-out-quint);
            }
            .twin-showcase__btn--prev:hover .twin-showcase__btn-arrow {
                transform: translateX(-.4rem);
            }
            .twin-showcase__btn--next:hover .twin-showcase__btn-arrow {
                transform: translateX(.4rem);
            }
        .twin-showcase__count {
            display: inline-flex;
            align-items: center;
            gap: .8rem;
            min-width: 12rem;
            justify-content: center;
            font-family: var(--font-body);
            font-size: 1.2rem;
            letter-spacing: 0.24em;
            font-variant-numeric: tabular-nums;
            color: color-mix(in srgb, var(--c-l) 65%, transparent);
        }
            .twin-showcase__count-current {
                color: var(--c-l);
            }


/* $MEMBERS
--------------------------------------------------------*/
.twin-members {
    background: var(--c-pri);
    color-scheme: dark;
    color: var(--c-l);
    padding-block: var(--s-xl);
    overflow: hidden;
}
    .twin-members__inner {
        width: var(--w-lg);
        margin-inline: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8rem;
    }
        .twin-members__media {
            position: relative;
            aspect-ratio: 4/5;
            border-radius: 2.4rem;
            overflow: hidden;
        }
            .twin-members__img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .twin-members__media-badge {
                position: absolute;
                top: 2.4rem;
                left: 2.4rem;
                right: 2.4rem;
                padding: 1.6rem 2.4rem;
                background: color-mix(in srgb, var(--c-d) 70%, transparent);
                -webkit-backdrop-filter: blur(1.2rem);
                        backdrop-filter: blur(1.2rem);
                border: .1rem solid color-mix(in srgb, var(--c-l) 18%, transparent);
                border-radius: 9.6rem;
                overflow: hidden;
                white-space: nowrap;
            }
                /* Single animated track that contains BOTH text copies.
                   Animating the track (not each span independently) means
                   the snap-back at loop end lands exactly where the track
                   ended visually — true seamless marquee. */
                .twin-members__media-badge-track {
                    display: flex;
                    width: max-content;
                    animation: twin-marquee 72s linear infinite;
                }
                    .twin-members__media-badge-text {
                        flex-shrink: 0;
                        font-family: var(--font-body);
                        font-size: 1.2rem;
                        font-weight: 500;
                        letter-spacing: 0.24em;
                        text-transform: uppercase;
                        color: var(--c-sec);
                    }
@keyframes twin-marquee {
    from { transform: translateX(0); }
    /* -50% of the track (which contains 2 identical copies) = exactly
       one copy's width. After this translation, copy 2 sits where copy 1
       began, and the snap to 0 is visually identical. */
    to   { transform: translateX(-50%); }
}
        .twin-members__content {
            display: flex;
            flex-direction: column;
            gap: 2.4rem;
        }
            .twin-members__heading {
                font-family: var(--font-display);
                font-weight: 300;
                font-size: clamp(4rem, 5.6vw, 8rem);
                line-height: 1;
                letter-spacing: -0.022em;
                color: var(--c-l);
                margin: 0;
                max-width: 18ch;
            }
            .twin-members__heading em {
                font-style: italic;
                color: var(--c-sec);
            }
            .twin-members__text {
                max-width: 56rem;
                font-size: 1.6rem;
                line-height: 1.6;
                color: color-mix(in srgb, var(--c-l) 72%, transparent);
                margin: 0;
            }
            .twin-members__perks {
                list-style: none;
                margin: 1.6rem 0 0;
                padding: 2.4rem 0;
                display: flex;
                flex-direction: column;
                gap: 1.6rem;
                border-top: .1rem solid color-mix(in srgb, var(--c-l) 14%, transparent);
                border-bottom: .1rem solid color-mix(in srgb, var(--c-l) 14%, transparent);
            }
                .twin-members__perk {
                    display: flex;
                    align-items: center;
                    gap: 1.6rem;
                    font-size: 1.6rem;
                    color: color-mix(in srgb, var(--c-l) 85%, transparent);
                }
                    .twin-members__perk-num {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        width: 2.4rem;
                        height: 2.4rem;
                        background: color-mix(in srgb, var(--c-sec) 18%, transparent);
                        color: var(--c-sec);
                        border-radius: 50%;
                        font-size: 1.4rem;
                        line-height: 1;
                    }
            .twin-members__actions {
                display: flex;
                flex-wrap: wrap;
                gap: 1.6rem;
                margin-top: 1.6rem;
            }
@media only screen and (max-width: 1024px) {
    .twin-members__inner { grid-template-columns: 1fr; gap: 4.8rem; }
    .twin-members__media { aspect-ratio: 16/10; max-height: 56rem; }
}


/* $STORY
--------------------------------------------------------*/
.twin-story {
    background: var(--c-qui);
    padding-block: var(--s-xl);
}
    .twin-story__inner {
        width: var(--w-lg);
        margin-inline: auto;
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: 8rem;
    }
        .twin-story__media {
            position: relative;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
            gap: 1.6rem;
        }
            .twin-story__img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 1.6rem;
            }
            .twin-story__img--lg {
                grid-column: 1 / -1;
                aspect-ratio: 5/4;
            }
            .twin-story__img--sm {
                grid-column: 2 / -1;
                aspect-ratio: 1/1;
                margin-top: -8rem;
                /* translate (not negative margin) — only translate visually
                   shifts the element past the grid cell since there's no
                   sibling on its right for negative margin to flow into. */
                transform: translateX(4rem);
                box-shadow: 0 2.4rem 4.8rem -1.6rem color-mix(in srgb, var(--c-pri) 30%, transparent);
            }
        .twin-story__content {
            display: flex;
            flex-direction: column;
            gap: 2.4rem;
        }
            .twin-story__heading {
                font-family: var(--font-display);
                font-weight: 300;
                font-size: clamp(4rem, 5.6vw, 7.2rem);
                line-height: 1;
                letter-spacing: -0.022em;
                color: var(--c-pri);
                margin: 0;
            }
            .twin-story__heading em {
                font-style: italic;
                color: var(--c-sec);
            }
            .twin-story__copy p {
                font-size: 1.6rem;
                line-height: 1.65;
                color: color-mix(in srgb, var(--c-pri) 75%, transparent);
                margin: 0 0 1.6rem;
            }
            .twin-story__copy p:last-child { margin-bottom: 0; }
            .twin-story__stats {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 1.6rem;
                margin: 3.2rem 0 0;
                padding: 3.2rem 0 0;
                border-top: .1rem solid var(--c-line);
            }
                .twin-story__stat {
                    display: flex;
                    flex-direction: column;
                    gap: .8rem;
                }
                    .twin-story__stat-label {
                        font-size: 1rem;
                        font-weight: 500;
                        letter-spacing: 0.24em;
                        text-transform: uppercase;
                        color: color-mix(in srgb, var(--c-pri) 60%, transparent);
                        margin: 0;
                    }
                    .twin-story__stat-value {
                        font-family: var(--font-display);
                        font-size: clamp(3.2rem, 3.2vw, 4.8rem);
                        font-weight: 400;
                        line-height: 1;
                        color: var(--c-pri);
                        margin: 0;
                    }
@media only screen and (max-width: 1024px) {
    .twin-story__inner { grid-template-columns: 1fr; gap: 4.8rem; }
    .twin-story__img--sm { margin: 0; transform: none; }
}
@media only screen and (max-width: 640px) {
    .twin-story__stats { grid-template-columns: repeat(2, 1fr); }
}


/* $LOCATE — full-bleed Mapbox + overlaid info card.
   Cream section + custom-tinted light map. Hard-cuts into the dark
   footer below; no fade required because the contrast IS the feature.
--------------------------------------------------------*/
.twin-locate {
    position: relative;
    background: var(--c-qua);
    color: var(--c-pri);
    overflow: hidden;
    isolation: isolate;
    display: flex;
}
    .twin-locate__map {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        background: var(--c-qua);
    }
    /* Mapbox internals: kill the focus ring and dial the attribution
       chrome to fit the cream palette. */
    .twin-locate__map .mapboxgl-canvas:focus { outline: none; }
    /* Strip every Mapbox-injected background off the bottom controls.
       Mapbox's own compact attribution selector is the same specificity
       as ours, so we lift ours with !important to win unambiguously. */
    .twin-locate__map .mapboxgl-ctrl-bottom-left,
    .twin-locate__map .mapboxgl-ctrl-bottom-right,
    .twin-locate__map .mapboxgl-ctrl-attrib,
    .twin-locate__map .mapboxgl-ctrl-attrib.mapboxgl-compact,
    .twin-locate__map .mapboxgl-ctrl-attrib-button {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
    .twin-locate__map .mapboxgl-ctrl-attrib {
        color: color-mix(in srgb, var(--c-pri) 65%, transparent);
        font-size: 1rem;
    }
    .twin-locate__map .mapboxgl-ctrl-attrib a { color: color-mix(in srgb, var(--c-pri) 85%, transparent); }
    .twin-locate__map .mapboxgl-ctrl-logo { opacity: .6; }

    /* Soft left wash so the white glass card always lands on a slightly
       muted patch of map (regardless of whether olive water or cream
       land sits beneath it). */
    .twin-locate__veil {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
            linear-gradient(90deg,
                color-mix(in srgb, var(--c-qua) 60%, transparent) 0%,
                color-mix(in srgb, var(--c-qua) 25%, transparent) 36%,
                transparent 62%);
    }

    .twin-locate__inner {
        position: relative;
        z-index: 2;
        width: var(--w-lg);
        margin-inline: auto;
        padding-block: var(--s-xl);
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: clamp(4.8rem, 8vw, 11.2rem);
        align-items: center;
    }
        .twin-locate__header {
            display: flex;
            flex-direction: column;
            gap: 2.4rem;
            max-width: 56rem;
        }
            .twin-locate__heading {
                font-family: var(--font-display);
                font-weight: 300;
                font-size: clamp(4rem, 6vw, 8.8rem);
                line-height: .96;
                letter-spacing: -0.022em;
                color: var(--c-pri);
                margin: 0;
                text-wrap: balance;
            }
            .twin-locate__heading em {
                font-style: italic;
                color: var(--c-sec);
            }
            .twin-locate__copy {
                font-family: var(--font-body);
                font-size: 1.6rem;
                line-height: 1.6;
                color: color-mix(in srgb, var(--c-pri) 72%, transparent);
                margin: 0;
                max-width: 44rem;
            }

        /* Frosted-white glass info card. */
        .twin-locate__card {
            justify-self: end;
            width: 100%;
            max-width: 44rem;
            padding: 4rem;
            background: color-mix(in srgb, var(--c-l) 78%, transparent);
            backdrop-filter: blur(2.4rem) saturate(160%);
            -webkit-backdrop-filter: blur(2.4rem) saturate(160%);
            border: .1rem solid color-mix(in srgb, var(--c-pri) 10%, transparent);
            border-radius: 2.4rem;
            box-shadow:
                0 3.2rem 8rem -2.4rem color-mix(in srgb, var(--c-pri) 24%, transparent),
                inset 0 .1rem 0 color-mix(in srgb, var(--c-l) 60%, transparent);
            display: flex;
            flex-direction: column;
            gap: 3.2rem;
        }
            .twin-locate__card-coords {
                display: flex;
                align-items: baseline;
                gap: 1.2rem;
                font-family: var(--font-body);
                font-size: 1.2rem;
                font-weight: 500;
                letter-spacing: 0.24em;
                text-transform: uppercase;
                color: color-mix(in srgb, var(--c-pri) 60%, transparent);
            }
                .twin-locate__card-coords-axis {
                    color: var(--c-sec);
                    font-weight: 600;
                }
                .twin-locate__card-coords-value {
                    color: var(--c-pri);
                    font-feature-settings: 'tnum' 1;
                }
                .twin-locate__card-coords-divider {
                    flex: 1;
                    height: .1rem;
                    background: color-mix(in srgb, var(--c-pri) 16%, transparent);
                    margin: 0 .4rem;
                }
            .twin-locate__card-addr {
                font-family: var(--font-display);
                font-style: normal;
                font-weight: 400;
                font-size: clamp(2.4rem, 2.2vw, 3.2rem);
                line-height: 1.2;
                color: var(--c-pri);
                margin: 0;
            }
            .twin-locate__card-meta {
                list-style: none;
                margin: 0;
                padding: 2.4rem 0;
                border-top: .1rem solid color-mix(in srgb, var(--c-pri) 14%, transparent);
                border-bottom: .1rem solid color-mix(in srgb, var(--c-pri) 14%, transparent);
                display: flex;
                flex-direction: column;
                gap: 1.2rem;
            }
                .twin-locate__card-meta-row {
                    display: grid;
                    grid-template-columns: 8rem 1fr;
                    gap: 1.6rem;
                    align-items: baseline;
                    font-size: 1.4rem;
                    line-height: 1.5;
                }
                    .twin-locate__card-meta-key {
                        font-size: 1rem;
                        font-weight: 500;
                        letter-spacing: 0.24em;
                        text-transform: uppercase;
                        color: color-mix(in srgb, var(--c-pri) 50%, transparent);
                    }
                    .twin-locate__card-meta-val {
                        color: color-mix(in srgb, var(--c-pri) 88%, transparent);
                    }
                    .twin-locate__card-meta-link {
                        text-decoration: none;
                        transition: color .3s var(--ease-out-quint);
                    }
                    .twin-locate__card-meta-link:hover { color: var(--c-sec); }
            .twin-locate__card-actions {
                display: flex;
                align-items: center;
                gap: 2.4rem;
                flex-wrap: wrap;
            }
                .twin-locate__card-secondary {
                    position: relative;
                    font-family: var(--font-body);
                    font-size: 1.3rem;
                    font-weight: 500;
                    letter-spacing: 0.16em;
                    text-transform: uppercase;
                    color: color-mix(in srgb, var(--c-pri) 75%, transparent);
                    text-decoration: none;
                    padding-bottom: .4rem;
                    border-bottom: .1rem solid color-mix(in srgb, var(--c-pri) 30%, transparent);
                    transition: color .3s var(--ease-out-quint), border-color .3s var(--ease-out-quint);
                }
                .twin-locate__card-secondary:hover {
                    color: var(--c-sec);
                    border-color: var(--c-sec);
                }
@media only screen and (max-width: 1024px) {
    .twin-locate__inner {
        grid-template-columns: 1fr;
        gap: 4.8rem;
        align-items: start;
    }
    .twin-locate__card { justify-self: start; max-width: 48rem; }
    .twin-locate__veil {
        background:
            linear-gradient(180deg,
                color-mix(in srgb, var(--c-qua) 75%, transparent) 0%,
                color-mix(in srgb, var(--c-qua) 30%, transparent) 30%,
                transparent 55%);
    }
}
@media only screen and (max-width: 640px) {
    .twin-locate__card { padding: 3.2rem; }
    .twin-locate__card-meta-row { grid-template-columns: 6.4rem 1fr; }
}


/* $MAP MARKER — pulsing gold beacon dropped via mapboxgl.Marker
--------------------------------------------------------*/
.twin-map-marker {
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
    pointer-events: auto;
    cursor: pointer;
}
    .twin-map-marker__dot {
        position: relative;
        z-index: 3;
        display: block;
        width: 100%;
        height: 100%;
        background: var(--c-sec);
        border-radius: 50%;
        box-shadow:
            0 0 0 .2rem color-mix(in srgb, var(--c-sec) 55%, #000 45%),
            0 0 1.6rem color-mix(in srgb, var(--c-sec) 70%, transparent),
            0 0 .4rem var(--c-sec);
    }
    .twin-map-marker__pulse {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        border-radius: 50%;
        background: var(--c-sec);
        opacity: 0;
        transform-origin: center;
        animation: twin-marker-pulse 2.6s cubic-bezier(.16, 1, .3, 1) infinite;
    }
    .twin-map-marker__pulse--delayed { animation-delay: 1.3s; }

@keyframes twin-marker-pulse {
    0%   { transform: scale(1); opacity: .55; }
    80%  { opacity: 0; }
    100% { transform: scale(7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .twin-map-marker__pulse { animation: none; opacity: 0; }
}


/* $FOOTER
--------------------------------------------------------*/
.twin-ftr {
    background: var(--c-d);
    color-scheme: dark;
    color: var(--c-l);
    padding-block: var(--s-lg);
}
    .twin-ftr__inner {
        width: var(--w-lg);
        margin-inline: auto;
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 6.4rem 4.8rem;
    }
        .twin-ftr__brand {
            display: flex;
            flex-direction: column;
            gap: 2.4rem;
        }
            .twin-ftr__logo {
                display: inline-flex;
                align-items: center;
                color: var(--c-l);
                text-decoration: none;
            }
                .twin-ftr__logo-svg {
                    width: 100%;
                    max-width: 18rem;
                    height: auto;
                    fill: currentColor;
                }
            .twin-ftr__tagline {
                font-family: var(--font-display);
                font-style: italic;
                font-weight: 300;
                font-size: 1.8rem;
                line-height: 1.35;
                color: color-mix(in srgb, var(--c-l) 70%, transparent);
                margin: 0;
                max-width: 32rem;
            }
            .twin-ftr__contact {
                font-style: normal;
                display: flex;
                flex-direction: column;
                gap: 1.2rem;
            }
            .twin-ftr__social {
                list-style: none;
                margin: .8rem 0 0;
                padding: 0;
                display: flex;
                gap: 1.2rem;
            }
                .twin-ftr__social-link {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 4rem;
                    height: 4rem;
                    border-radius: 50%;
                    border: .1rem solid color-mix(in srgb, var(--c-l) 20%, transparent);
                    color: var(--c-l);
                    font-size: 1.6rem;
                    text-decoration: none;
                    transition: color .3s var(--ease-out-quint), border-color .3s var(--ease-out-quint);
                }
                .twin-ftr__social-link:hover {
                    color: var(--c-sec);
                    border-color: var(--c-sec);
                }
        .twin-ftr__cols {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 3.2rem;
        }
            .twin-ftr__col {
                display: flex;
                flex-direction: column;
                gap: 1.6rem;
            }
                .twin-ftr__col-title {
                    font-family: var(--font-body);
                    font-size: 1rem;
                    font-weight: 500;
                    letter-spacing: 0.32em;
                    text-transform: uppercase;
                    color: var(--c-sec);
                    margin: 0;
                }
                .twin-ftr__col-list {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    display: flex;
                    flex-direction: column;
                    gap: 1.2rem;
                }
                .twin-ftr__col-link {
                    font-family: var(--font-body);
                    font-size: 1.4rem;
                    line-height: 1.4;
                    color: color-mix(in srgb, var(--c-l) 78%, transparent);
                    text-decoration: none;
                    transition: color .3s var(--ease-out-quint);
                }
                .twin-ftr__col-link:hover { color: var(--c-sec); }
        .twin-ftr__colophon {
            grid-column: 1 / -1;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 2.4rem;
            padding-top: 3.2rem;
            border-top: .1rem solid color-mix(in srgb, var(--c-l) 14%, transparent);
            font-size: 1.2rem;
            color: color-mix(in srgb, var(--c-l) 55%, transparent);
        }
            .twin-ftr__colophon a {
                color: color-mix(in srgb, var(--c-l) 78%, transparent);
                text-decoration: none;
                transition: color .3s var(--ease-out-quint);
            }
            .twin-ftr__colophon a:hover { color: var(--c-sec); }
@media only screen and (max-width: 1024px) {
    .twin-ftr__inner { grid-template-columns: 1fr; gap: 4.8rem; }
    .twin-ftr__brand {
        align-items: center;
        text-align: center;
    }
    .twin-ftr__logo { justify-content: center; }
    .twin-ftr__tagline { max-width: 36rem; }
    .twin-ftr__cols { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 512px) {
    .twin-ftr__cols { gap: 2.8rem 2rem; }
}


/* $PAGE-HERO (shared: golf, celebrate, ...)
--------------------------------------------------------*/
.twin-phero {
    position: relative;
    min-height: clamp(60rem, 86vh, 88rem);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    color-scheme: dark;
    color: var(--c-l);
}
    .twin-phero__media {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
    }
        .twin-phero__swiper {
            position: absolute;
            inset: 0;
            z-index: 0;
            height: 100%;
        }
        .twin-phero__swiper .swiper-wrapper { height: 100%; }
        .twin-phero__slide { height: 100%; overflow: hidden; }
        .twin-phero__img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.005);
            transition: transform 8s var(--ease-out-quint);
        }
        .twin-phero__slide.swiper-slide-active .twin-phero__img {
            transform: scale(1.08);
        }
    .twin-phero__veil {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        /* Mirrors .twin-hero__veil — layered in paint order: top ➜ bottom. */
        background:
            /* 1. Bottom-left brand wash — anchors the headline / lede / CTAs */
            linear-gradient(100deg,
                color-mix(in srgb, var(--c-d) 85%, transparent) 0%,
                color-mix(in srgb, var(--c-pri) 60%, transparent) 32%,
                transparent 64%
            ),
            /* 2. Top fade — keeps the floating header legible */
            linear-gradient(180deg,
                color-mix(in srgb, var(--c-d) 60%, transparent) 0%,
                transparent 22%
            ),
            /* 3. Bottom fade — supports the scroll cue */
            linear-gradient(0deg,
                color-mix(in srgb, var(--c-d) 55%, transparent) 0%,
                transparent 22%
            ),
            /* 4. Brand-tinted vignette — pulls fog into the corners */
            radial-gradient(130% 100% at 50% 45%,
                transparent 38%,
                color-mix(in srgb, var(--c-pri) 55%, transparent) 100%
            ),
            /* 5. Global fog sheen — unifies the image with the brand palette */
            color-mix(in srgb, var(--c-pri) 22%, transparent);
    }
    .twin-phero__inner {
        position: relative;
        z-index: 2;
        width: var(--w-lg);
        margin-inline: auto;
        padding-block: var(--s-xxl) var(--s-xl);
    }
        .twin-phero__eyebrow { margin-bottom: 2.4rem; }
        .twin-phero__eyebrow-icon {
            color: var(--c-sec);
            font-size: 1.4rem;
        }
        .twin-phero__title { max-width: 16ch; }
        .twin-phero__title-line { display: block; }
        .twin-phero__lede {
            max-width: 52ch;
            margin-top: 2.4rem;
            font-size: clamp(1.6rem, 1.6vw, 2rem);
            line-height: 1.6;
            color: color-mix(in srgb, var(--c-l) 82%, transparent);
        }
        .twin-phero__actions {
            display: flex;
            flex-wrap: wrap;
            gap: 1.6rem;
            margin-top: 4rem;
        }
    .twin-phero__scroll {
        position: absolute;
        z-index: 2;
        right: clamp(2.4rem, 4vw, 6rem);
        bottom: clamp(8rem, 10vw, 14rem);
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 1.6rem;
        text-decoration: none;
        color: var(--c-l);
    }
        .twin-phero__scroll-label {
            font-size: 1.1rem;
            letter-spacing: .24em;
            text-transform: uppercase;
            writing-mode: vertical-rl;
        }
        .twin-phero__scroll-line {
            position: relative;
            display: block;
            width: .1rem;
            height: 6.4rem;
            background: linear-gradient(180deg, currentColor 0%, transparent 100%);
            overflow: hidden;
        }
        .twin-phero__scroll-line::after {
            content: '';
            position: absolute;
            top: -50%;
            left: 0;
            width: 100%;
            height: 50%;
            background: var(--c-sec);
            animation: twin-scroll-tick 2.2s var(--ease-in-out-quart) infinite;
        }


/* $GOLF-PAGE
--------------------------------------------------------*/
.twin-golf > section { position: relative; }

/* Offset anchor targets so the fixed header never covers a section heading
   (used by the header page-nav + direct #hash visits). */
.twin-golf > section,
.twin-celebrate > section,
.twin-host > section,
.twin-about > section {
    scroll-margin-top: var(--twin-hdr-h);
}

/* --- 01 About ------------------------------------------------ */
.twin-golf-about {
    background: var(--c-qui);
    padding-block: var(--s-xl);
}
    .twin-golf-about__inner {
        width: var(--w-lg);
        margin-inline: auto;
    }
    .twin-golf-about__head { max-width: 64rem; }
    .twin-golf-about__title { margin-top: 2.4rem; }
    .twin-golf-about__body {
        margin-top: 4.8rem;
        max-width: 104rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3.2rem 6.4rem;
    }
    .twin-golf-stats {
        list-style: none;
        margin: 6.4rem 0 0;
        padding: 4.8rem 0 0;
        border-top: .1rem solid var(--c-line);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 3.2rem;
    }
        .twin-golf-stats__num {
            display: block;
            font-family: var(--font-display);
            font-weight: 300;
            font-size: clamp(4rem, 6vw, 6.4rem);
            line-height: 1;
            color: var(--c-pri);
        }
        .twin-golf-stats__unit { font-size: .4em; margin-left: .2rem; }
        .twin-golf-stats__label {
            display: block;
            margin-top: 1.6rem;
            font-size: 1.3rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: color-mix(in srgb, var(--c-fg) 60%, transparent);
        }

/* --- 02 Ratings & rules -------------------------------------- */
.twin-golf-ratings {
    background: var(--c-qua);
    padding-block: var(--s-xl);
}
    .twin-golf-ratings__inner {
        width: var(--w-lg);
        margin-inline: auto;
    }
    .twin-golf-ratings__title { margin-top: 2.4rem; }
    .twin-golf-ratings__grid {
        margin-top: 4.8rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(3.2rem, 5vw, 6.4rem);
        align-items: start;
    }
    .twin-golf-tees {
        list-style: none;
        margin: 0;
        padding: 0;
        background: var(--c-qui);
        border-radius: 2.4rem;
        overflow: hidden;
    }
        .twin-golf-tees__row {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr;
            align-items: center;
            gap: 1.6rem;
            padding: 2rem 3.2rem;
            border-top: .1rem solid var(--c-line-soft);
        }
        .twin-golf-tees__row:first-child { border-top: 0; }
        .twin-golf-tees__row--head {
            padding-top: 2.4rem;
            padding-bottom: 1.2rem;
            font-size: 1.1rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: color-mix(in srgb, var(--c-fg) 55%, transparent);
        }
        .twin-golf-tees__tee {
            display: inline-flex;
            align-items: center;
            gap: 1.2rem;
            font-family: var(--font-display);
            font-size: 2rem;
            color: var(--c-pri);
        }
        .twin-golf-tees__row--head .twin-golf-tees__tee {
            font-family: var(--font-body);
            font-size: 1.1rem;
            color: inherit;
        }
        .twin-golf-tees__dot {
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 50%;
            border: .1rem solid color-mix(in srgb, var(--c-fg) 25%, transparent);
        }
        .twin-golf-tees__dot--blue  { background: #3a5b78; }
        .twin-golf-tees__dot--white { background: #ffffff; }
        .twin-golf-tees__dot--gold  { background: var(--c-sec); }
        .twin-golf-tees__dot--red   { background: #9d3b2f; }
        .twin-golf-tees__stat {
            text-align: right;
            font-size: 1.8rem;
            font-variant-numeric: tabular-nums;
            color: var(--c-pri);
        }
        .twin-golf-tees__row--head .twin-golf-tees__stat {
            font-size: 1.1rem;
            color: inherit;
        }
        .twin-golf-rules__list {
            list-style: none;
            margin: 2.4rem 0 0;
            padding: 0;
        }
        .twin-golf-rules__item {
            position: relative;
            padding: 1.6rem 0 1.6rem 3.2rem;
            border-top: .1rem solid var(--c-line-soft);
            color: color-mix(in srgb, var(--c-fg) 78%, transparent);
        }
        .twin-golf-rules__item:first-child { border-top: 0; }
        .twin-golf-rules__item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 2.4rem;
            width: .8rem;
            height: .8rem;
            border-radius: 50%;
            background: var(--c-sec);
        }
        .twin-golf-rules__links {
            display: flex;
            flex-wrap: wrap;
            gap: 1.6rem 3.2rem;
            margin-top: 3.2rem;
        }
        .twin-golf-rules__link {
            padding-bottom: .4rem;
            font-size: 1.4rem;
            font-weight: 500;
            color: var(--c-pri);
            text-decoration: none;
            border-bottom: .1rem solid var(--c-line);
            transition: color .3s, border-color .3s;
        }
        .twin-golf-rules__link:hover { color: var(--c-sec); border-color: var(--c-sec); }

/* --- 03 Pricing (dark) -------------------------------------- */
.twin-golf-pricing {
    background: var(--c-pri);
    color-scheme: dark;
    color: var(--c-l);
    padding-block: var(--s-xl);
    text-align: center;
}
    .twin-golf-pricing__inner {
        width: var(--w-md);
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .twin-golf-pricing__title { margin-top: 2.4rem; max-width: 20ch; }
    .twin-golf-pricing__text {
        margin-top: 2.4rem;
        max-width: 60ch;
        font-size: clamp(1.6rem, 1.4vw, 1.8rem);
        line-height: 1.7;
        color: color-mix(in srgb, var(--c-l) 78%, transparent);
    }
    .twin-golf-pricing__actions {
        margin-top: 4rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.6rem;
    }
    .twin-golf-pricing__call {
        margin: 0;
        font-size: 1.4rem;
        color: color-mix(in srgb, var(--c-l) 70%, transparent);
    }
    .twin-golf-pricing__call a { color: var(--c-sec); text-decoration: none; }
    .twin-golf-pricing__call a:hover { text-decoration: underline; }

/* --- 04 Annual passes --------------------------------------- */
.twin-golf-passes {
    background: var(--c-qui);
    padding-block: var(--s-xl);
}
    .twin-golf-passes__inner {
        width: var(--w-lg);
        margin-inline: auto;
    }
    .twin-golf-passes__head { max-width: 64rem; }
    .twin-golf-passes__title { margin-top: 2.4rem; }
    .twin-golf-passes__lede { margin-top: 2.4rem; }
    .twin-golf-passes__grid {
        list-style: none;
        margin: 6.4rem 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2.4rem;
    }
    .twin-golf-pass {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 4rem 3.2rem;
        background: var(--c-qua);
        border-radius: 2.4rem;
    }
    .twin-golf-pass--featured {
        background: var(--c-pri);
        color-scheme: dark;
        color: var(--c-l);
    }
        .twin-golf-pass__tag {
            position: absolute;
            top: -1.2rem;
            left: 3.2rem;
            padding: .6rem 1.6rem;
            background: var(--c-sec);
            color: var(--c-pri);
            border-radius: 9.6rem;
            font-size: 1.1rem;
            letter-spacing: .14em;
            text-transform: uppercase;
        }
        .twin-golf-pass__name {
            font-family: var(--font-display);
            font-size: 2.8rem;
            line-height: 1;
        }
        .twin-golf-pass__avail {
            margin-top: .8rem;
            font-size: 1.3rem;
            color: color-mix(in srgb, currentColor 58%, transparent);
        }
        .twin-golf-pass__price {
            margin-top: 3.2rem;
            font-family: var(--font-display);
            font-weight: 300;
            font-size: clamp(4rem, 4vw, 5.6rem);
            line-height: 1;
        }
        .twin-golf-pass__cur {
            font-size: .5em;
            vertical-align: super;
            margin-right: .2rem;
            color: var(--c-sec);
        }
        .twin-golf-pass__unit {
            margin-top: 1.2rem;
            font-size: 1.2rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: color-mix(in srgb, currentColor 58%, transparent);
        }
        .twin-golf-pass__alt {
            margin-top: auto;
            padding-top: 2.4rem;
            font-size: 1.4rem;
            color: color-mix(in srgb, currentColor 72%, transparent);
        }
    .twin-golf-passes__foot {
        margin-top: 6.4rem;
        padding-top: 6.4rem;
        border-top: .1rem solid var(--c-line);
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: clamp(3.2rem, 5vw, 6.4rem);
        align-items: center;
    }
        .twin-golf-perks {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 1.6rem;
        }
        .twin-golf-perks__item {
            display: flex;
            gap: 1.2rem;
            font-size: 1.5rem;
            color: color-mix(in srgb, var(--c-fg) 80%, transparent);
        }
        .twin-golf-perks__mark { color: var(--c-sec); font-weight: 600; }
        .twin-golf-passes__note {
            margin: 1.6rem 0 0;
            font-size: 1.4rem;
            color: color-mix(in srgb, var(--c-fg) 60%, transparent);
        }
        .twin-golf-passes__note a { color: var(--c-pri); }

/* --- 06 Corporate memberships (dark band) ------------------- */
.twin-golf-corp {
    background: var(--c-pri);
    color-scheme: dark;
    color: var(--c-l);
    padding-block: var(--s-xl);
}
    .twin-golf-corp__inner {
        width: var(--w-lg);
        margin-inline: auto;
    }
    .twin-golf-corp__head { max-width: 72rem; }
    .twin-golf-corp__title { margin: 2.4rem 0 0; }
    .twin-golf-corp__lede {
        margin: 2.4rem 0 0;
        color: color-mix(in srgb, var(--c-l) 80%, transparent);
    }
    .twin-golf-corp__actions {
        margin-top: 3.2rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.6rem 2.4rem;
    }
    .twin-golf-corp__call {
        margin: 0;
        font-size: 1.4rem;
        color: color-mix(in srgb, var(--c-l) 60%, transparent);
    }
    .twin-golf-corp__call a { color: var(--c-l); }
    .twin-golf-corp__grid {
        list-style: none;
        margin: clamp(6.4rem, 8vw, 8rem) 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2.4rem;
        align-items: start;
    }
    .twin-golf-corp-tier {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 4rem 3.2rem 3.2rem;
        background: color-mix(in srgb, var(--c-l) 6%, transparent);
        border: .1rem solid color-mix(in srgb, var(--c-l) 14%, transparent);
        border-radius: 2.4rem;
    }
    .twin-golf-corp-tier--featured {
        background: color-mix(in srgb, var(--c-sec) 10%, transparent);
        border-color: color-mix(in srgb, var(--c-sec) 42%, transparent);
    }
        .twin-golf-corp-tier__tag {
            position: absolute;
            top: -1.2rem;
            left: 3.2rem;
            padding: .6rem 1.6rem;
            background: var(--c-sec);
            color: var(--c-pri);
            border-radius: 9.6rem;
            font-size: 1.1rem;
            letter-spacing: .14em;
            text-transform: uppercase;
        }
        .twin-golf-corp-tier__name {
            margin: 0;
            font-family: var(--font-display);
            font-size: clamp(2.4rem, 2.8vw, 3.2rem);
            line-height: 1.1;
        }
        .twin-golf-corp-tier__for {
            margin: 1.2rem 0 0;
            font-size: 1.4rem;
            line-height: 1.45;
            color: color-mix(in srgb, var(--c-l) 72%, transparent);
        }
        .twin-golf-corp-tier__for em {
            font-style: normal;
            font-weight: 500;
            color: var(--c-sec);
        }
        .twin-golf-corp-tier__price {
            margin-top: 3.2rem;
            font-family: var(--font-display);
            font-weight: 300;
            font-size: clamp(4rem, 4vw, 5.6rem);
            line-height: 1;
        }
        .twin-golf-corp-tier__cur {
            font-size: .5em;
            vertical-align: super;
            margin-right: .2rem;
            color: var(--c-sec);
        }
        .twin-golf-corp-tier__term {
            margin-top: .8rem;
            font-size: 1.2rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: color-mix(in srgb, var(--c-l) 58%, transparent);
        }
        .twin-golf-corp-tier__chips {
            list-style: none;
            margin: 2.4rem 0 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .twin-golf-corp-tier__chip {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 1.3rem;
            line-height: 1.35;
            color: color-mix(in srgb, var(--c-l) 88%, transparent);
        }
        .twin-golf-corp-tier__chip i {
            flex: none;
            width: 2rem;
            text-align: center;
            color: var(--c-sec);
            font-size: 1.2rem;
        }
        .twin-golf-corp-tier__trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.6rem;
            width: 100%;
            margin-top: 2.4rem;
            padding: 1.6rem 0 0;
            background: none;
            border: 0;
            border-top: .1rem solid color-mix(in srgb, var(--c-l) 14%, transparent);
            cursor: pointer;
            text-align: left;
            color: var(--c-l);
            transition: color .3s var(--ease-out-quint);
        }
        .twin-golf-corp-tier__trigger:hover { color: var(--c-sec); }
        .twin-golf-corp-tier__trigger-text {
            font-size: 1.3rem;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .twin-golf-corp-tier__chev {
            flex: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.8rem;
            height: 2.8rem;
            border: .1rem solid color-mix(in srgb, var(--c-l) 24%, transparent);
            border-radius: 50%;
            font-size: 1.2rem;
            transition: transform .4s var(--ease-out-quint), border-color .3s, color .3s;
        }
        .twin-golf-corp-tier__trigger:hover .twin-golf-corp-tier__chev {
            border-color: var(--c-sec);
            color: var(--c-sec);
        }
        .twin-golf-corp-tier.is-open .twin-golf-corp-tier__chev { transform: rotate(135deg); }
        .twin-golf-corp-tier__panel {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .5s var(--ease-out-quint);
        }
        .twin-golf-corp-tier.is-open .twin-golf-corp-tier__panel { grid-template-rows: 1fr; }
        .twin-golf-corp-tier__panel-inner { overflow: hidden; }
        .twin-golf-corp-tier__includes {
            list-style: none;
            margin: 2rem 0 0;
            padding: 0;
            display: grid;
            gap: 1.2rem;
        }
        .twin-golf-corp-tier__include {
            display: flex;
            align-items: baseline;
            gap: 1.2rem;
            font-size: 1.4rem;
            line-height: 1.45;
            color: color-mix(in srgb, var(--c-l) 82%, transparent);
        }
        .twin-golf-corp-tier__inquire { margin-top: 2.4rem; }
        .twin-golf-corp-tier__include-icon {
            flex: none;
            width: 1.6rem;
            margin-top: .2rem;
            color: var(--c-sec);
            font-size: 1.1rem;
        }
    .twin-golf-corp__foot {
        margin-top: clamp(4.8rem, 6vw, 6.4rem);
        padding-top: 3.2rem;
        border-top: .1rem solid color-mix(in srgb, var(--c-l) 14%, transparent);
    }
    .twin-golf-corp__terms {
        margin: 0;
        max-width: var(--w-md);
        font-size: 1.2rem;
        line-height: 1.6;
        color: color-mix(in srgb, var(--c-l) 58%, transparent);
    }
    .twin-golf-corp__terms strong {
        font-weight: 500;
        color: color-mix(in srgb, var(--c-l) 78%, transparent);
    }
    .twin-golf-corp__xlink {
        margin: 2rem 0 0;
        font-size: 1.4rem;
        color: color-mix(in srgb, var(--c-l) 72%, transparent);
    }
    .twin-golf-corp__xlink a {
        color: var(--c-sec);
        text-decoration: none;
        transition: color .3s;
    }
    .twin-golf-corp__xlink a:hover { color: var(--c-l); }

/* --- 07 Practice range -------------------------------------- */
.twin-golf-range {
    background: var(--c-qua);
    padding-block: var(--s-xl);
}
    .twin-golf-range__inner {
        width: var(--w-lg);
        margin-inline: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(4rem, 6vw, 8rem);
    }
    .twin-golf-range__media {
        position: relative;
        aspect-ratio: 3/4;
        border-radius: 2.4rem;
        overflow: hidden;
        background: var(--c-pri);
        isolation: isolate;
    }
    .twin-golf-range__img { width: 100%; height: 100%; object-fit: cover; }
    .twin-golf-range__media .vim,
    .twin-golf-range__media .vim--bg { position: absolute; inset: 0; }
    .twin-golf-range__title { margin-top: 2.4rem; }
    .twin-golf-range__text { margin-top: 2.4rem; }
    .twin-golf-hours {
        list-style: none;
        margin: 3.2rem 0 0;
        padding: 0;
        border-top: .1rem solid var(--c-line);
    }
        .twin-golf-hours__row {
            display: flex;
            justify-content: space-between;
            gap: 2rem;
            padding: 1.6rem 0;
            border-bottom: .1rem solid var(--c-line-soft);
        }
        .twin-golf-hours__day { font-weight: 500; }
        .twin-golf-hours__time {
            font-variant-numeric: tabular-nums;
            color: color-mix(in srgb, var(--c-fg) 65%, transparent);
        }
    .twin-golf-range__fine {
        margin-top: 1.6rem;
        font-size: 1.3rem;
        color: color-mix(in srgb, var(--c-fg) 55%, transparent);
    }
    .twin-golf-range__actions { margin-top: 3.2rem; }

/* --- 06 More golf (link cards) ------------------------------ */
.twin-golf-more {
    background: var(--c-qui);
    padding-block: var(--s-xl);
}
    .twin-golf-more__inner {
        width: var(--w-lg);
        margin-inline: auto;
    }
    /* 3-up so the six cards break into two even rows. */
    .twin-golf-more__grid {
        list-style: none;
        margin: 4rem 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2.4rem;
    }
    .twin-golf-more__item { display: flex; }
    .twin-golf-more__link {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 3.2rem;
        background: var(--c-qua);
        border-radius: 2.4rem;
        color: var(--c-pri);
        text-decoration: none;
        transition: transform .4s var(--ease-out-quint), background .4s, color .4s;
    }
    .twin-golf-more__link:hover {
        transform: translateY(-.6rem);
        background: var(--c-pri);
        color: var(--c-l);
    }
        .twin-golf-more__icon {
            margin-bottom: 4.8rem;
            font-size: 2.4rem;
            color: var(--c-sec);
        }
        .twin-golf-more__name {
            font-family: var(--font-display);
            font-size: 2.4rem;
        }
        .twin-golf-more__desc {
            margin-top: .8rem;
            font-size: 1.4rem;
            color: color-mix(in srgb, currentColor 65%, transparent);
        }
        .twin-golf-more__arrow {
            margin-top: 2.4rem;
            font-size: 1.8rem;
            color: var(--c-sec);
            transition: transform .4s var(--ease-out-quint);
        }
        .twin-golf-more__link:hover .twin-golf-more__arrow { transform: translateX(.6rem); }

@media only screen and (max-width: 1024px) {
    .twin-phero { min-height: 72vh; }
    .twin-golf-about__body { grid-template-columns: 1fr; gap: 2.4rem; }
    .twin-golf-stats { grid-template-columns: repeat(2, 1fr); gap: 4.8rem 3.2rem; }
    .twin-golf-ratings__grid { grid-template-columns: 1fr; }
    .twin-golf-passes__grid { grid-template-columns: repeat(2, 1fr); }
    .twin-golf-passes__foot { grid-template-columns: 1fr; gap: 4rem; align-items: start; }
    .twin-golf-range__inner { grid-template-columns: 1fr; }
    .twin-golf-range__media { aspect-ratio: 4/3; order: -1; max-height: 60rem; margin: 0 auto; width: 100%; }
    .twin-golf-more__grid { grid-template-columns: repeat(2, 1fr); }
    .twin-golf-corp__grid { grid-template-columns: 1fr; }
    .twin-golf-corp__head { max-width: none; }
}
@media only screen and (max-width: 560px) {
    .twin-phero__scroll { display: none; }
    .twin-golf-tees__row { padding-left: 2rem; padding-right: 2rem; }
    .twin-golf-passes__grid { grid-template-columns: 1fr; }
    .twin-golf-more__grid { grid-template-columns: 1fr; }
}


/* ============================================================================
   CELEBRATE PAGE (page-celebrate.php)
   Reuses .twin-phero (hero), .twin-showcase (gallery) and .twin-locate (map).
   Section rhythm: dark hero ➜ qui ➜ qua ➜ dark gallery ➜ qui ➜ qua ➜ qui ➜
   dark band ➜ qua map.
   ========================================================================== */

/* --- 01 The setting ----------------------------------------- */
.twin-celebrate-intro {
    background: var(--c-qui);
    padding-block: var(--s-xl);
}
    .twin-celebrate-intro__inner {
        width: var(--w-lg);
        margin-inline: auto;
    }
    .twin-celebrate-intro__head { max-width: 64rem; }
    .twin-celebrate-intro__title { margin-top: 2.4rem; }
    .twin-celebrate-intro__body {
        margin-top: 4.8rem;
        max-width: 104rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3.2rem 6.4rem;
    }
    .twin-celebrate-stats {
        list-style: none;
        margin: 6.4rem 0 0;
        padding: 4.8rem 0 0;
        border-top: .1rem solid var(--c-line);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 3.2rem;
    }
        .twin-celebrate-stats__num {
            display: block;
            font-family: var(--font-display);
            font-weight: 300;
            font-size: clamp(4rem, 6vw, 6.4rem);
            line-height: 1;
            color: var(--c-pri);
        }
        .twin-celebrate-stats__unit { font-size: .4em; margin-left: .2rem; color: var(--c-sec); }
        .twin-celebrate-stats__label {
            display: block;
            margin-top: 1.6rem;
            font-size: 1.3rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: color-mix(in srgb, var(--c-fg) 60%, transparent);
        }

    /* Event-type chips — itemizes what each landing page covers
       (occasions on Celebrate, gatherings on Host). */
    .twin-celebrate-types {
        margin-top: 4.8rem;
        max-width: 104rem;
    }
        .twin-celebrate-types__label {
            display: block;
            font-size: 1.2rem;
            font-weight: 500;
            letter-spacing: .24em;
            text-transform: uppercase;
            color: var(--c-sec);
        }
        .twin-celebrate-types__list {
            list-style: none;
            margin: 1.6rem 0 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }
        .twin-celebrate-types__item {
            display: inline-flex;
            align-items: center;
            padding: 1rem 1.8rem;
            border: .1rem solid var(--c-line);
            border-radius: 10rem;
            background: var(--c-bg);
            font-size: 1.4rem;
            line-height: 1.2;
            color: color-mix(in srgb, var(--c-fg) 82%, transparent);
        }
        /* Chips backed by a published event-type post become links —
           Site.etypes promotes the click to a Fancybox fetch of the
           canonical /celebrate|host/{slug}/ single. */
        .twin-celebrate-types__item--link {
            gap: .8rem;
            color: var(--c-pri);
            text-decoration: none;
            transition: color .3s, border-color .3s, background .3s;
        }
        .twin-celebrate-types__item--link:hover {
            border-color: transparent;
            background: color-mix(in srgb, var(--c-sec) 14%, var(--c-bg));
            color: var(--c-pri);
        }
        .twin-celebrate-types__item-icon {
            font-size: 1rem;
            color: var(--c-sec);
            transition: transform .4s var(--ease-out-quint);
        }
        .twin-celebrate-types__item--link:hover .twin-celebrate-types__item-icon {
            transform: translate(.2rem, -.2rem);
        }
        /* While Site.etypes finishes fetching the gallery documents. */
        .twin-celebrate-types__item--link.is-loading {
            opacity: .55;
            cursor: progress;
        }
        .twin-celebrate-types__cross {
            margin: 2.4rem 0 0;
            font-size: 1.4rem;
            color: color-mix(in srgb, var(--c-fg) 65%, transparent);
        }
        .twin-celebrate-types__cross-link {
            display: inline-flex;
            align-items: baseline;
            gap: .6rem;
            margin-left: .4rem;
            font-weight: 500;
            color: var(--c-pri);
            text-decoration: none;
            border-bottom: .1rem solid color-mix(in srgb, var(--c-pri) 30%, transparent);
            transition: color .3s, border-color .3s;
        }
        .twin-celebrate-types__cross-link:hover {
            color: var(--c-sec);
            border-color: currentColor;
        }
        .twin-celebrate-types__cross-icon { font-size: 1.1rem; }

/* --- 02 Venues / rooms -------------------------------------- */
.twin-celebrate-venues {
    background: var(--c-qua);
    padding-block: var(--s-xl);
}
    .twin-celebrate-venues__inner {
        width: var(--w-lg);
        margin-inline: auto;
    }
    .twin-celebrate-venues__head { max-width: 64rem; }
    .twin-celebrate-venues__title { margin-top: 2.4rem; }
    .twin-celebrate-rooms {
        list-style: none;
        margin: 6.4rem 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3.2rem;
    }
    .twin-room {
        display: flex;
        flex-direction: column;
        background: var(--c-qui);
        border-radius: 2.4rem;
        overflow: hidden;
    }
        .twin-room__feature {
            position: relative;
            display: block;
            aspect-ratio: 4/3;
            overflow: hidden;
        }
        .twin-room__feature-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .8s var(--ease-out-quint);
        }
        .twin-room:hover .twin-room__feature-img { transform: scale(1.05); }
        .twin-room__chip {
            position: absolute;
            top: 1.6rem;
            left: 1.6rem;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            /* Opaque equivalent of the amenities/pillars icon tint
               (color-mix(--c-sec 14%) over a light bg) so it reads on a photo. */
            background: color-mix(in srgb, var(--c-sec) 14%, var(--c-qui));
            color: var(--c-sec);
            font-size: 1.6rem;
        }
        .twin-room__feature-count {
            position: absolute;
            bottom: 1.6rem;
            right: 1.6rem;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            padding: .6rem 1.2rem;
            border-radius: 9.6rem;
            background: color-mix(in srgb, var(--c-pri) 62%, transparent);
            backdrop-filter: blur(8px);
            color: var(--c-l);
            font-size: 1.2rem;
            letter-spacing: .04em;
        }
        .twin-room__feature-count-icon { font-size: 1.1rem; color: var(--c-sec); }
        .twin-room__feature-veil {
            position: absolute;
            inset: 0;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: color-mix(in srgb, var(--c-pri) 28%, transparent);
            opacity: 0;
            transition: opacity .4s var(--ease-out-quint);
        }
        .twin-room__feature:hover .twin-room__feature-veil,
        .twin-room__feature:focus-visible .twin-room__feature-veil { opacity: 1; }
        .twin-room__feature-expand {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 5.6rem;
            height: 5.6rem;
            border-radius: 50%;
            background: var(--c-l);
            color: var(--c-pri);
            font-size: 1.8rem;
            transform: scale(.88);
            transition: transform .4s var(--ease-out-quint);
        }
        .twin-room__feature:hover .twin-room__feature-expand { transform: scale(1); }
        .twin-room__body {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            padding: 3.2rem 3.2rem 0;
        }
        .twin-room__head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 1.2rem 2.4rem;
            flex-wrap: wrap;
        }
        .twin-room__name {
            margin: 0;
            font-family: var(--font-display);
            font-size: 2.6rem;
            line-height: 1.05;
            color: var(--c-pri);
        }
        .twin-room__meta {
            display: inline-flex;
            align-items: baseline;
            gap: 1.6rem;
            white-space: nowrap;
        }
        .twin-room__cap {
            display: inline-flex;
            align-items: center;
            gap: .8rem;
            font-size: 1.2rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--c-sec);
        }
        .twin-room__cap-icon { font-size: 1.1rem; }
        .twin-room__size {
            font-size: 1.3rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: color-mix(in srgb, var(--c-fg) 55%, transparent);
        }
        .twin-room__desc {
            margin: 2.4rem 0 3.2rem;
            padding-top: 2.4rem;
            border-top: .1rem solid var(--c-line-soft);
            font-size: 1.5rem;
            line-height: 1.65;
            color: color-mix(in srgb, var(--c-fg) 80%, transparent);
        }
        /* Bottom "tabs" — flush to the card edges */
        .twin-room__actions {
            margin: auto -3.2rem 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-top: .1rem solid var(--c-line-soft);
        }
        .twin-room__action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .8rem;
            padding: 1.8rem 1.2rem;
            background: none;
            border: 0;
            font-family: inherit;
            font-size: 1.3rem;
            letter-spacing: .04em;
            color: var(--c-pri);
            text-decoration: none;
            cursor: pointer;
            transition: color .3s, background-color .3s;
        }
        .twin-room__action + .twin-room__action {
            border-left: .1rem solid var(--c-line-soft);
        }
        .twin-room__action:hover {
            background: color-mix(in srgb, var(--c-pri) 8%, transparent);
        }
        .twin-room__action-icon { font-size: 1.2rem; color: var(--c-sec); }
        .twin-room__sources { display: none; }
    .twin-celebrate-venues__note {
        margin: 3.2rem 0 0;
        display: flex;
        align-items: center;
        gap: 2.4rem;
        padding: 3.2rem;
        background: var(--c-qui);
        border-radius: 2.4rem;
    }
    .twin-celebrate-venues__note-icon {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 4.8rem;
        height: 4.8rem;
        border-radius: 50%;
        background: color-mix(in srgb, var(--c-sec) 14%, transparent);
        color: var(--c-sec);
        font-size: 1.8rem;
    }
    .twin-celebrate-venues__note-body { flex: 1 1 auto; }
    .twin-celebrate-venues__note-title {
        margin: 0;
        font-family: var(--font-display);
        font-size: 2.2rem;
        line-height: 1.1;
        color: var(--c-pri);
    }
    .twin-celebrate-venues__note-text {
        margin: .8rem 0 0;
        max-width: 64ch;
        font-size: 1.5rem;
        line-height: 1.65;
        color: color-mix(in srgb, var(--c-fg) 80%, transparent);
    }
    .twin-celebrate-venues__note-cta { flex: none; }

/* --- 04 Weddings (3/4 video + package) ---------------------- */
.twin-celebrate-weddings {
    background: var(--c-qui);
    padding-block: var(--s-xl);
}
    .twin-celebrate-weddings__inner {
        width: var(--w-lg);
        margin-inline: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(4rem, 6vw, 8rem);
    }
    .twin-celebrate-weddings__media {
        position: relative;
        aspect-ratio: 3/4;
        border-radius: 2.4rem;
        overflow: hidden;
        background: var(--c-pri);
        isolation: isolate;
    }
    .twin-celebrate-weddings__media .vim,
    .twin-celebrate-weddings__media .vim--bg { position: absolute; inset: 0; }
    .twin-celebrate-weddings__title { margin-top: 2.4rem; }
    .twin-celebrate-weddings__text { margin-top: 2.4rem; }
    .twin-celebrate-list {
        list-style: none;
        margin: 3.2rem 0 0;
        padding: 0;
        display: grid;
        gap: 1.6rem;
    }
        .twin-celebrate-list__item {
            display: flex;
            align-items: flex-start;
            gap: 1.2rem;
            font-size: 1.5rem;
            line-height: 1.5;
            color: color-mix(in srgb, var(--c-fg) 82%, transparent);
        }
        .twin-celebrate-list__mark {
            flex: none;
            margin-top: .3rem;
            font-size: 1.2rem;
            color: var(--c-sec);
        }
    .twin-celebrate-weddings__actions {
        margin-top: 4rem;
        display: flex;
        flex-wrap: wrap;
        gap: 1.6rem;
    }
    .twin-celebrate-ceremonies {
        grid-column: 1 / -1;
        margin-top: clamp(2.4rem, 4vw, 4.8rem);
        padding-top: clamp(2.4rem, 4vw, 4.8rem);
        border-top: .1rem solid var(--c-line);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(2.4rem, 4vw, 6.4rem);
    }
        .twin-ceremony {
            display: flex;
            gap: 2rem;
            align-items: flex-start;
        }
        .twin-ceremony__icon {
            flex: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 5.6rem;
            height: 5.6rem;
            border-radius: 50%;
            border: .1rem solid color-mix(in srgb, var(--c-sec) 45%, transparent);
            color: var(--c-sec);
            font-size: 2rem;
        }
        .twin-ceremony__name {
            margin: 0;
            font-family: var(--font-display);
            font-size: 2.4rem;
            color: var(--c-pri);
        }
        .twin-ceremony__desc {
            margin: 1.2rem 0 0;
            font-size: 1.5rem;
            line-height: 1.65;
            color: color-mix(in srgb, var(--c-fg) 75%, transparent);
        }

/* --- 04 The Service — reuses the weddings layout above, plus an
   offset photo over the video (echoing the homepage Our Story pair)
   and the amenity grid as a full-width row below the cards. ------ */
.twin-celebrate-service__visual {
    position: relative;
}
    /* The photo breaks out of the media column's bottom-right corner
       into the grid gap; sized so it never collides with the cards row. */
    .twin-celebrate-service__photo {
        position: absolute;
        right: -4rem;
        bottom: -4.8rem;
        width: min(24rem, 42%);
        aspect-ratio: 1/1;
        object-fit: cover;
        border-radius: 1.6rem;
        box-shadow: 0 2.4rem 4.8rem -1.6rem color-mix(in srgb, var(--c-pri) 45%, transparent);
    }
/* --- 05 Social + 06 Corporate (shared amenities) ------------ */
.twin-celebrate-social {
    background: var(--c-qui);
    padding-block: var(--s-xl);
}
.twin-celebrate-corporate {
    background: var(--c-qua);
    padding-block: var(--s-xl);
}
    .twin-celebrate-social__inner,
    .twin-celebrate-corporate__inner {
        width: var(--w-lg);
        margin-inline: auto;
    }
    .twin-celebrate-social__head,
    .twin-celebrate-corporate__head { max-width: 70rem; }
    .twin-celebrate-social__title,
    .twin-celebrate-corporate__title { margin-top: 2.4rem; }
    .twin-celebrate-social__text,
    .twin-celebrate-corporate__text { margin-top: 2.4rem; }
    .twin-celebrate-amenities {
        list-style: none;
        margin: 4.8rem 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        border: .1rem solid var(--c-line);
        border-radius: 2.4rem;
        overflow: hidden;
    }
        .twin-celebrate-amenities__item {
            display: flex;
            align-items: center;
            gap: 1.6rem;
            padding: 2.4rem 2.8rem;
            border-right: .1rem solid var(--c-line);
            border-bottom: .1rem solid var(--c-line);
            font-size: 1.5rem;
            color: color-mix(in srgb, var(--c-fg) 82%, transparent);
        }
        .twin-celebrate-amenities__item:nth-child(3n) { border-right: 0; }
        .twin-celebrate-amenities__item:nth-child(n+4) { border-bottom: 0; }
        .twin-celebrate-amenities__icon {
            flex: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            background: color-mix(in srgb, var(--c-sec) 14%, transparent);
            color: var(--c-sec);
            font-size: 1.6rem;
        }
    .twin-celebrate-social__actions,
    .twin-celebrate-corporate__actions {
        margin-top: 4rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.6rem 2rem;
    }

/* --- 07 Preferred vendors (accordion) ----------------------- */
.twin-celebrate-vendors {
    background: var(--c-qui);
    padding-block: var(--s-xl);
}
    .twin-celebrate-vendors__inner {
        width: var(--w-lg);
        margin-inline: auto;
    }
    .twin-celebrate-vendors__head { max-width: 64rem; }
    .twin-celebrate-vendors__title { margin-top: 2.4rem; }
    .twin-celebrate-vendors__text { margin-top: 2.4rem; }
    .twin-vendors {
        margin-top: clamp(4rem, 6vw, 6.4rem);
        border-top: .1rem solid var(--c-line);
    }
    .twin-vendors__item { border-bottom: .1rem solid var(--c-line); }
        .twin-vendors__head-row { margin: 0; }
        .twin-vendors__trigger {
            display: flex;
            align-items: center;
            gap: 2.4rem;
            width: 100%;
            padding: 2.8rem 0;
            background: none;
            border: 0;
            cursor: pointer;
            text-align: left;
            color: var(--c-pri);
            transition: color .3s;
        }
        .twin-vendors__trigger:hover { color: var(--c-sec); }
        .twin-vendors__cat {
            flex: 1 1 auto;
            font-family: var(--font-display);
            font-size: clamp(2rem, 2.6vw, 2.8rem);
            line-height: 1.1;
        }
        .twin-vendors__count {
            flex: none;
            font-size: 1.3rem;
            font-variant-numeric: tabular-nums;
            letter-spacing: .12em;
            color: color-mix(in srgb, var(--c-fg) 45%, transparent);
        }
        .twin-vendors__chev {
            flex: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            border: .1rem solid var(--c-line);
            font-size: 1.4rem;
            color: var(--c-sec);
            transition: transform .4s var(--ease-out-quint), background .3s, border-color .3s;
        }
        .twin-vendors__trigger:hover .twin-vendors__chev {
            background: color-mix(in srgb, var(--c-sec) 14%, transparent);
            border-color: transparent;
        }
        .twin-vendors__trigger[aria-expanded="true"] .twin-vendors__chev { transform: rotate(135deg); }
        .twin-vendors__panel {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .5s var(--ease-out-quint);
        }
        .twin-vendors__item.is-open .twin-vendors__panel { grid-template-rows: 1fr; }
        .twin-vendors__panel-inner {
            overflow: hidden;
            min-height: 0;
        }
        .twin-vendors__grid {
            list-style: none;
            margin: 0;
            padding: 0 0 3.2rem;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2.4rem;
        }
        .twin-vendor {
            display: flex;
            flex-direction: column;
            padding: 2.4rem;
            background: var(--c-qua);
            border-radius: 1.6rem;
        }
        .twin-vendor__name {
            font-weight: 600;
            font-size: 1.6rem;
            color: var(--c-pri);
        }
        .twin-vendor__person {
            margin-top: .4rem;
            font-size: 1.3rem;
            color: color-mix(in srgb, var(--c-fg) 60%, transparent);
        }
        .twin-vendor__links {
            margin-top: 1.6rem;
            display: flex;
            flex-direction: column;
            gap: .8rem;
        }
        .twin-vendor__link {
            display: inline-flex;
            align-items: center;
            gap: .8rem;
            font-size: 1.3rem;
            color: color-mix(in srgb, var(--c-fg) 78%, transparent);
            text-decoration: none;
            word-break: break-word;
            transition: color .3s;
        }
        .twin-vendor__link:hover { color: var(--c-sec); }
        .twin-vendor__link-icon {
            flex: none;
            width: 1.6rem;
            font-size: 1.2rem;
            color: var(--c-sec);
            text-align: center;
        }

/* --- 08 Love letters (testimonials + Fancybox) -------------- */
.twin-celebrate-letters {
    background: var(--c-qua);
    padding-block: var(--s-xl);
    overflow: clip;
}
    .twin-celebrate-letters__inner {
        width: var(--w-lg);
        margin-inline: auto;
    }
    .twin-celebrate-letters__head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 3.2rem;
    }
    .twin-celebrate-letters__head-copy { max-width: 64rem; }
    .twin-celebrate-letters__title { margin-top: 2.4rem; }

    /* Carousel controls — mirror the showcase arrows on a light background. */
    .twin-letters__controls {
        display: flex;
        gap: 1.2rem;
        flex: none;
        padding-bottom: .8rem;
    }
    .twin-letters__btn {
        width: 5.6rem;
        height: 5.6rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: .1rem solid color-mix(in srgb, var(--c-pri) 24%, transparent);
        border-radius: 50%;
        color: var(--c-pri);
        font-size: 1.8rem;
        cursor: pointer;
        transition: background-color .4s var(--ease-out-quint), border-color .4s var(--ease-out-quint), color .4s var(--ease-out-quint), opacity .4s;
    }
    .twin-letters__btn:hover:not(:disabled) {
        background: var(--c-sec);
        border-color: var(--c-sec);
        color: var(--c-pri);
    }
    .twin-letters__btn:disabled {
        opacity: .3;
        cursor: default;
    }
    /* > * because the FA kit swaps the <i> for an <svg> at runtime. */
    .twin-letters__btn > * { transition: transform .4s var(--ease-out-quint); }
    .twin-letters__btn--prev:hover:not(:disabled) > * { transform: translateX(-.4rem); }
    .twin-letters__btn--next:hover:not(:disabled) > * { transform: translateX(.4rem); }

    /* Overflow visible so hover shadows aren't clipped; the section clips
       instead, which kills the horizontal scrollbar without a peek gutter. */
    .twin-letters__swiper {
        margin-top: clamp(3.2rem, 5vw, 5.6rem);
        overflow: visible;
    }
    .twin-letters {
        list-style: none;
        margin: 0;
        padding: 0;
        align-items: stretch;
    }
    .twin-letter {
        position: relative;
        height: auto;
        display: flex;
        flex-direction: column;
        background: var(--c-qui);
        border-radius: 2.4rem;
        overflow: hidden;
        transition: transform .5s var(--ease-out-quint), box-shadow .5s var(--ease-out-quint);
    }
        .twin-letter:hover {
            transform: translateY(-.8rem);
            box-shadow: 0 4rem 8rem -4rem color-mix(in srgb, var(--c-pri) 35%, transparent);
        }
        .twin-letter__photo {
            aspect-ratio: 16/10;
            overflow: hidden;
        }
        .twin-letter__photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .8s var(--ease-out-quint);
        }
        .twin-letter:hover .twin-letter__photo img { transform: scale(1.05); }
        .twin-letter__body {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            padding: 3.2rem;
        }
        .twin-letter__quote {
            font-size: 2.4rem;
            color: var(--c-sec);
            line-height: 1;
        }
        .twin-letter__excerpt {
            margin: 1.6rem 0 0;
            font-size: 1.6rem;
            line-height: 1.6;
            color: color-mix(in srgb, var(--c-fg) 82%, transparent);
        }
        .twin-letter__foot {
            margin-top: auto;
            padding-top: 2.4rem;
        }
        .twin-letter__meta {
            margin-top: .4rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.6rem;
        }
        .twin-letter__names {
            display: block;
            font-family: var(--font-display);
            font-size: 1.8rem;
            color: var(--c-pri);
        }
        .twin-letter__date {
            font-size: 1.3rem;
            letter-spacing: .08em;
            color: color-mix(in srgb, var(--c-fg) 55%, transparent);
        }
        .twin-letter__more {
            flex: none;
            display: inline-flex;
            align-items: center;
            gap: .8rem;
            font-size: 1.3rem;
            letter-spacing: .04em;
            color: var(--c-pri);
            text-decoration: none;
            white-space: nowrap;
            transition: color .3s;
        }
        .twin-letter__more:hover { color: var(--c-sec); }
        .twin-letter__more-icon { font-size: 1.1rem; transition: transform .4s var(--ease-out-quint); }
        .twin-letter__more:hover .twin-letter__more-icon { transform: translateX(.4rem); }
        /* Stretch the trigger over the whole card so the entire card is clickable. */
        .twin-letter__more::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
        }
        .twin-letter:hover .twin-letter__more { color: var(--c-sec); }
        .twin-letter:hover .twin-letter__more-icon { transform: translateX(.4rem); }

/* Fancybox inline content — full letter */
.twin-letter-modal {
    width: var(--w-md);
    background: var(--c-l);
    color: var(--c-d);
    border-radius: 2.4rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: 2fr 3fr;
}
    .twin-letter-modal__photo {
        padding: clamp(2.4rem, 3vw, 3.2rem);
        padding-right: 0;
        display: flex;
        align-items: flex-start;
    }
    /* Hold the 4:5 crop no matter how long the letter runs — long letters
       scroll in the content column while the photo keeps its shape. */
    .twin-letter-modal__photo img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        border-radius: 1.6rem;
        position: sticky;
        top: clamp(2.4rem, 3vw, 3.2rem);
    }
    .twin-letter-modal__content { padding: clamp(3.2rem, 4vw, 5.6rem); }
    .twin-letter-modal__quote {
        font-size: 3.2rem;
        color: var(--c-sec);
        line-height: 1;
    }
    .twin-letter-modal__text {
        margin-top: 2rem;
        max-height: 50vh;
        overflow-y: auto;
    }
    .twin-letter-modal__text p {
        margin: 0 0 1.6rem;
        font-size: 1.6rem;
        line-height: 1.75;
        color: color-mix(in srgb, var(--c-d) 86%, transparent);
    }
    .twin-letter-modal__text p:last-child { margin-bottom: 0; }
    .twin-letter-modal__by {
        margin-top: 2.4rem;
        padding-top: 2.4rem;
        border-top: .1rem solid color-mix(in srgb, var(--c-d) 14%, transparent);
    }
    .twin-letter-modal__names {
        font-family: var(--font-display);
        font-size: 2.2rem;
        color: var(--c-pri);
    }
    .twin-letter-modal__date {
        margin-left: 1.2rem;
        font-size: 1.3rem;
        letter-spacing: .08em;
        color: color-mix(in srgb, var(--c-d) 55%, transparent);
    }

/* --- 09 Golf outings (dark band) ---------------------------- */
.twin-celebrate-outings {
    background: var(--c-pri);
    color-scheme: dark;
    color: var(--c-l);
    padding-block: var(--s-xl);
    text-align: center;
}
    .twin-celebrate-outings__inner {
        width: var(--w-md);
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .twin-celebrate-outings__title { margin-top: 2.4rem; max-width: 20ch; }
    .twin-celebrate-outings__text {
        margin-top: 2.4rem;
        max-width: 56ch;
        font-size: clamp(1.6rem, 1.4vw, 1.8rem);
        line-height: 1.7;
        color: color-mix(in srgb, var(--c-l) 78%, transparent);
    }
    .twin-celebrate-outings__list {
        list-style: none;
        margin: 4rem 0 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.2rem 1.6rem;
        max-width: 72rem;
    }
        .twin-celebrate-outings__item {
            display: inline-flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 2rem;
            border: .1rem solid color-mix(in srgb, var(--c-l) 24%, transparent);
            border-radius: 9.6rem;
            font-size: 1.4rem;
            color: color-mix(in srgb, var(--c-l) 86%, transparent);
        }
        .twin-celebrate-outings__icon {
            font-size: 1.3rem;
            color: var(--c-sec);
        }
    .twin-celebrate-outings__actions {
        margin-top: 4.8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.6rem;
    }
    .twin-celebrate-outings__call {
        margin: 0;
        font-size: 1.4rem;
        color: color-mix(in srgb, var(--c-l) 70%, transparent);
    }
    .twin-celebrate-outings__call a { color: var(--c-sec); text-decoration: none; }
    .twin-celebrate-outings__call a:hover { text-decoration: underline; }

@media only screen and (max-width: 1024px) {
    .twin-celebrate-intro__body { grid-template-columns: 1fr; gap: 2.4rem; }
    .twin-celebrate-stats { grid-template-columns: repeat(2, 1fr); gap: 4.8rem 3.2rem; }
    .twin-celebrate-rooms { grid-template-columns: 1fr; }
    .twin-celebrate-venues__note { flex-wrap: wrap; }
    .twin-celebrate-weddings__inner { grid-template-columns: 1fr; }
    .twin-celebrate-weddings__media { aspect-ratio: 4/3; order: -1; max-height: 60rem; margin: 0 auto; width: 100%; }
    /* Stacked: the visual wrapper takes the media's grid-child role. */
    .twin-celebrate-service__visual { order: -1; max-width: 72rem; margin: 0 auto; width: 100%; }
    .twin-celebrate-service__photo { right: 1.6rem; bottom: -3.2rem; width: min(20rem, 38%); }
    .twin-celebrate-ceremonies { grid-template-columns: 1fr; }
    .twin-vendors__grid { grid-template-columns: repeat(2, 1fr); }
    .twin-letter-modal { grid-template-columns: 1fr; }
    .twin-letter-modal__photo { padding: 2.4rem 2.4rem 0; }
    .twin-letter-modal__photo img {
        aspect-ratio: 16/9;
        position: static;
    }
}
@media only screen and (max-width: 560px) {
    .twin-celebrate-amenities { grid-template-columns: 1fr; }
    .twin-celebrate-amenities__item {
        border-right: 0;
        border-bottom: .1rem solid var(--c-line);
    }
    .twin-celebrate-amenities__item:nth-child(3n) { border-right: 0; }
    .twin-celebrate-amenities__item:nth-child(n+4) { border-bottom: .1rem solid var(--c-line); }
    .twin-celebrate-amenities__item:last-child { border-bottom: 0; }
    .twin-vendors__grid { grid-template-columns: 1fr; }
    .twin-vendors__trigger { gap: 1.6rem; }
    .twin-celebrate-letters__head { flex-wrap: wrap; }
}


/* ============================================================================
   ABOUT PAGE (page-about.php)
   Reuses .twin-phero (hero), .twin-showcase (gallery) and .twin-locate (map).
   Section rhythm: dark hero ➜ qui ➜ qua ➜ dark gallery ➜ qui ➜ dark band ➜ qua map.
   ========================================================================== */

/* --- 01 Our story ------------------------------------------- */
.twin-about-story {
    background: var(--c-qui);
    padding-block: var(--s-xl);
}
    .twin-about-story__inner {
        width: var(--w-lg);
        margin-inline: auto;
    }
    .twin-about-story__head { max-width: 64rem; }
    .twin-about-story__title { margin-top: 2.4rem; }
    .twin-about-story__body {
        margin-top: 4.8rem;
        max-width: 104rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3.2rem 6.4rem;
    }
    .twin-about-pillars {
        list-style: none;
        margin: 6.4rem 0 0;
        padding: 4.8rem 0 0;
        border-top: .1rem solid var(--c-line);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 3.2rem;
    }
        .twin-about-pillar { display: flex; align-items: center; gap: 1.6rem; }
        .twin-about-pillar__icon {
            flex: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 4.8rem;
            height: 4.8rem;
            border-radius: 50%;
            background: color-mix(in srgb, var(--c-sec) 14%, transparent);
            color: var(--c-sec);
            font-size: 1.8rem;
        }
        .twin-about-pillar__label {
            font-size: 1.5rem;
            line-height: 1.3;
            color: color-mix(in srgb, var(--c-fg) 82%, transparent);
        }

/* --- 02 Ownership ------------------------------------------- */
.twin-about-owner {
    background: var(--c-qua);
    padding-block: var(--s-xl);
}
    .twin-about-owner__inner {
        width: var(--w-lg);
        margin-inline: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(4rem, 6vw, 8rem);
    }
    .twin-about-owner__media {
        aspect-ratio: 4/5;
        border-radius: 2.4rem;
        overflow: hidden;
    }
    .twin-about-owner__img { width: 100%; height: 100%; object-fit: cover; }
    .twin-about-owner__title { margin-top: 2.4rem; }
    .twin-about-owner__text { margin-top: 2.4rem; }
    .twin-about-owner__actions { margin-top: 4rem; }

/* --- 04 Meet the team --------------------------------------- */
.twin-about-team {
    background: var(--c-qui);
    padding-block: var(--s-xl);
}
    .twin-about-team__inner {
        width: var(--w-lg);
        margin-inline: auto;
    }
    .twin-about-team__head { max-width: 64rem; }
    .twin-about-team__title { margin-top: 2.4rem; }
    .twin-team {
        list-style: none;
        margin: clamp(4rem, 6vw, 6.4rem) 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2.4rem;
    }
    .twin-team__item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 4rem 3.2rem;
        background: var(--c-qua);
        border-radius: 2.4rem;
    }
        .twin-team__avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 7.2rem;
            height: 7.2rem;
            border-radius: 50%;
            background: var(--c-pri);
            color: var(--c-l);
            font-family: var(--font-display);
            font-size: 2.4rem;
            letter-spacing: .04em;
        }
        .twin-team__name {
            margin: 2.4rem 0 0;
            font-family: var(--font-display);
            font-size: 2.4rem;
            color: var(--c-pri);
        }
        .twin-team__role {
            margin-top: .4rem;
            font-size: 1.3rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--c-sec);
        }
        .twin-team__links {
            margin-top: 2.4rem;
            display: flex;
            flex-direction: column;
            gap: .8rem;
        }
        .twin-team__link {
            display: inline-flex;
            align-items: center;
            gap: .8rem;
            font-size: 1.4rem;
            color: color-mix(in srgb, var(--c-fg) 78%, transparent);
            text-decoration: none;
            transition: color .3s;
        }
        .twin-team__link:hover { color: var(--c-sec); }
        .twin-team__link-icon { flex: none; width: 1.6rem; font-size: 1.2rem; color: var(--c-sec); text-align: center; }

/* --- Turf Field LP — rates + inquire ------------------------- */
.twin-phero--turf .twin-phero__media > .twin-phero__img {
    position: absolute;
    inset: 0;
}

.twin-turf-rates {
    background: var(--c-qua);
    color: var(--c-fg);
    padding-block: var(--s-xl);
}
    .twin-turf-rates__inner {
        width: var(--w-lg);
        margin-inline: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(4rem, 6vw, 8rem);
        align-items: center;
    }
    .twin-turf-rates__title { margin-top: 2.4rem; }
    .twin-turf-rates__text {
        margin-top: 2.4rem;
        max-width: 50ch;
        font-size: clamp(1.6rem, 1.4vw, 1.8rem);
        line-height: 1.7;
        color: color-mix(in srgb, var(--c-fg) 72%, transparent);
    }
    .twin-turf-rates__actions {
        margin-top: 4rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.6rem 2.4rem;
    }
    .twin-turf-rates__call {
        margin: 0;
        font-size: 1.4rem;
        color: color-mix(in srgb, var(--c-fg) 60%, transparent);
    }
    .twin-turf-rates__call a { color: var(--c-pri); text-decoration: none; }
    .twin-turf-rates__call a:hover { color: var(--c-sec); text-decoration: underline; }
    .twin-turf-rates__card {
        padding: clamp(3.2rem, 4vw, 4.8rem);
        background: var(--c-qui);
        border-radius: 2.4rem;
    }
        .twin-turf-rates__card-eyebrow {
            display: block;
            font-size: 1.2rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--c-sec);
        }
        .twin-turf-rates__list {
            list-style: none;
            margin: 2.4rem 0 0;
            padding: 0;
        }
        .twin-turf-rates__rate {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 2rem;
            padding: 2rem 0;
            border-top: .1rem solid color-mix(in srgb, var(--c-pri) 12%, transparent);
        }
        .twin-turf-rates__rate:first-child { border-top: 0; }
        .twin-turf-rates__rate-name {
            font-size: 1.6rem;
            color: var(--c-pri);
        }
        .twin-turf-rates__rate-meta {
            display: block;
            margin-top: .2rem;
            font-size: 1.2rem;
            letter-spacing: .04em;
            color: color-mix(in srgb, var(--c-fg) 55%, transparent);
        }
        .twin-turf-rates__rate-price {
            flex: none;
            font-family: var(--font-display);
            font-weight: 300;
            font-size: 2.8rem;
            line-height: 1;
            color: var(--c-pri);
        }
        .twin-turf-rates__rate-unit {
            font-size: 1.3rem;
            letter-spacing: .04em;
            color: color-mix(in srgb, var(--c-fg) 55%, transparent);
        }
        .twin-turf-rates__fine {
            margin: 2.4rem 0 0;
            font-size: 1.3rem;
            color: color-mix(in srgb, var(--c-fg) 55%, transparent);
        }

.twin-turf-inquire {
    padding-block: var(--s-xl);
    background: var(--c-qui);
}
    .twin-turf-inquire__inner {
        width: var(--w-lg);
        margin-inline: auto;
        display: grid;
        grid-template-columns: minmax(0, 42rem) minmax(0, 1fr);
        gap: clamp(4rem, 6vw, 8rem);
        align-items: start;
    }
    .twin-turf-inquire__title { margin-top: 2.4rem; }
    .twin-turf-inquire__text {
        margin-top: 2.4rem;
        max-width: 42ch;
    }
    .twin-turf-inquire__text a {
        color: var(--c-pri);
        font-weight: 500;
        text-decoration: none;
        background-image: linear-gradient(
            color-mix(in srgb, var(--c-sec) 34%, transparent),
            color-mix(in srgb, var(--c-sec) 34%, transparent)
        );
        background-repeat: no-repeat;
        background-size: 100% .2rem;
        background-position: 0 100%;
        transition: background-size .35s var(--ease-out-quint), color .35s;
    }
    .twin-turf-inquire__text a:hover {
        color: var(--c-d);
        background-size: 100% 100%;
    }
    .twin-turf-inquire__form {
        padding: clamp(2.4rem, 3vw, 4rem);
        background: var(--c-bg);
        border-radius: 2.4rem;
    }
    .twin-turf-inquire__form .gform_wrapper.gravity-theme { margin: 0; }

@media only screen and (max-width: 1024px) {
    .twin-about-story__body { grid-template-columns: 1fr; gap: 2.4rem; }
    .twin-about-pillars { grid-template-columns: repeat(2, 1fr); gap: 3.2rem; }
    .twin-about-owner__inner { grid-template-columns: 1fr; }
    .twin-about-owner__media { aspect-ratio: 16/10; order: -1; max-height: 52rem; }
    .twin-team { grid-template-columns: 1fr; gap: 1.6rem; }
    .twin-turf-rates__inner { grid-template-columns: 1fr; }
    .twin-turf-inquire__inner { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 560px) {
    .twin-about-pillars { grid-template-columns: 1fr; }
}


/* ============================================================================
   CONVERSION POP MODALS — override Apparatus base .pop
   Open/close/focus-trap/scroll-lock are handled by parent $Pops
   (initializePops() in apparatus/assets/js/main.js). Triggered by
   [data-pop-open="event"]; markup in partials/modules/pop-event.php. We only
   restyle here. (Tee time CTAs open Chronogolf in a popup window instead —
   see Site.chrono in scripts.js.)
   ========================================================================== */
.pop--twin {
    background-color: color-mix(in srgb, var(--c-pri) 72%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(1.2rem);
    backdrop-filter: saturate(160%) blur(1.2rem);
}
    .pop--twin .pop__item {
        width: var(--w-xs);
        padding: 0;
        background: var(--c-bg);
        border-radius: 2.4rem;
        overflow: hidden;
        box-shadow: 0 4rem 12rem -3.2rem color-mix(in srgb, var(--c-pri) 60%, transparent);
        transform: translateY(2.4rem) scale(0.98);
        transition: transform .5s var(--ease-out-quint);
    }
    .pop--twin.pop--book-event .pop__item {
        width: var(--w-sm);
    }
    .pop--twin.pop--active .pop__item {
        transform: translateY(0) scale(1);
    }

    /* Close */
    .pop--twin .twin-book__close {
        position: absolute;
        top: 1.6rem;
        right: 1.6rem;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 4rem;
        height: 4rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: color-mix(in srgb, var(--c-pri) 8%, transparent);
        color: var(--c-pri);
        font-size: 1.6rem;
        cursor: pointer;
        transition: background-color .3s var(--ease-out-quint), transform .4s var(--ease-out-quint);
    }
    .pop--twin .twin-book__close:hover {
        background: color-mix(in srgb, var(--c-pri) 16%, transparent);
        transform: rotate(90deg);
    }

    /* Body */
    .twin-book__inner {
        display: flex;
        flex-direction: column;
        padding: clamp(3.2rem, 5vw, 5.6rem);
    }
    .twin-book__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .8rem;
        font-family: var(--font-body);
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--c-sec);
    }
    .twin-book__title {
        margin: 1.6rem 0 0;
    }
    .twin-book__text {
        margin: 1.6rem 0 0;
        font-family: var(--font-body);
        font-size: 1.6rem;
        line-height: 1.6;
        color: color-mix(in srgb, var(--c-fg) 72%, transparent);
    }
    .twin-book__text a {
        color: var(--c-pri);
        text-decoration: underline;
        text-underline-offset: .3rem;
    }
    .twin-book__text a:hover { color: var(--c-sec); }

    /* Event-type preview chips (future conditional selector) */
    .twin-book__types {
        list-style: none;
        margin: 2.8rem 0 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .twin-book__type {
        display: inline-flex;
        align-items: center;
        gap: .8rem;
        padding: .8rem 1.6rem;
        border-radius: 9.6rem;
        background: color-mix(in srgb, var(--c-sec) 12%, var(--c-bg));
        font-size: 1.3rem;
        font-weight: 500;
        color: var(--c-pri);
    }
    .twin-book__type-icon { color: var(--c-sec); font-size: 1.3rem; }

    .pop--book-event .twin-book__inner > .gform_wrapper.gravity-theme,
    .pop--book-event .twin-book__inner > .gform_confirmation_wrapper {
        margin: 2.4rem 0 0;
    }
        .pop--book-event .twin-book__inner .gform_footer {
            margin-top: 2.4rem;
            padding-bottom: 0;
        }
        /* Confirmation can land inside the wrapper (AJAX) or replace it */
        .pop--book-event .twin-book__inner .gform_confirmation_message {
            margin-top: 0;
        }
        .pop--book-event .twin-book__inner .gform_wrapper .gform_confirmation_wrapper {
            margin-top: 0;
            padding-top: 0;
        }
    .pop--book-event .twin-book__more {
        margin: 2.8rem 0 0;
        padding-top: 0;
        border-top: 0;
    }

/* ============================================================================
   PROMO POP — Apparatus markup (pop-promo.php) stays as-is; restyle to match
   Twin conversion modals (.pop--twin): frosted primary backdrop + circular close.
   ========================================================================== */
.pop--promo {
    background-color: color-mix(in srgb, var(--c-pri) 72%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(1.2rem);
    backdrop-filter: saturate(160%) blur(1.2rem);
}
    .pop--promo .pop__item {
        border-radius: 2.4rem;
        overflow: hidden;
        /* Neutral shadow — primary-tinted shadow disappears on the dark backdrop */
        box-shadow:
            0 1.2rem 2.4rem color-mix(in srgb, #000 28%, transparent),
            0 4rem 12rem -2.4rem color-mix(in srgb, #000 55%, transparent);
    }
    .pop--promo .pop__close {
        top: 1.6rem;
        right: 1.6rem;
        z-index: 3;
        width: 4rem;
        height: 4rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--c-sec);
        color: #fff;
        appearance: none;
        box-shadow: 0 .4rem 1.2rem color-mix(in srgb, #000 35%, transparent);
        transition: background-color .3s var(--ease-out-quint), transform .4s var(--ease-out-quint), filter .3s var(--ease-out-quint);
    }
    .pop--promo .pop__close:hover {
        background: var(--c-sec);
        filter: brightness(1.08);
        transform: rotate(90deg);
    }
    .pop--promo .pop__close-icon {
        width: 1.4rem;
        height: 1.4rem;
        fill: #fff;
    }
    .pop--promo .p-promo__img {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    /* Low-pressure exit — route to the Celebrate / Host landing pages */
    .twin-book__more {
        margin: 2.4rem 0 0;
        padding-top: 2.4rem;
        border-top: .1rem solid color-mix(in srgb, var(--c-pri) 12%, transparent);
    }
    .twin-book__more-prompt {
        margin: 0;
        font-size: 1.4rem;
        color: color-mix(in srgb, var(--c-fg) 60%, transparent);
    }
    .twin-book__more-links {
        list-style: none;
        margin: 1.2rem 0 0;
        padding: 0;
        display: grid;
        gap: .8rem;
    }
    .twin-book__more-links a {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: baseline;
        gap: .8rem 1.2rem;
        padding: 1.2rem 1.6rem;
        border: .1rem solid color-mix(in srgb, var(--c-pri) 12%, transparent);
        border-radius: 1.2rem;
        color: var(--c-pri);
        text-decoration: none;
        transition: border-color .3s var(--ease-out-quint), background-color .3s var(--ease-out-quint);
    }
    .twin-book__more-links a:hover {
        border-color: var(--c-sec);
        background: color-mix(in srgb, var(--c-sec) 8%, transparent);
    }
    .twin-book__more-label {
        font-weight: 500;
        font-size: 1.4rem;
    }
    .twin-book__more-desc {
        font-size: 1.3rem;
        color: color-mix(in srgb, var(--c-fg) 55%, transparent);
    }
    .twin-book__more-arrow {
        transition: transform .3s var(--ease-out-quint);
        color: var(--c-sec);
    }
    .twin-book__more-links a:hover .twin-book__more-arrow { transform: translateX(.4rem); }

@media only screen and (max-width: 560px) {
    .twin-book__types { gap: .8rem; }
}


/* ============================================================================
   EVENT TYPE (single-celebrate.php / single-host.php + ajax lightbox)
   One canonical document per event type at /celebrate|host/{slug}/, rendered
   by partials/modules/event-type.php. The same [data-twin-etype-doc] fragment
   is fetched into a Fancybox lightbox from the landing-page chips, where the
   .twin-etype--modal modifier compacts the layout.
============================================================================ */

/* --- Hero — featured image band with breadcrumb + H1 -------- */
.twin-etype__hero {
    position: relative;
    min-height: clamp(40rem, 58vh, 60rem);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    color-scheme: dark;
    color: var(--c-l);
    background: var(--c-pri);
}
    .twin-etype__hero-media {
        position: absolute;
        inset: 0;
        z-index: 0;
    }
    .twin-etype__hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .twin-etype__hero-veil {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        /* Simplified .twin-phero__veil — bottom-left brand wash + fog sheen. */
        background:
            linear-gradient(100deg,
                color-mix(in srgb, var(--c-d) 85%, transparent) 0%,
                color-mix(in srgb, var(--c-pri) 60%, transparent) 32%,
                transparent 70%
            ),
            linear-gradient(0deg,
                color-mix(in srgb, var(--c-d) 55%, transparent) 0%,
                transparent 30%
            ),
            color-mix(in srgb, var(--c-pri) 22%, transparent);
    }
    .twin-etype__hero-inner {
        position: relative;
        z-index: 2;
        width: var(--w-lg);
        margin-inline: auto;
        padding-block: calc(var(--twin-hdr-h) + 6.4rem) clamp(4rem, 6vw, 6.4rem);
    }
    .twin-etype__crumb {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        margin-bottom: 2.4rem;
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: .24em;
        text-transform: uppercase;
    }
        .twin-etype__crumb-link {
            color: var(--c-sec);
            text-decoration: none;
            transition: color .3s;
        }
        .twin-etype__crumb-link:hover { color: var(--c-l); }
        .twin-etype__crumb-sep {
            font-size: .9rem;
            color: color-mix(in srgb, var(--c-l) 45%, transparent);
        }
        .twin-etype__crumb-here { color: color-mix(in srgb, var(--c-l) 85%, transparent); }
    .twin-etype__title {
        max-width: 16ch;
        font-size: clamp(4rem, 6vw, 7.2rem);
    }
    .twin-etype__lede {
        max-width: 56ch;
        margin: 2.4rem 0 0;
        font-size: clamp(1.6rem, 1.6vw, 1.9rem);
        line-height: 1.6;
        color: color-mix(in srgb, var(--c-l) 82%, transparent);
    }

/* --- Body — WYSIWYG content, cities, FAQs, CTA --------------- */
.twin-etype__layout {
    width: var(--w-lg);
    margin-inline: auto;
    padding-block: var(--s-lg);
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 6vw, 6.4rem);
}
    /* Two columns: prose (capped at a readable measure) + sticky sidebar
       of deep links into the hub page's sections. */
    .twin-etype__cols {
        display: flex;
        align-items: flex-start;
        gap: clamp(3.2rem, 5vw, 7.2rem);
    }
    .twin-etype__content {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 72ch;
        font-size: 1.7rem;
        line-height: 1.75;
    }
    .twin-etype__aside {
        flex: 0 0 30rem;
        position: sticky;
        top: calc(var(--twin-hdr-h) + 2.4rem);
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }
        .twin-etype__aside-label {
            margin: 0 0 .4rem;
            font-size: 1.1rem;
            font-weight: 500;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: color-mix(in srgb, var(--c-fg) 55%, transparent);
        }
        .twin-etype__aside-card {
            display: flex;
            align-items: center;
            gap: 1.4rem;
            padding: 1.6rem 1.8rem;
            background: var(--c-l);
            border: .1rem solid var(--c-line-soft);
            border-radius: 1.6rem;
            text-decoration: none;
            color: var(--c-fg);
            transition: transform .35s var(--ease-out-quint), box-shadow .35s var(--ease-out-quint), border-color .35s;
        }
        .twin-etype__aside-card:hover {
            transform: translateY(-.2rem);
            border-color: color-mix(in srgb, var(--c-sec) 45%, transparent);
            box-shadow: 0 1.6rem 4rem -2rem color-mix(in srgb, var(--c-pri) 45%, transparent);
        }
        .twin-etype__aside-icon {
            flex: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            background: color-mix(in srgb, var(--c-sec) 14%, transparent);
            color: var(--c-sec);
            font-size: 1.5rem;
        }
        .twin-etype__aside-body {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: .2rem;
        }
        .twin-etype__aside-title {
            font-weight: 600;
            font-size: 1.4rem;
            line-height: 1.3;
        }
        .twin-etype__aside-desc {
            font-size: 1.25rem;
            line-height: 1.4;
            color: color-mix(in srgb, var(--c-fg) 65%, transparent);
        }
        .twin-etype__aside-arrow {
            flex: none;
            font-size: 1.2rem;
            color: color-mix(in srgb, var(--c-fg) 40%, transparent);
            transition: transform .35s var(--ease-out-quint), color .35s;
        }
        .twin-etype__aside-card:hover .twin-etype__aside-arrow {
            transform: translateX(.4rem);
            color: var(--c-sec);
        }
    .twin-etype__content > :first-child { margin-top: 0; }
    .twin-etype__content h2,
    .twin-etype__content h3 {
        font-family: var(--font-display);
        font-weight: 300;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: var(--c-fg);
        margin: 1.6em 0 .6em;
    }
    .twin-etype__content h2 { font-size: clamp(2.6rem, 3vw, 3.4rem); }
    .twin-etype__content h3 { font-size: clamp(2rem, 2.4vw, 2.6rem); }
    .twin-etype__content p { margin: 0 0 1.6rem; }
    .twin-etype__content ul,
    .twin-etype__content ol { margin: 0 0 1.6rem; padding-left: 2rem; }
    .twin-etype__content li { margin-bottom: .6rem; }
    /* Prose links — gold underline that grows into a highlighter swash.
       Also applied to flex-builder editorial columns (utility pages). */
    .twin-etype__content a,
    .twin-etype__faq-a a,
    .flx__col--editorial a {
        color: var(--c-pri);
        font-weight: 500;
        text-decoration: none;
        background-image: linear-gradient(
            color-mix(in srgb, var(--c-sec) 34%, transparent),
            color-mix(in srgb, var(--c-sec) 34%, transparent)
        );
        background-repeat: no-repeat;
        background-size: 100% .2rem;
        background-position: 0 100%;
        border-radius: .2rem;
        transition: background-size .35s var(--ease-out-quint), color .35s;
    }
    .twin-etype__content a:hover,
    .twin-etype__faq-a a:hover,
    .flx__col--editorial a:hover {
        color: var(--c-d);
        background-size: 100% 100%;
    }

    /* Cities served — local-SEO service-area card */
    .twin-etype__cities {
        padding: clamp(2.4rem, 3.5vw, 4rem);
        border-radius: 2rem;
        background: var(--c-qua);
    }
        .twin-etype__cities-title {
            margin: 0;
            font-family: var(--font-display);
            font-weight: 300;
            font-size: clamp(2.2rem, 2.6vw, 2.8rem);
            letter-spacing: -0.02em;
            color: var(--c-fg);
        }
        .twin-etype__cities-text {
            margin: 1.2rem 0 0;
            max-width: 60ch;
            font-size: 1.5rem;
            line-height: 1.6;
            color: color-mix(in srgb, var(--c-fg) 68%, transparent);
        }
        .twin-etype__cities-list {
            list-style: none;
            margin: 2rem 0 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }
        .twin-etype__city {
            display: inline-flex;
            align-items: center;
            padding: .8rem 1.6rem;
            border: .1rem solid var(--c-line);
            border-radius: 9.6rem;
            background: var(--c-bg);
            font-size: 1.4rem;
            line-height: 1.2;
            color: color-mix(in srgb, var(--c-fg) 82%, transparent);
        }

    /* FAQs — reuses the .twin-vendors accordion chrome */
    .twin-etype__faqs-title { margin-bottom: .8rem; }
    .twin-etype__faq-q { font-size: clamp(1.8rem, 2.2vw, 2.2rem); }
    .twin-etype__faq-a {
        max-width: 68ch;
        padding-bottom: 3.2rem;
    }
    .twin-etype__faq-a p { margin: 0 0 1.2rem; }
    .twin-etype__faq-a p:last-child { margin-bottom: 0; }

    /* Booking CTA — dark brand card */
    .twin-etype__cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 2.4rem 4rem;
        padding: clamp(2.8rem, 4vw, 4.8rem);
        border-radius: 2rem;
        background: var(--c-pri);
        color-scheme: dark;
        color: var(--c-l);
    }
        .twin-etype__cta-body { max-width: 56ch; }
        .twin-etype__cta-title { margin: 0; }
        /* The primary button's navy fill/border disappears into this navy
           card — ghost the border (same token as .twin-btn--ghost-inverse)
           so the resting state reads as an outlined pill. The base gold
           rise-up hover is untouched. */
        .twin-etype__cta .twin-btn--primary {
            --twin-btn-border: color-mix(in srgb, var(--c-l) 32%, transparent);
        }
        .twin-etype__cta-actions {
            flex: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.6rem;
        }
        .twin-etype__cta-more {
            display: inline-flex;
            align-items: center;
            gap: .8rem;
            font-size: 1.3rem;
            letter-spacing: .04em;
            color: color-mix(in srgb, var(--c-l) 70%, transparent);
            text-decoration: none;
            transition: color .3s;
        }
        .twin-etype__cta-more:hover { color: var(--c-sec); }
        .twin-etype__cta-more-icon {
            font-size: 1.1rem;
            transition: transform .4s var(--ease-out-quint);
        }
        .twin-etype__cta-more:hover .twin-etype__cta-more-icon { transform: translateX(.4rem); }
        .twin-etype__cta-text {
            margin: 1.2rem 0 0;
            font-size: 1.5rem;
            line-height: 1.6;
            color: color-mix(in srgb, var(--c-l) 78%, transparent);
        }

/* --- "More ways to celebrate/host" — sibling chips ----------- */
.twin-etype-more {
    background: var(--c-qua); /* matches .twin-pillars */
    padding-block: var(--s-lg);
}
    .twin-etype-more__inner {
        width: var(--w-lg);
        margin-inline: auto;
    }
    .twin-etype-more__title { margin-bottom: 2.4rem; }
    .twin-etype-more .twin-celebrate-types__cross { margin-top: 3.2rem; }

/* --- Fancybox close — match the pop close (.twin-book__close) ----
   Applies to content-embedded close buttons (html/inline modals: Love
   Letters + event types); image-gallery toolbars are untouched. The
   vendor button is variable-driven, so restyle via its custom props. */
.fancybox__content > .f-button.is-close-btn {
    --f-button-width: 4rem;
    --f-button-height: 4rem;
    --f-button-border-radius: 50%;
    --f-button-svg-width: 1.6rem;
    --f-button-svg-height: 1.6rem;
    --f-button-color: var(--c-pri);
    --f-button-hover-color: var(--c-pri);
    --f-button-bg: color-mix(in srgb, var(--c-pri) 8%, transparent);
    --f-button-hover-bg: color-mix(in srgb, var(--c-pri) 16%, transparent);
    --f-button-active-bg: color-mix(in srgb, var(--c-pri) 16%, transparent);
    box-sizing: border-box;
    top: 1.6rem;
    right: 1.6rem;
    opacity: 1;
    transition: background-color .3s var(--ease-out-quint), transform .4s var(--ease-out-quint);
}
.fancybox__content > .f-button.is-close-btn:hover {
    transform: rotate(90deg);
}

/* --- Lightbox context — .twin-etype--modal inside Fancybox ----
   Fancybox 5 promotes the root of the fetched HTML to .fancybox__content,
   so this rule and .twin-etype--modal target the same element. */
/* Fancybox reserves 40px of top padding for a close button outside the
   content (ours sits inside the hero) — even it out so the modal centers
   vertically. The second selector matches the specificity of Fancybox's
   own .fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn. */
.twin-etype-fb .fancybox__slide,
.twin-etype-fb:not(.is-compact) .fancybox__slide.has-close-btn {
    padding: 1.6rem;
}
.twin-etype-fb .fancybox__content {
    padding: 0;
    background: var(--c-bg);
    max-width: 100%;
}
/* The event-type close travels with the scroll: pulled first in the
   modal's column flexbox (order) and made sticky, with a negative bottom
   margin cancelling its flow height so the hero isn't pushed down. The
   frosted dark body reads over both the hero photo and the cream content
   it floats across once you scroll. */
.twin-etype-fb .fancybox__content > .f-button.is-close-btn {
    --f-button-color: var(--c-l);
    --f-button-hover-color: var(--c-l);
    --f-button-bg: color-mix(in srgb, var(--c-d) 45%, transparent);
    --f-button-hover-bg: color-mix(in srgb, var(--c-d) 62%, transparent);
    --f-button-active-bg: color-mix(in srgb, var(--c-d) 62%, transparent);
    position: sticky;
    order: -1;
    top: 1.6rem;
    right: auto;
    align-self: flex-end;
    flex: none;
    margin: 1.6rem 1.6rem -5.6rem 0;
    backdrop-filter: blur(6px);
    z-index: 5;
}
.twin-etype--modal {
    width: min(96rem, calc(100vw - 3.2rem));
    max-height: min(88vh, 104rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 2.4rem;
    background: var(--c-bg);
}
    /* Scrollbar — the native one reserves an opaque gutter that the hero
       image can't paint behind, so it's hidden and Site.etypes overlays a
       floating thumb (.twin-etype__scroll) on top of the content. */
    .twin-etype--modal {
        scrollbar-width: none;
    }
    .twin-etype--modal::-webkit-scrollbar { display: none; }
    .twin-etype__scroll {
        position: sticky;
        top: 0;
        height: 0;
        flex: none;
        z-index: 4;
        pointer-events: none;
    }
        /* Same frosted-dark treatment as the close button, centered in
           the 1.6rem strip between the close button and the modal edge
           (right offset = (1.6rem - width) / 2, also on hover). */
        .twin-etype__scroll-thumb {
            position: absolute;
            top: 0;
            right: .5rem;
            width: .6rem;
            border-radius: .3rem;
            background: color-mix(in srgb, var(--c-d) 45%, transparent);
            backdrop-filter: blur(6px);
            pointer-events: auto;
            transition: background .2s, width .2s, right .2s;
        }
        .twin-etype__scroll-thumb:hover,
        .twin-etype__scroll-thumb.is-dragging {
            right: .4rem;
            width: .8rem;
            background: color-mix(in srgb, var(--c-d) 62%, transparent);
        }
    /* The modal hero sizes to its text: no viewport-based min-height (which
       shrank awkwardly at short window heights), just generous padding.
       flex: none stops the modal's column flexbox from squashing it; the
       top padding also clears the overlaid close button. */
    .twin-etype--modal .twin-etype__hero {
        min-height: 0;
        flex: none;
    }
    .twin-etype--modal .twin-etype__hero-inner {
        width: 100%;
        padding: 8.8rem clamp(2.4rem, 4vw, 4.8rem) 4.8rem;
    }
    /* The modal keeps a true sidebar (narrower than the page's, sticking
       against the modal's own scroll viewport rather than the header).
       These outrank the generic 1100px stack because the modal's width is
       viewport-capped — it stacks at its own breakpoint below instead. */
    .twin-etype--modal .twin-etype__cols { flex-direction: row; }
    .twin-etype--modal .twin-etype__aside {
        position: sticky;
        top: 2.4rem;
        flex: 0 0 26rem;
        width: auto;
        display: flex;
        flex-direction: column;
    }
    .twin-etype--modal .twin-etype__crumb { margin-bottom: 1.6rem; }
    .twin-etype--modal .twin-etype__title { font-size: clamp(3.2rem, 4.5vw, 4.8rem); }
    .twin-etype--modal .twin-etype__lede { font-size: 1.6rem; }
    .twin-etype--modal .twin-etype__layout {
        width: 100%;
        padding: clamp(2.8rem, 4vw, 4.8rem);
        gap: clamp(2.8rem, 4vw, 4rem);
    }
    /* The prose column fills whatever the sidebar leaves it. */
    .twin-etype--modal .twin-etype__content { max-width: none; font-size: 1.6rem; }

@media only screen and (max-width: 1100px) {
    /* Stack: sidebar cards drop below the prose as a two-up grid. */
    .twin-etype__cols { flex-direction: column; }
    .twin-etype__aside {
        position: static;
        flex: none;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .twin-etype__aside-label { grid-column: 1 / -1; }
}

/* Below this the viewport-capped modal gets too narrow for two columns:
   the sidebar cards drop under the prose as a two-up grid. */
@media only screen and (max-width: 880px) {
    .twin-etype--modal .twin-etype__cols { flex-direction: column; }
    .twin-etype--modal .twin-etype__aside {
        position: static;
        flex: none;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .twin-etype--modal .twin-etype__aside-label { grid-column: 1 / -1; }
}

@media only screen and (max-width: 768px) {
    .twin-etype__cta { flex-direction: column; align-items: flex-start; }
    .twin-etype__cta-actions { align-items: flex-start; }
    .twin-etype--modal { width: calc(100vw - 2.4rem); }
}

@media only screen and (max-width: 560px) {
    .twin-etype__aside,
    .twin-etype--modal .twin-etype__aside { grid-template-columns: 1fr; }
}