/*
Theme Name: Paradise Paddle Cayman
Theme URI: https://www.paradisepaddlecayman.com/
Author: Andre Gutierrez
Author URI: https://toctoc.ky/
Description: Seven Mile Editorial - Modern sports graphic / editorial theme built for Paradise Paddle Cayman. Static-fast: one stylesheet, one variable font, no framework.
Version: 1.21.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paradise-paddle
Tags: business, one-column, custom-menu, featured-images, editor-style
*/

/* ============================================================
   PARADISE PADDLE CAYMAN — THEME "SEVEN MILE EDITORIAL"
   Modern Sports Graphic / Editorial Dynamic.
   Section system mapped 1:1 to the reference boards:
     hero + squiggle        -> lacSky / Tenista
     glass stat cards       -> Tenista
     blue ghost-text panel  -> lacSky "We Provide ... Experience"
     numbered accordion     -> lacSky "01 Let's Learn To Ski Kids"
     framed photo + bar     -> lacSky "Begin by conducting..."
     stat-overlay cards     -> Padel Social Club coach cards
     split oversized words  -> Tenista "Skilled / Quality-Focused"
     stacked quote columns  -> lacSky "Hear From Our People"
     black subscribe band   -> lacSky footer
   ============================================================ */


/* ---------- TOKENS ---------- */
:root{
  --cyan:#30BBED;
  --cyan-600:#0E90C4;
  --blue:#0A4E7A;
  --blue-deep:#062F4B;
  --cyan-50:#E9F7FF;
  --pink:#E72986;
  --pink-600:#C21470;
  --yellow:#FFF212;
  --orange:#FF6B2C;   /* kayak hulls */
  --lime:#8FE04A;     /* reef shallows */
  --turq:#00D6C2;     /* sandbar water */
  --violet:#7A5CFF;   /* dusk accent */

  --ink:#04141F;
  --ink-2:#0A2436;
  /* Deep-water tint used by every photo scrim and dark gradient. */
  --deep:4,32,52;
  --ink-70:rgba(5,11,15,.70);
  --ink-45:rgba(4,32,52,.45);
  --line:rgba(5,11,15,.13);
  --paper:#FFFFFF;
  --paper-2:#F2F5F7;

  --f:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --w-cond:86;
  --w-norm:100;
  --w-exp:112;

  --r:16px;
  --r-lg:26px;
  --r-pill:999px;
  --max:1360px;
  --gut:clamp(1.1rem,3.6vw,2.6rem);
  --nav-h:76px;
  --sec:clamp(4rem,8vw,7.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 14px);overflow-x:hidden}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f);font-size:clamp(1rem,.96rem + .2vw,1.06rem);
  font-variation-settings:'wdth' var(--w-norm);
  line-height:1.6;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
ul{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:4px}

/* ---------- LAYOUT ---------- */
.wrap{width:min(100% - (var(--gut) * 2),var(--max));margin-inline:auto}
.wrap--wide{width:min(100% - (var(--gut) * 2),1600px);margin-inline:auto}
.sec{padding-block:var(--sec)}
.sec--tint{background:var(--paper-2)}
.sec--ink{background:var(--ink);color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.stack-sm > * + *{margin-top:.7rem}
.stack > * + *{margin-top:1.4rem}
.stack-lg > * + *{margin-top:clamp(1.8rem,3.5vw,3rem)}
.flow-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(1.8rem,3.5vw,3rem)}
.pp-map{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 22px 44px -20px rgba(4,20,31,.3)}
.pp-map iframe{position:absolute;inset:0;width:100%;height:100%}

/* ---------- TYPE ---------- */
.d1,.d2,.d3,.d4{margin:0;text-transform:uppercase;font-weight:800;line-height:.87;letter-spacing:-.035em;text-wrap:balance}
.d1{font-size:clamp(2.9rem,8vw,6.6rem);line-height:.84;letter-spacing:-.045em;font-weight:900}
.d2{font-size:clamp(2.2rem,5.6vw,4.6rem);font-weight:900}
.d3{font-size:clamp(1.7rem,3.4vw,2.9rem)}
.d4{font-size:clamp(1.1rem,1.8vw,1.5rem);line-height:1.04;letter-spacing:-.025em}

.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.71rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;font-variation-settings:'wdth' var(--w-exp);color:var(--cyan-600)}
.eyebrow::before{content:'';width:24px;height:2px;background:currentColor}
.eyebrow--on-dark{color:var(--yellow)}
.lead{font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.6;color:var(--ink-70);max-width:56ch}
/* Any dark surface, not just the ones tagged .on-dark. The CTA band was
   inheriting the dark body colour on a dark navy background, which made the
   supporting line all but unreadable. */
.on-dark .lead,.sec--ink .lead,.band .lead,.foot .lead,.bluepanel .lead{color:rgba(255,255,255,.78)}
.band .small,.foot .small{color:rgba(255,255,255,.66)}
.band p,.band li{color:rgba(255,255,255,.78)}
.band a:not(.btn){color:#fff}
.small{font-size:.84rem;color:var(--ink-45)}
.mark{background:linear-gradient(180deg,transparent 62%,var(--yellow) 62%);padding:0 .06em}
.tint{color:var(--cyan)}
/* The place name is the thing people search for, so it gets the marker
   treatment rather than just a colour swap: solid yellow behind dark type
   survives any photo underneath it. */
.hero .tint{
  color:var(--ink);
  /* A solid background paints the font's whole content box, which at this size
     and a 0.84 line-height leaves a slab of yellow well above and below the
     letters. A gradient with hard stops lets the band be trimmed to roughly the
     cap height instead. */
  background:linear-gradient(
    to bottom,
    transparent 0 14%,
    var(--yellow) 14% 88%,
    transparent 88% 100%
  );
  padding:0 .1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  text-shadow:none;
}
.tint-p{color:var(--pink)}

/* Oversized ghost word sitting behind imagery */
.ghost{position:absolute;z-index:0;pointer-events:none;user-select:none;
  font-weight:900;text-transform:uppercase;line-height:.78;letter-spacing:-.05em;
  font-variation-settings:'wdth' var(--w-exp);white-space:nowrap;color:rgba(255,255,255,.13)}

/* ---------- BUTTONS ---------- */
.btn{--bg:var(--pink);--fg:#fff;--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  background:var(--bg);color:var(--fg);border:2px solid var(--bd);
  padding:1rem 1.65rem;border-radius:var(--r-pill);
  font-weight:800;text-transform:uppercase;font-size:.78rem;letter-spacing:.1em;
  font-variation-settings:'wdth' var(--w-exp);
  transition:transform .28s var(--ease),background .2s,color .2s,box-shadow .28s var(--ease)}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 32px -12px rgba(4,32,52,.5)}
.btn .ar{transition:transform .28s var(--ease)}
.btn:hover .ar{transform:translate(3px,-3px)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
.btn--ghost:hover{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn--light{--bg:#fff;--fg:var(--ink)}
.btn--cyan{--bg:var(--cyan);--fg:var(--ink)}
.btn--lg{padding:1.15rem 2rem;font-size:.86rem}
.btn--sm{padding:.7rem 1.1rem;font-size:.7rem;letter-spacing:.08em}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
/* Text link with underline, as in the refs */
.tlink{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;text-transform:uppercase;
  font-size:.76rem;letter-spacing:.14em;font-variation-settings:'wdth' var(--w-exp);
  padding-bottom:.35rem;border-bottom:2px solid currentColor}
.tlink svg{transition:transform .28s var(--ease)}
.tlink:hover svg{transform:translate(3px,-3px)}

.arc{display:grid;place-items:center;flex:none;width:50px;height:50px;border-radius:50%;
  background:var(--pink);color:#fff;transition:transform .3s var(--ease),background .2s}
.arc svg{width:17px;height:17px}
.arc--cyan{background:var(--cyan);color:var(--ink)}
.arc--outline{background:transparent;color:currentColor;border:1.5px solid currentColor}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:90;height:var(--nav-h);display:flex;align-items:center;
  background:rgba(255,255,255,.94);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;gap:1.8rem;width:min(100% - (var(--gut) * 2),1600px);margin-inline:auto}
.nav__logo img{height:52px;width:auto}
.nav__menu{display:flex;align-items:center;gap:1.7rem;margin-left:auto}
.nav__menu > li{position:relative}
.nav__menu a{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-variation-settings:'wdth' var(--w-exp);display:inline-flex;align-items:center;gap:.35rem;padding-block:.45rem}
.nav__menu > li > a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--pink);transition:width .3s var(--ease)}
.nav__menu > li:hover > a::after{width:100%}
/* Sub-menu — mirrors the client's existing "Rentals & Pricing" dropdown */
.nav__sub{position:absolute;top:100%;left:-1rem;min-width:250px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:.55rem;box-shadow:0 24px 44px -20px rgba(4,32,52,.35);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s var(--ease)}
.nav__menu > li:hover .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .75rem;border-radius:10px;
  letter-spacing:.06em;font-size:.74rem;text-transform:uppercase}
.nav__sub a:hover{background:var(--cyan-50);color:var(--cyan-600)}
.nav__sub em{font-style:normal;color:var(--ink-45);font-weight:700}
.nav__tel{font-weight:800;font-size:.84rem;letter-spacing:-.01em;white-space:nowrap}
.nav__burger{display:none;width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:50%;place-items:center}
.nav__burger span{display:block;width:17px;height:2px;background:var(--ink);box-shadow:0 -5px 0 var(--ink),0 5px 0 var(--ink)}
@media(max-width:1080px){.nav__menu,.nav__tel{display:none}.nav__burger{display:grid;margin-left:auto}}
/* Text links need a real target height on touch. */
@media(max-width:760px){.tlink{padding-top:.5rem;padding-bottom:.6rem}}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:clamp(500px,74svh,720px);display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:var(--ink);isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover}
/* The flat wash over the whole photo is gone — it was killing the water. What
   replaces it is a scrim confined to the left column, where the copy actually
   sits, fading out well before the subject of the photo. Measured on the live
   hero: without it the headline sits at 1.8:1 and the eyebrow at 1.4:1, which
   is unreadable in bright sun — and bright sun is exactly where this page gets
   opened. With it the photo stays vivid everywhere it matters. */
.hero__bg::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(96deg,
      rgba(var(--deep),.86) 0%,
      rgba(var(--deep),.66) 26%,
      rgba(var(--deep),.22) 46%,
      rgba(var(--deep),0) 62%),
    linear-gradient(180deg,
      rgba(var(--deep),.30) 0%,
      rgba(var(--deep),0) 26%,
      rgba(var(--deep),0) 60%,
      rgba(var(--deep),.55) 100%)}
/* The white brush stroke that runs through the reference heroes */
/* The brush stroke is a background accent, not a foreground element: kept faint
   so it never competes with the headline or flattens the photo behind it. */
.hero__squiggle{position:absolute;z-index:-1;top:4%;right:-8%;width:min(72vw,1050px);opacity:.16;
  filter:drop-shadow(0 0 20px rgba(255,255,255,.10))}
.hero__in{position:relative;z-index:1;color:#fff;padding-block:clamp(2rem,4vw,3.2rem);width:100%;
  text-shadow:0 2px 22px rgba(var(--deep),.55),0 1px 3px rgba(var(--deep),.4)}
.hero .d1{max-width:14ch}
.hero__lead{max-width:42ch;color:rgba(255,255,255,.88);margin:1.2rem 0 1.8rem}
.hero__row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem}
/* Floating glass stat cards (Tenista) */
.glass{display:flex;gap:.9rem;flex-wrap:wrap}
.gcard{background:rgba(var(--deep),.42);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);
  border-radius:var(--r);padding:.95rem 1.2rem;min-width:150px}
.gcard b{display:block;font-size:1.6rem;font-weight:900;line-height:1;letter-spacing:-.035em;font-variation-settings:'wdth' var(--w-cond)}
.gcard span{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700;opacity:.8;margin-top:.45rem}
@media(max-width:760px){.hero__squiggle{top:auto;bottom:38%;right:-30%;width:130vw}}

/* ---------- MARQUEE ---------- */
.marq{background:var(--ink);color:#fff;overflow:hidden;padding-block:.9rem}
.marq--cyan{background:var(--cyan);color:var(--ink)}
.marq--light{background:var(--paper-2);color:var(--ink)}
.marq__t{display:flex;width:max-content;animation:marq 36s linear infinite}
.marq__t span{display:inline-flex;align-items:center;gap:2.2rem;padding-right:2.2rem;font-weight:800;
  text-transform:uppercase;font-size:.82rem;letter-spacing:.2em;font-variation-settings:'wdth' var(--w-exp);white-space:nowrap}
.marq__t span::after{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}
@keyframes marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq__t{animation:none}}

/* The home page cut-out is a paddler with an arm raised overhead, which reaches
   noticeably higher above the panel than a standing figure does — the section's
   own paired top padding was enough clearance for the latter and not for this
   one, so it heads into whatever sits above it. A little extra room, on top of
   that padding rather than instead of it, fixes this pose without touching the
   pairing the section below still relies on. */
#about{margin-top:clamp(4rem,9vw,7rem)}

/* ---------- BLUE GHOST-TEXT PANEL + BREAK-OUT SUBJECT ---------- */
/* The panel keeps its rounded corners and clips the oversized ghost words, but
   it does NOT clip the athlete: the cut-out figure overflows the top edge so it
   reads as standing in front of the block rather than sitting inside a photo
   frame. That is why the ghosts get their own clipped layer instead of putting
   overflow:hidden on the panel itself. */
.bluepanel{
  position:relative;border-radius:var(--r-lg);color:#fff;overflow:visible;
  background:linear-gradient(120deg,var(--blue-deep) 0%,var(--blue) 45%,var(--cyan-600) 100%);
  min-height:clamp(430px,52vw,600px);
  display:grid;grid-template-columns:1.02fr .98fr;align-items:center;
}
.bluepanel__ghosts{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.bluepanel .ghost{font-size:clamp(3.6rem,11vw,10rem);left:3%;top:5%;color:rgba(255,255,255,.16)}
.bluepanel .ghost--b{top:auto;bottom:5%;left:26%}
.bluepanel__body{position:relative;z-index:3;grid-column:2;padding:clamp(1.8rem,4vw,3.4rem) clamp(1.5rem,4vw,3.6rem)}

/* The cut-out itself. bottom:0 anchors it to the panel floor and the >100%
   height is what pushes head and paddle out past the top edge.

   Two details that are not decoration. The source photos are cropped by their
   own frame, so the silhouette ends in a straight horizontal slice rather than
   a natural edge — left alone that slice reads as a ruled line across the
   panel, so the last few percent are masked out and the figure dissolves into
   the blue.

   No drop-shadow. It was cast sideways to keep it off the page below, but the
   figure overflows the panel by 24% and that top quarter sits on white — where
   any shadow at all reads as a grey halo round the head and shoulders. */
.popout{
  position:absolute;z-index:2;left:0;bottom:0;
  height:124%;width:auto;max-width:56%;object-fit:contain;object-position:bottom;
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 5%);
          mask-image:linear-gradient(to top,transparent 0,#000 5%);
  border-bottom-left-radius:var(--r-lg);
  pointer-events:none;user-select:none;
}
.popout--right{left:auto;right:0;
  border-bottom-left-radius:0;border-bottom-right-radius:var(--r-lg)}

/* Fallback for a rectangular photo when no cut-out is available. */
.bluepanel__media{position:relative;z-index:2;align-self:end;padding:0 0 0 clamp(1rem,3vw,3rem)}
.bluepanel__media img{width:112%;max-width:none;height:clamp(300px,34vw,440px);object-fit:cover;
  border-radius:var(--r-lg) 0 0 0;filter:drop-shadow(0 26px 46px rgba(0,0,0,.42))}

/* Tone and side variants, so the same break-out block can be reused beyond the
   home page without every section looking like the same blue box. */
.bluepanel--ink{background:linear-gradient(120deg,#042038 0%,#0A4E7A 55%,#0E90C4 100%)}
.bluepanel--cyan{background:linear-gradient(120deg,var(--cyan-800) 0%,var(--cyan-600) 50%,var(--cyan) 100%)}
.bluepanel--sm{min-height:clamp(360px,40vw,480px)}

/* Mirrored: copy on the left, figure breaking out on the right. */
.bluepanel--flip .bluepanel__body{grid-column:1}
.bluepanel--flip .popout{left:auto;right:0;
  border-bottom-left-radius:0;border-bottom-right-radius:var(--r-lg)}

@media(max-width:900px){
  .bluepanel{grid-template-columns:1fr;min-height:0}
  /* Copy first on a phone: the headline and the reason to click come before the
     picture, so the button is reachable without scrolling past a tall figure. */
  .bluepanel__body{grid-column:1;order:1}
  /* There is nothing to break out of on a narrow screen, so the figure sits
     under the copy rather than overlapping it. */
  .popout{position:static;order:2;height:auto;width:min(68%,320px);max-width:none;
    margin:.6rem auto 0;display:block;border-radius:0;
    -webkit-mask-image:none;mask-image:none;filter:none}
  .bluepanel__media{padding:1rem 1.2rem 0;order:2}
  .bluepanel__media img{width:100%;border-radius:var(--r)}
}

/* ---------- NUMBERED ACCORDION (lacSky "01 Let's Learn To Ski Kids") ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{display:grid;grid-template-columns:auto minmax(0,1.35fr) minmax(0,1fr) auto;align-items:center;
  gap:clamp(.8rem,2.5vw,2rem);width:100%;text-align:left;
  padding:clamp(1.1rem,2.2vw,1.7rem) .5rem clamp(1.1rem,2.2vw,1.7rem) 1.15rem;
  transition:padding-left .3s var(--ease),background .3s}
.acc__item:hover .acc__btn,.acc__item.is-open .acc__btn{background:var(--cyan-50);padding-left:1.7rem}
.acc__n{font-size:.72rem;font-weight:800;letter-spacing:.16em;color:var(--ink-45);font-variation-settings:'wdth' var(--w-exp)}
.acc__t{font-size:clamp(1.1rem,2.3vw,1.85rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.acc__m{font-size:.95rem;color:var(--ink-70)}
.acc__m b{font-size:clamp(1.1rem,2vw,1.55rem);font-weight:900;letter-spacing:-.03em;color:var(--ink);
  font-variation-settings:'wdth' var(--w-cond);margin-right:.4rem}
.acc__ic{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;
  font-size:1.05rem;font-weight:700;transition:.3s var(--ease);flex:none}
.acc__item.is-open .acc__ic{background:var(--pink);border-color:var(--pink);color:#fff;transform:rotate(135deg)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.acc__panel > div{overflow:hidden}
.acc__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1rem,3vw,2.5rem);align-items:start;
  padding:clamp(1rem,2vw,1.5rem) .5rem clamp(1.4rem,3vw,2.4rem) 1.7rem}
.acc__inner img{border-radius:var(--r);aspect-ratio:16/10;object-fit:cover;object-position:50% 22%;width:100%;height:clamp(190px,20vw,265px)}
@media(max-width:860px){
  .acc__btn{grid-template-columns:auto 1fr auto;row-gap:.4rem}
  .acc__m{grid-column:2/4}
  .acc__inner{grid-template-columns:1fr}
}

/* ---------- FRAMED PHOTO + CAPTION BAR (lacSky) ---------- */
/* A full-width 16:7 photo with a slim caption bar underneath let the photo
   dominate the section and squeezed the actual offer into a thin strip below
   it — now a proper two-up split, so the message gets equal, legible room. */
.framed{display:grid;grid-template-columns:1fr 1.1fr;border:4px solid var(--ink);
  border-radius:var(--r-lg);overflow:hidden;background:var(--ink)}
.framed__media{position:relative;min-height:280px}
.framed__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.framed__bar{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;
  padding:clamp(1.8rem,4vw,3.2rem);color:#fff}
.framed__bar h3{margin:0;font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:900;
  text-transform:uppercase;line-height:.98;letter-spacing:-.03em}
.framed__bar p{margin:0;font-size:1rem;color:rgba(255,255,255,.72);max-width:42ch}
@media(max-width:820px){
  .framed{grid-template-columns:1fr}
  .framed__media{min-height:220px}
}

/* ---------- STAT-OVERLAY CARDS (Padel Social Club) ---------- */
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.8rem,1.5vw,1.3rem)}
.pcard{position:relative;grid-column:span 4;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-lg);
  background:var(--ink);isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.1rem,1.9vw,1.6rem);color:#fff}
.pcard--wide{grid-column:span 8;aspect-ratio:16/10}
.pcard--half{grid-column:span 6;aspect-ratio:16/11}
.pcard__img{position:absolute;inset:0;z-index:-2}
.pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pcard::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(var(--deep),.10) 25%,rgba(var(--deep),.84) 100%)}
.pcard:hover .pcard__img img{transform:scale(1.06)}
.pcard__idx{position:absolute;top:1.05rem;left:1.25rem;font-size:.7rem;font-weight:800;letter-spacing:.18em;opacity:.85;
  font-variation-settings:'wdth' var(--w-exp)}
.pcard__stats{position:absolute;top:.95rem;right:.95rem;display:flex;flex-direction:column;gap:.4rem;align-items:flex-end}
.pill{background:var(--yellow);color:var(--ink);border-radius:var(--r-pill);padding:.38rem .8rem;
  font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.pill--glass{background:rgba(4,32,52,.45);border:1px solid rgba(255,255,255,.35);color:#fff;backdrop-filter:blur(6px)}
.pcard__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.pcard__name{font-size:clamp(1.25rem,2.2vw,1.95rem);font-weight:900;text-transform:uppercase;line-height:.94;letter-spacing:-.03em}
.pcard__meta{font-size:.8rem;opacity:.78;margin-top:.4rem}
.pcard .arc{width:44px;height:44px}
.pcard:hover .arc{transform:rotate(45deg)}
@media(max-width:900px){.pcard,.pcard--wide,.pcard--half{grid-column:span 6;aspect-ratio:1/1}}
@media(max-width:560px){.pcard,.pcard--wide,.pcard--half{grid-column:span 12;aspect-ratio:4/3}}

/* ---------- SPLIT OVERSIZED WORDS (Tenista) ---------- */
.wsplit{position:relative;display:grid;place-items:center;padding-block:clamp(1rem,4vw,3rem);overflow:hidden}
.wsplit__words{display:grid;gap:clamp(.2rem,1vw,.7rem);width:100%;pointer-events:none}
.wsplit__words > div{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem}
.wsplit__words span{font-size:clamp(1.9rem,7.4vw,6.2rem);font-weight:900;text-transform:uppercase;line-height:.84;
  letter-spacing:-.05em;font-variation-settings:'wdth' var(--w-exp)}
.wsplit__words span.mute{color:var(--ink-45);opacity:.35}
.wsplit__media{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-4deg);
  width:min(32%,320px);aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;
  background:var(--cyan);box-shadow:0 40px 70px -30px rgba(5,11,15,.55)}
.wsplit__media img{width:100%;height:100%;object-fit:cover}
.wsplit__tag{position:absolute;left:8%;bottom:9%;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(8px);color:#fff;border-radius:10px;padding:.5rem .8rem;font-size:.72rem;font-weight:700}
@media(max-width:700px){.wsplit__media{width:62%;position:relative;top:auto;left:auto;transform:rotate(-4deg);margin:1.5rem auto}}

/* ---------- QUOTE COLUMNS (lacSky "Hear From Our People") ---------- */
.quotes{display:grid;grid-template-columns:minmax(180px,.7fr) repeat(3,1fr);gap:clamp(1rem,2.4vw,2rem);align-items:start}
.quotes__head{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.04em}
.qcard{background:var(--paper-2);border-radius:var(--r);padding:clamp(1.1rem,2vw,1.6rem)}
.qcard .qm{font-size:2.2rem;line-height:.6;color:var(--cyan);font-weight:900}
.qcard p{font-size:.92rem;line-height:1.55;margin:.9rem 0 1.1rem}
.qcard b{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}
.qcard span{font-size:.74rem;color:var(--ink-45)}
@media(max-width:900px){.quotes{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.quotes{grid-template-columns:1fr}}

/* ---------- BLACK CTA / SUBSCRIBE BAND (lacSky footer) ---------- */
.band{background:linear-gradient(120deg,#04141F 0%,#072B42 60%,#0A4E7A 100%);color:#fff;border-radius:var(--r-lg);padding:clamp(2rem,4.5vw,3.6rem);
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  position:relative;overflow:hidden;isolation:isolate}

/* Moving water behind the closing call to action, drawn rather than
   photographed. A photograph of the sea was busy enough that the headline had
   to fight it, and the scrim needed to hold that off was heavy enough to kill
   the photograph anyway — so this block carries a flat gradient the type can
   be read against, with three wave bands sliding across it at different
   speeds for the movement.

   Each band is one path tiled six times across twice the width, so translating
   it exactly half its own width lands on an identical frame and the loop has
   no seam. */
.band__waves{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;
  pointer-events:none}
/* Height is set rather than left to the viewBox: at "auto" the band is only
   as tall as 200% of the width divided by the 2880:140 ratio, which is a thin
   strip along the very bottom. Stretched with preserveAspectRatio="none", the
   swell reaches up into the block. */
.band__wave{position:absolute;left:0;width:200%;
  /* The base rule caps every svg at max-width:100%, which clamped these to a
     single container width — so the reversed layer slid off and left a straight
     edge down the middle of the block with nothing behind it. */
  max-width:none;
  animation:bandWave linear infinite;will-change:transform}
.band__wave--1{bottom:0;height:48%;color:rgba(255,255,255,.07);animation-duration:26s}
.band__wave--2{bottom:0;height:56%;color:rgba(48,187,237,.16);animation-duration:38s;animation-direction:reverse}
.band__wave--3{bottom:0;height:40%;color:rgba(0,214,194,.12);animation-duration:52s}
@keyframes bandWave{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .band__wave{animation:none}
}
.band h2{margin:0;font-size:clamp(1.7rem,4vw,3.2rem);font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:-.04em}
.band .cta-box{background:#fff;border-radius:var(--r);padding:1rem;display:grid;gap:.6rem}
.band .cta-box input{border:1px solid var(--line);border-radius:10px;padding:.85rem 1rem;font:inherit;font-size:.92rem}
@media(max-width:820px){.band{grid-template-columns:1fr}}

/* ---------- FOOTER ---------- */
.foot{background:linear-gradient(180deg,#04141F 0%,#072B42 100%);color:#fff;padding-block:clamp(2.6rem,5vw,4rem) 1.8rem}
.foot a{color:rgba(255,255,255,.72)}
.foot a:hover{color:var(--yellow)}
.foot__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2.4rem}
.foot h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;font-weight:800;margin:0 0 1rem;color:var(--cyan);
  font-variation-settings:'wdth' var(--w-exp)}
.foot li{margin-bottom:.55rem;font-size:.9rem}
.foot__bot{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.78rem;color:rgba(255,255,255,.5)}
.foot__social{display:flex;align-items:center;gap:.9rem;margin-top:1.3rem}
.foot__social>a{display:flex;align-items:center}
.gbadge{display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.08);
  border-radius:var(--r-pill);padding:.4rem .8rem .4rem .55rem;font-size:.82rem;
  transition:background .2s}
.gbadge:hover{background:rgba(255,255,255,.16);color:#fff}
.gbadge b{font-weight:800;color:#fff}
@media(max-width:820px){.foot__grid{grid-template-columns:1fr 1fr}}
/* Two 125px columns cannot hold ParadisePaddleCayman@gmail.com, and an email
   address has no break opportunities of its own. One column below 560, and let
   long addresses break anywhere rather than push the page sideways. */
@media(max-width:560px){
  .foot__grid{grid-template-columns:1fr;gap:1.8rem}
}
.foot li,.foot a{overflow-wrap:anywhere}

/* ---------- STYLE GUIDE (preview only) ---------- */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem}
.sw{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff}
.sw__c{height:88px}
.sw__m{padding:.7rem .8rem;font-size:.76rem}
.sw__m b{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.sw__m span{color:var(--ink-45)}

/* ---------- MOBILE REFINEMENTS (70% of this site's traffic) ---------- */
@media(max-width:760px){
  .nav__in{gap:.7rem}
  .nav__logo img{height:46px}
  /* The Book now pill comes out of the bar on a phone. It was eating the width
     the logo and the headline needed, and there is no shortage of ways to book
     from here: the WhatsApp bubble is on screen the whole time, the hero has
     two calls to action, and the menu carries the phone number. */
  .nav .btn{display:none}
  /* Only the nav pill must stay on one line — it has room. A full-width button
     carrying a phone number does not, and forcing nowrap there pushed the CTA
     band 48px past the viewport on a 320px screen. */
  .nav .btn{white-space:nowrap}
  .band .btn,.hero .btn{white-space:normal;line-height:1.25}
  .btn--sm{padding:.6rem .95rem;font-size:.66rem}

  .hero{min-height:0;padding-top:clamp(2.5rem,16vh,6rem)}
  .hero .d1{font-size:clamp(2.35rem,11.2vw,3.9rem);font-variation-settings:'wdth' 82;max-width:none}
  .hero__lead{font-size:1rem;margin:1rem 0 1.5rem}
  .hero__row{gap:1.5rem}
  .btn-row .btn{flex:1 1 auto}
  .glass{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;width:100%}
  .gcard{min-width:0;padding:.7rem .7rem}
  .gcard b{font-size:1.1rem}
  .gcard span{font-size:.55rem;letter-spacing:.1em;margin-top:.35rem}

  .d2{font-variation-settings:'wdth' 90}
  .acc__t{font-variation-settings:'wdth' 92}
  .framed{border-width:3px}
  .band .btn{width:100%}
}


/* ---------- MOBILE DRAWER ---------- */
@media(max-width:1080px){
  .nav__menu{
    display:block;position:fixed;inset:var(--nav-h) 0 5.8rem;z-index:85;
    background:var(--paper);padding:1.4rem var(--gut) 2rem;overflow-y:auto;
    transform:translateX(100%);transition:transform .35s var(--ease);margin-left:0;
  }
  body.nav-open{overflow:hidden}
  body.nav-open .nav__menu{transform:none}
  body.nav-open .nav__burger span{background:transparent;box-shadow:none;position:relative}
  body.nav-open .nav__burger span::before,
  body.nav-open .nav__burger span::after{content:'';position:absolute;left:0;width:17px;height:2px;background:var(--ink)}
  body.nav-open .nav__burger span::before{transform:rotate(45deg)}
  body.nav-open .nav__burger span::after{transform:rotate(-45deg)}
  .nav__menu > li{border-bottom:1px solid var(--line)}
  .nav__menu > li > a{display:flex;justify-content:space-between;width:100%;font-size:1rem;padding:1.05rem 0;letter-spacing:.06em}
  .nav__menu > li > a::after{display:none}
  .nav__sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-radius:0;padding:0 0 .9rem;min-width:0;background:transparent}
  .nav__sub a{padding:.55rem 0 .55rem .9rem;border-left:2px solid var(--line);border-radius:0;font-size:.8rem}
  .nav__sub a:hover{background:transparent}
  /* The phone belongs inside the drawer, not in the bar: the bar only has room
     for the logo, the Book now pill and the burger. */
  .nav__tel{display:none}
  /* Fills the strip the drawer no longer covers, behind the phone button. */
  body.nav-open::after{
    content:'';position:fixed;left:0;right:0;bottom:0;height:5.8rem;
    background:var(--paper);z-index:84;
  }
  body.nav-open .nav__tel{
    display:flex;align-items:center;gap:.55rem;
    position:fixed;left:var(--gut);right:var(--gut);bottom:1.5rem;z-index:86;
    justify-content:center;background:var(--cyan);color:var(--ink);
    padding:1rem 1.25rem;border-radius:var(--r-pill);font-size:1rem;
  }
}

/* ---------- PRICE TABLE (editorial rows) ---------- */
/* Weight limits, what's included, flat-rate call-outs — real qualifiers a
   renter needs before booking, not fine print, so this reads at full
   strength rather than the same 45%-ink grey as a disclaimer. */
.pgroup__note{max-width:38ch;margin:0;font-size:.92rem;font-weight:700;color:var(--ink-70)}
.ptable{border-top:1px solid var(--line)}
.prow{
  display:grid;grid-template-columns:minmax(9ch,auto) minmax(0,1fr) auto auto;align-items:center;
  gap:clamp(.8rem,2.5vw,1.6rem);padding:clamp(.5rem,1.5vw,.75rem) .3rem;
  border-bottom:1px solid var(--line);
  transition:background .25s,padding-left .25s var(--ease);
}
.prow:hover{background:var(--cyan-50);padding-left:.9rem}
.prow__d{font-weight:800;text-transform:uppercase;font-size:.74rem;letter-spacing:.14em;
  color:var(--ink-45);font-variation-settings:'wdth' var(--w-exp)}
.prow__l{font-weight:600}
.prow__p{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:900;letter-spacing:-.03em;
  font-variation-settings:'wdth' var(--w-cond);white-space:nowrap}
.prow--best{background:rgba(255,242,18,.14)}
.prow--best .prow__p{color:var(--pink)}
.prow--best .prow__l::after{
  content:'BEST VALUE';margin-left:.7rem;background:var(--yellow);color:var(--ink);
  font-size:.6rem;font-weight:800;letter-spacing:.13em;padding:.24rem .5rem;
  border-radius:var(--r-pill);vertical-align:middle;white-space:nowrap;
}
@media(max-width:640px){
  /* Two lines per row on a phone — duration above label — so the vertical
     padding counts double against the list's height. Half of what it was, and
     the line-height comes in with it: the rows were reading as separate blocks
     rather than one scannable price list. */
  .prow{grid-template-columns:1fr auto auto;row-gap:0;gap:.7rem}
  .prow__d{grid-column:1/2;line-height:1.3}
  .prow__l{grid-column:1/2;font-size:.9rem;line-height:1.35;color:var(--ink-70)}
  .prow__p{grid-column:2/3;grid-row:1/3}
  .prow__add{grid-column:3/4;grid-row:1/3}
  .prow--best .prow__l::after{display:block;margin:.35rem 0 0;width:max-content}
}

/* ---------- RENTALS LIST (full card: photo, title, copy, price list, book) ----------
   Replaces what used to be an accordion. The price list was one click away on
   the category's own page; this puts the actual numbers in front of whoever
   is comparing options, at the cost of a much longer section — a trade the
   client asked for by name, after a competitor's listing that does the same. */
.rlist > * + *{margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--line)}
.rcard{position:relative}
.rcard::before{content:'';position:absolute;left:-1.4rem;top:.3rem;bottom:.3rem;width:4px;
  border-radius:2px;background:var(--cyan)}
.rcard:nth-child(4n+2)::before{background:var(--turq)}
.rcard:nth-child(4n+3)::before{background:var(--orange)}
.rcard:nth-child(4n+4)::before{background:var(--pink)}

/* One column now: the photographs moved down into the sub-products, where each
   one sits beside the thing it is actually a picture of. */
.rcard__body > div > h3{font-size:clamp(2.4rem,5.6vw,4rem);margin:0;line-height:.94;
  text-transform:uppercase;letter-spacing:-.04em}
.rcard__body > div > h3 a{color:var(--pink);text-decoration:none;
  background-image:linear-gradient(96deg,var(--pink) 0%,var(--blue) 52%,var(--cyan) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.rcard__body > div > h3 a:hover{
  background-image:linear-gradient(96deg,var(--cyan) 0%,var(--blue) 48%,var(--pink) 100%)}

/* One step down from the category, one step up from the rows it heads. */
.sub h3{font-size:clamp(1.45rem,2.8vw,2.1rem);line-height:1.02;letter-spacing:-.03em;
  text-transform:uppercase;color:var(--ink)}
.rcard__body > div > .lead{margin-top:.6rem}

/* Each sub-product — the standard board, the kids' board, the mega board —
   as its own small block: photo where one honestly matches, name, what it
   includes, its rates, and its own way to book it. */
.subs{display:grid;gap:clamp(1.6rem,3.5vw,2.6rem);margin-top:clamp(1.2rem,2.5vw,1.8rem)}
.sub{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.1rem,2.6vw,2.2rem);align-items:start;
  padding:clamp(1.1rem,2.2vw,1.6rem);border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);transition:box-shadow .3s var(--ease),border-color .3s}
.sub:hover{border-color:transparent;box-shadow:0 18px 40px -22px rgba(4,32,52,.45)}

/* Alternating sides, one sub-product to the next. The photo stays first in the
   DOM either way, so a screen reader gets the same order down every block. */
.sub:nth-child(even){grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.sub:nth-child(even) .sub__media{order:2}
.sub:nth-child(even) .sub__body{order:1}

.sub__media{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;
  position:sticky;top:calc(var(--nav-h) + 1.3rem)}
.sub__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.sub:hover .sub__media img{transform:scale(1.04)}
.sub .btn-row{margin-top:1.2rem}
@media(max-width:760px){
  .sub,.sub:nth-child(even){grid-template-columns:1fr}
  .sub__media,.sub:nth-child(even) .sub__media{position:static;order:initial;aspect-ratio:16/10}
  .sub:nth-child(even) .sub__body{order:initial}
}
@media(max-width:760px){
  .rcard,.rcard:nth-child(even){grid-template-columns:1fr;padding-left:1.1rem}
  .rcard::before{left:0}
  .rcard__media,.rcard:nth-child(even) .rcard__media{position:static;order:initial;aspect-ratio:16/10}
  .rcard:nth-child(even) .rcard__body{order:initial}
}

/* ---------- EDITOR CONTENT ---------- */
.entry > *:first-child{margin-top:0}
.entry > *:last-child{margin-bottom:0}
.entry p{font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.7;color:var(--ink-70);margin:0 0 1.15em;max-width:68ch}
.entry h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;text-transform:uppercase;
  letter-spacing:-.035em;line-height:.98;margin:2.2rem 0 .9rem}
.entry h3{font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:800;letter-spacing:-.025em;margin:1.8rem 0 .7rem}
.entry h4{font-size:1.05rem;font-weight:800;margin:1.4rem 0 .5rem}
.entry a{color:var(--pink);text-decoration:underline;text-underline-offset:3px}
.entry a:hover{color:var(--pink-600)}
.entry strong{font-weight:800;color:var(--ink)}
.entry ul,.entry ol{margin:0 0 1.15em;padding-left:1.3rem;max-width:68ch;color:var(--ink-70)}
.entry ul{list-style:disc}
.entry ol{list-style:decimal}
.entry li{margin-bottom:.5rem}
.entry ul li::marker{color:var(--cyan)}
.entry blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.3rem;border-left:3px solid var(--cyan);
  font-size:1.15rem;font-weight:500;color:var(--ink)}
.entry img,.entry figure img{border-radius:var(--r)}
.entry figure{margin:1.8rem 0}
.entry figcaption{font-size:.82rem;color:var(--ink-45);margin-top:.6rem}
.entry hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
.entry table{width:100%;border-collapse:collapse;margin:0 0 1.5em}
.entry th,.entry td{text-align:left;padding:.75rem .5rem;border-bottom:1px solid var(--line)}
.entry th{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;font-weight:800}
.on-dark .entry p,.sec--ink .entry p,.on-dark .entry ul,.on-dark .entry ol{color:rgba(255,255,255,.75)}
.on-dark .entry strong,.sec--ink .entry strong{color:#fff}

/* ---------- SWIPEABLE RENTAL CAROUSEL ---------- */
/* Native scroll-snap: works on touch with no JavaScript, arrows are extra. */
.carousel{padding-block:clamp(2.5rem,5vw,4.5rem) 0;overflow:hidden}
.carousel__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.2rem;margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.carousel__nav{display:flex;align-items:center;gap:.6rem}
.carousel__hint{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink-45);font-variation-settings:'wdth' var(--w-exp);margin-right:.4rem}
.carousel__btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;background:#fff;transition:.25s var(--ease)}
.carousel__btn:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff}
.carousel__btn:disabled{opacity:.3;cursor:default}

.carousel__track{
  display:flex;gap:clamp(.7rem,1.4vw,1.1rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  /* No scroll-snap: the strip advances on its own, and snapping would drag it
     back to the nearest card on every frame. */
  scroll-padding-left:var(--gut);
  padding:.25rem var(--gut) 1.5rem;
  scrollbar-width:none;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track:focus-visible{outline:3px solid var(--pink);outline-offset:-3px}

.slide{
  position:relative;flex:0 0 clamp(215px,25vw,320px);aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;
  background:var(--ink);color:#fff;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(.9rem,1.6vw,1.3rem);
}
.slide__img{position:absolute;inset:0;z-index:-2}
.slide__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.slide::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(var(--deep),.06) 35%,rgba(var(--deep),.86) 100%)}
.slide:hover .slide__img img{transform:scale(1.07)}
.slide__price{position:absolute;top:.85rem;right:.85rem;background:var(--yellow);color:var(--ink);
  border-radius:var(--r-pill);padding:.34rem .7rem;font-size:.67rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase}
.slide__foot{display:flex;align-items:baseline;gap:.55rem}
.slide__n{font-size:.66rem;font-weight:800;letter-spacing:.16em;opacity:.65;
  font-variation-settings:'wdth' var(--w-exp)}
.slide__name{margin:0;font-size:clamp(1.05rem,1.7vw,1.4rem);font-weight:900;text-transform:uppercase;
  line-height:.98;letter-spacing:-.03em}

@media(max-width:760px){
  .carousel__hint{display:none}
  .slide{flex-basis:min(70vw,255px)}
}
@media(prefers-reduced-motion:reduce){
  .carousel__track{scroll-behavior:auto}
  .slide__img img{transition:none}
}

/* ============================================================
   COLOUR LAYER — vivid accents taken from the gear on the beach:
   life-vest yellow, kayak orange, reef lime, sandbar turquoise.
   Used in defined places only, so the page reads lively rather than noisy.
   ============================================================ */

/* ---------- Coloured scrollbar ---------- */
html{scrollbar-color:var(--cyan) var(--paper-2);scrollbar-width:thin}
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{
  border-radius:99px;border:3px solid var(--paper-2);
  background:linear-gradient(180deg,var(--cyan) 0%,var(--turq) 45%,var(--pink) 100%);
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--pink) 0%,var(--orange) 100%)}
::-webkit-scrollbar-corner{background:var(--paper-2)}

/* ---------- Paddle cursor ---------- */
/* A small paddle, because the company is called Paradise Paddle. Kept modest and
   always paired with a system fallback so nothing becomes unclickable if the
   data URI fails to load. */
:root{
  --cur-paddle:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='rotate(148 15 15)'%3E%3Cpath d='M15 3c3.6 0 5.6 3.2 5.6 6.6 0 3.1-2 5.4-5.6 5.4s-5.6-2.3-5.6-5.4C9.4 6.2 11.4 3 15 3z' fill='%23E72986' stroke='%23fff' stroke-width='1.8'/%3E%3Crect x='13.6' y='13.6' width='2.8' height='13' rx='1.4' fill='%2330BBED' stroke='%23fff' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E");
  --cur-grab:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='13' fill='%23FFF212' stroke='%2304141F' stroke-width='2'/%3E%3Cpath d='M11 17h12M18 12l5 5-5 5' fill='none' stroke='%2304141F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body{cursor:var(--cur-paddle) 22 25, auto}
a,button,summary,[role="button"],.acc__btn,.carousel__btn{cursor:var(--cur-paddle) 22 25, pointer}
/* Dragging the carousel gets the "keep going" cursor. */
.carousel__track{cursor:var(--cur-grab) 17 17, grab;touch-action:pan-x pan-y}
.carousel__track:active{cursor:var(--cur-grab) 17 17, grabbing}
.carousel__track img{user-select:none;-webkit-user-drag:none}
input,textarea,select,[contenteditable]{cursor:auto}
@media(hover:none){
  body,a,button,.carousel__track{cursor:auto}
}

/* ---------- Background lines ---------- */
/* Faint moving water: diagonal brand-coloured strokes behind the light sections.
   Sits under the content and never intercepts a click. */
.sec--tint,.carousel{position:relative;isolation:isolate}
.sec--tint::before,.carousel::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:repeating-linear-gradient(
    115deg,
    rgba(48,187,237,.16) 0 2px,
    transparent 2px 26px,
    rgba(231,41,134,.11) 26px 28px,
    transparent 28px 54px,
    rgba(0,214,194,.13) 54px 56px,
    transparent 56px 88px,
    rgba(255,107,44,.10) 88px 90px,
    transparent 90px 130px
  );
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}

/* A brand-coloured hairline closing every light section. */
.sec--tint{border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,var(--cyan),var(--turq),var(--lime),var(--yellow),var(--orange),var(--pink)) 1}

/* ---------- Vivid touches ---------- */
/* The marquee cycles the palette instead of running one flat cyan. */
.marq--cyan{background:linear-gradient(90deg,var(--cyan) 0%,var(--turq) 34%,var(--lime) 58%,var(--yellow) 100%)}
.marq__t span:nth-child(4n+2)::after{background:var(--pink);opacity:1}
.marq__t span:nth-child(4n+3)::after{background:var(--orange);opacity:1}
.marq__t span:nth-child(4n+4)::after{background:var(--violet);opacity:1}

/* Carousel price pills rotate through the palette so the strip reads as colour. */
.slide:nth-child(4n+2) .slide__price{background:var(--turq)}
.slide:nth-child(4n+3) .slide__price{background:var(--orange);color:#fff}
.slide:nth-child(4n+4) .slide__price{background:var(--lime)}

/* Section eyebrows pick up the accents too. */
.sec--tint .eyebrow{color:var(--orange)}
.carousel .eyebrow{color:var(--turq)}

/* Numbered accordion rows get a colour key down the left edge. */
.acc__item{position:relative}
.acc__item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--cyan);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.acc__item:nth-child(4n+2)::before{background:var(--turq)}
.acc__item:nth-child(4n+3)::before{background:var(--orange)}
.acc__item:nth-child(4n+4)::before{background:var(--pink)}
.acc__item:hover::before,.acc__item.is-open::before{transform:scaleY(1)}

@media(prefers-reduced-motion:reduce){
  .acc__item::before{transition:none}
}

/* ---------- PHOTO MOSAIC ---------- */
.mosaic{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(120px,13vw,190px);
  /* Without "dense" the grid leaves a hole whenever a wide or tall cell will not
     fit in the columns left on that row. */
  grid-auto-flow:row dense;
  gap:clamp(.6rem,1.2vw,1rem);
}
.mosaic__cell{margin:0;overflow:hidden;border-radius:var(--r);background:var(--paper-2);position:relative}
.mosaic__cell img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.mosaic__cell:hover img{transform:scale(1.06)}
.mosaic__cell--tall{grid-row:span 2}
.mosaic__cell--wide{grid-column:span 2}
/* A colour wash on a few cells so the grid carries the palette too. */
/* Colour on the frame, never on the photograph. */
.mosaic__cell::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  pointer-events:none;opacity:0;transition:opacity .3s var(--ease);background:var(--cyan)}
.mosaic__cell:nth-child(4n+2)::after{background:var(--pink)}
.mosaic__cell:nth-child(4n+3)::after{background:var(--orange)}
.mosaic__cell:nth-child(4n+4)::after{background:var(--lime)}
.mosaic__cell:hover::after{opacity:1}
@media(max-width:900px){
  .mosaic{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(110px,32vw,150px)}
  .mosaic__cell--wide{grid-column:span 2}
}

/* A shorter mosaic for the rental pages, so the photo library shows up on every
   page instead of only two. */
.gallery--compact .mosaic{grid-auto-rows:clamp(100px,10vw,150px)}
.gallery--compact{padding-block:clamp(2.5rem,5vw,4rem)}

/* ---------- FULL GALLERY ---------- */
.mosaic--full{grid-auto-rows:clamp(110px,11vw,170px)}
.mosaic__open{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:inherit}
.mosaic__open img{width:100%;height:100%;object-fit:cover}
.mosaic__open:focus-visible{outline:3px solid var(--pink);outline-offset:-3px}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(var(--deep),.94);padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:88vh;border-radius:var(--r);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.lightbox__close,.lightbox__nav{
  position:absolute;display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.1);color:#fff;backdrop-filter:blur(8px);
  transition:background .2s,transform .2s var(--ease);
}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--pink);border-color:var(--pink)}
.lightbox__close{top:clamp(.8rem,3vw,1.8rem);right:clamp(.8rem,3vw,1.8rem);font-size:1.5rem;line-height:1}
.lightbox__nav--prev{left:clamp(.6rem,2vw,1.6rem)}
.lightbox__nav--next{right:clamp(.6rem,2vw,1.6rem)}
.lightbox__count{position:absolute;bottom:clamp(.8rem,3vw,1.6rem);left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.75);font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;font-variation-settings:'wdth' var(--w-exp)}
body.lightbox-open{overflow:hidden}
@media(max-width:640px){.lightbox__nav{width:44px;height:44px}}

/* Page heroes are shorter than the home one — they carry a title, not a pitch. */
.hero--page{min-height:clamp(340px,44svh,460px)}
.hero--page .d1{font-size:clamp(2.2rem,5.6vw,4.4rem);max-width:16ch}

/* Agency credit sits quietly next to the copyright. */
.foot__credit{color:rgba(255,255,255,.5)}
.foot__credit a{color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.3)}
.foot__credit a:hover{color:var(--yellow);border-bottom-color:var(--yellow)}

/* ---------- WHATSAPP BUTTON ---------- */
/* Sits above everything except the lightbox. Label shows on desktop where there
   is room; on a phone it collapses to the icon so it never covers content. */
.wa{
  position:fixed;right:clamp(.9rem,2.5vw,1.6rem);bottom:clamp(.9rem,2.5vw,1.6rem);z-index:150;
  display:inline-flex;align-items:center;gap:.6rem;
  background:#25D366;color:#04141F;
  padding:.55rem .55rem;border-radius:var(--r-pill);
  box-shadow:0 12px 28px -8px rgba(4,32,52,.55),0 0 0 4px rgba(37,211,102,.18);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;
}
.wa:hover{transform:translateY(-3px);background:#1FBE5B;
  box-shadow:0 18px 34px -10px rgba(4,32,52,.6),0 0 0 7px rgba(37,211,102,.22)}
.wa__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.22);flex:none}
.wa__label{
  font-weight:800;text-transform:uppercase;font-size:.74rem;letter-spacing:.11em;
  font-variation-settings:'wdth' var(--w-exp);padding-left:.85rem;white-space:nowrap;
}
@media(max-width:760px){
  .wa__label{display:none}
  .wa{padding:.4rem}
  .wa__icon{width:50px;height:50px}
}
/* Out of the way while a photo is open. */
body.lightbox-open .wa,
body.nav-open .wa{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.wa{transition:none}}

/* WhatsApp buttons wear WhatsApp's own green so they are recognised instantly. */
.btn--wa{--bg:#25D366;--fg:#04141F}
.btn--wa:hover{--bg:#1FBE5B}

/* ---------- FAQ ---------- */
/* Same accordion as the rentals list, but two columns instead of four: a
   question and the toggle. */
.acc--faq .acc__btn{grid-template-columns:minmax(0,1fr) auto}
.acc--faq .acc__t{font-size:clamp(1rem,1.8vw,1.3rem);font-weight:700;letter-spacing:-.02em;line-height:1.3}
.acc__answer{padding:0 .5rem clamp(1.2rem,2.5vw,1.9rem) 1.7rem;max-width:74ch}
.acc__answer p{margin:0;font-size:clamp(1rem,1.3vw,1.08rem);line-height:1.65;color:var(--ink-70)}

/* ============================================================
   MOVEMENT
   Everything here is suspended under prefers-reduced-motion.
   ============================================================ */

/* ---------- Reveal on scroll ---------- */
/* Applied by JS, so nothing is hidden if the script never runs — a page that
   fails to reveal its own content is worse than a page that never animated. */
.js-reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-reveal.is-in{opacity:1;transform:none}

/* ---------- Hero: very slow drift on the photograph ---------- */
.hero__bg img{animation:kenburns 34s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.09) translate3d(-1.2%,-1.4%,0)}
}

/* ---------- Hero: the photographs rotate ----------
   Pure CSS, no script. Each slide is hidden by default and its keyframes hold
   it visible for its own fifth of the cycle; the per-slide delay is written
   inline by the template, which also sets --hero-cycle from how many slides
   actually rendered — so a missing file shortens the loop rather than leaving
   a stretch where every slide is transparent and the hero goes dark.

   Every slide fades both ways: the first version started each one's keyframes
   at full opacity, so a slide appeared in a hard cut and only the outgoing one
   faded. The delays are pulled back by the length of one fade so the two
   overlap — the next is fading in over the same second the current fades out,
   rather than the hero dipping to nothing between them.

   The first slide keeps a base opacity of 1 and starts one fade into its own
   timeline: it is the LCP image, and there is nothing to see between first
   paint and the animation starting. */
.hero__bg--slides img{position:absolute;inset:0;opacity:0;
  animation:kenburns 34s ease-in-out infinite alternate,
            heroSlide var(--hero-cycle,25s) linear infinite}
.hero__bg--slides img:first-child{opacity:1}
/* Percentages are of the whole cycle, which is the step times the number of
   slides: at 1.5s a slide over five slides that is 7.5s, so a 0.5s fade is
   the first and last 7% and each slide holds for its own fifth. */
@keyframes heroSlide{
  0%{opacity:0}    /* fades in ... */
  7%{opacity:1}
  20%{opacity:1}   /* ... holds ... */
  27%{opacity:0}   /* ... and fades back out */
  100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .hero__bg--slides img{animation:none;opacity:0}
  .hero__bg--slides img:first-child{opacity:1}
}

/* ---------- Marquee: the gradient drifts through the palette ---------- */
.marq--cyan{
  background:linear-gradient(90deg,var(--cyan),var(--turq),var(--lime),var(--yellow),var(--orange),var(--pink),var(--cyan));
  background-size:400% 100%;
  animation:hue 26s linear infinite;
}
@keyframes hue{from{background-position:0% 50%}to{background-position:400% 50%}}

/* ---------- Wave divider ---------- */
/* Colour between sections instead of on top of the photography. */
/* The dividers between sections drift, which is where the water movement on
   this site lives: they are full width, they are literally waves, and they sit
   in the gap between blocks so nothing they do can land on top of the copy.

   Two layers at different speeds and directions — one shape sliding sideways
   reads as a picture being dragged, two read as water. max-width:none because
   the base rule caps every svg at 100% and these are deliberately twice the
   width of the divider, which is what makes the loop seamless. */
.wave{display:block;position:relative;width:100%;height:clamp(38px,5vw,72px);
  line-height:0;overflow:hidden}
.wave svg{display:block;position:absolute;left:0;bottom:0;width:200%;max-width:none;height:100%;
  animation:waveDrift linear infinite;will-change:transform}
/* Qualified with .wave so these beat the ".wave svg" rule above them: the
   shorthand there sets animation-duration back to its initial 0s, and a bare
   class selector loses to it — the waves sat still. */
.wave .wave__back{animation-duration:22s;animation-direction:reverse}
.wave .wave__front{animation-duration:34s}
.wave--up{transform:rotate(180deg)}
@keyframes waveDrift{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .wave svg{animation:none}
}

/* ---------- Buttons: a shine that crosses on hover ---------- */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .55s var(--ease);pointer-events:none;
}
.btn:hover::after{left:130%}

/* ---------- Hero stats: count up ---------- */
.stat-count{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .js-reveal{opacity:1;transform:none;transition:none}
  .hero__bg img{animation:none}
  .marq--cyan{animation:none;background-size:100% 100%}
  .btn::after{display:none}
}


/* ---------- BOOKING (add from the price rows, leaves as one WhatsApp message) ----------
   The business takes payment on delivery, so none of this is a checkout: there
   is nothing to charge and nothing stored. It exists so the guest never has to
   retype an item, a duration or a price into a free-text box, which is what the
   site it replaces asked of them. */
.prow__add{
  width:34px;height:34px;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);
  font-size:1.15rem;font-weight:800;line-height:1;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease);
}
.prow__add:hover{background:var(--pink);border-color:var(--pink);color:#fff}
.prow__add:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.prow__add.is-added{background:var(--cyan);border-color:var(--cyan);color:var(--ink);transform:scale(1.12)}
.prow__add.is-added span::before{content:'✓'}
.prow__add.is-added span{font-size:0}
.prow__add.is-added span::before{font-size:1rem}

/* Stacked with the WhatsApp bubble, not across it. Same right edge, sitting
   directly above it: the two are one column of floating actions rather than a
   bar that covers the thing underneath. The offsets are the WhatsApp bubble's
   own height — 46px icon plus its padding — at each breakpoint. */
.bkg{
  position:fixed;z-index:151;
  right:clamp(.9rem,2.5vw,1.6rem);
  bottom:calc(clamp(.9rem,2.5vw,1.6rem) + 64px + .7rem);
}

.bkg__bar{
  position:relative;display:grid;place-items:center;
  width:58px;height:58px;padding:0;border:0;border-radius:50%;
  background:var(--pink);color:#fff;cursor:pointer;
  box-shadow:0 12px 28px -8px rgba(4,32,52,.55),0 0 0 4px rgba(231,41,134,.18);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.bkg__bar:hover{transform:translateY(-3px);
  box-shadow:0 18px 34px -10px rgba(4,32,52,.6),0 0 0 7px rgba(231,41,134,.22)}
.bkg__bar:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.bkg__count{
  position:absolute;top:-4px;right:-4px;min-width:24px;height:24px;padding:0 .35rem;
  display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--yellow);color:var(--ink);border:2px solid #fff;
  font-weight:900;font-size:.76rem;line-height:1;
}

/* Anchored to the bubble on a desktop; a bottom sheet on a phone, where a
   380px popover in the corner would be most of the screen anyway. */
.bkg__panel{
  position:absolute;right:0;bottom:calc(100% + .8rem);width:380px;
  max-height:min(72vh,660px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:1.2rem 1.2rem 1.4rem;box-shadow:0 24px 60px rgba(4,20,31,.28);
}
.bkg__head{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem}
.bkg__head h2{margin-right:auto}
.bkg__total{font-weight:900;font-size:1.05rem;letter-spacing:-.02em;
  font-variation-settings:'wdth' var(--w-cond)}
.bkg__close{border:0;background:none;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--ink-45);padding:0 .2rem}
.bkg__close:hover{color:var(--ink)}

.bkg__lines{list-style:none;margin:0 0 .9rem;padding:0;border-top:1px solid var(--line)}
.bkg__line{display:flex;align-items:center;gap:1rem;padding:.7rem .1rem;border-bottom:1px solid var(--line)}
.bkg__line-t{min-width:0;margin-right:auto}
.bkg__line-t strong{display:block;font-weight:800;font-size:.95rem}
.bkg__line-t span{display:block;font-size:.82rem;color:var(--ink-70)}
.bkg__qty{display:flex;align-items:center;gap:.55rem;flex:none}
.bkg__qty button{width:28px;height:28px;border:1.5px solid var(--line);background:#fff;border-radius:50%;
  font-size:1rem;font-weight:800;line-height:1;cursor:pointer;color:var(--ink)}
.bkg__qty button:hover{border-color:var(--pink);color:var(--pink)}
.bkg__qty span{min-width:1.4ch;text-align:center;font-weight:800}

.bkg__drop{flex:none;width:26px;height:26px;border:0;background:none;border-radius:50%;
  font-size:1.25rem;line-height:1;cursor:pointer;color:var(--ink-45);display:grid;place-items:center}
.bkg__drop:hover{background:rgba(231,41,134,.12);color:var(--pink)}
.bkg__drop:focus-visible{outline:2px solid var(--pink);outline-offset:1px}

/* Worked out from the order, not typed, so it should not look like an invitation. */
.bkg__field input[readonly]{background:var(--paper-2);color:var(--ink-70);cursor:default;border-style:dashed}
.bkg__field input[readonly]:focus{outline:none;border-color:var(--line)}

.bkg__nudge{margin:0 0 1rem;padding:.7rem .9rem;border-radius:14px;
  background:rgba(255,242,18,.22);font-size:.85rem;font-weight:700}

.bkg__fields{display:grid;gap:.75rem;margin-bottom:.9rem}
.bkg__row2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.bkg__field{display:flex;flex-direction:column;gap:.3rem}
.bkg__field > span{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-45);font-variation-settings:'wdth' var(--w-exp)}
.bkg__field input,.bkg__field select{
  width:100%;padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:12px;
  font:inherit;font-size:1rem;background:#fff;color:var(--ink);
}
.bkg__field input:focus,.bkg__field select:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:var(--cyan)}

.bkg__sum{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:0 0 .8rem;padding-top:.9rem;border-top:2px solid var(--ink)}
.bkg__sum span{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em;
  color:var(--ink-45);font-variation-settings:'wdth' var(--w-exp)}
.bkg__sum strong{font-size:1.5rem;font-weight:900;letter-spacing:-.03em;
  font-variation-settings:'wdth' var(--w-cond)}
.bkg__note{margin:0 0 1rem;font-size:.78rem;color:var(--ink-70)}

/* One primary action at full width, and the two get-out-of-jail links tucked
   underneath it in the same quiet weight. The three of them on one row read as
   three competing choices, which is not what they are. */
.bkg__actions{display:grid;gap:.85rem}
.bkg__send{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:#25D366;color:#04141F;
}
.bkg__send:hover{background:#1EBE5B;color:#04141F}
.bkg__send svg{flex:none}

.bkg__status{margin:0;font-size:.85rem;font-weight:700;color:var(--ink);
  padding:.6rem .8rem;border-radius:12px;background:var(--cyan-50)}
.bkg__status.is-bad{background:rgba(231,41,134,.12);color:var(--pink)}
.bkg__send[disabled]{opacity:.6;cursor:progress}
.bkg__foot{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:0;
  font-size:.8rem;color:var(--ink-45)}
.bkg__foot a,.bkg__foot button{
  border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--ink-45);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.bkg__foot a:hover,.bkg__foot button:hover{color:var(--pink)}

@media(max-width:760px){
  /* The WhatsApp bubble loses its label here and shrinks, so the cart drops
     with it — otherwise there is a visible gap between the two. */
  .bkg{bottom:calc(clamp(.9rem,2.5vw,1.6rem) + 59px + .7rem)}
}

@media(max-width:640px){
  .bkg__row2{grid-template-columns:1fr}
  /* A sheet rather than a corner popover: fixed to the viewport, not to the
     bubble, so it can use the full width. */
  .bkg__panel{
    position:fixed;right:0;left:0;bottom:0;width:auto;
    margin:0;max-height:82vh;border-radius:22px 22px 0 0;
    padding-bottom:calc(1.4rem + env(safe-area-inset-bottom));
  }
}

/* ---------- CONTACT METHODS ----------
   Each channel its own target. This replaced a bulleted list of phone numbers
   inside the page copy, on the one page whose whole job is to get someone to
   make contact. */
.cmeth{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.cmeth__t{
  display:grid;gap:.3rem;padding:1.4rem 1.3rem;background:#fff;
  border:1px solid var(--line);border-radius:20px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s;
}
.cmeth__t:hover{transform:translateY(-4px);border-color:transparent;
  box-shadow:0 18px 40px -16px rgba(4,32,52,.42)}
.cmeth__i{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:var(--cyan-50);color:var(--ink);margin-bottom:.5rem}
.cmeth__t strong{font-size:1.05rem;font-weight:900;letter-spacing:-.02em}
.cmeth__t span:not(.cmeth__i){font-size:.88rem;color:var(--ink-70)}
.cmeth__t--wa .cmeth__i{background:#25D366;color:#04141F}
/* Free delivery is the offer, not a footnote. */
.fdel{
  display:flex;align-items:center;gap:clamp(1rem,3vw,1.7rem);
  padding:clamp(1.2rem,3vw,1.7rem) clamp(1.2rem,3.5vw,2rem);
  border-radius:22px;background:var(--yellow);color:var(--ink);
  box-shadow:0 16px 40px -20px rgba(4,32,52,.5);
}
.fdel__mark{flex:none;display:grid;place-items:center;width:60px;height:60px;
  border-radius:50%;background:var(--ink);color:var(--yellow)}
.fdel__body{margin:0;display:grid;gap:.15rem}
.fdel__big{
  font-size:clamp(1.5rem,4.4vw,2.3rem);font-weight:900;line-height:1;
  text-transform:uppercase;letter-spacing:-.02em;
  font-variation-settings:'wdth' var(--w-cond);
}
.fdel__where{font-weight:900;font-size:clamp(.86rem,2.2vw,1rem);text-transform:uppercase;
  letter-spacing:.11em;font-variation-settings:'wdth' var(--w-exp)}
.fdel__sub{font-size:.92rem;font-weight:600;max-width:62ch}

@media(max-width:560px){
  .fdel{flex-direction:column;align-items:flex-start;text-align:left}
  .fdel__mark{width:52px;height:52px}
}

/* The pairing sentence. Body copy, deliberately — it is an editorial link, and
   styling it as a widget would undo the point of writing it as one. */
.pairs a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;
  text-decoration-color:var(--pink);font-weight:700}
.pairs a:hover{color:var(--pink)}
.on-dark .pairs a{color:#fff;text-decoration-color:var(--yellow)}
.on-dark .pairs a:hover{color:var(--yellow)}