/* ==========================================================================
   Perimeter One | Perimeter Two
   Plain CSS. Brand tokens from the official swatch (Assets/Perimeter swatch.pdf).
   Sections alternate light / dark. Motion is progressive enhancement, scoped to
   the `.js` class and disabled under prefers-reduced-motion.
   ========================================================================== */

:root {
  --navy:      #003F59;   /* primary brand navy   */
  --navy-deep: #012c3f;   /* darker navy for gradients / footer */
  --navy-800:  #013247;
  --red:       #E30B17;   /* brand red            */
  --red-dark:  #c50912;
  --ink:       #37505B;   /* body text (swatch)   */
  --ink-soft:  #5c7280;
  --white:     #ffffff;
  --paper:     #f3f6f7;   /* light band          */
  --paper-2:   #e7edef;

  --line-dark:  rgba(255,255,255,0.14);
  --line-light: rgba(0,63,89,0.14);

  --font: "Roboto Condensed", "Arial Narrow", system-ui, -apple-system, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(64px, 9vw, 132px);
  --radius: 14px;
  /* distance from the .wrap content edge to the viewport edge */
  --bleed: calc(var(--gutter) + max(0px, (100vw - var(--wrap)) / 2));

  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--navy);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, picture { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.02; letter-spacing: -0.01em; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--red); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* shared type helpers ------------------------------------------------------ */
.eyebrow {
  margin: 0 0 16px;
  font-size: 1.23rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600;
  color: var(--red);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--red); display: inline-block; }
.eyebrow--plain::before { display: none; }

.display {
  text-transform: uppercase;
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
}
.h2 { text-transform: uppercase; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 0.98; }
.accent { color: var(--red); }
.lede { font-size: clamp(1.12rem, 2vw, 1.5rem); font-weight: 300; line-height: 1.45; }
.nowrap { white-space: nowrap; }

/* buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  padding: 15px 26px; border-radius: 8px; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn__arrow { transition: transform .18s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--accent { background: var(--red); color: #fff; }
.btn--accent:hover { background: var(--red-dark); transform: translateY(-2px); }
.btn--ghost-light { border-color: rgba(255,255,255,0.45); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.btn--ghost-dark { border-color: var(--line-light); color: var(--navy); }
.btn--ghost-dark:hover { border-color: var(--navy); background: rgba(0,63,89,0.05); transform: translateY(-2px); }

/* bands -------------------------------------------------------------------- */
.band { padding-block: var(--section-y); overflow-x: clip; }

/* breakout media: in a two-column row, the image column runs past the wrap to
   the viewport edge on its own side. Outer corners go square at the edge. */
@media (min-width: 821px) {
  .bleed-r { margin-right: calc(-1 * var(--bleed)); border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
  .bleed-l { margin-left: calc(-1 * var(--bleed)); border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
}
.band--dark  { background: var(--navy); color: #fff; }
.band--darker{ background: var(--navy-deep); color: #fff; }
.band--light { background: var(--paper); color: var(--ink); }
.band--dark .h2, .band--darker .h2 { color: #fff; }
.band--light .eyebrow { color: var(--red); }

/* ============================================================== NAV ======= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
  padding-block: 18px;
}
.nav__inner { width: 100%; margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__logo { width: clamp(180px, 22vw, 260px); height: auto; }
.nav.is-stuck { background: rgba(1,44,63,0.92); backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0,0,0,.25); padding-block: 12px; }

.nav__menu { display: flex; align-items: center; gap: 30px; }
.nav__menu > ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav__menu > ul a {
  color: rgba(255,255,255,0.85); text-decoration: none; font-size: 0.86rem;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; padding: 6px 0;
  position: relative;
}
.nav__menu > ul a::after { content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--red); transition: right .25s var(--ease); }
.nav__menu > ul a:hover, .nav__menu > ul a[aria-current="true"] { color: #fff; }
.nav__menu > ul a:hover::after, .nav__menu > ul a[aria-current="true"]::after { right: 0; }
.nav__cta { padding: 11px 20px; }

.nav__toggle { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; position: relative; }
.nav__bars, .nav__bars::before, .nav__bars::after {
  content: ""; position: absolute; left: 10px; width: 24px; height: 2px; background: #fff; transition: transform .25s var(--ease), opacity .2s; }
.nav__bars { top: 21px; }
.nav__bars::before { top: -7px; } .nav__bars::after { top: 7px; }

@media (max-width: 1400px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px);
    background: var(--navy-deep); flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 8px; padding: 40px var(--gutter);
    transform: translateX(100%); transition: transform .3s var(--ease); box-shadow: -20px 0 60px rgba(0,0,0,.4);
  }
  .nav__menu.is-open { transform: translateX(0); }
  .nav__menu > ul { flex-direction: column; gap: 4px; width: 100%; }
  .nav__menu > ul a { font-size: 1.1rem; padding: 12px 0; display: block; }
  .nav__cta { margin-top: 16px; }
  .nav__menu.is-open ~ * { }
  .nav.is-open .nav__bars { background: transparent; }
}

/* ============================================================== HERO ====== */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(1,44,63,0.55) 0%, rgba(0,63,89,0.35) 30%, rgba(1,44,63,0.86) 78%, rgba(1,30,45,0.97) 100%),
    radial-gradient(120% 80% at 20% 90%, rgba(0,63,89,0.55), transparent 60%);
}
.hero__inner { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
  padding-block: clamp(120px, 20vh, 200px) clamp(56px, 10vh, 110px); width: 100%; color: #fff; }
.hero__eyebrow { color: #fff; }
.hero__eyebrow::before { background: var(--red); }
.hero__title { color: #fff; max-width: 16ch; }
.hero__figures {
  margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: baseline;
}
.hero__figure { font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: 500; }
.hero__figure b { color: #fff; font-weight: 700; }
.hero__figure em { font-style: normal; color: var(--red); }
.hero__figure span { color: rgba(255,255,255,0.7); font-weight: 300; }
.hero__lede { margin: 26px 0 0; max-width: 54ch; color: rgba(255,255,255,0.9); }
.hero__actions { margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 14px; }

/* ========================================================== OVERVIEW ====== */
.overview { display: grid; gap: clamp(28px, 5vw, 64px); grid-template-columns: 1.1fr 1fr; align-items: center; }
.overview__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
.overview__media picture { height: 100%; }
.overview__media img { width: 100%; height: 100%; object-fit: cover; }
.overview h2 { margin: 0 0 20px; }
.overview p + p { margin-top: 14px; }
.mini-specs { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mini-specs li { list-style: none; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-light); border-radius: 999px; padding: 8px 14px; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
.mini-specs img { width: 20px; height: 20px; }
@media (max-width: 820px){ .overview { grid-template-columns: 1fr; } .overview__media { order: -1; } }

/* ============================================================ UNITS ======= */
.units-head { text-align: center; max-width: 720px; margin: 0 auto clamp(36px,5vw,64px); }
.units-head .eyebrow { justify-content: center; }
.units-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.unitcard {
  position: relative; min-height: clamp(440px, 60vh, 620px); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; text-decoration: none; isolation: isolate;
}
.unitcard__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease); }
.unitcard__veil { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(1,44,63,0.15) 0%, rgba(1,44,63,0.35) 45%, rgba(1,30,45,0.92) 100%); transition: background .4s; }
.unitcard:hover .unitcard__img { transform: scale(1.05); }
.unitcard:hover .unitcard__veil { background: linear-gradient(180deg, rgba(1,44,63,0.25) 0%, rgba(1,44,63,0.45) 45%, rgba(1,30,45,0.95) 100%); }
.unitcard__body { padding: clamp(24px, 3vw, 40px); }
.unitcard__logo { width: clamp(180px, 20vw, 250px); height: auto; margin-bottom: 18px; }
.unitcard__size { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; line-height: 1; }
.unitcard__size .unitcard__unit { font-size: .5em; font-weight: 700; color: #fff; margin-left: 4px; letter-spacing: .02em; }
.unitcard__size .unitcard__metric { margin-left: 10px; font-size: .95rem; font-weight: 400; color: rgba(255,255,255,0.78); letter-spacing: .02em; }
.unitcard__specs { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .9rem; color: rgba(255,255,255,0.85); }
.unitcard__specs li { position: relative; padding-left: 16px; }
.unitcard__specs li::before { content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; background:var(--red); border-radius:50%; }
.unitcard__go { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .86rem; color: #fff; }
.unitcard__go .btn__arrow { transition: transform .2s var(--ease); }
.unitcard:hover .unitcard__go .btn__arrow { transform: translateX(5px); }
.unitcard::after { content:""; position:absolute; inset:0; border:1.5px solid transparent; border-radius:var(--radius); transition: border-color .3s; z-index: 1; pointer-events: none; }
.unitcard:hover::after { border-color: var(--red); }
@media (max-width: 820px){ .units-split { grid-template-columns: 1fr; } }

/* ========================================================= LOCATION ======= */
.loc { display: grid; gap: clamp(28px,5vw,56px); grid-template-columns: 1fr 1fr; align-items: center; }
.loc__media { border-radius: var(--radius); overflow: hidden; background: var(--navy); padding: clamp(14px,2vw,26px); }
.loc__media img { width: 100%; height: auto; }
.loc h2 { margin: 0 0 18px; }
.loc p + p { margin-top: 12px; }
.loc .w3w { margin-top: 18px; font-size: .95rem; color: var(--ink-soft); letter-spacing: .04em; }
.loc .w3w a { color: var(--red); text-decoration: none; font-weight: 600; }
@media (max-width: 820px){ .loc { grid-template-columns: 1fr; } }
.map { min-width: 0; }
@media (min-width: 821px){
  .bleed-l .map__frame, .bleed-l .mapboxgl-map { border-top-left-radius: 0; border-bottom-left-radius: 0; }
  .map.bleed-l .map__note { padding-left: var(--bleed); }
}
/* visible ground, so a map that fails to draw reads as an empty frame */
.map__frame { width: 100%; height: clamp(360px, 60vh, 600px); background: var(--navy-deep); border-radius: var(--radius); overflow: hidden; }
.map .mapboxgl-map { border-radius: var(--radius); }
.map__note { margin: 12px 0 0; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }

/* travel board (departures-board motif) ------------------------------------ */
.board { margin-top: clamp(36px,5vw,56px); display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.board__panel { border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; background: rgba(0,0,0,0.18); }
.board__cap { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line-dark);
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,0.72); font-weight: 600; }
.board__cap svg { width: 27px; height: 27px; fill: var(--red); }
.board__rows { width: 100%; border-collapse: collapse; }
.board__rows th, .board__rows td { padding: 12px 20px; text-align: left; font-weight: 400; border-top: 1px solid rgba(255,255,255,0.06); }
.board__rows tr:first-child th, .board__rows tr:first-child td { border-top: 0; }
.board__rows .dest { color: #fff; font-weight: 500; letter-spacing: .02em; }
.board__rows .num { text-align: right; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.9); font-weight: 600; letter-spacing: .06em; }
.board__rows .num--time { color: var(--red); }
@media (max-width: 900px){ .board { grid-template-columns: 1fr; } }

/* =========================================================== STATS ======== */
.stats-intro { max-width: 760px; }
.stats { margin: clamp(36px,5vw,60px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; padding: 0; }
.stats li { border-top: 2px solid var(--red); padding-top: 18px; }
.stats__figure { display: block; font-size: clamp(2.6rem, 5.5vw, 4.6rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.stats__label { display: block; margin-top: 12px; font-size: .92rem; color: rgba(255,255,255,0.72); line-height: 1.4; }
@media (max-width: 820px){ .stats { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; } }

/* ======================================================= OCCUPIERS ======== */
.occ { text-align: center; }
.occ h2 { margin: 0 0 10px; }
.occ__note { color: var(--ink-soft); }
.occ__logos { margin: clamp(28px,4vw,44px) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.occ__chip { border: 1px solid var(--line-light); border-radius: 999px; padding: 12px 22px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; color: var(--navy);
  background: #fff; }
.occ__placeholder { margin-top: 14px; font-size: .8rem; color: var(--ink-soft); font-style: italic; }

/* ========================================================= CONTACT ======== */
.contact { display: grid; gap: clamp(28px,5vw,56px); grid-template-columns: 1fr 1fr; }
.contact__lead h2 { margin: 0 0 18px; }
.contact__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.agents { display: grid; gap: 44px; }
.agent__co { margin: 0 0 12px; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red); font-weight: 700; }
.agent__people { display: grid; gap: 14px; }
.person { margin: 0; }
.person strong { font-weight: 700; color: #fff; }
.person a { color: rgba(255,255,255,0.8); text-decoration: none; }
.person a:hover { color: #fff; text-decoration: underline; }
.person { line-height: 1.65; }
@media (max-width: 820px){ .contact { grid-template-columns: 1fr; } }
/* contact on a light band (landing) */
.band--light .contact .person strong { color: var(--navy); }
.band--light .contact .person a { color: var(--ink); }
.band--light .contact .person a:hover { color: var(--navy); }

/* ========================================================== FOOTER ======== */
.foot { background: var(--navy-deep); color: rgba(255,255,255,0.7); padding-block: clamp(40px,6vw,72px) 32px; }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; align-items: start; }
.foot__logo { width: 260px; max-width: 60vw; }
.foot__addr { margin: 16px 0 0; font-size: .95rem; line-height: 1.7; }
.foot__addr a { color: var(--red); text-decoration: none; font-weight: 600; }
.foot__legal { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .78rem; letter-spacing: .04em; color: rgba(255,255,255,0.5); }
.foot__legal a { color: rgba(255,255,255,0.7); text-decoration: none; }
.foot__legal a:hover { color: #fff; }
.foot__credit { font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.foot__credit a { color: rgba(255,255,255,.85); font-weight: 600; letter-spacing: .12em; border-bottom: 1px solid rgba(227,11,23,.7); }
.foot__credit a:hover { color: #fff; border-bottom-color: var(--red); }

/* placeholder marker (for pending real assets) ----------------------------- */
.ph { position: relative; }
.ph::before { content: "PLACEHOLDER"; position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--red); color: #fff; font-size: .62rem; letter-spacing: .16em; font-weight: 700;
  padding: 4px 8px; border-radius: 4px; opacity: .9; }

/* =========================================================== MOTION ======= */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-stagger] > * { opacity: 0; transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--stagger-i, 0) * 80ms); }
.js .reveal.is-visible, .js [data-stagger].is-visible > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .unitcard__img, .unitcard:hover .unitcard__img { transition: none; }
}

/* ==========================================================================
   UNIT PAGES (perimeter-one.html / perimeter-two.html)
   ========================================================================== */
.u-hero { position: relative; min-height: clamp(560px, 90vh, 900px); display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; }
.u-hero__media { position: absolute; inset: 0; z-index: -2; }
.u-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.u-hero__scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(1,44,63,0.5) 0%, rgba(0,63,89,0.35) 35%, rgba(1,44,63,0.9) 80%, rgba(1,30,45,0.97) 100%); }
.u-hero__inner { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
  padding-block: clamp(120px,18vh,180px) clamp(48px,8vh,90px); width: 100%; color: #fff; }
.u-hero__logo { width: clamp(280px, 52vw, 640px); height: auto; margin-bottom: 22px; }
.u-hero__addr { margin: 0; font-size: clamp(.95rem,1.6vw,1.15rem); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.82); font-weight: 500; }
.u-hero__size { margin: 22px 0 0; font-size: clamp(2.6rem,7vw,5rem); font-weight: 700; line-height: 1; }
.u-hero__size span { font-size: clamp(1rem,2vw,1.4rem); font-weight: 300; color: rgba(255,255,255,0.72); }
.u-hero__tag { display: inline-block; margin: 0 0 18px; background: var(--red); color: #fff;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; padding: 7px 14px; border-radius: 6px; }
.u-hero__actions { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 14px; }

/* breadcrumb back link */
.u-back { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.8);
  text-decoration: none; font-size: 1.23rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; margin-top: 26px; }
.u-back:hover { color: #fff; }

/* description */
.u-desc { display: grid; gap: clamp(28px,5vw,64px); grid-template-columns: 1.05fr 1fr; align-items: center; }
.u-desc__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
.u-desc__media img { width: 100%; height: 100%; object-fit: cover; }
.u-desc h2 { margin: 0 0 18px; }
.u-desc p + p { margin-top: 14px; }
@media (max-width: 820px){ .u-desc { grid-template-columns: 1fr; } .u-desc__media { order: -1; } }

/* spec grid (dark band)
   RULE: feature/spec icons are never smaller than 175px wide (see README /
   ../property-site-playbook.md). Columns auto-fit around that. */
.specs { margin: clamp(32px,5vw,56px) 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(32px,4vw,52px) 24px; list-style: none; padding: 0; align-items: start; justify-items: center; }
.spec { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; max-width: 260px; }
.spec__icon { width: 175px; height: 175px; max-width: 100%; }
/* icons carry ~35-45px of transparent padding below the artwork, so pull the
   label up into it to roughly halve the visible icon-to-text gap. */
.spec__label { font-size: 1rem; line-height: 1.3; color: rgba(255,255,255,0.85); letter-spacing: .02em; margin-top: -20px; }

/* spec icons as a two-row endless ticker (built by JS from .specs; the static
   grid above is the no-JS / reduced-motion fallback). Icons stay >=175px. */
.spec-ticker { margin-top: clamp(32px,5vw,56px); display: flex; flex-direction: column; gap: clamp(28px,3.5vw,48px); }
.ticker { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ticker__track { display: flex; gap: clamp(36px,4vw,64px); width: max-content; will-change: transform;
  animation: ticker 165s linear infinite; }
.ticker--rev .ticker__track { animation-direction: reverse; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker .spec { flex: 0 0 auto; width: 200px; max-width: 200px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* accommodation schedule + floorplan */
.accom { display: grid; gap: clamp(28px,5vw,64px); grid-template-columns: 1fr 1.25fr; align-items: center; }
@media (max-width: 820px){ .accom { grid-template-columns: 1fr; } }
.schedule { width: 100%; border-collapse: collapse; font-size: 1rem; }
.schedule th, .schedule td { padding: 14px 8px; text-align: left; border-bottom: 1px solid var(--line-light); }
.schedule thead th { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.schedule .num { text-align: right; font-variant-numeric: tabular-nums; }
.schedule tbody th { font-weight: 500; }
.schedule .total th, .schedule .total td { border-top: 2px solid var(--red); border-bottom: none; font-weight: 700; font-size: 1.1rem; color: var(--navy); }
.note { margin-top: 16px; font-size: .84rem; color: var(--ink-soft); }
.floorplan { border-radius: var(--radius); overflow: hidden; background: var(--navy); border: 1px solid var(--line-light); }
.floorplan img { width: 100%; height: auto; display: block; }
.floorplan figcaption { padding: 12px 16px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.7); background: var(--navy); }
.floorplan + .floorplan { margin-top: 16px; }

/* media (video + 360) — tabbed, so each plays full-width and large */
.media { margin-top: clamp(28px,4vw,44px); }
.media__tabs { display: flex; gap: 10px; margin-bottom: 18px; }
.media__tab { font: inherit; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .82rem;
  color: rgba(255,255,255,0.72); background: transparent; border: 1px solid var(--line-dark); border-radius: 999px;
  padding: 11px 22px; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.media__tab:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.media__tab.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.media__panel + .media__panel { margin-top: 20px; }  /* stacked when JS is off */
.js .media__panel:not(.is-active) { display: none; }
.media__frame { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: rgba(0,0,0,0.25); border: 1px solid var(--line-dark); }
.media__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* gallery */
.gal { margin-top: clamp(28px,4vw,44px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gal__item { position: relative; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; border: 0; padding: 0; cursor: pointer; background: var(--navy-800); }
.gal__item picture { display: block; width: 100%; height: 100%; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gal__item:hover img { transform: scale(1.05); }
.gal__item--empty { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 700px){ .gal { grid-template-columns: repeat(2, 1fr); } }

/* agent logo (shown as supplied; both agent blocks carry their own panel) */
.agent__logo { display: inline-flex; margin-bottom: 16px; }
.agent__logo img { height: 98px; width: auto; display: block; }

/* real gallery (buttons open a lightbox) */
.gal__item { border: 0; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(1,22,32,0.94);
  display: flex; align-items: center; justify-content: center; padding: 4vw; }
.lightbox[hidden] { display: none; }
.lb__pic { max-width: 94vw; max-height: 84vh; }
.lb__pic img { max-width: 94vw; max-height: 84vh; width: auto; height: auto; border-radius: 8px; display: block; }
.lb__btn { position: absolute; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; font-size: 1.4rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .2s; }
.lb__btn:hover { background: var(--red); border-color: var(--red); }
.lb__close { top: 4vw; right: 4vw; }
.lb__nav--prev { left: 3vw; top: 50%; transform: translateY(-50%); }
.lb__nav--next { right: 3vw; top: 50%; transform: translateY(-50%); }
.lb__count { position: absolute; bottom: 4vw; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.75); font-size: .85rem; letter-spacing: .12em; }
@media (max-width: 640px){ .lb__nav--prev { left: 8px; } .lb__nav--next { right: 8px; } .lb__close { top: 12px; right: 12px; } }

/* ==========================================================================
   HOLDING PAGE (holding.html) — kept intact; can be pruned once launched.
   ========================================================================== */
.holding { position: relative; min-height: 100svh; display: flex; flex-direction: column; isolation: isolate; overflow: hidden; color: #fff; }
.holding__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.holding__scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,51,73,0.72) 0%, rgba(0,51,73,0.80) 45%, rgba(1,29,45,0.94) 100%); }
.holding__inner { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter);
  padding-block: clamp(28px,6vh,64px); flex: 1 1 auto; display: flex; flex-direction: column; }
.holding__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.holding__logo { width: clamp(220px,34vw,360px); height: auto; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600; padding: 7px 14px; border: 1px solid var(--line-dark); border-radius: 999px; color: rgba(255,255,255,0.86); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.holding__hero { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(40px,9vh,96px); max-width: 900px; }
.eyebrow--muted { color: rgba(255,255,255,0.72); }
.holding__title { margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; font-size: clamp(2.4rem,7vw,5rem); }
.holding__lede { margin: 22px 0 0; font-size: clamp(1.05rem,2.2vw,1.4rem); font-weight: 300; color: rgba(255,255,255,0.9); max-width: 60ch; }
.holding__addr { margin: 18px 0 0; font-size: 1rem; letter-spacing: .04em; color: rgba(255,255,255,0.78); }
.units { margin: clamp(32px,6vh,56px) 0 0; display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.unit { border: 1px solid var(--line-dark); border-radius: 14px; padding: 22px 24px; background: rgba(255,255,255,0.04); }
.unit__name { margin: 0; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.unit__size { margin: 6px 0 0; font-size: clamp(1.6rem,4vw,2.3rem); font-weight: 700; line-height: 1; }
.unit__size span { font-size: .9rem; font-weight: 400; color: rgba(255,255,255,0.7); }
.unit__meta { margin: 12px 0 0; font-size: .9rem; color: rgba(255,255,255,0.72); }
.actions { margin: clamp(28px,5vh,44px) 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.btn--accent.holding, .holding .btn { }
.btn--ghost { border-color: rgba(255,255,255,0.4); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.holding__foot { border-top: 1px solid var(--line-dark); padding-top: 26px; margin-top: clamp(28px,5vh,48px); }
.holding .agents { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 40px; }
.colophon { margin-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: .78rem; letter-spacing: .08em; color: rgba(255,255,255,0.55); text-transform: uppercase; }
@media (max-width: 720px){ .holding .units, .holding .agents { grid-template-columns: 1fr; } }