/* ==========================================================================
   CORAVIDA — Tiffany Blanc 14
   Deep Navy #03224D · Marine Blue #0C6FDB · Sail White.
   Montserrat Light for display, Inter for everything else. Self-hosted.
   ========================================================================== */

@font-face{font-family:Montserrat;src:url(../fonts/montserrat-300.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-500.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --navy:#03224D; --marine:#0C6FDB; --ocean:#0046B1;
  --paper:#fff; --mist:#F5F8FB;
  --ink:#03224D; --body:#51688A;
  --line:rgba(3,34,77,.10);
  --dsp:Montserrat,"Helvetica Neue",Arial,sans-serif;
  --ui:Inter,"Helvetica Neue",Arial,sans-serif;
  --gut:clamp(1.5rem,6vw,6.5rem);
  --maxw:1720px;
  --sec:clamp(5rem,9vw,9rem);       /* the one gap between blocks */
  --seah:clamp(62px,8vw,128px);     /* the sea divider's own height */
  --s1:clamp(.55rem,.9vw,.85rem);   /* label to line         */
  --s2:clamp(.9rem,1.6vw,1.5rem);   /* line to line          */
  --s3:clamp(1.5rem,2.6vw,2.5rem);  /* head to body          */
  --s4:clamp(2.25rem,4vw,3.5rem);   /* body to action        */
  --s5:clamp(3rem,6vw,5.5rem);      /* head block to content */
  --s6:clamp(4.5rem,9vw,8rem);      /* block to block        */
  --hh:62px;                      /* the glass capsule itself */
  --hgap:clamp(.6rem,1.3vw,1.15rem);
  --hpad:clamp(1.1rem,2vw,1.9rem);
  --hdr:calc(var(--hh) + var(--hgap) * 2);
  /* Corners grow with the thing they belong to, the way Apple's do: a small
     tile takes a small radius, a full-width plate takes a large one. */
  --r-s:14px;                        /* rail cards, chips, small tiles      */
  --r:clamp(16px,1.8vw,24px);        /* the default for a photograph        */
  --r-l:clamp(20px,2.6vw,34px);      /* plates, and anything hero-scale     */
  --r-ui:clamp(14px,1.4vw,20px);     /* panels and surfaces you can press   */
  --r-sm:12px;
  --e:cubic-bezier(.22,.61,.36,1);
  --eo:cubic-bezier(.16,1,.3,1);
  --ei:cubic-bezier(.7,0,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;font-size:clamp(16px,15.2px + .2vw,17.5px)}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--ui);font-size:1rem;line-height:1.8;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body.lock{overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,.d1,.d2,.d3,.d4{font-family:var(--dsp);color:var(--ink);font-weight:300;margin:0;overflow-wrap:break-word}
/* German compounds are long enough to break a narrow column on their own */
:root[lang="de"] h1,:root[lang="de"] h2,:root[lang="de"] h3,:root[lang="de"] .d1,
:root[lang="de"] .d2,:root[lang="de"] .d3,:root[lang="de"] .d4{hyphens:auto}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
::selection{background:var(--navy);color:#fff}
:focus-visible{outline:2px solid var(--marine);outline-offset:3px}

/* --- Layout ------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:calc(1100px + var(--gut) * 2)}
.narrow.form{max-width:calc(820px + var(--gut) * 2)}
/* ONE rhythm, stated once. Every block owns the gap BELOW it, so no gap is
   ever paid for twice. A hero or a film band has no text at its bottom edge
   and nothing to give, so the block that follows one owns that gap instead —
   as does the block after a change of background colour. Result: every
   content-to-content gap on every page is exactly --sec. */
main>*{margin:0}
.section,.section--sm{padding-block:0 var(--sec)}
.section--sm{--sec:var(--s6)}
.phero{padding-bottom:var(--sec)}
.section--mist{padding-block:var(--sec)}
.hero+*,.band+*{padding-top:var(--sec)}
/* symmetric about a colour boundary: half a gap on each side of it */
.section--mist+*{padding-top:calc(var(--sec) / 2)}
/* a change of background is itself the break, so the block above one keeps
   only a half gap — otherwise a colour boundary costs twice a plain one */
:is(.section,.section--sm,.phero):has(+.section--mist){padding-bottom:calc(var(--sec) / 2)}
/* a panel is a visible box, so its inside is padded the same top and bottom;
   the half gap after it is paid by the block that follows */
.section--mist{padding-block:calc(var(--sec) / 2)}
/* the last block always meets the footer, and the sea rises out of the footer */
main>section:last-child{padding-bottom:calc(var(--sec) * .55 + var(--seah))}
/* A tinted section is a panel, not a band — inset from the page and curved,
   the way Apple's grey product tiles sit on white. The navy close keeps its
   full width, because the sea divider has to run the whole way across. */
.section--mist{background:var(--mist);border-radius:var(--r-l);
  margin-inline:var(--gut);overflow:hidden}
.section--mist>.wrap{padding-inline:clamp(1.25rem,3.4vw,3.25rem);
  max-width:calc(var(--maxw) - var(--gut) * 2)}
@media(max-width:700px){.section--mist{margin-inline:0;border-radius:0}}
.split--mid{align-items:center}
.center{text-align:center}
.measure{max-width:34rem}
.measure--wide{max-width:50rem}
.center .measure,.center .measure--wide{margin-inline:auto}

/* --- Type --------------------------------------------------------------- */
.d1,.d2,.d3{text-wrap:balance}
.d1{font-size:clamp(2.7rem,5.8vw,5.6rem);line-height:1.02;letter-spacing:-.038em}
.d2,.menu__nav a,.vx__t,.stats .v{font-size:clamp(2.15rem,4vw,3.7rem);line-height:1.08;letter-spacing:-.032em}
.d3,.est__t .v{font-size:clamp(1.55rem,2.4vw,2.2rem);line-height:1.18;letter-spacing:-.022em}
.eyebrow,.link,.btn,.burger,.menu__x,.cap .k,.kv,.vx__m,.stats .k,.dl dt,.lb__c,.field label,.est__t .k,.mus__line,.ftr h4{font-family:var(--ui);font-size:.6875rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;line-height:1.4;color:var(--body)}
.eyebrow{margin:0}
.lede{font-size:clamp(1.1rem,1.15vw,1.25rem);line-height:1.85;color:var(--body)}
.small{font-size:.9375rem;line-height:1.8;color:var(--body)}
.num{font-family:var(--dsp);font-weight:300;font-variant-numeric:tabular-nums}

.stack>*+*{margin-top:var(--s2)}
.stack-l>*+*{margin-top:var(--s3)}
.stack-s>*+*{margin-top:var(--s1)}
.stack-xl>*+*{margin-top:var(--s5)}
.head-wrap{margin-bottom:var(--s4)}
.section--tail{padding-bottom:var(--sec)}
/* the footer carries the sea on pages that do not close on a navy section */
figure{margin:0}

.lede--light{color:rgba(255,255,255,.86)}
/* a line of prose over film still has to be a line of prose */
.hero__in .lede{max-width:52ch;margin-inline:auto}
                 /* a head block that keeps the left edge */

/* --- Links & buttons ---------------------------------------------------- */
.link{display:inline-flex;align-items:center;gap:.75rem;color:var(--ink);padding-bottom:.45rem;position:relative}
.link::before,.link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%}
.link::before{background:var(--line)}
.link::after{background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--eo)}
.link:hover::after{transform:scaleX(1);transform-origin:left}
.link svg{width:11px;height:11px;opacity:.45;transition:transform .5s var(--eo),opacity .3s}
.link:hover svg{transform:translate(4px,-4px);opacity:1}
.link--light{color:#fff}
.link--light::before{background:rgba(255,255,255,.3)}

/* The primary action carries the brand blue rather than the navy — it is the
   one place on a mostly white page where the colour is allowed to do work. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:46px;
  padding-inline:2rem;border-radius:999px;white-space:nowrap;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--marine),var(--ocean));color:#fff;border:1px solid transparent;
  box-shadow:0 6px 18px rgba(12,111,219,.24);
  transition:color .4s var(--e),box-shadow .45s var(--e),transform .5s var(--eo)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--navy);
  transform:translateY(101%);transition:transform .55s var(--eo)}
.btn:hover{box-shadow:0 10px 26px rgba(3,34,77,.26);transform:translateY(-1px)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:translateY(0)}

/* the quiet one, for a second action beside the first */
.btn--ghost{background:none;color:var(--ink);border-color:var(--line);box-shadow:none}
.btn--ghost::before{background:var(--navy)}
.btn--ghost:hover{color:#fff;border-color:var(--navy);box-shadow:0 8px 22px rgba(3,34,77,.18)}

/* on navy, the blue would disappear, so the fill inverts */
.btn--white{background:#fff;color:var(--ocean);border-color:#fff;box-shadow:0 6px 20px rgba(2,16,36,.22)}
.btn--white::before{background:linear-gradient(180deg,var(--marine),var(--ocean))}
.btn--white:hover{color:#fff;border-color:transparent}

.acts{display:flex;flex-wrap:wrap;gap:.75rem}
.center .acts{justify-content:center}

/* --- Header ------------------------------------------------------------- */
.hdr{
  position:fixed;top:var(--hgap);left:var(--hgap);right:var(--hgap);z-index:90;
  height:var(--hh);display:flex;align-items:center;padding-inline:var(--hpad);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(255,255,255,.10),0 10px 34px rgba(2,16,36,.14);
  transition:background .55s var(--e),box-shadow .55s var(--e),border-color .55s var(--e),transform .55s var(--e)}
.hdr__in{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.hdr__l{justify-self:start;display:flex;align-items:center;gap:1.4rem}.hdr__m{justify-self:center}.hdr__r{justify-self:end;display:flex;align-items:center;gap:clamp(.75rem,1.6vw,1.6rem)}
/* on a wide screen the menu is written out beside the logo; the burger is for phones */
.hdr__nav{display:none;align-items:center;gap:clamp(1rem,1.6vw,1.7rem)}
.hdr__nav a{position:relative;font-family:var(--ui);font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#fff;white-space:nowrap;padding:.4rem 0;transition:color .4s var(--e),opacity .3s}
.hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--eo)}
.hdr__nav a:hover::after,.hdr__nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.hdr__nav a[aria-current="page"]{opacity:.9}
.hdr.solid .hdr__nav a,.light-page .hdr:not(.solid) .hdr__nav a{color:var(--navy)}
.hdr__logo{display:inline-flex;align-items:center;min-height:44px;padding-inline:.5rem}
.hdr__logo img{height:28px;width:auto;transition:opacity .4s var(--e)}
.hdr__logo .dark{display:none}
.burger{display:inline-flex;align-items:center;gap:.75rem;color:#fff;transition:color .55s var(--e)}
.hdr.solid .burger,.hdr.solid .hdr__lang,
.light-page .hdr:not(.solid) .burger{color:var(--navy)}
.burger i{display:block;width:17px;height:1.5px;background:currentColor;box-shadow:0 5px 0 currentColor;margin-block:-5px 5px;transition:width .4s var(--eo)}
.burger:hover i{width:11px}
@media(min-width:1180px){.hdr__nav{display:flex}.burger{display:none}}
.hdr .btn{height:38px;padding-inline:1.5rem}
@media(max-width:700px){.hdr .btn{height:44px}.burger{min-height:44px}}
.hdr.solid{background:rgba(255,255,255,.74);border-color:rgba(3,34,77,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 40px rgba(3,34,77,.11)}
.hdr.solid .hdr__logo .light{display:none}
.hdr.solid .hdr__logo .dark{display:block}
.hdr.solid .hdr__logo img{filter:none}
.hdr.solid .btn--white{background:linear-gradient(180deg,var(--marine),var(--ocean));color:#fff;
  border-color:transparent;box-shadow:0 4px 14px rgba(12,111,219,.28)}
.hdr.solid .btn--white::before{background:var(--navy)}
.hdr.up{transform:translateY(calc(-100% - var(--hgap) - 6px))}
.light-page .hdr:not(.solid){background:rgba(255,255,255,.6);border-color:rgba(3,34,77,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 28px rgba(3,34,77,.07)}
.light-page .hdr:not(.solid) .hdr__logo .light{display:none}
.light-page .hdr:not(.solid) .hdr__logo .dark{display:block}
.light-page .hdr:not(.solid) .hdr__logo img{filter:none}
.light-page .hdr:not(.solid) .btn--white{background:linear-gradient(180deg,var(--marine),var(--ocean));
  color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(12,111,219,.28)}
.light-page .hdr:not(.solid) .btn--white::before{background:var(--navy)}

/* --- Chinese ------------------------------------------------------------ */
/* Montserrat and Inter carry Latin and Cyrillic but no CJK, so Chinese gets
   the system faces on purpose — and none of the tightening Latin display type
   wants, which reads as cramped on Han characters. */
:root[lang^="zh"]{
  --dsp:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",var(--ui);
  --ui:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",Inter,"Helvetica Neue",Arial,sans-serif;
}
:root[lang^="zh"] .d1,:root[lang^="zh"] .d2,:root[lang^="zh"] .d3,:root[lang^="zh"] .d4,
:root[lang^="zh"] h1,:root[lang^="zh"] h2,:root[lang^="zh"] h3,:root[lang^="zh"] h4{letter-spacing:.01em;font-weight:300}
:root[lang^="zh"] .d1{line-height:1.16}
:root[lang^="zh"] .d2{line-height:1.24}
:root[lang^="zh"] .lede{line-height:1.95}
/* uppercase and wide tracking are Latin conventions; neither suits Han */
:root[lang^="zh"] .eyebrow,:root[lang^="zh"] .link,:root[lang^="zh"] .btn,:root[lang^="zh"] .burger,
:root[lang^="zh"] .menu__x,:root[lang^="zh"] .kv,:root[lang^="zh"] .vx__m,:root[lang^="zh"] .stats .k,
:root[lang^="zh"] .dl dt,:root[lang^="zh"] .field label,:root[lang^="zh"] .est__t .k,
:root[lang^="zh"] .mus__line,
:root[lang^="zh"] .ftr h4,:root[lang^="zh"] .lb__c,:root[lang^="zh"] .cap .k{
  text-transform:none;letter-spacing:.12em;font-size:.75rem}
:root[lang^="zh"] .lang__b{letter-spacing:.06em}
/* Han does not break on spaces, so the line splitter has nothing to measure */
:root[lang^="zh"] .lines{text-wrap:balance}
/* `ch` measures a half-width zero, so a ch cap is twice as wide in Han —
   restate the caps in em, which does not lie */
:root[lang^="zh"] .measure{max-width:24em}
:root[lang^="zh"] .measure--wide{max-width:34em}
:root[lang^="zh"] .phero h1{max-width:15em}
:root[lang^="zh"] .phero .lede{max-width:26em}
:root[lang^="zh"] .plate figcaption>span:last-child{max-width:30em}
:root[lang^="zh"] .ftr__tag{max-width:15em}
/* Han has no spaces, so a break may land anywhere without this */
:root[lang^="zh"] h1,:root[lang^="zh"] h2,:root[lang^="zh"] h3,:root[lang^="zh"] .d1,
:root[lang^="zh"] .d2,:root[lang^="zh"] .d3,:root[lang^="zh"] .d4{line-break:strict;overflow-wrap:normal}

/* --- Language ----------------------------------------------------------- */
.lang{position:relative}
.lang__b{display:inline-flex;align-items:center;gap:.4rem;height:32px;padding-inline:.7rem;border-radius:999px;
  font-family:var(--ui);font-size:.625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:inherit;border:1px solid transparent;transition:background .3s var(--e),border-color .3s var(--e)}
.hdr .lang__b{color:#fff}
.hdr.solid .lang__b,.light-page .hdr:not(.solid) .lang__b{color:var(--body)}
.lang__b .chev{width:9px;height:9px;transition:transform .35s var(--e);opacity:.6}
.lang.open .lang__b .chev{transform:rotate(180deg)}
.hdr .lang__b:hover,.lang.open .lang__b{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.24)}
.hdr.solid .lang__b:hover,.hdr.solid .lang.open .lang__b,
.light-page .hdr:not(.solid) .lang__b:hover,.light-page .hdr:not(.solid) .lang.open .lang__b{
  background:rgba(3,34,77,.06);border-color:var(--line)}
.lang__m{position:absolute;top:calc(100% + .7rem);right:0;min-width:9.5rem;padding:.4rem;border-radius:var(--r-ui);
  background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(3,34,77,.07),0 14px 36px rgba(3,34,77,.16);
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:100% 0;visibility:hidden;
  transition:opacity .3s var(--e),transform .42s var(--eo),visibility .3s}
.lang.open .lang__m{opacity:1;transform:none;visibility:visible}
.lang__m a{display:block;padding:.5rem .75rem;border-radius:var(--r-s);font-size:.875rem;color:var(--body);
  transition:background .25s,color .25s}
.lang__m a:hover{background:rgba(3,34,77,.05);color:var(--ink)}
.lang__m a.on{color:var(--ink);background:rgba(12,111,219,.08)}
@media(max-width:700px){.lang{display:none}}    /* it lives in the menu on a phone */

/* the same choice, inside the menu, where there is room for the words */
.menu__lang{display:flex;flex-wrap:wrap;gap:.35rem;flex-basis:100%;justify-content:center;margin-top:.9rem}
.menu__lang a{padding:.45rem .9rem;border-radius:999px;border:1px solid var(--line);font-size:.8125rem;
  color:var(--body);transition:background .3s,color .3s,border-color .3s}
.menu__lang a:hover{border-color:var(--navy);color:var(--navy)}
.menu__lang a.on{background:linear-gradient(180deg,var(--marine),var(--ocean));border-color:transparent;color:#fff}

/* --- Menu --------------------------------------------------------------- */
.menu{position:fixed;inset:0;z-index:100;display:grid;grid-template-rows:var(--hdr) 1fr;visibility:hidden;transition:visibility .6s}
.menu::before{content:"";position:absolute;inset:0;background:var(--paper);transform:scaleY(0);transform-origin:50% 0;transition:transform .7s var(--ei)}
.menu.open{visibility:visible}
.menu.open::before{transform:scaleY(1)}
.menu>*{position:relative;z-index:1}
.menu__bar{display:flex;align-items:center;padding-inline:calc(var(--hgap) + var(--hpad));opacity:0;transition:opacity .3s .35s}
.menu__bar .hdr__in{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.menu.open .menu__bar{opacity:1}
.menu__x{display:inline-flex;align-items:center;gap:.75rem;color:var(--navy)}
.menu__x svg{width:12px;height:12px;transition:transform .5s var(--eo)}
.menu__x:hover svg{transform:rotate(90deg)}
.menu__body{display:grid;align-content:safe center;padding:clamp(1.5rem,4vh,3rem) var(--gut) clamp(2rem,5vh,4rem);overflow-y:auto;text-align:center}
.menu__nav ul{display:grid;justify-items:center}
.menu__nav li{overflow:hidden}
.menu__nav a{display:inline-block;padding-block:.35rem;transform:translateY(110%);transition:color .3s var(--e)}
.menu.open .menu__nav a{animation:mIn .9s var(--eo) forwards}
.menu__nav li:nth-child(1) a{animation-delay:.3s}.menu__nav li:nth-child(2) a{animation-delay:.36s}
.menu__nav li:nth-child(3) a{animation-delay:.42s}.menu__nav li:nth-child(4) a{animation-delay:.48s}
.menu__nav li:nth-child(5) a{animation-delay:.54s}.menu__nav li:nth-child(6) a{animation-delay:.6s}
.menu__nav a:hover,.menu__nav a.here{color:var(--marine)}
@keyframes mIn{to{transform:translateY(0)}}
.menu__foot{margin-top:clamp(2.5rem,6vh,4rem);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem 1.75rem;opacity:0;transform:translateY(14px);transition:opacity .6s .62s var(--e),transform .8s .62s var(--eo)}
.menu.open .menu__foot{opacity:1;transform:none}

/* --- Hero --------------------------------------------------------------- */
.hero{position:relative;height:min(100svh,860px);min-height:min(600px,100svh);display:grid;isolation:isolate;overflow:hidden}
.hero--mid{height:76svh;min-height:min(520px,80svh)}
/* when the subject sits in the middle of the frame the words drop to the
   lower third and the frame is shown from its top, so nothing is written
   across the vessel */
.hero--low .hero__in{align-self:end;padding-bottom:clamp(3rem,9vh,6rem)}
.hero--low .hero__bg>img,.hero--low .hero__bg>video{object-position:50% 100%}
.hero__bg{position:absolute;inset:-8% 0;z-index:-2;background:var(--navy);overflow:hidden;will-change:transform}
.hero__s{position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--e)}
.hero__s:first-child,.hero__s.on{opacity:1}
/* every hero fill covers its frame — the sub-page heroes put the image straight
   into .hero__bg, and without this they stretch and stop short of the edge */
.hero__s img,.hero__s video,.hero__bg>img,.hero__bg>video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__s video{opacity:0;transition:opacity 1.1s var(--e)}
.hero__s video.on{opacity:1}
.hero__s video.on.dip,.hero__bg>video.on.dip,.band__bg video.on.dip,.fig.film video.on.dip{opacity:0;transition:opacity .3s var(--e)}
/* a slow drift on whichever slide is showing, so a still frame never feels frozen */
.hero__s img,.hero__s video,.hero__bg>img,.hero__bg>video{transform:scale(1.1)}
.hero__s.on img,.hero__s.on video,.hero__s:first-child img,.hero__s:first-child video{
  animation:heroDrift 9s linear forwards}          /* matches CV.hero.interval */
@keyframes heroDrift{from{transform:scale(1.06)}to{transform:scale(1.12)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 78% 42% at 50% 46%,rgba(2,20,45,.36),rgba(2,20,45,0) 72%),linear-gradient(180deg,rgba(2,20,45,.30) 0%,rgba(2,20,45,.04) 26%,rgba(2,20,45,.14) 56%,rgba(2,20,45,.58) 100%)}
/* a phone puts the headline lower, over the brightest part of the water —
   the only place the scrim has to work harder than the reference set does */
@media(max-width:700px){.hero::after{background:radial-gradient(ellipse 108% 56% at 50% 56%,rgba(2,20,45,.54),rgba(2,20,45,0) 80%),linear-gradient(180deg,rgba(2,20,45,.30) 0%,rgba(2,20,45,.10) 20%,rgba(2,20,45,.34) 48%,rgba(2,20,45,.62) 100%)}}
/* the journey's chapter, bottom left: one line per clip, the current one lit,
   a hairline that fills over the clip's hold so the next feels expected */
.hero__chaps{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(1.3rem,4vh,2.4rem);z-index:2;margin:0;padding:0;list-style:none;color:#fff;pointer-events:none;height:1.4rem}
.hero__chaps li{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:.7rem;font-family:var(--ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .9s var(--e),transform .9s var(--e);text-shadow:0 1px 10px rgba(3,34,77,.5)}
.hero__chaps li.on{opacity:1;transform:none}
.hero__chap__n{opacity:.6}
.hero__chaps li::after{content:"";width:34px;height:1px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.hero__chaps li.on::after{background:linear-gradient(90deg,#fff var(--p,0%),rgba(255,255,255,.35) 0);animation:chap var(--hold,8000ms) linear forwards}
@keyframes chap{from{--p:0%}to{--p:100%}}
@property --p{syntax:"<percentage>";inherits:false;initial-value:0%}
@media(max-width:700px){.hero__chaps{right:auto;max-width:60%}.hero__chaps li{font-size:.6rem;letter-spacing:.16em}}
@media(prefers-reduced-motion:reduce){.hero__chaps li.on::after{animation:none}}
.hero__in{position:relative;align-self:center;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);text-align:center;color:#fff}
.hero__in .eyebrow{color:#fff;text-shadow:0 1px 10px rgba(2,16,36,.85),0 0 30px rgba(2,16,36,.5)}
.hero__in h1{color:#fff;max-width:24ch;margin-inline:auto;text-shadow:0 1px 44px rgba(2,16,36,.35)}
.hero__in.stack>*+*{margin-top:clamp(1.5rem,2.6vw,2.4rem)}
.hero__in .link{text-shadow:0 1px 18px rgba(2,16,36,.6)}
.hero__in .link::before{background:rgba(255,255,255,.4)}
@keyframes cue{0%{transform:scaleY(.3);opacity:0}40%{opacity:1}100%{transform:scaleY(1);opacity:0}}

.phero{padding-top:calc(var(--hdr) + clamp(4rem,9vw,8rem));text-align:center}
.phero h1{margin-inline:auto;max-width:17ch}
.phero .lede{margin-inline:auto;max-width:42ch}

/* --- Band --------------------------------------------------------------- */
.band{position:relative;overflow:hidden;isolation:isolate}
/* film with nothing written on it — a breath between two blocks of text */
.band--short{height:clamp(46svh,52vw,72svh)}
.band__bg{position:absolute;inset:-20% 0;z-index:-2;background:var(--navy);will-change:transform}
.band__bg img,.band__bg video{width:100%;height:100%;object-fit:cover}
.band__bg video{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--e)}
.band__bg video.on{opacity:1}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 46% at 50% 50%,rgba(2,18,40,.30),rgba(2,18,40,0) 74%),linear-gradient(180deg,rgba(2,18,40,.32),rgba(2,18,40,.18) 45%,rgba(2,18,40,.36))}
.band__in{position:relative;text-align:center;color:#fff;padding-block:clamp(7rem,18vw,16rem)}
.band__in h2{color:#fff;max-width:23ch;margin-inline:auto;text-shadow:0 1px 34px rgba(2,16,36,.35)}
.band__in .eyebrow{color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(2,16,36,.85)}
.band__in .lede{color:rgba(255,255,255,.82);max-width:38ch;margin-inline:auto}

/* --- Plates --------------------------------------------------------------
   A photograph with no text beside it. Narrower than the column it sits in so
   it reads as a plate rather than a banner, and captioned so it has a reason
   to be there. */
.plate{max-width:min(1100px,100%);margin-inline:auto}
.plate .fig{border-radius:var(--r-l)}
.plate figcaption{display:grid;gap:.3rem;justify-items:start;text-align:left;
  margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line);
  font-size:.875rem;line-height:1.55;color:var(--body)}
.plate figcaption>span:last-child{max-width:46ch}
.plate figcaption .k{font-family:var(--ui);font-size:.6875rem;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink);flex:0 0 auto}
/* a caption stays flush with the photograph's left edge, even on a centred section */
:root[lang="de"] .plate figcaption{hyphens:auto}

/* --- Figures ------------------------------------------------------------ */
.fig{display:block;position:relative;overflow:hidden;background:var(--mist);border-radius:var(--r)}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--eo),filter .7s var(--e)}
a.fig--z:hover img,.card:hover .fig--z img,.rail__item:hover .fig--z img{transform:scale(1.04)}
/* four ratios, one per role: film, split, portrait, tile */
.r169{aspect-ratio:16/9}.r43{aspect-ratio:4/3}.r45{aspect-ratio:4/5}.r11{aspect-ratio:1/1}
.cap{margin-top:1.25rem;display:grid;gap:.35rem}

/* --- Grids -------------------------------------------------------------- */
.g2{display:grid;gap:clamp(1.25rem,3vw,3.25rem);grid-template-columns:1fr}
@media(min-width:820px){.g2{grid-template-columns:1fr 1fr;align-items:start}}
@media(min-width:760px){.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.g4{grid-template-columns:repeat(4,1fr)}}
.split{display:grid;gap:clamp(2rem,5vw,6rem);grid-template-columns:1fr;align-items:start}
@media(min-width:960px){.split{grid-template-columns:.76fr 1.24fr}.split--f{grid-template-columns:1.24fr .76fr}.split--f .split__t{order:2}}
@media(min-width:960px){.sticky{position:sticky;top:calc(var(--hdr) + 4.5rem)}}

/* --- Rail --------------------------------------------------------------- */
.rail__track{display:flex;gap:clamp(1rem,2vw,1.75rem);overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
.rail__track.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.rail__track::-webkit-scrollbar{display:none}
.rail__item{flex:0 0 auto;width:min(78vw,420px);scroll-snap-align:start}
.rail__item .fig,.card .fig{border-radius:var(--r-s)}
.rail__nav{display:flex;gap:.5rem}
.rail__nav button{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;transition:background .35s var(--e),border-color .35s,color .35s}
.rail__nav button:hover{background:var(--marine);border-color:var(--marine);color:#fff}
.rail__nav button[disabled]{opacity:.22;pointer-events:none}
.rail__nav svg{width:12px;height:12px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}

/* --- Ways ---------------------------------------------------------------
   Three excursions as plain rows under the photograph. No state, no preview,
   nothing to learn — the title, what it is, and what it costs. */
.ways{display:block}
.way{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.3rem 1rem;
  padding:clamp(.9rem,2vw,1.15rem) 0;border-top:1px solid var(--line)}
.ways li:last-child .way{border-bottom:1px solid var(--line)}
.way__t{color:var(--ink);transition:color .35s var(--e),transform .5s var(--eo)}
.way__m{grid-column:1;grid-row:2;font-family:var(--ui);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--body)}
.way svg{grid-column:2;grid-row:1/-1;width:12px;height:12px;color:var(--marine);
  opacity:.55;transition:opacity .35s,transform .5s var(--eo)}
@media(hover:hover){
  .way:hover .way__t{color:var(--marine);transform:translateX(5px)}
  .way:hover svg{opacity:1;transform:translate(3px,-3px)}
}
@media(hover:none){ .way:active .way__t{color:var(--marine);transform:translateX(5px)} }

/* --- The price ----------------------------------------------------------
   The client's most-asked question, at the size of an answer. A tinted card
   with the figure at display scale, the seven-guest qualifier under it, and
   the way out inside the same box. */
.price{background:var(--mist);border:1px solid var(--line);border-radius:var(--r-ui);
  padding:clamp(1.5rem,3.2vw,2.25rem);display:grid;gap:.55rem;align-content:start;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset}
.section--mist .price{background:var(--paper)}
.price__k{font-family:var(--ui);font-size:.6875rem;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--body);margin:0}
.price__v{font-family:var(--dsp);font-weight:300;font-size:clamp(2.4rem,4.6vw,3.6rem);
  line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--marine),var(--ocean));
  -webkit-background-clip:text;background-clip:text;color:transparent;margin:0}
.price__n{font-size:.875rem;line-height:1.6;color:var(--body);max-width:32ch;margin:.15rem 0 0}
.price__d{display:grid;gap:0;margin-top:.9rem;border-top:1px solid var(--line)}
.price__d>div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--line)}
.price__d dt{font-family:var(--ui);font-size:.6875rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--body)}
.price__d dd{font-size:.9375rem;color:var(--ink);text-align:right}
.price .btn{margin-top:1.1rem;justify-self:start}
.price--sm .price__v{font-size:clamp(2rem,3.4vw,2.6rem)}

/* two of them side by side on the index */
.rates{display:grid;gap:clamp(1rem,2.4vw,1.75rem);grid-template-columns:1fr;max-width:none}
@media(min-width:760px){.rates{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:no-preference){
  .price{transition:box-shadow .5s var(--e),transform .6s var(--eo)}
}

/* --- Cards -------------------------------------------------------------- */
.card .fig{aspect-ratio:4/3}
@media(min-width:760px){.card .fig{aspect-ratio:3/4}}
.card__m{margin-top:var(--s2);display:grid;gap:var(--s1)}
.kv{display:flex;gap:.7rem;align-items:center}
.kv span+span::before{content:"·";margin-right:.7rem;color:var(--line)}
.card{transition:transform .7s var(--eo)}
.card:hover{transform:translateY(-5px)}
.card:hover .d4{color:var(--marine);transition:color .35s var(--e)}

/* --- Voyage index (hover preview) --------------------------------------- */
.vx{position:relative}
.vx__row{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.5rem,3vw,2.4rem) 0;border-bottom:1px solid var(--line);position:relative}
.vx__row:first-child{border-top:1px solid var(--line)}
.vx__n{font-size:.625rem;letter-spacing:.24em;color:var(--body);transition:color .4s}
.vx__t{  letter-spacing:-.03em;color:var(--ink);transition:color .45s var(--e),transform .6s var(--eo)}
.vx__m{white-space:nowrap;transition:color .4s}
.vx__row:hover .vx__t{color:var(--marine)}
@media(hover:hover) and (min-width:900px){
  .vx__row:hover .vx__t{transform:translateX(14px)}
  .vx__row:hover .vx__n,.vx__row:hover .vx__m{color:var(--ink)}
}
.vx__thumb{position:fixed;top:0;left:0;width:clamp(200px,17vw,290px);aspect-ratio:3/4;
  pointer-events:none;z-index:70;opacity:0;transform:translate3d(-50%,-50%,0) scale(.9);
  transition:opacity .4s var(--e),transform .6s var(--eo);overflow:hidden;border-radius:var(--r-ui);
  box-shadow:0 24px 60px rgba(3,34,77,.24)}
.vx__thumb.on{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
.vx__thumb img{width:100%;height:100%;object-fit:cover}
.vx__mob{display:none}
.vx__mob{grid-column:1/-1}
@media(max-width:899px){
  .vx__row{grid-template-columns:auto 1fr;row-gap:.45rem}
  .vx__m{grid-column:2/-1;white-space:normal}
  .vx__mob{display:block;margin-top:1.2rem}
  .vx__mob .fig{aspect-ratio:16/9}
}

/* --- Timeline ----------------------------------------------------------- */
.tl{display:block;--tlt:4.6rem;--tlg:clamp(1rem,2.2vw,2rem);--tlp:clamp(1.1rem,2vw,1.6rem)}
.tl li{position:relative;display:grid;grid-template-columns:var(--tlt) 1px 1fr;gap:var(--tlg);
  padding:var(--tlp) 0;align-items:start}
/* the rule runs the whole height, padding included */
.tl li::after{content:"";position:absolute;left:calc(var(--tlt) + var(--tlg));top:0;bottom:0;width:1px;background:var(--line)}
.tl li:first-child::after{top:calc(var(--tlp) + .55rem)}
.tl li:last-child::after{bottom:auto;height:calc(var(--tlp) + .55rem)}
.tl li+li::before{content:"";position:absolute;left:calc(var(--tlt) + var(--tlg) * 2 + 1px);right:0;top:0;height:1px;background:var(--line)}
.tl__t{color:var(--marine);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tl__r{position:relative;z-index:1}
.tl__r::after{content:"";position:absolute;left:50%;top:.5rem;width:7px;height:7px;border-radius:50%;
  background:var(--paper);border:1px solid var(--marine);transform:translateX(-50%);transition:background .4s var(--e)}
.section--mist .tl__r::after{background:var(--mist)}
.tl li:hover .tl__r::after{background:var(--marine)}
.tl__h{  letter-spacing:-.018em;color:var(--ink)}
.tl__d{font-size:.9375rem;line-height:1.75;color:var(--body);margin-top:.4rem;max-width:52ch}
@media(max-width:559px){.tl{--tlt:3.4rem;--tlg:.85rem}.tl__t{font-size:.9rem}}

/* --- Numbers / lists ---------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,4vw,3rem) 1rem}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats>div{display:grid;gap:.55rem}
.stats .v .u{font-size:.34em;letter-spacing:.08em;margin-left:.32em;color:var(--body)}

.dl{border-top:1px solid var(--line)}
.dl>div{display:grid;grid-template-columns:1fr;gap:.3rem;padding:1.5rem 0;border-bottom:1px solid var(--line);transition:background .4s var(--e)}
@media(min-width:620px){.dl>div{grid-template-columns:14rem 1fr;gap:2rem;align-items:baseline}}
.dl dd{color:var(--ink)}
.dl a{box-shadow:inset 0 -1px 0 var(--line);transition:color .3s,box-shadow .3s}
.dl a:hover{color:var(--marine);box-shadow:inset 0 -1px 0 currentColor}

/* three roles, ranged left inside a centred block — a definition list reads
   badly centred, but the block it sits in does not have to be */
.crew{max-width:44rem;margin-inline:auto;text-align:left}

/* --- Gallery groups -----------------------------------------------------
   A number, the subject, and how many are in it — one line, hairlined. */
.galhead{display:flex;align-items:baseline;gap:clamp(.9rem,2vw,1.5rem);
  padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.galhead .eyebrow{color:var(--marine)}
.galhead h2{flex:1 1 auto}
.galhead__n{font-family:var(--ui);font-size:.6875rem;font-weight:500;letter-spacing:.2em;color:var(--body)}

/* --- Gallery ------------------------------------------------------------ */
/* Columns are filled round-robin by JS, not by column-count, so the order you
   read across the top row is the order in the DOM — which is also the order the
   lightbox steps through. CSS columns fill top-to-bottom and broke both. */
/* rows of two (3:2) and three (4:3) that always end on a full row — the
   reading order is the lightbox order, and nothing is left ragged */
.mosaic{display:grid;gap:clamp(1rem,2vw,1.6rem)}
.mosaic__row{display:grid;gap:clamp(1rem,2vw,1.6rem);grid-template-columns:repeat(var(--n,3),1fr);--ar:4/3}
.mosaic__row[data-n="2"]{--ar:3/2}
.mosaic__row[data-n="1"]{--ar:2/1}
@media(max-width:559px){.mosaic__row{grid-template-columns:1fr;--ar:4/3}}
.mosaic figure{margin:0}
.mosaic button{display:block;width:100%;aspect-ratio:var(--ar);overflow:hidden;background:var(--mist);border-radius:var(--r)}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--eo),filter .6s var(--e)}
.mosaic button:hover img{transform:scale(1.04);filter:brightness(1.04)}
.mosaic figcaption{margin-top:.7rem;font-size:.875rem;line-height:1.5;color:var(--body)}

.lb{position:fixed;inset:0;z-index:120;background:rgba(2,16,36,.97);display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);opacity:0;visibility:hidden;transition:opacity .35s var(--e),visibility .35s}
.lb.open{opacity:1;visibility:visible}
.lb img{max-width:min(1300px,92vw);max-height:84vh;object-fit:contain;border-radius:var(--r-l);transform:scale(.97);transition:transform .5s var(--eo),opacity .3s var(--e)}
.lb.open img{transform:scale(1)}
.lb__c{position:absolute;bottom:clamp(1rem,3vw,2rem);left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);text-align:center;width:max-content;max-width:calc(100vw - 2rem)}
/* the player has no business over an open menu or viewer */
body.lock .mus{opacity:0;pointer-events:none;transition:opacity .3s}
.lb button{position:absolute;color:#fff;width:46px;height:46px;border:1px solid rgba(255,255,255,.2);border-radius:999px;display:grid;place-items:center;transition:background .3s}
.lb button:hover{background:rgba(255,255,255,.12)}
.lb__x{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb__p{top:50%;left:clamp(.5rem,2vw,2rem);transform:translateY(-50%)}
.lb__n{top:50%;right:clamp(.5rem,2vw,2rem);transform:translateY(-50%)}
.lb svg{width:13px;height:13px}

/* --- Accordion ---------------------------------------------------------- */
.acc{border-top:1px solid var(--line)}
.acc__i{border-bottom:1px solid var(--line)}
.acc__b{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;padding:1.8rem 0;text-align:left;transition:color .3s}
.acc__b:hover{color:var(--marine)}
.acc__b i{flex:0 0 auto;width:12px;height:12px;position:relative;margin-top:.55rem}
.acc__b i::before,.acc__b i::after{content:"";position:absolute;background:var(--marine);transition:transform .45s var(--eo)}
.acc__b i::before{inset:5.5px 0 auto 0;height:1px}
.acc__b i::after{inset:0 5.5px auto auto;width:1px;height:12px}
.acc__i.open .acc__b i::after{transform:scaleY(0)}
.acc__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--eo)}
.acc__i.open .acc__p{grid-template-rows:1fr}
.acc__p>div{overflow:hidden;visibility:hidden;transition:visibility .5s}
.acc__i.open .acc__p>div{visibility:visible}
.acc__p p{padding-bottom:1.8rem;max-width:58ch}

/* --- Forms -------------------------------------------------------------- */
.field{display:grid;gap:.55rem}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:.9rem 0;border-radius:0;transition:border-color .4s}
.field textarea{resize:vertical;min-height:7rem}
@media(min-width:700px){.field input,.field select,.field textarea{font-size:.95rem}}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--marine)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2351688A' stroke-width='1.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .2rem center;background-size:11px}
.fg{display:grid;gap:clamp(1.25rem,2.5vw,2rem);grid-template-columns:1fr}
@media(min-width:700px){.fg2{grid-template-columns:1fr 1fr}}
/* chips: a pill per option, sentence case, the price or the kind as a quiet tag */
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{display:inline-flex;align-items:baseline;gap:.6rem;max-width:100%;min-height:44px;border:1px solid var(--line);border-radius:999px;padding:.6rem 1.2rem;cursor:pointer;font-size:.9375rem;line-height:1.35;color:var(--ink);transition:background .35s,color .35s,border-color .35s,box-shadow .35s}
.chips__tag{font-size:.75rem;color:var(--body);white-space:nowrap;transition:color .35s}
.chips label:hover{border-color:var(--navy)}
.chips input:checked+label{background:linear-gradient(180deg,var(--marine),var(--ocean));border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(12,111,219,.22)}
.chips input:checked+label .chips__tag,.chips input:checked+label .chips__d{color:rgba(255,255,255,.82)}
.chips input:focus-visible+label{outline:2px solid var(--marine);outline-offset:3px}
.chips--ask label{border-style:dashed}
.chips--ask input:checked+label{background:var(--navy);box-shadow:none}
/* the party: a number a thumb can hit */
.chips--n label{min-width:56px;justify-content:center;padding-inline:1rem}
/* a priced add-on says what it is: two lines, so the pills become tiles that line up */
.chips--x{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:.6rem}
.chips--x label{display:grid;gap:.2rem;align-content:start;border-radius:var(--r-s);padding:.85rem 1.1rem}
.chips__t{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
.chips__d{font-size:.8125rem;line-height:1.5;color:var(--body);transition:color .35s}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.note{max-width:62ch;font-size:.8125rem;color:var(--body);line-height:1.75}
/* --- The enquiry: four questions, one optional row, one estimate, one button */
.enq{display:grid;gap:var(--s5)}
.part>*+*{margin-top:var(--s3)}
.part>.note{margin-top:var(--s2)}
.part>.avail{margin-top:0}
.part__h{display:grid;gap:var(--s1)}
.field label .opt{text-transform:none;letter-spacing:.02em;font-weight:400;color:var(--body);opacity:.8;margin-left:.35rem}
/* the excursions: hairline rows, the price where the choice is made */
.pick{border-top:1px solid var(--line)}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick__r{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:1rem;row-gap:.3rem;padding:1.15rem 0;border-bottom:1px solid var(--line);cursor:pointer}
.pick__dot{grid-row:1/3;align-self:start;margin-top:.35rem;width:16px;height:16px;border-radius:50%;border:1px solid rgba(3,34,77,.35);position:relative;transition:border-color .3s}
.pick__dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--marine);transform:scale(0);transition:transform .35s var(--eo)}
.pick__t{grid-column:2;font-family:var(--dsp);font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.25;letter-spacing:-.015em;color:var(--ink);transition:color .3s}
.pick__m{grid-column:2;grid-row:2;font-size:.8125rem;line-height:1.6;color:var(--body)}
.pick__p{grid-column:3;grid-row:1/3;display:grid;justify-items:end;gap:.15rem;text-align:right;color:var(--ink)}
.pick__p .num{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.25;letter-spacing:-.015em}
.pick__n{font-size:.75rem;color:var(--body);white-space:nowrap}
.pick__r:hover .pick__t{color:var(--marine)}
.pick__r:hover .pick__dot,.pick input:checked+.pick__r .pick__dot{border-color:var(--marine)}
.pick input:checked+.pick__r .pick__dot::after{transform:scale(1)}
.pick input:focus-visible+.pick__r{outline:2px solid var(--marine);outline-offset:3px;border-radius:4px}
@media(max-width:560px){.pick__r{grid-template-columns:auto 1fr}.pick__p{grid-column:2;grid-row:3;display:flex;align-items:baseline;gap:.6rem;text-align:left;margin-top:.15rem}}
/* everything optional, behind one row */
.more{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.more__s{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;padding:1.6rem 0;cursor:pointer;color:var(--ink);transition:color .3s}
.more__s::-webkit-details-marker{display:none}
.more__s:hover{color:var(--marine)}
.more__t{display:grid;gap:.3rem}
.more__h{font-family:var(--dsp);font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.25;letter-spacing:-.015em}
.more__s i{flex:0 0 auto;width:12px;height:12px;position:relative;margin-top:.55rem}
.more__s i::before,.more__s i::after{content:"";position:absolute;background:var(--marine);transition:transform .45s var(--eo)}
.more__s i::before{inset:5.5px 0 auto 0;height:1px}
.more__s i::after{inset:0 5.5px auto auto;width:1px;height:12px}
.more[open] .more__s i::after{transform:scaleY(0)}
.more__in{padding:var(--s1) 0 var(--s4);animation:up .5s var(--eo)}
.more__in>*+*{margin-top:var(--s3)}
/* the estimate: the lines the figure is made of, the figure, the one button */
.est{display:grid;gap:var(--s2)}
.est__l{display:grid;gap:.55rem}
.est__l>[data-s-lines]{display:contents}
.est__r{display:flex;justify-content:space-between;gap:1.5rem;font-size:.9375rem;line-height:1.5}
.est__r .k{color:var(--body)}
.est__r .v{color:var(--ink);text-align:right;white-space:nowrap}
.est__t{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding-top:var(--s2);border-top:1px solid var(--line)}
.est__t .v{color:var(--ink);text-align:right}
.est__warn{color:#B4232C;max-width:none}
.est__p{color:var(--ink)}
.est .acts{margin-top:var(--s1)}
.enq .btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
/* the back-up tile appears once there is a day to back up */
.gcal:not(.has-date) .gcal__pick[data-pick="alt"]{display:none}
/* --- The glass calendar --------------------------------------------------
   A month on frosted glass over a blurred lagoon: the glass has something to
   refract, the days are pills of lighter glass, and the chosen day is the one
   solid thing on it. Motion is small and quick: a slide between months, a
   pop on the day you pick, a halo that glides from the last pick to the new. */
.gcal{position:relative;--gt:.42s}
.gcal__panel{position:relative;isolation:isolate;border-radius:var(--r-l);overflow:hidden}
.gcal__bg{position:absolute;inset:-6%;background-position:center 45%;background-size:cover;filter:blur(3px) saturate(1.05) brightness(.68);transform:scale(1.06);z-index:0}
.gcal__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,34,77,.45),rgba(3,34,77,.18) 45%,rgba(3,34,77,.55))}
.gcal__glass{position:relative;z-index:1;padding:clamp(1rem,2.6vw,1.6rem) clamp(1rem,2.6vw,1.6rem) clamp(.9rem,2vw,1.2rem);
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,.35);border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.12),0 30px 70px -32px rgba(3,34,77,.6)}
.gcal__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.9rem}
.gcal__title{font-family:var(--dsp);font-size:clamp(1.25rem,2.2vw,1.55rem);letter-spacing:-.02em;color:#fff;text-shadow:0 1px 14px rgba(3,34,77,.6);text-align:center}
.gcal__nav{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;color:var(--ink);background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px -10px rgba(3,34,77,.35);transition:background .3s var(--e),transform .4s var(--eo),opacity .3s}
.gcal__nav svg{width:12px;height:12px}
.gcal__nav:hover{background:rgba(255,255,255,.9);transform:translateY(-1px)}
.gcal__nav:active{transform:scale(.94)}
.gcal__nav:disabled{opacity:.3;pointer-events:none}
.gcal__dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(4px,.8vw,8px);padding:0 0 .45rem;font-family:var(--ui);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82);text-align:center}
.gcal__view{position:relative}
.gcal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(4px,.8vw,8px);transition:transform var(--gt) var(--eo),opacity .22s var(--e)}
.gcal__grid.is-out-l{transform:translateX(-28px);opacity:0}
.gcal__grid.is-out-r{transform:translateX(28px);opacity:0}
.gcal__grid.is-in-r{transform:translateX(28px);opacity:0}
.gcal__grid.is-in-l{transform:translateX(-28px);opacity:0}
.gcal__grid.no-t{transition:none}
.gday{position:relative;aspect-ratio:1.32;border-radius:clamp(10px,1.4vw,14px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;
  font-size:clamp(.9rem,1.3vw,1.02rem);color:var(--ink);background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);cursor:pointer;
  transition:transform .35s var(--eo),background .3s var(--e),box-shadow .35s var(--e),color .3s}
.gday--pad{background:transparent;border-color:transparent;box-shadow:none;pointer-events:none}
.gday:hover{background:rgba(255,255,255,.92);transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 12px 26px -16px rgba(3,34,77,.45)}
.gday:focus-visible{outline:2px solid var(--marine);outline-offset:2px}
.gday__n{line-height:1}
.gday__h{font-family:var(--ui);font-size:.5625rem;letter-spacing:.14em;color:var(--ocean);background:rgba(12,111,219,.1);border-radius:999px;padding:.12rem .4rem}
.gday.is-today .gday__n{box-shadow:0 0 0 1.5px var(--marine);border-radius:999px;padding:.15rem .35rem;margin:-.15rem -.35rem}
.gday.is-past{color:rgba(255,255,255,.5);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);box-shadow:none;cursor:default;pointer-events:none}
.gday.is-taken{color:rgba(255,255,255,.62);cursor:not-allowed;background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 4px,rgba(255,255,255,.22) 4px 9px);border-color:rgba(255,255,255,.28);box-shadow:none}
.gday.is-taken .gday__n{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.55)}
.gday.is-taken:hover{transform:none}
.gday.is-pref{background:linear-gradient(180deg,var(--marine),var(--ocean));color:#fff;border-color:transparent;box-shadow:0 14px 32px -12px rgba(12,111,219,.6),inset 0 1px 0 rgba(255,255,255,.35);animation:gpop .5s var(--eo)}
.gday.is-pref .gday__h{color:#fff;background:rgba(255,255,255,.22)}
.gday.is-alt{background:rgba(255,255,255,.96);color:var(--navy);border-color:#fff;box-shadow:inset 0 0 0 1.5px var(--marine),0 10px 26px -14px rgba(3,34,77,.6);animation:gpop .5s var(--eo)}
.gday.is-shake{animation:gshake .45s var(--e)}
@keyframes gpop{0%{transform:scale(.86)}55%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes gshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.gcal__halo{position:absolute;left:0;top:0;border-radius:clamp(10px,1.4vw,14px);pointer-events:none;opacity:0;transform:translate(0,0);
  transition:transform .55s var(--eo),width .35s var(--eo),height .35s var(--eo),opacity .3s var(--e)}
.gcal__halo.on{opacity:1}
.gcal__halo--pref{box-shadow:0 0 0 4px rgba(12,111,219,.22),0 0 0 9px rgba(12,111,219,.08)}
.gcal__halo--alt{box-shadow:0 0 0 4px rgba(255,255,255,.22)}
.gcal__legend{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;margin-top:.9rem;font-size:.8125rem;color:rgba(255,255,255,.88)}
.gcal__legend span{display:inline-flex;align-items:center;gap:.45rem}
.gl{width:14px;height:14px;border-radius:5px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.8);display:inline-block}
.gl--half{background:linear-gradient(90deg,rgba(255,255,255,.9) 50%,rgba(12,111,219,.25) 50%)}
.gl--taken{background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 3px,rgba(255,255,255,.3) 3px 7px)}
.gcal__picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:.6rem;margin-top:.75rem}
.gcal__pick{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.25rem .75rem;text-align:left;padding:.85rem 1rem;border-radius:var(--r-ui);
  background:var(--mist);border:1px solid var(--line);color:var(--ink);cursor:default;transition:background .3s,border-color .3s,transform .35s var(--eo)}
.gcal__pick .k{grid-column:1;font-family:var(--ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--body)}
.gcal__pick .v{grid-column:1;font-size:1.05rem;color:var(--body);transition:color .3s}
.gcal__pick .x{grid-column:2;grid-row:1/3;width:30px;height:30px;border-radius:999px;display:none;place-items:center;color:var(--body);background:rgba(3,34,77,.06)}
.gcal__pick .x svg{width:10px;height:10px}
.gcal__pick.on{cursor:pointer;background:#fff;border-color:var(--marine)}
.gcal__pick.on .v{color:var(--ink);font-weight:500}
.gcal__pick.on .x{display:grid}
.gcal__pick.on:hover{transform:translateY(-1px)}
.gcal__hint{margin-top:.7rem;padding:0 .2rem;font-size:.875rem;color:var(--body);transition:color .3s}
.gcal.is-need .gcal__hint{color:#B4232C;animation:gshake .45s var(--e)}
.gcal.is-need .gcal__glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 2px rgba(180,35,44,.55),0 30px 70px -32px rgba(3,34,77,.6)}
.gcal--browse .gday{cursor:pointer}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
@media(max-width:560px){.gcal__glass{padding:.9rem .75rem .8rem}.gday{aspect-ratio:1;border-radius:10px;font-size:.9rem}.gday__h{font-size:.5rem;padding:.08rem .3rem}.gcal__legend{font-size:.75rem;gap:.3rem .8rem}}
@media(prefers-reduced-motion:reduce){.gcal__grid,.gcal__halo,.gday{transition:none}.gday.is-pref,.gday.is-alt{animation:none}}
.note--avail{margin-top:.6rem;color:var(--ocean)}
.note--pax{margin-top:.8rem;color:var(--ocean)}
.link--sm{font-size:.625rem;margin-left:.6rem;white-space:nowrap}
.note--avail.is-bad{color:#B4232C}
.avail__card{margin-top:1rem;padding:1.4rem 1.5rem;border-radius:var(--r);background:var(--mist);display:grid;gap:.6rem}
.avail__card .avail__h{font-family:var(--dsp);font-size:1.35rem;letter-spacing:-.02em;color:var(--ink)}
.avail__card p{color:var(--body);max-width:44rem}
.avail__card .acts{margin-top:.5rem}

.ok{display:none;text-align:center}
.ok .acts{justify-content:center}
.ok .measure{margin-inline:auto}
.ok.on{display:block;animation:up .6s var(--eo)}

/* --- Film controls -------------------------------------------------------
   Anything that plays by itself for more than five seconds needs a way to stop
   it. One 40px disc, bottom left, quiet until you go looking for it. */
.filmc{position:absolute;left:clamp(1rem,2.4vw,1.75rem);bottom:clamp(1rem,2.4vw,1.75rem);
  z-index:4;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:rgba(2,16,36,.28);border:1px solid rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(4px);transition:opacity .35s var(--e),transform .45s var(--eo),background .3s}
.filmc:hover,.filmc:focus-visible{background:rgba(2,16,36,.5)}
.filmc svg{width:11px;height:11px}
.hero:hover .filmc,.band:hover .filmc,.fig:hover .filmc,
.hero:focus-within .filmc,.band:focus-within .filmc,.fig:focus-within .filmc,
.filmc:focus-visible{opacity:1;transform:none}
@media(hover:none){.filmc{opacity:1;transform:none}}
.fig .filmc{left:.75rem;bottom:.75rem;width:34px;height:34px}

/* --- The player --------------------------------------------------------- */
.mus{position:fixed;right:var(--hgap);bottom:var(--hgap);z-index:95;width:52px;height:52px}

/* the button that is always there */
.mus__b{width:52px;height:52px;flex:0 0 auto;border-radius:999px;display:grid;place-items:center;
  background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(3,34,77,.07),0 10px 30px rgba(3,34,77,.16);
  transition:background .4s var(--e),box-shadow .4s var(--e),transform .5s var(--eo)}
.mus__b:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 14px 36px rgba(3,34,77,.2)}
/* a slow ring while a track is running, so the button says so from across the page */
.mus__b::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--marine);opacity:0;transform:scale(1)}
.mus.playing .mus__b::before{animation:musRing 2.8s var(--eo) infinite}
.mus__b{position:relative}
@keyframes musRing{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.42)}}
.mus__eq{display:flex;align-items:flex-end;gap:2.5px;height:15px}
.mus__eq i{display:block;width:2px;background:var(--navy);border-radius:1px;height:4px;transition:height .3s var(--e)}
.mus.playing .mus__eq i{animation:eq 1s ease-in-out infinite}
.mus.playing .mus__eq i:nth-child(2){animation-delay:.18s}
.mus.playing .mus__eq i:nth-child(3){animation-delay:.36s}
.mus.playing .mus__eq i:nth-child(4){animation-delay:.1s}
@keyframes eq{0%,100%{height:4px}50%{height:15px}}
.mus__b .mus__eq i:nth-child(1){height:7px}.mus__b .mus__eq i:nth-child(2){height:13px}
.mus__b .mus__eq i:nth-child(3){height:5px}.mus__b .mus__eq i:nth-child(4){height:10px}

/* the panel it opens */
.mus__p{position:absolute;right:0;bottom:calc(100% + .6rem);
  width:min(20.5rem,calc(100vw - 2 * var(--hgap)));border-radius:var(--r-ui);overflow:hidden;
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(3,34,77,.07),0 16px 44px rgba(3,34,77,.18);
  padding:1.05rem 1.2rem 1rem;display:grid;gap:.7rem;
  opacity:0;transform:translateY(12px) scale(.96);transform-origin:100% 100%;visibility:hidden;
  transition:opacity .4s var(--e),transform .55s var(--eo),visibility .4s}
.mus.open .mus__p{opacity:1;transform:none;visibility:visible}
.mus__line{color:var(--marine);margin:0;font-size:.5625rem;letter-spacing:.2em}
.mus__t{  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mus__by{font-size:.75rem;line-height:1.5;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mus__by a{box-shadow:inset 0 -1px 0 var(--line)}
.mus__by a:hover{color:var(--marine)}
.mus__bar{height:3px;border-radius:3px;background:rgba(3,34,77,.13);overflow:hidden;cursor:pointer}
.mus__bar:hover{background:rgba(3,34,77,.2)}
.mus__bar i{display:block;height:100%;width:0;background:var(--marine);border-radius:3px;transition:width .18s linear}
.mus__c{display:flex;align-items:center;gap:.2rem;margin-left:-.35rem}
.mus__c button{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;color:var(--ink);
  transition:background .3s var(--e),color .3s}
.mus__c button:hover{background:rgba(3,34,77,.07)}
.mus__c svg{width:13px;height:13px}
.mus__c .play svg{width:15px;height:15px}
.mus__x{margin-left:auto}
/* one quiet invitation, then it is gone for the visit */
.mus__n{position:absolute;right:calc(100% + .7rem);bottom:12px;display:flex;align-items:center;
  white-space:nowrap;padding:.6rem 1rem;border-radius:999px;cursor:pointer;pointer-events:auto;
  font-family:var(--ui);font-size:.625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(3,34,77,.07),0 10px 30px rgba(3,34,77,.16);
  opacity:0;transform:translateX(8px) scale(.94);transform-origin:100% 50%;
  transition:opacity .5s var(--e),transform .7s var(--eo)}
.mus__n.in{opacity:1;transform:none}
.mus__nq{width:6px;height:6px;margin-left:.7rem;border-radius:50%;background:var(--marine);flex:0 0 auto}
.mus__n.in .mus__nq{animation:musDot 1.9s var(--e) infinite}
@keyframes musDot{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media(max-width:560px){
  /* no room beside the button on a phone, so it sits above it */
  .mus__n{right:0;bottom:calc(100% + .6rem);transform:translateY(8px) scale(.94);transform-origin:100% 100%}
  .mus__n.in{transform:none}
}
@media(prefers-reduced-motion:reduce){.mus__n{display:none}}

.ftr__tag{margin-top:1.4rem;max-width:24ch;color:rgba(255,255,255,.55)}

@media(max-width:560px){.mus__p{width:min(17.5rem,calc(100vw - 2 * var(--hgap)))}}
@media(prefers-reduced-motion:reduce){.mus.playing .mus__eq i{animation:none}}

/* --- Touch -------------------------------------------------------------- */
/* Nothing here can rely on :hover, so every control answers to a press, and
   the desktop hover states are switched off so they cannot stick after a tap. */
@media(hover:none){
  .card:hover,.rail__nav button:hover,.chips label:hover,.menu__lang a:hover,
  .rail__nav button:hover{background:none;border-color:var(--line);color:inherit}
  .card:active{transform:scale(.985)}
  .card:active .fig img{transform:scale(1.03)}
  .btn:active{transform:scale(.97)}
  .link:active{opacity:.62}
  .chips label:active,.menu__lang a:active,.lang__m a:active{background:rgba(3,34,77,.07)}
  .acc__b:active{color:var(--marine)}
  .mosaic button:active img{transform:scale(1.03)}
  .vx__row:active .vx__t{color:var(--marine)}
  .rail__nav button:active{background:var(--navy);border-color:var(--navy);color:#fff}
  .mus__b:active{transform:scale(.94)}
  /* a finger needs 44px; several of these were sized for a cursor */
  .link,.menu__x,.burger{min-height:44px;align-items:center}
  .lb__x{width:52px;height:52px}
  .lb__p,.lb__n{display:none}   /* a swipe moves between pictures on a phone */
}
.card,.btn,.mus__b{-webkit-tap-highlight-color:transparent}

/* --- Phone -------------------------------------------------------------- */
@media(max-width:700px){
  /* the rail says it scrolls by fading its right edge */
  .rail{position:relative}
  .rail::after{content:"";position:absolute;inset:0 0 0 auto;width:clamp(2rem,9vw,4rem);pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--paper));transition:opacity .4s}
  .section--mist .rail::after{background:linear-gradient(90deg,transparent,var(--mist))}
  .rail.end::after{opacity:0}
  .rail__item{width:min(80vw,340px)}
  /* the excursion index reads as a stack of cards, not a desktop table */
  .vx__row{padding-block:clamp(1.6rem,5vw,2.2rem)}
  .vx__mob .fig{aspect-ratio:4/3}
  .vx__row::after{content:"";position:absolute;right:2px;top:clamp(1.9rem,5.6vw,2.5rem);width:7px;height:7px;
    border-top:1px solid var(--body);border-right:1px solid var(--body);transform:rotate(45deg);opacity:.5}
  .menu__body{text-align:left}
  .menu__nav ul{justify-items:start}
  .menu__foot{justify-content:flex-start;text-align:left}
  .menu__lang{justify-content:flex-start;margin-top:1.4rem}
  /* the header capsule keeps its shape but gives the words more room; the
     side columns stay equal so the logo is truly centred */
  .hdr__in{gap:.5rem;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .hdr .btn,.menu__bar .btn{padding-inline:1.1rem}

}

/* --- The deep -----------------------------------------------------------
   The closing section sits below the sea divider, so it carries the light
   coming down through the surface. Held well back — the headline has to win. */
.deep__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent 0,transparent var(--seah),#000 calc(var(--seah) + 220px));
  mask-image:linear-gradient(transparent 0,transparent var(--seah),#000 calc(var(--seah) + 220px))}
.deep__bg img,.deep__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.55;filter:saturate(.85)}
.deep__bg video{opacity:0;transition:opacity 1.4s var(--e)}
.deep__bg video.on{opacity:.55}
/* navy at the edges so the sea divider still meets a solid colour */
.deep__bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 45%,rgba(3,34,77,.22),rgba(3,34,77,.72) 82%),linear-gradient(180deg,rgba(3,34,77,.1),rgba(3,34,77,.55))}
@media(prefers-reduced-motion:reduce){.deep__bg video{display:none}}

/* --- Footer ------------------------------------------------------------- */
.ftr{position:relative;isolation:isolate;background:var(--navy);color:rgba(255,255,255,.6);
  padding-block:clamp(3.2rem,6vw,4.6rem) calc(clamp(1.4rem,3vw,1.8rem) + 4.5rem)}   /* the floating player sits over the last line otherwise */
.ftr>.wrap{position:relative;z-index:1}
.ftr h4{color:rgba(255,255,255,.58);margin-bottom:1rem}
.ftr__top{display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr}
@media(min-width:480px) and (max-width:859px){.ftr__top{grid-template-columns:1fr 1fr}.ftr__top>div:first-child{grid-column:1/-1}}
@media(min-width:860px){.ftr__top{grid-template-columns:1.4fr .8fr 1fr}}
.ftr img{height:clamp(72px,7vw,96px);width:auto}
.ftr a{transition:color .3s}
.ftr a:hover{color:#fff}
.ftr li+li{margin-top:.7rem}
.ftr__b{margin-top:clamp(2rem,4vw,2.8rem);padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;font-size:.8125rem;color:rgba(255,255,255,.62)}
@media(max-width:560px){.ftr__b{flex-direction:column;gap:.5rem}.ftr{padding-bottom:calc(clamp(1.4rem,3vw,1.8rem) + 7rem)}}   /* the player and its invitation sit over the last line otherwise */

/* ==========================================================================
   MOTION
   ========================================================================== */
[data-a]{transition-property:opacity,transform,clip-path;transition-duration:.95s;transition-timing-function:var(--eo);transition-delay:calc(var(--i,0)*70ms)}
[data-a="up"]{opacity:0;transform:translateY(26px)}
[data-a="fade"]{opacity:0}
/* A photograph arrives by fading up. The curtain that used to slide off it was
   louder than anything in the reference set — and a mask-reveal reads best when
   it is reserved for one thing, which here is the headlines. */
[data-a="clip"]{position:relative;overflow:hidden;opacity:0;transform:translateY(14px);
  transition:opacity .75s var(--e),transform 1s var(--eo);
  transition-delay:calc(var(--i,0)*80ms)}
[data-a="clip"].in{opacity:1;transform:none}
[data-a="clip"] img,[data-a="clip"] video{transform:scale(1.035);transition:transform 1.6s var(--eo);
  transition-delay:calc(var(--i,0)*80ms)}
[data-a="clip"].in img,[data-a="clip"].in video{transform:scale(1)}
[data-a].in{opacity:1;transform:none}
a.fig--z[data-a="clip"].in:hover img,.card:hover .fig--z[data-a="clip"].in img{transform:scale(1.04)}
/* a figure that carries film rather than a still */
.fig.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s var(--e)}
.fig.film video.on{opacity:1}

.lines{display:block}
/* Han headlines are never split into lines, so the whole block rises instead */
.lines--whole{opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--eo),transform 1.1s var(--eo)}
.lines--whole.in{opacity:1;transform:none}
.lines .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.lines .ln>span{display:block;transform:translateY(112%);transition:transform 1.1s var(--eo);transition-delay:calc(var(--l,0)*85ms)}
.lines.in .ln>span{transform:translateY(0)}

/* ---- Fluidity ---------------------------------------------------------
   Lazy photographs arrive on a fade rather than a pop; anything tappable
   presses in under a finger; and moving between pages is a short cross-fade
   with a small rise (View Transitions, where the browser has them — the
   header and the player are the same element on every page, so they hold
   still while the page changes beneath them). */
img.lz{opacity:0;transition:opacity .8s var(--e)}
img.lz.ld{opacity:1}
@media(hover:none){
  .btn:active{transform:scale(.97);transition-duration:.12s}
  .card:active,.way:active,.vx__row:active,.mosaic a:active,.rail__nav button:active{transform:scale(.985);transition-duration:.15s}
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .24s var(--e) both}
::view-transition-new(root){animation:vtIn .55s var(--eo) both}
::view-transition-group(hdr),::view-transition-group(mus){animation-duration:.3s}
.hdr{view-transition-name:hdr}
.mus{view-transition-name:mus}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  img.lz{opacity:1;transition:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-a]{opacity:1!important;transform:none!important}
  [data-a="clip"]::after{display:none}
  [data-a] img,[data-a] video{transform:none!important}
  .lines .ln>span{transform:none!important}
  .lines--whole{opacity:1!important;transform:none!important}
  .hero__s img,.hero__s video{animation:none!important;transform:scale(1.02)!important}
  .sea__l,.sea__b,.sea .foam,.sea-deep i{animation:none}
}

/* --- The sea ------------------------------------------------------------ */
.sea{position:absolute;left:0;right:0;top:1px;height:var(--seah);overflow:hidden;pointer-events:none;z-index:2;
  --rise:34px;transform:translateY(calc(-100% + var(--rise)));transition:transform 1.6s var(--eo)}
.sea.in{--rise:0px}
.sea svg{width:200%;max-width:none;height:100%;display:block}
.sea__l,.sea__b{transform-box:view-box;transform-origin:0 0;will-change:transform}
/* each swell drifts on one clock and breathes on another: two nested groups,
   because one element cannot run two transforms at once */
.sea .l1{animation:swell 44s linear infinite}
.sea .l2{animation:swell 29s linear infinite reverse}
.sea .l3{animation:swell 21s linear infinite}
.sea .l4{animation:swell 16s linear infinite reverse}
.sea .b1{animation:bob 9.5s ease-in-out infinite alternate;--amp:3px}
.sea .b2{animation:bob 7.6s ease-in-out infinite alternate-reverse;--amp:4px}
.sea .b3{animation:bob 6.4s ease-in-out infinite alternate;--amp:5px}
.sea .b4{animation:bob 5.3s ease-in-out infinite alternate-reverse;--amp:6px}
@keyframes swell{to{transform:translateX(-50%)}}
@keyframes bob{from{transform:translateY(calc(var(--amp) * -1))}to{transform:translateY(var(--amp))}}
.sea .l1 .wv{fill:url(#cvW1);opacity:.55}
.sea .l2 .wv{fill:url(#cvW2);opacity:.85}
.sea .l3 .wv{fill:url(#cvW3)}
.sea .l4 .wv{fill:#03224D}
/* the crest catches the light; the foam is a broken white line that never quite settles */
.sea .lip{fill:url(#cvLip)}
/* the foam's stroke is a vertical gradient: white where the line rides a crest, gone in the troughs */
.sea .foam{fill:none;stroke:url(#cvFoam);stroke-width:2.6;stroke-linecap:round;opacity:.7;filter:url(#cvSoft);
  stroke-dasharray:140 46 90 70 210 38;animation:foam 38s linear infinite}
.sea .foam--2{stroke-width:1.2;opacity:.85;filter:none;stroke-dasharray:60 120 30 200;animation:foam 23s linear infinite reverse;transform:translateY(1.5px)}
@keyframes foam{to{stroke-dashoffset:-720}}
/* sun on the backs of the swells */
.sea__sheen{fill:url(#cvSheen);mix-blend-mode:screen}

/* caustics working across the water below the line — held back at the top so
   the divider meets plain navy, and moved by exactly one tile so the loop never jumps */
.sea-deep{position:absolute;left:0;right:0;top:0;height:min(52%,460px);overflow:hidden;pointer-events:none;z-index:1;
  -webkit-mask-image:linear-gradient(transparent 0,transparent var(--seah),#000 calc(var(--seah) + 140px),#000 55%,transparent 100%);
  mask-image:linear-gradient(transparent 0,transparent var(--seah),#000 calc(var(--seah) + 140px),#000 55%,transparent 100%)}
.sea-deep i{position:absolute;inset:-14% -14%;background-repeat:repeat;mix-blend-mode:screen;will-change:background-position;background-size:var(--t) var(--t)}
.sea-deep i:first-child{--t:clamp(260px,20vw,420px);opacity:.055;animation:caust 104s linear infinite}
.sea-deep i+i{--t:clamp(150px,12vw,250px);opacity:.035;animation:caust 71s linear infinite reverse}
@keyframes caust{to{background-position:var(--t) var(--t)}}

/* --- Utilities ---------------------------------------------------------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:210;background:#fff;color:var(--navy);padding:.75rem 1.25rem;border-radius:999px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;transition:top .3s}
.skip:focus{top:1rem}