/* ==========================================================================
   PADEL IN — stylesheet
   Sections are numbered. Search for the number to jump to what you need.
   ========================================================================== */

/* --- 1. BRAND TOKENS — change a colour here, it changes everywhere -------- */
:root{
  --black:   #0b0b0b;   /* brand black */
  --off:     #f1f1f0;   /* brand off-white */
  --white:   #ffffff;
  --lime:    #aeba36;   /* the green from the logo ball */
  --lime-br: #c8d948;   /* brighter lime — hover, and small text on black */
  --grey:    #5f5f5f;   /* body text on light */
  --grey-lt: #9d9d9d;   /* body text on black */
  --hair-d:  #2a2a2a;   /* hairline on black */
  --hair-l:  #d8d8d5;   /* hairline on light */

  --hdr-h: 76px;                       /* header height — the hero tucks under it */
  --shell: min(1280px, 100% - 3rem);
  --edge: max(1.5rem, calc((100vw - 1280px) / 2));   /* gap between the screen edge and the text column */
  --f-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 6px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--black); color:var(--white);
  font-family:var(--f-body); font-size:1.0625rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
[hidden]{ display:none !important; }   /* must outrank the display rules below */
::selection{ background:var(--lime); color:#0b0b0b; }
:focus-visible{ outline:2px solid var(--lime-br); outline-offset:3px; }

.shell{ width:var(--shell); margin-inline:auto; }

/* --- 2. TYPE -------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  line-height:1.03; letter-spacing:-.02em; margin:0; text-wrap:balance;
}
h1{ font-size:clamp(2.5rem, 6.2vw, 5.2rem); }
h2{ font-size:clamp(1.9rem, 4vw, 3.2rem); }
h2.h-xl{ font-size:clamp(2.6rem, 7vw, 5.6rem); }   /* the oversized section heading */
h3{ font-size:clamp(1.05rem, 1.6vw, 1.25rem); letter-spacing:0; }
p{ margin:0; }

.eyebrow{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.26em; font-size:.7rem; color:var(--lime); margin:0;
}
.rule{ width:56px; height:2px; background:currentColor; opacity:.35; margin:1rem 0 1.2rem; }
.lede{ font-size:clamp(1rem,1.25vw,1.12rem); max-width:62ch; }

/* --- 3. SECTION GROUNDS --------------------------------------------------- */
.band{ padding:clamp(3.25rem,5.5vw,5rem) 0; }
.band--tight{ padding:clamp(2.5rem,4vw,3.5rem) 0; }   /* shorter band, less white space */

/* Snug rhythm — used from the Experience band down. Two full-padded bands
   meeting put ~160px of dead space between topics; this roughly halves it so
   the sections read as one flow instead of separate brochure pages. */
.band--snug{ padding:clamp(2.25rem,3.4vw,3rem) 0; }
/* for a band that ENDS on a full-bleed photo strip: let the photo sit almost
   against the next band, so the two topics interlock */
.band--flush{ padding-bottom:clamp(1rem,1.8vw,1.6rem); }
/* only the bottom tightened — for the band where the snug rhythm begins */
.band--snug-b{ padding-bottom:clamp(2.25rem,3.4vw,3rem); }
.band--dark{ background:var(--black); color:var(--white); }
.band--light{ background:var(--off); color:var(--black); }
.band--light .lede, .band--light .muted{ color:var(--grey); }
.band--dark  .lede, .band--dark  .muted{ color:var(--grey-lt); }
.band--light .eyebrow{ color:#6d7621; }

/* --- 3b. BRAND PATTERN ----------------------------------------------------
   The Padel IN diagonal shape, used sparingly as a faint watermark.
   Change --patt-op to make it stronger or weaker everywhere.            */
:root{ --patt-op:.05; --dot-op:.055; }

.has-patt{ position:relative; overflow:hidden; }
.has-patt > .shell{ position:relative; z-index:1; }

.patt{
  position:absolute; pointer-events:none; z-index:0;
  background:no-repeat center/contain; opacity:var(--patt-op);
}

/* the diagonal bars */
.patt--bars{ width:min(620px,52vw); aspect-ratio:900/621; }
.patt--w{ background-image:url("../images/pattern-white.png"); }
.patt--b{ background-image:url("../images/pattern-black.png"); }

/* the single round dot, on its own */
.patt--dot{ width:min(300px,34vw); aspect-ratio:1; opacity:var(--dot-op); }
.patt--dot.patt--w{ background-image:url("../images/circle-white.png"); }
.patt--dot.patt--b{ background-image:url("../images/circle-black.png"); }

/* placements — corners */
.patt--tr{ top:-4%;    right:-6%; }
.patt--tl{ top:-4%;    left:-6%;  transform:scaleX(-1); }
.patt--bl{ bottom:-6%; left:-7%;  transform:rotate(180deg); }
.patt--br{ bottom:-6%; right:-7%; transform:rotate(180deg) scaleX(-1); }

/* placements — running down a side, the bars turned vertical */
.patt--rv{ top:50%; right:-16%; transform:translateY(-50%) rotate(90deg); }
.patt--lv{ top:50%; left:-16%;  transform:translateY(-50%) rotate(-90deg); }

/* dot placements */
.patt--dot.patt--mid-r{ top:10%;   right:-5%; transform:none; }
.patt--dot.patt--mid-l{ bottom:12%; left:-6%; transform:none; }

@media (max-width:760px){
  .patt--bars{ width:78vw; }
  .patt--rv,.patt--lv{ display:none; }   /* side bars get in the way on phones */
}

/* --- 4. LOGO LOCKUPS ------------------------------------------------------ */
.lockup{ height:clamp(38px,4.4vw,58px); width:auto; margin-bottom:1.5rem; }
/* black plate — holds a white logo on a light background */
.plate{ display:inline-block; background:var(--black); padding:1.1rem 1.4rem; margin-bottom:1.5rem; }
.plate img{ height:clamp(34px,4vw,52px); width:auto; }

/* --- 5. BUTTONS ----------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:.8rem; line-height:1;
  padding:1rem 1.7rem; text-decoration:none; border:2px solid transparent;
  cursor:pointer; transition:background .18s, color .18s, border-color .18s;
}
.btn--lime{ background:var(--lime); color:#0b0b0b; }
.btn--lime:hover{ background:var(--lime-br); }
.btn--out-l{ border-color:currentColor; color:var(--white); }
.btn--out-l:hover{ background:var(--white); color:var(--black); }
.btn--out-d{ border-color:var(--black); color:var(--black); }
.btn--out-d:hover{ background:var(--black); color:var(--white); }
.cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem; }

/* --- 6. HEADER ------------------------------------------------------------ */
.hdr{
  position:sticky; top:0; z-index:80;
  background:transparent;                 /* see-through over the hero photo */
  border-bottom:1px solid transparent;
  transition:background .25s, border-color .25s;
}
.hdr[data-stuck="true"]{
  background:rgba(11,11,11,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--hair-d);
}
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:var(--hdr-h); }

/* pull the page up so the hero photo starts at the very top of the screen
   instead of below a black header bar */
main{ margin-top:calc(var(--hdr-h) * -1); }
.hdr__logo img{ height:30px; width:auto; }

.nav{ display:flex; gap:1.9rem; }
.nav a{
  text-decoration:none; font-family:var(--f-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; font-size:.72rem;
  color:var(--grey-lt); transition:color .18s;
}
.nav a:hover{ color:var(--white); }
.hdr .btn{ padding:.8rem 1.25rem; font-size:.72rem; }

.burger{ display:none; width:44px; height:40px; background:none; border:1px solid var(--hair-d); cursor:pointer; padding:0; place-items:center; }
.burger i{ width:18px; height:2px; background:#fff; display:block; position:relative; }
.burger i::before,.burger i::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; }
.burger i::before{ top:-6px; } .burger i::after{ top:6px; }

@media (max-width:1000px){
  .nav,.hdr .btn{ display:none; }
  .burger{ display:grid; }
  .nav[data-open="true"]{
    display:flex; flex-direction:column; gap:1.1rem; position:absolute;
    inset:var(--hdr-h) 0 auto; background:var(--black); border-bottom:1px solid var(--hair-d);
    padding:1.75rem 1.5rem 2.25rem;
  }
  .nav[data-open="true"] a{ font-size:1rem; color:#fff; }
}

/* --- 7. HERO -------------------------------------------------------------- */
.hero{ position:relative; min-height:min(86vh,820px); display:flex; align-items:flex-end; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,11,.80) 0%, rgba(11,11,11,.45) 34%, rgba(11,11,11,.93) 100%);
}
.hero__in{ position:relative; z-index:2; padding:calc(var(--hdr-h) + 2.5rem) 0 2.5rem; width:var(--shell); margin-inline:auto; }
.hero h1{ margin:1rem 0 0; max-width:17ch; }
.hero h1 em{ font-style:normal; color:var(--lime-br); }
.hero .lede{ margin-top:1.5rem; color:#d2d2d2; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hair-d); margin-top:2.6rem; }
.stats > div{ padding:1.25rem 1.25rem 0 0; }
.stats dt{ font-family:var(--f-display); font-weight:800; font-size:clamp(2rem,3.5vw,3rem); line-height:1; font-variant-numeric:tabular-nums; }
.stats dd{ margin:.5rem 0 0; font-family:var(--f-display); font-weight:600; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grey-lt); }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* --- 8. SPLIT LAYOUT ------------------------------------------------------ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split--top{ align-items:start; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }

/* --- 8b. THE "PADEL IN" BAND ----------------------------------------------
   Deck layout: copy on the left, players bleeding off the right edge of the
   screen with no frame, dissolving into the background on their left side. */
.about{ position:relative; overflow:hidden; }
.about__copy{ position:relative; z-index:2; max-width:min(46ch,52%); }
.about__art{
  position:absolute; top:0; bottom:0; right:0; width:52%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 26%);
          mask-image:linear-gradient(90deg, transparent 0, #000 26%);
}
.about__art picture{ display:block; height:100%; }
.about__art img{ width:100%; height:100%; object-fit:cover; object-position:left center; }
@media (max-width:900px){
  .about{ padding-bottom:0; }
  .about__copy{ max-width:none; }
  /* no fixed height on phones — the image shows at its own proportions,
     so neither player gets cropped */
  .about__art{
    position:relative; width:100%; height:auto; margin:2rem 0 0;
    -webkit-mask-image:none; mask-image:none;
  }
  .about__art picture{ height:auto; }
  .about__art img{ height:auto; object-fit:contain; }
}

/* number rows */
.nums{ display:flex; flex-wrap:wrap; gap:1.75rem 3rem; margin-top:2rem; }
.nums dt{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.8rem,3vw,2.6rem); line-height:1; font-variant-numeric:tabular-nums; }
.nums dd{ margin:.35rem 0 0; font-family:var(--f-display); font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; opacity:.62; max-width:17ch; }

/* --- 9. LOCATIONS --------------------------------------------------------- */
/* country jump links — scrolls to a country block, useful on phones where
   the four blocks stack into a long column */
.jumps{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem; }
.jumps a{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:.7rem; line-height:1; text-decoration:none;
  padding:.7rem 1.05rem; border:1px solid var(--hair-d); border-radius:100px;
  color:var(--grey-lt); transition:border-color .18s, color .18s, background .18s;
}
.jumps a:hover, .jumps a:focus-visible{ border-color:var(--lime); color:var(--lime); }
/* the block you jumped to gets a moment of emphasis */
.country:target{ background:#111; box-shadow:inset 3px 0 0 var(--lime); }

.countries{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1px; background:var(--hair-d); border:1px solid var(--hair-d); margin-top:2.25rem; }
.country{ background:var(--black); padding:1.6rem 1.5rem 1.75rem; }
.country__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-bottom:2px solid var(--lime); padding-bottom:.85rem; }
.country__hd h3{ font-size:1.3rem; }
.country__hd span{ font-family:var(--f-display); font-weight:700; font-size:.78rem; letter-spacing:.1em; color:var(--lime); font-variant-numeric:tabular-nums; }
.venues{ list-style:none; margin:1.25rem 0 0; padding:0; }
.venues li{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.62rem 0; border-bottom:1px solid var(--hair-d); font-size:.97rem; }
.venues li:last-child{ border-bottom:0; }
.venues b{ font-weight:500; }
.venues em{ font-style:normal; color:var(--grey-lt); font-variant-numeric:tabular-nums; font-size:.86rem; white-space:nowrap; }

/* right-hand side of a venue row: court count, then an optional Book link */
.v-side{ display:flex; align-items:center; gap:.75rem; flex:none; }
.venues .book{
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; font-size:.62rem; line-height:1; white-space:nowrap;
  padding:.42rem .7rem; border:1px solid var(--lime); border-radius:100px;
  color:var(--lime); text-decoration:none;
  transition:background .18s, color .18s;
}
.venues .book:hover, .venues .book:focus-visible{ background:var(--lime); color:#0b0b0b; }

/* --- 10. SERVICES + GALLERY ----------------------------------------------- */
.services{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair-l); border:1px solid var(--hair-l); margin-top:2.25rem; }
@media (max-width:860px){ .services{ grid-template-columns:repeat(2,1fr); } }
.service{ background:var(--off); padding:1.35rem 1.3rem; transition:background .18s; }
.service:hover{ background:var(--white); }
.service b{ display:block; font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:1.02rem; letter-spacing:-.01em; }
.service span{ display:block; font-family:var(--f-display); font-weight:600; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); margin-top:.2rem; }

.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-top:2rem; }
.gallery img{ width:100%; height:clamp(170px,19vw,260px); object-fit:cover; }
.gallery--3{ grid-template-columns:repeat(3,1fr); }
.gallery--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:860px){ .gallery,.gallery--3{ grid-template-columns:repeat(2,1fr); } }

/* --- 10b. DIAGONAL PHOTO SHAPES -------------------------------------------
   The deck never puts a photo in a plain rectangle: blocks are cut on one
   consistent diagonal, carry one very large rounded corner on their left,
   and run off the edge of the page. This rebuilds that in CSS.

   --h   how tall the strip is
   --sk  how far the diagonal travels sideways (drives the angle)
   --r   the big rounded corner
   --gut the white diagonal gutter between two photos
   -------------------------------------------------------------------------- */
.dstrip{
  --h: clamp(200px, 25vw, 340px);
  --sk: calc(var(--h) * .45);
  --r: calc(var(--h) * .40);
  --gut: 14px;
  display:flex; margin-top:1.75rem;
}
.dstrip img{
  flex:1 1 0; min-width:0; width:100%; height:var(--h);
  object-fit:cover; display:block;
  /* a parallelogram: leading edge slants in, trailing edge slants out */
  clip-path:polygon(var(--sk) 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%);
}
.dstrip img:not(:last-child){ margin-right:calc((var(--sk) * -1) + var(--gut)); }
/* the outer edges stay straight, and carry the big rounded corner */
.dstrip img:first-child{
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%);
  border-bottom-left-radius:var(--r);
}
.dstrip img:last-child{
  clip-path:polygon(var(--sk) 0, 100% 0, 100% 100%, 0 100%);
  border-top-right-radius:var(--r);
}
/* a strip of one keeps both flourishes */
.dstrip img:only-child{
  clip-path:polygon(var(--sk) 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%);
  border-bottom-left-radius:var(--r); border-top-right-radius:var(--r);
}

/* Running off ONE edge is what the deck does — the block bleeds off the page
   on one side and meets the white space on the other, where it carries the
   big rounded corner. Use inside a .shell. */
.bleed-r{ margin-right:calc(var(--edge) * -1); }   /* starts at the text, runs off the right */
.bleed-l{ margin-left:calc(var(--edge) * -1); }    /* starts off the left, ends at the text */
.bleed-r.dstrip img:last-child{ border-top-right-radius:0; }
.bleed-l.dstrip img:first-child{ border-bottom-left-radius:0; }

/* phones: stack, and turn the diagonal to run across instead of down */
@media (max-width:820px){
  .bleed-r{ margin-right:calc(var(--edge) * -1); margin-left:calc(var(--edge) * -1); }
  .bleed-l{ margin-left:calc(var(--edge) * -1); margin-right:calc(var(--edge) * -1); }
  .dstrip{ --h: clamp(180px, 46vw, 240px); --sk: calc(var(--h) * .34); flex-direction:column; }
  .dstrip img{
    clip-path:polygon(0 var(--sk), 100% 0, 100% calc(100% - var(--sk)), 0 100%);
    margin-right:0 !important;
  }
  .dstrip img:not(:last-child){ margin-bottom:calc((var(--sk) * -1) + 10px); }
  .dstrip img:first-child{
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--sk)), 0 100%);
    border-bottom-left-radius:0; border-top-right-radius:var(--r);
  }
  .dstrip img:last-child{
    clip-path:polygon(0 var(--sk), 100% 0, 100% 100%, 0 100%);
    border-bottom-left-radius:var(--r); border-top-right-radius:0;
  }
  .dstrip img:only-child{ clip-path:polygon(0 var(--sk), 100% 0, 100% calc(100% - var(--sk)), 0 100%); }
}

/* single photos in the split layouts — a clean parallelogram on the same
   diagonal as everything else */
.shaped{
  --c: clamp(30px, 5vw, 92px);
  clip-path:polygon(var(--c) 0, 100% 0, calc(100% - var(--c)) 100%, 0 100%);
}
/* only the top corner cut — for a photo that has to sit flush on something
   below it, like the court photo above the partner logos */
.shaped--top{
  --c: clamp(30px, 5vw, 92px);
  clip-path:polygon(var(--c) 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width:820px){
  .shaped, .shaped--top{ --c: clamp(24px, 7vw, 46px); }
}

/* --- 11. RECORD BAND ------------------------------------------------------ */
.record{ background:var(--black); color:var(--white); padding:clamp(2.5rem,3.8vw,3.4rem) 0; }
.record__in{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:900px){ .record__in{ grid-template-columns:1fr; } }
.record h2 em{ font-style:normal; color:var(--lime-br); }
.bigno{ font-family:var(--f-display); font-weight:800; font-size:clamp(5rem,14vw,11rem); line-height:.85; letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--lime); }
.bigno + p{ font-family:var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:var(--grey-lt); margin-top:.9rem; }

/* --- 12. COURT SUPPLY & MAINTENANCE ---------------------------------------
   The one section on the page whose job is to generate an enquiry.        */

/* deck slide backgrounds, used as a full-bleed texture on a light band */
.band--bg{ background-repeat:no-repeat; background-position:center; background-size:cover; }
/* muted with a wash so the shapes read as depth, not as stray lines */
.bg-shapes{ background-image:linear-gradient(rgba(241,241,240,.5), rgba(241,241,240,.5)), url("../images/bg-shapes.jpg"); }
.bg-lines{ background-image:url("../images/bg-lines.jpg"); }

.courts__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:900px){ .courts__grid{ grid-template-columns:1fr; } }

/* the three things we actually sell */
.offer{ list-style:none; margin:1.5rem 0 0; padding:0; border-top:1px solid var(--hair-l); }
.offer li{ border-bottom:1px solid var(--hair-l); padding:.9rem 0; display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:baseline; }
.offer b{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:.78rem; letter-spacing:.1em; color:var(--black); min-width:8.5rem;
}
.offer span{ color:var(--grey); font-size:.95rem; }

/* the headline proof point */
.proof{ display:flex; align-items:baseline; gap:.85rem; margin-top:1.75rem; }
.proof b{ font-family:var(--f-display); font-weight:800; font-size:clamp(2.4rem,4.5vw,3.4rem); line-height:1; font-variant-numeric:tabular-nums; }
.proof span{ font-family:var(--f-display); font-weight:600; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--grey); width:13rem; line-height:1.7; }

/* photo + the two brands we supply */
.courts__media{ display:flex; flex-direction:column; gap:1px; background:var(--hair-l); border:1px solid var(--hair-l); }
.courts__media img.shot{ width:100%; height:clamp(220px,26vw,330px); object-fit:cover; }
.brands{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair-l); }
.brand{ background:var(--black); display:grid; place-items:center; padding:1.6rem 1.25rem; min-height:118px; }
.brand img{ max-height:48px; max-width:78%; width:auto; object-fit:contain; }
.brand__cap{ background:var(--off); padding:.9rem 1.25rem; text-align:center; }
.brand__cap span{ font-family:var(--f-display); font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }

/* --- 12b. PITCH PANEL -----------------------------------------------------
   A black plate that sits inside a light band and makes an offer — used for
   Tour sponsorship. Deliberately different from the surrounding copy so it
   reads as "this one is for brands, not players".                         */
.pitch{
  background:var(--black); color:var(--white);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.25rem 2.5rem; padding:clamp(1.5rem,2.6vw,2.2rem) clamp(1.5rem,2.8vw,2.4rem);
  margin-top:clamp(1.75rem,3vw,2.5rem);
  border-left:4px solid var(--lime);
}
.pitch__txt{ flex:1 1 26rem; min-width:0; }
.pitch .eyebrow{ color:var(--lime); }
.pitch p{ color:#d4d4d4; font-size:clamp(1rem,1.2vw,1.1rem); margin-top:.7rem; max-width:56ch; }
.pitch p b{ color:var(--white); font-weight:500; }
.pitch .btn{ flex:none; }

/* --- 12c. FRANCHISE BAND --------------------------------------------------
   The closing offer. Diagonal top edge so it separates cleanly from the
   band above, and the brand shape carried large in lime.                  */
.franchise{
  position:relative; overflow:hidden;
  background:var(--black); color:var(--white);
  padding:clamp(4rem,7vw,6rem) 0 clamp(2.25rem,3.4vw,3rem);
  clip-path:polygon(0 4.5vw, 100% 0, 100% 100%, 0 100%);
  margin-top:-1px;
}
.franchise > .shell{ position:relative; z-index:1; }
/* the brand shape, recoloured to lime with a mask so it needs no new file */
.franchise__mark{
  position:absolute; z-index:0; pointer-events:none;
  bottom:-16%; right:-10%; width:min(720px,62vw); aspect-ratio:900/621;
  background:var(--lime); opacity:.13;
  -webkit-mask:url("../images/pattern-white.png") no-repeat center/contain;
          mask:url("../images/pattern-white.png") no-repeat center/contain;
}
.franchise__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width:900px){ .franchise__grid{ grid-template-columns:1fr; } }
.franchise h2 em{ font-style:normal; color:var(--lime-br); }

/* what a franchise partner actually gets */
.gets{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--hair-d); border:1px solid var(--hair-d); }
.gets li{ background:var(--black); padding:1.15rem 1.3rem; display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:baseline; }
.gets b{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:.72rem; letter-spacing:.12em; color:var(--lime); min-width:6.5rem;
}
.gets span{ color:var(--grey-lt); font-size:.95rem; }

/* --- 13. CONTACT ----------------------------------------------------------
   Contact is the only utility section on the page — people arrive here
   knowing what they want. So it deliberately does NOT look like the sales
   bands above it: light ground, a flat header row instead of the stacked
   eyebrow / big heading / rule, and no brand watermark.                  */
.contact-head{
  display:grid; grid-template-columns:minmax(auto,20rem) 1fr; gap:.75rem 3.5rem;
  align-items:end; border-bottom:2px solid currentColor; padding-bottom:1.1rem;
}
.contact-head h2{ font-size:clamp(1.5rem,2.5vw,2.2rem); }
.contact-head .lede{ max-width:54ch; padding-bottom:.2rem; }
@media (max-width:860px){
  .contact-head{ grid-template-columns:1fr; align-items:start; gap:1rem; }
}

/* --- 13b. CONTACT ON THE LIGHT GROUND ------------------------------------- */
.contacts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1px; background:var(--hair-d); border:1px solid var(--hair-d); margin-top:2.25rem; }
.contact{ background:var(--black); padding:1.6rem 1.5rem 1.75rem; }
.contact h3{ font-size:1.2rem; border-bottom:2px solid var(--lime); padding-bottom:.8rem; }
.clubs{ list-style:none; margin:1.2rem 0 0; padding:0; }
.clubs li{ padding:.62rem 0; border-bottom:1px solid var(--hair-d); }
.clubs b{ display:block; font-weight:500; font-size:.98rem; }
.clubs a{ text-decoration:none; color:var(--grey-lt); font-size:.92rem; font-variant-numeric:tabular-nums; transition:color .18s; }
.clubs a:hover{ color:var(--lime-br); }

/* phone number + WhatsApp button on one line */
.line{ display:flex; align-items:center; gap:.6rem; }
.clubs .wa{
  display:inline-grid; place-items:center; width:26px; height:26px; flex:none;
  border-radius:50%; color:#25d366;
  transition:background .18s, color .18s, transform .18s;
}
.clubs .wa svg{ width:18px; height:18px; fill:currentColor; }
.clubs .wa:hover, .clubs .wa:focus-visible{ background:#25d366; color:#0b0b0b; transform:translateY(-1px); }
.contact__foot{ padding-top:1.05rem; }
.contact__foot a{ display:block; text-decoration:none; color:var(--grey-lt); font-size:.93rem; padding:.22rem 0; transition:color .18s; }
.contact__foot a:hover{ color:var(--lime-br); }

/* the light-ground versions of everything above */
.band--light .contacts{ background:var(--hair-l); border-color:var(--hair-l); }
.band--light .contact{ background:var(--off); }
.band--light .clubs li{ border-bottom-color:var(--hair-l); }
.band--light .clubs a,
.band--light .contact__foot a{ color:var(--grey); }
.band--light .clubs a:hover,
.band--light .contact__foot a:hover{ color:#6d7621; }
.band--light .clubs .wa{ color:#128c7e; }          /* darker WhatsApp green, for contrast on off-white */
.band--light .clubs .wa:hover,
.band--light .clubs .wa:focus-visible{ background:#128c7e; color:var(--off); }

/* --- 14. FOOTER ----------------------------------------------------------- */
.foot{ background:var(--black); border-top:1px solid var(--hair-d); padding:2rem 0 2.5rem; }
.foot__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem 2.5rem; }
.foot img{ height:26px; width:auto; }
.foot small{ color:var(--grey-lt); font-size:.85rem; }
.foot nav{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.foot nav a{ text-decoration:none; color:var(--grey-lt); font-family:var(--f-display); font-weight:600; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; }
.foot nav a:hover{ color:var(--lime-br); }

/* --- 15. SCROLL REVEAL ---------------------------------------------------- */
.rise{ opacity:0; transform:translateY(20px); transition:opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1); }
.rise.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rise{ opacity:1; transform:none; transition:none; } }

/* --- 16. STICKY BOOKING BAR (phones and small tablets only) ---------------
   Appears once the hero has scrolled past, so it never covers the hero CTA. */
.bookbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background:rgba(11,11,11,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--hair-d);
  transform:translateY(105%); transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.bookbar.is-on{ transform:none; }
.bookbar .btn{ width:100%; justify-content:center; padding:1rem 1.2rem; }
@media (max-width:1000px){
  .bookbar{ display:block; }
  .foot{ padding-bottom:6rem; }       /* room so the bar never covers the footer */
}
@media (prefers-reduced-motion: reduce){ .bookbar{ transition:none; } }

/* --- 17. PHOTO LIGHTBOX --------------------------------------------------- */
.gallery img, .dstrip img, .zoomable{ cursor:zoom-in; }
.lb{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(6,6,6,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .22s ease;
}
.lb.is-on{ opacity:1; }
.lb img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.lb__x{
  position:absolute; top:clamp(.75rem,2vw,1.5rem); right:clamp(.75rem,2vw,1.5rem);
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  background:none; border:1px solid var(--hair-d); color:#fff; border-radius:50%;
  font-size:1.4rem; line-height:1; transition:background .18s, border-color .18s;
}
.lb__x:hover{ background:#fff; color:var(--black); border-color:#fff; }
@media (prefers-reduced-motion: reduce){ .lb{ transition:none; } }