/*
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.0.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 just above the bottom of the first screen (a small gap keeps the
       labels clear of the very edge / any horizontal scrollbar). */
    transform: translateY(calc(100vh - 100% - 30px));
    /* Dark scrim (darkest at the bottom, where the labels are) so the white
       tab labels stay readable over ANY hero photo — not just dark ones.
       backdrop-filter is a bonus on top; the gradient is the guarantee. */
    background: linear-gradient(180deg, rgba(16,16,16,0.10) 0%, rgba(16,16,16,0.55) 48%, rgba(12,12,12,0.90) 100%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    border-top: 1px solid rgba(255,255,255,0.14);
    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; }

/* ===== 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%; }
    .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; }

/* 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;
    background:
        linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.32) 46%, rgba(0,0,0,.08) 100%),
        linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 34%, rgba(0,0,0,0) 55%);
}
/* 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 auto; padding: 0 40px;
}
.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: 500;
    font-size: clamp(36px, 5vw, 64px); line-height: 1.1; margin: 0 0 30px;
    max-width: 19ch; text-transform: none; letter-spacing: 0;
}
.scc-hero__title em { font-style: italic; color: var(--scc-gold-light); }
.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 #fff; color: var(--scc-ink);
    background: #fff;
    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: var(--scc-gold); color: var(--scc-ink); border-color: var(--scc-gold); 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: 23px !important; }
#scc-site-header .elementor-widget-icon-box .elementor-icon svg { width: 23px; height: 23px; fill: #fff !important; }
#scc-site-header .elementor-widget-icon-box .elementor-icon-box-icon { margin-bottom: 12px !important; }
#scc-site-header .elementor-widget-icon-box .elementor-icon-box-wrapper { text-align: center; }
/* 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; }
}

/* 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);
    background: var(--mc-ink);
}
.scc-mcta * { box-sizing: border-box; }
.scc-mcta__wrap {
    max-width: 100%; margin: 0 auto; display: grid;
    grid-template-columns: 1.05fr 1fr; min-height: 640px; position: relative;
}

/* ---- LEFT (video / gradient panel) ---- */
.scc-mcta__left {
    position: relative; overflow: hidden; padding: 64px 60px;
    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__crest {
    width: 46px; height: 46px; border: 1px solid var(--mc-brass); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif; color: var(--mc-brass-soft);
    font-size: 15px; letter-spacing: 1px; margin-bottom: 38px;
}
.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__subcopy { color: var(--mc-ink-muted); font-size: 16px; line-height: 1.65; max-width: 400px; font-weight: 300; margin: 0 0 40px; }
.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; }
}