/* ==========================================================================
   Regard at Med Center — prototype design system
   Palette derived from the logo: brand green #00A98F (confirmed by the
   buttonbgcolor=00a98f parameter in the live site's chat widget). Tokens move
   into the Tailwind config in phase 2.
   ========================================================================== */

:root {
  /* --- Brand --- */
  --brand:        #00a98f;   /* green from the logo. Accents, icons, badges */
  --brand-bright: #16c4a8;   /* hover on dark */
  --brand-deep:   #00594a;   /* dark brand. Buttons, header. 8.5:1 with white */
  --brand-deeper: #00453a;   /* hover */
  --brand-tint:   #e6f7f4;   /* section fill */
  --brand-line:   #b8e5dc;

  /* --- Neutrals --- */
  --ink:       #0d2b25;   /* body text, 15.4:1 on white */
  --ink-muted: #47615a;   /* secondary, 6.9:1 */
  --ink-faint: #6b8079;   /* captions, 4.6:1 */
  --sand:      #f4f7f5;   /* section background */
  --surface:   #ffffff;
  --line:      #e0e7e4;
  --line-strong: #c2cfca;

  /* --- Status --- */
  --ok: #0f7355;  --ok-tint: #e4f4ee;
  --warn: #8a5100; --warn-tint: #fdf2e3;
  --err: #a3231f;

  /* --- CTA: bright brand green + dark text = 5.45:1 --- */
  --cta:      #00a98f;
  --cta-hover:#00c2a4;
  --cta-text: #0b2721;

  /* --- Type. Base 17px (the current site uses 13.3px) --- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-serif, Georgia, "Times New Roman", serif;

  --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-base: 1.0625rem;
  --fs-lg: 1.1875rem; --fs-xl: 1.4375rem; --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem; --fs-4xl: 2.875rem; --fs-5xl: 3.5rem;

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-10: 4rem;
  --sp-12: 5.5rem;

  --radius: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(13,43,37,.08);
  --shadow-md: 0 4px 6px rgba(13,43,37,.05), 0 10px 24px rgba(13,43,37,.09);
  --shadow-lg: 0 12px 24px rgba(13,43,37,.08), 0 24px 56px rgba(13,43,37,.12);

  --container: 1200px; --container-narrow: 760px; --header-h: 76px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body {
  font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.6;
  color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

h1,h2,h3,h4 { line-height:1.15; font-weight:600; letter-spacing:-.02em; text-wrap:balance; }
h1 { font-size: clamp(2rem, 5vw, var(--fs-5xl)); }
h2 { font-size: clamp(1.625rem, 3.5vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { text-wrap: pretty; }
a { color: var(--brand-deep); text-underline-offset: 3px; }
a:hover { color: var(--brand-deeper); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* --- Utilities --- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-4); }
.container-narrow { max-width: var(--container-narrow); }
@media (min-width:768px){ .container { padding-inline: var(--sp-6); } }
.section { padding-block: var(--sp-8); }
@media (min-width:768px){ .section { padding-block: var(--sp-12); } }
.section--sand { background: var(--sand); }
.section--tint { background: var(--brand-tint); }
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.eyebrow { font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-deep); }
.lede { font-size:var(--fs-lg); color:var(--ink-muted); max-width:62ch; }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); font-size: var(--fs-sm); }
.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; }
.skip-link { position:absolute; left:var(--sp-4); top:-100px; z-index:200; background:var(--ink); color:#fff; padding:var(--sp-3) var(--sp-4); border-radius:var(--radius); text-decoration:none; font-weight:600; transition:top .15s; }
.skip-link:focus { top: var(--sp-4); color:#fff; }

/* --- Buttons --- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:.8125rem 1.375rem; min-height:48px;
  border:2px solid transparent; border-radius:var(--radius);
  font-size:var(--fs-base); font-weight:600; line-height:1; text-decoration:none;
  cursor:pointer; transition:background-color .15s, border-color .15s, color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn--accent { background:var(--cta); color:var(--cta-text); }
.btn--accent:hover { background:var(--cta-hover); color:var(--cta-text); }
.btn--primary { background:var(--brand-deep); color:#fff; }
.btn--primary:hover { background:var(--brand-deeper); color:#fff; }
.btn--ghost { background:transparent; color:var(--brand-deep); border-color:var(--line-strong); }
.btn--ghost:hover { background:var(--brand-tint); color:var(--brand-deeper); border-color:var(--brand-deep); }
.btn--onDark { background:#fff; color:var(--brand-deep); }
.btn--onDark:hover { background:var(--sand); color:var(--brand-deeper); }
.btn--outlineDark { background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn--outlineDark:hover { background:rgba(255,255,255,.14); color:#fff; border-color:#fff; }
.btn--sm { padding:.5rem .875rem; min-height:40px; font-size:var(--fs-sm); }
.btn--block { width: 100%; }
.btn-row { display:flex; flex-wrap:wrap; gap:var(--sp-3); }

/* --- Badges --- */
.badge { display:inline-flex; align-items:center; gap:var(--sp-1); padding:.1875rem .5rem; border-radius:var(--radius-pill); font-size:var(--fs-xs); font-weight:600; line-height:1.5; }
.badge--ok { background:var(--ok-tint); color:var(--ok); }
.badge--warn { background:var(--warn-tint); color:var(--warn); }
.badge--neutral { background:var(--sand); color:var(--ink-muted); border:1px solid var(--line); }

/* --- Utility bar: name, address, phone, resident logins -------------------
   Declutters the main row and puts the full NAP high in the markup. */
.topbar { background: var(--brand-deeper); color: rgba(255,255,255,.82); font-size: var(--fs-xs); }
.topbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 40px; }
/* The name shows at almost every width; the descriptor and address are added
   as space allows, so the full NAP is present on desktop and degrades cleanly. */
.topbar__name { display: none; white-space: nowrap; }
@media (min-width: 560px) { .topbar__name { display: block; } }
.topbar__name strong { color: #fff; font-weight: 700; letter-spacing: .01em; }
.topbar__tag { display: none; }
@media (min-width: 1400px) { .topbar__tag { display: inline; } }

.topbar__addr { display: none; align-items: center; gap: var(--sp-2); padding-left: var(--sp-4); margin-left: var(--sp-4); border-left: 1px solid rgba(255,255,255,.22); }
@media (min-width: 1080px) { .topbar__addr { display: flex; } }
.topbar__right { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; }
/* The logins are the most frequent repeat navigation for residents, so they
   live up here. They appear as width allows; on phones they sit in the menu. */
/* Specificity matters: .topbar a sets display:inline-flex (0,1,1) and would
   beat a bare class (0,1,0). Hence the compound selectors. */
.topbar a.topbar__login { display: none; padding-left: var(--sp-4); border-left: 1px solid rgba(255,255,255,.22); }
@media (min-width: 700px) { .topbar a.topbar__login { display: inline-flex; } }
.topbar a.topbar__login--2 { display: none; }
@media (min-width: 940px) { .topbar a.topbar__login--2 { display: inline-flex; } }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: var(--sp-2); }
.topbar a:hover { color: var(--brand); }

/* --- Header: logo left, nav centred, CTA right --- */
.header { position: sticky; top: 0; z-index: 100; background: var(--brand-deep); color: #fff; }
.header__bar { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); }
.brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.brand img { height: 46px; width: auto; }

.nav { display: none; }
@media (min-width: 1100px) {
  .nav { display: flex; flex: 1; justify-content: center; align-items: center; gap: var(--sp-5); }
}
.nav a { text-decoration: none; color: rgba(255,255,255,.9); font-size: var(--fs-sm); font-weight: 500; padding-block: var(--sp-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: #fff; border-bottom-color: var(--brand); }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--brand); font-weight: 600; }

.header__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; margin-left: auto; }
@media (min-width: 1100px) { .header__actions { margin-left: 0; } }
.header__cta { display: none; }
@media (min-width: 768px) { .header__cta { display: inline-flex; } }

.navToggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: none; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius); color: #fff; cursor: pointer; }
@media (min-width: 1100px) { .navToggle { display: none; } }

.mobileNav { display: none; border-top: 1px solid rgba(255,255,255,.18); padding-block: var(--sp-3); }
.mobileNav[data-open="true"] { display: block; }
@media (min-width: 1100px) { .mobileNav { display: none !important; } }
.mobileNav a { display: block; padding: var(--sp-3) 0; text-decoration: none; color: #fff; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.14); }
.mobileNav a:last-of-type { border-bottom: 0; }

/* --- Breadcrumbs --- */
.crumbs { padding-block: var(--sp-4); font-size: var(--fs-sm); }
.crumbs ol { list-style:none; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); }
.crumbs li + li::before { content:"/"; color:var(--ink-faint); margin-right:var(--sp-2); }
.crumbs a { color: var(--ink-muted); }
.crumbs [aria-current="page"] { color:var(--ink); font-weight:500; }

/* --- Media --- */
.media { border-radius:var(--radius); overflow:hidden; background:var(--sand); }
.media--lg { border-radius: var(--radius-lg); }
.media img { width:100%; height:100%; object-fit:cover; display:block; }
.ratio-16x9 { aspect-ratio:16/9; } .ratio-4x3 { aspect-ratio:4/3; }
.ratio-3x2  { aspect-ratio:3/2; }  .ratio-1x1 { aspect-ratio:1/1; }
.ratio-3x4  { aspect-ratio:3/4; }
.planImg { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-4); }
.planImg img { width:100%; height:auto; object-fit:contain; }

/* --- Hero --- */
.hero { background:var(--sand); border-bottom:1px solid var(--line); }
.hero__grid { display:grid; gap:var(--sp-6); padding-block:var(--sp-8); }
@media (min-width:1024px){ .hero__grid { grid-template-columns:1fr 1fr; align-items:center; gap:var(--sp-10); padding-block:var(--sp-12); } }
.hero__title { margin-block: var(--sp-3); }
.hero__meta { display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); font-size:var(--fs-sm); font-weight:600; color:var(--ink-muted); padding-top:var(--sp-4); border-top:1px solid var(--line-strong); margin-top:var(--sp-5); }
.hero__meta strong { color:var(--ink); font-size:var(--fs-base); }

/* --- Fact strip --- */
.facts { background:var(--brand-deep); color:#fff; }
.facts__grid { display:grid; grid-template-columns:repeat(2,1fr); }
@media (min-width:768px){ .facts__grid { grid-template-columns:repeat(4,1fr); } }
.fact { padding:var(--sp-5) var(--sp-4); border-right:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16); }
@media (min-width:768px){ .fact { border-bottom:0; } .fact:last-child { border-right:0; } }
.fact__v { font-size:var(--fs-2xl); font-weight:700; line-height:1.1; letter-spacing:-.02em; color:var(--brand); }
.fact__k { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.8); margin-top:var(--sp-1); }

/* --- Grids --- */
.grid { display:grid; gap:var(--sp-4); }
.grid--2 { grid-template-columns:1fr; }
.grid--3 { grid-template-columns:1fr; }
.grid--4 { grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .grid--2 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .grid--3 { grid-template-columns:repeat(3,1fr); } .grid--4 { grid-template-columns:repeat(4,1fr); } .grid { gap:var(--sp-5); } }
.split { display:grid; gap:var(--sp-6); }
@media (min-width:900px){ .split { grid-template-columns:1fr 1fr; align-items:center; gap:var(--sp-10); } }
@media (min-width:1024px){ .split--sidebar { grid-template-columns:minmax(0,1fr) 380px; align-items:start; } }

/* --- Cards --- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .18s, border-color .18s, transform .18s; }
.card:hover { box-shadow:var(--shadow-md); border-color:var(--brand-line); transform:translateY(-2px); }
.card__media { background:#fff; border-bottom:1px solid var(--line); padding:var(--sp-4); }
.card__media img { width:100%; height:180px; object-fit:contain; }
.card__photo img { width:100%; height:200px; object-fit:cover; }
.card__body { padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); flex:1; }
.card__head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); }
.card__title { font-size:var(--fs-xl); }
.card__title a { text-decoration:none; color:inherit; }
.card__title a:hover { color:var(--brand-deep); }
.card__sub { font-size:var(--fs-sm); color:var(--ink-faint); font-style:italic; }
.card__specs { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); font-size:var(--fs-sm); color:var(--ink-muted); }
.card__specs li + li { padding-left:var(--sp-3); border-left:1px solid var(--line); }
.card__price { font-size:var(--fs-xl); font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.card__price span { font-size:var(--fs-sm); font-weight:500; color:var(--ink-faint); }
.card__foot { margin-top:auto; padding-top:var(--sp-3); display:flex; gap:var(--sp-2); align-items:center; }

.segment { display:block; padding:var(--sp-5); background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--radius); text-decoration:none; color:inherit; transition:box-shadow .18s, transform .18s; }
.segment:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); color:inherit; }
.segment h3 { margin-bottom:var(--sp-2); color:var(--brand-deep); }
.segment__link { display:inline-block; margin-top:var(--sp-3); font-weight:600; font-size:var(--fs-sm); color:var(--brand-deep); }

/* --- Lists --- */
.amenities { list-style:none; padding:0; display:grid; gap:var(--sp-3); grid-template-columns:1fr; }
@media (min-width:640px){ .amenities { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .amenities--3 { grid-template-columns:repeat(3,1fr); } }
.amenities li { display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); font-size:var(--fs-sm); }
.amenities svg { flex:none; margin-top:2px; color:var(--brand); }

.commute { list-style:none; padding:0; }
.commute li { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) 0; border-bottom:1px solid var(--line); }
.commute li:last-child { border-bottom:0; }
.commute__name { font-weight:600; flex:1; }
.commute__mode { font-size:var(--fs-sm); color:var(--ink-faint); font-weight:400; }
.commute__time { font-variant-numeric:tabular-nums; font-weight:700; color:var(--brand-deep); background:var(--brand-tint); padding:var(--sp-1) var(--sp-3); border-radius:var(--radius-pill); font-size:var(--fs-sm); white-space:nowrap; }

/* --- Filters --- */
.filters { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-5); box-shadow:var(--shadow-sm); }
.filters__row { display:grid; gap:var(--sp-4); grid-template-columns:1fr; }
@media (min-width:640px){ .filters__row { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .filters__row { grid-template-columns:repeat(4,1fr); } }
.filters__foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--line); }

/* --- Forms --- */
.field { display:flex; flex-direction:column; gap:var(--sp-2); }
.field label { font-size:var(--fs-sm); font-weight:600; }
.field .hint { font-size:var(--fs-xs); color:var(--ink-faint); font-weight:400; }
.field input, .field select, .field textarea { width:100%; padding:.6875rem .875rem; min-height:48px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); font-size:var(--fs-base); }
.field textarea { min-height:120px; resize:vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color:var(--ink-faint); }
.field [aria-invalid="true"] { border-color:var(--err); border-width:2px; }
.field .err { font-size:var(--fs-sm); color:var(--err); font-weight:600; display:none; }
.field [aria-invalid="true"] ~ .err { display:block; }
.choices { display:grid; gap:var(--sp-3); grid-template-columns:1fr; }
@media (min-width:640px){ .choices { grid-template-columns:repeat(3,1fr); } }
.choice { position:relative; }
.choice input { position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer; }
.choice span { display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-4); border:2px solid var(--line-strong); border-radius:var(--radius); font-weight:600; cursor:pointer; transition:border-color .15s, background-color .15s; }
.choice small { font-weight:400; font-size:var(--fs-sm); color:var(--ink-muted); }
.choice input:checked + span { border-color:var(--brand); background:var(--brand-tint); }
.choice input:focus-visible + span { outline:3px solid var(--brand); outline-offset:2px; }

/* --- Tables --- */
.tableWrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
table.units { width:100%; border-collapse:collapse; min-width:720px; font-size:var(--fs-sm); }
table.units th, table.units td { padding:var(--sp-4); text-align:left; border-bottom:1px solid var(--line); }
table.units thead th { background:var(--sand); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); white-space:nowrap; }
table.units tbody tr:last-child td { border-bottom:0; }
table.units tbody tr:hover { background:var(--brand-tint); }
table.units .num { font-variant-numeric:tabular-nums; font-weight:600; }

/* --- FAQ --- */
.faq { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-5) 0; font-weight:600; font-size:var(--fs-lg); cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:var(--fs-2xl); font-weight:300; color:var(--brand-deep); line-height:1; flex:none; }
.faq details[open] summary::after { content:"–"; }
.faq details > div { padding-bottom:var(--sp-5); color:var(--ink-muted); max-width:72ch; }

/* --- Gallery --- */
.galleryTabs { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.galleryTabs a { padding:var(--sp-2) var(--sp-4); border:1px solid var(--line-strong); border-radius:var(--radius-pill); text-decoration:none; font-size:var(--fs-sm); font-weight:600; color:var(--ink-muted); }
.galleryTabs a:hover { border-color:var(--brand-deep); color:var(--brand-deep); }
.galleryTabs a[aria-current="page"] { background:var(--brand-deep); border-color:var(--brand-deep); color:#fff; }
.masonry { display:grid; gap:var(--sp-4); grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .masonry { grid-template-columns:repeat(3,1fr); } }
.masonry figure { margin:0; }
.masonry figcaption { font-size:var(--fs-sm); color:var(--ink-muted); margin-top:var(--sp-2); }

/* --- CTA --- */
.cta { background:var(--brand-deep); color:#fff; border-radius:var(--radius-lg); padding:var(--sp-8) var(--sp-5); text-align:center; }
.cta h2 { color:#fff; }
.cta p { color:rgba(255,255,255,.88); max-width:56ch; margin-inline:auto; }
.cta .btn-row { justify-content:center; margin-top:var(--sp-5); }

/* --- Prose --- */
.prose { max-width:68ch; }
.prose > * + * { margin-top:var(--sp-4); }
.prose h2 { margin-top:var(--sp-8); font-size:var(--fs-2xl); }
.prose h3 { margin-top:var(--sp-6); }
.prose ul, .prose ol { padding-left:var(--sp-5); }
.prose li + li { margin-top:var(--sp-2); }
.toc { background:var(--sand); border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-5); }
.toc ol { padding-left:var(--sp-5); }
.callout { background:var(--warn-tint); border-left:4px solid var(--warn); padding:var(--sp-4) var(--sp-5); border-radius:0 var(--radius) var(--radius) 0; }
.note { background:var(--brand-tint); border-left:4px solid var(--brand); padding:var(--sp-4) var(--sp-5); border-radius:0 var(--radius) var(--radius) 0; }

/* --- Footer --- */
.footer { background:var(--ink); color:rgba(255,255,255,.75); padding-block:var(--sp-8) var(--sp-6); margin-top:var(--sp-10); }
.footer__grid { display:grid; gap:var(--sp-6); grid-template-columns:1fr; }
@media (min-width:700px){ .footer__grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .footer__grid { grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--sp-8); } }
.footer h2, .footer h3 { color:#fff; font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.1em; margin-bottom:var(--sp-4); }
.footer ul { list-style:none; padding:0; }
.footer li + li { margin-top:var(--sp-3); }
.footer a { color:rgba(255,255,255,.8); text-decoration:none; font-size:var(--fs-sm); }
.footer a:hover { color:var(--brand); text-decoration:underline; }
.footer img.logo { height:52px; width:auto; }
.footer__legal { margin-top:var(--sp-8); padding-top:var(--sp-5); border-top:1px solid rgba(255,255,255,.16); display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5); align-items:center; font-size:var(--fs-xs); color:rgba(255,255,255,.6); }
.eho { display:flex; align-items:center; gap:var(--sp-2); }

/* --- Mobile sticky CTA --- */
.stickyCta { position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; gap:var(--sp-2); padding:var(--sp-3); background:rgba(255,255,255,.97); backdrop-filter:blur(8px); border-top:1px solid var(--line); box-shadow:0 -4px 16px rgba(13,43,37,.08); }
.stickyCta .btn { flex:1; }
@media (min-width:768px){ .stickyCta { display:none; } }
@media (max-width:767px){ body { padding-bottom:84px; } }

/* --- Blog feature card: full width, photo on the left -------------------
   Previously the feature sat in a column beside two cards and was shorter than
   them, leaving a gap underneath. Going horizontal removes the ragged edge. */
.card--feature { margin: 0; }
.card--feature .card__photo img { height: 100%; min-height: 260px; }
.card--feature .card__body { padding: var(--sp-6); justify-content: center; }
@media (min-width: 900px) {
  .card--feature { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  .card--feature .card__photo { height: 100%; }
  .card--feature .card__photo img { height: 100%; min-height: 340px; }
  .card--feature .card__body { padding: var(--sp-8); }
}
.card__photo { display: block; }

/* --- Compact choice grid + sticky form action bar ------------------------
   16 stacked full-width checkboxes pushed the submit button far below the
   fold. Three columns cut the height, and the action bar keeps "send" and a
   live count reachable from anywhere in the list. */
.choices--compact { grid-template-columns: 1fr; gap: var(--sp-2); }
@media (min-width: 640px) { .choices--compact { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .choices--compact { grid-template-columns: repeat(3, 1fr); } }
.choices--compact .choice span { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); gap: 2px; }
.choices--compact .choice small { font-size: var(--fs-xs); }

.formBar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-6);
  padding: var(--sp-4); background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.formBar__count { font-weight: 600; font-size: var(--fs-sm); color: var(--ink-muted); }
.formBar .btn { flex: none; }
@media (max-width: 767px) { .formBar { bottom: 84px; } }


/* --- Agave mark ----------------------------------------------------------
   The fan from the logo, redrawn as vector. The current site uses it only as
   a raster tile in the footer; here it recolours with currentColor, scales
   cleanly and is placed differently per page so the branding reads as a
   system rather than a repeated sticker. No extra HTTP request. */
.agave { color: var(--brand); flex: none; width: 26px; height: 22px; }

/* Section divider: mark centred between two hairlines. */
.markRow { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-block: var(--sp-8) var(--sp-6); }
.markRow::before, .markRow::after { content: ""; height: 1px; flex: 1; max-width: 150px; background: var(--line); }
.markRow .agave { width: 34px; height: 29px; }

/* Inline accent beside an eyebrow. */
.eyebrow--mark { display: inline-flex; align-items: center; gap: var(--sp-2); }
.eyebrow--mark .agave { width: 17px; height: 15px; }

/* Large watermark, used sparingly. */
.agave--watermark {
  position: absolute; right: var(--sp-5); bottom: var(--sp-5);
  width: 150px; height: 127px; color: var(--brand); opacity: .12; pointer-events: none;
}

/* --- Hero: darkened photo carrying the logo ----------------------------- */
.heroMedia { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); }
.heroMedia > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.heroMedia::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(13,43,37,.28) 0%, rgba(13,43,37,.62) 100%);
}
.heroMedia__logo {
  position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(56%, 200px); height: auto; opacity: .95;
  filter: drop-shadow(0 4px 22px rgba(0,0,0,.5));
}

/* --- Footer texture ----------------------------------------------------- */
.footer { position: relative; overflow: hidden; }
.footer__pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g fill='none' stroke='%23ffffff' stroke-width='1.1' stroke-linecap='round'><g transform='translate(12.0 8.0) scale(1.00)'><path d='M12.0 22.0Q6.7 20.4 0.1 19.0'/><path d='M12.0 22.0Q6.3 18.3 -0.1 15.2'/><path d='M12.0 22.0Q6.7 16.1 1.1 11.3'/><path d='M12.0 22.0Q7.9 14.2 3.7 7.9'/><path d='M12.0 22.0Q9.8 12.9 7.5 5.4'/><path d='M12.0 22.0Q12.0 12.4 12.0 4.5'/><path d='M12.0 22.0Q14.2 12.9 16.5 5.4'/><path d='M12.0 22.0Q16.1 14.2 20.3 7.9'/><path d='M12.0 22.0Q17.3 16.1 22.9 11.3'/><path d='M12.0 22.0Q17.7 18.3 24.1 15.2'/><path d='M12.0 22.0Q17.3 20.4 23.9 19.0'/></g><g transform='translate(60.0 56.0) scale(1.00) rotate(180 12 12)'><path d='M12.0 22.0Q6.7 20.4 0.1 19.0'/><path d='M12.0 22.0Q6.3 18.3 -0.1 15.2'/><path d='M12.0 22.0Q6.7 16.1 1.1 11.3'/><path d='M12.0 22.0Q7.9 14.2 3.7 7.9'/><path d='M12.0 22.0Q9.8 12.9 7.5 5.4'/><path d='M12.0 22.0Q12.0 12.4 12.0 4.5'/><path d='M12.0 22.0Q14.2 12.9 16.5 5.4'/><path d='M12.0 22.0Q16.1 14.2 20.3 7.9'/><path d='M12.0 22.0Q17.3 16.1 22.9 11.3'/><path d='M12.0 22.0Q17.7 18.3 24.1 15.2'/><path d='M12.0 22.0Q17.3 20.4 23.9 19.0'/></g></g></svg>");
  background-size: 166px 166px; background-repeat: repeat;
}
.footer > .container { position: relative; z-index: 1; }

/* --- Lifestyle band ------------------------------------------------------
   The current site runs these three photos as an 800px auto-rotating hero,
   which is a large part of why it paints in 6.5s — and slides two and three
   are rarely seen. Only three exist on the CDN, so all three show at once. */
.lifeband { position: relative; background: var(--ink); }
.lifeband__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.lifeband__grid img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1 / 1; opacity: .55; }
@media (min-width: 768px) { .lifeband__grid img { aspect-ratio: 4 / 3; } }
.lifeband__words {
  position: absolute; inset: 0; z-index: 1; margin: 0; padding: var(--sp-5);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-3) var(--sp-5); text-align: center; pointer-events: none;
}
.lifeband__words span {
  color: #fff; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; text-transform: uppercase;
  font-size: clamp(1.375rem, 4.5vw, 3rem); text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.lifeband__words i { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex: none; }

/* --- Front desk widget ---------------------------------------------------
   Desktop only: on phones the sticky bottom bar already carries call and
   tour, and two floating controls would fight each other. */
.frontDesk { display: none; }
@media (min-width: 768px) {
  .frontDesk { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 95; display: flex; align-items: center; gap: var(--sp-3); }
}
.frontDesk__actions { display: flex; align-items: center; gap: var(--sp-3); }
.frontDesk__actions[hidden] { display: none; }
.frontDesk__btn, .frontDesk__bell {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff;
  background: var(--brand); color: var(--cta-text); cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-md); transition: background-color .15s, transform .12s;
}
.frontDesk__bell { width: 60px; height: 60px; }
.frontDesk__btn:hover, .frontDesk__bell:hover { background: var(--cta-hover); color: var(--cta-text); transform: translateY(-2px); }
.frontDesk__bell[aria-expanded="true"] { background: var(--brand-deep); color: #fff; }

/* --- Decorative mark in light sections -----------------------------------
   One per page, corner varying by page. Kept very faint so it reads as
   watermarked stationery rather than an illustration competing with copy. */
.decor { position: absolute; z-index: 0; pointer-events: none; color: var(--brand); opacity: .10; }
.decor .agave { width: 170px; height: 144px; }
.decor--tr { top: var(--sp-5); right: var(--sp-5); }
.decor--bl { bottom: var(--sp-5); left: var(--sp-5); transform: rotate(180deg); }
@media (max-width: 900px) { .decor { display: none; } }
.section--sand > .container, .section--tint > .container { position: relative; z-index: 1; }

/* --- Map facade ----------------------------------------------------------
   A Google Maps iframe costs over a megabyte of script and sets cookies on
   load. On a page whose job is the contact form that is a poor trade, so the
   map loads on request. */
.mapFacade { position: relative; margin: 0; }
.mapFacade img, .mapFacade iframe { display: block; width: 100%; height: 100%; border: 0; }
.mapFacade img { object-fit: cover; }
.mapFacade__btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.mapFacade__note {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0;
  padding: var(--sp-2) var(--sp-4); text-align: center;
  background: rgba(13,43,37,.72); color: rgba(255,255,255,.9);
}
.mapFacade[data-loaded] .mapFacade__btn, .mapFacade[data-loaded] .mapFacade__note { display: none; }
.mapFacade[data-loaded] { aspect-ratio: 2 / 1; }

/* --- Pagination ----------------------------------------------------------
   Only rendered once a category outgrows one page. */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-8); }
.pager__n, .pager__cur {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--sp-2); border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
}
.pager__n { color: var(--brand-deep); border: 1px solid var(--line-strong); }
.pager__n:hover { background: var(--brand-tint); border-color: var(--brand-deep); }
.pager__cur { background: var(--brand-deep); color: #fff; }

/* --- Blog hub category blocks -------------------------------------------
   Three posts per topic with a route into the full listing, so the hub stays
   the same length whether there are fourteen posts or four hundred. */
.catBlock + .catBlock { margin-top: var(--sp-10); padding-top: var(--sp-8); border-top: 1px solid var(--line); }
.catBlock__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.catBlock__head h2 { font-size: var(--fs-2xl); }

/* --- Language switch -----------------------------------------------------
   Sits in the main row between the nav and the tour button, where it reads as
   navigation rather than as another utility-bar detail. */
.langSwitch {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
.langSwitch a { color: rgba(255,255,255,.72); text-decoration: none; padding: var(--sp-2) var(--sp-1); }
.langSwitch a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
/* The active locale is a span, not a link — it should not offer to take you
   where you already are, and screen readers get aria-current instead. */
.langSwitch [aria-current] { color: #fff; padding: var(--sp-2) var(--sp-1); }
.langSwitch i { color: rgba(255,255,255,.35); font-style: normal; }
.langSwitch:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }

/* The review index has no nav, and it is the nav that pushes the actions to
   the right in the main header. Without this the button sits against the logo. */
.header--simple .header__actions { margin-left: auto; }