:root{
  /* ==========================================================
     EUROPADEL BRAND TOKENS — final (previous palette + one green)
     Change a colour here and it updates across the whole site.
     ========================================================== */
  /* Neutrals (previous website) */
  --ivory:#F6F2EA;          /* Page background, text on dark buttons */
  --paper:#FBF9F4;          /* Café background, map pill */
  --sand:#EDE7DB;           /* Alternate light ground */
  --line:#DDD5C5;           /* Hairlines */
  --white:#FFFFFF;
  /* Navy family (previous website) */
  --navy:#26334D;           /* Headings, primary buttons, mobile menu */
  --navy-hover:#1C2740;
  --ink:#26303A;            /* Default text */
  --body:#5D6570;           /* Paragraphs */
  --slate:#34425E;          /* Padel card text, Visit details */
  /* Apricot accents (previous website) */
  --apricot:#E49E78;        /* ✦ separators in the olive strip */
  --apricot-deep:#B8674A;   /* Eyebrows, italic headings, links, focus */
  --apricot-light:#EDB793;  /* Promise band accents */
  /* Green — unified to the new Café Olive (Option B) */
  --olive:#4B5733;          /* Strip, Get Directions, footer, WhatsApp */
  --olive-deep:#3A4427;     /* Hovers, green text on light tints */
  --olive-ink:var(--olive-deep);
  /* Footer accents (new website) */
  --champagne:#D9C6A5;      /* Footer headings, footer link hover */
  --porcelain:#F4F1EC;      /* Footer text, text on green */
  --footer-line:rgba(244,241,236,.2);
  --footer-muted:rgba(244,241,236,.8);
  /* Sport tints (previous website) */
  --mist:#E3E8F0;           /* Padel card */
  --sage:#E6E7D6;           /* Pickleball card */
  --blush:#EAD9CC;
  /* Overlays and effects (previous website) */
  --hero-overlay:rgba(24,32,50,.58);
  --promise-overlay:rgba(30,42,66,.62);
  --on-dark-line:rgba(255,255,255,.18);
  --on-dark-line-soft:rgba(255,255,255,.12);
  --on-dark-outline:rgba(255,255,255,.75);
  --on-dark-scroll:rgba(255,255,255,.7);
  --shadow:rgba(38,51,77,.25);

  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:Manrope, 'Helvetica Neue', Arial, sans-serif;
  --pad:clamp(20px, 5.5vw, 80px);
  box-sizing:border-box;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top, 0px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--ivory); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible{outline:2px solid var(--apricot-deep); outline-offset:3px; border-radius:6px}
.hero a:focus-visible, .hero button:focus-visible, footer a:focus-visible{outline-color:var(--white)}
.wrap{max-width:1440px; margin:0 auto; padding:0 var(--pad)}
.eyebrow{display:flex; align-items:center; gap:18px; font-size:12px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--apricot-deep); margin:0 0 22px}
.eyebrow::before{content:""; width:44px; height:1px; background:currentColor}
h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0; line-height:1.02}
h2{font-size:clamp(40px, 5vw, 68px)}
h2 em, h3 em{color:var(--apricot-deep)}
.lead{font-size:17px; color:var(--body); max-width:520px; margin:0}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 30px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; transition:background .2s, color .2s}
.btn-navy{background:var(--navy); color:var(--ivory)} .btn-navy:hover{background:var(--navy-hover)}
.btn-olive{background:var(--olive); color:var(--porcelain)} .btn-olive:hover{background:var(--olive-deep)}
.btn-line{border:1px solid var(--navy); color:var(--navy)} .btn-line:hover{background:var(--navy); color:var(--ivory)}
.link{display:inline-flex; gap:12px; align-items:center; padding-bottom:6px; border-bottom:1px solid var(--apricot-deep); font-size:13px; font-weight:500; letter-spacing:.2em; text-transform:uppercase}
.link span{color:var(--apricot-deep)}
.head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-bottom:56px}
.head-row p{max-width:380px; margin:0; color:var(--body)}
section{padding:clamp(72px, 9vw, 120px) 0}

/* HERO */
.hero{position:relative; min-height:max(640px, 100svh); padding:0; display:flex; flex-direction:column; color:var(--white); overflow:hidden}
.hero picture, .hero picture img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::after{content:""; position:absolute; inset:0; background:var(--hero-overlay)}
.nav{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:104px; padding:env(safe-area-inset-top, 0px) var(--pad) 0; border-bottom:1px solid var(--on-dark-line)}
.nav .logo img{height:88px; width:auto}
.nav ul{display:flex; gap:44px; list-style:none; margin:0; padding:0; font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase}
.nav ul a:hover{opacity:.75}
.hero .nav .btn{background:transparent; border:1px solid var(--on-dark-outline); color:var(--white); min-height:48px; margin:0; padding:0 26px}
.hero .nav .btn:hover{background:var(--white); color:var(--navy)}
.menu-btn{display:none; width:46px; height:46px; border-radius:999px; border:1px solid var(--on-dark-outline); background:transparent; color:var(--white); align-items:center; justify-content:center; cursor:pointer}
.hero-body{position:relative; z-index:2; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:28px; padding:48px var(--pad) 110px}
.hero .eyebrow{color:var(--white); margin:0}
.hero .eyebrow::after{content:""; width:44px; height:1px; background:currentColor}
.hero h1{font-size:clamp(54px, 8.2vw, 116px); line-height:.98; letter-spacing:-.015em}
.hero h1 em{display:block}
.hero p{max-width:640px; margin:0; font-size:18px; color:var(--white)}
.hero .btn{background:var(--ivory); color:var(--navy); margin-top:6px; min-height:58px; padding:0 40px}
.hero .btn:hover{background:var(--white)}
.scroll{position:absolute; z-index:2; left:50%; bottom:32px; transform:translateX(-50%); width:48px; height:48px; border:1px solid var(--on-dark-scroll); border-radius:999px; display:flex; align-items:center; justify-content:center}

/* STRIP */
.strip{background:var(--olive); color:var(--ivory); display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px 30px; padding:24px var(--pad); font-size:13px; letter-spacing:.26em; text-transform:uppercase}
.strip i{font-style:normal; color:var(--apricot)}
.strip em{font-family:var(--serif); font-size:21px; letter-spacing:.02em; text-transform:none}

/* CLUB */
.club{display:grid; grid-template-columns:5fr 1fr 6fr; align-items:center}
.club > img{grid-column:1; width:100%; height:600px; object-fit:cover; object-position:62% center; border-radius:24px}
.club > div{grid-column:3; display:flex; flex-direction:column; gap:26px}
.club h2{margin-bottom:0}
.stats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; border-top:1px solid var(--line); padding-top:26px}
.stats b{display:block; font-family:var(--serif); font-weight:400; font-size:52px; line-height:1}
.stats span{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--body)}
.club .link{align-self:flex-start}

/* SPORTS */
.sports{padding-top:0}
.cards{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px}
.card{border-radius:28px; padding:40px; display:flex; flex-direction:column; gap:26px}
.card.padel{background:var(--mist)} .card.pickle{background:var(--sage)}
.card small{font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--slate)}
.card.pickle small{color:var(--olive)}
.card h3{font-size:clamp(34px, 3.4vw, 46px); line-height:1.05; margin-top:10px}
.card h3 em{color:inherit}
.card img{width:100%; height:300px; object-fit:cover; border-radius:160px 160px 16px 16px}
.card .foot{margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.card .foot p{margin:0; max-width:340px; font-size:15px; color:var(--slate)}
.card.pickle .foot p{color:var(--olive-ink)}

/* CAFE */
.cafe{background:var(--paper)}
.cafe .wrap{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:80px; align-items:center}
.cafe img{width:100%; height:540px; object-fit:cover; border-radius:28px}
.cafe .text{display:flex; flex-direction:column; gap:26px}
.cafe p{margin:0; color:var(--body); max-width:480px}
.tags{display:flex; gap:28px; flex-wrap:wrap; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--body); border-top:1px solid var(--line); padding-top:22px}

/* MOMENTS */
.moments{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px}
.moment img{width:100%; height:360px; object-fit:cover; border-radius:200px 200px 16px 16px}

/* PROMISE */
.promise{position:relative; padding:0; min-height:520px; display:flex; align-items:center; overflow:hidden; color:var(--white)}
.promise > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.promise::after{content:""; position:absolute; inset:0; background:var(--promise-overlay)}
.promise .wrap{position:relative; z-index:1; width:100%}
.promise .eyebrow{color:var(--apricot-light)}
.promise .quote{margin:0; max-width:1000px; font-family:var(--serif); font-size:clamp(42px, 5.4vw, 76px); line-height:1.05}
.promise .quote em{color:var(--apricot-light)}

/* VISIT */
.visit .wrap{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:64px}
.visit .left{display:flex; flex-direction:column; gap:28px}
.drive{border-top:1px solid var(--line)}
.drive div{display:grid; grid-template-columns:190px minmax(0,1fr); gap:16px; padding:20px 0; border-bottom:1px solid var(--line)}
.drive dt{font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--apricot-deep); padding-top:3px}
.drive dd{margin:0; font-size:16px; line-height:1.6; color:var(--slate)}
.actions{display:flex; gap:14px; flex-wrap:wrap}
.visit .right{display:flex; flex-direction:column; gap:28px}
.map{position:relative; display:block; border-radius:28px; overflow:hidden; min-height:420px; flex:1}
.map img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.map span{position:absolute; left:24px; bottom:24px; background:var(--paper); color:var(--ink); border-radius:999px; min-height:44px; padding:0 20px; display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase}
.details{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 32px; font-size:15px; line-height:1.6; color:var(--slate); margin:0}
.details dt{font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--olive); margin-bottom:4px}
.details dd{margin:0; overflow-wrap:anywhere}
.details a:hover{color:var(--apricot-deep)}

/* FOOTER */
footer{background:var(--olive); color:var(--porcelain); padding:56px 0 40px}
footer .top{display:flex; justify-content:space-between; align-items:flex-start; gap:48px; flex-wrap:wrap}
footer .top > img{height:140px; width:auto}
footer .cols{display:flex; gap:clamp(40px, 7vw, 96px); flex-wrap:wrap; font-size:14px; line-height:2}
footer .cols div{display:flex; flex-direction:column}
footer .cols strong{font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--champagne)}
footer .cols a:hover{color:var(--champagne)}
footer .bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:48px; padding-top:22px; border-top:1px solid var(--footer-line); font-size:12px; letter-spacing:.06em; color:var(--footer-muted)}

/* WhatsApp */
.wa{position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); z-index:20; width:58px; height:58px; border-radius:999px; background:var(--olive); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px var(--shadow)}

/* RESPONSIVE */
@media (max-width: 1080px){
  .nav ul, .hero .nav .btn{display:none}
  .menu-btn{display:inline-flex}
  .nav.open ul{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--navy); padding:8px var(--pad) 20px}
  .nav.open ul a{display:block; padding:14px 0; border-bottom:1px solid var(--on-dark-line-soft)}
  .club{grid-template-columns:1fr; gap:40px}
  .club > img, .club > div{grid-column:1}
  .club > img{height:420px}
  .cafe .wrap, .visit .wrap{grid-template-columns:1fr; gap:44px}
  .cafe img{height:380px}
}
@media (max-width: 760px){
  footer .top > img{height:112px}
  body{font-size:16px}
  .nav{min-height:80px} .nav .logo img{height:60px}
  .stats{grid-template-columns:repeat(2, minmax(0,1fr))}
  .stats b{font-size:42px}
  .cards, .moments{grid-template-columns:1fr}
  .card{padding:24px}
  .card img{height:200px; border-radius:100px 100px 12px 12px}
  .moment img{height:300px}
  .drive div{grid-template-columns:1fr; gap:4px}
  .details{grid-template-columns:1fr}
  .map{min-height:260px}
  .head-row{margin-bottom:36px}
  .hero-body{padding-bottom:100px}
  .strip{font-size:11px; gap:10px 16px}
  .hero .eyebrow{letter-spacing:.22em}
  .hero .eyebrow::before, .hero .eyebrow::after{display:none}
}

/* ==========================================================
   MULTI-PAGE ADDITIONS — navigation, inner pages, booking app
   All colours come from the brand tokens above.
   ========================================================== */
:root{color-scheme:light}
[hidden]{display:none !important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
h1,h2,h3{text-wrap:balance}

/* ---------- NAVIGATION: menu icon → click to drop down ---------- */
.nav{gap:20px; z-index:30}
.hero{overflow:visible}
.hero > picture{overflow:hidden}
.nav-right{display:flex; align-items:center; gap:22px; position:relative}
.nav-actions{display:flex; align-items:center; gap:22px}
.nav-login{display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--white)}
.nav-login:hover{opacity:.75}
.nav .nav-actions .btn{display:inline-flex; background:transparent; border:1px solid var(--on-dark-outline); color:var(--white); min-height:48px; margin:0; padding:0 26px}
.nav .nav-actions .btn:hover{background:var(--white); color:var(--navy)}
.nav .menu-btn{display:inline-flex; width:48px; height:48px; transition:background .2s, color .2s}
.nav .menu-btn:hover, .nav.open .menu-btn{background:var(--white); color:var(--navy)}
.menu-btn .i-close{display:none}
.nav.open .menu-btn .i-open{display:none}
.nav.open .menu-btn .i-close{display:block}

/* the drop-down panel (all screen sizes) */
.nav ul#menu{display:none}
.nav.open ul#menu{display:flex; flex-direction:column; align-items:stretch; gap:0; position:absolute; top:calc(100% + 14px); right:0; left:auto; width:min(380px, calc(100vw - 32px)); max-height:calc(100svh - 140px); overflow-y:auto; padding:8px 10px; margin:0; background:var(--white); color:var(--navy); border-radius:20px; box-shadow:0 26px 54px rgba(24,32,50,.26), 0 2px 6px rgba(24,32,50,.08); z-index:40; animation:dropIn .18s ease-out}
@keyframes dropIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){.nav.open ul#menu{animation:none}}
.nav.open ul#menu > li{display:grid; grid-template-columns:1fr auto; align-items:center; border-bottom:1px solid var(--line)}
.nav.open ul#menu > li:last-child{border-bottom:0}
.nav.open ul#menu a{display:block; border-bottom:0; padding:0}
.nav .top{display:block; padding:16px 10px !important; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--navy)}
.nav .top svg{display:none}
.nav .top:hover{color:var(--apricot-deep)}
.nav .top[aria-current="page"]{color:var(--apricot-deep); box-shadow:none}
.dd-btn{display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; background:transparent; border:0; border-radius:999px; color:var(--navy); cursor:pointer}
.dd-btn:hover{background:var(--ivory)}
.dd-btn svg{transition:transform .2s}
.dd.sub-open .dd-btn svg{transform:rotate(180deg)}
.dd-panel{grid-column:1 / -1; display:none; flex-direction:column; gap:2px; margin:0 0 12px; padding:6px; border-radius:14px; background:var(--ivory); text-transform:none; letter-spacing:0}
.dd.sub-open .dd-panel{display:flex}
.nav.open ul#menu .dd-panel a{display:flex; flex-direction:column; gap:1px; padding:10px 12px; border-radius:10px; font-size:14px; font-weight:600; color:var(--navy); transition:background .15s}
.dd-panel a small{font-size:12.5px; font-weight:400; color:var(--body); line-height:1.45}
.nav.open ul#menu .dd-panel a:hover{background:var(--white)}
.dd-panel a:hover b{color:var(--apricot-deep)}
.dd-panel b{font-weight:600; transition:color .15s}
.nav .m-only{display:none !important}
.nav.open ul#menu .m-only a{padding:16px 10px; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--navy)}
.nav.open ul#menu .m-only.cta a{display:flex; justify-content:center; align-items:center; margin:10px 0 6px; min-height:50px; border-radius:999px; background:var(--navy); color:var(--ivory); letter-spacing:.18em}

/* solid navy header for app pages */
.nav.solid{background:var(--olive); color:var(--white); min-height:92px; border-bottom:0}
/* inner pages: solid olive menu bar (homepage keeps its transparent bar) */
.hero.sub .nav{background:var(--olive); border-bottom:0}
.nav.solid .logo img{height:70px}

/* demo notice */
.demo-bar{background:var(--sand); color:var(--slate); font-size:13px; text-align:center; padding:10px var(--pad); line-height:1.5}
.demo-bar b{color:var(--apricot-deep); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:11px; margin-right:8px}

@media (max-width:760px){
  .nav.solid{min-height:76px} .nav.solid .logo img{height:54px}
  .nav-actions{display:none}
  .nav.open ul#menu .m-only{display:block !important; grid-column:1 / -1}
  .nav.open ul#menu{top:calc(100% + 12px)}
}


/* ---------- INNER PAGE HERO ---------- */
.hero.sub{min-height:auto}
.hero.sub .hero-body{padding:clamp(64px, 9vw, 120px) var(--pad) clamp(80px, 10vw, 130px)}
.hero.sub h1{font-size:clamp(48px, 7vw, 100px)}
.hero.sub .btns{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.hero.sub .btns .btn-ghost{background:transparent; border:1px solid var(--on-dark-outline); color:var(--white)}
.hero.sub .btns .btn-ghost:hover{background:var(--white); color:var(--navy)}

/* ---------- SHARED CONTENT BLOCKS ---------- */
.split{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(40px, 6vw, 80px); align-items:center}
.split > img{width:100%; height:540px; object-fit:cover; border-radius:28px}
.split > div{display:flex; flex-direction:column; gap:26px; min-width:0}
.split p{margin:0; color:var(--body); max-width:520px}
.split.flip > img{order:2}
.tint{background:var(--paper)}
.tint-sand{background:var(--sand)}

.basics{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px}
.basic{background:var(--white); border:1px solid var(--line); border-radius:22px; padding:30px 28px; display:flex; flex-direction:column; gap:14px}
.basic svg{color:var(--apricot-deep)}
.basic h3{font-size:30px; line-height:1.08}
.basic p{margin:0; font-size:15px; color:var(--body); line-height:1.65}
.pickle-page .basic svg{color:var(--olive)}

.ways{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px}
.way{border-radius:28px; padding:36px 32px; display:flex; flex-direction:column; gap:18px; background:var(--mist)}
.way:nth-child(2){background:var(--sage)}
.way:nth-child(3){background:var(--blush)}
.way small{font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--slate)}
.way h3{font-size:clamp(32px, 3vw, 40px)}
.way p{margin:0; color:var(--slate); font-size:15px}
.way .from{font-family:var(--serif); font-size:26px; color:var(--navy); line-height:1.1}
.way .from span{font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--body); display:block; margin-bottom:4px}
.way .link{align-self:flex-start; margin-top:auto}

.cta-band{background:var(--olive); color:var(--porcelain)}
.cta-band .wrap{display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap}
.cta-band h2{color:var(--porcelain)}
.cta-band h2 em{color:var(--champagne)}
.cta-band .eyebrow{color:var(--champagne)}
.cta-band .actions .btn-light{background:var(--ivory); color:var(--navy)}
.cta-band .actions .btn-light:hover{background:var(--white)}
.cta-band .actions .btn-ghost{border:1px solid var(--footer-muted); color:var(--porcelain)}
.cta-band .actions .btn-ghost:hover{background:var(--porcelain); color:var(--olive)}

/* club facilities */
.spaces{display:flex; flex-direction:column; gap:clamp(64px, 8vw, 110px)}
.space{display:grid; grid-template-columns:7fr 5fr; gap:clamp(36px, 5vw, 72px); align-items:center}
.space:nth-child(even){grid-template-columns:5fr 7fr}
.space:nth-child(even) img{order:2}
.space img{width:100%; height:500px; object-fit:cover; border-radius:28px}
.space > div{display:flex; flex-direction:column; gap:20px; min-width:0}
.space h3{font-size:clamp(36px, 3.8vw, 54px)}
.space h3 em{color:var(--apricot-deep)}
.space p{margin:0; color:var(--body)}
.space .tags{border-top:1px solid var(--line)}

/* ---------- PRICING ---------- */
.tabs{display:inline-flex; gap:6px; padding:6px; border-radius:999px; background:var(--white); border:1px solid var(--line); flex-wrap:wrap}
.tabs button, .seg button{font:inherit; border:0; background:transparent; cursor:pointer; border-radius:999px; min-height:46px; padding:0 26px; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); transition:background .2s, color .2s}
.tabs button[aria-selected="true"], .seg button[aria-pressed="true"]{background:var(--navy); color:var(--ivory)}
.tabs button:hover:not([aria-selected="true"]), .seg button:hover:not([aria-pressed="true"]){background:var(--ivory)}
.seg{display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--sand)}
.seg button{min-height:40px; padding:0 20px; font-size:11px}
.seg button:hover:not([aria-pressed="true"]){background:var(--paper)}
.tabbar{display:flex; justify-content:center; margin-bottom:56px}
.panel-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px 40px; flex-wrap:wrap; margin-bottom:36px}
.panel-head h2{font-size:clamp(36px, 4.4vw, 58px)}
.panel-head p{margin:12px 0 0; color:var(--body); max-width:520px}
.draft{display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--apricot-deep); background:var(--blush); border-radius:999px; padding:6px 14px}

.table-wrap{overflow-x:auto; border-radius:24px; border:1px solid var(--line); background:var(--white)}
.ptable{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; min-width:560px}
.ptable th, .ptable td{padding:20px 24px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle}
.ptable thead th{font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--body); background:var(--paper)}
.ptable tbody tr:last-child > *{border-bottom:0}
.ptable tbody th{font-family:var(--serif); font-weight:400; font-size:26px; color:var(--navy); line-height:1.1}
.ptable tbody th small{display:block; font-family:var(--sans); font-size:13px; color:var(--body); margin-top:4px}
.ptable .amt{font-size:22px; font-weight:500; color:var(--navy)}
.ptable .amt small{display:block; font-size:12.5px; font-weight:400; color:var(--body)}
.ptable .cur{font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--body); margin-right:5px}
.ptable .save{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--olive); background:var(--sage); border-radius:999px; padding:2px 9px; margin-left:8px; vertical-align:middle}

.hours{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; margin-top:24px}
.hours div{border-radius:20px; padding:24px 26px; background:var(--white); border:1px solid var(--line)}
.hours dt{font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--apricot-deep); margin-bottom:6px}
.hours div:nth-child(2) dt{color:var(--olive)}
.hours dd{margin:0; color:var(--slate); font-size:15px}

.tiers{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; align-items:stretch}
.tier{border-radius:28px; padding:36px 32px; background:var(--white); border:1px solid var(--line); display:flex; flex-direction:column; gap:22px}
.tier.feat{background:var(--navy); color:var(--ivory); border-color:var(--navy)}
.tier small{font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--apricot-deep)}
.tier.feat small{color:var(--apricot-light)}
.tier h3{font-size:44px}
.tier .price{display:flex; align-items:baseline; gap:8px; font-variant-numeric:tabular-nums}
.tier .price b{font-family:var(--serif); font-weight:400; font-size:58px; line-height:1}
.tier .price span{font-size:13px; color:var(--body)}
.tier.feat .price span, .tier.feat .note{color:var(--mist)}
.tier .note{font-size:13px; color:var(--body); margin:-12px 0 0; min-height:22px}
.tier ul{list-style:none; margin:0; padding:22px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px; font-size:15px}
.tier.feat ul{border-color:var(--on-dark-line)}
.tier li{display:grid; grid-template-columns:20px 1fr; gap:10px; line-height:1.5}
.tier li svg{margin-top:3px; color:var(--olive)}
.tier.feat li svg{color:var(--apricot-light)}
.tier .btn{margin-top:auto}
.tier.feat .btn{background:var(--ivory); color:var(--navy)}
.tier.feat .btn:hover{background:var(--white)}
.badge{align-self:flex-start; font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; background:var(--apricot-deep); color:var(--white); border-radius:999px; padding:5px 12px}
.billing{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.billing span{font-size:13px; color:var(--olive); font-weight:600}

.compare{min-width:720px}
.compare thead th:not(:first-child), .compare td{text-align:center}
.compare tbody th{font-family:var(--sans); font-size:15px; font-weight:500; color:var(--ink)}
.compare td{font-size:14.5px; color:var(--slate)}
.compare td svg{color:var(--olive)}
.compare .dash{color:var(--line); font-size:20px}

.coach-extra{display:grid; grid-template-columns:3fr 2fr; gap:24px; margin-top:24px}
.coach-extra > div{border-radius:24px; padding:30px 32px; background:var(--sage); display:flex; flex-direction:column; gap:12px}
.coach-extra > div:last-child{background:var(--mist)}
.coach-extra h3{font-size:32px}
.coach-extra p{margin:0; color:var(--olive-ink); font-size:15px}
.coach-extra > div:last-child p{color:var(--slate)}
.coach-extra .btn{align-self:flex-start; margin-top:6px}

/* steps and FAQ */
.steps{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; counter-reset:s; list-style:none; margin:0; padding:0}
.steps li{border-top:1px solid var(--navy); padding-top:22px; display:flex; flex-direction:column; gap:10px}
.steps li::before{counter-increment:s; content:"0" counter(s); font-family:var(--serif); font-size:40px; line-height:1; color:var(--apricot-deep)}
.steps b{font-size:16px; font-weight:600; color:var(--navy)}
.steps span{font-size:15px; color:var(--body)}
.faq{max-width:900px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:24px; align-items:center; padding:24px 0; font-family:var(--serif); font-size:26px; color:var(--navy); line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--sans); font-size:24px; color:var(--apricot-deep); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 26px; color:var(--body); max-width:720px}

/* ---------- APP PAGES (login, booking, checkout, account) ---------- */
.app{padding:clamp(40px, 6vw, 72px) 0 clamp(72px, 9vw, 110px)}
.app-title{margin-bottom:40px}
.app-title h1{font-size:clamp(44px, 6vw, 76px)}
.app-title p{margin:14px 0 0; color:var(--body); max-width:560px}
.app-grid{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:36px; align-items:start}
.box{background:var(--white); border:1px solid var(--line); border-radius:24px; padding:30px}
.box + .box{margin-top:20px}
.box h2{font-size:30px; display:flex; align-items:center; gap:14px; margin-bottom:20px}
.box h2 .n{font-family:var(--sans); font-size:12px; font-weight:600; width:30px; height:30px; border-radius:999px; background:var(--navy); color:var(--ivory); display:inline-flex; align-items:center; justify-content:center; flex:none}
.box .sub{margin:-8px 0 20px; color:var(--body); font-size:15px}
.aside{position:sticky; top:24px}
.summary dl{margin:0; display:flex; flex-direction:column}
.summary dl div{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:15px}
.summary dt{color:var(--body)}
.summary dd{margin:0; text-align:right; color:var(--ink); font-weight:500}
.summary .total{display:flex; justify-content:space-between; align-items:baseline; padding:20px 0 6px; font-variant-numeric:tabular-nums}
.summary .total span{font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--body)}
.summary .total b{font-family:var(--serif); font-weight:400; font-size:44px; color:var(--navy); line-height:1}
.summary .pp{font-size:13px; color:var(--body); text-align:right; margin:0 0 20px}
.summary .perk{background:var(--sage); color:var(--olive-ink); border-radius:14px; padding:12px 16px; font-size:14px; margin:0 0 18px}
.btn-block{width:100%}
.btn[disabled], .btn[aria-disabled="true"]{opacity:.4; pointer-events:none}
button.btn{font-family:inherit; border:0; cursor:pointer}
.fine{font-size:13px; color:var(--body); line-height:1.55; margin:14px 0 0}

.choices{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.choice{font:inherit; text-align:left; cursor:pointer; border:1px solid var(--line); background:var(--paper); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:4px; color:var(--ink); transition:border-color .15s, background .15s}
.choice b{font-family:var(--serif); font-weight:400; font-size:24px; color:var(--navy); line-height:1.1}
.choice small{font-size:13px; color:var(--body)}
.choice:hover{border-color:var(--navy)}
.choice[aria-pressed="true"]{border-color:var(--navy); background:var(--mist); box-shadow:inset 0 0 0 1px var(--navy)}
.sub-choices{margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.sub-choices .lbl{font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--body); margin-right:6px}

.dates{display:flex; gap:10px; overflow-x:auto; padding:2px 2px 10px; scroll-snap-type:x mandatory}
.date{font:inherit; flex:none; width:74px; scroll-snap-align:start; cursor:pointer; border:1px solid var(--line); background:var(--paper); border-radius:16px; padding:12px 6px; display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--ink)}
.date small{font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--body)}
.date b{font-family:var(--serif); font-weight:400; font-size:30px; line-height:1.05; color:var(--navy)}
.date:hover{border-color:var(--navy)}
.date[aria-pressed="true"]{background:var(--navy); border-color:var(--navy)}
.date[aria-pressed="true"] small, .date[aria-pressed="true"] b{color:var(--ivory)}

.slot-legend{display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--body); margin:-6px 0 18px}
.slot-legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:7px; vertical-align:0}
.lg-off{background:var(--sage); border:1px solid var(--olive)}
.lg-peak{background:var(--blush); border:1px solid var(--apricot-deep)}
.slots{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px}
.slot{font:inherit; cursor:pointer; border:1px solid var(--line); border-radius:12px; padding:10px 6px; background:var(--sage); color:var(--olive-ink); display:flex; flex-direction:column; align-items:center; gap:0; font-variant-numeric:tabular-nums}
.slot b{font-size:15px; font-weight:600}
.slot small{font-size:11.5px}
.slot.peak{background:var(--blush); color:var(--apricot-deep)}
.slot:hover{border-color:var(--navy)}
.slot[aria-pressed="true"]{background:var(--navy); color:var(--ivory); border-color:var(--navy)}
.slot:disabled{background:var(--paper); color:var(--line); cursor:not-allowed; text-decoration:line-through; border-color:var(--paper)}
.courts{display:flex; flex-wrap:wrap; gap:10px}
.court{font:inherit; cursor:pointer; border:1px solid var(--line); border-radius:999px; min-height:44px; padding:0 20px; background:var(--paper); color:var(--navy); font-size:13px; font-weight:600; letter-spacing:.08em}
.court:hover{border-color:var(--navy)}
.court[aria-pressed="true"]{background:var(--navy); color:var(--ivory); border-color:var(--navy)}
.court:disabled{color:var(--line); cursor:not-allowed; text-decoration:line-through}
.empty{padding:22px; border-radius:16px; background:var(--paper); color:var(--body); font-size:15px; text-align:center}

/* forms */
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field label{font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--slate)}
.field input, .field select{font:inherit; font-size:16px; min-height:52px; padding:0 16px; border:1px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink); width:100%}
.field input:focus, .field select:focus{outline:2px solid var(--apricot-deep); outline-offset:1px; border-color:transparent}
.field .err{font-size:13px; color:var(--apricot-deep); min-height:0}
.field.bad input{border-color:var(--apricot-deep)}
.form{display:flex; flex-direction:column; gap:18px}
.row2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
.or{display:flex; align-items:center; gap:16px; color:var(--body); font-size:12px; letter-spacing:.2em; text-transform:uppercase; margin:6px 0}
.or::before, .or::after{content:""; flex:1; height:1px; background:var(--line)}
.btn-google{background:var(--white); color:var(--ink); border:1px solid var(--line) !important; gap:12px; letter-spacing:.06em; text-transform:none; font-size:15px; font-weight:600}
.btn-google:hover{background:var(--paper)}
.btn-apple{background:#000; color:#fff; letter-spacing:.04em; text-transform:none; font-size:16px; gap:8px}
.btn-apple:hover{background:#1a1a1a}

.auth{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:clamp(36px, 6vw, 90px); align-items:center}
.auth > figure{margin:0; position:relative; border-radius:28px; overflow:hidden; min-height:620px}
.auth > figure img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.auth > figure::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,32,50,0) 40%, rgba(24,32,50,.78))}
.auth > figure figcaption{position:absolute; z-index:1; left:36px; right:36px; bottom:36px; color:var(--white); font-family:var(--serif); font-size:clamp(34px, 3.4vw, 48px); line-height:1.05}
.auth > figure figcaption em{color:var(--apricot-light)}
.auth .box{padding:36px}
.auth .tabs{width:100%; margin-bottom:28px}
.auth .tabs button{flex:1}

.pay-opts{display:flex; flex-direction:column; gap:12px}
.pay{display:grid; grid-template-columns:22px 1fr auto; gap:16px; align-items:center; cursor:pointer; border:1px solid var(--line); border-radius:18px; padding:18px 20px; background:var(--paper)}
.pay input{width:20px; height:20px; accent-color:var(--navy); margin:0}
.pay b{display:block; font-size:16px; font-weight:600; color:var(--navy)}
.pay small{font-size:13.5px; color:var(--body)}
.pay .ico{display:flex; gap:6px; align-items:center; color:var(--slate)}
.pay:has(input:checked){border-color:var(--navy); background:var(--white); box-shadow:inset 0 0 0 1px var(--navy)}
.pay-detail{margin-top:20px}
.cash-note{background:var(--sage); color:var(--olive-ink); border-radius:16px; padding:18px 20px; font-size:15px}

.modal{position:fixed; inset:0; z-index:60; background:rgba(24,32,50,.55); display:flex; align-items:center; justify-content:center; padding:20px}
.sheet{background:var(--white); border-radius:24px; width:min(440px, 100%); padding:30px; display:flex; flex-direction:column; gap:16px; box-shadow:0 30px 60px rgba(0,0,0,.3)}
.sheet h3{font-size:32px}
.sheet p{margin:0; color:var(--body); font-size:15px}
.sheet .row{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:15px}
.sheet .row span{color:var(--body)}
.sheet .acts{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.sheet .acts .btn{flex:1}
.spin{width:44px; height:44px; border-radius:999px; border:3px solid var(--line); border-top-color:var(--navy); animation:spin 1s linear infinite; margin:10px auto}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation-duration:3s}}

.done{max-width:720px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px}
.done .tick{width:84px; height:84px; border-radius:999px; background:var(--olive); color:var(--porcelain); display:flex; align-items:center; justify-content:center}
.done h1{font-size:clamp(48px, 7vw, 88px)}
.done .box{width:100%; text-align:left}
.done .ref{font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--apricot-deep)}
.done .actions{justify-content:center}

/* account */
.acct{display:grid; grid-template-columns:420px minmax(0,1fr); gap:36px; align-items:start}
.mcard{aspect-ratio:1.586; max-width:100%; border-radius:22px; padding:26px 28px; background:var(--olive); color:var(--champagne); display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 22px 40px rgba(58,68,39,.35); position:relative; overflow:hidden}
.mcard img{width:84px; height:auto}
.mcard .tierlbl{position:absolute; top:28px; right:28px; font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--champagne)}
.mcard .who{font-family:var(--serif); font-size:30px; color:var(--porcelain); line-height:1.1}
.mcard .meta{display:flex; justify-content:space-between; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--champagne); font-variant-numeric:tabular-nums}
.mcard.none{background:var(--sand); color:var(--slate); box-shadow:none; border:1px dashed var(--line)}
.mcard.none .who{color:var(--navy)}
.blist{display:flex; flex-direction:column}
.bk{display:grid; grid-template-columns:80px minmax(0,1fr) auto; gap:20px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line)}
.bk:last-child{border-bottom:0}
.bk .d{border-radius:14px; background:var(--mist); text-align:center; padding:10px 4px; line-height:1.1}
.bk.pickleball .d{background:var(--sage)}
.bk .d small{display:block; font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--slate)}
.bk .d b{font-family:var(--serif); font-weight:400; font-size:30px; color:var(--navy)}
.bk h4{margin:0; font-size:16px; font-weight:600; color:var(--navy)}
.bk p{margin:2px 0 0; font-size:14px; color:var(--body)}
.pill{display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; border-radius:999px; padding:3px 10px; margin-left:8px; vertical-align:2px}
.pill.paid{background:var(--sage); color:var(--olive-ink)}
.pill.club{background:var(--blush); color:var(--apricot-deep)}
.pill.free{background:var(--mist); color:var(--slate)}
.pill.cx{background:var(--sand); color:var(--body)}
.txt-btn{font:inherit; background:none; border:0; cursor:pointer; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--apricot-deep); padding:8px 0}
.txt-btn:hover{color:var(--navy)}
.confirm-inline{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--body)}
.toast{position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:70; background:var(--navy); color:var(--ivory); border-radius:999px; padding:14px 24px; font-size:14px; box-shadow:0 14px 30px var(--shadow)}

@media (max-width:1080px){
  .basics{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ways, .tiers{grid-template-columns:1fr}
  .split, .space, .space:nth-child(even){grid-template-columns:1fr}
  .split.flip > img, .space:nth-child(even) img{order:0}
  .split > img, .space img{height:400px}
  .steps{grid-template-columns:repeat(2, minmax(0,1fr))}
  .app-grid, .acct, .auth{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
  .auth > figure{min-height:300px}
  .coach-extra{grid-template-columns:1fr}
}
@media (max-width:760px){
  .basics, .steps, .hours, .row2{grid-template-columns:1fr}
  .choices{grid-template-columns:1fr}
  .split > img, .space img{height:300px}
  .box{padding:22px}
  .auth .box{padding:24px}
  .tabbar{margin-bottom:36px}
  .tabs button{padding:0 16px; letter-spacing:.12em}
  .faq summary{font-size:22px}
  .bk{grid-template-columns:64px minmax(0,1fr); gap:14px}
  .bk > :last-child{grid-column:2}
  .tier{padding:28px 24px}
}
@media (max-width:760px){
  .tabs{flex-wrap:nowrap; width:100%}
  .tabs button{flex:1; padding:0 8px; font-size:11px; letter-spacing:.1em; min-height:42px}
}
@media (min-width:761px){ .nav.open ul#menu > li.dd:nth-child(5){border-bottom:0} }

/* equipment hire on booking */
.extras{display:flex; flex-direction:column}
.extra{display:grid; grid-template-columns:minmax(0,1fr) auto 84px; gap:18px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line)}
.extra:first-child{padding-top:4px}
.extra:last-child{border-bottom:0; padding-bottom:0}
.extra b{display:block; font-size:16px; font-weight:600; color:var(--navy)}
.extra small{font-size:13.5px; color:var(--body)}
.extra .line{text-align:right; font-weight:500; color:var(--navy); font-variant-numeric:tabular-nums}
.stepper{display:inline-flex; align-items:center; gap:4px; padding:4px; border-radius:999px; background:var(--sand)}
.stepper button{font:inherit; font-size:20px; line-height:1; width:38px; height:38px; border-radius:999px; border:0; background:var(--white); color:var(--navy); cursor:pointer}
.stepper button:hover{background:var(--navy); color:var(--ivory)}
.stepper button:disabled{opacity:.35; cursor:not-allowed; background:var(--white); color:var(--navy)}
.stepper output{min-width:28px; text-align:center; font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums}
@media (max-width:760px){ .extra{grid-template-columns:minmax(0,1fr) auto} .extra .line{grid-column:1 / -1; text-align:left; margin-top:-8px} .extra .line:empty{display:none} }

/* ==========================================================
   CLIENT REVIEW (7 Oct): blue replaced by olive on every page
   except the homepage, which keeps its approved look.
   ========================================================== */
.page:not([data-page="home"]){
  --navy:#4B5733;          /* buttons, selected states, headings accents */
  --navy-hover:#3A4427;
  --slate:#3A4427;         /* secondary text that was blue-grey */
  --ink:#272B21;
  --body:#5E6153;
  --mist:#ECEADD;          /* was pale blue tint */
  --hero-overlay:rgba(30,36,19,.56);
  --promise-overlay:rgba(34,41,22,.6);
  --shadow:rgba(58,68,39,.25);
}
.page:not([data-page="home"]) .cta-band{background:var(--olive-deep)}
.page:not([data-page="home"]) .modal{background:rgba(30,36,19,.55)}
.page:not([data-page="home"]) .auth > figure::after{background:linear-gradient(180deg, rgba(30,36,19,0) 40%, rgba(30,36,19,.8))}
.page:not([data-page="home"]) .tier.feat .price span, .page:not([data-page="home"]) .tier.feat .note, .page:not([data-page="home"]) .tier.feat > p{color:var(--sage) !important}
.page:not([data-page="home"]) .nav.open ul#menu{box-shadow:0 26px 54px rgba(30,36,19,.28), 0 2px 6px rgba(30,36,19,.08)}
.page:not([data-page="home"]) .hero.sub .nav{background:var(--olive)}

/* coaching page */
.sessions{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px}
.sess small{font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--apricot-deep)}
.sess .from{font-family:var(--serif); font-size:28px; color:var(--navy); line-height:1.1; margin-top:auto}
.sess .from span{display:block; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--body); margin-bottom:4px}
.sess .link{align-self:flex-start}
.ways.two{grid-template-columns:repeat(2, minmax(0,1fr))}
.ways.two .way h3 em{color:var(--apricot-deep)}
.etiquette dt{color:var(--olive)}
.basic h3 + p{margin-top:0}

/* register interest */
.interest{background:var(--sand)}
.interest .box{padding:32px}
.checks{border:0; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 18px}
.checks legend{font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); margin-bottom:10px; padding:0}
.checks label{display:flex; gap:10px; align-items:center; font-size:15px; color:var(--ink); cursor:pointer}
.checks input{width:18px; height:18px; accent-color:var(--olive)}
.checks .err{grid-column:1 / -1; font-size:13px; color:var(--apricot-deep)}
.field textarea{font:inherit; font-size:16px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink); width:100%; resize:vertical}
.field textarea:focus{outline:2px solid var(--apricot-deep); outline-offset:1px; border-color:transparent}

/* booking FAQ + SEO copy */
.book-info{padding:clamp(64px, 8vw, 100px) 0 0}
.book-info .faq{max-width:none}
.seo-text{margin-top:48px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 48px; border-top:1px solid var(--line); padding-top:36px}
.seo-text h3{grid-column:1 / -1; font-size:30px}
.seo-text p{margin:0; color:var(--body); font-size:15px}

/* payment history */
.paytable{min-width:600px}
.paytable td{font-size:14.5px; color:var(--ink)}
.paytable td small{display:block; font-size:12px; color:var(--body); margin-top:2px}
.paytable .amt{font-size:16px; text-align:right; white-space:nowrap}
.paytable thead th:last-child{text-align:right}
.paytable .pill{margin-left:0}
#payments .table-wrap{border-radius:16px}

@media (max-width:760px){
  .ways.two, .checks, .seo-text{grid-template-columns:1fr}
  .interest .box{padding:22px}
}
@media (min-width:1200px){ .sessions{grid-template-columns:repeat(5, minmax(0,1fr)); gap:18px} .sessions .basic{padding:26px 22px} .sessions .basic h3{font-size:27px} }

/* FAHU fresh air band (club page) */
.fresh{background:var(--olive); color:var(--porcelain)}
.fresh h2{color:var(--porcelain)} .fresh h2 em{color:var(--champagne)} .fresh .eyebrow{color:var(--champagne)}
.fresh .head-row p{color:var(--footer-muted)}
.fresh-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px}
.fresh-grid article{border-top:1px solid var(--footer-line); padding-top:22px; display:flex; flex-direction:column; gap:10px}
.fresh-grid b{font-family:var(--serif); font-weight:400; font-size:30px; line-height:1.1; color:var(--champagne)}
.fresh-grid p{margin:0; font-size:15px; color:var(--porcelain); opacity:.88}
.page[data-page="club"] .stats{grid-template-columns:repeat(5, minmax(0,1fr))}
@media (max-width:760px){ .fresh-grid{grid-template-columns:1fr} .page[data-page="club"] .stats{grid-template-columns:repeat(2, minmax(0,1fr))} }

/* cancellation policy */
.policy{display:grid; grid-template-columns:minmax(0,1fr); gap:20px; max-width:960px}
.policy .box + .box{margin-top:0}
.policy-table{min-width:560px}
.policy-table tbody th{font-family:var(--sans); font-size:15px; font-weight:600; color:var(--navy); width:240px}
.policy-table td{font-size:15px; color:var(--body); line-height:1.6}
.plist{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; color:var(--body); font-size:15.5px}
.plist b{color:var(--ink); font-weight:600}
.policy-note{margin-top:16px}
.policy-note a{color:var(--apricot-deep); border-bottom:1px solid currentColor}
.late-note{font-size:12.5px; color:var(--body); text-align:right; line-height:1.5}
.late-note a{color:var(--apricot-deep); font-weight:600}
@media (max-width:760px){ .late-note{text-align:left} }

/* live vs preview */
.live-only{display:none}
.live .live-only{display:block}
.live #pd-card .field, .live #pd-card .row2, .live .demo-only{display:none}
.co-err{background:var(--blush) !important; color:var(--apricot-deep) !important; margin:-6px 0 18px}

/* ==========================================================
   STAFF DASHBOARD (admin.html): utilitarian, olive brand, scan-first
   ========================================================== */
.admin-body{background:var(--paper)}
.admin{--lab:96px; --navy:#4B5733; --navy-hover:#3A4427; --slate:#3A4427; --ink:#272B21; --body:#5E6153; --mist:#ECEADD; font-size:15px; line-height:1.55}
.admin h1, .admin h2, .admin h3{font-family:var(--serif); font-weight:400}
.gate{min-height:100svh; display:flex; align-items:center; justify-content:center; padding:24px 16px; background:var(--ivory)}
.gate-card{width:min(420px, 100%); background:var(--white); border:1px solid var(--line); border-radius:24px; padding:36px 32px; display:flex; flex-direction:column; gap:16px; text-align:center}
.gate-card img{margin:0 auto; height:auto}
.gate-card h1{font-size:44px} .gate-card h1 em{color:var(--apricot-deep)}
.gate-card p{margin:0; color:var(--body)}
.gate-card .field{text-align:left}
.gate-err{color:var(--apricot-deep) !important; font-size:14px; min-height:1px; margin:0}
.gate-hint{font-size:13px}
.ap-top{position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; background:var(--olive); color:var(--porcelain); display:flex; align-items:center; gap:24px; padding:10px clamp(16px, 3vw, 32px); flex-wrap:wrap}
.ap-brand{display:flex; align-items:center; gap:12px; font-family:var(--serif); font-size:24px; line-height:1}
.ap-brand small{display:block; font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--champagne); margin-top:3px}
.ap-tabs{display:flex; gap:4px; background:rgba(255,255,255,.08); border-radius:999px; padding:4px}
.ap-tabs button{font:inherit; border:0; background:transparent; color:var(--porcelain); border-radius:999px; padding:8px 18px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; cursor:pointer}
.ap-tabs button[aria-selected="true"]{background:var(--porcelain); color:var(--olive-deep)}
.ap-right{margin-left:auto; display:flex; align-items:center; gap:12px; font-size:12.5px}
.ap-upd{color:var(--footer-muted)}
.ap-live, .ap-demo{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; border-radius:999px; padding:4px 10px}
.ap-live{background:var(--champagne); color:var(--olive-deep)} .ap-demo{background:var(--apricot-light); color:#5a2a18}
.ap-icon{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:999px; border:1px solid var(--footer-line); background:transparent; color:inherit; cursor:pointer}
.ap-icon.light{border-color:var(--line); background:var(--white); color:var(--ink)}
.ap-icon:hover{background:rgba(255,255,255,.12)} .ap-icon.light:hover{background:var(--sand)}
.ap-text{font:inherit; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; background:none; border:0; color:var(--champagne); cursor:pointer; padding:8px 4px}
.ap-text.dark{color:var(--olive)}
.ap-wrap{max-width:1500px; margin:0 auto; padding:24px clamp(16px, 3vw, 32px) 64px; display:flex; flex-direction:column; gap:20px}
.ap-daybar{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.ap-date{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ap-date input{font:inherit; font-size:15px; height:40px; padding:0 12px; border:1px solid var(--line); border-radius:12px; background:var(--white); color:var(--ink)}
.ap-date h1{font-size:30px; margin-left:12px}
.ap-acts{display:flex; gap:10px; flex-wrap:wrap}
.ap-acts .btn{min-height:44px; padding:0 22px}
.ap-loading{margin:0; color:var(--body); font-size:13px}
.ap-err{margin:0; background:var(--blush); color:var(--apricot-deep); border-radius:12px; padding:12px 16px}
.kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px}
.kpi{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:16px 18px; display:flex; flex-direction:column; gap:2px; min-width:0}
.kpi span{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--body)}
.kpi b{font-family:var(--serif); font-weight:400; font-size:34px; line-height:1.1; color:var(--olive-deep); font-variant-numeric:tabular-nums}
.kpi small{font-size:12.5px; color:var(--body); overflow-wrap:anywhere}
.kpi.warn{border-color:var(--apricot-light); background:#FBF1EA} .kpi.warn b{color:var(--apricot-deep)}
.ap-card{background:var(--white); border:1px solid var(--line); border-radius:20px; padding:20px 22px; min-width:0}
.ap-card-head{display:flex; justify-content:space-between; align-items:center; gap:12px 24px; flex-wrap:wrap; margin-bottom:8px}
.ap-card-head h2{font-size:28px}
.ap-legend{display:flex; gap:14px; flex-wrap:wrap; margin:0; font-size:12.5px; color:var(--body)}
.ap-legend i{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.ap-tip{margin:0 0 12px; font-size:12.5px; color:var(--body)}
.grid-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:14px}
.cgrid{min-width:1100px; font-size:12px}
.g-head, .g-row{display:grid; grid-template-columns:var(--lab) minmax(0,1fr)}
.g-head{position:sticky; top:0; background:var(--paper); border-bottom:1px solid var(--line); height:30px}
.g-head .g-track span{position:absolute; top:7px; transform:translateX(-50%); font-size:11px; color:var(--body); font-variant-numeric:tabular-nums}
.g-head .g-track span:first-child{transform:none; padding-left:4px}
.g-body{position:relative}
.g-sport{padding:8px 12px; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--apricot-deep); background:var(--paper); border-bottom:1px solid var(--line)}
.g-row{border-bottom:1px solid var(--line)}
.g-label{padding:0 12px; display:flex; align-items:center; font-weight:600; color:var(--ink); border-right:1px solid var(--line); background:var(--white); position:sticky; left:0; z-index:2}
.g-track{position:relative; height:52px; cursor:copy}
.g-track i{position:absolute; top:0; bottom:0; width:1px; background:var(--line); opacity:.6}
.g-blk{position:absolute; top:5px; bottom:5px; border-radius:8px; border:0; padding:4px 8px; text-align:left; overflow:hidden; cursor:pointer; font:inherit; display:flex; flex-direction:column; justify-content:center; min-width:0; z-index:1}
.g-blk b{font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.g-blk small{font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.85; font-variant-numeric:tabular-nums}
.g-blk:hover, .g-blk:focus-visible{filter:brightness(1.06); box-shadow:0 0 0 2px var(--ink)}
.g-blk.paid, .ap-legend .paid{background:var(--olive); color:var(--porcelain)}
.g-blk.due, .ap-legend .due{background:#F3D9C9; color:#7A3F2B}
.g-blk.member, .ap-legend .member{background:var(--sage); color:var(--olive-deep)}
.g-blk.pending, .ap-legend .pending{background:var(--white); color:var(--ink); border:1.5px dashed var(--olive)}
.g-blk.block, .ap-legend .block{background:repeating-linear-gradient(135deg, #E9E4D8 0 6px, #DDD5C5 6px 12px); color:var(--body)}
.g-blk.coach{box-shadow:inset 4px 0 0 var(--gold)}
.ap-legend .coachkey{background:var(--white); box-shadow:inset 4px 0 0 var(--gold); border:1px solid var(--line)}
.g-now{position:absolute; top:0; bottom:0; width:2px; background:var(--apricot-deep); z-index:3; pointer-events:none}
.ap-search{min-width:min(320px, 100%)}
.ap-search input{min-height:42px; border-radius:999px; font-size:14px}
.ap-table{overflow-x:auto}
.ap-table table{width:100%; border-collapse:collapse; min-width:900px; font-size:14px}
.ap-table th{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--body); text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--paper); white-space:nowrap}
.ap-table td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink)}
.ap-table td small{display:block; font-size:12px; color:var(--body)}
.ap-table td.t, .ap-table td.n, .ap-table td.ref{white-space:nowrap; font-variant-numeric:tabular-nums}
.ap-table td.ref{font-size:12.5px; color:var(--body)}
.ap-table tbody tr[data-ref]{cursor:pointer}
.ap-table tbody tr[data-ref]:hover{background:var(--paper)}
.ap-table tr.dim td{color:var(--body); opacity:.7}
.ap-table td a{color:var(--apricot-deep); font-weight:600}
.ap-table select{font:inherit; font-size:13px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--white)}
.empty-row{text-align:center; color:var(--body) !important; padding:28px !important}
.ap-pay{display:inline-block; font-size:12px; font-weight:600; border-radius:6px; padding:2px 8px; white-space:nowrap}
.ap-pay.paid{background:var(--sage); color:var(--olive-deep)} .ap-pay.due{background:#F3D9C9; color:#7A3F2B} .ap-pay.member{background:#ECEADD; color:var(--olive-deep)} .ap-pay.pending{border:1px dashed var(--olive); color:var(--olive-deep)}
.ap-pill{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.06em; border-radius:999px; padding:3px 10px; white-space:nowrap}
.ap-pill.ok{background:var(--olive); color:var(--porcelain)} .ap-pill.wait{background:#F6E7C9; color:#6B4E14} .ap-pill.bad{background:var(--apricot-deep); color:var(--white)} .ap-pill.off{background:var(--sand); color:var(--body)}
.ap-fine{font-size:12.5px; color:var(--body); margin:12px 0 0}
.ap-drawer{position:relative; width:min(480px, 100%); gap:12px}
.ap-close{position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:999px; border:1px solid var(--line); background:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink)}
.ap-eyebrow{font-size:11px !important; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--apricot-deep) !important}
.ap-drawer h3{font-size:34px; padding-right:40px}
.ap-dl{margin:0; display:flex; flex-direction:column}
.ap-dl div{display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14.5px}
.ap-dl dt{color:var(--body)} .ap-dl dd{margin:0; color:var(--ink); overflow-wrap:anywhere}
.ap-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.ap-actions .btn{min-height:42px; padding:0 16px; font-size:11px}
.btn.danger{border-color:var(--apricot-deep); color:var(--apricot-deep)} .btn.danger:hover{background:var(--apricot-deep); color:var(--white)}
.ap-confirm{margin:0; font-size:14px; color:var(--ink)}
.ap-form{width:min(560px, 100%); max-height:calc(100svh - 40px); overflow-y:auto; gap:14px}
.ap-form h3{font-size:34px}
.ap-form .field select, .ap-form .field input{min-height:46px; font-size:15px}
.ap-price{margin:0; font-size:14px; color:var(--body)} .ap-price b{color:var(--olive-deep); font-size:16px; margin-left:6px}
@media (max-width:760px){
  .ap-top{gap:10px} .ap-right{margin-left:0; width:100%; justify-content:space-between}
  .ap-date h1{font-size:24px; margin-left:0; width:100%}
  .ap-acts{width:100%} .ap-acts .btn{flex:1}
  .kpis{grid-template-columns:repeat(2, minmax(0,1fr))}
  .kpi b{font-size:26px}
}
.admin section.ap-view{padding:0; display:flex; flex-direction:column; gap:20px}
.admin section.ap-view[hidden]{display:none}
.admin section.gate{padding:24px 16px}

/* Oct 9: olive menu bar on every page including the homepage; new photo framing */
.hero .nav{background:var(--olive); border-bottom:0}

/* Oct 9 (2): colour + framing requests */
.promise .quote em{color:var(--apricot-deep)}
.app-title h1 em{color:var(--apricot-deep)}
.page[data-page="club"] .promise::after{background:linear-gradient(90deg, rgba(24,29,15,.86) 0%, rgba(24,29,15,.72) 55%, rgba(24,29,15,.45) 100%)}

/* Oct 9 (3): every italic heading word in deep apricot */
.hero h1 em{color:var(--apricot-deep)}
/* hero captions on photos: all white */
.hero.sub .hero-body .eyebrow, .hero.sub h1, .hero.sub h1 em, .hero.sub .hero-body > p{color:var(--white)!important}
.hero.sub .hero-body .eyebrow::before, .hero.sub .hero-body .eyebrow::after{background:var(--white)!important}
.cta-band h2 em, .fresh h2 em, .fresh-grid b em, .auth > figure figcaption em, .space h3 em, .way h3 em, .card h3 em, .done h1 em, .tier h3 em{color:var(--apricot-deep)}

/* booking page cover photo */
.page[data-page="book"] .hero.sub .hero-body{padding:clamp(48px, 6vw, 80px) var(--pad) clamp(56px, 7vw, 90px)}
.page[data-page="book"] .hero .btns:empty{display:none}

/* PHOTO FRAMING: keep faces and action in view (generated from face positions) */
img[src$="booking-hero.jpg"]{object-position:45% 0% !important}
img[src$="cafe.jpg"]{object-position:34% 0% !important}
img[src$="card.jpg"]{object-position:50% 50% !important}
img[src$="changing.jpg"]{object-position:50% 50% !important}
img[src$="club-hall.jpg"]{object-position:78% 23% !important}
img[src$="club-new.jpg"]{object-position:45% 50% !important}
img[src$="club.jpg"]{object-position:29% 17% !important}
img[src$="coach-1to1.jpg"]{object-position:53% 2% !important}
img[src$="coaching-hero.jpg"]{object-position:41% 22% !important}
img[src$="community.jpg"]{object-position:64% 3% !important}
img[src$="court-orange.jpg"]{object-position:50% 55% !important}
img[src$="hero-m.jpg"]{object-position:50% 50% !important}
img[src$="hero.jpg"]{object-position:50% 50% !important}
img[src$="location.jpg"]{object-position:50% 40% !important}
img[src$="lockers.jpg"]{object-position:50% 50% !important}
img[src$="m1.jpg"]{object-position:50% 30% !important}
img[src$="m2.jpg"]{object-position:50% 40% !important}
img[src$="m3.jpg"]{object-position:50% 40% !important}
img[src$="padel-g1.jpg"]{object-position:53% 19% !important}
img[src$="padel-g2.jpg"]{object-position:49% 13% !important}
img[src$="padel-g3.jpg"]{object-position:29% 16% !important}
img[src$="padel.jpg"]{object-position:42% 26% !important}
img[src$="pickle-play.jpg"]{object-position:44% 2% !important}
img[src$="pickle.jpg"]{object-position:49% 8% !important}
img[src$="price-hero.jpg"]{object-position:47% 13% !important}
img[src$="promise.jpg"]{object-position:50% 60% !important}
img[src$="proshop.jpg"]{object-position:50% 50% !important}
/* END PHOTO FRAMING */

/* cover photos start below the solid menu bar, so nothing is hidden behind it */
.hero > picture{top:var(--navh, 104px) !important; bottom:0; height:auto !important}
.hero > picture img{height:100% !important}
.hero{--navh:104px}
@media (max-width:760px){ .hero{--navh:80px} }
/* pickleball cover: headline on one line */
.page[data-page="pickleball"] .hero h1 em{display:inline}
.page[data-page="pickleball"] .hero h1 em{display:block}

/* homepage sport cards: identical boxes, one-line titles at the same size */
#sports .cards{align-items:stretch}
#sports .card{container-type:inline-size}
#sports .card h3{white-space:nowrap; font-size:clamp(17px, 6.1cqi, 40px)}
#sports .card h3 em{display:inline}
#sports .card img{height:300px}
@media (max-width:760px){ #sports .card img{height:220px} }
/* booking cover: taller so her head is fully visible */
.page[data-page="book"] .hero.sub .hero-body{padding:clamp(80px, 9vw, 130px) var(--pad) clamp(80px, 9vw, 120px)}
#sports .cards{grid-auto-rows:1fr}
#sports .card .foot{flex-direction:column; align-items:flex-start; gap:18px}

/* homepage green band: continuous ticker (the whole line moves together) */
.strip{display:block; overflow:hidden; padding:24px 0; white-space:nowrap}
.strip-track{display:flex; width:max-content; animation:stripMove 38s linear infinite}
.strip-group{display:flex; align-items:center; gap:30px; padding-right:30px; flex:none}
.strip:hover .strip-track{animation-play-state:paused}
@keyframes stripMove{from{transform:translateX(0)} to{transform:translateX(-25%)}}
@media (max-width:760px){ .strip{padding:18px 0} .strip-group{gap:16px; padding-right:16px} .strip-track{animation-duration:26s} }
@media (prefers-reduced-motion: reduce){ .strip-track{animation:none} .strip{display:flex; justify-content:center} .strip-group[aria-hidden]{display:none} .strip{white-space:normal} }
/* homepage cover: "A place to belong." in white */
.page[data-page="home"] .hero h1 em{color:var(--white)}

/* ===== Numbered perk cards (home café + early access) ===== */
.perks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; max-width:600px}
.perks li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:start; background:#F3F0E9; border:1px solid #E9E4D9; border-radius:16px; padding:22px 26px; box-shadow:0 1px 2px rgba(38,48,58,.04)}
.perks .n{font-family:var(--serif); font-size:34px; line-height:1; color:var(--olive); min-width:40px; letter-spacing:-.01em}
.perks b{display:block; font-family:var(--sans); font-weight:600; font-size:17px; color:var(--ink); line-height:1.3}
.perks small{display:block; margin-top:4px; font-size:14.5px; color:var(--body); line-height:1.55}
/* café: framed photo + pill chips with icons */
.cafe img{box-sizing:border-box; border:10px solid var(--white); border-radius:28px; box-shadow:0 30px 60px -28px rgba(38,48,58,.35), 0 0 0 1px #ECE7DD}
.cafe .eyebrow{display:flex; align-items:center; gap:14px; color:var(--apricot-deep)}
.cafe .eyebrow::before{content:""; width:40px; height:1px; background:currentColor}
.cafe-chips{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:14px}
.cafe-chips li{display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border-radius:999px; background:#F2E8DC; color:var(--ink); font-size:16px; font-weight:500; line-height:1}
.cafe-chips li svg{flex:none; color:var(--ink)}
.cafe-chips li.green{background:#ECEEE2; color:var(--olive-deep)}
.cafe-chips li.green svg{color:var(--olive)}
@media (max-width:560px){ .cafe-chips{gap:10px} .cafe-chips li{padding:11px 16px; font-size:14.5px} .cafe img{border-width:7px} }

/* ===== Early access / register interest (home, above footer) ===== */
.early{background:var(--paper); border-top:1px solid var(--line)}
.early .wrap{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(36px,6vw,90px); align-items:start}
.early-left{display:flex; flex-direction:column; gap:24px}
.early .eyebrow.line{display:flex; align-items:center; gap:14px; color:var(--olive-deep)}
.early .eyebrow.line::before{content:""; width:40px; height:1px; background:currentColor}
.early h2{font-size:clamp(42px,5vw,66px); line-height:1.02}
.early .lead{margin:0; color:var(--body); font-size:18px; max-width:580px}
.early-card{background:var(--white); border:1px solid #E9E4D9; border-radius:28px; padding:clamp(24px,3.5vw,48px); box-shadow:0 24px 60px -30px rgba(38,48,58,.25)}
.early-form{display:flex; flex-direction:column; gap:24px}
.early-form .ef-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.early-form .field{display:flex; flex-direction:column; gap:10px; min-width:0}
.early-form label, .early-form legend{font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#6A6660}
.early-form input:not([type=radio]):not([type=checkbox]), .early-form select{width:100%; box-sizing:border-box; height:58px; padding:0 20px; font:inherit; font-size:16px; color:var(--ink); background:#F3F1EC; border:1px solid #E6E1D7; border-radius:10px; -webkit-appearance:none; appearance:none}
.early-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235D6570' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 18px center; padding-right:44px}
.early-form input::placeholder{color:#8A8780}
.early-form input:focus, .early-form select:focus{outline:2px solid var(--olive); outline-offset:1px; background:var(--white)}
.early-form .field.bad input{border-color:#B4452F; background:#FBF1EE}
.early-form .err{font-size:13px; color:#B4452F; min-height:0}
.early-form .err:empty{display:none}
.ef-seg{border:0; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.ef-seg legend{padding:0; margin-bottom:10px; grid-column:1/-1}
.ef-seg label{position:relative; text-transform:none; letter-spacing:0; font-size:inherit; color:inherit}
.ef-seg input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.ef-seg span{display:flex; align-items:center; justify-content:center; height:54px; border:1px solid #DDD8CD; border-radius:10px; background:var(--white); font-size:15px; font-weight:600; color:var(--ink); transition:background .15s, color .15s, border-color .15s; text-align:center; padding:0 8px}
.ef-seg input:checked + span{background:var(--olive); border-color:var(--olive); color:var(--white)}
.ef-seg input:focus-visible + span{outline:2px solid var(--apricot-deep); outline-offset:2px}
.ef-check{display:flex; gap:14px; align-items:flex-start; text-transform:none!important; letter-spacing:0!important; font-size:14.5px!important; font-weight:400!important; color:var(--body)!important; line-height:1.5; cursor:pointer}
.ef-check input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--olive); flex:none}
.ef-btn{display:flex; align-items:center; justify-content:center; gap:12px; height:70px; border:0; border-radius:999px; background:var(--olive); color:var(--white); font:inherit; font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; box-shadow:0 14px 30px -14px rgba(58,68,39,.7); transition:background .15s}
.ef-btn:hover{background:var(--olive-deep)}
.ef-btn[disabled]{opacity:.7; cursor:progress}
.ef-fine{margin:-8px 0 0; text-align:center; font-size:13px; color:var(--body)}
.ef-fine a{color:var(--apricot-deep); border-bottom:1px solid currentColor}
.ef-err{margin:0; color:#B4452F; font-size:14px; text-align:center}
.ef-err:empty{display:none}
.early-done{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:40px 10px}
.early-done .tick{width:72px; height:72px; border-radius:50%; display:grid; place-items:center; background:var(--olive); color:var(--white)}
.early-done h3{font-size:44px}
.early-done p{margin:0; color:var(--body); max-width:420px}
@media (max-width:900px){ .early .wrap{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){
  .early-form .ef-row{grid-template-columns:minmax(0,1fr)}
  .ef-seg{gap:8px} .ef-seg span{font-size:13px; height:50px; white-space:nowrap; padding:0 4px}
  .ef-btn{height:62px; font-size:13.5px; letter-spacing:.1em}
  .perks li{padding:18px 18px; gap:14px} .perks .n{font-size:28px; min-width:32px}
}

/* ===== Legal pages + footer legal line ===== */
.legal .lp{margin:0 0 10px; color:var(--body); font-size:15.5px; line-height:1.7}
.legal .lp:last-child{margin-bottom:0}
.legal .lp a, .legal .plist a{color:var(--apricot-deep); border-bottom:1px solid currentColor}
.legal .box h2{margin-bottom:14px}
.legal-toc ol{margin:0; padding-left:22px; columns:2; column-gap:40px; font-size:15px}
.legal-toc li{margin:0 0 6px; break-inside:avoid}
.legal-toc a{color:var(--ink)}
.legal-toc a:hover{color:var(--apricot-deep)}
.legal section.box{scroll-margin-top:110px}
@media (max-width:640px){ .legal-toc ol{columns:1} }
footer .bottom{gap:16px; flex-wrap:wrap}
footer .legal-links a{color:inherit}
footer .legal-links a:hover{color:var(--champagne)}

/* Oct 11 photo framing */
img[src$="pickle-hero.jpg"]{object-position:55% 8%!important}
img[src$="padel-hero.jpg"]{object-position:50% 25%!important}
img[src$="coach-2.jpg"]{object-position:50% 30%!important}
img[src$="moment1.jpg"]{object-position:50% 40%!important}
img[src$="membership-hero.jpg"]{object-position:50% 30%!important}

/* Oct 11: login photo caption all white */
.auth > figure figcaption, .auth > figure figcaption em{color:var(--white)!important}
img[src$="login-hero.jpg"]{object-position:62% 40%!important}
img[src$="home-cafe.jpg"]{object-position:50% 35%!important}

/* Oct 13: homepage only - transparent menu bar over the cover photo (other pages keep the olive bar) */
.page[data-page="home"] .hero .nav{background:linear-gradient(180deg, rgba(14,18,10,.55) 0%, rgba(14,18,10,0) 100%); border-bottom:0}
.page[data-page="home"] .hero > picture{top:0 !important}

/* Oct 14: menu bar (inner pages) + footer match the badge logo's olive; footer headings light apricot */
:root{--logo-olive:#495331}
footer{background:var(--logo-olive)}
.hero .nav, .hero.sub .nav, .nav.solid, .page:not([data-page="home"]) .hero.sub .nav{background:var(--logo-olive)}
footer .cols strong{color:var(--apricot-light)}

/* Oct 14 (2): header logo pulled to the left - side gap equals the gap above the logo */
.nav{padding-left:max(8px, env(safe-area-inset-left, 0px))}
@media (max-width:760px){ .nav{padding-left:max(10px, env(safe-area-inset-left, 0px))} }

/* Oct 14 (3): transparent menu bar over the cover photo on every page that has one (pages without a photo keep the olive bar) */
.hero.sub .nav, .page:not([data-page="home"]) .hero.sub .nav{background:linear-gradient(180deg, rgba(14,18,10,.55) 0%, rgba(14,18,10,0) 100%); border-bottom:0}
.hero.sub > picture{top:0 !important}