/* ==========================================================================
   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) + 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,.sum__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,.chips label,.steps li,.sum__r .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}
.steps{margin-bottom:var(--s5)}
.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}.hdr__m{justify-self:center}.hdr__r{justify-self:end;display:flex;align-items:center;gap:clamp(.75rem,1.6vw,1.6rem)}
.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}
.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"] .chips label,
:root[lang^="zh"] .steps li,:root[lang^="zh"] .sum__r .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}
/* 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%)}}
.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{display:flex;flex-wrap:wrap;gap:.5rem}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--line);border-radius:999px;padding:.6rem 1.35rem;cursor:pointer;transition:background .35s,color .35s,border-color .35s}
.chips label:hover{border-color:var(--navy);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:focus-visible+label{outline:2px solid var(--marine);outline-offset:3px}
.steps{display:flex;gap:1.5rem;flex-wrap:wrap}
.steps li{display:flex;gap:.6rem;transition:color .4s}
.steps li.on{color:var(--navy)}
.steps li.done{color:var(--marine)}
.step{display:none}
.step.on{display:block;animation:up .6s var(--eo)}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sum{border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.5rem,3vw,2.25rem);display:grid;gap:1rem}
.sum__r{display:flex;justify-content:space-between;gap:1.5rem;font-size:.9375rem}
.sum__t{border-top:1px solid var(--line);padding-top:1rem;display:flex;justify-content:space-between;align-items:baseline}
.note{max-width:62ch;font-size:.8125rem;color:var(--body);line-height:1.75}
.note--avail{margin-top:.6rem;color:var(--ocean)}
.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(--display);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}
.step .btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.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}
  .steps{gap:.9rem 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}
.deep__bg img,.deep__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.34;filter:saturate(.8)}
.deep__bg video{opacity:0;transition:opacity 1.4s var(--e)}
.deep__bg video.on{opacity:.34}
/* 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,.35),var(--navy) 78%)}
@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(5rem,9vw,8rem) clamp(2rem,4vw,2.5rem)}
.ftr>.wrap{position:relative;z-index:1}
.ftr h4{color:rgba(255,255,255,.58);margin-bottom:1.4rem}
.ftr__top{display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr}
@media(min-width:860px){.ftr__top{grid-template-columns:1.4fr .8fr 1fr}}
.ftr img{height:46px;width:auto}
.ftr a{transition:color .3s}
.ftr a:hover{color:#fff}
.ftr li+li{margin-top:.7rem}
.ftr__b{margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.6rem;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)}

/* ==========================================================================
   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-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{transform-box:view-box;transform-origin:0 0;will-change:transform}
.sea .l1 .wv{fill:#3B6FA8;opacity:.28}
.sea .l2 .wv{fill:#12457C;opacity:.55}
.sea .l3 .wv{fill:#03224D}
.sea .l1{animation:swell 31s linear infinite}
.sea .l2{animation:swell 21s linear infinite reverse}
.sea .l3{animation:swell 14s linear infinite}
@keyframes swell{to{transform:translateX(-50%)}}

/* light bending down through the surface */
.sea__refr{fill:url(#cvRefr);mix-blend-mode:screen}

/* the crest splits the light into its channels */
.sea__chr{mix-blend-mode:screen}
.sea__chr .ch{fill:none;stroke-width:2.6;opacity:.5}
.sea__chr .r{stroke:#ff5a4d;transform:translate(-3px,4px)}
.sea__chr .g{stroke:#4ce39a;transform:translate(0,5.6px)}
.sea__chr .b{stroke:#5c95ff;transform:translate(3px,7.2px)}
.sea__chr .f{stroke:rgba(255,255,255,.7);stroke-width:1.6;opacity:.55;transform:translate(0,1.2px)}

/* caustics working across the water below the line */
.sea-deep{position:absolute;left:0;right:0;top:0;height:min(46%,420px);overflow:hidden;pointer-events:none;z-index:1;
  -webkit-mask-image:linear-gradient(#000 0,#000 32%,transparent 100%);mask-image:linear-gradient(#000 0,#000 32%,transparent 100%)}
.sea-deep i{position:absolute;inset:-14% -14%;background-repeat:repeat;mix-blend-mode:screen;will-change:background-position}
.sea-deep i:first-child{background-size:clamp(260px,20vw,420px);opacity:.05;animation:caustA 104s linear infinite}
.sea-deep i+i{background-size:clamp(150px,12vw,250px);opacity:.035;animation:caustB 71s linear infinite}
@keyframes caustA{to{background-position:420px 150px}}
@keyframes caustB{to{background-position:-250px 96px}}

/* --- 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}