/* ============================================================
   Vite Residences — stylesheet
   Palette: the building's own deep blue + warm sand.
   No external requests: system font stack, inline SVG icons.
   ============================================================ */

:root {
  --ink:        #0c1329;
  --ink-soft:   #48536e;
  --brand:      #1a3a8f;
  --brand-dk:   #101f4d;
  --brand-mid:  #3557c4;
  --gold:       #c98a2e;
  --gold-soft:  #f0d9a8;
  --sand:       #f6f0e6;
  --cream:      #fffdf8;
  --line:       #e3dccf;
  --white:      #ffffff;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  --wrap: 1140px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(15,31,26,.06), 0 4px 12px rgba(15,31,26,.05);
  --shadow-md: 0 12px 32px rgba(15,31,26,.10);
  --shadow-lg: 0 24px 60px rgba(15,31,26,.16);
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(26,58,143,.12);
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1rem; }
a { color: var(--brand); }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: var(--white);
  padding: .75rem 1.25rem;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap.narrow { max-width: 780px; }

.eyebrow {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-mid);
  margin-bottom: .6rem;
}

.muted { color: var(--ink-soft); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 650;
  font-size: .96rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--brand); color: var(--cream); }
.btn-primary:hover { background: var(--brand-dk); }

.btn-outline {
  background: transparent;
  color: var(--brand);
  border-color: var(--line);
}
.btn-outline:hover { border-color: var(--brand); background: var(--sand); }

.btn-ghost {
  background: rgba(255,253,248,.14);
  color: var(--cream);
  border-color: rgba(255,253,248,.45);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,253,248,.24); }

.btn-lg { padding: 1rem 1.9rem; font-size: 1.02rem; }
.btn-sm { padding: .55rem 1.1rem; font-size: .88rem; }
.btn-block { width: 100%; }

/* ── Header ───────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,253,248,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px rgba(15,31,26,.05);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--brand);
  color: var(--gold-soft);
  font-family: var(--font-head);
  font-size: 1.3rem;
  flex: none;
}

.brand-text { display: grid; line-height: 1.15; }
.brand-text strong { font-family: var(--font-head); font-size: 1.12rem; font-weight: 600; }
.brand-text em { font-style: normal; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: .95rem;
  font-weight: 550;
  position: relative;
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav a:not(.btn):hover { color: var(--brand); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav .btn { color: var(--cream); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.nav-toggle span {
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  color: var(--cream);
  padding: clamp(5rem, 14vw, 9rem) 0 clamp(3.5rem, 8vw, 5.5rem);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(150deg, #1a3a8f 0%, #101f4d 55%, #16295f 100%);
  display: grid;
  place-items: end start;
  padding: 1rem;
}
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
/* Darkens the photo so the headline stays readable over it. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8,14,38,.88) 0%, rgba(8,14,38,.62) 45%, rgba(8,14,38,.42) 100%),
    linear-gradient(to right, rgba(8,14,38,.55), transparent 70%);
}

.photo-tag {
  position: relative;
  z-index: 2;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,253,248,.5);
  border: 1px dashed rgba(255,253,248,.35);
  padding: .3rem .6rem;
  border-radius: 6px;
}
.photo-tag.light { color: rgba(15,31,26,.45); border-color: rgba(15,31,26,.25); }

.hero-inner { max-width: 760px; }
.hero .eyebrow { color: var(--gold-soft); }
.hero h1 { color: var(--cream); }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: rgba(255,253,248,.86);
  max-width: 58ch;
  margin-bottom: 2rem;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 3rem; }

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem;
  list-style: none;
  padding: 1.4rem 0 0;
  margin: 0;
  border-top: 1px solid rgba(255,253,248,.2);
}
.trust-strip li { display: grid; gap: .15rem; }
.trust-strip strong {
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: var(--gold-soft);
  font-weight: 600;
}
.trust-strip span { font-size: .82rem; color: rgba(255,253,248,.72); }

/* ── Sections ─────────────────────────────────────────────── */
.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section-alt { background: var(--sand); }
.section-dark { background: var(--brand-dk); color: var(--cream); }
.section-dark .eyebrow { color: var(--gold-soft); }
.section-dark h2 { color: var(--cream); }

.section-head { max-width: 680px; margin-bottom: 3rem; }
.section-lede { font-size: 1.08rem; color: var(--ink-soft); }
.section-dark .section-lede { color: rgba(255,253,248,.8); }

.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* ── Value cards ──────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.7rem;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-mid); }
.card p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

.icon, .icon-sm {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--sand);
  color: var(--brand);
  margin-bottom: 1.1rem;
}
.icon { width: 46px; height: 46px; }
.icon svg { width: 24px; height: 24px; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 30px; height: 30px; margin: 0; flex: none; }
.icon-sm svg { width: 17px; height: 17px; stroke-linecap: round; stroke-linejoin: round; }

/* ── Guest-type pills ─────────────────────────────────────── */
.pill {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.4rem;
  text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pill:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pill .icon { margin: 0 auto 1rem; background: var(--brand); color: var(--gold-soft); }
.pill h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.pill p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

/* ── Room gallery ─────────────────────────────────────────── */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}
/* Source photos are all portrait — a 4:5 frame crops them far less than 4:3. */
.shot {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #2b56b8, #101f4d);
  overflow: hidden;
}
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* ── Rate table ───────────────────────────────────────────── */
.rate-table {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.rate-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
.rate-table th,
.rate-table td {
  text-align: left;
  padding: .95rem 1.4rem;
  border-bottom: 1px solid var(--line);
}
.rate-table thead th {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
  background: var(--sand);
  border-bottom-color: var(--line);
}
.rate-table tbody tr:last-child th,
.rate-table tbody tr:last-child td { border-bottom: 0; }
.rate-table tbody tr { transition: background .2s; }
.rate-table tbody tr:hover { background: var(--sand); }

.rate-table tbody th {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
}
.rate-table .stay { color: var(--ink-soft); font-size: .93rem; white-space: nowrap; }
.rate-table .rate .per { font-family: var(--font-body); font-size: .82rem; font-weight: 500; color: var(--ink-soft); }

/* The single transient room — set apart so it doesn't read as an eleventh apartment. */
.rate-table .row-transient { background: var(--sand); }
.rate-table .row-transient:hover { background: #efe7d8; }
.rate-table .row-transient th { border-top: 2px solid var(--gold); }
.rate-table .row-transient td { border-top: 2px solid var(--gold); }
.rate-table .tag {
  display: inline-block;
  margin-left: .45rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--gold);
  color: #2a1c05;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.rate-table .rate {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--brand);
  white-space: nowrap;
}
/* Nightly rates are quoted per booking, so this cell opens Messenger instead. */
.rate-table .rate-msg a {
  font-size: .93rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1.5px dashed var(--gold);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.rate-table .rate-msg a:hover { color: var(--brand-dk); border-bottom-color: var(--brand); }

.rate-table .act { text-align: right; }
.rate-table .act a {
  font-size: .87rem;
  font-weight: 650;
  text-decoration: none;
  padding: .4rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  display: inline-block;
  transition: border-color .2s, background .2s;
}
.rate-table .act a:hover { border-color: var(--brand); background: var(--sand); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Move-in terms callout ────────────────────────────────── */
.terms {
  margin-top: 2rem;
  background: var(--brand);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  gap: .4rem;
  justify-items: start;
}
.terms-flag {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--gold);
  color: #2a1c05;
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.terms h3 { color: var(--cream); font-size: 1.4rem; margin-bottom: .2rem; }
.terms p { color: rgba(255,253,248,.85); max-width: 62ch; margin-bottom: 1rem; }
.terms strong { color: var(--gold-soft); }
.terms .btn { background: var(--cream); color: var(--brand); }
.terms .btn:hover { background: #fff; }

.fineprint {
  margin-top: 2rem;
  font-size: .87rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ── Amenities ────────────────────────────────────────────── */
.amen-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}

.amen-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: .1rem 2rem;
}
.amen-list li {
  position: relative;
  padding: .85rem 0 .85rem 1.9rem;
  border-bottom: 1px solid var(--line);
  font-size: .96rem;
}
.amen-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.25em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

/* ── Location ─────────────────────────────────────────────── */
.loc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 4rem);
  align-items: center;
}

.loc-address {
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.6rem;
  color: rgba(255,253,248,.9);
}
.loc-address .muted { color: rgba(255,253,248,.55); font-size: .9rem; }

.loc-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.loc-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid rgba(255,253,248,.14);
  font-size: .96rem;
}
.loc-list em { font-style: normal; color: var(--gold-soft); font-size: .87rem; white-space: nowrap; }

.loc-map {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brand);
  border: 1px solid rgba(255,253,248,.18);
}
.loc-map img { width: 100%; height: 100%; object-fit: cover; }

/* ── Search-intent block ──────────────────────────────────── */
.stay-intent > p {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-bottom: 1.6rem;
}
.stay-intent strong { color: var(--ink); }

.intent-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .9rem;
}
.intent-list li {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  font-size: .96rem;
  color: var(--ink-soft);
}
.intent-list strong {
  display: block;
  color: var(--ink);
  margin-bottom: .15rem;
}

/* ── Testimonials ─────────────────────────────────────────── */
.quote {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.7rem;
  box-shadow: var(--shadow-sm);
}
.stars { color: var(--gold); letter-spacing: .12em; margin-bottom: .8rem; }
.quote blockquote {
  margin: 0 0 1.2rem;
  font-family: var(--font-head);
  font-size: 1.06rem;
  line-height: 1.55;
}
.quote figcaption { font-size: .87rem; font-weight: 650; }
.quote figcaption span { font-weight: 400; color: var(--ink-soft); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq { display: grid; gap: .75rem; }

.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 1.3rem;
  transition: border-color .2s, box-shadow .2s;
}
.faq details[open] { border-color: var(--brand-mid); box-shadow: var(--shadow-sm); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2rem 1.15rem 0;
  font-weight: 650;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 11px; height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding-bottom: 1.2rem; margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* ── CTA / form ───────────────────────────────────────────── */
.cta-section { background: var(--sand); }

.cta-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(2rem, 6vw, 4rem);
  align-items: start;
}

.quick-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }

.btn-messenger { background: #0866ff; color: #fff; }
.btn-messenger:hover { background: #0654d6; }
.btn-messenger svg { width: 19px; height: 19px; stroke-linecap: round; stroke-linejoin: round; }

.contact-list { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .9rem; }
.contact-list li { display: flex; align-items: center; gap: .8rem; font-size: .98rem; }
.contact-list a { font-weight: 600; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
.contact-list em { font-style: normal; font-size: .78rem; color: var(--ink-soft); }

.inquiry-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 1.1rem;
}

.form-title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
}

.field { display: grid; gap: .4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.field label { font-size: .87rem; font-weight: 650; }
.field .opt { font-weight: 400; color: var(--ink-soft); }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 16px; /* never below 16px: iOS zooms the page on focus */
  padding: .75rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
  width: 100%;
  transition: border-color .2s, background .2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--brand-mid); background: var(--white); }
.field textarea { resize: vertical; }

.field.invalid input,
.field.invalid select { border-color: #b3261e; }

.err { margin: 0; font-size: .8rem; color: #b3261e; min-height: 0; }
.err:empty { display: none; }

.form-note { margin: 0; font-size: .8rem; color: var(--ink-soft); text-align: center; }

.form-status { margin: 0; font-size: .92rem; font-weight: 600; color: var(--brand); }
.form-status:empty { display: none; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background: var(--brand-dk);
  color: rgba(255,253,248,.75);
  padding: 3.5rem 0 6rem;
}
.footer-inner { display: grid; gap: 1.8rem; }
.footer-brand { display: flex; align-items: center; gap: .9rem; }
.footer-brand strong { color: var(--cream); font-family: var(--font-head); font-size: 1.15rem; }
.footer-brand p { margin: 0; font-size: .9rem; }

.footer-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer-nav a { color: rgba(255,253,248,.8); text-decoration: none; font-size: .92rem; }
.footer-nav a:hover { color: var(--gold-soft); }

.copyright { margin: 0; font-size: .84rem; color: rgba(255,253,248,.5); }

/* ── Sticky mobile CTA ────────────────────────────────────── */
/* Hidden once the reserve form is on screen — it covers what it points at. */
.sticky-cta.hide { opacity: 0; visibility: hidden; transform: translateY(130%); }

.sticky-cta {
  display: none;
  position: fixed;
  left: 1rem; right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  text-align: center;
  padding: .95rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--cream);
  font-weight: 650;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}

/* ── Reveal on scroll ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .amen-layout,
  .loc-layout,
  .cta-layout { grid-template-columns: 1fr; }
  .loc-map { order: -1; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }

  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: 72px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 1.25rem 1.6rem;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transform: translateY(-120%);
    transition: transform .3s var(--ease);
  }
  .nav.open { transform: translateY(0); }
  .nav a:not(.btn) { padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 1rem; }

  .trust-strip { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .field-row { grid-template-columns: 1fr; }
  /* Hidden once the reserve form is on screen — it covers what it points at. */
.sticky-cta.hide { opacity: 0; visibility: hidden; transform: translateY(130%); }

.sticky-cta { display: block; }
  .site-footer { padding-bottom: 7rem; }
}

@media (max-width: 420px) {
  .hero-cta .btn { width: 100%; }
}

/* Page must not scroll behind the open mobile menu. */
body.nav-open { overflow: hidden; }

/* ── Form components ──────────────────────────────────────── */
.seg-field { border: 0; padding: 0; margin: 0; display: grid; gap: .4rem; }
.seg-field legend { padding: 0; font-size: .87rem; font-weight: 650; }

/* Segmented control — a far bigger tap target than a <select>, and it makes
   the most consequential choice in the form visible at a glance. */
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  padding: .35rem;
  background: var(--sand);
  border: 1.5px solid var(--line);
  border-radius: 12px;
}
.segmented label { position: relative; display: block; }
.segmented input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.segmented span {
  display: block;
  padding: .7rem .5rem;
  border-radius: 9px;
  text-align: center;
  font-size: .94rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.segmented input:checked + span {
  background: var(--brand);
  color: var(--cream);
  box-shadow: var(--shadow-sm);
}
.segmented input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }

.hint { margin: 0; font-size: .78rem; color: var(--ink-soft); }

/* Live totals — confirms what the guest is actually asking for before they send. */
.form-summary {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  font-size: .9rem;
  display: grid;
  gap: .35rem;
}
.form-summary .row { display: flex; justify-content: space-between; gap: 1rem; }
.form-summary .row span:last-child { font-weight: 650; white-space: nowrap; }
.form-summary .total {
  border-top: 1px solid var(--line);
  padding-top: .45rem;
  margin-top: .15rem;
  font-size: .97rem;
}
.form-summary .total span:last-child { color: var(--brand); }
.form-summary .note { color: var(--ink-soft); font-size: .8rem; }

.form-fallback {
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
  display: grid;
  gap: .6rem;
}
.form-fallback p { margin: 0; font-size: .87rem; font-weight: 650; }
.form-fallback textarea {
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
  padding: .75rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--sand);
  color: var(--ink);
  resize: vertical;
}
.fallback-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.fallback-actions .btn { flex: 1 1 auto; }

/* Submit button while the hand-off is in flight. */
.btn[aria-busy="true"] { opacity: .75; pointer-events: none; }

/* ── Touch behaviour ──────────────────────────────────────── */
@media (hover: none) {
  /* Lift-on-hover sticks on touch devices after a tap, so drop it there. */
  .btn:hover,
  .card:hover,
  .pill:hover,
  .unit:hover { transform: none; box-shadow: var(--shadow-sm); }
  .rate-table tbody tr:hover { background: none; }
  .rate-table .row-transient:hover { background: var(--sand); }
}

/* ── Mobile refinements ───────────────────────────────────── */
@media (max-width: 760px) {
  /* Every control clears the 44px minimum touch target. */
  .btn { min-height: 46px; }
  .btn-sm { min-height: 42px; }
  .nav a:not(.btn) { min-height: 48px; display: flex; align-items: center; }

  .hero { padding-top: clamp(3.5rem, 12vw, 5rem); }
  .hero-cta { gap: .6rem; margin-bottom: 2.2rem; }
  .hero-cta .btn { width: 100%; }

  .quick-actions { display: grid; grid-template-columns: 1fr; gap: .6rem; }

  /* Portrait photos stacked three-deep made this section enormous to scroll
     past. Swipeable carousel instead, bleeding to the screen edges. */
  .gallery {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 76%;
    gap: .75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(50% - 50vw);
    padding-inline: 1.25rem;
    padding-bottom: .4rem;
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .shot { scroll-snap-align: center; }

  .site-footer { padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px)); }
}

/* The rate table forced a 520px horizontal scroll on phones. Below this width
   each row becomes its own card instead. */
@media (max-width: 620px) {
  .rate-table {
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  .rate-table table { min-width: 0; display: block; }
  .rate-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .rate-table tbody { display: grid; gap: .7rem; }
  .rate-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .15rem .9rem;
    padding: 1rem 1.1rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }
  .rate-table tbody th,
  .rate-table tbody td { display: block; padding: 0; border: 0; }
  .rate-table tbody th {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.06rem;
    white-space: normal;   /* nowrap here forced the row wider than the screen */
    min-width: 0;
  }
  .rate-table .stay {
    grid-column: 1;
    grid-row: 2;
    font-size: .85rem;
    white-space: normal;
    min-width: 0;
  }
  .rate-table .tag { white-space: nowrap; }
  .rate-table .rate,
  .rate-table .rate-msg { grid-column: 2; grid-row: 1; text-align: right; }
  /* Reserve sits beside the price rather than under it: ten identical
     full-width buttons turned this section into a very long scroll. */
  .rate-table .act {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }
  .rate-table .act a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .35rem .95rem;
    border: 0;
    background: none;
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .rate-table .row-transient {
    background: var(--sand);
    border-color: var(--gold);
    border-width: 1.5px;
  }
  .rate-table .row-transient th,
  .rate-table .row-transient td { border-top: 0; }
}


/* ── Pinch zoom ───────────────────────────────────────────────
   Fixed and sticky elements anchor to the LAYOUT viewport, not the zoomed
   visual one. Left alone while the user is pinched in, the header and the
   floating CTA detach and sit across the middle of the screen. JS sets
   .is-zoomed from the visualViewport scale; here we simply get out of the way. */
body.is-zoomed .sticky-cta { display: none; }

body.is-zoomed .site-header {
  position: static;
  backdrop-filter: none;
  background: var(--cream);
}

body.is-zoomed .nav {
  position: absolute;
  inset: auto 0 auto 0;
}

/* Nothing should ever scroll the page sideways — a stray overflow makes a
   zoomed page pan off into empty space. */
html, body { overflow-x: clip; }

/* ── Motion & print ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .sticky-cta, .hero-media { display: none; }
  body { background: #fff; color: #000; }
}