/* ============================================================
   Tribal Kite School — shared site chrome
   Loaded on every page via includes/header.php
   Contains: design tokens, reset, global UI (sticky nav,
   scroll progress, back-to-top, ambience toggle), footer.
   Page-specific CSS belongs in its own file (e.g. home.css).
   ============================================================ */

/* ---------- design tokens ---------- */
:root{
  --ink:#06262E; --lagoon:#12A5B8; --kite:#FF3B5C; --sun:#FFC93C;
  --display:"Playfair Display",Georgia,serif;
  --hero-display:"DM Serif Display","Playfair Display",Georgia,serif;
  --body:"Manrope",system-ui,sans-serif;
  --mono:"Manrope",system-ui,sans-serif;
  --gut:clamp(20px,5vw,72px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#0E2A34;color:#fff;font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* footer + section palette (kept on :root so any page can use them) */
:root{
  --r-ink:#0D2233; --r-navy:#0A1D2A; --r-sun:#FFC93C;
  --r-goldD:#C7972E; --r-gold:#D8A62A;
  --r-display:"Playfair Display",Georgia,serif;
  --r-body:"Manrope",system-ui,sans-serif;
  --r-mono:"Manrope",system-ui,sans-serif;
  /* 16px padding + logo + 16px. The logo went from 46px to 62px on
     2026-09-09 ("logo should be bigger"); the phone sizes below keep
     their own value so the bar does not eat the phone hero. */
  --snav-h:94px;
}
@media(max-width:860px){:root{--snav-h:84px}}
@media(max-width:400px){:root{--snav-h:76px}}

/* ---------- numbers ------------------------------------------
   One treatment for every figure on the site: prices, rates,
   statistics, live readings. Before this each of them had been
   sized and coloured where it was written, which produced seven
   different styles between 17px and 120px, two of them filled
   with a gradient.

   Four sizes, not seven, and they are a hierarchy rather than a
   list: --num-xl is the one headline figure a page is allowed,
   --num-lg a price on a card of its own, --num-md a price in a
   grid of cards, --num-sm a rate sitting inside a line of text.
   All four are deliberately mid-sized - the largest tops out at
   40px, where the old wind reading reached 120px.

   One family, one weight, one tracking, tabular figures so a
   column of them lines up and a counter does not jitter as it
   counts. Colour is not set here: a figure takes the accent of
   whatever surface it sits on, and that is the only variation
   allowed. */
:root{
  --num-font:var(--display);
  --num-weight:700;
  --num-track:-.01em;
  --num-lh:1.05;

  --num-xl:clamp(30px,3.6vw,40px);
  --num-lg:clamp(25px,2.6vw,31px);
  --num-md:21px;
  --num-sm:17px;

  /* the KTS, the /day, the per-session - always subordinate */
  --num-unit:11px;
  --num-unit-track:.14em;
}
html{scroll-behavior:smooth}

/* ---------- focus, selection, scrollbar, custom cursor ---------- */
:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
::selection{background:var(--sun);color:var(--ink)}
html{scrollbar-width:thin;scrollbar-color:#1E4152 #071822}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#071822}
::-webkit-scrollbar-thumb{background:#1E4152;border-radius:8px;border:2px solid #071822}
::-webkit-scrollbar-thumb:hover{background:var(--sun)}
@media (hover:hover) and (pointer:fine){
  .cur-ring{position:fixed;left:0;top:0;width:34px;height:34px;border:1.5px solid #fff;border-radius:50%;
    pointer-events:none;z-index:9999;mix-blend-mode:difference;opacity:0;
    transition:width .25s ease,height .25s ease,border-color .25s ease,opacity .3s ease;
    transform:translate(-50%,-50%)}
  .cur-dot{position:fixed;left:0;top:0;width:5px;height:5px;background:var(--lagoon);border-radius:50%;
    pointer-events:none;z-index:9999;opacity:0;transition:opacity .3s ease;transform:translate(-50%,-50%)}
  .cur-ring.big{width:68px;height:68px;border-color:var(--lagoon)}
}
@media (prefers-reduced-motion:reduce){.cur-ring,.cur-dot{display:none}}

/* ---------- sticky navbar ---------- */
.snav{position:fixed;top:0;left:0;right:0;z-index:9990;transform:translateY(-110%);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
  background:rgba(7,24,32,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08)}
.snav.on{transform:none;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.snav__in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:min(1240px,100% - var(--gut)*2);margin-inline:auto;padding:10px 0}
.snav__logo img{height:38px;width:auto;filter:brightness(0) invert(1)}
.snav__links{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.snav__links a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.85;position:relative;padding-bottom:4px}
.snav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--kite);
  transform:scaleX(0);transform-origin:right;transition:transform .3s ease}
.snav__links a:hover{opacity:1}
.snav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.snav__cta{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#13212B;
  background-image:linear-gradient(to top,#fff 50%,var(--sun) 50%);
  background-size:100% 200%;background-position:0 0;
  padding:11px 22px;border-radius:999px;
  transition:background-position .35s cubic-bezier(.2,.7,.3,1),transform .25s}
.snav__cta:hover{background-position:0 100%;transform:translateY(-1px)}
.snav__burger{display:none;background:none;border:0;cursor:pointer;padding:8px;width:42px}
.snav__burger span{display:block;height:2px;background:#fff;margin:5px 0}
.snav__drop{display:none;background:rgba(7,24,32,.96);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);padding:4px var(--gut) 14px}
.snav__drop a{display:block;padding:13px 0;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.07)}
.snav.open .snav__drop{display:block}
@media(max-width:860px){ .snav__links{display:none} .snav__burger{display:block} }
/* The shared sticky header now sits transparently over the hero at
   every width, so the hero's own overlay nav would duplicate it. */
.hero .nav{display:none}

/* ---------- gold scroll progress ---------- */
.sprog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--sun);z-index:9995;pointer-events:none}

/* ---------- back-to-top flying kite ---------- */
.totop{position:fixed;right:24px;bottom:24px;z-index:9990;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(7,24,32,.65);backdrop-filter:blur(10px);
  cursor:pointer;display:grid;place-items:center;overflow:hidden;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .4s,transform .4s,border-color .3s,background .3s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{border-color:var(--sun);background:rgba(7,24,32,.85)}
.totop svg{width:24px;height:24px;stroke:var(--sun);fill:none;stroke-width:5;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.totop:hover svg{transform:translateY(-3px)}
.totop.fly svg{animation:kiteFly .7s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes kiteFly{
  45%{transform:translateY(-260%)}
  46%{transform:translateY(260%)}
  100%{transform:translateY(0)}}

/* ---------- ambience toggle ---------- */
.amb{position:fixed;left:24px;bottom:24px;z-index:9990;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(7,24,32,.65);backdrop-filter:blur(10px);
  cursor:pointer;display:grid;place-items:center;
  transition:border-color .3s,background .3s}
.amb:hover{border-color:var(--lagoon)}
.amb svg{width:22px;height:22px;stroke:rgba(255,255,255,.85);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.amb .aw{opacity:0;transition:opacity .3s}
.amb .ax{transition:opacity .3s}
.amb.on{border-color:var(--lagoon)}
.amb.on svg{stroke:var(--lagoon)}
.amb.on .aw{opacity:1}
.amb.on .ax{opacity:0}
@media(max-width:560px){ .totop{right:16px;bottom:16px} .amb{left:16px;bottom:16px} }

/* ---------- interior pages (no hero): nav is always visible ---------- */
body.no-hero .snav{transform:none;box-shadow:0 12px 32px rgba(0,0,0,.28)}
body.no-hero{padding-top:var(--snav-h)}

/* ---------- CTA shine sweep ---------- */
.btn--solid{position:relative;overflow:hidden}
.btn--solid::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%);
  transform:translateX(-140%);animation:btnShine 4.6s ease-in-out 2.4s infinite}
@keyframes btnShine{0%{transform:translateX(-140%)}26%{transform:translateX(140%)}100%{transform:translateX(140%)}}
@media(prefers-reduced-motion:reduce){
  .btn--solid::after{animation:none}
  .totop.fly svg{animation:none}
}

/* ---------- site footer ---------- */
.ft{background:#FAF8F2;color:#0D2233;font-family:var(--r-body);position:relative;overflow:hidden;border-top:1px solid rgba(13,34,51,.08)}
.ft *,.ft *::before,.ft *::after{box-sizing:border-box}
.ft__wrap{width:min(1240px,100% - clamp(20px,5vw,72px)*2);margin-inline:auto;
  padding:clamp(48px,6vw,72px) 0 0}
.ft__grid{display:grid;grid-template-columns:1.3fr .7fr 1fr;gap:clamp(28px,4vw,64px)}
.ft__logo{height:60px;width:auto;filter:brightness(0);opacity:.88;margin-bottom:18px}
.ft h4{font-family:var(--r-mono);font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:#8A6410;margin:0 0 16px}
.ft__about{font-size:13.5px;line-height:1.66;color:#5A6672;max-width:44ch;margin:0}
.ft__soc{display:flex;gap:10px;margin-top:18px}
.ft__soc a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(13,34,51,.18);
  display:grid;place-items:center;transition:border-color .3s,background .3s,transform .25s}
.ft__soc a:hover{border-color:#C7972E;background:#fff;transform:translateY(-2px)}
.ft__soc svg{width:17px;height:17px;stroke:#33424E;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.ft__soc a:hover svg{stroke:#B98A1F}
.ft__links{list-style:none;margin:0;padding:0}
.ft__links a{display:inline-block;padding:6px 0;font-size:13.5px;color:#33424E;
  text-decoration:none;position:relative}
.ft__links a::after{content:"";position:absolute;left:0;bottom:3px;height:1px;width:100%;
  background:#C7972E;transform:scaleX(0);transform-origin:right;transition:transform .3s ease}
.ft__links a:hover{color:#0D2233}
.ft__links a:hover::after{transform:scaleX(1);transform-origin:left}
.ft__c{list-style:none;margin:0;padding:0}
.ft__c li{display:flex;gap:10px;padding:5px 0;font-size:13.5px;color:#33424E;align-items:baseline}
.ft__c b{font-family:var(--r-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#5F6B78;flex:0 0 76px}
.ft__c a{color:#33424E;text-decoration:none}
.ft__c a:hover{color:#B98A1F}
.ft__loc{display:inline-flex;align-items:center;gap:8px}
.ft__loc svg{width:14px;height:14px;stroke:#C7972E;fill:none;stroke-width:6;stroke-linecap:round}
.ft__bar{margin-top:clamp(36px,4.5vw,54px);border-top:1px solid rgba(13,34,51,.10);
  padding:18px 0 22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--r-mono);font-size:11px;letter-spacing:.12em;color:#5F6B78}
@media(max-width:860px){.ft__grid{grid-template-columns:1fr;gap:28px}}

/* ============================================================
   HEADER — premium treatment
   Transparent over the hero, solid once you scroll, gold
   underline on hover, clear active-page marker.
   ============================================================ */
.snav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),background .45s,
             border-color .45s,box-shadow .45s,padding .45s}
.snav.on{background:rgba(3,25,35,.86);backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:rgba(214,232,235,.10);box-shadow:0 10px 40px rgba(2,14,20,.34)}
/* pages with a hero: bar starts transparent and visible, not hidden */
body.has-hero .snav{transform:none}
body.no-hero .snav{background:rgba(3,25,35,.92);
  border-bottom-color:rgba(214,232,235,.10)}
.snav__in{padding:16px 0;transition:padding .45s}
.snav.on .snav__in{padding:11px 0}
.snav__logo img{height:62px;transition:height .45s}
.snav.on .snav__logo img{height:48px}
@media(max-width:860px){.snav__logo img{height:52px} .snav.on .snav__logo img{height:44px}}

/* links: gold underline grows from the left */
.snav__links a{font-size:11.5px;font-weight:700;letter-spacing:.12em;opacity:.82;
  transition:opacity .3s,color .3s}
.snav__links a::after{background:var(--r-sun);height:2px;bottom:-2px}
.snav__links a:hover{opacity:1;color:var(--r-sun)}
.snav__links a[aria-current="page"]{opacity:1;color:var(--r-sun)}
.snav__links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.snav__cta{font-size:11.5px;font-weight:700;letter-spacing:.1em;padding:12px 24px}

/* ---- mobile: full-screen panel instead of a dropdown ---- */
@media(max-width:860px){
  .snav__drop{position:fixed;inset:0;top:0;display:block;padding:0;
    background:rgba(3,25,35,.98);backdrop-filter:blur(20px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .4s ease,visibility .4s;
    display:flex;flex-direction:column;justify-content:center;
    align-items:flex-start;gap:2px;padding-inline:var(--gut);z-index:9991}
  .snav.open .snav__drop{opacity:1;visibility:visible;pointer-events:auto}
  .snav__drop a{width:100%;padding:18px 0;font-size:19px;font-weight:700;
    letter-spacing:.02em;text-transform:none;font-family:var(--display);
    border-bottom:1px solid rgba(214,232,235,.10);
    opacity:0;transform:translateY(14px);
    transition:opacity .45s cubic-bezier(.2,.7,.3,1),transform .45s cubic-bezier(.2,.7,.3,1),color .3s}
  .snav.open .snav__drop a{opacity:1;transform:none}
  .snav.open .snav__drop a:nth-child(1){transition-delay:.06s}
  .snav.open .snav__drop a:nth-child(2){transition-delay:.11s}
  .snav.open .snav__drop a:nth-child(3){transition-delay:.16s}
  .snav.open .snav__drop a:nth-child(4){transition-delay:.21s}
  .snav.open .snav__drop a:nth-child(5){transition-delay:.26s}
  .snav.open .snav__drop a:nth-child(6){transition-delay:.31s}
  .snav__drop a:hover,.snav__drop a[aria-current="page"]{color:var(--r-sun)}
  /* burger morphs into a close cross */
  .snav__burger{position:relative;z-index:9992}
  .snav__burger span{transition:transform .35s cubic-bezier(.2,.7,.3,1),opacity .25s}
  .snav.open .snav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .snav.open .snav__burger span:nth-child(2){opacity:0}
  .snav.open .snav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  body.nav-open{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){
  .snav,.snav__in,.snav__logo img,.snav__drop,.snav__drop a,.snav__burger span{transition:none}
}

/* The header CTA broke onto a second line under about 360px, which
   pushed the whole bar from 79px to 87px and shunted every hero down
   with it. It is two words and a fixed label — it should never wrap. */
.snav__cta{white-space:nowrap}
@media(max-width:400px){
  .snav__in{gap:10px}
  .snav__logo img{height:44px}
  .snav.on .snav__logo img{height:38px}
  .snav__cta{padding:10px 15px;font-size:10px;letter-spacing:.1em}
  .snav__burger{width:38px;padding:8px 6px}
}

/* ---- Currency selector ---------------------------------------
   Sits between the links and the Book Now button. Deliberately
   quiet: it is a utility, not a call to action, so it borrows the
   nav links' mono type and stays a hairline outline rather than
   competing with the gold button beside it.

   It is a real <form>. The script at the foot of the page submits
   it on change and hides the Go button; with the script off the
   button is visible and the form works by hand. */
.snav__cur{display:flex;align-items:center;gap:6px;margin-left:auto}
.snav__cur select{
  appearance:none;-webkit-appearance:none;
  padding:7px 26px 7px 11px;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;
  background:transparent;color:#fff;cursor:pointer;
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  /* The caret is drawn here rather than left to the browser, whose
     own arrow cannot be recoloured and shows up black on this bar. */
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:11px;
  transition:border-color .2s,background-color .2s;
}
.snav__cur select:hover{border-color:rgba(255,255,255,.55)}
.snav__cur select:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
/* The options themselves render in the OS menu, which does not
   inherit the bar's dark ground on every platform. */
.snav__cur option{color:#13212B;background:#fff}

.snav__curgo{
  border:1px solid rgba(255,255,255,.28);border-radius:999px;
  background:transparent;color:#fff;cursor:pointer;
  padding:7px 12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;
}

/* The same control inside the mobile drop, where it gets a visible
   label because there is room for one and no bar to keep tidy. */
.snav__curm{display:flex;align-items:center;gap:10px;padding:14px 0 2px}
.snav__curm label{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
.snav__curm select{
  flex:1;min-width:0;
  padding:10px 12px;border-radius:8px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);color:#fff;
  font-family:var(--body);font-size:14px;
}
.snav__curm option{color:#13212B;background:#fff}

@media(max-width:860px){
  /* The bar's copy goes with the links it sat beside; the one in
     the drop takes over, so a phone still has the control without
     the bar becoming a row of competing chips. */
  .snav__cur{display:none}
}

/* ---- Nav at in-between widths --------------------------------
   A seventh link (Floating) joined the bar, which now carries the
   logo, seven links, the currency selector and Book Now. Above
   about 1080px that still fits with the original 24px gap, so
   desktop spacing is deliberately left exactly as it was.

   Between the burger breakpoint and there it does not, and the bar
   would either wrap or push Book Now off the edge. The gap tightens
   across that band only — nothing else about the type, the hover
   underline or the button changes, and below 860px the burger takes
   over as before. */
@media(min-width:861px) and (max-width:1080px){
  .snav__links{gap:15px}
  .snav__cur select{padding-left:9px;padding-right:22px;background-size:10px}
}

/* ---- skip link ------------------------------------------------
   The first focusable thing on every page. Off-screen until it has
   keyboard focus, then a plain gold pill in the top-left corner. */
.skip-link{position:absolute;left:12px;top:-100px;z-index:1000;padding:10px 16px;border-radius:999px;
  background:#FFC93C;color:#13212B;font:700 12px/1 var(--r-mono,system-ui,sans-serif);letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.skip-link:focus{top:12px;outline:2px solid #13212B;outline-offset:2px}
main:focus{outline:none}