/* ==========================================================================
   ZAMBEZI QUEST — "Ink & Water"

   The logo is not a colour swatch, it is a technique: a loaded brush dragged
   in one sweep, bristles separating, pigment pooling at the turns, spatter
   thrown at the release. This whole site is built from that one gesture.

   No rectangles hold photographs. Nothing is divided by a hairline. Every
   edge that matters is painted.

   ink    #04191F   the darkest pooling of the stroke
   petrol #0B3A42   the body of it
   teal   #17808A   the wash
   aqua   #63D2D8   where the brush ran wet
   paper  #EDF0EE   the ground it was laid on
   ochre  #C0842B   the sediment. Actions only.

   Instrument Serif — calligraphic, high stress, sits with wet ink
   Familjen Grotesk — narrow, warm, a little odd in the details
   ========================================================================== */

:root{
  --ink:#04191F;
  --petrol:#0B3A42;
  --teal:#0B6972;
  --aqua:#63D2D8;
  --aqua-pale:#A9E4E7;
  --paper:#EDF0EE;
  --paper-2:#E2E8E5;
  --ochre:#C0842B;
  --ochre-lt:#E0AC55;
  --ash:#5C6D69;

  --ff-d:'Instrument Serif',Georgia,serif;
  --ff-b:'Familjen Grotesk',system-ui,-apple-system,sans-serif;

  --t--1:clamp(.8rem,.77rem + .14vw,.88rem);
  --t-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --t-1:clamp(1.18rem,1.06rem + .55vw,1.5rem);
  --t-2:clamp(1.6rem,1.3rem + 1.4vw,2.5rem);
  --t-3:clamp(2.2rem,1.6rem + 2.8vw,4rem);
  --t-4:clamp(2.6rem,1.7rem + 4vw,5rem);
  --t-5:clamp(2.9rem,1.4rem + 6.1vw,7.2rem);

  --pad:clamp(1.1rem,4vw,4.5rem);
  --gap:clamp(1.2rem,2.4vw,2.4rem);
  --sec:clamp(5rem,10vw,11rem);
  --maxw:1460px;
  --e:cubic-bezier(.2,.6,.3,1);
  --eo:cubic-bezier(.16,1,.3,1);
  --nav:70px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 24px)}
body{
  font-family:var(--ff-b);font-size:var(--t-0);line-height:1.6;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
/* paper tooth. the ground the ink sits on */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.lock{overflow:hidden}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2.5px solid var(--ochre);outline-offset:4px}
::selection{background:var(--aqua);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;z-index:999;background:var(--ink);color:#fff;padding:.9rem 1.4rem;font-size:.85rem}
.skip:focus{left:1rem;top:1rem}
#brushdefs{position:absolute;width:0;height:0;overflow:hidden}

/* ------------------------------------------------------------ type */
h1,h2,h3,h4{font-family:var(--ff-d);font-weight:400;line-height:.98;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:var(--t-4)}
h2{font-size:var(--t-3)}
h3{font-size:var(--t-2)}
em,.it{font-style:italic}
p{text-wrap:pretty}

/* the eyebrow is a painted tick plus tracked-out grotesk */
.eye{
  display:flex;align-items:center;gap:.65rem;margin-bottom:1.3rem;
  font-size:.7rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--teal);
}
.eye svg{width:22px;height:16px;fill:currentColor;flex:none;opacity:.9}
.eye--l{color:var(--aqua)}

.lede{font-size:var(--t-1);line-height:1.5;max-width:60ch;color:color-mix(in srgb,var(--ink) 80%,transparent)}
.on-d .lede,.s-ink .lede,.s-deep .lede{color:rgba(255,255,255,.76)}
.dim{color:color-mix(in srgb,var(--ink) 62%,transparent)}
.s-ink .dim,.s-deep .dim,.on-d .dim{color:rgba(255,255,255,.62)}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum"}

/* headline with a brush underline swept beneath one word */
.paint{position:relative;display:inline-block}
html.js .paint>svg{
  position:absolute;left:-4%;right:-4%;bottom:-.16em;width:108%;height:.34em;
  fill:var(--ochre);opacity:.9;z-index:-1;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1s var(--eo) .25s;
}
html.js .in .paint>svg,html.js .paint.in>svg{transform:scaleX(1)}
.s-ink .paint>svg,.s-deep .paint>svg{fill:var(--teal)}

/* ------------------------------------------------------------ layout */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);position:relative;z-index:2}
.wrap--n{max-width:980px}
.sec{padding-block:var(--sec);position:relative;z-index:2}
.sec--t{padding-block:calc(var(--sec)*.55)}
.s-ink{background:var(--ink);color:var(--paper)}
.s-deep{background:var(--petrol);color:var(--paper)}
.s-pap2{background:var(--paper-2)}
.s-ink h1,.s-ink h2,.s-ink h3,.s-deep h1,.s-deep h2,.s-deep h3{color:#fff}
.head{max-width:min(24ch,100%);margin-bottom:clamp(2.4rem,5vw,4.4rem)}
.head--w{max-width:min(30ch,100%)}
.head2{display:grid;gap:1.6rem;align-items:end;margin-bottom:clamp(2.4rem,5vw,4.4rem)}
@media(min-width:920px){.head2{grid-template-columns:1.2fr .8fr;gap:3.4rem}}

/* ---------------------------------------------- painted section edges */
.edge{position:relative;z-index:3;height:clamp(38px,5vw,74px);pointer-events:none;margin-block:-1px}
.edge svg{width:100%;height:100%;display:block}
.edge--up{transform:scaleY(-1)}

/* ------------------------------------------------------------ buttons
   A button is a swipe of ink. Hover loads the brush and it fills.       */
.btn{
  --bg:var(--ink);--fg:#fff;--fill:var(--ochre);
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.75rem;background:var(--bg);color:var(--fg);
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  border:0;cursor:pointer;overflow:hidden;isolation:isolate;
  clip-path:polygon(1% 6%,99% 0,100% 92%,2% 100%);
  transition:color .35s var(--e),transform .4s var(--e);
}
.btn__wash{
  position:absolute;inset:-20% -6%;z-index:-1;fill:var(--fill);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--eo);
}
.btn:hover{color:var(--ink);transform:translate(1px,-2px)}
.btn:hover .btn__wash{transform:scaleX(1)}
.btn svg.arw{transition:transform .4s var(--e);flex:none}
.btn:hover svg.arw{transform:translateX(5px)}
.btn--gh{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 26%,transparent)}
.btn--l{--bg:transparent;--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.btn--l:hover{color:var(--ink)}
.btn--o{--bg:var(--ochre);--fg:var(--ink);--fill:#fff}
.btn--sm{padding:.65rem 1.2rem;font-size:.68rem}
.row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* text link with a hand-drawn rule that redraws on hover */
.tl{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:.5rem;transition:gap .35s var(--e),color .3s;
}
.tl svg.rule{position:absolute;left:0;bottom:0;width:100%;height:7px;fill:currentColor;
  transform:scaleX(1);transform-origin:left;transition:transform .45s var(--eo)}
.tl:hover{gap:.95rem;color:var(--teal)}
.tl:hover svg.rule{animation:redraw .6s var(--eo)}
@keyframes redraw{0%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1)}}
.s-ink .tl:hover,.s-deep .tl:hover,.on-d .tl:hover{color:var(--aqua)}

/* ------------------------------------------------- brush-masked media
   Photographs are never rectangles. Each sits inside a stroke, and is
   painted in left-to-right on scroll by a travelling gradient mask.     */
.bm{position:relative;overflow:visible;isolation:isolate}
.bm__in{display:block;position:relative;overflow:hidden}
html.js .bm__in{
  -webkit-mask-image:linear-gradient(90deg,#000 0 38%,rgba(0,0,0,.35) 52%,transparent 66%);
          mask-image:linear-gradient(90deg,#000 0 38%,rgba(0,0,0,.35) 52%,transparent 66%);
  -webkit-mask-size:265% 100%;mask-size:265% 100%;
  -webkit-mask-position:100% 0;mask-position:100% 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:-webkit-mask-position 1.5s var(--eo),mask-position 1.5s var(--eo);
}
html.js .bm.in .bm__in{-webkit-mask-position:0 0;mask-position:0 0}
.bm img{width:100%;height:100%;object-fit:cover;display:block}
.bm--wide .bm__in{clip-path:url(#bWide);aspect-ratio:1000/700}
.bm--tall .bm__in{clip-path:url(#bTall);aspect-ratio:700/1000}
.bm--sq   .bm__in{clip-path:url(#bSq);aspect-ratio:1/1}
.bm--arc  .bm__in{clip-path:url(#bArc);aspect-ratio:1/1}
/* a wet aqua edge that trails the brush as it lays down */
html.js .bm__wet{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent 0 44%,var(--aqua) 50%,transparent 56% 100%);
  background-size:265% 100%;background-position:100% 0;background-repeat:no-repeat;
  mix-blend-mode:screen;opacity:0;
  transition:background-position 1.5s var(--eo),opacity .5s;
}
html.js .bm.in .bm__wet{background-position:0 0;opacity:.55}
html.js .bm.done .bm__wet{opacity:0}
.bm__cap{
  margin-top:1rem;font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash);
}

/* a number or word painted over the corner of a stroke */
.bm__stamp{
  position:absolute;z-index:3;left:-2%;bottom:4%;
  font-family:var(--ff-d);font-size:clamp(2.6rem,6vw,5rem);line-height:.8;
  color:var(--paper);text-shadow:0 2px 30px rgba(4,25,31,.5);
}
.bm__stamp small{display:block;font-family:var(--ff-b);font-size:.62rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;margin-top:.5rem;color:var(--aqua)}

/* ------------------------------------------------------------ nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:200;height:var(--nav);display:flex;align-items:center;
  transition:transform .5s var(--e),background .4s,box-shadow .4s}
.nav__in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav.stuck{background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 6px 30px -22px rgba(4,25,31,.7)}
.nav.hide{transform:translateY(-102%)}

/* single line lockup. the mark, then the name. nothing stacked. */
.brand{display:flex;align-items:center;gap:.6rem;flex:none}
.brand img{width:38px;height:38px;object-fit:contain;flex:none;
  filter:drop-shadow(0 1px 6px rgba(4,25,31,.35));transition:transform .5s var(--e)}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.brand b{font-family:var(--ff-d);font-weight:400;font-size:1.32rem;letter-spacing:.005em;
  color:#fff;white-space:nowrap;transition:color .4s;line-height:1}
.brand b i{font-style:italic;color:var(--aqua)}
.nav.stuck .brand b,.nav--solid .brand b{color:var(--ink)}
.nav.stuck .brand b i,.nav--solid .brand b i{color:var(--teal)}

.nlinks{display:none;align-items:center;gap:.1rem}
@media(min-width:1080px){.nlinks{display:flex}}
.nlink{position:relative;padding:.5rem .78rem;font-size:.78rem;font-weight:600;letter-spacing:.01em;
  color:rgba(255,255,255,.85);transition:color .3s;white-space:nowrap}
.nav.stuck .nlink,.nav--solid .nlink{color:color-mix(in srgb,var(--ink) 78%,transparent)}
.nlink svg{position:absolute;left:.5rem;right:.5rem;bottom:.1rem;width:calc(100% - 1rem);height:6px;
  fill:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--eo)}
.nlink:hover svg,.nlink[aria-current=page] svg{transform:scaleX(1)}
.nlink:hover,.nlink[aria-current=page]{color:#fff}
.nav.stuck .nlink:hover,.nav.stuck .nlink[aria-current=page],
.nav--solid .nlink:hover,.nav--solid .nlink[aria-current=page]{color:var(--teal)}

.hassub{position:relative}
.sub{position:absolute;top:calc(100% + 6px);left:0;min-width:280px;background:var(--paper);
  padding:.45rem;opacity:0;visibility:hidden;transform:translateY(-6px);
  clip-path:polygon(0 2%,100% 0,99% 99%,1% 100%);
  box-shadow:0 30px 70px -26px rgba(4,25,31,.5);
  transition:opacity .3s,transform .3s,visibility .3s}
.hassub:hover .sub,.hassub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:flex;justify-content:space-between;gap:1rem;padding:.62rem .8rem;font-size:.9rem;color:var(--ink);
  transition:background .25s,color .25s}
.sub a i{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.14em;color:var(--ash);align-self:center;text-transform:uppercase}
.sub a:hover{background:var(--paper-2);color:var(--teal)}

.ncta{display:none}
@media(min-width:720px){.ncta{display:inline-flex}}
.nav.stuck .btn--l{--fg:var(--ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 26%,transparent)}

.burger{display:grid;place-items:center;width:42px;height:42px;background:none;border:0;cursor:pointer;flex:none;gap:5px}
@media(min-width:1080px){.burger{display:none}}
.burger i{display:block;width:20px;height:2px;background:#fff;transition:transform .45s var(--e),opacity .3s}
.nav.stuck .burger i,.nav--solid .burger i{background:var(--ink)}
body.lock .burger i{background:#fff}
body.lock .burger i:first-child{transform:translateY(7px) rotate(45deg)}
body.lock .burger i:nth-child(2){opacity:0}
body.lock .burger i:last-child{transform:translateY(-7px) rotate(-45deg)}

/* full-screen menu, wiped open with a brush */
.menu{position:fixed;inset:0;z-index:190;background:var(--ink);visibility:hidden;
  padding:calc(var(--nav) + 2.4rem) var(--pad) 2.5rem;overflow-y:auto;
  clip-path:circle(0% at 92% 5%);transition:clip-path .85s var(--eo),visibility .85s}
body.lock .menu{visibility:visible;clip-path:circle(150% at 92% 5%)}
.menu__g{max-width:var(--maxw);margin-inline:auto;display:grid;gap:2.4rem}
@media(min-width:860px){.menu__g{grid-template-columns:1.5fr 1fr}}
.mlist li{overflow:hidden;border-bottom:1px solid rgba(255,255,255,.1)}
.mlist a{display:flex;align-items:baseline;gap:1rem;padding:.5em 0;
  font-family:var(--ff-d);font-size:clamp(2rem,7vw,3.6rem);color:var(--paper);
  transform:translateY(115%);transition:transform .8s var(--eo),color .3s}
body.lock .mlist a{transform:none}
.mlist li:nth-child(1) a{transition-delay:.16s}
.mlist li:nth-child(2) a{transition-delay:.22s}
.mlist li:nth-child(3) a{transition-delay:.28s}
.mlist li:nth-child(4) a{transition-delay:.34s}
.mlist li:nth-child(5) a{transition-delay:.40s}
.mlist li:nth-child(6) a{transition-delay:.46s}
.mlist li:nth-child(7) a{transition-delay:.52s}
.mlist a em{font-family:var(--ff-b);font-style:normal;font-size:.62rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.mlist a:hover{color:var(--aqua)}
.mside{opacity:0;transition:opacity .6s .5s}
body.lock .mside{opacity:1}
.mside h4{font-size:.64rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--aqua);margin-bottom:.9rem}
.mside ul{display:grid;gap:.5rem;margin-bottom:1.8rem}
.mside a{color:rgba(255,255,255,.7);font-size:.95rem}
.mside a:hover{color:#fff}

/* ------------------------------------------ the spine (signature) ----- */
.spine{position:fixed;top:0;left:0;width:min(30vw,380px);height:100vh;z-index:1;
  pointer-events:none;opacity:.5}
.spine svg{width:100%;height:100%}
.spine path{fill:var(--teal)}
@media(max-width:900px){.spine{display:none}}

/* ------------------------------------------------------------ hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding-top:calc(var(--nav) + 3rem);
  background:var(--ink);overflow:hidden;isolation:isolate;z-index:2}
.hero__m{position:absolute;inset:0;z-index:-2;will-change:transform}
.hero__m picture,.ph__m picture{display:block;height:100%}
.hero__m img{width:100%;height:100%;object-fit:cover;transform:scale(1.16);
  animation:drift 30s var(--e) forwards}
@keyframes drift{to{transform:scale(1.01)}}
.hero__m::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,25,31,.96) 2%,rgba(4,25,31,.42) 48%,rgba(4,25,31,.2) 72%,rgba(4,25,31,.7) 100%),
             radial-gradient(105% 70% at 8% 100%,rgba(4,25,31,.8),transparent 62%)}
@media(max-width:720px){
  .hero__m img{object-position:58% center}
  .hero__m::after{background:linear-gradient(to top,rgba(4,25,31,.94) 2%,rgba(4,25,31,.34) 50%,rgba(4,25,31,.14) 72%,rgba(4,25,31,.56) 100%),radial-gradient(105% 70% at 8% 100%,rgba(4,25,31,.66),transparent 64%)}
}
.hero__in{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--pad) clamp(2.4rem,6vw,4.6rem);color:#fff}
.hero h1{font-size:var(--t-5);line-height:.9;letter-spacing:-.028em;max-width:15ch;color:#fff}
.hero h1 em{color:var(--aqua-pale)}
.hero__sub{max-width:44ch;margin-top:1.5rem;font-size:var(--t-1);line-height:1.5;color:rgba(255,255,255,.82)}
.hero__act{margin-top:2rem}
.hero__f{margin-top:clamp(2rem,4vw,3.2rem);padding-top:1.3rem;display:flex;flex-wrap:wrap;gap:1rem 2.2rem;
  align-items:center;position:relative}
.hero__f::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.04))}
.hstat{display:flex;align-items:baseline;gap:.5rem}
.hstat b{font-family:var(--ff-d);font-size:1.75rem;color:#fff;line-height:1}
.hstat span{font-size:.63rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.58);max-width:13ch;line-height:1.35}
.scroll{position:absolute;right:var(--pad);bottom:clamp(2.4rem,6vw,4.6rem);z-index:3;display:none}
@media(min-width:1080px){.scroll{display:block}}
.scroll span{writing-mode:vertical-rl;font-size:.6rem;font-weight:700;letter-spacing:.32em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.scroll i{display:block;width:1px;height:54px;margin:.8rem auto 0;background:rgba(255,255,255,.25);
  position:relative;overflow:hidden}
.scroll i::after{content:"";position:absolute;inset:0;background:var(--aqua);animation:sl 2.4s var(--e) infinite}
@keyframes sl{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* interior hero */
.ph{position:relative;min-height:min(66svh,620px);display:flex;align-items:flex-end;padding-top:calc(var(--nav) + 2.5rem);
  background:var(--ink);overflow:hidden;isolation:isolate;z-index:2}
.ph__m{position:absolute;inset:0;z-index:-2}
.ph__m img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);animation:drift 24s var(--e) forwards}
.ph__m::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,25,31,.95),rgba(4,25,31,.36) 58%,rgba(4,25,31,.6))}
.ph__in{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--pad) clamp(2.2rem,5vw,3.8rem);color:#fff}
.ph h1{font-size:var(--t-3);max-width:16ch;color:#fff}
.ph p{max-width:52ch;margin-top:1rem;color:rgba(255,255,255,.78)}
.crumb{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.65rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.52);margin-bottom:1.2rem}
.crumb a:hover{color:var(--aqua)}

/* ------------------------------------------------------------ reveals */
html.js [data-r]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--eo),transform .9s var(--eo)}
html.js [data-r].in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}
[data-d="3"]{transition-delay:.24s}[data-d="4"]{transition-delay:.32s}
[data-d="5"]{transition-delay:.4s}
html.js [data-ln] .l{display:block;overflow:hidden}
html.js [data-ln] .l>i{display:block;font-style:inherit;transform:translateY(112%);transition:transform 1.05s var(--eo)}
html.js [data-ln].in .l>i{transform:none}
html.js [data-ln].in .l:nth-child(2)>i{transition-delay:.09s}
html.js [data-ln].in .l:nth-child(3)>i{transition-delay:.18s}
html.js [data-ln].in .l:nth-child(4)>i{transition-delay:.27s}

/* ------------------------------------------------------------ marquee */
.marq{overflow:hidden;padding-block:1.1rem;position:relative;z-index:2;background:var(--ink)}
.marq__t{display:flex;width:max-content;animation:march 52s linear infinite}
.marq:hover .marq__t{animation-play-state:paused}
@keyframes march{to{transform:translateX(-50%)}}
.marq__i{display:flex;align-items:center;gap:2rem;padding-inline:1rem;white-space:nowrap;
  font-family:var(--ff-d);font-size:clamp(1.1rem,2.4vw,2rem);color:rgba(255,255,255,.9)}
.marq__i::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ochre);flex:none}
.marq__i em{color:var(--aqua)}

/* ------------------------------------------------------------ chapters
   Sticky left column, images scrolling past on the right.               */
.chap{display:grid;gap:2.5rem}
@media(min-width:960px){.chap{grid-template-columns:.85fr 1.15fr;gap:clamp(3rem,6vw,6rem);align-items:start}}
.chap__s{position:sticky;top:calc(var(--nav) + clamp(2rem,6vh,5rem));align-self:start}
.chap__l{display:grid;gap:clamp(4rem,10vw,9rem)}
.chap__i{position:relative}
.chap__i h3{font-size:var(--t-2);margin-bottom:.7rem}
.chap__i p{color:color-mix(in srgb,var(--ink) 68%,transparent);max-width:52ch}
.s-ink .chap__i p,.s-deep .chap__i p{color:rgba(255,255,255,.68)}
.chap__n{font-family:var(--ff-d);font-size:1.1rem;color:var(--teal);display:block;margin-bottom:.4rem}
.s-ink .chap__n{color:var(--aqua)}

/* ------------------------------------------------------------ trust */
.trust{display:grid;gap:2rem;align-items:center}
@media(min-width:1000px){.trust{grid-template-columns:auto 1fr;gap:3.4rem}}
.tscore{display:flex;align-items:center;gap:1.1rem;flex:none}
.tscore b{font-family:var(--ff-d);font-size:clamp(3.4rem,7vw,5rem);line-height:.8;color:var(--ink)}
.tmeta{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.7;color:var(--teal)}
.stars{display:flex;gap:2px;margin-bottom:.3rem}
.stars svg{width:15px;height:15px;fill:var(--ochre)}
.badges{display:flex;flex-wrap:wrap;gap:.7rem}
.badge{display:flex;align-items:center;justify-content:center;height:74px;flex:1 1 150px;max-width:215px;
  padding:.9rem 1.3rem;background:#fff;clip-path:polygon(1% 5%,99% 0,100% 95%,2% 100%);
  transition:transform .45s var(--e),box-shadow .45s var(--e)}
.badge img{max-height:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.55;transition:filter .4s,opacity .4s}
.badge:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:0 22px 44px -24px rgba(4,25,31,.55)}
.badge:hover img{filter:none;opacity:1}

/* ------------------------------------------------------------ dest cards */
.dgrid{display:grid;gap:clamp(2rem,4vw,3.4rem)}
@media(min-width:760px){.dgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.dgrid{grid-template-columns:repeat(3,1fr)}}
.dcard{display:block;position:relative}
.dcard .bm{margin-bottom:1.1rem}
.dcard img{transition:transform 1.3s var(--e)}
.dcard:hover img{transform:scale(1.07)}
.dcard__h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.4rem}
.dcard h3{font-size:var(--t-2);transition:color .35s}
.dcard:hover h3{color:var(--teal)}
.s-ink .dcard:hover h3{color:var(--aqua)}
.dcard__c{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);flex:none}
.dcard p{font-size:.92rem;color:color-mix(in srgb,var(--ink) 65%,transparent);max-width:38ch}
.s-ink .dcard p{color:rgba(255,255,255,.64)}

/* ------------------------------------------------------------ packages */
.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:2rem;align-items:center}
.filters b{font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin-right:.4rem}
.chip{padding:.5rem 1rem;background:none;border:0;cursor:pointer;font-size:.72rem;font-weight:600;
  color:var(--ink);position:relative;transition:color .3s}
.chip::after{content:"";position:absolute;inset:auto 6% 2px 6%;height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--eo)}
.chip:hover::after{transform:scaleX(1)}
.chip[aria-pressed=true]{color:#fff;background:var(--ink);clip-path:polygon(2% 8%,98% 0,100% 90%,1% 100%)}
.chip[aria-pressed=true]::after{display:none}

.pgrid{display:grid;gap:clamp(1.8rem,3vw,2.8rem)}
@media(min-width:640px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.pgrid{grid-template-columns:repeat(3,1fr)}}
.pk{display:flex;flex-direction:column;position:relative;transition:transform .5s var(--e)}
.pk:hover{transform:translateY(-6px)}
.pk[hidden]{display:none}
.pk .bm{margin-bottom:1rem}
.pk img{transition:transform 1.2s var(--e)}
.pk:hover img{transform:scale(1.06)}
.pk__d{position:absolute;top:-.5rem;left:-.4rem;z-index:4;font-family:var(--ff-d);
  font-size:2.7rem;line-height:.8;color:var(--ink);pointer-events:none}
.pk__d small{display:block;font-family:var(--ff-b);font-size:.55rem;font-weight:700;
  letter-spacing:.24em;color:var(--teal);margin-top:.2rem}
.s-ink .pk__d{color:#fff}
.pk h3{font-size:1.32rem;line-height:1.1;margin-bottom:.5rem}
.pk p{font-size:.9rem;line-height:1.6;color:color-mix(in srgb,var(--ink) 66%,transparent);flex:1;margin-bottom:1rem}
.pk .tl--sm{align-self:flex-start;margin-bottom:.7rem;font-size:.64rem}
.pk__f{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.85rem;
  border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.pk__r{font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.pk__tags{position:absolute;top:.6rem;right:.6rem;z-index:4;display:flex;gap:.3rem;flex-wrap:wrap;justify-content:flex-end}
.pk__tag{background:rgba(4,25,31,.78);backdrop-filter:blur(6px);color:#fff;font-size:.55rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:.25rem .5rem}
.pempty{padding:4rem 1rem;text-align:center;color:var(--ash);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
.pcount{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);margin-bottom:1.6rem}

/* ------------------------------------------------------------ split */
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(min-width:940px){
  .split{grid-template-columns:1fr 1fr}
  .split--w{grid-template-columns:1.08fr .92fr}
  .split--f .split__m{order:2}
}
.split__m{position:relative}

/* ------------------------------------------------------------ list rows */
.vlist{display:grid}
.vrow{display:grid;gap:.5rem 2.2rem;padding-block:clamp(1.5rem,2.8vw,2.2rem);position:relative;
  transition:padding-inline .5s var(--e)}
.vrow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:color-mix(in srgb,var(--ink) 15%,transparent)}
.s-ink .vrow::after,.s-deep .vrow::after{background:rgba(255,255,255,.15)}
@media(min-width:820px){
  .vrow{grid-template-columns:auto minmax(0,22ch) 1fr;align-items:start}
  .vrow:hover{padding-inline:1.1rem}
}
.vrow__n{font-family:var(--ff-d);font-size:1.15rem;color:var(--teal);padding-top:.15rem}
.s-ink .vrow__n,.s-deep .vrow__n{color:var(--aqua)}
.vrow h3{font-size:var(--t-1);line-height:1.2}
.vrow p{color:color-mix(in srgb,var(--ink) 67%,transparent);max-width:56ch}
.s-ink .vrow p,.s-deep .vrow p{color:rgba(255,255,255,.67)}

/* ------------------------------------------------------------ quotes */
.rail{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1.2rem;
  scrollbar-width:thin;scrollbar-color:var(--teal) transparent}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--teal)}
.q{flex:0 0 min(420px,84vw);scroll-snap-align:start;display:flex;flex-direction:column;gap:.95rem;
  padding:1.9rem 1.8rem;background:rgba(255,255,255,.045);
  clip-path:polygon(1% 3%,99% 0,100% 97%,1% 100%);
  transition:background .45s}
.q:hover{background:rgba(255,255,255,.09)}
.q__s{display:flex;gap:2px}
.q__s svg{width:13px;height:13px;fill:var(--ochre-lt)}
.q blockquote{font-family:var(--ff-d);font-size:1.5rem;line-height:1.24;color:#fff}
.q p{font-size:.87rem;line-height:1.6;color:rgba(255,255,255,.62);flex:1}
.q__b{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.15);font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.q__b b{color:var(--aqua)}
.q__b span{color:rgba(255,255,255,.42)}
.rnav{display:flex;gap:.5rem;margin-top:1.1rem}
.rnav button{width:44px;height:44px;display:grid;place-items:center;background:none;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.22);border-radius:50%;transition:background .35s,border-color .35s}
.rnav button:hover{background:var(--teal);border-color:var(--teal)}
.rnav svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.8}

/* ------------------------------------------------------------ activities */
.agrid{display:grid;gap:clamp(1.4rem,2.6vw,2.2rem)}
@media(min-width:640px){.agrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.agrid{grid-template-columns:repeat(4,1fr)}}
.act{position:relative;padding:1.7rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;
  min-height:225px;background:color-mix(in srgb,var(--ink) 4%,transparent);
  clip-path:polygon(1% 4%,99% 0,100% 96%,1% 100%);
  transition:background .5s var(--e),color .5s}
.act:hover{background:var(--ink);color:var(--paper)}
.act:hover h3{color:#fff}
.act svg.ic{width:30px;height:30px;stroke:var(--teal);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:.4rem;transition:stroke .5s}
.act:hover svg.ic{stroke:var(--aqua)}
.act h3{font-size:1.16rem;transition:color .5s}
.act p{font-size:.86rem;line-height:1.58;color:color-mix(in srgb,var(--ink) 64%,transparent);flex:1;transition:color .5s}
.act:hover p{color:rgba(255,255,255,.7)}
.act__m{font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.s-pap2 .act{background:rgba(255,255,255,.6)}

/* ------------------------------------------------------------ gallery */
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.8rem)}
@media(min-width:820px){.strip{grid-template-columns:repeat(4,1fr)}}
.strip img{transition:transform 1.2s var(--e)}
.strip .bm:hover img{transform:scale(1.08)}

/* ------------------------------------------------------------ stats */
.stats{display:grid;gap:clamp(1.5rem,3vw,2.4rem)}
@media(min-width:620px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{position:relative;padding-top:1.3rem}
.stat::before{content:"";position:absolute;top:0;left:0;width:56px;height:2px;background:var(--aqua)}
.stat b{display:block;font-family:var(--ff-d);font-size:clamp(2.7rem,5vw,4rem);line-height:.86;color:#fff;margin-bottom:.55rem}
.stat b i{font-style:normal;color:var(--aqua);font-size:.5em}
.stat span{font-size:.65rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);display:block;line-height:1.6}
.s-pap .stat b{color:var(--ink)}

/* ------------------------------------------------------------ forms */
.form{display:grid;gap:1.2rem}
@media(min-width:680px){.frow{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}}
.f{display:grid;gap:.4rem}
.f label{font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.f label i{font-style:normal;color:var(--ochre)}
.f input,.f select,.f textarea{width:100%;padding:.88rem 1rem;background:#fff;border:0;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 16%,transparent);
  font-size:.95rem;transition:box-shadow .3s}
.f textarea{min-height:150px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--teal)}
.f .hint{font-size:.76rem;color:var(--ash)}
.f.bad input,.f.bad select,.f.bad textarea{box-shadow:inset 0 0 0 2px #B4442F}
.f .err{font-size:.76rem;color:#B4442F;display:none}
.f.bad .err{display:block}
.fnote{font-size:.82rem;color:var(--ash);max-width:54ch}
.fok{display:none;padding:1.05rem 1.3rem;background:color-mix(in srgb,var(--teal) 12%,transparent);
  border-left:3px solid var(--teal);font-size:.92rem}
.fok.show{display:block}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.check{display:flex;gap:.65rem;align-items:flex-start;font-size:.82rem;line-height:1.5;color:var(--ash)}
.check input{margin-top:.25rem;accent-color:var(--teal);flex:none}
.check a{color:var(--teal);text-decoration:underline;text-underline-offset:.16em}

/* ------------------------------------------------------------ contact */
.cgrid{display:grid;gap:clamp(2rem,5vw,4rem)}
@media(min-width:980px){.cgrid{grid-template-columns:.82fr 1.18fr}}
.cinfo{display:grid}
.crow{padding-block:1.3rem;display:grid;gap:.25rem;position:relative}
.crow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:color-mix(in srgb,var(--ink) 15%,transparent)}
.crow h4{font-size:.63rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.crow a,.crow p{font-family:var(--ff-d);font-size:1.35rem;transition:color .3s}
.crow a:hover{color:var(--teal)}
.map{width:100%;aspect-ratio:16/10;border:0;filter:grayscale(1) contrast(1.06);transition:filter .6s}
.map:hover{filter:none}

/* ------------------------------------------------------------ prose */
.pw{display:grid;gap:3rem}
@media(min-width:1020px){.pw{grid-template-columns:220px 1fr;gap:4rem}}
.prose{max-width:72ch}
.prose h2{font-size:var(--t-2);margin-top:2.8rem;margin-bottom:.9rem;padding-top:1.8rem;
  scroll-margin-top:calc(var(--nav) + 30px);position:relative}
.prose h2::before{content:"";position:absolute;top:0;left:0;width:48px;height:2px;background:var(--ochre)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--t-1);margin-top:1.8rem;margin-bottom:.5rem}
.prose p{margin-bottom:1rem;color:color-mix(in srgb,var(--ink) 78%,transparent)}
.prose ul{margin:0 0 1.3rem;display:grid;gap:.5rem}
.prose li{position:relative;padding-left:1.7rem;color:color-mix(in srgb,var(--ink) 78%,transparent)}
.prose li svg{position:absolute;left:0;top:.42em;width:16px;height:12px;fill:var(--ochre)}
.prose ul ul{margin:.5rem 0 0}
.toc{display:none}
@media(min-width:1020px){.toc{display:grid;gap:.35rem;position:sticky;top:calc(var(--nav) + 2rem);align-self:start}}
.toc a{font-size:.72rem;font-weight:600;color:var(--ash);padding:.3rem 0 .3rem .85rem;
  border-left:1.5px solid color-mix(in srgb,var(--ink) 14%,transparent);transition:color .3s,border-color .3s}
.toc a:hover{color:var(--teal);border-color:var(--teal)}

/* ------------------------------------------------------------ faq */
.faq{display:grid}
.faq details{position:relative}
.faq details::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:color-mix(in srgb,var(--ink) 15%,transparent)}
.faq summary{display:flex;justify-content:space-between;gap:1.4rem;align-items:center;
  padding-block:1.3rem;cursor:pointer;list-style:none;font-family:var(--ff-d);font-size:var(--t-1)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:14px;height:14px;flex:none;position:relative;
  background:linear-gradient(var(--teal),var(--teal)) center/100% 2px no-repeat,
             linear-gradient(var(--teal),var(--teal)) center/2px 100% no-repeat;
  transition:transform .4s var(--e)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{padding-bottom:1.3rem;max-width:68ch;color:color-mix(in srgb,var(--ink) 70%,transparent)}

/* ------------------------------------------------------------ notice */
.note{padding:1.15rem 1.4rem;background:color-mix(in srgb,var(--ochre) 13%,transparent);
  border-left:3px solid var(--ochre);font-size:.9rem;line-height:1.62}
.note b{display:block;font-size:.63rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:.35rem;color:#8A5D14}
.note a{border-bottom:1px solid currentColor}

/* ------------------------------------------------------------ CTA */
.cta{position:relative;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate;z-index:2}
.cta__bg{position:absolute;inset:0;z-index:-2}
.cta__bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(4,25,31,.96) 24%,rgba(4,25,31,.5))}
.cta__in{padding-block:clamp(4rem,8vw,7.5rem);display:grid;gap:2.2rem;align-items:center}
@media(min-width:920px){.cta__in{grid-template-columns:1.3fr .7fr}}
.cta h2{font-size:var(--t-3);max-width:16ch;color:#fff}
.cta h2 em{color:var(--aqua-pale)}
.cta p{margin-top:1rem;color:rgba(255,255,255,.74);max-width:46ch}
.cta__s{display:grid;gap:.85rem;justify-items:start}
@media(min-width:920px){.cta__s{justify-items:end;text-align:right}}
.cta__p{font-family:var(--ff-d);font-size:clamp(1.5rem,3vw,2.1rem);color:#fff;transition:color .3s}
.cta__p:hover{color:var(--aqua)}

/* ------------------------------------------------------------ footer */
.foot{background:var(--ink);color:rgba(255,255,255,.66);padding-block:clamp(3.4rem,7vw,5.4rem) 0;position:relative;z-index:2}
.ftop{display:grid;gap:2.5rem;padding-bottom:3.2rem;position:relative}
.ftop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.15)}
@media(min-width:800px){.ftop{grid-template-columns:1.5fr 1fr 1fr}}
@media(min-width:1160px){.ftop{grid-template-columns:1.7fr 1fr 1fr 1.25fr}}
.foot h4{font-size:.63rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--aqua);margin-bottom:1.1rem}
.foot ul{display:grid;gap:.58rem}
.foot a:hover{color:#fff}
.fbrand{display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem}
.fbrand img{width:52px;height:52px;object-fit:contain;flex:none}
.fbrand b{font-family:var(--ff-d);font-weight:400;font-size:1.35rem;color:#fff;line-height:1.05;display:block}
.fbrand b i{font-style:italic;color:var(--aqua)}
.fabout{max-width:40ch;font-size:.9rem;line-height:1.68;margin-bottom:1.4rem}
.social{display:flex;gap:.5rem}
.social a{width:40px;height:40px;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.18);
  border-radius:50%;transition:background .35s,border-color .35s,transform .35s}
.social a:hover{background:var(--teal);border-color:var(--teal);transform:translateY(-3px)}
.social svg{width:16px;height:16px;fill:currentColor}
.social--text a{width:auto;height:auto;border-radius:0;padding:.46rem .68rem;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sign{display:grid;gap:.7rem}
.sign__r{display:flex;gap:.45rem;flex-wrap:wrap}
.sign input{flex:1 1 175px;padding:.82rem 1rem;background:transparent;color:#fff;border:0;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2);font-size:.9rem}
.sign input::placeholder{color:rgba(255,255,255,.38)}
.sign input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--aqua)}
.fpay{margin-top:1.4rem}
.fpay img{height:25px;width:auto;opacity:.5;filter:grayscale(1) brightness(1.8)}
.fbot{padding-block:1.6rem;display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;align-items:center;
  justify-content:space-between;font-size:.68rem;color:rgba(255,255,255,.56)}
.fbot a:hover{color:var(--aqua)}
.flegal{display:flex;gap:1.3rem;flex-wrap:wrap}

/* ------------------------------------------------------------ whatsapp */
.fab{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:150;
  display:flex;align-items:center;gap:.55rem;padding:.82rem 1.1rem;background:#128C7E;color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  clip-path:polygon(2% 8%,98% 0,100% 92%,1% 100%);
  box-shadow:0 14px 34px -12px rgba(18,140,126,.7);
  transform:translateY(160%);transition:transform .6s var(--eo)}
.fab.show{transform:none}
.fab svg{width:19px;height:19px;fill:currentColor;flex:none}
.fab b{display:none;font-weight:700}
@media(min-width:560px){.fab b{display:inline}}

/* ------------------------------------------------------------ ink wipe */
.wipe{display:none}
html.js .wipe{display:block;position:fixed;inset:0;z-index:400;background:var(--ink);pointer-events:none;
  transform-origin:bottom;animation:wipeout .55s var(--eo) forwards}
@keyframes wipeout{0%{transform:scaleY(1)}100%{transform:scaleY(0)}}

/* ------------------------------------------------------------ reduced */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-r]{opacity:1;transform:none}
  [data-ln] .l>i{transform:none}
  .bm__in{-webkit-mask-image:none;mask-image:none}
  .bm__wet{display:none}
  .paint>svg{transform:scaleX(1)}
  .hero__m img,.ph__m img{transform:none}
  .spine{display:none}
  .marq__t{animation:none}
  .fab{transform:none}
  .wipe{display:none}
  .mlist a{transform:none}
}

/* ==========================================================================
   PREMIUM LAYER
   Bigger pictures, quieter chrome, more air, and a thin gold discipline
   running through the details.
   ========================================================================== */

:root{
  --sec:clamp(5.5rem,11vw,13rem);
  --hair:color-mix(in srgb,var(--ink) 13%,transparent);
  --hair-l:rgba(255,255,255,.16);
  --gold-hair:color-mix(in srgb,var(--ochre) 42%,transparent);
  --lift:0 32px 70px -38px rgba(4,25,31,.55);
  --lift-2:0 46px 100px -46px rgba(4,25,31,.62);
}

h1,h2,h3{letter-spacing:-.022em}
.lede{font-size:clamp(1.1rem,1rem + .5vw,1.38rem);line-height:1.62}

/* a hairline of gold above every eyebrow, the smallest possible signal */
.eye{position:relative;padding-top:1rem}
.eye::after{content:"";position:absolute;top:0;left:0;width:44px;height:1px;background:var(--gold-hair)}
.eye--l::after{background:color-mix(in srgb,var(--aqua) 55%,transparent)}

/* ---------------------------------------------------- full-bleed breaker
   A photograph given the whole viewport, with a line of type over it.     */
.ibreak{position:relative;min-height:min(78svh,760px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;z-index:2;background:var(--ink)}
.ibreak__m{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.ibreak__m img{width:100%;height:100%;object-fit:cover}
.ibreak__m::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,25,31,.9) 3%,rgba(4,25,31,.18) 55%,rgba(4,25,31,.42))}
.ibreak__in{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--pad) clamp(2.6rem,6vw,5rem);color:#fff}
.ibreak h2{font-size:var(--t-3);max-width:17ch;color:#fff}
.ibreak h2 em{color:var(--aqua-pale)}
.ibreak p{max-width:46ch;margin-top:1rem;color:rgba(255,255,255,.8)}
.ibreak__meta{margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--hair-l);
  display:flex;flex-wrap:wrap;gap:.8rem 2.4rem;font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ibreak__meta b{color:var(--aqua);font-weight:700}

/* ---------------------------------------------------- editorial gallery */
.gal{display:grid;gap:clamp(1rem,2vw,1.7rem);grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){
  .gal{grid-template-columns:repeat(6,1fr)}
  .gal>*:nth-child(1){grid-column:span 3}
  .gal>*:nth-child(2){grid-column:span 3}
  .gal>*:nth-child(3){grid-column:span 2}
  .gal>*:nth-child(4){grid-column:span 2}
  .gal>*:nth-child(5){grid-column:span 2}
  .gal>*:nth-child(6){grid-column:span 4}
  .gal>*:nth-child(7){grid-column:span 2}
}
.gal img{transition:transform 1.25s var(--e)}
.gal .bm:hover img{transform:scale(1.06)}

/* ---------------------------------------------------- activity, with photo */
.acard{position:relative;display:flex;flex-direction:column;background:transparent;
  transition:transform .5s var(--e)}
.acard:hover{transform:translateY(-6px)}
.acard .bm{margin-bottom:1rem}
.acard img{transition:transform 1.2s var(--e)}
.acard:hover img{transform:scale(1.07)}
.acard__ic{position:absolute;top:-.6rem;left:-.5rem;z-index:4;width:52px;height:52px;
  display:grid;place-items:center;background:var(--paper);
  clip-path:polygon(4% 8%,96% 0,100% 92%,2% 100%);
  box-shadow:0 10px 26px -14px rgba(4,25,31,.5)}
.s-ink .acard__ic,.s-deep .acard__ic{background:var(--ink)}
.acard__ic svg{width:24px;height:24px;stroke:var(--teal);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.s-ink .acard__ic svg{stroke:var(--aqua)}
.acard h3{font-size:1.2rem;margin-bottom:.35rem;transition:color .35s}
.acard:hover h3{color:var(--teal)}
.s-ink .acard:hover h3{color:var(--aqua)}
.acard p{font-size:.88rem;line-height:1.6;color:color-mix(in srgb,var(--ink) 66%,transparent);flex:1}
.s-ink .acard p,.s-deep .acard p{color:rgba(255,255,255,.66)}
.acard__m{margin-top:.85rem;padding-top:.7rem;border-top:1px solid var(--hair);
  font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ash)}
.s-ink .acard__m,.s-deep .acard__m{border-color:var(--hair-l)}

/* ---------------------------------------------------- bookable activity pages */
.activity-grid{display:grid;gap:clamp(1rem,2vw,1.6rem)}
@media(min-width:680px){.activity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1120px){.activity-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.activity-grid--featured{grid-template-columns:repeat(4,minmax(0,1fr))}}
.activity-group{margin-top:clamp(3.5rem,7vw,7rem)}
.activity-group__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.4rem;padding-bottom:.9rem;border-bottom:1px solid var(--hair)}
.activity-group__head .eye{margin:0;order:2}
.activity-group__head h2{font-size:var(--t-2)}
.activity-card{display:flex;flex-direction:column;background:#fff;box-shadow:var(--lift);min-width:0;transition:transform .45s var(--e),box-shadow .45s var(--e)}
.activity-card:hover{transform:translateY(-5px);box-shadow:var(--lift-2)}
.activity-card__media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.activity-card__media picture,.activity-card__media img{display:block;width:100%;height:100%}
.activity-card__media img{object-fit:cover;transition:transform .8s var(--e)}
.activity-card:hover .activity-card__media img{transform:scale(1.05)}
.activity-card__body{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:1.3rem;min-width:0}
.activity-card__body .eye{margin-bottom:.7rem;font-size:.58rem}
.activity-card__body h3{font-size:clamp(1.45rem,1.2rem + .8vw,2rem);margin-bottom:.55rem}
.activity-card__body h3 a:hover{color:var(--teal)}
.activity-card__body>p:not(.eye){font-size:.91rem;line-height:1.6;color:color-mix(in srgb,var(--ink) 68%,transparent)}
.activity-card__meta{width:100%;display:grid;gap:.32rem;margin-top:1.2rem;padding-top:.9rem;border-top:1px solid var(--hair);font-size:.68rem;line-height:1.45;letter-spacing:.06em}
.activity-card__meta span{color:var(--ash)}
.activity-card__meta strong{color:var(--teal);font-weight:700}
.activity-card__body .btn{margin-top:1.15rem}
.activity-details{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(min-width:1040px){.activity-details{grid-template-columns:minmax(0,1fr) minmax(360px,.86fr)}}
.activity-facts{margin-top:2rem}
.activity-facts .fact h3{font-size:1.25rem;margin-bottom:.35rem}
.activity-facts .fact p{font-size:.9rem}
.booking-card{padding:clamp(1.35rem,3vw,2.2rem);background:var(--paper-2);box-shadow:var(--lift)}
.booking-card h2{font-size:var(--t-2);margin-bottom:.7rem}
.booking-card .dim{margin-bottom:1.5rem}
.booking-card .form{margin-top:1.4rem}
.booking-card .btn{align-self:start}
.booking-provider{margin-top:clamp(1.8rem,4vw,3rem);padding-top:1.2rem;border-top:1px solid var(--hair)}
.booking-provider h3{font-size:1.4rem;margin-bottom:.4rem}
.booking-provider a{color:var(--teal);text-decoration:underline;text-underline-offset:.16em}
.note{margin-top:1.6rem;padding:1rem 1.1rem;border-left:3px solid var(--teal);background:color-mix(in srgb,var(--teal) 8%,transparent);font-size:.9rem;line-height:1.55}
.note b{display:block;margin-bottom:.25rem}
.activity-rate-note{margin-top:1rem;font-size:.8rem;line-height:1.55;color:var(--ash)}

/* A readable fallback if JavaScript does not load. */
@media(max-width:1079px){
  html:not(.js) .nav{position:relative;height:auto;background:var(--paper);box-shadow:0 4px 18px -14px rgba(4,25,31,.6)}
  html:not(.js) .nav__in{flex-wrap:wrap;padding-block:.6rem}
  html:not(.js) .brand b{color:var(--ink)}
  html:not(.js) .brand b i{color:var(--teal)}
  html:not(.js) .nlinks{display:flex;order:3;width:100%;overflow-x:auto;padding-block:.35rem;gap:.15rem}
  html:not(.js) .nlink{color:var(--ink);padding:.42rem .62rem;font-size:.72rem}
  html:not(.js) .ncta{display:inline-flex}
  html:not(.js) .burger,html:not(.js) .menu{display:none}
}

/* ---------------------------------------------------- iconed value rows */
.vrow__ic{width:34px;height:34px;flex:none;stroke:var(--teal);fill:none;stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round}
.s-ink .vrow__ic,.s-deep .vrow__ic{stroke:var(--aqua)}
@media(min-width:820px){
  .vrow--ic{grid-template-columns:auto auto minmax(0,20ch) 1fr;gap:.5rem 1.8rem}
}
.vrow{transition:padding-inline .5s var(--e),background .5s var(--e)}
@media(min-width:820px){.vrow:hover{background:color-mix(in srgb,var(--teal) 5%,transparent)}}
.s-ink .vrow:hover,.s-deep .vrow:hover{background:rgba(255,255,255,.04)}

/* ---------------------------------------------------- iconed facts */
.facts{display:grid;gap:clamp(1.4rem,2.6vw,2.2rem)}
@media(min-width:640px){.facts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{padding-top:1.2rem;border-top:1px solid var(--hair)}
.s-ink .fact,.s-deep .fact{border-color:var(--hair-l)}
.fact svg{width:28px;height:28px;stroke:var(--teal);fill:none;stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:.9rem}
.s-ink .fact svg,.s-deep .fact svg{stroke:var(--aqua)}
.fact h4{font-family:var(--ff-d);font-size:1.15rem;margin-bottom:.35rem;letter-spacing:-.01em}
.s-ink .fact h4{color:#fff}
.fact p{font-size:.86rem;line-height:1.58;color:color-mix(in srgb,var(--ink) 64%,transparent)}
.s-ink .fact p,.s-deep .fact p{color:rgba(255,255,255,.64)}

/* ---------------------------------------------------- premium polish */
.badge{box-shadow:0 1px 0 var(--hair)}
.badge:hover{box-shadow:var(--lift)}
.pk:hover,.dcard:hover{}
.pk .bm,.dcard .bm,.acard .bm{transition:filter .6s var(--e)}
.q{backdrop-filter:blur(2px)}
.btn{letter-spacing:.18em}
.tl{letter-spacing:.18em}

/* section top rules, hairline gold, used sparingly */
.rule-g{height:1px;background:linear-gradient(90deg,var(--gold-hair),transparent 70%);border:0;margin-bottom:clamp(2.4rem,5vw,4rem)}

/* pull quote, editorial */
.pull{font-family:var(--ff-d);font-size:clamp(1.6rem,1.1rem + 2vw,2.9rem);line-height:1.16;
  letter-spacing:-.02em;max-width:22ch;position:relative;padding-left:1.6rem}
.pull::before{content:"";position:absolute;left:0;top:.28em;bottom:.18em;width:2px;background:var(--gold-hair)}
.pull em{color:var(--teal)}
.s-ink .pull,.s-deep .pull{color:#fff}
.s-ink .pull em{color:var(--aqua)}

/* caption pairing under any figure */
.figrow{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;margin-top:.9rem}
.figrow span{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ash)}

@media(prefers-reduced-motion:reduce){
  .ibreak__m{transform:none !important}
}