/* Self-hosted variable fonts — same files Google served; latin-ext loads only if needed. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 500;font-display:swap;src:url(fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 500;font-display:swap;src:url(fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Italic Fraunces — the accent voice (sunrise, sunset, coastline…). */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 500;font-display:swap;src:url(fonts/fraunces-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 500;font-display:swap;src:url(fonts/fraunces-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ═══════════════════════════════════════════════════════════════════════════
   SUP Lovers v3 — "one day on the water"
   The page runs dawn → midday → golden hour → sunset → night, top to bottom.
   Palette from the palm logo, deepened for a quieter, more premium feel.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --paper:#FBF5F2;      /* morning paper */
  --paper-2:#F4E6E1;    /* midday sand-blush */
  --gold:#F6E6DA;       /* golden hour */
  --blush:#EBCBC8;
  --blush-2:#DFB6B3;
  --rose:#DB908D;       /* the sun */
  --pink:#E8788A;       /* board pink: primary action */
  --pink-ink:#9A4746;   /* rose text: 5.7:1 on paper, 5.0:1 on paper-2 */
  --ink:#10343A;        /* deep sea ink: headings */
  --text:#27494E;       /* body */
  --muted:#4B6568;      /* 5.0:1 on paper-2 */
  --teal:#1F6E73;       /* teal text */
  --lagoon:#2E8A8F;     /* decorative teal */
  --deep:#1D5F66;
  --mint:#7FCDBF;
  --night:#0B2226;
  --line:rgba(16,52,58,.14);
  --line-2:rgba(16,52,58,.24);
  --white:#fff;
  --wa:#25D366;
  --r:22px; --r-lg:30px;
  --wrap:1200px;
  --hdr:78px;           /* floating header height incl. its top gap */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --expo:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--font-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:300;color:var(--ink);letter-spacing:-.015em;line-height:1.06;margin:0 0 .5em;font-variation-settings:"opsz" 144}
h1{font-size:clamp(2.7rem,6vw,5.1rem)}
h2{font-size:clamp(2.1rem,4.3vw,3.5rem);text-wrap:balance}   /* no lone last word ("That's / me.") */
h3{font-size:clamp(1.5rem,2.2vw,1.9rem);font-weight:400;font-variation-settings:"opsz" 72}
/* accent words in headings: upright, picked out by colour only (the italic cut read too swashy — owner, 2026-09-26) */
h1 em,h2 em,h3 em{font-style:normal;color:var(--pink-ink);font-weight:300}
p{margin:0 0 1em}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
section{padding-block:clamp(3.75rem,7vw,6rem);position:relative}
section[id]{scroll-margin-top:calc(var(--hdr) + 12px)}
.skip{position:absolute;left:1rem;top:-100px;z-index:200;background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:10px}
.skip:focus{top:1rem}

/* film grain: a fixed, static texture over everything — the "printed" feel */
body::after{content:"";position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* eyebrow with a drawn rule */
.eyebrow{display:flex;align-items:center;gap:.85rem;font-size:.76rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;color:var(--pink-ink);margin:0 0 1.4rem}
.eyebrow .rule{display:block;width:2.4rem;height:1px;background:currentColor;transform-origin:left center}
.eyebrow--light{color:#fff}
.section-head{max-width:720px;margin-bottom:clamp(2rem,4vw,3.2rem)}
.section-sub{color:var(--muted);font-size:1.06rem;max-width:56ch}

/* prices: the € in the lightest, highest-contrast cut loses its bars and reads as "C100" */
.price{font-weight:380!important;font-variation-settings:"opsz" 40!important}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;padding:1rem 1.7rem;border-radius:999px;font:600 .96rem/1 var(--font-body);letter-spacing:.01em;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate;transition:color .45s var(--expo),border-color .45s var(--expo),transform 160ms var(--ease-out)}
.btn > span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--expo)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--pink);color:#2A1410}
.btn-primary::before{background:var(--ink)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-pause,.sky-toggle{-webkit-backdrop-filter:blur(4px)}   /* v2-buttons.css (carried over unchanged) has only the unprefixed one; Safari 17 and older need this */
.btn-ghost::before{background:#fff}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-line::before{background:var(--ink)}
.btn-line--light{color:#fff;border-color:rgba(255,255,255,.45)}
.btn-line--light::before{background:#fff}
.btn-sm{padding:.72rem 1.2rem;font-size:.88rem}
.btn-lg{width:100%;padding:1.2rem 1.7rem;font-size:1.02rem}
/* phones: the long WhatsApp labels were cut off at both ends (nowrap + overflow hidden). Less padding, no arrow
   on the narrowest screens, and wrapping as the last resort. */
@media (max-width:480px){.btn-lg{padding:1.05rem 1rem;gap:.45rem;font-size:.98rem;white-space:normal;text-align:center;line-height:1.25}}
@media (max-width:380px){.btn-lg{font-size:.96rem}.btn-lg .arrow{display:none}}
.btn-wa{background:var(--wa);color:#062B14}
.arrow{position:relative;z-index:1;display:inline-block;width:18px;height:10px;flex:none;transition:transform .45s var(--expo)}
.arrow::before{content:"";position:absolute;left:0;right:1px;top:50%;height:1.5px;margin-top:-.75px;background:currentColor}
.arrow::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{transform:none}
  .btn-primary:hover,.btn-line:hover{color:#fff;border-color:var(--ink)}
  .btn-ghost:hover{color:var(--ink)}
  .btn-line--light:hover{color:var(--ink);border-color:#fff}
  .btn:hover .arrow{transform:translateX(4px)}
}

/* ── scroll progress: dawn → gold → rose → night ─────────────────────────── */
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:120;pointer-events:none}
.progress span{display:block;height:100%;transform-origin:left center;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,#C9B7CF,#F6BE8A 30%,#E8788A 62%,#DB908D 78%,#10343A)}

/* ── header: floating glass bar ───────────────────────────────────────────── */
.site-header{position:fixed;left:0;right:0;top:14px;z-index:100;padding-inline:14px;transition:transform .6s var(--ease-drawer)}
.site-header.is-hidden{transform:translateY(calc(-100% - 20px))}
.header-bar{max-width:1240px;margin-inline:auto;height:64px;display:flex;align-items:center;gap:1.6rem;padding:0 .55rem 0 1rem;border-radius:999px;
  background:rgba(251,245,242,.9);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(16,52,58,.1);box-shadow:0 10px 40px -18px rgba(16,52,58,.35)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
.brand img{height:50px;width:auto}
.brand-name{font-family:var(--font-display);font-size:1.3rem;color:var(--ink);letter-spacing:.01em;white-space:nowrap;font-variation-settings:"opsz" 48}
.brand-name em{font-style:italic;font-weight:300;color:var(--teal)}
.nav{display:flex;gap:1.7rem}
.nav a{text-decoration:none;font-size:.9rem;font-weight:500;color:var(--ink);padding-block:.5rem}
.nav a span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--expo);padding-bottom:3px}
.nav a:hover span,.nav a:focus-visible span{background-size:100% 1px}
.menu-btn{display:none;align-items:center;gap:.6rem;height:46px;padding:0 1.1rem;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font:600 .86rem var(--font-body);cursor:pointer}
.menu-btn__lines{position:relative;width:16px;height:8px}
.menu-btn__lines::before,.menu-btn__lines::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .45s var(--expo),top .45s var(--expo)}
.menu-btn__lines::before{top:0}.menu-btn__lines::after{top:6.5px}
.menu-open .menu-btn__lines::before{top:3.25px;transform:rotate(45deg)}
.menu-open .menu-btn__lines::after{top:3.25px;transform:rotate(-45deg)}
@media (max-width:980px){.nav,.header-cta{display:none}.menu-btn{display:inline-flex}}
@media (max-width:420px){.brand img{height:42px}.brand-name{font-size:1.1rem}.header-bar{gap:.8rem}}

/* mobile menu */
.menu{position:fixed;inset:0;z-index:95;background:var(--night);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:6rem 1.6rem 2.5rem;
  opacity:0;visibility:hidden;transition:opacity .5s var(--expo),visibility 0s .5s}
.menu.is-open{opacity:1;visibility:visible;transition:opacity .5s var(--expo)}
.menu__links{display:grid;gap:.2rem}
.menu__links a{display:flex;align-items:baseline;gap:1rem;text-decoration:none;font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,8vw,2.8rem);line-height:1.25;color:#fff;
  opacity:0;transform:translateY(24px);transition:opacity .6s var(--expo),transform .6s var(--expo)}
.menu__links a small{font:500 .75rem var(--font-body);letter-spacing:.15em;color:var(--blush)}
.menu.is-open .menu__links a{opacity:1;transform:none}
.menu.is-open .menu__links a:nth-child(2){transition-delay:.04s}.menu.is-open .menu__links a:nth-child(3){transition-delay:.08s}.menu.is-open .menu__links a:nth-child(4){transition-delay:.12s}.menu.is-open .menu__links a:nth-child(5){transition-delay:.16s}.menu.is-open .menu__links a:nth-child(6){transition-delay:.2s}
.menu__foot{margin-top:2.5rem;color:rgba(255,255,255,.75);font-size:.95rem}
.menu__foot a{color:#fff}
.menu-open .site-header .header-bar{background:rgba(251,245,242,.96)}

/* ═════════ 1. HERO ═════════ */
.hero{position:relative;min-height:max(100svh,660px);display:flex;flex-direction:column;justify-content:flex-end;color:#fff;padding:0;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
/* Hero art (shown until hero.mp4 exists): the logo's sun over a hard horizon.
   Its resting state is SUNSET — that is what no-JS and reduced-motion visitors see.
   With .play, app.js runs one sunrise → midday → sunset pass (see "day cycle" below). */
.hero-fallback{position:absolute;inset:0;z-index:-1;overflow:hidden;
  --horizon:60%;--sun-size:clamp(220px,30vw,440px);--sun-end:78%;--travel:28vw;--arc-y:min(28vh,280px);
  background:linear-gradient(180deg,#EBCBC8 0%,#E5BDBA calc(var(--horizon) * .5),#DDA3A0 var(--horizon),#3F9A9D var(--horizon),#2E8A8F 74%,#1D5F66 100%)}
.sky-layer{position:absolute;left:0;right:0;top:0;height:var(--horizon);opacity:0}
.sky-dawn{background:linear-gradient(180deg,#C9B7CF 0%,#DDBCC9 55%,#F1C3B3 100%)}
.sky-day{background:linear-gradient(180deg,#F2DCD6 0%,#F8E7DE 60%,#FCF0E7 100%)}
.sea-layer{position:absolute;left:0;right:0;top:var(--horizon);bottom:0;opacity:0}
.sea-day{background:linear-gradient(180deg,#63C0BB 0%,#3C9FA2 40%,#23747B 100%)}
.hero-sky{position:absolute;left:0;right:0;top:0;height:var(--horizon);overflow:hidden}
/* Arc = a linear horizontal track × an ease-out/ease-in vertical lift, so the path is a smooth parabola */
.sun-track{position:absolute;left:var(--sun-end);bottom:0;width:0;height:0}
.sun-lift{position:absolute;left:0;bottom:0;width:0;height:0}
.hero-sun{position:absolute;left:0;bottom:0;width:var(--sun-size);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,50%);
  background:radial-gradient(circle at 50% 42%,#F4A9A3 0%,#E8888D 55%,#DB7C80 100%);
  box-shadow:0 0 120px 40px rgba(244,169,163,.45)}
.hero-sun::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 50% 42%,#FFF3DC 0%,#FFD9A6 55%,#F6BE8A 100%);box-shadow:0 0 110px 36px rgba(255,210,150,.55)}
.hero-glints{position:absolute;left:var(--sun-end);top:calc(var(--horizon) + 2.2%);width:var(--sun-size);translate:-50% 0;display:grid;justify-items:center;gap:clamp(10px,1.6vw,20px)}
.hero-glints i{display:block;height:5px;border-radius:5px;background:rgba(244,169,163,.75)}
.hero-glints i:nth-child(1){width:78%}.hero-glints i:nth-child(2){width:58%;opacity:.8}.hero-glints i:nth-child(3){width:40%;opacity:.6}.hero-glints i:nth-child(4){width:26%;opacity:.45}.hero-glints i:nth-child(5){width:14%;opacity:.3}
/* Phones: the text column fills the hero, so the sun lives in the empty band above the
   eyebrow (which starts ~20% down). The scrim still reaches full strength before any text. */
@media (max-width:820px){.hero-fallback{--horizon:17%;--sun-size:min(40vw,170px);--sun-end:80%;--travel:36vw;--arc-y:58px}.hero-glints{display:none}}
/* ---- hero scene extras (v3, 2026-10-02): clouds + birds, a far coast, the paddler, ripples ---- */
.sky-par{position:absolute;inset:0}
.hero-clouds{position:absolute;inset:0;pointer-events:none}
.hero-clouds i{position:absolute;height:10px;border-radius:10px;background:rgba(255,255,255,.5)}
.hero-clouds i:nth-child(1){left:61%;top:27%;width:9%}
.hero-clouds i:nth-child(2){left:65%;top:calc(27% + 19px);width:5%;height:7px;opacity:.75}
.hero-clouds i:nth-child(3){left:89%;top:47%;width:7%;height:8px}
.hero-birds{position:absolute;left:57.5%;top:50%;width:clamp(46px,4.6vw,84px);overflow:visible}
.hero-birds path{fill:none;stroke:rgba(16,52,58,.5);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hero-isle{position:absolute;bottom:-1px;max-width:none;height:auto}
.hero-sail{position:absolute;left:70%;bottom:-3px;width:clamp(18px,1.9vw,32px);height:auto;opacity:.92}
@media (max-width:820px){.hero-sail{display:none}}   /* phones: the group fills the horizon there, the sail sat right behind the dog */
.hero-isle--low{left:55%;width:clamp(110px,11vw,210px)}
.hero-isle--low path{fill:#C99096}
.hero-isle--head{right:-1%;width:clamp(200px,24vw,460px)}
.hero-isle--head path{fill:#A5656F}
/* --pw paddler width, --cw cliff width, --depth how far below the horizon the cliff and the board meet the water.
   --depth keeps the paddler's hat 32px above the horizon = 12px under the buttons, so he can pass below the copy. */
.hero-fallback{--pw:clamp(150px,13.5vw,250px);--cw:clamp(280px,30vw,600px);--depth:calc(var(--pw) * .508 - 32px)}
.hero-caves{position:absolute;left:0;width:var(--cw);height:auto;max-width:none;top:calc(var(--horizon) + var(--depth) - var(--cw) * .3667);pointer-events:none}
.hero-paddler{position:absolute;left:54%;width:var(--pw);top:calc(var(--horizon) + var(--depth) - var(--pw) * .667);translate:-50% 0;pointer-events:none}
.hp-glide{position:relative;transition:scale .45s var(--ease-out)}
.hero-paddler.is-left .hp-glide{scale:-1 1}   /* the group faces left: on the way to the caves and while it is there */
/* the three guests: behind the guide (to his left; the flip above mirrors the whole group), each a little
   smaller and a little higher than the one in front, so the line recedes. --s size, --dx place, both in guide widths. */
.hp-glide .hp-mate{position:absolute;left:calc(var(--pw) * var(--dx));bottom:calc(var(--pw) * (.1667 * (1 - var(--s)) + var(--up)));width:calc(var(--pw) * var(--s))}
.hp-mate--1{--s:.82;--dx:-.62;--up:.026}
.hp-mate--2{--s:.74;--dx:-1.15;--up:.05}
.hp-mate--3{--s:.68;--dx:-1.62;--up:.072}
.hp-lead{position:relative}
/* what a paddler says when clicked */
.hero-say{position:absolute;z-index:3;left:0;top:0;margin:0;transform:translate(-50%,0);padding:.5rem .8rem .55rem;border-radius:4px 14px 14px 14px;background:var(--white);color:var(--ink);
  font:400 .92rem/1.25 var(--font-display);font-variation-settings:"opsz" 40;white-space:nowrap;box-shadow:0 14px 28px -14px rgba(16,52,58,.6),0 0 0 1px var(--line);pointer-events:none;transform-origin:20% 0}   /* it opens UNDER the board, on the water: above the heads it would slide under the buttons */
.hero-say.is-up{transform:translate(-50%,-100%);border-radius:14px 14px 14px 4px;transform-origin:20% 100%}   /* phones: the copy is below the scene, so it goes up into the sky */
.hero-say[hidden]{display:none}
/* the paddler under the pointer lifts a little (app.js .is-hot): they can be clicked */
.hp-art{transition:translate .35s var(--expo)}
.hp-art.is-hot{translate:0 -4px}
.hp-lead .hp-dog{transition:translate .35s var(--expo)}
.hp-lead .hp-dog.is-hot{translate:0 -3px}
.hp-wave{transform-box:view-box;transform-origin:109px 70px}
/* "Tap us": under the group until the first tap */
.hero-tap{position:absolute;z-index:2;left:-31%;top:97%;margin:0;transform:translate(-50%,0);padding:.3rem .65rem;border-radius:999px;border:1px solid rgba(255,255,255,.55);background:rgba(16,52,58,.35);color:#fff;font-size:.74rem;font-weight:500;letter-spacing:.02em;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .6s ease}
.hero-tap[hidden]{display:none}
.hero-tap.is-on{opacity:1}
.hero-paddler.is-left .hero-tap{left:131%}   /* the group is mirrored at the caves: its middle is on the other side of the guide */
@media (max-width:820px){.hero-tap{top:auto;bottom:88%}}   /* phones: the copy starts right under the boards, so the tag goes above the heads */
@media (max-width:520px){.lp-next{flex-basis:100%;margin-left:0}}
.hp-art{display:block;width:100%;height:auto;overflow:visible}
.hero-ripple{position:absolute;width:170px;height:48px;margin:-24px 0 0 -85px;border-radius:50%;border:2px solid rgba(255,255,255,.6);pointer-events:none;animation:hero-ripple 1.2s var(--ease-out) forwards}
.hero-ripple::after{content:"";position:absolute;inset:24%;border-radius:50%;border:2px solid rgba(255,255,255,.45)}
@keyframes hero-ripple{from{transform:scale(.12);opacity:1}to{transform:scale(1);opacity:0}}
@keyframes hp-journey{from{left:calc(var(--cw) * .97)}to{left:79%}}   /* replayed day: from the caves to the sunset side */
@keyframes hp-bob{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(3px) rotate(.7deg)}}
/* the guide's Shiba: the tail wags now and then, and he hops when he is clicked (app.js sets .is-woof) */
.hp-lead .hp-dog{transform-box:fill-box;transform-origin:50% 100%}
.hp-lead .hp-dog-tail{transform-box:fill-box;transform-origin:62% 92%}
@keyframes hp-wag{0%,78%,100%{transform:rotate(0)}82%{transform:rotate(12deg)}86%{transform:rotate(-7deg)}90%{transform:rotate(9deg)}94%{transform:rotate(-4deg)}}
@keyframes hp-wag-fast{0%,100%{transform:rotate(0)}35%{transform:rotate(14deg)}70%{transform:rotate(-9deg)}}
@keyframes hp-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-7px)}}
@media (max-width:820px){.hero-fallback{--pw:88px;--cw:42vw;--depth:0px}.hero-isle--low,.hero-birds{display:none}.hero-isle--head{width:150px}.hero-clouds i:nth-child(1){left:8%;top:46%;width:20%}.hero-clouds i:nth-child(2){left:14%;top:calc(46% + 16px);width:11%}.hero-clouds i:nth-child(3){left:44%;top:58%;width:13%}}
/* "sunrise" picked in the hero: the sun moves back to where it rises, the dawn sky comes up */
.hero-fallback.is-sunrise .sun-track,.hero-fallback.is-sunrise .hero-glints{transform:translateX(calc(-1 * var(--travel)))}
.hero-fallback.is-sunrise .sun-lift{transform:translateY(calc(var(--sun-size) * -.1))}
.hero-fallback.is-sunrise .sky-dawn{opacity:1}
.hero-fallback.is-sunrise .hero-paddler{left:calc(var(--cw) * .97)}   /* at the mouth of the big cave */
.hero-fallback.is-sunset .hero-paddler{left:79%}                      /* out by the setting sun */
@media (max-width:820px){.hero-fallback.is-sunset .hero-paddler{left:70%}}
.hero-fallback.is-sunrise .hero-sun::after{opacity:.6}
.hero-fallback.is-sunrise .hero-glints i{background:rgba(255,224,196,.8)}
/* v3: the phone horizon is a fixed 210px so it always clears the floating header (top ~76px)
   and sits above the copy, which starts at >= 250px (hero padding-top below). */
@media (max-width:820px){.hero-fallback{--horizon:210px;--sun-size:150px;--sun-end:78%;--travel:40vw;--arc-y:56px}}
.hero-waves{position:absolute;left:-4%;width:108%;max-width:none;top:calc(var(--horizon) - 2px);height:clamp(70px,9vw,140px);pointer-events:none;
  -webkit-mask:linear-gradient(180deg,#000 45%,transparent);mask:linear-gradient(180deg,#000 45%,transparent)} /* oversized so scroll drift never shows an end; fades out at the bottom */
.hero-waves .w1{fill:#4DA8A9;opacity:.55}
.hero-waves .w2{fill:#2E8A8F;opacity:.6}
.hero-waves .w3{fill:#1D5F66;opacity:.55}
@media (max-width:820px){.hero-waves{height:60px}}
/* Scrim strength is set for the WORST case: white hero text must pass WCAG contrast even
   over a pure-white video frame (a sunrise sky can get close). Needs >= .63 of this ink
   behind small text and >= .49 behind the large h1 — measured, see sup-lovers-v2/CLAUDE.md.
   Dark only where the text sits: the left column on desktop, so the right side stays bright. */
.hero-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(15,42,46,.66) 0%,rgba(15,42,46,.64) 50%,rgba(15,42,46,.3) 70%,rgba(15,42,46,0) 92%),
  linear-gradient(180deg,rgba(15,42,46,0) 0%,rgba(15,42,46,0) 30%,rgba(15,42,46,.35) 75%,rgba(15,42,46,.7) 100%)}
@media (max-width:820px){.hero-shade{background:linear-gradient(180deg,rgba(15,42,46,.06) 0%,rgba(15,42,46,.18) 12%,rgba(15,42,46,.66) 19%,rgba(15,42,46,.66) 70%,rgba(15,42,46,.82) 100%)}}
/* phones: the scrim reaches full strength (.66) at 235px, before the copy starts at 250px */
@media (max-width:820px){.hero-shade{background:linear-gradient(180deg,rgba(15,42,46,.05) 0,rgba(15,42,46,.16) 150px,rgba(15,42,46,.66) 235px,rgba(15,42,46,.66) 70%,rgba(15,42,46,.84) 100%)}}
.hero-pause,.sky-toggle{position:absolute;top:1rem;right:1rem;z-index:2;width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7);background:rgba(15,42,46,.55);color:#fff;font-size:.8rem;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(4px)}
.hero-pause[hidden],.sky-toggle[hidden]{display:none}
.hero-pause:hover,.sky-toggle:hover{background:rgba(15,42,46,.8)}
.hero-pause:focus-visible,.sky-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px}
.sky-toggle span{font-size:.9rem;line-height:1}
.hero-pause,.sky-toggle{top:calc(var(--hdr) + 22px);right:1.4rem}
.hero-inner{padding:calc(var(--hdr) + 7rem) 0 3rem}
@media (max-width:820px){.hero-inner{padding-top:250px}}
.hero .eyebrow{color:#fff}
.hero-title{color:#fff;max-width:17ch;margin-bottom:.45em}
/* two fixed lines on wide screens; natural wrapping on phones (a <br> would survive SplitText there) */
@media (min-width:821px){.hero-title{max-width:none}.hero-title .hl{display:block}}
.hero-title em{color:#FFD9CF}
.hero-title,.lede{text-shadow:0 1px 18px rgba(15,42,46,.25)}
.lede{font-size:clamp(1.05rem,1.5vw,1.22rem);max-width:54ch;color:#fff;margin-bottom:2.2rem}
/* sunrise / sunset picker: white-on-dark by default (phones, video); ink on the pink sky on desktop */
.lede{margin-bottom:1.5rem}
.light-pick{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .55rem;margin:0 0 1.5rem}
.lp-label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#fff;margin-right:.35rem}
.lp-next{margin-left:.35rem;font-size:.84rem;font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.lp-next[hidden]{display:none}
.lp-next::before{content:"";display:inline-block;width:7px;height:7px;margin-right:.45rem;border-radius:50%;background:#fff;vertical-align:1px;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.lp-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1.05rem 0 .8rem;border-radius:999px;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.12);color:#fff;
  font:600 .9rem/1 var(--font-body);cursor:pointer;transition:background-color .35s var(--expo),color .35s var(--expo),border-color .35s var(--expo),transform 160ms var(--ease-out)}
.lp-btn svg{width:19px;height:19px;flex:none}
.lp-btn b{font-weight:500;font-variant-numeric:tabular-nums;opacity:.85}
.lp-btn b:empty{display:none}
.lp-btn[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--ink)}
.lp-btn:active{transform:scale(.97)}
.lp-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (max-width:520px){.lp-label{flex-basis:100%}}
.hero-title em{cursor:pointer;text-decoration:underline 2px transparent;text-underline-offset:.14em;transition:text-decoration-color .5s}
.hero-title em.is-on{text-decoration-color:currentColor}   /* the picked word gets underlined */
.btn-avatar{position:relative;z-index:1;flex:none;width:30px;height:30px;margin:-.5rem 0 -.5rem -.75rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-facts{list-style:none;margin:0 auto;padding:1.6rem 0 2.4rem;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;border-top:1px solid rgba(255,255,255,.28);position:relative}
.hero-facts li{display:flex;flex-direction:column;gap:.15rem}
.hero-facts strong{font-family:var(--font-display);font-weight:300;font-size:1.4rem;color:#fff;font-variation-settings:"opsz" 48}
.hero-facts span{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:#fff}
/* each fact is a way into the page */
.hero-facts a{display:flex;flex-direction:column;gap:.15rem;color:inherit;text-decoration:none;padding:.35rem 0;margin:-.35rem 0}
.hero-facts a strong{transition:translate .45s var(--expo)}
.hero-facts a span{align-self:flex-start;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .45s var(--expo)}
@media (hover:hover) and (pointer:fine){.hero-facts a:hover strong{translate:0 -3px}.hero-facts a:hover span{background-size:100% 1px}}
.hero-facts a:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:6px}
@media (max-width:820px){.hero-facts{grid-template-columns:repeat(2,1fr)}.hero-facts li:last-child{grid-column:span 2}}
/* Desktop, illustration mode (no hero video): the copy sits on the pink sky in dark ink, so the
   left half keeps the sky's colour instead of a dark teal scrim (owner, 2026-09-27: "I don't like
   that on the left it's green"). The horizon drops to just above the facts row, which stays white
   on the sea. When a real hero.mp4 plays, app.js adds .has-video and the white text + the measured
   worst-case scrim come back. Phones keep their own layout (sun band above, copy on the sea). */
@media (min-width:821px){
  /* copy sits high (less empty sky); app.js sets --hz so the sea starts just under the buttons
     (owner 2026-09-27: "still lots of empty space on top — raise the water up") */
  .hero:not(.has-video){justify-content:space-between}
  .hero:not(.has-video) .hero-inner{padding:calc(var(--hdr) + clamp(1.5rem,6vh,6rem)) 0 2rem}
  /* short laptop screens: slightly smaller headline and a two-line lede, so the sea stays in the first screen */
  .hero:not(.has-video) .hero-title{font-size:clamp(2.7rem,min(6vw,9.6vh),5.1rem)}
  .hero:not(.has-video) .lede{max-width:76ch}
  .hero:not(.has-video) .lp-btn{min-height:40px}
  .hero:not(.has-video) .hero-fallback{--horizon:var(--hz,calc(100% - 170px));--sun-end:84%;--travel:18vw}   /* sun rises right of the copy, not behind it */
  .hero:not(.has-video) .hero-shade{background:linear-gradient(180deg,rgba(15,42,46,0) 0,rgba(15,42,46,0) var(--hz,calc(100% - 170px)),rgba(15,42,46,.2) calc(100% - 170px),rgba(15,42,46,.62) 100%)}
  .hero:not(.has-video) .eyebrow{color:var(--ink)}
  .hero:not(.has-video) .hero-title,.hero:not(.has-video) .lede{color:var(--ink);text-shadow:none}
  .hero:not(.has-video) .hero-title em{color:#8A3B3C}   /* ≥3:1 even when the rising sun passes behind it */
  .hero:not(.has-video) .btn-primary{background:var(--ink);color:#fff}
  .hero:not(.has-video) .btn-primary::before{background:var(--pink)}
  .hero:not(.has-video) .btn-ghost{color:var(--ink);border-color:rgba(16,52,58,.45);background:rgba(255,255,255,.28)}
  .hero:not(.has-video) .btn-ghost::before{background:var(--ink)}
  .hero:not(.has-video) a:focus-visible,.hero:not(.has-video) .lp-btn:focus-visible{outline-color:var(--ink)}
  .hero:not(.has-video) .lp-label{color:var(--ink)}
  .hero:not(.has-video) .lp-next{color:var(--ink)}
  .hero:not(.has-video) .lp-next::before{background:var(--pink-ink);box-shadow:0 0 0 3px rgba(154,71,70,.2)}
  .hero:not(.has-video) .lp-btn{color:var(--ink);border-color:rgba(16,52,58,.4);background:rgba(255,255,255,.32)}
  .hero:not(.has-video) .lp-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
}
@media (min-width:821px) and (hover:hover) and (pointer:fine){
  .hero:not(.has-video) .btn-primary:hover{color:#2A1410;border-color:var(--pink)}
  .hero:not(.has-video) .btn-ghost:hover{color:#fff;border-color:var(--ink)}
  .hero:not(.has-video) .lp-btn[aria-pressed="false"]:hover{background:rgba(255,255,255,.7);border-color:var(--ink)}
}
@media (hover:hover) and (pointer:fine){.lp-btn[aria-pressed="false"]:hover{background:rgba(255,255,255,.26)}}
.scroll-cue{position:absolute;left:50%;bottom:.6rem;width:1px;height:26px;background:rgba(255,255,255,.35);overflow:hidden}
.scroll-cue::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:#fff}
@media (max-width:820px){.scroll-cue{display:none}}

/* ═════════ ROUTE MARQUEE — moves only with scroll ═════════ */
.marquee{background:var(--ink);color:var(--blush);overflow:hidden;padding:1.35rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.marquee__track{display:flex;align-items:center;gap:2.2rem;width:max-content;will-change:transform}
.marquee span{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.1;white-space:nowrap}
.marquee i{width:14px;height:14px;border-radius:50%;flex:none;background:radial-gradient(circle at 45% 40%,#F4A9A3,#E8788A);box-shadow:0 0 18px 4px rgba(232,120,138,.35)}

/* ═════════ 2. INTRO — morning ═════════ */
.intro{background:var(--paper);overflow-x:clip}   /* clip: the glow behind the arch is wider than a phone */
.intro-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);column-gap:clamp(2.5rem,6vw,6rem);align-items:center}
.intro-title{font-size:clamp(2.3rem,4.4vw,3.8rem);margin-bottom:.35em}
.intro-hint{margin:0 0 1.2rem;color:var(--muted);font-size:1rem}
/* the three reasons are a switch for the arched view: one is always on */
.intro-features{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.6rem}
.intro-features li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 36px;gap:1.05rem;align-items:center;padding:.95rem 1.1rem;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.4);cursor:pointer;
  transition:background-color .4s var(--expo),border-color .4s var(--expo),box-shadow .5s var(--expo),translate .45s var(--expo)}
.intro-features li.is-on{background:var(--white);border-color:rgba(232,120,138,.55);box-shadow:0 26px 50px -38px rgba(16,52,58,.55)}
.intro-features h3{margin:0 0 .2rem;font-size:clamp(1.18rem,1.55vw,1.36rem);font-weight:400;font-variation-settings:"opsz" 48}
.intro-features p{margin:0;color:var(--muted);font-size:.98rem;max-width:46ch}
.if-btn{all:unset;cursor:pointer}
.if-btn::after{content:"";position:absolute;inset:0;border-radius:20px}   /* the whole row is the button */
.if-btn:focus-visible::after{outline:3px solid var(--teal);outline-offset:2px}
.if-ic{justify-self:center;width:46px;height:54px;border-radius:23px 23px 12px 12px;overflow:hidden;background:var(--paper-2);box-shadow:0 0 0 1px rgba(16,52,58,.14);filter:saturate(.62);transition:filter .45s,box-shadow .45s var(--expo)}   /* a small arched picture of the view, like the big one */
.if-ic svg{display:block;width:100%;height:100%}
.intro-features li.is-on .if-ic{filter:none;box-shadow:0 0 0 2px var(--white),0 0 0 3.5px var(--pink),0 14px 22px -12px rgba(16,52,58,.65)}
.intro-features li::before{content:"";position:absolute;left:1.1rem;right:1.1rem;bottom:-1px;height:2px;border-radius:2px;background:var(--pink);transform:scaleX(0);transform-origin:0 50%;opacity:0;pointer-events:none}   /* fills while the views play by themselves (.is-demo, app.js) */
.if-go{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--teal);transition:background-color .35s,color .35s,border-color .35s}
.if-go .arrow{width:14px}
.intro-features li.is-on .if-go{background:var(--ink);border-color:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){.intro-features li:not(.is-on):hover{background:rgba(255,255,255,.8);border-color:var(--line-2);translate:4px 0}.intro-features li:hover .if-ic{filter:none}}
/* where to see it: route chips for the chosen row (one line, so hovering down the rows never shifts them) */
.intro-where{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;margin:0 0 1.1rem;min-height:38px}
.intro-where[hidden]{display:none}
.iw-label{margin-right:.35rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--pink-ink)}
.iw-chips{display:contents}   /* the chips wrap on the same line as the label */
.iw-chips button{display:inline-flex;align-items:center;gap:.45rem;min-height:38px;padding:0 .9rem;border-radius:999px;border:1px solid rgba(31,110,115,.4);background:rgba(255,255,255,.55);color:var(--teal);font:500 .88rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.iw-chips button small{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--pink-ink);transition:color .3s}
.iw-chips button:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.iw-chips button:hover{background:var(--ink);border-color:var(--ink);color:#fff}.iw-chips button:hover small{color:var(--blush)}}
@media (min-width:901px) and (max-width:1200px){.iw-chips button small{display:none}}   /* keeps the strip on one line, so hovering down the rows never moves the note */
/* a word from the guide: avatar + speech bubble */
.intro-note{display:grid;grid-template-columns:48px minmax(0,1fr);gap:.8rem;align-items:end}
.note-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--white),0 10px 18px -10px rgba(16,52,58,.6)}
.note-bubble{background:var(--white);border:1px solid var(--line);border-radius:20px 20px 20px 6px;padding:.9rem 1.15rem 1rem;box-shadow:0 24px 50px -40px rgba(16,52,58,.5)}
.note-bubble p{margin:0;color:var(--text);font-size:.97rem;max-width:58ch}
.note-more{display:inline-block;margin-top:.5rem;font-size:.92rem;font-weight:600;color:var(--teal);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:color .2s}
.note-more:hover{color:var(--pink-ink)}
.note-bubble .note-q{font-family:var(--font-display);font-size:1.16rem;color:var(--ink);margin-bottom:.2rem;font-variation-settings:"opsz" 48}
/* the four answers share one cell: the bubble is as tall as the longest, whichever one shows */
.note-as{display:grid}
.note-as > p{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .35s ease,visibility 0s .35s}
.note-as > p.is-on{visibility:visible;opacity:1;transition:opacity .35s ease}
.note-asks{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.65rem}
.note-asks[hidden]{display:none}
.note-asks button{min-height:34px;padding:0 .75rem;border-radius:999px;border:1px dashed rgba(31,110,115,.55);background:transparent;color:var(--teal);font:500 .82rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.note-asks button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);border-style:solid;color:#fff}
.note-asks button:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.note-asks button[aria-pressed="false"]:hover{background:var(--paper-2);border-style:solid}}
.note-more{margin-top:.7rem}
/* field-guide tags on the arch: each view has its own pair */
.v-tag rect{fill:rgba(255,255,255,.94)}
.v-tag text{font:600 12.5px var(--font-body);fill:var(--ink)}
.v-tag line{stroke:rgba(255,255,255,.85);stroke-width:1.3;stroke-dasharray:2 3}
.v-tag-dot{fill:#fff;stroke:var(--pink);stroke-width:2}
/* hot tags (and the cave mouth) take the step further when clicked: only in their own view, and not once you are already there */
.v-tag rect,.v-tag text,.v-tag-go{transition:fill .25s,stroke .25s}
.v-tag-go{fill:none;stroke:var(--pink-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.v-tag-ping{fill:none;stroke:#fff;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.v-hot{pointer-events:none}
.view-art[data-view="cliffs"]:not([data-deep]) .v-cliff .v-hot,.view-art[data-view="water"]:not([data-deep]) .v-under .v-hot{pointer-events:auto}
.view-art[data-view="light"] .v-hot--toggle,.view-art[data-view="water"] .v-hot--fish{pointer-events:auto}   /* the sun (sunset / sunrise) and the fish answer in either state of their view */
.v-hot--fish path{stroke:transparent;stroke-width:18px}   /* a wider place to click than a 20px fish */
@media (hover:hover) and (pointer:fine){
  .v-tag.v-hot:hover rect{fill:var(--ink)}.v-tag.v-hot:hover text{fill:#fff}.v-tag.v-hot:hover .v-tag-go{stroke:#fff}
  .v-cave-mouth{transition:filter .3s}.v-cave-mouth:hover{filter:brightness(1.35)}
}
@media (max-width:480px){.v-tag{display:none}}
/* the three views. Layers that only exist in one view start transparent */
.v-gold,.v-sun-gold,.v-cliff-gold,.v-sea-gold,.v-glints-gold,.v-under,.v-fin,.v-tags,.v-inside{opacity:0}
.v-sun-mode{transform-origin:196px 282px}
.v-pad-mode{transform:translate(196px,424px)}
.v-far{transition:fill .9s ease}
.view-art[data-view="light"] .v-far{fill:#E6C08F}
.v-fishes{transform:translateX(-54px);opacity:0}
.view-art[data-view="cliffs"] .v-pad-mode{transform:translate(236px,392px) scale(.92)}          /* heading for the cave */
.view-art[data-view="cliffs"] .v-tags[data-for="cliffs"]{opacity:1}
.view-art[data-view="water"] .v-world{transform:translateY(-190px)}                             /* the view dips under the surface */
.view-art[data-view="water"] .v-surface{opacity:0}
.view-art[data-view="water"] .v-under,.view-art[data-view="water"] .v-fin,.view-art[data-view="water"] .v-tags[data-for="water"]{opacity:1}
.view-art[data-view="water"] .v-pad-mode{transform:translate(200px,361px) scale(1.12)}
.view-art[data-view="water"] .v-fishes{transform:none;opacity:1}
.view-art[data-view="light"] .v-gold,.view-art[data-view="light"] .v-sun-gold,.view-art[data-view="light"] .v-cliff-gold,.view-art[data-view="light"] .v-sea-gold,.view-art[data-view="light"] .v-glints-gold,.view-art[data-view="light"] .v-tags[data-for="light"]{opacity:1}
.view-art[data-view="light"] .v-sun-mode{transform:translateY(16px) scale(1.2)}
/* one step further in each view (data-deep, set by the button under the arch) */
.v-inside{transform:scale(.24);transform-origin:333px 344px;pointer-events:none}                     /* grows out of the cave mouth */
.view-art[data-view="cliffs"][data-deep="cave"] .v-inside{opacity:1;transform:none}
.v-in-pad{transform:translate(206px,334px) scale(.4)}                                                /* still out at the mouth */
.view-art[data-view="cliffs"][data-deep="cave"] .v-in-pad{transform:translate(196px,436px) scale(1.2)}  /* inside with us: low, in the near water */
.v-in-shimmer{opacity:.3}
.v-echo > *{opacity:0}
.v-echo-say rect,.v-echo-say path{fill:#fff}
.v-echo-say text{font:600 12.5px var(--font-body);fill:var(--ink)}
.v-echo-far{font:600 12px var(--font-body);letter-spacing:.06em;fill:#C9F1EC}
.v-echo-say,.v-echo-far{transform-box:fill-box;transform-origin:50% 50%}
.view-art.is-echo .v-echo-say{opacity:1}.view-art.is-echo .v-echo-far{opacity:var(--o,.8)}   /* reduced motion: the words simply show for a moment */
.view-art[data-view="water"][data-deep="bed"] .v-world{transform:translateY(-292px)}                 /* down to the seabed */
.view-art[data-view="light"][data-deep="rise"] .v-gold{opacity:.42}                                 /* sunrise: rose-gold, the sun just up */
.view-art[data-view="light"][data-deep="rise"] .v-sun-gold{opacity:.3}
.view-art[data-view="light"][data-deep="rise"] .v-cliff-gold,.view-art[data-view="light"][data-deep="rise"] .v-sea-gold{opacity:.5}
.view-art[data-view="light"][data-deep="rise"] .v-sun-mode{transform:translateY(52px) scale(1)}
/* arched "view from the board" */
.intro-view{position:relative;margin:0;justify-self:end;width:min(100%,430px);perspective:1100px}
/* a soft glow behind the arch in the colour of the view (currentColor, so it can fade between them) */
.intro-view::before{content:"";position:absolute;z-index:-1;inset:-9% -22% 12% -22%;border-radius:50%;pointer-events:none;color:rgba(238,154,150,.3);background:radial-gradient(closest-side,currentColor 0,transparent 100%);transition:color 1s ease}
.intro-view[data-view="water"]::before{color:rgba(87,189,185,.3)}
.intro-view[data-view="light"]::before{color:rgba(248,196,120,.42)}
.view-stage{position:relative}
/* the "go further" button straddles the bottom edge of the arch */
.view-act{position:absolute;left:50%;bottom:-20px;translate:-50% 0;display:inline-flex;align-items:center;gap:.6rem;min-height:42px;padding:0 1.1rem 0 1.2rem;border-radius:999px;border:0;background:var(--white);color:var(--ink);font:600 .88rem/1 var(--font-body);white-space:nowrap;cursor:pointer;
  box-shadow:0 14px 30px -12px rgba(16,52,58,.5),0 0 0 1px rgba(16,52,58,.08);transition:background-color .35s var(--expo),color .35s var(--expo),scale 160ms var(--ease-out)}
.view-act[hidden]{display:none}
.view-act .arrow{width:15px;transition:transform .45s var(--expo)}
.view-act[aria-pressed="true"]{background:var(--ink);color:#fff}
.view-act[aria-pressed="true"] .arrow{transform:rotate(180deg)}
.view-act:active{scale:.96}
/* "Try the echo": sits on the cave ceiling, only while you are inside (transform centres it: the pop animates translate) */
.view-echo{position:absolute;left:50%;top:9%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.4rem;min-height:36px;padding:0 .95rem 0 .75rem;border-radius:999px;border:0;background:rgba(255,255,255,.95);color:var(--ink);font:600 .8rem/1 var(--font-body);white-space:nowrap;cursor:pointer;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.7);transition:scale 160ms var(--ease-out)}
.view-echo[hidden]{display:none}
.view-echo svg{width:16px;height:16px;color:var(--pink-ink)}
.view-echo:active{scale:.95}
.view-echo:focus-visible{outline:3px solid var(--white);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.view-act:hover{background:var(--pink);color:#2A1410}}
.view-art{width:100%;height:auto;overflow:visible;cursor:pointer;filter:drop-shadow(0 40px 50px rgba(16,52,58,.22));transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--ease-out)}   /* --rx/--ry: pointer tilt (motion.js) */
.view-frame{stroke:rgba(255,255,255,.6);stroke-width:1.2}
.view-dots{display:flex;justify-content:center;gap:.2rem;margin-top:1.9rem}
.view-dots button{position:relative;width:44px;height:40px;padding:0;border:0;background:none;cursor:pointer}
.view-dots button::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:9px;background:var(--blush-2);transition:width .4s var(--expo),margin .4s var(--expo),background-color .3s}
.view-dots button[aria-pressed="true"]::before{width:26px;margin-left:-13px;background:var(--pink)}
.view-dots button:focus-visible{outline:3px solid var(--teal);outline-offset:0;border-radius:10px}
.intro-view figcaption{margin-top:.35rem;text-align:center;font:italic 300 1.02rem var(--font-display);color:var(--ink)}
.intro-view figcaption .cap-where{color:var(--muted);font-style:normal;font-family:var(--font-body);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.intro-view figcaption .cap-where::before{content:"· "}
@media (max-width:900px){
  /* phones: the arch moves up between the heading and the three rows, so a tap changes what is in view */
  .intro-grid{display:flex;flex-direction:column;align-items:stretch}
  .intro-copy{display:contents}
  .intro-copy > .eyebrow{order:1}.intro-title{order:2}.intro-hint{order:3}.intro-view{order:4}.intro-features{order:5}.intro-where{order:6}.intro-note{order:7}
  .intro-view{align-self:center;width:min(100%,270px);margin:0 0 1.4rem}
  .intro-view figcaption .cap-where{display:block}.intro-view figcaption .cap-where::before{content:none}   /* always two lines, so the rows below never shift under a finger */
  /* compact rows so the arch and all three fit one screen: no arrow, only the open row shows its text */
  .intro-features li{grid-template-columns:42px minmax(0,1fr);gap:.9rem;padding:.8rem 1rem}
  .intro-features .if-ic{width:38px;height:44px;border-radius:19px 19px 10px 10px}
  .if-go{display:none}
  .intro-features li:not(.is-on) p{display:none}
  .intro-features li:not(.is-on) h3{margin:0}
}

/* ═════════ 3. TOURS — map + index on top, scrolling slides below (phones: one card at a time) ═════════ */
.tours{background:var(--paper-2);padding-bottom:clamp(3rem,6vw,4.5rem)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* head: copy + route index left, map right */
.tours-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:center;margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.tours-head .section-head{margin-bottom:0}
.tours-head .section-sub{margin-bottom:1.3rem}
/* "help me choose" */
.route-filter{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;margin-bottom:1.1rem}
.rf-label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--pink-ink);margin-right:.35rem}
.route-filter button{min-height:38px;padding:0 .9rem;border-radius:999px;border:1px solid rgba(31,110,115,.4);background:transparent;color:var(--teal);font:500 .88rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.route-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.route-filter button:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.route-filter button[aria-pressed="false"]:hover{background:rgba(255,255,255,.6);border-color:var(--teal)}}
.route-filter button{position:relative;display:inline-flex;align-items:center;gap:.4rem}
.route-filter button .ri-g{width:16px;height:16px}
/* how many routes a chip leaves: a small badge on its corner (absolute, so the row keeps its width) */
.route-filter button .rf-n{position:absolute;top:-8px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:var(--white);border:1px solid var(--line-2);color:var(--ink);font:600 .68rem/1 var(--font-body);font-style:normal;font-variant-numeric:tabular-nums}
.route-filter button[aria-pressed="true"] .rf-n{background:var(--pink);border-color:var(--pink);color:#2A1410}
.route-filter button[aria-pressed="true"] .ri-easy{background:var(--mint);box-shadow:0 0 0 3px rgba(127,205,191,.35)}
/* "Surprise me", under the map */
.rf-lucky{display:inline-flex;align-items:center;gap:.45rem;min-height:38px;padding:0 .95rem;border-radius:999px;border:1px dashed rgba(31,110,115,.55);background:rgba(255,255,255,.5);color:var(--teal);font:600 .86rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.rf-lucky[hidden]{display:none}
.rf-lucky svg{width:17px;height:17px;flex:none}
.rf-lucky:active{transform:scale(.96)}
.rf-lucky:disabled{cursor:default}
@media (hover:hover) and (pointer:fine){.rf-lucky:not(:disabled):hover{background:var(--pink);border-color:var(--pink);border-style:solid;color:#2A1410}}
/* the nine names */
.route-index{list-style:none;margin:0;padding:.35rem;display:grid;grid-template-columns:1fr 1fr;gap:.15rem .5rem;background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:22px}
.ri{display:flex;align-items:center;gap:.7rem;width:100%;min-height:44px;padding:.3rem .8rem .3rem .4rem;border:0;border-radius:16px;background:transparent;color:var(--ink);font:500 .96rem/1.2 var(--font-body);text-align:left;cursor:pointer;
  transition:background-color .3s var(--expo),opacity .3s,box-shadow .4s var(--expo)}
.ri b{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--paper-2);color:var(--pink-ink);font:600 .78rem/1 var(--font-body);font-variant-numeric:tabular-nums;transition:background-color .3s,color .3s}
.ri[aria-pressed="true"]{background:var(--white);box-shadow:0 14px 26px -18px rgba(16,52,58,.5)}
.ri[aria-pressed="true"] b{background:var(--pink);color:#2A1410}
.ri.is-hover{background:rgba(255,255,255,.8)}
.ri.is-dim{opacity:.38}
@media (hover:hover) and (pointer:fine){.ri:hover{background:rgba(255,255,255,.8)}}
.ri span:not(.sr-only){flex:1;min-width:0}
/* marks beside a name: its best light, and a dot when it suits a first time (legend under the list) */
.ri-marks{flex:none;display:inline-flex;align-items:center;gap:.35rem;color:var(--teal);font-style:normal}
.ri-g{flex:none;width:17px;height:17px}
.ri-easy{flex:none;width:8px;height:8px;border-radius:50%;background:var(--lagoon);box-shadow:0 0 0 3px rgba(127,205,191,.4)}
.ri--own{text-decoration:none;color:var(--teal);font-weight:600}
/* ten names fill five rows; "your own route" takes the whole last row */
.ri-own{grid-column:1/-1;margin-top:.15rem;padding-top:.15rem;border-top:1px dashed var(--line-2)}
.ri--own small{flex:none;font-size:.82rem;font-weight:500;color:var(--muted)}
.ri-g--also{width:14px;height:14px;opacity:.5}
/* the legend under the list, and the heart of a shortlisted route */
.ri-legend{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:.6rem .3rem 0;font-size:.78rem;color:var(--muted)}
.ri-legend span{display:inline-flex;align-items:center;gap:.4rem}
.ri-legend .ri-g{width:15px;height:15px;color:var(--teal)}
.ri-heart{flex:none;width:15px;height:15px;fill:var(--pink);stroke:none}
.ri .ri-heart{display:none}
.ri.is-fav .ri-heart{display:block}
.rm-pin.is-fav .rm-halo{opacity:.3}
.rm-pin.is-fav .rm-dot{stroke:#FFD9CF}
@media (max-width:480px){.ri-legend{display:none}}
/* the line a paddle trip draws on the map from the route you were on to the one you opened (app.js) */
.rm-fly{fill:none;stroke:var(--pink-ink);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 13;opacity:0;transition:opacity .5s ease;pointer-events:none}
.rm-fly.is-on{opacity:.75;transition:opacity .15s}
.rm-fly-dot{fill:var(--ink);stroke:#fff;stroke-width:4;opacity:0;pointer-events:none}
.rm-fly-dot.is-on{opacity:1}   /* good at this light too, but it is not the best one (Blue Grotto at sunrise) */
.ri--own b{background:transparent;border:1px dashed rgba(31,110,115,.5);color:var(--teal);font-size:1rem}
/* map */
.tours-map{position:relative;margin:0;justify-self:end;width:min(100%,540px)}
.tours-map{isolation:isolate}
.tours-map::before{content:"";position:absolute;z-index:-1;inset:-4% -3% 9% -9%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.6) 0,rgba(255,255,255,0) 100%);pointer-events:none}   /* a soft pool of light under the islands; its right edge stays inside the page gutter (no side scroll at 1280) */
.route-map{width:100%;height:auto;overflow:visible}
.rm-land path{fill:var(--land,#CFE3E0);stroke:var(--land-line,#8FBDB9);stroke-width:1.5;stroke-linejoin:round}   /* variables: the cards' locator maps reuse this outline in other colours */
/* "Sunrise" / "Sunset": the sun shows on its side of the island (east = right, west = left) */
.rm-sun{opacity:0;pointer-events:none;transition:opacity .6s ease}
.rm-sun-in{transform:translateY(36px);transition:transform 1.2s var(--expo)}
.rm-sun--set .rm-sun-in{transform:translateY(-36px)}
.rm-sun-glow{fill:#F6BE8A;opacity:.16}
.rm-sun-rays path{stroke:#E9A06A;stroke-width:5;stroke-linecap:round}
.rm-sun-disc{fill:#F8CBA2;stroke:#fff;stroke-width:4}
.rm-sun--set .rm-sun-glow{fill:#EE9A96}
.rm-sun--set .rm-sun-rays path{stroke:#E4838A}
.rm-sun--set .rm-sun-disc{fill:#EE9A96}
.rm-sun text{font:600 22px var(--font-body);letter-spacing:.22em;text-transform:uppercase;fill:var(--pink-ink)}
.tours-map[data-filter="sunrise"] .rm-sun--rise,.tours-map[data-filter="sunset"] .rm-sun--set{opacity:1}
.tours-map[data-filter="sunrise"] .rm-sun--rise .rm-sun-in,.tours-map[data-filter="sunset"] .rm-sun--set .rm-sun-in{transform:none}
/* a pin or a name under the pointer: the sun comes up on that route's best side (data-sun, app.js); fainter than a chosen filter */
.tours-map[data-sun~="sunrise"]:not([data-filter="sunrise"]) .rm-sun--rise,.tours-map[data-sun~="sunset"]:not([data-filter="sunset"]) .rm-sun--set{opacity:.7}
.tours-map[data-sun~="sunrise"] .rm-sun--rise .rm-sun-in,.tours-map[data-sun~="sunset"] .rm-sun--set .rm-sun-in{transform:none}
/* quick facts for the pin under the pointer */
.rm-tip{position:absolute;z-index:3;left:0;top:0;width:max-content;max-width:240px;padding:.6rem .8rem .7rem;border-radius:14px;background:var(--ink);color:#fff;font-size:.82rem;line-height:1.35;pointer-events:none;
  box-shadow:0 18px 34px -16px rgba(16,52,58,.6);opacity:0;translate:0 6px;transition:opacity .25s,translate .35s var(--expo)}
.rm-tip[hidden]{display:none}
.rm-tip.is-on{opacity:1;translate:0 0}
.rm-tip strong{display:block;font-family:var(--font-display);font-weight:400;font-size:1.08rem;line-height:1.2;font-variation-settings:"opsz" 40}
.rm-tip span{display:block;margin:.1rem 0 .45rem;color:rgba(255,255,255,.78)}
.rm-tip em{display:inline-block;margin-right:.3rem;padding:.24rem .5rem;border-radius:999px;background:rgba(255,255,255,.14);font-style:normal;font-size:.72rem;font-weight:600}
.rm-sea path{stroke:rgba(31,110,115,.22);stroke-width:3}
.rm-compass circle{fill:none;stroke:rgba(16,52,58,.22);stroke-width:2}
.rm-compass path{fill:rgba(232,120,138,.75)}
.rm-compass text{font:700 22px var(--font-body);fill:rgba(16,52,58,.5)}
.rm-island{font:600 24px var(--font-body);letter-spacing:.3em;fill:rgba(16,52,58,.4)}
.rm-pin{cursor:pointer}
.rm-hit{fill:transparent}
.rm-halo{fill:var(--pink);opacity:0;transition:opacity .4s}
.rm-knob{transform-box:fill-box;transform-origin:center;transition:transform .4s var(--expo),opacity .3s}
.rm-dot{fill:var(--pink);stroke:#fff;stroke-width:4;transition:fill .3s}
.rm-ping{fill:none;stroke:var(--pink);stroke-width:2;opacity:0}
.rm-num{font:700 23px var(--font-body);fill:#2A1410;transition:fill .3s}
.rm-label{font:600 29px var(--font-body);fill:var(--ink);paint-order:stroke;stroke:var(--paper-2);stroke-width:7px;stroke-linejoin:round;transition:opacity .3s}
.rm-pin.is-hover .rm-knob{transform:scale(1.18)}
.rm-pin.is-on .rm-knob{transform:scale(1.32)}
.rm-pin.is-on .rm-dot{fill:var(--ink)}
.rm-pin.is-on .rm-num{fill:#fff}
.rm-pin.is-on .rm-halo{opacity:.28}
.rm-pin.is-on .rm-label{font-weight:800}
.rm-pin.is-dim .rm-knob,.rm-pin.is-dim .rm-label{opacity:.3}
@media (hover:hover) and (pointer:fine){.rm-pin:hover .rm-knob{transform:scale(1.18)}.rm-pin.is-on:hover .rm-knob{transform:scale(1.32)}}
.tours-map figcaption{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem 1rem;margin-top:.6rem;font-size:.82rem;color:var(--muted);text-align:center}
@media (max-width:900px){
  /* phones: heading, then the map, then the chips and the nine names */
  .tours-head{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .tours-head .section-head{display:contents}
  .tours-head .eyebrow{order:-4}.tours-head h2{order:-3}.tours-head .section-sub{order:-2;margin-bottom:.4rem}
  .tours-map{order:-1;align-self:center;width:min(100%,440px);margin-bottom:1.3rem}
}
@media (max-width:420px){.ri{font-size:.88rem;gap:.5rem;padding-right:.4rem}.ri b{width:28px;height:28px}}
@media (max-width:480px){.ri-marks{display:none}}   /* two narrow columns: the names need the room (the chips still dim what does not fit) */
/* bar above the card: hint + previous / next */
.route-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.route-hint{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.9rem;color:var(--muted)}
.tours.mode-stack .route-hint::before{content:"";flex:none;width:9px;height:9px;margin:-4px 2px 0;border-right:1.6px solid var(--pink-ink);border-bottom:1.6px solid var(--pink-ink);rotate:45deg}
.route-nav{display:flex;align-items:center;gap:.5rem;flex:none}
.rn-count{min-width:3.6em;text-align:center;font:600 .86rem/1 var(--font-body);font-variant-numeric:tabular-nums;color:var(--ink)}   /* one-at-a-time mode: which card of how many */
.rn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(255,255,255,.6);color:var(--ink);cursor:pointer;transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.rn[data-step="-1"] .arrow{transform:rotate(180deg)}
.rn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.rn:hover{background:var(--ink);border-color:var(--ink);color:#fff}}
html:not(.js) .route-bar,html:not(.js) .fr-hint{display:none}
.stack{display:grid;gap:clamp(1.5rem,3vh,2.5rem)}
.tour[hidden]{display:none}   /* filtered out of the slides by "help me choose" */
.tours.mode-stack .route-nav{display:none}   /* arrows are for the one-at-a-time mode */
/* phones / short screens (.is-tabs): the nine cards share one cell and only the open one shows
   (kept in layout so the scene motion still measures); the custom card sits under them */
.route-stage.is-tabs{row-gap:clamp(1.2rem,2.5vw,2rem)}
.route-stage.is-tabs > .tour{grid-area:1/1;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .35s ease,visibility 0s .35s}
.route-stage.is-tabs > .tour.is-active{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .45s ease,visibility 0s}
.route-stage.is-tabs > .tour--custom{grid-area:2/1;visibility:visible;opacity:1;pointer-events:auto}
@keyframes tour-in{from{translate:calc(var(--dir,1) * 34px) 0}to{translate:0 0}}
.tour{position:relative;display:grid;grid-template-columns:1.12fr 1fr;min-height:min(600px,calc(100svh - var(--hdr) - 104px));background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 1px 0 var(--line),0 40px 80px -50px rgba(16,52,58,.45);transform-origin:50% 0}
.tour::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:var(--dim,0);pointer-events:none;border-radius:inherit}
/* scrolling slides: each card pins a little lower than the one before; 8px steps so all eleven still fit a 720px screen */
@media (min-width:901px) and (min-height:720px){
  .tour{position:sticky;top:calc(var(--hdr) + 24px + var(--i,0) * 8px)}
}
.tour-body{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,4vw,3.6rem)}
.tour-kicker{font-size:.76rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;color:var(--pink-ink);margin-bottom:1.1rem}
.tour-kicker span{color:var(--muted)}
.tour-body h3{font-size:clamp(2rem,3.4vw,2.9rem);font-weight:300;font-variation-settings:"opsz" 144;margin-bottom:.4em}
.tour-body > p:not(.tour-kicker):not(.tour-price):not(.tour-where){color:var(--muted);max-width:44ch}
.tour-where{display:flex;align-items:center;gap:.45rem;margin:-.2rem 0 .9rem;font-size:.9rem;font-weight:500;color:var(--teal)}
.tour-where svg{width:17px;height:17px;flex:none}
.tour-spec{display:grid;grid-template-columns:1fr 1fr;margin:.4rem 0 1.6rem;border-top:1px solid var(--line);max-width:460px}
.tour-spec div{padding:.75rem 0;border-bottom:1px solid var(--line)}
.tour-spec div:nth-child(odd){padding-right:1rem}
.tour-spec div:nth-child(even){padding-left:1rem;border-left:1px solid var(--line)}
.tour-spec dt{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--pink-ink);margin-bottom:.2rem}
.tour-spec dd{margin:0;font-family:var(--font-display);font-size:1.08rem;color:var(--ink);font-variation-settings:"opsz" 40}
/* what you will see: one compact line on desktop, pills on phones. The pinned cards (and the picture beside the text)
   must keep the height they had, so on desktop the line's 22px is taken back from the spacing around it. */
.tour-tags{list-style:none;margin:-.35rem 0 .6rem;padding:0;display:flex;flex-wrap:wrap;gap:0 .9rem;font-size:.8rem;font-weight:500;line-height:1.5;color:var(--teal)}
.tour-tags li{display:inline-flex;align-items:center;gap:.42rem;white-space:nowrap}
.tour-tags li::before{content:"";flex:none;width:5px;height:5px;rotate:45deg;background:var(--pink)}
@media (min-width:901px){
  .tour[data-tour] .tour-kicker{margin-bottom:.8rem}
  .tour[data-tour] .tour-where{margin-bottom:.7rem}
  .tour[data-tour] .tour-spec{margin-bottom:1.25rem}
  .tour[data-tour] .tour-spec div{padding-block:.6rem}
}
@media (min-width:901px) and (max-width:1280px){.tour-tags li:nth-child(3){display:none}}   /* two fit one line there */
@media (max-width:900px){
  .tour-tags{margin:-.1rem 0 1rem;gap:.35rem}
  .tour-tags li{line-height:1;padding:.42rem .7rem;border-radius:999px;background:rgba(127,205,191,.22)}
  .tour-tags li::before{content:none}
}
/* a small icon before each spec label, and a three-dot meter after "Level" */
.tour-spec dt{display:flex;align-items:center;gap:.4rem}
.tour-spec dt::before{content:"";flex:none;width:14px;height:14px;background:var(--pink-ink);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.tour-spec div:nth-child(1) dt{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 15.5h15M5.5 15.5a4.5 4.5 0 0 1 9 0M10 6.5V4M4.6 9.3 3 7.7M15.4 9.3 17 7.7'/%3E%3C/svg%3E")}
.tour-spec div:nth-child(2) dt{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16v-3M10 16V9M16 16V4'/%3E%3C/svg%3E")}
.tour-spec div:nth-child(3) dt{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M10 6v4l2.6 1.6'/%3E%3C/svg%3E")}
.tour-spec div:nth-child(4) dt{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.7V4a1 1 0 0 1 1-1h6.7l6.3 6.3a1 1 0 0 1 0 1.4l-5.3 5.3a1 1 0 0 1-1.4 0z'/%3E%3Ccircle cx='7' cy='7' r='1.2'/%3E%3C/svg%3E")}
.tour[data-level] .tour-spec div:nth-child(2) dt::after{content:"";flex:none;width:30px;height:8px;margin-left:.2rem;--d2:var(--line-2);
  background:radial-gradient(circle 4px at 4px 50%,var(--pink) 96%,transparent),radial-gradient(circle 4px at 15px 50%,var(--d2) 96%,transparent),radial-gradient(circle 4px at 26px 50%,var(--line-2) 96%,transparent)}
.tour[data-level="some"] .tour-spec div:nth-child(2) dt::after{--d2:var(--pink)}
/* today's real time for the route's best light, after the label (app.js; same line, so the card keeps its height) */
.ts-today{margin-left:.15rem;font-weight:500;letter-spacing:.03em;text-transform:none;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:600px){.ts-today{display:none}}
/* where it is: the islands as a faint watermark in the corner of the card, with this route's dot (app.js builds it
   from the big map; desktop only, on phones it would sit under the title). The place line is a button back to the map. */
.tour-body{isolation:isolate}
.tour-loc{position:absolute;z-index:-1;top:10px;right:10px;width:clamp(170px,36%,210px);pointer-events:none;--land:#EDF4F2;--land-line:#D3E5E2}
.tour-loc svg{display:block;width:100%;height:auto;overflow:visible}
.tl-dot{fill:var(--pink);stroke:#fff;stroke-width:12}
.tl-halo{fill:var(--pink);opacity:.18}
@media (max-width:900px){.tour-loc{display:none}}
.tour-where button{all:unset;cursor:pointer;padding:.5rem 0;margin:-.5rem 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - .42rem)/100% 1px no-repeat;background-size:0 1px;transition:background-size .45s var(--expo)}   /* padding: a taller tap target without moving the line */
.tour-where button:hover,.tour-where button:focus-visible{background-size:100% 1px}
.tour-where button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
/* the heart: put this route on the shortlist (top corner of the card; it sits over the empty sea of the little map) */
.tour-fav{position:absolute;z-index:1;top:clamp(1rem,2vw,1.6rem);right:clamp(1rem,2vw,1.6rem);width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.85);color:var(--pink-ink);cursor:pointer;   /* 46: a pinned card settles to 95%, and the button must stay over 40px there */
  transition:background-color .3s var(--expo),border-color .3s var(--expo),scale 160ms var(--ease-out)}
.tour-fav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;transition:fill .3s}
.tour-fav[aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:#2A1410}
.tour-fav[aria-pressed="true"] svg{fill:currentColor}
.tour-fav:active{scale:.9}
@media (hover:hover) and (pointer:fine){.tour-fav[aria-pressed="false"]:hover{border-color:var(--pink);background:#fff}}
.tour-fav:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
/* the shortlist, in the line above the cards */
.route-hint .rs-ask{margin-left:.6rem;font-weight:600;color:var(--teal);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;white-space:nowrap}
.route-hint .rs-ask:hover{color:var(--pink-ink)}
.route-hint{min-width:0}
.route-hint.has-short{display:block;color:var(--ink)}   /* plain text flow: as flex items the names and the link each took a narrow column on phones */
.route-hint.has-short::before{content:none!important}
.route-rail .rr-short{width:40px;height:30px;margin-top:4px;border-top:1px dashed var(--line-2);border-radius:0 0 13px 13px;color:var(--pink-ink);font-size:.74rem}
.route-rail .rr-short[hidden]{display:none}
/* on to the next route (bottom corner of the card; in the flow on phones) */
.tour-next{position:absolute;right:clamp(1.3rem,2.6vw,2.3rem);bottom:clamp(.7rem,1.4vw,1.1rem);display:inline-flex;align-items:center;gap:.5rem;min-height:36px;padding:0;border:0;background:none;color:var(--muted);font:500 .86rem/1.2 var(--font-body);cursor:pointer;transition:color .25s}
.tour-next b{font-weight:600;color:var(--ink);transition:color .25s}
.tour-next .arrow{width:14px;rotate:90deg;transition:translate .45s var(--expo)}
@media (hover:hover) and (pointer:fine){.tour-next:hover b{color:var(--pink-ink)}.tour-next:hover .arrow{translate:0 3px}}
.route-stage.is-tabs .tour-next .arrow{rotate:none}
@media (max-width:900px){.tour-next{position:static;align-self:flex-end;margin-top:1.1rem}}
.tour-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem 1.4rem}
.tour-ask{font-size:.92rem;font-weight:600;color:var(--teal);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:color .2s}
.tour-ask:hover{color:var(--pink-ink)}
.tour--custom .tour-ask{color:var(--blush)}
.tour-meta{list-style:none;padding:0;margin:.4rem 0 1.4rem;display:flex;flex-wrap:wrap;gap:.5rem}
.tour-meta li{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--teal);border:1px solid rgba(31,110,115,.35);padding:.4rem .75rem;border-radius:999px}
.tour-price{font-family:var(--font-display);font-size:1.15rem;color:var(--ink);margin-bottom:1.6rem;font-variation-settings:"opsz" 48}
.tour-price span{color:var(--rose);margin:0 .3rem}
.tour-body .btn{align-self:flex-start}
.tour--custom{grid-template-columns:1.2fr .8fr;background:var(--ink);color:#fff;min-height:auto}
.tour--custom h3,.tour--custom p{color:#fff}
.tour--custom h3 em{color:var(--blush)}
.tour--custom .tour-body > p:not(.tour-kicker):not(.tour-price):not(.tour-where){color:rgba(255,255,255,.88)}   /* same specificity as the rule it overrides */
.tour--custom .tour-kicker{color:var(--blush)}
.own-ideas{display:flex;flex-wrap:wrap;gap:.4rem;margin:-.2rem 0 1.5rem}
.own-ideas button{min-height:38px;padding:0 .9rem;border-radius:999px;border:1px solid rgba(235,203,200,.45);background:transparent;color:#fff;font:500 .88rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.own-ideas button[aria-pressed="true"]{background:var(--blush);border-color:var(--blush);color:#2A1410}
.own-ideas button:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.own-ideas button[aria-pressed="false"]:hover{background:rgba(255,255,255,.12);border-color:var(--blush)}}
html:not(.js) .own-ideas button{pointer-events:none}
.custom-compass{display:grid;place-items:center;padding:2rem}
.cc-needle{transform-origin:100px 100px;transform:rotate(var(--turn,0deg));transition:transform 1.5s var(--expo)}
.custom-compass .cc-north{fill:rgba(232,120,138,.8);stroke:none}
.custom-compass text{font:600 13px var(--font-body);letter-spacing:.1em;fill:rgba(235,203,200,.75);stroke:none}
.custom-compass svg{width:min(260px,70%);fill:none;stroke:rgba(235,203,200,.5);stroke-width:1}
.custom-compass path{fill:rgba(235,203,200,.14)}
@media (max-width:900px){
  .tour,.tour--custom{grid-template-columns:1fr;min-height:0}
  .custom-compass{display:none}
}

/* The rail: while the slides are on screen (wide screens only) a slim pager sits in the right margin. It shows which
   route is pinned and jumps to any other; the name slides out on hover. Built by app.js, so nothing without JS. */
.route-rail{position:fixed;z-index:20;right:max(10px,calc((100vw - 1200px) / 2 - 76px));top:calc(50% + var(--hdr) / 2);translate:14px -50%;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:26px;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 18px 40px -22px rgba(16,52,58,.55),0 0 0 1px var(--line);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s,translate .5s var(--expo)}
.route-rail.is-on{opacity:1;visibility:visible;translate:0 -50%;transition:opacity .3s,translate .5s var(--expo)}
.route-rail button{position:relative;width:40px;height:26px;padding:0;border:0;border-radius:13px;background:transparent;color:var(--muted);font:600 .72rem/1 var(--font-body);font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .3s var(--expo),color .3s}
.route-rail button[aria-current="true"]{background:var(--ink);color:#fff}
.route-rail button.is-dim{display:none}
.route-rail button::after{content:attr(data-name);position:absolute;right:calc(100% + 12px);top:50%;translate:6px -50%;padding:.42rem .65rem;border-radius:9px;background:var(--ink);color:#fff;font:500 .8rem/1 var(--font-body);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,translate .3s var(--expo)}
.route-rail button:hover::after,.route-rail button:focus-visible::after{opacity:1;translate:0 -50%}
.route-rail button:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
@media (hover:hover) and (pointer:fine){.route-rail button:not([aria-current="true"]):hover{background:var(--paper-2);color:var(--ink)}}
@media (max-width:1100px){.route-rail{display:none}}

/* illustrated scenes (a photo replaces each once media/photos/tour-*.jpg exists) */
.scene{position:relative;overflow:hidden;min-height:320px;background:var(--sky)}
@media (max-width:900px){.scene{min-height:0;aspect-ratio:4/3}}
.scene-sun{position:absolute;left:var(--sx);top:var(--sy);width:var(--ss);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 42%,var(--sc1,#F6B7B2),var(--sc2,#E8888D));box-shadow:0 0 70px 18px var(--sg,rgba(246,183,178,.45))}
.scene-land{position:absolute;inset:0;width:100%;height:100%}
.scene-land path{fill:#1D5F66;opacity:.94}
.scene-waves{position:absolute;left:-6%;width:112%;max-width:none;bottom:0;height:33%}
.scene-waves .w1{fill:#2E8A8F}
.scene-waves .w2{fill:#174E54}
.scene-num{position:absolute;top:1.3rem;left:1.5rem;font-family:var(--font-display);font-style:italic;font-size:1rem;letter-spacing:.06em;color:var(--ink);z-index:1}
.scene.has-photo{background:var(--photo) center/cover no-repeat}
.scene.has-photo > :not(.scene-num){display:none}
.scene.has-photo .scene-num{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.scene--golden{--sky:linear-gradient(180deg,#EBCBC8 0%,#E4A9A4 45%,#D98B89 70%);--sx:66%;--sy:62%;--ss:34%}
.scene--grotto{--sky:linear-gradient(180deg,#F4E3E0 0%,#A9D7D5 50%,#5FB0B1 72%);--sx:26%;--sy:44%;--ss:24%;--sc1:#FFF1EA;--sc2:#F9D2C6;--sg:rgba(255,241,234,.6)}
.scene--valletta{--sky:linear-gradient(180deg,#EBCBC8 0%,#E2B0A6 45%,#C99A89 72%);--sx:34%;--sy:50%;--ss:28%;--sc1:#F7C3B6;--sc2:#E49B8E}
.scene--comino{--sky:linear-gradient(180deg,#FFF3F1 0%,#BFE6DF 48%,#8FD3C8 72%);--sx:72%;--sy:40%;--ss:22%;--sc1:#FFF6EF;--sc2:#FBDCCF;--sg:rgba(255,246,239,.7)}
.scene--coral{--sky:linear-gradient(180deg,#EBCBC8 0%,#E99AA2 45%,#D9788A 70%);--sx:30%;--sy:56%;--ss:28%;--sc1:#F8C1BC;--sc2:#E8788A}
.scene--marsascala{--sky:linear-gradient(180deg,#FBEFE6 0%,#F4CDB9 46%,#EAA791 72%);--sx:66%;--sy:57%;--ss:26%;--sc1:#FFF4E8;--sc2:#FAD3BD;--sg:rgba(255,240,226,.65)}
.scene--lapsi{--sky:linear-gradient(180deg,#F3D9CF 0%,#EDB3A4 45%,#DE8E84 72%);--sx:44%;--sy:58%;--ss:26%;--sc1:#FBCDBD;--sc2:#EE9A8E}
.scene--popeye{--sky:linear-gradient(180deg,#F1D2CC 0%,#EFA9A0 45%,#E0827E 72%);--sx:27%;--sy:57%;--ss:28%;--sc1:#F9C4B8;--sc2:#EA8C8A}
.scene--stjulians{--sky:linear-gradient(180deg,#FDF1EA 0%,#F7D3C4 46%,#F0B19F 72%);--sx:66%;--sy:27%;--ss:22%;--sc1:#FFF6EC;--sc2:#FBD9C6;--sg:rgba(255,244,232,.7)}
.scene--dwejra{--sky:linear-gradient(180deg,#E9D3E0 0%,#E6A6B4 46%,#DB8291 72%);--sx:54%;--sy:60%;--ss:27%;--sc1:#FBD3C6;--sc2:#EF8F94}

/* ═════════ 3b. RENTAL ═════════ */
.rental{background:var(--paper);padding-bottom:clamp(2rem,4vw,3rem)}
.rental + .film[hidden] + .guide,.rental + .guide{padding-top:clamp(2rem,4vw,3rem)}
.rental + .film[hidden] + .guide .guide-grid,.rental + .guide .guide-grid{border-top:1px solid var(--line);padding-top:clamp(2.5rem,5vw,4rem)}   /* film section: hidden by app.js, or left out by build.py when there are no clips */
.hub-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,5rem);align-items:center}
.rental-copy p:not(.eyebrow){color:var(--muted);max-width:48ch;font-size:1.06rem}
.rental-cta{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.4rem;margin-top:1.6rem}
/* how many paddlers */
.rent-size{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem .9rem;margin-top:1.5rem}
.rs-label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--pink-ink)}
.rs-stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;background:var(--white);padding:3px}
.rs-stepper button{width:40px;height:40px;border:0;border-radius:50%;background:var(--paper-2);color:var(--ink);font:500 1.25rem/1 var(--font-body);cursor:pointer;transition:background-color .25s,color .25s,transform 160ms var(--ease-out)}
.rs-stepper button:active{transform:scale(.92)}
.rs-stepper button:disabled{opacity:.4;cursor:default}
@media (hover:hover) and (pointer:fine){.rs-stepper button:not(:disabled):hover{background:var(--pink);color:#2A1410}}
.rs-stepper output{min-width:2.6rem;text-align:center;font-family:var(--font-display);font-size:1.35rem;color:var(--ink);font-variation-settings:"opsz" 40;font-variant-numeric:tabular-nums}
.rs-note{font-size:.92rem;color:var(--muted)}
/* paddled before? */
.rent-exp{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .9rem;margin-top:.8rem}
html:not(.js) .rent-exp,html:not(.js) .rent-advice{display:none}
.re-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.re-chips button{min-height:38px;padding:0 .9rem;border-radius:999px;border:1px solid rgba(31,110,115,.4);background:transparent;color:var(--teal);font:500 .88rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.re-chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.re-chips button:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.re-chips button[aria-pressed="false"]:hover{background:var(--white);border-color:var(--teal)}}
/* the guide's advice under the two cards */
.rental-copy p.rent-advice{display:flex;align-items:flex-end;gap:.6rem;margin:1rem 0 0;max-width:540px;font-size:.93rem;line-height:1.45;color:var(--text)}
.rent-advice .gc-av{width:32px;height:32px}
.rent-advice span{padding:.55rem .9rem .6rem;border-radius:16px 16px 16px 5px;background:var(--white);border:1px solid var(--line);box-shadow:0 18px 36px -30px rgba(16,52,58,.5)}
.rental-copy p.rent-where{display:flex;align-items:center;gap:.45rem;margin:.9rem 0 0;max-width:none;font-size:.86rem;color:var(--muted)}
.rent-where svg{flex:none;width:16px;height:16px;color:var(--teal)}
/* rental or guided tour: a two-way switch */
.rent-compare{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1rem;max-width:540px}
.rc{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);border-radius:20px;padding:1rem 1.15rem 1.1rem;background:rgba(255,255,255,.5);
  transition:background-color .35s var(--expo),border-color .35s var(--expo),box-shadow .5s var(--expo),translate .45s var(--expo)}
.rc.is-on{background:var(--white);border-color:rgba(232,120,138,.6);box-shadow:0 26px 50px -38px rgba(16,52,58,.5),inset 0 0 0 1px rgba(232,120,138,.35)}
.rc{position:relative}
.rc > span{display:block}
/* "My pick for you": on the card the guide would choose for your experience */
.rc > .rc-pick{position:absolute;top:-11px;right:14px;padding:.32rem .62rem;border-radius:999px;background:var(--ink);color:#fff;font:600 .68rem/1 var(--font-body);letter-spacing:.05em;scale:0;transition:scale .45s var(--expo)}
.rc.is-pick > .rc-pick{scale:1}
.rc-k{display:flex!important;align-items:center;gap:.5rem;min-height:26px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--pink-ink)}
.rc-k img{width:26px;height:26px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px var(--white)}
.rc-p{margin:.3rem 0 .4rem;color:var(--muted);font-size:.86rem}
.rc-p .price{font-family:var(--font-display);font-size:1.75rem;color:var(--ink);margin-right:.15rem;display:inline-block}
.rc-d{font-size:.9rem;line-height:1.4;color:var(--muted)}
/* what each one gives you, as ticks */
.rc > .rc-d{display:grid;gap:.3rem;margin-top:.15rem}
.rc-d > span{position:relative;padding-left:1.45rem}
.rc-d > span::before{content:"";position:absolute;left:0;top:.14em;width:1rem;height:1rem;border-radius:50%;
  background:rgba(127,205,191,.38) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231F6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 8.3l2.4 2.4 4.8-5.2'/%3E%3C/svg%3E") center/100% no-repeat;transition:background-color .35s}
.rc.is-on .rc-d > span{color:var(--text)}
.rc.is-on .rc-d > span::before{background-color:rgba(232,120,138,.3)}
.rc-u{margin-top:.5rem;font-size:.8rem;font-weight:600;color:var(--teal)}
.rc-u[hidden]{display:block;visibility:hidden}   /* keeps its line, so the cards (and the hub beside them) don't jump when a total appears */
.btn[hidden]{display:none}
@media (hover:hover) and (pointer:fine){.rc:not(.is-on):hover{background:rgba(255,255,255,.85);border-color:var(--line-2);translate:0 -2px}}
@media (max-width:440px){.rent-compare{grid-template-columns:1fr}}
/* hub: the €35 "sun" at the centre, the kit around it (same build as the IHERO Media hub) */
.hub{position:relative;aspect-ratio:1/1;width:100%;max-width:520px;margin-inline:auto}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-lines line{stroke:var(--lagoon);stroke-opacity:.55;stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke .3s,stroke-opacity .3s,stroke-width .3s}
.hub-orbit{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px dashed rgba(31,110,115,.35);pointer-events:none}
.hub-core{position:absolute;left:50%;top:50%;translate:calc(-50% - var(--px,0) * 5px) calc(-50% - var(--py,0) * 5px);width:37%;aspect-ratio:1/1;border-radius:50%;display:grid;place-content:center;text-align:center;overflow:hidden;padding-bottom:9.6%;
  background:radial-gradient(circle at 45% 34%,#FAD8CE 0%,#EFA9A7 58%,#E6929A 100%);
  box-shadow:0 0 0 12px rgba(232,120,138,.10),0 0 0 26px rgba(232,120,138,.05),0 34px 60px -30px rgba(16,52,58,.5);transition:box-shadow .5s var(--expo),translate .6s var(--expo)}
.hub-core::after{content:"";position:absolute;left:0;right:0;bottom:0;height:27%;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C25 6 45 26 75 16 S125 4 150 16 S185 26 200 16 V60 H0Z' fill='%232E8A8F' opacity='.85'/%3E%3Cpath d='M0 34 C30 24 55 44 90 34 S150 22 175 34 S195 40 200 36 V60 H0Z' fill='%231D5F66'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.hub:has(.hub-node:hover) .hub-core{box-shadow:0 0 0 14px rgba(232,120,138,.16),0 0 0 30px rgba(232,120,138,.08),0 34px 60px -30px rgba(16,52,58,.5)}
/* one little paddler on the core's water for each of you; the guide (cream hat) joins for a guided tour */
.hub-fleet{position:absolute;left:50%;bottom:24.5%;translate:-50% 0;width:82%;display:flex;justify-content:center;align-items:flex-end;gap:1px;pointer-events:none}
.hub-fleet svg{flex:0 1 17px;min-width:0;height:auto;overflow:visible}
.hub-core strong{font-family:var(--font-display);font-weight:300;font-size:clamp(2.2rem,4.2vw,3.3rem);line-height:1;color:var(--ink);font-variation-settings:"opsz" 144;margin:.15rem 0}
.hub-core small{font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;color:var(--ink)}
.hub-col{min-width:0}
.hub-node{position:absolute;left:var(--x);top:var(--y);translate:calc(-50% + var(--px,0) * var(--d,7px)) calc(-50% + var(--py,0) * var(--d,7px));width:clamp(100px,31%,168px);text-wrap:balance;text-align:center;
  font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;   /* each piece is a button: it opens in the strip under the hub */
  background:var(--white);border:1px solid var(--line);border-radius:18px;padding:.8rem .65rem .85rem;box-shadow:0 20px 40px -28px rgba(16,52,58,.5);
  transition:translate .45s var(--expo),box-shadow .45s var(--expo)}
.hn-ic{width:58px;height:58px;margin:0 auto .55rem;border-radius:18px;display:grid;place-items:center;background:var(--paper-2);color:var(--teal);transition:background-color .3s}
.hn-ic svg{width:38px;height:38px}
@media (hover:hover) and (pointer:fine){.hub-node:hover .hn-ic{background:var(--blush)}}
.hub:has(.hub-node:nth-child(1):hover) .hub-lines line:nth-child(1),.hub:has(.hub-node:nth-child(2):hover) .hub-lines line:nth-child(2),.hub:has(.hub-node:nth-child(3):hover) .hub-lines line:nth-child(3),.hub:has(.hub-node:nth-child(4):hover) .hub-lines line:nth-child(4),.hub:has(.hub-node:nth-child(5):hover) .hub-lines line:nth-child(5){stroke:var(--pink);stroke-opacity:1;stroke-width:2.6}   /* the hovered card lights its line */
.hub:has(.hub-node:nth-child(1)[aria-pressed="true"]) .hub-lines line:nth-child(1),.hub:has(.hub-node:nth-child(2)[aria-pressed="true"]) .hub-lines line:nth-child(2),.hub:has(.hub-node:nth-child(3)[aria-pressed="true"]) .hub-lines line:nth-child(3),.hub:has(.hub-node:nth-child(4)[aria-pressed="true"]) .hub-lines line:nth-child(4),.hub:has(.hub-node:nth-child(5)[aria-pressed="true"]) .hub-lines line:nth-child(5){stroke:var(--pink);stroke-opacity:1;stroke-width:2.6}   /* so does the open one */
.hub-node[aria-pressed="true"]{border-color:rgba(232,120,138,.75);box-shadow:0 0 0 3px rgba(232,120,138,.18),0 26px 44px -26px rgba(16,52,58,.55)}
.hub-node[aria-pressed="true"] .hn-ic{background:var(--blush)}
.hub-node:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.hub-node:active{scale:.97}
/* the strip under the hub: more about the open piece. One height for every state, so the hub (centred beside the
   copy) never moves when the text changes. */
.hub-detail{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5rem 1.2rem;max-width:520px;min-height:140px;margin:1.2rem auto 0;padding:.75rem 1.1rem .75rem 1.25rem;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.62);box-shadow:0 24px 50px -40px rgba(16,52,58,.5)}
.rental .hub-detail p.hd-text{margin:0;max-width:none;font-size:.95rem;line-height:1.45;color:var(--text)}
.hub-detail{grid-template-rows:auto 1fr}
.rental .hub-detail p.hd-kicker{grid-column:1/-1;margin:0 0 -.15rem;max-width:none;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--pink-ink)}
@media (max-width:480px){.rental .hub-detail p.hd-kicker{display:none}}   /* phones: the strip's fixed height has no room for it */
.hd-text strong{display:block;margin-bottom:.15rem;font-family:var(--font-display);font-weight:400;font-size:1.16rem;line-height:1.2;color:var(--ink);font-variation-settings:"opsz" 48}
.hd-extra[hidden]{display:none}
.hd-boards{display:flex;align-items:flex-end;gap:9px}
.hd-boards svg{display:block;width:26px;height:auto;filter:drop-shadow(0 6px 6px rgba(16,52,58,.18))}
.hd-boards svg:nth-child(2){width:28px}   /* the tallest is 90px: with the padding it stays under the strip's fixed height */
.hd-height{display:grid;justify-items:center;gap:.35rem}
.hd-height .rs-stepper output{min-width:4.7rem;font-size:1.12rem}
.hd-height .rs-stepper button{flex:none;width:42px;height:42px}   /* they measured 39.9px inside the strip's grid: under the 40px the audit asks for */
@media (max-width:480px){.hub-detail{padding:.7rem .9rem;gap:.5rem .8rem;min-height:142px}.rental .hub-detail p.hd-text{font-size:.9rem}.hd-more{display:none}}
/* ×N on each piece of kit once the group is bigger than one */
.hn-x{position:absolute;top:-9px;right:-9px;min-width:34px;height:26px;padding:0 .45rem;border-radius:13px;display:grid;place-items:center;background:var(--ink);color:#fff;font:600 .78rem/1 var(--font-body);font-style:normal;font-variant-numeric:tabular-nums;scale:0;transition:scale .45s var(--expo)}
.hub.is-multi .hn-x{scale:1}
/* one of you: the corner badge is a tick ("included") instead of a count */
.hub .hn-x{scale:1}
.hub:not(.is-multi) .hn-x,.hub .hn-x--tick{min-width:26px;width:26px;padding:0;background:var(--teal);font-size:.74rem}
/* the guide joins the kit when "Guided tour" is picked */
.hub-guide{position:absolute;left:50%;top:81.5%;translate:-50% -50%;display:grid;justify-items:center;gap:.3rem;opacity:0;scale:.5;pointer-events:none;transition:opacity .4s ease,scale .55s var(--expo)}
.hub-guide img{width:54px;height:54px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--white),0 14px 24px -12px rgba(16,52,58,.6)}
.hub-guide span{font-size:.66rem;font-weight:600;letter-spacing:.04em;white-space:nowrap;color:#fff;background:var(--ink);border-radius:999px;padding:.28rem .55rem}
.hub.is-tour .hub-guide{opacity:1;scale:1}
@media (max-width:480px){.hub-core{padding-bottom:11%}.hub-core strong{font-size:1.85rem}.hub-core small{line-height:1.2}.hub-fleet svg{flex-basis:12px}.hub-guide{z-index:2}.hub-guide img{width:44px;height:44px}.hub-guide span{display:none}.hub-core small{letter-spacing:.12em;font-size:.6rem}.hn-x{top:-7px;right:-5px;min-width:28px;height:22px;font-size:.7rem}}
.hub-node b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.02rem;line-height:1.2;color:var(--ink);font-variation-settings:"opsz" 48}
.hub-node small{display:block;margin-top:.25rem;font-size:.76rem;line-height:1.35;color:var(--muted);text-wrap:balance}
.hub-node:nth-child(2){--d:10px}.hub-node:nth-child(3){--d:6px}.hub-node:nth-child(4){--d:11px}.hub-node:nth-child(5){--d:8px}
@media (hover:hover) and (pointer:fine){.hub-node:hover{translate:calc(-50% + var(--px,0) * var(--d,7px)) calc(-50% + var(--py,0) * var(--d,7px) - 4px);box-shadow:0 26px 44px -26px rgba(16,52,58,.55)}}
@media (max-width:980px){.hub-grid{grid-template-columns:1fr}.hub{max-width:460px}}
@media (max-width:480px){.hub-node small{display:none}.hub-node{padding:.6rem .4rem;border-radius:14px}.hn-ic{width:44px;height:44px;border-radius:14px;margin-bottom:.35rem}.hn-ic svg{width:30px;height:30px}.hub-node b{font-size:.9rem}}

/* ═════════ 4. FILM (dark) ═════════ */
.film{background:var(--ink);color:#fff}
.film h2{color:#fff}
.film h2 em{color:var(--blush)}
.film .section-sub{color:rgba(255,255,255,.75)}
.film-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.clip{margin:0;border-radius:var(--r);overflow:hidden;background:linear-gradient(160deg,#25545B,#134A50);aspect-ratio:9/13;position:relative;cursor:pointer}
.clip video{width:100%;height:100%;object-fit:cover}
.clip figcaption{position:absolute;left:1.1rem;bottom:1rem;font-size:.85rem;letter-spacing:.04em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.clip::before{content:"";position:absolute;inset:0;z-index:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='31' fill='none' stroke='white' stroke-opacity='.6'/%3E%3Cpath d='M26 21v22l18-11z' fill='white'/%3E%3C/svg%3E") center/64px no-repeat;pointer-events:none;transition:opacity .3s}
.clip.playing::before{opacity:0}
@media (max-width:820px){.film-grid{grid-template-columns:1fr}.clip{aspect-ratio:16/10}}

/* ═════════ 4b. GUIDE ═════════ */
.guide{background:var(--paper);overflow-x:clip}   /* the shuffled photo may leave the page edge on phones */
.guide-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(3rem,6vw,5.5rem);align-items:center}
/* photo stack: two real photos; the one behind peeks out, a click (or the button) shuffles them (app.js) */
.guide-visual{position:relative;isolation:isolate;width:100%;max-width:510px;justify-self:center;--peek-x:-8%;--peek-r:-7deg}
.guide-visual::before{content:"";position:absolute;z-index:-1;width:92%;aspect-ratio:1;right:-20%;top:-11%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,#FFF4EA 0,rgba(250,214,196,.85) 42%,rgba(250,214,196,.4) 60%,rgba(250,214,196,0) 72%)}
.guide-stack{position:relative;aspect-ratio:9/11;cursor:pointer;perspective:1100px}
.gcard{position:absolute;inset:0;margin:0;border-radius:var(--r-lg);overflow:hidden;z-index:1;
  background:linear-gradient(170deg,var(--blush) 0%,var(--rose) 55%,var(--lagoon) 100%);box-shadow:0 44px 70px -48px rgba(16,52,58,.7);
  translate:var(--peek-x) 3%;rotate:var(--peek-r);scale:.95;filter:saturate(.85) brightness(.97);
  transition:translate .7s var(--expo),rotate .7s var(--expo),scale .7s var(--expo),filter .5s,transform .3s var(--ease-out)}
.gcard.is-front{z-index:2;translate:0 0;rotate:0deg;scale:1;filter:none;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}   /* --rx/--ry: pointer tilt (motion.js) */
.gcard img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;translate:0 calc(var(--drift,0) * 1%)}   /* motion.js scrubs --drift */
.gcard figcaption{position:absolute;left:14px;bottom:14px;max-width:calc(100% - 118px);padding:.5rem .85rem;border-radius:999px;background:rgba(255,255,255,.9);
  font-size:.8rem;font-weight:600;line-height:1.2;white-space:nowrap;color:var(--ink);opacity:0;transition:opacity .4s}
.gcard.is-front figcaption{opacity:1;transition-delay:.3s}
/* small tags on what is in the front photo: a dot, and its label on hover / focus / tap */
.gtag{position:absolute;left:var(--x);top:var(--y);z-index:2;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .4s}
.gcard.is-front .gtag{opacity:1;pointer-events:auto;transition-delay:.4s}
.gtag i{position:relative;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.35),0 4px 10px rgba(16,52,58,.4);transition:scale .35s var(--expo),background-color .3s}
.gtag i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid #fff;opacity:0}
.gtag span{position:absolute;left:calc(50% + 16px);top:50%;translate:-6px -50%;padding:.42rem .7rem;border-radius:999px;background:rgba(255,255,255,.95);color:var(--ink);font:600 .78rem/1 var(--font-body);white-space:nowrap;
  box-shadow:0 10px 22px -10px rgba(16,52,58,.6);opacity:0;pointer-events:none;transition:opacity .3s,translate .4s var(--expo)}
.gtag--left span{left:auto;right:calc(50% + 16px);translate:6px -50%}
.gtag--up span{left:50%;top:auto;bottom:calc(50% + 16px);translate:-50% 6px}
.gtag--up:hover span,.gtag--up:focus-visible span,.gtag--up.is-open span{translate:-50% 0}
.gtag:hover span,.gtag:focus-visible span,.gtag.is-open span{opacity:1;translate:0 -50%}
.gtag:hover i,.gtag:focus-visible i,.gtag.is-open i{scale:1.25;background:var(--pink)}
.gtag:focus-visible{outline:none}
.gtag:focus-visible i{box-shadow:0 0 0 4px rgba(255,255,255,.9),0 4px 10px rgba(16,52,58,.4)}
.gcard.to-back{animation:gToBack .8s both}
@keyframes gToBack{
  0%{translate:0 0;rotate:0deg;scale:1;z-index:3;animation-timing-function:cubic-bezier(.5,0,.3,1)}
  46%{translate:-58% 2%;rotate:-13deg;scale:.96;z-index:3}   /* out to the left, where there is page margin, never over the text */
  47%{z-index:1;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  100%{translate:var(--peek-x) 3%;rotate:var(--peek-r);scale:.95;z-index:1}
}
@media (hover:hover) and (pointer:fine){.guide-stack:hover .gcard:not(.is-front):not(.to-back){translate:calc(var(--peek-x) - 3%) 3%;rotate:calc(var(--peek-r) - 2deg)}}
.guide-swap{position:absolute;right:14px;bottom:14px;z-index:5;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;border:0;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--ink);font:600 .82rem/1 var(--font-body);letter-spacing:.04em;cursor:pointer;box-shadow:0 14px 26px -14px rgba(16,52,58,.6);transition:background-color .25s,transform 160ms var(--ease-out)}
.guide-swap svg{width:18px;height:18px;transition:transform .5s var(--expo)}
.guide-swap:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.guide-swap:hover{background:var(--white)}.guide-swap:hover svg{transform:rotate(180deg)}}
/* greeting bubble; changes with the language picked in the "I speak" card */
.guide-hello{position:absolute;right:-34px;top:26px;z-index:6;margin:0;max-width:270px;padding:.7rem 1rem .75rem;border-radius:18px 18px 18px 5px;background:var(--white);
  font-family:var(--font-display);font-size:1.02rem;line-height:1.25;color:var(--ink);font-variation-settings:"opsz" 40;box-shadow:0 22px 40px -22px rgba(16,52,58,.6),0 0 0 1px var(--line);transform-origin:0 100%}
.guide-hello.pop{animation:gHello .5s var(--expo)}
@keyframes gHello{from{scale:.7;opacity:0}to{scale:1;opacity:1}}
/* the guide's own words, as a note with a signature */
/* two facts as small pills under the heading */
.guide-meta{list-style:none;margin:.2rem 0 1.3rem;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.guide-meta li{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .85rem .42rem .6rem;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.55);font-size:.88rem;font-weight:500;color:var(--ink)}
.guide-meta svg{width:18px;height:18px;color:var(--teal);flex:none}
/* a small chat with the guide: header (who, live status, language), a window of fixed height where the last
   exchange sits at the bottom and older lines slide up out of view, then the question chips */
.guide-chat{max-width:640px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.72);box-shadow:0 34px 60px -46px rgba(16,52,58,.55);overflow:hidden}
.gchat-head{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem .8rem;padding:.8rem 1rem;background:var(--white);border-bottom:1px solid var(--line)}
.gchat-head .gc-av{width:44px;height:44px}
.gchat-who{flex:1 1 150px;min-width:0;margin:0;display:grid;gap:.1rem}
.gchat-who strong{font-family:var(--font-display);font-weight:400;font-size:1.15rem;line-height:1.2;color:var(--ink);font-variation-settings:"opsz" 40}
.gchat-status{display:flex;align-items:baseline;gap:.4rem;font-size:.78rem;line-height:1.35;color:var(--muted)}
.gchat-status i{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:#1DA851;translate:0 -1px}
.gchat-status i::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid #1DA851;opacity:0}
.gchat-body{position:relative;height:14.6rem;padding:0 1rem .9rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.55rem;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 1.6rem);mask:linear-gradient(180deg,transparent 0,#000 1.6rem)}
.gchat-body > *{flex:none}
.gchat-sys{align-self:center;margin:0;padding:.28rem .7rem;border-radius:999px;background:rgba(16,52,58,.06);font-size:.76rem;line-height:1.3;color:var(--muted);text-align:center}
.gc-line{display:flex;align-items:flex-end;gap:.6rem}
.gc-line--me{justify-content:flex-end}
.gc-av{flex:none;width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--white),0 8px 14px -8px rgba(16,52,58,.6)}
.gc-bubble{margin:0;max-width:calc(100% - 46px);padding:.7rem 1rem .75rem;border-radius:18px 18px 18px 6px;background:var(--white);border:1px solid var(--line);color:var(--text);font-size:.98rem;line-height:1.5;box-shadow:0 18px 36px -30px rgba(16,52,58,.5)}
.gc-bubble--lead{font-family:var(--font-display);font-weight:300;font-size:clamp(1.05rem,1.3vw,1.18rem);line-height:1.42;color:var(--ink);font-variation-settings:"opsz" 48}
.gc-line--me .gc-bubble{max-width:82%;background:var(--blush);border-color:transparent;border-radius:18px 18px 6px 18px;color:var(--ink);box-shadow:none}
.gc-thread{display:grid;gap:.55rem;align-content:start}
.gc-thread.pop .gc-line{animation:sd-pop .45s var(--expo) both}
.gc-line.pop{animation:sd-pop .45s var(--expo) both}
/* "typing": three dots in a guide bubble while the answer is on its way */
.gc-typing{display:inline-flex;align-items:center;gap:5px;min-height:1.5em}
.gc-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.45}
.gc-asks{display:flex;flex-wrap:wrap;gap:.4rem;padding:.8rem 1rem .95rem;border-top:1px solid var(--line);background:rgba(255,255,255,.6)}
.gc-asks button{min-height:38px;padding:0 .9rem;border-radius:999px;border:1px solid rgba(31,110,115,.4);background:transparent;color:var(--teal);font:500 .88rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.gc-asks button[aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:#2A1410}
.gc-asks button:active{transform:scale(.96)}
/* a question that has been asked keeps a tick (same badge as the FAQ topics) */
.gc-asks button{position:relative}
.gc-asks button::after{content:"";position:absolute;top:-5px;right:-3px;width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px var(--white);scale:0;transition:scale .4s var(--expo);
  background:var(--lagoon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.3l2.2 2.2 4.3-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
.gc-asks button.is-seen::after{scale:1}
/* your bubble: sent / read ticks, blue once the answer is there */
.gc-thread .gc-line--me .gc-bubble::after{content:"✓✓";margin-left:.5rem;font-size:.68rem;letter-spacing:-.14em;color:rgba(16,52,58,.38);transition:color .35s}
.gc-thread.is-read .gc-line--me .gc-bubble::after{color:#2B9FD9}
@media (hover:hover) and (pointer:fine){.gc-asks button[aria-pressed="false"]:hover{background:var(--white);border-color:var(--teal)}}
html:not(.js) .gc-asks,html:not(.js) .gchat-head .gf-chips{display:none}
html:not(.js) .gchat-body{height:auto;-webkit-mask:none;mask:none;padding-top:.9rem}
/* language buttons (in the chat header) */
.gf-chips{display:flex;flex-wrap:wrap;gap:.3rem}
.gf-chips button{min-height:36px;padding:0 .62rem;border-radius:999px;border:1px solid rgba(31,110,115,.4);background:transparent;color:var(--teal);font:500 .88rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.gf-chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.gf-chips button:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.gf-chips button[aria-pressed="false"]:hover{background:var(--paper-2);border-color:var(--teal)}}
.guide .nw{white-space:nowrap}   /* the heading only ever breaks before "That's me." */
@media (max-width:359px){.guide .nw{white-space:normal}}
.guide-cta{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.4rem;margin-top:1.7rem}
@media (max-width:820px){
  .guide-grid{grid-template-columns:1fr;gap:2.4rem}
  .guide-visual{max-width:360px;justify-self:start;margin-left:22px;--peek-x:-5%;--peek-r:-5deg}
  .guide-stack{aspect-ratio:1/1.16}
  .guide-hello{right:-18px;top:18px;font-size:.95rem;max-width:180px}
}
@media (max-width:480px){.guide-visual{max-width:calc(100% - 52px)}.gchat-body{height:19.5rem}.gchat-head .gf-chips{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.gcard,.gcard figcaption{transition:none}.gcard.to-back,.guide-hello.pop,.gc-line.pop{animation:none}}

/* reviews */
.reviews{background:var(--paper-2)}
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.4rem}
.review{margin:0;background:var(--white);border-radius:var(--r);padding:2rem;border:1px solid var(--line);display:flex;flex-direction:column;gap:1rem}
.stars{color:var(--pink);letter-spacing:.2em}
.review blockquote{margin:0;font-family:var(--font-display);font-weight:300;font-size:1.3rem;line-height:1.4;color:var(--ink);flex:1}
.review figcaption{display:flex;flex-direction:column;font-size:.9rem}
.review figcaption strong{color:var(--ink)}
.review figcaption span{color:var(--muted)}

/* ═════════ 5. HOW — a paddle route drawn by scroll ═════════ */
.how{background:var(--paper-2);overflow-x:clip}   /* the rider is centred on the line, so at the last step it reaches 42px past the route: 4px of side scroll at 821-1180px wide */
.route{position:relative;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.route-line{position:absolute;left:0;right:0;top:-4px;width:100%;height:64px;overflow:visible;pointer-events:none}
.route-line path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.route-base{stroke:var(--line-2);stroke-dasharray:3 7}
.route-draw{stroke:var(--pink);stroke-width:2.2}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3.5rem);position:relative}
.step-num{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--paper);border:1px solid var(--line-2);color:var(--ink);font:italic 300 1.35rem var(--font-display);margin-bottom:1.1rem;transition:background-color .5s var(--expo),color .5s var(--expo),border-color .5s var(--expo),transform .5s var(--expo)}
.step-num.is-on{background:var(--pink);border-color:var(--pink);color:#2A1410;transform:scale(1.06)}
/* a step you have tried: a small tick on its number (app.js) */
.step-num::after{content:"";position:absolute;right:-5px;bottom:-5px;width:23px;height:23px;border-radius:50%;scale:0;transition:scale .5s var(--expo);
  background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.3 8.4l2.4 2.4 5-5.4'/%3E%3C/svg%3E") center/100% no-repeat;box-shadow:0 0 0 2.5px var(--paper-2)}
.step-num.is-done::after{scale:1}
@media (hover:hover) and (pointer:fine){.step-card:hover{background:var(--white);border-color:rgba(232,120,138,.4);box-shadow:0 30px 60px -46px rgba(16,52,58,.55)}.step-card:hover .step-ic{background:var(--pink);color:#2A1410;rotate:-6deg}}
.step-time{display:inline-block;margin:0 0 .9rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);background:var(--white);border:1px solid rgba(31,110,115,.3);border-radius:999px;padding:.4rem .75rem}
.steps h3{font-size:1.45rem}
.steps p{color:var(--muted);font-size:1rem;max-width:34ch}
/* each step is a card with a small live demo */
.steps > li{display:flex;flex-direction:column}
.step-card{flex:1;display:flex;flex-direction:column;background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:22px;padding:1.2rem 1.3rem 1.3rem;transition:background-color .5s var(--expo),box-shadow .6s var(--expo),border-color .5s var(--expo)}
.step-num.is-on ~ .step-card{background:var(--white);border-color:rgba(232,120,138,.4);box-shadow:0 30px 60px -46px rgba(16,52,58,.55)}
.step-card{position:relative}
.step-card .step-time{align-self:flex-start}
/* a small icon in the corner of each step card; it turns pink with its buoy */
.step-ic{position:absolute;top:1.05rem;right:1.1rem;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--paper-2);color:var(--teal);transition:background-color .5s var(--expo),color .5s var(--expo),rotate .6s var(--expo)}
.step-ic svg{width:21px;height:21px}
.step-num.is-on ~ .step-card .step-ic{background:var(--pink);color:#2A1410;rotate:-6deg}
.step-demo{margin:auto 0 0;padding-top:1rem;border-top:1px dashed var(--line-2)}
.step-card > p{margin-bottom:1.1rem}
.sd-label{font-size:.66rem!important;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--pink-ink)!important;margin:0 0 .6rem!important}
.sd-days{display:flex;gap:.35rem}
.sd-days button{flex:1;min-width:0;display:grid;justify-items:center;gap:.05rem;padding:.45rem 0 .5rem;border-radius:14px;border:1px solid var(--line-2);background:var(--white);color:var(--muted);font:500 .7rem/1.2 var(--font-body);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
  transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.sd-days button b{font:400 1.2rem/1.1 var(--font-display);color:var(--ink);letter-spacing:0;font-variation-settings:"opsz" 40;transition:color .3s}
.sd-days button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:rgba(255,255,255,.8)}
.sd-days button[aria-pressed="true"] b{color:#fff}
.sd-days button:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){.sd-days button[aria-pressed="false"]:hover{border-color:var(--teal);background:var(--paper)}}
.sd-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.sd-light{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:.6rem;border:1px solid var(--line-2);border-radius:999px;padding:3px;background:var(--white)}
.sd-light button{min-height:36px;padding:0 .5rem;border:0;border-radius:999px;background:transparent;color:var(--teal);font:600 .82rem/1 var(--font-body);cursor:pointer;transition:background-color .3s var(--expo),color .3s var(--expo)}
.sd-light small{margin-left:.2rem;font-size:.78rem;font-weight:500;opacity:.8;font-variant-numeric:tabular-nums}
.sd-light button{display:inline-flex;align-items:center;justify-content:center;gap:.3rem}
.sd-light .ri-g{width:15px;height:15px}
/* how many of you: a small stepper */
.sd-size{display:inline-flex;align-items:center;gap:.15rem;border:1px solid var(--line-2);border-radius:999px;padding:3px;background:var(--white)}
.sd-size button{width:36px;height:36px;border:0;border-radius:50%;background:var(--paper-2);color:var(--ink);font:500 1.05rem/1 var(--font-body);cursor:pointer;transition:background-color .25s,transform 160ms var(--ease-out)}
.sd-size button{position:relative}.sd-size button::after{content:"";position:absolute;inset:-4px}   /* 36px to look at, 44px to tap */
.sd-size button:active{transform:scale(.92)}
.sd-size button:disabled{opacity:.4;cursor:default}
.sd-size output{min-width:1.5rem;text-align:center;font:400 1.1rem/1 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.sd-size-l{padding:0 .6rem 0 .25rem;font-size:.82rem;color:var(--muted)}
.sd-light button[aria-pressed="true"]{background:var(--pink);color:#2A1410}
.sd-go{display:inline-flex;align-items:center;gap:.5rem;min-height:34px;padding:0;border:0;background:none;color:var(--teal);font:600 .88rem/1 var(--font-body);cursor:pointer}
.sd-go .arrow{width:14px;transform:rotate(90deg)}
@media (hover:hover) and (pointer:fine){.sd-go:hover{color:var(--pink-ink)}}
.sd-msg{margin:0 0 .5rem!important;max-width:none!important;font-size:.9rem!important;line-height:1.4;color:var(--ink)!important}
.sd-msg--me{display:flex;justify-content:flex-end}
.sd-msg--me span{max-width:88%;background:var(--blush);border-radius:16px 16px 5px 16px;padding:.55rem .85rem}
.sd-msg--guide{display:flex;align-items:flex-end;gap:.5rem;margin-bottom:0!important}
.sd-msg--first{margin-bottom:.35rem!important}
.sd-msg--first img{visibility:hidden}   /* two lines from the guide: the avatar sits by the last one */
.sd-msg[hidden]{display:none}
.sd-msg--guide img{flex:none;width:30px;height:30px;border-radius:50%;object-fit:cover}
.sd-msg--guide span{max-width:82%;background:var(--white);border:1px solid var(--line);border-radius:16px 16px 16px 5px;padding:.55rem .85rem}
.sd-chat.pop .sd-msg span{animation:sd-pop .45s var(--expo) both}
.sd-chat.pop .sd-msg--guide span{animation-delay:.35s}
.sd-msg span.pop{animation:sd-pop .4s var(--expo) both}
/* the chat keeps one height whatever is said (two lines for you, one + two for the guide), bubbles sit at the bottom */
.sd-log{display:flex;flex-direction:column;justify-content:flex-end;min-height:172px}
.sd-pick{margin:.7rem 0 0!important;max-width:none!important;padding:.5rem .75rem;border-radius:12px;background:var(--paper-2);font-size:.84rem!important;line-height:1.35;color:var(--ink)!important;font-variant-numeric:tabular-nums}
.sd-pick[hidden]{display:none}
.sd-pick b{font-weight:600}
/* sent / read ticks on your bubble: they turn blue when the reply arrives */
.sd-msg--me span::after{content:"✓✓";margin-left:.5rem;font-size:.68rem;letter-spacing:-.14em;color:rgba(16,52,58,.38);transition:color .35s}
.sd-chat.is-read .sd-msg--me span::after{color:#2B9FD9}
/* three things to ask */
.sd-asks{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.sd-asks[hidden]{display:none}
.sd-asks button{min-height:34px;padding:0 .75rem;border-radius:999px;border:1px dashed rgba(31,110,115,.55);background:transparent;color:var(--teal);font:500 .82rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.sd-asks button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);border-style:solid;color:#fff}
.sd-asks button:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.sd-asks button[aria-pressed="false"]:hover{background:rgba(255,255,255,.8);border-style:solid}}
@keyframes sd-pop{from{opacity:0;scale:.8;translate:0 6px}to{opacity:1;scale:1;translate:0 0}}
/* step 3: the day that was picked, then the kit; an item says what it is on hover / tap */
.sd-when{margin:0 0 .65rem!important;max-width:none!important;font:400 1.02rem/1.3 var(--font-display)!important;color:var(--ink)!important;font-variation-settings:"opsz" 40}
.sd-when[hidden],.sd-kit-note[hidden]{display:none}
.sd-kit{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding-left:0}
.sd-kit li{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .7rem .38rem .42rem;border-radius:999px;background:var(--white);border:1px solid var(--line);font-size:.86rem;color:var(--ink);transition:border-color .3s,box-shadow .3s}
.sd-kit li.is-open{border-color:var(--pink);box-shadow:0 0 0 3px rgba(232,120,138,.18)}
.sd-kit button{all:unset;cursor:pointer;padding:.55rem 0;margin:-.55rem 0}   /* taller tap target, same chip */
.sd-kit button::after{content:"";position:absolute;inset:-3px;border-radius:999px}   /* the whole chip (a little more) is the button */
.sd-kit button:focus-visible::after{outline:2px solid var(--teal);outline-offset:1px}
.sd-kit-note{margin:.6rem 0 0!important;max-width:none!important;min-height:1.4em;font-size:.86rem!important;line-height:1.4;color:var(--muted)!important}
.sd-kit-note.pop{animation:sd-pop .35s var(--expo) both}
.sd-kit li::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--paper-2) center/11px no-repeat;transition:background-color .45s var(--expo)}
/* the kit ticks itself off once buoy 3 lights up */
.step-num.is-on ~ .step-card .sd-kit li::before{background-color:var(--pink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%232A1410' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.4l2.3 2.3 4.7-5'/%3E%3C/svg%3E")}
.sd-kit li:nth-child(2)::before{transition-delay:.12s}.sd-kit li:nth-child(3)::before{transition-delay:.24s}.sd-kit li:nth-child(4)::before{transition-delay:.36s}.sd-kit li:nth-child(5)::before{transition-delay:.48s}.sd-kit li:nth-child(6)::before{transition-delay:.6s}
/* the paddler on the route line */
.route-rider{position:absolute;left:1.67%;top:28px;width:84px;margin:-58px 0 0 -42px;pointer-events:none;z-index:2}
/* a sun at the end of the route, behind where the paddler stops; it lights up when the line is fully drawn */
.route-end{position:absolute;left:calc(98.33% + 6px);top:-22px;width:40px;height:40px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 50% 42%,#FBD0BF,#EE9A96 62%,#E4838A);opacity:.28;scale:.7;transition:opacity .8s ease,scale .9s var(--expo),box-shadow .9s ease}
.route-end.is-on{opacity:1;scale:1;box-shadow:0 0 0 10px rgba(238,154,150,.16),0 0 0 22px rgba(238,154,150,.08)}
@media (max-width:820px){.route-end{display:none}}
.route-rider svg{display:block;width:100%;height:auto;overflow:visible}
/* what the rider says once all three steps have been tried */
.rr-say{position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);padding:.4rem .7rem .45rem;border-radius:13px 13px 13px 4px;background:var(--white);color:var(--ink);font:400 .86rem/1.2 var(--font-display);white-space:nowrap;box-shadow:0 12px 24px -12px rgba(16,52,58,.55),0 0 0 1px var(--line)}
.rr-say[hidden]{display:none}
.sd-go.is-ready{color:var(--pink-ink)}
@media (max-width:820px){.route-rider{display:none}}
@media (max-width:820px){
  .route-line{display:none}
  .steps{grid-template-columns:1fr;gap:1.6rem;padding-left:0;border-left:0}
  .step-num{margin-bottom:1rem}
}
.included{background:var(--white);border-radius:var(--r-lg);padding:clamp(1.8rem,4vw,2.8rem);border:1px solid var(--line);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);gap:clamp(2rem,5vw,4rem);align-items:center;box-shadow:0 34px 70px -52px rgba(16,52,58,.5)}
.included-art{width:110px;height:59px;margin:0 0 1rem -.3rem}
.included h3{margin:0 0 .5em}
.included-head p{color:var(--muted);font-size:1rem;margin-bottom:1.5rem;max-width:32ch}
.included-head p strong{color:var(--ink);font-weight:600}
.inc-total{color:var(--ink);font-weight:600;white-space:nowrap}
.included-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem}
.included-list li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:.9rem;align-items:center;font-size:.98rem;color:var(--text);line-height:1.45}
.included-list[hidden]{display:none}
.included-list .inc-note{grid-column:1/-1;display:block;color:var(--muted);font-size:.94rem;padding-top:.2rem}
.inc-tabs{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;background:var(--paper);margin-bottom:1.2rem}
.inc-tabs button{min-height:38px;padding:0 1.1rem;border:0;border-radius:999px;background:transparent;color:var(--teal);font:600 .88rem/1 var(--font-body);cursor:pointer;transition:background-color .3s var(--expo),color .3s var(--expo)}
.inc-tabs button[aria-pressed="true"]{background:var(--ink);color:#fff}
.inc-tabs button i{margin-left:.3rem;font-style:normal;font-size:.74rem;font-weight:600;opacity:.65;font-variant-numeric:tabular-nums}
.included-body.swap .included-list:not([hidden]) li{animation:sd-pop .45s var(--expo) both}
.included-body.swap .included-list li:nth-child(2){animation-delay:.05s}.included-body.swap .included-list li:nth-child(3){animation-delay:.1s}.included-body.swap .included-list li:nth-child(4){animation-delay:.15s}.included-body.swap .included-list li:nth-child(5){animation-delay:.2s}.included-body.swap .included-list li:nth-child(6){animation-delay:.25s}
.inc-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--paper-2);color:var(--teal)}
.inc-ic svg{width:21px;height:21px}
.inc-ic{transition:background-color .35s var(--expo),color .35s var(--expo),scale .45s var(--expo)}
@media (hover:hover) and (pointer:fine){.included-list li:hover .inc-ic{background:var(--blush);scale:1.06}}
/* "you bring": each one can be ticked off as it goes in the bag */
.inc-check{all:unset;box-sizing:border-box;display:grid;grid-template-columns:42px minmax(0,1fr);gap:.9rem;align-items:center;width:100%;cursor:pointer;border-radius:14px}
.included-list li:has(> .inc-check){display:block}
.inc-check .inc-ic{position:relative}
.inc-check .inc-ic::after{content:"";position:absolute;right:-5px;bottom:-5px;width:19px;height:19px;border-radius:50%;scale:0;transition:scale .45s var(--expo);
  background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.3 8.4l2.4 2.4 5-5.4'/%3E%3C/svg%3E") center/100% no-repeat;box-shadow:0 0 0 2px var(--white)}
.inc-check[aria-pressed="true"] .inc-ic{background:rgba(127,205,191,.4)}
.inc-check[aria-pressed="true"] .inc-ic::after{scale:1}
.inc-check[aria-pressed="true"] > span:last-child{color:var(--muted)}
.inc-check:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.inc-check:active .inc-ic{scale:.94}
.included-list .inc-prog{color:var(--teal);font-weight:600;padding-top:0}
.inc-prog[hidden]{display:none}
@media (max-width:980px){.included{grid-template-columns:1fr}}
@media (max-width:560px){.included-list{grid-template-columns:1fr}}

/* ═════════ 6. BOOKING — golden hour ═════════ */
.book{background:linear-gradient(180deg,var(--paper-2) 0%,var(--gold) 22%,var(--gold) 100%)}
.book-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2.5rem,6vw,5rem);align-items:start}
.book-copy{position:relative}
@media (min-width:901px) and (min-height:1040px){.book-copy{position:sticky;top:calc(var(--hdr) + 18px)}}   /* only when the whole column (about 940px with a two-line bubble, since the deposit row) fits on screen under the header; measure it again if the column grows */
.book-copy > p:not(.eyebrow){color:var(--muted);font-size:1.06rem}
/* the guide's running comment */
.book-helper{display:flex;align-items:flex-end;gap:.6rem;margin-top:1.1rem}
.book-helper .gc-bubble{max-width:none;min-height:3.2rem;display:flex;align-items:center}
.book-summary{margin-top:.8rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:0 1.6rem .4rem;box-shadow:0 30px 60px -46px rgba(16,52,58,.45);overflow:hidden}
/* ticket head in the colours of the chosen route */
.book-summary .bs-head{position:relative;overflow:hidden;display:block;margin:0 -1.6rem .3rem;padding:1.05rem 1.6rem 1.85rem;border:0;background:var(--bs-sky,linear-gradient(180deg,#EBCBC8 0%,#E4A9A4 60%,#D98B89 100%));transition:background .6s}
.bs-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 26' preserveAspectRatio='none'%3E%3Cpath d='M0 12 C60 2 100 20 160 10 S260 0 320 10 S380 18 400 10 V26 H0Z' fill='%232E8A8F' opacity='.55'/%3E%3Cpath d='M0 19 C60 11 110 25 170 17 S270 9 330 17 S390 23 400 17 V26 H0Z' fill='%23fff'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.bs-head .book-summary__title{color:var(--ink);opacity:.75;margin-bottom:.5rem}
.bs-route{margin:0;display:grid;gap:.1rem}
.bs-route small{font-size:.74rem;color:var(--ink);opacity:.75}
.bs-route strong{font-family:var(--font-display);font-weight:300;font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.1;color:var(--ink);text-align:left;font-variation-settings:"opsz" 96}
.bs-num{position:absolute;right:1.4rem;top:1.05rem;font:italic 300 1.1rem var(--font-display);color:var(--ink);opacity:.8}
/* a sun in the ticket head: up for sunrise, low and deeper for sunset (data-slot on the head, app.js) */
.bs-sun{position:absolute;right:24%;bottom:2px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 50% 42%,#FFF1E4,#F9CDB4 62%,#F3B49B);box-shadow:0 0 0 9px rgba(255,241,228,.28);translate:0 -16px;transition:translate 1s var(--expo),background .8s,box-shadow .8s}
.bs-head[data-slot="Sunset"] .bs-sun{translate:0 12px;background:radial-gradient(circle at 50% 42%,#FBD0BF,#EE9A96 62%,#E4838A);box-shadow:0 0 0 9px rgba(238,154,150,.22)}
/* the date and the time on the ticket are buttons */
.bs-edit{all:unset;cursor:pointer;padding:.5rem 0;margin:-.5rem 0;font-weight:600;color:var(--ink);text-align:right;background:linear-gradient(currentColor,currentColor) 0 calc(100% - .38rem)/100% 1px no-repeat;transition:color .25s}
.bs-edit:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
.bs-edit.is-empty{color:var(--pink-ink)}
/* how far away the chosen day is, beside "Date" */
.bs-in{margin-left:.45rem;padding:.16rem .5rem;border-radius:999px;background:rgba(127,205,191,.3);color:var(--teal);font-size:.72rem;font-weight:600}
.bs-in:empty{display:none}
.bs-in{white-space:nowrap}
@media (max-width:480px){.bs-in{display:none}}   /* phones: the date already takes two lines there, the tag broke in two as well */
@media (hover:hover) and (pointer:fine){.bs-edit:hover{color:var(--pink-ink)}}
/* a rubber stamp on the total once a date is picked */
.book-summary .total{position:relative}
.bs-stamp{position:absolute;right:6.6rem;top:50%;translate:0 -42%;padding:.3rem .6rem;border:1.5px solid var(--pink-ink);border-radius:8px;color:var(--pink-ink);font:700 .64rem/1 var(--font-body);font-style:normal;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;rotate:-7deg;opacity:0;scale:1.6;transition:opacity .25s,scale .45s var(--expo)}
.book-summary.is-ready .bs-stamp{opacity:.85;scale:1}
@media (max-width:480px){.bs-stamp{top:-1.45rem;right:4.6rem;translate:0 -50%}}   /* phones: no room beside the total, so it lands on the Guests row above */
.sum-boards{display:inline-flex;gap:3px;margin-right:.55rem;vertical-align:-2px}
.sum-boards i{width:7px;height:17px;border-radius:7px;background:linear-gradient(180deg,var(--pink) 0 34%,#fff 34% 66%,#7FCDBF 66%);box-shadow:inset 0 0 0 1px rgba(31,110,115,.55)}
.book-summary b{font-weight:600}
.book-summary__title{margin:0 0 .4rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--pink-ink)}
.book-summary > div:not(.bs-head){display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.52rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.book-summary > div:last-child{border:0}
/* a ticket's two notches, where the head meets the rows (the card clips them to half circles) */
.book-summary > .bs-head + div{position:relative}
.book-summary > .bs-head + div::before,.book-summary > .bs-head + div::after{content:"";position:absolute;top:calc(-.3rem - 11px);width:20px;height:20px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 1px var(--line)}
.book-summary > .bs-head + div::before{left:calc(-1.6rem - 11px)}
.book-summary > .bs-head + div::after{right:calc(-1.6rem - 11px)}
/* after sending: the stamp says so */
.book-summary.is-sent .bs-stamp{border-color:var(--teal);color:var(--teal)}
.book-summary > div:not(.bs-head) > span{color:var(--muted)}
.book-summary > div:not(.bs-head) strong{font-weight:600;color:var(--ink);text-align:right}
.book-summary .total{padding-top:.8rem}
.book-summary .total strong{font-family:var(--font-display);font-size:1.9rem}
.book-summary .total em{font-style:normal;margin-left:.4rem;font-size:.85rem;color:var(--muted);opacity:.85}
.booking{background:var(--white);border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2.4rem);border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(16,52,58,.4);display:flex;flex-direction:column;gap:1.5rem}
.field label,.field .label{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--ink);margin-bottom:.6rem}
.opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
select,input[type=text],input[type=number],textarea{width:100%;font:inherit;padding:.85rem 1rem;border:1px solid var(--line-2);border-radius:14px;background:var(--paper);color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
select:focus,input:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(31,110,115,.12)}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;cursor:pointer}
/* tour: a small tile with the sky of that route's picture (sun on its water) */
.select--tour select{padding-left:3.7rem}
.tour-swatch{position:absolute;left:.55rem;top:50%;translate:0 -50%;width:38px;height:38px;border-radius:11px;overflow:hidden;pointer-events:none;background:var(--sw,linear-gradient(180deg,#EBCBC8 0%,#E4A9A4 60%,#D98B89 100%));box-shadow:0 0 0 1px rgba(16,52,58,.1);transition:background .5s}
.tour-swatch i{position:absolute;left:50%;top:44%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;background:radial-gradient(circle at 50% 42%,#FFF1E4,#F9CDB4 62%,#F3B49B)}
.tour-swatch::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32%;background:linear-gradient(180deg,#2E8A8F,#1D5F66);border-radius:55% 45% 0 0/38% 30% 0 0}
.select::after{content:"";position:absolute;right:1.1rem;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);pointer-events:none}
textarea{resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field-row > *{min-width:0}
@media (max-width:520px){.field-row{grid-template-columns:1fr}}
/* what the chosen route is like */
.tour-info{margin:.55rem 0 0;font-size:.88rem;line-height:1.45;color:var(--muted);min-height:1.3rem}
/* "pick one" beside the Date label until a date is chosen, then a tick */
.f-need{margin-left:.5rem;padding:.2rem .5rem;border-radius:999px;background:rgba(232,120,138,.16);color:var(--pink-ink);font:600 .64rem/1 var(--font-body);font-style:normal;letter-spacing:.08em;transition:background-color .4s,color .4s}
.f-need.is-done{background:rgba(127,205,191,.3);color:var(--teal)}
/* quick notes under the notes box */
.note-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.note-chips[hidden],.msg-peek[hidden]{display:none}
.note-chips button{min-height:36px;padding:0 .8rem;border-radius:999px;border:1px dashed rgba(31,110,115,.55);background:transparent;color:var(--teal);font:500 .84rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.note-chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);border-style:solid;color:#fff}
.note-chips button:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.note-chips button[aria-pressed="false"]:hover{background:var(--paper-2);border-style:solid}}
/* the message the button will open in WhatsApp */
.msg-peek{margin-top:-.5rem;text-align:center}
.msg-peek summary{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;cursor:pointer;list-style:none;font-size:.88rem;font-weight:600;color:var(--teal)}
.msg-peek summary::-webkit-details-marker{display:none}
.msg-peek summary::after{content:"";width:7px;height:7px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;transition:rotate .35s var(--expo),margin .35s}
.msg-peek[open] summary::after{rotate:-135deg;margin-top:3px}
.msg-peek__text{margin:.5rem 0 0;padding:.8rem 1rem;border-radius:16px 16px 6px 16px;background:#DCF5E3;color:var(--ink);font-size:.9rem;line-height:1.5;text-align:left;white-space:pre-line;overflow-wrap:anywhere}
/* quick dates beside the "Date" label */
.label-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem .8rem;margin-bottom:.6rem}
.label-row .label{margin:0}
.cal-quick{display:flex;flex-wrap:wrap;gap:.35rem}
.cal-quick button{min-height:32px;padding:0 .75rem;border-radius:999px;border:1px solid rgba(31,110,115,.4);background:transparent;color:var(--teal);font:500 .82rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.cal-quick button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cal-quick button:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.cal-quick button[aria-pressed="false"]:hover{background:var(--paper-2);border-color:var(--teal)}}
/* "best light" tag on the time of day that suits the chosen route */
.slot.is-best > span::after{content:"Best light here";position:absolute;right:.7rem;top:-.6rem;padding:.22rem .55rem;border-radius:999px;background:var(--pink);color:#2A1410;font-size:.66rem;font-weight:600;letter-spacing:.04em}
.stepper{display:flex;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--paper)}
.stepper button{width:48px;border:0;background:transparent;font-size:1.3rem;cursor:pointer;color:var(--teal);transition:background-color .15s,transform 120ms var(--ease-out)}
.stepper button:hover{background:rgba(46,138,143,.1)}
.stepper button:active{transform:scale(.92)}
.stepper input{border:0;text-align:center;background:transparent;border-radius:0;-moz-appearance:textfield;box-shadow:none!important}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none}
/* calendar */
.cal{border:1px solid var(--line-2);border-radius:18px;padding:1rem 1rem .8rem;background:var(--paper)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.cal-head strong{font-family:var(--font-display);font-weight:400;font-size:1.2rem;color:var(--ink)}
.cal-nav{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--white);cursor:pointer;font-size:1.2rem;color:var(--teal);transition:border-color .2s,transform 120ms var(--ease-out)}
.cal-nav:hover{border-color:var(--teal)}
.cal-nav:not(:disabled):active{transform:scale(.92)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px 4px}
.cal-dow span{text-align:center;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);padding:.3rem 0}
.day{width:100%;max-width:42px;height:auto;aspect-ratio:1;padding:0;justify-self:center;border:0;border-radius:50%;background:transparent;font:inherit;font-size:.95rem;color:var(--ink);cursor:pointer;display:grid;place-items:center;position:relative;transition:background-color .2s,color .2s,transform 120ms var(--ease-out),box-shadow .3s}
.day:hover{background:rgba(46,138,143,.12)}
.day:not(:disabled):active{transform:scale(.92)}
.day.is-empty{cursor:default;background:none}
.day.is-weekend{color:var(--pink-ink);font-weight:600}
.day.is-past{color:rgba(16,52,58,.28);font-weight:400;cursor:default}
.day.is-past:hover{background:none}
.day.is-today::after{content:"";position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--pink)}
.day.is-selected{background:var(--ink);color:#fff;box-shadow:0 0 0 4px rgba(232,120,138,.35)}
.day.is-selected:hover{background:var(--ink)}
/* nights around the full moon: a small pale moon at the corner of the day */
.day.is-moon::before{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:#F6E7C4;box-shadow:0 0 0 1px rgba(16,52,58,.22),0 0 6px rgba(246,231,196,.9)}
.day.is-past.is-moon::before{opacity:.4}
.day:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.cal-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1rem;margin:.6rem .2rem 0;font-size:.76rem;color:var(--muted)}
.cal-legend[hidden]{display:none}
.cal-legend span{display:inline-flex;align-items:center;gap:.4rem}
.cal-legend i{width:7px;height:7px;border-radius:50%}
.cl-today{background:var(--pink)}
.cl-moon{background:#F6E7C4;box-shadow:0 0 0 1px rgba(16,52,58,.22)}
.cal-legend .cl-keys{margin-left:auto}
@media (hover:none),(max-width:900px){.cal-legend .cl-keys{display:none}}   /* two classes: the rule above sets display on every span */
/* sunrise / sunset slots: the little sun rises or sets when chosen */
/* the deposit: half now or all of it. Two cards like the sunrise / sunset pair, with a radio dot that ticks */
.deps{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.field .dep{position:relative;display:block;cursor:pointer;margin:0;font:inherit;text-transform:none;letter-spacing:0;color:inherit}
.dep input{position:absolute;opacity:0;inset:0}
.dep > span{position:relative;display:grid;gap:.2rem;height:100%;padding:.85rem 2.6rem .85rem 1rem;border:1px solid var(--line-2);border-radius:16px;background:var(--paper);transition:border-color .25s,background-color .25s,box-shadow .4s var(--expo)}
.dep strong{font-family:var(--font-display);font-weight:400;font-size:1.12rem;color:var(--ink);font-variation-settings:"opsz" 48}
.dep em{font-style:normal;font-size:.84rem;line-height:1.35;color:var(--muted)}
.dep > span::after{content:"";position:absolute;right:.9rem;top:.95rem;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--white) center/100% no-repeat;transition:background-color .25s,border-color .25s}
.dep input:checked + span{border-color:var(--teal);background:rgba(46,138,143,.09);box-shadow:inset 0 0 0 1px var(--teal)}
.dep input:checked + span::after{border-color:var(--teal);background-color:var(--teal);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 8.3l2.4 2.4 4.8-5.2'/%3E%3C/svg%3E")}
.dep input:focus-visible + span{outline:3px solid var(--teal);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.dep input:not(:checked) + span:hover{border-color:var(--teal)}}
.dep-how{margin:.6rem 0 0;font-size:.84rem;color:var(--muted)}
/* ticket: the deposit under the total */
.book-summary .bs-pay strong small{margin-left:.3rem;font-size:.85rem;font-weight:400;color:var(--muted)}
.book-summary .bs-pay b{font-weight:600}
.bs-long{font-style:normal}
/* phones: the two cards stack (side by side their lines broke three times), and the ticket row keeps to one short label */
@media (max-width:480px){.deps{grid-template-columns:1fr;gap:.55rem}.dep > span{padding:.7rem 2.6rem .7rem .95rem}.dep > span::after{top:50%;translate:0 -50%}
  .bs-long{display:none}.book-summary > .bs-pay{align-items:center}.book-summary .bs-pay strong small{display:block;margin:0}}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.field .slot{position:relative;display:block;cursor:pointer;margin:0;font:inherit;text-transform:none;letter-spacing:0;color:inherit}
.slot input{position:absolute;opacity:0;inset:0}
.slot > span{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.85rem;align-items:center;padding:.95rem 1rem;border:1px solid var(--line-2);border-radius:16px;background:var(--paper);transition:border-color .25s,background-color .25s}
.slot strong{font-family:var(--font-display);font-weight:400;font-size:1.12rem;color:var(--ink);font-variation-settings:"opsz" 48}
.slot em{grid-column:2;font-style:normal;font-size:.84rem;color:var(--muted)}
.slot-sun{grid-row:1/3;position:relative;width:36px;height:22px;overflow:hidden;border-bottom:1.5px solid var(--teal)}
.slot-sun b{position:absolute;left:50%;bottom:-9px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:radial-gradient(circle at 45% 40%,#F6BE8A,#E8788A);transition:transform .7s var(--expo)}
.slot input:checked + span .slot-sun b{box-shadow:0 0 12px 3px rgba(246,190,138,.6)}
.slot--rise input:checked + span .slot-sun b{transform:translateY(-8px)}
.slot--set  input:checked + span .slot-sun b{transform:translateY(4px);background:radial-gradient(circle at 45% 40%,#F4A9A3,#D9737D)}
.slot input:checked + span{border-color:var(--teal);background:rgba(46,138,143,.09)}
/* each card is a small sky of its own: cool and pale for sunrise, warm for sunset; stronger when it is the chosen one */
.slot > span{position:relative;overflow:visible;background:linear-gradient(180deg,var(--sk1) 0%,var(--sk2) 100%);transition:border-color .25s,box-shadow .4s var(--expo),filter .4s}
.slot--rise > span{--sk1:#F3EEF3;--sk2:#FBEFE6}
.slot--set > span{--sk1:#FBEDE6;--sk2:#F8E1DC}
.slot input:not(:checked) + span{filter:saturate(.75)}
.slot--rise input:checked + span{background:linear-gradient(180deg,#E6EEF6 0%,#FBE6D8 100%);box-shadow:0 18px 30px -24px rgba(16,52,58,.5)}
.slot--set input:checked + span{background:linear-gradient(180deg,#FBE3D4 0%,#F6CFCB 100%);box-shadow:0 18px 30px -24px rgba(16,52,58,.5)}
.slot-sun{border-bottom-color:rgba(31,110,115,.7)}
.slot input:focus-visible + span{outline:3px solid var(--teal);outline-offset:3px}
.form-error{color:var(--pink-ink);font-size:.92rem;margin:-.4rem 0 0}
/* the request in one line, right above the button */
.form-recap{margin:0 0 -.7rem;padding:.6rem .9rem;border-radius:14px;background:var(--paper-2);font-size:.88rem;line-height:1.4;color:var(--ink);text-align:center;font-variant-numeric:tabular-nums}
.form-recap[hidden]{display:none}
.form-recap b{font-weight:600}
.form-recap button{all:unset;cursor:pointer;font-weight:600;color:var(--pink-ink);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding:.3rem 0}
.form-recap button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
.form-note{font-size:.88rem;color:var(--muted);margin:0;text-align:center}
.form-trust{list-style:none;margin:-.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.1rem;font-size:.84rem;color:var(--text)}
.form-trust li{display:inline-flex;align-items:center;gap:.4rem}
.form-trust li::before{content:"";width:15px;height:15px;border-radius:50%;background:rgba(127,205,191,.4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231F6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 8.3l2.4 2.4 4.8-5.2'/%3E%3C/svg%3E") center/100% no-repeat}
.form-note a{color:var(--teal)}
/* "Today in Malta": the sun on its arc, the two times either side of it. The golden hours are the thicker ends
   of the arc and the length of the day sits inside it. Hovering a day in the calendar previews that day here. */
.sunday{margin-top:.8rem;background:linear-gradient(180deg,#FFF7F2 0%,#FBEDE6 100%);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.05rem 1.3rem .9rem;transition:border-color .3s}
.sunday.is-preview{border-color:rgba(232,120,138,.5);border-style:dashed}
.sunday-title{margin:0 0 .2rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--pink-ink)}
.sunday-row{position:relative}
.sunday-arc{display:block;width:min(100%,300px);height:auto;margin:0 auto;overflow:visible}
.arc-track{fill:none;stroke:rgba(31,110,115,.35);stroke-width:1.4;stroke-dasharray:3 6}
.arc-gold{fill:none;stroke:#F2B36A;stroke-width:5;stroke-linecap:round;opacity:.9}
.arc-horizon{stroke:var(--teal);stroke-width:1.6;stroke-linecap:round}
.arc-len{font:400 21px var(--font-display);fill:var(--ink)}
.arc-len-l{font:500 9.5px var(--font-body);letter-spacing:.14em;text-transform:uppercase;fill:var(--muted)}
.arc-glow{fill:rgba(244,169,163,.35)}
.arc-sun.is-night{opacity:.45}
.sunday-times{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
.sunday-times button{pointer-events:auto;display:flex;flex-direction:column;padding:.4rem .7rem;margin:0 -.5rem -.2rem;border:1px solid transparent;border-radius:14px;background:none;font:inherit;text-align:left;cursor:pointer;transition:background-color .3s var(--expo),border-color .3s var(--expo)}
.sunday-times button:last-child{text-align:right;align-items:flex-end}
.sunday-times button[aria-pressed="true"]{background:var(--white);border-color:rgba(232,120,138,.5)}
@media (hover:hover) and (pointer:fine){.sunday-times button[aria-pressed="false"]:hover{background:rgba(255,255,255,.6)}}
.sunday-times small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sunday-times strong{font-family:var(--font-display);font-weight:400;font-size:1.4rem;line-height:1.15;color:var(--ink);font-variation-settings:"opsz" 40}
@media (max-width:900px){.book-grid{grid-template-columns:minmax(0,1fr)}.book-copy{position:static}.sunday{display:none}}   /* minmax(0,…): Chrome sizes a wrapping flex row (the quick dates) as if it could not wrap, which pushed the column past the screen */

/* ═════════ 6b. GIFT ═════════ */
.gift{background:linear-gradient(180deg,var(--gold) 0%,#F4E0DC 35%,#F4E0DC 100%);padding-top:clamp(1rem,2vw,1.5rem);padding-bottom:clamp(2.5rem,4.5vw,3.75rem);overflow-x:clip}   /* clip: before its reveal the card waits rotated -12deg, 3px wider than a 360px phone */ /* ≥4.5:1 for muted + rose text */
.gift-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.gift-grid > *{min-width:0}
/* a soft morning sun behind the voucher, and a sheet of paper peeking out from under it */
.gift-visual::before{content:"";position:absolute;z-index:0;width:min(78%,430px);aspect-ratio:1;right:-6%;top:-23%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,#FFF6EE 0,rgba(252,222,204,.9) 40%,rgba(249,206,188,.55) 58%,rgba(249,206,188,0) 71%)}
.gift-visual > *{position:relative;z-index:1}
.gift-stage::before{content:"";position:absolute;inset:7% -2.2% -6.5% 4.5%;border-radius:22px;background:linear-gradient(170deg,#FFFAF6,#F6E4DC);border:1px solid rgba(16,52,58,.07);rotate:2.6deg}
/* the ticket: deep-sea main part + blush tear-off stub, notches cut with a mask; the shadow lives on the stage */
.gift-stage{perspective:1100px;filter:drop-shadow(0 34px 34px rgba(16,52,58,.26)) drop-shadow(0 6px 10px rgba(16,52,58,.12))}
.gift-card{--rx:0deg;--ry:0deg;--mx:50%;--my:30%;--cut:70%;--notch:13px;position:relative;display:grid;grid-template-columns:var(--cut) 1fr;min-height:300px;border-radius:24px;color:#fff;
  transform:rotate(-2.5deg) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .8s var(--expo);
  -webkit-mask:radial-gradient(circle var(--notch) at var(--cut) 0,#0000 97%,#000),radial-gradient(circle var(--notch) at var(--cut) 100%,#0000 97%,#000);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--notch) at var(--cut) 0,#0000 97%,#000),radial-gradient(circle var(--notch) at var(--cut) 100%,#0000 97%,#000);mask-composite:intersect}
.gift-card.is-tilting{transition:transform .12s linear}
/* turning over: the mask flattens 3D children, so the card swings edge-on, swaps its content, and swings back */
.gift-card{cursor:pointer}
.gift-card.is-out{transform:rotate(-2.5deg) rotateY(88deg);transition:transform .24s cubic-bezier(.5,0,.9,.5)}
.gift-card.is-in{transform:rotate(-2.5deg) rotateY(-88deg);transition:none}
/* wrapped: paper slides in from both sides over the whole ticket, a ribbon each way, a bow where they cross, a tag with
   the names. It lives inside the card, so it tilts with it and takes the ticket's notched shape. */
.gift-card{--wrap:#F3B9B6;--ribbon:#1F6E73}
.gift-card[data-theme="rose"]{--wrap:#F7E6DC;--ribbon:#B04A5C}
.gift-card[data-theme="amber"]{--wrap:#F8E3C4;--ribbon:#9C5B33}
.gift-card[data-theme="lagoon"]{--wrap:#CDEBE4;--ribbon:#D9667A}
.gift-card[data-theme="pine"]{--wrap:#F6E9DD;--ribbon:#B5303F}
.gift-wrap{position:absolute;inset:0;z-index:5;border-radius:inherit;overflow:hidden;visibility:hidden;pointer-events:none;transition:visibility 0s .8s}
.gift-card.is-wrapped .gift-wrap{visibility:visible;pointer-events:auto;transition:visibility 0s}
.gw-half{position:absolute;top:0;bottom:0;width:50.4%;background:repeating-linear-gradient(135deg,rgba(255,255,255,.2) 0 9px,rgba(255,255,255,0) 9px 26px),radial-gradient(120% 90% at 30% 10%,rgba(255,255,255,.28),rgba(255,255,255,0) 60%),var(--wrap);transition:transform .75s var(--expo)}
.gw-l{left:0;transform:translateX(-103%)}
.gw-r{right:0;transform:translateX(103%)}
.gift-card.is-wrapped .gw-half{transform:none}
.gw-half::before{content:"";position:absolute;top:0;bottom:0;width:15px;background:var(--ribbon);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.gw-l::before{right:0}.gw-r::before{left:0}
.gw-half::after{content:"";position:absolute;left:0;right:0;top:58%;height:28px;margin-top:-14px;background:var(--ribbon);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.gw-bow{position:absolute;left:50%;top:58%;width:clamp(84px,22%,112px);height:auto;translate:-50% -60%;color:var(--ribbon);scale:0;transition:scale .3s ease;filter:drop-shadow(0 6px 6px rgba(16,52,58,.28))}
.gift-card.is-wrapped .gw-bow{scale:1;transition:scale .6s var(--expo) .35s}
.gift-card .gw-tag{position:absolute;left:7%;top:11%;display:grid;gap:.05rem;max-width:44%;margin:0;padding:.55rem .9rem .6rem 1.7rem;border-radius:10px;background:#FFFAF2;color:var(--ink);rotate:-5deg;transform-origin:8% 50%;scale:0;transition:scale .25s ease;box-shadow:0 12px 20px -12px rgba(16,52,58,.6)}
.gift-card.is-wrapped .gw-tag{scale:1;transition:scale .55s var(--expo) .5s}
.gw-tag::before{content:"";position:absolute;left:.6rem;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--wrap);box-shadow:inset 0 0 0 1.5px rgba(16,52,58,.25)}
.gw-tag small{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--pink-ink)}
.gw-tag strong{font-family:var(--font-display);font-weight:400;font-size:1.12rem;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variation-settings:"opsz" 48}
.gw-tag em{font-style:normal;font-size:.76rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gw-tag em[hidden]{display:none}
.gift-stamp{position:absolute;z-index:4;left:5%;top:-.7rem;display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .85rem .42rem .5rem;border-radius:999px;background:#FFFAF6;color:var(--ink);font:600 .78rem/1 var(--font-body);white-space:nowrap;rotate:-5deg;opacity:0;visibility:hidden;pointer-events:none}
.gift-stamp::before{content:"";width:17px;height:17px;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 8.3l2.4 2.4 4.8-5.2'/%3E%3C/svg%3E") center/100% no-repeat}
.gift-card.is-sent ~ .gift-stamp{opacity:1;visibility:visible}
.gift-hint[hidden]{display:none}
/* A section that is off screen stops its looping animations (app.js adds .is-away). The hero's wagging tail and the
   footer's "zz" are drawn inside SVGs, so they repainted on every frame while the visitor was reading the booking form. */
.is-away *,.is-away *::before,.is-away *::after{animation-play-state:paused!important}
.gift-hint{margin-top:-.7rem}
.gift-hint a{display:inline-block;padding:.45rem 0;font-weight:600}
.gift-card .gc-b{display:none}
.gift-card .gc-b[hidden]{display:none!important}
.gift-card.is-back .gc-f{display:none}
.gift-card.is-back .gc-b{display:block}
.gift-card.is-back .gc-scene circle,.gift-card.is-back .gc-scene g{display:none}   /* no sun behind the message */
/* one little paddler on the horizon per paddler on the voucher */
.gc-p{transform-box:fill-box;transform-origin:50% 100%;transform:scale(0);opacity:0;transition:transform .55s var(--expo),opacity .3s}
.gc-p.is-on{transform:scale(1.1);opacity:1}
.gc-crew{transform-origin:300px 122px}
/* occasion colours for the main part (white text stays ≥ 4.5:1 on each) */
.gift-card[data-theme="rose"] .gc-main{background:radial-gradient(90% 90% at 85% 100%,rgba(246,190,138,.3),rgba(246,190,138,0) 60%),linear-gradient(155deg,#B04A5C 0%,#7A2F3A 58%,#4E1E28 100%)}
.gift-card[data-theme="amber"] .gc-main{background:radial-gradient(90% 90% at 85% 100%,rgba(232,120,138,.3),rgba(232,120,138,0) 60%),linear-gradient(155deg,#9C5B33 0%,#6E3D25 58%,#43241A 100%)}
.gift-card[data-theme="lagoon"] .gc-main{background:radial-gradient(90% 90% at 85% 100%,rgba(246,230,218,.22),rgba(246,230,218,0) 60%),linear-gradient(155deg,#267A7F 0%,#1B5B60 58%,#123F44 100%)}
.gift-card[data-theme="pine"] .gc-main{background:radial-gradient(90% 90% at 85% 100%,rgba(246,231,196,.26),rgba(246,231,196,0) 60%),linear-gradient(155deg,#2E6B50 0%,#1E4B3B 58%,#12302A 100%)}
.gc-main{position:relative;overflow:hidden;border-radius:24px 0 0 24px;padding:clamp(1.4rem,2.6vw,2rem);display:flex;flex-direction:column;justify-content:flex-end;
  background:radial-gradient(90% 90% at 85% 100%,rgba(232,120,138,.28),rgba(232,120,138,0) 60%),linear-gradient(155deg,#1F6A70 0%,#10343A 58%,#0B2226 100%)}
.gc-scene{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;pointer-events:none}   /* full width: no wave ends mid-card */
.gift-sheen{position:absolute;inset:0;pointer-events:none;background:radial-gradient(40% 60% at var(--mx) var(--my),rgba(255,255,255,.2),rgba(255,255,255,0) 70%);mix-blend-mode:screen}
/* the islands as a faint watermark on the card, and a small emblem for the occasion */
.gc-map{position:absolute;right:-7%;top:5%;width:64%;height:auto;pointer-events:none;--land:rgba(255,255,255,.07);--land-line:rgba(255,255,255,.2)}
.gc-emblem{position:absolute;top:clamp(1.15rem,2.3vw,1.7rem);right:clamp(1.15rem,2.3vw,1.7rem);width:34px;height:34px;display:grid;place-items:center;color:var(--blush)}
.gc-emblem svg{width:27px;height:27px}
.gift-card p{margin:0;position:relative}
.gift-card-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.26em;font-weight:600;color:var(--blush);margin-bottom:auto!important}
.gift-card-title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.1rem,1.8vw,1.35rem);color:#fff;font-variation-settings:"opsz" 48;max-width:17ch;line-height:1.2;text-wrap:balance}
.gift-card-amount{font-family:var(--font-display);font-size:clamp(2.4rem,4.6vw,3.3rem);line-height:1.05;color:#fff;margin-top:.35rem!important}
.gift-card-for{font-size:.88rem;color:rgba(255,255,255,.85)}
.gift-card-msg{margin-top:.6rem!important;max-width:72%;text-wrap:balance;font-family:var(--font-display);font-weight:300;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.3;color:#fff;font-variation-settings:"opsz" 48}
.gift-card-msg.is-empty{color:rgba(255,255,255,.55)}
.gc-from{margin-top:.55rem!important;font-size:.92rem;color:rgba(255,255,255,.85)}
.gc-to small{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;color:var(--blush)}
.gc-to strong{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.15;color:#fff;font-variation-settings:"opsz" 48}
.gc-steps{margin:0;padding:0;list-style:none;counter-reset:gs;gap:.55rem}
.gift-card.is-back .gc-steps{display:grid}
.gc-steps li{counter-increment:gs;display:grid;grid-template-columns:20px 1fr;gap:.45rem;font-size:.82rem;line-height:1.3;color:var(--ink)}
.gc-steps li::before{content:counter(gs);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--pink);color:#2A1410;font-size:.68rem;font-weight:700}
.gc-stub{position:relative;border-radius:0 24px 24px 0;background:linear-gradient(180deg,#FBF0EC,#F3DEDA);color:var(--ink);padding:1.2rem 1.1rem;display:flex;flex-direction:column;justify-content:space-between;gap:.8rem;
  border-left:2px dashed rgba(16,52,58,.22)}
.gc-stub img{width:clamp(64px,70%,96px);height:auto;margin:0 auto}
.gc-stub dl{margin:0;display:grid;gap:.55rem}
.gc-stub dt{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--pink-ink)}
.gc-stub dd{margin:0;font-family:var(--font-display);font-size:.95rem;line-height:1.2;color:var(--ink);font-variation-settings:"opsz" 24}
.gc-stub dd small{display:block;margin-top:.15rem;font-family:var(--font-body);font-size:.68rem;color:var(--muted)}
.gc-stub dd small:empty{display:none}
@media (max-width:900px){.gift-grid{grid-template-columns:minmax(0,1fr)}.gift-stage{max-width:520px}}
@media (max-width:480px){.gc-crew{transform:scale(.8)}.gift-card-label{letter-spacing:.16em}.gift-cta-x{display:none}.gift-card{--cut:68%;min-height:250px}.gc-main{padding:1.2rem}.gc-stub{padding:.9rem .7rem}.gc-stub dt,.gc-stub dd small{display:none}.gc-stub dd{font-size:.82rem}.gift-card-msg{max-width:92%}.gc-steps li{font-size:.72rem;grid-template-columns:17px 1fr;gap:.3rem}.gc-steps li::before{width:17px;height:17px;font-size:.6rem}.gift-extras{margin-top:1.4rem}}
.gift-copy > p:not(.eyebrow){color:var(--muted);font-size:1.04rem}
.gift-visual{position:relative;min-width:0}
.gift-extras{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem 1rem;margin-top:2.9rem}
.gift-flip{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:0 1rem;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.65);color:var(--ink);font:600 .86rem/1 var(--font-body);cursor:pointer;transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.gift-flip svg{width:18px;height:18px;transition:transform .5s var(--expo)}
.gift-flip[aria-pressed="true"] svg{transform:rotate(180deg)}
.gift-flip:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.gift-flip:hover{background:var(--ink);border-color:var(--ink);color:#fff}}
.gift-occ{display:flex;flex-wrap:wrap;gap:.4rem}
@media (min-width:901px){.gift-occ{max-width:26rem}}
.gift-occ button{min-height:40px;padding:0 .95rem;border-radius:999px;border:1px solid rgba(31,110,115,.4);background:transparent;color:var(--teal);font:500 .88rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.gift-occ button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.gift-occ button:active{transform:scale(.96)}
.gift-occ button{display:inline-flex;align-items:center;gap:.38rem;padding:0 .85rem 0 .7rem}
@media (max-width:480px){.gift-occ{gap:.4rem .3rem}.gift-occ button{padding:0 .6rem 0 .5rem}}   /* three and two on most phones */
.go-ic{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gift-wrapbtn[hidden]{display:none}
@media (hover:hover) and (pointer:fine){.gift-occ button[aria-pressed="false"]:hover{background:rgba(255,255,255,.7);border-color:var(--teal)}}
/* what the person who gets it gets */
.gift-inside{margin-top:1.5rem;padding-top:1.2rem;border-top:1px dashed rgba(16,52,58,.22)}
.gi-title{margin:0 0 .8rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--pink-ink)}
.gift-inside ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.2rem}
.gift-inside li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:.7rem;align-items:center;font-size:.92rem;line-height:1.3;color:var(--text)}
.gift-inside .inc-ic{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.72);transition:background-color .3s var(--expo),color .3s var(--expo),rotate .5s var(--expo)}
.gift-inside .inc-ic svg{width:19px;height:19px}
@media (hover:hover) and (pointer:fine){.gift-inside li:hover .inc-ic{background:var(--pink);color:#2A1410;rotate:-8deg}}
/* how it goes for the giver: three points on a dashed line */
.gift-steps{list-style:none;margin:1.4rem 0 0;padding:1.2rem 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;border-top:1px dashed rgba(16,52,58,.22)}
.gift-steps li{position:relative;display:grid;justify-items:center;align-content:start;gap:.45rem;text-align:center;font-size:.84rem;line-height:1.35;color:var(--muted)}
.gift-steps li + li::before{content:"";position:absolute;top:19px;right:calc(50% + 27px);width:calc(100% + .6rem - 54px);border-top:1.5px dashed var(--line-2)}
.gift-steps b{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:1px solid var(--line-2);color:var(--teal);transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),rotate .5s var(--expo)}
.gift-steps b svg{width:19px;height:19px}
.gift-steps strong{display:block;font-weight:600;font-size:.92rem;color:var(--ink)}
/* each step is a button; the open one (or the one under the pointer) is filled and the line below says more */
.gs-btn{all:unset;box-sizing:border-box;display:grid;justify-items:center;align-content:start;gap:.45rem;width:100%;cursor:pointer;border-radius:14px}
.gs-btn:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.gs-btn[aria-pressed="true"] b{background:var(--pink);border-color:var(--pink);color:#2A1410;rotate:-8deg}
.gift-steps li:has(.gs-btn[aria-pressed="true"])::before{border-top-style:solid;border-top-color:var(--pink)}
.gs-note{display:grid;place-items:center;margin:.9rem 0 0;min-height:calc(2.9em + 1.3rem);padding:.6rem .9rem;border-radius:14px;background:rgba(255,255,255,.6);font-size:.88rem;line-height:1.45;color:var(--text);text-align:center}   /* two lines kept free: the column is centred beside the form, so a taller note would move the steps under the pointer */
.gs-note[hidden]{display:none}
@media (max-width:480px){.gs-note{min-height:calc(4.35em + 1.3rem)}}
@media (max-width:480px){.gift-card .gw-tag{max-width:66%}}
@media (hover:hover) and (pointer:fine){.gift-steps li:hover b{background:var(--pink);border-color:var(--pink);color:#2A1410;rotate:-8deg}}
/* the guide's comment above the form */
.gift-helper + .gift-form{margin-top:1rem}
/* confetti from the voucher when an occasion is picked (app.js adds the bits; they only move under no-preference) */
.gift-bit{position:absolute!important;z-index:3;left:var(--x0,50%);top:var(--y0,35%);width:8px;height:12px;border-radius:2px;pointer-events:none;opacity:0}
/* form: quick group sizes, the sum, a counter and message ideas */
.label-row label{margin:0}
.cal-quick[hidden],.gift-idea[hidden]{display:none}
#giftQuick button{min-height:36px}
.gift-size{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem}
.gift-size .stepper{flex:0 0 clamp(150px,46%,230px)}
.gift-sum{margin:0;font-size:.95rem;color:var(--muted)}
.gift-sum strong{margin-left:.2rem;font-family:var(--font-display);font-weight:400;font-size:1.3rem;color:var(--ink);font-variation-settings:"opsz" 40;font-variant-numeric:tabular-nums}
/* message box, then one row: the idea button on the left, the counter on the right */
.gift-msg-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.55rem .8rem}
.gift-msg-row input{grid-column:1/-1}
.gift-count{grid-column:2;justify-self:end;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.gift-idea{grid-column:1;grid-row:2;justify-self:start;display:inline-flex;align-items:center;gap:.45rem;min-height:38px;padding:0 .9rem 0 .7rem;border-radius:999px;border:1px dashed rgba(31,110,115,.55);background:transparent;color:var(--teal);font:500 .84rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.gift-idea svg{width:17px;height:17px;color:var(--pink-ink);transition:rotate .6s var(--expo)}
.gift-idea:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.gift-idea:hover{background:var(--paper-2);border-style:solid}.gift-idea:hover svg{rotate:90deg}}
.gift-form{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.8rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.3rem,3vw,1.9rem)}
.gift-form .field{margin:0}
@media (max-width:900px){
  /* phones: heading and text first, then the voucher right above the form that fills it in */
  .gift-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .gift-copy,.gift-visual{display:contents}
  .gift-visual::before{display:none}
  .gift-copy > .eyebrow{order:1}.gift-copy > h2{order:2}.gift-copy > p:not(.eyebrow){order:3}.gift-stage{order:4;margin-top:1.8rem}.gift-extras{order:5}.gift-helper{order:6}.gift-form{order:7}.gift-inside{order:8}.gift-steps{order:9}
  .gift-stage{max-width:460px}
  .gift-inside{margin-top:1.8rem}
}

/* ═════════ 7. FAQ ═════════ */
/* starts in the gift section's blush and clears to paper, with a little morning glow behind the heading */
.faq{background:radial-gradient(620px 340px at 10% 0,rgba(246,230,218,.9),transparent 72%),linear-gradient(180deg,#F4E0DC 0,var(--paper) 170px)}
/* heading + "ask me" chat on the left (it stays in view while the answers scroll), question cards on the right */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);column-gap:clamp(2rem,6vw,5rem);align-items:start}
.faq-side{display:grid;gap:1.5rem;align-content:start;min-width:0}
@media (min-width:901px) and (min-height:920px){.faq-side{position:sticky;top:calc(var(--hdr) + 18px)}}   /* 920: with a long question and the guide's "I answer that myself" the column is 807px + 96px under the header */
.faq-head{margin-bottom:0}
.faq-topics{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem;max-width:440px}
.faq-topics button{position:relative;min-height:38px;padding:0 .9rem;border-radius:999px;border:1px solid rgba(31,110,115,.4);background:transparent;color:var(--teal);font:500 .88rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.faq-topics button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.faq-topics button:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.faq-topics button[aria-pressed="false"]:hover{background:var(--white);border-color:var(--teal)}}
/* a question you have opened keeps a small tick on its chip (absolute, so the row never reflows) */
.faq-topics button::after{content:"";position:absolute;top:-5px;right:-3px;width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px var(--paper);scale:0;transition:scale .4s var(--expo);
  background:var(--lagoon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.3l2.2 2.2 4.3-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
.faq-topics button.is-seen::after{scale:1}
/* "not on the list?" as a small chat card */
.faq-ask{max-width:440px;padding:1.05rem 1.1rem 1.1rem;border-radius:24px;background:var(--white);border:1px solid var(--line);box-shadow:0 34px 60px -46px rgba(16,52,58,.6)}
.fa-head{display:flex;align-items:center;gap:.8rem;padding-bottom:.85rem;margin-bottom:.85rem;border-bottom:1px solid var(--line)}
.fa-head .gc-av{width:46px;height:46px}
.fa-head p{margin:0;display:grid;gap:.2rem}
.fa-head strong{font-family:var(--font-display);font-weight:400;font-size:1.25rem;line-height:1.15;color:var(--ink);font-variation-settings:"opsz" 48}
.fa-on{display:inline-flex;align-items:center;gap:.45rem;font-size:.84rem;color:var(--muted)}
.fa-on i{width:8px;height:8px;border-radius:50%;background:#1DA851}
.fa-thread{display:grid;gap:.5rem}
.fa-thread .gc-bubble{max-width:94%;background:var(--paper);box-shadow:none;font-size:.95rem}
.fa-mine{justify-self:end;max-width:88%;margin:0;padding:.6rem .9rem .65rem;border-radius:18px 18px 6px 18px;background:#DCF5E3;color:var(--ink);font-size:.95rem;line-height:1.45;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.fa-mine[hidden],.fa-match[hidden],.fa-starts[hidden],.fa-self[hidden]{display:none}
.fa-match button{font:inherit;font-weight:600;color:var(--teal);background:none;border:0;padding:0;cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:3px}
.fa-match button:hover{color:var(--pink-ink)}
/* starter questions: a tap writes one into the box */
.fa-starts{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.85rem}
.fa-starts button{min-height:38px;padding:0 .8rem;border-radius:999px;border:1px dashed rgba(31,110,115,.55);background:transparent;color:var(--teal);font:500 .84rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.fa-starts button:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.fa-starts button:hover{background:var(--paper-2);border-style:solid}}
.faq-form{display:grid;gap:.55rem;margin:.8rem 0 0}
.faq-form .btn{width:100%}
.faq-form .btn svg{width:19px;height:19px;position:relative;z-index:1}
/* the questions */
.faq-list{display:grid;gap:.7rem;min-width:0}
.faq-list details{border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.55);transition:background-color .35s var(--expo),border-color .35s var(--expo),box-shadow .5s var(--expo)}
.faq-list details[open]{background:var(--white);border-color:rgba(232,120,138,.4);box-shadow:0 26px 50px -36px rgba(16,52,58,.5)}
@media (hover:hover) and (pointer:fine){
  .faq-list details:not([open]):hover{background:var(--white);border-color:var(--line-2)}
  .faq-list details:not([open]):hover .fq-ic{background:var(--blush);rotate:-6deg}
}
.faq-list summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:42px minmax(0,1fr) auto 36px;align-items:center;gap:.9rem;padding:.95rem 1.2rem .95rem 1.1rem;font-family:var(--font-display);font-weight:400;font-size:clamp(1.12rem,1.6vw,1.32rem);color:var(--ink);font-variation-settings:"opsz" 48;border-radius:inherit}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:focus-visible{outline:3px solid var(--teal);outline-offset:-3px;border-radius:20px}   /* rounded like the row, not a square box around it */
.faq-list summary::after{content:"";width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);
  background:linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;
  transition:transform .5s var(--expo),background-color .3s,border-color .3s}
.faq-list details[open] summary::after{transform:rotate(135deg);background-color:var(--blush);border-color:var(--blush)}
.fq-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--paper-2);color:var(--teal);transition:background-color .35s,color .35s,rotate .5s var(--expo)}
.fq-ic svg{width:21px;height:21px}
.faq-list details[open] .fq-ic{background:var(--pink);color:#2A1410}
.fq-q{min-width:0}
/* the short answer, readable without opening the question */
.fq-peek{justify-self:end;max-width:14rem;overflow:hidden;padding:.4rem .7rem;border-radius:999px;background:rgba(127,205,191,.26);color:var(--teal);font:600 .78rem/1 var(--font-body);white-space:nowrap;transition:opacity .3s,max-width .45s var(--expo),padding .45s var(--expo),margin .45s var(--expo)}
/* open: the pill folds away so the question gets the whole line (the answer starts with the same words) */
.faq-list details[open] .fq-peek{opacity:0;max-width:0;padding-inline:0;margin-left:-.9rem}
.faq-a{padding:0 1.2rem 1.3rem calc(1.1rem + 42px + .9rem)}
.faq-a > p{margin:0;color:var(--muted);max-width:60ch}
.faq-a .faq-short{font-family:var(--font-display);font-size:1.22rem;line-height:1.3;color:var(--ink);margin-bottom:.35rem;font-variation-settings:"opsz" 48}
.faq-a .faq-more{margin-top:.8rem}
.faq-chips{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.faq-chips li{font-size:.86rem;line-height:1;color:var(--teal);border:1px solid rgba(31,110,115,.35);border-radius:999px;padding:.42rem .75rem;background:var(--paper)}
.faq-acts{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem 1.2rem;margin-top:1rem}
.faq-list details.is-ping{animation:faq-ping .9s var(--expo)}
@media (hover:hover) and (pointer:fine){.faq-list details:not([open]):hover .fq-peek{background:var(--teal);color:#fff}}
.fq-peek{transition:opacity .3s,max-width .45s var(--expo),padding .45s var(--expo),margin .45s var(--expo),background-color .3s,color .3s}
/* on to the next question, at the end of each answer */
.faq-next{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;min-height:36px;padding:0;border:0;background:none;color:var(--muted);font:500 .86rem/1.2 var(--font-body);cursor:pointer}
.faq-next b{font-weight:600;color:var(--ink);transition:color .25s}
.faq-next .arrow{width:14px;rotate:90deg;transition:translate .45s var(--expo)}
@media (hover:hover) and (pointer:fine){.faq-next:hover b{color:var(--pink-ink)}.faq-next:hover .arrow{translate:0 3px}}
.faq-next:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:6px}
/* under the list: how many of the seven are read, and the way to the next one */
.faq-foot{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;margin-top:.3rem;padding:.75rem 1rem .75rem 1.2rem;border:1px dashed var(--line-2);border-radius:20px;background:rgba(255,255,255,.4)}
.faq-foot[hidden]{display:none}
.ff-dots{display:inline-flex;gap:5px}
.ff-dots i{width:9px;height:9px;border-radius:50%;background:var(--blush-2);opacity:.55;transition:background-color .4s,opacity .4s,scale .5s var(--expo)}
.ff-dots i.is-on{background:var(--teal);opacity:1;scale:1.12}
.ff-text{flex:1;min-width:10rem;margin:0;font-size:.92rem;color:var(--text)}
.faq-foot .btn{flex:none}
.faq-foot .btn[hidden]{display:none}
.faq-foot.is-done{border-style:solid;border-color:rgba(127,205,191,.7);background:rgba(127,205,191,.14)}
@keyframes faq-ping{0%{box-shadow:0 0 0 0 rgba(232,120,138,.55)}100%{box-shadow:0 0 0 14px rgba(232,120,138,0)}}
@supports selector(::details-content){
  .faq-list{interpolate-size:allow-keywords}
  .faq-list details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .45s var(--expo),opacity .45s var(--expo),content-visibility .45s allow-discrete}
  .faq-list details[open]::details-content{block-size:auto;opacity:1}
}
/* ── the small thing to play with inside each answer (.fx) ── */
.fx{display:grid;gap:.75rem;margin-top:.95rem;padding:.9rem;border-radius:18px;background:var(--paper);border:1px solid var(--line)}
.fx[hidden]{display:none}
html:not(.js) .fx-seg,html:not(.js) .fx-stages,html:not(.js) .fx .fx-row{display:none}
.fx-art{display:block;width:100%;height:auto;border-radius:12px}
.fx-art--first{background:linear-gradient(180deg,#FCEFE7,#F8DFD3)}
.fx-art--wind{background:linear-gradient(180deg,#EEF3F3,#E0ECEC)}
.fx-label{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin:0;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--pink-ink)}
.faq-a .fx p{margin:0}
.fx-count{font-size:.86rem;letter-spacing:0;text-transform:none;font-weight:500;color:var(--teal)}
.fx-out{font-size:.95rem;line-height:1.45;color:var(--muted)}
.fx-out strong{color:var(--ink);font-weight:600}
.fx-row{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .8rem}
.fx-row .rs-note{font-size:.88rem}
.fx-sum{font-family:var(--font-display);font-size:1.35rem;line-height:1;color:var(--ink);font-variation-settings:"opsz" 40;font-variant-numeric:tabular-nums}
/* segmented choice */
.fx-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;padding:3px;border:1px solid var(--line-2);border-radius:15px;background:var(--white)}
.fx-seg button{min-height:42px;padding:.3rem .5rem;border:0;border-radius:11px;background:transparent;color:var(--teal);font:600 .84rem/1.2 var(--font-body);cursor:pointer;transition:background-color .3s var(--expo),color .3s var(--expo)}
.fx-seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){.fx-seg button[aria-pressed="false"]:hover{background:var(--paper-2)}}
/* first time: three pictures, three buttons */
.fs{transition:opacity .5s var(--expo)}
.fx-first[data-stage="1"] .fs:not(.fs-1),.fx-first[data-stage="2"] .fs:not(.fs-2),.fx-first[data-stage="3"] .fs:not(.fs-3){opacity:.26}
.fx-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
.fx-stages button{display:flex;align-items:center;gap:.55rem;min-height:50px;padding:.45rem .65rem;border-radius:14px;border:1px solid var(--line-2);background:var(--white);color:var(--ink);font:500 .88rem/1.2 var(--font-body);text-align:left;cursor:pointer;
  transition:border-color .3s var(--expo),box-shadow .3s var(--expo),transform 160ms var(--ease-out)}
.fx-stages button:active{transform:scale(.97)}
.fx-stages b{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);color:var(--teal);font:600 .76rem/1 var(--font-body);transition:background-color .3s,color .3s}
.fx-stages small{display:block;margin-top:.1rem;font-size:.76rem;font-weight:400;color:var(--muted)}
.fx-stages button[aria-pressed="true"]{border-color:var(--pink);box-shadow:0 0 0 3px rgba(232,120,138,.18)}
.fx-stages button[aria-pressed="true"] b{background:var(--pink);color:#2A1410}
/* what to bring: tick it off */
.fx-checks,.fx-have,.fx-routes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.fx-check{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:0 .95rem 0 .55rem;border-radius:999px;border:1px solid var(--line-2);background:var(--white);color:var(--ink);font:500 .9rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.fx-check:active{transform:scale(.96)}
.fx-check i{flex:none;width:21px;height:21px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;transition:background-color .3s,border-color .3s}
.fx-check i::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;rotate:-45deg;translate:0 -1px;scale:0;transition:scale .35s var(--expo)}
.fx-check[aria-pressed="true"]{background:rgba(127,205,191,.22);border-color:var(--lagoon)}
.fx-check[aria-pressed="true"] i{background:var(--lagoon);border-color:var(--lagoon)}
.fx-check[aria-pressed="true"] i::after{scale:1}
.fx-bring.is-done .fx-count{color:var(--pink-ink);font-weight:600}
.fx-have li{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;line-height:1;color:var(--teal);padding:.5rem .8rem .5rem .7rem;border-radius:999px;background:rgba(127,205,191,.22)}
.fx-have li::before{content:"";width:9px;height:5px;border-left:1.8px solid currentColor;border-bottom:1.8px solid currentColor;rotate:-45deg;translate:0 -1.5px}
/* bad weather: the sea follows the choice */
.fw-chop,.fw-gust path{transition:opacity .5s ease}
.fw-pad{transition:transform 1s var(--expo),opacity .45s ease}
.fx-wind[data-wind="calm"] .fw-chop,.fx-wind[data-wind="calm"] .fw-gust path{opacity:0}
.fx-wind[data-wind="one"] .fw-chop--all,.fx-wind[data-wind="one"] .fw-g2{opacity:0}
.fx-wind[data-wind="one"] .fw-pad{transform:translateX(-128px)}
.fx-wind[data-wind="all"] .fw-chop--one{opacity:0}
.fx-wind[data-wind="all"] .fw-pad{transform:translateX(-128px);opacity:0}
/* paying: three moments on a line */
.fx-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
.fx-line li{position:relative;display:grid;justify-items:center;align-content:start;gap:.4rem;text-align:center;font-size:.84rem;line-height:1.3;color:var(--muted)}
.fx-line li + li::before{content:"";position:absolute;top:22px;right:calc(50% + 34px);width:calc(100% + .4rem - 68px);border-top:1.5px dashed var(--line-2)}
.fx-line b{display:grid;place-items:center;min-width:46px;height:46px;padding:0 .75rem;border-radius:999px;background:var(--white);border:1px solid var(--line-2);font-family:var(--font-display);font-weight:400;font-size:1.12rem;color:var(--ink);font-variation-settings:"opsz" 40;font-variant-numeric:tabular-nums}
.fx-line li span{max-width:15ch}
.fx-line b svg{width:22px;height:22px;color:#12813F}
.fx-line .is-day b{background:var(--pink);border-color:var(--pink);color:#2A1410}
/* languages */
.fx-lang .gc-bubble{background:var(--white)}
/* kids: the small figure grows with the age */
.fx-kidart{flex:none;width:72px;height:auto;overflow:visible}
.fk-kid{transform-box:fill-box;transform-origin:50% 100%;transform:scale(var(--k,.75));transition:transform .5s var(--expo)}
.fx-routes:empty{display:none}
.fx-routes button{display:inline-flex;align-items:center;gap:.45rem;min-height:38px;padding:0 .9rem;border-radius:999px;border:1px solid rgba(31,110,115,.4);background:var(--white);color:var(--teal);font:500 .88rem/1 var(--font-body);cursor:pointer;
  transition:background-color .3s var(--expo),color .3s var(--expo),border-color .3s var(--expo),transform 160ms var(--ease-out)}
.fx-routes button:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.fx-routes button:hover{background:var(--ink);border-color:var(--ink);color:#fff}}
.fx-routes a{align-self:center}
@media (max-width:900px){
  .faq-grid{grid-template-columns:minmax(0,1fr)}
  .faq-side{display:contents}
  .faq-head{order:1;margin-bottom:1.5rem}
  .faq-list{order:2}
  .faq-ask{order:3;margin-top:1.5rem;max-width:none}
  .faq-list summary{grid-template-columns:38px minmax(0,1fr) auto 34px;gap:.7rem;padding:.85rem .9rem .85rem .85rem}
  .fq-ic{width:38px;height:38px}
  .faq-a{padding:0 .9rem 1.1rem}
}
@media (max-width:640px){
  /* the short answer drops under the question */
  .faq-list summary{grid-template-columns:38px minmax(0,1fr) 34px;grid-template-areas:"ic q plus" "ic peek plus";row-gap:.35rem}
  .fq-ic{grid-area:ic}.fq-q{grid-area:q}.faq-list summary::after{grid-area:plus}
  .fq-peek{grid-area:peek;justify-self:start}
  .faq-list details[open] .fq-peek{display:none}
  .fx{padding:.7rem}
  .fx-stages button{flex-direction:column;align-items:flex-start;gap:.35rem;padding:.5rem .55rem}
  .fx-stages small{display:none}
  .fx-seg button{font-size:.8rem;min-height:48px}
  .fx-line li{font-size:.8rem}
}

/* ═════════ 8. FINAL — sunset into night ═════════ */
.final{--sea:19%;min-height:max(88svh,600px);display:flex;align-items:flex-start;color:#fff;overflow:hidden;padding-top:clamp(6rem,14vh,9rem);padding-bottom:0;isolation:isolate}
@media (max-width:820px){.final{--sea:18%;padding-top:5.5rem}}
.final-scene{position:absolute;inset:0;z-index:-1;--cw:clamp(240px,33vw,620px)}   /* --cw: width of the cliffs on the left */
.final-sky{position:absolute;inset:0 0 var(--sea) 0;background:linear-gradient(180deg,#2B3150 0%,#4F4666 45%,#86607A 70%,#C97F84 88%,#EFB39B 100%)}
.final-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0B2226,#14303A 70%,#243A48);opacity:var(--night,0)}
.final-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.75);opacity:.6}
.final-stars{position:absolute;inset:0 0 var(--sea) 0;opacity:var(--stars,0);
  background:radial-gradient(1.8px 1.8px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 27% 42%,#fff 50%,transparent 51%),radial-gradient(2.2px 2.2px at 38% 12%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 52% 30%,#fff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 64% 8%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 71% 36%,#fff 50%,transparent 51%),radial-gradient(2.2px 2.2px at 83% 20%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 92% 44%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 6% 48%,#fff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 45% 52%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 19% 6%,#fff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 57% 16%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 77% 54%,#fff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 96% 10%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 33% 60%,#fff 50%,transparent 51%)}
.final-horizon{position:absolute;left:0;right:0;top:0;bottom:var(--sea);overflow:hidden}
.final-sun{position:absolute;left:72%;bottom:0;width:clamp(150px,26vw,380px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,var(--sun-y,-20%));
  background:radial-gradient(circle at 50% 42%,#F7B3A4 0%,#E8888D 55%,#D9737D 100%);box-shadow:0 0 140px 50px rgba(232,136,141,.4)}
.final-sea{position:absolute;left:0;right:0;bottom:0;height:var(--sea);background:linear-gradient(180deg,#2A7A80 0%,#174E54 55%,#0B2226 100%)}
.final-sea::before{content:"";position:absolute;left:72%;top:6%;width:clamp(160px,20vw,300px);height:46%;transform:translateX(-50%);opacity:calc(1 - var(--night,0));
  background:repeating-linear-gradient(180deg,rgba(244,169,163,.55) 0 4px,transparent 4px 18px);-webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent)}
.final-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,5vw,4rem);align-items:start}
/* scene extras: moon, headland with a lit window, the paddler going home */
.final-moon{position:absolute;left:84%;top:16%;width:clamp(34px,3.4vw,54px);height:auto;overflow:visible;opacity:var(--stars,0);translate:0 calc((1 - var(--night,0)) * 46px);rotate:-12deg}
.final-moon path{fill:#FBEFD9;filter:drop-shadow(0 0 14px rgba(251,239,217,.6))}
.fm-dark{fill:rgba(251,239,217,.07)}   /* the unlit part of tonight's moon */
.final-head{position:absolute;right:-1%;bottom:-1px;width:clamp(200px,26vw,480px);height:auto;max-width:none}
.final-head path{fill:#2B2A40}
.final-window{fill:#FFD79A;opacity:var(--night,0);filter:drop-shadow(0 0 5px #FFD79A)}
/* the tower's signal fire (a tap lights it and puts it out) */
.final-beacon{opacity:0;transition:opacity .5s ease}
.final-head.is-lit .final-beacon{opacity:1}
.fbc-glow{fill:#FFB869;opacity:.28}
.final-head .fbc-flame{fill:#FF9A4D}   /* two classes: ".final-head path" paints every path of the headland dark */
.final-head .fbc-core{fill:#FFE3A8}
.fbc-flame,.fbc-core{transform-box:fill-box;transform-origin:50% 100%}
/* a faint band of star dust across the sky, and the moon's light on the water */
.final-stars::after{content:"";position:absolute;left:-10%;right:-10%;top:4%;height:46%;rotate:-14deg;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 50%,rgba(214,226,255,.12),rgba(214,226,255,0) 70%),radial-gradient(1px 1px at 22% 40%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 31% 62%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 44% 35%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 52% 58%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 61% 44%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 69% 66%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 78% 38%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 38% 50%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 57% 30%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 47% 70%,#fff 50%,transparent 51%);opacity:.75}
.final-moonlight{position:absolute;left:84%;top:4%;width:clamp(46px,5vw,84px);height:62%;translate:-50% 0;opacity:calc(var(--stars,0) * .5);pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(251,239,217,.55) 0 2px,rgba(251,239,217,0) 2px 9px);-webkit-mask:radial-gradient(60% 55% at 50% 0,#000 20%,#0000 100%);mask:radial-gradient(60% 55% at 50% 0,#000 20%,#0000 100%)}
.final-paddler{position:absolute;left:60%;bottom:calc(var(--sea) - var(--fpw) * .33);--fpw:clamp(110px,10.5vw,190px);width:var(--fpw);translate:-50% 0;pointer-events:none}   /* 60%: the three guests trail to the left and must clear the moored boat */
/* the three guests behind the guide: same placing as in the hero (.hp-mate), each with a lantern */
.fp-mate{position:absolute;left:calc(var(--fpw) * var(--dx));bottom:calc(var(--fpw) * (.1667 * (1 - var(--s)) + var(--up)));width:calc(var(--fpw) * var(--s));filter:brightness(calc(1 - var(--night,0) * .14))}
.fp-mate--1{--s:.82;--dx:-.62;--up:.026}
.fp-mate--2{--s:.74;--dx:-1.15;--up:.05}
.fp-mate--3{--s:.68;--dx:-1.62;--up:.072}
.fp-mate::before{content:"";position:absolute;left:85%;top:75%;width:78%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,215,154,.4) 0%,rgba(255,215,154,.12) 36%,rgba(255,215,154,0) 62%);opacity:var(--night,0)}
/* each lantern's light on the water */
.fp-mate::after,.final-paddler::after{content:"";position:absolute;left:82%;top:86%;width:7%;height:46%;border-radius:50%;background:linear-gradient(180deg,rgba(255,215,154,.55),rgba(255,215,154,0));filter:blur(2.5px);opacity:calc(var(--night,0) * .9)}
.final-paddler::after{left:84%}
.final-say{z-index:2}
.final-paddler svg{position:relative;display:block;width:100%;height:auto;overflow:visible}
.fp-lamp{fill:#FFD79A;opacity:calc(.25 + var(--night,0) * .75)}
.final-lantern{position:absolute;left:62%;top:42%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,215,154,.42) 0%,rgba(255,215,154,.14) 34%,rgba(255,215,154,0) 62%);opacity:var(--night,0)}
@media (max-width:1700px){.final-moon{left:57%;top:11%}.final-moonlight{left:57%}}   /* further right it sits behind the "Tomorrow in Malta" card */
@media (max-width:820px){.final-paddler{left:66%}.final-moon{left:78%;top:8%}.final-moonlight{left:78%}}   /* phones: the guide leads on the right, the guests fit to his left */
/* left side: cliffs with two sea caves and a village with its church; the windows come on with the night */
.final-cliff{position:absolute;left:-1px;bottom:-1px;width:var(--cw);height:auto;max-width:none;cursor:pointer}
.fc-rock{fill:#2B2A40}
.fc-line{fill:none;stroke:#2B2A40;stroke-width:1.1;stroke-linecap:round}
.fc-palm{fill:none;stroke:#2B2A40;stroke-width:2.2;stroke-linecap:round}
.fc-strata{fill:none;stroke:#3B3956;stroke-width:1.2;stroke-linecap:round}
.fc-cave{fill:#14132A}
.fc-glow{fill:#49C2BC;opacity:calc(.1 + var(--night,0) * .4)}
.fc-dome-glow{opacity:calc(var(--night,0) * .5)}   /* the glow of the village lights in the air above it */
.fc-win rect,.fc-win path{fill:#FFD79A;opacity:calc(var(--night,0) * var(--o,1));transition:opacity .35s}
.final-cliff.is-festa .fc-win rect,.final-cliff.is-festa .fc-win path{opacity:1}
/* festa lights strung between the roofs: they come on with the night and blink while the fireworks go */
.fc-bulbs{opacity:calc((var(--night,0) - .3) * 1.8)}
.fc-bulbs path{fill:none;stroke:rgba(255,255,255,.28);stroke-width:.5}
.fc-bulbs circle{filter:drop-shadow(0 0 2px currentColor)}
/* the village lights on the water */
.final-sea::after{content:"";position:absolute;left:calc(var(--cw) * .03);top:5%;width:calc(var(--cw) * .36);height:38%;opacity:calc(var(--night,0) * .5);
  background:repeating-linear-gradient(180deg,rgba(255,215,154,.5) 0 3px,transparent 3px 15px);-webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent)}
/* a luzzu moored off the cliffs; a click rocks it and puts its lamp out / on */
.final-boat{position:absolute;left:36%;bottom:calc(var(--sea) - var(--bw) * .17);--bw:clamp(84px,7vw,128px);width:var(--bw);translate:-50% 0;cursor:pointer}
.final-boat svg{position:relative;display:block;width:100%;height:auto;overflow:visible;filter:brightness(calc(.95 - var(--night,0) * .3))}
.fb-lamp{fill:#FFD79A;opacity:calc(.3 + var(--night,0) * .7);transition:opacity .4s}
.final-boat-glow{position:absolute;left:50%;top:15%;width:125%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,215,154,.42) 0,rgba(255,215,154,.13) 36%,rgba(255,215,154,0) 62%);opacity:var(--night,0);transition:opacity .4s;pointer-events:none}
.final-boat.is-off .fb-lamp{opacity:.14}
.final-boat.is-off .final-boat-glow{opacity:0}
/* "tap the village": shown once it is dark */
.final-hint{position:absolute;left:clamp(.8rem,1.4vw,1.5rem);bottom:calc(var(--sea) + var(--cw) * .1);margin:0;padding:.36rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(11,34,38,.4);
  font-size:.74rem;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.9);opacity:calc((var(--night,0) - .62) * 5);pointer-events:none}
@media (max-width:820px){.final-cliff,.final-boat,.final-hint,.final-sea::after{display:none}}
.final-hint--tower{left:auto;right:clamp(.8rem,1.4vw,1.5rem);bottom:calc(var(--sea) + clamp(.5rem,1.6vw,1.8rem))}
/* a tap on the sea: rings spread and a fish jumps; a shooting star leaves a wish */
.final-ring{position:absolute;width:150px;height:40px;margin:-20px 0 0 -75px;border-radius:50%;border:2px solid rgba(221,247,242,.6);pointer-events:none;animation:hero-ripple 1.2s var(--ease-out) forwards}
.final-ring::after{content:"";position:absolute;inset:24%;border-radius:50%;border:2px solid rgba(221,247,242,.4)}
.final-fish{position:absolute;width:34px;height:17px;margin:-8px 0 0 -17px;pointer-events:none;animation:final-fish .95s linear forwards}
.final-fish svg{display:block;width:100%;height:100%;overflow:visible}
@keyframes final-fish{0%{translate:-34px 6px;rotate:-58deg;opacity:0;animation-timing-function:cubic-bezier(.2,.7,.4,1)}14%{opacity:1}50%{translate:0 -48px;rotate:0deg;animation-timing-function:cubic-bezier(.6,0,.8,.3)}88%{opacity:1}100%{translate:34px 6px;rotate:58deg;opacity:0}}
.final-wish{position:absolute;translate:-50% 0;padding:.3rem .65rem;border-radius:999px;background:rgba(11,34,38,.45);border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.92);font-size:.76rem;font-weight:500;white-space:nowrap;pointer-events:none;animation:final-wish 2.6s ease forwards}
@keyframes final-wish{0%{opacity:0;translate:-50% 8px}15%,75%{opacity:1;translate:-50% 0}100%{opacity:0;translate:-50% -8px}}
/* a firework over the village: a streak up, then sparks */
.final-rocket{position:absolute;width:2px;height:18px;margin-left:-1px;border-radius:2px;pointer-events:none;background:linear-gradient(180deg,#FFD79A,rgba(255,215,154,0));animation:final-rise .45s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes final-rise{from{translate:0 var(--rise);opacity:.2}to{translate:0 0;opacity:1}}
.final-spark{position:absolute;width:var(--sz,5px);height:var(--sz,5px);margin:calc(var(--sz,5px) / -2) 0 0 calc(var(--sz,5px) / -2);border-radius:50%;pointer-events:none;background:currentColor;box-shadow:0 0 12px 2px currentColor;animation:final-spark var(--dur,1.15s) cubic-bezier(.16,.8,.3,1) forwards}
/* the flash at the heart of a burst */
.final-flash{position:absolute;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,236,204,.6) 0,rgba(255,236,204,.16) 36%,rgba(255,236,204,0) 66%);animation:final-flash .7s ease-out forwards}
@keyframes final-flash{from{opacity:1;scale:.25}to{opacity:0;scale:1.25}}
@keyframes final-spark{from{translate:0 0;opacity:1;scale:1}72%{opacity:1}to{translate:var(--x) var(--y);opacity:0;scale:.3}}
@keyframes fb-rock{0%,100%{rotate:0deg}25%{rotate:-5deg}60%{rotate:4deg}85%{rotate:-2deg}}
/* a click on the sky sends a shooting star */
.final-shoot{position:absolute;width:120px;height:2px;border-radius:2px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);transform-origin:100% 50%;rotate:24deg;animation:final-shoot .9s var(--ease-out) forwards}
@keyframes final-shoot{from{translate:-140px -62px;opacity:0;scale:.4 1}25%{opacity:1}to{translate:150px 66px;opacity:0;scale:1 1}}
/* tomorrow's sun times, on glass */
.final-next{justify-self:end;width:min(100%,380px);padding:1.3rem 1.4rem 1.2rem;border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.28);background:rgba(11,34,38,.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 30px 60px -40px rgba(0,0,0,.6)}
.final-next[hidden]{display:none}
.fn-title{margin:0 0 .5rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#FFD9CF}
.fn-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;border-top:1px solid rgba(255,255,255,.18)}
.fn-row small{display:flex;align-items:center;gap:.4rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.75)}
.fn-g{flex:none;width:15px;height:15px;color:#FFD9CF}
.fn-row strong{display:block;font-family:var(--font-display);font-weight:400;font-size:1.6rem;line-height:1.15;color:#fff;font-variation-settings:"opsz" 40;font-variant-numeric:tabular-nums}
.fn-count{margin:.3rem 0 0;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.18);font-size:.92rem;color:rgba(255,255,255,.85)}
.fn-count:empty{display:none}
.fn-phase{margin:.25rem 0 0;font-size:.92rem;color:rgba(255,255,255,.85)}   /* not .fn-moon: the footer's sun arc already uses that name */
.fn-phase[hidden]{display:none}
/* between the last sunrise / sunset and the next: a line with a dot where we are now */
.fnb{display:flex;align-items:center;gap:.6rem;margin:.55rem 0 .15rem}
.fnb[hidden]{display:none}
.fnb-line{position:relative;flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.22)}
.fnb-line::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--f,0%);border-radius:2px;background:#FFD9CF}
.fnb-dot{position:absolute;left:var(--f,0%);top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#FBEFD9;box-shadow:0 0 0 3px rgba(251,239,217,.2),0 0 10px rgba(251,239,217,.7)}
.fnb.is-day .fnb-dot{background:#FFD79A;box-shadow:0 0 0 3px rgba(255,215,154,.25),0 0 12px rgba(255,215,154,.9)}
@media (max-width:900px){.final-inner{grid-template-columns:minmax(0,1fr)}.final-next{justify-self:start;margin-bottom:16rem}}
.final h2{color:#fff;max-width:15ch;font-size:clamp(2.3rem,5vw,4.1rem);text-shadow:0 2px 30px rgba(11,34,38,.35)}
.final h2 em{color:#FFD9CF}
.final-copy > p{font-size:1.1rem;margin-bottom:2rem;max-width:40ch}

/* ═════════ FOOTER — night ═════════ */
.site-footer::before{content:"";position:absolute;inset:0 0 40% 0;opacity:.45;pointer-events:none;background:radial-gradient(1.8px 1.8px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 27% 42%,#fff 50%,transparent 51%),radial-gradient(2.2px 2.2px at 38% 12%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 52% 30%,#fff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 64% 8%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 71% 36%,#fff 50%,transparent 51%),radial-gradient(2.2px 2.2px at 83% 20%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 92% 44%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 6% 48%,#fff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 45% 52%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 19% 6%,#fff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 57% 16%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 77% 54%,#fff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 96% 10%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 33% 60%,#fff 50%,transparent 51%)}
.site-footer{position:relative;background:var(--night);color:rgba(255,255,255,.78);padding:clamp(1.8rem,3.5vw,2.8rem) 0 1.6rem;font-size:.95rem;overflow:hidden}
.footer-top{position:relative;display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr) minmax(0,270px);gap:clamp(1.6rem,3vw,2.6rem);align-items:start}
.fb-id{display:flex;align-items:center;gap:1.1rem;margin-bottom:1rem}
.footer-mark{flex:none;display:inline-grid;place-items:center;width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 45% 38%,#F4D6D1,#E4B7B3);box-shadow:0 0 0 7px rgba(235,203,200,.08);transition:box-shadow .5s var(--expo),rotate .6s var(--expo)}
.footer-mark img{width:63px;height:auto}
@media (hover:hover) and (pointer:fine){.footer-mark:hover{box-shadow:0 0 0 12px rgba(235,203,200,.14);rotate:-6deg}}
.footer-name{margin:0;font-family:var(--font-display);font-size:1.7rem;line-height:1.1;color:#fff;font-variation-settings:"opsz" 48}
.footer-name span{color:var(--blush)}
.footer-brand > p:not(.footer-name){max-width:34ch;margin-bottom:.6rem}
.footer-langs{font-size:.86rem;color:var(--blush)}
/* each language is a way into the guide's chat in that language */
.footer-langs button{all:unset;cursor:pointer;padding:.45rem 0;margin:-.45rem 0;color:inherit;background:linear-gradient(currentColor,currentColor) 0 calc(100% - .35rem)/100% 1px no-repeat;background-size:0 1px;transition:background-size .45s var(--expo),color .25s}
.footer-langs button:hover,.footer-langs button:focus-visible{background-size:100% 1px;color:#fff}
.footer-langs button:focus-visible{outline:2px solid var(--blush);outline-offset:3px;border-radius:4px}
html:not(.js) .footer-langs button{pointer-events:none}
/* live Malta time: the sun rides today's arc; a crescent hangs there at night */
.foot-now{display:inline-flex;align-items:center;gap:.9rem;margin-top:.7rem;padding:.6rem 1rem .6rem .7rem;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.04)}
.foot-now[hidden]{display:none}
.fn-arc{width:92px;height:auto;flex:none;overflow:visible}
.fn-track{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.3;stroke-dasharray:2.5 4.5}
.fn-hz{stroke:var(--mint,#7FCDBF);stroke-width:1.5;stroke-linecap:round}
.fn-sun{fill:#F3A9A0;filter:drop-shadow(0 0 5px rgba(246,190,138,.9))}
.fn-moon{opacity:0}.fn-moon path{fill:#FBEFD9}.fn-moon .fn-moon-dark{fill:rgba(251,239,217,.12)}   /* tonight's real phase: app.js draws the lit part */
.foot-now.is-night .fn-sun{opacity:0}
.foot-now.is-night .fn-moon{opacity:1}
.foot-now p{margin:0;display:grid;gap:.1rem;max-width:none}
.foot-now strong{font-family:var(--font-display);font-weight:400;font-size:1.5rem;line-height:1;color:#fff;font-variation-settings:"opsz" 40;font-variant-numeric:tabular-nums}
.foot-now span{font-size:.8rem;line-height:1.35;color:rgba(255,255,255,.78)}
.foot-title{font-family:var(--font-body);font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;color:var(--blush);margin:0 0 1rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer a,.foot-link{color:#fff;text-decoration:none}
.site-footer a.btn-wa{color:#062B14}   /* dark on WhatsApp green (white was 2:1) */
/* nine routes: a small map beside the numbered names; a name lights its dot and a dot lights its name */
.fr-body{display:grid;grid-template-columns:clamp(124px,11.5vw,150px) minmax(0,1fr);gap:clamp(1rem,2vw,1.6rem);align-items:center}
.foot-map{display:block;width:100%;height:auto;overflow:visible}
.fm-land path{fill:rgba(46,138,143,.34);stroke:rgba(127,205,191,.5);stroke-width:2;stroke-linejoin:round}
.fm-pin{cursor:pointer}
.fm-hit{fill:transparent}
.fm-dot{fill:var(--pink);stroke:var(--night);stroke-width:6;transform-box:fill-box;transform-origin:center;transition:transform .35s var(--expo),fill .25s}
.fm-ping{fill:none;stroke:var(--blush);stroke-width:5;opacity:0;transform-box:fill-box;transform-origin:center}
.fm-pin.is-hover .fm-dot{transform:scale(1.8);fill:#FFD9CF}
.fr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.7rem,1fr));gap:.1rem .9rem}
.foot-link{display:flex;align-items:center;gap:.55rem;width:100%;padding:.34rem 0;min-height:30px;font:inherit;font-size:.9rem;line-height:1.25;background:none;border:0;cursor:pointer;text-align:left;transition:color .25s,translate .35s var(--expo)}
.foot-link b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);font:600 .68rem/1 var(--font-body);color:var(--blush);font-variant-numeric:tabular-nums;transition:background-color .3s,color .3s,border-color .3s}
.foot-link:hover,.foot-link:focus-visible,.foot-link.is-hover{color:#FFD9CF;translate:3px 0}
.foot-link:hover b,.foot-link:focus-visible b,.foot-link.is-hover b{background:var(--pink);border-color:var(--pink);color:#2A1410}
.foot-link--own b{border-style:dashed}
.fr-hint{display:flex;align-items:center;gap:.6rem;margin:1rem 0 0;font-size:.84rem;line-height:1.4;color:rgba(255,255,255,.7)}
.fr-hint span{flex:none;width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px rgba(232,120,138,.22)}
/* contact: a small card with the guide */
.fc-card{padding:1.1rem 1.15rem 1rem;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:rgba(255,255,255,.04)}
.fc-me{display:flex;align-items:center;gap:.7rem;margin:0 0 .9rem;font-size:.92rem;line-height:1.4;color:rgba(255,255,255,.88)}
.fc-me .gc-av{width:40px;height:40px;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.foot-wa{margin-bottom:.8rem;gap:.55rem;width:100%}
.foot-wa svg{width:18px;height:18px;position:relative;z-index:1}
.fc-card li{display:flex;align-items:center;gap:.5rem;min-height:38px}
.foot-ic{display:inline-flex;align-items:center;gap:.6rem;font-size:.93rem;background:linear-gradient(currentColor,currentColor) 0 92%/0 1px no-repeat;transition:background-size .45s var(--expo),color .2s}
.foot-ic:hover,.foot-ic:focus-visible{background-size:100% 1px;color:var(--blush)}
.foot-ic svg{width:18px;height:18px;flex:none;color:var(--blush)}
.foot-copy{flex:none;display:grid;place-items:center;width:34px;height:34px;margin-left:auto;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:rgba(255,255,255,.85);cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.foot-copy .fc-i{width:14px;height:14px}
.foot-copy .fc-i--ok,.foot-copy.is-done .fc-i--copy{display:none}
.foot-copy.is-done .fc-i--ok{display:block}
.foot-copy[hidden]{display:none}
.foot-copy.is-done{background:var(--blush);border-color:var(--blush);color:#2A1410}
@media (hover:hover) and (pointer:fine){.foot-copy:hover{border-color:var(--blush);color:#fff}}
/* the page's sections as a row of pills */
.footer-explore{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:.8rem 1.4rem;margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.4rem,2.6vw,1.9rem);border-top:1px solid rgba(255,255,255,.12)}
.footer-explore .foot-title{margin:0}
.fe-pills{display:flex;flex-wrap:wrap;gap:.45rem}
.fe-pills a{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:0 1rem 0 .8rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:.9rem;font-weight:500;color:#fff;transition:background-color .3s var(--expo),border-color .3s var(--expo),color .3s,translate .35s var(--expo)}
.fe-pills svg{width:17px;height:17px;flex:none;color:var(--blush);transition:color .3s,rotate .5s var(--expo)}
.fe-pills a:hover,.fe-pills a:focus-visible{background:#FFD9CF;border-color:#FFD9CF;color:#2A1410;translate:0 -2px}
.fe-pills a:hover svg,.fe-pills a:focus-visible svg{color:#2A1410;rotate:-10deg}
/* under 1280 the middle column is too narrow for two columns of names: the routes take a row of their own */
@media (max-width:1279px){.footer-top{grid-template-columns:minmax(0,1fr) minmax(0,300px)}.footer-routes{grid-column:1/-1;order:3}}
@media (max-width:640px){.footer-top{grid-template-columns:minmax(0,1fr)}.footer-routes{order:0}.fr-body{grid-template-columns:minmax(0,1fr)}.fr-map{width:100%;max-width:290px;margin-inline:auto}.fr-list{grid-template-columns:1fr 1fr}}
@media (max-width:380px){.fr-list{grid-template-columns:1fr}}
/* sign-off: the last line of the day, and a way back to sunrise */
.footer-signoff{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:1.6rem 2.5rem;flex-wrap:wrap;margin-top:clamp(1.6rem,3vw,2.2rem);padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid rgba(255,255,255,.12)}
.signoff-line{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;color:#fff;font-variation-settings:"opsz" 144;letter-spacing:-.015em}
.signoff-line em{font-style:normal;color:var(--blush)}
.signoff-sub{display:flex;align-items:center;gap:.7rem;margin:.9rem 0 0;font-size:.95rem;color:rgba(255,255,255,.85)}
.signoff-sub a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:.2em}
.signoff-sub a:hover{color:var(--blush)}
.signoff-sub .gc-av{box-shadow:0 0 0 2px rgba(255,255,255,.85)}
/* the camp: boards in the sand, lantern, the dog asleep (wakes on a tap) */
.foot-camp{display:flex;align-items:flex-end;gap:1.4rem;flex-wrap:wrap}
.fc-art{display:block;width:clamp(200px,20vw,260px);padding:0;border:0;background:none;cursor:pointer;border-radius:14px}
.fc-art svg{display:block;width:100%;height:auto;overflow:visible}
.fc-art:focus-visible{outline:3px solid var(--blush);outline-offset:4px}
.fc-awake,.fc-woof{opacity:0;transition:opacity .25s}
.fc-asleep,.fc-zz{transition:opacity .25s}
.fc-board{transform-box:fill-box}
.fc-art.is-awake .fc-asleep,.fc-art.is-awake .fc-zz{opacity:0}
.fc-art.is-awake .fc-awake,.fc-art.is-awake .fc-woof{opacity:1}
.fc-tail{transform-box:fill-box;transform-origin:100% 100%}
.fc-woof{transform-box:fill-box;transform-origin:20% 100%}
.fc-side{display:grid;gap:.7rem;justify-items:start}
.fc-cap{margin:0;font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.8);max-width:26ch}
.to-top{display:inline-flex;align-items:center;gap:.8rem;font-size:.9rem;font-weight:600;color:#fff;padding:.55rem 1.1rem .55rem .55rem;border:1px solid rgba(255,255,255,.3);border-radius:999px;transition:border-color .3s,background-color .3s}
.to-top__sun{position:relative;width:36px;height:36px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.08)}
.to-top__sun::after{content:"";position:absolute;left:5px;right:5px;bottom:10px;height:1.5px;background:var(--mint);border-radius:2px}
.to-top__sun b{position:absolute;left:50%;bottom:11px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 45% 40%,#FBD0BF,#E8788A);transform:translateY(9px);transition:transform .6s var(--expo)}
@media (hover:hover) and (pointer:fine){.to-top:hover{border-color:var(--blush);background:rgba(255,255,255,.05)}.to-top:hover .to-top__sun b{transform:translateY(0)}}
.to-top:focus-visible .to-top__sun b{transform:translateY(0)}
.footer-bottom{position:relative;display:flex;justify-content:space-between;align-items:center;gap:.6rem 1.5rem;flex-wrap:wrap;margin-top:1.6rem}
.legal{margin:0;font-size:.82rem;color:rgba(255,255,255,.7)}
@media (max-width:700px){.foot-camp{width:100%}.fc-art{width:min(100%,240px)}}

/* ── sticky mobile bar (slides in after the hero buttons scroll away) ────── */
.sticky-bar{display:none}
@media (max-width:820px){
  .sticky-bar{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;position:fixed;left:0;right:0;bottom:0;padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));background:rgba(251,245,242,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);z-index:90}
  body{padding-bottom:84px}
  .sticky-bar.auto{transform:translateY(110%);transition:transform .45s var(--ease-drawer)}
  .sticky-bar.auto.show,.sticky-bar.auto:focus-within{transform:none}
  .sticky-bar .btn{padding:.95rem 1rem}
}

/* ── focus ─────────────────────────────────────────────────────────────── */
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.hero a:focus-visible,.film a:focus-visible,.film .clip:focus-visible,.tour--custom a:focus-visible,.final a:focus-visible,.site-footer a:focus-visible,.menu a:focus-visible{outline-color:#fff}

/* ═════════ MOTION: initial states (only while motion.js is in charge) ═════════
   .js is set before paint by js/flag.js; .no-anim is added for reduced motion or if
   GSAP is missing. Without JS, or 3 s after a failed load, nothing is ever hidden. */
.js:not(.no-anim) [data-hero] > *,.js:not(.no-anim) .hero-facts li{opacity:0}
.js:not(.no-anim) [data-split]{visibility:hidden}
.js:not(.no-anim) [data-rise]{opacity:0}
.js:not(.no-anim) .eyebrow .rule{transform:scaleX(0)}

@media (prefers-reduced-motion:no-preference){
  /* day cycle: one 12 s pass, sunrise → midday → sunset, then it rests at sunset.
     Pausable/replayable via .sky-toggle (WCAG 2.2.2: motion > 5 s needs a pause). */
  .hero-fallback.play{--cycle:12s}
  .hero-fallback.play .sun-track{animation:sun-x var(--cycle) linear .6s both}
  .hero-fallback.play .sun-lift{animation:sun-lift var(--cycle) .6s both}
  .hero-fallback.play .hero-sun{animation:sun-scale var(--cycle) ease-in-out .6s both}
  .hero-fallback.play .hero-sun::after{animation:sun-noon var(--cycle) ease-in-out .6s both}
  .hero-fallback.play .sky-dawn{animation:dawn var(--cycle) ease-in-out .6s both}
  .hero-fallback.play .sky-day{animation:midday var(--cycle) ease-in-out .6s both}
  .hero-fallback.play .sea-day{animation:midday-sea var(--cycle) ease-in-out .6s both}
  .hero-fallback.play .hero-glints{animation:sun-x var(--cycle) linear .6s both,glints var(--cycle) ease-in-out .6s both}
  .hero-fallback.paused *,.hero-fallback.paused *::after{animation-play-state:paused !important}
  .fm-pin.is-hover .fm-ping{animation:fm-ping .9s var(--ease-out)}
  .rent-advice.pop span{animation:sd-pop .4s var(--expo) both}
  .hub-fleet svg{animation:sd-pop .45s var(--expo) both}
  .hub-detail.pop .hd-text,.hub-detail.pop .hd-extra{animation:sd-pop .4s var(--expo) both}
  .gift-card.is-wrapped .gw-bow{animation:gw-wiggle 2.4s ease-in-out 1.2s 2}
  @keyframes gw-wiggle{0%,100%{rotate:0deg}25%{rotate:-5deg}60%{rotate:4deg}}
  .gs-note.pop{animation:sd-pop .35s var(--expo) both}
  .gift-card.is-sent ~ .gift-stamp{animation:gift-stick .5s var(--expo) both}
  @keyframes gift-stick{from{opacity:0;scale:1.5;translate:0 -10px}}
  /* guide, while the section is on screen (app.js .is-inview): the front photo breathes, the dots on it call a few times, "online" pulses */
  .guide.is-inview .gcard.is-front img{animation:g-kb 16s ease-in-out infinite alternate}
  @keyframes g-kb{from{scale:1}to{scale:1.055}}
  .guide.is-inview .gcard.is-front .gtag i::after{animation:fm-ping 2.2s ease-out 1.4s 5}
  .guide.is-inview .gcard.is-front .gtag:nth-of-type(2) i::after{animation-delay:1.9s}.guide.is-inview .gcard.is-front .gtag:nth-of-type(3) i::after{animation-delay:2.4s}
  .guide.is-inview .gchat-status i::after{animation:fm-ping 2.4s ease-out infinite}
  .guide-cta .btn.is-all{animation:g-all .9s var(--expo) 2}
  @keyframes g-all{0%{box-shadow:0 0 0 0 rgba(232,120,138,.55)}100%{box-shadow:0 0 0 16px rgba(232,120,138,0)}}
  .tour-fav.pop svg{animation:fav-pop .45s var(--expo)}
  @keyframes fav-pop{0%{scale:.6}60%{scale:1.25}100%{scale:1}}
  .fa-self.pop{animation:sd-pop .4s var(--expo) both}
  .fc-art.is-awake .fc-board{animation:fc-sway 1.3s ease-in-out}
  .fc-art.is-awake .fc-board:nth-of-type(2){animation-delay:.08s}.fc-art.is-awake .fc-board:nth-of-type(3){animation-delay:.16s}
  @keyframes fc-sway{0%,100%{translate:0 0}30%{translate:2.5px 0}65%{translate:-1.5px 0}}
  .fc-zz text{animation:fc-zz 3.2s ease-in-out infinite}.fc-zz text:nth-child(2){animation-delay:.8s}
  @keyframes fc-zz{0%,100%{opacity:.35;translate:0 2px}50%{opacity:1;translate:0 -2px}}
  .faq-foot.is-done .ff-dots i{animation:ff-wave .6s var(--expo) calc(var(--k) * 60ms) both}
  @keyframes ff-wave{0%,100%{translate:0 0}45%{translate:0 -6px}}
  .rr-say.pop{animation:sd-pop .4s var(--expo) both}
  .route-rider.is-hop svg{animation:rr-hop .7s var(--ease-out) 2}
  @keyframes rr-hop{0%,100%{translate:0 0}40%{translate:0 -9px}}
  .sd-go.is-ready .arrow{animation:sd-nudge 1s ease-in-out 3}
  @keyframes sd-nudge{0%,100%{translate:0 0}50%{translate:0 4px}}
  .hub-detail.pop .hd-boards svg{animation:sd-pop .45s var(--expo) both}.hub-detail.pop .hd-boards svg:nth-child(2){animation-delay:.07s}.hub-detail.pop .hd-boards svg:nth-child(3){animation-delay:.14s}
  /* guide chat: the typing dots bounce; the status dot breathes a few times; photo tags pulse until touched */
  .gc-typing i{animation:gc-type 1s ease-in-out infinite}
  .gc-typing i:nth-child(2){animation-delay:.15s}.gc-typing i:nth-child(3){animation-delay:.3s}
  @keyframes gc-type{0%,60%,100%{translate:0 0;opacity:.45}30%{translate:0 -4px;opacity:1}}
  .gchat-status i{animation:fa-on 2.4s ease-out 1s 3}
  .gcard.is-front .gtag i{animation:gtag-pulse 2.2s ease-out 1.4s 3}
  @keyframes gtag-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.8),0 4px 10px rgba(16,52,58,.4)}70%,100%{box-shadow:0 0 0 12px rgba(255,255,255,0),0 4px 10px rgba(16,52,58,.4)}}
  .gc-emblem.pop{animation:sd-pop .5s var(--expo)}
  .final-boat.is-rock svg{animation:fb-rock 1.6s ease-in-out}
  .final.is-live .final-stars i{animation:fs-twinkle 3.4s ease-in-out var(--dl,0s) infinite}   /* only while the finale is on screen (motion.js) */
  @keyframes fs-twinkle{0%,100%{opacity:.25;scale:.7}50%{opacity:1;scale:1.25}}
  .final-cliff.is-festa .fc-bulbs circle{animation:fc-blink .5s steps(1) calc(var(--k) * 70ms) 5}
  @keyframes fc-blink{0%{opacity:1}50%{opacity:.15}100%{opacity:1}}
  .final-say.pop{animation:sd-pop .35s var(--expo) both}
  .final-head.is-lit .fbc-flame{animation:fbc-flick .5s ease-in-out infinite alternate}
  .final-head.is-lit .fbc-core{animation:fbc-flick .36s ease-in-out infinite alternate-reverse}
  .final-head.is-lit .fbc-glow{animation:fbc-glow 1.2s ease-in-out infinite alternate}
  @keyframes fbc-flick{from{transform:scale(1,.9) skewX(-4deg)}to{transform:scale(.92,1.12) skewX(5deg)}}
  @keyframes fbc-glow{from{opacity:.2}to{opacity:.38}}
  /* booking: the picked day pops, the stamp lands */
  .day.is-selected{animation:day-pop .35s var(--expo)}
  @keyframes day-pop{from{scale:.7}to{scale:1}}
  /* tours: the dice roll while the pins light up in turn; a located pin pings; the hint arrow nods three times */
  .rf-lucky.is-rolling svg{animation:rf-roll .5s linear infinite}
  @keyframes rf-roll{to{rotate:360deg}}
  .rm-pin.is-located .rm-ping{animation:fm-ping 1s var(--ease-out) 2}
  .tours.mode-stack .route-hint::before{animation:rh-nod 1.4s var(--ease-in-out) 1s 3}
  @keyframes rh-nod{0%,100%{translate:0 0}50%{translate:0 4px}}
  /* gift: confetti bits fly out from the voucher and fade */
  .gift-bit{animation:gift-bit var(--d,1.1s) cubic-bezier(.16,.8,.3,1) both}
  @keyframes gift-bit{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.5)}65%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}}
  /* FAQ: the reply dot breathes a few times; new chat lines and answers pop in; the wind blows three gusts per choice */
  .fa-on i{animation:fa-on 2.4s ease-out 1s 3}
  @keyframes fa-on{0%{box-shadow:0 0 0 0 rgba(29,168,81,.5)}70%,100%{box-shadow:0 0 0 8px rgba(29,168,81,0)}}
  .fa-mine.pop,.fa-match.pop,.fx-out.pop,.fx-lang .gc-bubble.pop,.fx-routes.pop > *{animation:sd-pop .4s var(--expo) both}
  .fx-first[data-stage="1"] .fs-1,.fx-first[data-stage="2"] .fs-2,.fx-first[data-stage="3"] .fs-3{animation:fs-hop .55s var(--expo)}
  @keyframes fs-hop{0%{transform:translateY(0)}40%{transform:translateY(-6px)}100%{transform:translateY(0)}}
  .fx-wind[data-wind="one"] .fw-g1{animation:fw-blow 1.5s ease-out 3}
  .fx-wind[data-wind="all"] .fw-gust path{animation:fw-blow-all 1.3s ease-out 3}
  .fx-wind[data-wind="all"] .fw-chop--all{animation:fw-sway 1.3s ease-in-out 3 alternate}
  @keyframes fw-blow{from{transform:translateX(22px);opacity:0}45%{opacity:1}to{transform:translateX(0);opacity:1}}
  @keyframes fw-blow-all{from{transform:translateX(30px);opacity:0}45%{opacity:1}to{transform:translateX(0);opacity:1}}
  @keyframes fw-sway{from{transform:translateX(0)}to{transform:translateX(-12px)}}
  @keyframes fm-ping{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3.2)}}
  .fc-art.is-awake .fc-tail{animation:fc-wag .28s ease-in-out 8 alternate}
  .fc-art.is-awake .fc-woof{animation:sd-pop .4s var(--expo) both}
  @keyframes fc-wag{from{rotate:-14deg}to{rotate:16deg}}
  .route-stage.is-tabs > .tour.is-active{animation:tour-in .7s var(--expo)}   /* the opened route slides in from the side it came from */
  /* intro arch: the three views cross-fade and slide into each other */
  .v-world,.v-pad-mode,.v-sun-mode{transition:transform 1.3s var(--expo)}
  .v-inside{transition:opacity .5s ease,transform 1.1s var(--expo)}
  .v-in-pad{transition:transform 1.9s cubic-bezier(.2,.7,.2,1) .25s}                    /* he glides in from the mouth once the cave has opened */
  .view-art[data-deep="cave"] .v-in-bob{animation:v-bob 3.2s ease-in-out 2.3s 8 alternate}
  .view-art[data-deep="cave"] .v-in-shimmer path{animation:v-shimmer 2.6s ease-in-out 10 alternate}
  .view-art[data-deep="cave"] .v-in-shimmer path:nth-child(2n){animation-delay:.9s}.view-art[data-deep="cave"] .v-in-shimmer path:nth-child(3n){animation-delay:1.7s}
  @keyframes v-bob{from{transform:translateY(0) rotate(0)}to{transform:translateY(1.6px) rotate(-.8deg)}}
  @keyframes v-shimmer{from{opacity:.25;transform:translateX(0)}to{opacity:1;transform:translateX(5px)}}
  .view-art.is-echo .v-echo-say{animation:v-say 1.5s var(--expo) both}
  .view-art.is-echo .v-echo-woof{animation:v-say 1.3s var(--expo) 1.95s both}
  .view-art.is-echo .v-echo-far{animation:v-echo 1.5s ease-out var(--d,.5s) both}
  @keyframes v-say{0%{opacity:0;transform:scale(.6)}16%,74%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
  @keyframes v-echo{0%{opacity:0;transform:scale(.7)}30%{opacity:var(--o,.8)}100%{opacity:0;transform:scale(1.3)}}
  .view-echo.pop{animation:sd-pop .45s var(--expo) .9s both}
  /* hot tags call for a click a few times each time their view opens, then rest */
  .view-art[data-view="cliffs"]:not([data-deep]) .v-tag--caves .v-tag-ping,.view-art[data-view="water"]:not([data-deep]) .v-tag--bed .v-tag-ping{animation:fm-ping 2s ease-out 1s 8}
  .view-art[data-view="water"] .v-bubbles circle{animation:v-bub 2.6s ease-in .6s 6 both}
  .view-art[data-view="water"] .v-bubbles circle:nth-child(2){animation-delay:1.3s}.view-art[data-view="water"] .v-bubbles circle:nth-child(3){animation-delay:2s}
  @keyframes v-bub{0%{transform:translateY(10px);opacity:0}25%{opacity:1}100%{transform:translateY(-18px);opacity:0}}
  .intro-features li.is-on .if-ic{animation:if-pop .55s var(--expo)}
  @keyframes if-pop{from{scale:.86}to{scale:1}}
  .intro-features.is-demo li.is-on::before{opacity:1;animation:if-fill var(--lap,4.6s) linear both}
  /* the picture is alive while the section is on screen (app.js .is-live): `translate`, so it adds to the scroll drift GSAP puts in `transform` */
  .intro.is-live .v-wave1{animation:v-swell 5.5s ease-in-out infinite alternate}
  .intro.is-live .v-wave2{animation:v-swell 6.5s ease-in-out -2s infinite alternate-reverse}
  .intro.is-live .v-wave3{animation:v-swell 7.5s ease-in-out -1s infinite alternate}
  @keyframes v-swell{from{translate:-7px 0}to{translate:7px 1.5px}}
  .intro.is-live .v-paddler{animation:v-ride 3.4s ease-in-out infinite alternate}
  @keyframes v-ride{from{translate:0 -1.2px}to{translate:0 1.6px}}
  .intro.is-live .v-birds{animation:v-glide 9s ease-in-out infinite alternate}
  @keyframes v-glide{from{translate:-8px 2px}to{translate:12px -5px}}
  .view-art.is-dart .v-fishes path{animation:v-dart 1.25s cubic-bezier(.2,.8,.2,1)}
  .view-art.is-dart .v-fishes path:nth-child(2n){animation-delay:.06s}
  @keyframes v-dart{0%,100%{translate:0 0}22%{translate:-70px -8px}60%{translate:-64px -6px}}
  @keyframes if-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .iw-chips.pop button{animation:sd-pop .4s var(--expo) both}
  .iw-chips.pop button:nth-child(2){animation-delay:.06s}.iw-chips.pop button:nth-child(3){animation-delay:.12s}
  .v-gold,.v-sun-gold,.v-cliff-gold,.v-sea-gold,.v-glints-gold,.v-surface,.v-under,.v-fin,.v-tags{transition:opacity .9s ease}
  .v-fishes{transition:transform 5s cubic-bezier(.2,.6,.2,1) .3s,opacity 1.2s ease .3s}
  /* the paddler crosses with the day and bobs only while the cycle runs (no endless motion) */
  .hero-fallback.play.journey .hero-paddler{animation:hp-journey var(--cycle) cubic-bezier(.4,0,.5,1) .6s both}
  .hero-fallback.play .hp-art{animation:hp-bob calc(var(--cycle) / 3) ease-in-out .6s 3}
  .hero-fallback.play .hp-lead .hp-dog-tail{animation:hp-wag 5.5s ease-in-out 2s infinite}
  .hero-fallback.play .hp-mate--2 .hp-wave{animation:hp-wave 6s ease-in-out 2.6s 3}
  .hp-mate--2.is-waving .hp-wave{animation:hp-wave-now 1.4s ease-in-out}
  @keyframes hp-wave{0%,62%,100%{transform:rotate(0)}68%{transform:rotate(14deg)}76%{transform:rotate(-8deg)}84%{transform:rotate(12deg)}92%{transform:rotate(-5deg)}}
  @keyframes hp-wave-now{0%,100%{transform:rotate(0)}15%{transform:rotate(15deg)}35%{transform:rotate(-9deg)}55%{transform:rotate(13deg)}75%{transform:rotate(-6deg)}}
  .hero-fallback.play .hero-sail{animation:sail-drift var(--cycle) linear .6s both}
  @keyframes sail-drift{from{translate:0 0}to{translate:-7vw 0}}
  .hp-lead.is-woof .hp-dog{animation:hp-hop .55s var(--ease-out)}
  .hero-fallback .hp-lead.is-woof .hp-dog-tail{animation:hp-wag-fast .3s ease-in-out 3}
  .hero-fallback.play .hp-mate--1{animation-delay:1.1s}.hero-fallback.play .hp-mate--2{animation-delay:1.7s}.hero-fallback.play .hp-mate--3{animation-delay:2.2s}   /* the guests bob out of step */
  .hero-say.pop{animation:sd-pop .35s var(--expo) both}
  /* picking sunrise / sunset glides between the two resting states */
  .hero-fallback .sun-track,.hero-fallback .sun-lift,.hero-fallback .hero-glints{transition:transform 1.8s var(--expo)}
  .hero-paddler{transition:left 2.8s cubic-bezier(.45,0,.2,1)}
  .hero-fallback .sky-layer,.hero-fallback .sea-layer,.hero-fallback .hero-sun::after{transition:opacity 1.5s ease}
  .scroll-cue::after{animation:cue 1.6s var(--ease-in-out) .8s 3}
}
@keyframes sun-x{from{transform:translateX(calc(-1 * var(--travel)))}to{transform:none}}
@keyframes sun-lift{
  0%{transform:translateY(calc(var(--sun-size) / 2 + 16px));animation-timing-function:cubic-bezier(.33,.7,.55,1)}
  50%{transform:translateY(calc(-1 * var(--arc-y)));animation-timing-function:cubic-bezier(.45,0,.67,.3)}
  100%{transform:none}}
@keyframes sun-scale{0%{scale:1.06}50%{scale:.72}100%{scale:1}}
@keyframes sun-noon{0%,14%{opacity:0}50%{opacity:1}86%,100%{opacity:0}}
@keyframes dawn{0%,10%{opacity:1}38%,100%{opacity:0}}
@keyframes midday{0%,18%{opacity:0}44%,58%{opacity:1}84%,100%{opacity:0}}
@keyframes midday-sea{0%,18%{opacity:0}44%,58%{opacity:.85}84%,100%{opacity:0}}
@keyframes glints{0%,4%{opacity:0}12%,18%{opacity:1}32%,70%{opacity:0}86%,100%{opacity:1}}
@keyframes cue{0%{transform:translateY(0)}100%{transform:translateY(300%)}}
@media (prefers-reduced-motion:reduce){.fs,.fw-pad,.fw-chop,.fk-kid,.gc-p,.cc-needle,.rm-sun-in{transition:none!important}}
@media (prefers-reduced-motion:reduce){.faq-list details.is-ping,.gc-thread.pop .gc-line,.sd-chat.pop .sd-msg span,.included-body.swap .included-list li{animation:none!important}}
@media (prefers-reduced-motion:reduce){.btn,.btn::before,.arrow,.site-header,.menu,.menu__links a,.gift-card,.slot-sun b,.step-num{transition:none!important}}