/* KiwiSurf site menu (tools/nav.py renders the markup, nav.js runs it). Self-contained: own tokens, every class starts with
   ksn-, every property it relies on is set here, so site.css, spot.css, /ks/ks.css or intl.css can't change it. */
.ksn{
  --ksn-ink:#1d1d1c;--ksn-ink-2:#43423e;--ksn-ink-3:#6b6a64;--ksn-ink-4:#706f69;--ksn-line:#edeae4;--ksn-card:#fdfdfa;--ksn-tint:#f5f3ea;
  --ksn-kiwi:#1a7a42;--ksn-dark-a:#2c2b29;--ksn-dark-b:#43423e;--ksn-paper:#f2f1ec;
  --ksn-sans:'Nunito Sans','Nunito Sans fb',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ksn-serif:'Fraunces','Fraunces fb','Fraunces fb2',Georgia,'Times New Roman',serif;
  --ksn-expo:cubic-bezier(.19,1,.22,1);--ksn-ease:cubic-bezier(.4,0,.2,1);
  --ksn-ring:0 0 0 1px #edeae4,0 1px 1px rgba(29,29,28,.02),0 3px 3px rgba(29,29,28,.02),0 6px 6px rgba(29,29,28,.03),0 12px 12px rgba(29,29,28,.03),0 24px 24px rgba(29,29,28,.03);
  --ksn-lift:0 10px 22px -10px rgba(0,0,0,.25);
  position:fixed;top:12px;left:0;right:0;z-index:50;width:1320px;max-width:calc(100% - 16px);margin:0 auto;padding:0;
  pointer-events:none;font:400 16px/24px var(--ksn-sans);color:var(--ksn-ink);text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased
}
.ksn,.ksn *,.ksn *::before,.ksn *::after{box-sizing:border-box}
.ksn.ksn-narrow{width:1200px}
.ksn.ksn-glass{top:20px}
/* pages that had their header in the flow: sticky, so it keeps its place under anything above it */
.ksn.ksn-flow{position:sticky;top:0;padding:12px 0}
/* resets at element weight (:where), so any ksn- class below wins over them and they still win over the host's element rules */
:where(.ksn) svg{display:block;flex:none;max-width:none;overflow:visible}
.ksn a,.ksn a:hover{text-decoration:none}
:where(.ksn) button{margin:0;border:0;background:none;font:inherit;color:inherit;text-transform:none;letter-spacing:inherit;-webkit-appearance:none;appearance:none;cursor:pointer}
.ksn a:focus-visible,.ksn button:focus-visible{outline:2px solid var(--ksn-kiwi);outline-offset:2px}

.ksn-bar{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;position:relative;z-index:2}
.ksn-pill{pointer-events:auto;display:flex;align-items:center;height:46px;padding:4px;border-radius:12px;background:rgba(253,253,250,.82);
  box-shadow:var(--ksn-ring);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--ksn-ink);
  transition:background .3s var(--ksn-ease),color .3s var(--ksn-ease),box-shadow .3s var(--ksn-ease)}
.ksn-sep{flex:none;width:1px;height:20px;margin:0 4px;background:currentColor;opacity:.15}
.ksn-logo{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 6px;color:inherit;font:700 20px/1 var(--ksn-serif);letter-spacing:-.02em;white-space:nowrap}
.ksn-logo img{display:block;width:28px;height:28px;max-width:none;margin:0;border-radius:50%}
.ksn-main{display:flex;align-items:center;margin:0;padding:0}
.ksn-item{position:relative}
.ksn-btn,.ksn-a{display:flex;align-items:center;gap:4px;height:36px;padding:0 12px;border-radius:8px;background:transparent;color:inherit;
  font:600 15px/20px var(--ksn-sans);letter-spacing:-.18px;white-space:nowrap;transition:background .15s var(--ksn-ease)}
.ksn-btn:hover,.ksn-a:hover,.ksn-open>.ksn-btn{background:rgba(29,29,28,.05)}
.ksn-a[aria-current]{color:var(--ksn-kiwi)}
.ksn-main>.ksn-today{margin-right:2px}
.ksn-sheet>.ksn-today,.ksn-sheet>.ksn-sf:first-child{border-top:0}
.ksn-chev{width:14px;height:14px;transition:transform .2s var(--ksn-ease)}
/* a label that is also a page (Spots -> the hub): link + its own chevron button, one control to the eye */
.ksn-split{display:flex;align-items:center}
.ksn-lbl{display:flex;align-items:center;height:36px;padding:0 3px 0 12px;border-radius:8px 0 0 8px;background:transparent;color:inherit;
  font:600 15px/20px var(--ksn-sans);letter-spacing:-.18px;white-space:nowrap;transition:background .15s var(--ksn-ease)}
.ksn-split>.ksn-tog{padding:0 10px 0 3px;border-radius:0 8px 8px 0}
.ksn-split:hover>.ksn-lbl,.ksn-split:hover>.ksn-tog,.ksn-open>.ksn-lbl{background:rgba(29,29,28,.05)}
.ksn-lbl[aria-current]{color:var(--ksn-kiwi)}
.ksn-open>.ksn-btn .ksn-chev{transform:rotate(180deg)}
.ksn-cta{display:inline-flex;align-items:center;gap:8px;height:34px;margin-left:4px;padding:0 12px;border-radius:10px;white-space:nowrap;
  background:linear-gradient(0deg,var(--ksn-dark-a),var(--ksn-dark-b));color:var(--ksn-paper);box-shadow:0 0 0 1px var(--ksn-dark-b);
  font:700 15px/24px var(--ksn-sans);transition:background .2s var(--ksn-ease),box-shadow .2s var(--ksn-ease)}
.ksn-cta:hover{background:linear-gradient(0deg,var(--ksn-ink),var(--ksn-dark-a))}
.ksn-arr{width:16px;height:16px}
/* homepage: dark glass over the night hero until site.js adds .light */
.ksn-glass:not(.light) .ksn-pill{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:var(--ksn-paper)}
.ksn-glass:not(.light) .ksn-logo img{box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}
.ksn-glass:not(.light) .ksn-btn:hover,.ksn-glass:not(.light) .ksn-a:hover,.ksn-glass:not(.light) .ksn-open>.ksn-btn,
.ksn-glass:not(.light) .ksn-split:hover>.ksn-lbl,.ksn-glass:not(.light) .ksn-split:hover>.ksn-tog,.ksn-glass:not(.light) .ksn-open>.ksn-lbl{background:rgba(255,255,255,.08)}
.ksn-glass:not(.light) .ksn-a[aria-current],.ksn-glass:not(.light) .ksn-lbl[aria-current]{color:#bfe89a}
.ksn-glass:not(.light) .ksn-cta{background:rgba(255,255,255,.08);color:var(--ksn-paper);box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.ksn-glass:not(.light) .ksn-cta:hover{background:rgba(255,255,255,.12);color:#fff}
.ksn-glass:not(.light) :is(.ksn-logo,.ksn-btn,.ksn-lbl,.ksn-a,.ksn-cta,.ksn-burger):focus-visible{outline-color:#bfe89a}

/* dropdown: the panel hangs 10px under its button; that gap is the drop's own padding, so the pointer never leaves the item */
.ksn-drop{position:absolute;top:100%;left:0;z-index:3;padding-top:10px;visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .2s var(--ksn-expo),visibility 0s linear .2s}
.ksn-open>.ksn-drop{visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s}
.ksn-panel{min-width:320px;padding:8px;border-radius:12px;background:var(--ksn-card);color:var(--ksn-ink);box-shadow:var(--ksn-ring),var(--ksn-lift);
  transform:translateY(-4px) scale(.98);transform-origin:top left;transition:transform .25s var(--ksn-expo)}
.ksn-open .ksn-panel{transform:none}
.ksn-link{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:8px;color:var(--ksn-ink);transition:background .15s var(--ksn-ease)}
.ksn-link:hover,.ksn-link:focus-visible{background:var(--ksn-tint)}
.ksn-link[aria-current] .ksn-t,.ksn-link[aria-current]{color:var(--ksn-kiwi)}
.ksn-ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--ksn-tint);color:var(--ksn-ink-2)}
.ksn-ico svg{width:17px;height:17px}
.ksn-tx{display:block;min-width:0}
.ksn-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ksn-t{display:block;font:600 14px/20px var(--ksn-sans);color:inherit}
.ksn-d{display:block;font:400 13px/18px var(--ksn-sans);color:var(--ksn-ink-3)}
.ksn-spots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;min-width:500px;padding:14px}
.ksn-col{display:flex;flex-direction:column;gap:2px}
.ksn-h{display:block;margin:0 0 4px;padding:0 8px;font:700 11px/16px var(--ksn-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ksn-ink-4)}
.ksn-spot{padding:7px 8px;font:600 14px/20px var(--ksn-sans)}
.ksn-all{grid-column:1/-1;align-items:center;justify-content:space-between;margin-top:6px;padding:10px 12px;background:var(--ksn-tint)}
.ksn-all:hover,.ksn-all:focus-visible{background:#ece9dd}
.ksn-countries{display:grid;grid-template-columns:1fr 1fr;gap:2px;min-width:300px}
.ksn-cty{display:block;padding:8px 10px}

/* hamburger + sheet (phones) */
.ksn-burger{display:none;place-items:center;width:44px;height:40px;padding:0;border-radius:8px;color:inherit}
.ksn-burger svg{width:22px;height:22px}
.ksn-burger path{stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transform-origin:12px 12px;transition:transform .25s var(--ksn-expo),opacity .15s}
.ksn-sheet-open .ksn-burger .ksn-b1{transform:translateY(5px) rotate(45deg)}
.ksn-sheet-open .ksn-burger .ksn-b2{opacity:0}
.ksn-sheet-open .ksn-burger .ksn-b3{transform:translateY(-5px) rotate(-45deg)}
.ksn-scrim,.ksn-sheet{display:none}

@media (max-width:1100px){
  .ksn-r .ksn-a{padding:0 9px}
  .ksn-btn{padding:0 9px}
  .ksn-lbl{padding-left:9px}
  .ksn-split>.ksn-tog{padding-right:7px}
  .ksn-cta .ksn-arr{display:none}
}
/* phones and small tablets: logo + hamburger, everything else in the sheet (below ~960 px both pills, PT labels, no longer fit) */
@media (max-width:760px){
  .ksn,.ksn.ksn-glass{top:8px}
  .ksn.ksn-flow{top:0;padding:8px 0}
}
@media (max-width:960px){
  .ksn-r,.ksn-main,.ksn-l>.ksn-sep{display:none}
  .ksn-l{width:100%;justify-content:space-between;height:48px;padding:2px 2px 2px 4px}
  .ksn-logo{height:44px}
  .ksn-burger{display:grid;width:44px;height:44px}
  .ksn-search-m{display:flex}
  .ksn-scrim{display:block;position:fixed;inset:0;z-index:1;background:rgba(13,11,28,.32);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s var(--ksn-expo),visibility 0s linear .25s}
  .ksn-sheet{display:block;position:fixed;top:64px;right:8px;z-index:3;width:calc(100% - 16px);max-width:460px;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px;border-radius:12px;background:var(--ksn-card);color:var(--ksn-ink);
    box-shadow:var(--ksn-ring),var(--ksn-lift);opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
    transition:opacity .25s var(--ksn-expo),transform .25s var(--ksn-expo),visibility 0s linear .25s}
  .ksn-sheet-open .ksn-scrim,.ksn-sheet-open .ksn-sheet{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
}
.ksn-ab{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:0 12px;border-radius:8px;
  font:700 16px/22px var(--ksn-sans);color:var(--ksn-ink);text-align:left}
.ksn-ab:hover{background:var(--ksn-tint)}
.ksn-ab .ksn-chev{width:16px;height:16px;color:var(--ksn-ink-3)}
.ksn-ab[aria-expanded=true] .ksn-chev{transform:rotate(180deg)}
.ksn-ap{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .25s var(--ksn-expo),visibility 0s linear .25s}
.ksn-acc.ksn-open .ksn-ap{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
.ksn-ai{min-height:0;overflow:hidden}
.ksn-al{display:grid;gap:0;padding:0 4px 8px}
.ksn-al-countries{grid-template-columns:1fr 1fr}
.ksn-sl{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:8px;color:var(--ksn-ink-2);font:600 15px/20px var(--ksn-sans)}
.ksn-sl:hover,.ksn-sl:focus-visible{background:var(--ksn-tint)}
.ksn-sl[aria-current]{color:var(--ksn-kiwi)}
.ksn-sd{display:none}
.ksn-sh{display:block;padding:10px 12px 2px;font:700 11px/16px var(--ksn-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ksn-ink-4)}
.ksn-sall{justify-content:space-between;margin:0 0 2px;background:var(--ksn-tint);color:var(--ksn-ink)}
.ksn-sall .ksn-arr{width:16px;height:16px}
.ksn-sf{min-height:48px;color:var(--ksn-ink);font-size:16px;font-weight:700}
.ksn-acc+.ksn-sf{margin-top:2px;border-top:1px solid var(--ksn-line);border-radius:0 0 8px 8px}
.ksn-scta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:8px;padding:0 16px;border-radius:12px;
  background:linear-gradient(0deg,var(--ksn-dark-a),var(--ksn-dark-b));color:var(--ksn-paper);box-shadow:0 0 0 1px var(--ksn-dark-b);font:700 16px/24px var(--ksn-sans)}
/* lock the viewport only: overflow on body would make body the sticky (flow) header's scroll container and park it off screen */
html.ksn-lock{overflow:hidden}

/* no JS: hover / keyboard focus still open a dropdown */
.ksn:not(.ksn-js) .ksn-item:hover>.ksn-drop,.ksn:not(.ksn-js) .ksn-item:focus-within>.ksn-drop{visibility:visible;opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.ksn *{transition:none!important}}
/* search (app.js opens the search sheet): icon + label in the right pill on desktop, icon only next to the burger on phones */
.ksn-search{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;border-radius:8px;color:inherit;font:600 15px/20px var(--ksn-sans);letter-spacing:-.18px;white-space:nowrap;transition:background .15s var(--ksn-ease)}
.ksn-search svg{width:17px;height:17px}
.ksn-search:hover{background:rgba(29,29,28,.05)}
.ksn-search-m{display:none;position:relative;width:44px;height:44px;padding:0;justify-content:center}
.ksn-search-m svg{width:21px;height:21px}
.ksn-search-m .ksn-sq{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ksn-glass:not(.light) .ksn-search:hover{background:rgba(255,255,255,.08)}
@media (max-width:960px){.ksn-search-m{display:flex}}