*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#12202a;background:#f5f3ee;font-family:"DM Sans",sans-serif}a{color:inherit;text-decoration:none}.site-header{height:88px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;background:#f5f3ee;position:relative;z-index:20}.brand{display:flex;align-items:center;gap:14px;font-family:Manrope,sans-serif;font-weight:800;font-size:20px}.brand-mark{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#123e52;color:white;font-size:13px}.nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:600}.nav-cta{background:#123e52;color:white;padding:13px 20px;border-radius:99px}.menu-button{display:none;border:0;background:transparent;font:inherit}.hero{min-height:calc(100vh - 88px);margin:0 2vw;position:relative;overflow:hidden;border-radius:4px;color:white}.hero-image,.hero-overlay{position:absolute;inset:0}.hero-image{background:url('images/haven-ligplaatsen.jpg') center/cover no-repeat;transform:scale(1.02)}.hero-overlay{background:linear-gradient(90deg,rgba(5,25,34,.76),rgba(5,25,34,.12) 70%)}.hero-content{position:absolute;left:7vw;bottom:11vh;max-width:760px}.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:12px;font-weight:700;margin:0 0 20px}.eyebrow.dark{color:#56717d}.hero h1{font-family:Manrope,sans-serif;font-size:clamp(48px,6.6vw,100px);line-height:.96;letter-spacing:-.055em;margin:0 0 30px}.hero-copy{font-size:18px;line-height:1.6;max-width:610px}.actions{display:flex;align-items:center;gap:30px;margin-top:36px}.button{display:inline-block;border:0;border-radius:99px;padding:16px 24px;font:600 14px "DM Sans";cursor:pointer}.button-light{background:white;color:#102c38}.button-dark{background:#123e52;color:white}.text-link{font-weight:600}.text-link span{margin-left:8px}.hero-stat{position:absolute;right:5vw;bottom:6vh;display:flex;align-items:center;gap:16px;border-top:1px solid rgba(255,255,255,.55);padding-top:16px}.hero-stat strong{font:700 48px Manrope}.hero-stat span{font-size:13px;line-height:1.35}.section{padding:120px 8vw}.intro{display:grid;grid-template-columns:1fr 1fr;gap:10vw}.intro h2,.section-heading h2,.contact h2,.image-break h2{font:700 clamp(40px,5vw,72px)/1.05 Manrope;margin:0;letter-spacing:-.04em}.intro-copy{font-size:18px;line-height:1.75;max-width:620px}.feature-grid{display:grid;grid-template-columns:1.15fr .85fr;background:#e9e6de}.feature{min-height:720px;display:grid;grid-template-rows:1fr 1fr}.feature-main{grid-template-rows:1.1fr .9fr}.feature-photo{background-size:cover;background-position:center}.photo-haven{background-image:url('images/haven-ligplaatsen.jpg')}.photo-ramp{background-image:url('images/trailerhelling.jpg')}.feature-body{padding:60px;display:flex;flex-direction:column;justify-content:center;background:#dedbd2}.feature-body.blue{background:#123e52;color:white}.number{font-size:12px;letter-spacing:.15em;opacity:.65}.feature h3{font:700 40px Manrope;margin:14px 0}.feature p{max-width:520px;line-height:1.65}.notice{font-weight:600}.services{background:#f5f3ee}.section-heading{margin-bottom:70px}.service-row{display:grid;grid-template-columns:70px 1fr 1fr;gap:30px;align-items:center;border-top:1px solid #c9c7c0;padding:30px 0}.service-row:last-child{border-bottom:1px solid #c9c7c0}.service-row span{font-size:12px;color:#75838a}.service-row h3{font:600 24px Manrope;margin:0}.service-row p{margin:0;line-height:1.6;color:#52636b}.image-break{height:70vh;min-height:560px;background:linear-gradient(0deg,rgba(7,34,44,.5),rgba(7,34,44,.08)),url('images/haven-ligplaatsen.jpg') center/cover no-repeat;position:relative;color:white}.image-break-copy{position:absolute;left:8vw;bottom:10vh;max-width:720px}.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw}.contact-title>p:last-child{line-height:1.7;max-width:520px}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:26px}.contact-form label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.contact-form input,.contact-form textarea{display:block;width:100%;border:0;border-bottom:1px solid #9fa5a4;background:transparent;padding:13px 0;font:16px "DM Sans";outline:none}.contact-form input:focus,.contact-form textarea:focus{border-color:#123e52}.full{grid-column:1/-1}.form-status{font-size:13px;line-height:1.5}footer{background:#0c2c3a;color:white;padding:55px 8vw;display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:end}footer p{margin:0;opacity:.75;font-size:13px}.footer-brand{font:700 26px Manrope}
@media(max-width:800px){.site-header{height:72px}.menu-button{display:block}.nav{display:none;position:absolute;top:72px;left:0;right:0;background:#f5f3ee;padding:24px 5vw;flex-direction:column;align-items:flex-start}.nav.open{display:flex}.hero{min-height:760px;margin:0}.hero-content{left:7vw;right:7vw;bottom:130px}.hero h1{font-size:52px}.hero-stat{left:7vw;right:auto;bottom:35px}.intro,.contact{grid-template-columns:1fr}.section{padding:80px 7vw}.feature-grid{grid-template-columns:1fr}.feature{min-height:auto}.feature-photo{min-height:380px}.feature-body{padding:50px 7vw;min-height:360px}.service-row{grid-template-columns:40px 1fr}.service-row p{grid-column:2}.image-break{height:600px}.contact-form{grid-template-columns:1fr}.contact-form .full{grid-column:auto}footer{grid-template-columns:1fr}}

/* Premium refinement */
body{background:#f1efe9;color:#15242a}
.site-header{height:96px;padding:0 6vw;background:rgba(241,239,233,.96)}
.brand{font-family:Manrope,sans-serif;font-size:18px;letter-spacing:-.02em}
.brand-mark{background:#173642;width:46px;height:46px;font-size:12px;letter-spacing:.08em}
.nav{gap:38px;font-size:13px;letter-spacing:.025em}
.nav-cta{padding:14px 23px;background:#173642}
.hero{min-height:calc(100vh - 96px);margin:0 1.25vw;border-radius:0}
.hero-overlay{background:linear-gradient(90deg,rgba(8,28,35,.82) 0%,rgba(8,28,35,.40) 48%,rgba(8,28,35,.08) 80%)}
.hero-content{left:8vw;bottom:12vh;max-width:850px}
.hero h1{font-size:clamp(54px,6.7vw,106px);font-weight:600;letter-spacing:-.06em;line-height:.94}
.hero-copy{font-size:17px;max-width:570px;color:rgba(255,255,255,.88)}
.eyebrow{letter-spacing:.22em;font-size:11px}
.button{padding:17px 27px}
.section{padding-top:145px;padding-bottom:145px}
.intro h2,.section-heading h2,.contact h2,.image-break h2{font-weight:600;letter-spacing:-.05em}
.intro-copy{color:#4e5b60}
.feature-body{padding:72px}
.feature-body:not(.blue){background:#e4e0d7}
.feature-body.blue{background:#173642}
.feature h3{font-weight:600;letter-spacing:-.035em}
.services{background:#f1efe9}
.service-row{padding:38px 0;border-color:#cbc8c0}
.service-row h3{font-weight:600;letter-spacing:-.025em}
.image-break{height:78vh}
.contact-luxury{background:#e5e1d8;grid-template-columns:.8fr 1.2fr;align-items:start}
.contact-title h2{max-width:600px}
.contact-title>p:last-child{margin-top:28px;color:#536166}
.contact-options{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-card{min-height:330px;padding:36px;background:#f4f2ed;display:flex;flex-direction:column;position:relative;transition:transform .25s ease,box-shadow .25s ease}
.contact-card:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(15,31,37,.08)}
.contact-card-dark{background:#173642;color:white}
.contact-small{text-transform:uppercase;letter-spacing:.18em;font-size:10px;opacity:.65}
.contact-card strong{font:600 27px/1.2 Manrope;margin-top:auto;max-width:240px;letter-spacing:-.035em}
.contact-detail{font-size:13px;margin-top:15px;opacity:.7}
.contact-arrow{position:absolute;right:32px;top:30px;font-size:23px;font-weight:300}
footer{background:#0b2732;padding-top:68px;padding-bottom:68px}
@media(max-width:800px){
 .site-header{height:74px}
 .hero{margin:0;min-height:760px}
 .section{padding-top:90px;padding-bottom:90px}
 .contact-luxury{grid-template-columns:1fr}
 .contact-options{grid-template-columns:1fr}
 .contact-card{min-height:260px}
}

/* Container layout */
:root{
  --container: 1440px;
  --radius: 22px;
}
body{overflow-x:hidden}
.header-container,
.site-shell,
.footer-container{
  width:min(var(--container), calc(100% - 64px));
  margin-inline:auto;
}
.site-header{padding:0;background:#f1efe9}
.header-container{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-shell{display:block}
.hero{
  width:100%;
  margin:0;
  min-height:720px;
  border-radius:var(--radius);
}
.intro.section,
.services.section,
.contact.section{
  padding-left:48px;
  padding-right:48px;
}
.feature-grid{
  border-radius:var(--radius);
  overflow:hidden;
  gap:18px;
  background:transparent;
}
.feature{
  gap:18px;
}
.feature-body{
  border-radius:var(--radius);
}
.feature-photo{
  border-radius:var(--radius);
  overflow:hidden;
}
.image-break{
  border-radius:var(--radius);
  overflow:hidden;
}
.contact-luxury{
  margin-top:24px;
  margin-bottom:24px;
  border-radius:var(--radius);
}
.contact-card{
  border-radius:18px;
}
footer{
  padding-left:0;
  padding-right:0;
}
.footer-container{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:30px;
  align-items:end;
}
@media(max-width:900px){
  .header-container,.site-shell,.footer-container{width:min(100% - 28px,var(--container))}
  .intro.section,.services.section,.contact.section{padding-left:20px;padding-right:20px}
  .feature-grid{gap:14px}
  .feature{gap:14px}
  .hero{min-height:720px}
}
@media(max-width:800px){
  .header-container{position:relative}
  .nav{left:0;right:0;top:74px;border-radius:0 0 16px 16px}
  .footer-container{grid-template-columns:1fr}
}

/* Supplied Haven Westland photography */
.hero-image{
  background-image:url('images/haven-ligplaatsen.jpg');
  background-position:center 45%;
}
.photo-haven{
  background-image:url('images/haven-ligplaatsen.jpg');
  background-position:center;
}
.photo-ramp{
  background-image:url('images/trailerhelling.jpg');
  background-position:center;
}
.image-break{
  background-image:
    linear-gradient(0deg,rgba(7,34,44,.52),rgba(7,34,44,.08)),
    url('images/trailerhelling.jpg');
  background-position:center;
}
.berth-plan{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:70px;
  align-items:center;
}
.berth-copy h2{
  font:600 clamp(38px,4.5vw,64px)/1.06 Manrope;
  letter-spacing:-.05em;
  margin:0 0 28px;
}
.berth-copy>p:last-child{
  color:#536166;
  font-size:17px;
  line-height:1.7;
}
.berth-image-wrap{
  background:#fff;
  border-radius:22px;
  padding:28px;
  box-shadow:0 18px 50px rgba(17,36,43,.06);
}
.berth-image-wrap img{
  display:block;
  width:100%;
  height:auto;
  max-height:720px;
  object-fit:contain;
  border-radius:16px;
}
@media(max-width:800px){
  .berth-plan{grid-template-columns:1fr;gap:40px}
  .berth-image-wrap{padding:14px}
}


/* 1440px desktop refinement */
@media(min-width:1200px){
  .intro.section,
  .services.section,
  .contact.section,
  .berth-plan.section{
    padding-left:64px;
    padding-right:64px;
  }
  .hero-content{
    left:7%;
    max-width:900px;
  }
  .feature-grid{
    grid-template-columns:1.18fr .82fr;
  }
  .contact-luxury{
    grid-template-columns:.75fr 1.25fr;
  }
  .berth-plan{
    grid-template-columns:.7fr 1.3fr;
    gap:90px;
  }
}