:root{--navy:#192C55;--cream:#FCF8F4;--terracotta:#C97B5C;--sand:#E8DCC8;--muted:rgba(25,44,85,.62);--line:rgba(25,44,85,.15);--display:Georgia,serif;--body:Inter,system-ui,sans-serif;--pad:clamp(22px,5vw,78px);--max:1220px}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--body);line-height:1.55}a{text-decoration:none;color:inherit}.nav{position:sticky;top:0;z-index:10;background:rgba(252,248,244,.92);backdrop-filter:blur(14px);display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);border-bottom:1px solid var(--line)}.logo{display:grid;grid-template-columns:1fr 1fr;width:34px;height:34px;font-weight:800;line-height:1}.logo span{display:flex;align-items:center;justify-content:center}.links{display:flex;gap:28px;font-size:14px}.langs{display:flex;gap:10px;font-size:12px;letter-spacing:.12em}.langs a{opacity:.55}.langs a.active{opacity:1;color:var(--terracotta)}.btn,.nav-cta,button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:var(--navy);color:var(--cream);padding:13px 22px;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.hero{min-height:88vh;display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center;padding:110px var(--pad) 80px;position:relative}.hero-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(252,248,244,0.5);z-index:1;pointer-events:none}.hero>div{position:relative;z-index:2}.headline{font-family:var(--display);font-weight:300;font-size:clamp(54px,8vw,118px);line-height:.92;letter-spacing:-.04em;margin:0}.lead,.intro{font-family:var(--display);font-size:clamp(20px,2vw,28px);line-height:1.35;font-weight:300}.lead{max-width:640px;margin-top:28px}.booking{background:var(--navy);color:var(--cream);padding:30px}.booking h2{font-family:var(--display);font-weight:300;font-size:34px;line-height:1.1;margin:0 0 24px}.field{margin-bottom:15px}.field label{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(252,248,244,.62);margin-bottom:7px}.field input,.field select,.field textarea{width:100%;padding:13px 12px;background:rgba(252,248,244,.08);border:1px solid rgba(252,248,244,.25);color:var(--cream)}.field option{color:var(--navy)}.booking button{width:100%;background:var(--cream);color:var(--navy);border-radius:0;margin-top:8px}.section{padding:95px var(--pad)}.section-inner{max-width:var(--max);margin:auto}.section-head{display:grid;grid-template-columns:1fr 1.25fr;gap:70px;align-items:end;margin-bottom:50px}.eyebrow{color:var(--terracotta);font-size:13px;font-family:var(--display);font-style:italic}.title{font-family:var(--display);font-weight:300;font-size:clamp(42px,5vw,76px);line-height:.98;letter-spacing:-.03em;margin:14px 0 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.photo{aspect-ratio:4/5;background:linear-gradient(135deg,var(--sand),#f7eee6);border:1px dashed rgba(25,44,85,.32);position:relative;margin-bottom:18px;overflow:hidden}.photo.wide{aspect-ratio:16/9}.photo:after{content:attr(data-img);position:absolute;left:14px;bottom:14px;background:rgba(252,248,244,.78);color:var(--muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:6px 8px}.tag{position:absolute;top:14px;left:14px;background:var(--cream);padding:6px 10px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}.meta{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:.18em;text-transform:uppercase}.name{font-family:var(--display);font-weight:300;font-size:28px;line-height:1.05;margin:7px 0}.desc{color:var(--muted);font-size:14px}.card-bottom{border-top:1px solid var(--line);padding-top:13px;display:flex;justify-content:space-between;align-items:center}.price{font-family:var(--display);font-style:italic}.link{color:var(--terracotta);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}.center{text-align:center;margin-top:45px}.dark{background:var(--navy);color:var(--cream)}.dark .desc,.dark .intro{color:rgba(252,248,244,.86)}.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(252,248,244,.18);margin-top:55px}.pillar{background:var(--navy);padding:30px}.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}.box{border:1px solid var(--line);padding:36px;background:var(--cream)}.text{color:var(--muted);font-size:16px;line-height:1.8}.form{background:var(--navy);color:var(--cream);padding:36px}.form input,.form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(252,248,244,.3);color:var(--cream);padding:13px 0;margin-bottom:20px}.form label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(252,248,244,.62)}.form button{background:var(--cream);color:var(--navy);border-radius:0;width:100%}footer{background:var(--navy);color:var(--cream);padding:80px var(--pad) 35px}.footer-grid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:45px;border-bottom:1px solid rgba(252,248,244,.22);padding-bottom:45px}.footer-title{font-family:var(--display);font-size:38px;line-height:1.05}.footer-meta,.footer-grid a{color:rgba(252,248,244,.82);font-size:14px}.footer-grid h4{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(252,248,244,.55)}.footer-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}.footer-bottom{max-width:var(--max);margin:28px auto 0;color:rgba(252,248,244,.55);font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between}@media(max-width:900px){.hero,.section-head,.split{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.pillars,.footer-grid{grid-template-columns:1fr 1fr}.links{display:none}}@media(max-width:620px){.grid,.pillars,.footer-grid{grid-template-columns:1fr}.hero{padding-top:70px}.footer-bottom{display:block}.langs{display:none}}


/* Avaibook booking widget integration */
.avaibook-wrapper {
  background: var(--navy);
  color: var(--cream);
  padding: 28px;
  border-radius: 2px;
}
.avaibook-wrapper .booking-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.1;
  margin-bottom: 22px;
  color: var(--cream);
}
.avaibook-search-widget {
  width: 100%;
}
.avaibook-wrapper input,
.avaibook-wrapper select,
.avaibook-wrapper button {
  font-family: var(--body) !important;
}


/* Shared image integration */
.photo-slot {
  overflow: hidden;
  position: relative;
}
.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-slot::after {
  display: none !important;
}


.photo-slot video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* MP4 video support for apartment cards */
.photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0; left: 0;
}

/* Apartment video: paused + desaturated by default, play on hover */
.apt-video {
  filter: saturate(0.35) brightness(0.92);
  transition: filter 0.4s ease;
  cursor: pointer;
}
.photo:hover .apt-video {
  filter: saturate(1) brightness(1);
}


/* =============================================
   HERO LAYOUT — definitive fix
   ============================================= */

body { overflow-x: hidden; }

.hero {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto !important;
  grid-template-areas: "claim motor" !important;
  align-items: start !important;
  gap: 60px !important;
  padding-top: 90px !important;
  padding-bottom: 80px !important;
  position: relative;
  overflow: visible;        /* must be visible so calendar dropdown shows */
}

/* Video fullbleed — clipped by its own absolute positioning, not by overflow */
.hero-video {
  position: absolute !important;
  top: 0; left: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover;
  z-index: 0;
}
.hero-overlay {
  position: absolute !important;
  top: 0; left: 0;
  width: 100% !important; height: 100% !important;
  background: rgba(252,248,244,0.5);
  z-index: 1;
  pointer-events: none;
}

.hero-claim {
  grid-area: claim !important;
  position: relative;
  z-index: 2;
  min-width: 0;
  align-self: center !important;
}

.hero-motor {
  grid-area: motor !important;
  position: relative;
  z-index: 2;
  min-width: 0;
  align-self: start !important;
  overflow: visible;        /* calendar/datepicker must not be clipped */
}

/* Contain injected widget elements within column width */
.hero-motor > *,
.avaibook-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Datepicker/calendar popup: high z-index, not clipped */
.hero-motor iframe,
.hero-motor [class*="calendar"],
.hero-motor [class*="datepicker"],
.hero-motor [class*="dropdown"],
.hero-motor [class*="popup"],
.hero-motor [class*="picker"] {
  z-index: 100 !important;
  max-width: none !important;  /* let the calendar be its natural width */
}

@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr !important;
    grid-template-areas: "claim" "motor" !important;
    padding-top: 50px !important;
  }
}