/* ============================================
   Royal Westmount — custom styles (fonts, red foil,
   reveals, carousels, lightbox)
   ============================================ */

:root {
  --red-foil: linear-gradient(135deg, #8b0000 0%, #c41e3a 25%, #dc143c 50%, #c41e3a 75%, #8b0000 100%);
  --red-foil-text: linear-gradient(135deg, #8b0000 0%, #c41e3a 20%, #ff4d6d 40%, #ff6b8a 50%, #ff4d6d 60%, #c41e3a 80%, #8b0000 100%);

  /* Height of the fixed #main-nav: the crest (h-20, h-28 from md up) plus its
     py-2. Anything that has to stay clear of the nav — the sticky floor-plan
     column, in-page anchor targets — measures off this, so changing the nav's
     padding or crest size is a one-line edit here instead of a hunt. */
  --nav-h: 96px;
}
@media (min-width: 768px) {
  :root {
    --nav-h: 128px;
  }
}

/* Jumping to an in-page anchor (#gallery, #contact, #intro …) would otherwise
   park the target underneath the fixed nav. */
[id] {
  scroll-margin-top: calc(var(--nav-h) + 20px);
}

/* Fonts: body = Cormorant Garamond, headings = Playfair Display,
   .font-serif (the display face used across the site) = Object Sans */
body {
  font-family: "Cormorant Garamond", serif;
  background-color: #fff;
  color: #171717;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", serif;
  font-weight: 700;
}
.font-serif {
  font-family: "Object Sans", "Archivo", sans-serif !important;
}

/* Red foil shimmer */
@keyframes shimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
/* Shimmer animation removed site-wide (2026-08-18): the sliding gradient read
   as flashing text. The foil gradients are now static. */
.text-red-foil,
.hover\:text-red-foil:hover {
  background-image: var(--red-foil-text);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bg-red-foil {
  background-image: var(--red-foil);
  background-size: 200% 200%;
}
/* hover:bg-[#8B0000] must beat .bg-red-foil's gradient */
.hover\:bg-\[\#8B0000\]:hover {
  background-image: none;
}
.accent-red-foil {
  background: var(--red-foil);
}
/* Static red-foil text: keeps the gradient fill but stops the shimmer pulse */
.no-shimmer {
  animation: none;
}

/* Scroll-reveal (framer-motion equivalent) */
[data-reveal] {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-50px); }
[data-reveal="right"] { transform: translateX(50px); }
[data-reveal="left-lg"]  { transform: translateX(-100px); transition-duration: 1s; }
[data-reveal="right-lg"] { transform: translateX(100px); transition-duration: 1s; }
[data-reveal="up-sm"] { transform: translateY(30px); transition-duration: 0.6s; }
[data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* Nav slide-down on load */
@keyframes navIn {
  from { transform: translateY(-100px); }
  to   { transform: translateY(0); }
}
.nav-animate {
  animation: navIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Hero scroll chevron bounce + fade-in */
@keyframes bounceY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}
.chevron-bounce { animation: bounceY 2s ease-in-out infinite; }

/* Scroll cue only shows when there is vertical room for it between the CTAs
   and the stat bar; on short windows the stat bar is the scroll hint */
#scroll-cue { display: none; }
@media (min-height: 640px) {
  #scroll-cue { display: flex; }
}

/* Hero scroll cue — ringed arrow with soft pulsing halo */
.scroll-ring {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: bounceY 2.4s ease-in-out infinite;
}
.scroll-ring::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(255, 77, 109, 0.6);
  animation: haloPulse 2.4s ease-out infinite;
}
@keyframes haloPulse {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in-late { opacity: 0; animation: fadeIn 1s ease 1.5s forwards; }

/* Hero content: staggered fade-up on load */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-fade > * { opacity: 0; animation: heroUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.hero-fade > *:nth-child(1) { animation-delay: 0.2s; }
.hero-fade > *:nth-child(2) { animation-delay: 0.35s; }
.hero-fade > *:nth-child(3) { animation-delay: 0.5s; }
.hero-fade > *:nth-child(4) { animation-delay: 0.65s; }

/* Fade carousel (living spaces / residence amenities) */
.fade-carousel .fc-slide {
  transition: opacity 1s ease;
  opacity: 0;
}
.fade-carousel .fc-slide.active { opacity: 1; }

/* Condos hero slider (slick fade equivalent) */
.hero-slider .hs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.hero-slider .hs-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slider .hs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
  padding: 8px;
}
.hero-slider .hs-arrow:hover { color: #fff; }
.hero-slider .hs-prev { left: 12px; }
.hero-slider .hs-next { right: 12px; }

/* Slide-up entrance for slider captions */
.hero-slider .hs-slide .hs-caption {
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
}
.hero-slider .hs-slide.active .hs-caption {
  transform: translateY(0);
  opacity: 1;
}
/* Plan slides (listings carousel) — suites without photography yet show
   their illustrated floor plan pinned like a drafting sheet on the dark hero.
   Desktop: sheet on the right, caption kept to the left half. Phones: the plan
   becomes a dimmed full-bleed backdrop under the usual caption. */
.hero-slider .hs-plan {
  position: absolute;
  inset: 0;
  background: #141414;
}
.hero-slider .hs-plan img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  filter: grayscale(0.3);
}
.hero-slider .hs-plan-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.25));
}
.hero-slider .hs-plan-tag {
  display: none;
}
@media (min-width: 768px) {
  .hero-slider .hs-plan {
    background: #141414 radial-gradient(ellipse at 72% 45%, rgba(255, 255, 255, 0.07), transparent 62%);
  }
  .hero-slider .hs-plan img {
    inset: auto;
    top: 8%;
    right: 6%;
    height: 84%;
    width: auto;
    max-width: 46%;
    object-fit: contain;
    opacity: 1;
    filter: none;
    background: #fff;
    padding: 1%;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  }
  .hero-slider .hs-plan-shade {
    display: none;
  }
  .hero-slider .hs-plan-tag {
    display: block;
    position: absolute;
    top: calc(8% - 1.6rem);
    right: 6%;
    font-family: "Object Sans", "Archivo", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
  }
  .hero-slider .hs-plan-slide .hs-caption {
    max-width: 48%;
  }
}

/* Gallery lightbox (residence pages) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
}
.lightbox button {
  position: absolute;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
  padding: 12px;
}
.lightbox button:hover { color: #fff; }
.lightbox .lb-close { top: 16px; right: 16px; }
.lightbox .lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 8px; top: 50%; transform: translateY(-50%); }

/* Register widget slide-in */
@keyframes slideInRight {
  from { transform: translateX(400px); }
  to   { transform: translateX(0); }
}
.register-widget.visible { animation: slideInRight 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) both; }

/* Mobile menu dropdown entrance */
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.menu-drop { animation: dropIn 0.3s ease both; }

/* Fullscreen mobile overlay entrance (home) */
@keyframes overlayIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
.menu-overlay { animation: overlayIn 0.35s ease both; }

html { scroll-behavior: smooth; }

/* Never allow sideways scroll/wiggle (clip, not hidden, so position:sticky
   keeps working) */
html, body { overflow-x: clip; }

/* JS-toggled visibility. Deliberately NOT Tailwind's .hidden — that class
   participates in responsive patterns like "hidden md:flex" which an
   !important override would break. */
.ip-hidden { display: none !important; }

/* Availability badge. Driven by `available: true|false` on each entry in
   IP.residences (js/data.js) — flip that one flag and every surface follows.
   Written as bespoke CSS rather than Tailwind utilities so marking a suite
   leased never needs a tailwind.css rebuild. Both variants are tuned for the
   dark surfaces they sit on (condo card header, residence hero, stat band). */
.avail {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.avail::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: currentColor;
  flex: none;
}
.avail-yes {
  color: #6ee7a8;
  border-color: rgba(110, 231, 168, 0.4);
  background: rgba(110, 231, 168, 0.12);
}
.avail-no {
  color: #f26d82;
  border-color: rgba(242, 109, 130, 0.45);
  background: rgba(242, 109, 130, 0.12);
}
/* Light-surface variants — sibling cards on the residence page sit on white. */
.avail-yes-light {
  color: #157347;
  border-color: rgba(21, 115, 71, 0.3);
  background: rgba(21, 115, 71, 0.08);
}
.avail-no-light {
  color: #c41e3a;
  border-color: rgba(196, 30, 58, 0.3);
  background: rgba(196, 30, 58, 0.08);
}

/* Gemstone wash — each suite is named for a stone, and its colour bleeds out
   of the top-left of the card header. The hex lives on the residence as `gem`
   (js/data.js) and arrives as the --gem custom property. Deliberately outside
   Tailwind so adding a suite never needs a tailwind.css rebuild. */
.gem-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--gem, transparent) 0%, transparent 62%);
  opacity: 0.55;
  pointer-events: none;
}

/* Suite names take on their gemstone. A lifted tint of --gem (set on the card's
   gem-wash panel, or inline on the hero title) keeps the name legible over the
   dark tinted panel; plain white is the fallback for browsers without color-mix. */
.gem-name {
  color: #ffffff;
  color: color-mix(in srgb, var(--gem, #ffffff) 70%, white 30%);
}

/* Dialable phone numbers. Inherits the surrounding colour so wrapping a number
   in `tel:` changes nothing visually — it only makes it tappable, which is the
   point on a phone. One class so every number on the site behaves the same. */
.tel-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
  /* Grow the touch target to ~40px without moving anything: the padding is
     cancelled by an equal negative margin, so the text sits exactly where it
     did while the tappable box extends above and below it. */
  display: inline-block;
  padding: 0.6rem 0;
  margin: -0.6rem 0;
}
.tel-link:hover,
.tel-link:focus-visible {
  color: #ef4444;
}

/* ============================================
   Drafting sheet — residence (apartment) detail layout
   --------------------------------------------
   An architect's drafting-sheet treatment for the unit pages: a title band
   with a bordered key strip, then a sticky floor plan on paper beside a
   column of spec cards, closed by a photo strip. Palette and type are the
   site's own (Playfair display, Archivo labels, crimson accent) — only the
   layout is borrowed. Everything is namespaced .ds-* so it cannot leak into
   the Tailwind pages.
   ============================================ */
/* Drafting-sheet palette. Lives on :root, not .ds, so the lower sections of the
   residence page and the zoom viewer read the same tokens instead of
   re-declaring the hex values. */
:root {
  --ds-ground: #ecebe9;
  --ds-card: #f8f8f6;
  --ds-sheet: #ffffff;
  --ds-ink: #171717;
  --ds-ink2: #3f3f46;
  /* Darkened from #78716c (2026-08-20): every small label on the sheet
     reads from this token and they were all scraping AA at ~4.8:1. This
     lands near 7:1 while staying clearly secondary to --ds-ink. */
  --ds-mute: #57534e;
  --ds-line: rgba(23, 23, 23, 0.16);
  --ds-line2: rgba(23, 23, 23, 0.075);
  --ds-accent: #c41e3a;
  /* Availability semantics on the drafting sheet: green = available,
     accent red = leased. Matches the .avail badge pair used elsewhere. */
  --ds-ok: #157347;
}
.ds {
  background: var(--ds-ground);
  color: var(--ds-ink);
}

/* The technical-drawing label voice: Archivo, small, widely tracked. Used for
   every annotation on the sheet so the page reads as one instrument. */
.ds-label {
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ds-mute);
  line-height: 1.4;
}

/* ---- Title band ---- */
.ds-band {
  background: var(--ds-sheet);
  border-bottom: 1px solid var(--ds-line);
  padding: 34px 24px;
}
.ds-bandin {
  max-width: 1340px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
}
.ds-bandin h1 {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0.35rem 0 0;
}
.ds-bandin h1 em {
  font-style: italic;
}

/* Key figures, in a single bordered rail like a title block. */
.ds-keys {
  display: flex;
  border: 1px solid var(--ds-line);
}
.ds-keys > div {
  padding: 12px 22px;
  border-right: 1px solid var(--ds-line);
  text-align: center;
}
.ds-keys > div:last-child {
  border-right: 0;
}
.ds-keys .n {
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  display: block;
  color: var(--ds-ink);
  white-space: nowrap;
}
.ds-keys .n.open {
  color: var(--ds-ok);
}
.ds-keys .n.leased {
  color: var(--ds-accent);
}
.ds-keys .l {
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-mute);
  white-space: nowrap;
}

/* ---- Plan + specs ---- */
.ds-main {
  max-width: 1340px;
  margin: 0 auto;
  padding: 24px 24px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 400px;
  gap: 40px;
  align-items: start;
}
/* Parks below the fixed nav, not under it — a bare `top: 24px` pinned the sheet
   into the nav's own strip and clipped the top of the drawing while the spec
   column scrolled past. */
.ds-sheetbox {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
/* The sheet itself: white paper over a faint 34px drafting grid, with the
   plan multiplied onto it so the grid reads through the drawing. */
.ds-plan {
  background: var(--ds-sheet);
  border: 1px solid var(--ds-line);
  position: relative;
}
.ds-plan::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ds-line2) 1px, transparent 1px),
    linear-gradient(90deg, var(--ds-line2) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.55;
}
/* File tabs along the paper's top edge — the unit page carries two sheets
   (illustrated and dimensioned) and this reads as flipping between them in a
   drawing set rather than as a generic image switcher. */
.ds-tabs {
  display: flex;
  gap: 0;
}
.ds-tabs button {
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 13px 26px;
  cursor: pointer;
  font-weight: 500;
  color: var(--ds-mute);
  background: #efeeec;
  border: 1px solid var(--ds-line);
  border-bottom: 0;
  margin-right: 4px;
  position: relative;
  transition: background 0.2s, color 0.2s;
}
.ds-tabs button:hover {
  color: var(--ds-ink);
}
.ds-tabs button.on {
  background: var(--ds-sheet);
  color: var(--ds-ink);
  z-index: 2;
  /* Covers the sheet's own top border so the active tab joins the paper. */
  box-shadow: 0 1px 0 0 var(--ds-sheet);
}
.ds-tabs button.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--ds-accent);
}

/* The drawing area is a FIXED height with the plan contained inside it. The
   illustrated plans are landscape and the dimensioned ones portrait, so a
   shrink-to-fit box would lurch by hundreds of pixels every time the visitor
   switches tabs. Fixing the paper keeps the page still and lets the drafting
   grid read as margin around the drawing. */
.ds-paper {
  position: relative;
  z-index: 1;
  height: 410px;
  padding: 20px;
}
.ds-paper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.ds-hide {
  display: none !important;
}

/* Placeholder shown on the dimensioned tab until that unit's
   `floorPlanTechnical` asset exists. Deliberately looks like a drawing that
   has not been issued yet, not like a broken image. */
.ds-pending {
  height: 100%;
  border: 1px dashed var(--ds-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
}
.ds-pending p {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--ds-ink2);
  margin: 0;
}
.ds-pending-mark,
.ds-pending-sub {
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ds-mute);
}
.ds-pending-mark {
  border: 1px solid var(--ds-line);
  padding: 6px 12px;
  color: var(--ds-accent);
}
/* Compass / street annotations pinned to the sheet corners. */
.ds-expo {
  position: absolute;
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ds-accent);
  z-index: 1;
}
/* Title block along the bottom edge of the sheet. */
.ds-stamp {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--ds-line);
  padding: 12px 18px;
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-mute);
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
}

/* ---- Spec cards ---- */
.ds-card {
  background: var(--ds-card);
  border: 1px solid var(--ds-line);
  padding: 26px;
  margin-bottom: 18px;
}
/* The trailing margin on the final card pushed the spec column's box 18px past
   the last card's visible border, so the sticky plan sheet — which aligns to
   that box — came to rest 18px below the card edge instead of level with it. */
.ds-card:last-child {
  margin-bottom: 0;
}
.ds-card h2 {
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ds-mute);
  margin: 0 0 16px;
}
.ds-card p {
  margin: 0;
  font-size: 1.02rem;
  color: var(--ds-ink2);
}
.ds-price {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ds-ink);
}
.ds-price span {
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ds-mute);
}
.ds-note {
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ds-mute);
  margin-top: 10px;
}

/* Two-column spec rows: label left, figure right in the label voice. */
.ds-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.02rem;
}
.ds-spec td {
  padding: 11px 0;
  border-bottom: 1px solid var(--ds-line2);
  vertical-align: top;
  color: var(--ds-ink2);
}
.ds-spec tr:last-child td {
  border-bottom: 0;
}
.ds-spec td:last-child {
  text-align: right;
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--ds-ink);
}
.ds-spec td:last-child.open {
  color: var(--ds-ok);
}
.ds-spec td:last-child.leased {
  color: var(--ds-accent);
}

/* Feature list — checked rows in the same rhythm as the spec table. */
.ds-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.02rem;
}
.ds-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ds-line2);
  color: var(--ds-ink2);
}
.ds-list li:last-child {
  border-bottom: 0;
}
.ds-list svg {
  flex: none;
  margin-top: 4px;
  color: var(--ds-accent);
}

/* Stack of floors, drawn bottom-up the way the building actually stacks. */
.ds-stack {
  display: flex;
  flex-direction: column-reverse;
  margin: 0;
  padding: 0;
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
}
.ds-stack li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ds-line2);
}
.ds-stack .fl {
  width: 34px;
  color: var(--ds-mute);
}
.ds-stack .un {
  letter-spacing: 0.08em;
}
.ds-stack .st {
  margin-left: auto;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-mute);
}
.ds-stack .st.open {
  color: var(--ds-ok);
}
.ds-stack .st.leased {
  color: var(--ds-accent);
}

/* ---- Buttons ---- */
.ds-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px 24px;
  border: 1px solid var(--ds-ink);
  background: var(--ds-ink);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  margin-top: 14px;
}
.ds-btn:hover,
.ds-btn:focus-visible {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  color: #fff;
}
.ds-btn.ghost {
  background: transparent;
  color: var(--ds-ink);
  margin-top: 9px;
}
.ds-btn.ghost:hover,
.ds-btn.ghost:focus-visible {
  background: var(--ds-ink);
  border-color: var(--ds-ink);
  color: #fff;
}

/* ---- Photo strip ---- */
.ds-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 24px 60px;
}
.ds-strip > * {
  height: 190px;
  border: 1px solid var(--ds-line);
  overflow: hidden;
  display: block;
}
.ds-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.ds-strip a:hover img,
.ds-strip a:focus-visible img {
  transform: scale(1.05);
}

@media (max-width: 1050px) {
  .ds-main {
    grid-template-columns: 1fr;
  }
  .ds-sheetbox {
    position: static;
  }
  .ds-strip {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .ds-band,
  .ds-main,
  .ds-strip {
    padding-left: 20px;
    padding-right: 20px;
  }
  .ds-band {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  /* Four figures across is wider than a phone; break the rail into a 2x2
     block so nothing is clipped and the page never scrolls sideways. */
  .ds-keys {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .ds-keys > div {
    padding: 12px 8px;
    border-right: 1px solid var(--ds-line);
    border-bottom: 1px solid var(--ds-line);
  }
  .ds-keys > div:nth-child(2n) {
    border-right: 0;
  }
  .ds-keys > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
  .ds-keys .n,
  .ds-keys .l {
    white-space: normal;
  }
  .ds-paper {
    height: 330px;
    padding: 12px;
  }
  .ds-tabs button {
    padding: 11px 14px;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    flex: 1;
    text-align: center;
  }
  .ds-pending p {
    font-size: 1.2rem;
  }
  .ds-strip > * {
    height: 150px;
  }
}

/* Condos hero carousel.
   Sized against the space actually left on screen, not a raw vh: the carousel
   and the "Pick your Gem" heading below it have to read together without
   scrolling. The fixed nav (160px desktop) plus the heading block (~220px) come
   off the viewport, and the clamp stops the image collapsing on short windows
   or swallowing the heading on tall ones. A plain vh height fits a 900px window
   but pushes the subtitle off a 740px one. */
.condo-hero {
  height: 60vh;
  min-height: 330px;
}
@media (min-width: 768px) {
  /* Sized so the carousel AND the "Pick your Gem" block below it both sit above
     the fold on desktop. Measured, not guessed: the wrapper's nav clearance is
     128px and the heading block (rule + title + subtitle + its padding) is a
     constant 204px at every width, so the carousel gets whatever is left of the
     viewport minus real breathing room under the subtitle. Measured empirically
     rather than trusting the arithmetic: 380 leaves ~22px of clear space below
     the subtitle at every desktop height tested.

     min-height is reset because the mobile base rule's 330px floor would
     otherwise outrank the clamp on a short desktop window and push the heading
     back off the fold. */
  .condo-hero {
    min-height: 0;
    height: clamp(300px, calc(100vh - 380px), 760px);
  }
}

/* Phones: the shortened condos hero leaves no clear band for the vertically
   centred prev/next arrows — the slide caption fills 17%-90% of the box, so the
   arrows sit right on the text. Drop them and let the dots drive. The dots are
   only 12px, so extend their hit area with a transparent pseudo-element — NOT
   the padding/negative-margin trick .tel-link uses, because these dots have a
   background and padding would paint it, turning each dot into a grey slab. The
   horizontal reach is capped at 4px since the dots sit 8px apart and
   overlapping touch targets cause mis-taps. */
@media (max-width: 767px) {
  .condo-hero .hs-arrow {
    display: none;
  }
  .condo-hero .hs-dot {
    position: relative;
  }
  .condo-hero .hs-dot::after {
    content: "";
    position: absolute;
    inset: -14px -4px;
  }
}

/* ============================================
   Floor-plan zoom viewer (residence pages)
   --------------------------------------------
   The plans carry fine print — appliance sizes, room dimensions, "7'-0" x 3'-6""
   — that is unreadable at sheet size, so clicking one opens it full screen with
   scale and pan. Scoped .ds-zoom-* like the rest of the drafting sheet.
   ============================================ */
.ds-plan img {
  cursor: zoom-in;
}
.ds-zoom {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(23, 23, 23, 0.96);
  display: none;
}
.ds-zoom.open {
  display: block;
}
.ds-zoom-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-zoom-stage img {
  max-width: 92vw;
  max-height: 82vh;
  background: #fff;
  transform-origin: center center;
  transition: transform 0.18s ease-out;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
/* No easing mid-drag, or the image lags the cursor. */
.ds-zoom.dragging .ds-zoom-stage img {
  transition: none;
  cursor: grabbing;
}
.ds-zoom.zoomed .ds-zoom-stage img {
  cursor: grab;
}

.ds-zoom-bar {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.ds-zoom-bar button {
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  min-width: 52px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.ds-zoom-bar button + button {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.ds-zoom-bar button:hover:not(:disabled) {
  background: var(--ds-accent, #c41e3a);
}
.ds-zoom-bar button:disabled {
  color: rgba(255, 255, 255, 0.3);
  cursor: default;
}
#plan-zoom-level {
  min-width: 76px;
  font-variant-numeric: tabular-nums;
}

.ds-zoom-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 84px;
  margin: 0;
  text-align: center;
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  pointer-events: none;
}
.ds-zoom-close {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.ds-zoom-close:hover {
  background: var(--ds-accent, #c41e3a);
  border-color: var(--ds-accent, #c41e3a);
}

@media (max-width: 640px) {
  .ds-zoom-stage img { max-width: 96vw; max-height: 74vh; }
  .ds-zoom-hint { bottom: 78px; font-size: 0.56rem; letter-spacing: 0.1em; }
  .ds-zoom-bar button { min-width: 46px; padding: 12px 12px; }
}

/* ============================================
   Residence page — lower sections
   --------------------------------------------
   Below the sheet the page hit the same centred rule-over-heading three times
   running on an unbroken white ground. These give the suites block the sheet's
   own paper ground and its title-band heading (name left, count right, hairline
   under) so the rhythm changes instead of repeating, and close the page on a
   dark band rather than a long stretch of white.
   ============================================ */
.ds-sec-paper {
  background: var(--ds-ground);
}

.ds-sechead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ds-line);
  margin-bottom: 28px;
}
.ds-sechead h2 {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
  margin: 0;
}
.ds-seccount {
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ds-mute);
}

/* ---- Closing band ----
   Deliberately --ds-ink rather than the footer's pure black, with a crimson
   hairline on top: the two dark blocks sit directly on each other and would
   otherwise merge into one undifferentiated mass. */
.ds-close {
  background: var(--ds-ink);
  border-top: 2px solid var(--ds-accent);
  color: #fff;
  padding: 56px 24px;
  text-align: center;
}
.ds-close .inner {
  max-width: 720px;
  margin: 0 auto;
}
.ds-close .eyebrow {
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ds-accent);
  margin: 0 0 12px;
}
.ds-close h2 {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  margin: 0 0 12px;
  color: #fff;
}
.ds-close p.sub {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 26px;
}
.ds-close .cta {
  display: inline-block;
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 17px 44px;
  background: var(--ds-accent);
  color: #fff;
  border: 1px solid var(--ds-accent);
  cursor: pointer;
  transition: background 0.25s;
}
.ds-close .cta:hover,
.ds-close .cta:focus-visible {
  background: transparent;
}
.ds-close .facts {
  margin: 24px 0 0;
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
}
.ds-close .facts a { color: inherit; text-decoration: none; }
.ds-close .facts a:hover { color: #fff; }

/* ---- Enquiry modal ----
   The form left the page but keeps the context it had inline: the message still
   arrives pre-filled with the suite's name. */
.ds-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(23, 23, 23, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ds-modal.open { display: flex; }
.ds-modal .panel {
  background: #fff;
  border: 1px solid var(--ds-line);
  width: min(640px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 34px;
  position: relative;
}
.ds-modal .panel h3 {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  margin: 0 0 6px;
  color: var(--ds-ink);
}
.ds-modal .panel .sub {
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ds-mute);
  margin: 0 0 24px;
}
.ds-modal .close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ds-line);
  background: transparent;
  color: var(--ds-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ds-modal .close:hover {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  color: #fff;
}

@media (max-width: 640px) {
  .ds-close { padding: 40px 20px; }
  .ds-modal .panel { padding: 26px 20px; }
}

/* ============================================
   Contact page — soft snap to the card
   --------------------------------------------
   The two-column card is ~523px tall, so it fits in one screen with room to
   spare. A single PROXIMITY snap point parks it with "Information" just below
   the nav once the visitor scrolls near it. Proximity, not mandatory: it only
   engages when the scroll comes to rest close by, so it never fights someone
   scrolling straight past to the footer.

   Gated on width AND height so it only ever engages when the result is the
   full card in view. The card measures a constant 595px at every width from
   1024 up, and sits 148px down (nav clearance + 20px), so it needs a 743px
   viewport just to fit — the 800px floor leaves ~57px under the Send button.
   Below lg the columns stack into something far taller than a screen. `[id]`
   already supplies the scroll-margin that keeps the target clear of the nav.
   ============================================ */
@media (min-width: 1024px) and (min-height: 800px) {
  html:has(body[data-seo="contact"]) {
    scroll-snap-type: y proximity;
  }
  body[data-seo="contact"] #contact-columns {
    scroll-snap-align: start;
  }
  /* Without a snap point at the very top the card's one steals every position
     including zero, and the page title becomes unreachable. Two points let the
     browser pick the nearer: rest at the top, or rest on the card. */
  body[data-seo="contact"] #contact-top {
    scroll-snap-align: start;
    scroll-margin-top: 0;
  }
}
/* Snapping hijacks the scroll position, which is exactly what motion-sensitive
   visitors ask not to happen. */
@media (prefers-reduced-motion: reduce) {
  html:has(body[data-seo="contact"]) {
    scroll-snap-type: none;
  }
}


/* "+N photos" scrim on the last strip tile — the strip shows 4 of up to 7,
   so without this the remainder are invisible. Added only when hidden > 0. */
.ds-strip a {
  position: relative;
}
.ds-more {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(23, 23, 23, 0.6);
  color: #fff;
  font-family: "Object Sans", "Archivo", sans-serif;
  transition: background 0.25s;
}
.ds-strip a:hover .ds-more,
.ds-strip a:focus-visible .ds-more {
  background: rgba(23, 23, 23, 0.72);
}
.ds-more-n {
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: 0.02em;
}
.ds-more-l {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 7px;
  opacity: 0.85;
}

/* Photo counter inside the lightbox. */
.lb-count {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.45);
  padding: 7px 14px;
  pointer-events: none;
}

/* Sibling-card stand-in for a residence that has no cover photograph yet. */
.ds-nocover {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ecebe9;
  border-bottom: 1px solid rgba(23, 23, 23, 0.12);
}
.ds-nocover span {
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #78716c;
}
/* Suites without photography yet: the illustrated floor plan stands in for
   the photo in the "other residences" strip, on a paper-toned tile. */
.ds-plancover {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
  background: #f4f2ee;
  border-bottom: 1px solid rgba(23, 23, 23, 0.12);
  overflow: hidden;
}
.ds-plancover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
}
.group:hover .ds-plancover img {
  transform: scale(1.04);
}

/* Note under the illustrated plan. The illustrated plans are renders derived
   from the dimensioned drawings, so the measured sizes live in the other tab
   and this says so. Hidden while the Dimensions tab is showing. */
.ds-disclaimer {
  margin: 0;
  padding: 10px 18px 0;
  font-family: "Object Sans", "Archivo", sans-serif;
  font-size: 0.62rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ds-mute);
  position: relative;
}
.ds-disclaimer.ds-hide { display: none; }

/* Printing a suite page — this is what the "Print listing" button does on
   suites with no prepared PDF sheet. Strips the site furniture so the drafting
   sheet and its spec cards are what actually land on paper. */
@media print {
  #main-nav,
  footer,
  #register-widget,
  #lightbox,
  .ds-tabs,
  .ds-strip,
  #gallery,
  #contact { display: none !important; }

  #residence-root { padding-top: 0 !important; }
  .ds { background: #fff !important; }
  .ds-card { break-inside: avoid; page-break-inside: avoid; border-color: #bbb; }
  .ds-btn { display: none !important; }
  .ds-paper { height: auto !important; }
  .ds-plan img { max-height: 46vh; }
}


/* ---- Leasing promo modal (luxury-rentals) --------------------------------
   Split layout: large photograph on the left, offer on the right. Bespoke
   rather than Tailwind utilities so restyling never depends on a tailwind.css
   rebuild. Hidden by default: if JS never runs the modal simply never appears
   rather than blocking the page.

   Type note: do NOT use the .font-serif stack here. It resolves to
   "Object Sans", Archivo -- Object Sans is not loaded, so it silently falls
   back to a SANS face and the panel stops matching the rest of the site.
   Playfair Display + Cormorant Garamond are the faces the pages actually load. */
.promo-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.74);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.promo-backdrop.is-open { opacity: 1; }
.promo-backdrop[hidden] { display: none; }

.promo-panel {
  position: relative;
  display: flex;
  width: 54rem;
  max-width: 100%;
  min-height: 24rem;
  max-height: calc(100vh - 2.5rem);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.5);
  transform: translateY(14px);
  transition: transform 0.35s ease;
}
.promo-backdrop.is-open .promo-panel { transform: translateY(0); }
.promo-panel:focus { outline: none; }

/* align-self:stretch + object-fit:cover makes the photo fill the full height
   of whichever side is taller, without distorting it. */
.promo-photo {
  flex: 0 0 47%;
  width: 47%;
  align-self: stretch;
  object-fit: cover;
  display: block;
}

.promo-inner {
  flex: 1;
  min-width: 0;
  padding: 3rem 3rem 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.promo-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #c41e3a;
}
.promo-title {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1.08;
  color: #12100f;
  margin: 0.6rem 0 0;
}
.promo-rule {
  width: 2.6rem;
  height: 2px;
  background: #c41e3a;
  margin: 1.15rem 0;
}
.promo-body {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem;
  line-height: 1.55;
  color: #4a4643;
}
.promo-fine {
  margin-top: 0.85rem;
  font-size: 0.72rem;
  color: #98928c;
}
.promo-actions {
  margin-top: 1.9rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.promo-cta {
  display: inline-block;
  background: #c41e3a;
  color: #fff;
  text-decoration: none;
  padding: 0.9rem 1.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.25s ease;
}
.promo-cta:hover { background: #a5182f; }
.promo-dismiss {
  background: none;
  border: 0;
  padding: 0.25rem;
  font-size: 0.82rem;
  color: #98928c;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.promo-dismiss:hover { color: #12100f; }

/* Sits over the white copy side, so muted grey rather than white. */
.promo-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: #a49d97;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.promo-close:hover { color: #12100f; }

.promo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Phones: stack photo over copy so the text never gets a narrow column. */
@media (max-width: 640px) {
  .promo-panel {
    flex-direction: column;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
  }
  .promo-photo {
    flex: 0 0 auto;
    width: 100%;
    height: 11rem;
  }
  .promo-inner { padding: 1.9rem 1.6rem 2rem; }
  .promo-title { font-size: 1.95rem; }
  .promo-body { font-size: 1.05rem; }
  .promo-close { color: #fff; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .promo-backdrop,
  .promo-panel { transition: none; }
}

/* Amenity grids (amenities.html). Cards span 2 of a doubled track count so a
   short last row can be centred by starting its first card one track to the
   right. The start classes are assigned by centreClass() in the page script. */
@media (min-width: 768px) {
  .amenity-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .amenity-grid > * { grid-column: span 2; }
  .amenity-grid > .amenity-md-start-2 { grid-column: 2 / span 2; }
}
@media (min-width: 1024px) {
  .amenity-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .amenity-grid > .amenity-md-start-2 { grid-column: span 2; } /* md offset does not apply here */
  .amenity-grid > .amenity-lg-start-2 { grid-column: 2 / span 2; }
  .amenity-grid > .amenity-lg-start-3 { grid-column: 3 / span 2; }
  .amenity-grid > .amenity-lg-start-4 { grid-column: 4 / span 2; }
}