/* FRESH-1770078308-1770078308.908 */
/* COMPILED SECTIONS CSS */
/* Built sections bundle - generated: 2026-01-14T21:17:24+00:00 */

/* ---- section: feature-block ---- */
/* Feature Block Section - Modern Image + Text Layout */

.section-feature-block {
    padding: 60px 0;
    --accent-primary: #d4af37;
    --accent-secondary: #b8941f;
    --accent-glow: rgba(212, 175, 55, 0.2);
    --text-color: #ffffff;
    --text-muted: rgba(255,255,255,0.75);
    --content-bg: #0a1628;
}

/* Safety: prevent horizontal overflow from feature blocks */
.section-feature-block {
    overflow-x: hidden; /* guard against wide children */
    width: 100%;
    box-sizing: border-box; /* ensure padding doesn't add to viewport width */
}

/* Ensure inner containers respect viewport sizing */
.section-feature-block .feature-container {
    box-sizing: border-box;
    max-width: 100%;
}
.section-feature-block .feature-content-inner,
.section-feature-block .feature-image-inner {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Prevent long words or inline content from forcing width */
.section-feature-block .feature-text,
.section-feature-block .feature-title,
.section-feature-block .feature-subtitle {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Images and iframes inside feature content should scale down */
.section-feature-block img,
.section-feature-block iframe,
.section-feature-block embed,
.section-feature-block video {
    max-width: 100%;
    height: auto;
}

/* Tables and preformatted blocks may overflow - make them scroll instead */
.section-feature-block table,
.section-feature-block pre {
    max-width: 100%;
    overflow: auto;
    display: block;
}

/* Accent color variants */
.section-feature-block.feature-accent-gold {
    --accent-primary: #d4af37;
    --accent-secondary: #b8941f;
    --accent-glow: rgba(212, 175, 55, 0.2);
}
.section-feature-block.feature-accent-emerald {
    --accent-primary: #10b981;
    --accent-secondary: #059669;
    --accent-glow: rgba(16, 185, 129, 0.2);
}
.section-feature-block.feature-accent-royal {
    --accent-primary: #6366f1;
    --accent-secondary: #4f46e5;
    --accent-glow: rgba(99, 102, 241, 0.2);
}
.section-feature-block.feature-accent-burgundy {
    --accent-primary: #dc2626;
    --accent-secondary: #b91c1c;
    --accent-glow: rgba(220, 38, 38, 0.2);
}

/* Container */
.feature-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
}

/* When title is placed above the image, allow a full-width title row */
.section-feature-block.feature-title-above .feature-title-block {
    grid-column: 1 / -1;
    align-self: start;
    width: 100%;
    max-width: 1200px;
    /* remove default bottom margin so padding controls determine spacing */
    margin: 0 auto 0;
    padding-top: 24px; /* default padding, overridden by inline per-section values */
    padding-bottom: 24px; /* default padding, overridden by inline per-section values */
}

/* Reduce grid gap when title sits above to make title padding the primary spacing control */
.section-feature-block.feature-title-above .feature-container {
    gap: 24px;
}

/* Ensure the H2 itself doesn't contribute extra margin so padding is the only spacing source */
.section-feature-block.feature-title-above .feature-title {
    margin: 0 !important;
}
.section-feature-block.feature-title-above .feature-title-block .feature-title {
    margin: 0 0 8px 0;
}

/* Image sizing variants */
.feature-size-small .feature-container { grid-template-columns: 40% 1fr; }
.feature-size-medium .feature-container { grid-template-columns: 50% 1fr; }
.feature-size-large .feature-container { grid-template-columns: 60% 1fr; }
.feature-size-small.feature-image-right .feature-container { grid-template-columns: 1fr 40%; }
.feature-size-medium.feature-image-right .feature-container { grid-template-columns: 1fr 50%; }
.feature-size-large.feature-image-right .feature-container { grid-template-columns: 1fr 60%; }

/* Image positioning */
.feature-image-right .feature-image-wrapper { order: 2; }
.feature-image-right .feature-content { order: 1; }

/* Image wrapper */
.feature-image-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-image-inner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0,0,0,0.4);
    width: 100%;
    display: flex;
}

/* Image aspect presets */
.section-feature-block.feature-aspect-landscape .feature-image-inner { aspect-ratio: 16/9 !important; display: block !important; height: auto !important; max-height: none !important; }
.section-feature-block.feature-aspect-portrait .feature-image-inner { aspect-ratio: 3/4 !important; display: block !important; height: auto !important; max-height: none !important; }
.section-feature-block.feature-aspect-square .feature-image-inner { aspect-ratio: 1/1 !important; display: block !important; height: auto !important; max-height: none !important; }
.section-feature-block.feature-aspect-original .feature-image-inner { aspect-ratio: auto !important; display: block !important; height: auto !important; max-height: none !important; }

/* Ensure aspect-ratio rules win over other sizing rules (min-height) */
.feature-aspect-landscape .feature-image-inner,
.feature-aspect-portrait .feature-image-inner,
.feature-aspect-square .feature-image-inner,
.feature-aspect-original .feature-image-inner {
    min-height: 0 !important;
}
.section-feature-block.feature-aspect-landscape .feature-image,
.section-feature-block.feature-aspect-portrait .feature-image,
.section-feature-block.feature-aspect-square .feature-image,
.section-feature-block.feature-aspect-original .feature-image {
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* Avoid parent grid stretching the image area when aspect is enforced */
.section-feature-block.feature-aspect-landscape .feature-container,
.section-feature-block.feature-aspect-portrait .feature-container,
.section-feature-block.feature-aspect-square .feature-container,
.section-feature-block.feature-aspect-original .feature-container {
    align-items: center !important;
}

.feature-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
    min-height: 300px;
}

.feature-image-inner:hover .feature-image {
    transform: scale(1.03);
}

.feature-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.3) 100%);
    pointer-events: none;
}

/* Content area */
.feature-content {
    padding: 20px 0;
}

.feature-content-inner {
    max-width: 500px;
    background: var(--content-bg);
    padding: 32px 40px;
    border-radius: 12px;
}

.feature-image-right .feature-content-inner {
    margin-left: auto;
}

.feature-subtitle {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 16px;
    position: relative;
    padding-left: 40px;
}

/* Scoped defensive overflow fixes for feature-block */
.section-feature-block {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}
.section-feature-block .feature-container {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}
.section-feature-block .feature-container > * {
    min-width: 0; /* allow children to shrink inside grid columns */
}
.section-feature-block .feature-image-wrapper,
.section-feature-block .feature-content,
.section-feature-block .feature-title-block {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.section-feature-block .feature-image-inner,
.section-feature-block .feature-content-inner {
    max-width: 100%;
    box-sizing: border-box;
}
.section-feature-block .feature-image {
    max-width: 100%;
    height: auto;
    display: block;
}
.section-feature-block .feature-text ul,
.section-feature-block .feature-text ol,
.section-feature-block .feature-text blockquote {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Add spacing between list items inside feature text */
.section-feature-block .feature-text li {
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
}

/* Quick emergency fix: force breakable content and normal whitespace
   inside feature blocks to prevent unbreakable editor HTML from
   causing horizontal overflow. Scoped and defensive. */
.section-feature-block,
.section-feature-block * {
    min-width: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

.feature-subtitle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 28px;
    height: 2px;
    background: var(--accent-primary);
    transform: translateY(-50%);
}

.feature-title {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 0 24px 0;
    letter-spacing: -0.02em;
}

.feature-text {
    font-size: 1.1rem;
    line-height: 1.75;
    color: #ffffff;
}

.feature-text p {
    margin: 0 0 1rem 0;
    color: #ffffff;
}

.feature-text p:last-child {
    margin-bottom: 0;
}

.feature-text ul,
.feature-text ol {
    padding-left: 1.25rem;
    margin: 1rem 0;
}

.feature-text li {
    margin: 0.6rem 0;
    color: #ffffff;
}

.feature-text li::marker {
    color: var(--accent-primary);
}

.feature-text strong {
    color: var(--accent-primary);
    font-weight: 600;
}

/* ========== ELEGANT STYLE ========== */
.feature-style-elegant .feature-image-inner {
    border: 1px solid rgba(255,255,255,0.1);
}

.feature-style-elegant .feature-image-inner::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    padding: 1px;
    background: linear-gradient(135deg, var(--accent-primary) 0%, transparent 50%, var(--accent-primary) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
}

.feature-style-elegant .feature-title {
    background: linear-gradient(135deg, #ffffff 0%, var(--accent-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========== MINIMAL STYLE ========== */
.feature-style-minimal .feature-image-inner {
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.feature-style-minimal .feature-subtitle::before {
    display: none;
}

.feature-style-minimal .feature-subtitle {
    padding-left: 0;
    color: var(--text-muted);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.7rem;
}

.feature-style-minimal .feature-title {
    font-weight: 400;
    font-size: clamp(24px, 3.5vw, 42px);
}

/* ========== BOLD STYLE ========== */
.feature-style-bold {
    padding: 80px 0;
}

.feature-style-bold .feature-image-inner {
    border-radius: 0;
    box-shadow: 20px 20px 0 var(--accent-primary);
}

.feature-style-bold .feature-image-overlay {
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.6) 100%);
}

.feature-style-bold .feature-subtitle {
    background: var(--accent-primary);
    color: #000;
    padding: 8px 16px;
    border-radius: 0;
}

.feature-style-bold .feature-subtitle::before {
    display: none;
}

.feature-style-bold .feature-title {
    font-size: clamp(32px, 5vw, 56px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ========== GLASS CARD STYLE ========== */
.feature-style-glass .feature-container {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 40px;
    gap: 40px;
}

.feature-style-glass .feature-image-inner {
    border-radius: 12px;
}

.feature-style-glass .feature-content-inner {
    padding: 20px;
}

.feature-style-glass .feature-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--accent-primary);
    margin-top: 20px;
    border-radius: 2px;
}

/* Decorative elements for glass style */
.feature-style-glass {
    position: relative;
    overflow: hidden; /* contain decorative elements and prevent overflow */
}
.feature-style-glass::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    pointer-events: none;
}

/* Mobile: make better use of horizontal space by reducing inner padding
   and allowing the container to use full viewport width. Keeps visual
   rhythm while widening content on phones. */
@media (max-width: 820px) {
    .section-feature-block {
        padding: 20px 0;
    }
    .section-feature-block .feature-container {
        padding: 0 12px;
        max-width: 100%;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .section-feature-block .feature-content-inner {
        padding: 16px;
        max-width: 100%;
    }
    .section-feature-block .feature-image-inner {
        min-height: 160px;
    }
}

/* ========== AGED PAPER STYLE ========== */
.feature-style-paper {
    position: relative;
    background: linear-gradient(135deg, #f5f0e1 0%, #e8dcc8 25%, #f2ead9 50%, #e5d9c3 75%, #f0e6d3 100%);
    padding: 80px 0;
    --text-color: #2c1810;
    --text-muted: #5c4a3d;
    --content-bg: transparent;
}

.feature-style-paper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.08;
    pointer-events: none;
}

.feature-style-paper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 0%, rgba(139, 90, 43, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(139, 90, 43, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 0% 50%, rgba(101, 67, 33, 0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 100% 50%, rgba(101, 67, 33, 0.1) 0%, transparent 40%);
    pointer-events: none;
}

.feature-style-paper .feature-container {
    position: relative;
    z-index: 1;
}

.feature-style-paper .feature-content-inner {
    background: rgba(255, 252, 245, 0.7);
    border: 1px solid rgba(139, 90, 43, 0.2);
    box-shadow: 0 4px 20px rgba(101, 67, 33, 0.1);
    padding: 40px;
    border-radius: 4px;
}

.feature-style-paper .feature-subtitle {
    color: #8b5a2b;
    font-style: italic;
}

.feature-style-paper .feature-subtitle::before {
    background: #8b5a2b;
}

.feature-style-paper .feature-title {
    color: #2c1810;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 600;
    background: none;
    -webkit-text-fill-color: #2c1810;
}

.feature-style-paper .feature-text {
    color: #3d2a1e;
}

.feature-style-paper .feature-text p {
    color: #3d2a1e;
}

.feature-style-paper .feature-text li {
    color: #3d2a1e;
}

.feature-style-paper .feature-text strong {
    color: #8b5a2b;
}

/* Per-instance custom color overrides (higher specificity) */
.section-feature-block.has-custom-color .feature-content-inner {
    background: var(--content-bg) !important;
}
.section-feature-block.has-custom-color .feature-title,
.section-feature-block.has-custom-color .feature-text,
.section-feature-block.has-custom-color .feature-subtitle,
.section-feature-block.has-custom-color .feature-text p,
.section-feature-block.has-custom-color .feature-text li {
    color: var(--text-color) !important;
}
.section-feature-block.has-custom-color .feature-subtitle::before {
    background: var(--accent-primary) !important;
}

/* Apply custom background and text color to the entire section when set */
.section-feature-block.has-custom-color {
    background: var(--content-bg) !important;
    /* ensure styles cascade for text color */
    color: var(--text-color) !important;
}

/* Ensure inner containers don't reintroduce their own backgrounds */
.section-feature-block.has-custom-color .feature-container,
.section-feature-block.has-custom-color .feature-content-inner {
    background: transparent !important;
}

/* Force color for common text elements across the whole section */
.section-feature-block.has-custom-color .feature-title,
.section-feature-block.has-custom-color .feature-subtitle,
.section-feature-block.has-custom-color .feature-text,
.section-feature-block.has-custom-color .feature-text p,
.section-feature-block.has-custom-color .feature-text li,
.section-feature-block.has-custom-color .feature-subtitle::before {
    color: var(--text-color) !important;
}

.feature-style-paper .feature-text li::marker {
    color: #8b5a2b;
}

.feature-style-paper .feature-image-inner {
    border-radius: 4px;
    box-shadow: 
        0 0 0 1px rgba(139, 90, 43, 0.3),
        0 10px 40px rgba(101, 67, 33, 0.25),
        inset 0 0 60px rgba(139, 90, 43, 0.05);
}

.feature-style-paper .feature-image-overlay {
    background: linear-gradient(135deg, rgba(245, 240, 225, 0.1) 0%, rgba(139, 90, 43, 0.15) 100%);
    mix-blend-mode: multiply;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
    .section-feature-block {
        padding: 40px 0;
    }
    
    .feature-container {
        grid-template-columns: 1fr !important;
        gap: 32px;
    }
    
    .feature-image-wrapper,
    .feature-content {
        order: unset !important;
    }
    
    .feature-content-inner {
        max-width: none;
        margin: 0 !important;
    }
    
    .feature-style-glass .feature-container {
        padding: 24px;
    }
    
    .feature-style-bold .feature-image-inner {
        box-shadow: 12px 12px 0 var(--accent-primary);
    }
}

@media (max-width: 600px) {
    .feature-title {
        font-size: 28px;
    }
    
    .feature-text {
        font-size: 1rem;
    }
    
    .feature-subtitle {
        font-size: 0.7rem;
        padding-left: 32px;
    }
    
    .feature-subtitle::before {
        width: 20px;
    }
}


/* ---- section: footer ---- */
footer.site-footer{background:var(--footer-bg);padding:16px}
footer.site-footer nav a{margin-right:12px;color:#333;text-decoration:none}
.section-footer{border-top:1px solid rgba(0,0,0,0.04);}


/* ---- section: header ---- */
/* Header section styles - SYNC TEST */
:root { --bg: #000; --text: #fff; --muted: #c7c7c7; --link: #e6e6e6; --accent: #0e3a2a; --header-height: 76px; }
* { box-sizing: border-box; }

/* Dialog handles scroll blocking natively via inert + top layer */

/* Native dialog for mobile menu - much more reliable than DIV-based modals */
.mobile-dialog {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	width: 300px;
	max-width: 80vw;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: none;
	background: rgba(0,0,0,0.98);
	color: #fff;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-y;
}

.mobile-dialog::backdrop {
	background: rgba(0,0,0,0.6);
}

.mobile-dialog-content {
	padding: 60px 20px 20px;
}

.mobile-dialog ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-dialog li {
	margin-bottom: 16px;
}

.mobile-dialog a {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 18px;
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	transition: color 0.2s ease;
	text-transform: uppercase;
}

.mobile-dialog a:hover {
	color: #b3d9c4;
}

.mobile-dialog .close-btn {
	position: absolute;
	top: 12px;
	right: 12px;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	padding: 6px 8px;
	cursor: pointer;
	border-radius: 6px;
	z-index: 10;
}

.mobile-dialog .close-btn:focus {
	outline: 2px solid rgba(255,255,255,0.12);
}

.section-header { margin: 0; padding: 0; }

header.topbar {
    position: sticky; top: 0; z-index: 99999 !important;
    background: linear-gradient(180deg, #000 0%, #070707 100%);
    border-bottom: 1px solid #0d0d0d;
}

.section-header .container {
    /* full-bleed header: span the entire viewport so brand/nav/right align to page edges */
    width: 100%; max-width: none; margin: 0; padding: 10px 32px;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
    min-height: 56px;
    position: relative; /* allow absolutely-positioned menu button */
}

/* Ensure the three grid areas place elements predictably */
.section-header .container .brand { justify-self: start; }
.section-header .container nav.mainnav { justify-self: center; }
.section-header .container .right { justify-self: end; }

/* Center the logo and subtitle within the brand area */
.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Nudge the brand block down to align subtitle with countdown credit horizontally */
    transform: translateY(6px);
}

.brand h1 {
    font-family: "Playfair Display", serif;
    color: #ffffff;
    margin: 0;
    /* Auto-sync test */
}

.brand-link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.brand-link:hover {
    opacity: 0.8;
}

.brand-link h1 {
    color: #ffffff;
    margin: 0;
}
.brand small { display: block; color: var(--muted); font-size: 0.95rem; line-height: 1; letter-spacing: .08em; margin-top: 6px; white-space: nowrap; }

/* Ensure the small subtitle shares typographic metrics with the countdown credit */
.breitling-credit { font-size: 0.95rem; line-height: 1; }

/* Mobile-only subtitle: hidden by default (desktop) */
.brand-small-mobile { display: none; }

/* Debug test comment - white trigger */

/* Purple brand test */

/* Brand styling ends - Updated with cache busting */

/* constrain the nav so it centers nicely and has generous space on either side */
/* nav now centers across the full viewport */
nav.mainnav { display: flex; justify-content: center; width: 100%; max-width: none; }
nav.mainnav ul { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0; }
nav.mainnav li { position: relative; }
nav.mainnav a { position: relative; color: #e5f7ee; text-decoration: none; font-weight: 600; padding: 8px 0; letter-spacing: .04em; transition: 180ms ease; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
nav.mainnav a .nav-word-top,
nav.mainnav a .nav-word-bottom { display: block; white-space: nowrap; }
nav.mainnav a .nav-word-top { font-size: 0.85em; opacity: 0.85; }
nav.mainnav a .nav-word-bottom { font-size: 1em; }
nav.mainnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; opacity: 0; transform: scaleX(.6); transition: 160ms ease; }
nav.mainnav a:hover { color: #fff; }
nav.mainnav a:hover::after { opacity: 1; transform: scaleX(1); }

.right { 
    display: flex; 
    flex-direction: column;
    align-items: flex-end; 
    gap: 4px; 
    background: transparent; 
    border: none; 
    padding: 10px 16px; 
    border-radius: 12px; 
    justify-self: end; 
    min-width: 0; 
    overflow: hidden; 
    flex-shrink: 0;
    position: relative;
}

/* Make sure right wrapper doesn't overlap the absolute menu button. Keep right spacing equal to container left padding (32px) so countdown aligns with logo */
.section-header .container .right { padding-right: 32px; }
.right::before {
    display: none;
}

/* Container for clock and countdown to keep them side by side */
.countdown-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Watch face with PNG option */
.analog-clock { 
    position: relative; 
    width: 40px;
    height: 40px;
    border-radius: 50%; 
    background-image: url('/uploads/watch1.png');
    background-size: cover;
    background-position: center;
    border: none;
    flex-shrink: 0; 
}

/* Option to hide PNG and show animated clock */
.analog-clock.animated {
    background-image: none;
    background: #2a2a2a;
}

/* Hide tick marks and hands when using PNG (show only when animated) */
.analog-clock .tick,
.analog-clock .hand,
.analog-clock .pivot {
    display: none;
}

.analog-clock.animated .tick,
.analog-clock.animated .hand,
.analog-clock.animated .pivot {
    display: block;
}
.tick { 
    position: absolute; 
    width: 1px; 
    height: 8px; 
    background: #ffbf28; 
    top: 2px; 
    left: 50%; 
    transform-origin: center 16px; 
    will-change: transform; 
}
.tick:nth-child(3n) { 
    height: 10px; 
    top: 1px; 
    background: #ffbf28; 
    width: 2px;
    margin-left: -0.5px;
}
.hand { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform-origin: center center; 
    background: #ffffff; 
    border-radius: 2px; 
    will-change: transform; 
}
.analog-clock .hand.hour { 
    width: 3px; 
    height: 10px; 
    margin-top: -5px; 
    margin-left: -1.5px; 
    background: #ffbf28;
}
.analog-clock .hand.minute { 
    width: 2px; 
    height: 15px; 
    margin-top: -7.5px; 
    margin-left: -1px; 
    background: #ffbf28;
}
.analog-clock .hand.second { 
    width: 1px; 
    height: 17px; 
    background: #ff6b35; 
    margin-top: -8.5px; 
    margin-left: -0.5px; 
}
.analog-clock .pivot { 
    position: absolute; 
    width: 6px; 
    height: 6px; 
    border-radius: 999px; 
    background: #ffbf28; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    border: 1px solid rgba(0,0,0,.4);
    z-index: 10; 
}

/* Default countdown style - Boxed */
.countdown { 
    display: grid; 
    grid-auto-flow: column; 
    gap: 12px; 
    align-items: center; 
    min-width: 0; 
    overflow: hidden; 
    flex-shrink: 0; 
    padding: 8px 12px;
    background: #2a2a2a;
    border: 1px solid #ffbf28;
    border-radius: 8px;
}

.cd-block { 
    display: grid; 
    grid-template-rows: auto auto; 
    justify-items: center; 
    min-width: 44px; 
    padding: 4px 6px;
    background: #1a1a1a;
    border: 1px solid #ffbf28;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.cd-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #ffbf28;
    opacity: 0.6;
}

.cd-value { 
    font-weight: 700; 
    font-size: clamp(14px, 1.8vw, 16px); 
    letter-spacing: .02em; 
    color: #ffbf28;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
}

.cd-label { 
    color: #ffbf28; 
    font-size: clamp(7px, 1vw, 9px); 
    letter-spacing: .12em; 
    text-transform: uppercase; 
    opacity: .9; 
    font-weight: 600;
}

.cd-sep { 
    width: 2px; 
    height: clamp(22px, 3vw, 28px); 
    background: #ffbf28; 
    align-self: center; 
    border-radius: 1px;
}

/* Simple countdown style override - only when .simple class is present */
.countdown.simple {
    background: transparent;
    border: none;
    padding: 4px 8px;
    gap: 8px;
    font-family: 'Arial', sans-serif;
}

.countdown.simple .cd-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffbf28;
    letter-spacing: -0.02em;
}

.countdown.simple .cd-label {
    font-size: 0.45rem;
    color: #ffbf28;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: -4px;
}

.countdown.simple .cd-sep {
    font-size: 0.8rem;
    font-weight: 300;
    color: #ffbf28;
    width: auto;
    height: auto;
    background: none;
    align-self: center;
    border-radius: 0;
}

.countdown.simple .cd-sep::before {
    content: ':';
}

.countdown.simple .cd-block {
    background: transparent;
    border: none;
    padding: 0;
    min-width: auto;
    gap: 2px;
}

.countdown.simple .cd-block::before {
    display: none;
}

/* Breitling credit text below countdown */
.breitling-credit {
    font-size: 0.95rem;
    color: #ffffff;
    text-align: right;
    margin-top: 0px;
    letter-spacing: 0.06em;
    font-weight: 400;
    opacity: 0.8;
}

.cd-block { 
    display: grid; 
    grid-template-rows: auto auto; 
    justify-items: center; 
    min-width: 44px; 
    padding: 4px 6px;
    background: #1a1a1a;
    border: 1px solid #ffbf28;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.cd-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #ffbf28;
    opacity: 0.6;
}
.cd-value { 
    font-weight: 700; 
    font-size: 16px; 
    letter-spacing: .02em; 
    color: #ffbf28;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
}
.cd-label { 
    color: #ffbf28; 
    font-size: 9px; 
    letter-spacing: .12em; 
    text-transform: uppercase; 
    opacity: .9; 
    font-weight: 600;
}
.cd-sep { 
    width: 2px; 
    height: 28px; 
    background: #ffbf28; 
    align-self: center; 
    border-radius: 1px;
}

.menu-btn { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid #1a1a1a; background: #0e0e0e; }

/* Desktop: keep menu button visually at the far right without affecting nav centering */
.section-header .container .menu-btn { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; content: ""; width: 20px; height: 2px; background: #fff; position: relative; border-radius: 2px; }
.menu-icon::before { position: absolute; top: -6px; }
.menu-icon::after { position: absolute; top: 6px; }

/* Hide countdown when it would interfere with nav menu */
@media (max-width: 1100px) and (min-width: 821px) {
	.right {
		display: none !important;
	}
	
	/* Rebalance the grid when countdown is hidden */
	.section-header .container {
		grid-template-columns: 1fr auto 1fr;
	}
}

@media (max-width: 820px) {
	nav.mainnav { display: none; }
	.menu-btn { display: flex; }
	.mobile-panel { display: block; }
	
	.section-header .container {
		padding: 10px 16px; /* Reduce padding on mobile */
		gap: 16px; /* Reduce gap */
		grid-template-columns: 1fr auto; /* Just brand and menu button */
	}
	
	/* Hide countdown/clock on mobile but keep them in DOM to prevent JS errors */
	.right { 
		display: none !important;
		visibility: hidden;
		position: absolute;
		left: -9999px;
		pointer-events: none;
	}
	
	/* Make brand more compact on mobile */
	.brand { 
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		transform: none;
		width: auto;
	}
	
	/* Reduce logo size by 10% on mobile */
	.brand .brand-link img {
		transform: scale(0.9);
		transform-origin: left center;
	}
	
	.brand h1 { font-size: 18px; margin: 0; }
	
	/* Show subtitle below logo on mobile */
	.brand small { 
		display: block !important;
		font-size: 0.75rem;
		color: var(--muted);
		text-align: left;
		margin-top: 4px;
		white-space: normal;
		max-width: 100%;
		line-height: 1.3;
	}
	
	/* Make breitling credit smaller on mobile */
	.breitling-credit { font-size: 0.85rem; }
}

@media (min-width: 821px) {
	.analog-clock { 
        width: 50px;
        height: 50px;
        border: none;
    }
	.tick { transform-origin: center 29px; }
	.analog-clock .hand.hour { height: 17px; margin-top: -8.5px; }
	.analog-clock .hand.minute { height: 25px; margin-top: -12.5px; }
	.analog-clock .hand.second { height: 28px; margin-top: -14px; }
	.brand h1 { font-size: 22px; }
    .countdown {
        gap: 16px;
        padding: 10px 16px;
    }
    .cd-block {
        min-width: 48px;
        padding: 6px 8px;
    }
    .cd-value {
        font-size: 0.9rem;
    }
    .cd-sep {
        height: 32px;
    }
    
    /* Simple countdown larger sizes */
    .countdown.simple .cd-value {
        font-size: 1rem;
    }
    .countdown.simple .cd-label {
        font-size: 0.55rem;
    }
    .countdown.simple .cd-sep {
        font-size: 1rem;
    }
}

@media (min-width: 1024px) {
    .analog-clock { 
        width: 55px;
        height: 55px;
    }
    .countdown.simple .cd-value {
        font-size: 1.2rem;
    }
    .countdown.simple .cd-label {
        font-size: 0.6rem;
    }
    .countdown.simple .cd-sep {
        font-size: 1.2rem;
    }
}

/* Mobile Countdown Styles */
.mobile-countdown-wrapper {
    display: none; /* Hidden by default on desktop */
}

@media (max-width: 820px) {
    .mobile-countdown-wrapper {
        display: block;
        background: linear-gradient(180deg, #000 0%, #070707 100%); /* Match header background */
        padding: 14px 16px 10px;
        text-align: center;
        border-bottom: 1px solid #0d0d0d;
    }
    
    .mobile-countdown-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }
    
    .mobile-analog-clock.analog-clock {
        display: block !important;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }
    
    .mobile-countdown-wrapper .mobile-countdown {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
    }
    
    .mobile-countdown-wrapper .cd-block {
        min-width: 40px;
        padding: 4px 6px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 6px;
    }
    
    .mobile-countdown-wrapper .cd-value {
        font-family: var(--font-display, 'Montserrat', sans-serif);
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--gold, #c9a962);
        line-height: 1.2;
    }
    
    .mobile-countdown-wrapper .cd-label {
        font-family: var(--font-body, 'Inter', sans-serif);
        font-size: 0.6rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: rgba(255, 255, 255, 0.6);
        margin-top: 2px;
    }
    
    .mobile-countdown-wrapper .cd-sep {
        color: var(--gold, #c9a962);
        font-size: 1.1rem;
        font-weight: 300;
        opacity: 0.5;
    }
    
    .mobile-countdown-wrapper .mobile-breitling-credit {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        padding-left: 10px;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        flex-shrink: 0;
    }
    
    .mobile-countdown-wrapper .mobile-breitling-credit .credit-label {
        font-family: var(--font-body, 'Inter', sans-serif);
        font-size: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 2px;
        white-space: nowrap;
    }
    
    .mobile-countdown-wrapper .mobile-breitling-credit .credit-sponsor {
        font-family: var(--font-display, 'Montserrat', sans-serif);
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--gold, #c9a962);
        white-space: nowrap;
    }
}


/* ---- section: hero ---- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

/* =====================================================
   HERO SECTION - Clean Full-Screen Solution
   JS handles sizing, CSS handles layout
   ===================================================== */

/* Hero section base */
.section-hero.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* Safety: prevent hero-related horizontal overflow (page scrolling right) */
.section-hero {
  overflow-x: hidden; /* ensure any positioned children can't create horizontal scroll */
}

/* Constrain slides and images to viewport width to avoid blank horizontal space */
.section-hero .hero-slides,
.section-hero .hero-slide {
  box-sizing: border-box;
  max-width: 100vw;
}
.section-hero .hero-image {
  max-width: 100vw;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Standard height options */
.hero-medium { height: 420px; }
.hero-large { height: 680px; }

/* =====================================================
   FULL SCREEN HERO
   Height is set by JavaScript for accuracy
   ===================================================== */
.hero-full {
  position: relative;
  width: 100%;
    /* Compute a CSS variable for the hero's minimum visual height (viewport
       minus header, clamped to 60vh). We expose it so slide/image layers
       can reliably match the same height and avoid gaps when content
       is smaller than the visual hero area. Allow the hero to grow if
       content requires more space so text/logo are never clipped. */
    --hero-min-height: max(calc(100vh - var(--header-height, 76px)), 60vh);
    height: auto;
    min-height: var(--hero-min-height);
  max-width: 100vw;
  display: block;
}

/* Fullscreen layering: keep images/overlay covering while content can grow */
.hero-full .hero-slides,
.hero-full .hero-overlay {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: var(--hero-min-height, 100%);
}

.hero-full .hero-content {
  position: relative;
  min-height: var(--hero-min-height, 100%);
}

/* =====================================================
   IMAGE LAYER
   ===================================================== */
.hero-slides {
  grid-area: 1 / 1 / -1 / -1;
  position: relative;
  width: 100%;
  /* Match the hero's minimum visual height so the image layer always
     covers the visual hero area even when the hero container is sized
     by `min-height` rather than an explicit `height`. */
  height: 100%;
  min-height: var(--hero-min-height, 100%);
  display: flex;
  transition: transform 0.45s ease;
  will-change: transform;
}

.hero-slide {
  position: relative;
  min-width: 100%;
  flex: 0 0 100%;
  height: 100%;
  min-height: var(--hero-min-height, 100%);
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* =====================================================
   OVERLAY
   ===================================================== */
.hero-overlay {
  grid-area: 1 / 1 / -1 / -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 60%), var(--hero-overlay);
  z-index: 1;
}

/* =====================================================
   CONTENT LAYER
   ===================================================== */
.hero-content {
  grid-area: 1 / 1 / -1 / -1;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
  overflow: hidden;
}

.hero-content-inner {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  transition: transform 0.15s ease-out;
}

/* =====================================================
   TYPOGRAPHY
   ===================================================== */
.hero-title {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 5vw, 4.5rem);
  line-height: 1;
  margin: 0 0 0.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.hero-subtitle {
  font-size: clamp(0.9rem, 2.5vw, 1.4rem);
  margin: 0 0 1rem;
  opacity: 0.95;
  line-height: 1.5;
}

.hero-subtitle p {
  margin: 0 0 0.5em;
}

.hero-subtitle p:last-child {
  margin-bottom: 0;
}

/* =====================================================
   LOGO
   ===================================================== */
.hero-logo {
  margin-bottom: 1.25rem;
}

.hero-logo-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Corner logo positions */
.logo-pos-bottom-left .hero-logo {
  position: absolute;
  left: 16px;
  bottom: 10%;
  margin: 0;
  z-index: 5;
}

.logo-pos-bottom-right .hero-logo {
  position: absolute;
  right: 16px;
  bottom: 10%;
  margin: 0;
  z-index: 5;
}

/* =====================================================
   CTA BUTTON
   ===================================================== */
.hero-cta {
  display: inline-block;
  background: #ffbf28;
  color: #000;
  padding: 0.75rem 1.5rem;
  border-radius: 2px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.95rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  margin-top: 1.5rem;
  transition: transform 0.2s ease;
}

.hero-cta:hover {
  transform: translateY(-2px);
}

/* =====================================================
   NAVIGATION
   ===================================================== */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  border: none;
  color: #fff;
  padding: 0.5rem 0.75rem;
  font-size: 1.5rem;
  z-index: 5;
  cursor: pointer;
}

.hero-arrow--prev { left: 1rem; }
.hero-arrow--next { right: 1rem; }

.hero-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  display: flex;
  gap: 0.5rem;
  z-index: 6;
}

.hero-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  padding: 0;
  cursor: pointer;
}

.hero-dots button[aria-selected="true"] {
  background: #fff;
}

.section-hero[data-slides-count="1"] .hero-dots,
.section-hero[data-slides-count="1"] .hero-arrow {
  display: none !important;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (min-width: 768px) {
  .hero-content {
    padding: 2rem 3rem;
  }
}

@media (max-width: 767px) {
  .hero-arrow {
    display: none;
  }
  
  .hero-content {
    padding: 1.5rem;
  }
  
  .hero-dots button {
    width: 12px;
    height: 12px;
  }
  
  /* Crop to show top portion of image on tablet */
  .hero-image {
    object-position: center 20%;
  }
}

@media (max-width: 480px) {
  /* Crop to show even more of the top on mobile */
  .hero-image {
    object-position: center 15%;
  }
}

/* =====================================================
   MOBILE: SUBTITLE BELOW HERO
   ===================================================== */
@media (max-width: 767px) {
  .section-hero.hero,
  .section-hero.hero.hero-full {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    grid-template-rows: unset !important;
    grid-template-columns: unset !important;
    position: relative !important;
  }
  
  /* Hero image container takes up the visual hero space */
  .section-hero.hero .hero-slides,
  .hero-full .hero-slides {
    position: relative !important;
    grid-area: unset !important;
    /* Use CSS var-based vh and subtract header height so hero fills
       the mobile viewport while avoiding address-bar jump issues */
    height: calc((var(--vh, 1vh) * 100) - var(--header-height, 76px)) !important;
    min-height: 320px !important;
    flex-shrink: 0 !important;
    order: 1;
  }
  
  /* Overlay only covers the image area */
  .section-hero.hero .hero-overlay,
  .hero-full .hero-overlay {
    position: absolute !important;
    grid-area: unset !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: calc((var(--vh, 1vh) * 100) - var(--header-height, 76px)) !important;
    min-height: 320px !important;
    z-index: 2;
  }
  
  /* Content stacks below on mobile - but we need to restructure */
  .section-hero.hero .hero-content,
  .hero-full .hero-content {
    position: absolute !important;
    grid-area: unset !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc((var(--vh, 1vh) * 100) - var(--header-height, 76px)) !important;
    min-height: 320px !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    padding: 2rem 1.5rem !important;
  }

  /* Ensure slides and images fill the computed mobile hero height so
     the image covers the entire visual area without leaving gaps */
  .section-hero.hero .hero-slide,
  .hero-full .hero-slide {
    height: 100% !important;
    min-height: 0 !important;
  }

  .section-hero.hero .hero-image,
  .hero-full .hero-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  
  .hero-content-inner {
    transform: none !important;
    max-width: 100% !important;
    text-align: center;
  }
  
  /* Hide subtitle inside hero content on mobile - we'll show it separately */
  .section-hero.hero .hero-subtitle {
    display: none !important;
  }
  
  /* Logo stays in normal position over hero */
  .section-hero.hero .hero-logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 5 !important;
    margin: 0 auto 20px auto !important;
    padding: 0 !important;
  }
  
  /* Hide title on mobile by default */
  .section-hero.hero .hero-title {
    display: none !important;
  }
  
  /* Show title on mobile when enabled */
  .section-hero.hero.show-title-mobile .hero-title {
    display: block !important;
    font-size: clamp(1.2rem, 4vw, 2rem);
    margin-bottom: 0.5rem;
  }
  
  /* Hide CTA button inside hero on mobile - it shows below subtitle */
  .section-hero.hero .hero-cta {
    display: none !important;
  }
  
  /* Navigation arrows and dots */
  .section-hero.hero .hero-arrow {
    top: 42vh !important;
  }
  
  .section-hero.hero .hero-dots {
    top: calc(85vh - 30px) !important;
    bottom: auto !important;
  }
  
  /* CTA button stays on hero */
  .section-hero.hero .hero-cta {
    margin-top: 1.5rem !important;
  }
}

/* Subtitle section that appears below hero on mobile */
.mobile-subtitle-section {
  display: none;
}

/* Scroll indicator - hidden by default */
.scroll-indicator {
  display: none;
}

@keyframes scrollBounceY {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.8;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

@keyframes scrollBounceCenter {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-50%) translateY(6px);
    opacity: 1;
  }
}

/* Desktop: show scroll indicator inside hero content for full-screen hero */
@media (min-width: 768px) {
  .section-hero.hero-full .hero-content-inner .scroll-indicator {
    display: block;
    position: relative;
    margin: 1.5rem auto 0;
    left: auto;
    transform: none;
    bottom: auto;
    z-index: 6;
    animation: scrollBounceY 2s ease-in-out infinite;
    text-align: center;
  }
  .section-hero.hero-full .hero-content-inner .scroll-indicator .scroll-indicator-arrow {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    transform: rotate(45deg);
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .mobile-subtitle-section {
    display: block;
    background: #0a0a0a;
    color: #fff;
    padding: 2rem 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
  }
  
  /* Scroll indicator on mobile */
  .scroll-indicator {
    display: block;
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    animation: scrollBounceCenter 2s ease-in-out infinite;
  }
  
  .scroll-indicator-arrow {
    display: block;
    width: 24px;
    height: 24px;
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    transform: rotate(45deg);
  }
  
}


/* ---- section: product ---- */
.section-product { padding: 40px 0; }
.product-container .product-header { max-width: 900px; margin: 0 auto 18px; padding: 0 18px; text-align: center; }
.product-title { font-size: 28px; margin: 0 0 8px; }
.product-subtitle { color: #6b7280; margin: 0 0 18px; }
.product-grid { display: grid; gap: 18px; max-width: 1200px; margin: 0 auto; padding: 0 18px; }
.product-grid--1col { grid-template-columns: 1fr; }
.product-grid--2col { grid-template-columns: repeat(2, 1fr); }
.product-grid--3col { grid-template-columns: repeat(3, 1fr); }
.product-grid--4col { grid-template-columns: repeat(4, 1fr); }
.product-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 18px rgba(12,18,30,0.06); border: 1px solid rgba(12,18,30,0.04); display: flex; flex-direction: column; }
.product-media { position: relative; }
.product-media::before {
  /* Fallback box to preserve a 3:4 (portrait) ratio in older browsers.
     padding-top is (height / width) * 100% = (4/3)*100 = 133.333% */
  content: "";
  display: block;
  width: 100%;
  padding-top: 133.3333%;
}
.product-image {
  width: 100%;
  /* Use a portrait aspect ratio (3:4). object-fit keeps the image cropped nicely. */
  aspect-ratio: 3 / 4;
  height: auto; /* preferred modern behavior */
  object-fit: cover;
  display: block;
  /* If the fallback pseudo-element is used we want the image to fill the box */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.product-badge { position: absolute; left: 12px; top: 12px; background: rgba(0,0,0,0.6); color: #fff; padding: 6px 8px; border-radius: 6px; font-size: 12px; }
.product-body { padding: 14px; flex: 1 1 auto; }
.product-name { margin: 0 0 6px; font-size: 18px; }
.product-price { color: #065f46; font-weight: 700; margin-bottom: 8px; }
.product-desc { color: #374151; font-size: 14px; line-height: 1.6; }
.product-footer { padding: 12px; border-top: 1px solid rgba(0,0,0,0.04); text-align: center; }
.product-cta { display: inline-block; padding: 8px 14px; background: #065f46; color:#fff; border-radius: 8px; text-decoration: none; }
.product-cta.disabled {
  /* Keep same visual color as enabled buttons for mockup/demo, but remain non-interactive */
  background: #065f46; /* same as .product-cta */
  color: #ffffff;
  opacity: 0.95; /* slight dim so it's still clear it's mock-disabled without changing color */
  pointer-events: none;
  cursor: default;
}

@media (max-width: 820px) {
  .product-grid--3col, .product-grid--4col { grid-template-columns: repeat(2,1fr); }
}


/* ---- section: sponsors ---- */
/* Sponsors Marquee Section Styles */
.section-sponsors {
  padding: 3rem 0;
  background: #ffffff;
  overflow: hidden;
  margin: 0 auto;
  max-width: 1200px;
}

/* Header styling */
.sponsors-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  padding: 0 2rem;
}

.sponsors-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: #1a1a1a;
}

.sponsors-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: #666;
  margin: 0;
  font-weight: 400;
}

/* Marquee container */
.sponsors-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 0) 5%, 
    rgba(255, 255, 255, 0) 95%, 
    rgba(255, 255, 255, 1) 100%
  );
}

/* Track that holds the logos */
.sponsors-track {
  display: flex;
  gap: 2rem;
  align-items: center;
  width: max-content;
  animation: scrollLeft var(--scroll-speed, 34s) linear infinite;
}

/* Pause animation on hover */
.sponsors-marquee.pause-on-hover:hover .sponsors-track {
  animation-play-state: paused;
}

/* Scroll animation */
@keyframes scrollLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Logo styling */
.sponsor-logo {
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(1.1) opacity(0.85);
  transition: all 0.3s ease;
  display: block;
}

.sponsor-logo:hover,
.sponsor-link:hover .sponsor-logo {
  filter: none;
  transform: translateY(-4px);
}

/* No grayscale variant */
.section-sponsors.no-grayscale .sponsor-logo {
  filter: none;
  opacity: 1;
}

.section-sponsors.no-grayscale .sponsor-logo:hover,
.section-sponsors.no-grayscale .sponsor-link:hover .sponsor-logo {
  filter: none;
  transform: translateY(-4px);
}

/* Link styling */
.sponsor-link {
  display: block;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.sponsor-link:focus {
  outline: 2px solid #007bff;
  outline-offset: 4px;
  border-radius: 8px;
}

/* Size variants */
.sponsors-small .sponsor-logo {
  width: 120px;
  max-height: 60px;
}

.sponsors-medium .sponsor-logo {
  width: 160px;
  max-height: 80px;
}

.sponsors-large .sponsor-logo {
  width: 200px;
  max-height: 100px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section-sponsors {
    padding: 2rem 0;
  }
  
  .sponsors-header {
    margin-bottom: 2rem;
    padding: 0 1rem;
  }
  
  .sponsors-track {
    gap: 1.5rem;
  }
  
  .sponsors-small .sponsor-logo {
    width: 100px;
    max-height: 50px;
  }
  
  .sponsors-medium .sponsor-logo {
    width: 130px;
    max-height: 65px;
  }
  
  .sponsors-large .sponsor-logo {
    width: 150px;
    max-height: 75px;
  }
  
  /* Faster scroll on mobile */
  .sponsors-track {
    animation-duration: calc(var(--scroll-speed, 34s) * 0.7);
  }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .sponsors-track {
    animation-duration: calc(var(--scroll-speed, 34s) * 3);
  }
  
  .sponsor-logo:hover,
  .sponsor-link:hover .sponsor-logo {
    transform: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .sponsor-logo {
    filter: grayscale(100%) contrast(1.2) opacity(1);
    border: 2px solid #333;
  }
  
  .sponsor-logo:hover,
  .sponsor-link:hover .sponsor-logo {
    filter: none;
    border-color: #007bff;
  }
}

/* Scoped defensive fixes to prevent marquee from forcing page width */
.sponsors-marquee {
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden; /* ensure visually clipped */
  contain: layout; /* isolate layout so children can't expand ancestors */
}
.sponsors-track {
  min-width: 100%; /* ensure track does not reduce below container width */
  will-change: transform;
}
.sponsor-logo {
  max-width: 100%;
  height: auto;
  display: block;
}
.sponsors-track > * {
  min-width: 0; /* allow flex children to shrink */
}


/* ---- section: team-roster ---- */
/* Team Roster Explorer Section Styles */

.section-team-roster {
    padding: 60px 20px;
    background: #f8fafc;
    color: #1e293b;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Header */
.roster-title {
    font-size: clamp(35px, 4vw, 53px);
    font-weight: 700;
    text-align: center;
    margin: 0 0 12px;
    color: #0f172a;
}

.roster-subtitle {
    font-size: 22px;
    text-align: center;
    margin: 0 0 40px;
    color: #64748b;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Search UI removed */

/* Teams Grid */
/* Teams Grid (Apple-style) */
.teams-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 40px;
}

.teams-grid[data-columns="1"] { grid-template-columns: 1fr; }
.teams-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.teams-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }

/* Team Cards (Apple-style) */
.team-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 14px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    width: 100%;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    display: block;
}

.team-card:focus { outline: 4px solid rgba(0,0,0,.06); }

.team-card:hover { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(0,0,0,.08); }

.card-content { display: flex; align-items: center; gap: 14px; }

.team-logo { height: 150px; width: 150px; display: grid; place-items: center; border-radius: 18px; background: #f6f7f8; border: 1px solid #e5e7eb; font-size: 60px; flex-shrink: 0; }

/* Ensure logo images scale to the container */
.team-logo img,
.team-logo-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.team-meta { flex: 1; min-width: 0; }

.team-city-text { text-transform: uppercase; letter-spacing: .06em; font-size: 14px; color: #6b7280; }

.team-name-text { font-weight: 700; font-size: 24px; margin-top: 2px; color: #0a0a0a; }

.team-sport-text { font-size: 15px; color: #6b7280; margin-top: 2px; }

.chevron { margin-left: auto; opacity: .6; color: #94a3b8; }

/* Team Detail Layer */
.team-layer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    pointer-events: none;
}
/* Ensure the layer covers the full viewport height on mobile */
.team-layer {
    height: 100vh;
}

.team-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* When the sheet is not open, ensure the backdrop is not interactive or focusable */
.team-layer:not(.is-open) .team-backdrop {
    pointer-events: none;
    visibility: hidden;
}

.team-backdrop.blur {
    backdrop-filter: blur(6px) saturate(1.05);
}

.team-sheet {
    position: fixed;
    left: 50%;
    /* account for device safe area at the bottom (iPhone home indicator) */
    bottom: env(safe-area-inset-bottom, 0);
    /* start fully off-screen including safe-area offset so open animation lands flush */
    transform: translateX(-50%) translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
    width: 1500px;
    max-width: calc(100% - 32px);
    background: #fff;
    border-radius: 18px 18px 0 0;
    height: 95vh;
    max-height: 95vh;
    transition: transform 0.38s cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -20px 60px rgba(0,0,0,0.12);
    will-change: transform;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.team-layer.is-open {
    display: block;
    pointer-events: auto;
}

.team-layer.is-open .team-backdrop {
    opacity: 1;
}

.team-layer.is-open .team-sheet {
    transform: translateX(-50%) translateY(0%);
}

.sheet-inner {
    padding: 0 20px 28px;
    overflow-y: auto;
    flex: 1;
    /* Enable native momentum scrolling on iOS and prevent background overscroll */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Ensure there's enough bottom padding inside the sheet so content isn't hidden
   by the home indicator or bottom UI when the sheet is open on mobile */
.sheet-inner {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* Two-column layout for sheet content */
.sheet-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 16px;
}

.sheet-players-column {
    min-width: 0;
}

.sheet-description-column {
    min-width: 0;
}

.sheet-handle {
    height: 6px;
    width: 60px;
    background: #e5e7eb;
    border-radius: 999px;
    margin: 10px auto 6px;
}

/* Sheet Header */
.sheet-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 18px;
    margin-bottom: 0;
    /* Keep header visible while scrolling the sheet */
    position: sticky;
    top: 0;
    z-index: 3;
    /* Backing so text stays readable when content scrolls under */
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(14,20,30,0.04);
}

.team-logo-display {
    font-size: 64px;
    width: 150px;
    height: 150px;
    display: grid;
    place-items: center;
    background: var(--soft, #f3f4f6);
    border-radius: 18px;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
}

/* Ensure sheet logo images scale to the container */
.team-logo-display img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.team-info {
    flex: 1;
    min-width: 0;
}

.team-city {
    font-size: 16px;
    color: #64748b;
    margin-bottom: 4px;
}

.team-name {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.team-sport {
    font-size: 16px;
    color: #64748b;
}

.close-button {
    background: transparent;
    border: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    transition: background 0.15s ease, color 0.15s ease;
}

.close-button:hover { background: rgba(0,0,0,0.04); color: #111827; }

/* Sheet Sections */
.sheet-section {
    margin-bottom: 32px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title svg {
    color: #64748b;
}

/* Players Grid (Horizontal stack layout like attachment) */
.players-container {
    background: transparent;
    border-radius: 12px;
    padding: 8px 0 28px;
}

.players-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Horizontal player card layout - Two equal columns */
.player-card {
    display: flex;
    /* stretch children so image can fill card height */
    align-items: stretch;
    gap: 16px;
    /* center the two-column group horizontally */
    justify-content: center;
     /* Background can be overridden per-card via the --player-card-bg CSS variable.
         Default uses upload fallback. Use a PNG with transparency and set
         --player-card-overlay: transparent to show underlying content. */
     background-color: transparent;
     background-image: var(--player-card-bg, url('/uploads/fd2bc76ec437bb90.png'));
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
    border-radius: 12px;
    padding: 16px;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.player-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Overlay to keep text readable on top of background image */
.player-card::after {
    content: "";
    position: absolute;
    inset: 0;
    /* overlay can be overridden; set to 'transparent' to disable */
    background: var(--player-card-overlay, linear-gradient(rgba(0,0,0,0.36), rgba(0,0,0,0.12)));
    z-index: 0;
    pointer-events: none;
}

/* Ensure card children render above the overlay */
.player-card > * {
    position: relative;
    z-index: 1;
}

/* Make text light for contrast on the image */
.player-card .player-name,
.player-card .player-role,
.player-card .player-info {
    color: #ffffff;
}

.player-image {
    /* reduced by ~10% for a slightly smaller image */
    /* reduced another ~10% (multiply by 0.9) */
    width: 34.425%;
    /* make image a fixed flex item so it doesn't stretch */
    flex: 0 0 34.425%;
    /* fill the card height and visually extend to the card edge */
    height: 100%;
    border-radius: 12px 0 0 12px;
    object-fit: cover;
    flex-shrink: 0;
    /* neutralize bottom padding so image reaches the card bottom */
    margin-bottom: -16px;
    /* allow PNG alpha to show the card background */
    background: transparent;
}

.player-info {
    width: 50%;
    flex-shrink: 0;
}

.player-info {
    /* make info a fixed-width flex item so the two columns remain centered as a group */
    flex: 0 0 50%;
    min-width: 0;
    /* provide internal breathing room so text doesn't hug the card edges */
    padding: 16px 24px; /* top/bottom 16px, left/right 24px */
    box-sizing: border-box;
}

/* Thin separator between image and player info. Color can be overridden with --player-sep-color */
.player-info::before {
    content: "";
    position: absolute;
    /* place the separator in the gap between image and info.
       Everything is driven by variables so it can scale per-breakpoint
       or per-card. Defaults are provided inline. */
    left: calc(-1 * var(--player-sep-offset, 8px));
    top: var(--player-sep-gap, 12px);
    bottom: var(--player-sep-gap, 12px);
    /* increase default thickness to 4px for stronger visual separation */
    width: var(--player-sep-width, 4px);
    background: var(--player-sep-color, rgba(255,255,255,0.45));
    border-radius: calc(var(--player-sep-width, 4px));
    z-index: 1;
    pointer-events: none;
}

.player-name {
    font-size: 29px; /* increased ~25% from 23px */
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* allow the name to wrap (we insert a <br> before the last name in JS) */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.player-role {
    font-size: 18px; /* increased ~25% from 14px */
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Remove old gradient card styles that are no longer needed */
.player-card::before,
.card-team-logo,
.player-name-overlay {
    display: none;
}

/* Team Description */
.team-description-box {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    height: fit-content;
    position: sticky;
    top: 0;
}

/* Club image above the description; falls back to a neutral placeholder */
.team-club-image {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #e6eef6 0%, #f6f8fb 100%);
}

.description-title {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
}

.team-description {
    font-size: 16px;
    line-height: 1.6;
    color: #374151;
}

/* Mobile responsive - stack columns */
@media (max-width: 768px) {
    .sheet-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .sheet-description-column {
        order: 1; /* Move description below players on mobile */
    }
    
    .team-description-box {
        position: static;
    }
}

/* Active state is handled by .team-layer.is-open and inline JS (body overflow) */

/* Responsive Design */
@media (max-width: 768px) {
    .section-team-roster {
        padding: 40px 16px;
    }
    
    .teams-grid[data-columns="2"],
    .teams-grid[data-columns="3"] {
        grid-template-columns: 1fr;
    }
    
    .team-sheet {
        width: 100%;
        max-width: none;
        left: 0;
        transform: translateY(100%);
        border-radius: 12px 12px 0 0;
    /* Use a slightly shorter sheet on mobile so browser UI remains visible */
    height: 82vh;
    max-height: 82vh;
    }
    
    .team-layer.is-open .team-sheet {
        transform: translateY(0%);
    }
    
    .player-card {
        /* tighter card padding on mobile to maximize usable space */
        padding: 10px;
        gap: 10px;
        justify-content: flex-start; /* allow stacking feel on mobile */
    }
    
    .player-image {
    width: 122px;
    height: 122px;
    margin-bottom: -12px; /* account for mobile padding */
    flex: 0 0 122px;
    border-radius: 12px;
    }

    .player-info {
        padding: 10px 10px; /* smaller padding on mobile */
    }

    /* mobile-friendly separator vars */
    :root {
        --player-sep-width: 1px;
        --player-sep-gap: 10px;
        --player-sep-offset: 6px;
    }
    
    /* Make sure player name/role fit better on most phones */
    .player-name {
        font-size: 18px;
        line-height: 1.05;
    }

    .player-role {
        font-size: 12px;
        line-height: 1.1;
    }

    /* Mobile: reduce logos and main grid text by 50% */
    .team-logo {
        width: 75px;
        height: 75px;
        font-size: 30px;
        border-radius: 12px;
    }

    .team-logo-display {
        width: 75px;
        height: 75px;
        font-size: 32px;
    }

    .roster-title {
        font-size: clamp(18px, 2vw, 26px) !important;
    }

    .roster-subtitle {
        font-size: 11px !important;
    }

    .team-city-text { font-size: 7px !important; }
    .team-name-text { font-size: 14px !important; }
    .team-sport-text { font-size: 8px !important; }
    
    .sheet-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .sheet-description-column {
        order: 1;
    }
    
    .team-description-box {
        position: static;
    }
}

@media (max-width: 480px) {
    .roster-title {
        font-size: 28px;
    }
    
    .roster-subtitle {
        font-size: 16px;
    }
    
    .card-content {
        gap: 12px;
    }
    
    .team-logo {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    
    .team-name-text {
        font-size: 16px;
    }
    
    .players-grid {
        grid-template-columns: 1fr;
    }
}

/* smaller devices: make separator slightly more compact */
@media (max-width: 360px) {
    :root {
        --player-sep-width: 1px;
        --player-sep-gap: 8px;
        --player-sep-offset: 5px;
    }
}


/* ---- section: text ---- */

.section-text {
	/* Reduced vertical spacing between consecutive text sections */
	padding: 24px 0;
	--text-bg: rgba(255,255,255,0.02);
	/* Accessible color variables */
	--text-color: #0f172a;
	--text-muted: #475569;
	--title-color: #071033;
	--font-stack: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	/* Accent color defaults */
	--accent-primary: #d4af37;
	--accent-secondary: #b8941f;
	--accent-glow: rgba(212, 175, 55, 0.15);
}

/* Custom color overrides - when backgroundColor/textColor are set */
.section-text.has-custom-color .text-inner,
.section-text.has-custom-color .text-title,
.section-text.has-custom-color .text-content,
.section-text.has-custom-color .text-content p,
.section-text.has-custom-color .text-content p:first-of-type,
.section-text.has-custom-color .text-content li,
.section-text.has-custom-color .text-content ul,
.section-text.has-custom-color .text-content ol {
	color: inherit !important;
}

/* Accent color variants */
.section-text.text-accent-gold {
	--accent-primary: #d4af37;
	--accent-secondary: #b8941f;
	--accent-glow: rgba(212, 175, 55, 0.15);
}
.section-text.text-accent-emerald {
	--accent-primary: #059669;
	--accent-secondary: #047857;
	--accent-glow: rgba(5, 150, 105, 0.15);
}
.section-text.text-accent-royal {
	--accent-primary: #3b82f6;
	--accent-secondary: #2563eb;
	--accent-glow: rgba(59, 130, 246, 0.15);
}
.section-text.text-accent-burgundy {
	--accent-primary: #9f1239;
	--accent-secondary: #881337;
	--accent-glow: rgba(159, 18, 57, 0.15);
}

.section-text .text-inner {
	/* Constrain content to 800px maximum per request */
	max-width: 800px;
	margin: 0 auto;
	padding: 20px 18px;
	background: var(--text-bg);
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(12,18,30,0.04);
	border: 1px solid rgba(12,18,30,0.035);
	color: var(--text-color);
	font-family: var(--font-stack);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Prevent padding from expanding the element beyond its max-width */
.section-text .text-inner {
	box-sizing: border-box;
}

/* Ensure two-column children can shrink inside grid/columns to avoid overflow */
.section-text .text-content.two-column > * {
	min-width: 0;
}

/* Constrain media and pre/table inside text sections */
.section-text .text-content img,
.section-text .text-content iframe,
.section-text .text-content video,
.section-text .text-content svg {
	max-width: 100%;
	height: auto;
}
.section-text .text-content pre,
.section-text .text-content table {
	max-width: 100%;
	overflow-x: auto;
}

/* ========== ELEGANT CARD STYLE ========== */
.section-text.text-style-elegant {
	padding: 40px 0;
}
.section-text.text-style-elegant .text-inner {
	background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 16px;
	padding: 40px 48px;
	box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.05) inset;
	position: relative;
	overflow: hidden;
}
.section-text.text-style-elegant .text-inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
}
.section-text.text-style-elegant .text-title {
	color: var(--accent-primary);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: clamp(18px, 2vw + 10px, 28px);
	margin-bottom: 24px;
	position: relative;
	padding-bottom: 16px;
}
.section-text.text-style-elegant .text-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 2px;
	background: var(--accent-primary);
}
.section-text.text-style-elegant .text-content {
	color: rgba(255,255,255,0.9);
}
.section-text.text-style-elegant .text-content strong {
	color: var(--accent-primary);
}
.section-text.text-style-elegant .text-content li {
	position: relative;
	padding-left: 8px;
}
.section-text.text-style-elegant .text-content li::marker {
	color: var(--accent-primary);
}

/* ========== ACCENT LEFT BORDER STYLE ========== */
.section-text.text-style-accent-left {
	padding: 40px 0;
}
.section-text.text-style-accent-left .text-inner {
	background: linear-gradient(90deg, var(--accent-glow) 0%, transparent 30%);
	border: none;
	border-left: 4px solid var(--accent-primary);
	border-radius: 0 12px 12px 0;
	padding: 32px 40px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.section-text.text-style-accent-left .text-title {
	color: var(--accent-primary);
	font-weight: 800;
}
.section-text.text-style-accent-left .text-content {
	color: rgba(255,255,255,0.85);
}
.section-text.text-style-accent-left .text-content strong {
	color: var(--accent-primary);
}

/* ========== GRADIENT BACKGROUND STYLE ========== */
.section-text.text-style-gradient {
	padding: 50px 0;
}
.section-text.text-style-gradient .text-inner {
	background: linear-gradient(145deg, 
		rgba(var(--accent-primary), 0.08) 0%, 
		rgba(0,0,0,0.4) 50%, 
		rgba(var(--accent-primary), 0.05) 100%);
	background: linear-gradient(145deg, var(--accent-glow) 0%, rgba(0,0,0,0.3) 50%, rgba(255,255,255,0.02) 100%);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 20px;
	padding: 48px 56px;
	box-shadow: 0 25px 60px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}
.section-text.text-style-gradient .text-title {
	background: linear-gradient(135deg, var(--accent-primary) 0%, #ffffff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-size: clamp(24px, 3vw + 12px, 42px);
	text-align: center;
	margin-bottom: 28px;
}
.section-text.text-style-gradient .text-content {
	color: rgba(255,255,255,0.9);
	text-align: center;
}
.section-text.text-style-gradient .text-content ul,
.section-text.text-style-gradient .text-content ol {
	text-align: left;
	display: inline-block;
}
.section-text.text-style-gradient .text-content strong {
	color: var(--accent-primary);
}

/* ========== DARK MODE STYLE ========== */
.section-text.text-style-dark {
	padding: 50px 0;
	background: linear-gradient(180deg, #0a0a0a 0%, #111111 100%);
	margin: 20px 0;
}
.section-text.text-style-dark .text-inner {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 16px;
	padding: 40px 48px;
	box-shadow: 0 0 80px var(--accent-glow);
}
.section-text.text-style-dark .text-title {
	color: #ffffff;
	text-shadow: 0 0 30px var(--accent-glow);
}
.section-text.text-style-dark .text-content {
	color: rgba(255,255,255,0.8);
}
.section-text.text-style-dark .text-content strong {
	color: var(--accent-primary);
	text-shadow: 0 0 20px var(--accent-glow);
}
.section-text.text-style-dark .text-content li::marker {
	color: var(--accent-primary);
}
.section-text.text-small .text-inner { max-width: 640px; }
.section-text.text-medium .text-inner { max-width: 800px; }
.section-text.text-large .text-inner { max-width: 800px; }

.section-text .text-title {
	/* Fluid title size: scales between 22px and 40px depending on viewport */
	font-size: clamp(22px, 2.8vw + 12px, 40px);
	line-height: 1.12;
	margin: 0 0 14px 0;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--title-color);
}

.section-text .text-content {
	/* Fluid body text: min 15px, preferred scales with viewport, max 18px */
	font-size: clamp(15px, 1.1vw + 14px, 18px);
	line-height: 1.7;
	color: var(--text-color); /* subtle dark slate */
}

/* Lead paragraph styling (first paragraph treated as a lead) */
.section-text .text-content p:first-of-type {
	font-size: clamp(16px, 1.2vw + 14px, 19px);
	font-weight: 600;
	color: var(--title-color);
	margin-top: 0;
	margin-bottom: 1.05rem;
}

/* Improve lists and blockquotes */
.section-text .text-content ul,
.section-text .text-content ol { padding-left: 1.25rem; margin: 0 0 1rem 0; }
.section-text .text-content li { margin: 0.45rem 0; }
.section-text .text-content blockquote {
	border-left: 4px solid rgba(0,0,0,0.06);
	padding: 12px 16px;
	margin: 12px 0;
	background: rgba(0,0,0,0.015);
	color: #374151;
	border-radius: 6px;
}

/* Link and CTA styling */
.section-text .text-content a { color: #065f46; text-decoration: underline; text-underline-offset: 3px; }
.section-text .text-content .btn { display: inline-block; padding: 10px 16px; background: #065f46; color: #fff; border-radius: 8px; text-decoration: none; }

/* Two-column flow for long content on wide viewports */
@media (min-width: 1100px) {
	.section-text.text-large .text-content.two-column,
	.section-text.text-large .text-content.two-column { column-gap: 40px; }
	/* Two-column grid: use explicit left/right columns when editor provides separate fields */
	.section-text.text-large .text-content.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* Responsive tweaks */
@media (max-width: 820px) {
	.section-text { padding: 36px 0; }
	.section-text .text-inner { padding: 16px; border-radius: 8px; max-width: calc(100% - 32px); }
	.section-text .text-title { font-size: 24px; }
	.section-text .text-content { font-size: 16px; }
}


/* ---- section: tournament-schedule ---- */
/* Tournament Schedule Section */
.tournament-schedule {
  background: var(--bg-color, #1b1f24);
  padding: 60px 24px;
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.tournament-schedule__container {
  width: min(1100px, 100%);
}

.tournament-schedule__header {
  text-align: center;
  margin-bottom: 48px;
  color: #ffffff;
}

.tournament-schedule__title {
  font-family: "Crimson Text", serif;
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 16px 0;
  letter-spacing: 0.02em;
}

.tournament-schedule__subtitle {
  font-size: 18px;
  margin: 0;
  opacity: 0.85;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tournament-schedule__grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 980px) {
  .tournament-schedule__grid {
    grid-template-columns: 1fr;
  }
  
  .tournament-schedule__title {
    font-size: 36px;
  }
  
  .tournament-schedule {
    padding: 40px 16px;
  }
}

.tournament-schedule__card {
  background: var(--card-bg, #ffffff);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.tournament-schedule__card-header {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 28px 16px 18px;
  position: relative;
}

.tournament-schedule__dow {
  font-family: "Crimson Text", serif;
  letter-spacing: 0.04em;
  font-size: 24px;
  font-weight: 600;
}

.tournament-schedule__date {
  font-family: "Crimson Text", serif;
  font-size: 56px;
  line-height: 1;
  margin: 6px 0 2px;
  font-weight: 700;
}

.tournament-schedule__month {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.tournament-schedule__daynum {
  margin-top: 6px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #d9d9d9;
}

.tournament-schedule__session-bar {
  background: var(--accent-color, #a38c5b);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 14px;
}

.tournament-schedule__time {
  font-weight: 700;
  font-size: 13px;
}

.tournament-schedule__session {
  padding: 18px 14px 6px;
}

.tournament-schedule__session:last-child {
  padding-bottom: 20px;
}

.tournament-schedule__match {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 10px;
}

.tournament-schedule__team {
  font-weight: 700;
  text-align: center;
  font-size: 14px;
}

.tournament-schedule__team--1 {
  color: var(--team1-color, #143f67);
}

.tournament-schedule__team--2 {
  color: var(--team2-color, #7a2328);
}

.tournament-schedule__match-info {
  text-align: center;
}

.tournament-schedule__match-title {
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.tournament-schedule__match-type {
  font-size: 11px;
  text-transform: uppercase;
  color: #6b7280;
}

.tournament-schedule__note {
  margin: -8px 0 10px;
  text-align: center;
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}

/* Dark mode and responsive adjustments */
@media (max-width: 640px) {
  .tournament-schedule__match {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }
  
  .tournament-schedule__team {
    font-size: 16px;
  }
  
  .tournament-schedule__match-info {
    order: -1;
    margin-bottom: 8px;
  }
  
  .tournament-schedule__date {
    font-size: 48px;
  }
}


/* ---- section: two-column ---- */



/* FEATURE-BLOCK SECTION CSS - CACHE BUSTED */
/* Feature Block Section - Modern Image + Text Layout */

.section-feature-block {
    padding: 60px 0;
    --accent-primary: #d4af37;
    --accent-secondary: #b8941f;
    --accent-glow: rgba(212, 175, 55, 0.2);
    --text-color: #ffffff;
    --text-muted: rgba(255,255,255,0.75);
    --content-bg: #0a1628;
}

/* Safety: prevent horizontal overflow from feature blocks */
.section-feature-block {
    overflow-x: hidden; /* guard against wide children */
    width: 100%;
    box-sizing: border-box; /* ensure padding doesn't add to viewport width */
}

/* Ensure inner containers respect viewport sizing */
.section-feature-block .feature-container {
    box-sizing: border-box;
    max-width: 100%;
}
.section-feature-block .feature-content-inner,
.section-feature-block .feature-image-inner {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Prevent long words or inline content from forcing width */
.section-feature-block .feature-text,
.section-feature-block .feature-title,
.section-feature-block .feature-subtitle {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Images and iframes inside feature content should scale down */
.section-feature-block img,
.section-feature-block iframe,
.section-feature-block embed,
.section-feature-block video {
    max-width: 100%;
    height: auto;
}

/* Tables and preformatted blocks may overflow - make them scroll instead */
.section-feature-block table,
.section-feature-block pre {
    max-width: 100%;
    overflow: auto;
    display: block;
}

/* Accent color variants */
.section-feature-block.feature-accent-gold {
    --accent-primary: #d4af37;
    --accent-secondary: #b8941f;
    --accent-glow: rgba(212, 175, 55, 0.2);
}
.section-feature-block.feature-accent-emerald {
    --accent-primary: #10b981;
    --accent-secondary: #059669;
    --accent-glow: rgba(16, 185, 129, 0.2);
}
.section-feature-block.feature-accent-royal {
    --accent-primary: #6366f1;
    --accent-secondary: #4f46e5;
    --accent-glow: rgba(99, 102, 241, 0.2);
}
.section-feature-block.feature-accent-burgundy {
    --accent-primary: #dc2626;
    --accent-secondary: #b91c1c;
    --accent-glow: rgba(220, 38, 38, 0.2);
}

/* Container */
.feature-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
}

/* When title is placed above the image, allow a full-width title row */
.section-feature-block.feature-title-above .feature-title-block {
    grid-column: 1 / -1;
    align-self: start;
    width: 100%;
    max-width: 1200px;
    /* remove default bottom margin so padding controls determine spacing */
    margin: 0 auto 0;
    padding-top: 24px; /* default padding, overridden by inline per-section values */
    padding-bottom: 24px; /* default padding, overridden by inline per-section values */
}

/* Reduce grid gap when title sits above to make title padding the primary spacing control */
.section-feature-block.feature-title-above .feature-container {
    gap: 24px;
}

/* Ensure the H2 itself doesn't contribute extra margin so padding is the only spacing source */
.section-feature-block.feature-title-above .feature-title {
    margin: 0 !important;
}
.section-feature-block.feature-title-above .feature-title-block .feature-title {
    margin: 0 0 8px 0;
}

/* Image sizing variants */
.feature-size-small .feature-container { grid-template-columns: 40% 1fr; }
.feature-size-medium .feature-container { grid-template-columns: 50% 1fr; }
.feature-size-large .feature-container { grid-template-columns: 60% 1fr; }
.feature-size-small.feature-image-right .feature-container { grid-template-columns: 1fr 40%; }
.feature-size-medium.feature-image-right .feature-container { grid-template-columns: 1fr 50%; }
.feature-size-large.feature-image-right .feature-container { grid-template-columns: 1fr 60%; }

/* Image positioning */
.feature-image-right .feature-image-wrapper { order: 2; }
.feature-image-right .feature-content { order: 1; }

/* Image wrapper */
.feature-image-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-image-inner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0,0,0,0.4);
    width: 100%;
    display: flex;
}

/* Image aspect presets */
.section-feature-block.feature-aspect-landscape .feature-image-inner { aspect-ratio: 16/9 !important; display: block !important; height: auto !important; max-height: none !important; }
.section-feature-block.feature-aspect-portrait .feature-image-inner { aspect-ratio: 3/4 !important; display: block !important; height: auto !important; max-height: none !important; }
.section-feature-block.feature-aspect-square .feature-image-inner { aspect-ratio: 1/1 !important; display: block !important; height: auto !important; max-height: none !important; }
.section-feature-block.feature-aspect-original .feature-image-inner { aspect-ratio: auto !important; display: block !important; height: auto !important; max-height: none !important; }

/* Ensure aspect-ratio rules win over other sizing rules (min-height) */
.feature-aspect-landscape .feature-image-inner,
.feature-aspect-portrait .feature-image-inner,
.feature-aspect-square .feature-image-inner,
.feature-aspect-original .feature-image-inner {
    min-height: 0 !important;
}
.section-feature-block.feature-aspect-landscape .feature-image,
.section-feature-block.feature-aspect-portrait .feature-image,
.section-feature-block.feature-aspect-square .feature-image,
.section-feature-block.feature-aspect-original .feature-image {
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* Avoid parent grid stretching the image area when aspect is enforced */
.section-feature-block.feature-aspect-landscape .feature-container,
.section-feature-block.feature-aspect-portrait .feature-container,
.section-feature-block.feature-aspect-square .feature-container,
.section-feature-block.feature-aspect-original .feature-container {
    align-items: center !important;
}

.feature-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
    min-height: 300px;
}

.feature-image-inner:hover .feature-image {
    transform: scale(1.03);
}

.feature-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.3) 100%);
    pointer-events: none;
}

/* Content area */
.feature-content {
    padding: 20px 0;
}

.feature-content-inner {
    max-width: 500px;
    background: var(--content-bg);
    padding: 32px 40px;
    border-radius: 12px;
}

.feature-image-right .feature-content-inner {
    margin-left: auto;
}

.feature-subtitle {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 16px;
    position: relative;
    padding-left: 40px;
}

/* Scoped defensive overflow fixes for feature-block */
.section-feature-block {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}
.section-feature-block .feature-container {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}
.section-feature-block .feature-container > * {
    min-width: 0; /* allow children to shrink inside grid columns */
}
.section-feature-block .feature-image-wrapper,
.section-feature-block .feature-content,
.section-feature-block .feature-title-block {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.section-feature-block .feature-image-inner,
.section-feature-block .feature-content-inner {
    max-width: 100%;
    box-sizing: border-box;
}
.section-feature-block .feature-image {
    max-width: 100%;
    height: auto;
    display: block;
}
.section-feature-block .feature-text ul,
.section-feature-block .feature-text ol,
.section-feature-block .feature-text blockquote {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Add spacing between list items inside feature text */
.section-feature-block .feature-text li {
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
}

/* Quick emergency fix: force breakable content and normal whitespace
   inside feature blocks to prevent unbreakable editor HTML from
   causing horizontal overflow. Scoped and defensive. */
.section-feature-block,
.section-feature-block * {
    min-width: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

.feature-subtitle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 28px;
    height: 2px;
    background: var(--accent-primary);
    transform: translateY(-50%);
}

.feature-title {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 0 24px 0;
    letter-spacing: -0.02em;
}

.feature-text {
    font-size: 1.1rem;
    line-height: 1.75;
    color: #ffffff;
}

.feature-text p {
    margin: 0 0 1rem 0;
    color: #ffffff;
}

.feature-text p:last-child {
    margin-bottom: 0;
}

.feature-text ul,
.feature-text ol {
    padding-left: 1.25rem;
    margin: 1rem 0;
}

.feature-text li {
    margin: 0.6rem 0;
    color: #ffffff;
}

.feature-text li::marker {
    color: var(--accent-primary);
}

.feature-text strong {
    color: var(--accent-primary);
    font-weight: 600;
}

/* ========== ELEGANT STYLE ========== */
.feature-style-elegant .feature-image-inner {
    border: 1px solid rgba(255,255,255,0.1);
}

.feature-style-elegant .feature-image-inner::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    padding: 1px;
    background: linear-gradient(135deg, var(--accent-primary) 0%, transparent 50%, var(--accent-primary) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
}

.feature-style-elegant .feature-title {
    background: linear-gradient(135deg, #ffffff 0%, var(--accent-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========== MINIMAL STYLE ========== */
.feature-style-minimal .feature-image-inner {
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.feature-style-minimal .feature-subtitle::before {
    display: none;
}

.feature-style-minimal .feature-subtitle {
    padding-left: 0;
    color: var(--text-muted);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.7rem;
}

.feature-style-minimal .feature-title {
    font-weight: 400;
    font-size: clamp(24px, 3.5vw, 42px);
}

/* ========== BOLD STYLE ========== */
.feature-style-bold {
    padding: 80px 0;
}

.feature-style-bold .feature-image-inner {
    border-radius: 0;
    box-shadow: 20px 20px 0 var(--accent-primary);
}

.feature-style-bold .feature-image-overlay {
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.6) 100%);
}

.feature-style-bold .feature-subtitle {
    background: var(--accent-primary);
    color: #000;
    padding: 8px 16px;
    border-radius: 0;
}

.feature-style-bold .feature-subtitle::before {
    display: none;
}

.feature-style-bold .feature-title {
    font-size: clamp(32px, 5vw, 56px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ========== GLASS CARD STYLE ========== */
.feature-style-glass .feature-container {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 40px;
    gap: 40px;
}

.feature-style-glass .feature-image-inner {
    border-radius: 12px;
}

.feature-style-glass .feature-content-inner {
    padding: 20px;
}

.feature-style-glass .feature-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--accent-primary);
    margin-top: 20px;
    border-radius: 2px;
}

/* Decorative elements for glass style */
.feature-style-glass {
    position: relative;
    overflow: hidden; /* contain decorative elements and prevent overflow */
}
.feature-style-glass::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    pointer-events: none;
}

/* Mobile: make better use of horizontal space by reducing inner padding
   and allowing the container to use full viewport width. Keeps visual
   rhythm while widening content on phones. */
@media (max-width: 820px) {
    .section-feature-block {
        padding: 20px 0;
    }
    .section-feature-block .feature-container {
        padding: 0 12px;
        max-width: 100%;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .section-feature-block .feature-content-inner {
        padding: 16px;
        max-width: 100%;
    }
    .section-feature-block .feature-image-inner {
        min-height: 160px;
    }
}

/* ========== AGED PAPER STYLE ========== */
.feature-style-paper {
    position: relative;
    background: linear-gradient(135deg, #f5f0e1 0%, #e8dcc8 25%, #f2ead9 50%, #e5d9c3 75%, #f0e6d3 100%);
    padding: 80px 0;
    --text-color: #2c1810;
    --text-muted: #5c4a3d;
    --content-bg: transparent;
}

.feature-style-paper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.08;
    pointer-events: none;
}

.feature-style-paper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 0%, rgba(139, 90, 43, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(139, 90, 43, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 0% 50%, rgba(101, 67, 33, 0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 100% 50%, rgba(101, 67, 33, 0.1) 0%, transparent 40%);
    pointer-events: none;
}

.feature-style-paper .feature-container {
    position: relative;
    z-index: 1;
}

.feature-style-paper .feature-content-inner {
    background: rgba(255, 252, 245, 0.7);
    border: 1px solid rgba(139, 90, 43, 0.2);
    box-shadow: 0 4px 20px rgba(101, 67, 33, 0.1);
    padding: 40px;
    border-radius: 4px;
}

.feature-style-paper .feature-subtitle {
    color: #8b5a2b;
    font-style: italic;
}

.feature-style-paper .feature-subtitle::before {
    background: #8b5a2b;
}

.feature-style-paper .feature-title {
    color: #2c1810;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 600;
    background: none;
    -webkit-text-fill-color: #2c1810;
}

.feature-style-paper .feature-text {
    color: #3d2a1e;
}

.feature-style-paper .feature-text p {
    color: #3d2a1e;
}

.feature-style-paper .feature-text li {
    color: #3d2a1e;
}

.feature-style-paper .feature-text strong {
    color: #8b5a2b;
}

/* Per-instance custom color overrides (higher specificity) */
.section-feature-block.has-custom-color .feature-content-inner {
    background: var(--content-bg) !important;
}
.section-feature-block.has-custom-color .feature-title,
.section-feature-block.has-custom-color .feature-text,
.section-feature-block.has-custom-color .feature-subtitle,
.section-feature-block.has-custom-color .feature-text p,
.section-feature-block.has-custom-color .feature-text li {
    color: var(--text-color) !important;
}
.section-feature-block.has-custom-color .feature-subtitle::before {
    background: var(--accent-primary) !important;
}

/* Apply custom background and text color to the entire section when set */
.section-feature-block.has-custom-color {
    background: var(--content-bg) !important;
    /* ensure styles cascade for text color */
    color: var(--text-color) !important;
}

/* Ensure inner containers don't reintroduce their own backgrounds */
.section-feature-block.has-custom-color .feature-container,
.section-feature-block.has-custom-color .feature-content-inner {
    background: transparent !important;
}

/* Force color for common text elements across the whole section */
.section-feature-block.has-custom-color .feature-title,
.section-feature-block.has-custom-color .feature-subtitle,
.section-feature-block.has-custom-color .feature-text,
.section-feature-block.has-custom-color .feature-text p,
.section-feature-block.has-custom-color .feature-text li,
.section-feature-block.has-custom-color .feature-subtitle::before {
    color: var(--text-color) !important;
}

.feature-style-paper .feature-text li::marker {
    color: #8b5a2b;
}

.feature-style-paper .feature-image-inner {
    border-radius: 4px;
    box-shadow: 
        0 0 0 1px rgba(139, 90, 43, 0.3),
        0 10px 40px rgba(101, 67, 33, 0.25),
        inset 0 0 60px rgba(139, 90, 43, 0.05);
}

.feature-style-paper .feature-image-overlay {
    background: linear-gradient(135deg, rgba(245, 240, 225, 0.1) 0%, rgba(139, 90, 43, 0.15) 100%);
    mix-blend-mode: multiply;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
    .section-feature-block {
        padding: 40px 0;
    }
    
    .feature-container {
        grid-template-columns: 1fr !important;
        gap: 32px;
    }
    
    .feature-image-wrapper,
    .feature-content {
        order: unset !important;
    }
    
    .feature-content-inner {
        max-width: none;
        margin: 0 !important;
    }
    
    .feature-style-glass .feature-container {
        padding: 24px;
    }
    
    .feature-style-bold .feature-image-inner {
        box-shadow: 12px 12px 0 var(--accent-primary);
    }
}

@media (max-width: 600px) {
    .feature-title {
        font-size: 28px;
    }
    
    .feature-text {
        font-size: 1rem;
    }
    
    .feature-subtitle {
        font-size: 0.7rem;
        padding-left: 32px;
    }
    
    .feature-subtitle::before {
        width: 20px;
    }
}


/* FOOTER SECTION CSS - CACHE BUSTED */
footer.site-footer{background:var(--footer-bg);padding:16px}
footer.site-footer nav a{margin-right:12px;color:#333;text-decoration:none}
.section-footer{border-top:1px solid rgba(0,0,0,0.04);}


/* HEADER SECTION CSS - CACHE BUSTED */
/* Header section styles - SYNC TEST */
:root { --bg: #000; --text: #fff; --muted: #c7c7c7; --link: #e6e6e6; --accent: #0e3a2a; --header-height: 76px; }
* { box-sizing: border-box; }

/* Dialog handles scroll blocking natively via inert + top layer */

/* Native dialog for mobile menu - much more reliable than DIV-based modals */
.mobile-dialog {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	width: 300px;
	max-width: 80vw;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: none;
	background: rgba(0,0,0,0.98);
	color: #fff;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-y;
}

.mobile-dialog::backdrop {
	background: rgba(0,0,0,0.6);
}

.mobile-dialog-content {
	padding: 60px 20px 20px;
}

.mobile-dialog ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-dialog li {
	margin-bottom: 16px;
}

.mobile-dialog a {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 18px;
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	transition: color 0.2s ease;
	text-transform: uppercase;
}

.mobile-dialog a:hover {
	color: #b3d9c4;
}

.mobile-dialog .close-btn {
	position: absolute;
	top: 12px;
	right: 12px;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	padding: 6px 8px;
	cursor: pointer;
	border-radius: 6px;
	z-index: 10;
}

.mobile-dialog .close-btn:focus {
	outline: 2px solid rgba(255,255,255,0.12);
}

.section-header { margin: 0; padding: 0; }

header.topbar {
    position: sticky; top: 0; z-index: 99999 !important;
    background: linear-gradient(180deg, #000 0%, #070707 100%);
    border-bottom: 1px solid #0d0d0d;
}

.section-header .container {
    /* full-bleed header: span the entire viewport so brand/nav/right align to page edges */
    width: 100%; max-width: none; margin: 0; padding: 10px 32px;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
    min-height: 56px;
    position: relative; /* allow absolutely-positioned menu button */
}

/* Ensure the three grid areas place elements predictably */
.section-header .container .brand { justify-self: start; }
.section-header .container nav.mainnav { justify-self: center; }
.section-header .container .right { justify-self: end; }

/* Center the logo and subtitle within the brand area */
.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Nudge the brand block down to align subtitle with countdown credit horizontally */
    transform: translateY(6px);
}

.brand h1 {
    font-family: "Playfair Display", serif;
    color: #ffffff;
    margin: 0;
    /* Auto-sync test */
}

.brand-link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.brand-link:hover {
    opacity: 0.8;
}

.brand-link h1 {
    color: #ffffff;
    margin: 0;
}
.brand small { display: block; color: var(--muted); font-size: 0.95rem; line-height: 1; letter-spacing: .08em; margin-top: 6px; white-space: nowrap; }

/* Ensure the small subtitle shares typographic metrics with the countdown credit */
.breitling-credit { font-size: 0.95rem; line-height: 1; }

/* Mobile-only subtitle: hidden by default (desktop) */
.brand-small-mobile { display: none; }

/* Debug test comment - white trigger */

/* Purple brand test */

/* Brand styling ends - Updated with cache busting */

/* constrain the nav so it centers nicely and has generous space on either side */
/* nav now centers across the full viewport */
nav.mainnav { display: flex; justify-content: center; width: 100%; max-width: none; }
nav.mainnav ul { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0; }
nav.mainnav li { position: relative; }
nav.mainnav a { position: relative; color: #e5f7ee; text-decoration: none; font-weight: 600; padding: 8px 0; letter-spacing: .04em; transition: 180ms ease; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
nav.mainnav a .nav-word-top,
nav.mainnav a .nav-word-bottom { display: block; white-space: nowrap; }
nav.mainnav a .nav-word-top { font-size: 0.85em; opacity: 0.85; }
nav.mainnav a .nav-word-bottom { font-size: 1em; }
nav.mainnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; opacity: 0; transform: scaleX(.6); transition: 160ms ease; }
nav.mainnav a:hover { color: #fff; }
nav.mainnav a:hover::after { opacity: 1; transform: scaleX(1); }

.right { 
    display: flex; 
    flex-direction: column;
    align-items: flex-end; 
    gap: 4px; 
    background: transparent; 
    border: none; 
    padding: 10px 16px; 
    border-radius: 12px; 
    justify-self: end; 
    min-width: 0; 
    overflow: hidden; 
    flex-shrink: 0;
    position: relative;
}

/* Make sure right wrapper doesn't overlap the absolute menu button. Keep right spacing equal to container left padding (32px) so countdown aligns with logo */
.section-header .container .right { padding-right: 32px; }
.right::before {
    display: none;
}

/* Container for clock and countdown to keep them side by side */
.countdown-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Watch face with PNG option */
.analog-clock { 
    position: relative; 
    width: 40px;
    height: 40px;
    border-radius: 50%; 
    background-image: url('/uploads/watch1.png');
    background-size: cover;
    background-position: center;
    border: none;
    flex-shrink: 0; 
}

/* Option to hide PNG and show animated clock */
.analog-clock.animated {
    background-image: none;
    background: #2a2a2a;
}

/* Hide tick marks and hands when using PNG (show only when animated) */
.analog-clock .tick,
.analog-clock .hand,
.analog-clock .pivot {
    display: none;
}

.analog-clock.animated .tick,
.analog-clock.animated .hand,
.analog-clock.animated .pivot {
    display: block;
}
.tick { 
    position: absolute; 
    width: 1px; 
    height: 8px; 
    background: #ffbf28; 
    top: 2px; 
    left: 50%; 
    transform-origin: center 16px; 
    will-change: transform; 
}
.tick:nth-child(3n) { 
    height: 10px; 
    top: 1px; 
    background: #ffbf28; 
    width: 2px;
    margin-left: -0.5px;
}
.hand { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform-origin: center center; 
    background: #ffffff; 
    border-radius: 2px; 
    will-change: transform; 
}
.analog-clock .hand.hour { 
    width: 3px; 
    height: 10px; 
    margin-top: -5px; 
    margin-left: -1.5px; 
    background: #ffbf28;
}
.analog-clock .hand.minute { 
    width: 2px; 
    height: 15px; 
    margin-top: -7.5px; 
    margin-left: -1px; 
    background: #ffbf28;
}
.analog-clock .hand.second { 
    width: 1px; 
    height: 17px; 
    background: #ff6b35; 
    margin-top: -8.5px; 
    margin-left: -0.5px; 
}
.analog-clock .pivot { 
    position: absolute; 
    width: 6px; 
    height: 6px; 
    border-radius: 999px; 
    background: #ffbf28; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    border: 1px solid rgba(0,0,0,.4);
    z-index: 10; 
}

/* Default countdown style - Boxed */
.countdown { 
    display: grid; 
    grid-auto-flow: column; 
    gap: 12px; 
    align-items: center; 
    min-width: 0; 
    overflow: hidden; 
    flex-shrink: 0; 
    padding: 8px 12px;
    background: #2a2a2a;
    border: 1px solid #ffbf28;
    border-radius: 8px;
}

.cd-block { 
    display: grid; 
    grid-template-rows: auto auto; 
    justify-items: center; 
    min-width: 44px; 
    padding: 4px 6px;
    background: #1a1a1a;
    border: 1px solid #ffbf28;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.cd-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #ffbf28;
    opacity: 0.6;
}

.cd-value { 
    font-weight: 700; 
    font-size: clamp(14px, 1.8vw, 16px); 
    letter-spacing: .02em; 
    color: #ffbf28;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
}

.cd-label { 
    color: #ffbf28; 
    font-size: clamp(7px, 1vw, 9px); 
    letter-spacing: .12em; 
    text-transform: uppercase; 
    opacity: .9; 
    font-weight: 600;
}

.cd-sep { 
    width: 2px; 
    height: clamp(22px, 3vw, 28px); 
    background: #ffbf28; 
    align-self: center; 
    border-radius: 1px;
}

/* Simple countdown style override - only when .simple class is present */
.countdown.simple {
    background: transparent;
    border: none;
    padding: 4px 8px;
    gap: 8px;
    font-family: 'Arial', sans-serif;
}

.countdown.simple .cd-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffbf28;
    letter-spacing: -0.02em;
}

.countdown.simple .cd-label {
    font-size: 0.45rem;
    color: #ffbf28;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: -4px;
}

.countdown.simple .cd-sep {
    font-size: 0.8rem;
    font-weight: 300;
    color: #ffbf28;
    width: auto;
    height: auto;
    background: none;
    align-self: center;
    border-radius: 0;
}

.countdown.simple .cd-sep::before {
    content: ':';
}

.countdown.simple .cd-block {
    background: transparent;
    border: none;
    padding: 0;
    min-width: auto;
    gap: 2px;
}

.countdown.simple .cd-block::before {
    display: none;
}

/* Breitling credit text below countdown */
.breitling-credit {
    font-size: 0.95rem;
    color: #ffffff;
    text-align: right;
    margin-top: 0px;
    letter-spacing: 0.06em;
    font-weight: 400;
    opacity: 0.8;
}

.cd-block { 
    display: grid; 
    grid-template-rows: auto auto; 
    justify-items: center; 
    min-width: 44px; 
    padding: 4px 6px;
    background: #1a1a1a;
    border: 1px solid #ffbf28;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.cd-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #ffbf28;
    opacity: 0.6;
}
.cd-value { 
    font-weight: 700; 
    font-size: 16px; 
    letter-spacing: .02em; 
    color: #ffbf28;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
}
.cd-label { 
    color: #ffbf28; 
    font-size: 9px; 
    letter-spacing: .12em; 
    text-transform: uppercase; 
    opacity: .9; 
    font-weight: 600;
}
.cd-sep { 
    width: 2px; 
    height: 28px; 
    background: #ffbf28; 
    align-self: center; 
    border-radius: 1px;
}

.menu-btn { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid #1a1a1a; background: #0e0e0e; }

/* Desktop: keep menu button visually at the far right without affecting nav centering */
.section-header .container .menu-btn { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; content: ""; width: 20px; height: 2px; background: #fff; position: relative; border-radius: 2px; }
.menu-icon::before { position: absolute; top: -6px; }
.menu-icon::after { position: absolute; top: 6px; }

/* Hide countdown when it would interfere with nav menu */
@media (max-width: 1100px) and (min-width: 821px) {
	.right {
		display: none !important;
	}
	
	/* Rebalance the grid when countdown is hidden */
	.section-header .container {
		grid-template-columns: 1fr auto 1fr;
	}
}

@media (max-width: 820px) {
	nav.mainnav { display: none; }
	.menu-btn { display: flex; }
	.mobile-panel { display: block; }
	
	.section-header .container {
		padding: 10px 16px; /* Reduce padding on mobile */
		gap: 16px; /* Reduce gap */
		grid-template-columns: 1fr auto; /* Just brand and menu button */
	}
	
	/* Hide countdown/clock on mobile but keep them in DOM to prevent JS errors */
	.right { 
		display: none !important;
		visibility: hidden;
		position: absolute;
		left: -9999px;
		pointer-events: none;
	}
	
	/* Make brand more compact on mobile */
	.brand { 
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		transform: none;
		width: auto;
	}
	
	/* Reduce logo size by 10% on mobile */
	.brand .brand-link img {
		transform: scale(0.9);
		transform-origin: left center;
	}
	
	.brand h1 { font-size: 18px; margin: 0; }
	
	/* Show subtitle below logo on mobile */
	.brand small { 
		display: block !important;
		font-size: 0.75rem;
		color: var(--muted);
		text-align: left;
		margin-top: 4px;
		white-space: normal;
		max-width: 100%;
		line-height: 1.3;
	}
	
	/* Make breitling credit smaller on mobile */
	.breitling-credit { font-size: 0.85rem; }
}

@media (min-width: 821px) {
	.analog-clock { 
        width: 50px;
        height: 50px;
        border: none;
    }
	.tick { transform-origin: center 29px; }
	.analog-clock .hand.hour { height: 17px; margin-top: -8.5px; }
	.analog-clock .hand.minute { height: 25px; margin-top: -12.5px; }
	.analog-clock .hand.second { height: 28px; margin-top: -14px; }
	.brand h1 { font-size: 22px; }
    .countdown {
        gap: 16px;
        padding: 10px 16px;
    }
    .cd-block {
        min-width: 48px;
        padding: 6px 8px;
    }
    .cd-value {
        font-size: 0.9rem;
    }
    .cd-sep {
        height: 32px;
    }
    
    /* Simple countdown larger sizes */
    .countdown.simple .cd-value {
        font-size: 1rem;
    }
    .countdown.simple .cd-label {
        font-size: 0.55rem;
    }
    .countdown.simple .cd-sep {
        font-size: 1rem;
    }
}

@media (min-width: 1024px) {
    .analog-clock { 
        width: 55px;
        height: 55px;
    }
    .countdown.simple .cd-value {
        font-size: 1.2rem;
    }
    .countdown.simple .cd-label {
        font-size: 0.6rem;
    }
    .countdown.simple .cd-sep {
        font-size: 1.2rem;
    }
}

/* Mobile Countdown Styles */
.mobile-countdown-wrapper {
    display: none; /* Hidden by default on desktop */
}

@media (max-width: 820px) {
    .mobile-countdown-wrapper {
        display: block;
        background: linear-gradient(180deg, #000 0%, #070707 100%); /* Match header background */
        padding: 14px 16px 10px;
        text-align: center;
        border-bottom: 1px solid #0d0d0d;
    }
    
    .mobile-countdown-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }
    
    .mobile-analog-clock.analog-clock {
        display: block !important;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }
    
    .mobile-countdown-wrapper .mobile-countdown {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
    }
    
    .mobile-countdown-wrapper .cd-block {
        min-width: 40px;
        padding: 4px 6px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 6px;
    }
    
    .mobile-countdown-wrapper .cd-value {
        font-family: var(--font-display, 'Montserrat', sans-serif);
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--gold, #c9a962);
        line-height: 1.2;
    }
    
    .mobile-countdown-wrapper .cd-label {
        font-family: var(--font-body, 'Inter', sans-serif);
        font-size: 0.6rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: rgba(255, 255, 255, 0.6);
        margin-top: 2px;
    }
    
    .mobile-countdown-wrapper .cd-sep {
        color: var(--gold, #c9a962);
        font-size: 1.1rem;
        font-weight: 300;
        opacity: 0.5;
    }
    
    .mobile-countdown-wrapper .mobile-breitling-credit {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        padding-left: 10px;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        flex-shrink: 0;
    }
    
    .mobile-countdown-wrapper .mobile-breitling-credit .credit-label {
        font-family: var(--font-body, 'Inter', sans-serif);
        font-size: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 2px;
        white-space: nowrap;
    }
    
    .mobile-countdown-wrapper .mobile-breitling-credit .credit-sponsor {
        font-family: var(--font-display, 'Montserrat', sans-serif);
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--gold, #c9a962);
        white-space: nowrap;
    }
}


/* HERO SECTION CSS - CACHE BUSTED */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

/* =====================================================
   HERO SECTION - Clean Full-Screen Solution
   JS handles sizing, CSS handles layout
   ===================================================== */

/* Hero section base */
.section-hero.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* Safety: prevent hero-related horizontal overflow (page scrolling right) */
.section-hero {
  overflow-x: hidden; /* ensure any positioned children can't create horizontal scroll */
}

/* Constrain slides and images to viewport width to avoid blank horizontal space */
.section-hero .hero-slides,
.section-hero .hero-slide {
  box-sizing: border-box;
  max-width: 100vw;
}
.section-hero .hero-image {
  max-width: 100vw;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Standard height options */
.hero-medium { height: 420px; }
.hero-large { height: 680px; }

/* =====================================================
   FULL SCREEN HERO
   Height is set by JavaScript for accuracy
   ===================================================== */
.hero-full {
  position: relative;
  width: 100%;
    /* Compute a CSS variable for the hero's minimum visual height (viewport
       minus header, clamped to 60vh). We expose it so slide/image layers
       can reliably match the same height and avoid gaps when content
       is smaller than the visual hero area. Allow the hero to grow if
       content requires more space so text/logo are never clipped. */
    --hero-min-height: max(calc(100vh - var(--header-height, 76px)), 60vh);
    height: auto;
    min-height: var(--hero-min-height);
  max-width: 100vw;
  display: block;
}

/* Fullscreen layering: keep images/overlay covering while content can grow */
.hero-full .hero-slides,
.hero-full .hero-overlay {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: var(--hero-min-height, 100%);
}

.hero-full .hero-content {
  position: relative;
  min-height: var(--hero-min-height, 100%);
}

/* =====================================================
   IMAGE LAYER
   ===================================================== */
.hero-slides {
  grid-area: 1 / 1 / -1 / -1;
  position: relative;
  width: 100%;
  /* Match the hero's minimum visual height so the image layer always
     covers the visual hero area even when the hero container is sized
     by `min-height` rather than an explicit `height`. */
  height: 100%;
  min-height: var(--hero-min-height, 100%);
  display: flex;
  transition: transform 0.45s ease;
  will-change: transform;
}

.hero-slide {
  position: relative;
  min-width: 100%;
  flex: 0 0 100%;
  height: 100%;
  min-height: var(--hero-min-height, 100%);
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* =====================================================
   OVERLAY
   ===================================================== */
.hero-overlay {
  grid-area: 1 / 1 / -1 / -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 60%), var(--hero-overlay);
  z-index: 1;
}

/* =====================================================
   CONTENT LAYER
   ===================================================== */
.hero-content {
  grid-area: 1 / 1 / -1 / -1;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
  overflow: hidden;
}

.hero-content-inner {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  transition: transform 0.15s ease-out;
}

/* =====================================================
   TYPOGRAPHY
   ===================================================== */
.hero-title {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 5vw, 4.5rem);
  line-height: 1;
  margin: 0 0 0.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.hero-subtitle {
  font-size: clamp(0.9rem, 2.5vw, 1.4rem);
  margin: 0 0 1rem;
  opacity: 0.95;
  line-height: 1.5;
}

.hero-subtitle p {
  margin: 0 0 0.5em;
}

.hero-subtitle p:last-child {
  margin-bottom: 0;
}

.hero-subtitle ul,
.hero-subtitle ol {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
  list-style-position: outside;
  line-height: 1.8;
  color: inherit;
}

.hero-subtitle li {
  margin-bottom: 0.55rem;
  font-size: clamp(0.95rem, 2.4vw, 1.3rem);
  color: inherit;
}

.hero-subtitle li::marker {
  color: #ffc423;
  font-size: 1.15em;
}

/* =====================================================
   LOGO
   ===================================================== */
.hero-logo {
  margin-bottom: 1.25rem;
}

.hero-logo-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Corner logo positions */
.logo-pos-bottom-left .hero-logo {
  position: absolute;
  left: 16px;
  bottom: 10%;
  margin: 0;
  z-index: 5;
}

.logo-pos-bottom-right .hero-logo {
  position: absolute;
  right: 16px;
  bottom: 10%;
  margin: 0;
  z-index: 5;
}

/* =====================================================
   CTA BUTTON
   ===================================================== */
.hero-cta {
  display: inline-block;
  background: #ffbf28;
  color: #000;
  padding: 0.75rem 1.5rem;
  border-radius: 2px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.95rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  margin-top: 1.5rem;
  transition: transform 0.2s ease;
}

.hero-cta:hover {
  transform: translateY(-2px);
}

/* =====================================================
   NAVIGATION
   ===================================================== */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  border: none;
  color: #fff;
  padding: 0.5rem 0.75rem;
  font-size: 1.5rem;
  z-index: 5;
  cursor: pointer;
}

.hero-arrow--prev { left: 1rem; }
.hero-arrow--next { right: 1rem; }

.hero-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  display: flex;
  gap: 0.5rem;
  z-index: 6;
}

.hero-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  padding: 0;
  cursor: pointer;
}

.hero-dots button[aria-selected="true"] {
  background: #fff;
}

.section-hero[data-slides-count="1"] .hero-dots,
.section-hero[data-slides-count="1"] .hero-arrow {
  display: none !important;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (min-width: 768px) {
  .hero-content {
    padding: 2rem 3rem;
  }
}

@media (max-width: 767px) {
  .hero-arrow {
    display: none;
  }
  
  .hero-content {
    padding: 1.5rem;
  }
  
  .hero-dots button {
    width: 12px;
    height: 12px;
  }
  
  /* Crop to show top portion of image on tablet */
  .hero-image {
    object-position: center 20%;
  }
}

@media (max-width: 480px) {
  /* Crop to show even more of the top on mobile */
  .hero-image {
    object-position: center 15%;
  }
}

/* =====================================================
   MOBILE: SUBTITLE BELOW HERO
   ===================================================== */
@media (max-width: 767px) {
  .section-hero.hero,
  .section-hero.hero.hero-full {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    grid-template-rows: unset !important;
    grid-template-columns: unset !important;
    position: relative !important;
  }
  
  /* Hero image container takes up the visual hero space */
  .section-hero.hero .hero-slides,
  .hero-full .hero-slides {
    position: relative !important;
    grid-area: unset !important;
    /* Use CSS var-based vh and subtract header height so hero fills
       the mobile viewport while avoiding address-bar jump issues */
    height: calc((var(--vh, 1vh) * 100) - var(--header-height, 76px)) !important;
    min-height: 320px !important;
    flex-shrink: 0 !important;
    order: 1;
  }
  
  /* Overlay only covers the image area */
  .section-hero.hero .hero-overlay,
  .hero-full .hero-overlay {
    position: absolute !important;
    grid-area: unset !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: calc((var(--vh, 1vh) * 100) - var(--header-height, 76px)) !important;
    min-height: 320px !important;
    z-index: 2;
  }
  
  /* Content stacks below on mobile - but we need to restructure */
  .section-hero.hero .hero-content,
  .hero-full .hero-content {
    position: absolute !important;
    grid-area: unset !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc((var(--vh, 1vh) * 100) - var(--header-height, 76px)) !important;
    min-height: 320px !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    padding: 2rem 1.5rem !important;
  }

  /* Ensure slides and images fill the computed mobile hero height so
     the image covers the entire visual area without leaving gaps */
  .section-hero.hero .hero-slide,
  .hero-full .hero-slide {
    height: 100% !important;
    min-height: 0 !important;
  }

  .section-hero.hero .hero-image,
  .hero-full .hero-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  
  .hero-content-inner {
    transform: none !important;
    max-width: 100% !important;
    text-align: center;
  }
  
  /* Hide subtitle inside hero content on mobile - we'll show it separately */
  .section-hero.hero .hero-subtitle {
    display: none !important;
  }
  
  /* Logo stays in normal position over hero */
  .section-hero.hero .hero-logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 5 !important;
    margin: 0 auto 20px auto !important;
    padding: 0 !important;
  }
  
  /* Hide title on mobile by default */
  .section-hero.hero .hero-title {
    display: none !important;
  }
  
  /* Show title on mobile when enabled */
  .section-hero.hero.show-title-mobile .hero-title {
    display: block !important;
    font-size: clamp(1.2rem, 4vw, 2rem);
    margin-bottom: 0.5rem;
  }
  
  /* Hide CTA button inside hero on mobile - it shows below subtitle */
  .section-hero.hero .hero-cta {
    display: none !important;
  }
  
  /* Navigation arrows and dots */
  .section-hero.hero .hero-arrow {
    top: 42vh !important;
  }
  
  .section-hero.hero .hero-dots {
    top: calc(85vh - 30px) !important;
    bottom: auto !important;
  }
  
  /* CTA button stays on hero */
  .section-hero.hero .hero-cta {
    margin-top: 1.5rem !important;
  }
}

/* Subtitle section that appears below hero on mobile */
.mobile-subtitle-section {
  display: none;
}

/* Scroll indicator - hidden by default */
.scroll-indicator {
  display: none;
}

@keyframes scrollBounceY {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.8;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

@keyframes scrollBounceCenter {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-50%) translateY(6px);
    opacity: 1;
  }
}

/* Desktop: show scroll indicator inside hero content for full-screen hero */
@media (min-width: 768px) {
  .section-hero.hero-full .hero-content-inner .scroll-indicator {
    display: block;
    position: relative;
    margin: 1.5rem auto 0;
    left: auto;
    transform: none;
    bottom: auto;
    z-index: 6;
    animation: scrollBounceY 2s ease-in-out infinite;
    text-align: center;
  }
  .section-hero.hero-full .hero-content-inner .scroll-indicator .scroll-indicator-arrow {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    transform: rotate(45deg);
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .mobile-subtitle-section {
    display: block;
    background: #0a0a0a;
    color: #fff;
    padding: 2rem 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
  }
  
  /* Scroll indicator on mobile */
  .scroll-indicator {
    display: block;
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    animation: scrollBounceCenter 2s ease-in-out infinite;
  }
  
  .scroll-indicator-arrow {
    display: block;
    width: 24px;
    height: 24px;
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    transform: rotate(45deg);
  }
  
}


/* PRODUCT SECTION CSS - CACHE BUSTED */
.section-product { padding: 40px 0; }
.product-container .product-header { max-width: 900px; margin: 0 auto 18px; padding: 0 18px; text-align: center; }
.product-title { font-size: 28px; margin: 0 0 8px; }
.product-subtitle { color: #6b7280; margin: 0 0 18px; }
.product-grid { display: grid; gap: 18px; max-width: 1200px; margin: 0 auto; padding: 0 18px; }
.product-grid--1col { grid-template-columns: 1fr; }
.product-grid--2col { grid-template-columns: repeat(2, 1fr); }
.product-grid--3col { grid-template-columns: repeat(3, 1fr); }
.product-grid--4col { grid-template-columns: repeat(4, 1fr); }
.product-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 18px rgba(12,18,30,0.06); border: 1px solid rgba(12,18,30,0.04); display: flex; flex-direction: column; }
.product-media { position: relative; }
.product-media::before {
  /* Fallback box to preserve a 3:4 (portrait) ratio in older browsers.
     padding-top is (height / width) * 100% = (4/3)*100 = 133.333% */
  content: "";
  display: block;
  width: 100%;
  padding-top: 133.3333%;
}
.product-image {
  width: 100%;
  /* Use a portrait aspect ratio (3:4). object-fit keeps the image cropped nicely. */
  aspect-ratio: 3 / 4;
  height: auto; /* preferred modern behavior */
  object-fit: cover;
  display: block;
  /* If the fallback pseudo-element is used we want the image to fill the box */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.product-badge { position: absolute; left: 12px; top: 12px; background: rgba(0,0,0,0.6); color: #fff; padding: 6px 8px; border-radius: 6px; font-size: 12px; }
.product-body { padding: 14px; flex: 1 1 auto; }
.product-name { margin: 0 0 6px; font-size: 18px; }
.product-price { color: #065f46; font-weight: 700; margin-bottom: 8px; }
.product-desc { color: #374151; font-size: 14px; line-height: 1.6; }
.product-footer { padding: 12px; border-top: 1px solid rgba(0,0,0,0.04); text-align: center; }
.product-cta { display: inline-block; padding: 8px 14px; background: #065f46; color:#fff; border-radius: 8px; text-decoration: none; }
.product-cta.disabled {
  /* Keep same visual color as enabled buttons for mockup/demo, but remain non-interactive */
  background: #065f46; /* same as .product-cta */
  color: #ffffff;
  opacity: 0.95; /* slight dim so it's still clear it's mock-disabled without changing color */
  pointer-events: none;
  cursor: default;
}

@media (max-width: 820px) {
  .product-grid--3col, .product-grid--4col { grid-template-columns: repeat(2,1fr); }
}


/* SPONSORS SECTION CSS - CACHE BUSTED */
/* Sponsors Marquee Section Styles */
.section-sponsors {
  padding: 3rem 0;
  background: #ffffff;
  overflow: hidden;
  margin: 0 auto;
  max-width: 1200px;
}

/* Header styling */
.sponsors-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  padding: 0 2rem;
}

.sponsors-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: #1a1a1a;
}

.sponsors-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: #666;
  margin: 0;
  font-weight: 400;
}

/* Marquee container */
.sponsors-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 0) 5%, 
    rgba(255, 255, 255, 0) 95%, 
    rgba(255, 255, 255, 1) 100%
  );
}

/* Track that holds the logos */
.sponsors-track {
  display: flex;
  gap: 2rem;
  align-items: center;
  width: max-content;
  animation: scrollLeft var(--scroll-speed, 34s) linear infinite;
}

/* Pause animation on hover */
.sponsors-marquee.pause-on-hover:hover .sponsors-track {
  animation-play-state: paused;
}

/* Scroll animation */
@keyframes scrollLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Logo styling */
.sponsor-logo {
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(1.1) opacity(0.85);
  transition: all 0.3s ease;
  display: block;
}

.sponsor-logo:hover,
.sponsor-link:hover .sponsor-logo {
  filter: none;
  transform: translateY(-4px);
}

/* No grayscale variant */
.section-sponsors.no-grayscale .sponsor-logo {
  filter: none;
  opacity: 1;
}

.section-sponsors.no-grayscale .sponsor-logo:hover,
.section-sponsors.no-grayscale .sponsor-link:hover .sponsor-logo {
  filter: none;
  transform: translateY(-4px);
}

/* Link styling */
.sponsor-link {
  display: block;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.sponsor-link:focus {
  outline: 2px solid #007bff;
  outline-offset: 4px;
  border-radius: 8px;
}

/* Size variants */
.sponsors-small .sponsor-logo {
  width: 120px;
  max-height: 60px;
}

.sponsors-medium .sponsor-logo {
  width: 160px;
  max-height: 80px;
}

.sponsors-large .sponsor-logo {
  width: 200px;
  max-height: 100px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section-sponsors {
    padding: 2rem 0;
  }
  
  .sponsors-header {
    margin-bottom: 2rem;
    padding: 0 1rem;
  }
  
  .sponsors-track {
    gap: 1.5rem;
  }
  
  .sponsors-small .sponsor-logo {
    width: 100px;
    max-height: 50px;
  }
  
  .sponsors-medium .sponsor-logo {
    width: 130px;
    max-height: 65px;
  }
  
  .sponsors-large .sponsor-logo {
    width: 150px;
    max-height: 75px;
  }
  
  /* Faster scroll on mobile */
  .sponsors-track {
    animation-duration: calc(var(--scroll-speed, 34s) * 0.7);
  }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .sponsors-track {
    animation-duration: calc(var(--scroll-speed, 34s) * 3);
  }
  
  .sponsor-logo:hover,
  .sponsor-link:hover .sponsor-logo {
    transform: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .sponsor-logo {
    filter: grayscale(100%) contrast(1.2) opacity(1);
    border: 2px solid #333;
  }
  
  .sponsor-logo:hover,
  .sponsor-link:hover .sponsor-logo {
    filter: none;
    border-color: #007bff;
  }
}

/* Scoped defensive fixes to prevent marquee from forcing page width */
.sponsors-marquee {
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden; /* ensure visually clipped */
  contain: layout; /* isolate layout so children can't expand ancestors */
}
.sponsors-track {
  min-width: 100%; /* ensure track does not reduce below container width */
  will-change: transform;
}
.sponsor-logo {
  max-width: 100%;
  height: auto;
  display: block;
}
.sponsors-track > * {
  min-width: 0; /* allow flex children to shrink */
}


/* TEAM-ROSTER SECTION CSS - CACHE BUSTED */
/* Team Roster Explorer Section Styles */

.section-team-roster {
    padding: 60px 20px;
    background: #f8fafc;
    color: #1e293b;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Header */
.roster-title {
    font-size: clamp(35px, 4vw, 53px);
    font-weight: 700;
    text-align: center;
    margin: 0 0 12px;
    color: #0f172a;
}

.roster-subtitle {
    font-size: 22px;
    text-align: center;
    margin: 0 0 40px;
    color: #64748b;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Search UI removed */

/* Teams Grid */
/* Teams Grid (Apple-style) */
.teams-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 40px;
}

.teams-grid[data-columns="1"] { grid-template-columns: 1fr; }
.teams-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.teams-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }

/* Team Cards (Apple-style) */
.team-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 14px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    width: 100%;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    display: block;
}

.team-card:focus { outline: 4px solid rgba(0,0,0,.06); }

.team-card:hover { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(0,0,0,.08); }

.card-content { display: flex; align-items: center; gap: 14px; }

.team-logo { height: 150px; width: 150px; display: grid; place-items: center; border-radius: 18px; background: #f6f7f8; border: 1px solid #e5e7eb; font-size: 60px; flex-shrink: 0; }

/* Ensure logo images scale to the container */
.team-logo img,
.team-logo-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.team-meta { flex: 1; min-width: 0; }

.team-city-text { text-transform: uppercase; letter-spacing: .06em; font-size: 14px; color: #6b7280; }

.team-name-text { font-weight: 700; font-size: 24px; margin-top: 2px; color: #0a0a0a; }

.team-sport-text { font-size: 15px; color: #6b7280; margin-top: 2px; }

.chevron { margin-left: auto; opacity: .6; color: #94a3b8; }

/* Team Detail Layer */
.team-layer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    pointer-events: none;
}
/* Ensure the layer covers the full viewport height on mobile */
.team-layer {
    height: 100vh;
}

.team-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* When the sheet is not open, ensure the backdrop is not interactive or focusable */
.team-layer:not(.is-open) .team-backdrop {
    pointer-events: none;
    visibility: hidden;
}

.team-backdrop.blur {
    backdrop-filter: blur(6px) saturate(1.05);
}

.team-sheet {
    position: fixed;
    left: 50%;
    /* account for device safe area at the bottom (iPhone home indicator) */
    bottom: env(safe-area-inset-bottom, 0);
    /* start fully off-screen including safe-area offset so open animation lands flush */
    transform: translateX(-50%) translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
    width: 1500px;
    max-width: calc(100% - 32px);
    background: #fff;
    border-radius: 18px 18px 0 0;
    height: 95vh;
    max-height: 95vh;
    transition: transform 0.38s cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -20px 60px rgba(0,0,0,0.12);
    will-change: transform;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.team-layer.is-open {
    display: block;
    pointer-events: auto;
}

.team-layer.is-open .team-backdrop {
    opacity: 1;
}

.team-layer.is-open .team-sheet {
    transform: translateX(-50%) translateY(0%);
}

.sheet-inner {
    padding: 0 20px 28px;
    overflow-y: auto;
    flex: 1;
    /* Enable native momentum scrolling on iOS and prevent background overscroll */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Ensure there's enough bottom padding inside the sheet so content isn't hidden
   by the home indicator or bottom UI when the sheet is open on mobile */
.sheet-inner {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* Two-column layout for sheet content */
.sheet-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 16px;
}

.sheet-players-column {
    min-width: 0;
}

.sheet-description-column {
    min-width: 0;
}

.sheet-handle {
    height: 6px;
    width: 60px;
    background: #e5e7eb;
    border-radius: 999px;
    margin: 10px auto 6px;
}

/* Sheet Header */
.sheet-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 18px;
    margin-bottom: 0;
    /* Keep header visible while scrolling the sheet */
    position: sticky;
    top: 0;
    z-index: 3;
    /* Backing so text stays readable when content scrolls under */
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(14,20,30,0.04);
}

.team-logo-display {
    font-size: 64px;
    width: 150px;
    height: 150px;
    display: grid;
    place-items: center;
    background: var(--soft, #f3f4f6);
    border-radius: 18px;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
}

/* Ensure sheet logo images scale to the container */
.team-logo-display img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.team-info {
    flex: 1;
    min-width: 0;
}

.team-city {
    font-size: 16px;
    color: #64748b;
    margin-bottom: 4px;
}

.team-name {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.team-sport {
    font-size: 16px;
    color: #64748b;
}

.close-button {
    background: transparent;
    border: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    transition: background 0.15s ease, color 0.15s ease;
}

.close-button:hover { background: rgba(0,0,0,0.04); color: #111827; }

/* Sheet Sections */
.sheet-section {
    margin-bottom: 32px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title svg {
    color: #64748b;
}

/* Players Grid (Horizontal stack layout like attachment) */
.players-container {
    background: transparent;
    border-radius: 12px;
    padding: 8px 0 28px;
}

.players-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Horizontal player card layout - Two equal columns */
.player-card {
    display: flex;
    /* stretch children so image can fill card height */
    align-items: stretch;
    gap: 16px;
    /* center the two-column group horizontally */
    justify-content: center;
     /* Background can be overridden per-card via the --player-card-bg CSS variable.
         Default uses upload fallback. Use a PNG with transparency and set
         --player-card-overlay: transparent to show underlying content. */
     background-color: transparent;
     background-image: var(--player-card-bg, url('/uploads/fd2bc76ec437bb90.png'));
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
    border-radius: 12px;
    padding: 16px;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.player-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Overlay to keep text readable on top of background image */
.player-card::after {
    content: "";
    position: absolute;
    inset: 0;
    /* overlay can be overridden; set to 'transparent' to disable */
    background: var(--player-card-overlay, linear-gradient(rgba(0,0,0,0.36), rgba(0,0,0,0.12)));
    z-index: 0;
    pointer-events: none;
}

/* Ensure card children render above the overlay */
.player-card > * {
    position: relative;
    z-index: 1;
}

/* Make text light for contrast on the image */
.player-card .player-name,
.player-card .player-role,
.player-card .player-info {
    color: #ffffff;
}

.player-image {
    /* reduced by ~10% for a slightly smaller image */
    /* reduced another ~10% (multiply by 0.9) */
    width: 34.425%;
    /* make image a fixed flex item so it doesn't stretch */
    flex: 0 0 34.425%;
    /* fill the card height and visually extend to the card edge */
    height: 100%;
    border-radius: 12px 0 0 12px;
    object-fit: cover;
    flex-shrink: 0;
    /* neutralize bottom padding so image reaches the card bottom */
    margin-bottom: -16px;
    /* allow PNG alpha to show the card background */
    background: transparent;
}

.player-info {
    width: 50%;
    flex-shrink: 0;
}

.player-info {
    /* make info a fixed-width flex item so the two columns remain centered as a group */
    flex: 0 0 50%;
    min-width: 0;
    /* provide internal breathing room so text doesn't hug the card edges */
    padding: 16px 24px; /* top/bottom 16px, left/right 24px */
    box-sizing: border-box;
}

/* Thin separator between image and player info. Color can be overridden with --player-sep-color */
.player-info::before {
    content: "";
    position: absolute;
    /* place the separator in the gap between image and info.
       Everything is driven by variables so it can scale per-breakpoint
       or per-card. Defaults are provided inline. */
    left: calc(-1 * var(--player-sep-offset, 8px));
    top: var(--player-sep-gap, 12px);
    bottom: var(--player-sep-gap, 12px);
    /* increase default thickness to 4px for stronger visual separation */
    width: var(--player-sep-width, 4px);
    background: var(--player-sep-color, rgba(255,255,255,0.45));
    border-radius: calc(var(--player-sep-width, 4px));
    z-index: 1;
    pointer-events: none;
}

.player-name {
    font-size: 29px; /* increased ~25% from 23px */
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* allow the name to wrap (we insert a <br> before the last name in JS) */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.player-role {
    font-size: 18px; /* increased ~25% from 14px */
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Remove old gradient card styles that are no longer needed */
.player-card::before,
.card-team-logo,
.player-name-overlay {
    display: none;
}

/* Team Description */
.team-description-box {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    height: fit-content;
    position: sticky;
    top: 0;
}

/* Club image above the description; falls back to a neutral placeholder */
.team-club-image {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #e6eef6 0%, #f6f8fb 100%);
}

.description-title {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
}

.team-description {
    font-size: 16px;
    line-height: 1.6;
    color: #374151;
}

/* Mobile responsive - stack columns */
@media (max-width: 768px) {
    .sheet-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .sheet-description-column {
        order: 1; /* Move description below players on mobile */
    }
    
    .team-description-box {
        position: static;
    }
}

/* Active state is handled by .team-layer.is-open and inline JS (body overflow) */

/* Responsive Design */
@media (max-width: 768px) {
    .section-team-roster {
        padding: 40px 16px;
    }
    
    .teams-grid[data-columns="2"],
    .teams-grid[data-columns="3"] {
        grid-template-columns: 1fr;
    }
    
    .team-sheet {
        width: 100%;
        max-width: none;
        left: 0;
        transform: translateY(100%);
        border-radius: 12px 12px 0 0;
    /* Use a slightly shorter sheet on mobile so browser UI remains visible */
    height: 82vh;
    max-height: 82vh;
    }
    
    .team-layer.is-open .team-sheet {
        transform: translateY(0%);
    }
    
    .player-card {
        /* tighter card padding on mobile to maximize usable space */
        padding: 10px;
        gap: 10px;
        justify-content: flex-start; /* allow stacking feel on mobile */
    }
    
    .player-image {
    width: 122px;
    height: 122px;
    margin-bottom: -12px; /* account for mobile padding */
    flex: 0 0 122px;
    border-radius: 12px;
    }

    .player-info {
        padding: 10px 10px; /* smaller padding on mobile */
    }

    /* mobile-friendly separator vars */
    :root {
        --player-sep-width: 1px;
        --player-sep-gap: 10px;
        --player-sep-offset: 6px;
    }
    
    /* Make sure player name/role fit better on most phones */
    .player-name {
        font-size: 18px;
        line-height: 1.05;
    }

    .player-role {
        font-size: 12px;
        line-height: 1.1;
    }

    /* Mobile: reduce logos and main grid text by 50% */
    .team-logo {
        width: 75px;
        height: 75px;
        font-size: 30px;
        border-radius: 12px;
    }

    .team-logo-display {
        width: 75px;
        height: 75px;
        font-size: 32px;
    }

    .roster-title {
        font-size: clamp(18px, 2vw, 26px) !important;
    }

    .roster-subtitle {
        font-size: 11px !important;
    }

    .team-city-text { font-size: 7px !important; }
    .team-name-text { font-size: 14px !important; }
    .team-sport-text { font-size: 8px !important; }
    
    .sheet-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .sheet-description-column {
        order: 1;
    }
    
    .team-description-box {
        position: static;
    }
}

@media (max-width: 480px) {
    .roster-title {
        font-size: 28px;
    }
    
    .roster-subtitle {
        font-size: 16px;
    }
    
    .card-content {
        gap: 12px;
    }
    
    .team-logo {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    
    .team-name-text {
        font-size: 16px;
    }
    
    .players-grid {
        grid-template-columns: 1fr;
    }
}

/* smaller devices: make separator slightly more compact */
@media (max-width: 360px) {
    :root {
        --player-sep-width: 1px;
        --player-sep-gap: 8px;
        --player-sep-offset: 5px;
    }
}


/* TEXT SECTION CSS - CACHE BUSTED */

.section-text {
	/* Reduced vertical spacing between consecutive text sections */
	padding: 24px 0;
	--text-bg: rgba(255,255,255,0.02);
	/* Accessible color variables */
	--text-color: #0f172a;
	--text-muted: #475569;
	--title-color: #071033;
	--font-stack: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	/* Accent color defaults */
	--accent-primary: #d4af37;
	--accent-secondary: #b8941f;
	--accent-glow: rgba(212, 175, 55, 0.15);
}

/* Custom color overrides - when backgroundColor/textColor are set */
.section-text.has-custom-color .text-inner,
.section-text.has-custom-color .text-title,
.section-text.has-custom-color .text-content,
.section-text.has-custom-color .text-content p,
.section-text.has-custom-color .text-content p:first-of-type,
.section-text.has-custom-color .text-content li,
.section-text.has-custom-color .text-content ul,
.section-text.has-custom-color .text-content ol {
	color: inherit !important;
}

/* Ensure list markers inherit the section text color (browsers differ
   in marker inheritance). This covers both ::marker and legacy marker
   implementations and forces visual consistency when editors inject
   lists. */
.section-text.has-custom-color .text-content li::marker,
.section-text.has-custom-color .text-content li::-webkit-list-marker {
	color: inherit !important;
}

/* As a fallback, enforce color on list elements and their direct markers */
.section-text.has-custom-color .text-content ul,
.section-text.has-custom-color .text-content ol,
.section-text.has-custom-color .text-content li {
	color: inherit !important;
}

/* Accent color variants */
.section-text.text-accent-gold {
	--accent-primary: #d4af37;
	--accent-secondary: #b8941f;
	--accent-glow: rgba(212, 175, 55, 0.15);
}
.section-text.text-accent-emerald {
	--accent-primary: #059669;
	--accent-secondary: #047857;
	--accent-glow: rgba(5, 150, 105, 0.15);
}
.section-text.text-accent-royal {
	--accent-primary: #3b82f6;
	--accent-secondary: #2563eb;
	--accent-glow: rgba(59, 130, 246, 0.15);
}
.section-text.text-accent-burgundy {
	--accent-primary: #9f1239;
	--accent-secondary: #881337;
	--accent-glow: rgba(159, 18, 57, 0.15);
}

.section-text .text-inner {
	/* Constrain content to 800px maximum per request */
	max-width: 800px;
	margin: 0 auto;
	padding: 20px 18px;
	background: var(--text-bg);
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(12,18,30,0.04);
	border: 1px solid rgba(12,18,30,0.035);
	color: var(--text-color);
	font-family: var(--font-stack);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Prevent padding from expanding the element beyond its max-width */
.section-text .text-inner {
	box-sizing: border-box;
}

/* Ensure two-column children can shrink inside grid/columns to avoid overflow */
.section-text .text-content.two-column > * {
	min-width: 0;
}

/* Constrain media and pre/table inside text sections */
.section-text .text-content img,
.section-text .text-content iframe,
.section-text .text-content video,
.section-text .text-content svg {
	max-width: 100%;
	height: auto;
}
.section-text .text-content pre,
.section-text .text-content table {
	max-width: 100%;
	overflow-x: auto;
}

/* ========== ELEGANT CARD STYLE ========== */
.section-text.text-style-elegant {
	padding: 40px 0;
}
.section-text.text-style-elegant .text-inner {
	background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 16px;
	padding: 40px 48px;
	box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.05) inset;
	position: relative;
	overflow: hidden;
}
.section-text.text-style-elegant .text-inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
}
.section-text.text-style-elegant .text-title {
	color: var(--accent-primary);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: clamp(18px, 2vw + 10px, 28px);
	margin-bottom: 24px;
	position: relative;
	padding-bottom: 16px;
}
.section-text.text-style-elegant .text-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 2px;
	background: var(--accent-primary);
}
.section-text.text-style-elegant .text-content {
	color: rgba(255,255,255,0.9);
}
.section-text.text-style-elegant .text-content strong {
	color: var(--accent-primary);
}
.section-text.text-style-elegant .text-content li {
	position: relative;
	padding-left: 8px;
}
.section-text.text-style-elegant .text-content li::marker {
	color: var(--accent-primary);
}

/* ========== ACCENT LEFT BORDER STYLE ========== */
.section-text.text-style-accent-left {
	padding: 40px 0;
}
.section-text.text-style-accent-left .text-inner {
	background: linear-gradient(90deg, var(--accent-glow) 0%, transparent 30%);
	border: none;
	border-left: 4px solid var(--accent-primary);
	border-radius: 0 12px 12px 0;
	padding: 32px 40px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.section-text.text-style-accent-left .text-title {
	color: var(--accent-primary);
	font-weight: 800;
}
.section-text.text-style-accent-left .text-content {
	color: rgba(255,255,255,0.85);
}
.section-text.text-style-accent-left .text-content strong {
	color: var(--accent-primary);
}

/* ========== GRADIENT BACKGROUND STYLE ========== */
.section-text.text-style-gradient {
	padding: 50px 0;
}
.section-text.text-style-gradient .text-inner {
	background: linear-gradient(145deg, 
		rgba(var(--accent-primary), 0.08) 0%, 
		rgba(0,0,0,0.4) 50%, 
		rgba(var(--accent-primary), 0.05) 100%);
	background: linear-gradient(145deg, var(--accent-glow) 0%, rgba(0,0,0,0.3) 50%, rgba(255,255,255,0.02) 100%);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 20px;
	padding: 48px 56px;
	box-shadow: 0 25px 60px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}
.section-text.text-style-gradient .text-title {
	background: linear-gradient(135deg, var(--accent-primary) 0%, #ffffff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-size: clamp(24px, 3vw + 12px, 42px);
	text-align: center;
	margin-bottom: 28px;
}
.section-text.text-style-gradient .text-content {
	color: rgba(255,255,255,0.9);
	text-align: center;
}
.section-text.text-style-gradient .text-content ul,
.section-text.text-style-gradient .text-content ol {
	text-align: left;
	display: inline-block;
}
.section-text.text-style-gradient .text-content strong {
	color: var(--accent-primary);
}

/* ========== DARK MODE STYLE ========== */
.section-text.text-style-dark {
	padding: 50px 0;
	background: linear-gradient(180deg, #0a0a0a 0%, #111111 100%);
	margin: 20px 0;
}
.section-text.text-style-dark .text-inner {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 16px;
	padding: 40px 48px;
	box-shadow: 0 0 80px var(--accent-glow);
}
.section-text.text-style-dark .text-title {
	color: #ffffff;
	text-shadow: 0 0 30px var(--accent-glow);
}
.section-text.text-style-dark .text-content {
	color: rgba(255,255,255,0.8);
}
.section-text.text-style-dark .text-content strong {
	color: var(--accent-primary);
	text-shadow: 0 0 20px var(--accent-glow);
}
.section-text.text-style-dark .text-content li::marker {
	color: var(--accent-primary);
}
.section-text.text-small .text-inner { max-width: 640px; }
.section-text.text-medium .text-inner { max-width: 800px; }
.section-text.text-large .text-inner { max-width: 800px; }

.section-text .text-title {
	/* Fluid title size: scales between 22px and 40px depending on viewport */
	font-size: clamp(22px, 2.8vw + 12px, 40px);
	line-height: 1.12;
	margin: 0 0 14px 0;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--title-color);
}

.section-text .text-content {
	/* Fluid body text: min 15px, preferred scales with viewport, max 18px */
	font-size: clamp(15px, 1.1vw + 14px, 18px);
	line-height: 1.7;
	color: var(--text-color); /* subtle dark slate */
}

/* Lead paragraph styling (first paragraph treated as a lead) */
.section-text .text-content p:first-of-type {
	font-size: clamp(16px, 1.2vw + 14px, 19px);
	font-weight: 600;
	color: var(--title-color);
	margin-top: 0;
	margin-bottom: 1.05rem;
}

/* Improve lists and blockquotes */
.section-text .text-content ul,
.section-text .text-content ol { padding-left: 1.25rem; margin: 0 0 1rem 0; }
.section-text .text-content li { margin: 0.45rem 0; }
.section-text .text-content blockquote {
	border-left: 4px solid rgba(0,0,0,0.06);
	padding: 12px 16px;
	margin: 12px 0;
	background: rgba(0,0,0,0.015);
	color: #374151;
	border-radius: 6px;
}

/* Link and CTA styling */
.section-text .text-content a { color: #065f46; text-decoration: underline; text-underline-offset: 3px; }
.section-text .text-content .btn { display: inline-block; padding: 10px 16px; background: #065f46; color: #fff; border-radius: 8px; text-decoration: none; }

/* Two-column flow for long content on wide viewports */
@media (min-width: 1100px) {
	.section-text.text-large .text-content.two-column,
	.section-text.text-large .text-content.two-column { column-gap: 40px; }
	/* Two-column grid: use explicit left/right columns when editor provides separate fields */
	.section-text.text-large .text-content.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* Responsive tweaks */
@media (max-width: 820px) {
	.section-text { padding: 36px 0; }
	.section-text .text-inner { padding: 16px; border-radius: 8px; max-width: calc(100% - 32px); }
	.section-text .text-title { font-size: 24px; }
	.section-text .text-content { font-size: 16px; }
}


/* TOURNAMENT-SCHEDULE SECTION CSS - CACHE BUSTED */
/* Tournament Schedule Section */
.tournament-schedule {
  background: var(--bg-color, #1b1f24);
  padding: 60px 24px;
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.tournament-schedule__container {
  width: min(1100px, 100%);
}

.tournament-schedule__header {
  text-align: center;
  margin-bottom: 48px;
  color: #ffffff;
}

.tournament-schedule__title {
  font-family: "Crimson Text", serif;
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 16px 0;
  letter-spacing: 0.02em;
}

.tournament-schedule__subtitle {
  font-size: 18px;
  margin: 0;
  opacity: 0.85;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tournament-schedule__grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 980px) {
  .tournament-schedule__grid {
    grid-template-columns: 1fr;
  }
  
  .tournament-schedule__title {
    font-size: 36px;
  }
  
  .tournament-schedule {
    padding: 40px 16px;
  }
}

.tournament-schedule__card {
  background: var(--card-bg, #ffffff);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.tournament-schedule__card-header {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 28px 16px 18px;
  position: relative;
}

.tournament-schedule__dow {
  font-family: "Crimson Text", serif;
  letter-spacing: 0.04em;
  font-size: 24px;
  font-weight: 600;
}

.tournament-schedule__date {
  font-family: "Crimson Text", serif;
  font-size: 56px;
  line-height: 1;
  margin: 6px 0 2px;
  font-weight: 700;
}

.tournament-schedule__month {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.tournament-schedule__daynum {
  margin-top: 6px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #d9d9d9;
}

.tournament-schedule__session-bar {
  background: var(--accent-color, #a38c5b);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 14px;
}

.tournament-schedule__time {
  font-weight: 700;
  font-size: 13px;
}

.tournament-schedule__session {
  padding: 18px 14px 6px;
}

.tournament-schedule__session:last-child {
  padding-bottom: 20px;
}

.tournament-schedule__match {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 10px;
}

.tournament-schedule__team {
  font-weight: 700;
  text-align: center;
  font-size: 14px;
}

.tournament-schedule__team--1 {
  color: var(--team1-color, #143f67);
}

.tournament-schedule__team--2 {
  color: var(--team2-color, #7a2328);
}

.tournament-schedule__match-info {
  text-align: center;
}

.tournament-schedule__match-title {
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.tournament-schedule__match-type {
  font-size: 11px;
  text-transform: uppercase;
  color: #6b7280;
}

.tournament-schedule__note {
  margin: -8px 0 10px;
  text-align: center;
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}

/* Dark mode and responsive adjustments */
@media (max-width: 640px) {
  .tournament-schedule__match {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }
  
  .tournament-schedule__team {
    font-size: 16px;
  }
  
  .tournament-schedule__match-info {
    order: -1;
    margin-bottom: 8px;
  }
  
  .tournament-schedule__date {
    font-size: 48px;
  }
}


/* TWO-COLUMN SECTION CSS - CACHE BUSTED */