/* ============================================================
   Tribal Kite School — page kit
   The shared design system for every interior page:
   tokens, section shells + colour auras, hero, trust bar,
   feature lists, pricing cards, location cards, wind season,
   FAQ, closing CTA, and the shared interaction rules.
   Page-specific components live in that page's own file.
   ============================================================ */

.kp-page{
  /* Premium ocean palette: deep navy grounds the page, ivory lifts
     the reading sections, gold stays an accent — never dominant. */
  --k-bg:#031923;          /* deep ocean navy */
  --k-bg2:#06131B;         /* darkest navy    */
  --k-bg3:#072330;         /* raised inset    */
  --k-line:rgba(214,232,235,.10);
  --k-line2:rgba(214,232,235,.18);
  --k-shade:3,25,35;       /* rgb of --k-bg   */

  --k-ink:#F4F0E8;         /* ivory           */
  --k-body:#A9BCC4;
  --k-mute:#7B929C;

  --k-gold:#F5B82E;        /* warm gold       */
  --k-gold-hi:#FFD570;
  --k-gold-lo:#D79C1E;
  --k-gold-dk:#B8871A;
  --k-teal:#12A5B8;        /* home --lagoon   */
  --k-teal-d:#0E7C8A;

  --k-cream:#F4F0E8;       /* ivory cards     */
  --k-cream-ink:#06131B;

  background:var(--k-bg);color:var(--k-ink);font-family:var(--r-body)}

/* Light sections mirror the home page's light/navy rhythm.
   Flipping the tokens re-themes every component automatically. */
.kp-sec--light{
  --k-ink:#06131B;
  --k-body:#5A6672;
  --k-mute:#8A94A0;
  --k-line:rgba(6,19,27,.11);
  --k-line2:rgba(6,19,27,.20);
  --k-gold:var(--k-gold-dk);      /* deeper gold reads properly on cream */
  background:#F4F0E8;color:var(--k-ink)}
.kp-sec--light .kp-aura{opacity:.5}
.kp-page *,.kp-page *::before,.kp-page *::after{box-sizing:border-box}
.kp-wrap{width:min(1240px,100% - clamp(20px,5vw,72px)*2);margin-inline:auto;
  position:relative;z-index:1}

.kp-eyebrow{display:flex;align-items:flex-start;gap:13px;font-family:var(--r-mono);
  font-size:10.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--k-gold);margin:0 0 20px}
.kp-eyebrow::before{content:"";width:30px;height:1px;background:currentColor;
  opacity:.75;flex:0 0 30px;margin-top:.62em}
.kp-h2{font-family:var(--r-display);font-weight:640;letter-spacing:-.005em;
  font-size:clamp(26px,3.2vw,40px);line-height:1.14;margin:0;color:var(--k-ink)}
.kp-rule{display:block;width:52px;height:2px;border-radius:2px;margin:20px 0 0;
  background:linear-gradient(90deg,var(--k-gold),rgba(245,184,46,0))}
.kp-lead{font-size:14.5px;line-height:1.72;color:var(--k-body);margin:16px 0 0;max-width:54ch}

/* --- section shells + colour auras --------------------------- */
.kp-sec{position:relative;overflow:hidden;padding:clamp(54px,6.2vw,86px) 0}
.kp-sec--lift{background:var(--k-bg2)}
.kp-sec--deep{background:var(--k-bg3)}
.kp-sec + .kp-sec::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--k-line2) 18%,var(--k-line2) 82%,transparent)}
.kp-aura{position:absolute;inset:0;pointer-events:none}
.kp-aura--teal{background:
  radial-gradient(54% 48% at 10% 6%, rgba(95,182,196,.15), transparent 66%),
  radial-gradient(40% 40% at 96% 92%, rgba(46,127,142,.13), transparent 70%)}
.kp-aura--gold{background:
  radial-gradient(50% 46% at 92% 10%, rgba(245,184,46,.12), transparent 68%),
  radial-gradient(44% 44% at 4% 88%, rgba(215,156,30,.09), transparent 72%)}
.kp-aura--split{background:
  radial-gradient(46% 52% at 4% 50%, rgba(95,182,196,.14), transparent 66%),
  radial-gradient(46% 52% at 96% 50%, rgba(245,184,46,.11), transparent 66%)}
.kp-aura--deepteal{background:
  radial-gradient(70% 62% at 50% 0%, rgba(46,127,142,.20), transparent 72%)}

.kp-div{height:1px;margin:clamp(42px,5vw,64px) 0;
  background:linear-gradient(90deg,transparent,var(--k-line2) 20%,var(--k-line2) 80%,transparent)}

/* pills on dark */
.kp-page .r-pill--gold{color:#16303A;
  background-image:linear-gradient(to top,#fff 50%,var(--k-gold) 50%)}
.kp-page .r-pill--line{color:var(--k-gold);border-color:rgba(245,184,46,.45)}
.kp-page .r-pill--line:hover{color:#16303A;
  background-image:linear-gradient(to top,var(--k-gold) 50%,rgba(245,184,46,0) 50%)}

/* ============ HERO ============
   Full-bleed photograph graded into the palette.
   Layers: photo -> teal wash -> scrim -> vignette -> grain.
   ============================================================ */
.kh{position:relative;overflow:hidden;background:var(--k-bg);
  /* Fill the viewport. At min(84vh,740px) the hero stopped short of the
     fold on any screen taller than ~880px, and what showed underneath
     was the next section's 86px of top padding — a slab of empty cream
     with nothing in it. The nav is transparent and sits on top of the
     hero, so the target is the whole viewport, not viewport-minus-nav;
     the top padding below already clears the nav.
     svh rather than vh so mobile browser chrome cannot push the bottom
     of the hero off-screen. */
  min-height:100vh;min-height:100svh;display:flex;align-items:center;
  /* clear the fixed header, which now sits transparently on top */
  padding:calc(var(--snav-h) + clamp(30px,5vw,58px)) 0 clamp(48px,6vw,80px)}
.kh__media{position:absolute;inset:0;overflow:hidden}
.kh__media img{width:100%;height:100%;object-fit:cover;
  /* the kite sits high and the rider low-right; this keeps both in frame
     from 1280 all the way out to 1920 */
  object-position:50% 40%;
  filter:saturate(.96) contrast(1.02)}
.kh__wash{position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.5;
  background:linear-gradient(120deg,var(--k-teal) 0%,transparent 56%,var(--k-gold-lo) 100%)}
/* A tight pool of shade behind the copy rather than a broad band,
   so the rider keeps his light while the type stays readable. */
.kh__scrim{position:absolute;inset:0;
  background:
    radial-gradient(58% 74% at 20% 52%, rgba(3,25,35,.90) 0%,
                     rgba(3,25,35,.62) 46%, rgba(3,25,35,0) 78%),
    linear-gradient(100deg,rgba(3,25,35,.88) 0%,rgba(3,25,35,.60) 16%,
                            rgba(3,25,35,.22) 32%,rgba(3,25,35,0) 52%),
    linear-gradient(180deg,rgba(3,25,35,.50) 0%,rgba(3,25,35,0) 24%,
                            rgba(3,25,35,0) 62%,rgba(3,25,35,.86) 100%)}
.kh__vig{position:absolute;inset:0;
  background:radial-gradient(124% 94% at 52% 44%,transparent 56%,rgba(2,14,20,.26) 100%)}
.kh__grain{position:absolute;inset:0;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.kh__in{position:relative;z-index:2;max-width:640px}
.kh__eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--r-mono);
  font-size:10.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--k-gold);margin:0 0 22px}
.kh__eyebrow::before{content:"";width:40px;height:1px;background:currentColor;opacity:.85;flex:0 0 40px}
.kh__title{font-family:var(--r-display);font-weight:640;letter-spacing:-.012em;
  font-size:clamp(36px,5.5vw,70px);line-height:1.02;margin:0 0 24px;text-transform:uppercase;
  color:var(--k-ink);text-shadow:0 2px 30px rgba(2,14,20,.4)}
.kh__title em{font-style:normal;
  background:linear-gradient(170deg,var(--k-gold-hi) 16%,var(--k-gold-lo) 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.kh__lead{font-size:15.5px;line-height:1.78;color:var(--k-body);margin:0 0 34px;max-width:45ch}
.kh__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.kh__edge{position:absolute;right:clamp(14px,2.4vw,30px);top:50%;z-index:2;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--r-mono);font-size:9.5px;font-weight:700;letter-spacing:.42em;
  text-transform:uppercase;color:rgba(239,234,225,.38);pointer-events:none}
.kh__edge::after{content:"";display:block;width:1px;height:56px;margin:16px auto 0;
  background:linear-gradient(180deg,rgba(245,184,46,.55),transparent)}

.kh__cue{position:absolute;left:max(calc((100% - min(1240px,100% - clamp(20px,5vw,72px)*2))/2),clamp(20px,5vw,72px));
  bottom:26px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  font-family:var(--r-mono);font-size:8.5px;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(239,234,225,.38);text-decoration:none;transition:color .3s}
.kh__cue:hover{color:var(--k-gold)}
.kh__cue span{width:1px;height:34px;
  background:linear-gradient(180deg,rgba(245,184,46,.65),transparent);
  animation:khCue 2.6s ease-in-out infinite}
@keyframes khCue{0%,100%{opacity:.35;transform:scaleY(.7);transform-origin:top}
  50%{opacity:1;transform:scaleY(1);transform-origin:top}}

@media(max-width:900px){
  /* The hero used to be content-sized here. A ~500px-tall box 390px wide
     showed about 40% of a landscape photograph's width, and the rider
     was simply outside that window — cropped clean out on every page.
     Filling the screen fixes it geometrically: at 390x844 the image
     covers to 1499x844, so the full height is in frame and only the
     horizontal anchor below has to be right. */
  /* ...but a full screen was too much. Measured at 390x844, the copy
     ran out between 257px and 439px depending on the page, leaving
     405-587px of bare photograph under it — half to two thirds of the
     first screen on every page, worst on the ones with no lead
     paragraph. That reads as a page that has not finished loading.

     So the hero is content-sized again, but with a deep floor under
     it rather than the old 64-96px: the copy sits at the top and the
     padding below guarantees a band of photograph roughly 240px deep
     whatever the page. The height then follows the copy — about
     62svh on Contact, 80svh on Floating — instead of every page
     claiming the same screen and padding the difference with water.
     The band is svh-based so it shrinks on short screens instead of
     pushing the hero past the fold. */
  .kh{min-height:0;
    /* copy at the top, so the band below belongs to the photograph
       instead of the two fighting over the middle */
    align-items:flex-start;
    padding:calc(var(--snav-h) + clamp(18px,5vw,34px)) 0 clamp(180px,28svh,260px)}
  .kh__in{max-width:none}
  /* The subject sits right of centre in all four photographs. */
  .kh__media img{object-position:80% 50%}
  /* Dark where the copy is and clearing over the subject, rather than the
     flat wash this used to be — that darkened the whole frame evenly and
     buried the rider even where he was in shot. The foot comes back a
     little so the section edge below still has something to sit on.

     The stops moved out when the hero stopped being a full screen.
     These are percentages of the hero, and the copy now runs to
     52-65% of a much shorter box instead of ~45% of a tall one — at
     the old numbers the buttons on the longer pages sat where the
     wash had already faded to .20 and lost their outline. Strong to
     58%, clear across the photo band below it. */
  .kh__scrim{background:
    linear-gradient(180deg,rgba(3,25,35,.95) 0%,rgba(3,25,35,.90) 30%,
                            rgba(3,25,35,.80) 52%,rgba(3,25,35,.52) 66%,
                            rgba(3,25,35,.18) 80%,rgba(3,25,35,.60) 100%)}
  /* the vignette pulls the corners in too hard on a narrow frame */
  .kh__vig{background:radial-gradient(140% 80% at 62% 62%,transparent 62%,rgba(2,14,20,.30) 100%)}
  /* 36px is the floor of the desktop clamp, and on a 375px screen
     "MASTER THE OCEAN." runs past the edge of its column. .kh has
     overflow:hidden, so the page never scrolled and the overflow sweep
     never saw it — the last glyph was just quietly shaved off. Scale
     with the viewport down here instead of pinning a floor. */
  .kh__title{font-size:clamp(26px,7.2vw,42px);margin-bottom:20px}
  .kh__lead{font-size:14.5px;margin-bottom:26px}
  .kh__eyebrow{margin-bottom:16px}
  .kh__edge,.kh__cue{display:none}
}
@media(prefers-reduced-motion:reduce){.kh__cue span{animation:none}}

/* ============ TRUST BAR ============ */
.ktr{position:relative;background:var(--k-bg)}
.ktr::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,184,46,.30) 22%,
                             rgba(245,184,46,.30) 78%,transparent)}
.ktr__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.ktr__it{position:relative;display:flex;gap:15px;align-items:flex-start;
  padding:32px clamp(14px,2vw,30px) 32px 0;transition:opacity .35s}
.ktr__it:hover{opacity:1}
.ktr__ic{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:50%;
  background:rgba(245,184,46,.10);transition:background .35s,transform .35s}
.ktr__it:hover .ktr__ic{background:rgba(245,184,46,.18);transform:translateY(-2px)}
.ktr__ic svg{width:21px;height:21px;stroke:var(--k-gold);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ktr__it b{display:block;font-family:var(--r-mono);font-size:10px;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--k-ink);margin:0 0 7px}
.ktr__it p{font-size:12.5px;line-height:1.58;color:var(--k-mute);margin:0}
@media(max-width:900px){
  .ktr__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .ktr__grid{grid-template-columns:1fr}
  .ktr__it{padding-block:18px}
}

/* ============ WHY KITESURF ============ */
.kw__grid{display:grid;grid-template-columns:.82fr 2fr;gap:clamp(26px,3.6vw,58px);align-items:center}
.kw__items{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.kw__it{padding:0 clamp(14px,1.8vw,26px);border-left:1px solid var(--k-line)}
.kw__it:first-child{border-left:0;padding-left:0}
.kw__ic{height:42px;display:flex;align-items:flex-end;margin:0 0 18px}
.kw__ic svg{width:32px;height:32px;stroke:var(--k-gold);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.kw__n{font-family:var(--r-mono);font-size:11px;font-weight:700;color:var(--k-gold);
  display:block;margin:0 0 7px}
.kw__it b{display:block;font-family:var(--r-mono);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--k-ink);margin:0 0 8px}
.kw__it p{font-size:12.5px;line-height:1.62;color:var(--k-mute);margin:0}
@media(max-width:1040px){.kw__grid{grid-template-columns:1fr}}
@media(max-width:900px){
  .kw__items{grid-template-columns:repeat(2,1fr);gap:28px 0}
  .kw__it:nth-child(3){border-left:0}
}
@media(max-width:460px){.kw__items{grid-template-columns:1fr}.kw__it{border-left:0;padding-left:0}}

/* ============ PRICING — compact ============ */
.kc__head{max-width:700px;margin:0 auto clamp(30px,3.4vw,44px);text-align:center}
.kc__head .kp-eyebrow{justify-content:center}
.kc__head .kp-eyebrow::before{display:none}
.kc__head .kp-rule{margin-inline:auto}
.kc__head p{font-size:14px;line-height:1.72;color:var(--k-body);margin:16px auto 0;max-width:62ch}

.kc__cards{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.8vw,26px);align-items:stretch;max-width:1060px;
  margin:clamp(6px,1vw,14px) auto 0}

/* Ivory cards on navy. No imagery, no icons, no index numbers — the
   hierarchy is carried entirely by type, rule and elevation. */
.kc__card{position:relative;background:var(--k-cream);color:var(--k-cream-ink);
  border-radius:16px;padding:clamp(26px,2.4vw,34px) clamp(22px,2vw,28px) clamp(24px,2.2vw,30px);
  display:flex;flex-direction:column;
  box-shadow:0 2px 4px rgba(4,16,22,.20),0 18px 40px -12px rgba(4,16,22,.46);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s}
.kc__card::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(27,51,60,.07)}
.kc__card:hover{transform:translateY(-12px);
  box-shadow:0 4px 8px rgba(4,16,22,.22),0 42px 74px -18px rgba(4,16,22,.62)}

.kc__card h2,
.kc__card h3{font-family:var(--r-display);font-weight:620;font-size:clamp(19px,1.6vw,23px);
  line-height:1.15;letter-spacing:.005em;margin:0 0 7px}
.kc__hrs{font-family:var(--r-mono);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#8C9AA2;margin:0 0 clamp(18px,1.8vw,24px)}

/* The price sits in a framed well rather than floating at the top
   of the card. It was 52px, which on a 320px card was the loudest
   thing on the page and pushed the currency and the unit out of
   alignment with it. Baseline-aligned now: symbol, figure and unit
   on one line that cannot wrap apart. */
.kc__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;
  margin:0 0 clamp(16px,1.6vw,20px);padding:12px 14px;
  border:1px solid rgba(27,51,60,.12);border-radius:11px;
  background:rgba(27,51,60,.035);
  font-family:var(--num-font);font-weight:var(--num-weight);
  line-height:var(--num-lh);letter-spacing:var(--num-track);
  color:var(--k-cream-ink);font-variant-numeric:tabular-nums}
.kc__price sup{font-size:var(--num-unit);font-weight:700;top:0;
  font-family:var(--r-mono);letter-spacing:var(--num-unit-track);
  text-transform:uppercase;color:#8C9AA2;vertical-align:baseline}
.kc__price b{font-size:var(--num-lg);font-weight:var(--num-weight);
  letter-spacing:var(--num-track)}
.kc__price i{margin-left:auto;font-style:normal;font-family:var(--r-mono);
  font-size:var(--num-unit);font-weight:700;letter-spacing:var(--num-unit-track);
  text-transform:uppercase;color:#8C9AA2;white-space:nowrap}

.kc__tier{font-size:12.5px;line-height:1.55;color:#5E6E76;margin:clamp(16px,1.6vw,20px) 0 0;
  padding:0 0 clamp(16px,1.6vw,20px);border-bottom:1px solid rgba(27,51,60,.14)}

.kc__skills{list-style:none;margin:clamp(16px,1.6vw,20px) 0 clamp(22px,2.2vw,28px);
  padding:0;flex-grow:1}
.kc__skills li{position:relative;font-size:12.5px;line-height:1.5;color:#41535B;
  padding:5px 0 5px 17px}
.kc__skills li::before{content:"";position:absolute;left:1px;top:11px;
  width:5px;height:5px;border-radius:50%;background:var(--k-gold-lo);opacity:.75}

.kc__card .r-pill{align-self:stretch;justify-content:center;padding:13px 18px;font-size:10px;
  color:var(--k-gold-lo);border:1.5px solid rgba(215,156,30,.5);
  background-image:linear-gradient(to top,var(--k-gold) 50%,rgba(245,184,46,0) 50%);
  background-size:100% 200%;background-position:0 0}
.kc__card .r-pill:hover{background-position:0 100%;color:#16303A;border-color:var(--k-gold)}

/* the recommended course sits forward of the other two */
.kc__card--pop{background:linear-gradient(180deg,#FCFAF4,var(--k-cream));
  box-shadow:0 4px 8px rgba(4,16,22,.24),0 34px 66px -16px rgba(4,16,22,.60)}
.kc__card--pop::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:16px 16px 0 0;z-index:1;
  background:linear-gradient(90deg,transparent 4%,var(--k-gold) 50%,transparent 96%)}
.kc__card--pop .r-pill{background-image:none;background:var(--k-gold);
  color:#16303A;border-color:var(--k-gold)}
.kc__card--pop .r-pill:hover{filter:brightness(1.07)}
@media(min-width:861px){
  .kc__card--pop{transform:translateY(-14px)}
  .kc__card--pop:hover{transform:translateY(-24px)}
}
.kc__tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--r-mono);font-size:8.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#16303A;background:var(--k-gold);
  padding:6px 15px;border-radius:999px;white-space:nowrap;
  box-shadow:0 8px 20px rgba(4,16,22,.4)}

.kc__note{font-family:var(--r-mono);font-size:9.5px;letter-spacing:.12em;color:var(--k-mute);
  text-align:center;margin:clamp(30px,3vw,40px) 0 0}
/* The price cards used to become a horizontal snap carousel here — you
   swiped sideways through them and only ever saw one at a time. The home
   page's membership plans have always just stacked, and a visitor
   comparing three courses on a phone should be able to scroll past all of
   them the same way they scroll the rest of the page. So: one centred
   column, at the same 400px the home page uses, and the carousel is gone
   along with its snap points, its custom scrollbar and its swipe hint.
   Removing it also takes a horizontal-scroll container off the page. */
@media(max-width:860px){
  .kc__cards{grid-template-columns:1fr;max-width:400px;margin-inline:auto;padding:0}
}

/* ============ LOCATIONS ============ */
.kl__grid{display:grid;grid-template-columns:.8fr 2fr;gap:clamp(24px,3.4vw,54px);align-items:center}
.kl__cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px)}
.kl__card{position:relative;border-radius:16px;overflow:hidden;
  min-height:clamp(230px,25vw,290px);display:flex;align-items:flex-end;border:1px solid var(--k-line)}
.kl__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* the lower third of the card is under the scrim and the caption, so
     bias the crop upward to keep the riders in the clear */
  object-position:50% 38%;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.kl__card:hover img{transform:scale(1.06)}
.kl__card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,25,35,0) 26%,rgba(3,25,35,.90) 100%)}
.kl__in{position:relative;z-index:1;padding:24px 22px 22px;width:100%}
.kl__in h3{font-family:var(--r-display);font-weight:640;font-size:clamp(22px,2.4vw,28px);
  text-transform:uppercase;letter-spacing:.02em;margin:0 0 12px;color:var(--k-ink)}
.kl__f{list-style:none;margin:0 0 18px;padding:0}
.kl__f li{font-size:12.5px;color:var(--k-body);padding:3px 0;display:flex;gap:8px;align-items:center}
.kl__f svg{width:12px;height:12px;flex:0 0 12px;stroke:var(--k-gold);fill:none;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1040px){.kl__grid{grid-template-columns:1fr}}
@media(max-width:640px){.kl__cards{grid-template-columns:1fr}}

/* ============ FINAL CTA ============ */
.kcta{position:relative;overflow:hidden;padding:clamp(56px,7vw,96px) 0;
  border-top:1px solid var(--k-line)}
.kcta__bg{position:absolute;inset:0;overflow:hidden}
.kcta__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:saturate(.96) contrast(1.02)}
.kcta__bg .kh__wash{opacity:.42}
.kcta__bg .kh__scrim{background:
  linear-gradient(100deg,rgba(3,25,35,.96) 0%,rgba(3,25,35,.86) 30%,
                          rgba(3,25,35,.44) 55%,rgba(3,25,35,.10) 76%,rgba(3,25,35,0) 92%),
  linear-gradient(180deg,rgba(3,25,35,.48) 0%,rgba(3,25,35,0) 34%,
                          rgba(3,25,35,0) 66%,rgba(3,25,35,.62) 100%)}
.kcta__bg .kh__vig{background:radial-gradient(122% 92% at 42% 46%,transparent 50%,rgba(2,14,20,.28) 100%)}
.kcta__in{position:relative;z-index:1;max-width:44ch}
.kcta h2{font-family:var(--r-display);font-weight:640;letter-spacing:-.005em;
  font-size:clamp(30px,4.2vw,52px);line-height:1.08;margin:0 0 26px;
  text-transform:uppercase;color:var(--k-ink)}
.kcta__cta{display:flex;gap:14px;flex-wrap:wrap}

/* ============================================================
   LIGHT-SECTION ADJUSTMENTS
   Components that hard-code a dark treatment need a light twin.
   ============================================================ */
.kp-sec--light .kc__card{box-shadow:0 14px 34px rgba(6,19,27,.10);background:#fff}
.kp-sec--light .kc__card:hover{box-shadow:0 26px 54px rgba(6,19,27,.16)}
.kp-sec--light .kc__card--pop{background:linear-gradient(180deg,#fff,#FBF9F4);
  box-shadow:0 20px 48px rgba(6,19,27,.17)}
.kp-sec--light .kc__tag{box-shadow:0 8px 18px rgba(6,19,27,.22)}
.kp-sec--light .ki__ph::after{background:linear-gradient(180deg,rgba(3,25,35,0) 68%,rgba(3,25,35,.34) 100%)}
.kp-sec--light .ki__frame::before{border-color:rgba(184,135,26,.5)}
.kp-sec--light .ki__rate b{color:var(--k-gold-dk)}
.kp-sec--light .ki__rate--day b{color:var(--k-ink)}
.kp-sec--light .ki__role{border-color:rgba(184,135,26,.45)}
.kp-sec--light .ki__it:hover,
.kp-sec--light .kin__list li:hover{color:var(--k-ink)}

/* ============================================================
   WIND SEASON
   Kite schools live or die on wind. Best-in-class sites publish
   their season openly; this makes the page genuinely useful.
   ============================================================ */
.kws__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);
  margin-top:38px}
.kws__card{position:relative;border-radius:16px;padding:26px 24px 24px;
  border:1px solid var(--k-line);background:rgba(214,232,235,.03);
  display:flex;flex-direction:column;
  transition:border-color .35s,background .35s,transform .35s}
.kws__card:hover{border-color:rgba(245,184,46,.42);background:rgba(245,184,46,.05);
  transform:translateY(-4px)}
.kws__card--best{border-color:rgba(245,184,46,.5);background:rgba(245,184,46,.06)}
.kws__tag{position:absolute;top:-11px;left:24px;font-family:var(--r-mono);font-size:8.5px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#06131B;
  background:var(--k-gold);padding:5px 12px;border-radius:999px}
.kws__name{font-family:var(--r-display);font-weight:640;font-size:22px;line-height:1.1;
  margin:0 0 4px;color:var(--k-ink)}
.kws__when{font-family:var(--r-mono);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--k-gold);margin:0 0 18px}
/* wind strength as a simple meter */
.kws__meter{display:flex;gap:4px;margin:0 0 8px}
.kws__meter i{flex:1;height:5px;border-radius:3px;background:var(--k-line2)}
.kws__meter i.on{background:linear-gradient(90deg,var(--k-teal),var(--k-gold))}
.kws__kts{font-family:var(--r-mono);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--k-mute);margin:0 0 16px}
.kws__card p{font-size:13px;line-height:1.66;color:var(--k-body);margin:0;flex-grow:1}
.kws__meta{display:flex;gap:16px;margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--k-line);flex-wrap:wrap}
.kws__meta span{font-family:var(--r-mono);font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--k-mute)}
.kws__meta b{color:var(--k-ink);font-weight:700}
@media(max-width:880px){.kws__grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}

/* ============================================================
   FAQ — native <details> so it works with no JavaScript at all
   ============================================================ */
.kfq{max-width:840px;margin:38px auto 0}
.kfq details{border-bottom:1px solid var(--k-line)}
.kfq details[open]{border-color:var(--k-line2)}
.kfq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:20px 2px;font-family:var(--r-display);font-weight:600;
  font-size:clamp(15px,1.7vw,18px);line-height:1.35;color:var(--k-ink);
  transition:color .28s}
.kfq summary::-webkit-details-marker{display:none}
.kfq summary:hover{color:var(--k-gold)}
.kfq summary::after{content:"";flex:0 0 11px;width:11px;height:11px;margin-left:auto;
  border-right:1.8px solid var(--k-gold);border-bottom:1.8px solid var(--k-gold);
  transform:rotate(45deg) translateY(-2px);transition:transform .3s}
.kfq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.kfq__n{font-family:var(--r-mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  color:var(--k-gold);opacity:.7;flex:0 0 auto}
.kfq__a{padding:0 2px 22px 44px;font-size:13.5px;line-height:1.76;color:var(--k-body);margin:0}
.kfq__a a{color:var(--k-gold);text-decoration:underline;text-underline-offset:2px}
@media(max-width:560px){.kfq__a{padding-left:2px}}

/* ============ FEATURE / CHECK LISTS ============ */
.kin__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,3.6vw,56px)}
.kin__t{display:flex;align-items:center;gap:12px;font-family:var(--r-mono);font-size:10px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--k-gold);margin:0 0 22px}
.kin__t::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(245,184,46,.3),transparent)}
.kin__list{list-style:none;margin:0;padding:0;display:grid;gap:0 clamp(18px,2.4vw,40px)}
.kin__list--2{grid-template-columns:1fr 1fr}
.kin__list li{display:flex;align-items:center;gap:13px;padding:12px 2px;
  border-bottom:1px solid var(--k-line);font-size:13px;line-height:1.4;
  color:var(--k-body);transition:color .28s,border-color .28s}
.kin__list li:hover{color:var(--k-ink);border-color:var(--k-line2)}
.kin__list svg{width:18px;height:18px;flex:0 0 18px;stroke:var(--k-gold);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s}
.kin__list li:hover svg{transform:translateX(2px)}
.kin__bring{border-left:1px solid var(--k-line);padding-left:clamp(28px,3.4vw,52px)}
@media(max-width:1040px){
  .kin__grid{grid-template-columns:1fr;gap:32px}
  .kin__bring{border-left:0;padding-left:0;border-top:1px solid var(--k-line);padding-top:32px}
  .kin__bring .kin__list{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.kin__list--2,.kin__bring .kin__list{grid-template-columns:1fr}}

/* ============ GENERIC SPLIT + SINGLE-CARD HELPERS ============ */
.ksplit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.8vw,60px);align-items:center}
.ksplit--wide{grid-template-columns:1fr 1.2fr}
.ksplit--narrow{grid-template-columns:1.2fr 1fr}
.ksplit__div{border-left:1px solid var(--k-line);padding-left:clamp(26px,3.4vw,52px)}
.ksplit h3{font-family:var(--r-display);font-weight:640;letter-spacing:-.005em;
  font-size:clamp(21px,2.4vw,30px);line-height:1.22;margin:0 0 18px;color:var(--k-ink)}
.ksplit p{font-size:14px;line-height:1.76;color:var(--k-body);margin:0 0 16px;max-width:52ch}
.ksplit p:last-of-type{margin-bottom:0}
.ksplit .r-pill{margin-top:22px}
@media(max-width:1000px){
  .ksplit,.ksplit--wide,.ksplit--narrow{grid-template-columns:1fr;gap:34px}
  .ksplit__div{border-left:0;padding-left:0;border-top:1px solid var(--k-line);padding-top:32px}
}

/* a single offer card, centred */
.kc__cards--one{grid-template-columns:minmax(0,400px);justify-content:center}

/* highlight panel — a bordered box for "what's covered" style lists */
.kpanel{position:relative;border-radius:18px;padding:clamp(24px,2.8vw,32px);
  border:1px solid var(--k-line);background:rgba(214,232,235,.03)}
.kp-sec--light .kpanel{background:#fff;border-color:rgba(6,19,27,.10);
  box-shadow:0 14px 34px rgba(6,19,27,.07)}
.kpanel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,transparent 6%,var(--k-gold) 50%,transparent 94%)}
.kpanel h4{font-family:var(--r-mono);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--k-gold);margin:0 0 18px}

/* ============================================================
   LABEL FONT COMPENSATION
   Barlow Condensed is ~15% narrower than Space Grotesk, so every
   small-caps label needs a size bump and slightly tighter tracking
   to hold the same optical weight.
   ============================================================ */
.kp-eyebrow,.kh__eyebrow{font-size:11px;letter-spacing:.2em;font-weight:700}
.kp-eyebrow::before{margin-top:.7em}
.ktr__it b{font-size:11px;letter-spacing:.11em;font-weight:700}
.kjn__step h3{font-size:11.5px;letter-spacing:.16em}
.kin__t{font-size:10.5px;letter-spacing:.14em}
.kc__n{font-size:11px;font-weight:700}
.kc__hrs{font-size:10.5px;letter-spacing:.11em}
.kc__note,.r-note{font-size:11px;letter-spacing:.04em}
.kc__tag,.kws__tag{font-size:10px;letter-spacing:.14em}
.kw__it b{font-size:11px;letter-spacing:.11em;font-weight:700}
.kw__n{font-size:12.5px}
.kws__when,.kws__kts{font-size:10.5px;letter-spacing:.11em}
.kws__meta span{font-size:10.5px;letter-spacing:.1em}
.kfq__n{font-size:11.5px}
.ki__rate i{font-size:9.5px;letter-spacing:.11em}
.ki__gear + .ki__name{letter-spacing:.01em}

/* ============ RENTALS LIST - shared ============
   The hire-rate rows on the kitesurfing and SUP pages: an icon, the
   item, then a rate per period. Lived in kitelessons.css until the
   SUP page, which does not load that sheet, printed the same list
   with 300px black icons and bullet points. Here because both pages
   load this one. Placed after the two overrides above so the cascade
   is what the kitesurfing page always had. */
.krent{max-width:820px;margin:36px auto 0}
.ki__list{list-style:none;margin:0 0 26px;padding:0}
.ki__list li{display:grid;grid-template-columns:34px 1fr auto auto;align-items:center;
  gap:clamp(10px,1.4vw,22px);padding:14px 2px;border-bottom:1px solid var(--k-line);
  transition:border-color .28s,background .28s}
.ki__list li:first-child{border-top:1px solid var(--k-line)}
.ki__list li:hover{border-color:var(--k-line2)}
.ki__gear{display:grid;place-items:center}
.ki__gear svg{width:23px;height:23px;stroke:var(--k-gold);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.ki__list li:hover .ki__gear svg{transform:translateY(-2px)}
.ki__name{font-size:13.5px;line-height:1.35;color:var(--k-ink);
  transition:transform .28s,color .28s}
.ki__list li:hover .ki__name{transform:translateX(3px);color:var(--k-gold)}
.kp-sec--light .ki__list li:hover .ki__name{color:var(--k-gold-dk)}
.ki__rate{text-align:right;min-width:74px}
.ki__rate i{display:block;font-style:normal;font-family:var(--r-mono);font-size:8px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--k-mute);margin:0 0 2px}
.ki__rate b{font-family:var(--num-font);font-weight:var(--num-weight);
  font-size:var(--num-sm);letter-spacing:var(--num-track);
  font-variant-numeric:tabular-nums;color:var(--k-gold)}
.kp-sec--light .ki__rate b{color:var(--k-gold-dk)}
.ki__rate--day b{color:var(--k-ink)}
.krent__cta{display:flex;justify-content:center}
@media(max-width:520px){
  .ki__list li{grid-template-columns:28px 1fr;gap:6px 12px;padding:14px 2px}
  .ki__name,.ki__rate{grid-column:2}
  .ki__rate{text-align:left;display:flex;align-items:baseline;gap:8px;min-width:0}
  .ki__rate i{margin:0}
  .ki__gear{grid-row:span 3}
}
.kh__cue{font-size:9.5px;letter-spacing:.2em}
.kh__edge{font-size:10px;letter-spacing:.3em}
.kp-page .r-pill{font-size:11.5px;letter-spacing:.1em;font-weight:700}
.kc__card .r-pill{font-size:11.5px}
.frm__f label{font-size:11.5px;letter-spacing:.14em}

/* photo block inside a .ksplit */
.kfree__ph{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--k-line);box-shadow:0 18px 44px rgba(6,19,27,.14)}
.kfree__ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.kfree__ph:hover img{transform:scale(1.05)}
.kfree__ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,25,35,0) 62%,rgba(3,25,35,.35) 100%)}

/* ============================================================
   STAT BAND — numbers count up when the band scrolls into view
   ============================================================ */
.kstat{padding:clamp(38px,4.6vw,60px) 0}
.kstat__row{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.6vw,20px)}
/* A card each, all four the same size, rather than four figures
   floating between hairline dividers. */
.kstat__it{position:relative;text-align:center;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(16px,1.8vw,22px) clamp(10px,1.6vw,18px);
  border:1px solid var(--k-line2);border-radius:14px;
  background:rgba(255,255,255,.03)}
/* Was 64px filled with a gold gradient, which on a dark band read
   as decoration before it read as a figure and left the counter
   animating a shape rather than a number. Solid gold, mid-sized. */
.kstat__it b{display:block;font-family:var(--num-font);
  font-weight:var(--num-weight);font-size:var(--num-xl);
  line-height:var(--num-lh);letter-spacing:var(--num-track);
  color:var(--k-gold);margin:0 0 10px;font-variant-numeric:tabular-nums}
.kstat__it i{font-style:normal;color:inherit}
.kstat__it span{display:block;font-family:var(--r-mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--k-mute);line-height:1.5}
@media(max-width:820px){
  .kstat__row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:460px){
  .kstat__row{grid-template-columns:1fr}
}

/* ============================================================
   PHOTO STRIP — hover to expand, keyboard focusable
   ============================================================ */
.kgal{display:flex;gap:10px;margin-top:38px;height:clamp(240px,32vw,380px)}
.kgal__it{position:relative;flex:1;border-radius:16px;overflow:hidden;
  border:1px solid var(--k-line);cursor:pointer;
  transition:flex .55s cubic-bezier(.2,.7,.3,1)}
.kgal__it:hover,.kgal__it:focus-visible{flex:2.4}
.kgal__it img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.3,1),filter .5s;
  filter:saturate(.92) brightness(.86)}
.kgal__it:hover img,.kgal__it:focus-visible img{transform:scale(1.04);
  filter:saturate(1.04) brightness(1)}
.kgal__it::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,25,35,0) 45%,rgba(3,25,35,.86) 100%)}
.kgal__cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:16px 16px 15px;
  font-family:var(--r-mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--k-ink);
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.kgal__it:hover .kgal__cap,.kgal__it:focus-visible .kgal__cap{opacity:1;transform:none}
.kgal__hint{font-family:var(--r-mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--k-mute);text-align:center;margin:18px 0 0}
@media(max-width:820px){
  .kgal{flex-wrap:wrap;height:auto}
  .kgal__it{flex:1 1 calc(50% - 5px);aspect-ratio:4/3}
  .kgal__it:hover,.kgal__it:focus-visible{flex:1 1 calc(50% - 5px)}
  .kgal__cap{opacity:1;transform:none}
  .kgal__hint{display:none}
}
@media(max-width:460px){.kgal__it{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){
  .kgal__it,.kgal__it img{transition:none}
  .kgal__it:hover,.kgal__it:focus-visible{flex:1}
}

/* ============ RATE ROWS (rental cards) ============ */
.krate{margin:16px 0 22px;border-top:1px solid var(--k-line)}
.krate__row{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;
  gap:14px;padding:12px 0;border-bottom:1px solid var(--k-line)}
.krate__row span{font-family:var(--r-mono);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--k-mute)}
.krate__row b{font-family:var(--r-display);font-weight:640;font-size:21px;color:var(--k-gold)}
.kp-sec--light .krate__row b{color:var(--k-gold-dk)}
.krate__row i{font-style:normal;font-family:var(--r-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.08em;color:var(--k-mute);min-width:74px;text-align:right}
.kws__card .r-pill{width:100%;justify-content:center;padding:11px 16px}
@media(max-width:420px){
  .krate__row{grid-template-columns:1fr auto}
  .krate__row i{grid-column:2;text-align:right;min-width:0}
}

/* ============ PHOTO HEADER INSIDE AN OFFER CARD ============ */
.kc__ph{position:relative;margin:-22px -20px 18px;border-radius:15px 15px 0 0;
  overflow:hidden;aspect-ratio:16/9}
.kc__ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.kc__card:hover .kc__ph img{transform:scale(1.05)}
.kc__ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,25,35,0) 62%,rgba(3,25,35,.28) 100%)}
.kc__card--pop .kc__ph{border-radius:15px 15px 0 0}

/* ============================================================
   INSTRUCTOR — editorial, image-led, ivory ground
   ============================================================ */
.kins{display:grid;grid-template-columns:clamp(300px,40vw,480px) 1fr;
  gap:clamp(34px,5vw,78px);align-items:center;max-width:1120px;margin:clamp(30px,4vw,48px) auto 0}
.kins__frame{position:relative}
.kins__frame::before{content:"";position:absolute;left:20px;top:-20px;right:-20px;bottom:20px;
  border:1px solid rgba(184,135,26,.45);border-radius:6px;pointer-events:none}
.kins__ph{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:6px;
  background:var(--k-bg3);box-shadow:0 26px 60px rgba(6,19,27,.20)}
.kins__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;
  transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.kins:hover .kins__ph img{transform:scale(1.04)}
.kins__name{font-family:var(--r-display);font-size:clamp(40px,5.6vw,68px);line-height:.96;
  letter-spacing:-.01em;margin:0 0 12px;color:var(--k-ink)}
.kins__role{display:inline-flex;align-items:center;font-family:var(--r-mono);font-size:10px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--k-gold);
  margin:0 0 24px;border:1px solid rgba(184,135,26,.42);border-radius:2px;padding:7px 14px}
.kins__bio{font-size:15.5px;line-height:1.8;color:var(--k-body);margin:0 0 30px;max-width:46ch}
.kins__creds{display:flex;gap:0;margin:0 0 32px;flex-wrap:wrap;
  border-top:1px solid var(--k-line);border-bottom:1px solid var(--k-line)}
.kins__cred{flex:1;min-width:120px;padding:18px clamp(12px,1.8vw,22px);
  border-left:1px solid var(--k-line)}
.kins__cred:first-child{border-left:0;padding-left:0}
.kins__cred b{display:block;font-family:var(--r-display);font-size:20px;line-height:1;
  color:var(--k-gold-dk);margin:0 0 7px}
.kp-sec:not(.kp-sec--light) .kins__cred b{color:var(--k-gold)}
.kins__cred span{font-family:var(--r-mono);font-size:9.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--k-mute);line-height:1.4}
@media(max-width:940px){
  .kins{grid-template-columns:1fr;gap:38px;max-width:560px}
  .kins__frame{max-width:340px}
  .kins__bio{max-width:none}
}
@media(max-width:520px){
  .kins__cred{flex:1 1 100%;border-left:0;padding-left:0;
    border-top:1px solid var(--k-line);padding-block:14px}
  .kins__cred:first-child{border-top:0}
}

/* ============ LOCATIONS — let the photography dominate ============ */
.kl__cards{grid-template-columns:1fr 1fr}
.kl__card{min-height:clamp(300px,34vw,420px);border-radius:6px}
.kl__card::after{background:linear-gradient(180deg,rgba(3,25,35,0) 34%,rgba(3,25,35,.92) 100%)}
.kl__in{padding:28px 26px 26px}
.kl__in h3{font-family:var(--r-display);font-size:clamp(28px,3.2vw,40px);letter-spacing:-.01em;
  text-transform:none;margin:0 0 14px}

/* ============ SQUARER, MORE EDITORIAL CORNERS ============ */
.kc__card,.kws__card,.kpanel,.kfree__ph,.kjn__ph,.zcard,.frm{border-radius:6px}
.kc__card--pop::before,.kpanel::before,.zcard::before{border-radius:6px 6px 0 0}
.kc__ph{border-radius:6px 6px 0 0}

/* pricing sits on the darkest navy so the ivory cards lift off it */
.kp-sec--alt{background:var(--k-bg2)}
.kins__who{min-width:0}

/* ============================================================
   CLUTTER REDUCTION
   Decorative wind lines, dot grids and blobs were reading as
   template noise. Photography, type and space carry the design
   instead; the section auras stay because they are barely visible
   and do the work of separating sections.
   ============================================================ */
.kp-page .r-gusts,
.kp-page .r-deco{display:none}
/* softer, fewer dividing lines */
.kp-sec + .kp-sec::before{opacity:.55}

/* ============================================================
   HERO REFINEMENTS
   ============================================================ */
/* The new hero photo already has the rider right of centre, so no
   mirroring is needed. */

/* headline sits on the optical centre rather than riding high */
.kh__in{padding-top:clamp(10px,2.2vw,34px)}
.kh__lead{max-width:38ch}

/* ============================================================
   PER-PAGE HERO FRAMING
   Every page shares the .kh hero, but each photograph puts its
   subject somewhere different. The defaults above suit the
   kitesurfing shot; anything that needs a different crop says so
   here rather than by nudging the shared rule.
   ============================================================ */

/* SUP — the paddler stands far right and low, with the horizon
   two-thirds down. Hold her in frame as the hero gets wider. */
.page-suplesson .kh__media img{object-position:50% 54%}
@media(max-width:900px){.page-suplesson .kh__media img{object-position:93% 50%}}

/* Snorkeling — the swimmer and the starfish sit right of centre, and the
   surface shimmer along the top is worth keeping as the frame narrows. */
.page-snorkelinglesson .kh__media img{object-position:50% 48%}
@media(max-width:900px){.page-snorkelinglesson .kh__media img{object-position:76% 50%}}

/* Contact — an aerial, so there is no horizon to hold: the two riders
   are the whole subject and they sit dead centre. Keep 50% at every
   width, mobile included, or one of them is cropped away. */
.page-contact .kh__media img{object-position:50% 46%}
/* A phone shows about a fifth of this aerial's width. At 62% that window
   fell between the two riders — mostly open water, with the lower kite
   sliced in half by the right edge. The lower rider and his kite together
   span 0.592-0.748, which fits, so centre on them at 67%. */
@media(max-width:900px){.page-contact .kh__media img{object-position:67% 50%}}
/* ...and it is bright turquoise edge to edge, unlike every other hero
   photograph on the site, so the pool of shade behind the copy has to
   work harder for the ivory title to hold its contrast. */
.page-contact .kh__scrim{background:
  radial-gradient(60% 78% at 20% 52%, rgba(3,25,35,.93) 0%,
                   rgba(3,25,35,.72) 48%, rgba(3,25,35,0) 80%),
  linear-gradient(100deg,rgba(3,25,35,.92) 0%,rgba(3,25,35,.70) 18%,
                          rgba(3,25,35,.30) 36%,rgba(3,25,35,0) 56%),
  linear-gradient(180deg,rgba(3,25,35,.54) 0%,rgba(3,25,35,0) 24%,
                          rgba(3,25,35,0) 60%,rgba(3,25,35,.88) 100%)}
@media(max-width:900px){
  .page-contact .kh__scrim{background:
    linear-gradient(180deg,rgba(3,25,35,.82) 0%,rgba(3,25,35,.66) 46%,rgba(3,25,35,.94) 100%)}

  /* This page had its own 62svh cap while it was the only one with the
     problem. The shared rule now sizes every hero off its own copy and
     lands this one at much the same height, so the override is gone. */
}

/* ============================================================
   SHARED SECTION LAYOUT — SUP / Snorkeling / Contact
   These three pages had each been laid out on their own: card
   rows capped at three different widths, some section heads
   centred and some ranged left, and splits whose halves did not
   fill so a void opened down the middle. One set of rules now
   drives all three, so they read as the same family of page.
   ============================================================ */

/* one width for every two-up card row on these pages */
.kc__row2{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2vw,30px);align-items:stretch;
  max-width:1000px;margin:clamp(6px,1vw,14px) auto 0}
@media(max-width:860px){
  /* a two-up row stacks into one centred column, same as every other
     card row on these pages */
  .kc__row2{grid-template-columns:1fr;max-width:470px}
}


/* a split whose halves match in height — a photo beside a panel */
.ksplit--stretch{align-items:stretch}
.ksplit--stretch .kfree__ph{aspect-ratio:auto;min-height:clamp(320px,34vw,440px)}

/* ---- a price card inside a split -----------------------------
   .ksplit p and .ksplit h3 further up are written for copy sitting
   directly on the section, so they carry the section's own ink and
   measure. They also reach inside .kc__card, where they out-specify
   the card's rules — .ksplit p is (0,1,1), .kc__price is (0,1,0) —
   and the card came out wearing the section's palette: on a dark
   section that is #A9BCC4, pale blue-grey on cream, which is what
   made the price look washed out. The meta line was being resized
   from 9.5px mono to 14px prose by the same rule.

   The card owns its palette, because it has its own background.
   These restate what .kc__* already say, at a specificity the split
   cannot beat. Same values, nothing redesigned. */
.ksplit .kc__card h2,
.ksplit .kc__card h3{
  font-family:var(--r-display);font-weight:620;
  font-size:clamp(19px,1.6vw,23px);line-height:1.15;letter-spacing:.005em;
  margin:0 0 7px;color:var(--k-cream-ink)}

.ksplit .kc__card p{max-width:none;color:var(--k-cream-ink)}

.ksplit .kc__card .kc__hrs{
  font-family:var(--r-mono);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  line-height:1.5;text-transform:uppercase;color:#8C9AA2;
  margin:0 0 clamp(18px,1.8vw,24px)}

.ksplit .kc__card .kc__price{
  font-family:var(--num-font);font-size:inherit;line-height:var(--num-lh);
  margin:0 0 clamp(16px,1.6vw,20px);color:var(--k-cream-ink)}
.ksplit .kc__card .kc__price i{
  font-size:var(--num-unit);line-height:1.5;letter-spacing:var(--num-unit-track);
  color:#8C9AA2;margin-top:0}

.ksplit .kc__card .kc__tier{
  font-size:12.5px;line-height:1.55;color:#5E6E76;
  margin:clamp(16px,1.6vw,20px) 0 0}

/* prose inside a split: cap the measure on the column itself so the
   text fills its half instead of leaving a gutter down the middle */
.ksplit__copy{max-width:56ch}



/* ...and the splits sit on the same measure as the card rows, so a
   section body starts and ends on the same line all the way down the
   page. Scoped by page class — kitesurfing keeps the full wrap.

   ONE SEAM. Every split was running the 1.2fr/1fr ratio, and which
   half got the wide column flipped from section to section: photo
   left on SUP, photo right on the Snorkel Diver course, photo left
   again on Freediver. So the join down the middle of the page jumped
   between x=731 and x=785 as you scrolled, which is what read as the
   frames not lining up. Equal columns on the same gap as .kc__row2
   put that join in exactly the same place in every section of all
   three pages, whichever side the photograph is on. */
.page-suplesson .ksplit,
.page-snorkelinglesson .ksplit,
.page-contact .ksplit{max-width:1000px;margin-inline:auto;
  grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,30px);align-items:stretch}

/* The copy half fills its column. .ksplit p caps the measure at 52ch,
   which inside an already-narrow 430px column left a dead strip down
   the inside edge of every text half — the column itself is the
   measure now, so the cap comes off and the paragraph reaches the
   join. Centred against a full-height partner, so a short paragraph
   no longer parks at the top of the row with a void underneath. */
.page-suplesson .ksplit__copy,
.page-snorkelinglesson .ksplit__copy,
.page-contact .ksplit__copy{max-width:none;
  display:flex;flex-direction:column;justify-content:center}
.page-suplesson .ksplit__copy p,
.page-snorkelinglesson .ksplit__copy p,
.page-contact .ksplit__copy p{max-width:none}
.page-suplesson .ksplit__copy .r-pill,
.page-snorkelinglesson .ksplit__copy .r-pill,
.page-contact .ksplit__copy .r-pill{align-self:flex-start}

/* a photograph beside copy fills the row instead of holding a fixed
   4/3 box that leaves whichever half is shorter standing short */
.page-suplesson .ksplit .kfree__ph,
.page-snorkelinglesson .ksplit .kfree__ph{aspect-ratio:auto;
  min-height:clamp(300px,29vw,400px)}

/* Contact's divider column indented its content 49px past the join,
   so it started in a different place from the panel in the section
   below it. The hairline moves to the middle of the gutter and the
   content sits flush on the join, like every other column. */
.page-contact .ksplit__div{position:relative;border-left:0;padding-left:0}
.page-contact .ksplit__div::before{content:"";position:absolute;top:0;bottom:0;
  left:calc(-1 * clamp(9px,1vw,15px));width:1px;background:var(--k-line)}

@media(max-width:900px){
  /* the page-scoped selectors above outrank the shared stacking rule,
     so they have to hand the columns back themselves */
  .page-suplesson .ksplit,
  .page-snorkelinglesson .ksplit,
  .page-contact .ksplit{grid-template-columns:1fr;gap:34px}
  .page-suplesson .ksplit .kfree__ph,
  .page-snorkelinglesson .ksplit .kfree__ph{aspect-ratio:4/3;min-height:0}
  .page-contact .ksplit__div{padding-top:32px;border-top:1px solid var(--k-line)}
  .page-contact .ksplit__div::before{display:none}
}

/* Closing bands. Both new photographs put their subject centre-right,
   which is where the scrim is thinnest — but each needs its own
   vertical anchor, because the band crops to roughly 3.5:1 and the
   sources are 2.4:1. */
/* the reef strip is already horizontal, so the band crops it barely at
   all — centre is right, and the second turtle lands at 48-72% across,
   where the scrim has faded out */
.page-snorkelinglesson .kcta__bg img{object-position:center 50%}
/* the rider sits on the wave, low in frame */
.page-kitelessons .kcta__bg img{object-position:center 52%}

/* ============================================================
   CLOSING-BAND VIDEO
   The photograph stays in the markup underneath — the clip fades
   in over it only once it is genuinely playing, so there is no
   black frame while it buffers and nothing changes at all if the
   file is missing, blocked, or the visitor prefers reduced motion.
   ============================================================ */
.kcta__vid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  filter:saturate(.96) contrast(1.02);
  opacity:0;transition:opacity .9s ease;pointer-events:none}
.kcta__bg.is-playing .kcta__vid{opacity:1}
/* the clip is framed the same way as the still it replaces */
.page-snorkelinglesson .kcta__vid{object-position:center 50%}
.page-kitelessons .kcta__vid{object-position:center 52%}
@media(prefers-reduced-motion:reduce){
  /* never fade a moving background in on someone who asked for stillness */
  .kcta__bg.is-playing .kcta__vid{opacity:0}
}

/* ============================================================
   Wind & Weather — hero photograph, photo-free closing band.
   ------------------------------------------------------------
   The hero now carries the client's aerial of the beach: water
   across the top, the tide line through the middle, and a row of
   kites laid out on pale sand below it. The closing band is still
   deliberately without a picture, so it keeps the built field it
   was given further down.

   THE PROBLEM THIS PHOTOGRAPH SETS: unlike every other hero on the
   site, its lower half is almost white. The shared .kh__scrim is a
   tight radial pool tuned for a dark ocean frame, and ivory type
   over dry sand at those alpha values does not hold. So the pool
   is deepened and pulled left, where the headline column sits,
   while the right of the frame — the kites, which are the reason
   for the picture — is left almost untouched.

   The gradient below still paints under the photograph. It is
   never seen while the image loads correctly; it is what shows if
   the image 404s, and navy is a better failure than white.
   ============================================================ */
.page-weather .kh{
  background:
    radial-gradient(118% 88% at 79% 16%, rgba(18,165,184,.20) 0%, rgba(18,165,184,0) 60%),
    radial-gradient(86% 68% at 10% 92%, rgba(245,184,46,.09) 0%, rgba(245,184,46,0) 58%),
    linear-gradient(168deg, var(--k-bg3) 0%, var(--k-bg) 48%, var(--k-bg2) 100%)}
/* Nearly the full height of this frame survives the cover fit at every
   desktop size, so only the horizontal anchor does anything: hold the
   middle, which is where the kites are densest. */
.page-weather .kh__media img{object-position:50% 50%}
.page-weather .kh__scrim{
  background:
    radial-gradient(66% 82% at 16% 50%, rgba(3,25,35,.95) 0%,
                     rgba(3,25,35,.78) 42%, rgba(3,25,35,0) 78%),
    linear-gradient(100deg, rgba(3,25,35,.92) 0%, rgba(3,25,35,.74) 20%,
                            rgba(3,25,35,.34) 40%, rgba(3,25,35,0) 62%),
    linear-gradient(180deg, rgba(3,25,35,.52) 0%, rgba(3,25,35,0) 26%,
                            rgba(3,25,35,0) 58%, rgba(3,25,35,.80) 100%)}
.page-weather .kh__vig{
  background:radial-gradient(122% 94% at 54% 46%,transparent 54%,rgba(2,14,20,.32) 100%)}

.page-weather .kcta{
  background:
    radial-gradient(88% 118% at 86% 48%, rgba(18,165,184,.17) 0%, rgba(18,165,184,0) 62%),
    linear-gradient(100deg, var(--k-bg2) 0%, var(--k-bg) 56%, var(--k-bg3) 100%)}
.page-weather .kcta__bg .kh__scrim{
  background:
    linear-gradient(100deg, rgba(3,25,35,.58) 0%, rgba(3,25,35,.22) 48%,
                            rgba(3,25,35,0) 86%)}
.page-weather .kcta__bg .kh__vig{
  background:radial-gradient(120% 100% at 44% 46%,transparent 56%,rgba(2,14,20,.30) 100%)}

/* The phone hero goes back to the shared geometry — 100svh with the copy
   at the top — now that there is a photograph to give the lower two-thirds
   of the screen to. It had been collapsed to its own copy height while the
   page had no picture, because that height would otherwise have been
   two-thirds of empty navy.

   Only about a quarter of this frame's width survives a portrait crop.
   Held at 46%: far enough left to keep the cluster of kites in the middle
   of the beach, far enough right to miss the empty sand at the edge. The
   water still lands across the top, under the headline, which is the only
   part of the picture dark enough to carry ivory type. */
@media(max-width:900px){
  .page-weather .kh__media img{object-position:46% 50%}
  /* The shared mobile scrim clears by 44% of the height, which is right
     for a hero whose subject sits low in a dark ocean frame. Here the copy
     runs down to about half the screen and lands on wet sand and surf — the
     brightest part of the picture — and the lead paragraph greyed out
     against it. Hold the wash strong to 46% and let it clear below, over
     the kites, which is the half worth seeing. */
  /* Back to clearing at 38%. It had been pushed to 46% to cover a third
     pill; the hero is down to one button again, so the wash can let go
     sooner and give more of the beach back. */
  .page-weather .kh__scrim{
    background:
      linear-gradient(180deg, rgba(3,25,35,.94) 0%,  rgba(3,25,35,.91) 24%,
                              rgba(3,25,35,.82) 38%, rgba(3,25,35,.52) 52%,
                              rgba(3,25,35,.18) 66%, rgba(3,25,35,.10) 82%,
                              rgba(3,25,35,.58) 100%)}
}

/* ============ KITESURFING COURSE CARDS: PHOTO-LED ============
   The kitesurfing catalogue is nine courses deep, and nine ivory
   price wells in a row read as a rate card, not as nine days on the
   water. Each course now leads with the photograph set for it on
   /admin/lessons; the duration and the level sit on the picture,
   the name sits at its foot, and the price comes after the picture
   has made its case. Scoped to .kc__cards--photo so the SUP,
   snorkelling and floating pages keep their cards. */
.kc__cards--photo{max-width:1120px}
.kc__cards--photo .kc__card{padding:0;overflow:hidden;background:#0B2531;color:var(--k-ink);
  border-radius:18px;
  box-shadow:0 2px 4px rgba(4,16,22,.30),0 24px 48px -16px rgba(0,0,0,.60)}
.kc__cards--photo .kc__card::after{border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(214,232,235,.12),inset 0 1px 0 rgba(255,255,255,.08)}
.kc__cards--photo .kc__card:hover{transform:translateY(-8px);
  box-shadow:0 4px 8px rgba(4,16,22,.30),0 40px 70px -18px rgba(0,0,0,.70)}

.kcp__ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0B2531}
.kcp__ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.kc__card:hover .kcp__ph img{transform:scale(1.06)}
.kcp__ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,37,49,.10) 0%,rgba(11,37,49,0) 32%,
    rgba(11,37,49,.58) 74%,#0B2531 100%)}

.kcp__chips{position:absolute;top:14px;left:14px;right:14px;z-index:2;
  display:flex;justify-content:space-between;gap:8px}
.kcp__chip{font-family:var(--r-mono);font-size:9px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;padding:7px 11px;border-radius:999px;color:#F4F0E8;
  background:rgba(3,25,35,.55);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap}
.kcp__chip--lvl{margin-left:auto;color:#16303A;background:var(--k-gold);border-color:var(--k-gold)}

.kcp__ph h3{position:absolute;left:20px;right:20px;bottom:14px;z-index:2;margin:0;
  color:#F4F0E8;font-size:clamp(21px,1.8vw,26px);line-height:1.12;
  text-shadow:0 2px 14px rgba(0,0,0,.40)}

.kcp__body{display:flex;flex-direction:column;flex-grow:1;padding:8px 22px 22px}
.kcp__price{display:flex;align-items:baseline;gap:6px;margin:0 0 14px;padding:0 0 14px;
  border-bottom:1px solid rgba(214,232,235,.12);
  font-family:var(--r-display);color:#F4F0E8;font-variant-numeric:tabular-nums}
.kcp__price sup{font-family:var(--r-mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  top:0;vertical-align:baseline;color:var(--k-gold)}
.kcp__price b{font-size:clamp(26px,2.2vw,32px);font-weight:620;letter-spacing:-.01em;line-height:1}
.kcp__price i{margin-left:auto;font-style:normal;font-family:var(--r-mono);font-size:9px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--k-mute);white-space:nowrap}
.kcp__price--ask b{font-size:clamp(18px,1.5vw,21px);font-weight:500}

.kcp__body .kc__tier{color:#A9BCC4;border:0;padding:0;margin:0 0 16px}
.kcp__body .kc__skills{margin:0 0 18px}
.kcp__body .kc__skills li{color:#C7D5DA}
.kcp__body .kc__skills li::before{background:var(--k-gold)}
.kcp__body .r-pill{margin-top:auto;color:#16303A;background-image:none;background:var(--k-gold);
  border-color:var(--k-gold)}
.kcp__body .r-pill:hover{filter:brightness(1.07)}
@media(max-width:860px){
  .kc__cards--photo{max-width:420px}
}

/* The shilling price under a converted one: "$130" large, "KES 16,900"
   beneath, as the website has always paired them. Empty markup when
   the visitor is already looking at shillings. */
.kc__base,.kcp__base{display:block;width:100%;flex-basis:100%;margin-top:4px;
  font-family:var(--r-mono);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#8C9AA2}
.kcp__base{color:var(--k-mute)}
/* Shilling figure under a converted hire rate in the rental tables. */
.ki__rate .ki__base{display:block;font-family:var(--r-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--k-mute);margin-top:2px}