/* Stilwater Stavenisse — mobile-first, bento layout. Brand colours at the top. */
:root{
  --sea:#23423F; --getij:#3E6B64; --salie:#8E9C8A; --zand:#F4EFE6; --eik:#E3D3BC;
  --kweepeer:#E4BC32; --roest:#8B3A2E;
  --bg:#F7F3EC; --surface:#FFFFFF; --surface-2:#EFE8DC; --text:#1F2624; --muted:#56605D;
  --heading:#1D3633; --line:#E1D8CA; --accent:#23423F; --accent-ink:#FFFFFF;
  --cta:#E4BC32; --cta-ink:#1D3633; --focus:#8B3A2E;
  --radius:18px; --gap:12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111816; --surface:#18211F; --surface-2:#1F2A27; --text:#E9E4DA; --muted:#A9B2AE;
    --heading:#F3EEE4; --line:#2C3835; --accent:#9FC3BB; --accent-ink:#111816;
    --cta:#E4BC32; --cta-ink:#111816; --focus:#E4BC32; color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111816; --surface:#18211F; --surface-2:#1F2A27; --text:#E9E4DA; --muted:#A9B2AE;
  --heading:#F3EEE4; --line:#2C3835; --accent:#9FC3BB; --accent-ink:#111816;
  --cta:#E4BC32; --cta-ink:#111816; --focus:#E4BC32; color-scheme: dark;
}
:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
*,*::before,*::after{ box-sizing:inherit; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px); -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--bg); color:var(--text); font:400 17px/1.6 'Poppins','Helvetica Neue',Arial,sans-serif; }
img{ display:block; max-width:100%; height:auto; }
a{ color:var(--accent); text-underline-offset:3px; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:6px; }
.skip{ position:absolute; left:12px; top:-60px; background:var(--accent); color:var(--accent-ink); padding:10px 16px; border-radius:10px; z-index:50; }
.skip:focus{ top:12px; }
.wrap{ width:min(1180px, 100% - 32px); margin-inline:auto; }
h1,h2,h3{ font-family:'Lora',Georgia,serif; font-weight:600; color:var(--heading); line-height:1.08; letter-spacing:-.015em; margin:0 0 .45em; }
h1{ font-size:clamp(38px, 8.5vw, 76px); }
h2{ font-size:clamp(30px, 5.2vw, 52px); }
h3{ font-size:clamp(20px, 2.4vw, 24px); }
p{ margin:0 0 1em; }
.kicker{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.kicker svg{ width:18px; height:18px; }
.lead{ font-size:clamp(18px, 2.1vw, 21px); color:var(--muted); max-width:62ch; }

/* header */
.top{ position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--line); }
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:41; background:var(--bg); }
.top .wrap{ display:flex; align-items:center; gap:14px; min-height:64px; }
.brand{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--heading); font-family:'Lora',Georgia,serif; font-weight:600; font-size:21px; }
.nav{ display:none; gap:24px; margin-left:auto; }
.nav a{ color:var(--text); text-decoration:none; font-size:15px; padding:10px 0; }
.nav a:hover{ color:var(--accent); text-decoration:underline; }
.lang{ display:flex; gap:2px; margin-left:auto; }
.lang a{ display:inline-grid; place-items:center; min-width:40px; min-height:40px; border-radius:20px; font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; }
.lang a[aria-current="page"]{ background:var(--surface-2); color:var(--heading); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:999px; font:600 16px/1 'Poppins',Arial,sans-serif; text-decoration:none; border:0; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; }
.btn-cta{ background:var(--cta); color:var(--cta-ink); }
.btn-ghost{ background:transparent; color:var(--heading); box-shadow:inset 0 0 0 2px var(--line); }
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.top .btn{ min-height:44px; padding:0 18px; font-size:15px; }
@media (min-width:900px){ .nav{ display:flex; } .lang{ margin-left:8px; } }
@media (max-width:899px){ .top .btn{ display:none; } }

/* hero */
.hero{ padding:28px 0 12px; }
.hero-grid{ display:grid; gap:22px; }
.hero h1 em{ font-style:normal; color:var(--getij); }
:root[data-theme="dark"] .hero h1 em{ color:var(--kweepeer); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hero h1 em{ color:var(--kweepeer); } }
.facts{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:18px 0 24px; }
.facts li{ font-size:14px; font-weight:500; padding:7px 13px; border-radius:999px; background:var(--surface); border:1px solid var(--line); }
.ctas{ display:flex; flex-wrap:wrap; gap:10px; }
.hero-photo{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:var(--surface-2); }
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:62% 50%; }
@media (min-width:960px){
  .hero{ padding:48px 0 24px; }
  .hero-grid{ grid-template-columns:5fr 7fr; align-items:center; gap:48px; }
  .hero-photo{ aspect-ratio:5/4; }
}

section{ padding:56px 0; }
@media (min-width:900px){ section{ padding:88px 0; } }
.head{ display:grid; gap:6px; margin-bottom:28px; }
@media (min-width:900px){ .head{ grid-template-columns:1fr 1fr; align-items:end; gap:48px; } .head .lead{ margin:0; } }

/* bento */
.bento{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gap); }
.tile{ position:relative; margin:0; border-radius:var(--radius); overflow:hidden; background:var(--surface-2); aspect-ratio:1/1; }
.tile.big,.tile.wide{ grid-column:span 2; aspect-ratio:16/10; }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.tile figcaption{ position:absolute; left:10px; bottom:10px; font-size:13px; font-weight:600; padding:6px 11px; border-radius:999px; background:rgba(17,24,22,.72); color:#fff; }
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .tile:hover img{ transform:scale(1.035); } }
.card{ border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); padding:22px; }
.tile.text{ aspect-ratio:auto; grid-column:span 2; background:var(--sea); color:#EEF2EF; padding:24px; display:flex; flex-direction:column; justify-content:center; }
.tile.text h3{ color:#fff; }
@media (min-width:900px){
  .bento{ grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:clamp(180px, 17vw, 230px); }
  .tile,.tile.wide,.tile.big{ aspect-ratio:auto; }
  .tile.big{ grid-column:span 2; grid-row:span 2; }
  .tile.wide{ grid-column:span 2; }
  .tile.text{ grid-column:span 2; }
}

/* features */
.feat-grid{ display:grid; gap:var(--gap); margin-top:var(--gap); }
@media (min-width:900px){ .feat-grid{ grid-template-columns:1fr 2fr; } }
.beds{ background:var(--surface-2); border:0; }
.ticks{ list-style:none; padding:0; margin:0; display:grid; gap:2px 28px; }
@media (min-width:700px){ .ticks{ grid-template-columns:1fr 1fr; } }
.ticks li{ padding:9px 0 9px 26px; position:relative; border-bottom:1px solid var(--line); font-size:16px; }
.ticks li::before{ content:""; position:absolute; left:2px; top:17px; width:10px; height:10px; border-radius:50%; background:var(--kweepeer); }

/* story */
.story{ display:grid; gap:24px; align-items:center; }
.story .tile{ aspect-ratio:4/3; }
.story blockquote{ margin:0; font-family:'Lora',Georgia,serif; font-size:clamp(22px, 3vw, 32px); line-height:1.35; color:var(--heading); }
@media (min-width:900px){ .story{ grid-template-columns:1fr 1fr; gap:56px; } }

/* area */
.area{ position:relative; border-radius:var(--radius); overflow:hidden; }
.area > img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.area .card{ margin-top:var(--gap); }
@media (min-width:900px){
  .area{ min-height:560px; display:flex; align-items:flex-end; }
  .area > img{ position:absolute; inset:0; aspect-ratio:auto; }
  .area .card{ position:relative; margin:28px; max-width:560px; }
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:14px 0 0; }
.chips li{ font-size:14px; padding:7px 12px; border-radius:999px; background:var(--surface-2); }

/* prices */
.price-grid{ display:grid; gap:var(--gap); }
@media (min-width:900px){ .price-grid{ grid-template-columns:2fr 1fr; } }
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:15px; }
caption{ text-align:left; font-weight:600; margin-bottom:8px; color:var(--heading); }
th,td{ text-align:left; padding:11px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
td.num{ font-weight:600; color:var(--heading); white-space:nowrap; }
.note{ font-size:14px; color:var(--muted); margin:14px 0 0; }

/* form */
.book{ display:grid; gap:var(--gap); }
@media (min-width:900px){ .book{ grid-template-columns:2fr 1fr; } }
form{ display:grid; grid-template-columns:1fr; gap:14px 16px; }
@media (min-width:640px){ form{ grid-template-columns:1fr 1fr; } }
form .full{ grid-column:1 / -1; }
label{ display:block; font-size:14px; font-weight:600; color:var(--heading); margin-bottom:6px; }
input,select,textarea{ width:100%; min-height:48px; font:inherit; font-size:16px; padding:10px 12px; border:1.5px solid #75807B; border-radius:10px; background:var(--surface); color:var(--text); }
textarea{ min-height:120px; }
.check{ display:flex; gap:12px; align-items:flex-start; }
.check input{ width:22px; min-height:22px; height:22px; margin-top:3px; flex:none; }
.check label{ font-weight:400; color:var(--text); margin:0; }
.hp{ position:absolute; left:-9999px; }
.contact a{ font-weight:600; }

footer{ background:var(--sea); color:#DCE5E1; padding:44px 0 calc(44px + env(safe-area-inset-bottom,0px)); font-size:15px; }
footer a{ color:#FFFFFF; }
footer .wrap{ display:grid; gap:24px; }
@media (min-width:800px){ footer .wrap{ grid-template-columns:1fr 1fr 1.4fr; } }

/* scroll reveal: only when JS is on and motion is welcome */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .js .reveal.in{ opacity:1; transform:none; }
}
.sr-h{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.tile.text ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:16px; }
.tile.text li{ display:flex; gap:10px; align-items:center; }
.tile.text li::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--kweepeer); flex:none; }
/* mobile: sticky booking bar */
.mbar{ position:fixed; left:0; right:0; bottom:0; z-index:45; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--line); }
.mbar .btn{ width:100%; }
body{ padding-bottom:76px; }
@media (min-width:900px){ .mbar{ display:none; } body{ padding-bottom:0; } }
@media (min-width:900px){ .tile.text ul{ grid-template-columns:1fr 1fr; gap:8px 20px; font-size:15px; } }
/* ways to stay */
.stays{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:640px){ .stays{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .stays{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.stay{ display:flex; flex-direction:column; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); padding:22px; transition:transform .2s ease, box-shadow .2s ease; }
.stay h3{ margin-bottom:4px; }
.stay .when{ font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--getij); margin-bottom:10px; }
.stay p{ font-size:15px; }
.stay .price{ margin:auto 0 0; padding-top:10px; font-family:'Lora',Georgia,serif; font-weight:600; font-size:22px; color:var(--heading); }
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .stay:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.08); } }
/* list tiles: tidy two-column alignment */
.tile.text li{ align-items:flex-start; line-height:1.4; }
.tile.text li::before{ margin-top:.42em; }
@media (min-width:900px){ .tile.text ul{ grid-template-columns:1fr 1fr; gap:10px 24px; font-size:15px; } }