/* ═══════════════════════════════════════════════════════════════════════
BIG GUARD RECOVERY — STYLE V4
Premium athletic / editorial redesign.
ALL rules scoped under `body.v4` so the original style.css stays usable
for instant rollback (remove the v4 body class or the tag).
Booking pages (book.php / booking-success.php) do NOT get the v4 class
so the booking wizard chrome is untouched.
─────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700;800;900&family=DM+Mono:wght@400;500&family=Newsreader:ital,wght@1,400;1,500&family=Permanent+Marker&family=Shrikhand&display=swap');
/* ── 1. TOKENS ──────────────────────────────────────────────────────── */
body.v4{
--v4-bg: #050810;
--v4-bg-2: #0a0e1a;
--v4-bg-3: #11172a;
--v4-bg-elev: #141a2e;
--v4-ink: #ffffff;
--v4-ink-soft: #e4e7ee;
--v4-mute: #97a0b0;
--v4-mute-2: #6b7280;
--v4-line: rgba(255,255,255,.06);
--v4-line-2: rgba(255,255,255,.12);
--v4-line-3: rgba(255,255,255,.20);
--v4-blue: #223D80;
--v4-blue-2: #2E4FA3;
--v4-blue-deep: #15275A;
--v4-blue-glow: rgba(34,61,128,.45);
--v4-accent: #223D80;
--v4-danger: #ef4444;
--v4-hot: #f59e0b;
--v4-success: #10b981;
--v4-display: "Barlow Condensed", "Bebas Neue", Impact, system-ui, sans-serif;
--v4-text: "Barlow", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--v4-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
--v4-serif: "Newsreader", "Playfair Display", Georgia, serif;
--v4-script: "Permanent Marker", "Shrikhand", "Caveat Brush", cursive;
--v4-r-sm: 10px;
--v4-r: 16px;
--v4-r-lg: 22px;
--v4-r-xl: 32px;
--v4-shadow-sm: 0 4px 14px rgba(0,0,0,.35);
--v4-shadow: 0 14px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
--v4-shadow-lg: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(34,61,128,.16);
--v4-glow: 0 0 80px rgba(34,61,128,.3);
--v4-wrap-max: 1280px;
--v4-section-py: clamp(72px, 9vw, 140px);
--v4-section-px: clamp(20px, 4vw, 56px);
}
/* ── 2. BASE OVERRIDES ──────────────────────────────────────────────── */
body.v4{
background:var(--v4-bg);
color:var(--v4-ink-soft);
font-family:var(--v4-text);
font-size:16px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
body.v4 main{display:block}
body.v4 a{color:inherit;text-decoration:none}
body.v4 img{max-width:100%;display:block}
body.v4 ::selection{background:var(--v4-blue);color:#fff}
/* Subtle film-grain ambient backdrop on body */
body.v4::before{
content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(34,61,128,.08), transparent 60%),
radial-gradient(ellipse 60% 40% at 100% 100%, rgba(37,99,235,.06), transparent 65%);
mix-blend-mode:screen;
}
body.v4 > *{position:relative;z-index:1}
/* ── 3. TYPOGRAPHY UTILITIES ────────────────────────────────────────── */
body.v4 .eyebrow,
body.v4 .v4-eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--v4-mono);font-size:11px;font-weight:500;
letter-spacing:2.4px;text-transform:uppercase;
color:var(--v4-mute);
padding:0;background:none;border:0;
}
body.v4 .eyebrow::before,
body.v4 .v4-eyebrow::before{
content:'';width:28px;height:1px;background:var(--v4-blue);
}
body.v4 .eyebrow::after{display:none}
body.v4 .eyebrow--center{justify-content:center}
body.v4 h1, body.v4 h2, body.v4 h3, body.v4 h4{
font-family:var(--v4-display);
font-weight:800;
letter-spacing:-.01em;
line-height:.95;
text-transform:uppercase;
color:var(--v4-ink);
margin:0;
}
body.v4 h2{font-size:clamp(36px,5.2vw,76px)}
body.v4 h3{font-size:clamp(22px,2.4vw,32px);letter-spacing:0;line-height:1.1}
body.v4 h4{font-size:clamp(15px,1.4vw,18px);letter-spacing:1.5px;line-height:1.2}
/* Painted-EDGE-style em — matches the brush-marker letterforms from
edge-only.png / edge-vector.svg: solid blue fill + white outline,
slight right-tilt for hand-painted feel.
Letter bodies thickened via blue text-stroke for the "mota" look. */
body.v4 em,
body.v4 h1 em, body.v4 h2 em, body.v4 h3 em,
body.v4 .section-title em,
body.v4 .page-hero__title em,
body.v4 .home-events__head .section-title em,
body.v4 .arsenal__text h2 em,
body.v4 .contact__info h2 em,
body.v4 .private__info h2 em,
body.v4 .reppin__text h2 em,
body.v4 .split__text h2 em{
font-family:var(--v4-script);
font-style:normal;
font-weight:900;
color:var(--v4-blue);
-webkit-text-stroke:3px var(--v4-blue);
paint-order:stroke fill;
text-shadow:
-4px -4px 0 #fff,
4px -4px 0 #fff,
-4px 4px 0 #fff,
4px 4px 0 #fff,
-5px 0 0 #fff,
5px 0 0 #fff,
0 -5px 0 #fff,
0 5px 0 #fff,
-4px -3px 0 #fff,
4px -3px 0 #fff,
-3px 4px 0 #fff,
3px 4px 0 #fff;
text-transform:none;
letter-spacing:.03em;
display:inline-block;
line-height:1;
transform:rotate(-2deg);
padding:0 .08em;
margin:0 .18em; /* breathing room from adjacent inline text (e.g. "CHOOSE YOUR entry") */
vertical-align:baseline;
}
/* Slightly subtler stroke + outline at smaller sizes so it doesn't smudge */
body.v4 .hp-flow-card em,
body.v4 .how__step em,
body.v4 .proof__stat em,
body.v4 p em{
-webkit-text-stroke:1.5px var(--v4-blue);
text-shadow:
-2px -2px 0 #fff,
2px -2px 0 #fff,
-2px 2px 0 #fff,
2px 2px 0 #fff,
-2.5px 0 0 #fff,
2.5px 0 0 #fff,
0 -2.5px 0 #fff,
0 2.5px 0 #fff;
}
body.v4 p{color:var(--v4-mute);line-height:1.75;font-size:16px;margin:0 0 16px}
body.v4 p:last-child{margin-bottom:0;margin-top:20px}
body.v4 p strong{color:var(--v4-ink-soft);font-weight:600}
/* ── 4. BUTTONS ─────────────────────────────────────────────────────── */
body.v4 .btn,
body.v4 .v4-btn{
display:inline-flex;align-items:center;justify-content:center;gap:12px;
padding:16px 30px;
font-family:var(--v4-text);font-size:13px;font-weight:700;letter-spacing:1.6px;
text-transform:uppercase;text-decoration:none;
border-radius:999px;border:1px solid transparent;
cursor:pointer;transition:all .25s ease;
white-space:nowrap;
min-height:48px;
line-height:1;
}
body.v4 .btn--white,
body.v4 .v4-btn--primary{
background:var(--v4-ink);color:var(--v4-bg);border-color:var(--v4-ink);
box-shadow:0 10px 30px rgba(255,255,255,.12);
}
body.v4 .btn--white:hover,
body.v4 .v4-btn--primary:hover{
background:var(--v4-blue);color:#fff;border-color:var(--v4-blue);
transform:translateY(-2px);box-shadow:0 16px 40px rgba(34,61,128,.45);
}
body.v4 .btn--ghost,
body.v4 .v4-btn--ghost{
background:transparent;color:var(--v4-ink);
border:1px solid var(--v4-line-3);
}
body.v4 .btn--ghost:hover,
body.v4 .v4-btn--ghost:hover{
background:rgba(255,255,255,.04);border-color:var(--v4-ink);
transform:translateY(-2px);
}
body.v4 .btn--big,
body.v4 .v4-btn--lg{padding:20px 36px;font-size:14px;min-height:56px}
/* ── 5. NAV — single horizontal row (logo · menu · CTA) ─────────────── */
body.v4 .nav{
position:fixed;top:0;left:0;right:0;z-index:200;
height:72px;
background:rgba(5,8,16,.78);
backdrop-filter:blur(20px) saturate(140%);
-webkit-backdrop-filter:blur(20px) saturate(140%);
border-bottom:1px solid var(--v4-line);
transition:background .3s ease,border-color .3s ease;
}
body.v4 .nav__inner{
max-width:var(--v4-wrap-max);margin:0 auto;height:100%;
padding:0 clamp(20px,4vw,40px);
display:flex;align-items:center;justify-content:space-between;gap:24px;
}
body.v4 .nav__logo{
display:flex;align-items:center;flex-shrink:0;
text-decoration:none;transition:opacity .2s ease;
}
body.v4 .nav__logo:hover{opacity:.88}
body.v4 .nav__logo img{
height:34px;width:auto;display:block;
filter:drop-shadow(0 3px 10px rgba(34,61,128,.35));
}
@media(max-width:540px){
body.v4 .nav__logo img{height:28px}
}
body.v4 .nav__cta{
display:inline-flex;align-items:center;gap:8px;
padding:9px 16px;font-family:var(--v4-text);font-size:11px;font-weight:700;
letter-spacing:1.4px;text-transform:uppercase;color:var(--v4-ink);
background:var(--v4-blue);border:1px solid var(--v4-blue);
border-radius:999px;transition:all .25s ease;
white-space:nowrap;flex-shrink:0;
}
body.v4 .nav__cta:hover{background:var(--v4-blue-2);border-color:var(--v4-blue-2);transform:translateY(-1px);box-shadow:0 8px 20px rgba(34,61,128,.4)}
body.v4 .nav__burger{
display:none;background:rgba(34,61,128,.22);border:1px solid rgba(34,61,128,.55);cursor:pointer;
width:46px;height:46px;flex-direction:column;justify-content:center;align-items:center;gap:5px;
border-radius:10px;flex-shrink:0;padding:0;
position:fixed!important;top:13px;right:clamp(20px,4vw,40px);
z-index:9999!important; /* sits above drawer (200) + backdrop (150) */
transition:background .2s ease,border-color .2s ease;
}
body.v4 .nav__burger:hover{background:rgba(34,61,128,.36);border-color:var(--v4-blue)}
body.v4 .nav__burger span{
display:block;width:22px;height:2px;background:#fff;border-radius:2px;
transition:transform .25s ease,opacity .2s ease;
margin:0!important; /* kill the legacy `margin:3px 0` from style.css */
}
/* X-icon elements — dedicated tags, completely independent from
the legacy `.nav__burger span` rules in style.css. Hidden by default. */
body.v4 .nav__burger-x1,
body.v4 .nav__burger-x2{display:none}
/* OPEN state — solid blue button, the 3 hamburger spans are FORCEFULLY
hidden (display:none beats every transform/opacity rule from style.css),
and the two elements appear as the X. */
body.v4 .nav__burger.open{background:var(--v4-blue)!important;border-color:var(--v4-blue)!important}
body.v4 .nav__burger.open span{display:none!important}
body.v4 .nav__burger.open .nav__burger-x1,
body.v4 .nav__burger.open .nav__burger-x2{
display:block!important;
position:absolute!important;
top:50%!important;left:50%!important;
width:24px!important;height:2.6px!important;
background:#fff!important;
border-radius:2px!important;
margin:0!important;
pointer-events:none;
}
body.v4 .nav__burger.open .nav__burger-x1{
transform:translate(-50%,-50%) rotate(45deg)!important;
}
body.v4 .nav__burger.open .nav__burger-x2{
transform:translate(-50%,-50%) rotate(-45deg)!important;
}
/* Menu sits IN the same 72px bar — fixed at top:0, centered horizontally */
body.v4 .nav__links{
position:fixed;top:0;left:50%;transform:translateX(-50%);
z-index:201;height:72px;
display:flex;align-items:center;gap:2px;
background:transparent;border:0;padding:0;
backdrop-filter:none;-webkit-backdrop-filter:none;
}
body.v4 .nav__links > a,
body.v4 .nav__drop > a{
display:inline-flex;align-items:center;
font-family:var(--v4-text);font-size:11.5px;font-weight:600;
letter-spacing:1.4px;text-transform:uppercase;color:var(--v4-mute);
padding:9px 13px;border-radius:8px;transition:all .2s ease;
white-space:nowrap;
}
body.v4 .nav__links > a:hover,
body.v4 .nav__drop:hover > a,
body.v4 .nav__links > a.is-active,
body.v4 .nav__drop.is-active > a{
color:var(--v4-ink);background:rgba(255,255,255,.05);
}
body.v4 .nav__drop{position:relative;display:flex;align-items:center;height:100%}
body.v4 .nav__menu{
position:absolute;top:calc(100% - 8px);left:50%;transform:translateX(-50%) translateY(-6px);
min-width:340px;
background:var(--v4-bg-2);
border:1px solid var(--v4-line-2);
border-radius:var(--v4-r);
padding:10px;
box-shadow:var(--v4-shadow-lg);
opacity:0;pointer-events:none;transition:.22s ease;
}
body.v4 .nav__drop:hover .nav__menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
body.v4 .nav__menu a{
display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px;
transition:background .2s ease;
}
body.v4 .nav__menu a:hover{background:rgba(34,61,128,.08)}
body.v4 .nav__menu a strong{
font-family:var(--v4-display);font-size:15px;font-weight:700;letter-spacing:.5px;
text-transform:uppercase;color:var(--v4-ink);
}
body.v4 .nav__menu a span{
font-family:var(--v4-mono);font-size:10.5px;letter-spacing:1.2px;color:var(--v4-mute);
text-transform:uppercase;
}
body.v4 .nav__menu-foot{margin-top:6px;padding-top:10px;border-top:1px solid var(--v4-line)}
body.v4 .nav__menu-foot a{font-size:11px;color:var(--v4-blue);text-align:center;letter-spacing:1.5px}
body.v4 .nav__menu-foot a:hover{background:transparent;color:var(--v4-ink)}
body.v4 .nav__cta-mobile{display:none}
body.v4 .nav__backdrop{
position:fixed;inset:0;z-index:98;background:rgba(5,8,16,.6);backdrop-filter:blur(6px);
opacity:0;pointer-events:none;transition:.25s ease;
}
body.v4 .nav__backdrop.open{opacity:1;pointer-events:auto}
/* Tablet & mobile: hide inline menu + CTA, show burger + drawer.
The !important here beats the legacy `.nav__burger{display:none !important}`
that style.css applies between 901–1180px. */
@media(max-width:1180px){
body.v4 .nav__inner > .nav__cta{display:none}
body.v4 .nav__burger{display:flex!important}
body.v4 .nav__links{
position:fixed;top:0;right:0;left:auto;bottom:0;transform:translateX(100%);
width:min(360px,84vw);height:100vh;
flex-direction:column;justify-content:flex-start;align-items:stretch;gap:4px;
padding:96px 24px 32px;
background:var(--v4-bg-2);
border-left:1px solid var(--v4-line-2);
transition:transform .3s ease;
overflow-y:auto;
}
body.v4 .nav__links.open{transform:translateX(0)}
body.v4 .nav__links > a,
body.v4 .nav__drop > a{
font-size:17px;padding:14px 16px;letter-spacing:1px;
}
body.v4 .nav__drop{position:static;height:auto;display:block}
body.v4 .nav__menu{
position:static;transform:none;opacity:1;pointer-events:auto;
min-width:0;background:transparent;border:0;padding:0 0 0 16px;box-shadow:none;
margin-bottom:8px;display:none;
}
body.v4 .nav__drop:hover .nav__menu,
body.v4 .nav__drop.is-active .nav__menu{display:block}
body.v4 .nav__cta-mobile{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
margin-top:auto;padding:16px;border-radius:999px;
background:var(--v4-blue);color:#fff;font-weight:700;font-size:12px;letter-spacing:1.5px;
}
}
/* push main below the single-row 72px nav */
body.v4 main{padding-top:72px}
/* ── 6. PAGE HERO (shared) ─────────────────────────────────────────── */
body.v4 .page-hero{
padding:96px var(--v4-section-px) 80px;
text-align:center;position:relative;overflow:hidden;
}
body.v4 .page-hero::before{
content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
width:90%;max-width:1100px;height:90%;
background:radial-gradient(circle at 50% 0%, rgba(34,61,128,.18), transparent 60%);
filter:blur(60px);pointer-events:none;z-index:0;
}
body.v4 .page-hero::after{
content:'';position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
width:2px;height:48px;
background:linear-gradient(180deg,transparent,var(--v4-blue));
opacity:.4;
}
body.v4 .page-hero .wrap{position:relative;z-index:1;max-width:980px;margin:0 auto}
body.v4 .page-hero .eyebrow{justify-content:center;margin-bottom:28px}
body.v4 .page-hero__title{
font-family:var(--v4-display);font-weight:900;
font-size:clamp(54px,9vw,128px);
line-height:.9;letter-spacing:-.02em;text-transform:uppercase;
margin:0 0 28px;color:var(--v4-ink);
}
body.v4 .page-hero__title{line-height:1}
body.v4 .page-hero__title em{
display:block;
margin:32px auto 0;
width:fit-content;
max-width:100%;
font-size:60px;
line-height:1.1;
text-align:center;
}
body.v4 .page-hero__sub{
font-size:clamp(15px,1.4vw,19px);color:var(--v4-mute);
max-width:680px;margin:0 auto;line-height:1.65;
}
/* ABOUT — .split section overrides: breathing room for painted "on wheels."
+ centered paragraphs (base p reset wipes the auto-margins) */
body.v4 .split__text{text-align:center}
body.v4 .split__text h2{line-height:1;margin-bottom:36px}
body.v4 .split__text h2 em{
display:block;
margin:.55em auto 0;
line-height:1.05;
text-align:center;
width:fit-content; /* shrink em block to text width so the rotate doesn't visually shift it */
max-width:100%;
}
body.v4 .split__text p{margin:0 auto 20px;max-width:620px;text-align:center}
body.v4 .split__text .btn{margin:24px auto 0}
/* ── 7. HOMEPAGE — hp-* light polish ───────────────────────────────── */
/* The hp-hero / hp-statstrip / hp-flow blocks were screenshot-matched
and client-approved. Light tweaks only — better type tracking + ring shadow. */
body.v4 .hp-hero{padding-top:48px}
body.v4 .hp-hero__h1{letter-spacing:-.02em}
body.v4 .hp-hero__sub{color:var(--v4-ink-soft)}
body.v4 .hp-hero__body{color:var(--v4-mute)}
body.v4 .hp-hero__slideshow{
border-radius:var(--v4-r-lg);overflow:hidden;
box-shadow:var(--v4-shadow-lg),var(--v4-glow);
}
body.v4 .hp-statstrip__inner{
border:1px solid var(--v4-line-2);border-radius:var(--v4-r-lg);
background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005));
}
/* Recovery-flow heading + subtitle centering (base p reset wipes auto margins) */
body.v4 .hp-flow__head{text-align:center}
body.v4 .hp-flow__sub{
max-width:560px;margin:16px auto 0;text-align:center;
font-size:16px;color:var(--v4-mute);line-height:1.65;
}
body.v4 .hp-flow-card{
background:var(--v4-bg-2);
border:1px solid var(--v4-line);
border-radius:var(--v4-r);
transition:border-color .25s ease,box-shadow .25s ease;
}
body.v4 .hp-flow-card:hover{
border-color:rgba(34,61,128,.45);
box-shadow:var(--v4-shadow);
}
/* ── 8. HOMEPAGE — Events grid (.fevt / .hevt) ─────────────────────── */
body.v4 .home-events{padding:var(--v4-section-py) var(--v4-section-px)}
body.v4 .home-events .wrap{max-width:var(--v4-wrap-max);margin:0 auto}
body.v4 .home-events__head{
display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
margin-bottom:48px;flex-wrap:wrap;
}
body.v4 .home-events__head .eyebrow{margin-bottom:18px}
body.v4 .home-events__head .section-title{
font-family:var(--v4-display);font-weight:900;font-size:clamp(40px,6vw,84px);
line-height:.9;letter-spacing:-.02em;text-transform:uppercase;margin:0;
}
body.v4 .home-events__lede{
font-size:15px;color:var(--v4-mute);max-width:520px;margin-top:14px;line-height:1.6;
}
body.v4 .home-events__all{
font-family:var(--v4-text);font-size:12px;font-weight:700;letter-spacing:2px;
text-transform:uppercase;color:var(--v4-blue);
padding:14px 20px;border:1px solid var(--v4-line-2);border-radius:999px;
transition:all .25s ease;
}
body.v4 .home-events__all:hover{background:var(--v4-blue);color:#fff;border-color:var(--v4-blue)}
body.v4 .fevt{
display:block;position:relative;overflow:hidden;border-radius:var(--v4-r-xl);
border:1px solid var(--v4-line-2);
background-image:none!important;
background:var(--v4-bg-2);
min-height:520px;margin-bottom:32px;
transition:border-color .25s ease,box-shadow .25s ease;
box-shadow:var(--v4-shadow);
}
body.v4 .fevt:hover{border-color:rgba(34,61,128,.5)}
body.v4 .fevt__inner{
position:relative;padding:48px;display:flex;flex-direction:column;justify-content:space-between;min-height:560px;
}
body.v4 .fevt__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
body.v4 .fevt__badge{
display:inline-flex;align-items:center;gap:8px;
padding:8px 14px;font-family:var(--v4-mono);font-size:11px;letter-spacing:1.6px;
text-transform:uppercase;color:var(--v4-ink);
background:rgba(255,255,255,.08);border:1px solid var(--v4-line-2);border-radius:999px;
backdrop-filter:blur(8px);
}
body.v4 .fevt__badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:v4-pulse 1.8s ease-in-out infinite}
body.v4 .fevt__badge.is-hot{color:var(--v4-hot);background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.4)}
body.v4 .fevt__badge.is-sold{color:var(--v4-danger);background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.4)}
body.v4 .fevt__star{
display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
font-family:var(--v4-mono);font-size:10.5px;letter-spacing:1.6px;
text-transform:uppercase;color:var(--v4-blue);
background:rgba(34,61,128,.12);border:1px solid rgba(34,61,128,.4);border-radius:999px;
}
@keyframes v4-pulse{0%,100%{opacity:1}50%{opacity:.35}}
body.v4 .fevt__date{
font-family:var(--v4-mono);font-size:13px;letter-spacing:1.6px;text-transform:uppercase;
color:var(--v4-blue);margin-bottom:14px;
}
body.v4 .fevt__title{
font-family:var(--v4-display);font-weight:900;
font-size:clamp(36px,5vw,72px);line-height:.92;letter-spacing:-.02em;text-transform:uppercase;
margin:0 0 14px;color:var(--v4-ink);max-width:680px;
}
body.v4 .fevt__loc{font-family:var(--v4-text);font-size:15px;color:var(--v4-ink-soft);margin:0 0 18px}
body.v4 .fevt__pressure{
font-family:var(--v4-text);font-size:14px;color:var(--v4-mute);max-width:520px;line-height:1.55;
margin:0 0 18px;
}
body.v4 .fevt__pressure.is-hot{color:var(--v4-hot)}
body.v4 .fevt__big-number{display:flex;align-items:baseline;gap:14px;margin:8px 0 18px}
body.v4 .fevt__big-num{
font-family:var(--v4-display);font-weight:900;font-size:clamp(64px,9vw,112px);
line-height:1;letter-spacing:-.04em;color:var(--v4-ink);
}
body.v4 .fevt__big-number.is-hot .fevt__big-num{color:var(--v4-hot)}
body.v4 .fevt__big-number.is-sold .fevt__big-num{color:var(--v4-danger);text-decoration:line-through;text-decoration-thickness:6px}
body.v4 .fevt__big-label{
font-family:var(--v4-mono);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
color:var(--v4-mute);max-width:240px;line-height:1.4;
}
body.v4 .fevt__progress{margin:8px 0 28px;max-width:520px}
body.v4 .fevt__progress-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
body.v4 .fevt__progress-label{
font-family:var(--v4-mono);font-size:10.5px;letter-spacing:2px;color:var(--v4-mute);text-transform:uppercase;
}
body.v4 .fevt__progress-pct{
font-family:var(--v4-display);font-weight:700;font-size:18px;letter-spacing:.5px;color:var(--v4-ink);
}
body.v4 .fevt__progress-bar{
height:6px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden;
border:1px solid var(--v4-line);
}
body.v4 .fevt__progress-fill{height:100%;background:var(--v4-blue);transition:width .6s ease;border-radius:999px}
body.v4 .fevt__progress-fill.is-hot{background:var(--v4-hot)}
body.v4 .fevt__progress-fill.is-sold{background:var(--v4-danger)}
body.v4 .fevt__cta-row{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:auto}
body.v4 .fevt__cta{
font-family:var(--v4-display);font-weight:800;font-size:clamp(20px,2.4vw,28px);
letter-spacing:0;text-transform:uppercase;color:var(--v4-ink);
}
body.v4 .fevt__cta-sub{font-family:var(--v4-mono);font-size:11px;letter-spacing:1.4px;color:var(--v4-mute);text-transform:uppercase}
body.v4 .home-events__rest{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* Match BOTH the homepage `.hevt.hevt--v3` AND the events-page `.evt.evt--v3.hevt--v3` cards via the shared `.hevt--v3` modifier */
body.v4 .hevt,
body.v4 .hevt--v3,
body.v4 .evt--v3{
display:flex;flex-direction:column;
position:relative;overflow:hidden;
padding:22px 22px 24px;
border-radius:var(--v4-r);border:1px solid var(--v4-line-2);
background-image:none!important;
background:var(--v4-bg-2)!important;
min-height:340px;
transition:border-color .25s ease,box-shadow .25s ease;
box-shadow:var(--v4-shadow);
text-decoration:none;
}
body.v4 .hevt:hover,
body.v4 .hevt--v3:hover,
body.v4 .evt--v3:hover{border-color:rgba(34,61,128,.5)}
body.v4 .hevt__top{
position:static;margin-bottom:auto;
display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
body.v4 .hevt__badge{
display:inline-flex;align-items:center;gap:5px;padding:3px 9px;
font-family:var(--v4-mono);font-size:8.5px;letter-spacing:1.1px;text-transform:uppercase;font-weight:500;
background:rgba(255,255,255,.08);border:1px solid var(--v4-line-2);border-radius:999px;
color:var(--v4-ink);backdrop-filter:blur(8px);
line-height:1.4;
}
body.v4 .hevt__badge .dot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:v4-pulse 1.8s ease-in-out infinite}
body.v4 .hevt__badge.is-hot{color:var(--v4-hot);background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.4)}
body.v4 .hevt__badge.is-sold{color:var(--v4-danger);background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4)}
body.v4 .hevt__body{position:static;padding-top:32px}
body.v4 .hevt__date{font-family:var(--v4-mono);font-size:11.5px;letter-spacing:1.6px;color:var(--v4-blue);text-transform:uppercase;margin-bottom:8px}
body.v4 .hevt__title{
font-family:var(--v4-display);font-weight:800;font-size:clamp(22px,2.8vw,30px);
line-height:.95;letter-spacing:-.01em;text-transform:uppercase;margin:0 0 6px;color:var(--v4-ink);
}
body.v4 .hevt__loc{font-family:var(--v4-text);font-size:13px;color:var(--v4-ink-soft);margin:0 0 12px}
body.v4 .hevt__pressure{font-size:12px;color:var(--v4-mute);margin:0 0 10px}
body.v4 .hevt__pressure.is-hot{color:var(--v4-hot)}
body.v4 .hevt__progress{margin-bottom:14px}
body.v4 .hevt__progress-bar{height:4px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
body.v4 .hevt__progress-fill{height:100%;background:var(--v4-blue);border-radius:999px}
body.v4 .hevt__progress-fill.is-hot{background:var(--v4-hot)}
body.v4 .hevt__progress-fill.is-sold{background:var(--v4-danger)}
body.v4 .hevt__progress-labels{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
body.v4 .hevt__progress-text{font-family:var(--v4-mono);font-size:10px;letter-spacing:1.2px;color:var(--v4-mute);text-transform:uppercase}
body.v4 .hevt__progress-text.is-sold{color:var(--v4-danger)}
body.v4 .hevt__progress-text strong{color:var(--v4-ink);font-weight:600}
body.v4 .hevt__progress-pct{font-family:var(--v4-mono);font-size:10px;letter-spacing:1.2px;color:var(--v4-mute);text-transform:uppercase}
body.v4 .hevt__cta{
font-family:var(--v4-display);font-weight:700;font-size:14px;letter-spacing:1px;
text-transform:uppercase;color:var(--v4-blue);
}
body.v4 .home-events__empty{
text-align:center;padding:80px 32px;
border:1px dashed var(--v4-line-2);border-radius:var(--v4-r-lg);
color:var(--v4-mute);
}
body.v4 .home-events__empty a{color:var(--v4-blue);font-weight:600}
@media(max-width:1100px){
body.v4 .home-events__rest{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
body.v4 .home-events__rest{grid-template-columns:1fr}
body.v4 .fevt__inner{padding:32px 24px;min-height:480px}
body.v4 .fevt{min-height:480px}
}
/* ── 9. HOMEPAGE — Choose Your Entry (.flow .service) ──────────────── */
body.v4 .flow{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
max-width:var(--v4-wrap-max);margin:0 auto;
}
body.v4 section .wrap > .eyebrow,
body.v4 section .wrap > .section-title{display:block}
body.v4 .section-title{
font-family:var(--v4-display);font-weight:900;
font-size:clamp(40px,6vw,84px);line-height:.92;letter-spacing:-.02em;
text-transform:uppercase;margin:0 0 48px;text-align:center;
}
body.v4 .service.flow__card{
position:relative;display:block;overflow:hidden;
border-radius:var(--v4-r-lg);border:1px solid var(--v4-line-2);
background:var(--v4-bg-2);
transition:border-color .25s ease,box-shadow .25s ease;
box-shadow:var(--v4-shadow);
min-height:480px;
}
body.v4 .service.flow__card:hover{
border-color:rgba(34,61,128,.5);
box-shadow:var(--v4-shadow-lg);
}
body.v4 .service.flow__card img{
width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
}
body.v4 .service__num{
position:absolute;top:20px;left:20px;
font-family:var(--v4-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;
padding:6px 12px;background:rgba(5,8,16,.78);backdrop-filter:blur(8px);
border:1px solid var(--v4-line-2);border-radius:999px;color:var(--v4-blue);z-index:2;
}
body.v4 .service__body{padding:28px 28px 32px}
body.v4 .service__body h3{
font-family:var(--v4-display);font-weight:800;font-size:26px;letter-spacing:-.01em;
text-transform:uppercase;line-height:1;margin:0 0 12px;color:var(--v4-ink);
}
body.v4 .service__body p{font-size:14.5px;color:var(--v4-mute);line-height:1.65;margin:0 0 18px}
body.v4 .service__more{
font-family:var(--v4-mono);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
color:var(--v4-blue);font-weight:500;
}
@media(max-width:1100px){body.v4 .flow{grid-template-columns:1fr;gap:18px}}
/* Section wrapper padding for the homepage non-hp sections */
body.v4 .home-events,
body.v4 section.proof,
body.v4 section.how,
body.v4 section.edge,
body.v4 section.reppin,
body.v4 section.code{
padding-block:var(--v4-section-py);
}
body.v4 section > .wrap{
max-width:var(--v4-wrap-max);margin:0 auto;padding:0 var(--v4-section-px);
}
/* ── 10. HOMEPAGE — Earn Your Edge (.edge) ─────────────────────────── */
body.v4 .edge{
position:relative;
background-size:cover;background-position:center;
border-radius:var(--v4-r-xl);
margin:0 var(--v4-section-px) var(--v4-section-py);
max-width:calc(var(--v4-wrap-max) - 32px);
margin-inline:auto;
overflow:hidden;
isolation:isolate;
}
body.v4 .edge__overlay{
position:absolute;inset:0;
background:linear-gradient(135deg,rgba(5,8,16,.88) 0%,rgba(5,8,16,.55) 60%,rgba(5,8,16,.85) 100%);
z-index:0;
}
body.v4 .edge .wrap{position:relative;z-index:1;padding:120px 48px;text-align:center;max-width:880px;margin:0 auto}
body.v4 .edge__title{
width:100%;max-width:560px;height:auto;display:block;margin:0 auto 28px;
filter:drop-shadow(0 8px 24px rgba(34,61,128,.4));
}
body.v4 .edge__sub{
font-size:clamp(16px,1.5vw,20px);color:var(--v4-ink-soft);line-height:1.6;margin:0 auto 36px;max-width:620px;
}
body.v4 .edge .btn{margin-top:8px}
@media(max-width:720px){body.v4 .edge .wrap{padding:64px 24px}}
/* ── 10b. HOMEPAGE — STEP INSIDE photo showcase (.experience) ──────── */
body.v4 .experience{padding:var(--v4-section-py) var(--v4-section-px)}
body.v4 .experience > .wrap{max-width:var(--v4-wrap-max);margin:0 auto;padding:0}
body.v4 .experience__head{text-align:center;margin-bottom:48px}
body.v4 .experience__head .eyebrow{margin-bottom:18px}
body.v4 .experience__head .section-title{text-align:center;margin-bottom:0}
body.v4 .experience__sub{
max-width:560px;margin:18px auto 0;text-align:center;
font-size:16px;color:var(--v4-mute);line-height:1.65;
}
body.v4 .experience__grid{
display:grid;
grid-template-columns:repeat(4,1fr);
grid-auto-rows:260px;
gap:16px;
}
body.v4 .experience__item{
position:relative;display:block;overflow:hidden;
border-radius:var(--v4-r);border:1px solid var(--v4-line-2);
background:var(--v4-bg-2);
box-shadow:var(--v4-shadow-sm);
transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
min-height:260px;
}
body.v4 .experience__item:hover{
border-color:rgba(34,61,128,.55);
box-shadow:var(--v4-shadow-lg);
}
body.v4 .experience__item img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
body.v4 .experience__item--xl{grid-column:span 2;grid-row:span 2}
body.v4 .experience__item--wide{grid-column:span 2}
body.v4 .experience__caption{
position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:20px 22px 18px;
background:linear-gradient(180deg,transparent 0%,rgba(5,8,16,.4) 35%,rgba(5,8,16,.92) 100%);
}
body.v4 .experience__label{
display:block;font-family:var(--v4-display);font-weight:800;
font-size:18px;letter-spacing:.5px;text-transform:uppercase;color:var(--v4-ink);
line-height:1.1;
}
body.v4 .experience__sub-label{
display:block;margin-top:6px;
font-family:var(--v4-mono);font-size:10.5px;letter-spacing:1.5px;
text-transform:uppercase;color:var(--v4-mute);
}
body.v4 .experience__item--xl .experience__label{font-size:28px;letter-spacing:.3px}
body.v4 .experience__item--xl .experience__sub-label{font-size:11.5px}
body.v4 .experience__item--xl .experience__caption{padding:28px 30px 24px}
body.v4 .experience__cta{display:flex;justify-content:center;margin-top:36px}
@media(max-width:1100px){
body.v4 .experience__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:240px;gap:14px}
body.v4 .experience__item--xl{grid-column:span 2;grid-row:span 1;min-height:300px}
body.v4 .experience__item--wide{grid-column:span 2}
body.v4 .experience__item--xl .experience__label{font-size:24px}
}
@media(max-width:540px){
body.v4 .experience__grid{grid-template-columns:1fr;grid-auto-rows:220px}
body.v4 .experience__item--xl,
body.v4 .experience__item--wide{grid-column:span 1}
body.v4 .experience__label{font-size:16px}
}
/* ── 11. HOMEPAGE — How It Works (.how) ────────────────────────────── */
body.v4 .how__grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
max-width:var(--v4-wrap-max);margin:0 auto;
}
body.v4 .how__step{
padding:36px 32px;border:1px solid var(--v4-line);border-radius:var(--v4-r-lg);
background:linear-gradient(180deg,var(--v4-bg-2),var(--v4-bg));
transition:all .3s ease;
}
body.v4 .how__step:hover{border-color:var(--v4-line-2);transform:translateY(-4px);box-shadow:var(--v4-shadow)}
body.v4 .how__num{
display:inline-flex;align-items:center;justify-content:center;
width:72px;height:72px;border-radius:50%;
background:rgba(34,61,128,.18);
border:2px solid var(--v4-blue);
font-family:var(--v4-display);font-weight:900;font-size:28px;line-height:1;
letter-spacing:0;color:var(--v4-ink);
margin-bottom:20px;
box-shadow:0 6px 20px rgba(34,61,128,.25), inset 0 0 0 4px rgba(5,8,16,.4);
}
body.v4 .how__step h4{
font-family:var(--v4-display);font-weight:800;font-size:24px;letter-spacing:0;line-height:1.1;
text-transform:uppercase;margin:0 0 12px;color:var(--v4-ink);
}
body.v4 .how__step p{font-size:14.5px;color:var(--v4-mute);line-height:1.7;margin:0}
@media(max-width:900px){body.v4 .how__grid{grid-template-columns:1fr;gap:18px}}
/* ── 12. HOMEPAGE — Reppin From (.reppin) ──────────────────────────── */
body.v4 .reppin__inner{
display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
max-width:var(--v4-wrap-max);margin:0 auto;
}
body.v4 .reppin__map{
width:100%;height:auto;display:block;
filter:drop-shadow(0 18px 50px rgba(34,61,128,.3));
}
body.v4 .reppin__text h2{
font-family:var(--v4-display);font-weight:900;font-size:clamp(40px,5.8vw,80px);
line-height:.92;letter-spacing:-.02em;text-transform:uppercase;margin:24px 0 24px;
}
body.v4 .reppin__text h2{line-height:1}
body.v4 .reppin__text h2 em{display:block;margin:20px 0 0;line-height:1.05;width:fit-content;max-width:100%}
body.v4 .reppin__text p{font-size:16px;color:var(--v4-mute);line-height:1.7;margin:0 0 28px}
@media(max-width:900px){
body.v4 .reppin__inner{grid-template-columns:1fr;gap:40px}
}
/* ── 13. HOMEPAGE — Social Proof (.proof) ──────────────────────────── */
body.v4 .proof__grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
max-width:var(--v4-wrap-max);margin:0 auto;
border:1px solid var(--v4-line-2);border-radius:var(--v4-r-lg);
overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005));
}
body.v4 .proof__stat{
padding:48px 28px;text-align:center;
border-right:1px solid var(--v4-line);
}
body.v4 .proof__stat:last-child{border-right:0}
body.v4 .proof__stat strong{
display:block;font-family:var(--v4-display);font-weight:900;
font-size:clamp(40px,5vw,68px);line-height:1;letter-spacing:-.02em;color:var(--v4-ink);
margin-bottom:10px;
}
body.v4 .proof__stat span{
font-family:var(--v4-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--v4-mute);
}
@media(max-width:900px){
body.v4 .proof__grid{grid-template-columns:repeat(2,1fr)}
body.v4 .proof__stat{border-bottom:1px solid var(--v4-line)}
body.v4 .proof__stat:nth-child(2){border-right:0}
}
/* ── 14. MARQUEE ───────────────────────────────────────────────────── */
body.v4 .marquee{
overflow:hidden;border-top:1px solid var(--v4-line);border-bottom:1px solid var(--v4-line);
padding:18px 0;margin:0;background:rgba(255,255,255,.015);
}
body.v4 .marquee__track{
display:flex;gap:48px;animation:v4-marquee 38s linear infinite;
font-family:var(--v4-display);font-weight:700;font-size:18px;letter-spacing:3px;
text-transform:uppercase;color:var(--v4-mute);white-space:nowrap;
}
body.v4 .marquee__track span{display:inline-flex;align-items:center;gap:48px}
body.v4 .marquee__track span::after{
content:'';width:6px;height:6px;background:var(--v4-blue);border-radius:50%;display:inline-block;
}
@keyframes v4-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* ── 15. SERVICES — Arsenal (.arsenal) ─────────────────────────────── */
body.v4 .arsenal{padding:var(--v4-section-py) var(--v4-section-px)}
body.v4 .arsenal > .wrap{max-width:var(--v4-wrap-max);margin:0 auto;padding:0}
body.v4 .arsenal__row{
display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
margin-bottom:140px;
}
body.v4 .arsenal__row:last-of-type{margin-bottom:0}
body.v4 .arsenal__row--alt{direction:rtl}
body.v4 .arsenal__row--alt > *{direction:ltr}
body.v4 .arsenal__media{
position:relative;border-radius:var(--v4-r-lg);overflow:hidden;
aspect-ratio:4/5;background:var(--v4-bg-2);
box-shadow:var(--v4-shadow-lg);
border:1px solid var(--v4-line-2);
}
body.v4 .arsenal__media img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform .8s ease;
}
body.v4 .arsenal__media:hover img{transform:scale(1.04)}
body.v4 .arsenal__num{
position:absolute;top:24px;left:24px;z-index:2;
font-family:var(--v4-display);font-weight:900;font-size:64px;line-height:1;
letter-spacing:-.04em;
color:transparent;
-webkit-text-stroke:2px rgba(255,255,255,.55);
}
body.v4 .arsenal__text .eyebrow{margin-bottom:20px}
body.v4 .arsenal__text h2{
font-family:var(--v4-display);font-weight:900;
font-size:clamp(42px,5vw,80px);line-height:.92;letter-spacing:-.02em;
text-transform:uppercase;margin:0 0 16px;
}
body.v4 .arsenal__tag{
font-family:var(--v4-serif);font-style:italic;font-size:clamp(18px,1.8vw,24px);
color:var(--v4-blue);margin:0 0 24px;line-height:1.4;
}
body.v4 .arsenal__text p{font-size:16px;color:var(--v4-mute);line-height:1.75}
@media(max-width:900px){
body.v4 .arsenal__row{grid-template-columns:1fr;gap:32px;margin-bottom:80px}
body.v4 .arsenal__row--alt{direction:ltr}
body.v4 .arsenal__media{aspect-ratio:4/3;max-width:560px;margin:0 auto}
}
/* ── 16. GALLERY (.masonry) ────────────────────────────────────────── */
body.v4 .gallery{padding:var(--v4-section-py) var(--v4-section-px)}
body.v4 .gallery > .wrap{max-width:var(--v4-wrap-max);margin:0 auto;padding:0}
body.v4 .masonry{
columns:3;column-gap:20px;
}
body.v4 .masonry__item{
break-inside:avoid;margin-bottom:20px;
border-radius:var(--v4-r);overflow:hidden;
border:1px solid var(--v4-line-2);
background:var(--v4-bg-2);
box-shadow:var(--v4-shadow-sm);
transition:transform .3s ease,box-shadow .3s ease;
position:relative;
}
body.v4 .masonry__item:hover{
transform:translateY(-3px);
box-shadow:var(--v4-shadow);
}
body.v4 .masonry__item img{
width:100%;height:auto;display:block;
transition:transform .6s ease;
}
body.v4 .masonry__item:hover img{transform:scale(1.04)}
@media(max-width:900px){body.v4 .masonry{columns:2;column-gap:14px}.masonry__item{margin-bottom:14px}}
@media(max-width:540px){body.v4 .masonry{columns:1}}
/* ── 17. CONTACT page (.contact) ───────────────────────────────────── */
body.v4 .contact{padding:var(--v4-section-py) var(--v4-section-px)}
body.v4 .contact > .wrap{max-width:var(--v4-wrap-max);margin:0 auto;padding:0}
body.v4 .contact__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}
body.v4 .contact__info .eyebrow{margin-bottom:18px}
body.v4 .contact__info h2{
font-family:var(--v4-display);font-weight:900;font-size:clamp(40px,5vw,72px);
line-height:.92;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 36px;
}
body.v4 .contact__info h2{line-height:1}
body.v4 .contact__info h2 em{display:block;margin:.55em 0 0;line-height:1.05;width:fit-content;max-width:100%}
body.v4 .contact__block{
display:flex;flex-direction:column;gap:6px;
padding:20px 24px;margin-bottom:14px;
background:var(--v4-bg-2);border:1px solid var(--v4-line);border-radius:var(--v4-r);
transition:border-color .2s ease;
}
body.v4 .contact__block:hover{border-color:var(--v4-line-2)}
body.v4 .contact__block span{
font-family:var(--v4-mono);font-size:10.5px;letter-spacing:1.8px;
text-transform:uppercase;color:var(--v4-mute);
}
body.v4 .contact__block strong{
font-family:var(--v4-display);font-weight:700;font-size:22px;letter-spacing:.5px;
text-transform:uppercase;color:var(--v4-ink);
}
body.v4 .contact__note{
margin-top:24px;font-size:14px;color:var(--v4-mute);
}
body.v4 .contact__note a{color:var(--v4-blue);font-weight:600}
body.v4 .contact__form,
body.v4 .private__form{
display:flex;flex-direction:column;gap:14px;
padding:40px;
background:var(--v4-bg-2);border:1px solid var(--v4-line-2);border-radius:var(--v4-r-lg);
box-shadow:var(--v4-shadow);
}
body.v4 .contact__form input,
body.v4 .contact__form textarea,
body.v4 .contact__form select,
body.v4 .private__form input,
body.v4 .private__form textarea,
body.v4 .private__form select{
width:100%;padding:16px 18px;
font-family:var(--v4-text);font-size:15px;color:var(--v4-ink);
background:rgba(255,255,255,.025);
border:1px solid var(--v4-line-2);border-radius:var(--v4-r-sm);
transition:all .2s ease;
}
body.v4 .contact__form input::placeholder,
body.v4 .contact__form textarea::placeholder,
body.v4 .private__form input::placeholder,
body.v4 .private__form textarea::placeholder{color:var(--v4-mute)}
body.v4 .contact__form input:focus,
body.v4 .contact__form textarea:focus,
body.v4 .contact__form select:focus,
body.v4 .private__form input:focus,
body.v4 .private__form textarea:focus,
body.v4 .private__form select:focus{
outline:0;border-color:var(--v4-blue);background:rgba(34,61,128,.04);
box-shadow:0 0 0 4px rgba(34,61,128,.12);
}
body.v4 .contact__form textarea,
body.v4 .private__form textarea{min-height:140px;resize:vertical;font-family:var(--v4-text);line-height:1.6}
body.v4 .contact__form button,
body.v4 .private__form button{margin-top:8px;align-self:flex-start}
body.v4 .contact__success{
padding:18px 22px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.35);
border-radius:var(--v4-r-sm);color:var(--v4-success);
}
body.v4 .contact__success strong{display:block;margin-bottom:4px;font-family:var(--v4-display);font-size:16px;letter-spacing:1px}
body.v4 .contact__success p{color:var(--v4-mute);font-size:13px;margin:0}
body.v4 .contact__err{
padding:14px 18px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.35);
border-radius:var(--v4-r-sm);color:var(--v4-danger);font-size:14px;
}
@media(max-width:900px){
body.v4 .contact__grid{grid-template-columns:1fr;gap:40px}
body.v4 .contact__form,body.v4 .private__form{padding:28px}
}
/* ── 18. PRIVATE BOOKING (.private) ────────────────────────────────── */
body.v4 .private{padding:var(--v4-section-py) var(--v4-section-px)}
body.v4 .private > .wrap{max-width:var(--v4-wrap-max);margin:0 auto;padding:0}
body.v4 .private__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}
body.v4 .private__info .eyebrow{margin-bottom:18px}
body.v4 .private__info h2{
font-family:var(--v4-display);font-weight:900;font-size:clamp(40px,5vw,72px);
line-height:.92;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 32px;
}
body.v4 .private__info h2{line-height:1}
body.v4 .private__info h2 em{display:block;margin:.55em 0 0;line-height:1.05;width:fit-content;max-width:100%}
body.v4 .private__list{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:14px}
body.v4 .private__list li{
position:relative;padding:18px 20px 18px 54px;
background:var(--v4-bg-2);border:1px solid var(--v4-line);border-radius:var(--v4-r);
font-size:14px;color:var(--v4-mute);line-height:1.55;
}
body.v4 .private__list li::before{
content:'';position:absolute;left:20px;top:50%;transform:translateY(-50%);
width:18px;height:18px;border-radius:50%;
background:rgba(34,61,128,.18);border:1px solid var(--v4-blue);
}
body.v4 .private__list li::after{
content:'';position:absolute;left:25px;top:50%;width:5px;height:9px;
border-right:2px solid var(--v4-blue);border-bottom:2px solid var(--v4-blue);
transform:translateY(-65%) rotate(45deg);
}
body.v4 .private__list li strong{color:var(--v4-ink-soft);font-weight:600;margin-right:4px}
body.v4 .private__note{
padding:24px;background:rgba(34,61,128,.06);
border:1px solid rgba(34,61,128,.25);border-radius:var(--v4-r);
}
body.v4 .private__note strong{
display:block;font-family:var(--v4-display);font-size:16px;letter-spacing:1px;
text-transform:uppercase;color:var(--v4-ink);margin-bottom:8px;
}
body.v4 .private__note p{margin:0;font-size:13.5px;color:var(--v4-mute);line-height:1.5}
body.v4 .private__note a{color:var(--v4-blue);font-weight:600}
body.v4 .private__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
body.v4 .private__small{
margin-top:6px;font-size:11.5px;color:var(--v4-mute);
font-family:var(--v4-mono);letter-spacing:1px;line-height:1.5;
}
@media(max-width:900px){
body.v4 .private__grid{grid-template-columns:1fr;gap:40px}
body.v4 .private__row{grid-template-columns:1fr}
}
/* ── 19. EVENTS LIST page (events.php) ────────────────────────────── */
body.v4 .events{padding:32px var(--v4-section-px) var(--v4-section-py)}
body.v4 .events > .wrap{max-width:var(--v4-wrap-max);margin:0 auto;padding:0}
body.v4 .events__grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
max-width:none;padding:0;
}
body.v4 .evt__star-mini{
display:inline-flex;align-items:center;gap:5px;padding:3px 9px;
font-family:var(--v4-mono);font-size:8.5px;letter-spacing:1.1px;text-transform:uppercase;font-weight:500;
color:var(--v4-blue);background:rgba(34,61,128,.18);
border:1px solid rgba(34,61,128,.5);border-radius:999px;
line-height:1.4;
}
body.v4 .hevt__badge--lg{padding:4px 10px;font-size:9.5px}
body.v4 .events__grid .evt.hevt--v3{margin-bottom:0}
body.v4 .events-empty{
max-width:var(--v4-wrap-max);margin:0 auto;
padding:80px 32px;text-align:center;
border:1px dashed var(--v4-line-2);border-radius:var(--v4-r-lg);
color:var(--v4-mute);
}
@media(max-width:1100px){body.v4 .events__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){body.v4 .events__grid{grid-template-columns:1fr}}
/* ── 19b. SINGLE EVENT page (event.php) ───────────────────────────── */
/* HERO: side-by-side editorial — framed photo + content card */
body.v4 .evt-hero{
padding:64px var(--v4-section-px) 80px;
position:relative;overflow:hidden;
border-bottom:1px solid var(--v4-line);
background:
radial-gradient(ellipse 60% 80% at 80% 50%, rgba(34,61,128,.18), transparent 60%),
radial-gradient(ellipse 50% 60% at 0% 0%, rgba(34,61,128,.12), transparent 65%);
}
body.v4 .evt-hero::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,transparent,var(--v4-blue),transparent);
opacity:.6;
}
body.v4 .evt-hero > .wrap{
position:relative;z-index:1;max-width:var(--v4-wrap-max);margin:0 auto;padding:0;
}
body.v4 .evt-hero__breadcrumb{
font-family:var(--v4-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;
color:var(--v4-mute);margin-bottom:36px;
display:inline-flex;align-items:center;gap:10px;
}
body.v4 .evt-hero__breadcrumb a{color:var(--v4-blue);transition:color .2s ease}
body.v4 .evt-hero__breadcrumb a:hover{color:var(--v4-ink)}
body.v4 .evt-hero__breadcrumb span{color:var(--v4-mute-2);opacity:.6}
body.v4 .evt-hero__grid{
display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;
}
/* PHOTO CARD — framed, rounded, soft blue ring + corner tag */
body.v4 .evt-hero__visual{position:relative}
body.v4 .evt-hero__photo{
position:relative;
border-radius:var(--v4-r-lg);
overflow:hidden;
aspect-ratio:4/5;
background:var(--v4-bg-2);
box-shadow:
0 40px 90px rgba(0,0,0,.55),
0 0 0 1px rgba(255,255,255,.06),
0 0 0 4px rgba(34,61,128,.18),
0 0 60px rgba(34,61,128,.22);
}
body.v4 .evt-hero__photo img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
body.v4 .evt-hero__photo::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,transparent 50%,rgba(5,8,16,.45) 100%);
pointer-events:none;
}
body.v4 .evt-hero__photo-tag{
position:absolute;left:18px;bottom:18px;z-index:2;
display:inline-flex;align-items:center;gap:8px;
padding:8px 14px;
font-family:var(--v4-mono);font-size:10.5px;letter-spacing:1.6px;font-weight:500;
text-transform:uppercase;color:var(--v4-ink);
background:rgba(5,8,16,.78);backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.12);border-radius:999px;
}
body.v4 .evt-hero__photo-dot{
width:7px;height:7px;border-radius:50%;background:var(--v4-blue);
box-shadow:0 0 12px var(--v4-blue);
animation:v4-pulse 1.8s ease-in-out infinite;
}
body.v4 .evt-hero__chip{
position:absolute;top:-12px;right:18px;z-index:3;
padding:7px 14px;
font-family:var(--v4-mono);font-size:10.5px;letter-spacing:1.4px;font-weight:600;
text-transform:uppercase;color:#fff;
background:var(--v4-blue);
border-radius:999px;
box-shadow:0 8px 20px rgba(34,61,128,.5);
}
body.v4 .evt-hero__content .eyebrow{margin-bottom:22px}
body.v4 .evt-hero__title{
font-family:var(--v4-display);font-weight:900;
font-size:clamp(40px,5.8vw,84px);line-height:.9;letter-spacing:-.02em;
text-transform:uppercase;margin:0 0 36px;color:var(--v4-ink);
}
body.v4 .evt-hero__meta{
display:grid;grid-template-columns:1fr 1fr;gap:0;
margin:0 0 32px;
border:1px solid var(--v4-line-2);border-radius:var(--v4-r);
background:rgba(5,8,16,.55);backdrop-filter:blur(10px);
overflow:hidden;
}
body.v4 .evt-hero__meta > div{
display:flex;flex-direction:column;gap:8px;
padding:18px 20px;
border-right:1px solid var(--v4-line);
border-bottom:1px solid var(--v4-line);
}
body.v4 .evt-hero__meta > div:nth-child(even){border-right:0}
body.v4 .evt-hero__meta > div:nth-last-child(-n+2){border-bottom:0}
body.v4 .evt-hero__meta span{
display:block;font-family:var(--v4-mono);font-size:9.5px;letter-spacing:2.4px;
color:var(--v4-mute);text-transform:uppercase;margin:0;
}
body.v4 .evt-hero__meta strong{
display:block;font-family:var(--v4-display);font-weight:800;
font-size:17px;line-height:1.15;text-transform:uppercase;color:var(--v4-ink);
letter-spacing:.4px;
}
body.v4 .evt-hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
/* SECTION primitives — numbered rule + title pattern reused across briefing/included/sessions */
body.v4 .evt-section{padding:var(--v4-section-py) var(--v4-section-px);position:relative}
body.v4 .evt-section > .wrap{max-width:var(--v4-wrap-max);margin:0 auto;padding:0}
body.v4 .evt-section + .evt-section{padding-top:0}
body.v4 .evt-section__rule{
display:flex;align-items:center;gap:16px;
margin-bottom:36px;padding-bottom:18px;
border-bottom:1px solid var(--v4-line);
}
body.v4 .evt-section__num{
display:inline-flex;align-items:center;justify-content:center;
min-width:48px;height:48px;padding:0 12px;
font-family:var(--v4-mono);font-size:14px;font-weight:600;letter-spacing:1px;
color:var(--v4-blue);background:rgba(34,61,128,.16);
border:1px solid rgba(34,61,128,.45);border-radius:10px;
}
body.v4 .evt-section__label{
font-family:var(--v4-mono);font-size:12px;letter-spacing:2.4px;
color:var(--v4-mute);text-transform:uppercase;
}
body.v4 .evt-section__title{
font-family:var(--v4-display);font-weight:900;
font-size:clamp(36px,5.5vw,84px);line-height:.92;letter-spacing:-.02em;
text-transform:uppercase;margin:0 0 12px;color:var(--v4-ink);
}
body.v4 .evt-section__title--center{text-align:center;max-width:920px;margin-left:auto;margin-right:auto}
body.v4 .evt-section__sub{
font-size:16px;color:var(--v4-mute);line-height:1.65;
max-width:620px;margin:0 auto 40px;text-align:center;
}
/* BRIEFING — 2-col editorial */
body.v4 .evt-briefing__grid{
display:grid;grid-template-columns:1fr 1.5fr;gap:80px;align-items:start;
}
body.v4 .evt-briefing__head .eyebrow{margin-bottom:20px}
body.v4 .evt-briefing__head .evt-section__title{margin-bottom:0}
body.v4 .evt-briefing__body .evt-desc{
font-size:17px;color:var(--v4-mute);line-height:1.8;margin:0;
}
body.v4 .evt-addr{
display:flex;flex-direction:column;gap:6px;
margin:32px 0 0;padding:20px 24px;
background:var(--v4-bg-2);border:1px solid var(--v4-line-2);
border-left:3px solid var(--v4-blue);
border-radius:var(--v4-r-sm);
}
body.v4 .evt-addr__label{
font-family:var(--v4-mono);font-size:10.5px;letter-spacing:2px;
text-transform:uppercase;color:var(--v4-blue);
}
body.v4 .evt-addr__value{
font-family:var(--v4-display);font-weight:700;font-size:18px;letter-spacing:.4px;
text-transform:uppercase;color:var(--v4-ink);
}
/* WHAT'S INCLUDED chip strip */
body.v4 .evt-section--included{background:linear-gradient(180deg,transparent,rgba(34,61,128,.04),transparent)}
body.v4 .evt-chips{
display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
max-width:1000px;margin:0 auto;
}
body.v4 .evt-chip{
display:inline-flex;align-items:center;gap:12px;
padding:14px 22px;
font-family:var(--v4-display);font-weight:700;font-size:14px;letter-spacing:1.4px;
text-transform:uppercase;color:var(--v4-ink);
background:var(--v4-bg-2);
border:1px solid var(--v4-line-2);border-radius:999px;
transition:border-color .25s ease,background .25s ease;
}
body.v4 .evt-chip:hover{border-color:var(--v4-blue);background:rgba(34,61,128,.1)}
body.v4 .evt-chip__num{
display:inline-flex;align-items:center;justify-content:center;
width:26px;height:26px;
font-family:var(--v4-mono);font-size:11px;letter-spacing:.5px;font-weight:600;
color:var(--v4-blue);background:rgba(34,61,128,.18);
border-radius:50%;border:1px solid rgba(34,61,128,.45);
}
/* SESSIONS sections — frozen sess-pick__ children styled above */
body.v4 .evt-section--individual .sess-pick,
body.v4 .evt-section--team .sess-pick{margin-top:8px}
@media(max-width:1024px){
body.v4 .evt-hero__grid{grid-template-columns:1fr;gap:32px}
body.v4 .evt-hero__photo{aspect-ratio:16/10;max-width:680px;margin:0 auto}
}
@media(max-width:900px){
body.v4 .evt-hero{padding:48px var(--v4-section-px) 56px}
body.v4 .evt-hero__meta strong{font-size:15px}
body.v4 .evt-briefing__grid{grid-template-columns:1fr;gap:24px}
body.v4 .evt-section__rule{flex-wrap:wrap}
body.v4 .evt-section__title{font-size:clamp(28px,7vw,52px)}
body.v4 .evt-chip{padding:11px 18px;font-size:12px}
}
@media(max-width:540px){
body.v4 .evt-hero__grid{gap:24px}
body.v4 .evt-hero__photo{aspect-ratio:4/3}
body.v4 .evt-hero__meta{grid-template-columns:1fr}
body.v4 .evt-hero__meta > div{border-right:0;border-bottom:1px solid var(--v4-line)}
body.v4 .evt-hero__meta > div:last-child{border-bottom:0}
body.v4 .evt-hero__ctas{flex-direction:column}
body.v4 .evt-hero__ctas .btn{width:100%}
}
/* Sessions wrapper — cards inside use frozen .sess-pick__* classes */
body.v4 .sess-pick{
display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;
max-width:1200px;margin:0 auto;
}
/* v4 polish on the frozen sess-pick cards (CSS-only, no markup changes) */
body.v4 .sess-pick__card{
background:var(--v4-bg-2)!important;
border:1px solid var(--v4-line-2)!important;
border-radius:var(--v4-r-lg)!important;
padding:32px 28px!important;
transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease!important;
box-shadow:var(--v4-shadow)!important;
position:relative;overflow:hidden;
}
body.v4 .sess-pick__card:hover{
border-color:rgba(34,61,128,.55)!important;
box-shadow:var(--v4-shadow-lg)!important;
}
body.v4 .sess-pick__card--featured{
border-color:var(--v4-blue)!important;
box-shadow:var(--v4-shadow-lg),0 0 60px rgba(34,61,128,.25)!important;
}
body.v4 .sess-pick__ribbon{
position:absolute;top:0;right:0;
padding:6px 14px;background:var(--v4-blue);color:#fff;
font-family:var(--v4-mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;
border-radius:0 var(--v4-r-lg) 0 var(--v4-r);
}
body.v4 .sess-pick__duration{
font-family:var(--v4-mono);font-size:11px;letter-spacing:1.6px;
color:var(--v4-blue);text-transform:uppercase;margin-bottom:6px;
}
body.v4 .sess-pick__type{
font-family:var(--v4-mono);font-size:10px;letter-spacing:2px;
color:var(--v4-mute);text-transform:uppercase;margin-bottom:14px;
}
body.v4 .sess-pick__name{
font-family:var(--v4-display);font-weight:800;font-size:24px;
line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;
margin:0 0 8px;color:var(--v4-ink);
}
body.v4 .sess-pick__tagline{
font-size:14px;color:var(--v4-mute);line-height:1.5;margin:0 0 16px;
}
body.v4 .sess-pick__icons{
display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;
}
body.v4 .sess-pick__icon{
font-family:var(--v4-mono);font-size:9.5px;letter-spacing:1.2px;
padding:4px 8px;border:1px solid var(--v4-line);border-radius:999px;
color:var(--v4-mute);opacity:.45;text-transform:uppercase;
}
body.v4 .sess-pick__icon.on{color:var(--v4-ink);border-color:var(--v4-blue);opacity:1;background:rgba(34,61,128,.15)}
body.v4 .sess-pick__desc{
font-size:13.5px;color:var(--v4-mute);line-height:1.6;margin:0 0 18px;
}
body.v4 .sess-pick__price{
display:flex;align-items:baseline;gap:6px;
margin:18px 0 8px;padding-top:18px;border-top:1px solid var(--v4-line);
}
body.v4 .sess-pick__price strong{
font-family:var(--v4-display);font-weight:900;font-size:36px;
line-height:1;letter-spacing:-.02em;color:var(--v4-ink);
}
body.v4 .sess-pick__price small{
font-family:var(--v4-mono);font-size:11px;letter-spacing:1.2px;
color:var(--v4-mute);text-transform:uppercase;
}
body.v4 .sess-pick__club{
font-family:var(--v4-mono);font-size:10.5px;letter-spacing:1.3px;
color:var(--v4-blue);text-transform:uppercase;margin:6px 0 14px;
}
body.v4 .sess-pick__btn{
display:block!important;
width:100%;
margin-top:18px;
padding:15px 22px!important;
font-family:var(--v4-display)!important;font-weight:700!important;
font-size:13px!important;letter-spacing:1.6px!important;
text-transform:uppercase!important;color:var(--v4-ink)!important;
background:rgba(255,255,255,.04)!important;
border:1px solid var(--v4-line-2)!important;
border-radius:999px!important;
text-align:center;
transition:all .25s ease!important;
}
/* Beat the frozen original .sess-pick__card:hover .sess-pick__btn rule from style.css */
body.v4 .sess-pick__card:hover .sess-pick__btn,
body.v4 .sess-pick__btn:hover{
background:var(--v4-blue)!important;
border-color:var(--v4-blue)!important;
color:#fff!important;
box-shadow:0 12px 30px rgba(34,61,128,.4)!important;
}
/* Single-event "jump" row (from event.php hero) */
body.v4 .v2-event-hero__jump{
display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0;
}
body.v4 .v2-event-hero__jump-btn{
display:inline-flex;align-items:center;gap:10px;
padding:12px 20px;font-family:var(--v4-text);font-size:12px;font-weight:600;
letter-spacing:1.4px;text-transform:uppercase;
color:var(--v4-ink);background:rgba(255,255,255,.04);
border:1px solid var(--v4-line-2);border-radius:999px;
transition:all .2s ease;
}
body.v4 .v2-event-hero__jump-btn:hover{background:var(--v4-blue);border-color:var(--v4-blue)}
body.v4 .v2-event-hero__jump-count{
padding:2px 8px;background:rgba(34,61,128,.3);
border-radius:999px;font-family:var(--v4-mono);font-size:10px;
}
@media(max-width:900px){
body.v4 .evt-hero{padding:64px var(--v4-section-px) 48px}
body.v4 .evt-hero__meta{grid-template-columns:1fr 1fr;gap:18px;padding:18px 20px}
body.v4 .evt-hero__meta strong{font-size:14px}
body.v4 .sess-pick{grid-template-columns:1fr;gap:16px}
}
@media(max-width:540px){
body.v4 .evt-hero__meta{grid-template-columns:1fr}
}
/* ── 20. PREFOOTER + FOOTER ────────────────────────────────────────── */
body.v4 .prefooter{
padding:var(--v4-section-py) var(--v4-section-px);
}
body.v4 .prefooter__box{
max-width:var(--v4-wrap-max);margin:0 auto;
padding:96px 48px;text-align:center;
background:
linear-gradient(135deg,rgba(34,61,128,.18) 0%,rgba(5,8,16,.4) 100%),
var(--v4-bg-2);
border:1px solid var(--v4-line-2);
border-radius:var(--v4-r-xl);
position:relative;overflow:hidden;
box-shadow:var(--v4-shadow-lg);
}
body.v4 .prefooter__box::before{
content:'';position:absolute;top:-30%;right:-10%;width:60%;height:160%;
background:radial-gradient(ellipse,rgba(34,61,128,.25),transparent 65%);
filter:blur(40px);pointer-events:none;
}
body.v4 .prefooter__title{
position:relative;z-index:1;
width:100%;max-width:520px;height:auto;display:block;margin:0 auto 18px;
filter:drop-shadow(0 6px 20px rgba(34,61,128,.45));
}
body.v4 .prefooter__sub{
position:relative;z-index:1;
font-size:clamp(15px,1.4vw,18px);color:var(--v4-ink-soft);
max-width:560px;margin:0 auto 32px;text-align:center;
}
body.v4 .prefooter__ctas{
position:relative;z-index:1;
display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
}
@media(max-width:720px){body.v4 .prefooter__box{padding:56px 24px}}
body.v4 .footer{
background:var(--v4-bg-2);
border-top:1px solid var(--v4-line);
padding:80px var(--v4-section-px) 0;
margin-top:auto;
}
body.v4 .footer__inner{
max-width:var(--v4-wrap-max);margin:0 auto;
display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:start;
padding-bottom:64px;
}
body.v4 .footer__logo img{
width:110px;height:auto;display:block;
filter:drop-shadow(0 8px 24px rgba(34,61,128,.5));
}
body.v4 .footer__cols{
display:grid;grid-template-columns:repeat(3,1fr);gap:48px;
}
body.v4 .footer__cols h4{
font-family:var(--v4-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;
color:var(--v4-mute);font-weight:500;margin:0 0 18px;
}
body.v4 .footer__cols ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
body.v4 .footer__cols ul li{font-size:14px;color:var(--v4-ink-soft);font-weight:500}
body.v4 .footer__cols ul li a{color:var(--v4-ink-soft);transition:color .2s ease}
body.v4 .footer__cols ul li a:hover{color:var(--v4-blue)}
body.v4 .footer__cols p{font-size:13px;color:var(--v4-mute);margin:0 0 16px}
body.v4 .footer__cols p strong{
display:block;margin-top:4px;font-family:var(--v4-display);font-size:18px;letter-spacing:.5px;
text-transform:uppercase;color:var(--v4-ink);font-weight:700;
}
body.v4 .footer__bar{
text-align:center;padding:24px 0;
border-top:1px solid var(--v4-line);
font-family:var(--v4-mono);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
color:var(--v4-mute);
}
@media(max-width:900px){
body.v4 .footer__inner{grid-template-columns:1fr;gap:40px}
body.v4 .footer__cols{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:540px){body.v4 .footer__cols{grid-template-columns:1fr}}
/* ── 21. EVENT page (.event-hero / single event) ───────────────────── */
body.v4 .event-hero,
body.v4 .v2-event-hero{
padding:96px var(--v4-section-px) 64px;
position:relative;
}
body.v4 .event-hero > .wrap{max-width:var(--v4-wrap-max);margin:0 auto;padding:0}
/* ── 22. SECTION TITLE / EYEBROW polish across pages ───────────────── */
body.v4 .home-events--v3 .section-title,
body.v4 section .section-title{
text-align:left;margin-bottom:0;
}
body.v4 section[class*="--center"] .section-title,
body.v4 section .eyebrow--center + .section-title{text-align:center;margin-bottom:30px}
/* ── 23. MOTION + ACCESSIBILITY ────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
body.v4 *,body.v4 *::before,body.v4 *::after{
animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important;
}
}
/* ── 24. UTILITY ───────────────────────────────────────────────────── */
body.v4 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ── 25. BOOKING WIZARD (book.php / booking-success.php) ───────────
The .bk__* classes are dynamically generated by booking.js — frozen
per CLAUDE.md. We only style via body.v4 overrides (no markup edits). */
body.v4 .booking{padding:32px var(--v4-section-px) var(--v4-section-py)}
body.v4 .booking > .wrap{max-width:var(--v4-wrap-max);margin:0 auto;padding:0}
/* STEPPER — top row of 7 step pills */
body.v4 .bk__steps{
display:flex;gap:10px;justify-content:center;margin-bottom:56px;flex-wrap:wrap;
padding:18px;
background:var(--v4-bg-2);
border:1px solid var(--v4-line-2);border-radius:var(--v4-r-lg);
}
body.v4 .bk__step{
display:inline-flex;align-items:center;gap:8px;
padding:10px 16px;
font-family:var(--v4-mono);font-size:10.5px;font-weight:500;
letter-spacing:1.6px;text-transform:uppercase;color:var(--v4-mute);
background:transparent;border:1px solid var(--v4-line);border-radius:999px;
transition:all .25s ease;
white-space:nowrap;
}
body.v4 .bk__step.active{
background:var(--v4-blue);color:#fff;border-color:var(--v4-blue);
box-shadow:0 8px 20px rgba(34,61,128,.4);
}
body.v4 .bk__step.done{
color:var(--v4-blue);border-color:rgba(34,61,128,.5);background:rgba(34,61,128,.08);
}
body.v4 .bk__step.done::before{
content:'✓';font-family:var(--v4-text);font-weight:700;font-size:11px;color:var(--v4-blue);
}
/* PANEL — the main container */
body.v4 .bk__panel{
max-width:1100px;margin:0 auto;padding:56px 48px;
border:1px solid var(--v4-line-2);border-radius:var(--v4-r-xl);
background:var(--v4-bg-2);
box-shadow:var(--v4-shadow-lg);
}
body.v4 .bk__loading{
text-align:center;color:var(--v4-mute);padding:60px 20px;
font-family:var(--v4-mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;
}
/* HEADINGS within panel */
body.v4 .bk__h{
font-family:var(--v4-display);font-weight:900;
font-size:clamp(30px,4vw,52px);line-height:.95;letter-spacing:-.01em;
text-transform:uppercase;text-align:center;margin:0 0 14px;color:var(--v4-ink);
}
body.v4 .bk__h em{
/* uses base painted-EDGE em styling; ensure it reads inline here */
display:inline-block;
}
body.v4 .bk__sub{
text-align:center;color:var(--v4-mute);
font-family:var(--v4-mono);font-size:11px;letter-spacing:2px;
text-transform:uppercase;margin-bottom:40px;
}
/* GRIDS — events 3-col fixed (matches events.php), type 2-col */
body.v4 .bk__grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px;
}
body.v4 .bk__grid--events{grid-template-columns:repeat(3,1fr)}
body.v4 .bk__grid--type{grid-template-columns:1fr 1fr;max-width:780px;margin:0 auto 32px;gap:18px}
@media(max-width:1024px){
body.v4 .bk__grid,
body.v4 .bk__grid--events{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
body.v4 .bk__grid,
body.v4 .bk__grid--events,
body.v4 .bk__grid--type{grid-template-columns:1fr}
}
/* CARDS — IDENTICAL visual treatment to the events.php .evt--v3 cards
(no image, solid dark panel, calm hover) */
body.v4 .bk__card{
display:flex!important;flex-direction:column;
position:relative;overflow:hidden;cursor:pointer;
padding:22px 22px 24px;
border:1px solid var(--v4-line-2)!important;border-radius:var(--v4-r)!important;
background:var(--v4-bg-2)!important;
box-shadow:var(--v4-shadow)!important;
min-height:280px;
transition:border-color .25s ease,box-shadow .25s ease!important;
}
body.v4 .bk__card:hover{
border-color:rgba(34,61,128,.55)!important;
box-shadow:var(--v4-shadow-lg)!important;
transform:none!important; /* kill legacy translateY(-4px) */
}
body.v4 .bk__card img{display:none} /* match events.php no-image card style */
body.v4 .bk__cbody{
padding:0;display:flex;flex-direction:column;gap:8px;flex:1;
}
body.v4 .bk__cat{
display:inline-flex;align-items:center;gap:7px;
font-family:var(--v4-mono);font-size:9.5px;letter-spacing:1.6px;
color:var(--v4-blue);text-transform:uppercase;font-weight:500;
padding:5px 11px;background:rgba(34,61,128,.14);
border:1px solid rgba(34,61,128,.4);border-radius:999px;
align-self:flex-start;margin-bottom:14px;
}
body.v4 .bk__cbody h4{
font-family:var(--v4-display);font-weight:800;
font-size:clamp(22px,2.6vw,28px);line-height:.95;letter-spacing:-.01em;
text-transform:uppercase;margin:0 0 10px;color:var(--v4-ink);
}
body.v4 .bk__cbody p{
color:var(--v4-mute);font-size:14px;line-height:1.6;margin:0 0 12px;
}
body.v4 .bk__cbody p:last-child{margin-bottom:0;margin-top:auto;
font-family:var(--v4-display);font-weight:700;font-size:13px;letter-spacing:1.2px;
color:var(--v4-blue);text-transform:uppercase;
}
/* TYPE-picker cards (step 2 — same look, slightly more breathing room) */
body.v4 .bk__grid--type .bk__card{min-height:220px;justify-content:center}
body.v4 .bk__grid--type .bk__cbody{align-items:flex-start;gap:10px}
body.v4 .bk__grid--type .bk__cbody h4{font-size:30px}
/* Sold-out events on book.php step 1 — dimmed, no hover, no click */
body.v4 .evt--sold{opacity:.55;cursor:not-allowed;pointer-events:none}
body.v4 .evt--sold:hover{border-color:var(--v4-line-2)!important;box-shadow:var(--v4-shadow)!important}
body.v4 .evt--sold .hevt__cta{color:var(--v4-danger)}
/* DATE + TIME PILLS */
body.v4 .bk__dates,
body.v4 .bk__times{
display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;
margin-bottom:32px;
}
body.v4 .bk__date,
body.v4 .bk__time{
padding:18px 14px;cursor:pointer;text-align:center;
background:var(--v4-bg-3);
border:1px solid var(--v4-line-2);border-radius:var(--v4-r-sm);
color:var(--v4-ink);font-family:var(--v4-text);
transition:all .2s ease;
}
body.v4 .bk__date:hover,
body.v4 .bk__time:not(:disabled):hover{
border-color:var(--v4-blue);background:rgba(34,61,128,.12);
}
body.v4 .bk__date span{
display:block;font-family:var(--v4-mono);font-size:10.5px;letter-spacing:1.6px;
color:var(--v4-mute);margin-bottom:6px;text-transform:uppercase;
}
body.v4 .bk__date strong{
font-family:var(--v4-display);font-weight:800;font-size:20px;letter-spacing:-.01em;
}
body.v4 .bk__date em{
display:block;font-family:var(--v4-mono);font-size:9.5px;letter-spacing:1.5px;
color:var(--v4-mute);margin-top:6px;font-style:normal;text-shadow:none;
-webkit-text-stroke:0;color:var(--v4-mute);
}
body.v4 .bk__time{
display:flex;flex-direction:column;gap:4px;padding:16px 12px;
}
body.v4 .bk__time strong{
font-family:var(--v4-display);font-weight:800;font-size:15px;letter-spacing:.3px;
}
body.v4 .bk__time span{
font-family:var(--v4-mono);font-size:9.5px;letter-spacing:1.4px;
color:var(--v4-blue);text-transform:uppercase;
width:100%;
}
body.v4 .bk__time.full{opacity:.4;cursor:not-allowed;background:rgba(0,0,0,.2)}
body.v4 .bk__time.full span{color:var(--v4-danger)}
/* FORM (step 6) */
body.v4 .bk__form{
display:grid;grid-template-columns:1fr 1fr;gap:16px;
max-width:680px;margin:0 auto;
}
body.v4 .bk__form input,
body.v4 .bk__form textarea{
padding:16px 18px;
font-family:var(--v4-text);font-size:15px;color:var(--v4-ink);
background:rgba(255,255,255,.025);
border:1px solid var(--v4-line-2);border-radius:var(--v4-r-sm);
transition:all .2s ease;
}
body.v4 .bk__form input::placeholder,
body.v4 .bk__form textarea::placeholder{color:var(--v4-mute)}
body.v4 .bk__form input:focus,
body.v4 .bk__form textarea:focus{
outline:0;border-color:var(--v4-blue);background:rgba(34,61,128,.05);
box-shadow:0 0 0 4px rgba(34,61,128,.12);
}
body.v4 .bk__form textarea{grid-column:1/-1;min-height:120px;resize:vertical;line-height:1.6}
body.v4 .bk__chk{
display:flex;align-items:center;gap:12px;
padding:16px 18px;
background:var(--v4-bg-3);border:1px solid var(--v4-line-2);border-radius:var(--v4-r-sm);
font-size:13.5px;color:var(--v4-mute);cursor:pointer;grid-column:1/-1;
}
body.v4 .bk__chk input{width:auto;accent-color:var(--v4-blue);flex-shrink:0}
/* ACTIONS row (back / next buttons) */
body.v4 .bk__actions{
grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;margin-top:32px;
}
/* REVIEW + TOTAL (step 7) */
body.v4 .bk__review{
max-width:600px;margin:0 auto 32px;
border:1px solid var(--v4-line-2);border-radius:var(--v4-r-lg);overflow:hidden;
background:var(--v4-bg-3);
}
body.v4 .bk__review > div{
display:flex;justify-content:space-between;align-items:center;
padding:18px 24px;border-bottom:1px solid var(--v4-line);gap:20px;
}
body.v4 .bk__review > div:last-child{border-bottom:0}
body.v4 .bk__review span{
font-family:var(--v4-mono);font-size:10.5px;letter-spacing:2px;
color:var(--v4-mute);text-transform:uppercase;flex-shrink:0;
}
body.v4 .bk__review strong{
font-family:var(--v4-display);font-weight:800;font-size:16px;letter-spacing:.3px;
color:var(--v4-ink);text-align:right;
}
body.v4 .bk__total{
background:rgba(34,61,128,.15);
border-top:1px solid var(--v4-blue);
}
body.v4 .bk__total strong{
font-size:28px!important;color:var(--v4-blue)!important;
letter-spacing:-.02em!important;
}
/* PAY OPTIONS */
body.v4 .bk__pay{
display:flex;gap:14px;justify-content:center;margin-bottom:28px;flex-wrap:wrap;
}
body.v4 .bk__pay label{
padding:14px 24px;cursor:pointer;
font-family:var(--v4-text);font-size:13px;font-weight:600;letter-spacing:1.2px;
text-transform:uppercase;color:var(--v4-ink);
background:var(--v4-bg-3);
border:1px solid var(--v4-line-2);border-radius:999px;
transition:all .2s ease;
}
body.v4 .bk__pay label:hover{border-color:var(--v4-line-3)}
body.v4 .bk__pay label.on{
border-color:var(--v4-blue);background:rgba(34,61,128,.18);
box-shadow:0 8px 20px rgba(34,61,128,.3);
}
/* DONE state (post-booking confirmation) */
body.v4 .bk__done{text-align:center;padding:40px 20px}
body.v4 .bk__check{
width:88px;height:88px;border-radius:50%;
background:var(--v4-blue);
display:grid;place-items:center;font-size:42px;font-weight:800;color:#fff;
margin:0 auto 28px;
box-shadow:0 14px 40px rgba(34,61,128,.5);
}
body.v4 .bk__done h2{
font-family:var(--v4-display);font-weight:900;font-size:clamp(36px,5vw,64px);
line-height:.95;letter-spacing:-.02em;text-transform:uppercase;
margin:0 0 14px;color:var(--v4-ink);
}
body.v4 .bk__ref{
display:inline-block;margin:20px 0;padding:10px 22px;
font-family:var(--v4-mono);font-size:14px;letter-spacing:2.4px;
color:var(--v4-blue);background:rgba(34,61,128,.12);
border:1px solid rgba(34,61,128,.4);border-radius:999px;
text-transform:uppercase;font-weight:600;
}
body.v4 .bk__note{
color:var(--v4-mute);margin:0 auto 32px;max-width:520px;line-height:1.65;
}
/* Responsive */
@media(max-width:900px){
body.v4 .bk__panel{padding:36px 22px}
body.v4 .bk__form{grid-template-columns:1fr}
body.v4 .bk__grid--type{grid-template-columns:1fr}
body.v4 .bk__actions{flex-direction:column}
body.v4 .bk__actions .btn{width:100%}
body.v4 .bk__steps{gap:6px;padding:12px}
body.v4 .bk__step{padding:8px 12px;font-size:9.5px;letter-spacing:1.2px}
}
/* ── 26. NAV SCROLL STATE ──────────────────────────────────────────── */
body.v4 .nav.is-scrolled{
background:rgba(5,8,16,.92);
box-shadow:0 4px 24px rgba(0,0,0,.35);
}
/* ── 27. MOBILE-FIRST RESPONSIVE PASS ─────────────────────────────── */
/* === Tablet portrait & small laptop (≤1180px) — done above for nav === */
@media(max-width:1180px){
body.v4 .home-events__head{flex-direction:column;align-items:flex-start}
body.v4 .home-events__all{align-self:flex-end}
}
/* === Tablet (≤960px) — major layout shifts === */
@media(max-width:960px){
body.v4 main{padding-top:64px}
body.v4 .nav{height:64px}
body.v4 .nav__logo img{height:36px}
/* Section padding tightens */
body.v4{
--v4-section-py: clamp(56px, 8vw, 100px);
--v4-section-px: clamp(18px, 3vw, 32px);
}
/* Type scaling */
body.v4 .page-hero{padding:64px var(--v4-section-px) 48px}
body.v4 .page-hero__title{font-size:clamp(40px,8vw,80px)}
body.v4 .page-hero__title em{font-size:48px;margin-top:24px}
body.v4 .section-title,
body.v4 .evt-section__title,
body.v4 .home-events__head .section-title{font-size:clamp(32px,6vw,60px)}
/* Buttons stay tappable */
body.v4 .btn,
body.v4 .v4-btn{padding:14px 24px;min-height:48px}
}
/* === Mobile (≤720px) === */
@media(max-width:720px){
/* Disable the ambient body backdrop (perf on mobile) */
body.v4::before{display:none}
/* Tighten section padding */
body.v4{
--v4-section-py: clamp(48px, 9vw, 72px);
--v4-section-px: 18px;
}
/* Hero stats strip stacks 2x2 */
body.v4 .hp-statstrip__inner{grid-template-columns:1fr 1fr!important;gap:0}
body.v4 .hp-statstrip__cell{padding:24px 18px}
body.v4 .hp-statstrip__num{font-size:36px}
/* Recovery flow → 1 col */
body.v4 .hp-flow__grid{grid-template-columns:1fr;gap:14px}
/* "Choose Your Entry" → 1 col */
body.v4 .flow{grid-template-columns:1fr;gap:14px}
body.v4 .service.flow__card{min-height:auto}
body.v4 .service.flow__card img{aspect-ratio:16/9}
/* Featured event card */
body.v4 .fevt{min-height:auto}
body.v4 .fevt__inner{padding:28px 22px;min-height:auto}
body.v4 .fevt__title{font-size:clamp(28px,7vw,44px)}
body.v4 .fevt__big-num{font-size:64px}
/* How It Works → 1 col */
body.v4 .how__grid{grid-template-columns:1fr;gap:14px}
body.v4 .how__num{width:60px;height:60px;font-size:24px}
/* Reppin section stacks */
body.v4 .reppin__inner{grid-template-columns:1fr;gap:28px}
/* Proof stats 2x2 */
body.v4 .proof__grid{grid-template-columns:1fr 1fr}
body.v4 .proof__stat{padding:32px 18px;border-bottom:1px solid var(--v4-line)}
body.v4 .proof__stat:nth-child(odd){border-right:1px solid var(--v4-line)}
body.v4 .proof__stat:nth-child(2){border-right:0}
body.v4 .proof__stat:nth-last-child(-n+2){border-bottom:0}
body.v4 .proof__stat strong{font-size:36px}
/* Earn Your Edge banner */
body.v4 .edge{margin-inline:0;border-radius:0}
body.v4 .edge .wrap{padding:64px 22px}
body.v4 .edge__title{max-width:80%}
/* Experience showcase compresses to 1 col */
body.v4 .experience__grid{grid-template-columns:1fr;grid-auto-rows:200px;gap:10px}
body.v4 .experience__item--xl,
body.v4 .experience__item--wide{grid-column:span 1;grid-row:span 1;min-height:200px}
body.v4 .experience__item--xl .experience__label{font-size:20px}
body.v4 .experience__caption{padding:14px 16px 12px}
/* Marquee tighter */
body.v4 .marquee{padding:14px 0}
body.v4 .marquee__track{font-size:13px;letter-spacing:2px;gap:24px}
/* Page-hero em sizing */
body.v4 .page-hero__title em{font-size:38px;margin-top:18px}
/* Services arsenal — already stacks at 900px, refine sizes */
body.v4 .arsenal__row{gap:24px;margin-bottom:56px}
body.v4 .arsenal__num{font-size:48px;top:16px;left:16px}
/* Gallery columns */
body.v4 .masonry{columns:2;column-gap:10px}
body.v4 .masonry__item{margin-bottom:10px}
/* Form padding tightens */
body.v4 .contact__form,
body.v4 .private__form{padding:22px 18px}
/* Single event hero */
body.v4 .evt-hero{padding:48px var(--v4-section-px) 40px}
body.v4 .evt-hero__title{font-size:clamp(34px,9vw,60px);margin-bottom:28px}
body.v4 .evt-hero__meta{padding:0}
body.v4 .evt-hero__meta > div{padding:16px 18px}
/* Event section numbering pill smaller */
body.v4 .evt-section__num{min-width:42px;height:42px;font-size:12px}
body.v4 .evt-section__rule{margin-bottom:28px}
/* Chips wrap nicely */
body.v4 .evt-chip{padding:10px 16px;font-size:12px}
body.v4 .evt-chip__num{width:22px;height:22px;font-size:10px}
/* Booking wizard */
body.v4 .bk__panel{padding:32px 18px}
body.v4 .bk__steps{padding:10px;gap:5px}
body.v4 .bk__step{padding:7px 10px;font-size:9px;letter-spacing:1px}
body.v4 .bk__h{font-size:clamp(26px,7vw,40px)}
/* Footer */
body.v4 .footer{padding:56px 18px 0}
body.v4 .footer__inner{padding-bottom:40px}
body.v4 .prefooter__box{padding:48px 22px}
body.v4 .prefooter__ctas{flex-direction:column;align-items:stretch}
body.v4 .prefooter__ctas .btn{width:100%}
}
/* === Small phones (≤480px) — fine-tuning === */
@media(max-width:480px){
body.v4 .page-hero__title{font-size:clamp(34px,10vw,56px)}
body.v4 .page-hero__title em{font-size:32px}
body.v4 .section-title,
body.v4 .evt-section__title,
body.v4 .home-events__head .section-title{font-size:clamp(28px,8vw,48px)}
body.v4 .hp-statstrip__num{font-size:30px}
body.v4 .fevt__inner{padding:22px 18px}
body.v4 .fevt__title{font-size:clamp(24px,8vw,36px)}
body.v4 .fevt__big-num{font-size:54px}
body.v4 .home-events__head .section-title{font-size:clamp(30px,8vw,52px)}
/* Stack 1 col where 2 was */
body.v4 .proof__grid{grid-template-columns:1fr}
body.v4 .proof__stat{border-right:0!important;border-bottom:1px solid var(--v4-line)!important}
body.v4 .proof__stat:last-child{border-bottom:0!important}
body.v4 .hp-statstrip__inner{grid-template-columns:1fr!important}
/* iOS form-input zoom guard: inputs need ≥16px font-size to prevent autozoom */
body.v4 input,
body.v4 textarea,
body.v4 select{font-size:16px!important}
/* Touch targets — at least 44×44 */
body.v4 .btn,
body.v4 .v4-btn{min-height:48px;padding:14px 22px}
body.v4 .nav__cta-mobile,
body.v4 .nav__cta{padding:12px 18px}
/* Address card */
body.v4 .evt-addr{padding:16px 18px}
body.v4 .evt-addr__value{font-size:15px}
/* Section eyebrow + rule */
body.v4 .evt-section__rule{gap:10px}
body.v4 .evt-section__num{min-width:38px;height:38px;font-size:11px;padding:0 10px}
body.v4 .evt-section__label{font-size:10.5px;letter-spacing:1.8px}
/* Sessions grid 1-col on small phones */
body.v4 .sess-pick{grid-template-columns:1fr}
/* Reppin map smaller */
body.v4 .reppin__map{max-width:80%;margin:0 auto;display:block}
/* Hide visual-decoration accents to keep things calm */
body.v4 .hp-hero__glow,
body.v4 .page-hero::after{display:none}
}
/* === Tiny phones (≤360px) === */
@media(max-width:360px){
body.v4{--v4-section-px: 14px}
body.v4 .nav__inner{padding:0 14px;gap:12px}
body.v4 .nav__logo img{height:32px}
body.v4 .marquee__track{font-size:11px;gap:18px}
}
/* === Print stylesheet — basic === */
@media print{
body.v4{background:#fff;color:#000}
body.v4 .nav,body.v4 .nav__links,body.v4 .prefooter,body.v4 .marquee{display:none}
body.v4 main{padding-top:0}
body.v4::before{display:none}
}
/* === Fix: services arsenal images on mobile (defensive) ===
Aspect-ratio + absolute-positioned img collapses on some mobile
browsers (iOS Safari especially) leaving the image card invisible.
On mobile, switch the image back to natural in-flow sizing so it
always paints, and put the number badge back over it. */
@media(max-width:900px){
body.v4 .arsenal__row{
display:flex!important;flex-direction:column;align-items:center;
gap:24px;
}
body.v4 .arsenal__row > *{width:100%;max-width:560px}
body.v4 .arsenal__row .arsenal__media{order:-1} /* image always on top */
body.v4 .arsenal__row--alt .arsenal__media{order:-1}
body.v4 .arsenal__media{
position:relative;
display:block!important;
width:100%!important;
max-width:560px;
aspect-ratio:auto!important;
min-height:220px;
margin:0 auto;
background:var(--v4-bg-2);
border-radius:var(--v4-r-lg);
overflow:hidden;
border:1px solid var(--v4-line-2);
}
body.v4 .arsenal__media img{
position:relative!important;
inset:auto!important;
display:block!important;
width:100%!important;
height:auto!important;
max-height:520px;
object-fit:cover;
visibility:visible!important;
opacity:1!important;
}
body.v4 .arsenal__num{
position:absolute;top:14px;left:14px;z-index:2;
font-size:42px;line-height:1;
}
}
/* === Fix: homepage hero slideshow on mobile — full-bleed, properly filled.
Default styling used object-fit:contain on a 16:10 container, which
letterboxed the portrait photos (2:3) into a tiny centered card.
On mobile we go edge-to-edge, taller aspect, and cover-fit. */
@media(max-width:720px){
body.v4 .hp-hero{padding-top:32px}
body.v4 .hp-hero__visual{
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
order:2!important; /* image goes BELOW the heading on mobile */
margin-top:32px;
margin-bottom:0;
}
body.v4 .hp-hero__text{order:1}
body.v4 .hp-hero__slideshow{
width:100%!important;
max-width:none!important;
aspect-ratio:4/5;
border-radius:0!important;
margin:0!important;
filter:none;
box-shadow:none;
animation:none;
}
body.v4 .hp-hero__slide{
object-fit:cover!important;
object-position:center center;
}
/* Cutout PNG is a brand illustration — keep it contained on a dark gradient
so it doesn't get cropped weirdly when it cycles in. */
body.v4 .hp-hero__slide[src*="trailer-cutout"]{
object-fit:contain!important;
padding:8% 6%;
background:radial-gradient(ellipse at center,rgba(34,61,128,.18),transparent 65%),
linear-gradient(180deg,#0A0E1A 0%,#06091A 100%);
}
/* Slide-indicator dots sit comfortably below */
body.v4 .hp-hero__dots{margin-top:14px}
}
/* ── 10c. HOMEPAGE — EVENT ALBUMS (.hp-albums) + lightbox ──────────── */
body.v4 .hp-albums{padding:var(--v4-section-py) var(--v4-section-px)}
body.v4 .hp-albums > .wrap{max-width:var(--v4-wrap-max);margin:0 auto;padding:0}
body.v4 .hp-albums__head{text-align:center;margin-bottom:48px}
body.v4 .hp-albums__head .eyebrow{margin-bottom:18px}
body.v4 .hp-albums__head .section-title{text-align:center;margin-bottom:0}
body.v4 .hp-albums__sub{
max-width:580px;margin:18px auto 0;text-align:center;
font-size:16px;color:var(--v4-mute);line-height:1.65;
}
body.v4 .hp-albums__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
body.v4 .hp-album{
position:relative;display:block;width:100%;text-align:left;cursor:pointer;
min-height:330px;border-radius:var(--v4-r);overflow:hidden;
border:1px solid var(--v4-line-2);background:var(--v4-bg-2) center/cover no-repeat;
box-shadow:var(--v4-shadow-sm);padding:0;font:inherit;color:inherit;
transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
body.v4 .hp-album:hover{transform:translateY(-4px);border-color:rgba(34,61,128,.6);box-shadow:var(--v4-shadow-lg)}
body.v4 .hp-album:focus-visible{outline:2px solid #5C82FF;outline-offset:2px}
body.v4 .hp-album__count{
position:absolute;top:14px;right:14px;z-index:2;
font-family:var(--v4-mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
padding:6px 11px;border-radius:999px;color:var(--v4-ink);
background:rgba(7,10,20,.72);border:1px solid rgba(255,255,255,.16);
}
body.v4 .hp-album__body{position:absolute;left:0;right:0;bottom:0;z-index:2;display:block;padding:24px 24px 22px}
body.v4 .hp-album__name{
display:block;font-family:var(--v4-display);font-weight:800;
font-size:23px;letter-spacing:.3px;text-transform:uppercase;color:var(--v4-ink);line-height:1.12;
}
body.v4 .hp-album__meta{
display:block;margin-top:7px;font-family:var(--v4-mono);font-size:10px;
letter-spacing:1.4px;text-transform:uppercase;color:var(--v4-mute);
}
body.v4 .hp-album__cta{
display:inline-flex;align-items:center;gap:7px;margin-top:14px;
font-family:var(--v4-mono);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#7f9bff;
transition:gap .25s ease;
}
body.v4 .hp-album:hover .hp-album__cta{gap:12px}
@media(max-width:1100px){body.v4 .hp-albums__grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:600px){
body.v4 .hp-albums__grid{grid-template-columns:1fr}
body.v4 .hp-album{min-height:260px}
body.v4 .hp-album__name{font-size:21px}
}
/* Album lightbox (full-screen, scoped to body so it overlays everything) */
body.hp-lb-open{overflow:hidden}
.hp-lb{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}
.hp-lb[hidden]{display:none}
.hp-lb__overlay{position:absolute;inset:0;background:rgba(4,6,12,.95)}
.hp-lb__panel{position:relative;z-index:1;display:flex;flex-direction:column;width:80vw;max-height:92vh}
.hp-lb__bar{display:flex;align-items:center;gap:16px;padding:2px 2px 14px}
.hp-lb__titlewrap{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.hp-lb__title{
font-family:var(--v4-display,sans-serif);font-weight:800;font-size:19px;letter-spacing:.4px;
text-transform:uppercase;color:#fff;line-height:1.15;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hp-lb__meta{font-family:var(--v4-mono,monospace);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hp-lb__counter{font-family:var(--v4-mono,monospace);font-size:12px;letter-spacing:1.5px;color:rgba(255,255,255,.6);white-space:nowrap}
.hp-lb__close{
width:42px;height:42px;flex:none;border-radius:50%;cursor:pointer;
border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;
font-size:26px;line-height:1;transition:background .15s;
}
.hp-lb__close:hover{background:rgba(255,255,255,.16)}
.hp-lb__stage{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:0}
.hp-lb__figure{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;min-height:0}
.hp-lb__figure img{max-width:100%;max-height:64vh;object-fit:contain;border-radius:8px;display:block;background:#070a14}
.hp-lb__cap{
margin-top:12px;font-family:var(--v4-mono,monospace);font-size:11px;letter-spacing:1px;
color:rgba(255,255,255,.6);text-align:center;max-width:680px;
}
.hp-lb__nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:52px;height:52px;border-radius:50%;cursor:pointer;
border:1px solid rgba(255,255,255,.2);background:rgba(7,10,20,.74);color:#fff;
font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;
transition:background .15s;
}
.hp-lb__nav:hover{background:rgba(92,130,255,.9)}
.hp-lb__nav--prev{left:-8px}
.hp-lb__nav--next{right:-8px}
.hp-lb__thumbs{display:flex;gap:8px;overflow-x:auto;padding:14px 2px 2px;scrollbar-width:thin}
.hp-lb__thumb{
flex:none;width:76px;height:54px;border-radius:6px;cursor:pointer;padding:0;
background:#070a14 center/cover no-repeat;border:2px solid transparent;opacity:.5;
transition:opacity .15s,border-color .15s;
}
.hp-lb__thumb:hover{opacity:.85}
.hp-lb__thumb.is-active{opacity:1;border-color:#5C82FF}
@media(max-width:680px){
.hp-lb__panel{width:94vw}
.hp-lb__figure img{max-height:56vh}
.hp-lb__nav{width:42px;height:42px;font-size:24px}
.hp-lb__nav--prev{left:0}
.hp-lb__nav--next{right:0}
.hp-lb__title{font-size:16px}
}
/* ── Earn Your Edge — full-bleed section + rotating background ─────── */
body.v4 .edge{background-color:#070a14;max-width:none;margin:0;border-radius:0}
body.v4 .edge__slideshow{position:absolute;inset:0;z-index:0}
body.v4 .edge__slide{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity 1s ease;
}
body.v4 .edge__slide.is-active{opacity:1}
body.v4 .edge__overlay{z-index:1}
body.v4 .edge .wrap{z-index:2}
@media(prefers-reduced-motion:reduce){body.v4 .edge__slide{transition:none}}
/* ── Choose Your Entry — white card labels (readable over photos) ──── */
body.v4 .service__num{color:#fff}
body.v4 .flow__card--alt::after{color:#fff;border-color:rgba(255,255,255,.55)}
/* ── SERVICES — Earn Your Edge Protocol (intro + station equipment) ── */
body.v4 .proto-intro{padding:0 var(--v4-section-px)}
body.v4 .proto-intro > .wrap{max-width:720px;margin:0 auto;text-align:center}
body.v4 .proto-intro__lead{
font-family:var(--v4-display);font-weight:900;text-transform:uppercase;
font-size:clamp(24px,3vw,38px);line-height:1;letter-spacing:-.01em;
color:var(--v4-ink);margin:0 0 16px;
}
body.v4 .proto-intro__body{
font-size:clamp(15px,1.4vw,18px);color:var(--v4-mute);line-height:1.7;margin:0;
}
body.v4 .proto-head{text-align:center;margin:0 0 90px}
body.v4 .proto-head .section-title{margin-bottom:16px}
body.v4 .proto-head__sub{
font-family:var(--v4-mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;
color:var(--v4-mute);margin:0;
}
body.v4 .arsenal__tools-label{
font-family:var(--v4-mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
color:var(--v4-mute);margin:0 0 12px;
}
body.v4 .arsenal__tools{
list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:10px;
}
body.v4 .arsenal__tools li{
font-family:var(--v4-mono);font-size:12.5px;letter-spacing:.4px;
color:var(--v4-ink-soft);
padding:9px 15px;border:1px solid var(--v4-line-2);border-radius:999px;
background:var(--v4-bg-2);
}
body.v4 .proto-cta{text-align:center;margin-top:90px}
/* Lift the station tagline off the dark navy so it stays readable */
body.v4 .arsenal__tag{color:#5C82FF}
/* Gallery masonry items are clickable buttons (open the lightbox) */
body.v4 .masonry__item{
display:block;width:100%;padding:0;margin-bottom:20px;
font:inherit;color:inherit;text-align:left;cursor:zoom-in;
-webkit-appearance:none;appearance:none;
}
@media(max-width:900px){body.v4 .masonry__item{margin-bottom:14px}}
/* Lightbox zoom controls (gallery) */
.hp-lb__stage{touch-action:none}
.hp-lb__figure{overflow:hidden}
.hp-lb__figure img{will-change:transform}
.hp-lb__zoom{display:flex;gap:8px;align-items:center}
.hp-lb__zbtn{
width:38px;height:38px;flex:none;border-radius:50%;cursor:pointer;
border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;
font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;
transition:background .15s;
}
.hp-lb__zbtn:hover{background:rgba(255,255,255,.16)}
/* End of style-v4.css ────────────────────────────────────────────── */
/* ── 10d. HOMEPAGE — WHERE WE'VE BEEN (.hp-stops) — past events (added 2026-05-20) ── */
body.v4 .hp-stops{padding:var(--v4-section-py) var(--v4-section-px)}
body.v4 .hp-stops > .wrap{max-width:var(--v4-wrap-max);margin:0 auto;padding:0}
body.v4 .hp-stops__head{text-align:center;margin-bottom:48px}
body.v4 .hp-stops__head .eyebrow{margin-bottom:18px}
body.v4 .hp-stops__head .section-title{text-align:center;margin-bottom:0}
body.v4 .hp-stops__sub{
max-width:620px;margin:18px auto 0;text-align:center;
font-size:16px;color:var(--v4-mute);line-height:1.65;
}
body.v4 .hp-stops__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
body.v4 .hp-stop{
display:flex;flex-direction:column;text-align:left;width:100%;padding:0;cursor:pointer;
font:inherit;color:inherit;border-radius:var(--v4-r);overflow:hidden;
border:1px solid var(--v4-line-2);background:var(--v4-bg-2);box-shadow:var(--v4-shadow-sm);
transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
body.v4 .hp-stop:hover{transform:translateY(-4px);border-color:rgba(34,61,128,.6);box-shadow:var(--v4-shadow-lg)}
body.v4 .hp-stop:focus-visible{outline:2px solid #5C82FF;outline-offset:2px}
body.v4 .hp-stop__media{
position:relative;display:block;aspect-ratio:4/3;
background:var(--v4-bg-3,#11151f) center/cover no-repeat;
}
body.v4 .hp-stop__media[data-empty]{background:linear-gradient(145deg,#161c2b,#0e1320)}
body.v4 .hp-stop__year,
body.v4 .hp-stop__count{
position:absolute;top:14px;z-index:2;
font-family:var(--v4-mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
padding:6px 11px;border-radius:999px;color:var(--v4-ink);
background:rgba(7,10,20,.72);border:1px solid rgba(255,255,255,.16);
}
body.v4 .hp-stop__year{left:14px}
body.v4 .hp-stop__count{right:14px}
body.v4 .hp-stop__body{display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px}
body.v4 .hp-stop__name{
font-family:var(--v4-display);font-weight:800;font-size:21px;
letter-spacing:.3px;text-transform:uppercase;color:var(--v4-ink);line-height:1.14;
}
body.v4 .hp-stop__meta{
font-family:var(--v4-mono);font-size:10px;
letter-spacing:1.4px;text-transform:uppercase;color:var(--v4-mute);
}
body.v4 .hp-stop__cta{
display:inline-flex;align-items:center;gap:7px;margin-top:6px;
font-family:var(--v4-mono);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#7f9bff;
transition:gap .25s ease;
}
body.v4 .hp-stop:hover .hp-stop__cta{gap:12px}
@media(max-width:1100px){body.v4 .hp-stops__grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:600px){body.v4 .hp-stops__grid{grid-template-columns:1fr}}
/* Past-event detail + album modal (.pe-modal) */
body.v4 .pe-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
body.v4 .pe-modal[hidden]{display:none}
body.v4 .pe-modal__overlay{position:absolute;inset:0;background:rgba(5,7,14,.86);backdrop-filter:blur(4px)}
body.v4 .pe-modal__panel{
position:relative;z-index:2;display:grid;grid-template-columns:1.35fr 1fr;
width:min(1040px,100%);max-height:88vh;overflow:hidden;
background:var(--v4-bg-2);border:1px solid var(--v4-line-2);
border-radius:var(--v4-r);box-shadow:var(--v4-shadow-lg);
}
body.v4 .pe-modal__close{
position:absolute;top:12px;right:12px;z-index:5;width:38px;height:38px;border-radius:50%;
display:flex;align-items:center;justify-content:center;cursor:pointer;
font-size:24px;line-height:1;color:#fff;
background:rgba(7,10,20,.72);border:1px solid rgba(255,255,255,.18);
}
body.v4 .pe-modal__close:hover{background:rgba(7,10,20,.95)}
body.v4 .pe-modal__media{display:flex;flex-direction:column;background:#070a14;min-width:0}
body.v4 .pe-modal__stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;background:#070a14}
body.v4 .pe-modal__stage img{max-width:100%;max-height:62vh;object-fit:contain;display:block}
body.v4 .pe-modal__nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:42px;height:42px;border-radius:50%;cursor:pointer;
display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;
background:rgba(7,10,20,.7);border:1px solid rgba(255,255,255,.18);
}
body.v4 .pe-modal__nav:hover{background:rgba(7,10,20,.95)}
body.v4 .pe-modal__nav--prev{left:12px}
body.v4 .pe-modal__nav--next{right:12px}
body.v4 .pe-modal__counter{
position:absolute;bottom:12px;right:12px;z-index:3;
font-family:var(--v4-mono);font-size:10px;letter-spacing:1.2px;color:#fff;
padding:5px 10px;border-radius:999px;background:rgba(7,10,20,.72);border:1px solid rgba(255,255,255,.16);
}
body.v4 .pe-modal__thumbs{
display:flex;gap:8px;padding:12px;overflow-x:auto;
background:#0a0e1a;border-top:1px solid var(--v4-line-2);
}
body.v4 .pe-modal__thumb{
flex:0 0 auto;width:64px;height:48px;border-radius:7px;cursor:pointer;padding:0;
background:#11151f center/cover no-repeat;border:2px solid transparent;opacity:.6;
transition:opacity .2s,border-color .2s;
}
body.v4 .pe-modal__thumb:hover{opacity:1}
body.v4 .pe-modal__thumb.is-active{opacity:1;border-color:#5C82FF}
body.v4 .pe-modal__info{padding:40px 34px;overflow-y:auto;display:flex;flex-direction:column}
body.v4 .pe-modal__eyebrow{
align-self:flex-start;font-family:var(--v4-mono);font-size:10px;letter-spacing:1.6px;
text-transform:uppercase;color:#7f9bff;padding:5px 11px;margin-bottom:14px;
border-radius:999px;border:1px solid rgba(124,139,255,.4);background:rgba(124,139,255,.1);
}
body.v4 .pe-modal__title{
font-family:var(--v4-display);font-weight:800;font-size:clamp(26px,3vw,38px);
letter-spacing:-.5px;text-transform:uppercase;color:var(--v4-ink);line-height:1.08;margin:0;
}
body.v4 .pe-modal__meta{
margin:12px 0 0;font-family:var(--v4-mono);font-size:11px;
letter-spacing:1.4px;text-transform:uppercase;color:var(--v4-mute);
}
body.v4 .pe-modal__desc{margin:18px 0 0;font-size:15px;line-height:1.7;color:var(--v4-mute);white-space:pre-line}
@media(max-width:760px){
body.v4 .pe-modal{padding:0}
body.v4 .pe-modal__panel{grid-template-columns:1fr;max-height:100vh;height:100vh;border-radius:0;border:0}
body.v4 .pe-modal__stage img{max-height:46vh}
body.v4 .pe-modal__info{padding:26px 22px 40px}
}
/* Hero video — replaces the photo slideshow. The box matches the video's 16:9
aspect ratio and uses object-fit:contain so the whole frame always shows,
uncropped, at any width. (added 2026-05-21) */
body.v4 .hp-hero__slideshow--video{aspect-ratio:16/9}
body.v4 .hp-hero__video{
position:absolute;inset:0;width:100%;height:100%;
object-fit:contain;object-position:center;display:block;background:#070a14;
}
/* ── ACTIVATIONS GALLERY — album grid + detail (added 2026-05-21) ──────────
Reuses .hp-albums / .hp-album (homepage event albums) and .masonry. */
body.v4 .gal-albums{padding-top:8px}
body.v4 .hp-album__sub{
display:block;margin-top:8px;
font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.78);
}
/* Coming-soon album — no photos uploaded yet (honest placeholder, never stock) */
body.v4 .hp-album--soon{
cursor:default;
background:linear-gradient(155deg,#0d1322 0%,#0a0e1a 60%,#070a14 100%);
border-style:dashed;border-color:rgba(255,255,255,.12);
}
body.v4 .hp-album--soon::before{
content:'';position:absolute;inset:0;z-index:0;
background:radial-gradient(circle at 50% 30%,rgba(34,61,128,.22),transparent 62%);
}
body.v4 .hp-album--soon:hover{
transform:none;box-shadow:var(--v4-shadow-sm);border-color:rgba(255,255,255,.12);
}
body.v4 .hp-album__count--soon{
background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:var(--v4-mute);
}
body.v4 .hp-album__cta--soon{color:var(--v4-mute)}
body.v4 .hp-album--soon .hp-album__sub{color:rgba(255,255,255,.5)}
/* Album-detail hero — back link + photo count */
body.v4 .gal-back{
display:inline-flex;align-items:center;gap:7px;margin-bottom:22px;
font-family:var(--v4-mono);font-size:11px;letter-spacing:1.7px;text-transform:uppercase;
color:var(--v4-mute);transition:color .2s ease,gap .2s ease;
}
body.v4 .gal-back:hover{color:var(--v4-ink);gap:11px}
body.v4 .gal-back span{font-size:17px;line-height:0}
body.v4 .gal-count{
margin-top:22px;display:inline-block;
font-family:var(--v4-mono);font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;
color:#7f9bff;padding:7px 14px;border-radius:999px;
background:rgba(34,61,128,.18);border:1px solid rgba(92,130,255,.28);
}
/* private-booking "WHAT YOU GET" heading — accent words use the heading font,
not the script/sticker treatment (added 2026-05-21) */
body.v4 .private__info h2 em{
font-family:var(--v4-display);
color:var(--v4-blue);
-webkit-text-stroke:0;
text-shadow:none;
paint-order:normal;
}
/* ─────────── Past-event recap video (homepage detail modal) — added 2026-05-21 ─────────── */
.pe-modal__video{
margin-top:18px;
border-radius:10px;
overflow:hidden;
background:#000;
}
.pe-modal__video video{
display:block;
width:100%;
height:auto;
aspect-ratio:16/9;
background:#000;
}