/* ==========================================================================
   Domburg Home · homepage
   Art direction: Zeeuwse kust editorial — sand paper, deep sea ink,
   a single rising-sun gold borrowed from the logo.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* surface */
  --sand-50:#FBF8F2;
  --sand-100:#F4EDE1;
  --sand-200:#E9DFCC;
  --sand-300:#DACEB6;
  --paper:#FFFFFF;

  /* ink */
  --ink:#15263A;
  --ink-80:rgba(21,38,58,.80);
  --ink-60:rgba(21,38,58,.60);
  --ink-40:rgba(21,38,58,.40);
  --ink-12:rgba(21,38,58,.12);
  --ink-08:rgba(21,38,58,.08);

  /* brand */
  --sea:#2F5496;
  --sea-deep:#22405F;
  --sea-soft:#7FA6D8;
  --sun:#F2C313;
  --sun-deep:#D8A708;

  /* type */
  --serif:'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:'Jost', ui-sans-serif, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* rhythm */
  --gutter:clamp(1.25rem, 4vw, 4.5rem);
  --shell:1420px;
  --sec-y:clamp(5rem, 11vw, 11rem);

  /* motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,dl,dd,ul,address{margin:0}
ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
address{font-style:normal}

html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--sand-50);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.u-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:fixed;top:.5rem;left:.5rem;z-index:200;
  padding:.75rem 1.25rem;background:var(--ink);color:var(--sand-50);
  border-radius:2px;transform:translateY(-200%);transition:transform .25s var(--e-out);
}
.skip:focus-visible{transform:none}

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--sea);
  outline-offset:3px;
  border-radius:2px;
}

::selection{background:var(--sun);color:var(--ink)}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.35rem,1.2rem + 4.6vw,5.1rem);
  line-height:.99;
  letter-spacing:-.018em;
  color:var(--ink);
}
.h2 em{font-style:italic;font-weight:300;color:var(--sea)}
.h2--light{color:var(--sand-50)}
.h2--light em{color:var(--sun)}

.lead{
  max-width:46ch;
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);
  line-height:1.7;
  color:var(--ink-80);
}
.lead--light{color:rgba(251,248,242,.78)}

.eyebrow{
  display:flex;align-items:center;gap:.85rem;
  font-family:var(--sans);font-weight:400;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sea);
}
.eyebrow i{display:block;width:2.6rem;height:1px;background:currentColor;opacity:.5}
.eyebrow--light{color:var(--sun)}

.pull{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);
  line-height:1.35;color:var(--sea-deep);
}

.link{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;font-weight:400;
  color:var(--sea);padding-bottom:.35rem;
  border-bottom:1px solid var(--ink-12);
  transition:border-color .4s var(--e-out),color .3s var(--e-out);
}
.link svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--e-out)}
.link:hover{border-color:var(--sea)}
.link:hover svg{transform:translateX(5px)}
.link--light{color:var(--sun);border-color:rgba(251,248,242,.22)}
.link--light:hover{border-color:var(--sun)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--sand-50); --bd:var(--ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.85rem 1.6rem;
  font-family:var(--sans);font-weight:400;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  color:var(--fg);border:1px solid var(--bd);border-radius:999px;
  background:var(--bg);overflow:hidden;isolation:isolate;
  transition:color .35s var(--e-out),border-color .35s var(--e-out);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--sun);
  transform:translateY(101%);
  transition:transform .5s var(--e-out);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--ink);border-color:var(--sun)}
.btn--lg{padding:1.05rem 2.1rem;font-size:.84rem}
.btn--ghost{--bg:transparent;--fg:var(--sand-50);--bd:rgba(251,248,242,.45)}
.btn--outline{--bg:transparent;--fg:var(--sand-50);--bd:rgba(251,248,242,.45)}
.btn--gold{--bg:var(--sun);--fg:var(--ink);--bd:var(--sun)}
.btn--gold::after{background:var(--sand-50)}
.btn--gold:hover,.btn--gold:focus-visible{border-color:var(--sand-50)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.topbar{
  position:relative;z-index:60;
  background:var(--ink);color:rgba(251,248,242,.72);
  font-size:.74rem;letter-spacing:.09em;
}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:38px}
.topbar__item{display:flex;align-items:center;gap:.7rem;white-space:nowrap}
.topbar__item a:hover{color:var(--sun)}
.topbar__sep{width:1px;height:11px;background:rgba(251,248,242,.28)}
@media (max-width:1080px){.topbar__item--mid{display:none}}
@media (max-width:640px){
  .topbar__in{justify-content:center}
  .topbar__item:first-child{display:none}
}

.head{
  position:sticky;top:0;z-index:70;
  transition:background .5s var(--e-out),box-shadow .5s var(--e-out),backdrop-filter .5s var(--e-out);
}
.head__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:88px}
.head.is-stuck{
  background:rgba(251,248,242,.9);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--ink-08),0 18px 40px -34px rgba(21,38,58,.5);
}
.brand img{width:clamp(148px,14vw,196px);height:auto;transition:filter .5s var(--e-out)}

/* header sits over the hero photograph until it sticks: invert to light */
.head--over:not(.is-stuck) .brand img{filter:brightness(0) invert(1);opacity:.96}
.head--over:not(.is-stuck) .nav__list a{color:rgba(251,248,242,.88)}
.head--over:not(.is-stuck) .nav__list a[aria-current="page"]{color:#fff}
.head--over:not(.is-stuck) .nav__list a::after{background:var(--sun)}
.head--over:not(.is-stuck) .lang{color:rgba(251,248,242,.55)}
.head--over:not(.is-stuck) .lang .is-on{color:#fff}
.head--over:not(.is-stuck) .lang a:hover{color:var(--sun)}
.head--over:not(.is-stuck) .burger span[aria-hidden]{background:var(--sand-50)}
.head--over:not(.is-stuck) .head__cta{--bg:transparent;--fg:var(--sand-50);--bd:rgba(251,248,242,.55)}
.head--over:not(.is-stuck) .head__cta:hover,
.head--over:not(.is-stuck) .head__cta:focus-visible{--fg:var(--ink)}
.head--over:not(.is-stuck) :where(a,button):focus-visible{outline-color:var(--sun)}

.nav__list{display:flex;align-items:center;gap:clamp(1rem,2.1vw,2.15rem)}
.nav__list a{
  position:relative;display:block;padding:.35rem 0;
  font-size:.86rem;font-weight:400;letter-spacing:.02em;color:var(--ink);
}
.nav__list a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--sea);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--e-out);
}
.nav__list a:hover::after,.nav__list a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav__list a[aria-current="page"]{color:var(--sea)}
.nav__close,.nav__foot{display:none}

.head__actions{display:flex;align-items:center;gap:clamp(.85rem,1.6vw,1.5rem)}
.lang{display:flex;align-items:center;gap:.4rem;font-size:.74rem;letter-spacing:.14em;color:var(--ink-40)}
.lang a{padding:.2rem}
.lang a:hover{color:var(--sea)}
.lang .is-on{color:var(--ink);font-weight:400}

.burger{display:none;width:44px;height:44px;position:relative;flex:none}
.burger span[aria-hidden]{
  position:absolute;left:11px;width:22px;height:1.5px;background:var(--ink);
  transition:transform .4s var(--e-out),opacity .3s var(--e-out);
}
.burger span:nth-of-type(1){top:19px}
.burger span:nth-of-type(2){top:25px}
.burger[aria-expanded="true"] span:nth-of-type(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-of-type(2){transform:translateY(-3px) rotate(-45deg)}

@media (max-width:1140px){
  .head__cta{display:none}
}
@media (max-width:1040px){
  .burger{display:block}
  .nav{
    position:fixed;inset:0;z-index:90;
    display:flex;flex-direction:column;justify-content:center;
    gap:2.5rem;padding:clamp(2rem,7vw,4rem);
    background:var(--sand-50);
    clip-path:inset(0 0 100% 0);
    transition:clip-path .7s var(--e-io);
    visibility:hidden;
  }
  .nav.is-open{clip-path:inset(0 0 0 0);visibility:visible}
  .nav__list{flex-direction:column;align-items:flex-start;gap:.15rem}
  .nav__list li{overflow:hidden}
  .nav__list a{
    font-family:var(--serif);font-size:clamp(2rem,9vw,3.1rem);line-height:1.22;
    letter-spacing:-.01em;
    transform:translateY(110%);
    transition:transform .7s var(--e-out);
  }
  .nav.is-open .nav__list a{transform:none;transition-delay:calc(.16s + var(--i,0) * .045s)}
  .nav__list a::after{display:none}
  .nav__close{
    display:grid;place-items:center;position:absolute;top:1.1rem;right:1.1rem;
    width:52px;height:52px;border:1px solid var(--ink-12);border-radius:999px;
  }
  .nav__close svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round}
  /* the open overlay is always light-on-sand, whatever the header state */
  .head--over:not(.is-stuck) .nav.is-open .nav__list a{color:var(--ink)}
  .head--over:not(.is-stuck) .nav.is-open .nav__list a[aria-current="page"]{color:var(--sea)}
  .burger[aria-expanded="true"] span[aria-hidden],
  .head--over:not(.is-stuck) .burger[aria-expanded="true"] span[aria-hidden]{background:var(--ink)}
  .burger[aria-expanded="true"]{position:relative;z-index:100}
  .nav__foot{display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem}
  .nav__meta{font-size:.9rem;color:var(--ink-60);line-height:1.9}
  .nav__meta a:hover{color:var(--sea)}
  body.is-locked{overflow:hidden}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  margin-top:-88px;
  min-height:clamp(620px, calc(100svh - var(--topbar-h, 38px)), 1080px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(88px + clamp(1.5rem,4vw,3.5rem));
  padding-bottom:0;
  overflow:hidden;
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__img{
  width:100%;height:100%;object-fit:cover;object-position:50% 58%;
  transform:scale(1.02);
}
.js .hero__img{transform:scale(1.1);transition:transform 2.4s var(--e-out)}
.js.is-ready .hero__img{transform:scale(1.02)}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(96deg, rgba(21,38,58,.72) 0%, rgba(21,38,58,.42) 34%, rgba(21,38,58,0) 62%),
    linear-gradient(180deg, rgba(21,38,58,.66) 0%, rgba(21,38,58,.14) 26%, rgba(21,38,58,.06) 44%, rgba(21,38,58,.62) 84%, rgba(21,38,58,.88) 100%);
}
@media (max-width:760px){
  .hero__scrim{
    background:linear-gradient(180deg, rgba(21,38,58,.7) 0%, rgba(21,38,58,.3) 26%, rgba(21,38,58,.34) 46%, rgba(21,38,58,.78) 82%, rgba(21,38,58,.92) 100%);
  }
}
.hero__sun{
  position:absolute;left:50%;top:44%;width:min(120vw,1400px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(242,195,19,.22) 0%, rgba(242,195,19,0) 62%);
  mix-blend-mode:screen;pointer-events:none;
}

.hero__in{position:relative;padding-bottom:clamp(2.25rem,4.5vw,4rem)}
.hero__title{
  margin:clamp(.9rem,1.8vw,1.5rem) 0 0;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(3rem,1rem + 8.2vw,8.6rem);
  line-height:.9;letter-spacing:-.028em;
  color:var(--sand-50);
  text-shadow:0 2px 40px rgba(21,38,58,.35);
}
.hero__title em{font-style:italic;color:var(--sun)}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero__title .line > span{display:block}
.js .hero__title .line > span{transform:translateY(115%);transition:transform 1.15s var(--e-out)}
.js.is-ready .hero__title .line > span{transform:none}
.js.is-ready .hero__title .line:nth-child(2) > span{transition-delay:.1s}

.hero__sub{
  max-width:42ch;margin-top:clamp(1.1rem,2vw,1.7rem);
  font-size:clamp(1rem,.96rem + .28vw,1.15rem);
  line-height:1.68;color:rgba(251,248,242,.86);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(1.5rem,2.4vw,2.1rem)}

.hero__proof{
  position:relative;
  border-top:1px solid rgba(251,248,242,.18);
  background:linear-gradient(180deg,rgba(21,38,58,0),rgba(21,38,58,.28));
}
.hero__proof-in{
  display:flex;align-items:center;gap:clamp(1.5rem,4vw,4rem);
  min-height:104px;padding-block:1.25rem;
}
.proof{display:flex;flex-direction:column;gap:.1rem}
.proof__num{
  font-family:var(--serif);font-size:clamp(1.7rem,1.2rem + 1.5vw,2.5rem);
  line-height:1;color:var(--sand-50);font-variant-numeric:tabular-nums;
}
.proof__lbl{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,248,242,.6)}

.hero__scroll{
  display:inline-flex;align-items:center;gap:.6rem;margin-left:auto;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(251,248,242,.7);
}
.hero__scroll svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;animation:nudge 2.6s var(--e-io) infinite}
.hero__scroll:hover{color:var(--sun)}
@keyframes nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}

@media (max-width:900px){
  .hero__proof-in{flex-wrap:wrap;gap:1.5rem 2rem}
  .hero__scroll{display:none}
  .proof__lbl{font-size:.64rem}
}
@media (max-width:520px){
  .proof:nth-child(4){display:none}
  .hero__img{object-position:62% 60%}
}

/* ==========================================================================
   TICKER
   ========================================================================== */
.ticker{
  background:var(--ink);color:rgba(251,248,242,.62);
  overflow:hidden;padding-block:.95rem;
  font-size:.74rem;letter-spacing:.19em;text-transform:uppercase;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.ticker__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.ticker__set{display:flex;align-items:center;gap:2.4rem;padding-right:2.4rem}
.ticker__set i{width:4px;height:4px;border-radius:50%;background:var(--sun);opacity:.75;flex:none}
.ticker__set span{white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}

/* ==========================================================================
   MANIFEST
   ========================================================================== */
.manifest{padding-block:var(--sec-y)}
.manifest__in{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.55fr) minmax(0,.66fr);
  gap:clamp(2rem,4vw,4.5rem);
  align-items:end;
}
.manifest__media,.manifest__aside{position:relative;overflow:hidden;margin:0}
.manifest__media{aspect-ratio:3/4.5;border-radius:2px}
.manifest__aside{aspect-ratio:3/4.2;border-radius:2px}
.manifest__media img,.manifest__aside img{
  position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;
}
.manifest__body{padding-bottom:clamp(.5rem,1.5vw,1.5rem)}
.manifest__body .h2{
  margin:clamp(1.1rem,2vw,1.7rem) 0 clamp(1.4rem,2.4vw,2.1rem);
  font-size:clamp(2.1rem,1.1rem + 2.9vw,3.85rem);
  line-height:1.03;
}
.manifest__text{display:grid;gap:1.15rem;max-width:52ch;color:var(--ink-80)}
.pull{margin-top:clamp(1.6rem,2.8vw,2.4rem);position:relative;padding-left:1.6rem}
.pull::before{content:"";position:absolute;left:0;top:.42em;bottom:.3em;width:2px;background:var(--sun)}

@media (max-width:1080px){
  .manifest__in{grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr)}
  .manifest__aside{display:none}
}
@media (max-width:760px){
  .manifest__in{grid-template-columns:1fr;gap:2.25rem}
  .manifest__media{aspect-ratio:4/3}
}

/* ==========================================================================
   AANBOD
   ========================================================================== */
.offer{
  padding-block:var(--sec-y);
  background:var(--sand-100);
  border-block:1px solid var(--ink-08);
}
.offer__in{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  grid-template-areas:"head head" "media spec";
  gap:clamp(2rem,4vw,4.5rem) clamp(2rem,4.5vw,5rem);
  align-items:start;
}
.offer__head{grid-area:head;max-width:min(100%,58rem)}
.offer__head .h2{margin:clamp(1rem,1.8vw,1.5rem) 0 clamp(1.2rem,2vw,1.7rem)}
.offer__media{
  grid-area:media;position:relative;margin:0;overflow:hidden;border-radius:2px;
  aspect-ratio:16/11;
}
.offer__media img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.offer__media figcaption{
  position:absolute;left:0;bottom:0;right:0;padding:2.5rem 1.5rem 1.15rem;
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(251,248,242,.9);
  background:linear-gradient(180deg,rgba(21,38,58,0),rgba(21,38,58,.72));
}
.offer__spec{grid-area:spec;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1.75rem,3vw,2.6rem)}

.spec{width:100%;border-top:1px solid var(--ink-12)}
.spec__row{
  display:grid;grid-template-columns:minmax(7rem,.42fr) 1fr;gap:1rem;
  padding-block:1rem;border-bottom:1px solid var(--ink-12);
}
.spec dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sea);padding-top:.22rem}
.spec dd{margin:0;font-size:.98rem;line-height:1.55;color:var(--ink-80)}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-block;padding:.5rem 1.05rem;
  font-size:.78rem;letter-spacing:.07em;color:var(--ink-80);
  border:1px solid var(--ink-12);border-radius:999px;background:var(--sand-50);
  transition:color .3s var(--e-out),border-color .3s var(--e-out),background .3s var(--e-out),transform .3s var(--e-out);
}
.chip:hover,.chip:focus-visible{color:var(--paper);background:var(--sea-deep);border-color:var(--sea-deep);transform:translateY(-2px)}

@media (max-width:900px){
  .offer__in{grid-template-columns:1fr;grid-template-areas:"head" "media" "spec"}
  .offer__media{aspect-ratio:4/3}
}

/* ==========================================================================
   PLACE (Michelin)
   ========================================================================== */
.place{position:relative;isolation:isolate;padding-block:calc(var(--sec-y) * 1.05);color:var(--sand-50);overflow:hidden}
.place__media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--ink)}
.place__media img{position:absolute;inset:-7% 0;width:100%;height:114%;object-fit:cover;opacity:.62}
.place::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(102deg,rgba(21,38,58,.95) 0%,rgba(21,38,58,.86) 40%,rgba(21,38,58,.55) 78%,rgba(21,38,58,.42) 100%);
}
.place__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:clamp(2.5rem,5vw,6rem);align-items:end}
.place__lead .h2{margin:clamp(1rem,1.8vw,1.5rem) 0 clamp(1.3rem,2.2vw,1.9rem)}
.place__lead .link{margin-top:clamp(1.5rem,2.6vw,2.2rem)}

.place__facts{display:grid;border-top:1px solid rgba(251,248,242,.2)}
.place__facts li{padding:clamp(1.35rem,2.4vw,1.9rem) 0;border-bottom:1px solid rgba(251,248,242,.2)}
.place__facts-num{
  display:block;font-family:var(--serif);font-size:.95rem;letter-spacing:.1em;
  color:var(--sun);margin-bottom:.5rem;
}
.place__facts h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem);line-height:1.15;letter-spacing:-.01em}
.place__facts p{margin-top:.45rem;font-size:.95rem;line-height:1.65;color:rgba(251,248,242,.72);max-width:38ch}

@media (max-width:900px){
  .place__in{grid-template-columns:1fr;gap:2.75rem;align-items:start}
}

/* ==========================================================================
   SEIZOENEN
   ========================================================================== */
.seasons{padding-block:var(--sec-y)}
.sec-head{max-width:44rem;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.sec-head .h2{margin-top:clamp(1rem,1.8vw,1.5rem)}

.panels{display:flex;gap:2px;padding-inline:var(--gutter);max-width:var(--shell);margin-inline:auto}
.panel{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;
  aspect-ratio:3/4;border-radius:2px;isolation:isolate;
  transition:flex-grow .8s var(--e-out);
}
.panel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--e-out),filter .8s var(--e-out);
  filter:saturate(.92);
}
.panel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,38,58,0) 34%,rgba(21,38,58,.78) 100%);
  transition:opacity .6s var(--e-out);
}
.panel__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1.4rem,2.2vw,2.2rem);color:var(--sand-50)}
.panel__tag{
  display:inline-block;margin-bottom:.7rem;padding:.3rem .8rem;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:var(--sun);border-radius:999px;
}
.panel h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,1.1rem + .8vw,1.9rem);line-height:1.12;letter-spacing:-.012em}
.panel p{
  margin-top:.6rem;max-width:32ch;font-size:.93rem;line-height:1.6;
  color:rgba(251,248,242,.74);
  transition:color .5s var(--e-out);
}
@media (hover:hover) and (min-width:901px){
  .panels:hover .panel{flex-grow:.84}
  .panels .panel:hover,.panel:focus-within{flex-grow:1.55}
  .panel:hover img{transform:scale(1.05)}
  .panel:hover p,.panel:focus-within p{color:rgba(251,248,242,.95)}
}
@media (max-width:900px){
  .panels{flex-direction:column;gap:1rem}
  .panel{flex:none;aspect-ratio:4/3}
}

/* ==========================================================================
   COMFORT
   ========================================================================== */
.comfort{padding-block:var(--sec-y);background:var(--sand-100);border-block:1px solid var(--ink-08)}
.comfort__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,5vw,6rem)}
.comfort__head{position:sticky;top:120px;align-self:start}
.comfort__head .h2{margin:clamp(1rem,1.8vw,1.5rem) 0 clamp(1.2rem,2vw,1.6rem)}

.amen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--ink-12)}
.amen__item{
  display:flex;gap:1.1rem;padding:clamp(1.4rem,2.2vw,2rem);
  background:var(--sand-100);
  transition:background .45s var(--e-out);
}
.amen__item:hover{background:var(--sand-50)}
.amen__ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ink-12);border-radius:999px;transition:border-color .4s var(--e-out),background .4s var(--e-out)}
.amen__ic svg{width:20px;height:20px;fill:none;stroke:var(--sea);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s var(--e-out)}
.amen__item:hover .amen__ic{background:var(--ink);border-color:var(--ink)}
.amen__item:hover .amen__ic svg{stroke:var(--sun)}
.amen h3{font-family:var(--serif);font-weight:500;font-size:1.24rem;line-height:1.2;letter-spacing:-.005em}
.amen p{margin-top:.35rem;font-size:.93rem;line-height:1.6;color:var(--ink-60)}

@media (max-width:1000px){
  .comfort__in{grid-template-columns:1fr}
  .comfort__head{position:static}
}
@media (max-width:620px){
  .amen{grid-template-columns:1fr}
}

/* ==========================================================================
   FAMILIE
   ========================================================================== */
.family{padding-block:var(--sec-y)}
.family__in{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  grid-template-areas:"media body" "score body";
  grid-template-rows:auto 1fr;
  gap:clamp(1.25rem,2.4vw,1.75rem) clamp(2.5rem,5vw,5.5rem);
  align-items:start;
}
.family__media{grid-area:media;margin:0;overflow:hidden;border-radius:2px;aspect-ratio:3/3.9;position:relative}
.family__media img{position:absolute;inset:-5% 0;width:100%;height:110%;object-fit:cover;object-position:50% 42%}
.family__body{grid-area:body}
.family__body .h2{margin:clamp(1rem,1.8vw,1.5rem) 0 clamp(1.2rem,2vw,1.7rem)}
.family__text{display:grid;gap:1.1rem;max-width:54ch;color:var(--ink-80)}
.ticks{display:grid;gap:.75rem;margin-top:clamp(1.6rem,2.6vw,2.2rem)}
.ticks li{position:relative;padding-left:1.9rem;font-size:.97rem;color:var(--ink-80)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.55em;width:.7rem;height:.42rem;
  border-left:1.5px solid var(--sun);border-bottom:1.5px solid var(--sun);
  transform:rotate(-45deg);
}
.family__body .link{margin-top:clamp(1.6rem,2.6vw,2.2rem)}

.score{
  grid-area:score;align-self:start;
  display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  padding:clamp(1.4rem,2.2vw,1.9rem);
  background:var(--ink);color:var(--sand-50);border-radius:2px;
}
.score__stars{display:flex;gap:.2rem}
.score__stars svg{width:16px;height:16px;fill:var(--sun)}
.score__num{display:flex;align-items:baseline;gap:.45rem;font-family:var(--serif);line-height:1}
.score__num strong{font-weight:400;font-size:clamp(2.6rem,2rem + 2vw,3.6rem)}
.score__num span{font-size:1.1rem;color:rgba(251,248,242,.55)}
.score__lbl{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(251,248,242,.62);max-width:30ch;text-wrap:balance}

@media (max-width:900px){
  .family__in{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"media" "body" "score";gap:2.25rem}
  .family__media{aspect-ratio:4/3.4}
  .family__media img{object-position:50% 34%}
}

/* ==========================================================================
   GALERIJ
   ========================================================================== */
.gallery{padding-block:var(--sec-y) 0;padding-bottom:var(--sec-y);background:var(--ink);color:var(--sand-50)}
.gallery .h2{color:var(--sand-50);margin-top:clamp(1rem,1.8vw,1.5rem)}
.gallery .h2 em{color:var(--sun)}
.gallery .eyebrow{color:var(--sun)}
.gallery__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  margin-bottom:clamp(2.25rem,4vw,3.5rem);
}
.gallery .link{color:var(--sun);border-color:rgba(251,248,242,.2)}
.gallery .link:hover{border-color:var(--sun)}

.rail{
  display:flex;gap:clamp(.75rem,1.4vw,1.25rem);
  padding-inline:var(--gutter);
  overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:rgba(251,248,242,.3) transparent;
  cursor:grab;
}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:rgba(251,248,242,.3)}
.rail__it{
  position:relative;flex:none;margin:0;scroll-snap-align:center;
  width:clamp(300px,32vw,470px);
  height:clamp(300px,44vw,470px);
  overflow:hidden;border-radius:2px;
}
.rail__it--tall{width:clamp(220px,24vw,352px)}
.rail__it img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--e-out),filter .6s var(--e-out);
  filter:saturate(.94) brightness(.95);
}
.rail__it:hover img{transform:scale(1.04);filter:saturate(1) brightness(1)}
.rail__it figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1.1rem .95rem;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(251,248,242,.9);
  background:linear-gradient(180deg,rgba(21,38,58,0),rgba(21,38,58,.8));
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{position:relative;isolation:isolate;overflow:hidden;padding-block:calc(var(--sec-y) * 1.15);color:var(--sand-50);text-align:center}
.cta__media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--sea-deep)}
.cta__media img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;object-position:50% 60%;filter:saturate(1.05)}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(21,38,58,.55) 0%, rgba(21,38,58,.2) 70%),
    linear-gradient(180deg,rgba(21,38,58,.82),rgba(21,38,58,.62) 45%,rgba(21,38,58,.9));
}
.cta__in{display:flex;flex-direction:column;align-items:center;gap:clamp(1.1rem,2vw,1.6rem)}
.cta .eyebrow{justify-content:center}
.cta__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.7rem,1.2rem + 6.4vw,7rem);
  line-height:.95;letter-spacing:-.025em;
}
.cta__title em{font-style:italic;color:var(--sun)}
.cta .lead{text-align:center;max-width:52ch}
.cta__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem;margin-top:.6rem}
.cta__meta{display:flex;gap:.7rem;font-size:.84rem;letter-spacing:.1em;color:rgba(251,248,242,.82)}
.cta__meta a:hover{color:var(--sun)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--sand-100);padding-top:clamp(3.5rem,6vw,5.5rem);border-top:1px solid var(--ink-08)}
.foot__in{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.8fr)) minmax(0,1.05fr);
  gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.foot__brand img{width:184px;margin-bottom:1.25rem}
.foot__brand p{max-width:34ch;font-size:.94rem;line-height:1.7;color:var(--ink-60)}
.foot__col h2{
  margin-bottom:1.1rem;font-family:var(--sans);font-weight:400;
  font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;color:var(--sea);
}
.foot__col ul{display:grid;gap:.6rem}
.foot__col a:not(.btn){font-size:.95rem;color:var(--ink-80);transition:color .3s var(--e-out)}
.foot__col a:not(.btn):hover{color:var(--sea)}
.foot__col--addr address{font-size:.95rem;line-height:1.9;color:var(--ink-80);margin-bottom:1.4rem}
.foot__col--addr address a:hover{color:var(--sea)}

.foot__note{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding-block:1.4rem;border-top:1px solid var(--ink-12);
  font-size:.8rem;color:var(--ink-40);
}
.foot__note a:hover{color:var(--sea)}

@media (max-width:1000px){.foot__in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.foot__in{grid-template-columns:1fr}}

/* ==========================================================================
   REVEAL
   ========================================================================== */
/* the starting states only apply once JS is confirmed present, so the page
   is fully legible if the script never runs */
[data-anim]{--d:calc(var(--delay,0) * 90ms)}
.js [data-anim="fade"],.js [data-anim="lines"]{opacity:0;transform:translateY(22px);transition:opacity .95s var(--e-out) var(--d),transform .95s var(--e-out) var(--d)}
.js [data-anim="mask"]{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--e-io) var(--d)}
.js [data-anim="mask"] img{transform:scale(1.14);transition:transform 1.6s var(--e-out) var(--d)}
.js [data-anim="stagger"] > *{opacity:0;transform:translateY(20px);transition:opacity .8s var(--e-out),transform .8s var(--e-out)}

.is-in[data-anim="fade"],.is-in[data-anim="lines"]{opacity:1;transform:none}
.is-in[data-anim="mask"]{clip-path:inset(0 0 0 0)}
.is-in[data-anim="mask"] img{transform:scale(1)}
.is-in[data-anim="stagger"] > *{opacity:1;transform:none}
.is-in[data-anim="stagger"] > *:nth-child(1){transition-delay:calc(var(--d) + 0ms)}
.is-in[data-anim="stagger"] > *:nth-child(2){transition-delay:calc(var(--d) + 70ms)}
.is-in[data-anim="stagger"] > *:nth-child(3){transition-delay:calc(var(--d) + 140ms)}
.is-in[data-anim="stagger"] > *:nth-child(4){transition-delay:calc(var(--d) + 210ms)}
.is-in[data-anim="stagger"] > *:nth-child(5){transition-delay:calc(var(--d) + 280ms)}
.is-in[data-anim="stagger"] > *:nth-child(6){transition-delay:calc(var(--d) + 350ms)}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__img{transform:none}
  .hero__title .line > span{transform:none}
  [data-anim]{opacity:1 !important;transform:none !important;clip-path:none !important}
  [data-anim] img{transform:none !important}
  [data-anim="stagger"] > *{opacity:1 !important;transform:none !important}
  .ticker__track{animation:none !important;transform:none !important}
  .hero__scroll svg{animation:none !important}
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  .head,.topbar,.ticker,.hero__proof,.rail,.btn,.skip{display:none !important}
  body{background:#fff;color:#000}
}