/* Responsive hero (2026-10-27c). Phone/tablet (<1024px): immersive slideshow with a postcard text card (hero A). Desktop (>=1024px): dark Ocean split with a 3-photo postcard collage (hero B).
   Only the 3 strongest photos are used. No tint or filters on any photo, no visible slideshow controls (it autoplays silently; swipe works). Ocean palette + Cormorant headings come from d120.css. */
.hero-resp{display:block}
/* ---- A: slideshow (<1024px) ---- */
.pc-hero-a{--ha-t:6500ms;position:relative;display:block;padding:0;background:var(--c-bg);overflow:hidden;isolation:isolate}
.ha-stage{position:relative;z-index:0;touch-action:pan-y;background:var(--c-dark);aspect-ratio:3/2;max-height:68svh;overflow:hidden}
.ha-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.8s ease;overflow:hidden;z-index:0}
.ha-slide.is-on{opacity:1;z-index:1}
.ha-slide img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:var(--ha-o,50% 50%)}
.ha-slide.is-on img{animation:ha-kb 11s ease-out both}
.ha-slide:nth-child(2n).is-on img{--ha-o:30% 60%}
.ha-slide:nth-child(3n).is-on img{--ha-o:70% 40%}
@keyframes ha-kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.ha-wrap{position:relative;z-index:2;width:calc(100% - 20px);margin:-34px auto 0;padding:0 0 24px}
.ha-card{position:relative;width:100%;box-sizing:border-box;background:#fffdf8;border-radius:6px;padding:34px 18px 20px;box-shadow:0 2px 0 #e7dcc7,0 30px 60px rgba(10,37,51,.28)}
.ha-card .pc-stamp{top:-28px;right:16px;width:50px;height:60px}
.ha-card .pc-stamp .ww-i{width:28px;height:28px}
.ha-card .pc-h1{font-size:clamp(2.4rem,1.2rem + 2.6vw,3.9rem)}
.ha-card .pc-tag{margin:10px 0 6px;font-size:1.05rem}
.ha-card .pc-facts{margin-top:10px}
.ha-card .pc-cta{margin-top:16px}
/* 2026-10-27e: the hero photo is a 1920x760 wide shot; a 4:5 frame zoomed it ~2x and blurred it. Wider frames keep more of the scene and stay sharp. */
@media (min-width:701px) and (max-width:1023.98px){.ha-stage{aspect-ratio:16/9}}
@media (max-width:700px){.ha-stage{aspect-ratio:4/3;max-height:64svh}}
@media (prefers-reduced-motion:reduce){.ha-slide{transition:none}.ha-slide.is-on img{animation:none}}
/* ---- toggle ---- */
.hero-resp .hb{display:none}
@media (min-width:1024px){.hero-resp .pc-hero-a{display:none}.hero-resp .hb{display:block}}
/* ---- B: dark Ocean split + collage (>=1024px) ---- */
/* Hero option B (2026-10-27b): editorial split. Big Cormorant title on deep Ocean, with a postcard-style collage of three real photos (no tint, no filters). */
.hb{padding:0;background:var(--c-dark);color:#f1f8fb;position:relative;overflow:hidden}
.hb-in{width:min(1300px,calc(100% - 40px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"head col" "meta col";column-gap:clamp(28px,4vw,72px);align-content:center;align-items:center;min-height:clamp(600px,calc(100svh - var(--bar) - var(--navh)),820px);padding:clamp(36px,5vw,72px) 0}
.hb-head{grid-area:head;align-self:end}
.hb-meta{grid-area:meta;align-self:start}
.hb .pc-chip{color:var(--c-accent);background:transparent;padding:0}
.hb-h1{font:italic 500 clamp(3.2rem,1rem + 6.6vw,7.6rem)/.92 var(--f-head);letter-spacing:-.015em;margin:14px 0 0;color:#fff;overflow-wrap:break-word}
.hb-h1::after{content:"";display:block;width:84px;height:4px;margin-top:22px;border-radius:4px;background:var(--c-accent)}
.hb .pc-tag{color:#b9d6e0;font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);margin:18px 0 0;max-width:34ch}
.hb .pc-rating{color:#fff;margin-top:18px}
.hb .pc-rating .ww-i,.hb .pc-rating svg{color:#ffd27a;fill:currentColor}
.hb .pc-facts{margin-top:18px;color:#f1f8fb}
.hb .pc-facts li{border-color:rgba(241,248,251,.22);color:#f1f8fb}
.hb .pc-facts .ww-i{color:var(--c-accent)}
.hb .pc-cta{margin-top:24px}
.hb .ww-btn--pri{background:var(--c-accent);color:var(--c-dark)}
.hb .ww-btn--pri:hover{background:#fff}
.hb .ww-btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.hb .ww-btn--ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}
/* collage */
.hb-col{grid-area:col;position:relative;margin:0;padding:0 0 clamp(48px,7vw,90px) 0}
.hb-p{position:absolute;margin:0;background:#fffdf8;padding:8px 8px 8px;border-radius:3px;box-shadow:0 2px 0 #e7dcc7,0 24px 50px rgba(0,0,0,.4)}
.hb-p img{display:block;width:100%;height:100%;object-fit:cover}
.hb-main{position:relative;width:88%;margin-left:12%;padding:10px 10px 38px;transform:rotate(1.2deg)}
.hb-main img{aspect-ratio:4/3;height:auto}
.hb-main figcaption{position:absolute;right:18px;bottom:8px;font:italic 500 1.25rem var(--f-head);color:var(--c-dark)}
.hb-a{left:0;bottom:0;width:44%;transform:rotate(-4deg)}
.hb-a img{aspect-ratio:4/3}
.hb-b{right:-1%;bottom:clamp(-30px,-2vw,-14px);width:30%;transform:rotate(3.5deg)}
.hb-b img{aspect-ratio:4/5}
.hb .pc-stamp{top:-14px;left:2%;right:auto;z-index:3;transform:rotate(-6deg)}
@media (max-width:900px){
  .hb-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "col" "meta";min-height:0;padding:34px 0 40px;row-gap:34px}
  .hb-h1{font-size:clamp(3.1rem,15vw,5.6rem)}
  .hb-col{max-width:640px;margin:0 auto;width:100%;padding-bottom:70px}
  .hb-main{width:92%;margin-left:8%}
}
@media (max-width:420px){.hb-main{padding:7px 7px 30px}.hb-p{padding:5px}.hb-main figcaption{font-size:1.05rem;right:12px;bottom:5px}.hb-a{width:46%}.hb-b{width:32%}}
@media (prefers-reduced-motion:no-preference){.hb-p{transition:transform .5s cubic-bezier(.2,.8,.2,1)}@media (hover:hover){.hb-a:hover{transform:rotate(-2deg) translateY(-6px)}.hb-b:hover{transform:rotate(2deg) translateY(-6px)}.hb-main:hover{transform:rotate(.4deg)}}}
/* 2026-10-28a (Blijdschap only, approved by Geon as an exception to the no-tint rule): subtle Forever Blue-style edge glow. Soft blue at the edges only; the photo centre stays clear and true-colour. No controls. */
.ha-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 95% at 50% 45%,rgba(18,92,140,0) 55%,rgba(18,92,140,.30) 100%),linear-gradient(to bottom,rgba(10,60,100,0) 70%,rgba(10,60,100,.22) 100%)}
.hb{background:radial-gradient(70% 90% at 72% 50%,rgba(64,160,215,.22),rgba(64,160,215,0) 70%),radial-gradient(55% 70% at 15% 30%,rgba(64,160,215,.12),rgba(64,160,215,0) 70%),var(--c-dark)}
.hb-main{box-shadow:0 2px 0 #e7dcc7,0 24px 50px rgba(0,0,0,.4),0 0 70px 6px rgba(80,175,230,.28)}
.hb-p:not(.hb-main){box-shadow:0 2px 0 #e7dcc7,0 24px 50px rgba(0,0,0,.4),0 0 40px rgba(80,175,230,.18)}
/* 2026-10-28a: listing card = 3 stacked lines */
.pc-facts.pc-facts3{grid-template-columns:1fr;display:grid}
.pc-facts3 li{width:100%}
.pc-facts3 .pc-fx em{font-style:italic;font-weight:500}

/* live 2026-10-29: town line inside the H1 */
.h1-sub{display:block;font:500 clamp(.95rem,.8rem + .4vw,1.2rem)/1.3 var(--f-body,inherit);font-style:normal;letter-spacing:.02em;margin-top:.5em}
.ha-card .h1-sub{color:var(--c-dark);opacity:.75}
.hb-h1 .h1-sub{color:#fff;opacity:.85}