/*
Theme Name: SHAPES Community Club
Theme URI: https://shapescommunityclub.example
Author: SHAPES Community Club
Author URI: https://shapescommunityclub.example
Description: A luxury, fully Elementor-editable WordPress theme for the SHAPES Community Club. Premium dark aesthetic inspired by five-star hospitality, with a warm orange/gold accent on a charcoal + white palette. Header, footer, menus and brand colours are built in and controllable from the Customizer, while every page section is designed freely in Elementor (Free compatible; Elementor Pro Theme Builder ready).
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shapes-community-club
Tags: community, elementor, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, sticky-post, threaded-comments, translation-ready, block-styles
*/

/* =========================================================
   0. Brand palette  (change here OR from Appearance ▸ Customize)
   ========================================================= */
:root {
    /* Brand orange accent (Appearance ▸ Customize to change) */
    --scc-gold:           #FF5E17;   /* brand orange — the single accent */
    --scc-gold-dark:      #E04A0A;
    --scc-gold-light:     #FF8A4D;   /* softer orange for accent words */
    --scc-gold-soft:      rgba(255,94,23,.14);
    /* Back-compat aliases so existing rules keep working */
    --scc-primary:        #FF5E17;
    --scc-primary-dark:   #E04A0A;
    --scc-primary-gold:   #FF8A4D;
    --scc-primary-soft:   rgba(255,94,23,.14);

    /* Charcoal (dark surfaces: header-on-scroll, sections, footer) */
    --scc-ink:            #1A1A1A;   /* charcoal black */
    --scc-ink-2:          #202020;
    --scc-ink-3:          #2a2a2a;

    /* Deep forest green (support tone) */
    --scc-forest:         #24352A;
    --scc-forest-2:       #1C2A21;

    /* Light */
    --scc-white:          #ffffff;
    --scc-cream:          #F8F7F3;   /* warm white — primary light background */
    --scc-cream-2:        #F1EEE7;   /* slightly deeper warm white for alt bands */

    /* Neutral greys (warm) */
    --scc-grey-900:       #1A1A1A;
    --scc-grey-800:       #2b2b2b;
    --scc-grey-700:       #4a4a46;
    --scc-grey-600:       #6a6a64;
    --scc-grey-500:       #86867e;
    --scc-grey-400:       #9a9a92;
    --scc-grey-300:       #ccccc4;
    --scc-grey-200:       #e7e4dc;
    --scc-grey-100:       #f2f0ea;

    --scc-text:           #45453f;   /* warm charcoal body text */
    --scc-heading:        #1A1A1A;
    --scc-border:         #e7e4dc;

    --scc-radius:         6px;
    --scc-radius-sm:      3px;
    --scc-shadow:         0 24px 60px rgba(26,26,26,.14);
    --scc-shadow-sm:      0 6px 24px rgba(26,26,26,.07);
    --scc-container:      1280px;
    --scc-transition:     .35s cubic-bezier(.22,.61,.36,1);

    --scc-font-body:      "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --scc-font-heading:   "Playfair Display", Georgia, "Times New Roman", serif;
    --scc-font-label:     "Manrope", "Inter", system-ui, sans-serif;
}

/* =========================================================
   1. Reset / base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--scc-font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--scc-text);
    background: var(--scc-cream);
    letter-spacing: .1px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--scc-font-heading);
    color: var(--scc-heading);
    line-height: 1.14;
    margin: 0 0 .55em;
    font-weight: 500;
    letter-spacing: -.01em;
}
h1 { font-size: clamp(38px, 5.4vw, 62px); }
h2 { font-size: clamp(30px, 4.2vw, 48px); }
h3 { font-size: clamp(23px, 3vw, 32px); }

p { margin: 0 0 1.2em; }

a { color: var(--scc-ink); text-decoration: none; transition: color var(--scc-transition); }
a:hover, a:focus { color: var(--scc-gold-dark); }

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.2em; }

/* small uppercase gold eyebrow label (reusable) */
.scc-eyebrow {
    display: inline-block;
    font-family: var(--scc-font-label);
    text-transform: uppercase;
    letter-spacing: 3.5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--scc-gold-dark);
    margin-bottom: 16px;
}

/* accessibility */
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
    position: absolute; word-wrap: normal !important;
}
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100000;
    background: var(--scc-primary); color: #fff; padding: 10px 18px; border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* =========================================================
   2. Layout helpers
   ========================================================= */
.scc-container { width: 100%; max-width: var(--scc-container); margin: 0 auto; padding: 0 24px; }
.scc-main { min-height: 40vh; }
.scc-page-content { padding: 60px 0; }

/* =========================================================
   3. Buttons
   ========================================================= */
.scc-btn,
.wp-block-button__link,
button, input[type="submit"], input[type="button"] {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--scc-gold);
    color: var(--scc-ink);
    font-family: var(--scc-font-label);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    padding: 16px 34px;
    border: 1px solid var(--scc-gold);
    border-radius: var(--scc-radius-sm);
    cursor: pointer;
    transition: all var(--scc-transition);
    line-height: 1;
}
.scc-btn:hover,
button:hover, input[type="submit"]:hover {
    background: var(--scc-ink); border-color: var(--scc-ink); color: #fff;
    transform: translateY(-2px);
}
.scc-btn--ghost { background: transparent; color: var(--scc-ink); border-color: var(--scc-ink); }
.scc-btn--ghost:hover { background: var(--scc-ink); color: #fff; }
.scc-btn--light { background: #fff; color: var(--scc-ink); border-color: #fff; }
.scc-btn--light:hover { background: var(--scc-gold); border-color: var(--scc-gold); color: var(--scc-ink); }

/* =========================================================
   4. Header
   ========================================================= */
.scc-topbar {
    background: var(--scc-ink);
    color: rgba(255,255,255,.7);
    font-size: 13px;
    font-family: var(--scc-font-label);
    letter-spacing: .3px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.scc-topbar .scc-container {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; min-height: 44px; gap: 10px;
}
.scc-topbar a { color: rgba(255,255,255,.7); }
.scc-topbar a:hover { color: var(--scc-primary); }
.scc-topbar__contact { display: flex; gap: 26px; flex-wrap: wrap; }
.scc-topbar__contact span { display: inline-flex; align-items: center; gap: 8px; }
.scc-topbar__contact svg { width: 15px; height: 15px; fill: var(--scc-primary); }
.scc-topbar__social { display: flex; gap: 14px; align-items: center; }
.scc-topbar__social a { display: inline-flex; }
.scc-topbar__social svg { width: 15px; height: 15px; fill: currentColor; }

/* Inner pages: a solid charcoal bar, sticky from the top. */
.scc-header {
    background: var(--scc-ink);
    position: sticky;
    top: 0;
    z-index: 999;
    transition: background .4s ease, box-shadow .4s ease, padding var(--scc-transition);
}
.scc-header.is-stuck { box-shadow: 0 12px 34px rgba(0,0,0,.30); }

/* Front-page OVERLAY variant (Customize ▸ Header): the nav sits transparent
   over the hero, then turns solid charcoal + blur once you scroll past it.
   navigation.js toggles .is-solid. White text works in both states because
   the hero has a dark overlay behind it. */
.scc-overlay-header .scc-header {
    position: fixed; left: 0; right: 0; top: 0;
    background: transparent;
    box-shadow: none;
    transition: background .45s ease, box-shadow .45s ease, backdrop-filter .45s ease;
}
.scc-overlay-header .scc-header::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 130%;
    background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,0));
    pointer-events: none; opacity: 1; transition: opacity .4s ease; z-index: -1;
}
.scc-overlay-header .scc-header.is-solid {
    background: rgba(26,26,26,.82);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 12px 34px rgba(0,0,0,.28);
    border-bottom: 1px solid rgba(255,94,23,.16);
}
.scc-overlay-header .scc-header.is-solid::after { opacity: 0; }
.scc-overlay-header.admin-bar .scc-header { top: 32px; }
@media (max-width: 600px) { .scc-overlay-header.admin-bar .scc-header { top: 46px; } }

/* =========================================================
   4b. Four Seasons scroll header  (banner at bottom → sticks to top)
   Enable from Appearance ▸ Customize ▸ SHAPES Theme Options ▸ Header.
   ========================================================= */

/* The shell wraps the top bar + header (or a full Elementor-built header).
   By default it is invisible, so the built-in header keeps behaving exactly
   as before; the modifier classes below opt into the sticky / FS behaviour. */
.scc-site-header { display: contents; }

/* An Elementor-designed header with the FS effect OFF → normal sticky bar. */
.scc-site-header--elementor {
    display: block; position: sticky; top: 0; z-index: 999;
    background: var(--scc-ink);
}
.admin-bar .scc-site-header--elementor { top: 32px; }

/* ---- Four Seasons mode ---- */
.scc-site-header--fs {
    display: block;
    position: fixed;
    left: 0; right: 0; top: 0;
    z-index: 999;
    /* Sit at the bottom of the widget banner (its .hero is 82vh) — a small gap
       keeps the labels clear of the very edge. Tablet override below (78vh).
       NOTE: tied to the banner height; if the widget banner height changes,
       update these vh values to match. */
    transform: translateY(calc(82vh - 100% - 30px));
    /* No own scrim/blur at rest — the short bar's own gradient + backdrop blur
       made a harsh dark box with a visible top edge over the hero. The hero's
       full-height bottom ::after gradient already darkens this zone smoothly,
       so the tab labels read against ONE seamless overlay. */
    background: transparent;
    border-top: none;
    transition: transform .6s cubic-bezier(.16,.84,.32,1),
                background-color .4s ease,
                box-shadow .4s ease;
    will-change: transform;
}
/* Glide up and stick to the very top. */
.scc-site-header--fs.is-fs-stuck {
    transform: translateY(0);
    /* Solid, opaque charcoal once stuck so labels stay readable over content. */
    background: rgba(15,15,15,0.94);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    border-top-color: transparent;
}
.admin-bar .scc-site-header--fs.is-fs-stuck { transform: translateY(32px); }

/* Icon-tab bar fades OUT on scroll (the compact top navbar takes over). */
.scc-site-header--fs { transition: transform .6s cubic-bezier(.16,.84,.32,1), background-color .4s ease, box-shadow .4s ease, opacity .45s ease; }
.scc-site-header--fs.is-fs-hidden { opacity: 0; pointer-events: none; }
/* Tablet: the widget banner .hero drops to 78vh (its @media max-width:1024px),
   so bring the resting icon-tab bar up to match. Mobile (≤782) uses the fixed
   app-style bottom bar defined further below, so scope this to 783–1024px. */
@media (min-width: 783px) and (max-width: 1024px) {
    .scc-site-header--fs { transform: translateY(calc(78vh - 100% - 30px)); }
}

/* ===== Four Seasons scrolled top navbar (logo left · menu · CTA right) ===== */
.scc-fs-topnav {
    position: fixed; left: 0; right: 0; top: 0; z-index: 1000;
    background: var(--scc-ink);
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    border-bottom: 1px solid rgba(255,94,23,.16);
    transform: translateY(-100%); opacity: 0;
    transition: transform .5s cubic-bezier(.16,.84,.32,1), opacity .4s ease;
}
.scc-fs-topnav.is-visible { transform: translateY(0); opacity: 1; }
/* Inner pages: solid sticky bar from the top (occupies flow so content sits below). */
.scc-fs-topnav.is-sticky { position: sticky; transform: none; opacity: 1; }
.admin-bar .scc-fs-topnav { top: 32px; }
@media (max-width: 782px) { .admin-bar .scc-fs-topnav { top: 0; } }

.scc-fs-topnav__inner {
    display: flex; align-items: center; gap: 34px;
    max-width: var(--scc-container); margin: 0 auto; padding: 13px 40px; min-height: 62px;
    position: relative;
}
.scc-fs-topnav__logo { display: inline-flex; align-items: center; }
.scc-fs-topnav__logo img { max-height: 34px; width: auto; display: block; }
.scc-fs-topnav__word { font-family: var(--scc-font-heading); font-size: 24px; font-weight: 700; color: #fff; letter-spacing: 2px; line-height: 1; }
.scc-fs-topnav__word b { color: var(--scc-gold); }
.scc-fs-topnav__menu ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.scc-fs-topnav__menu li { position: relative; }
.scc-fs-topnav__menu a {
    display: block; padding: 10px 13px; color: rgba(255,255,255,.9);
    font-family: var(--scc-font-label); font-weight: 600; font-size: 12.5px;
    letter-spacing: 1.4px; text-transform: uppercase;
}
.scc-fs-topnav__menu a:hover,
.scc-fs-topnav__menu .current-menu-item > a,
.scc-fs-topnav__menu .current_page_item > a { color: var(--scc-gold-light); }
/* dropdowns */
.scc-fs-topnav__menu ul ul {
    position: absolute; top: 100%; left: 0; min-width: 210px; background: var(--scc-ink-2);
    box-shadow: var(--scc-shadow); border-top: 2px solid var(--scc-gold);
    flex-direction: column; padding: 8px 0; display: none; z-index: 1001;
}
.scc-fs-topnav__menu li:hover > ul { display: flex; }
.scc-fs-topnav__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.scc-fs-topnav__cta {
    background: var(--scc-gold); color: var(--scc-ink); border: 1px solid var(--scc-gold);
    border-radius: var(--scc-radius-sm); padding: 12px 24px; font-family: var(--scc-font-label);
    font-weight: 600; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap;
    transition: all var(--scc-transition);
}
.scc-fs-topnav__cta:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.scc-fs-topnav__cta--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.scc-fs-topnav__cta--ghost:hover { background: #fff; color: var(--scc-ink); border-color: #fff; }
.scc-fs-topnav__mobcta { display: none; }
.scc-fs-topnav .scc-nav-toggle { display: none; }

/* Desktop: logo left · menu CENTERED · buttons right */
@media (min-width: 783px) {
    .scc-fs-topnav__logo   { flex: 0 0 auto; }
    .scc-fs-topnav__menu   { flex: 1 1 auto; display: flex; justify-content: center; }
    .scc-fs-topnav__actions { flex: 0 0 auto; margin-left: 0; }
}

@media (max-width: 900px) and (min-width: 783px) { .scc-fs-topnav__menu a { padding: 10px 9px; letter-spacing: 1px; font-size: 12px; } .scc-fs-topnav__inner { gap: 18px; } }
@media (max-width: 782px) {
    .scc-fs-topnav .scc-nav-toggle { display: inline-flex; margin-left: auto; }
    .scc-fs-topnav__actions { display: none; }
    /* .scc-nav mobile dropdown styles (below) position it under this bar */
    .scc-fs-topnav__menu.scc-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--scc-ink);
        box-shadow: var(--scc-shadow); max-height: 0; overflow: hidden; transition: max-height .35s ease; }
    .scc-fs-topnav__menu.scc-nav.is-open { max-height: 85vh; overflow-y: auto; }
    .scc-fs-topnav__menu.scc-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; }
    .scc-fs-topnav__menu.scc-nav a { padding: 15px 24px; border-bottom: 1px solid rgba(255,255,255,.06); }
    .scc-fs-topnav__menu.scc-nav ul ul { position: static; display: none; box-shadow: none; border-top: none; background: rgba(255,255,255,.03); padding: 0; }
    .scc-fs-topnav__menu.scc-nav li.is-open > ul { display: flex; }
    /* CTAs move into the mobile dropdown as full-width buttons */
    .scc-fs-topnav__mobcta { display: flex; flex-direction: column; gap: 10px; padding: 16px 24px 20px; }
    .scc-fs-topnav__mobcta .scc-btn { width: 100%; justify-content: center; }
}

/* ===== Mobile front-page header: swap the FS icon-tab bar + utility bar for the
   compact top navbar (logo + hamburger) — like fourseasons.com on phones. ===== */
@media (max-width: 782px) {
    .scc-topbar-fs { display: none !important; }
    /* Top: logo + hamburger (sticky) */
    .scc-fs-topnav {
        position: sticky !important; top: 0;
        transform: none !important; opacity: 1 !important;
        box-shadow: 0 6px 20px rgba(0,0,0,.25);
    }
    .admin-bar .scc-fs-topnav { top: 0; }
    .scc-fs-topnav__inner { padding: 12px 22px; min-height: 58px; gap: 14px; }
    .scc-fs-topnav__logo img { max-height: 30px; }

    /* Banner icon-tab menu → FIXED BOTTOM app-style bar (tabs only). */
    #scc-site-header.scc-site-header--fs {
        display: block !important;
        position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important;
        transform: none !important; opacity: 1 !important;
        background: rgba(19,16,11,.97); box-shadow: 0 -6px 22px rgba(0,0,0,.4); z-index: 95;
    }
    /* pinned to the bottom of the banner; slides away once you scroll past the hero */
    #scc-site-header.scc-site-header--fs.is-fs-hidden { transform: translateY(110%) !important; opacity: 0 !important; pointer-events: none !important; }
    #scc-site-header.scc-site-header--fs .scc-site-header__inner { padding: 0 !important; }
    /* keep ONLY the tab row: drop logo / divider inside the FS header on mobile */
    #scc-site-header.scc-site-header--fs .elementor-widget-divider,
    #scc-site-header.scc-site-header--fs .elementor-widget-image,
    #scc-site-header.scc-site-header--fs .elementor-widget-heading { display: none !important; }
    #scc-site-header.scc-site-header--fs .elementor-section,
    #scc-site-header.scc-site-header--fs .elementor-top-section,
    #scc-site-header.scc-site-header--fs .elementor-element-populated { padding: 0 !important; }
    /* icon-box tabs in one compact scrollable row */
    #scc-site-header.scc-site-header--fs .elementor-container:has(.elementor-widget-icon-box) {
        display: flex !important; flex-wrap: nowrap !important; max-width: 100% !important;
        overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0;
    }
    #scc-site-header.scc-site-header--fs .elementor-column:has(.elementor-widget-icon-box) {
        width: auto !important; flex: 1 1 0 !important; min-width: 0 !important;
    }
    #scc-site-header.scc-site-header--fs .elementor-widget-icon-box { margin: 0 !important; }
    #scc-site-header.scc-site-header--fs .elementor-icon-box-wrapper { padding: 9px 2px !important; gap: 5px !important; text-align: center; }
    #scc-site-header.scc-site-header--fs .elementor-icon-box-icon { margin: 0 !important; }
    #scc-site-header.scc-site-header--fs .elementor-icon { font-size: 18px !important; }
    #scc-site-header.scc-site-header--fs .elementor-icon-box-title { font-size: 7.5px !important; letter-spacing: 0 !important; margin: 0 !important; white-space: nowrap !important; line-height: 1.2 !important; }
    #scc-site-header.scc-site-header--fs .elementor-icon-box-description { display: none !important; }

    /* hero content clears the pinned banner menu at its bottom */
    .scc-hero__inner { padding-bottom: 78px; }
}

/* ===== Mobile typography: the Elementor page headings use fixed px sizes,
   which overflow narrow screens — scale them down so nothing is clipped. ===== */
body { overflow-x: hidden; }
@media (max-width: 782px) {
    .scc-hero__title { font-size: clamp(24px, 6vw, 33px) !important; max-width: 100%; white-space: normal; }
    .scc-hero__sub { font-size: 15px; }
    .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(25px, 5.4vw, 35px) !important; line-height: 1.15 !important; }
    .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(22px, 4.8vw, 30px) !important; line-height: 1.18 !important; }
    .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(19px, 4vw, 25px) !important; }
    .elementor-heading-title, .scc-hero__title { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; }
    /* centered intro/subtitle paragraphs must never exceed the phone width */
    .elementor-widget-text-editor p { max-width: 100% !important; }
    .scc-hero__sub { max-width: 100%; }
    /* full-bleed facility / split image columns: shorter bands on phones */
    .scc-zoom.elementor-column { padding-top: 150px !important; padding-bottom: 150px !important; }
}

/* Keep the inner header/top bar static inside the fixed shell.
   The #id + class selector out-ranks the sticky / transparent rules above. */
#scc-site-header.scc-site-header--fs .scc-header,
#scc-site-header.scc-site-header--fs .scc-topbar { position: static; }
#scc-site-header.scc-site-header--fs .scc-header { background: transparent; box-shadow: none; }

/* Elementor-built header: let links inherit Elementor's own colours so the
   theme's global orange link colour never bleeds onto the logo / tiles
   (keeps every colour editable in Elementor). */
.scc-site-header--elementor a,
.scc-site-footer--elementor a { color: inherit; }
.scc-site-header--elementor a:hover,
.scc-site-footer--elementor a:hover { color: var(--scc-primary-gold); }

/* FS-style titles: keep an elegant SERIF fallback (Georgia) so big headings
   never drop to a plain sans-serif while Playfair Display is loading. Eyebrows
   are <h6> and intentionally stay in the label sans-serif. */
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading div.elementor-heading-title {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
}

/* Elementor-built FS header: full banner at rest, a touch tighter once stuck. */
.scc-site-header--elementor .scc-site-header__inner > .elementor { width: 100%; }
.scc-site-header--fs.scc-site-header--elementor.is-fs-stuck .elementor-top-section {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.scc-site-header--fs.scc-site-header--elementor.is-fs-stuck .elementor-widget-divider { display: none; }
/* At rest the section's big designed bottom padding leaves a dark empty strip
   below the tab row (the scrim fills it). Trim it so tabs sit near the edge. */
.scc-site-header--fs.scc-site-header--elementor:not(.is-fs-stuck) .elementor-top-section {
    padding-bottom: 12px !important;
}

/* On phones the "bottom banner" idea is dropped: behave as a solid sticky top
   bar so the mobile menu (which drops below the header) stays on-screen. */
@media (max-width: 782px) {
    .scc-site-header--fs,
    .scc-site-header--fs:not(.is-fs-stuck) {
        position: sticky; top: 0; transform: none;
        background: var(--scc-ink); box-shadow: none;
    }
    .scc-site-header--fs.is-fs-stuck { box-shadow: 0 10px 30px rgba(0,0,0,.35); }
    .admin-bar .scc-site-header--fs.is-fs-stuck { transform: none; }
    #scc-site-header.scc-site-header--fs .scc-header { background: var(--scc-ink); }
}

/* =========================================================
   4c. Four Seasons style HERO SLIDER (home page)
   Each header icon-tab switches the slide image + text.
   ========================================================= */
.scc-hero {
    position: relative; width: 100%; height: 100vh; min-height: 560px;
    overflow: hidden; background: var(--scc-ink);
}
.scc-hero__track { position: absolute; inset: 0; }
.scc-hero__slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    display: flex; align-items: center;
    opacity: 0; visibility: hidden; transform: scale(1.06);
    transition: opacity 1s ease, transform 7s ease, visibility 1s;
}
.scc-hero__slide::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    /* Dark gradient over the BOTTOM of the banner so the icon-tab menu that sits
       there reads prominently over any hero photo (incl. bright daylight shots). */
    background: linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(0,0,0,0.44) 80%, rgba(0,0,0,0.82) 100%);
    pointer-events: none;
}
/* Optional background VIDEO banner (sits below the overlay + content). The
   slide's background-image stays as the poster / fallback + is used on mobile. */
.scc-hero__video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; border: 0; pointer-events: none;
}
/* Play the hero video on mobile too (muted + playsinline autoplays on phones). */
@media (max-width: 782px) { .scc-hero__video { display: block; } }
.scc-hero__slide.is-active { opacity: 1; visibility: visible; transform: scale(1); }
.scc-hero__inner {
    position: relative; z-index: 2; width: 100%;
    max-width: 1240px; margin: 0; padding: 0 clamp(40px, 6vw, 88px);
}
.scc-hero__eyebrow {
    display: block; color: var(--scc-primary-gold);
    font-family: var(--scc-font-label); font-size: 13px; font-weight: 600;
    letter-spacing: 3px; text-transform: uppercase; margin-bottom: 18px;
}
.scc-hero__title {
    font-family: var(--scc-font-heading); color: #fff; font-weight: 600;
    font-size: clamp(40px, 5.6vw, 70px); line-height: 1.08; margin: 0 0 30px;
    max-width: 20ch; text-transform: none; letter-spacing: 0;
    text-shadow: 0 2px 30px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35);
}
.scc-hero__title em { font-style: italic; color: #fff; }
.scc-hero__sub {
    color: rgba(255,255,255,.86); font-family: var(--scc-font-body);
    font-size: clamp(16px, 1.5vw, 19px); line-height: 1.75; font-weight: 400;
    max-width: 52ch; margin: 0 0 38px; text-transform: none; letter-spacing: .2px;
}
.scc-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.scc-hero__cta {
    display: inline-flex; align-items: center; gap: 10px; padding: 17px 40px;
    border: 1px solid #FF5E17; color: #fff;
    background: #FF5E17;
    font-family: var(--scc-font-label); font-size: 12px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase; transition: var(--scc-transition);
}
.scc-hero__cta:hover { background: #E04A0A; color: #fff; border-color: #E04A0A; transform: translateY(-2px); }
.scc-hero__cta--ghost {
    background: transparent; color: #fff; border-color: rgba(255,255,255,.55);
}
.scc-hero__cta--ghost:hover { background: #fff; color: var(--scc-ink); border-color: #fff; }

/* pause / play button */
.scc-hero__toggle {
    position: absolute; right: 26px; bottom: 160px; z-index: 6;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.28); color: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 11px; line-height: 1; transition: var(--scc-transition);
}
.scc-hero__toggle:hover { background: rgba(0,0,0,.55); }
.scc-hero__toggle-play { display: none; }
.scc-hero.is-paused .scc-hero__toggle-play { display: inline; }
.scc-hero.is-paused .scc-hero__toggle-pause { display: none; }

/* progress bar (injected into the header, above the tabs) */
.scc-hero-progress {
    position: absolute; top: 0; left: 40px; right: 40px; height: 2px;
    background: rgba(255,255,255,.22); z-index: 5;
}
.scc-hero-progress span { display: block; height: 100%; width: 0; background: #fff; }

/* icon tabs behave like slider tabs: dim inactive, highlight active */
#scc-site-header.scc-hero-tabs .elementor-widget-icon-box,
#scc-site-header .scc-fs-tabs .elementor-widget-icon-box {
    opacity: .70; cursor: pointer; transition: opacity .3s ease;
}
#scc-site-header.scc-hero-tabs .elementor-widget-icon-box:hover,
#scc-site-header.scc-hero-tabs .elementor-widget-icon-box.scc-tab-active,
#scc-site-header .scc-fs-tabs .elementor-widget-icon-box:hover { opacity: 1; }
/* active tab: gold label + full opacity */
#scc-site-header.scc-hero-tabs .scc-tab-active .elementor-icon-box-title,
#scc-site-header.scc-hero-tabs .scc-tab-active .elementor-icon { color: var(--scc-gold-light); }

/* Four Seasons bottom icon-tab bar: force the tabs to spread evenly full-width */
#scc-site-header .scc-fs-tabs > .elementor-container {
    display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start;
    width: 100%; max-width: 100%; gap: 6px;
}
#scc-site-header .scc-fs-tabs .elementor-column {
    flex: 1 1 0; width: auto; max-width: none;
}
/* Enforce the tab label + icon styling directly (Elementor's per-page CSS is
   unreliable here, so the linked labels otherwise fall back to big blue
   defaults). Scoped to the header shell so it never depends on a page class. */
#scc-site-header .elementor-widget-icon-box .elementor-icon-box-title,
#scc-site-header .elementor-widget-icon-box .elementor-icon-box-title a {
    color: #fff !important;
    font-family: var(--scc-font-label) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    white-space: nowrap;
    text-decoration: none !important;
}
#scc-site-header .elementor-widget-icon-box .elementor-icon,
#scc-site-header .elementor-widget-icon-box .elementor-icon i { color: #fff !important; font-size: 20px !important; }
#scc-site-header .elementor-widget-icon-box .elementor-icon svg { width: 20px; height: 20px; fill: #fff !important; }
#scc-site-header .elementor-widget-icon-box .elementor-icon-box-icon { margin-bottom: 4px !important; }
#scc-site-header .elementor-widget-icon-box .elementor-icon-box-wrapper { text-align: center; }
/* Slimmer bottom icon-tab bar + drop-shadows so labels stay readable now that
   the dark background scrim is removed (shadow is on the text, not a bg).
   The height lives on the wrapping TOP SECTION padding and the DIVIDER gap
   above the tabs (not on .scc-fs-tabs itself), so trim those. */
#scc-site-header .elementor-top-section {     margin-bottom: -30px; padding-top: 3px !important; padding-bottom: 3px !important; }
#scc-site-header .elementor-widget-divider .elementor-divider { padding-block-start: 2px !important; padding-block-end: 2px !important; }
#scc-site-header .scc-fs-tabs,
#scc-site-header .scc-fs-tabs > .elementor-container,
#scc-site-header .scc-fs-tabs .elementor-element-populated {
    padding-top: 0 !important; padding-bottom: 0 !important;
}
#scc-site-header .elementor-widget-icon-box .elementor-icon-box-title,
#scc-site-header .elementor-widget-icon-box .elementor-icon-box-title a { text-shadow: 0 1px 6px rgba(0,0,0,.55); }
#scc-site-header .elementor-widget-icon-box .elementor-icon i,
#scc-site-header .elementor-widget-icon-box .elementor-icon svg { filter: drop-shadow(0 1px 5px rgba(0,0,0,.55)); }
/* active tab → gold */
#scc-site-header .elementor-widget-icon-box.scc-tab-active .elementor-icon-box-title,
#scc-site-header .elementor-widget-icon-box.scc-tab-active .elementor-icon-box-title a { color: var(--scc-gold-light) !important; }
#scc-site-header .elementor-widget-icon-box.scc-tab-active .elementor-icon svg { fill: var(--scc-gold-light) !important; }
@media (max-width: 782px) {
    #scc-site-header .scc-fs-tabs > .elementor-container { flex-wrap: wrap; gap: 4px; }
    #scc-site-header .scc-fs-tabs .elementor-column { flex: 1 0 33%; }
    #scc-site-header .scc-fs-tabs .elementor-widget-icon-box .elementor-icon-box-title { font-size: 10px; }
}

/* =========================================================
   4c. Client "Luxury Hero Banner" — video hero + promo band (home)
   The exact client design (Cormorant + Jost, ✳ logo, video progress bar,
   overlapping promo). Fonts are enqueued in functions.php. Two integration
   tweaks vs the standalone mockup so the UNCHANGED FS header still overlays:
     • .hero fills the screen (100svh) — the icon-tab bar sits over its dark
       bottom instead of floating over white.
     • .progress-wrap is pinned to the very bottom edge so it clears the tabs.
   ========================================================= */
.fs-banner{
    --ink:#ffffff;
    --line: rgba(255,255,255,.35);
    --line-active:#ffffff;
    font-family:'Jost', sans-serif;
    background:#0c0c0c;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
}
.fs-banner *{ box-sizing:border-box; margin:0; padding:0; }
.fs-banner a{ color:inherit; }
/* The theme sets a dark colour DIRECTLY on h1/h2 (style.css §2), which beats the
   white the banner passes down by inheritance — so force the banner headings +
   eyebrows white to match the design. */
.fs-banner .hero-content .eyebrow,
.fs-banner .hero-content h1,
.fs-banner .hero-content h1 em,
.fs-banner .promo-content .eyebrow,
.fs-banner .promo-content h2{ color:#ffffff; }
.fs-banner .hero{
    position:relative;
    width:100%;
    height:100vh;
    height:100svh;
    min-height:640px;
    overflow:hidden;
}
.fs-banner .hero-video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    animation: fsHeroZoom 22s ease-in-out infinite alternate;
}
/* Sound on/off toggle — top-right, clear of the top bar, content and tabs. */
.fs-banner .hero-mute{
    position:absolute; top:120px; right:32px; z-index:6;
    width:46px; height:46px; padding:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff; cursor:pointer;
    background:rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.55);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.fs-banner .hero-mute:hover{ background:rgba(0,0,0,.55); border-color:#fff; transform:scale(1.06); }
.fs-banner .hero-mute svg{ width:20px; height:20px; display:block; }
.fs-banner .hero-mute__ico{ display:flex; align-items:center; justify-content:center; }
.fs-banner .hero-mute.is-muted .hero-mute__on{ display:none; }
.fs-banner .hero-mute:not(.is-muted) .hero-mute__off{ display:none; }
/* Banner dark overlay + bottom black fade removed per request — clean video.
   (Heading readability handled by the text-shadow on .hero-content h1 below.) */

@keyframes fsHeroZoom{
    from{ transform:scale(1); }
    to{ transform:scale(1.08); }
}

.fs-banner .hero-content{
    position:absolute;
    left:40px;
    top:48%;
    transform:translateY(-50%);
    z-index:4;
    max-width:640px;
}
.fs-banner .hero-content .eyebrow{
    display:block;
    font-size:13px;
    letter-spacing:3px;
    text-transform:uppercase;
    text-shadow:0 1px 8px rgba(0,0,0,.55);
    opacity:0;
    animation: fsRiseIn .9s ease forwards;
    animation-delay:.2s;
}
.fs-banner .hero-content h1{
    font-family:'Cormorant Garamond', serif;
    font-weight:500;
    text-shadow:0 2px 28px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.55);
    font-size:clamp(32px, 4.6vw, 60px);
    line-height:1.05;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-top:10px;
    opacity:0;
    animation: fsRiseIn 1s ease forwards;
    animation-delay:.4s;
}
.fs-banner .hero-content h1 em{
    font-style:italic;
    font-weight:400;
}
.fs-banner .hero-content .cta{
    display:inline-block;
    margin-top:26px;
    padding:15px 28px;
    background:#fff;
    color:#111;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    text-decoration:none;
    opacity:0;
    animation: fsRiseIn 1s ease forwards;
    animation-delay:.65s;
    transition: background .35s ease, color .35s ease, letter-spacing .35s ease;
}
.fs-banner .hero-content .cta:hover{
    background:transparent;
    color:#fff;
    box-shadow: inset 0 0 0 1px #fff;
    letter-spacing:3px;
}

@keyframes fsRiseIn{
    from{ opacity:0; transform:translateY(22px);}
    to{ opacity:1; transform:translateY(0);}
}
/* NOTE: the progress line is now fully owned by the client's HTML widget
   (its .hero-dock > .progress-wrap). The theme deliberately sets NO
   .fs-banner .progress-wrap rules so it never hides or shifts the widget's line. */

.fs-banner .header-space{
    width:100%;
    height:110px;
}
.fs-banner .promo{
    position:relative;
    width:90%;
    max-width:1400px;
    margin:0 auto;
    height:50vh;
    min-height:300px;
    max-height:450px;
    overflow:hidden;
}
.fs-banner .promo-bg{
    position:absolute; inset:0;
    background-image:url('https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?q=80&w=1600&auto=format&fit=crop');
    background-size:cover;
    background-position:center;
    transform:scale(1.12);
    opacity:0;
    transition: transform 1.6s cubic-bezier(.16,.7,.3,1), opacity 1.2s ease;
}
.fs-banner .promo.in-view .promo-bg{
    transform:scale(1);
    opacity:1;
}
.fs-banner .promo-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.20) 30%,
            rgba(0,0,0,.08) 55%,
            rgba(0,0,0,.45) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.20) 45%,
            rgba(0,0,0,0) 70%
        );
}
.fs-banner .promo-content{
    position:relative; z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    max-width:480px;
    padding:0 60px;
}
.fs-banner .promo-content > *{
    opacity:0;
    transform:translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
}
.fs-banner .promo.in-view .promo-content > *{ opacity:1; transform:translateY(0); }
.fs-banner .promo.in-view .promo-content .l1{ transition-delay:.15s; }
.fs-banner .promo.in-view .promo-content .l2{ transition-delay:.32s; }
.fs-banner .promo.in-view .promo-content .l3{ transition-delay:.48s; }
.fs-banner .promo.in-view .promo-content .l4{ transition-delay:.65s; }

.fs-banner .promo-content .eyebrow{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:20px;
    margin-bottom:14px;
}
.fs-banner .promo-content h2{
    font-size:13px;
    letter-spacing:2.5px;
    text-transform:uppercase;
    margin-bottom:16px;
}
.fs-banner .promo-content p{
    font-size:15px;
    line-height:1.7;
    color:rgba(255,255,255,.88);
    margin-bottom:26px;
    font-weight:300;
}
.fs-banner .promo-content .cta{
    display:inline-block;
    padding:15px 28px;
    background:#fff;
    color:#111;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    text-decoration:none;
    width:fit-content;
    transition: background .35s ease, color .35s ease, letter-spacing .35s ease;
}
.fs-banner .promo-content .cta:hover{
    background:transparent;
    color:#fff;
    box-shadow: inset 0 0 0 1px #fff;
    letter-spacing:3px;
}
.fs-banner .promo-bottom-space{
    width:100%;
    height:100px;
}
.fs-banner .below-banner{
    background:#ffffff;
}

/* No-JS / reduced-motion safety: never leave the promo invisible (it reveals
   via .in-view added by fs-banner.js). */
@media (prefers-reduced-motion: reduce){
    .fs-banner .hero-video{ animation:none; }
    .fs-banner .hero-content .eyebrow,
    .fs-banner .hero-content h1,
    .fs-banner .hero-content .cta{ opacity:1; animation:none; }
    .fs-banner .promo-bg{ opacity:1; transform:none; transition:none; }
    .fs-banner .promo-content > *{ opacity:1; transform:none; transition:none; }
}

@media(max-width:1024px){
    .fs-banner .hero{ min-height:600px; }
    .fs-banner .hero-content{ left:32px; right:32px; max-width:100%; }
    .fs-banner .header-space{ height:90px; }
    .fs-banner .promo{ height:56vh; min-height:360px; }
    .fs-banner .promo-content{ max-width:420px; padding:0 40px; }
    .fs-banner .promo-bottom-space{ height:70px; }
}
@media(max-width:640px){
    .fs-banner .hero{ min-height:560px; }
    .fs-banner .hero-mute{ top:18px; right:16px; width:42px; height:42px; }
    .fs-banner .hero-content{ left:20px; right:20px; top:44%; }
    .fs-banner .hero-content h1{ font-size:clamp(28px,8vw,38px); }
    .fs-banner .hero-content .cta{ padding:13px 22px; }
    .fs-banner .header-space{ height:72px; }

    .fs-banner .promo{ width:94%; height:64vh; min-height:460px; }
    .fs-banner .promo-content{ max-width:100%; padding:0 22px; }
    .fs-banner .promo-content h2{ font-size:12px; }
    .fs-banner .promo-content p{ font-size:14px; }
    .fs-banner .promo-bottom-space{ height:50px; }
}

/* Hero search field (Four Seasons "Find a ..." look) */
.scc-hero__search {
    display: flex; align-items: center; width: 100%; max-width: 460px;
    background: rgba(255,255,255,.96); border-radius: 2px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.scc-hero__search input {
    flex: 1; min-width: 0; border: none; background: transparent;
    padding: 17px 20px; font-family: var(--scc-font-label); font-size: 15px;
    font-style: italic; color: #1a1b1e;
}
.scc-hero__search input::placeholder { color: #6b6b6b; }
.scc-hero__search input:focus { outline: none; }
.scc-hero__search button {
    border: none; background: transparent; padding: 0 20px; cursor: pointer;
    color: #1a1b1e; display: flex; align-items: center;
}
.scc-hero__search button svg { width: 19px; height: 19px; }

/* Hero booking bar (Four Seasons "Destination / Dates / Guests" look) */
.scc-hero__booking {
    display: flex; align-items: stretch; width: 100%; max-width: 900px;
    background: rgba(255,255,255,.97); border-radius: 3px;
    box-shadow: 0 16px 50px rgba(0,0,0,.28); overflow: hidden;
}
.scc-hero__bk-field {
    flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center;
    padding: 13px 22px; border-right: 1px solid rgba(0,0,0,.1); position: relative;
}
.scc-hero__bk-field > label {
    font-family: var(--scc-font-label); font-size: 10px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase; color: #8a8a8a; margin-bottom: 5px;
}
.scc-hero__bk-field select,
.scc-hero__bk-field input {
    border: none; background: transparent; width: 100%; padding: 2px 0;
    font-family: var(--scc-font-label); font-size: 14px; color: #1a1b1e; cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.scc-hero__bk-field select:focus,
.scc-hero__bk-field input:focus { outline: none; }
.scc-hero__bk-field.has-caret::after {
    content: ""; position: absolute; right: 18px; bottom: 20px; width: 7px; height: 7px;
    border-right: 1.5px solid #8a8a8a; border-bottom: 1.5px solid #8a8a8a;
    transform: rotate(45deg); pointer-events: none;
}
.scc-hero__bk-btn {
    border: none; cursor: pointer; padding: 0 34px; background: var(--scc-primary); color: #fff;
    font-family: var(--scc-font-label); font-size: 12px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap;
    transition: var(--scc-transition);
}
.scc-hero__bk-btn:hover { background: var(--scc-primary-dark); }
@media (max-width: 782px) {
    .scc-hero__booking { flex-direction: column; max-width: 100%; }
    .scc-hero__bk-field { border-right: none; border-bottom: 1px solid rgba(0,0,0,.1); }
    .scc-hero__bk-field.has-caret::after { bottom: auto; top: 26px; }
    .scc-hero__bk-btn { padding: 16px; }
}

/* ===== Top utility bar over the hero (logo left · links right) ===== */
.scc-topbar-fs {
    position: absolute; top: 0; left: 0; right: 0; z-index: 20; color: #fff;
    transition: opacity .4s ease, transform .4s ease;
}
.scc-topbar-fs.is-hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.scc-topbar-fs__announce {
    text-align: center; padding: 9px 20px; background: rgba(0,0,0,.38);
    font-family: var(--scc-font-label); font-size: 12px; letter-spacing: .4px;
}
.scc-topbar-fs__announce a { color: #fff; text-decoration: underline; margin-left: 6px; }
.scc-topbar-fs__row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 40px; background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,0));
}
.scc-topbar-fs__logo {
    font-family: var(--scc-font-heading); font-size: 24px; font-weight: 700;
    letter-spacing: 2px; color: #fff; line-height: 1;
}
.scc-topbar-fs__nav {
    display: flex; align-items: center; gap: 28px;
    font-family: var(--scc-font-label); font-size: 12px; font-weight: 500;
    letter-spacing: 1.5px; text-transform: uppercase;
}
.scc-topbar-fs__nav a { color: rgba(255,255,255,.9); display: inline-flex; align-items: center; gap: 8px; }
.scc-topbar-fs__nav a:hover { color: #fff; }
.scc-topbar-fs__ico { width: 16px; height: 16px; flex: 0 0 auto; }
.scc-topbar-fs__nav .scc-topbar-fs__lang { border-left: 1px solid rgba(255,255,255,.3); padding-left: 26px; gap: 4px; }

@media (max-width: 900px) {
    .scc-topbar-fs__nav { gap: 16px; font-size: 11px; }
    .scc-topbar-fs__nav .scc-topbar-fs__lang { padding-left: 14px; }
}
@media (max-width: 782px) {
    .scc-hero { height: 88vh; min-height: 480px; }
    .scc-hero__inner { padding: 0 22px; }
    .scc-hero__toggle { bottom: 120px; }
    .scc-hero-progress { left: 20px; right: 20px; }
    .scc-topbar-fs__row { padding: 14px 20px; }
    .scc-topbar-fs__logo { font-size: 20px; }
    .scc-topbar-fs__nav a:not(.scc-topbar-fs__lang) { display: none; }
}

.scc-header__inner {
    display: flex; align-items: center; justify-content: flex-start;
    min-height: 96px; gap: 44px; transition: min-height var(--scc-transition);
}
.scc-header.is-stuck .scc-header__inner,
.scc-overlay-header .scc-header.is-solid .scc-header__inner { min-height: 72px; }

/* logo */
.scc-logo { display: flex; align-items: center; }
.scc-logo img { max-height: 58px; width: auto; transition: max-height var(--scc-transition); }
.scc-header.is-stuck .scc-logo img { max-height: 46px; }
.scc-logo__text {
    font-family: var(--scc-font-heading); font-size: 28px; font-weight: 700;
    color: #fff; letter-spacing: 2px; line-height: 1;
}
.scc-logo__text b { color: var(--scc-primary); font-weight: 700; }
.scc-logo__tagline {
    display: block; font-family: var(--scc-font-label); font-size: 10px; font-weight: 500;
    color: var(--scc-primary-gold); letter-spacing: 4px; text-transform: uppercase; margin-top: 5px;
}

/* primary nav */
.scc-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.scc-nav li { position: relative; }
.scc-nav a {
    display: block; padding: 12px 15px;
    color: rgba(255,255,255,.88);
    font-family: var(--scc-font-label);
    font-weight: 600; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase;
}
.scc-nav a:hover,
.scc-nav .current-menu-item > a,
.scc-nav .current_page_item > a { color: var(--scc-primary); }
.scc-nav > ul > li > a { position: relative; }
.scc-nav > ul > li > a::after {
    content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px;
    background: var(--scc-primary); transform: scaleX(0); transform-origin: left;
    transition: transform var(--scc-transition);
}
.scc-nav > ul > li:hover > a::after,
.scc-nav > ul > li.current-menu-item > a::after { transform: scaleX(1); }

/* dropdowns */
.scc-nav ul ul {
    position: absolute; top: 100%; left: 0; min-width: 220px;
    background: var(--scc-ink-2); box-shadow: var(--scc-shadow);
    border-top: 2px solid var(--scc-primary);
    flex-direction: column; padding: 8px 0; display: none; z-index: 1000;
}
.scc-nav li:hover > ul { display: flex; }
.scc-nav ul ul a { padding: 11px 20px; font-size: 12px; letter-spacing: 1px; }
.scc-nav ul ul a:hover { background: rgba(255,255,255,.04); color: var(--scc-primary); }

.scc-header__actions { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; }
/* "Become a Member" — a gold pill pushed to the far right. */
.scc-header__cta {
    margin-left: auto;
    background: var(--scc-gold); color: var(--scc-ink);
    border: 1px solid var(--scc-gold); border-radius: var(--scc-radius-sm);
    padding: 14px 30px; font-weight: 600; letter-spacing: 1.7px; font-size: 12px;
    box-shadow: none; white-space: nowrap;
}
.scc-header__cta:hover {
    background: transparent; color: #fff;
    border-color: rgba(255,255,255,.7); transform: none;
}

/* mobile toggle */
.scc-nav-toggle {
    display: none; margin-left: auto; background: transparent; border: 1px solid rgba(255,255,255,.25);
    width: 48px; height: 48px; border-radius: var(--scc-radius-sm); padding: 0; cursor: pointer;
    align-items: center; justify-content: center; letter-spacing: 0;
}
.scc-nav-toggle span,
.scc-nav-toggle span::before,
.scc-nav-toggle span::after {
    content: ""; display: block; width: 22px; height: 2px; background: #fff;
    position: relative; transition: var(--scc-transition);
}
.scc-nav-toggle span::before { position: absolute; top: -7px; }
.scc-nav-toggle span::after  { position: absolute; top: 7px; }
.scc-nav-toggle.is-open span { background: transparent; }
.scc-nav-toggle.is-open span::before { top: 0; transform: rotate(45deg); }
.scc-nav-toggle.is-open span::after  { top: 0; transform: rotate(-45deg); }

/* =========================================================
   5. Inner-page hero (title bar for blog/pages without Elementor hero)
   ========================================================= */
.scc-page-hero {
    background: var(--scc-ink);
    background-image: linear-gradient(120deg, var(--scc-ink), var(--scc-ink-3));
    color: #fff; padding: 90px 0 70px; text-align: center; position: relative;
}
.scc-transparent-header .scc-page-hero { padding-top: 150px; }
.scc-page-hero::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--scc-primary); }
.scc-page-hero h1 { color: #fff; margin: 0 0 10px; }
.scc-breadcrumb { color: rgba(255,255,255,.6); font-size: 13px; font-family: var(--scc-font-label); letter-spacing: 1px; text-transform: uppercase; }
.scc-breadcrumb a { color: var(--scc-primary-gold); }

/* =========================================================
   6. Posts / articles
   ========================================================= */
.scc-layout { display: grid; grid-template-columns: 1fr 320px; gap: 50px; align-items: start; }
.scc-layout--full { grid-template-columns: 1fr; }

.scc-post { margin-bottom: 44px; padding-bottom: 34px; border-bottom: 1px solid var(--scc-border); }
.scc-post__thumb img { border-radius: var(--scc-radius); margin-bottom: 20px; }
.scc-post__meta { font-family: var(--scc-font-label); font-size: 13px; letter-spacing: .5px; color: var(--scc-grey-500); margin-bottom: 12px; text-transform: uppercase; }
.scc-post__meta a { color: var(--scc-grey-600); }
.scc-post__title { font-size: 28px; }
.scc-post__title a { color: var(--scc-heading); }
.scc-post__title a:hover { color: var(--scc-primary); }

.scc-widget { margin-bottom: 34px; }
.scc-widget-title { font-size: 20px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--scc-primary); }

.scc-pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 34px; }
.scc-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 14px;
    border: 1px solid var(--scc-border); border-radius: var(--scc-radius-sm); color: var(--scc-grey-700); font-weight: 600;
}
.scc-pagination .page-numbers.current,
.scc-pagination .page-numbers:hover { background: var(--scc-primary); color: #fff; border-color: var(--scc-primary); }

/* =========================================================
   7. Footer
   ========================================================= */
.scc-footer { background: var(--scc-ink); color: rgba(255,255,255,.65); font-size: 15px; }
.scc-footer__top {
    display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.1fr; gap: 46px; padding: 72px 0 56px;
}
.scc-footer h4 {
    color: #fff; font-family: var(--scc-font-label); font-size: 13px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase; margin-bottom: 26px; position: relative; padding-bottom: 14px;
}
.scc-footer h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--scc-primary); }
.scc-footer a { color: rgba(255,255,255,.65); }
.scc-footer a:hover { color: var(--scc-primary); }

.scc-footer__brand .scc-logo__text { color: #fff; font-size: 30px; }
.scc-footer__brand img { max-height: 60px; margin-bottom: 22px; }
.scc-footer__brand p { color: rgba(255,255,255,.55); max-width: 340px; line-height: 1.8; }

.scc-footer__links { list-style: none; margin: 0; padding: 0; }
.scc-footer__links li { margin-bottom: 13px; }
.scc-footer__links a { font-size: 15px; transition: var(--scc-transition); position: relative; padding-left: 0; }
.scc-footer__links a:hover { padding-left: 8px; }

.scc-footer__contact { list-style: none; margin: 0; padding: 0; }
.scc-footer__contact li { display: flex; gap: 14px; margin-bottom: 18px; color: rgba(255,255,255,.6); line-height: 1.6; }
.scc-footer__contact svg { width: 18px; height: 18px; fill: var(--scc-primary); flex-shrink: 0; margin-top: 4px; }
.scc-footer__contact a:hover { color: var(--scc-primary); }

.scc-footer__hours { list-style: none; margin: 0; padding: 0; }
.scc-footer__hours li {
    display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
    border-bottom: 1px dashed rgba(255,255,255,.1); color: rgba(255,255,255,.6); font-size: 14px;
}
.scc-footer__hours li span:last-child { color: #fff; font-weight: 500; }

.scc-footer__social { display: flex; gap: 12px; margin-top: 24px; }
.scc-footer__social a {
    width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: var(--scc-transition);
}
.scc-footer__social a:hover { background: var(--scc-primary); border-color: var(--scc-primary); transform: translateY(-3px); }
.scc-footer__social svg { width: 17px; height: 17px; fill: #fff; }

.scc-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 24px 0; font-size: 13px; color: rgba(255,255,255,.45); font-family: var(--scc-font-label); letter-spacing: .4px; }
.scc-footer__bottom .scc-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.scc-footer__bottom a { color: rgba(255,255,255,.6); }
.scc-footer__bottom nav a { margin-left: 20px; }

/* back to top */
.scc-top {
    position: fixed; right: 26px; bottom: 26px; z-index: 998; width: 48px; height: 48px; border-radius: 50%;
    background: var(--scc-primary); color: #fff; border: none; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(12px); transition: var(--scc-transition); box-shadow: var(--scc-shadow); padding: 0;
}
.scc-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scc-top:hover { background: var(--scc-primary-dark); }
.scc-top svg { width: 20px; height: 20px; fill: #fff; }

/* =========================================================
   8. WordPress core classes
   ========================================================= */
.aligncenter { display: block; margin: 0 auto 1.4em; }
.alignright  { float: right; margin: 0 0 1em 1.4em; }
.alignleft   { float: left;  margin: 0 1.4em 1em 0; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--scc-grey-500); text-align: center; }
.sticky, .gallery-caption, .bypostauthor { display: block; }
blockquote {
    margin: 0 0 1.4em; padding: 6px 26px; border-left: 3px solid var(--scc-primary);
    font-family: var(--scc-font-heading); font-style: italic; font-size: 22px; color: var(--scc-heading);
}

/* =========================================================
   9. Responsive
   ========================================================= */
@media (max-width: 1024px) {
    .scc-footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
    .scc-layout { grid-template-columns: 1fr; }
}
@media (max-width: 782px) {
    .scc-nav-toggle { display: inline-flex; }
    .scc-nav {
        position: absolute; top: 100%; left: 0; right: 0; background: var(--scc-ink);
        box-shadow: var(--scc-shadow); max-height: 0; overflow: hidden; transition: max-height .35s ease;
    }
    .scc-nav.is-open { max-height: 80vh; overflow-y: auto; }
    .scc-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; }
    .scc-nav > ul > li > a::after { display: none; }
    .scc-nav a { padding: 15px 24px; border-bottom: 1px solid rgba(255,255,255,.06); }
    .scc-nav ul ul { position: static; display: none; box-shadow: none; border-top: none; background: rgba(255,255,255,.03); padding: 0; }
    .scc-nav li.is-open > ul { display: flex; }
    .scc-nav ul ul a { padding-left: 40px; }
    .scc-header__cta { display: none; }
    .scc-topbar__contact { display: none; }
    .scc-topbar .scc-container { justify-content: center; }
}
@media (max-width: 640px) {
    .scc-footer__top { grid-template-columns: 1fr; gap: 34px; }
    .scc-header__inner { min-height: 72px; }
    .scc-footer__bottom .scc-container { flex-direction: column; text-align: center; }
    .scc-footer__bottom nav a { margin: 0 10px; }
}

/* =========================================================
   10. Luxury components (Elementor pages + theme sections)
   Classes below are attached to Elementor elements via their
   "CSS Classes" advanced setting, so everything stays editable.
   ========================================================= */

/* ---- 10a. Scroll reveal + parallax + hover zoom (progressive) ---- */
/* .scc-anim is added to <html> by animations.js — without JS everything
   stays fully visible (no hidden content if scripts fail/are disabled). */
.scc-anim .scc-reveal {
    opacity: 0; transform: translateY(30px);
    transition: opacity 1s ease, transform 1s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.scc-anim .scc-reveal.is-inview { opacity: 1; transform: none; }
.scc-anim .scc-reveal-2 { transition-delay: .12s; }
.scc-anim .scc-reveal-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
    .scc-anim .scc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Subtle image zoom on hover — attach .scc-zoom to a column/section/image. */
.scc-zoom { overflow: hidden; }
.scc-zoom, .scc-zoom .elementor-widget-image, .scc-zoom figure { overflow: hidden; }
.scc-zoom.elementor-element,
.scc-zoom .elementor-widget-image img,
.scc-zoom img { transition: transform 1.25s cubic-bezier(.22,.61,.36,1); }
.scc-zoom:hover { background-size: 112% !important; }
.scc-zoom:hover .elementor-widget-image img,
.scc-zoom:hover img { transform: scale(1.07); }

/* ---- 10b. Section rhythm helpers ---- */
.scc-eyebrow-light { color: var(--scc-gold-light) !important; }

/* Thin gold rule used under eyebrows / above titles */
.scc-rule::after {
    content: ""; display: block; width: 54px; height: 1px;
    background: var(--scc-gold); margin: 22px auto 0;
}
.scc-rule.scc-rule--left::after { margin-left: 0; margin-right: auto; }

/* ---- 10c. Editorial split (About) — highlight chips ---- */
.scc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.scc-chips li, .scc-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--scc-font-label); font-size: 12px; font-weight: 600;
    letter-spacing: 1.6px; text-transform: uppercase; color: var(--scc-ink);
    border: 1px solid var(--scc-grey-200); border-radius: 999px; padding: 9px 18px;
    background: #fff; transition: var(--scc-transition);
}
.scc-chips li::before, .scc-chip::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--scc-gold);
}
.scc-chips li:hover, .scc-chip:hover { border-color: var(--scc-gold); transform: translateY(-2px); }
/* chips on dark backgrounds */
.scc-chips--dark li, .scc-chip--dark {
    color: #fff; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16);
}

/* ---- 10d. Membership tiers (dark background) ---- */
.scc-tier.elementor-column {
    border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
    transition: transform .5s cubic-bezier(.22,.61,.36,1), border-color .4s ease, box-shadow .5s ease, background-color .4s ease;
    background: rgba(255,255,255,.02);
}
.scc-tier.elementor-column:hover {
    transform: translateY(-10px); border-color: var(--scc-gold);
    box-shadow: 0 36px 70px rgba(0,0,0,.45);
    background: rgba(255,94,23,.05);
}
.scc-tier--featured.elementor-column {
    border-color: rgba(255,94,23,.55); background: rgba(255,94,23,.06);
}
.scc-tier-badge, .scc-tier--featured .scc-tier-badge { }
/* price + feature list live inside as normal widgets; the divider between them */
.scc-tier .elementor-widget-icon-list .elementor-icon-list-item {
    border-bottom: 1px solid rgba(255,255,255,.08); padding: 9px 0;
}

/* ---- 10e. Lifestyle gallery (masonry, no borders, hover zoom) ---- */
.scc-gallery .gallery-item,
.scc-gallery figure,
.scc-gallery .e-gallery-item { overflow: hidden; border-radius: 4px; margin: 0 !important; }
.scc-gallery img { transition: transform 1.15s cubic-bezier(.22,.61,.36,1); display: block; }
.scc-gallery .gallery-item:hover img,
.scc-gallery .e-gallery-item:hover img { transform: scale(1.08); }
.scc-gallery .gallery-icon { overflow: hidden; }
.scc-gallery figcaption, .scc-gallery .wp-caption-text {
    font-family: var(--scc-font-label); font-size: 11px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--scc-grey-500);
}

/* ---- 10f. Events editorial cards ---- */
.scc-event-card.elementor-column { transition: transform .5s ease; }
.scc-event-card.elementor-column:hover { transform: translateY(-8px); }
.scc-date-chip {
    display: inline-block; font-family: var(--scc-font-label);
    font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--scc-ink); background: var(--scc-gold); padding: 8px 16px; border-radius: 2px;
}

/* ---- 10f2. CEO / Founder message ("Finest Service" layout) ---- */
/* A contained portrait image beside the message + two CTAs, on a light
   background. Image and text stay fully editable in Elementor. */
.scc-ceo-photo img {
    width: 100%;
    max-width: 460px;
    height: auto;
    border-radius: 2px;
    display: block;
}
/* Two CTAs sit side by side under the message. */
.scc-ceo-btns .elementor-widget-wrap {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
.scc-ceo-btns .elementor-widget-button { width: auto; margin: 0; }
@media (max-width: 767px) {
    .scc-ceo-photo img { max-width: 100%; }
    .scc-ceo-btns .elementor-widget-button { width: 100%; }
    .scc-ceo-btns .elementor-widget-button .elementor-button { width: 100%; justify-content: center; }
}
/* Elementor editor: scroll-reveal sections must never stay hidden while
   editing. Elementor re-renders edited sections without re-triggering the
   IntersectionObserver, which would otherwise leave them at opacity:0 (blank
   white canvas). Force every reveal visible inside the editor. */
body.elementor-editor-active .scc-reveal {
    opacity: 1 !important;
    transform: none !important;
}

/* ---- 10g. Testimonials (big serif quotation marks) ---- */
.scc-quote.elementor-column { position: relative; }
.scc-quote.elementor-column::before {
    content: "\201C"; position: absolute; top: -26px; left: 4px;
    font-family: var(--scc-font-heading); font-size: 120px; line-height: 1;
    color: var(--scc-gold); opacity: .32; pointer-events: none;
}
.scc-quote .elementor-testimonial-content,
.scc-quote .elementor-testimonial__text {
    font-family: var(--scc-font-heading) !important; font-style: italic;
    font-size: 20px !important; line-height: 1.6 !important; color: var(--scc-heading);
}

/* ---- 10h. Statistics (animated counters) ---- */
.scc-stats .elementor-counter-number-wrapper {
    font-family: var(--scc-font-heading) !important; font-weight: 500;
    color: var(--scc-gold) !important;
}
.scc-stats .elementor-counter-number-wrapper,
.scc-stats .elementor-counter-number,
.scc-stats .elementor-counter-number-prefix,
.scc-stats .elementor-counter-number-suffix {
    font-size: clamp(44px, 5vw, 66px) !important; line-height: 1 !important;
}
.scc-stats .elementor-counter-title {
    font-family: var(--scc-font-label) !important; text-transform: uppercase;
    letter-spacing: 2.5px; font-size: 12px !important; font-weight: 600;
    color: rgba(255,255,255,.7) !important; margin-top: 14px !important;
}

/* ---- 10i. Contact / newsletter forms (theme-rendered, functional) ---- */
.scc-form { display: grid; gap: 16px; }
.scc-form .scc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.scc-form label { display: block; font-family: var(--scc-font-label); font-size: 11px;
    font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--scc-grey-600); margin-bottom: 8px; }
.scc-form input, .scc-form textarea, .scc-form select {
    width: 100%; border: 1px solid var(--scc-grey-200); background: #fff; border-radius: var(--scc-radius-sm);
    padding: 15px 16px; font-family: var(--scc-font-body); font-size: 15px; color: var(--scc-ink);
    transition: border-color var(--scc-transition), box-shadow var(--scc-transition);
}
.scc-form textarea { min-height: 150px; resize: vertical; }
.scc-form input:focus, .scc-form textarea:focus, .scc-form select:focus {
    outline: none; border-color: var(--scc-gold); box-shadow: 0 0 0 3px var(--scc-gold-soft);
}
.scc-form button { justify-self: start; }
.scc-form__note { font-size: 14px; color: var(--scc-grey-600); }
.scc-form__ok {
    background: var(--scc-forest); color: #fff; padding: 16px 20px; border-radius: var(--scc-radius-sm);
    font-size: 15px; margin-bottom: 8px;
}
.scc-form__err { background: #7a2b2b; color: #fff; padding: 14px 18px; border-radius: var(--scc-radius-sm); font-size: 15px; }

/* Newsletter (footer) — inline field + button */
.scc-news { display: flex; gap: 10px; max-width: 420px; margin-top: 8px; }
.scc-news input {
    flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
    color: #fff; padding: 14px 16px; border-radius: var(--scc-radius-sm); font-family: var(--scc-font-body); font-size: 14px;
}
.scc-news input::placeholder { color: rgba(255,255,255,.5); }
.scc-news input:focus { outline: none; border-color: var(--scc-gold); }
.scc-news button { padding: 14px 22px; }
.scc-news__msg { margin-top: 10px; font-size: 13px; color: var(--scc-gold-light); }

/* ---- 10i-c. Pay Online — secure checkout ([scc_pay_form]) ---------------- */
.scc-payx { max-width: 1060px; margin: 0 auto; color: var(--scc-ink); }
.scc-payx *, .scc-payx *::before, .scc-payx *::after { box-sizing: border-box; }

/* Header */
.scc-payx__head { text-align: center; margin-bottom: 40px; }
.scc-payx__eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--scc-font-label); font-size: 11px; font-weight: 700;
    letter-spacing: 2.6px; text-transform: uppercase; color: var(--scc-gold-dark);
}
.scc-payx__eyebrow svg { width: 13px; height: 13px; }
.scc-payx__title {
    font-family: var(--scc-font-heading); font-weight: 500; color: var(--scc-ink);
    font-size: clamp(34px, 5vw, 46px); line-height: 1.05; margin: 12px 0 0;
}
.scc-payx__rule { display: block; width: 54px; height: 2px; background: var(--scc-gold);
    margin: 18px auto 16px; border-radius: 2px; }
.scc-payx__sub { max-width: 560px; margin: 0 auto; color: var(--scc-text);
    font-size: 15px; line-height: 1.65; }

/* Grid */
.scc-payx__grid { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start; }

/* Left — reassurance */
.scc-payx__side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 100px; }
.scc-payx__visual {
    position: relative; aspect-ratio: 1.6 / 1; border-radius: 14px; overflow: hidden;
    padding: 22px; display: flex; flex-direction: column; justify-content: space-between;
    background: linear-gradient(135deg, #26251f 0%, #1a1a1a 55%, #2c231a 100%);
    box-shadow: var(--scc-shadow-sm); color: #fff;
}
.scc-payx__visual::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 85% 12%, rgba(255,94,23,.30), transparent 55%);
    pointer-events: none;
}
.scc-payx__chip {
    width: 42px; height: 30px; border-radius: 6px;
    background: linear-gradient(135deg, #e7c988, #b78a3f);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.scc-payx__chip::after { content: ""; position: absolute; }
.scc-payx__brands { position: absolute; top: 20px; right: 22px; display: flex; align-items: center; gap: 10px; }
.scc-payx__visa { font-family: var(--scc-font-heading); font-style: italic; font-weight: 700;
    font-size: 21px; letter-spacing: 1px; color: #fff; }
.scc-payx__mc { position: relative; display: inline-flex; width: 40px; height: 24px; }
.scc-payx__mc i { position: absolute; top: 0; width: 24px; height: 24px; border-radius: 50%; }
.scc-payx__mc i:first-child { left: 0; background: #eb001b; }
.scc-payx__mc i:last-child { right: 0; background: #f79e1b; mix-blend-mode: screen; }
.scc-payx__digits { position: relative; font-family: var(--scc-font-label); letter-spacing: 3px;
    font-size: 15px; color: rgba(255,255,255,.9); }

.scc-payx__safe { background: #fff; border: 1px solid #ece8df; border-radius: 12px; padding: 22px 22px 20px; }
.scc-payx__safe-title { font-family: var(--scc-font-label); font-size: 11px; font-weight: 700;
    letter-spacing: 1.8px; text-transform: uppercase; color: var(--scc-ink); margin: 0 0 14px; }
.scc-payx__safe ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.scc-payx__safe li { display: flex; gap: 11px; align-items: flex-start;
    font-size: 13px; line-height: 1.55; color: var(--scc-text); }
.scc-payx__safe li svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--scc-gold); margin-top: 1px; }

/* Right — form card */
.scc-payx__form {
    background: #fff; border: 1px solid #ece8df; border-radius: 14px;
    padding: 34px 34px 30px; box-shadow: var(--scc-shadow-sm);
}
.scc-payx__lbl { display: block; font-family: var(--scc-font-label); font-size: 10.5px; font-weight: 700;
    letter-spacing: 1.6px; text-transform: uppercase; color: #9a968c; margin: 0 0 9px; }
.scc-payx__form > .scc-payx__lbl,
.scc-payx__form > label.scc-payx__lbl { margin-top: 22px; }
.scc-payx__form > .scc-payx__paying { margin-top: 0; }

.scc-payx__ok { display: flex; gap: 10px; align-items: center; background: rgba(255,94,23,.08);
    border: 1px solid rgba(255,94,23,.25); border-radius: 8px; padding: 13px 15px; margin-bottom: 20px;
    font-size: 13.5px; color: var(--scc-ink); }
.scc-payx__ok svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--scc-gold-dark); }

/* Paying-in row */
.scc-payx__paying { display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 16px; border-bottom: 1px solid #f0ece3; }
.scc-payx__paying .scc-payx__lbl { margin: 0; }
.scc-payx__cur { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e2ddd2;
    border-radius: 7px; padding: 8px 13px; font-family: var(--scc-font-label); font-weight: 700;
    font-size: 12.5px; letter-spacing: .5px; color: var(--scc-ink); }
.scc-payx__cur svg { width: 15px; height: 15px; color: var(--scc-gold-dark); }

/* Method selector */
.scc-payx__methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.scc-payx__method {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 16px 10px; border: 1px solid #e2ddd2; border-radius: 10px; cursor: pointer;
    transition: border-color var(--scc-transition), box-shadow var(--scc-transition), background var(--scc-transition);
    font-family: var(--scc-font-label); font-size: 12.5px; font-weight: 600; color: var(--scc-text);
}
.scc-payx__method input { position: absolute; opacity: 0; width: 0; height: 0; }
.scc-payx__method svg { width: 24px; height: 24px; color: #b9b4a8; transition: color var(--scc-transition); }
.scc-payx__method:hover { border-color: #cfc8b9; }
.scc-payx__method.is-active { border-color: var(--scc-gold); background: rgba(255,94,23,.05);
    box-shadow: 0 0 0 1px var(--scc-gold) inset; color: var(--scc-ink); }
.scc-payx__method.is-active svg { color: var(--scc-gold-dark); }

/* Two-up fields */
.scc-payx__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.scc-payx__row2 .scc-payx__lbl { margin-top: 22px; }

/* Icon input */
.scc-payx__inp { display: flex; align-items: center; gap: 10px; border: 1px solid #e2ddd2;
    border-radius: 9px; padding: 0 14px; background: #fdfcfa;
    transition: border-color var(--scc-transition), box-shadow var(--scc-transition); }
.scc-payx__inp svg { width: 17px; height: 17px; flex: 0 0 auto; color: #b9b4a8; }
.scc-payx__inp input { flex: 1; border: 0 !important; background: transparent !important; outline: none;
    padding: 13px 0; font-family: var(--scc-font-label); font-size: 14.5px; color: var(--scc-ink);
    box-shadow: none !important; letter-spacing: 0; text-transform: none; font-weight: 400; }
.scc-payx__inp input::placeholder { color: #b4afa4; }
.scc-payx__inp:focus-within { border-color: var(--scc-gold); box-shadow: 0 0 0 3px rgba(255,94,23,.10); }
.scc-payx__inp:focus-within svg { color: var(--scc-gold-dark); }

/* Membership pills */
.scc-payx__pills { display: flex; flex-wrap: wrap; gap: 9px; }
.scc-payx__pill { position: relative; display: inline-flex; align-items: center; padding: 9px 16px;
    border: 1px solid #e2ddd2; border-radius: 999px; cursor: pointer;
    font-family: var(--scc-font-label); font-size: 12.5px; font-weight: 600; color: var(--scc-text);
    transition: all var(--scc-transition); }
.scc-payx__pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.scc-payx__pill:hover { border-color: #cfc8b9; }
.scc-payx__pill.is-active { border-color: var(--scc-gold); background: var(--scc-gold); color: #fff; }

/* Amount summary */
.scc-payx__summary { margin-top: 26px; border: 1px solid #e7e2d7; border-radius: 12px;
    padding: 20px 22px; background: #fbfaf7; }
.scc-payx__sumrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.scc-payx__sumrow > span { font-family: var(--scc-font-label); font-size: 14px; font-weight: 600; color: var(--scc-ink); }
.scc-payx__sumrow > span em { font-style: normal; font-weight: 500; color: #a09b90; font-size: 12px; }
.scc-payx__sumrow b { font-family: var(--scc-font-label); font-weight: 700; font-size: 15px; color: var(--scc-ink); }
.scc-payx__sumrow--amount input {
    width: 150px; text-align: right; border: 1px solid #e2ddd2 !important; border-radius: 8px;
    padding: 9px 12px !important; background: #fff !important; font-family: var(--scc-font-label);
    font-size: 15px; font-weight: 700; color: var(--scc-ink); outline: none; box-shadow: none !important;
    letter-spacing: 0; text-transform: none;
    -moz-appearance: textfield;
}
.scc-payx__sumrow--amount input::-webkit-outer-spin-button,
.scc-payx__sumrow--amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.scc-payx__sumrow--amount input:focus { border-color: var(--scc-gold) !important; box-shadow: 0 0 0 3px rgba(255,94,23,.10) !important; }
.scc-payx__dash { display: block; height: 1px; margin: 15px 0; border-top: 1px dashed #d9d3c6; }
.scc-payx__sumrow--total > span { font-size: 15px; }
.scc-payx__sumrow--total b { font-size: 19px; color: var(--scc-gold-dark); }

/* Pay button (override the theme's global orange button) */
.scc-payx__pay {
    width: 100%; margin-top: 20px; display: inline-flex; align-items: center; justify-content: center;
    gap: 11px; background: var(--scc-ink) !important; border: 1px solid var(--scc-ink) !important;
    color: #fff !important; font-family: var(--scc-font-label); font-weight: 600; font-size: 12.5px;
    letter-spacing: 1.8px; text-transform: uppercase; padding: 17px 28px; border-radius: 8px;
    cursor: pointer; transition: all var(--scc-transition);
}
.scc-payx__pay svg { width: 17px; height: 17px; }
.scc-payx__pay svg:first-child { color: var(--scc-gold-light); }
.scc-payx__pay:hover { background: #000 !important; transform: translateY(-2px); box-shadow: var(--scc-shadow-sm); }

/* SBP note */
.scc-payx__note { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px;
    padding: 16px 18px; background: #faf8f3; border-left: 3px solid var(--scc-gold);
    border-radius: 0 8px 8px 0; }
.scc-payx__note svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--scc-gold-dark); margin-top: 2px; }
.scc-payx__note p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #6c6a62; }
.scc-payx__note b { color: var(--scc-ink); font-weight: 700; }

@media (max-width: 900px) {
    .scc-payx__grid { grid-template-columns: 1fr; gap: 24px; }
    .scc-payx__side { position: static; flex-direction: row; flex-wrap: wrap; }
    .scc-payx__visual { flex: 1 1 260px; }
    .scc-payx__safe { flex: 1 1 260px; }
}
@media (max-width: 600px) {
    .scc-payx__form { padding: 24px 20px; }
    .scc-payx__methods { grid-template-columns: 1fr; }
    .scc-payx__row2 { grid-template-columns: 1fr; }
    .scc-payx__row2 .scc-payx__f:nth-child(2) .scc-payx__lbl { margin-top: 0; }
    .scc-payx__side { flex-direction: column; }
    .scc-payx__sumrow--amount input { width: 120px; }
}

/* ---- 10i-b. "Explore Experiences" — editable Elementor columns + JS carousel ---- */
/* Base (no JS / Elementor editor): a normal, fully-editable row of cards. */
.scc-xpe { overflow: hidden; }
.scc-xpe__img { overflow: hidden; }
.scc-xpe__img img { width: 100%; height: 340px; object-fit: cover; display: block; }

/* Enhanced carousel — JS adds .scc-xpe--on. Role-based positioning (prev /
   active / next / hidden) so it loops INFINITELY with no rewind/stop. */
.scc-xpe--on .scc-xpe__track > .elementor-container { position: relative; max-width: 100% !important; }
.scc-xpe--on .scc-xpe__track .elementor-column {
    position: absolute !important; top: 0; left: 24%;
    width: 52% !important; max-width: 52% !important;
    opacity: 0; transform: scale( .9 ); transform-origin: top center; cursor: pointer;
    transition: left .65s cubic-bezier(.22,.61,.36,1), opacity .6s ease, transform .65s cubic-bezier(.22,.61,.36,1);
}
.scc-xpe--on .scc-xpe__track .elementor-column.is-active { left: 24%;  opacity: 1;  transform: scale( 1 );  z-index: 3; cursor: default; }
.scc-xpe--on .scc-xpe__track .elementor-column.is-prev   { left: -28%; opacity: .5; transform: scale( .9 ); z-index: 1; }
.scc-xpe--on .scc-xpe__track .elementor-column.is-next   { left: 76%;  opacity: .5; transform: scale( .9 ); z-index: 1; }
.scc-xpe--on .scc-xpe__track .elementor-column.is-hidden { left: 24%;  opacity: 0; transform: scale( .85 ); z-index: 0; pointer-events: none; }
.scc-xpe--on .scc-xpe__img img { height: 440px; }
.scc-xpe--on .scc-xpe__track .elementor-column.is-active:hover .scc-xpe__img img { transform: scale( 1.03 ); transition: transform 1.1s ease; }
/* fade inactive captions (keep their height so the column size stays stable) */
.scc-xpe--on .scc-xpe__track .elementor-column:not(.is-active) .elementor-widget-heading,
.scc-xpe--on .scc-xpe__track .elementor-column:not(.is-active) .elementor-widget-text-editor,
.scc-xpe--on .scc-xpe__track .elementor-column:not(.is-active) .elementor-widget-button { opacity: 0; transition: opacity .3s; }
/* drag with cursor / swipe with a finger */
.scc-xpe--on .scc-xpe__track { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.scc-xpe--on .scc-xpe__track.is-grabbing { cursor: grabbing; }
.scc-xpe--on .scc-xpe__img { overflow: hidden; }
.scc-xpe--on .scc-xpe__img img { -webkit-user-drag: none; user-drag: none; }

.scc-xpe__nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 26px; width: 100%; }
.scc-xpe__prev, .scc-xpe__next { background: none; border: none; padding: 6px 10px; cursor: pointer; font-size: 22px; line-height: 1; color: var(--scc-ink); transition: color .3s; }
.scc-xpe__prev:hover, .scc-xpe__next:hover { color: var(--scc-gold-dark); }
.scc-xpe__progress { position: relative; width: 220px; height: 2px; background: rgba(26,26,26,.16); }
.scc-xpe__progress span { position: absolute; left: 0; top: 0; height: 100%; background: var(--scc-ink); width: 20%; transition: width .5s ease; }
@media (max-width: 782px) {
    .scc-xpe__img img { height: 280px; }
    .scc-xpe--on .scc-xpe__img img { height: 320px; }
    .scc-xpe--on .scc-xpe__track .elementor-column { width: 84% !important; max-width: 84% !important; left: 8%; }
    .scc-xpe--on .scc-xpe__track .elementor-column.is-active { left: 8%; }
    .scc-xpe--on .scc-xpe__track .elementor-column.is-prev   { left: -74%; }
    .scc-xpe--on .scc-xpe__track .elementor-column.is-next   { left: 90%; }
    .scc-xpe--on .scc-xpe__track .elementor-column.is-hidden { left: 8%; }
    .scc-xpe__progress { width: 150px; }
}

/* ---- 10j. Google map frame ---- */
.scc-map iframe, .scc-map .elementor-widget-google_maps iframe { min-height: 340px; filter: grayscale(.25) contrast(1.02); }

/* ---- 10k. Elementor heading weight (luxury serif at 500) ---- */
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title { font-weight: 500; }

/* Give Elementor icon-boxes / image-boxes on light sections a refined divider look */
.scc-line-top.elementor-element { border-top: 1px solid var(--scc-grey-200); }

/* ---- 10l. Responsive tweaks for luxury components ---- */
@media (max-width: 782px) {
    .scc-form .scc-form__row { grid-template-columns: 1fr; }
    .scc-hero__sub { margin-bottom: 30px; }
    .scc-quote.elementor-column::before { font-size: 90px; top: -18px; }
    .scc-news { max-width: 100%; }
}

/* =========================================================================
   §11  MEMBERSHIP CTA  (.scc-mcta) — left video + right Contact Form 7,
        rendered just before the footer on the home page.
   ====================================================================== */
.scc-mcta {
    --mc-ink:#141209; --mc-brass:#FF5E17; --mc-brass-soft:#FF8A4D; --mc-brass-dark:#C2450F;
    --mc-cream:#f4efe3; --mc-muted:#8a8372; --mc-ink-muted:#c9c3b3; --mc-line:rgba(255,94,23,.28);
    /* Boxed (not full-width): the page background shows on the sides, the band
       sits centred as a rounded card. */
    background: transparent;
    padding: clamp(28px, 5vw, 60px) clamp(16px, 4vw, 48px);
}
.scc-mcta * { box-sizing: border-box; }
.scc-mcta__wrap {
    max-width: var(--scc-container); margin: 0 auto; display: grid;
    grid-template-columns: 1.05fr 1fr; min-height: 640px; position: relative;
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 50px 90px -55px rgba(20,18,9,.45);
}

/* ---- LEFT (video / gradient panel) ---- */
.scc-mcta__left {
    position: relative; overflow: hidden; padding: 64px 60px 108px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,94,23,.10), transparent 45%),
        linear-gradient(180deg, #171409 0%, #0f0d07 65%, #0a0904 100%);
}
.scc-mcta__left::before {
    content: ""; position: absolute; inset: 0; opacity: .6; z-index: 1;
    background-image: repeating-linear-gradient(100deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 7px);
}
.scc-mcta__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.scc-mcta__scrim { position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(10,9,4,.42) 0%, rgba(10,9,4,.32) 40%, rgba(10,9,4,.82) 100%); }
.scc-mcta__left-inner { position: relative; z-index: 2; }
/* Video set: keep a dark overlay so the headline / stats stay readable
   over the (bright) footage. */
.scc-mcta__left.has-video::before { display: none; }
.scc-mcta__left.has-video .scc-mcta__scrim { background: linear-gradient(180deg, rgba(12,10,6,.55) 0%, rgba(12,10,6,.48) 42%, rgba(12,10,6,.84) 100%); }
.scc-mcta__left.has-video .scc-mcta__left-inner { text-shadow: 0 2px 20px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5); }
.scc-mcta__eyebrow { color: var(--mc-brass); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; margin: 0 0 18px; font-weight: 500; }
.scc-mcta__headline { font-family: 'Playfair Display', serif; font-weight: 500; color: var(--mc-cream);
    font-size: clamp(32px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -.5px; margin: 0 0 26px; }
.scc-mcta__headline em { font-style: italic; color: var(--mc-brass-soft); font-weight: 400; }
.scc-mcta__stats { display: flex; gap: 36px; padding-top: 30px; border-top: 1px solid var(--mc-line); flex-wrap: wrap; }
.scc-mcta__stat-num { font-family: 'Playfair Display', serif; color: var(--mc-brass-soft); font-size: 26px; margin: 0; }
.scc-mcta__stat-label { color: var(--mc-muted); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; margin: 4px 0 0; }

/* ---- RIGHT (form panel) ---- */
.scc-mcta__right { background: var(--mc-cream); padding: 56px 56px 44px; display: flex; flex-direction: column; position: relative; }
.scc-mcta__steps { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
.scc-mcta__step { display: flex; align-items: baseline; gap: 9px; }
.scc-mcta__step .idx { font-family: 'Playfair Display', serif; font-style: italic; font-size: 13px; color: var(--mc-brass-dark); }
.scc-mcta__step .lbl { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mc-ink); font-weight: 600; }
.scc-mcta__step.is-inactive .lbl { color: var(--mc-muted); font-weight: 500; }
.scc-mcta__step.is-inactive .idx { color: var(--mc-muted); }
.scc-mcta__rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--mc-brass), rgba(255,94,23,.15)); }
.scc-mcta__title { font-family: 'Playfair Display', serif; font-size: 26px; color: var(--mc-ink); margin: 0 0 6px; font-weight: 500; }
.scc-mcta__sub { color: var(--mc-muted); font-size: 13.5px; margin: 0 0 32px; font-weight: 400; }

/* ---- Contact Form 7 fields, styled to match the design ---- */
.scc-mcta__form .scc-mcta__row { display: flex; gap: 20px; }
.scc-mcta .scc-field { position: relative; display: block; margin-bottom: 26px; flex: 1; }
.scc-mcta .scc-field .wpcf7-form-control-wrap { display: block; margin: 0; }
.scc-mcta .scc-field input,
.scc-mcta .scc-field select {
    width: 100%; background: transparent; border: none; border-bottom: 1px solid #d8cfb8;
    padding: 10px 2px 12px; font-size: 15px; font-family: 'Manrope', 'Inter', sans-serif;
    color: var(--mc-ink); outline: none; border-radius: 0; transition: border-color .25s ease; box-shadow: none;
}
.scc-mcta .scc-field input::placeholder { color: transparent; }
.scc-mcta .scc-field input:focus { border-color: var(--mc-brass-dark); }
.scc-mcta .scc-field label {
    position: absolute; left: 2px; top: 11px; color: var(--mc-muted);
    font-size: 14.5px; font-weight: 400; pointer-events: none; transition: all .2s ease;
}
.scc-mcta .scc-field:focus-within label,
.scc-mcta .scc-field:has( input:not(:placeholder-shown) ) label {
    top: -11px; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--mc-brass-dark); font-weight: 600;
}
/* select-club box */
.scc-mcta .scc-field--select { margin-bottom: 26px; }
.scc-mcta .scc-field--select select {
    border: 1px solid #d8cfb8; border-radius: 2px; padding: 15px 42px 15px 18px;
    font-family: 'Playfair Display', serif; font-size: 15px; color: var(--mc-ink); font-weight: 500; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23C2450F' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
}
.scc-mcta .scc-field--select select:hover { border-color: var(--mc-brass-dark); background-color: rgba(255,94,23,.06); }
.scc-mcta__fine { font-size: 11.5px; line-height: 1.6; color: var(--mc-muted); margin: 4px 0 22px; }
.scc-mcta__fine a { color: var(--mc-brass-dark); text-decoration: none; border-bottom: 1px solid var(--mc-brass-dark); }
/* submit */
.scc-mcta input.wpcf7-submit,
.scc-mcta .scc-mcta__btn {
    width: 100%; border: none; padding: 18px; cursor: pointer; border-radius: 2px;
    background: linear-gradient(180deg, #FF7A3C, var(--mc-brass-dark)); color: #171308;
    font-family: 'Manrope', 'Inter', sans-serif; font-size: 12.5px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600;
    box-shadow: 0 10px 24px -12px rgba(140,109,58,.65); transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.scc-mcta input.wpcf7-submit:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 14px 30px -12px rgba(140,109,58,.8); }
.scc-mcta input.wpcf7-submit:active { transform: translateY(0); }
.scc-mcta__share { text-align: center; font-size: 11px; color: var(--mc-muted); margin: 16px 0 0; }
.scc-mcta__notice { color: var(--mc-brass-dark); font-size: 13px; padding: 18px; border: 1px dashed var(--mc-line); border-radius: 2px; }
/* CF7 feedback */
.scc-mcta .wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 12px 16px; border-radius: 2px; font-size: 12.5px; }
.scc-mcta .wpcf7-not-valid-tip { color: #b3402e; font-size: 11px; margin-top: 4px; }
.scc-mcta .wpcf7 .wpcf7-spinner { margin: 6px auto 0; }
.scc-mcta .wpcf7-not-valid { border-bottom-color: #c96a58 !important; }

@media (max-width: 860px) {
    .scc-mcta__wrap { grid-template-columns: 1fr; min-height: 0; }
    .scc-mcta__left { padding: 46px 30px; min-height: 340px; order: 1; }
    .scc-mcta__right { padding: 40px 30px 36px; order: 2; }
    .scc-mcta__form .scc-mcta__row { flex-direction: column; gap: 0; }
    .scc-mcta__stats { gap: 24px; }
}

/* =========================================================================
   §12  FOOTER — bespoke premium: centred letterhead + italic tagline, refined
        columns, inline newsletter, gold divider, subtle top glow.
   ====================================================================== */
.scc-footer--lux {
    --f-gold: var(--scc-gold, #FF5E17);
    --f-text: #a7a194; --f-link: #bdb7a9;
    position: relative; overflow: hidden; padding: 0; color: var(--f-text);
    background: linear-gradient(180deg, #17130d 0%, #100e0a 100%);
    border-top: 1px solid rgba(255,94,23,.22);
}
.scc-footer--lux .scc-luxf__glow {
    position: absolute; top: -170px; left: 50%; transform: translateX(-50%);
    width: 900px; height: 380px; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255,94,23,.13), transparent 68%);
}
.scc-footer--lux .scc-luxf__inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: clamp(52px,6vw,74px) clamp(24px,5vw,56px) 0; }

/* letterhead */
.scc-footer--lux .scc-luxf__crest { display: flex; align-items: center; justify-content: center; gap: 26px; }
.scc-footer--lux .scc-luxf__rule { height: 1px; width: min(220px,26vw); background: linear-gradient(90deg, transparent, rgba(255,94,23,.55)); }
.scc-footer--lux .scc-luxf__rule:last-child { background: linear-gradient(90deg, rgba(255,94,23,.55), transparent); }
.scc-footer--lux .scc-luxf__mark { display: inline-flex; }
.scc-footer--lux .scc-luxf__mark img { max-height: 48px; width: auto; display: block; }
.scc-footer--lux .scc-luxf__wordmark { font-family: 'Playfair Display', serif; font-size: 30px; color: #f4efe3; letter-spacing: .5px; }
.scc-footer--lux .scc-luxf__tagline { text-align: center; font-family: 'Playfair Display', serif; font-style: italic; font-size: 16px; color: var(--f-gold); margin: 18px 0 0; letter-spacing: .3px; }

/* grid */
.scc-footer--lux .scc-luxf__grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.4fr; gap: 48px;
    padding: clamp(44px,5vw,60px) 0;
}
.scc-footer--lux .scc-luxf__h {
    font-family: 'Playfair Display', serif; font-weight: 500; font-size: 17px; color: #f4efe3;
    margin: 0 0 22px; position: relative; padding-bottom: 14px;
}
.scc-footer--lux .scc-luxf__h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background: var(--f-gold); }

/* brand */
.scc-footer--lux .scc-luxf__about { font-size: 14.5px; line-height: 1.8; color: var(--f-text); margin: 0 0 26px; max-width: 340px; }
.scc-footer--lux .scc-luxf__social { display: flex; gap: 12px; flex-wrap: wrap; }
.scc-footer--lux .scc-luxf__social a {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid rgba(255,94,23,.35); transition: .22s ease;
}
.scc-footer--lux .scc-luxf__social svg { width: 15px; height: 15px; fill: var(--f-gold); transition: fill .22s ease; }
.scc-footer--lux .scc-luxf__social a:hover { background: var(--f-gold); border-color: var(--f-gold); transform: translateY(-2px); }
.scc-footer--lux .scc-luxf__social a:hover svg { fill: #17130d; }

/* links */
.scc-footer--lux .scc-luxf__links { list-style: none; margin: 0; padding: 0; }
.scc-footer--lux .scc-luxf__links li { margin: 0 0 13px; }
.scc-footer--lux .scc-luxf__links a { position: relative; color: var(--f-link); text-decoration: none; font-size: 14.5px; transition: color .2s ease; }
.scc-footer--lux .scc-luxf__links a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: var(--f-gold); transition: width .25s ease; }
.scc-footer--lux .scc-luxf__links a:hover { color: #fff; }
.scc-footer--lux .scc-luxf__links a:hover::after { width: 100%; }

/* contact */
.scc-footer--lux .scc-luxf__meta { list-style: none; margin: 0 0 20px; padding: 0; }
.scc-footer--lux .scc-luxf__meta li { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; font-size: 14.5px; color: var(--f-text); line-height: 1.6; }
.scc-footer--lux .scc-luxf__meta svg { width: 16px; height: 16px; fill: var(--f-gold); flex: 0 0 auto; margin-top: 3px; }
.scc-footer--lux .scc-luxf__meta a { color: var(--f-link); text-decoration: none; transition: color .2s ease; }
.scc-footer--lux .scc-luxf__meta a:hover { color: #fff; }
.scc-footer--lux .scc-luxf__hours { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.scc-footer--lux .scc-luxf__hours span { font-size: 13px; color: #8f897c; letter-spacing: .3px; }

/* newsletter */
.scc-footer--lux .scc-luxf__news-sub { font-size: 13.5px; line-height: 1.7; color: var(--f-text); margin: 0 0 20px; }
.scc-footer--lux .scc-news { display: flex; align-items: center; border-bottom: 1px solid rgba(255,94,23,.4); }
.scc-footer--lux .scc-news input[type="email"] { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #f4efe3; font-family: 'Manrope', sans-serif; font-size: 14.5px; padding: 12px 4px; }
.scc-footer--lux .scc-news input::placeholder { color: #7f7a6e; }
.scc-footer--lux .scc-news .scc-btn { background: transparent; border: none; color: var(--f-gold); cursor: pointer; font-family: 'Manrope', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; padding: 10px 2px 10px 16px; transition: color .2s ease; }
.scc-footer--lux .scc-news .scc-btn:hover { color: #f4efe3; }
.scc-footer--lux .scc-news__msg { color: var(--f-gold); font-size: 13px; margin-top: 12px; }

/* divider + bottom bar */
.scc-footer--lux .scc-luxf__divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 20%, rgba(255,255,255,.12) 80%, transparent); }
.scc-footer--lux .scc-luxf__bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 24px 0 40px; }
.scc-footer--lux .scc-luxf__copy { margin: 0; font-size: 13px; color: #837d70; letter-spacing: .2px; }
.scc-footer--lux .scc-luxf__note { margin: 0; font-size: 12.5px; color: #6f6a5e; font-family: 'Playfair Display', serif; font-style: italic; letter-spacing: .3px; }
.scc-footer--lux .scc-luxf__legal { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.scc-footer--lux .scc-luxf__legal a { color: #837d70; text-decoration: none; font-size: 13px; transition: color .2s ease; }
.scc-footer--lux .scc-luxf__legal a:hover { color: var(--f-gold); }

@media (max-width: 960px) {
    .scc-footer--lux .scc-luxf__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .scc-footer--lux .scc-luxf__brand { grid-column: 1 / -1; }
    .scc-footer--lux .scc-luxf__about { max-width: none; }
}
@media (max-width: 560px) {
    .scc-footer--lux .scc-luxf__grid { grid-template-columns: 1fr; gap: 34px; }
    .scc-footer--lux .scc-luxf__crest { gap: 14px; }
    .scc-footer--lux .scc-luxf__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* =========================================================================
   §12b  ELEMENTOR-BUILT FOOTER (page set as scc_footer_page) — premium polish
   so the editable Elementor footer matches the bespoke look.
   ====================================================================== */
.scc-site-footer--elementor { --f-gold: var(--scc-gold, #FF5E17); background: #17130d; }
/* keep the COLUMN rows in a centred column so wide screens don't scatter them.
   The first (letterhead) section is left full-width so the user's giant heading
   renders exactly as they set it in Elementor. */
.scc-site-footer--elementor .elementor-top-section:not(:first-of-type) .elementor-container { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; }
.scc-site-footer--elementor .elementor-top-section > .elementor-container > .elementor-column { align-content: flex-start; }
.scc-site-footer--elementor .elementor-widget-wrap { align-content: flex-start; }
/* even column rhythm + comfortable row gap */
.scc-site-footer--elementor .elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 0 18px; }
/* force circular social icons for the premium look */
.scc-site-footer--elementor .scc-elf__soc .elementor-social-icon { border-radius: 50% !important; }
/* letterhead — force the logo centred, with gold hairlines flanking it */
.scc-site-footer--elementor .scc-elf__logo .elementor-widget-container { text-align: center; position: relative; }
.scc-site-footer--elementor .scc-elf__logo img { max-height: 54px; width: auto; display: inline-block; }
.scc-site-footer--elementor .scc-elf__logo .elementor-widget-container::before,
.scc-site-footer--elementor .scc-elf__logo .elementor-widget-container::after { content: ""; position: absolute; top: 50%; width: 180px; height: 1px; }
.scc-site-footer--elementor .scc-elf__logo .elementor-widget-container::before { right: calc(50% + 128px); background: linear-gradient(90deg, transparent, rgba(255,94,23,.5)); }
.scc-site-footer--elementor .scc-elf__logo .elementor-widget-container::after { left: calc(50% + 128px); background: linear-gradient(90deg, rgba(255,94,23,.5), transparent); }
@media (max-width: 820px) {
    .scc-site-footer--elementor .scc-elf__logo .elementor-widget-container::before,
    .scc-site-footer--elementor .scc-elf__logo .elementor-widget-container::after { display: none; }
}
.scc-site-footer--elementor .scc-elf__tag .elementor-heading-title { font-style: italic; }
/* serif column headings with a gold underline accent */
.scc-site-footer--elementor .scc-elf__h .elementor-heading-title { position: relative; display: inline-block; padding-bottom: 14px; }
.scc-site-footer--elementor .scc-elf__h .elementor-heading-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background: var(--f-gold); }
/* explore links — hide bullet, animated gold underline on hover */
.scc-site-footer--elementor .scc-elf__links .elementor-icon-list-icon { display: none; }
.scc-site-footer--elementor .scc-elf__links .elementor-icon-list-text { position: relative; transition: color .2s ease; }
.scc-site-footer--elementor .scc-elf__links .elementor-icon-list-text::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: var(--f-gold); transition: width .25s ease; }
.scc-site-footer--elementor .scc-elf__links a:hover .elementor-icon-list-text { color: #fff; }
.scc-site-footer--elementor .scc-elf__links a:hover .elementor-icon-list-text::after { width: 100%; }
/* contact list — the icon-list data has NO icon_size set, so cap it here (else
   the location / phone / envelope icons render huge). CSS-only; page 32 untouched. */
.scc-site-footer--elementor .scc-elf__contact .elementor-icon-list-items { display: flex; flex-direction: column; gap: 13px; }
.scc-site-footer--elementor .scc-elf__contact .elementor-icon-list-item { align-items: flex-start; }
.scc-site-footer--elementor .scc-elf__contact .elementor-icon-list-icon {
    padding-top: 2px; flex: 0 0 auto; width: 20px; text-align: left; margin-right: 2px;
}
.scc-site-footer--elementor .scc-elf__contact .elementor-icon-list-icon i,
.scc-site-footer--elementor .scc-elf__contact .elementor-icon-list-icon svg {
    font-size: 15px !important; width: 16px !important; height: 16px !important; line-height: 1 !important;
}
.scc-site-footer--elementor .scc-elf__contact .elementor-icon-list-text { font-size: 14px; line-height: 1.5; }
.scc-site-footer--elementor .scc-elf__contact a:hover .elementor-icon-list-text { color: #fff; }
/* social — outlined gold circles that fill on hover */
.scc-site-footer--elementor .scc-elf__soc .elementor-social-icon { background-color: transparent !important; border: 1px solid rgba(255,94,23,.4); width: 40px; height: 40px; transition: background-color .2s ease, transform .2s ease; }
.scc-site-footer--elementor .scc-elf__soc .elementor-social-icon:hover { background-color: var(--f-gold) !important; transform: translateY(-2px); }
.scc-site-footer--elementor .scc-elf__soc .elementor-social-icon:hover i,
.scc-site-footer--elementor .scc-elf__soc .elementor-social-icon:hover svg { color: #17130d !important; fill: #17130d !important; }
/* newsletter (the [scc_newsletter] .scc-news markup) */
.scc-site-footer--elementor .scc-news { display: flex; align-items: center; border-bottom: 1px solid rgba(255,94,23,.4); margin-top: 6px; }
.scc-site-footer--elementor .scc-news input[type="email"] { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #f4efe3; font-family: 'Manrope', sans-serif; font-size: 14.5px; padding: 12px 4px; }
.scc-site-footer--elementor .scc-news input::placeholder { color: #7f7a6e; }
.scc-site-footer--elementor .scc-news .scc-btn { background: transparent; border: none; color: var(--f-gold); cursor: pointer; font-family: 'Manrope', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; padding: 10px 2px 10px 16px; transition: color .2s ease; }
.scc-site-footer--elementor .scc-news .scc-btn:hover { color: #f4efe3; }
.scc-site-footer--elementor .scc-news__msg { color: var(--f-gold); font-size: 13px; margin-top: 10px; }

/* =========================================================================
   §13  REELS widget (knf-reels) — the theme's global button styling was
        breaking the round mute / arrow buttons (padding, hover lift). Reset
        them + add the brand-orange accent so they show correctly.
   ====================================================================== */
.knfr-section .knfr-mute,
.knfr-section .knfr-btn {
    padding: 0 !important;
    min-height: 0 !important;
    gap: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: background .3s ease, color .3s ease, border-color .3s ease !important;
}
.knfr-section .knfr-mute { width: 38px !important; height: 38px !important; border: 0 !important; border-radius: 50% !important; background: rgba(0,0,0,.5) !important; color: #fff !important; }
.knfr-section .knfr-mute:hover { background: var(--scc-gold) !important; color: #fff !important; transform: none !important; }
.knfr-section .knfr-mute.is-on { background: var(--scc-gold) !important; color: #fff !important; }
.knfr-section .knfr-mute svg { width: 18px !important; height: 18px !important; }
.knfr-section .knfr-btn { width: 40px !important; height: 40px !important; border: 1px solid #e5e5e5 !important; border-radius: 50% !important; background: #fff !important; color: #171717 !important; }
.knfr-section .knfr-btn:hover { background: var(--scc-gold) !important; color: #fff !important; border-color: var(--scc-gold) !important; transform: none !important; }
.knfr-section .knfr-ig:hover { background: var(--scc-gold) !important; border-color: var(--scc-gold) !important; color: #fff !important; }
.knfr-section .knfr-shop:hover { background: var(--scc-gold) !important; color: #fff !important; }

/* =========================================================================
   §14  MOBILE RESPONSIVE — home + global safeguards
   ====================================================================== */
@media (max-width: 767px) {
    /* Nothing may exceed the screen width. */
    html, body { overflow-x: hidden; max-width: 100%; }
    #scc-main, .elementor, .elementor-section, .elementor-top-section { max-width: 100vw; }

    /* Stack standard Elementor columns and shrink boxed containers to the phone.
       (Carousel slides are INNER columns — not .elementor-top-column — so the
       Explore carousel is untouched.) */
    .elementor-column.elementor-top-column { width: 100% !important; }
    .elementor-section > .elementor-container { max-width: 100% !important; width: 100% !important; }
    /* neutralise Elementor's column-gap negative margins (can push content past the edge) */
    .elementor-column-gap-extended, .elementor-column-gap-wide, .elementor-column-gap-wider,
    .elementor-column-gap-narrow, .elementor-column-gap-default { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
    .elementor-column-gap-extended > .elementor-column > .elementor-element-populated,
    .elementor-column-gap-wide > .elementor-column > .elementor-element-populated { padding-left: 0 !important; padding-right: 0 !important; }
    .elementor-widget-container { max-width: 100%; }
    .elementor-widget-text-editor, .elementor-widget-text-editor p,
    .elementor-widget-heading .elementor-heading-title { overflow-wrap: break-word; word-wrap: break-word; max-width: 100% !important; }
    .elementor-widget-image img { height: auto; }

    /* The footer letterhead heading is huge on desktop (as the user set it) —
       scale it down on phones so it never overflows. */
    .scc-site-footer--elementor .elementor-widget-heading:not(.scc-elf__h) .elementor-heading-title { font-size: clamp(26px, 8.5vw, 40px) !important; line-height: 1.15 !important; }
    .scc-site-footer--elementor .elementor-top-section:first-of-type { padding-left: 8px !important; padding-right: 8px !important; }

    /* Never allow a sideways scroll. */
    html, body { overflow-x: hidden; max-width: 100%; }
}
@media (max-width: 480px) {
    /* comfortable body padding on small phones */
    .elementor-section > .elementor-container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* =========================================================================
   §15  "THE CLUB" / ABOUT-US PAGE — premium sections
        (brand banner · Vision & Mission split · Why-Shapes cards · Our Team ·
         auto-rotating Reviews). Text / images stay Elementor-editable; this
         delivers the premium look. JS: assets/js/reviews.js.
   ====================================================================== */

/* ---- 15a. Brand banner (zerobondny.com "same to same") ----------------------
   Fills exactly ONE screen below the sticky header. Each panel holds a tightly
   grouped, vertically-centred pair of gold serif letters with a subtle
   alternating stagger (the reference "wave"), over a photo revealed on hover.
   The bottom nav row = left-aligned label + a small round emblem icon.        */
.scc-club-banner {
    --scc-club-headh: 74px;                       /* measured height of the sticky site header at page load */
    /* flat navy so the staggered cells never seam against the field */
    background: #181630 !important;
    overflow: hidden;
    padding: 0 !important;                         /* drop the section's 54px top/bottom padding */
}
.scc-club-banner > .elementor-container { max-width: 100% !important; padding: 0 !important; }
.scc-club-banner > .elementor-container > .elementor-column > .elementor-element-populated {
    min-height: calc(100vh - var(--scc-club-headh));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
}
/* the sticky header already carries the SHAPES logo top-left (like the
   reference), so the in-banner wordmark is redundant — hide it. */
.scc-club-wordmark { display: none !important; }

/* ---- the letter cells: each stretches full height and centres its pair ---- */
.scc-club-banner .scc-club-brandrow { flex: 1 1 auto !important; display: flex; align-items: stretch; }
.scc-club-brandrow > .elementor-container { max-width: 100% !important; margin: 0; flex: 1 1 auto; align-items: stretch; }
.scc-club-letcol { position: relative; overflow: hidden; display: flex; border-right: 1px solid rgba(255,255,255,0.07); }
.scc-club-letcol:last-child { border-right: 0; }
.scc-club-letcol > .elementor-element-populated {
    position: relative; flex: 1 1 auto;
    min-height: 50vh;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: clamp(6px, 1.4vh, 22px);
    padding: 40px 0 !important;
}
/* subtle alternating stagger between panels — moves the whole cell (photo +
   veil + letters together); overflow-hidden clips the small edge offset. */
.scc-club-letcol:nth-child(odd)  > .elementor-element-populated { transform: translateY(-26px); }
.scc-club-letcol:nth-child(even) > .elementor-element-populated { transform: translateY( 26px); }
/* clean navy field by default (photo fully hidden); revealed ONLY on hover. */
.scc-club-letcol > .elementor-element-populated::before {
    content: ""; position: absolute; inset: -40px 0; z-index: 0;
    background: #181630;                           /* same flat navy as the field → no seam */
    opacity: 1;
    transition: opacity .55s ease;
}
.scc-club-letcol:hover > .elementor-element-populated::before { opacity: .28; }
.scc-club-letcol .elementor-widget { position: relative; z-index: 1; margin: 0 !important; }
.scc-club-letcol .elementor-heading-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(56px, 12vw, 188px) !important;
    line-height: .96 !important;
    margin: 0;
    background: linear-gradient(180deg, #EEDBA9 0%, #D9BB79 46%, #C29A54 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    transition: transform .6s ease;
}
.scc-club-letcol:hover .elementor-heading-title { transform: scale(1.06); }

/* ---- bottom nav row: left-aligned label + round emblem icon ---- */
.scc-club-nav { border-top: 1px solid rgba(255,255,255,0.12); flex: 0 0 auto; }
.scc-club-nav > .elementor-container { max-width: 100% !important; }
.scc-club-navcell { border-right: 1px solid rgba(255,255,255,0.06); }
.scc-club-navcell:last-child { border-right: 0; }
.scc-club-navcell > .elementor-element-populated { padding: 0 !important; }
.scc-club-navcell .elementor-widget-button,
.scc-club-navcell .elementor-button-wrapper { width: 100%; }
.scc-club-navcell .elementor-button {
    display: flex !important; align-items: center; justify-content: flex-start;
    width: 100%; gap: 12px;
    padding: 24px clamp(20px, 3vw, 40px) !important;
    background: transparent !important;
}
.scc-club-navcell .elementor-button:hover { transform: none; background: rgba(255,255,255,.025) !important; }
.scc-club-navcell .elementor-button .elementor-button-text { color: #D8CBAB; transition: color .3s ease; }
.scc-club-navcell .elementor-button:hover .elementor-button-text { color: #FF8A4D; }
/* the little circular seal, right of the label (like the reference tabs) */
.scc-club-navcell .elementor-button::after {
    content: ""; display: inline-block; width: 19px; height: 19px; flex: 0 0 19px;
    border: 1px solid rgba(216,203,171,.5); border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(216,203,171,.92) 0 2px, transparent 2.6px);
    transition: border-color .35s ease, background .35s ease, transform .5s ease;
}
.scc-club-navcell .elementor-button:hover::after {
    border-color: #FF8A4D;
    background: radial-gradient(circle at 50% 50%, #FF8A4D 0 2px, transparent 2.6px);
    transform: rotate(180deg) scale(1.08);
}

@media (hover: none) {
    /* touch can't hover — stay clean by default, reveal the photo on tap */
    .scc-club-letcol > .elementor-element-populated::before { opacity: 1; }
    .scc-club-letcol:active > .elementor-element-populated::before { opacity: .28; }
}

/* ---- 15b. Vision & Mission split ---- */
.scc-club-vm-split {
    position: relative; border-radius: 20px; overflow: hidden;
    box-shadow: 0 50px 90px -50px rgba(28,26,22,0.35);
}
.scc-club-vm-split > .elementor-container { max-width: 100% !important; }
.scc-vmp { position: relative; overflow: hidden; }
.scc-vmp--dark  { flex: 0 0 54%; max-width: 54%; }
.scc-vmp--light { flex: 0 0 46%; max-width: 46%; }
.scc-vmp > .elementor-element-populated { position: relative; z-index: 1; }
.scc-vmp__icon .elementor-icon {
    width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,94,23,0.12); border: 1px solid rgba(255,94,23,0.34);
    font-size: 22px;
}
.scc-vmp--light .scc-vmp__icon .elementor-icon { background: rgba(255,94,23,0.08); }
.scc-vmp::after {
    position: absolute; bottom: -34px; right: -6px; z-index: 0;
    font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
    letter-spacing: 2px; pointer-events: none;
}
.scc-vmp--dark::after  { content: "VISION";  font-size: 118px; -webkit-text-stroke: 1px rgba(255,255,255,0.06); color: transparent; }
.scc-vmp--light::after { content: "MISSION"; font-size: 92px;  -webkit-text-stroke: 1px rgba(26,26,26,0.07);   color: transparent; }
.scc-club-vm-split::after {
    content: "&"; position: absolute; top: 50%; left: 54%;
    transform: translate(-50%, -50%); z-index: 5;
    width: 62px; height: 62px; border-radius: 50%;
    background: #FF5E17; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 22px;
    box-shadow: 0 18px 40px -14px rgba(255,94,23,0.6), 0 0 0 6px #F8F7F3;
}
/* Give the mission (light) column extra left room on desktop so the centre
   "&" seam badge never overlaps "Family-Friendly Home". !important also beats
   the leaked Site-Footer (post 32) rules that share this column's element id. */
@media (min-width: 981px) {
    .scc-vmp--light > .elementor-widget-wrap.elementor-element-populated,
    .scc-vmp--light > .elementor-element-populated { padding-left: 92px !important; }
}

/* ---- 15c. Why Shapes cards ---- */
.scc-club-why { position: relative; }
.scc-why-grid > .elementor-container { max-width: 100% !important; align-items: flex-start; }
.scc-why-card {
    position: relative;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.scc-why-grid .scc-why-card:nth-child(2),
.scc-why-grid .scc-why-card:nth-child(4) { transform: translateY(34px); }
.scc-why-card:hover {
    border-color: rgba(255,94,23,0.42) !important;
    box-shadow: 0 30px 60px -25px rgba(255,94,23,0.28);
    transform: translateY(4px);
}
.scc-why-grid .scc-why-card:nth-child(2):hover,
.scc-why-grid .scc-why-card:nth-child(4):hover { transform: translateY(38px); }
.scc-why-num {
    position: absolute; top: 16px; right: 20px;
    font-family: 'Playfair Display', Georgia, serif; font-style: italic;
    font-size: 13px; color: rgba(255,255,255,0.22);
}
.scc-why-icon .elementor-icon {
    width: 54px; height: 54px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, rgba(255,94,23,0.22), rgba(255,94,23,0.06));
    border: 1px solid rgba(255,94,23,0.18); font-size: 20px;
}
.scc-why-rule {
    display: block; width: 30px; height: 2px; background: #FF5E17; opacity: .55;
    margin-top: 20px; transition: width .3s ease, opacity .3s ease;
}
.scc-why-card:hover .scc-why-rule { width: 52px; opacity: 1; }

/* ---- 15d. Our Team ---- */
.scc-team-grid > .elementor-container { max-width: 100% !important; }
.scc-team-photo .elementor-widget-container { background: #ece8e0; border-radius: 6px; overflow: hidden; }
.scc-team-photo img {
    width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
    filter: grayscale(100%) contrast(1.02);
    transition: filter .5s ease, transform .8s ease;
}
.scc-team-col:hover .scc-team-photo img { filter: grayscale(0%); transform: scale(1.03); }

/* ---- 15e. Reviews (auto-rotating carousel) ---- */
.scc-club-reviews { position: relative; overflow: hidden; }
.scc-rv-track > .elementor-container { max-width: 100% !important; justify-content: center; }
.scc-rv-card { position: relative; overflow: hidden; box-shadow: 0 30px 60px -42px rgba(28,26,22,0.22); }
.scc-rv-qmark {
    position: absolute; top: -6px; right: 20px;
    font-family: 'Playfair Display', Georgia, serif; font-size: 108px; line-height: 1;
    color: rgba(255,94,23,0.08);
}
.scc-rv-stars { color: #FF5E17; letter-spacing: 3px; font-size: 15px; margin-bottom: 4px; }
.scc-rv-quote {
    font-family: 'Playfair Display', Georgia, serif; font-style: italic;
    font-size: 16.5px; line-height: 1.62; margin: 0 0 26px;
}
.scc-rv-who { display: flex; align-items: center; gap: 14px; }
.scc-rv-av {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 15px;
    background: linear-gradient(155deg, #FF5E17, #C74A1F);
}
.scc-rv-meta { display: flex; flex-direction: column; }
.scc-rv-meta b { font-size: 14px; color: #1A1A1A; }
.scc-rv-meta i {
    font-style: normal; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase;
    color: #E04A0A; font-weight: 700; margin-top: 3px;
}
/* base (no-JS / Elementor editor): a centred wrapped grid */
.scc-rv-track .elementor-column { width: 31%; }
/* enhanced carousel — reviews.js adds .scc-club-reviews--on.
   Desktop only: three 29%/40% cards need real room (at 800px the side cards
   squeeze names onto three lines), and these !important widths sit at 3–4
   class specificity, so left global they beat any narrow-screen reset.
   Below 1025px it degrades to one card at a time — see the block after. */
@media (min-width: 1025px) {
    .scc-club-reviews--on .scc-rv-track > .elementor-container { position: relative; }
    .scc-club-reviews--on .scc-rv-track .elementor-column {
        position: absolute; top: 50%; width: 29% !important; max-width: 29% !important;
        transition: left .6s cubic-bezier(.2,.8,.2,1), right .6s cubic-bezier(.2,.8,.2,1),
                    transform .6s cubic-bezier(.2,.8,.2,1), opacity .55s ease;
    }
    .scc-club-reviews--on .scc-rv-track .elementor-column.is-left   { left: 0;   right: auto; transform: translateY(-50%) scale(.9); opacity: .9; z-index: 2; }
    .scc-club-reviews--on .scc-rv-track .elementor-column.is-right  { right: 0;  left: auto;  transform: translateY(-50%) scale(.9); opacity: .9; z-index: 2; }
    .scc-club-reviews--on .scc-rv-track .elementor-column.is-center { left: 50%; right: auto; transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 3; width: 40% !important; max-width: 40% !important; }
    .scc-club-reviews--on .scc-rv-track .elementor-column.is-hidden { left: 50%; right: auto; transform: translate(-50%, -50%) scale(.82); opacity: 0; z-index: 0; pointer-events: none; }
    .scc-club-reviews--on .scc-rv-card.is-center {
        border-color: rgba(255,94,23,0.34) !important;
        background: linear-gradient(165deg, #ffffff, #FBF3E9) !important;
        box-shadow: 0 40px 72px -34px rgba(255,94,23,0.28);
    }
    .scc-club-reviews--on .scc-rv-card.is-center .scc-rv-quote { font-size: 18.5px; }
}
/* tablet / phone: one card at a time, centred — dots + swipe still drive it.
   block, not flex: as flex items the columns shrink to 1/n instead of wrapping,
   squeezing every card to a sliver. height:auto beats the inline height
   reviews.js sets for the absolute desktop layout. */
@media (max-width: 1024px) {
    .scc-rv-track { padding-left: 0 !important; padding-right: 0 !important; }
    .scc-rv-track > .elementor-container { display: block; height: auto !important; }
    /* !important: Elementor's own .elementor-col-20 (20%, min-width:768px) loads
       after this stylesheet and ties on specificity. */
    .scc-rv-track .elementor-column { width: 100% !important; max-width: 560px !important; margin: 0 auto 20px; }
    .scc-club-reviews--on .scc-rv-track .elementor-column:not(.is-center) { display: none; }
    .scc-club-reviews--on .scc-rv-track .elementor-column.is-center { margin-bottom: 0; }
}
.scc-rv-nav { display: flex; justify-content: center; gap: 10px; margin-top: 36px; }
.scc-rv-dot {
    width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: rgba(26,26,26,0.18); transition: background .3s ease, transform .3s ease;
}
.scc-rv-dot.is-on { background: #FF5E17; transform: scale(1.25); }

/* ---- 15f. Club-page responsive ---- */
@media (max-width: 980px) {
    .scc-vmp--dark, .scc-vmp--light { flex: 0 0 100%; max-width: 100%; }
    .scc-club-vm-split::after { top: 0; left: 50%; }
    .scc-why-grid .scc-why-card:nth-child(2),
    .scc-why-grid .scc-why-card:nth-child(4) { transform: none; }
    .scc-why-grid .scc-why-card:nth-child(2):hover,
    .scc-why-grid .scc-why-card:nth-child(4):hover { transform: translateY(4px); }
}
@media (max-width: 767px) {
    .scc-club-banner > .elementor-container > .elementor-column > .elementor-element-populated { min-height: auto; }
    .scc-club-brandrow { display: block; }
    .scc-club-letcol { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .scc-club-letcol > .elementor-element-populated { min-height: 40vh; }
    /* no stagger when the panels stack vertically */
    .scc-club-letcol:nth-child(odd)  > .elementor-element-populated,
    .scc-club-letcol:nth-child(even) > .elementor-element-populated { transform: none; }
    .scc-club-letcol .elementor-heading-title { font-size: clamp(52px, 22vw, 128px) !important; }
    .scc-club-navcell .elementor-button { padding: 18px 22px !important; }
    .scc-rv-qmark { font-size: 78px; right: 14px; }
}

/* =========================================================================
   §16  DINING PAGE — Explora Journeys "same to same"
        Signature overlapping-image intro (two offset, framed photos). The
        images stay ordinary, swappable Elementor image widgets; the overlap
        + white frame + shadow is delivered entirely here. See inc/dining-build.php.
   ====================================================================== */
.scc-dining-ovl > .elementor-container { align-items: center; }

/* the two images stack in normal flow inside the media column; the negative
   margin pulls the second up so it overlaps the first (no absolute positioning
   → the column never collapses to 0 height). */
.scc-dining-ovl__media > .elementor-widget-wrap,
.scc-dining-ovl__media > .elementor-element-populated { align-items: stretch; }
.scc-dining-ovl__media .elementor-widget-image { margin: 0 !important; }
.scc-dining-ovl__media .elementor-widget-image img { display: block; width: 100%; height: auto; }

.scc-ovl-a {
    align-self: flex-start;
    width: 80% !important;
    position: relative; z-index: 1;
}
.scc-ovl-a img {
    border-radius: 4px;
    box-shadow: 0 30px 60px -34px rgba(20,20,20,0.45);
}
.scc-ovl-b {
    align-self: flex-end;
    width: 58% !important;
    margin-top: -26% !important;
    position: relative; z-index: 2;
}
.scc-ovl-b img {
    border: 8px solid #fff;
    border-radius: 4px;
    box-shadow: 0 42px 72px -30px rgba(20,20,20,0.55);
}

@media (max-width: 1024px) {
    .scc-ovl-a { width: 82% !important; }
    .scc-ovl-b { width: 62% !important; margin-top: -22% !important; }
}
/* on phones the offset framing looks cramped — stack cleanly instead. */
@media (max-width: 767px) {
    .scc-ovl-a,
    .scc-ovl-b { align-self: center; width: 100% !important; }
    .scc-ovl-b { margin-top: 16px !important; }
    .scc-ovl-b img { border-width: 6px; }
}

/* =========================================================================
   16. HTML HEADER AREA
   The header is hand-built as a "Custom HTML" widget in the "Header (HTML)"
   widget area (see header.php). Both wrappers — the theme's own and the one
   WordPress's Custom HTML widget hard-codes — are made layout-transparent so
   the pasted markup behaves exactly as if it sat directly inside <body>.
   Without this, a `position: sticky` header would be trapped inside a
   header-height wrapper and never stick.
   ====================================================================== */
#scc-html-header,
#scc-html-header > .custom-html-widget { display: contents; }