/* Home page of titasguesthouse.com (Nov 10, 2026, Ruben's mix of three trial directions): a sunlit photo stage with a small
   see-through availability calendar, alternating apartment rows, large counting review numbers. Class names starting with
   a- and d- come from the trial pages. The other pages use site.css plus titas.css.
   Linen ground, navy ink, indigo only for actions and links, lavender for one band, brass ticks, navy footer.
   Figtree only. Phone first; the desktop layout starts at 900px. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/figtree-latin-wght-normal.woff2") format("woff2"); }

:root {
  --paper: #f6f5f1;
  --card: #ffffff;
  --ink: #1b1b30;
  --navy: #1a173b;
  --muted: #55566a;
  --line: #dcdad2;
  --accent: #130a8f;
  --accent-hover: #0c0666;
  --accent-ink: #ffffff;
  --link: #130a8f;
  --tint: #e9e7f3;
  --brass: #c4913a;
  --deep: #1a173b;
  --on-deep: #f1f0f7;
  --veil: 250, 249, 246;
  --veil-ink: #1a173b;
  --head-solid: rgba(246, 245, 241, .96);
  --shadow: 0 1px 2px rgba(26, 23, 59, .06), 0 18px 48px -12px rgba(26, 23, 59, .28);
  --cal-free: #dcefe3; --cal-free-ink: #1f5a39;
  --cal-maybe: #fbe7c3; --cal-maybe-ink: #7a4f0a;
  --cal-booked: #f3d4cf; --cal-booked-ink: #8a2a1e;
  --cal-past: #8a8c9c;
  --photo-filter: none;
  --show-light: block; --show-dark: none;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head-h: 82px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #13132a; --card: #1c1c38; --ink: #ebe9f2; --navy: #ebe9f2; --muted: #a9a8c0; --line: #2f2f4d;
    --accent: #f6f5f1; --accent-hover: #ffffff; --accent-ink: #130a8f; --link: #e8c27a; --tint: #1b1a3a; --brass: #e8c27a;
    --deep: #0c0c22; --veil: 19, 19, 42; --veil-ink: #f1f0f7; --head-solid: rgba(19, 19, 42, .96);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 48px -12px rgba(0, 0, 0, .6);
    --cal-free: #1f4a33; --cal-free-ink: #bfe6cc; --cal-maybe: #5a3f0e; --cal-maybe-ink: #f6d99a; --cal-booked: #5a241c; --cal-booked-ink: #f3c0b6; --cal-past: #8c8ca3;
    --photo-filter: brightness(.93);
    --show-light: none; --show-dark: block; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #13132a; --card: #1c1c38; --ink: #ebe9f2; --navy: #ebe9f2; --muted: #a9a8c0; --line: #2f2f4d;
  --accent: #f6f5f1; --accent-hover: #ffffff; --accent-ink: #130a8f; --link: #e8c27a; --tint: #1b1a3a; --brass: #e8c27a;
  --deep: #0c0c22; --veil: 19, 19, 42; --veil-ink: #f1f0f7; --head-solid: rgba(19, 19, 42, .96);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 48px -12px rgba(0, 0, 0, .6);
  --cal-free: #1f4a33; --cal-free-ink: #bfe6cc; --cal-maybe: #5a3f0e; --cal-maybe-ink: #f6d99a; --cal-booked: #5a241c; --cal-booked-ink: #f3c0b6; --cal-past: #8c8ca3;
  --photo-filter: brightness(.93);
  --show-light: none; --show-dark: block; color-scheme: dark;
}
.only-light { display: var(--show-light); }
.only-dark { display: var(--show-dark); }
[hidden] { display: none !important; }
/* Dark mode: the navy veil keeps full strength on every photo, and the header band is a little denser. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .a-veil { opacity: 1; --veil-top: .74; } }
:root[data-theme="dark"] .a-veil { opacity: 1; --veil-top: .74; }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.125rem/1.6 var(--font); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-weight: 600; margin: 0; text-wrap: balance; color: var(--navy); }
p, li { text-wrap: pretty; }
p { margin: 0 0 1em; }
a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 16px; }
.a-wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }

.a-skip { position: absolute; left: -999px; top: 8px; z-index: 30; background: var(--card); color: var(--ink); padding: 10px 14px; border-radius: 8px; }
.a-skip:focus { left: 12px; }

/* Buttons */
.a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 1.0625rem/1.1 var(--font); text-decoration: none; border: 1.5px solid transparent; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.a-btn:hover { background: var(--accent-hover); text-decoration: none; }
.a-btn-quiet { background: rgba(255, 255, 255, .94); color: #1a173b; border-color: rgba(26, 23, 59, .12); }
.a-btn-quiet:hover { background: #fff; border-color: #1a173b; }
.a-btn-line { background: transparent; color: var(--ink); border-color: currentColor; }
.a-btn-line:hover { background: var(--ink); color: var(--paper); }
.a-wa-icon { width: 20px; height: 20px; flex: none; color: #1c9e4b; }
.a-btn-line:hover .a-wa-icon { color: inherit; }

/* Header: lies on the photo, solid linen once the page scrolls. Scrolls away on phones, stays on screens 900px and wider. */
.a-head { position: absolute; inset: 0 0 auto; z-index: 20; color: var(--veil-ink); transition: background-color .3s ease, box-shadow .3s ease; }
.a-head-row { width: min(1200px, 100% - 32px); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; min-height: var(--head-h); padding: 8px 0; }
.a-logo { display: block; }
.a-logo img { height: 64px; width: auto; transition: height .3s ease; }
.a-tools { display: flex; align-items: center; gap: 8px; }
.a-theme { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, currentColor 28%, transparent); background: rgba(var(--veil), .7); color: inherit; cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.a-theme:hover { border-color: currentColor; }
.a-theme svg { width: 20px; height: 20px; }
.a-theme .sun { display: var(--show-dark); }
.a-theme .moon { display: var(--show-light); }
.a-menu { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; border: 1.5px solid currentColor; background: rgba(var(--veil), .7); color: inherit; font: 600 1rem var(--font); cursor: pointer; }
.a-menu span { width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.a-nav { display: none; width: 100%; flex-direction: column; padding: 4px 0 16px; }
.a-nav.open { display: flex; }
.a-nav a { color: inherit; text-decoration: none; font-weight: 600; font-size: 1.15rem; padding: 10px 0; }
.a-nav a.a-nav-cta { align-self: flex-start; margin-top: 8px; padding: 12px 22px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.a-head:has(.a-nav.open) { background: var(--paper); box-shadow: 0 10px 30px -10px rgba(26, 23, 59, .3); }

/* The opening: photo stage, availability card, trust facts. One grid, placed per breakpoint. */
.a-top { display: grid; grid-template-columns: 16px minmax(0, 1fr) 16px; grid-template-rows: var(--head-h) auto 1fr auto auto auto auto auto; }
.a-stage { display: contents; }
.a-photos { grid-column: 1 / -1; grid-row: 1 / 5; position: relative; overflow: hidden; min-height: max(62vh, 470px); min-height: max(62svh, 470px); background: #dfe3e6; isolation: isolate; }
.a-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease-in-out; }
.a-slide.is-on { opacity: 1; }
.a-slide img { --z: var(--z-m, 1.06); --origin: var(--origin-m, 50% 50%); width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-m, center); transform: scale(var(--z)); transform-origin: var(--origin); filter: var(--photo-filter); will-change: transform; }
.a-slide.is-on img, .a-slide.is-leaving img { animation: a-drift 9s linear both; }
.a-stage.is-paused .a-slide img { animation-play-state: paused; }
@keyframes a-drift { from { transform: scale(var(--z)) translate3d(0, 0, 0); } to { transform: scale(calc(var(--z) + .1)) translate3d(var(--dx, -1.5%), var(--dy, -1%), 0); } }
.a-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--veil-o, 1); transition: opacity 1.6s ease-in-out;
  background: linear-gradient(to bottom, rgba(var(--veil), .9) 0%, rgba(var(--veil), .84) 34%, rgba(var(--veil), .5) 50%, rgba(var(--veil), 0) 64%); }

.a-h1 { grid-column: 2; grid-row: 2; z-index: 3; color: var(--veil-ink); font-size: clamp(2.35rem, 1.2rem + 4.2vw, 5.25rem); line-height: 1.02; letter-spacing: -0.035em; max-width: 14ch; padding-top: 6px; }
.a-lead { grid-column: 2; grid-row: 7; margin: 40px 0 0; font-size: 1.25rem; line-height: 1.5; color: var(--ink); max-width: 44ch; }
.a-actions { grid-column: 2; grid-row: 4; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 16px; }
.a-stage .a-actions .a-btn { flex: 1 1 auto; padding: 0 12px; font-size: 1rem; gap: 7px; white-space: nowrap; }
@media (min-width: 360px) { .a-stage .a-actions { flex-wrap: nowrap; } }
.a-pill { grid-column: 2; grid-row: 5; justify-self: start; z-index: 3; display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0 -6px; padding: 2px 0; color: var(--muted); font-size: .875rem; font-weight: 600; line-height: 1.2; max-width: 100%; }
.a-pill:not(:has(.a-pause:not([hidden]))) { padding-left: 6px; min-height: 44px; }
.a-pause { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; padding: 0; position: relative; }
.a-pause::after { content: ""; position: absolute; inset: -4px; }
.a-pause:hover { background: rgba(26, 23, 59, .08); }
.a-pause svg { width: 18px; height: 18px; }
.a-pause .i-play, .a-pause[aria-pressed="true"] .i-pause { display: none; }
.a-pause[aria-pressed="true"] .i-play { display: block; }
.a-cap { transition: opacity .6s ease; }
.a-cap.is-swapping { opacity: 0; }

/* Availability card */
.a-card { display: flex; flex-direction: column; grid-column: 2; grid-row: 6; z-index: 4; margin-top: 8px; background: var(--card); border-radius: 22px; padding: 22px 14px 18px; box-shadow: var(--shadow); }
.a-card h2 { font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.02em; padding: 0 6px; }
.a-card-sub { margin: 6px 0 4px; padding: 0 6px; color: var(--muted); font-size: 1rem; }
.a-card > .cal-hint { order: 1; margin: 0 0 14px; }
.a-card > .home-cal, .a-card > .cal-legend, .a-card > .pick-list, .a-card > .pick-none { order: 2; }
.home-cal { margin: 0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 0 2px; }
.cal-head h3 { font-size: 1.15rem; letter-spacing: -0.01em; text-align: center; flex: 1; }
.cal-nav { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--ink); font-size: 0; cursor: pointer; display: grid; place-items: center; padding: 0; transition: background-color .15s ease, border-color .15s ease; }
.cal-nav::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.cal-nav[data-next]::before { transform: scaleX(-1); }
.cal-nav:hover:not(:disabled) { border-color: var(--ink); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: auto; gap: 3px; }
.cal-wd { text-align: center; font-size: .78rem; font-weight: 600; color: var(--muted); padding: 2px 0 4px; }
.cal-day { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; user-select: none; }
.cal-day.free { background: var(--cal-free); color: var(--cal-free-ink); }
.cal-day.maybe { background: var(--cal-maybe); color: var(--cal-maybe-ink); }
.cal-day.booked { background: var(--cal-booked); color: var(--cal-booked-ink); text-decoration: line-through; text-decoration-thickness: 1px; }
.cal-day.past { color: var(--cal-past); font-weight: 500; }
.cal-day[data-date]:not(.booked) { cursor: pointer; transition: box-shadow .12s ease; }
.cal-day[data-date]:not(.booked):hover { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day.sel-start, .cal-day.sel-end { background: var(--accent); color: var(--accent-ink); text-decoration: none; }
.cal-day.in-range { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day:focus-visible { outline-offset: 1px; }
.cal-hint { margin: 14px 0 0; padding: 0 6px; font-weight: 600; font-size: 1rem; color: var(--ink); }
.cal-legend { list-style: none; margin: 12px 0 0; padding: 0 6px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .875rem; color: var(--muted); }
.cal-legend li { display: inline-flex; align-items: center; gap: 7px; }
.a-key { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.a-key.free { background: var(--cal-free); box-shadow: inset 0 0 0 1px var(--cal-free-ink); }
.a-key.maybe { background: var(--cal-maybe); box-shadow: inset 0 0 0 1px var(--cal-maybe-ink); }
.a-key.booked { background: var(--cal-booked); box-shadow: inset 0 0 0 1px var(--cal-booked-ink); }
.pick-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.pick-list li[data-state="maybe"] { order: 2; }
.pick-list a { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; padding: 8px; border-radius: 14px; border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s ease; }
.pick-list a:hover, .pick-list a:focus-visible { border-color: var(--accent); }
.pick-list img { width: 88px; height: 66px; object-fit: cover; border-radius: 9px; }
.pick-list b { display: block; font-size: 1.02rem; line-height: 1.25; }
.pick-text > span { display: block; font-size: .9rem; color: var(--muted); line-height: 1.35; }
.pick-list em { display: block; font-style: normal; font-weight: 600; font-size: .9rem; color: var(--cal-free-ink); margin-top: 2px; }
.pick-list li[data-state="maybe"] em { color: var(--cal-maybe-ink); }
.pick-none { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--cal-booked); color: var(--cal-booked-ink); font-weight: 600; font-size: 1rem; }
.pick-none a { color: inherit; }

/* Trust facts: a quiet strip with brass ticks. */
.a-facts { grid-column: 2; grid-row: 8; list-style: none; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr; gap: 12px 32px; font-size: 1.0625rem; font-weight: 500; }
.a-facts li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.4; }
.a-facts li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: .1em; background: var(--brass); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.flags { display: inline-flex; gap: 7px; align-items: center; vertical-align: middle; margin-left: 4px; }
.flags svg { width: 24px; height: 17px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14); }

/* Sections */
.a-section { padding: clamp(80px, 11vw, 148px) 0; }
.a-section h2 { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem); line-height: 1.04; letter-spacing: -0.03em; }
.a-head-block { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.a-sub { margin: 18px 0 0; font-size: 1.25rem; line-height: 1.5; color: var(--muted); max-width: 52ch; }

/* Apartments: large photo cards */
.a-apts { display: grid; gap: 56px 32px; grid-template-columns: 1fr; }
.a-apt { position: relative; display: flex; flex-direction: column; }
.a-apt-photo { position: relative; border-radius: 18px; overflow: hidden; background: var(--tint); }
.a-apt-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.a-apt:hover .a-apt-photo img { transform: scale(1.025); }
.a-apt-body { padding: 22px 2px 0; }
.a-apt h3 { font-size: 1.75rem; line-height: 1.12; letter-spacing: -0.02em; margin: 6px 0 4px; }
.a-apt h3 a { color: var(--navy); text-decoration: none; }
.a-apt h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.a-apt h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.a-meta { color: var(--muted); margin: 0 0 12px; font-size: 1.0625rem; }
.a-sum { margin: 0 0 16px; max-width: 46ch; }
.a-avail { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; margin: 0; font-size: .95rem; font-weight: 600; color: var(--ink); }
.a-avail::before { content: ""; width: 10px; height: 10px; margin-top: .42em; border-radius: 50%; flex: none; }
.a-avail.free::before { background: #2f8f5b; }
.a-avail.maybe::before { background: #d9962b; }
.a-avail.booked::before { background: #c0392b; }
.a-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.a-chips li { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: .875rem; font-weight: 500; color: var(--ink); }
.slide-btn { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; border: 0; background: rgba(250, 249, 246, .94); color: #1a173b; display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); opacity: .92; transition: opacity .2s ease, background-color .2s ease; }
.slide-btn:hover { background: #fff; opacity: 1; }
.slide-btn svg { width: 22px; height: 22px; }
.slide-btn.prev { left: 12px; }
.slide-btn.next { right: 12px; }
.slide-count { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(26, 23, 59, .72); color: #fff; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Family */
.a-family { padding-top: 0; }
.a-family-grid { display: grid; gap: 40px; }
.a-family-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 18px; }
.a-family-text p { font-size: 1.25rem; line-height: 1.6; max-width: 40ch; margin: 22px 0 0; }
.a-sign { height: 76px; width: auto; margin: 22px 0 26px; }
.a-sign.only-light { display: var(--show-light); }
.a-sign.only-dark { display: var(--show-dark); }

/* Review: the facade lavender band */
.a-review { background: var(--tint); }
.a-quote { margin: 0; }
.a-quote blockquote { margin: 0; }
.a-quote p { margin: 0; font-size: clamp(2rem, 1.1rem + 3.4vw, 4.25rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; color: var(--navy); max-width: 22ch; text-wrap: balance; }
.a-quote figcaption { margin-top: 22px; font-size: 1.125rem; color: var(--muted); }
.a-review-foot { margin-top: clamp(40px, 6vw, 72px); padding-top: 26px; border-top: 1px solid rgba(26, 23, 59, .14); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.a-numbers { margin: 0; font-size: 1.25rem; line-height: 1.5; max-width: 62ch; }
.a-num { white-space: nowrap; }
.a-num { font-weight: 700; font-size: 2em; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Boris (wording unchanged), on navy */
.a-boris { background: var(--deep); color: var(--on-deep); }
.a-boris h2 { color: #fff; font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); }
.a-boris-grid { display: grid; gap: 40px; align-items: center; }
.a-boris-grid p { margin: 18px 0 0; max-width: 54ch; }
.a-boris a:not(.store-btn) { color: #fff; }
.a-boris-banner { display: block; border-radius: 18px; overflow: hidden; background: #f3f2ee; }
.a-boris-banner img { width: 100%; }
.a-store { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.store-btn { display: inline-grid; align-content: center; min-height: 56px; line-height: 1.1; background: #0b0b14; color: #fff; border: 1.5px solid #5d5d70; border-radius: 12px; padding: 8px 18px 9px 16px; text-decoration: none; font-weight: 600; font-size: 1.15rem; }
.store-btn small { font-size: .75rem; font-weight: 500; opacity: .85; }
.store-btn:hover { background: #000; border-color: #9a9ab0; }
.a-boris :focus-visible { outline-color: #fff; }
.a-boris-more { font-size: 1rem; }

/* Plan a stay: closing band on linen */
.a-plan-grid { display: grid; gap: 32px; align-items: end; }
.a-plan h2 { font-size: clamp(2.4rem, 1.2rem + 4.2vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; max-width: 12ch; }
.a-actions-plain { padding: 0; margin-top: 30px; }
.a-plan-rth { margin: 0; font-size: 1.125rem; color: var(--muted); max-width: 40ch; }

/* Footer: navy, as today */
.a-foot { background: var(--deep); color: var(--on-deep); font-size: 1rem; }
.a-foot a { color: #fff; }
.a-foot :focus-visible { outline-color: #fff; }
.a-foot-grid { display: grid; gap: 32px; padding: 56px 0 36px; grid-template-columns: 1fr; }
.a-foot-logo { height: 112px; width: auto; margin-bottom: 14px; }
.a-foot p { opacity: .88; margin: 0; }
.a-foot-h { font-size: 1.0625rem; color: #fff; margin-bottom: 8px; letter-spacing: 0; }
.a-foot-list { list-style: none; margin: 0; padding: 0; }
.a-foot-list a { display: inline-block; padding: 7px 0; text-decoration: none; }
.a-foot-list a:hover { text-decoration: underline; }
.social { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.social a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; text-decoration: none; font-weight: 500; }
.social a:hover { text-decoration: underline; }
.social svg { width: 20px; height: 20px; }
.a-foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 20px 0 28px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .9rem; }
.a-legal { display: flex; flex-wrap: wrap; gap: 0 18px; }
.a-legal a { display: inline-block; padding: 6px 0; }

/* Tablet: two columns where they fit */
@media (min-width: 640px) {
  .a-facts { grid-template-columns: 1fr 1fr; }
  .a-stage .a-actions .a-btn { flex: 0 0 auto; }
  .a-card { padding: 26px 22px 22px; }
}

/* Desktop */
@media (min-width: 900px) {
  :root { --head-h: 104px; }
  [id] { scroll-margin-top: 96px; }
  .a-head { position: fixed; }
  .a-js .a-head:not(.is-solid) { background: transparent; }
  .a-head { background: var(--head-solid); }
  .a-head.is-solid { box-shadow: 0 1px 0 var(--line), 0 12px 32px -18px rgba(26, 23, 59, .35); color: var(--ink); }
  .a-head-row { flex-wrap: nowrap; padding: 12px 0; }
  .a-logo img { height: 80px; }
  .a-head.is-solid .a-head-row { min-height: 76px; padding: 6px 0; }
  .a-head.is-solid .a-logo img { height: 60px; }
  .a-menu { display: none; }
  .a-tools { order: 3; }
  .a-nav { order: 2; display: flex; flex-direction: row; align-items: center; width: auto; margin-left: auto; gap: 2px 26px; padding: 0; }
  .a-nav a { font-size: 1.0625rem; padding: 8px 0; border-bottom: 2px solid transparent; }
  .a-nav a:hover { border-bottom-color: currentColor; }
  .a-nav a.a-nav-cta { margin: 0 0 0 4px; padding: 11px 20px; border: 0; }
  .a-nav a.a-nav-cta:hover { background: var(--accent-hover); }

  .a-top { grid-template-columns: minmax(32px, 1fr) minmax(0, calc(min(1200px, 100vw - 64px) - 456px)) 48px 408px minmax(32px, 1fr); grid-template-rows: var(--head-h) auto auto auto 1fr auto auto; }
  .a-photos { grid-row: 1 / 7; min-height: clamp(580px, 72vh, 880px); }
  .a-slide img { object-position: var(--pos, center); --z: 1.06; --origin: 50% 50%; }
  .a-veil { background:
      linear-gradient(to bottom, rgba(var(--veil), var(--veil-top, .6)) 0, rgba(var(--veil), 0) 120px),
      radial-gradient(ellipse 52% 74% at 0% 40%, rgba(var(--veil), .9) 0%, rgba(var(--veil), .8) 45%, rgba(var(--veil), .32) 75%, rgba(var(--veil), 0) 100%); }
  .a-h1 { grid-column: 2 / 4; grid-row: 2; padding-top: clamp(16px, 4vh, 48px); max-width: 13.5ch; }
  .a-lead { grid-column: 2; grid-row: 3; z-index: 3; margin: 26px 0 0; font-size: 1.25rem; max-width: 39ch; color: var(--veil-ink); }
  .a-actions { grid-row: 4; padding: 30px 0 0; gap: 12px; }
  .a-stage .a-actions .a-btn { padding: 0 24px; font-size: 1.0625rem; gap: 10px; }
  .a-stage .a-btn[data-a-jump] { display: none; }
  .a-pill { grid-row: 6; align-self: end; margin: 48px 0 16px -6px; padding: 0; color: var(--veil-ink); font-size: .8125rem; text-shadow: 0 0 12px rgba(var(--veil), .95), 0 0 3px rgba(var(--veil), .95); }
  .a-pill:not(:has(.a-pause:not([hidden]))) { padding-left: 6px; min-height: 36px; }
  .a-card { grid-column: 4; grid-row: 7; margin-top: -372px; align-self: start; padding: 24px 24px 20px; }
  .a-facts { grid-column: 2; grid-row: 7; align-self: start; margin: 0; padding: 30px 0 0; border-top: 0; grid-template-columns: 1fr 1fr; gap: 14px 36px; max-width: 700px; }

  .a-family-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 112px); align-items: center; }
  .a-boris-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .a-plan-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; }
  .a-foot-grid { grid-template-columns: 1.2fr 1fr 1fr; padding-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .a-slide { transition: none; }
  .a-slide img { animation: none; transform: none; }
  .a-apt-photo img, .a-head, .a-logo img, .a-cap { transition: none; }
}

/* Lead designer pass (Nov 10, 2026): centered chevrons, readable photo caption. */
.cal-nav { position: relative; }
.cal-nav::before { position: absolute; inset: 0; margin: auto; }
@media (min-width: 900px) {
  .a-pill { background: rgba(var(--veil), .8); border-radius: 10px; padding: 0 12px 0 0; text-shadow: none; }
  .a-pill:not(:has(.a-pause:not([hidden]))) { padding-left: 12px; }
}

/* ---------- Ruben's mix (Nov 10, 2026) ---------- */

/* Every link and button answers the mouse. */
a { transition: color .15s ease, background-color .15s ease; }
main a:not(.a-btn):not(.store-btn):not(.a-boris-banner):hover { background: color-mix(in srgb, var(--link) 12%, transparent); border-radius: 4px; text-decoration-thickness: 2px; }
.a-apt h3 a:hover, .d-apt h3 a:hover, .pick-list a:hover { background: none; }
.a-logo { transition: opacity .15s ease; }
.a-logo:hover { opacity: .72; }
.a-foot a:hover, .a-boris a:not(.store-btn):hover { color: #e8c27a; text-decoration: underline; text-decoration-thickness: 2px; }
.a-btn { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.a-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(26, 23, 59, .5); }
.a-boris-banner { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.a-boris-banner:hover { transform: scale(1.02); }
.a-family-photo { display: block; overflow: hidden; border-radius: 18px; }
.a-family-photo img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.a-family-photo:hover img { transform: scale(1.03); }

/* Apartments as alternating full width rows: larger photos, and a direct way to the request. */
.d-apts-section { padding-bottom: clamp(64px, 9vw, 120px); }
.d-apt { position: relative; margin: 0 0 56px; }
.d-apt:last-child { margin-bottom: 0; }
.d-apt-photo { position: relative; overflow: hidden; background: var(--tint); }
.d-apt-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.d-apt:hover .d-apt-photo img { transform: scale(1.03); }
.d-apt-body { padding: 22px 16px 0; }
.d-apt h3 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 6px; }
.d-apt h3 a { color: var(--navy); text-decoration: none; }
.d-apt h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.d-apt h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.d-apt .a-meta { margin-bottom: 8px; }
.d-apt .a-avail { margin-bottom: 14px; }
.d-apt-cta { position: relative; z-index: 2; margin-top: 22px; }
@media (min-width: 900px) {
  .d-apt { display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); align-items: center; margin-bottom: 96px; }
  .d-apt-photo img { aspect-ratio: 16 / 11; }
  .d-apt-photo { border-radius: 0 24px 24px 0; }
  .d-apt-body { padding: 0 max(40px, calc(50vw - 600px)) 0 56px; }
  .d-apt:nth-of-type(even) { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
  .d-apt:nth-of-type(even) .d-apt-photo { order: 2; border-radius: 24px 0 0 24px; }
  .d-apt:nth-of-type(even) .d-apt-body { order: 1; padding: 0 56px 0 max(40px, calc(50vw - 600px)); }
}

/* Reviews: large numbers that count slowly, the quote beside them in equal halves. Labels sit on the bottom line of their number (last baseline), also when a label wraps. */
.d-review-grid { display: grid; gap: clamp(40px, 6vw, 88px); align-items: center; }
@media (min-width: 1040px) { .d-review-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }
.d-tally { margin: 0; color: var(--navy); display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(14px, 2vw, 28px); row-gap: clamp(6px, 1vw, 14px); align-items: end; align-items: last baseline; align-content: start; }
.d-line { display: contents; }
.d-num { display: block; font-weight: 700; font-size: clamp(3rem, 1.6rem + 5vw, 5.75rem); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.d-num span { display: inline-block; }
.d-words { font-size: clamp(1.2rem, .9rem + .85vw, 1.75rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.d-words span { font-variant-numeric: tabular-nums; }
.d-asof { grid-column: 1 / -1; margin-top: 14px; font-size: .95rem; color: var(--muted); }
.d-quote p { font-size: clamp(1.9rem, 1rem + 2.9vw, 3.3rem); line-height: 1.12; max-width: 20ch; }
.d-quote figcaption { margin: 16px 0 22px; }
/* Wide screens: both halves are the same height. The quote starts level with the first number, the button ends level with the last line on the left. */
@media (min-width: 1040px) {
  .d-quote { display: flex; flex-direction: column; align-items: flex-start; }
  .d-quote .a-btn { margin-top: auto; }
  .d-tally { grid-template-rows: auto auto auto 1fr; }
  .d-asof { align-self: end; }
}

/* Desktop with a mouse: the calendar is a small, slightly see-through card that sits on the photo. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .a-card { grid-column: 4; grid-row: 2 / 7; align-self: end; justify-self: end; width: 272px; margin: 0 0 28px; padding: 16px 14px 14px; border-radius: 18px;
    background: color-mix(in srgb, var(--card) 56%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); transition: width .3s ease; }
  .a-card h2 { font-size: 1.2rem; padding: 0 4px; }
  .a-card-sub { font-size: .8125rem; margin: 3px 0 2px; padding: 0 4px; color: var(--ink); }
  .a-card > .cal-hint { font-size: .8125rem; margin: 0 0 8px; padding: 0 4px; }
  .cal-head { margin-bottom: 4px; }
  .cal-head h3 { font-size: .95rem; }
  .cal-nav { width: 32px; height: 32px; }
  .cal-nav::before { width: 16px; height: 16px; }
  .cal-grid { gap: 2px; }
  .cal-wd { font-size: .68rem; padding: 0 0 2px; }
  .cal-day { font-size: .8125rem; border-radius: 7px; }
  .cal-legend { font-size: .72rem; gap: 2px 10px; margin-top: 8px; padding: 0 4px; color: var(--ink); }
  .a-key { width: 10px; height: 10px; border-radius: 3px; }
  .pick-list { margin-top: 10px; gap: 6px; }
  .pick-list a { grid-template-columns: 64px 1fr; gap: 10px; padding: 6px; border-radius: 10px; background: var(--card); }
  .pick-list img { width: 64px; height: 48px; border-radius: 6px; }
  .pick-list b { font-size: .92rem; }
  .pick-text > span, .pick-list em { font-size: .8rem; }
  .pick-none { font-size: .875rem; padding: 10px 12px; margin-top: 10px; }
  .a-facts { grid-column: 2 / 5; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .a-slide.is-on img, .a-slide.is-leaving img { animation: none; }
  .d-apt-photo img, .a-family-photo img, .a-boris-banner, .a-btn, a { transition: none; }
  .a-btn:hover, .a-boris-banner:hover { transform: none; }
}

/* Photo controls: back, pause or play, forward. */
.a-pill { gap: 2px; }
.a-pill .a-cap { margin-left: 8px; }
.a-pause svg { width: 18px; height: 18px; }
.a-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 900px) { .a-pill { padding: 2px 14px 2px 4px; } }

/* The calendar explains itself (Ruben, Nov 10, 2026): one word as the heading, no instruction lines.
   The status line stays in the page for screen readers only. */
.a-card h2 { font-size: 2rem; margin-bottom: 12px; }
.a-card > .cal-hint { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.d-choose { display: none; order: 2; margin: 14px 0 0; padding: 0 6px; font-weight: 700; font-size: 1.0625rem; color: var(--navy); }
.a-card:has(.pick-list:not([hidden]) li:not([hidden]) ~ li:not([hidden])) .d-choose { display: block; }
.d-choose + .pick-list { margin-top: 8px; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .a-card h2 { font-size: 1.5rem; margin-bottom: 8px; padding: 0 4px; }
  .a-card > .cal-hint { margin: 0; padding: 0; }
  .d-choose { font-size: .875rem; margin-top: 10px; padding: 0 4px; }
  .d-choose + .pick-list { margin-top: 6px; }
}

/* The small calendar hangs from the top of the photo, so its days stay put when the apartment list opens below it. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .a-card { align-self: end; margin: 0 0 28px; }
}

/* The apartment list. In the large card (phones, touch screens) it follows the calendar. Under the small card it
   opens as its own panel, so the calendar keeps its place at the bottom of the photo and the days do not move. */
.d-drop { order: 2; }
.d-drop .pick-list { margin-top: 8px; }
.d-drop .d-choose { display: none; }
.a-card:has(.pick-list:not([hidden]) li:not([hidden]) ~ li:not([hidden])) .d-choose { display: block; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .a-card { position: relative; }
  .d-drop { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 348px; z-index: 5; padding: 12px; border-radius: 18px;
    background: color-mix(in srgb, var(--card) 90%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: var(--shadow); }
  .a-card:has(.pick-list:not([hidden])) .d-drop, .a-card:has(.pick-none:not([hidden])) .d-drop { display: block; }
  .d-drop .d-choose { margin: 0 0 8px; padding: 0 2px; font-size: .9375rem; }
  .d-drop .pick-list { margin-top: 0; }
  .d-drop .pick-none { margin-top: 0; }
}

/* A stay with an apartment change: one Agree button under the two apartments. */
.d-agree { width: 100%; margin-top: 12px; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { .d-agree { min-height: 44px; margin-top: 10px; font-size: 1rem; } }
.a-card.is-split .pick-list a { cursor: default; }