/* Travelliyo — design system v2: warm sand canvas, ink type, one dark band (Visa), the logo orange reserved for primary actions.
   Display: Instrument Serif (upright; italic only as an accent). Body: General Sans. Radii 24px cards / 999px pills. Warm soft shadows, no glows. */

/* Base reset */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* Self-hosted fonts (fonts/). Instrument Serif upright + General Sans 500 are preloaded from index.html */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-italic-latin.woff2) format("woff2")}
@font-face{font-family:"General Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/general-sans-400.woff2) format("woff2")}
@font-face{font-family:"General Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/general-sans-500.woff2) format("woff2")}
@font-face{font-family:"General Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/general-sans-600.woff2) format("woff2")}

:root{
  --bg:#f6f1e8;--bg2:#efe8db;--card:#ffffff;--card2:#ece4d5;
  --ink:#17161a;--ink2:#3a3630;--muted:#5f5a52;--dim:#6e685e;
  --line:rgba(23,22,26,.12);--line2:rgba(23,22,26,.22);
  --accent:#ff8a45;--accent-h:#ff7a2e;--accent-soft:#ffe6d6;--accent-text:#b84f12; /* orange as text on light surfaces (4.7:1 on sand, 5:1 on white) */
  /* the one dark band */
  --dark:#14181d;--dark-card:#1d232a;--on-dark:#f6f1e8;--on-dark-muted:rgba(246,241,232,.68);--on-dark-dim:rgba(246,241,232,.5);--dark-line:rgba(255,255,255,.13);
  --shadow:0 24px 60px -28px rgba(60,40,20,.28);--shadow-lg:0 50px 110px -40px rgba(60,40,20,.38);
  --ease:cubic-bezier(.16,1,.3,1);
  --body:"General Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--display:"Instrument Serif",Georgia,"Times New Roman",serif;
  color-scheme:light;
}
/* legacy aliases still referenced by a few components */
:root{--teal:var(--accent);--accent-d:var(--accent);--accent-dh:var(--accent-h)}

/* Lenis takes over scrolling when it loads; these are its required resets */
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
html.splashing{overflow:hidden}
.progress{position:fixed;top:0;left:0;z-index:120;width:100%;height:2px;transform-origin:0 50%;transform:scaleX(0);background:var(--accent);pointer-events:none}

body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;letter-spacing:-.005em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.pf{font-family:var(--display);font-style:normal;font-weight:400}
h1,h2,h3{margin:0;text-wrap:balance}
h2{font-family:var(--display);font-size:clamp(2.6rem,5.6vw,4.4rem);line-height:1;font-weight:400;letter-spacing:-.025em;color:var(--ink)}
h3{font-weight:500;letter-spacing:-.015em}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
section{padding-block:clamp(5rem,9vw,8rem)}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.82rem;font-weight:500;color:var(--muted);padding:.4rem .85rem .4rem .7rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.55);margin-bottom:1.4rem;letter-spacing:0;text-transform:none}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.lead{color:var(--muted);max-width:56ch;font-size:1.1rem;line-height:1.55;margin-top:1.2rem;text-wrap:pretty}
/* section header: headline left, intro right (collapses on phones) */
.shead{display:grid;grid-template-columns:1fr minmax(0,38ch);gap:1rem 4rem;align-items:end}
.shead .eyebrow{grid-column:1/-1;justify-self:start}
.shead h2{grid-column:1}
.shead .lead{grid-column:2;margin:0 0 .5rem}
@media(max-width:860px){.shead{grid-template-columns:1fr}.shead h2,.shead .lead{grid-column:1}.shead .lead{margin:1rem 0 0}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* buttons: orange = primary (ink text), .white = ink filled (nav / legal), .ghost = outline */
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:var(--ink);font-size:.95rem;font-weight:500;white-space:nowrap;padding:.9rem 1.5rem;border-radius:999px;border:1px solid transparent;font-family:var(--body);cursor:pointer;transition:transform .3s var(--ease),background .3s,box-shadow .3s,color .3s,border-color .3s}
.btn:hover{background:var(--accent-h);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(255,138,69,.7)}
.btn.white{background:var(--ink);color:#fff}.btn.white:hover{background:#000;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.btn.ghost{background:transparent;border-color:var(--line2);color:var(--ink)}.btn.ghost:hover{background:rgba(23,22,26,.05);box-shadow:none}

/* nav: a floating pill 12px from the top with the lockup inside */
nav{position:fixed;top:calc(38px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:100;width:min(1180px,100% - 24px);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .5rem .5rem 1.1rem;border-radius:999px;background:rgba(246,241,232,.82);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 30px -18px rgba(60,40,20,.35);transition:box-shadow .5s,background .5s}
nav.solid{background:rgba(246,241,232,.92);box-shadow:0 18px 40px -22px rgba(60,40,20,.45)}
.brand{display:flex;align-items:center}
.brand img{height:30px;width:auto;display:block}
.pill{display:flex;gap:.15rem;margin-left:auto}
.pill a{padding:.5rem .95rem;border-radius:999px;font-size:.92rem;font-weight:500;color:var(--ink2);transition:background .25s,color .25s}
.pill a:hover{background:rgba(23,22,26,.06);color:var(--ink)}
.pill a.on{background:var(--ink);color:#fff}
nav .btn{padding:.7rem 1.2rem;font-size:.9rem}
.menu{display:none;appearance:none;border:1px solid var(--line2);background:transparent;color:var(--ink);font:500 .9rem var(--body);padding:.65rem 1rem;border-radius:999px;cursor:pointer}
@media(max-width:900px){
  .pill{display:none}
  .menu{display:inline-flex;margin-left:auto}
  nav.open .pill{display:grid;position:absolute;top:calc(100% + 10px);left:0;right:0;padding:.6rem;background:rgba(246,241,232,.97);border:1px solid rgba(255,255,255,.7);border-radius:24px;box-shadow:var(--shadow);gap:.2rem}
  nav.open .pill a{padding:.85rem 1rem;font-size:1rem}
}
@media(max-width:480px){.brand img{height:26px}nav{padding-left:.9rem}nav .btn{padding:.6rem 1rem}}

/* hero: an inset media card with the reel inside; copy bottom-left, intro bottom-right; the shot bar sits top-right as glass chips */
.hero{position:relative;padding:calc(112px + env(safe-area-inset-top,0px)) 12px 12px;min-height:100svh;display:flex}
.hero-card{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(100svh - 124px);border-radius:28px;overflow:hidden;background:#0d0f12;isolation:isolate;box-shadow:var(--shadow-lg)}
.hero-card::after{content:"travelliyo";position:absolute;left:50%;bottom:-.2em;transform:translateX(-50%);z-index:4;font-family:var(--display);font-size:clamp(6rem,21vw,21rem);line-height:1;letter-spacing:-.03em;color:rgba(255,255,255,.055);white-space:nowrap;pointer-events:none}
.vignette{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 32%,transparent 45%,rgba(8,9,12,.88) 100%)}
.hero-c{position:relative;z-index:50;display:grid;grid-template-columns:1.25fr .9fr;grid-template-areas:"k k" "h p" "h c";gap:.6rem 3rem;align-items:end;padding:clamp(1.5rem,4vw,3.5rem);color:#fff}
.kicker{grid-area:k;justify-self:start;display:inline-flex;align-items:center;gap:.55rem;font-size:.85rem;font-weight:500;color:rgba(255,255,255,.85);padding:.45rem .9rem .45rem .7rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin-bottom:1.2rem;letter-spacing:0;text-transform:none}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hero-c h1{grid-area:h;font-family:var(--display);line-height:.92;font-weight:400;font-size:clamp(3.2rem,8.2vw,7.6rem);letter-spacing:-.03em;max-width:12ch}
.hero-c h1 .l1{display:block}
.hero-c h1 .l2{display:block;font-style:italic;color:rgba(255,255,255,.72);font-size:.78em;margin-top:.08em;letter-spacing:-.02em}
.hero-c p{grid-area:p;color:rgba(255,255,255,.8);max-width:40ch;font-size:1.08rem;line-height:1.55;text-wrap:pretty;margin:0}
.hero-c .ctas{grid-area:c;display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.6rem}
.hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.06);backdrop-filter:blur(8px)}.hero .btn.ghost:hover{background:rgba(255,255,255,.14)}
.shotbar{position:absolute;z-index:50;top:clamp(1rem,2.5vw,1.6rem);right:clamp(1rem,2.5vw,1.6rem);display:flex;gap:.45rem}
.shotbar button{appearance:none;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:.55rem .9rem .5rem;border-radius:999px;cursor:pointer;display:flex;flex-direction:column;gap:.4rem;min-width:96px;transition:background .3s,border-color .3s}
.shotbar button:hover,.shotbar button.on{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.shotbar b{font-weight:500;font-size:.78rem;color:rgba(255,255,255,.7);transition:color .3s;font-family:var(--body);text-align:left;letter-spacing:0;text-transform:none}
.shotbar button.on b{color:#fff}
.shotbar i{display:block;width:100%;height:2px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.shotbar i::after{content:"";display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.shotbar button.on i::after{animation:prog 4s linear forwards}
@keyframes prog{to{transform:scaleX(1)}}
@media(max-width:900px){.hero-c{grid-template-columns:1fr;grid-template-areas:"k" "h" "p" "c";gap:1rem}.hero-c h1{max-width:none}.hero-c p{max-width:52ch}}
@media(max-width:600px){.shotbar button{min-width:0;padding:.45rem .7rem .4rem}.shotbar b{font-size:.7rem}.hero{padding:calc(102px + env(safe-area-inset-top,0px)) 8px 8px}.hero-card{border-radius:22px;min-height:calc(100svh - 110px)}.hero-c h1{font-size:clamp(2.8rem,13vw,4rem)}.hero-c p{font-size:1rem}.hero-c .ctas{flex-direction:column;align-items:stretch}.hero-c .ctas .btn{justify-content:center}}
@media(max-height:720px){.hero-c h1{font-size:clamp(2.6rem,6.5vw,5rem)}.hero-c p{font-size:.98rem}}
@keyframes heroReveal{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes heroFadeUp{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
.ha{opacity:0;animation-fill-mode:forwards;animation-timing-function:var(--ease);animation-play-state:paused} /* intro animations wait for the splash curtain to lift (body.ready) */
body.ready .ha{animation-play-state:running}
.hr{animation-name:heroReveal;animation-duration:1.1s}.hf{animation-name:heroFadeUp;animation-duration:1s}

/* hero video layer */
.vids{position:absolute;inset:0;z-index:3;pointer-events:none}
.vids video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease;transform:scale(1.02);filter:blur(1px)}
.vids video.on{opacity:.6;animation:kenburns 5.5s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.1)}}

/* splash: ink curtain with the lockup wiping in and an orange progress line; lifts once fonts are ready */
.splash{position:fixed;inset:0;z-index:300;background:var(--dark);display:grid;place-items:center;transition:transform .95s cubic-bezier(.76,0,.24,1)}
.splash.out{transform:translateY(-101%)}
.splash img{height:clamp(52px,8vw,104px);width:auto;clip-path:inset(0 100% 0 0)}
.splash.go img{animation:wipe 1s cubic-bezier(.76,0,.24,1) .15s forwards}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
.splash-bar{position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.splash.go .splash-bar{animation:bar 1.3s cubic-bezier(.65,0,.35,1) forwards}
@keyframes bar{to{transform:scaleX(1)}}

/* how it works: journey (sky lane with a hopping plane above the step cards) */
.howsec{background:var(--bg2);position:relative;overflow:hidden}
.journey{position:relative;margin-top:3.5rem;--t:1.5s;color:var(--ink)}
.sky{position:relative;height:130px;margin-bottom:30px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cloud{position:absolute;border-radius:50%;background:rgba(255,255,255,.7);filter:blur(22px);pointer-events:none;animation:drift linear infinite;will-change:transform}
.cloud.c1{width:220px;height:50px;top:6px;animation-duration:38s}
.cloud.c2{width:150px;height:38px;top:40px;animation-duration:26s;animation-delay:-12s}
.cloud.c3{width:260px;height:44px;top:18px;animation-duration:46s;animation-delay:-30s;opacity:.7}
.cloud.c4{width:120px;height:32px;top:62px;animation-duration:31s;animation-delay:-6s}
@keyframes drift{from{transform:translateX(-320px)}to{transform:translateX(calc(100vw + 320px))}}
.jpath{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#jp2,#jpg{transition:stroke-dashoffset var(--t) cubic-bezier(.65,0,.35,1)}
.journey.snap #jp2,.journey.snap #jpg,.journey.snap .jplane{transition:none!important}
.wps{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.wp{justify-self:center;position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--muted);font:500 .85rem/1 var(--body);display:grid;place-items:center;padding:0;cursor:pointer;transition:background .5s,border-color .5s,color .5s,transform .5s var(--ease)}
.wp::before{display:none}
.wp::after{content:"";position:absolute;top:100%;left:50%;width:0;height:31px;border-left:1px dashed var(--line2);transition:border-color .5s}
.wp.seen{border-color:var(--ink);color:var(--ink)}
.wp.seen::after{border-color:var(--ink)}
.wp.on{background:var(--accent);border-color:var(--accent);color:var(--ink);transform:scale(1.12)}
.wp.on::after{border-color:var(--accent)}
.jplane{position:absolute;top:0;left:0;width:34px;height:34px;z-index:2;offset-rotate:auto;offset-distance:0%;opacity:0;transform:scale(.6);color:var(--ink);filter:drop-shadow(0 6px 10px rgba(60,40,20,.25));transition:offset-distance var(--t) cubic-bezier(.65,0,.35,1),opacity .4s,transform .4s}
.journey.go .jplane{opacity:1;transform:none}
.journey.go .jplane.rest{animation:bob 2.2s ease-in-out infinite alternate}
.journey.go .jplane.hop{opacity:0;transform:translate(14px,-14px) scale(.5)}
@keyframes bob{from{transform:translateY(-2px)}to{transform:translateY(2px)}}
.jsteps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;perspective:1100px}
.jstep{--rx:0deg;--ry:0deg;--ty:0px;padding:1.6rem 1.5rem 1.7rem;border-radius:24px;background:var(--card);border:1px solid var(--line);position:relative;opacity:.35;transform:translateY(18px) scale(.98);cursor:default;outline-offset:4px;transition:opacity .7s,transform .55s var(--ease),box-shadow .6s,border-color .6s;transform-style:preserve-3d;will-change:transform}
.jstep.seen{opacity:1;transform:translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry))}
.jstep.on{--ty:-8px;border-color:transparent;box-shadow:var(--shadow)}
.jstep::before{display:none}
.jic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.25rem;color:var(--ink);background:var(--bg2);border:1px solid var(--line);transition:color .5s,background .5s,transform .5s var(--ease);transform:translateZ(24px)}
.jic svg{width:24px;height:24px}
.jstep.on .jic{color:var(--ink);background:var(--accent);border-color:var(--accent);animation:pop .6s var(--ease)}
@keyframes pop{0%{transform:translateZ(24px) scale(1)}40%{transform:translateZ(24px) scale(1.14) rotate(-6deg)}100%{transform:translateZ(24px) scale(1)}}
.jstep small{display:block;font-size:.8rem;color:var(--dim);font-weight:500;margin-bottom:.35rem;transition:color .5s;letter-spacing:0;text-transform:none}
.jstep.on small{color:var(--accent-text)}
.jstep h3{font-size:1.15rem;margin-bottom:.45rem;transform:translateZ(14px)}
.jstep p{color:var(--muted);font-size:.95rem}
@media(max-width:860px){.sky{display:none}.jsteps{grid-template-columns:1fr 1fr}.journey{margin-top:2.6rem}}
@media(max-width:500px){.jsteps{grid-template-columns:1fr}}

/* why: end-to-end orbit */
.orbit{position:relative;aspect-ratio:1/1;max-width:100%;--r:42%}
.orbit .ring{position:absolute;inset:8%;border-radius:50%;border:1px dashed var(--line2);animation:spin 60s linear infinite}
.orbit .ring.r2{inset:26%;border:1px solid var(--line);animation-direction:reverse;animation-duration:40s}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit .core{position:absolute;inset:34%;border-radius:50%;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.25rem;padding:1rem;box-shadow:var(--shadow)}
.orbit .core small{font-size:.72rem;color:var(--accent-text);font-weight:500;letter-spacing:0;text-transform:none}
.orbit .core b{font-family:var(--display);font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:400;line-height:1.05;color:var(--ink)}
.orbit .core span{font-size:.75rem;color:var(--muted);min-height:2.2em;line-height:1.15;transition:opacity .3s}
.orbit .node{position:absolute;left:50%;top:50%;width:62px;margin:-31px 0 0 -31px;display:flex;flex-direction:column;align-items:center;gap:.25rem;font-size:1.35rem;transform:translate(var(--x),var(--y)) scale(.9);transition:transform .5s var(--ease);cursor:default}
.orbit .node::before{content:"";position:absolute;top:-6px;width:46px;height:46px;border-radius:50%;background:var(--card);border:1px solid var(--line);z-index:-1;transition:border-color .4s,box-shadow .4s,background .4s}
.orbit .node b{font-size:.62rem;font-weight:500;color:var(--dim);text-align:center;white-space:nowrap;transition:color .4s;letter-spacing:0;text-transform:none}
.orbit .node.lit{transform:translate(var(--x),var(--y)) scale(1.12)}
.orbit .node.lit::before{border-color:var(--accent);box-shadow:0 12px 24px -12px rgba(255,138,69,.6);background:var(--accent-soft)}
.orbit .node.lit b{color:var(--ink)}
@media(max-width:860px){.orbit{width:min(100%,420px);margin:0 auto}} /* explicit width: the orbit's children are all absolute, so with auto margins alone it would shrink to 0 */
@media(max-width:420px){.orbit .node{width:48px;margin:-24px 0 0 -24px;font-size:1.1rem}.orbit .node::before{width:38px;height:38px;top:-5px}.orbit .node b{font-size:.55rem}}

/* social */
.social{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
.social a{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.05rem;border-radius:999px;border:1px solid var(--line2);font-size:.9rem;font-weight:500;color:var(--ink2);background:var(--card);transition:border-color .3s,color .3s,transform .3s var(--ease),box-shadow .3s}
.social a:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow)}
.social svg{width:18px;height:18px;fill:currentColor}

/* services: three white cards with a serif numeral, icon tile, check list and a pill CTA. --c is the card colour, --on the text colour that sits on it. */
#services{position:relative}
.cards{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3.5rem;perspective:1200px}
@media(max-width:860px){.cards{grid-template-columns:1fr;perspective:none}}
.card{--c:var(--accent);--on:var(--ink);--rx:0deg;--ry:0deg;--ty:0px;position:relative;isolation:isolate;border:1px solid var(--line);border-radius:24px;padding:2rem;display:flex;flex-direction:column;gap:1rem;background:var(--card);transform:translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;will-change:transform}
.cards .card{transition:opacity 1s var(--ease),transform .6s var(--ease),border-color .5s,box-shadow .6s}
.card.c2{--c:#1f5a3a;--on:#fff}
.card.c3{--c:#1b2a4a;--on:#fff}
.card:hover{--ty:-8px;border-color:transparent;box-shadow:var(--shadow-lg)}
.card::before{display:none}
.card .num{position:absolute;top:1.2rem;right:1.5rem;font-family:var(--display);font-size:3.6rem;line-height:1;color:#8f897f;letter-spacing:-.04em;transform:translateZ(10px);transition:color .5s,transform .6s var(--ease)}
.card:hover .num{color:var(--c);transform:translateZ(30px) translateY(-3px)}
.card .ic{width:56px;height:56px;border-radius:17px;display:grid;place-items:center;color:var(--ink);background:var(--bg2);border:1px solid var(--line);transform:translateZ(26px);transition:transform .6s var(--ease),background .6s,color .6s}
.card .ic svg{width:25px;height:25px}
.card:hover .ic{color:var(--on);background:var(--c);transform:translateZ(40px) translateY(-3px) rotate(-5deg)}
.card .who{font-size:.85rem;color:var(--muted);font-weight:500;margin-top:.3rem;letter-spacing:0;text-transform:none}
.card h3{font-size:1.55rem;letter-spacing:-.025em;line-height:1.12;transform:translateZ(16px)}
.card p{color:var(--muted);font-size:.98rem}
.card ul{margin:.3rem 0 .2rem;padding:1.1rem 0 0;list-style:none;display:grid;gap:.6rem;font-size:.93rem;color:var(--ink2);border-top:1px solid var(--line)}
.card li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.45;transition:transform .5s var(--ease)}
.card li::before{content:"";flex:0 0 18px;width:18px;height:18px;margin-top:.15em;border-radius:50%;background:var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.card.c1 li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317161a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.card:hover li{transform:translateX(4px)}
.card li:nth-child(2){transition-delay:.04s}.card li:nth-child(3){transition-delay:.08s}.card li:nth-child(4){transition-delay:.12s}
.card .cta{position:relative;isolation:isolate;overflow:hidden;margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.5rem .5rem .5rem 1.25rem;border-radius:999px;border:1px solid var(--line2);background:transparent;font-weight:500;font-size:.95rem;color:var(--ink);transform:translateZ(20px);transition:color .4s,border-color .4s,box-shadow .5s}
.card .cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c);transform:translateX(-101%);transition:transform .55s var(--ease)}
.card .cta i{flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:var(--on);transition:background .4s,color .4s,transform .55s var(--ease)}
.card .cta i svg{width:18px;height:18px}
.card .cta:hover,.card .cta:focus-visible{color:var(--on);border-color:var(--c)}
.card .cta:hover::before,.card .cta:focus-visible::before{transform:none}
.card .cta:hover i,.card .cta:focus-visible i{background:var(--on);color:var(--c);transform:rotate(-45deg)}
@media(max-width:480px){.card{padding:1.6rem}.card .num{font-size:2.8rem;right:1.2rem}}
@media(prefers-reduced-motion:reduce){.card,.card .ic,.card .num,.card li,.card .cta,.card .cta i,.card .cta::before{transition:none}.card:hover{--ty:0px}.card:hover .ic,.card:hover .num,.card:hover li{transform:none}}

/* why */
#why{overflow-x:clip} /* the orbit's rotating rings have a bounding box wider than the orbit on phones */
.why{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
@media(max-width:860px){.why{grid-template-columns:1fr;gap:2.5rem}}
.points{display:grid;margin-top:2.2rem;border-top:1px solid var(--line)}
.points>div{display:grid;grid-template-columns:40px 1fr;gap:1.2rem;align-items:start;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.points>div>div{display:block}
.points i{font-family:var(--display);font-style:normal;font-size:1.6rem;line-height:1;color:var(--accent-text);padding-top:.1em}
.points h3{font-size:1.12rem;margin-bottom:.25rem}
.points p{color:var(--muted);font-size:.95rem}

/* visa: the one dark band */
.visa{background:var(--dark);color:var(--on-dark)}
.visa .eyebrow{color:var(--on-dark-muted);border-color:var(--dark-line);background:rgba(255,255,255,.05)}
.visa h2{color:#fff}
.visa .lead{color:var(--on-dark-muted)}
.visa-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:4rem;align-items:center}
@media(max-width:860px){.visa-grid{grid-template-columns:1fr;gap:2.5rem}}
.flags{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:2rem}
.flag{appearance:none;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;border:1px solid var(--dark-line);border-radius:18px;padding:1rem 1.1rem;background:rgba(255,255,255,.04);display:flex;align-items:center;gap:.9rem;transition:border-color .4s,background .4s,transform .4s var(--ease)}
.flag:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.flag.on{border-color:var(--accent);background:rgba(255,138,69,.1)}
.flag b{display:block;font-weight:500;color:#fff}
.flag small{color:var(--on-dark-dim);font-size:.82rem}
.flag .em{width:40px;height:auto;flex-shrink:0;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.45)}
/* globe */
.globe-wrap{position:relative;width:100%;max-width:520px;aspect-ratio:1/1;margin:0 auto}
.globe-wrap::before{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(255,138,69,.16),rgba(25,198,183,.08) 50%,transparent 72%);filter:blur(28px);pointer-events:none}
.globe-wrap canvas{position:relative;display:block;width:100%;height:100%;opacity:0;transition:opacity 1.4s;cursor:grab;touch-action:pan-y}
.globe-wrap canvas:active{cursor:grabbing}
.globe-wrap.ready canvas{opacity:1}
.globe-cap{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);min-width:250px;padding:.75rem 1.1rem;text-align:center;background:rgba(20,24,29,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--dark-line);border-radius:18px;pointer-events:none}
.globe-cap small{display:block;font-size:.72rem;color:var(--accent);font-weight:500;letter-spacing:0;text-transform:none}
.globe-cap b{display:block;font-family:var(--display);font-style:normal;font-weight:400;font-size:1.9rem;line-height:1.05;margin:.1rem 0;color:#fff}
.globe-cap span{display:block;font-size:.8rem;color:var(--on-dark-muted)}
.globe-cap.swap b,.globe-cap.swap span{animation:capIn .7s var(--ease)}
@keyframes capIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* no WebGL / CDN unreachable: a quiet CSS planet so the layout still holds */
.globe-wrap.fallback canvas{display:none}
.globe-wrap.fallback::after{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle at 36% 30%,#2a3a46,#0f151b 68%);border:1px solid var(--dark-line);box-shadow:inset -30px -20px 60px rgba(0,0,0,.5)}
@media(max-width:860px){.globe-wrap{max-width:400px}}
@media(max-width:480px){.flags{grid-template-columns:1fr}}
/* stats as a hairline list: label left, big serif number right */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0 3rem;margin-top:4rem;border-top:1px solid var(--dark-line)}
.stat{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.5rem 0;border-bottom:1px solid var(--dark-line);background:none;border-radius:0}
.stat b{display:block;font-family:var(--display);font-style:normal;font-weight:400;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.stat span{font-size:.9rem;color:var(--on-dark-muted);max-width:18ch}
@media(max-width:700px){.stats{grid-template-columns:1fr;gap:0}}

/* content */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3.5rem}
@media(max-width:860px){.posts{grid-template-columns:1fr}}
.post{border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.post .th{aspect-ratio:16/10;max-width:100%}
.post .th.a{background:linear-gradient(135deg,#dfe7ea,#9fb6c3)}
.post .th.b{background:linear-gradient(135deg,#ffd9bf,#ff9a60)}
.post .th.c{background:linear-gradient(135deg,#cfe3d6,#5f9a7c)}
.post div{padding:1.4rem;display:grid;gap:.45rem}
.post small{font-size:.82rem;color:var(--accent-text);font-weight:500;letter-spacing:0;text-transform:none}
.post h3{font-size:1.2rem;line-height:1.25}
.post p{color:var(--muted);font-size:.93rem}

/* faq: hairline rows */
.faq{display:grid;margin-top:3rem;max-width:820px;border-top:1px solid var(--line)}
details{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:0}
summary{cursor:pointer;padding:1.35rem 0;font-weight:500;font-size:1.12rem;letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--display);font-size:1.7rem;line-height:1;color:var(--ink);transition:transform .35s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);padding-bottom:1.4rem;font-size:1rem;max-width:62ch}

/* contact */
.contact{text-align:center}
.contact h2{font-size:clamp(3rem,8vw,6.4rem)}
.contact .lead{margin-inline:auto}
.channels{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
.contact .btn.ghost{background:var(--ink);color:#fff;border-color:var(--ink)}.contact .btn.ghost:hover{background:#000}
.copyline{margin-top:1.6rem;font-size:.95rem;color:var(--muted);display:flex;gap:.6rem;justify-content:center;align-items:center;flex-wrap:wrap}
.copyline a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2);transition:text-decoration-color .3s}
.copyline a:hover{text-decoration-color:var(--accent)}
.copyline button{background:var(--card);border:1px solid var(--line2);color:var(--ink);border-radius:999px;padding:.35rem .85rem;font-size:.8rem;font-weight:500;cursor:pointer;font-family:var(--body);transition:border-color .3s}
.copyline button:hover{border-color:var(--ink)}
footer{background:var(--ink);color:rgba(246,241,232,.6);padding-block:2.5rem;font-size:.85rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

/* gallery: two film strips drifting in opposite directions (pause on hover); tap a photo for the lightbox */
.galsec{overflow:hidden}
.strip{margin-top:3.5rem;display:grid;gap:1rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.srow{--h:240px} /* no overflow rule here: .galsec clips the marquee, and a clipped row would count as an unfocusable scrollable region */
.strack{display:flex;width:max-content;animation:slide var(--d,70s) linear infinite;will-change:transform}
.srow.rev .strack{animation-direction:reverse}
.strip:hover .strack,.strip:focus-within .strack{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.gt{position:relative;height:var(--h);aspect-ratio:var(--ar,.8);flex:none;margin-right:1rem;border-radius:20px;overflow:hidden;background:var(--card);border:6px solid #fff;box-shadow:var(--shadow);padding:0;color:inherit;font-family:var(--body);cursor:zoom-in;transition:transform .5s var(--ease),box-shadow .5s}
.gt img{width:100%;height:100%;object-fit:cover;display:block;border-radius:14px;transform:scale(1.03);transition:transform .9s var(--ease)}
.gt:hover,.gt:focus-visible{transform:translateY(-5px) rotate(-.6deg);box-shadow:var(--shadow-lg)}
.gt:hover img{transform:scale(1.1)}
.gt figcaption{position:absolute;inset:auto 0 0 0;padding:1.8rem .9rem .8rem;background:linear-gradient(transparent,rgba(5,8,12,.82));display:grid;gap:.1rem;text-align:left;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;border-radius:0 0 14px 14px}
.gt:hover figcaption,.gt:focus-visible figcaption,.gt.ph figcaption{opacity:1;transform:none}
.gt b{font-size:.88rem;font-weight:500;color:#fff}
.gt span{font-size:.75rem;color:rgba(255,255,255,.75)}
.gt.ph{cursor:default;display:grid;place-items:center;color:var(--dim)}
.gt.ph svg{width:30px;height:30px;opacity:.6;margin-bottom:2.2rem}
.gt.ph figcaption{background:none}
.gt.ph b{color:var(--ink)}.gt.ph span{color:var(--muted)}
.gt.ph:nth-child(3n+1){background:linear-gradient(135deg,#ece4d5,#d9cdb6)}
.gt.ph:nth-child(3n+2){background:linear-gradient(135deg,#ffe6d6,#f3c4a6)}
.gt.ph:nth-child(3n){background:linear-gradient(135deg,#dfe8e0,#b9cfbf)}
.gal-cta{margin-top:3rem;display:flex;align-items:center;justify-content:center;gap:1.2rem;flex-wrap:wrap;text-align:center}
.gal-cta p{color:var(--muted);font-size:1.05rem}
@media(max-width:700px){.srow{--h:170px}.strip{margin-top:2.4rem}.gt{border-width:4px}}
.lb{border:0;background:transparent;padding:0;max-width:100vw;max-height:100vh;width:100%;height:100%;margin:0;color:#fff}
.lb[open]{display:grid;place-items:center}
.lb::backdrop{background:rgba(20,24,29,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lb figure{margin:0;display:grid;gap:.9rem;justify-items:center;max-width:min(92vw,1100px)}
.lb img{max-width:92vw;max-height:78vh;border-radius:16px;box-shadow:0 30px 80px -20px rgba(0,0,0,.85);animation:heroFadeUp .5s var(--ease)}
.lb figcaption{color:rgba(246,241,232,.7);font-size:.95rem;text-align:center}
.lb figcaption b{color:#fff;margin-right:.5rem;font-weight:500}
.lb button{position:fixed;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;width:46px;height:46px;border-radius:50%;font-size:1.6rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .3s}
.lb button:hover{background:rgba(255,255,255,.18)}
.lb-x{top:1rem;right:1rem}.lb-p{left:1rem;top:50%;transform:translateY(-50%)}.lb-n{right:1rem;top:50%;transform:translateY(-50%)}

/* trip map postcard: the card is drawn on a canvas in the browser, nothing is uploaded */
.pcsec{background:var(--bg2);overflow:hidden} /* overflow: the tilted preview card would otherwise poke a few px past the viewport on phones */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;margin-top:3.5rem}
.pc-form{display:grid;gap:1.6rem}
.pc-field{display:grid;gap:.6rem}
.pc-field>span{font-size:.85rem;color:var(--muted);font-weight:500;letter-spacing:0;text-transform:none}
.pc-field input[type=text]{background:var(--card);border:1px solid var(--line2);color:var(--ink);font:500 1rem var(--body);padding:.95rem 1.1rem;border-radius:16px;outline:0;transition:border-color .3s,box-shadow .3s}
.pc-field input[type=text]::placeholder{color:var(--dim)}
.pc-field input[type=text]:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(23,22,26,.08)}
.chips{display:flex;gap:.6rem;flex-wrap:wrap}
.chip{background:var(--card);border:1px solid var(--line2);color:var(--ink2);font:500 .88rem var(--body);padding:.5rem .95rem;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;transition:border-color .3s,color .3s,background .3s,transform .3s var(--ease)}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line2);transition:background .3s}
.chip:hover{transform:translateY(-1px);color:var(--ink);border-color:var(--ink)}
.chip.on{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.chip.on::before{background:var(--accent)}
.chip[data-t]::before{width:14px;height:14px;background:var(--sw)}
.chip[data-t].on::before{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--accent)}
.pgroups{display:grid;gap:.6rem}
.pgroup{border:1px solid var(--line2);border-radius:18px;background:var(--card);overflow:hidden;transition:border-color .3s}
.pgroup.open{border-color:var(--ink)}
.pg-head{width:100%;display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;background:none;border:0;color:var(--ink);font-family:var(--body);cursor:pointer;text-align:left}
.pg-head b{font-size:.95rem;font-weight:500}
.pg-sum{flex:1;min-width:0;font-size:.82rem;color:var(--accent-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-sum:empty::before{content:"Tap to choose places";color:var(--dim)}
.pg-chev{width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .35s;flex:none}
.pgroup.open .pg-chev{transform:rotate(225deg)}
.pg-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.pgroup.open .pg-body{grid-template-rows:1fr}
.pg-body>.chips{min-height:0;overflow:hidden;padding:0 1.1rem;transition:padding .4s}
.pgroup.open .pg-body>.chips{padding:.1rem 1.1rem 1.1rem}
.pc-hint{font-size:.85rem;color:var(--dim);margin-top:-.2rem}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:.7rem}
.slot{position:relative;aspect-ratio:1;border-radius:16px;border:1.5px dashed var(--line2);background:var(--card) center/cover no-repeat;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .4s var(--ease)}
.slot-pick{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:.2rem;text-align:center;cursor:pointer;padding:.6rem}
.slot-x{position:absolute;top:.4rem;right:.4rem;z-index:2;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(20,24,29,.7);color:#fff;font:400 1rem/1 var(--body);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .3s,border-color .3s,transform .3s}
.slot-x:hover{background:var(--accent);border-color:var(--accent);color:var(--ink);transform:scale(1.08)}
.slot input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.slot svg{width:22px;height:22px;color:var(--accent-text)}
.slot b{font-size:.8rem;font-weight:500;line-height:1.2;color:var(--ink)}
.slot small{font-size:.7rem;color:var(--dim)}
.slot:hover,.slot.over,.slot:focus-within{border-color:var(--ink);transform:translateY(-2px)}
.slot.has{border-style:solid;border-color:var(--accent)}
.slot.has .slot-pick{align-content:end}
.slot.has svg{display:none}
.slot.has b,.slot.has small{background:rgba(20,24,29,.74);padding:.18rem .5rem;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff}
.slot.has small{color:var(--accent)}
.pc-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.pc-note{font-size:.85rem;color:var(--dim)}
.pc-prev{position:relative;perspective:1400px}
.pc-prev canvas{position:relative;display:block;width:100%;height:auto;border-radius:24px;box-shadow:var(--shadow-lg);transform:rotate(1.4deg) rotateY(-4deg);transition:transform .7s var(--ease)}
.pc:hover .pc-prev canvas{transform:none}
@media(max-width:860px){.pc{grid-template-columns:1fr;gap:2rem}.pc-prev{order:-1;max-width:420px;margin:0 auto;width:100%}}

/* top contact line: phone + email on the sand, no background. Hidden (and the nav pill rises) once the page scrolls; on legal pages it simply scrolls away. */
.topbar{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:101;height:28px;color:var(--ink2);font-size:.78rem;display:flex;align-items:center;transition:transform .5s var(--ease),opacity .4s}
.topbar .wrap{display:flex;align-items:center;justify-content:flex-end;gap:1.6rem;width:min(1180px,100% - 24px);padding-left:.5rem;padding-right:.5rem} /* same box as the nav pill; right padding matches the pill so the email lines up with the button edge */
.topbar a{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);font-weight:500;padding:.2rem 0;white-space:nowrap;transition:color .3s}
.topbar a:hover{color:var(--accent-text)}
.topbar svg{width:13px;height:13px;flex:none;color:var(--accent-text)}
html.tb-hidden .topbar{transform:translateY(-110%);opacity:0;pointer-events:none}
nav{transition:top .5s var(--ease),box-shadow .5s,background .5s}
html.tb-hidden nav{top:calc(12px + env(safe-area-inset-top,0px))}
body:has(.legal) .topbar{position:absolute}
@media(max-width:700px){.topbar .wrap{gap:1.1rem}.topbar{font-size:.76rem}}
@media(max-width:480px){.topbar .wrap{padding-left:.5rem;padding-right:.5rem}}
@media(max-width:360px){.topbar a:last-child{display:none}}

/* enquiry form (contact section) */
.cform{margin:3.5rem auto 0;max-width:840px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--shadow);position:relative}
.cf-head h3{font-family:var(--display);font-size:2.1rem;font-weight:400;letter-spacing:-.02em;line-height:1}
.cf-head p{color:var(--muted);margin-top:.5rem;max-width:56ch}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.6rem}
.cf-grid label{display:block;font-size:.88rem;font-weight:500;color:var(--ink2)}
.cf-grid label>input,.cf-grid label>select,.cf-grid label>textarea{margin-top:.45rem}
.cf-grid label span{color:var(--dim);font-weight:400}
.cf-grid input,.cf-grid select,.cf-grid textarea{width:100%;font:400 1rem var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line2);border-radius:14px;padding:.85rem 1rem;outline:0;transition:border-color .3s,box-shadow .3s}
.cf-grid textarea{resize:vertical;min-height:120px}
.cf-grid select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317161a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;padding-right:2.6rem}
.cf-grid input::placeholder,.cf-grid textarea::placeholder{color:var(--dim)}
.cf-grid input:focus,.cf-grid select:focus,.cf-grid textarea:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(23,22,26,.08)}
.cf-grid input:user-invalid{border-color:var(--accent-text)}
.cf-full{grid-column:1/-1}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-foot{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:1.4rem}
.cf-status{font-size:.93rem;color:var(--muted)}
.cf-status.ok{color:#1f5a3a}.cf-status.err{color:var(--accent-text)}
.cf-status a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.cf-note{font-size:.8rem;color:var(--dim);margin-top:1rem}
.cf-note a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){.cf-grid{grid-template-columns:1fr}}

/* scroll reveals: a clean rise and fade; headline words slide up out of a clipped line */
.rv{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.pre{opacity:0;transform:translateY(28px)}
.wr{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .14em;margin:0 -.04em -.14em}
.wr>span{display:inline-block;transform:translateY(112%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.in .wr>span{transform:none}
.hero-c,.shotbar{will-change:transform,opacity}
.toast{position:fixed;left:50%;bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));transform:translate(-50%,220%);background:var(--ink);color:var(--on-dark);padding:.8rem 1.3rem;border-radius:999px;font-weight:500;font-size:.9rem;transition:transform .5s var(--ease);z-index:200;max-width:90vw;text-align:center;box-shadow:var(--shadow)}
.toast.on{transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.ha{animation:none;opacity:1}.rv.pre{opacity:1;transform:none}.jstep{opacity:1;transform:none}.wr>span{transform:none}.splash{display:none}.cloud,.jstep.on .jic,.jplane{animation:none}.strack{animation:none}.srow{overflow-x:auto;scroll-snap-type:x mandatory}.gt{scroll-snap-align:start}.pc-prev canvas{transform:none}.lb img{animation:none}.jstep,.jplane,#jp2,#jpg,.wp{transition:none}.vids video{transition:none;transform:none}.vids video.on{animation:none}.shotbar button.on i::after{animation:none;transform:none}.hero-card::after{display:none}}

/* legal pages (privacy.html, terms.html): same nav/footer, a single readable column */
footer .flinks{display:flex;gap:1.2rem;flex-wrap:wrap}
footer .flinks a{color:rgba(246,241,232,.85);transition:color .3s;display:inline-block;padding:.3rem 0}
footer .flinks a:hover{color:#fff}
.legal{padding-top:calc(8.5rem + 28px + env(safe-area-inset-top,0px));padding-bottom:5rem}
.legal .wrap{max-width:760px}
.legal h1{font-family:var(--display);font-size:clamp(2.8rem,6vw,4.6rem);line-height:1;font-weight:400;letter-spacing:-.025em}
.legal .meta{color:var(--dim);font-size:.9rem;margin-top:1.2rem}
.legal .intro{color:var(--muted);font-size:1.1rem;margin-top:1.4rem}
.legal h2{font-family:var(--body);font-style:normal;font-size:1.35rem;font-weight:500;line-height:1.3;letter-spacing:-.015em;margin:2.8rem 0 .8rem;color:var(--ink)}
.legal h3{font-size:1.05rem;font-weight:500;margin:1.6rem 0 .4rem}
.legal p,.legal li{color:var(--muted);font-size:1rem}
.legal p+p,.legal ul+p{margin-top:.9rem}
.legal ul{margin:.8rem 0 0;padding-left:1.2rem;display:grid;gap:.45rem}
.legal li::marker{color:var(--accent-text)}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.legal a:hover{text-decoration-color:var(--accent)}
.legal .box{margin-top:1.4rem;padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.legal .toc{margin:2.2rem 0 0;padding:1.2rem 1.4rem;border:1px solid var(--line);border-radius:20px;background:var(--card);display:grid;gap:.35rem;list-style:none;counter-reset:toc}
.legal .toc li{counter-increment:toc;font-size:.95rem}
.legal .toc li::before{content:counter(toc,decimal-leading-zero);color:var(--accent-text);font-weight:500;margin-right:.7rem;font-size:.8rem}
.legal .toc a{color:var(--muted);text-decoration:none}
.legal .toc a:hover{color:var(--ink)}
.legal .back{display:inline-flex;margin-top:3rem}