/* The browser's own [hidden] rule is only as specific as a class, so any
   component with its own display value (.mem-grid is display:grid) rendered
   even when marked hidden. This made the couples memberships show alongside
   the individual ones. */
[hidden]{display:none !important}

/* ==========================================================================
   Advantage Padel
   Fonts are self-hosted so they load under a strict Content-Security-Policy
   (style-src 'self'). Drop the .woff2 files into assets/fonts/. See README.
   ========================================================================== */
@font-face{font-family:Archivo;src:url(../fonts/archivo-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/archivo-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/archivo-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/archivo-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-600.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --ink:#1E1C19;               /* warm black: text, used sparingly as a surface */
  --ink-70:rgba(30,28,25,.72);
  --ink-45:rgba(30,28,25,.50);
  --ink-12:rgba(30,28,25,.12);
  --paper:#F7F3EC;             /* warm off-white page */
  --sand:#EFE6D8;              /* warm secondary surface */
  --white:#fff;
  --blue:#5A9AF8;              /* brand secondary: buttons, highlights, icons */
  --blue-hover:#4589F2;
  --blue-tint:#E8F0FD;
  --court:#2A64C4;             /* blue for small text on light (passes contrast) */
  --primary:#D1E000;
  --primary-hover:#BBC800;
  --signal:#E4572E;
  --note:#8A6A18;
  --note-bg:#FFF6DF;
  --r:14px;
  --pad:clamp(20px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;padding-bottom:76px;background:var(--paper);color:var(--ink);
  font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Archivo,system-ui,sans-serif;margin:0;line-height:1.05;letter-spacing:-.02em}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--pad)}

/* ---------- prototype chrome (not part of the design) ---------- */

/* annotations */

/* ---------- section rhythm ---------- */
section{padding:clamp(44px,6vw,76px) 0;border-top:1px solid var(--ink-12);scroll-margin-top:calc(var(--probar,74px) + 54px)}
section:first-of-type{border-top:0}
.eyebrow{
  font-family:Archivo;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45);
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--ink-12)}
h2{font-size:clamp(26px,3.4vw,38px);font-weight:700}
.lede{color:var(--ink-70);max-width:60ch;margin-top:10px}

/* ---------- site header ---------- */
.site-head{background:var(--white);border-bottom:1px solid var(--ink-12);position:sticky;top:0;z-index:60}
.site-head .wrap{position:relative;display:flex;align-items:stretch;gap:clamp(16px,3vw,40px);height:74px}
.logo{
  font-family:Archivo;font-weight:600;letter-spacing:0;font-size:22px;
  white-space:nowrap;display:flex;align-items:center;gap:11px;
  color:var(--ink);text-decoration:none;
}
/* The mark sits in a black disc so it reads as a device rather than as the
   first letter of the wordmark. The disc is sized off the header, not the
   glyph, so it keeps its optical weight as the bar shrinks. */
.logo #logoMark{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:42px;height:42px;border-radius:50%;
  background:var(--ink);color:var(--primary);
  transition:opacity .15s ease;
}
.logo #logoMark .logo-mark{height:27px;width:auto;margin:0}
.logo:hover #logoMark{opacity:.82}
/* Hamburger. Hidden until the links collapse at 900px. */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;margin-left:12px;padding:0 9px;
  background:none;border:0;cursor:pointer;flex:0 0 auto;
}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;
  transition:transform .22s ease,opacity .18s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.site-nav a.nav-book-mobile{display:none}

.site-nav{display:flex;align-items:stretch;gap:clamp(4px,1.6vw,20px)}
.site-nav a{
  position:relative;display:flex;align-items:center;text-decoration:none;
  font-family:Archivo;font-size:clamp(11.5px,.92vw,13px);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink);padding:0 2px;transition:color .15s ease;
}
/* lime rule sweeps in from the left on hover, sits solid on the current page */
.site-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:22px;height:3px;
  background:var(--primary);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.site-nav a:hover::after{transform:scaleX(1)}
.site-nav a[aria-current]{color:var(--ink)}
.site-nav a[aria-current]::after{transform:scaleX(1)}

/* primary action, always reachable from the header */
/* The header's booking pill is a button and should read like the others. It
   was inheriting the body face, Inter 400 at 16px, which made the site's
   primary action the lightest text in the bar. These three lines are the same
   typography .btn uses. */
a.nav-cta{text-decoration:none;
  align-self:center;background:var(--primary);color:var(--ink);
  font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:15px;letter-spacing:.01em;
  border-radius:99px;padding:14px 28px;margin-left:16px;white-space:nowrap;
  /* letter-spacing adds a gap after the last character, so trim the right
     side by that much to keep the text optically centred in the pill */
  padding-right:calc(28px - .1em);
  transition:background .15s ease,transform .15s ease;
}
a.nav-cta::after{display:none}
a.nav-cta:hover{background:var(--primary-hover);transform:translateY(-1px)}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:#fff;border-top:0;position:relative;overflow:hidden}
.hero::before{ /* court-line motif */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:
    linear-gradient(to right,transparent 49.7%,#7FD4E8 49.7%,#7FD4E8 50.3%,transparent 50.3%),
    linear-gradient(to bottom,transparent 24.7%,#7FD4E8 24.7%,#7FD4E8 25.3%,transparent 25.3%),
    linear-gradient(to bottom,transparent 74.7%,#7FD4E8 74.7%,#7FD4E8 75.3%,transparent 75.3%);
  mask-image:linear-gradient(to left,#000,transparent 62%);
}
.hero.has-image::before{display:none}
/* Banner treatment. Three layers over the photograph, in paint order:
   a blue multiply through background-blend-mode, a blue screen that lifts the
   shadows, then a navy scrim that carries the text. The scrim is heavy at the
   left where the copy sits and clears almost completely on the right, so the
   photograph stays open while the words stay legible.

   The numbers are not taste. They were measured against the brightest 2% of
   pixels behind the headline and the intro, for all six banner photographs.
   Worst case: 4.0:1 on the h1, 4.7:1 on the intro. WCAG AA wants 3:1 for the
   headline at that size and 4.5:1 for the intro. Lightening the scrim further
   puts the intro under the line, so if these move, re-measure. */
.hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  background-repeat:no-repeat;
  background-color:rgba(47,107,212,.30);background-blend-mode:multiply;
  isolation:isolate;
}
.hero-bg::before{ /* lifts the shadows and pulls the whole frame blue */
  content:"";position:absolute;inset:0;z-index:0;
  background:#1E4FA8;mix-blend-mode:screen;opacity:.28;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(8,24,54,.82) 0%,rgba(8,24,54,.48) 46%,rgba(8,24,54,.05) 100%),
    linear-gradient(to top,rgba(8,24,54,.46) 0%,rgba(8,24,54,0) 50%);
}
/* Content is anchored to the top, not centred. Centring made every page's
   headline land at a different height depending on how long its copy was. */
.hero.has-image{
  min-height:min(78vh,620px);display:flex;align-items:stretch;
  padding-top:clamp(64px,10vh,104px);padding-bottom:clamp(44px,7vh,76px);
}
/* a hero that opens straight on the headline still reserves the kicker's line,
   so the h1 starts at the same height as on every other page */
.hero .wrap > h1:first-child{margin-top:30px}
/* the club kicker carries an inline logo mark, which makes its line taller than
   a plain text kicker and pushed those headlines down. Fix its box. */
.hero .club-kicker{display:flex;align-items:center;height:20px;line-height:1}
.hero .club-kicker .logo-mark{height:15px;width:auto}
.hero .wrap{position:relative;width:100%}
/* minmax(0,...) rather than a bare fr. An fr track keeps an automatic minimum
   of its content's min-content width, so the club with the longest headline was
   stealing width from the facts panel: Nottingham's came out 322px against
   410px on the other two, shifted right, with its labels wrapped onto a second
   line and the whole panel a different height. Removing the automatic minimum
   makes the two columns resolve to the same width on every club page. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:end}
/* The facts panel used to bottom-align to the copy column, so the club with the
   longest intro pushed it 26px lower than the others. The grid now fills the
   hero and the panel aligns to the hero's own bottom edge, which is the same on
   every club page; the copy column is pinned to the top so the headline does
   not move. The panel therefore sits in an identical place whatever the copy
   does. */
.hero.has-image .wrap{display:flex;flex-direction:column}
.hero.has-image .hero-grid{flex:1}
.hero-grid > :first-child{align-self:start}
.club-kicker{font-family:Archivo;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--primary)}
.hero h1{font-size:clamp(46px,8vw,86px);font-weight:700;margin:10px 0 0;text-transform:uppercase}
.hero .tagline{font-size:clamp(20px,2.4vw,27px);color:#fff;margin-top:14px;max-width:46ch;line-height:1.25;font-weight:500;font-family:Archivo;letter-spacing:-.01em}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:Archivo;font-weight:600;font-size:15px;letter-spacing:.01em;
  padding:15px 26px;border-radius:99px;border:1.5px solid transparent;transition:.15s;
  cursor:pointer;background:transparent;line-height:1.25;
}
.btn-primary{background:var(--primary);color:var(--ink)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-ghost{border-color:var(--signal);color:#fff;background:transparent}
.btn-ghost:hover{border-color:var(--signal);background:rgba(228,87,46,.18)}

.btn-outline{border-color:var(--ink-12);color:var(--ink);background:var(--white)}
.btn-outline:hover{border-color:var(--ink)}
.btn-secondary{border-color:var(--signal);color:var(--ink);background:transparent}
.btn-secondary:hover{background:rgba(228,87,46,.12)}
.btn-sm{padding:11px 20px;font-size:14px}

/* status + facts */
.status{display:flex;align-items:center;gap:9px;font-size:14px;color:rgba(255,255,255,.8);margin-top:26px}
.dot{width:9px;height:9px;border-radius:99px;background:#5BD98A;box-shadow:0 0 0 4px rgba(91,217,138,.2)}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.22);border-radius:var(--r);overflow:hidden}
/* Blue rather than the warm black, to sit with the hero's navy scrim, with the
   figures in lime, and translucent enough to read the photograph through.

   Measured over all five banner photographs at the brightest 2% behind the
   panel. The fill opacity is the dial: .68 puts the labels at 4.1:1 and fails,
   .72 lands exactly on 4.5:1, .76 gives 4.9:1 with the lime at 4.1:1. .76 is
   the setting, chosen as the most transparent with any margin left. Note the
   figures are conservative, because the model behind them does not simulate
   the backdrop blur, which smooths the brightest pixels and helps in practice.

   The labels went from 60% to 78% white on the way, which they needed: at 60%
   on the old black box they measured 4.2:1, already under the 4.5:1 that 12px
   text wants. Brighter blues were tried and all failed, down to 2.5:1 on the
   brand blue; a mid blue cannot carry small white text. */
.fact{background:rgba(24,58,124,.76);backdrop-filter:blur(8px);padding:20px}
.fact:last-child:nth-child(odd){grid-column:1/-1}
.fact .n{font-family:Archivo;font-size:34px;font-weight:700;line-height:1;color:var(--primary)}
/* The tracking tightens as the column narrows. At .1em the longest label,
   PICKLEBALL (INDOOR), needed 153px against 150px of room at 1024 and wrapped
   to a second line, which made Mudeford's panel 19px taller than the other two.
   A reserved second line would have cost every panel the space; this keeps one
   line at every width down to where the hero stacks. */
.fact .l{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-top:6px}
@media (max-width:1240px){ .fact .l{letter-spacing:.05em} }
@media (max-width:1080px){ .fact .l{font-size:11.5px;letter-spacing:.03em} }
@media (max-width:1000px){ .fact .l{font-size:11px;letter-spacing:0} }

/* ---------- section subnav ---------- */
.subnav{
  position:sticky;top:var(--probar,74px);z-index:45;
  background:var(--ink);border-top:1px solid rgba(255,255,255,.14);
  padding:0;
}
.subnav .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{
  flex:0 0 auto;text-decoration:none;
  font-family:Archivo;font-size:12.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,.6);padding:16px 10px;
  border-bottom:2px solid transparent;transition:.15s;white-space:nowrap;
}
.subnav a:hover{color:#fff}
.subnav a.active{color:#fff;border-bottom-color:var(--primary)}

/* ---------- USP strip ---------- */
.usps{background:var(--white);border-top:0;padding:0}
.usps .wrap{
  display:flex;gap:8px;padding-top:26px;padding-bottom:26px;
  overflow-x:auto;scrollbar-width:none;
}
.usps .wrap::-webkit-scrollbar{display:none}
.usp{
  flex:1 0 auto;min-width:128px;text-align:center;
  padding:8px 10px;border-right:1px solid var(--ink-12);
  display:flex;flex-direction:column;align-items:center;gap:11px;
}
.usp:last-child{border-right:0}
.usp svg{width:28px;height:28px;stroke:var(--court);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

.usp .l{
  font-family:Archivo;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-70);line-height:1.35;
}

/* ---------- new to padel ---------- */

/* ---------- prices ---------- */
.price-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 22px}
.chip{
  font:inherit;font-weight:600;font-size:14px;cursor:pointer;
  background:var(--white);border:1px solid var(--ink-12);color:var(--ink-70);
  padding:9px 18px;border-radius:99px;transition:.15s;
}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.price-card{background:var(--white);border:1px solid var(--ink-12);border-radius:var(--r);padding:24px}
.price-card .when{font-family:Archivo;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.price-card .hours{font-size:13.5px;color:var(--ink-45);margin-top:3px}
.price-card .amt{font-family:Archivo;font-size:44px;font-weight:700;margin-top:14px;line-height:1}
.price-card .per{font-size:13px;color:var(--ink-45);letter-spacing:.04em;text-transform:uppercase}
.price-card ul{list-style:none;padding:0;margin:14px 0 0;border-top:1px solid var(--ink-12);padding-top:12px;font-size:14px;color:var(--ink-70)}
.price-card li{display:flex;justify-content:space-between;padding:3px 0}
.price-foot{margin-top:18px;font-size:13.5px;color:var(--ink-45)}

/* ---------- facilities ---------- */

/* ---------- events ---------- */
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:26px}
.ev{background:var(--white);border:1px solid var(--ink-12);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px}
.ev .tag{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--court)}
.ev h3,.ev h4{font-size:18px}
.ev p{margin:0;font-size:14.5px;color:var(--ink-70);flex:1}
.ev .when{font-size:13.5px;font-weight:600;line-height:1.45;min-height:calc(2 * 1.45em);display:flex;align-items:flex-end}
.empty{background:var(--white);border:1px dashed var(--ink-12);border-radius:var(--r);padding:34px;text-align:center;color:var(--ink-70)}

/* ---------- memberships ---------- */
/* Five tiers at 186px made every perk wrap to three or four lines, and Gold's
   eight perks stretched the other four to match, leaving most of them empty.
   Three wider columns instead: perks sit on one or two lines, and Gold only
   stretches the row it is actually in. */
/* Flex rather than grid, so the two cards on the second row stretch to fill it
   instead of leaving an empty third cell. */
.mem-grid{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;align-items:stretch}
.mem-grid > .mem{flex:1 1 300px;min-width:0}
/* A lime rule along the top of every card, and the price picked out in the
   brand marker, so the tiers read as a set and carry some colour. The feature
   tier inverts to ink with a lime price. */
.mem{
  position:relative;overflow:hidden;
  background:var(--white);border:1px solid var(--ink-12);border-radius:var(--r);
  padding:26px 24px 24px;display:flex;flex-direction:column;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.mem::before{
  content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--primary);
}
.mem:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(30,28,25,.1);border-color:var(--primary)}
.mem.feature{background:var(--ink);color:#fff;border-color:var(--ink)}
.mem.feature::before{background:var(--primary)}
.mem.feature .price{color:var(--primary)}
.mem.feature:hover{border-color:var(--primary)}
.mem.feature .price small,.mem.feature ul{color:rgba(255,255,255,.72)}
.mem h3{font-size:15px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.mem .price{font-family:Archivo;font-size:36px;font-weight:700;margin:12px 0 2px;line-height:1}
.mem .price small{font-family:Inter;font-size:13px;font-weight:400;color:var(--ink-45)}
.mem ul{list-style:none;padding:0;margin:16px 0;font-size:14px;color:var(--ink-70);flex:1}
.mem li{
  padding:7px 0 7px 22px;border-top:1px solid var(--ink-12);position:relative;
}
.mem li::before{
  content:"";position:absolute;left:0;top:14px;
  width:9px;height:5px;border-left:2px solid var(--court);border-bottom:2px solid var(--court);
  transform:rotate(-45deg);
}
.mem.feature li::before{border-color:var(--primary)}
.mem.feature li{border-color:rgba(255,255,255,.16)}
.mem .btn{justify-content:center;margin-top:4px}

/* ---------- at the club ---------- */
.owned{background:var(--court);color:#fff;border-radius:var(--r);padding:32px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;margin-top:26px}
.owned h3{font-size:26px}
.owned p{margin:8px 0 0;color:rgba(255,255,255,.82);max-width:52ch}
.badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.2);padding:5px 11px;border-radius:99px;margin-bottom:12px}
.partners{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:16px}
.partner{background:var(--white);border:1px solid var(--ink-12);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:7px}
.partner .cat{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45)}
.partner h3,.partner h4{font-size:17px}
.partner p{margin:0;font-size:14px;color:var(--ink-70);flex:1}
.partner a{font-size:13.5px;font-weight:600;color:var(--court);text-decoration:none}
.partner a:hover{text-decoration:underline}
.suites{margin-top:16px;background:var(--white);border:1px solid var(--ink-12);border-radius:var(--r);padding:24px}
.suites h3,.suites h4{font-size:17px;margin-bottom:4px}
.suites .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:16px}
.suite{border-top:1px solid var(--ink-12);padding-top:10px;font-size:14px}
.suite strong{display:block;font-weight:600}
.suite span{color:var(--ink-45);font-size:13px}

/* ---------- homepage only ---------- */

.band{background:var(--court);color:#fff;border-top:0}
.band .eyebrow{color:rgba(255,255,255,.6)}
.band .eyebrow::after{background:rgba(255,255,255,.25)}
.band .lede{color:rgba(255,255,255,.82)}

/* ---------- new to padel page ---------- */
.basics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
/* Four cards in a three-column grid leaves one stranded on its own row. Sets of
   four get their own row; sets of six stay as two rows of three. */
.basics:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){
  .basics:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
}
.basic{
  background:var(--white);border:1px solid var(--ink-12);border-radius:var(--r);
  padding:26px;display:flex;flex-direction:column;
}
.basic .b-num{
  width:34px;height:34px;border-radius:99px;background:var(--ink);color:var(--primary);
  font-family:Archivo;font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
/* The card title is written as h3 on the booking and corporate pages and h4 on
   new to padel. Style both: with only h4 selected, the h3 versions fell back to
   the browser default, which is a different size, has no margin under it and
   loses the min-height that keeps the paragraphs starting on the same line. */
.basic h3,.basic h4{font-size:19px;margin-bottom:8px;min-height:calc(2 * 1.25em)}
.basic p{margin:0;font-size:15px;color:var(--ink-70);flex:1}
/* The footnote is bottom-aligned with flex, which blockifies every child
   element: the <b> became its own flex item and the spaces either side of it
   were dropped, so "You get two serves" rendered as three columns reading
   "You gettwo serves". The content is wrapped in a single span so the flex
   container has exactly one item and the inline text inside it is left alone. */
.basic .aside{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--ink-12);
  font-size:13.5px;line-height:1.5;color:var(--ink-45);
  min-height:calc(2 * 1.5em + 12px);display:flex;align-items:flex-end;
}
.basic .aside > span{display:block}
.basic .aside b{color:var(--court);font-weight:600}
.journey{margin-top:32px;position:relative}
.jstep{
  display:grid;grid-template-columns:56px 1fr;gap:22px;
  padding:0 0 34px;position:relative;
}
.jstep::before{
  content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;background:var(--ink-12);
}
.jstep:last-child{padding-bottom:0}
.jstep:last-child::before{display:none}
.jnum{
  width:56px;height:56px;border-radius:99px;background:var(--ink);color:var(--primary);
  font-family:Archivo;font-weight:700;font-size:21px;
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
}
.jbody{background:var(--white);border:1px solid var(--ink-12);border-radius:var(--r);padding:26px}
.jbody h3{font-size:22px}
.jbody .when{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--signal);margin-bottom:8px}
.jbody p{margin:10px 0 0;color:var(--ink-70);font-size:15.5px}
.jbody .tips{list-style:none;padding:0;margin:16px 0 0;font-size:14.5px;color:var(--ink-70)}
.jbody .tips li{padding:7px 0;border-top:1px solid var(--ink-12);display:flex;gap:9px}
.jbody .tips li::before{content:"✓";color:var(--court);font-weight:700}
.jbody .cta-row{margin-top:20px}

.club-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.pick-card{
  background:var(--white);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;text-align:left;padding:0;border:0;
  font:inherit;transition:.15s;
}
.pick-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.22)}
.pick-card .acts{display:flex;gap:8px;margin-top:auto;padding-top:16px}
.pick-card .acts .btn{flex:1;justify-content:center;padding:11px 10px;font-size:13.5px}
.pick-card .shot{aspect-ratio:16/10;background:var(--ink-12);background-size:cover;background-position:center}
.pick-card .body{padding:20px;display:flex;flex-direction:column;gap:3px;flex:1}
.pick-card .region{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}
.pick-card .nm{font-family:Archivo;font-weight:700;font-size:24px;text-transform:uppercase;color:var(--ink);line-height:1.05}
.pick-card .addr{font-size:13.5px;color:var(--ink-70);margin-top:4px}

.kit{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.kit-col{background:var(--white);border:1px solid var(--ink-12);border-radius:var(--r);padding:26px}
.kit-col h3,.kit-col h4{font-size:18px;margin-bottom:4px}
.kit-col ul{list-style:none;padding:0;margin:14px 0 0;font-size:15px;color:var(--ink-70)}
.kit-col li{padding:8px 0;border-top:1px solid var(--ink-12);display:flex;gap:10px}
.kit-col.yes li::before{content:"✓";color:var(--court);font-weight:700}
.kit-col.no li::before{content:"✕";color:var(--signal);font-weight:700}

.faq{margin-top:26px;border-top:1px solid var(--ink-12)}
.faq details{border-bottom:1px solid var(--ink-12)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 0;font-family:Archivo;font-weight:600;font-size:17px;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--signal);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 20px;color:var(--ink-70);font-size:15.5px;max-width:70ch}

/* ---------- location panels (Padel Social Club style) ---------- */
.panels{
  display:flex;margin-top:34px;background:var(--ink);
  height:clamp(480px, calc(100vh - var(--probar,74px) - 54px - 96px), 700px);
}
.panel{
  position:relative;flex:1 1 0%;min-width:0;overflow:hidden;cursor:pointer;
  background-size:cover;background-position:center;outline:none;
  transition:flex-grow .65s cubic-bezier(.2,.7,.2,1);
  will-change:flex-grow;
}
.panel + .panel{border-left:1px solid rgba(255,255,255,.14)}
.panel.active{flex-grow:2.6;cursor:default}
.panel::before{ /* slow push-in on the active image */
  content:"";position:absolute;inset:0;background:inherit;background-size:cover;
  background-position:center;transform:scale(1.04);transition:transform 1.2s ease;
}
.panel.active::before{transform:scale(1)}
.panel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(30,28,25,.94) 0%,rgba(30,28,25,.5) 38%,rgba(30,28,25,.08) 70%);
  transition:background .4s ease;
}
.panel:not(.active)::after{background:linear-gradient(to top,rgba(30,28,25,.9) 0%,rgba(30,28,25,.45) 55%,rgba(30,28,25,.3) 100%)}
.panel:not(.active):hover::after{background:linear-gradient(to top,rgba(30,28,25,.85) 0%,rgba(30,28,25,.3) 55%,rgba(30,28,25,.15) 100%)}
.panel:focus-visible{outline:3px solid var(--signal);outline-offset:-3px}
.panel .inner{
  position:absolute;left:0;bottom:0;z-index:1;color:#fff;
  padding:clamp(22px,3vw,40px);
  width:min(60vw,820px);   /* fixed so the text lays out once and never re-wraps */
}
.panel .region{
  font-family:Archivo;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--primary);margin-bottom:8px;
}
.panel h3{
  font-size:clamp(38px,4.6vw,62px);font-weight:700;letter-spacing:-.02em;
  white-space:nowrap;line-height:1.04;
  transform:scale(.62);transform-origin:left bottom;
  transition:transform .65s cubic-bezier(.2,.7,.2,1);
}
.panel.active h3{transform:scale(1)}
.panel .more{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .65s cubic-bezier(.2,.7,.2,1),opacity .3s ease;
}
.panel .more-in{overflow:hidden;min-height:0}
.panel.active .more{
  grid-template-rows:1fr;opacity:1;
  transition:grid-template-rows .65s cubic-bezier(.2,.7,.2,1),opacity .4s ease .25s;
}
.panel .line{font-size:clamp(17px,1.5vw,20px);margin-top:8px;color:#fff}
/* buttons sit under the copy, as they do on every other page */
.panel .row{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:16px}
.panel .copy{max-width:42ch;font-size:15.5px;color:rgba(255,255,255,.82);margin:0}

.panel .acts{display:flex;gap:10px;flex-shrink:0}
.btn-light{border-color:rgba(255,255,255,.75);color:#fff;background:transparent}
.btn-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.panel .hint{
  margin-top:10px;font-size:13px;color:rgba(255,255,255,.65);
  display:flex;align-items:center;gap:8px;
  transition:opacity .25s ease;
}
.panel.active .hint{opacity:0;pointer-events:none}

/* layout switch in the prototype bar */

/* ================= FULL-WIDTH EDITORIAL BLOCKS ================= */
/* A section that runs edge to edge with no padding or keyline. */
section.flush{padding:0;border-top:0}

/* shared text treatment on dark or photographic blocks */
.on-dark{color:#fff}
.on-dark .eyebrow{color:rgba(255,255,255,.6)}
.on-dark .eyebrow::after{background:rgba(255,255,255,.22)}
.on-dark .lede,.on-dark p{color:rgba(255,255,255,.8)}
.big{font-size:clamp(36px,4.6vw,60px);font-weight:700;letter-spacing:-.03em;line-height:1}

/* image layer that can zoom independently of its container */
.bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}

/* 1. Image tiles: full-bleed row of photo cards with overlaid copy */
.tiles{display:grid;grid-template-columns:repeat(3,1fr)}
.tile{
  position:relative;overflow:hidden;min-height:clamp(460px,62vh,620px);
  display:flex;align-items:flex-end;color:#fff;text-decoration:none;
}
.tile + .tile{border-left:1px solid rgba(255,255,255,.14)}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(30,28,25,.94) 0%,rgba(30,28,25,.45) 45%,rgba(30,28,25,.1) 80%)}
.tile:hover .bg{transform:scale(1.05)}
/* Each tile reserves the same rows, so headings sit on one line across the
   three and the buttons line up, whatever length the copy runs to. */
.tile .inner{
  position:relative;z-index:1;padding:clamp(24px,3vw,40px);width:100%;
  display:grid;grid-template-rows:auto 1fr auto;align-content:end;
}

.tile h3{font-size:clamp(28px,2.8vw,38px);margin:10px 0 10px;min-height:2.1em;display:flex;align-items:flex-end}
.tile p{margin:0;color:rgba(255,255,255,.8);font-size:15.5px;max-width:34ch;line-height:1.55;min-height:calc(4 * 1.55em)}
.tile .cta-row{margin-top:22px;align-self:start}

/* 2. Split: half photo, half content, full-bleed */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(520px,72vh,700px)}
.split.compact{min-height:clamp(400px,54vh,540px)}
.split.compact .content{background:var(--sand)}
.split .media{position:relative;overflow:hidden;min-height:360px}
.split .content{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,6vw,104px) clamp(24px,6vw,96px);background:var(--paper);
}
.split.rev .media{order:2}
.split.dark .content{background:var(--ink)}

.split .content h2{max-width:14ch}
.split .content .lede{max-width:46ch}
.split .list{list-style:none;padding:0;margin:26px 0 0;max-width:48ch}
.split .list li{padding:14px 0;border-top:1px solid var(--ink-12);display:grid;grid-template-columns:42px 1fr;gap:6px}

.split .list .n{font-family:Archivo;font-weight:700;font-size:14px;color:var(--signal);padding-top:2px}

.split .list b{display:block;font-family:Archivo;font-size:18px;letter-spacing:-.01em;margin-bottom:3px}
.split .list span{font-size:15px;color:var(--ink-70)}

.split .note-line{margin-top:22px;padding:14px 18px;border-left:3px solid var(--primary);
  background:rgba(209,224,0,.08);font-size:15px;border-radius:0 8px 8px 0}

/* 3. Feature band: full-bleed photo with a big centred message */
.feature-band{
  position:relative;overflow:hidden;min-height:clamp(480px,70vh,680px);
  display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
}
.feature-band > .bg{
  background-color:rgba(47,107,212,.30);background-blend-mode:multiply;isolation:isolate;
}
.feature-band > .bg::before{
  content:"";position:absolute;inset:0;background:#1E4FA8;mix-blend-mode:screen;opacity:.28;
}
/* Measured the same way as the hero: worst case 5.5:1 on the h2 and 5.0:1 on
   the paragraph across all six photographs. */
.feature-band::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(8,24,54,.48) 0%,rgba(8,24,54,.80) 72%)}
.feature-band .inner{position:relative;z-index:1;padding:64px var(--pad);max-width:900px}
.feature-band .kicker{font-family:Archivo;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--primary)}
.feature-band h2{font-size:clamp(42px,7vw,96px);font-weight:700;letter-spacing:-.035em;line-height:.95;margin:16px 0 0;text-transform:uppercase}
.feature-band p{font-size:clamp(17px,1.8vw,21px);color:rgba(255,255,255,.92);margin:20px auto 0;max-width:46ch}
.feature-band .cta-row{justify-content:center;margin-top:32px}
.hero .intro{font-size:16.5px;color:rgba(255,255,255,.92);max-width:52ch;margin-top:14px}
.feature-band .perks.text{text-align:left;gap:clamp(18px,3vw,40px);max-width:880px;margin-left:auto;margin-right:auto}
.feature-band .perks.text div{flex:1 1 220px;font-family:Inter;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.78);border-top:1px solid rgba(255,255,255,.25);padding-top:14px}
.feature-band .perks.text b{font-family:Archivo;font-size:19px;font-weight:700;margin-bottom:6px}

.feature-band .perks{display:flex;justify-content:center;gap:clamp(18px,4vw,56px);flex-wrap:wrap;margin-top:34px}
.feature-band .perks div{font-family:Archivo;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.feature-band .perks b{display:block;font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;color:#fff;text-transform:none;margin-bottom:4px}

/* 4. Instagram: edge-to-edge grid, no gutters */
.ig-bleed{display:grid;grid-template-columns:repeat(6,1fr);margin-top:34px}
.ig-bleed a{position:relative;display:block;aspect-ratio:1;overflow:hidden}
.ig-bleed img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.ig-bleed a::after{content:"";position:absolute;inset:0;background:rgba(30,28,25,0);transition:background .3s ease}
.ig-bleed a:hover img{transform:scale(1.06)}
.ig-bleed a:hover::after{background:rgba(30,28,25,.3)}

/* ---------- corporate & private events ---------- */

/* ---------- community / instagram ---------- */
.ig-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ig-handle{
  font-family:Archivo;font-weight:600;font-size:14px;letter-spacing:.04em;
  color:var(--court);text-decoration:none;
}
.ig-handle:hover{text-decoration:underline}

.ig-foot{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- find us ---------- */
.find{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;margin-top:26px;align-items:start}
.map{
  background:var(--white);border:1px solid var(--ink-12);border-radius:var(--r);
  height:300px;overflow:hidden;position:relative;
}
.map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.9)}
.addr{font-size:16px;line-height:1.7}
.travel{margin-top:20px;display:grid;gap:12px}
.travel div{background:var(--white);border:1px solid var(--ink-12);border-radius:10px;padding:14px 18px;font-size:14.5px}
.travel b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);font-weight:600;margin-bottom:3px}
.hours-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px}
.hours-table td{padding:9px 0;border-bottom:1px solid var(--ink-12)}
.hours-table td:last-child{text-align:right;font-weight:500}

/* ---------- sticky book bar (mobile) ---------- */
.stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
  align-items:center;justify-content:center;gap:20px;background:var(--ink);
  padding:12px clamp(16px,4vw,32px);
  box-shadow:0 -6px 24px rgba(0,0,0,.22);
}
.stickycta .label{
  color:rgba(255,255,255,.72);font-size:14px;line-height:1.3;text-align:right;
}
.stickycta .label b{display:block;color:#fff;font-family:Archivo;font-size:15px;letter-spacing:-.01em}
.stickycta .btn{white-space:nowrap}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.7);padding:44px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer strong{color:#fff;font-family:Archivo}
.foot-clubs{display:flex;flex-wrap:nowrap;gap:clamp(12px,2vw,22px);margin-top:12px}
.logo-mark{margin-right:9px;display:block;flex-shrink:0}
.foot-clubs a{
  display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;
  color:#fff;font-weight:500;transition:color .15s ease;
}
.foot-clubs a:hover{color:var(--primary)}
.foot-clubs .logo-mark{margin-right:7px}

@media (max-width:900px){
  .hero-grid,.find,.owned{grid-template-columns:1fr}
  .usp{min-width:104px}
  .hero-bg::after{background:linear-gradient(to top,rgba(8,24,54,.88) 12%,rgba(8,24,54,.62) 70%,rgba(8,24,54,.50) 100%)}
  .hero.has-image{min-height:auto}
  .price-grid{grid-template-columns:1fr}
  .kit,.club-pick{grid-template-columns:1fr}
  .tiles,.split{grid-template-columns:1fr}
  .tile + .tile{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .split{min-height:0}
  .split .media{min-height:300px}
  .split.rev .media{order:0}
  .ig-bleed{grid-template-columns:repeat(3,1fr)}
  .panels{flex-direction:column;height:auto}
  .panel,.panel.active{flex:none;height:440px;cursor:default}
  .panel + .panel{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .panel .more{grid-template-rows:1fr;opacity:1}
  .panel h3,.panel.active h3{font-size:36px;transform:none}
  .panel .inner{width:auto;right:0}
  .panel .hint{display:none}
  .basics{grid-template-columns:1fr}
  .jstep{grid-template-columns:44px 1fr;gap:16px}
  .jnum{width:44px;height:44px;font-size:18px}
  .jstep::before{left:21px;top:44px}
  
  
  
  .stickycta .label{display:none}
  .stickycta .btn{flex:1;justify-content:center;padding:13px 12px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}

/* ================== COURT LINES: SUB-BRAND SYSTEM ================== */
.court-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;--tone:#D1E000;--w:.5}
.court-lines g{fill:none;stroke:#fff;stroke-opacity:var(--w);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.court-lines .net{stroke-dasharray:0 .016;stroke-width:5}
.court-lines .acc{stroke:var(--tone);stroke-opacity:.95;stroke-width:5}
.court-lines .net.acc{stroke-width:6}

/* 1. photo overlays */
.hero-bg .court-lines{
  --w:.42;
  -webkit-mask-image:linear-gradient(90deg,transparent 34%,#000 62%);
          mask-image:linear-gradient(90deg,transparent 34%,#000 62%);
}
.hero-bg .court-lines g{stroke-width:4.5}
.hero-bg .court-lines .acc{stroke-width:6}
@media (max-width:900px){
  .hero-bg .court-lines{-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 55%);mask-image:linear-gradient(180deg,#000 0%,transparent 55%)}
}
.panel .court-lines{--w:.4}
.split .media .court-lines{--w:.55}
.feature-band .court-lines{
  --w:.38;
  -webkit-mask-image:radial-gradient(ellipse 46% 60% at 50% 50%,transparent 55%,#000 100%);
          mask-image:radial-gradient(ellipse 46% 60% at 50% 50%,transparent 55%,#000 100%);
}

/* the club mark is the Advantage logo, always in lime */
[data-mark]{display:inline-flex;align-items:center}
[data-mark] .logo-mark,.foot-clubs .logo-mark{color:var(--primary)}

/* 3. faint texture on light surfaces */
section.texture{position:relative;overflow:hidden}
section.texture > :not(.court-lines){position:relative;z-index:1}
.court-lines.tex{
  height:min(100%,720px);
  -webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 85%);
          mask-image:linear-gradient(90deg,transparent 40%,#000 85%);
}
.court-lines.tex g{stroke:var(--ink);stroke-opacity:.08;stroke-width:3.5}
.court-lines.tex .acc{stroke:var(--tone);stroke-opacity:.55;stroke-width:5}

/* 4. motion */
.hero-bg .court-lines polyline:not(.net){stroke-dasharray:1;stroke-dashoffset:1;animation:cl-draw 1.6s cubic-bezier(.3,.7,.2,1) .25s forwards}
.hero-bg .court-lines .acc{animation-delay:.9s}
@keyframes cl-draw{to{stroke-dashoffset:0}}
/* panels: the court is half drawn until you choose the club */
.panel .court-lines polyline:not(.net){stroke-dasharray:1;stroke-dashoffset:.62;transition:stroke-dashoffset 1s cubic-bezier(.3,.7,.2,1)}
.panel.active .court-lines polyline:not(.net){stroke-dashoffset:0}
/* tiles: the lines drift a touch as the photo zooms */
.tile .court-lines{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.tile:hover .court-lines{transform:translate(-14px,8px)}
@media (prefers-reduced-motion:reduce){
  .hero-bg .court-lines polyline,.panel .court-lines polyline{animation:none;stroke-dashoffset:0;transition:none}
  .tile:hover .court-lines{transform:none}
}

/* layering: lines above photo and scrim (tones stay true), below the words */
.hero-bg .court-lines,.panel > .court-lines,.tile > .court-lines,.feature-band > .court-lines{z-index:1}
.panel .inner,.tile .inner,.feature-band .inner{z-index:2}
.hero .wrap{position:relative;z-index:2}
/* keep lines out from behind the copy at the foot of panels and tiles */
.panel > .court-lines,.tile > .court-lines{
  -webkit-mask-image:linear-gradient(to top,transparent 30%,#000 64%);
          mask-image:linear-gradient(to top,transparent 30%,#000 64%);
}

/* ---------- contact page ---------- */

.loc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.loc-card{background:var(--white);border:1px solid var(--ink-12);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.loc-card .shot{aspect-ratio:16/9;background:var(--ink-12);background-size:cover;background-position:center}
.loc-card .body{padding:24px;display:flex;flex-direction:column;flex:1}
.loc-card .region{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}
.loc-card h3{font-family:Archivo;font-size:26px;font-weight:700;text-transform:uppercase;margin:4px 0 10px;line-height:1.05}
.loc-card address{font-style:normal;font-size:15px;line-height:1.65;color:var(--ink-70);min-height:calc(5 * 1.65em)}
.loc-card dl{margin:16px 0 0;font-size:14.5px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
.loc-card dt{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);padding-top:3px}
.loc-card dd{margin:0}
.loc-card dd a{color:var(--court);text-decoration:none;overflow-wrap:anywhere}
.loc-card dd a:hover{text-decoration:underline}
.loc-card .acts{display:flex;gap:8px;margin-top:auto;padding-top:18px;border-top:1px solid var(--ink-12)}
.loc-card .acts .btn{flex:1;justify-content:center;white-space:nowrap;padding:11px 10px;font-size:13.5px}
@media (max-width:900px){ .loc{grid-template-columns:1fr} }

/* ---------- social + app store ---------- */
.social{display:flex;gap:10px;flex-wrap:wrap}
/* No chip behind these. The Instagram glyph is itself a rounded square, so any
   square or circular holder around it reads as a second, doubled outline. */
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:0;background:none;color:#fff;
  transition:color .15s ease,transform .15s ease;
}
.social a:hover{color:var(--primary);transform:translateY(-2px)}
.social svg{width:24px;height:24px;fill:currentColor}

/* Club Instagram accounts. Pills rather than bare glyphs, because three
   identical Instagram marks in a row are indistinguishable without the name. */
.club-social{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.club-social a{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  padding:11px 20px 11px 16px;border-radius:99px;
  border:1.5px solid rgba(255,255,255,.4);color:#fff;
  font-family:Archivo;font-weight:600;font-size:15px;letter-spacing:.01em;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.club-social a span{line-height:1}
.club-social svg{width:21px;height:21px;fill:currentColor;flex-shrink:0}
.club-social a:hover{
  background:var(--primary);border-color:var(--primary);color:var(--ink);
  transform:translateY(-2px);
}
@media (max-width:560px){
  .club-social{flex-direction:column;align-items:stretch}
  .club-social a{justify-content:center}
}
/* on light surfaces */

.stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.store-badge{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:#000;border:1px solid rgba(255,255,255,.3);border-radius:9px;
  padding:8px 14px;color:#fff;transition:border-color .15s ease,transform .15s ease;
}
.store-badge:hover{border-color:#fff;transform:translateY(-2px)}
.store-badge svg{width:22px;height:22px;flex-shrink:0}
/* align-items:center lines up the BOXES, and the text box is not what the eye
   reads. The small line contributes cap height at the top while the "App Store"
   line contributes a descender's worth of empty space at the bottom, so the
   visible ink sat 1.3px below the badge's centre while the icon sat on it.
   Measured against the real glyph bounds of both badges; the icons are within
   0.2px of centre on their own and are left alone. */
.store-badge .t{display:block;line-height:1.15;transform:translateY(-1.3px)}
.store-badge .t small{display:block;font-size:9px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.store-badge .t b{display:block;font-family:Archivo;font-size:15px;font-weight:600;letter-spacing:-.01em}
/* on light surfaces the badge keeps its black field, per store guidelines */

footer .foot-col h3,footer .foot-col h4{
  font-family:Archivo;font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:12px;
}
footer .foot-col{max-width:280px}
footer .foot-col:first-child{max-width:none}
footer .foot-col:nth-of-type(3){max-width:420px}
footer .legal{width:100%;border-top:1px solid rgba(255,255,255,.14);padding-top:20px;margin-top:8px;font-size:13px;color:rgba(255,255,255,.55)}
footer .legal a{color:rgba(255,255,255,.78);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);cursor:pointer}
footer .legal a:hover{color:#fff;border-bottom-color:#fff}

/* ---------- policy pages: privacy, terms, safeguarding ---------- */
.hero.policy-hero{background:var(--ink);min-height:0;padding:clamp(52px,8vh,84px) 0 clamp(34px,5vh,52px)}
.hero.policy-hero h1{font-size:clamp(34px,5.5vw,62px)}
.hero.policy-hero .intro{max-width:56ch;margin-top:16px}
.policy .wrap{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(28px,5vw,64px);
  align-items:start;padding-top:clamp(40px,6vw,68px);padding-bottom:clamp(52px,8vw,96px)}
.policy-body{max-width:72ch;font-size:16px;line-height:1.65;color:var(--ink-70)}
.policy-body h2{font-family:Archivo;font-size:clamp(21px,2.4vw,27px);font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin:38px 0 12px;text-wrap:balance}
.policy-body h2:first-child{margin-top:0}
.policy-body h3{font-family:Archivo;font-size:18px;font-weight:600;color:var(--ink);margin:28px 0 10px}
.policy-body p{margin:0 0 14px}
.policy-body a{color:var(--court);text-decoration:underline;text-underline-offset:2px}
.policy-list{margin:0 0 18px;padding:0;list-style:none}
.policy-list li{position:relative;padding-left:20px;margin-bottom:9px}
.policy-list li::before{content:"";position:absolute;left:3px;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--primary)}
.policy-defs{margin:0 0 18px}
.policy-defs dt{font-family:Archivo;font-weight:700;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--court);margin-top:16px}
.policy-defs dd{margin:4px 0 0}
.policy-contact{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0 0 18px;
  background:var(--paper);border:1px solid var(--ink-12);border-radius:var(--r);padding:18px 20px}
.policy-contact dt{font-family:Archivo;font-weight:600;color:var(--ink)}
.policy-contact dd{margin:0}
.policy-people{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.policy-people li{background:var(--paper);border:1px solid var(--ink-12);border-radius:99px;
  padding:7px 15px;font-size:14.5px;color:var(--ink)}
.policy-note{background:var(--paper);border-left:3px solid var(--primary);border-radius:0 var(--r) var(--r) 0;
  padding:16px 20px;margin:24px 0 0;color:var(--ink);font-size:15.5px}
.policy-updated{margin-top:30px;padding-top:16px;border-top:1px solid var(--ink-12);
  font-size:14px;color:var(--ink-45)}
.policy-aside{position:sticky;top:calc(var(--probar,74px) + 20px);background:var(--paper);
  border:1px solid var(--ink-12);border-radius:var(--r);padding:20px 22px}
.policy-aside h3,.policy-aside h4{font-family:Archivo;font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-45);margin:0 0 12px}
.policy-aside ul{margin:0;padding:0;list-style:none}
.policy-aside li{border-top:1px solid var(--ink-12);padding:11px 0}
.policy-aside li:first-child{border-top:0;padding-top:0}
.policy-aside a{color:var(--ink);text-decoration:none;font-size:15px;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.policy-aside a::after{content:"\2192";color:var(--court);opacity:.65}
.policy-aside a:hover{color:var(--court)}

/* the safeguarding concern flow: respond, refer, record */
.flow{margin:6px 0 22px;display:grid;gap:14px}
.flow-step{background:var(--paper);border:1px solid var(--ink-12);border-radius:var(--r);padding:18px 20px}
.flow-tag{display:inline-block;font-family:Archivo;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);background:var(--primary);border-radius:99px;
  padding:4px 12px;margin-bottom:10px}
.flow-step p{margin:0}
.flow-branches{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px}
.flow-branch{background:var(--white);border:1px solid var(--ink-12);border-radius:var(--r);padding:15px 17px}
.flow-branch.urgent{border-color:var(--signal);box-shadow:inset 3px 0 0 var(--signal)}
.flow-branch h3,.flow-branch h4{font-family:Archivo;font-size:15px;font-weight:700;color:var(--ink);margin:0 0 9px}
.flow-branch.urgent h3,.flow-branch.urgent h4{color:var(--signal)}
.flow-branch ul{margin:0;padding-left:18px}
.flow-branch li{margin-bottom:7px}
.faq-list{margin:4px 0 0;padding-left:20px}
.faq-list li{margin-bottom:6px}
@media (max-width:900px){
  .policy .wrap{grid-template-columns:1fr}
  .policy-aside{position:static}
  .flow-branches{grid-template-columns:1fr}
}

/* ---------- club page: facilities as image-led blocks ---------- */
.offer{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.offer-card{
  background:var(--white);border:1px solid var(--ink-12);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
}
.offer-card .shot{aspect-ratio:4/3;background:var(--ink-12);background-size:cover;background-position:center;overflow:hidden;position:relative}
.offer-card .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,28,25,.35),transparent 55%)}
.offer-card .body{padding:22px;display:flex;flex-direction:column;gap:7px;flex:1}
.offer-card h3,.offer-card h4{font-family:Archivo;font-size:19px;font-weight:700;letter-spacing:-.01em}
.offer-card p{margin:0;font-size:14.5px;color:var(--ink-70);flex:1}
.offer-card .tag{font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--court)}
.offer-card .price{font-family:Archivo;font-weight:700;font-size:15px;color:var(--ink);margin-top:2px}

/* ---------- club page: coaching ---------- */
.coach-list{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px}
.coach-list li{padding:16px 0;border-top:1px solid rgba(255,255,255,.18)}
.coach-list b{display:block;font-family:Archivo;font-size:18px;letter-spacing:-.01em;margin-bottom:4px;color:#fff}
.coach-list span{font-size:14.5px;color:rgba(255,255,255,.74)}

@media (max-width:900px){
  .offer{grid-template-columns:1fr}
  .coach-list{grid-template-columns:1fr}
}

/* ---------- rules of padel ---------- */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
.rule-card{
  background:var(--white);border:1px solid var(--ink-12);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
}
/* fixed ratio, so the scoring panel matches the three court diagrams */
.rule-card .dia{
  background:var(--ink);padding:20px 24px;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:2/1;min-height:190px;
}
.rule-card .dia svg{width:100%;max-width:340px;max-height:100%;height:auto;display:block}
.rule-card .body{padding:24px;display:flex;flex-direction:column;flex:1}
.rule-card .n{
  font-family:Archivo;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--court);
}
.rule-card h3,.rule-card h4{font-family:Archivo;font-size:22px;font-weight:700;letter-spacing:-.01em;margin:5px 0 14px}
.rule-card ul{list-style:none;padding:0;margin:0;flex:1}
.rule-card li{
  padding:11px 0;border-top:1px solid var(--ink-12);
  font-size:15px;line-height:1.55;color:var(--ink-70);
  display:grid;grid-template-columns:22px 1fr;gap:10px;
}
.rule-card li::before{
  content:"";width:9px;height:9px;margin-top:7px;border-radius:2px;
  background:var(--primary);
}
.rule-card li b{color:var(--ink);font-weight:600}
.rules-foot{margin-top:24px;font-size:14.5px;color:var(--ink-70)}
.rules-foot a{color:var(--court);font-weight:600}
/* diagram ink */
.dia .court{fill:none;stroke:#fff;stroke-opacity:.5;stroke-width:2;vector-effect:non-scaling-stroke}
.dia .net{fill:none;stroke:#fff;stroke-opacity:.75;stroke-width:2.5;stroke-dasharray:3 4}
.dia .zone{fill:var(--primary);fill-opacity:.16;stroke:var(--primary);stroke-opacity:.8;stroke-width:2}
.dia .bad{fill:var(--signal);fill-opacity:.16;stroke:var(--signal);stroke-opacity:.85;stroke-width:2}
.dia .path{fill:none;stroke:var(--primary);stroke-width:2.6;stroke-linecap:round}
.dia .dot{fill:var(--primary)}

.score{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:16px 0}
.score span{
  font-family:Archivo;font-weight:700;font-size:clamp(17px,2.4vw,24px);color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  border-radius:9px;padding:9px 14px;
}
.score span.win{background:var(--primary);border-color:var(--primary);color:var(--ink)}
.score i{font-style:normal;color:rgba(255,255,255,.4);font-size:15px}
@media (max-width:900px){
  .rules{grid-template-columns:1fr}
  /* keep the score progression on one line */
  .score{gap:6px}
  .score span{font-size:15px;padding:7px 10px}
  .score i{font-size:13px}
}

/* ======================= BRAND PALETTE LAYER =======================
   Lime #D1E000: primary buttons and headlines.
   Blue #5A9AF8: secondary buttons, highlights, icons.
   Orange: secondary buttons (tours, first-timers) and small highlights.
   Warm white surfaces; warm black kept for text and one or two moments. */

/* headlines: lime on photo and dark, lime marker on light */
.hero h1,.feature-band h2,.tile h3,.panel.active h3{color:var(--primary)}
.hl{
  background:linear-gradient(transparent 58%,rgba(209,224,0,.75) 58%,rgba(209,224,0,.75) 90%,transparent 90%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em;
}
/* kickers and eyebrows pick up the blue */
.club-kicker,.feature-band .kicker,.panel .region{color:var(--blue)}
.eyebrow{color:var(--court)}
.eyebrow::after{background:rgba(90,154,248,.35)}

/* buttons */
.btn-outline{border-color:var(--blue);color:var(--ink);background:var(--white)}
.btn-outline:hover{background:var(--blue-tint);border-color:var(--blue)}
.btn-light{border-color:var(--blue);color:#fff}
.btn-light:hover{background:rgba(90,154,248,.22);border-color:var(--blue)}

.chip[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:var(--ink)}

/* icons and ticks in the lighter brand blue */
.usp svg{stroke:var(--blue)}

/* subnav */
.subnav a:first-child{margin-left:auto}
.subnav a:last-child{margin-right:auto}
/* brand blue band, white text */
.subnav{background:var(--blue);border-top:0;border-bottom:0}
.subnav a{color:rgba(255,255,255,.88);font-weight:700}
.subnav a:hover{color:#fff}
.subnav a.active{color:#fff;border-bottom-color:#fff}

/* sticky footer: white bar */
.stickycta{background:var(--white);border-top:1px solid var(--ink-12);box-shadow:0 -6px 24px rgba(30,28,25,.10)}
.stickycta .label{color:var(--ink-70)}
.stickycta .label b{color:var(--ink)}

/* warm split replaces the dark corporate block */
.split.warm .content{background:var(--sand)}
.split.warm .list li{border-color:rgba(30,28,25,.14)}

/* numbered badges: blue tint rather than black */
.jnum,.basic .b-num{background:var(--blue-tint);color:var(--court)}

/* blue bands become light blue with dark text */
.band{background:var(--blue-tint);color:var(--ink)}
.band .eyebrow{color:var(--court)}
.band .eyebrow::after{background:rgba(90,154,248,.35)}
.band .lede{color:var(--ink-70)}

/* Tide House highlight block in brand blue */
.owned{background:var(--blue);color:var(--ink)}
.owned p{color:rgba(30,28,25,.8)}
.owned .badge{background:rgba(255,255,255,.5);color:var(--ink)}

/* ---------------------------------------------------------------------------
   PHOTO SCRIMS. This block is the one in force; it overrides the defaults set
   with each component above, so change the numbers here.

   Three layers over every photographic panel: a blue multiply on the image
   itself, a blue screen that lifts the shadows, and a navy scrim that carries
   the text.

   The scrim is a pool, not a wash. Earlier versions darkened the whole frame
   to protect one paragraph, which is why the banners read as heavy. This
   version puts an ellipse of darkness behind the copy and leaves the rest of
   the photograph almost untouched, so the picture is roughly twice as bright
   while the text is more legible than before, not less.

   Measured across all six banner photographs, worst case, against the
   brightest 2% of pixels behind each piece of text:

                     before    now     WCAG AA
     hero h1          4.0:1    4.1:1     3:1
     hero intro       4.7:1    6.3:1     4.5:1
     band h2          5.5:1    4.5:1     3:1
     band paragraph   5.0:1    6.4:1     4.5:1
     mean luminance   0.059    0.118    (higher is lighter)

   The pool's geometry is tied to where the copy sits: 27% across and 46% down
   on the hero, dead centre on the band. Move the copy and the pool wants
   moving with it. Re-measure rather than eyeball if these change: the
   brightest photograph in the set behaves very differently from the darkest.
   --------------------------------------------------------------------------- */
.hero-bg,.feature-band > .bg,.panel,.tile > .bg{
  background-color:rgba(47,107,212,.10);background-blend-mode:multiply;isolation:isolate;
}
/* .panel::before carries a copy of the panel's background for the push-in
   scale. background-blend-mode is not part of the background shorthand and is
   not inherited, so without this line the copy paints the photograph flat over
   the tint and the panels alone stay warm black. */
.panel::before{background-blend-mode:multiply}
.hero-bg::before,.feature-band > .bg::before,.tile > .bg::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:#1E4FA8;mix-blend-mode:screen;opacity:.48;
}
.hero-bg::after{
  z-index:1;
  background:
    radial-gradient(44% 112% at 27% 46%,
      rgba(8,24,54,.80) 0%, rgba(8,24,54,.688) 45%, rgba(8,24,54,.336) 75%, rgba(8,24,54,0) 100%),
    linear-gradient(to top,rgba(8,24,54,.05) 0%,rgba(8,24,54,0) 40%);
}
.feature-band::after{
  background:radial-gradient(48% 78% at 50% 50%,
    rgba(8,24,54,.80) 0%, rgba(8,24,54,.688) 45%, rgba(8,24,54,.336) 75%, rgba(8,24,54,0) 100%);
}
.tile::after{background:linear-gradient(to top,rgba(8,24,54,.80) 0%,rgba(8,24,54,.28) 45%,rgba(8,24,54,0) 80%)}
.panel::after{background:linear-gradient(to top,rgba(8,24,54,.80) 0%,rgba(8,24,54,.32) 40%,rgba(8,24,54,0) 72%)}
.panel:not(.active)::after{background:linear-gradient(to top,rgba(8,24,54,.74) 0%,rgba(8,24,54,.24) 55%,rgba(8,24,54,.10) 100%)}
.panel:not(.active):hover::after{background:linear-gradient(to top,rgba(8,24,54,.68) 0%,rgba(8,24,54,.15) 55%,rgba(8,24,54,.02) 100%)}
.panels{background:#0A1C3A}
@media (max-width:900px){
  /* The hero stacks and the copy runs the full width, so there is no clear
     half of the frame for the pool to sit in and the scrim has to cover
     everything. That caps how light this can go: the values below are the
     lightest that still pass, at 4.4:1 on the headline and 4.6:1 on the intro.
     The multiply goes up and the screen comes down to match, because on a
     full-width scrim the screen lifts the backdrop behind the text too. */
  .hero-bg{background-color:rgba(47,107,212,.22)}
  .hero-bg::before{opacity:.34}
  .hero-bg::after{background:linear-gradient(to top,rgba(8,24,54,.88) 0%,rgba(8,24,54,.60) 52%,rgba(8,24,54,.44) 100%)}
}

/* ===========================================================================
   PADEL MATES BOOKING WIDGET
   Every colour here is a literal, not one of our custom properties. The
   widget's own Tailwind theme redefines --primary inside its subtree as raw
   HSL channels ("151 82% 59%"), so var(--primary) resolved to an invalid
   colour and the whole declaration was dropped. That is why the Sign In
   button came out transparent rather than lime.
   The widget brings its own stylesheet and Tailwind. Everything here is the
   frame around it: our card, our spacing, our loading state. Tailwind's
   preflight is switched off on the pages that load it, so it cannot reset
   the rest of the site.
   =========================================================================== */
.pm-shell{
  position:relative;margin-top:26px;background:#fff;
  border:1px solid rgba(30,28,25,.12);border-radius:14px;
  padding:clamp(10px,2vw,22px);min-height:320px;overflow:hidden
}
.pm-shell #test{position:relative;z-index:1}
.pm-shell #test:empty{display:none}

.pm-loading{
  position:absolute;inset:0;display:flex;gap:12px;
  align-items:center;justify-content:center;
  font:500 15px/1.4 Inter,system-ui,sans-serif;color:rgba(30,28,25,.50);
  background:#fff;z-index:2
}
.pm-loading[hidden]{display:none}
.pm-spin{
  width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(30,28,25,.12);border-left-color:#D1E000;
  animation:pm-spin 1s linear infinite
}
@keyframes pm-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .pm-spin{animation:none} }

.pm-note{margin:14px 0 0;font:400 13px/1.5 Inter,system-ui,sans-serif;color:rgba(30,28,25,.50)}
.pm-fallback{margin:0;padding:40px 20px;text-align:center;color:rgba(30,28,25,.72)}
.pm-fallback a{color:#2A64C4;font-weight:600}

/* The widget ships its own type at small sizes; keep it from inheriting ours */
.pm-shell *{box-sizing:border-box}

/* The widget's own footer bar. Padel Mates' "Powered by" link is hidden at the
   client's request, which left a full-width dark strip with one button stranded
   on the left. The bar itself goes, and Sign In is centred and brought onto
   brand. !important throughout because these fight Tailwind utility classes
   set on the elements themselves. */
.pm-shell footer a[href*="padelmates"]{display:none !important}
.pm-shell footer{
  background:none !important;
  border-top:0 !important;
  justify-content:center !important;
  height:auto !important;
  min-height:0 !important;
  padding:14px 0 4px !important;
}
.pm-shell footer #addPlayerBtn{
  background:#D1E000 !important;
  color:#1E1C19 !important;
  border-radius:999px !important;
  padding:11px 22px !important;
  font:700 14px/1 Archivo,system-ui,sans-serif !important;
  letter-spacing:.01em !important;
  transition:background .15s ease !important;
}
.pm-shell footer #addPlayerBtn:hover{background:#BBC800 !important}

/* Padel Mates hardcode their navy on primary buttons as a Tailwind class
   rather than taking it from the colour config, so the config cannot reach
   them. This catches every one of them inside the widget, including the Sign
   In that appears in the booking modal and not just the one in the footer. */
.pm-shell [class*="bg-[#000b29]"],
.pm-shell [class*="bg-[#000B29]"]{
  background-color:#D1E000 !important;
  color:#1E1C19 !important;
}
.pm-shell [class*="bg-[#000b29]"]:hover,
.pm-shell [class*="bg-[#000B29]"]:hover{background-color:#BBC800 !important}
.pm-shell [class*="text-[#000b29]"],
.pm-shell [class*="text-[#000B29]"]{color:#1E1C19 !important}

/* ===========================================================================
   APP DOWNLOAD BAND
   One thin row above the footer: the pitch, the three steps, the two badges.
   Replaces the tall square block, which pushed the footer off most screens.
   =========================================================================== */
.appband{background:#1E1C19;color:#fff;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.appband .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,2vw,30px);flex-wrap:nowrap
}
.appband-lead{min-width:0;flex:0 0 auto}
.appband-lead strong{
  display:block;white-space:nowrap;
  font:700 16px/1.2 Archivo,system-ui,sans-serif;color:#D1E000;letter-spacing:.01em
}

.appband-steps{display:flex;align-items:center;justify-content:center;
  flex:0 1 auto;min-width:0;flex-wrap:nowrap;
  gap:clamp(12px,1.6vw,24px);margin:0;padding:0;list-style:none}
/* keep the two badges side by side; without this the middle column squeezes
   them and they stack, which doubles the height of the band */
.appband #appStores{flex:0 0 auto}
.appband .stores{flex-wrap:nowrap}
.appband-steps li{
  display:flex;align-items:center;gap:9px;
  font:500 14px/1.2 Inter,system-ui,sans-serif;color:rgba(255,255,255,.9);white-space:nowrap
}
.appband-steps b{
  display:inline-flex;align-items:center;justify-content:center;
  width:23px;height:23px;border-radius:50%;flex:0 0 23px;
  background:#D1E000;color:#1E1C19;font:700 12px/1 Archivo,system-ui,sans-serif
}

@media (max-width:1180px){
  .appband .wrap{flex-wrap:wrap;justify-content:center;text-align:center}
  .appband-steps{order:3;width:100%;justify-content:center;flex-wrap:wrap}
}
@media (max-width:700px){
  .appband{padding:20px 0}
  .appband .wrap{gap:16px}
  .appband-steps{gap:10px 18px}
  .appband-steps li{font-size:13px}
}

/* ===========================================================================
   HUBSPOT ENQUIRY FORM
   HubSpot's embed renders the form inside a cross-origin iframe, so none of
   the site's styling reaches the fields. Only the frame around it is ours.
   Brand styling for the form itself has to be set in HubSpot's own form
   editor. The min-height stops the iframe collapsing before HubSpot posts its
   height back and resizes it.
   =========================================================================== */
.hsform{
  margin-top:26px;background:var(--white);
  border:1px solid var(--ink-12);border-radius:var(--r);
  padding:clamp(16px,2.4vw,28px);
}
.hsform .hs-form-frame{min-height:620px}
.hsform iframe{width:100%;border:0;display:block}
.hsform .pm-fallback{margin:0;padding:30px 10px}

/* Icons inside the corporate format cards. The icon set is stroke-based, so
   without these it renders as a solid black fill at its natural size. */
.basic .ic{margin-bottom:14px;line-height:0}
.basic .ic svg{width:30px;height:30px;stroke:var(--court);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* icons sitting inside outline buttons (Instagram, WhatsApp) */
.btn > svg{width:17px;height:17px;flex:0 0 17px;fill:currentColor}

/* the logo takes the slack so the nav and the booking CTA sit flush right */
.site-head .logo{margin-right:auto}

/* Between 900 and 1100 the full nav plus the booking pill is a squeeze, so the
   header closes up rather than running past the viewport edge. */
@media (max-width:1100px){
  .site-head .wrap{gap:clamp(10px,1.4vw,20px)}
  .site-nav{gap:clamp(2px,1vw,12px)}
}

/* The nav collapses at 1000px rather than 900: between 900 and 1000 the five
   links plus the booking pill ran past the right edge of the viewport. The
   rest of the mobile layout still switches at 900. */
@media (max-width:1000px){
  /* The links move into a toggled panel. The booking pill comes out of the bar
     here: beside the hamburger it crowded the logo, and Book a court is already
     on screen twice over, at the foot of the open panel and in the sticky bar
     pinned to the bottom of the viewport. */
  .nav-toggle{display:inline-flex}
  a.nav-cta{display:none}
  .site-head .wrap{height:64px;position:relative}
  .logo{font-size:18px}
  .logo #logoMark{width:36px;height:36px}
  .logo #logoMark .logo-mark{height:23px}
  .site-nav{
    position:absolute;top:100%;left:0;right:0;z-index:70;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--white);border-top:1px solid var(--ink-12);
    box-shadow:0 20px 44px rgba(30,28,25,.16);
    padding:4px var(--pad) 18px;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .26s ease,visibility .26s ease;
  }
  .site-nav.open{max-height:min(74vh,540px);overflow:auto;visibility:visible}
  .site-nav a:not(.nav-book-mobile){
    display:block;padding:15px 0;font-size:16px;
    border-bottom:1px solid var(--ink-12);
  }
  .site-nav a::after{display:none}
  .site-nav a.nav-book-mobile{
    display:inline-flex;align-items:center;justify-content:center;
    margin-top:16px;padding:14px 22px;border-radius:99px;
    background:var(--primary);color:var(--ink);text-decoration:none;
    font:700 15px/1 Archivo,system-ui,sans-serif;letter-spacing:.01em;
  }
}

/* Below 560 the bar is just the disc, the wordmark and the hamburger, so it
   only needs closing up rather than the rescue job it needed when the booking
   pill was still in there. */
@media (max-width:560px){
  .site-head .wrap{gap:10px}
  .logo{font-size:16px}
  .logo #logoMark{width:32px;height:32px}
  .logo #logoMark .logo-mark{height:21px}
  .nav-toggle{width:36px;margin-left:2px;padding:0 7px}
}
@media (max-width:380px){
  .logo{font-size:15px}
}

/* The wordmark used to be dropped below 360 to keep the hamburger on screen.
   With the booking pill out of the mobile bar there is room for it at every
   width down to 320, so it stays. */

/* a single-sentence band line that should hold one line on desktop; it still
   wraps naturally once the viewport is too narrow for it */
.feature-band p.wide{max-width:72ch}