/* ══════════════════════════════════════════════════════════════ SCRAPPY 2.0 - shared site stylesheet (css/v2.css) Loaded after main.css on every page that uses . Brand 2.0 pack applied over the base site: · Orange #ED7D37 (was #F26A1F) · Champion Black #000 · Zen Sage #79937A · Concrete Grey #6D6E71 · Display = Antonio (multi-weight; matches the original scrappymma.com look) · Body = Montserrat Hero = authored directions 1d (desktop) / 2a (mobile) from Hero Ideas.dc.html. Body = calm, editorial-minimal (Sam Ovens / Skool) - square brand geometry, lots of air, one orange accent, sage as the quiet secondary. Everything is scoped under `body.v2` so it never touches the other pages. ══════════════════════════════════════════════════════════════ */ /* ── Brand 2.0 token overrides (cascade to every kept component) ── */ body.v2{ --orange:#ED7D37; --orange-hot:#F2A268; --orange-deep:#D9691F; --orange-glow:rgba(237,125,55,.35); --sage:#79937A; --sage-100:#E1E7E1; --sage-tint:#EDF1EC; --sage-700:#566B57; --grey:#6D6E71; --ink:#141414; --ink-2:#161618; --ink-3:#232326; --ink-4:#3A3B3E; --bone:#FAF9F5; --bone-2:#F1EFE8; --paper:#FFFFFF; --body:#34332F; --muted:#6D6E71; --faint:#9C988E; --line:rgba(20,20,18,.12); --line-2:rgba(20,20,18,.06); --f-display:'Antonio','Anton','Arial Narrow',sans-serif; --f-block:'Montserrat',system-ui,sans-serif; --f-body:'Montserrat',system-ui,sans-serif; --f-mono:'Montserrat',ui-monospace,monospace; --f-num:'Antonio','Anton','Arial Narrow',sans-serif; --ease-out:cubic-bezier(.22,1,.36,1); --pad:clamp(20px,4vw,64px); --section:clamp(76px,9vw,124px); --container:1200px; --bar-h:0px; /* grand-opening bar height, measured by v2.js when present */ background:var(--bone); color:var(--body); font-family:var(--f-body); font-size:16px; } body.v2 ::selection{background:var(--orange);color:#000} body.v2 .container{max-width:var(--container)} /* No horizontal scroll anywhere. The Instagram carousel positions its coverflow cards beyond the viewport, which otherwise widens the document (mobile could be pinch-zoomed way out). Clipping on too - body alone isn't enough. */ html{overflow-x:hidden;max-width:100%} body.v2{overflow-x:hidden;max-width:100%} body.v2 .ig-gallery{max-width:100%} /* Calmer reveal motion */ body.v2 .reveal{transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)} /* Shared eyebrow → sage, quiet */ body.v2 .s2-eye{ font-family:var(--f-body);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase; color:var(--sage);display:inline-flex;align-items:center;gap:12px;margin:0 0 18px; } body.v2 .s2-eye::before{content:"";width:26px;height:2px;background:var(--sage)} body.v2 .s2-eye.center{justify-content:center} /* Shared section heading (Anton, calm scale, near-black) */ body.v2 .s2-h{ font-family:var(--f-display);font-weight:700;text-transform:uppercase; font-size:clamp(34px,5vw,58px);line-height:.94;letter-spacing:.005em;color:var(--ink);margin:0; } body.v2 .s2-h em{font-style:normal;color:var(--orange)} body.v2 .s2-lead{font-size:18px;line-height:1.65;color:var(--muted);max-width:56ch;margin:18px 0 0} /* Shared buttons (Anton, square - brand CTA language) */ body.v2 .s2-btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--f-block);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:17px;line-height:1; padding:16px 30px;border:2px solid transparent;cursor:pointer;white-space:nowrap; transition:background .16s var(--ease-out),color .16s,border-color .16s,transform .16s; } body.v2 .s2-btn--primary{background:var(--orange);color:#000} body.v2 .s2-btn--primary:hover{background:var(--orange-deep);color:#000;transform:translateY(-2px)} body.v2 .s2-btn--out{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)} body.v2 .s2-btn--out:hover{border-color:#fff;background:rgba(255,255,255,.08)} body.v2 .s2-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)} body.v2 .s2-btn--ghost:hover{border-color:var(--ink);background:rgba(20,20,18,.04)} /* ══════════════════════════════════════════════════════════════ GRAND-OPENING BAR - slim sticky bar pinned above the nav ══════════════════════════════════════════════════════════════ */ body.v2 .announce-bar{ position:fixed;top:0;left:0;right:0;z-index:60;background:var(--orange);color:#000; padding:9px 16px;border-bottom:1px solid rgba(0,0,0,.15); } body.v2 .announce-inner{ display:flex;align-items:center;justify-content:center;gap:8px 16px;flex-wrap:wrap;text-align:center; max-width:var(--container);margin:0 auto; font-family:var(--f-body);font-weight:600;font-size:13px;line-height:1.35;color:rgba(0,0,0,.85); } body.v2 .announce-inner strong{font-weight:800;color:#000} body.v2 .announce-cta{ font-family:var(--f-body);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:#000;text-decoration:underline;text-underline-offset:3px;white-space:nowrap; } body.v2 .announce-cta:hover{color:rgba(0,0,0,.7)} @media (max-width:640px){body.v2 .announce-inner{font-size:12px;gap:4px 12px}} /* ══════════════════════════════════════════════════════════════ NAV - kept white-on-transparent over the dark hero, solid on scroll. Only the small label fonts need remapping (Archivo Black no longer loaded). ══════════════════════════════════════════════════════════════ */ body.v2 .nav{top:var(--bar-h)} body.v2 .mobile-menu{top:calc(var(--nav-h) + var(--bar-h))} body.v2 .nav-logo{font-family:var(--f-block);font-weight:800;letter-spacing:.01em} body.v2 .nav-cta{font-family:var(--f-block);font-weight:700;letter-spacing:.04em;border-radius:0} body.v2 .nav-dd-panel a{font-family:var(--f-body);font-weight:700;letter-spacing:.06em} body.v2 .mobile-menu a{font-family:var(--f-block);font-weight:800} body.v2 .nav.scrolled{background:rgba(10,10,10,.96)} /* ══════════════════════════════════════════════════════════════ HERO - direction 1d (desktop) / 2a (mobile) ══════════════════════════════════════════════════════════════ */ body.v2 .s2-hero{ position:relative;overflow:hidden;background:#000;color:#fff;isolation:isolate; } body.v2 .s2-hero-bg{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0; } body.v2 .s2-hero-scrim{ position:absolute;inset:0;z-index:1; background:linear-gradient(0deg,rgba(0,0,0,.92) 10%,rgba(0,0,0,.58) 50%,rgba(0,0,0,.58)); } body.v2 .s2-hero-wrap{ position:relative;z-index:2;max-width:var(--container);margin:0 auto; min-height:min(88vh,720px); padding:calc(var(--nav-h) + var(--bar-h) + 40px) var(--pad) 52px; display:flex;flex-direction:column;justify-content:flex-end; } body.v2 .s2-hero-eye{ position:absolute;left:var(--pad);top:calc(var(--nav-h) + var(--bar-h) + 22px);margin:0; font-family:var(--f-body);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange); } body.v2 .s2-hero-copy{max-width:820px;margin:0 auto;text-align:center} body.v2 .s2-hero-title{ font-family:var(--f-display);font-weight:700;text-transform:uppercase; font-size:clamp(56px,9vw,104px);line-height:1.04;letter-spacing:.015em;color:#fff;margin:0; -webkit-text-stroke:.016em currentColor;paint-order:stroke fill; } body.v2 .s2-hero-title span{color:var(--orange)} body.v2 .s2-hero-sub{ font-family:var(--f-body);font-weight:500;font-size:clamp(14px,1.5vw,17px);line-height:1.55; color:#D9DADC;max-width:600px;margin:22px auto 0; } body.v2 .s2-hero-cta{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap;justify-content:center} /* Champion proof card - clickable (opens lightbox) */ body.v2 .s2-champ{ position:absolute;right:var(--pad);top:calc(var(--nav-h) + var(--bar-h) + 20px); width:236px;background:#000;border:2px solid var(--orange); box-shadow:0 20px 50px rgba(0,0,0,.6); padding:0;text-align:left;color:#fff;cursor:pointer;display:block; transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s; } body.v2 .s2-champ:hover{transform:translateY(-5px);box-shadow:0 28px 60px rgba(0,0,0,.7);border-color:var(--orange-hot)} body.v2 .s2-champ:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(237,125,55,.5),0 20px 50px rgba(0,0,0,.6)} body.v2 .s2-champ-media{position:relative;display:block;overflow:hidden} body.v2 .s2-champ-media img{width:100%;height:290px;object-fit:cover;object-position:center 6%;display:block;transition:transform .5s var(--ease-out)} body.v2 .s2-champ:hover .s2-champ-media img{transform:scale(1.05)} /* the "clickable" cue - expand glyph, top-right of the photo */ body.v2 .s2-champ-cue{ position:absolute;top:10px;right:10px;width:30px;height:30px; display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.35);color:#fff; backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:.2s var(--ease-out); } body.v2 .s2-champ-cue svg{width:14px;height:14px;display:block} body.v2 .s2-champ:hover .s2-champ-cue{background:var(--orange);border-color:var(--orange);color:#000} body.v2 .s2-champ-meta{display:block;padding:13px 15px 14px} body.v2 .s2-champ-k{font-family:var(--f-body);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)} body.v2 .s2-champ-v{font-family:var(--f-block);font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:.02em;color:#fff;line-height:1.1;margin-top:5px;display:block} body.v2 .s2-champ-more{ display:flex;align-items:center;gap:6px;margin-top:10px; font-family:var(--f-body);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#D9DADC; } body.v2 .s2-champ-more i{font-style:normal;color:var(--orange);transition:transform .2s var(--ease-out)} body.v2 .s2-champ:hover .s2-champ-more{color:#fff} body.v2 .s2-champ:hover .s2-champ-more i{transform:translateX(4px)} /* 1d proportions on wide screens */ @media (min-width:900px){ body.v2 .s2-hero-title{font-size:clamp(64px,6.4vw,84px)} } /* Ultra-wide: give the photo more height and lift the focal point so the frame doesn't read as a thin cropped strip on 21:9 / 32:9 monitors. */ @media (min-width:1600px){ body.v2 .s2-hero-wrap{min-height:min(82vh,860px)} body.v2 .s2-hero-bg{object-position:center 38%} } @media (min-width:2100px){ body.v2 .s2-hero-bg{object-position:center 40%;transform:scale(1.08);transform-origin:center 40%} } /* 2a - mobile variation (champion card removed → shown as a strip below) */ @media (max-width:640px){ body.v2 .s2-hero-wrap{min-height:min(84vh,700px);padding-bottom:32px} body.v2 .s2-hero-eye{font-size:11px;letter-spacing:.2em} body.v2 .s2-hero-scrim{background:linear-gradient(0deg,rgba(0,0,0,.94) 22%,rgba(0,0,0,.4) 54%,rgba(0,0,0,.55))} body.v2 .s2-hero-title{font-size:clamp(40px,12vw,50px)} body.v2 .s2-hero-sub{font-size:14px} body.v2 .s2-hero-cta{flex-direction:column;gap:11px} body.v2 .s2-hero-cta .s2-btn{width:100%;font-size:18px;padding:15px} body.v2 .s2-champ{display:none} } /* Champion proof strip - mobile-only tappable entry to the lightbox */ body.v2 .s2-champ-strip{display:none} @media (max-width:640px){ body.v2 .s2-champ-strip{ display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer; background:var(--ink);color:#fff;border:0;border-top:2px solid var(--orange);padding:12px 16px; } body.v2 .s2-champ-strip img{width:46px;height:46px;flex:none;object-fit:cover;object-position:center 8%;border:1px solid var(--orange)} body.v2 .s2-champ-strip-txt{display:flex;flex-direction:column;flex:1;line-height:1.15} body.v2 .s2-champ-strip-k{font-family:var(--f-body);font-weight:700;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)} body.v2 .s2-champ-strip-v{font-family:var(--f-block);font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.03em;margin-top:2px} body.v2 .s2-champ-strip-arr{color:var(--orange);font-size:20px;flex:none} } /* ══════════════════════════════════════════════════════════════ REASSURANCE STRIP (slim, calming) ══════════════════════════════════════════════════════════════ */ body.v2 .s2-reassure{background:var(--paper);border-bottom:1px solid var(--line)} body.v2 .s2-reassure-inner{ max-width:var(--container);margin:0 auto;padding:18px var(--pad); display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px; font-family:var(--f-body);font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--muted);text-align:center; } body.v2 .s2-reassure-inner span{display:inline-flex;align-items:center;gap:9px} body.v2 .s2-reassure-inner span::before{content:"";width:6px;height:6px;background:var(--sage);border-radius:0;transform:rotate(45deg);flex:none} /* ══════════════════════════════════════════════════════════════ SECTION SHELL ══════════════════════════════════════════════════════════════ */ body.v2 .s2-sec{padding:var(--section) 0;background:var(--bone)} body.v2 .s2-sec--paper{background:var(--paper)} body.v2 .s2-sec--sage{background:var(--sage-tint)} body.v2 .s2-sec-head{max-width:640px;margin:0 0 clamp(40px,5vw,64px)} body.v2 .s2-sec-head.center{margin-left:auto;margin-right:auto;text-align:center} /* ── WHY - three reasons ── */ body.v2 .s2-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} body.v2 .s2-card{ background:var(--paper);border:1px solid var(--line);padding:0;overflow:hidden; display:flex;flex-direction:column;transition:border-color .25s var(--ease-out),transform .25s var(--ease-out),box-shadow .25s var(--ease-out); } body.v2 .s2-card:hover{border-color:rgba(20,20,18,.2);transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(20,20,18,.4)} body.v2 .s2-card-media{aspect-ratio:1/1;overflow:hidden;background:var(--ink-2)} body.v2 .s2-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)} body.v2 .s2-card:hover .s2-card-media img{transform:scale(1.04)} body.v2 .s2-card-body{padding:30px;display:flex;flex-direction:column;flex:1} body.v2 .s2-card-ico{width:44px;height:44px;color:var(--sage);margin-bottom:22px} body.v2 .s2-card-ico svg{width:44px;height:44px;display:block} body.v2 .s2-card-k{font-family:var(--f-body);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin-bottom:10px} body.v2 .s2-card-h{font-family:var(--f-block);font-weight:800;text-transform:uppercase;font-size:26px;line-height:1.2;letter-spacing:.005em;color:var(--ink);margin:0 0 18px} body.v2 .s2-card-h em{font-style:normal;color:var(--orange)} body.v2 .s2-card-more{ margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px; font-family:var(--f-body);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase; color:var(--ink);background:transparent;border:1.5px solid var(--line);padding:12px 20px;cursor:pointer; transition:border-color .2s var(--ease-out),color .2s var(--ease-out); } body.v2 .s2-card-more::after{content:"→";color:var(--orange);transition:transform .2s var(--ease-out)} body.v2 .s2-card-more:hover{border-color:var(--orange);color:var(--orange-deep)} body.v2 .s2-card-more:hover::after{transform:translateX(3px)} body.v2 .s2-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:12px} body.v2 .s2-list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--body)} body.v2 .s2-list li svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--sage)} @media (max-width:860px){body.v2 .s2-why-grid{grid-template-columns:1fr;gap:16px}} /* ── TIMETABLE ── */ body.v2 .s2-tt-legend{display:flex;gap:10px;align-items:center;margin-bottom:18px;font-family:var(--f-body);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} body.v2 .s2-tt-legend .sw{width:12px;height:12px;background:var(--orange);display:inline-block} /* Card-per-day grid - flows 6 → 3 → 2 across so mobile scrolls vertically (LESHGO-style) instead of a horizontal scroll. */ body.v2 .s2-tt-wrap{background:transparent} body.v2 .s2-tt{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} body.v2 .s2-tt-col{border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column} body.v2 .s2-tt-day{font-family:var(--f-body);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);padding:14px;border-bottom:1px solid var(--line);background:var(--bone-2)} body.v2 .s2-slot{padding:14px;border-bottom:1px solid var(--line);border-left:3px solid var(--orange);display:flex;flex-direction:column;gap:3px;min-height:78px} body.v2 .s2-slot:last-child{border-bottom:none;flex:1} body.v2 .s2-slot-t{font-family:var(--f-body);font-weight:700;font-size:12px;letter-spacing:.02em;color:var(--orange-deep)} body.v2 .s2-slot-n{font-family:var(--f-body);font-weight:700;font-size:14px;color:var(--ink);line-height:1.2} body.v2 .s2-slot-tag{font-family:var(--f-body);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} body.v2 .s2-tt-note{margin-top:18px;font-family:var(--f-body);font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--muted)} @media (max-width:1080px){body.v2 .s2-tt{grid-template-columns:repeat(3,1fr)}} @media (max-width:720px){body.v2 .s2-tt{grid-template-columns:repeat(2,1fr);gap:10px}} @media (max-width:360px){body.v2 .s2-tt{grid-template-columns:1fr}} /* ── GALLERY ── */ body.v2 .s2-gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:14px} body.v2 .s2-gal a{position:relative;overflow:hidden;display:block;background:var(--ink-2)} body.v2 .s2-gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)} body.v2 .s2-gal a:hover img{transform:scale(1.05)} body.v2 .s2-gal .tall{grid-row:span 2} body.v2 .s2-gal .wide{grid-column:span 2} @media (max-width:860px){body.v2 .s2-gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}} @media (max-width:520px){body.v2 .s2-gal{grid-template-columns:1fr;grid-auto-rows:230px}body.v2 .s2-gal .tall,body.v2 .s2-gal .wide{grid-row:auto;grid-column:auto}} /* ── PRICING (one clear card) ── */ body.v2 .s2-price{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;max-width:1040px;margin:0 auto;align-items:start} body.v2 .s2-price-card{background:var(--paper);border:2px solid var(--ink);padding:clamp(28px,3.5vw,44px);position:relative} body.v2 .s2-price-flag{position:absolute;top:0;right:0;background:var(--orange);color:#000;font-family:var(--f-body);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:7px 14px} body.v2 .s2-price-tier{font-family:var(--f-body);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin-bottom:16px} body.v2 .s2-price-amount{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} body.v2 .s2-price-was{font-family:var(--f-block);font-weight:800;font-size:34px;color:var(--faint);text-decoration:line-through;text-decoration-color:var(--orange)} body.v2 .s2-price-now{font-family:var(--f-block);font-weight:800;font-size:clamp(60px,8vw,92px);line-height:.85;color:var(--ink)} body.v2 .s2-price-unit{font-family:var(--f-body);font-weight:600;font-size:20px;color:var(--muted)} body.v2 .s2-price-bill{font-family:var(--f-body);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:8px} body.v2 .s2-spots{margin:24px 0;padding:16px 18px;background:var(--bone-2);border-left:3px solid var(--orange)} body.v2 .s2-spots-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px} body.v2 .s2-spots-lbl{display:flex;align-items:center;gap:9px;font-family:var(--f-body);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)} body.v2 .s2-spots-dot{width:7px;height:7px;background:var(--orange);border-radius:50%;box-shadow:0 0 0 4px rgba(237,125,55,.18);animation:s2pulse 2s ease-in-out infinite} @keyframes s2pulse{0%,100%{box-shadow:0 0 0 4px rgba(237,125,55,.18)}50%{box-shadow:0 0 0 7px rgba(237,125,55,.04)}} body.v2 .s2-spots-count{font-family:var(--f-block);font-weight:800;font-size:20px;color:var(--ink)} body.v2 .s2-spots-count b{color:var(--orange);font-weight:400} body.v2 .s2-spots-bar{height:6px;background:rgba(20,20,18,.1);overflow:hidden} body.v2 .s2-spots-fill{display:block;height:100%;background:var(--orange)} body.v2 .s2-price-card .s2-btn{width:100%;margin-top:8px} body.v2 .s2-incl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} body.v2 .s2-incl-h{font-family:var(--f-body);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin-bottom:20px} body.v2 .s2-incl li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--body)} body.v2 .s2-incl li svg{width:19px;height:19px;flex:none;margin-top:1px;color:var(--sage)} body.v2 .s2-price-foot{text-align:center;margin-top:34px;font-family:var(--f-body);font-weight:600;font-size:13px;letter-spacing:.03em;color:var(--muted)} @media (max-width:820px){body.v2 .s2-price{grid-template-columns:1fr;gap:16px}} /* Alternate options - each with its own Join button */ body.v2 .s2-price-alts{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1040px;margin:16px auto 0} body.v2 .s2-alt-card{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--paper);border:1px solid var(--line);padding:22px 24px} body.v2 .s2-alt-info{display:flex;flex-direction:column;gap:3px} body.v2 .s2-alt-tier{font-family:var(--f-body);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage)} body.v2 .s2-alt-price{font-family:var(--f-block);font-weight:800;font-size:36px;line-height:1;color:var(--ink)} body.v2 .s2-alt-price .u{font-family:var(--f-body);font-weight:600;font-size:14px;color:var(--muted);margin-left:3px} body.v2 .s2-alt-bill{font-family:var(--f-body);font-weight:600;font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)} body.v2 .s2-alt-card .s2-btn{flex:none;font-size:15px;padding:13px 24px} @media (max-width:820px){body.v2 .s2-price-alts{grid-template-columns:1fr}} /* Discount disclosure - tap on touch, hover on desktop */ body.v2 .s2-disc{max-width:1040px;margin:20px auto 0;text-align:center} body.v2 .s2-disc-t{background:none;border:0;padding:6px 2px;cursor:pointer;font-family:var(--f-body);font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--sage);border-bottom:1px dashed var(--sage);transition:color .3s var(--ease-out),border-color .3s var(--ease-out)} body.v2 .s2-disc-t::after{content:"";display:inline-block;width:5px;height:5px;margin-left:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease-out)} body.v2 .s2-disc-p{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out),margin-top .4s var(--ease-out)} body.v2 .s2-disc-p p{max-width:560px;margin:0 auto;padding:16px 20px;background:var(--bone-2);border-left:3px solid var(--orange);font-family:var(--f-body);font-size:14px;line-height:1.55;color:var(--body);text-align:left} body.v2 .s2-disc-p a{color:var(--orange-deep);text-decoration:underline;text-underline-offset:2px} body.v2 .s2-disc.open .s2-disc-t{color:var(--orange-deep);border-bottom-color:var(--orange-deep)} body.v2 .s2-disc.open .s2-disc-t::after{transform:translateY(1px) rotate(-135deg)} body.v2 .s2-disc.open .s2-disc-p{max-height:260px;margin-top:14px} @media (hover:hover) and (pointer:fine){body.v2 .s2-disc:hover .s2-disc-t{color:var(--orange-deep);border-bottom-color:var(--orange-deep)}body.v2 .s2-disc:hover .s2-disc-t::after{transform:translateY(1px) rotate(-135deg)}body.v2 .s2-disc:hover .s2-disc-p{max-height:260px;margin-top:14px}} /* Classes page: each discipline card ends with a "Pick your gym" button. Pin it to the foot of the card so the buttons line up across the row, with a guaranteed gap from the last paragraph regardless of how much copy sits above it. */ body.v2 .s2-card-body > .s2-btn{align-self:flex-start;margin-top:auto} body.v2 .s2-card-body > p:last-of-type{margin-bottom:26px} /* Chain home page location grid. main.css still sets 4 columns from when there were four gyms, which left the three remaining cards hanging off-centre with an empty fourth column. Three across, then stacked and centred on small screens. */ body.v2 .loc-grid{grid-template-columns:repeat(3,1fr)} @media (max-width:1100px){body.v2 .loc-grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:900px){body.v2 .loc-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}} /* ── STEPS (how it works) ── */ body.v2 .s2-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} body.v2 .s2-step{padding-top:22px;border-top:2px solid var(--ink)} body.v2 .s2-step-n{font-family:var(--f-block);font-weight:700;font-size:13px;color:var(--orange);letter-spacing:.12em;text-transform:uppercase} body.v2 .s2-step-h{font-family:var(--f-block);font-weight:800;text-transform:uppercase;font-size:21px;line-height:1.2;letter-spacing:.005em;color:var(--ink);margin:12px 0 10px} body.v2 .s2-step-h em{font-style:normal;color:var(--orange)} body.v2 .s2-step p{font-size:15px;line-height:1.55;color:var(--muted);margin:0} @media (max-width:820px){body.v2 .s2-steps{grid-template-columns:1fr;gap:14px}} /* ══════════════════════════════════════════════════════════════ BOOKING FORM - kept DOM, restyled light & calm ══════════════════════════════════════════════════════════════ */ body.v2 .book-section{background:var(--bone);color:var(--ink);padding:var(--section) 0} body.v2 .book-section::before{content:none} /* kill giant SCRAPPY watermark */ body.v2 .book-inner{max-width:760px} body.v2 .book-head{text-align:center;margin-bottom:40px} body.v2 .book-head .eyebrow{color:var(--sage);justify-content:center} body.v2 .book-head .eyebrow::before{background:var(--sage)} body.v2 .book-head h2{font-family:var(--f-display);font-weight:700;font-size:clamp(40px,6vw,66px);line-height:.94;color:var(--ink)} body.v2 .book-head h2 em{font-style:normal;color:var(--orange)} body.v2 .book-card{background:var(--paper);border:1px solid var(--line);box-shadow:0 30px 70px -50px rgba(20,20,18,.5);padding:clamp(24px,4vw,44px)} body.v2 .book-label{font-family:var(--f-body);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} body.v2 .book-input,body.v2 .book-select{ background:var(--bone);border:1px solid var(--line);color:var(--ink);border-radius:2px;font-family:var(--f-body); } body.v2 .book-input::placeholder{color:var(--faint)} body.v2 .book-input:focus,body.v2 .book-select:focus{border-color:var(--orange);background:var(--paper);box-shadow:0 0 0 3px rgba(237,125,55,.15)} /* interest pills + day/seg/time chips → light */ body.v2 .interest-pill{background:var(--bone);border:1px solid var(--line);color:var(--body);border-radius:2px} body.v2 .interest-pill:hover{border-color:var(--orange);color:var(--ink)} body.v2 .interest-pill.selected{background:var(--orange);border-color:var(--orange);color:#000} body.v2 .book-when-divider{border-top:1px solid var(--line)} body.v2 .book-when-divider .eyebrow{color:var(--sage)} body.v2 .book-when-divider .eyebrow::before{background:var(--sage)} body.v2 .book-day{background:var(--bone);border:1px solid var(--line);border-radius:2px} body.v2 .book-day:hover{border-color:var(--orange)} body.v2 .book-day.active{background:var(--orange);border-color:var(--orange)} body.v2 .book-day-lbl{font-family:var(--f-body);font-weight:700;color:var(--muted)} body.v2 .book-day.active .book-day-lbl{color:rgba(0,0,0,.65)} body.v2 .book-day-date{font-family:var(--f-display);font-weight:600;color:var(--ink)} body.v2 .book-day.active .book-day-date{color:#000} body.v2 .book-seg{background:var(--bone);border:1px solid var(--line)} body.v2 .book-seg button{font-family:var(--f-body);font-weight:700;color:var(--muted)} body.v2 .book-seg button.active{background:var(--orange);color:#000} body.v2 .book-time{background:var(--bone);border:1px solid var(--line);color:var(--ink);border-radius:2px;font-family:var(--f-body);font-weight:600} body.v2 .book-time:hover{border-color:var(--orange)} body.v2 .book-time.active{background:var(--orange);border-color:var(--orange);color:#000} /* JS injects fallback

with hard-coded white text - force legible on light */ body.v2 #book-days p,body.v2 #book-times p{color:var(--muted) !important} /* buttons inside the form */ body.v2 .btn{font-family:var(--f-block);font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:0} body.v2 .btn-primary{background:var(--orange);color:#000;border-color:var(--orange)} body.v2 .btn-primary:hover{background:var(--orange-deep);border-color:var(--orange-deep);color:#000} /* phone widget on light */ body.v2 .form-field-phone .iti--separate-dial-code .iti__selected-flag{background:rgba(20,20,18,.04);border-right:1px solid var(--line)} body.v2 .form-field-phone .iti--separate-dial-code .iti__selected-dial-code{color:var(--ink)} body.v2 .book-toast{background:var(--ink);color:#fff;border-left-color:var(--orange)} /* ══════════════════════════════════════════════════════════════ FAQ - kept DOM, restyled light, calmer (sentence-case, Montserrat) ══════════════════════════════════════════════════════════════ */ body.v2 .faq{background:var(--paper)} body.v2 .faq-inner{grid-template-columns:1fr 1.35fr;gap:60px} body.v2 .faq-left .eyebrow{color:var(--sage)} body.v2 .faq-left .eyebrow::before{background:var(--sage)} body.v2 .faq-left h2{font-family:var(--f-display);font-weight:700;color:var(--ink)} body.v2 .faq-group-h{font-family:var(--f-block);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.1em;color:var(--orange);margin:30px 0 12px;padding-top:10px;border-top:1px solid var(--line)} body.v2 .faq-left h2 em{font-style:normal;color:var(--orange)} body.v2 .faq-item{border-bottom:1px solid var(--line);padding:20px 0} body.v2 .faq-q{font-family:var(--f-body);font-weight:700;font-size:17px;line-height:1.35;text-transform:none;letter-spacing:0;color:var(--ink);gap:20px} body.v2 .faq-plus{border:1px solid var(--line);color:var(--ink);border-radius:2px} body.v2 .faq-item.open .faq-plus{background:var(--orange);border-color:var(--orange);color:#000} body.v2 .faq-a p{color:var(--body);font-size:15px} @media (max-width:900px){body.v2 .faq-inner{grid-template-columns:1fr;gap:36px}} /* ══════════════════════════════════════════════════════════════ FOOTER - grounded Champion-Black close, cleaned up ══════════════════════════════════════════════════════════════ */ body.v2 .footer{background:#000} body.v2 .footer-col h4{font-family:var(--f-body);font-weight:700;letter-spacing:.12em} body.v2 .footer-brand p{color:rgba(255,255,255,.6)} /* ══════════════════════════════════════════════════════════════ STICKY MOBILE CTA - kept, light & calm ══════════════════════════════════════════════════════════════ */ /* Hidden until the user scrolls past the hero (declutters first paint, esp. mobile) */ body.v2 .mobile-cta{background:var(--paper);border-top:1px solid var(--line);transform:translateY(115%);transition:transform .32s var(--ease-out)} body.v2 .mobile-cta.s2-revealed{transform:none} body.v2 .mobile-cta .btn{font-family:var(--f-block);font-weight:700} body.v2 .mobile-cta .call{background:var(--ink);color:#fff;border-color:var(--ink)} body.v2 .mobile-cta .call:hover{background:var(--orange);border-color:var(--orange);color:#000} /* ══════════════════════════════════════════════════════════════ GOOGLE REVIEWS - badge kept, softened to brand, revealed on scroll ══════════════════════════════════════════════════════════════ */ body.v2 .reviews-badge{ background:var(--ink);border-color:var(--orange); opacity:0;visibility:hidden;transform:translateY(14px); transition:opacity .3s var(--ease-out),visibility .3s,transform .3s var(--ease-out),background .25s,color .25s; } body.v2 .reviews-badge.s2-revealed{opacity:1;visibility:visible;transform:none} body.v2 .reviews-badge-text{font-family:var(--f-body);font-weight:600} body.v2 .reviews-drawer-title{font-family:var(--f-block);font-weight:800} /* ══════════════════════════════════════════════════════════════ CHAMPION LIGHTBOX - reproduces the "Proven to the world" reference card ══════════════════════════════════════════════════════════════ */ body.v2 .s2-lb{ position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px; opacity:0;visibility:hidden;transition:opacity .28s var(--ease-out),visibility .28s; } body.v2 .s2-lb.open{opacity:1;visibility:visible} body.v2 .s2-lb-scrim{position:absolute;inset:0;background:rgba(10,10,10,.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);cursor:pointer} body.v2 .s2-lb-card{ position:relative;z-index:1;width:min(960px,100%);max-height:88vh;overflow:auto; background:var(--bone);color:var(--ink);border:1px solid var(--line); display:grid;grid-template-columns:0.92fr 1.08fr; box-shadow:0 50px 120px -30px rgba(0,0,0,.7); transform:translateY(14px) scale(.99);transition:transform .3s var(--ease-out); } body.v2 .s2-lb.open .s2-lb-card{transform:none} body.v2 .s2-lb-x{ position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px; background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:15px; display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s var(--ease-out); } body.v2 .s2-lb-x:hover{background:var(--orange);border-color:var(--orange);color:#000} body.v2 .s2-lb-media{position:relative;overflow:hidden;min-height:320px;border-right:3px solid var(--orange)} body.v2 .s2-lb-media img{width:100%;height:100%;object-fit:cover;object-position:center 8%;display:block} body.v2 .s2-lb-chip{ position:absolute;left:0;padding:8px 13px;background:rgba(0,0,0,.66);color:#fff;border-left:3px solid var(--orange); font-family:var(--f-body);font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase; } body.v2 .s2-lb-chip b{color:var(--orange);font-weight:700} body.v2 .s2-lb-chip--top{top:18px} body.v2 .s2-lb-chip--bot{bottom:18px} body.v2 .s2-lb-body{padding:clamp(26px,3.4vw,42px)} /* Lightboxes must never scroll sideways: clip the card and let grid/flex children shrink (min-width:0 defeats their intrinsic-width blowouts). */ body.v2 .s2-lb-card{overflow-x:hidden;max-width:100%} body.v2 .s2-lb-card *{min-width:0} body.v2 .s2-lb-body img,body.v2 .s2-lb-media img{max-width:100%} /* The CTA was the real overflow culprit: .s2-btn is nowrap by design, and long labels outgrow the card on small screens. In lightboxes, wrap + full width. */ body.v2 .s2-lb-body .s2-btn{white-space:normal;width:100%;max-width:100%;text-align:center} body.v2 .s2-lb-eye{font-family:var(--f-body);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin:0 0 16px;display:inline-flex;align-items:center;gap:11px} body.v2 .s2-lb-eye::before{content:"";width:26px;height:2px;background:var(--orange)} body.v2 .s2-lb-title{font-family:var(--f-block);font-weight:800;text-transform:uppercase;font-size:clamp(30px,4vw,44px);line-height:1.05;letter-spacing:0;color:var(--ink);margin:0 0 18px} body.v2 .s2-lb-title span{color:var(--orange);font-style:italic} body.v2 .s2-lb-name{font-family:var(--f-body);font-weight:800;font-size:19px;letter-spacing:.02em;color:var(--orange);margin:20px 0 3px} body.v2 .s2-lb-role{font-family:var(--f-body);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 20px} body.v2 .s2-lb-copy p{font-size:14.5px;line-height:1.7;color:var(--body);margin:0 0 14px} body.v2 .s2-lb-body .s2-btn{margin-top:8px} body.v2.s2-lb-open{overflow:hidden} @media (max-width:720px){ body.v2 .s2-lb-card{grid-template-columns:1fr;max-height:90vh} body.v2 .s2-lb-media{min-height:230px;max-height:38vh;border-right:0;border-bottom:3px solid var(--orange)} } /* ══════════════════════════════════════════════════════════════ SHARED COMPONENTS - location pages (Willetton/Wangara) + home ══════════════════════════════════════════════════════════════ */ /* Slim hero meta row (address · phone · hours) under a location hero */ body.v2 .s2-hero-meta{background:var(--ink);color:rgba(255,255,255,.85);border-top:2px solid var(--orange)} body.v2 .s2-hero-meta-inner{max-width:var(--container);margin:0 auto;padding:16px var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:14px 24px;justify-items:center;text-align:center} @media (max-width:640px){body.v2 .s2-hero-meta-inner{grid-template-columns:1fr;justify-items:start;text-align:left}} body.v2 .s2-hero-meta .k{font-family:var(--f-body);font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:3px} body.v2 .s2-hero-meta .v{font-family:var(--f-body);font-weight:500;font-size:14px;color:#fff} body.v2 .s2-hero-meta .v a{color:#fff} body.v2 .s2-hero-meta .v a:hover{color:var(--orange)} /* Two-step booking form indicators (booking.js pages) */ body.v2 .book-steps{gap:8px;margin-bottom:28px} body.v2 .book-step{background:var(--bone-2);color:var(--muted);font-family:var(--f-body);font-weight:700;font-size:11px;letter-spacing:.1em;border:1px solid var(--line)} body.v2 .book-step.active{background:var(--orange);color:#000;border-color:var(--orange)} body.v2 .book-step.done{background:var(--sage-tint);color:var(--sage-700);border-color:transparent} body.v2 .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} body.v2 .btn-ghost:hover{background:rgba(20,20,18,.05);color:var(--ink);border-color:var(--ink)} /* Timetable category colours (beginners / advanced / kids). NOTE: the bare `.kids` class collides with main.css's `.kids` SECTION rule (dark bg / white text / big padding). Higher-specificity resets below undo it. */ /* Timetable category colours - three clearly distinct hues so they can't be confused: beginners ORANGE, advanced BLUE, kids GREEN. Each = coloured left rule + tinted background + coloured time. */ body.v2 .s2-slot{border-left-width:4px} body.v2 .s2-slot.beg{border-left-color:#ED7D37;background:rgba(237,125,55,.06)} body.v2 .s2-slot.beg .s2-slot-t{color:#C05E17} body.v2 .s2-slot.adv{border-left-color:#2F6FE4;background:rgba(47,111,228,.08)} body.v2 .s2-slot.adv .s2-slot-t{color:#1E56C6} body.v2 .s2-slot.kids{border-left-color:#2E9E5B;background:rgba(46,158,91,.10);color:var(--body);padding:14px} body.v2 .s2-slot.kids .s2-slot-t{color:#1E7C44} body.v2 .s2-slot.kids .s2-slot-n{color:var(--ink)} body.v2 .s2-slot.kids .s2-slot-tag{color:var(--muted)} body.v2 .s2-tt-legend{gap:18px;flex-wrap:wrap} body.v2 .s2-tt-legend .swi{display:inline-flex;align-items:center;gap:8px} body.v2 .s2-tt-legend .sw{width:13px;height:13px;display:inline-block;padding:0;background:#ED7D37} body.v2 .s2-tt-legend .sw.beg{background:#ED7D37;padding:0} body.v2 .s2-tt-legend .sw.adv{background:#2F6FE4;padding:0} body.v2 .s2-tt-legend .sw.kids{background:#2E9E5B;padding:0;color:transparent} /* Multi-tier pricing grid (Silver/Gold/Platinum/Student …) */ body.v2 .s2-tiers{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:1060px;margin:0 auto} body.v2 .s2-tier{flex:1 1 300px;max-width:340px} body.v2 .s2-tiers[hidden]{display:none} /* Kids ⇄ Adults pricing switcher - big, obvious segmented control */ body.v2 .s2-price-toggle{display:flex;justify-content:center;width:fit-content;margin:0 auto 36px;background:var(--bone-2);border:1px solid var(--line);padding:5px;gap:4px} body.v2 .s2-price-toggle-btn{font-family:var(--f-block);font-weight:800;text-transform:uppercase;font-size:clamp(14px,1.8vw,16px);letter-spacing:.04em;padding:13px clamp(28px,5vw,44px);border:0;background:transparent;color:var(--muted);cursor:pointer;transition:background .18s var(--ease-out),color .18s var(--ease-out)} body.v2 .s2-price-toggle-btn:hover{color:var(--ink)} body.v2 .s2-price-toggle-btn.active{background:var(--orange);color:#000} body.v2 .s2-tier{background:var(--paper);border:1px solid var(--line);padding:30px 26px;display:flex;flex-direction:column;position:relative} body.v2 .s2-tier.featured{border:2px solid var(--ink);padding-top:46px} body.v2 .s2-tier.featured::before{content:"Most popular";position:absolute;top:0;left:0;right:0;background:var(--ink);color:#fff;font-family:var(--f-body);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:6px} body.v2 .s2-tier-name{font-family:var(--f-body);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin-bottom:14px} body.v2 .s2-tier-head{font-family:var(--f-block);font-weight:800;text-transform:uppercase;font-size:15px;line-height:1.1;letter-spacing:.05em;color:var(--ink);margin:0 0 14px} body.v2 .s2-tier-head span{color:var(--muted)} body.v2 .s2-tier.featured .s2-tier-head{color:var(--orange-deep)} body.v2 .s2-tier-price{font-family:var(--f-block);font-weight:800;font-size:40px;line-height:1;color:var(--ink)} body.v2 .s2-tier-price .u{font-family:var(--f-body);font-weight:600;font-size:15px;color:var(--muted)} body.v2 .s2-tier-desc{font-size:14px;line-height:1.5;color:var(--muted);margin:12px 0 18px;min-height:44px} body.v2 .s2-tier-feat{list-style:none;margin:20px 0 24px;padding:0;display:flex;flex-direction:column;gap:10px;flex:1} body.v2 .s2-tier-feat li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--body)} body.v2 .s2-tier-feat li svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--sage)} body.v2 .s2-tier .s2-btn{width:100%;font-size:16px} @media (max-width:1080px){body.v2 .s2-tiers{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){body.v2 .s2-tiers{grid-template-columns:1fr}} /* Split feature (kids program · champion spotlight · intro) */ body.v2 .s2-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center} body.v2 .s2-split-media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--ink-2)} body.v2 .s2-split--rev .s2-split-media{order:2} body.v2 .s2-split-media img{width:100%;height:100%;object-fit:cover;display:block} body.v2 .s2-split-tag{position:absolute;top:16px;left:16px;background:var(--orange);color:#000;font-family:var(--f-body);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px} body.v2 .s2-split-body .s2-h{margin-bottom:18px} body.v2 .s2-split-body p{font-size:16px;line-height:1.7;color:var(--body);margin:0 0 16px} body.v2 .s2-split-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px} body.v2 .s2-split-list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--body)} body.v2 .s2-split-list li svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--sage)} @media (max-width:820px){body.v2 .s2-split{grid-template-columns:1fr;gap:32px}body.v2 .s2-split--rev .s2-split-media{order:0}} /* Champion spotlight section - removed on mobile (hero strip covers it there) */ @media (max-width:640px){body.v2 .s2-split--champ{display:none}} /* Locations grid (home) */ body.v2 .s2-loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} body.v2 .s2-loc{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);text-decoration:none;color:inherit;transition:transform .25s var(--ease-out),border-color .25s,box-shadow .25s} body.v2 .s2-loc:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(20,20,18,.4)} body.v2 .s2-loc-img{aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)} body.v2 .s2-loc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)} body.v2 .s2-loc:hover .s2-loc-img img{transform:scale(1.05)} body.v2 .s2-loc-body{padding:24px;display:flex;flex-direction:column;gap:5px;flex:1} body.v2 .s2-loc-name{font-family:var(--f-block);font-weight:800;text-transform:uppercase;font-size:24px;letter-spacing:.005em;color:var(--ink)} body.v2 .s2-loc-city{font-family:var(--f-body);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} body.v2 .s2-loc-addr{font-size:14px;color:var(--body);margin-top:6px} body.v2 .s2-loc-cta{margin-top:auto;padding-top:16px;font-family:var(--f-body);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);display:inline-flex;align-items:center;gap:8px} @media (max-width:900px){body.v2 .s2-loc-grid{grid-template-columns:1fr}} /* Compact single-column lightbox (placeholder / "more soon" modals) */ body.v2 .s2-lb--mini .s2-lb-card{grid-template-columns:1fr;width:min(520px,100%)} body.v2 .s2-lb--mini .s2-lb-title{font-size:clamp(36px,5vw,52px)}