/* ========== Variables & Base ========== */
:root{
  --ink:#0e2233;
  --ink-2:#21384b;
  --gold:#d0a159;
  --bg:#ffffff;
  --muted:#eef2f5;
  --max:1100px;

  --radius:14px;
  --shadow:0 12px 30px rgba(0,0,0,.08);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0; padding:0; font-family:Lato,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink); background:var(--bg)}
a{color:var(--ink); text-decoration:none}
a:hover{text-decoration:underline}

/* A11y helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ========== Header & Navigation ========== */
header.site{position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid #e5e9ee}
.wrap{max-width:var(--max); margin-inline:auto; padding:18px 20px}
.row{display:flex; align-items:center; justify-content:space-between; gap:16px}
.logo img{height:48px; transform:scale(1.5); transform-origin:left center}

/* Desktop nav */
nav.primary ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
nav.primary a{font-weight:600; letter-spacing:.02em}

/* Hamburger button (hidden on desktop) */
#hamburger{
  appearance:none; border:0; background:transparent; padding:10px; margin:-10px;
  display:none; /* only mobile shows this */
  cursor:pointer; line-height:0;
}
#hamburger svg{width:28px; height:28px}

/* Mobile dropdown panel (hidden by default) */
#mobileMenu{
  position:fixed; inset:64px 0 auto 0; /* below sticky header */
  background:#ffffff; border-bottom:1px solid #e5e9ee;
  box-shadow:0 20px 40px rgba(0,0,0,.08);
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:transform .2s ease, opacity .2s ease;
}
#mobileMenu ul{list-style:none; margin:0; padding:10px 16px}
#mobileMenu li{border-top:1px solid #f0f3f6}
#mobileMenu li:first-child{border-top:0}
#mobileMenu a{display:block; padding:14px 6px; font-weight:700}

/* When menu is open (toggled by JS) */
header.site.menu-open #mobileMenu{transform:translateY(0); opacity:1; pointer-events:auto}

/* Responsive visibility rules */
@media (max-width: 860px){
  /* Mobile: show hamburger (right edge), hide desktop nav list */
  #hamburger{display:block; margin-left:auto} /* pushes it to far right */
  nav.primary ul{display:none}
}
@media (min-width: 861px){
  /* Desktop: hide mobile panel regardless of state */
  #mobileMenu{display:none !important}
}

/* ========== Hero (1 large + 3 thumbs) ========== */
.hero{padding:28px 20px}
.hero .grid{max-width:var(--max); margin:0 auto; display:grid; gap:14px; grid-template-columns:1fr}
.hero figure{
  margin:0; position:relative; overflow:hidden; border-radius:var(--radius); background:#000;
  box-shadow:var(--shadow);
}
/* Main hero image: fill container without black bars */
.hero figure:first-child{aspect-ratio: 16 / 9}
.hero figure:first-child img{width:100%; height:100%; object-fit:cover; display:block}

/* Thumbnails row — force all to same horizontal size */
.thumbs{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.thumbs figure{aspect-ratio:16 / 9; overflow:hidden; border-radius:var(--radius); background:#000}
.thumbs img{width:100%; height:100%; object-fit:cover; display:block}

@media (min-width:800px){
  .hero{padding:36px 20px 20px}
}

/* ========== Generic Sections ========== */
.section{padding:28px 20px}
.section .inner{max-width:var(--max); margin:0 auto}
h2{font-family:"Playfair Display",serif; font-weight:700; font-size:clamp(24px,3vw,34px); margin:0 0 10px}
p{line-height:1.7; color:var(--ink-2)}
.tag{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #e8edf2; border-radius:999px; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); background:#fff}
.tag::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold)}
.section h2{font-family:"Playfair Display",serif; font-weight:700; font-size:clamp(26px,3.2vw,36px); margin:10px 0 8px}
.section .lede{font-size:1.1rem; color:var(--ink); margin:0 0 8px}

/* ========== Features Block ========== */
.features{padding:8px 20px 36px}
.features .grid{max-width:var(--max); margin:0 auto; display:grid; gap:24px}
@media (min-width:860px){.features .grid{grid-template-columns:1fr 1fr}}
.card{background:#fff; border:1px solid #e8edf2; border-radius:var(--radius); overflow:hidden}
.card img{width:100%; height:320px; object-fit:cover; display:block}
.card ul{margin:14px 18px 18px; padding-left:18px}
.card li{margin:6px 0; color:var(--ink-2)}

/* Optional two-column features-box variant used on some pages */
.features-box{
  width:80%; margin:0 auto; background:#fff; border:1px solid #eef0f3;
  border-radius:var(--radius); box-shadow:var(--shadow); padding:28px 32px;
  display:grid; gap:28px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); overflow:hidden
}
.features-col{min-width:0}
.features-box h3.section-head{font-family:"Playfair Display",serif; font-size:1.6rem; font-weight:700; margin:0 0 .8rem}
.subhead{font-weight:800; color:#0f213a; margin:.5rem 0 .25rem; font-size:1.05rem; font-family:"Playfair Display",serif; scroll-margin-top:90px}
.features-box ul{margin:.2rem 0 .9rem 1.1rem; padding:0}
.features-box li{margin:.35rem 0; color:#333}
.features-media{display:block; width:100%; border-radius:12px; overflow:hidden; border:1px solid #eef0f3; box-shadow:var(--shadow); margin:0 0 1rem}
.features-media img{display:block; width:100%; height:auto}

@media (max-width:900px){
  .features-box{grid-template-columns:1fr; gap:22px; padding:24px}
  .features-box h3.section-head{margin-bottom:.6rem}
  .features-box ul{margin-left:1rem}
}

/* ========== Footer ========== */
footer{background:var(--muted); border-top:1px solid #e5e9ee}
.footer-grid{display:grid; gap:22px}
@media (min-width:720px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
.footer h3{font-family:"Playfair Display",serif; font-size:20px; margin:0 0 8px}
.contact small,.copyright{color:#4a6178}
.email-capture{display:flex; gap:10px}
.email-capture input{flex:1; padding:10px 12px; border:1px solid #d7dee6; border-radius:10px}
.email-capture button{padding:10px 14px; border:0; border-radius:10px; background:var(--ink); color:#fff; font-weight:700; letter-spacing:.02em}

/* ==== Floor Plan page styles (floor-plan.html) ==== */

/* Page intro section */
.section { padding: 28px 20px; }
.section .inner { max-width: var(--max); margin: 0 auto; }
.section .tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px solid #e8edf2; border-radius: 999px;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); background: #fff;
}
.section .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.section h1, .section h2 {
  font-family: "Playfair Display", serif; font-weight: 700; margin: 0 0 10px;
}
.section h1 { font-size: clamp(26px, 3.2vw, 36px); }
.section .lede { font-size: 1.05rem; color: var(--ink-2); margin: 0 0 10px; }

/* Floor plan + features layout */
.plan { padding: 8px 20px 36px; }
.plan .grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; gap: 24px;
}
@media (min-width: 900px) {
  .plan .grid { grid-template-columns: 1.1fr .9fr; }
}

/* Plan figure with guaranteed white background behind transparent PNGs */
.plan figure {
  margin: 0;
  border: 1px solid #e8edf2;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}
.plan img {
  display: block; width: 100%; height: auto;
  object-fit: contain; background: #fff;
}

/* Features box */
.features-box {
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
.features-box h3 {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  margin: 0 0 8px;
}

/* Multi-column features list with graceful wrapping */
.features-list { columns: 1; }
@media (min-width: 700px) {
  .features-list { columns: 2; column-gap: 28px; }
}
.features-list ul {
  margin: 0 0 12px 18px; padding: 0;
  break-inside: avoid;
}
.features-list li { margin: 6px 0; color: var(--ink-2); }
/* === Floor Plan box layout fix (true 90% width, centered) === */
.features-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 28px;
  width: 90%;
  margin: 0 auto 48px;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 32px;
}

.features-box .features-media {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff; /* clean white */
  border-radius: var(--radius);
  overflow: hidden;
  border: none; /* no border */
  box-shadow: none; /* remove shadow behind image */
}

.features-box .features-media img {
  width: 90%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}

@media (max-width: 900px) {
  .features-box {
    grid-template-columns: 1fr;
    width: 95%;
    padding: 24px;
  }

  .features-box .features-media img {
    width: 100%;
  }
}
/* Full-bleed utility */
.full-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
}

/* Map section */
.map-bleed { margin: 0; padding: 0; }
.map-bleed .map-frame {
  display: block;
  width: 100%;
  height: 520px;
  border: 0;
}

/* Prevent horizontal scroll while bleeding */
html, body { overflow-x: hidden; }
/* Full-bleed map */
.map-bleed{ margin:0; padding:0; }
.map-bleed .map-frame{
  display:block;
  width:100vw;          /* span full viewport width */
  height:520px;
  border:0;
  margin-left:calc(50% - 50vw);  /* bleed to left */
  margin-right:calc(50% - 50vw); /* bleed to right */
}
footer{ margin-top:0; } /* keep footer tight to the map */