/* 257 Kitchawan Road — V4 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:   #F7F4EF;
  --warm:    #DDD8CF;
  --bark:    #181210;
  --stone:   #302820;
  --moss:    #4A5240;
  --gold:    #C09B5B;
  --gold-lt: #E8C97A;
  --white:   #FFFFFF;
  --serif:   'Cormorant Garamond', Georgia, serif;
  --sans:    'Jost', sans-serif;
  --ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --gap:     2px;
}

html { scroll-behavior: smooth; font-size: 17px; }
body { background: var(--cream); color: var(--bark); font-family: var(--sans); font-weight: 300; line-height: 1.75; overflow-x: hidden; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
.mt { margin-top: 1.1rem; }

/* ── NAV ── */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 3rem; transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease); }
nav.scrolled { background: rgba(247,244,239,0.97); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(24,18,16,0.12); }
.nav-logo { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; letter-spacing: 0.08em; color: var(--white); transition: color 0.4s; white-space: nowrap; }
nav.scrolled .nav-logo { color: var(--bark); }
.nav-links { display: flex; gap: 1.8rem; list-style: none; }
.nav-links a { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.92); transition: color 0.3s; white-space: nowrap; }
nav.scrolled .nav-links a { color: var(--stone); }
.nav-links a:hover { color: var(--gold); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--white); transition: background 0.4s; }
nav.scrolled .nav-toggle span { background: var(--bark); }

/* ── HERO ── */
#hero { position: relative; height: 100vh; min-height: 500px; overflow: hidden; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-slide.active { opacity: 1; }
.hero-slide img { height: 100%; object-position: center; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18,12,8,0.3) 0%, rgba(18,12,8,0.1) 40%, rgba(18,12,8,0.7) 100%); }
.hero-content { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); text-align: center; width: 90%; max-width: 820px; color: var(--white); animation: fadeUp 1.2s var(--ease) 0.3s both; }
.hero-eyebrow { font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 1.2rem; text-shadow: 0 1px 8px rgba(0,0,0,0.7); }
.hero-title { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 300; line-height: 1.1; margin-bottom: 1.2rem; text-shadow: 0 2px 16px rgba(0,0,0,0.5); }
.hero-subtitle { font-family: var(--serif); font-size: clamp(1.05rem, 2.2vw, 1.4rem); font-weight: 300; font-style: italic; color: rgba(255,255,255,0.97); margin-bottom: 2.5rem; text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
.hero-cta { display: inline-block; padding: 0.9rem 2.8rem; background: rgba(192,155,91,0.3); border: 1.5px solid rgba(255,255,255,0.9); font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white); transition: background 0.3s, border-color 0.3s; }
.hero-cta:hover { background: rgba(192,155,91,0.55); border-color: white; }
.hero-dots { position: absolute; bottom: 2.5rem; right: 3rem; display: flex; gap: 0.5rem; }
.hero-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: background 0.3s; }
.hero-dot.active { background: var(--gold-lt); }

/* ── SECTION BASE ── */
section { padding: 5rem 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 3rem; }
.section-eyebrow { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem; }
.section-title { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; line-height: 1.15; margin-bottom: 1.5rem; color: var(--bark); }
.section-body { font-family: var(--sans); font-size: 1.05rem; font-weight: 300; line-height: 1.85; color: var(--stone); max-width: 680px; }
.gold-rule { width: 40px; height: 1px; background: var(--gold); margin: 1.5rem 0; }

/* ── INTRO ── */
#intro { background: var(--white); }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.overview-bullets { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 1rem 0 0.5rem; max-width: 680px; }
.overview-bullets li { font-family: var(--sans); font-size: 0.88rem; font-weight: 300; color: var(--stone); padding: 0.45rem 0.5rem 0.45rem 0; border-bottom: 1px solid rgba(48,40,32,0.1); display: flex; align-items: flex-start; gap: 0.5rem; line-height: 1.45; }
.overview-bullets li::before { content: '—'; color: var(--gold); font-family: var(--serif); flex-shrink: 0; }
.intro-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; }
.stat { border-top: 1px solid var(--warm); padding-top: 1.2rem; }
.stat-num { font-family: var(--serif); font-size: 2.4rem; font-weight: 300; color: var(--bark); line-height: 1; margin-bottom: 0.3rem; }
.stat-plus { font-size: 1.2rem; }
.stat-label { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }
.intro-image { height: auto; overflow: visible; }
.intro-image img { transition: transform 6s var(--ease); }
.intro-image:hover img { transform: scale(1.04); }

/* ── DISTINCTION ── */
#distinction { background: var(--bark); }
#distinction .section-title { color: #F2ECE4; font-weight: 400; }
#distinction .section-body { color: #C8BFB5; max-width: 780px; font-size: 1.05rem; }
#distinction .section-eyebrow { color: var(--gold-lt); }
.distinction-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap); margin-top: 4rem; background: #0A0604; }
.distinction-photo { height: 420px; overflow: hidden; position: relative; }
.distinction-mobile-only { display: none; } /* shown only on iPhone */
.distinction-photo img { transition: transform 6s var(--ease); opacity: 0.88; }
.distinction-photo:hover img { transform: scale(1.06); opacity: 1; }
.distinction-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 2.2rem 1.2rem 1rem; background: linear-gradient(transparent, rgba(8,4,2,0.92)); font-family: var(--sans); font-size: 0.82rem; font-weight: 300; color: rgba(255,255,255,0.97); line-height: 1.5; }

/* ── ROOMS ── */
#rooms { background: var(--cream); }
.room-block { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: var(--gap); background: var(--warm); }
.room-block.reverse { direction: rtl; }
.room-block.reverse > * { direction: ltr; }
.room-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); background: var(--warm); }
.room-photo { height: 280px; overflow: hidden; position: relative; }
.room-photo.tall { grid-column: span 2; height: 360px; }
.room-photo img { transition: transform 5s var(--ease); }
.room-photo:hover img { transform: scale(1.05); }
.room-photo-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 2.2rem 1rem 0.9rem; background: linear-gradient(transparent, rgba(8,4,2,0.86)); font-family: var(--sans); font-size: 0.82rem; font-weight: 300; color: rgba(255,255,255,0.97); line-height: 1.5; }
.room-info { padding: 3.5rem; display: flex; flex-direction: column; justify-content: center; background: var(--white); }
.room-name { font-family: var(--serif); font-size: 2rem; font-weight: 400; color: var(--bark); margin-bottom: 1rem; line-height: 1.2; }
.room-desc { font-family: var(--sans); font-size: 1rem; font-weight: 300; color: var(--stone); line-height: 1.85; }

/* ── PRIMARY SUITE ── */
#primary-suite { background: var(--cream); padding: 0; }
.suite-hero { position: relative; height: 70vh; overflow: hidden; }
.suite-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(12,8,4,0.82) 0%, rgba(12,8,4,0.06) 65%); }
.suite-hero-content { position: absolute; top: 50%; left: 6%; transform: translateY(-50%); max-width: 500px; color: var(--white); }
.suite-hero-content .section-eyebrow { color: var(--gold-lt); }
.suite-hero-content .section-title { color: #F2EDE6; font-size: clamp(1.8rem,3.5vw,2.8rem); }
.suite-hero-content .section-body { color: rgba(255,255,255,0.93); max-width: 100%; font-size: 1rem; }
.suite-gallery { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap); background: var(--warm); }
.suite-cell { height: 280px; overflow: hidden; position: relative; }
.suite-cell.double { grid-column: span 2; }
.suite-cell img { transition: transform 5s var(--ease); }
.suite-cell:hover img { transform: scale(1.06); }
.suite-cell-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 0.9rem 0.85rem; background: linear-gradient(transparent, rgba(8,4,2,0.88)); font-family: var(--sans); font-size: 0.8rem; font-weight: 300; color: rgba(255,255,255,0.97); line-height: 1.5; }

/* ── PROPERTY ── */
#property { background: var(--warm); }
.property-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.features-list { list-style: none; margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.features-list li { font-family: var(--sans); font-size: 0.92rem; font-weight: 300; color: var(--stone); padding: 0.8rem 0.5rem 0.8rem 0; border-bottom: 1px solid rgba(48,40,32,0.15); display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.55; }
.features-list li::before { content: '—'; color: var(--gold); font-family: var(--serif); flex-shrink: 0; margin-top: 0.1rem; }
.property-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); background: var(--stone); }
.property-photo { height: 240px; overflow: hidden; position: relative; }
.property-photo.wide { grid-column: span 2; height: 300px; }
.property-photo img { transition: transform 5s var(--ease); }
.property-photo:hover img { transform: scale(1.05); }
.property-photo-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 0.9rem 0.85rem; background: linear-gradient(transparent, rgba(8,4,2,0.88)); font-family: var(--sans); font-size: 0.8rem; font-weight: 300; color: rgba(255,255,255,0.97); line-height: 1.5; }
.pdf-links { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.pdf-link { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bark); border-bottom: 1px solid var(--gold); padding-bottom: 0.25rem; width: fit-content; transition: color 0.3s; }
.pdf-link:hover { color: var(--gold); }
.pdf-link::before { content: '↓'; font-size: 0.9rem; }
.preview-note { margin-top: 2.5rem; padding: 1.8rem 2.2rem; border-left: 3px solid var(--gold); background: rgba(192,155,91,0.08); }
.preview-note p { font-family: var(--serif); font-size: 1.15rem; font-style: italic; color: var(--bark); line-height: 1.7; }

/* ── GALLERY ── */
/* Gallery CTA link */
.gallery-cta-section { padding-bottom: 1rem; }
.gallery-cta-link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 1.5rem;
  font-family: var(--serif); font-size: 1.2rem; font-weight: 400;
  font-style: italic; letter-spacing: 0.02em; color: var(--gold-lt);
  border-bottom: 1px solid rgba(232,201,122,0.5);
  padding-bottom: 0.3rem; transition: border-color 0.3s, color 0.3s;
  cursor: pointer;
}
.gallery-cta-link:hover { color: #FFFFFF; border-color: #FFFFFF; }

#gallery { background: var(--bark); padding: 5rem 0; }
#gallery .section-title { color: #F2ECE4; }
#gallery .section-eyebrow { color: var(--gold-lt); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: 3rem; background: #0A0604; }
.gallery-item { position: relative; overflow: hidden; cursor: pointer; }
.gallery-item:nth-child(1), .gallery-item:nth-child(7), .gallery-item:nth-child(13) { grid-column: span 2; }
.gallery-item img { height: 260px; transition: transform 5s var(--ease); opacity: 0.85; }
.gallery-item:nth-child(1) img, .gallery-item:nth-child(7) img, .gallery-item:nth-child(13) img { height: 340px; }
.gallery-item:hover img { transform: scale(1.06); opacity: 1; }
.gallery-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 3.5rem 1rem 1.4rem; background: linear-gradient(transparent, rgba(8,4,2,0.96)); font-family: var(--sans); font-size: 0.8rem; color: #FFFFFF; line-height: 1.55; opacity: 0; transition: opacity 0.3s; }
.gallery-item:hover .gallery-caption { opacity: 1; }

/* Floor plan images in gallery */
.gallery-floorplan { background: var(--white); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.gallery-floorplan img { object-fit: contain; background: white; }

/* Lightbox */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(10,6,4,0.95); z-index: 200; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox-img { max-width: 90vw; max-height: 88vh; object-fit: contain; width: auto; height: auto; }
.lightbox-close { position: absolute; top: 1.5rem; right: 2rem; color: rgba(255,255,255,0.7); font-size: 2rem; cursor: pointer; line-height: 1; transition: color 0.2s; }
.lightbox-close:hover { color: var(--white); }
.lightbox-caption { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.8); font-family: var(--sans); font-size: 0.85rem; text-align: center; max-width: 600px; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.6); font-size: 2.5rem; cursor: pointer; padding: 1rem; transition: color 0.2s; user-select: none; }
.lightbox-nav:hover { color: var(--white); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

/* ── CONTACT ── */
#contact { background: var(--white); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.contact-intro { font-family: var(--serif); font-size: 1.2rem; font-style: italic; color: var(--stone); line-height: 1.75; margin-bottom: 1.5rem; }
.contact-price { font-family: var(--sans); font-size: 1rem; font-weight: 400; color: var(--bark); margin-bottom: 2rem; line-height: 1.75; }
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--stone); }
.form-group input, .form-group textarea { background: var(--cream); border: 1px solid var(--warm); padding: 0.9rem 1rem; font-family: var(--sans); font-size: 1rem; font-weight: 300; color: var(--bark); outline: none; transition: border-color 0.3s; width: 100%; border-radius: 0; -webkit-appearance: none; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--gold); }
.form-group input.error, .form-group textarea.error { border-color: #C0392B; }
.form-group textarea { resize: vertical; min-height: 110px; }
.char-counter { font-family: var(--sans); font-size: 0.7rem; color: var(--stone); text-align: right; margin-top: 0.2rem; }
.char-counter.warning { color: #C0392B; font-weight: 500; }
.form-error { display: none; background: rgba(192,57,43,0.08); border-left: 3px solid #C0392B; padding: 0.8rem 1rem; font-family: var(--sans); font-size: 0.88rem; color: #C0392B; margin-bottom: 0.5rem; }
.form-error.visible { display: block; }
.form-submit { margin-top: 0.5rem; padding: 1rem 2.5rem; background: var(--bark); color: var(--cream); font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; border: none; cursor: pointer; transition: background 0.3s; align-self: flex-start; }
.form-submit:hover { background: var(--moss); }
.form-note { font-family: var(--sans); font-size: 0.78rem; color: var(--stone); margin-top: 0.5rem; }
.form-success { display: none; padding: 1.2rem 1.5rem; background: rgba(74,82,64,0.1); border-left: 3px solid var(--moss); font-family: var(--serif); font-style: italic; color: var(--moss); font-size: 1.05rem; }

/* Static map */
.map-static { position: relative; height: 460px; overflow: hidden; border: 1px solid var(--warm); background: #e8e0d8; }
.map-static img { width: 100%; height: 100%; object-fit: cover; }
.map-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); }
.map-pin svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.map-label { margin-top: 1rem; font-family: var(--sans); font-size: 0.78rem; color: var(--stone); letter-spacing: 0.05em; }
.map-directions { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--gold); padding-bottom: 0.15rem; }

/* ── FOOTER ── */
footer { background: var(--bark); padding: 3rem; text-align: center; }
.footer-logo { font-family: var(--serif); font-size: 1.3rem; font-weight: 300; color: var(--cream); letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.footer-sub { font-family: var(--sans); font-size: 0.7rem; font-weight: 300; letter-spacing: 0.15em; color: #7A6E62; text-transform: uppercase; }
.footer-gallery-link { display: inline-block; margin-top: 1.2rem; font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-lt); border-bottom: 1px solid rgba(232,201,122,0.4); padding-bottom: 0.2rem; transition: border-color 0.3s; }
.footer-gallery-link:hover { border-color: var(--gold-lt); }

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateX(-50%) translateY(30px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ══ RESPONSIVE TABLET ══ */
@media (max-width: 1024px) {
  .container { padding: 0 2rem; }
  nav { padding: 1rem 2rem; }
  .intro-grid, .property-grid, .contact-grid { gap: 3rem; }
  .room-info { padding: 2.5rem; }
  .distinction-photo { height: 320px; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }

  /* iPad: Overview — swap images, align top with copy */
  .intro-image { height: auto; overflow: visible; order: -1; }
  .intro-grid { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }

  /* iPad: Primary Suite — copy moves above hero image */
  .suite-hero { height: 50vh; }
  .suite-hero-overlay { display: none; }
  .suite-hero-content { display: none; }
  .suite-intro-above {
    display: block !important;
    background: var(--bark); padding: 2.5rem 3rem;
    color: var(--cream);
  }
  .suite-intro-above .section-eyebrow { color: var(--gold-lt); }
  .suite-intro-above .section-title { color: #F2EDE6; font-size: 1.9rem; margin-bottom: 0.8rem; }
  .suite-intro-above .section-body { color: rgba(255,255,255,0.88); max-width: 100%; font-size: 0.95rem; }

  /* iPad: Suite gallery — closets 4-across, deck full width at end */
  .suite-cell.ipad-wide { grid-column: span 2; }

  /* iPad: Property & Details — features go full width 2-col under photos */
  .property-grid { grid-template-columns: 1fr; gap: 0; }
  .property-photos { order: -1; }
  .features-list { grid-template-columns: 1fr 1fr; margin-top: 1.5rem; }
  .features-list li { padding: 0.5rem 0.5rem 0.5rem 0; }
  .preview-note { margin-top: 1.5rem; }
  .pdf-links { margin-top: 1.5rem; }

  /* iPad: Gallery CTA — tighter */
  #gallery { padding: 2.5rem 0; }
  .gallery-cta-section { padding-bottom: 0; }
}

/* ══ RESPONSIVE MOBILE ══ */
@media (max-width: 768px) {
  nav { padding: 1rem 1.5rem; }
  .nav-links { display: none; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: rgba(247,244,239,0.98); padding: 1rem 0; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 0.9rem 2rem; font-size: 0.82rem; color: var(--stone) !important; border-bottom: 1px solid var(--warm); }
  .nav-toggle { display: flex; }
  section { padding: 3.5rem 0; }
  .container { padding: 0 1.5rem; }
  .section-title { font-size: clamp(1.7rem, 6vw, 2.4rem); }
  .section-body { font-size: 1rem; max-width: 100%; }
  .intro-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .intro-image { height: auto; overflow: visible; }
  .intro-stats { grid-template-columns: 1fr 1fr; }
  .distinction-grid { grid-template-columns: 1fr; }
  .distinction-photo { height: 280px; }
  .room-block { grid-template-columns: 1fr; }
  .room-block.reverse { direction: ltr; }
  .room-photos { grid-template-columns: 1fr; }
  .room-photo, .room-photo.tall { height: 260px; grid-column: span 1; }
  .room-info { padding: 2rem 1.5rem; }
  .room-name { font-size: 1.7rem; }
  .suite-hero { height: 55vh; min-height: 360px; }
  .suite-hero-content { left: 5%; max-width: 85%; }
  .suite-gallery { grid-template-columns: 1fr 1fr; }
  .suite-cell.double { grid-column: span 2; }
  .suite-cell { height: 210px; }
  .property-photos-full { grid-template-columns: 1fr; }
  .property-photo-full.wide { grid-column: span 1; height: 260px; }
  .property-photo-full { height: 240px; }
  .features-list-wide { grid-template-columns: 1fr 1fr; }
  .property-footer { flex-direction: column; gap: 2rem; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item:nth-child(1), .gallery-item:nth-child(7), .gallery-item:nth-child(13) { grid-column: span 2; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .form-row { grid-template-columns: 1fr; }
  .map-static { height: 300px; }
  .hero-eyebrow { font-size: 0.68rem; }
  .hero-dots { right: 1.5rem; bottom: 2rem; }

  /* iPhone: Overview — bottom image = Living Room fireplace */
  .intro-image-iphone { content: url('images/LvgRm 2.jpg'); }

  /* iPhone: Rooms — copy leads before photos */
  .room-block { display: flex; flex-direction: column; }
  .room-block .room-info { order: -1; padding: 2rem 1.5rem 1.5rem; }
  .room-block.reverse { direction: ltr; }
  .room-block.reverse .room-info { order: -1; }
  .room-block .room-photos { order: 0; }

  /* iPhone: Primary Suite captions — moved above photo strip */
  .suite-cell-caption { display: none; }
  .suite-intro-above { display: block !important; background: var(--bark); padding: 2rem 1.5rem; }
  .suite-intro-above .section-eyebrow { color: var(--gold-lt); }
  .suite-intro-above .section-title { color: #F2EDE6; font-size: 1.6rem; }
  .suite-intro-above .section-body { color: rgba(255,255,255,0.88); font-size: 0.95rem; max-width: 100%; }
  .suite-hero-content { display: none; }
  .suite-hero-overlay { display: none; }

  /* iPhone: Suite — deck cell full width at bottom */
  .suite-cell.phone-deck-full { grid-column: span 2; height: 260px; }

  /* iPhone: Gallery CTA tighter */
  #gallery { padding: 2rem 0; }
  .gallery-cta-section { padding-bottom: 0; }
  section#gallery .pdf-link { font-family: var(--serif); font-style: italic; font-size: 1rem; letter-spacing: 0; text-transform: none; border-bottom-color: rgba(232,201,122,0.5); color: var(--gold-lt); }
  section#gallery .pdf-link::before { content: none; }
}

@media (max-width: 480px) {
  .hero-title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .suite-gallery { grid-template-columns: 1fr; }
  .suite-cell.double { grid-column: span 1; }
  .suite-cell { height: 230px; }
  .features-list-wide { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item:nth-child(1), .gallery-item:nth-child(7), .gallery-item:nth-child(13) { grid-column: span 1; }
  .gallery-item img, .gallery-item:nth-child(1) img, .gallery-item:nth-child(7) img, .gallery-item:nth-child(13) img { height: 240px; }
}



/* ── INTRO IMAGE STACK WITH CAPTIONS ── */
.intro-img-stack { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.intro-img-wrap { position: relative; overflow: hidden; height: 320px; width: 100%; }
.intro-img-top, .intro-img-bottom { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro-img-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.8rem 1rem 0.75rem;
  background: linear-gradient(transparent, rgba(10,6,2,0.82));
  font-family: var(--sans); font-size: 0.78rem; font-weight: 300;
  color: rgba(255,255,255,0.95); line-height: 1.4;
}
.intro-img-3rd { display: block; }  /* shown on desktop and iPad */
.intro-img-mobile { display: none; }

/* ── SUITE HERO IMAGE ── */
.suite-hero-img { width: 100%; height: 70vh; object-fit: cover; object-position: center center; display: block; }

/* ── IPHONE DIVIDER IMAGE ── */
.iphone-divider-img { display: none; position: relative; }
.iphone-divider-img img { width: 100%; height: 280px; object-fit: cover; object-position: center 40%; display: block; }
.iphone-divider-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.8rem 1rem 0.75rem;
  background: linear-gradient(transparent, rgba(10,6,2,0.82));
  font-family: var(--sans); font-size: 0.78rem; color: rgba(255,255,255,0.95); line-height: 1.4;
}

/* ── GALLERY SECTION — dark background for visibility on all devices ── */
#gallery { background: var(--bark); padding: 4rem 0; }
#gallery .section-eyebrow { color: var(--gold-lt); }
#gallery .section-title { color: #F2ECE4; }
#gallery .gold-rule { background: var(--gold); }
.gallery-cta-link { color: var(--gold-lt) !important; border-bottom-color: rgba(232,201,122,0.6) !important; }
.gallery-cta-link:hover { color: #FFFFFF !important; border-bottom-color: #FFFFFF !important; }
#gallery .pdf-link { color: var(--gold-lt); border-bottom-color: rgba(232,201,122,0.5); }
#gallery .pdf-link:hover { color: #FFFFFF; }
/* ══════════════════════════════════════════
   V9 — OVERVIEW IMAGE STACK (iPad/desktop)
══════════════════════════════════════════ */
/* Align image top with first line of copy */
/* intro-grid top alignment handled in base styles */

/* ══════════════════════════════════════════
   V9 — PRIMARY SUITE copy above image
   (hidden on desktop, shown on tablet/mobile)
══════════════════════════════════════════ */
.suite-intro-copy {
  display: none; /* hidden on desktop — copy shows overlaid on image */
  background: var(--bark);
  padding: 3rem 3rem 2rem;
  color: var(--cream);
}
.suite-intro-copy .section-eyebrow { color: var(--gold-lt); }
.suite-intro-copy .section-title { color: #F2EDE6; font-size: clamp(1.8rem,4vw,2.8rem); }
.suite-intro-copy .section-body { color: rgba(255,255,255,0.9); max-width: 100%; font-size: 1rem; }

/* Suite deck full width at bottom */
.suite-deck-full { grid-column: span 4 !important; height: 520px !important; }

/* ══════════════════════════════════════════
   V12 — TABLET (iPad) OVERRIDES ≤ 1024px
══════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* iPad: Hero slide 1 — zoom out to show full house */
  .hero-slide:nth-child(1) img { object-position: center 60%; object-fit: cover; }

  /* Overview — show 3 images, tighter gap */
  .intro-grid { gap: 2.5rem; }
  .intro-img-stack { height: auto; gap: 4px; }
  .intro-img-wrap { height: 240px; }
  .intro-img-3rd { display: block; }

  /* Primary Suite — show copy above, hide overlay */
  .suite-intro-copy { display: block; }
  .suite-hero-content { display: none; }
  .suite-hero-overlay { background: rgba(14,10,4,0.15); }
  .suite-hero { height: 50vh; }
  .suite-hero-img { height: 50vh; object-fit: cover; object-position: center center; }

  /* Suite gallery — 4-across, deck full width */
  .suite-gallery { grid-template-columns: repeat(4,1fr); }
  .suite-cell.double { grid-column: span 2; }
  .suite-deck-full { grid-column: span 4 !important; }

  /* Property — stack to single col, features 3-col, HIDE photos on tablet */
  .property-grid { grid-template-columns: 1fr; gap: 2rem; }
  .features-list { grid-template-columns: 1fr 1fr 1fr; }
  .property-photos-col { display: none; }

  /* Bedrooms gray space fix — white background */
  .room-block .room-info { background: var(--white); min-height: auto; }

  /* Gallery CTA section — already dark bg, tighten padding */
  #gallery { padding: 2.5rem 0; }
  .gallery-cta-section { padding-bottom: 0.5rem; }

  /* Tighten section padding globally */
  section { padding: 3.5rem 0; }
  #primary-suite { padding: 0; }
}

/* ══════════════════════════════════════════
   V11 — MOBILE (iPhone) OVERRIDES ≤ 768px
══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Overview — hide all images in intro stack, go straight to text */
  .intro-img-stack { display: none; }
  .intro-img-mobile { display: none; }
  .intro-grid { grid-template-columns: 1fr; }

  /* Show iphone-divider-img between Overview and Architecture */
  .iphone-divider-img { display: block; }

  /* iPhone Hero: zoom out first two slides — show more of image */
  .hero-slide:nth-child(1) img { object-fit: cover; object-position: center 70%; transform: scale(0.85); transform-origin: center; }
  .hero-slide:nth-child(2) img { object-fit: cover; object-position: center 60%; transform: scale(0.88); transform-origin: center; }

  /* Tighten gap between hero and Overview */
  #intro { padding-top: 2rem; }

  /* Rooms — copy leads photos (text first, then image) */
  .room-block { display: flex; flex-direction: column; }
  .room-block .room-info { order: 1; padding: 2rem 1.5rem 1.5rem; background: var(--white); }
  .room-block .room-photos { order: 2; }
  .room-block.reverse { direction: ltr; }
  .room-block.reverse .room-info { order: 1; }
  .room-block.reverse .room-photos { order: 2; }

  /* Bedrooms gray space fix */
  .room-block .room-info { min-height: auto; }

  /* Primary Suite — copy above hero */
  .suite-intro-copy { display: block; padding: 2.5rem 1.5rem 1.5rem; }
  .suite-hero-content { display: none; }
  .suite-hero-overlay { display: none; }
  .suite-hero { height: auto; min-height: 0; margin-bottom: 0; padding-bottom: 0; }
  .suite-hero-img { height: 56vw; object-fit: cover; object-position: center center; width: 100%; display: block; }
  #primary-suite { margin-bottom: 0; }

  /* Suite captions — FORCE SHOW on iPhone */
  .suite-cell-caption { opacity: 1 !important; display: block !important; visibility: visible !important; }
  .suite-cell:hover .suite-cell-caption { opacity: 1; }

  /* Suite gallery — Private Deck full width at bottom */
  .suite-gallery { grid-template-columns: 1fr 1fr; }
  .suite-cell.double { grid-column: span 2; }
  .suite-deck-full { grid-column: span 2 !important; height: 260px !important; }

  /* Architecture distinction — swap 3rd image */
  .distinction-desktop-only { display: none !important; }
  .distinction-mobile-only { display: block; }

  /* Property — features single column, hide photos */
  .features-list { grid-template-columns: 1fr; }
  .property-photos-col { display: none; }

  /* iPhone — show inline gallery CTA after features list */
  .iphone-gallery-cta { display: block !important; background: var(--bark); padding: 2rem 1.5rem; margin-top: 1.5rem; }
  .iphone-gallery-cta .gallery-cta-link { color: var(--gold-lt) !important; font-size: 1rem; }
  .iphone-gallery-cta .pdf-style-link { color: var(--gold-lt) !important; font-style: italic; font-family: var(--serif); font-size: 1rem; display: inline-block; margin-top: 0.6rem; border-bottom: 1px solid rgba(232,201,122,0.5); padding-bottom: 0.2rem; }

  /* iPhone — hide standalone gallery section (shown inline instead) */
  section#gallery { display: none; }

  /* iPhone — PDF link styled like gallery CTA */
  .iphone-gallery-cta .pdf-style-link {
    font-family: var(--serif); font-size: 1rem; font-style: italic;
    color: var(--gold-lt); border-bottom: 1px solid rgba(232,201,122,0.4);
    padding-bottom: 0.2rem; display: inline-block; margin-top: 0.5rem;
  }
}

/* ══════════════════════════════════════════
   V9 — SMALL MOBILE ≤ 480px
══════════════════════════════════════════ */
@media (max-width: 480px) {
  .intro-img-mobile { height: 240px; }
  .suite-hero { height: 38vh; min-height: 240px; }
  .suite-deck-full { height: 220px !important; }
}