/* PARKTOWN Residence: Right where you are.

   The page is rings around your front door, read outward (at your door,
   within the development, 1 km to 3 km and beyond) and then homeward. The
   palette is the brochure's: the cover's pinstriped forest green, its lime
   spine and its pale green pages. Renders and photographs are never
   filtered or regraded. */

:root {
  font-variant-numeric: lining-nums;
  --paper: #F4F6EC;
  --paper-2: #EBEFDC;
  --pale: #E3EBCB;               /* the brochure's pale green, lifted */
  --pale-2: #D3E0B0;             /* the brochure's pale green */
  --ink: #1D3332;
  --ink-soft: #4C5E5A;
  --forest: #213736;             /* the cover */
  --forest-2: #1A2D2C;
  --forest-3: #2A4442;
  --deep: #132322;
  --lime: #B5BC34;               /* the spine; on dark grounds only */
  --lime-2: #C9CF55;
  --olive: #55641E;              /* lime that carries text on paper */
  --olive-2: #44511A;
  --sky: #2F6AAE;                /* the hero render's sky at its top edge */
  --on-dark: #F2F5E6;
  --on-dark-soft: #B7C4BA;
  --card: #FCFDF7;
  --hair: rgb(29 51 50 / 0.14);
  --hair-2: rgb(29 51 50 / 0.28);
  --hair-d: rgb(242 245 230 / 0.16);
  --hair-d2: rgb(242 245 230 / 0.32);
  /* the cover's pinstripes: two irregular sets of hairlines */
  --stripes: repeating-linear-gradient(90deg, rgb(255 255 255 / 0) 0 11px, rgb(255 255 255 / 0.035) 11px 12px),
             repeating-linear-gradient(90deg, rgb(255 255 255 / 0) 0 4px, rgb(255 255 255 / 0.022) 4px 5px, rgb(255 255 255 / 0) 5px 17px);

  --sc-canvas: var(--paper);
  --sc-surface: var(--card);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--forest);
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Prata", "Didot", "Bodoni 72", Georgia, serif;
  --sc-font-text: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono: "DM Sans", system-ui, sans-serif;
  --sc-hairline: var(--hair);
  --sc-hairline-strong: var(--hair-2);
  --sc-shadow-color: 170 30% 8%;

  --gut: clamp(1rem, 4.4vw, 4rem);
  --wrap-w: min(76rem, calc(100% - 2 * var(--gut)));
  --sect: clamp(4.5rem, 8.5vw, 8.5rem);
  --bar-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--forest); scroll-padding-top: calc(var(--bar-h) + 1rem); }
body { background: var(--paper); color: var(--ink); font-family: var(--sc-font-text); font-weight: 400; font-size: 1.0625rem; line-height: 1.62; overflow-x: clip; }
::selection { background: var(--lime); color: var(--forest); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gut); top: -4rem; z-index: 200; background: var(--card); color: var(--ink); padding: 0.6rem 1rem; border-radius: 999px; }
.skip:focus { top: 0.5rem; }
p, figure, h1, h2, h3, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
b, strong { font-weight: 600; }
.nw { white-space: nowrap; }
.wrap { width: var(--wrap-w); margin-inline: auto; }

/* ------------------------------------------------------------------ type -- */
.h2 {
  font: 400 clamp(1.95rem, 1.1rem + 2.6vw, 3.55rem)/1.06 var(--sc-font-display);
  text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance; max-width: 19ch;
}
/* a kicker carries a small target: the ring the section sits on */
.kicker {
  display: flex; align-items: center; gap: 0.6rem;
  font: 600 0.74rem/1.3 var(--sc-font-text); letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive); margin-bottom: 1rem;
}
.kicker::before {
  content: ""; flex: none; width: 0.95rem; height: 0.95rem; border-radius: 50%;
  background: radial-gradient(circle, currentColor 0 22%, transparent 23% 46%, currentColor 47% 56%, transparent 57% 78%, currentColor 79% 88%, transparent 89%);
}
.kicker--lime { color: var(--lime); }
.lede { font-size: clamp(1.07rem, 1rem + 0.3vw, 1.22rem); line-height: 1.62; max-width: 58ch; text-wrap: pretty; }
.small { font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); }
.credit { font-size: 0.74rem; font-style: normal; letter-spacing: 0.03em; color: var(--ink-soft); }
.facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--hair); font-size: 0.95rem; }
.facts > div:first-child { border-top: 1px solid var(--hair); }
.facts dt { color: var(--ink-soft); flex: none; max-width: 45%; }
.facts dd { text-align: right; font-weight: 500; }
.link-arrow {
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--olive); text-decoration-thickness: 1.5px; text-underline-offset: 0.3em;
}
.link-arrow::after { content: " \2192"; }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.8rem 1.55rem;
  background: var(--forest); color: var(--on-dark);
  font: 600 0.82rem/1 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.55; cursor: progress; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--forest-3); } }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hair-2); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: rgb(29 51 50 / 0.06); border-color: var(--ink); } }
.btn--block { width: 100%; }
.btn--small { min-height: 2.6rem; padding: 0.55rem 1.15rem; font-size: 0.74rem; }
/* on dark grounds the button takes the lime */
.on-dark .btn:not(.btn--ghost), .sec--forest .btn:not(.btn--ghost), .close .book__intro .btn { background: var(--lime); color: var(--forest-2); }
@media (hover: hover) and (pointer: fine) { .on-dark .btn:not(.btn--ghost):hover, .sec--forest .btn:not(.btn--ghost):hover { background: var(--lime-2); } }
.on-dark .btn--ghost { color: var(--on-dark); border-color: var(--hair-d2); }
@media (hover: hover) and (pointer: fine) { .on-dark .btn--ghost:hover { background: rgb(242 245 230 / 0.1); border-color: var(--on-dark); } }

/* ---------------------------------------------------------------- frames -- */
.frame { position: relative; overflow: hidden; background: var(--paper-2); }
.zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; text-align: left; background: var(--paper-2); overflow: hidden; }
.zoom > img { display: block; width: 100%; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .zoom > img { transition: transform 520ms var(--sc-ease-out); }
  .zoom:hover > img { transform: scale(1.015); }
}
figure > figcaption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; flex-wrap: wrap;
  padding-top: 0.6rem; font-size: 0.88rem; color: var(--ink);
}
figure > figcaption strong { margin-right: 0.4rem; }
[data-wipe] { will-change: clip-path; }

/* ============================================================== SECTIONS == */
.sec { position: relative; padding-block: var(--sect); }
.sec--paper { background: var(--paper); }
.sec--pale { background: var(--pale); }
.sec--forest { background: var(--stripes), var(--forest); color: var(--on-dark); }
.sec--forest .credit, .sec--forest figcaption .credit { color: var(--on-dark-soft); }
.sec--forest figcaption { color: var(--on-dark); }
.sec--short { padding-block: clamp(3.5rem, 6vw, 6rem); }

/* ============================================================ THE TARGET == */
/* Top left: a dot for your door inside five rings. The ring you are on is
   lime and full; rings already passed stay faint; the light moves outward
   and comes home. The panel turns forest over dark grounds. */
.target { position: fixed; top: 0.9rem; left: 0.9rem; z-index: 60; }
.target__btn {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.45rem 1.15rem 0.45rem 0.45rem; min-height: 3.4rem;
  background: rgb(244 246 236 / 0.9); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 999px; cursor: pointer; text-align: left;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -18px rgb(10 25 24 / 0.6);
  transition: background-color 260ms var(--sc-ease-out), color 260ms var(--sc-ease-out), border-color 260ms var(--sc-ease-out);
}
.target.is-dark .target__btn { background: rgb(26 45 44 / 0.88); color: var(--on-dark); border-color: var(--hair-d); }
.target__rings { width: 2.55rem; height: 2.55rem; flex: none; overflow: visible; }
.tr { fill: none; stroke: currentColor; stroke-width: 1.1; opacity: 0.2; transition: opacity 300ms var(--sc-ease-out), stroke 300ms var(--sc-ease-out), stroke-width 300ms var(--sc-ease-out); }
.tr--0 { fill: currentColor; stroke: none; opacity: 0.35; }
.tr.is-past { opacity: 0.42; }
.tr.is-on { opacity: 1; stroke: var(--olive); stroke-width: 2.4; }
.tr--0.is-on { fill: var(--olive); }
.target.is-dark .tr.is-on { stroke: var(--lime); }
.target.is-dark .tr--0.is-on { fill: var(--lime); }
.target__text { display: grid; grid-template-columns: minmax(0, 1fr); line-height: 1.2; min-width: 9.5rem; }
.target__ring { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--olive); }
.target.is-dark .target__ring { color: var(--lime); }
.target__sec { font-size: 0.95rem; font-weight: 500; }
.index {
  position: absolute; top: calc(100% + 0.5rem); left: 0; width: min(22rem, calc(100vw - 1.8rem));
  max-height: calc(100svh - 6rem); overflow: auto;
  background: var(--card); color: var(--ink); border: 1px solid var(--hair); border-radius: 1.2rem;
  box-shadow: 0 30px 60px -28px rgb(10 25 24 / 0.6); padding: 0.6rem;
  transform-origin: 1.7rem -0.5rem;
}
.index[hidden] { display: none; }
.index.is-opening { animation: ripple-open 380ms var(--sc-ease-out) both; }
@keyframes ripple-open { from { clip-path: circle(0 at 1.7rem -0.5rem); } to { clip-path: circle(150% at 1.7rem -0.5rem); } }
.index__ring { padding: 0.75rem 0.8rem 0.25rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--olive); display: flex; align-items: center; gap: 0.5rem; }
.index__ring i { width: 0.65rem; height: 0.65rem; border-radius: 50%; border: 1.5px solid currentColor; }
.index__list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.8rem; border-radius: 0.7rem; text-decoration: none; font-size: 0.98rem; }
.index__list a[aria-current="true"] { background: var(--pale); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .index__list a:hover { background: var(--paper-2); } }
.topbook { position: fixed; top: 1.3rem; right: 1.1rem; z-index: 60; box-shadow: 0 10px 30px -16px rgb(10 25 24 / 0.7); }
.topbook.is-dark { background: var(--lime); color: var(--forest-2); }

/* ================================================================= HERO == */
/* The street render in planes. The frame is sized by script to cover the
   screen around a focal point; every plane (and the rings) fills it. */
.hero { position: relative; height: 100svh; min-height: 34rem; overflow: hidden; background: linear-gradient(to bottom, #2C64A6, #4F8DC8 60%, #7FAFD9); color: #fff; }
.hero__frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.hpl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; will-change: transform; }
.hpl--rings { overflow: visible; pointer-events: none; }
.hring { fill: none; stroke: #EEF3C6; stroke-width: 3; vector-effect: non-scaling-stroke; }
.hring--lime { stroke: var(--lime-2); stroke-width: 2.4; }
.hero__copy { position: absolute; left: 0; right: 0; top: clamp(5.8rem, 12vh, 9rem); z-index: 3; }
.hero__copy::before {
  /* a soft scrim only where the words sit */
  content: ""; position: absolute; left: calc(-1 * var(--gut) - 6rem); top: -6rem; width: min(62rem, 120vw); height: calc(100% + 12rem); z-index: -1;
  background: radial-gradient(closest-side, rgb(18 44 84 / 0.5), rgb(18 44 84 / 0.28) 55%, rgb(18 44 84 / 0));
  pointer-events: none;
}
.hero__kicker { font: 600 0.78rem/1.3 var(--sc-font-text); letter-spacing: 0.26em; text-transform: uppercase; color: #E8F0C2; margin-bottom: 1.1rem; }
.hero__title { margin: 0; }
.wordmark { display: block; width: clamp(12.5rem, 21vw, 19rem); height: auto; color: #F7F9EE; overflow: visible; }
.hero__lede { margin-top: 1.5rem; max-width: 30rem; font-size: clamp(1.06rem, 1rem + 0.35vw, 1.24rem); line-height: 1.55; color: #fff; text-shadow: 0 1px 14px rgb(14 40 80 / 0.5); text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }
.hero__cta .btn:not(.btn--ghost) { background: var(--lime); color: var(--forest-2); }
@media (hover: hover) and (pointer: fine) { .hero__cta .btn:not(.btn--ghost):hover { background: var(--lime-2); } }
.hero__cta .btn--ghost { color: #fff; border-color: rgb(255 255 255 / 0.55); background: rgb(20 50 90 / 0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (hover: hover) and (pointer: fine) { .hero__cta .btn--ghost:hover { background: rgb(20 50 90 / 0.4); border-color: #fff; } }
.hero__credit { position: absolute; right: 1.1rem; bottom: 0.9rem; z-index: 3; color: rgb(255 255 255 / 0.9); text-shadow: 0 1px 6px rgb(0 0 0 / 0.5); }
.hero__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 80%; }

/* ======================================================== YOUR ADDRESS == */
.addr { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 4vw, 4.5rem) clamp(2rem, 5vw, 5.5rem); align-items: start; }
.addr__head { grid-column: 1; }
.plate {
  grid-column: 2; grid-row: 1 / span 2; position: relative; padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--stripes), var(--forest); color: var(--on-dark); border-radius: 1.4rem;
}
.plate__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lime); }
.plate__logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: center; margin: 1.4rem 0 1.6rem; }
.plate__logos img { display: block; width: 100%; height: auto; max-height: 4.2rem; object-fit: contain; mix-blend-mode: screen; }
.plate__addr { padding-top: 1rem; border-top: 1px solid var(--hair-d); font: 400 1.15rem/1.3 var(--sc-font-display); }
.tally { grid-column: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.tally li { display: grid; gap: 0.15rem; padding: 0.9rem 0 0; border-top: 2px solid var(--forest); }
.tally__n { font: 400 clamp(1.6rem, 1.1rem + 1.5vw, 2.4rem)/1 var(--sc-font-display); font-variant-numeric: tabular-nums lining-nums; }
.tally__l { font-size: 0.82rem; color: var(--ink-soft); }
.facts { grid-column: 1; }
.devs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 3vw, 3rem); padding-top: 0.5rem; }
.devs p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.6; }
.devs strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 0.2rem; }

/* ============================================================ YOUR PARK == */
.park__head { margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }
.twin { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4vw, 2rem); }
.twin__txt { margin-top: 0.4rem; font-size: 0.95rem; color: var(--ink-soft); max-width: 40ch; }
.twin .zoom { border-radius: 1rem; aspect-ratio: 2110 / 1326; }
.twin .zoom > img { height: 100%; object-fit: cover; }
.counts { display: flex; flex-wrap: wrap; gap: 0.5rem 0.55rem; margin: clamp(2rem, 4vw, 3rem) 0; }
.counts li { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.5rem 1rem 0.55rem; border: 1px solid var(--hair-2); border-radius: 999px; font-size: 0.92rem; background: rgb(255 255 255 / 0.35); }
.counts b { font: 400 1.35rem/1 var(--sc-font-display); color: var(--olive-2); }
.gal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(0.8rem, 1.8vw, 1.4rem); align-items: start; }
.gal .zoom { border-radius: 0.8rem; }
.gal__a { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.gal__b { grid-column: 8 / span 5; }
.gal__c { grid-column: 8 / span 5; }
.gal__d { grid-column: 1 / span 4; }
.gal__e { grid-column: 5 / span 4; }
.gal__f { grid-column: 9 / span 4; }

/* ============================================================ SITE PLAN == */
.sp { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.sp__head { grid-column: 1 / -1; }
.sp__plan .zoom { border-radius: 1rem; background: #FAFBF4; }
.sp__legend { display: grid; gap: 0.5rem; }
.oasis { border: 1px solid var(--hair); border-radius: 1rem; background: var(--card); }
.oasis summary { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.1rem; cursor: pointer; list-style: none; font-weight: 600; font-size: 0.98rem; }
.oasis summary::-webkit-details-marker { display: none; }
.oasis summary::after { content: "+"; margin-left: auto; font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--ink-soft); }
.oasis[open] summary::after { content: "\2212"; }
.oasis p { padding: 0 1.1rem 0.9rem; font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft); }
.oasis p b { color: var(--ink); }
.dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; flex: none; }
.dot--aqua { background: #2B8FCF; } .dot--garden { background: #A6B43A; } .dot--adv { background: #DE8A2C; } .dot--life { background: #B23B6D; } .dot--arr { background: #2C4A63; }

/* ====================================================== DOWNSTAIRS: CUT == */
/* Held for 3.4 screens. The cut-away stands in a forest stage; the earth
   (the cover's pinstripes) covers the ground and is cut away by a lime line
   moving down; the camera (the view's transform) tracks along the section. */
.cut { position: relative; background: var(--stripes), var(--forest); color: var(--on-dark); }
.cut__track { height: 340vh; }
.cut__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.cut__view { position: absolute; left: 0; top: 0; width: 2221px; height: 930px; transform-origin: 0 0; will-change: transform; }
.cut__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%); }
.cut__earth { position: absolute; left: -400px; right: -400px; top: 764px; height: 2000px; background: var(--stripes), var(--forest-2); }
.cut__line { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--lime); box-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.5); }
.cut__marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mk { opacity: 0; transition: opacity 400ms var(--sc-ease-out); }
.mk.is-on { opacity: 1; }
.mk line { stroke: var(--lime); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.mk circle { fill: var(--lime); }
.mk__pulse { fill: none !important; stroke: var(--lime); stroke-width: 2.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.mk--mrt.is-on .mk__pulse { animation: pulse 2.4s var(--sc-ease-out) infinite; }
.mk--mrt.is-on .mk__pulse--2 { animation-delay: 0.8s; }
@keyframes pulse { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.cut__tag {
  position: absolute; transform: translate(-50%, -100%); margin-top: -0.6rem; padding: 0.4rem 0.8rem; white-space: nowrap;
  background: var(--lime); color: var(--forest-2); border-radius: 999px; font-size: 22px; font-weight: 600; letter-spacing: 0.02em;
  opacity: 0; transition: opacity 400ms var(--sc-ease-out);
}
.cut__tag.is-on { opacity: 1; }
.cut__tag--home { left: 1485px; top: 470px; }
.cut__tag--deck { left: 840px; top: 680px; }
.cut__tag--mrt { left: 2110px; top: 840px; transform: translate(-80%, -100%); }
.cut__copy {
  position: absolute; left: var(--gut); top: clamp(5.5rem, 13vh, 8rem); width: min(27rem, calc(100% - 2 * var(--gut))); z-index: 2;
  padding: 1.5rem 1.6rem 1.6rem; border-radius: 1.3rem; background: rgb(26 45 44 / 0.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7);
}
.cut__copy .kicker { color: var(--lime); margin-bottom: 0.7rem; }
.cut__min { margin-left: auto; padding: 0.2rem 0.6rem; border: 1px solid var(--lime); border-radius: 999px; letter-spacing: 0.08em; }
.cut__title { font-size: clamp(1.55rem, 1.1rem + 1.2vw, 2.3rem); max-width: 16ch; }
.cut__steps { position: relative; margin-top: 1rem; min-height: 9.5rem; }
.cut__steps > li { font-size: 0.98rem; line-height: 1.55; color: var(--on-dark-soft); }
.cut__steps > li b { display: block; color: var(--on-dark); font-weight: 600; font-size: 1.04rem; margin-bottom: 0.15rem; }
.js .cut__steps > li { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(10px); transition: opacity 360ms var(--sc-ease-out), transform 360ms var(--sc-ease-out); }
.js .cut__steps > li.is-on { opacity: 1; transform: none; }
.cut__amen { display: grid; gap: 0.45rem; }
.cut__amen span { display: flex; align-items: center; gap: 0.6rem; color: var(--on-dark); }
.cut__amen span::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1.5px solid var(--lime); }
.js .cut__amen span { opacity: 0.25; transition: opacity 300ms var(--sc-ease-out); }
.js .cut__amen span.is-on { opacity: 1; }
.js .cut__amen span.is-on::before { background: var(--lime); }
.cut__credit { position: absolute; right: 1.1rem; bottom: 0.9rem; color: var(--on-dark-soft); }

/* ===================================================== A TOWN IN A PARK == */
.blvd { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 4.5rem); align-items: center; }
.blvd__pic .zoom { border-radius: 1.2rem; }
.blvd__words p:not(.kicker) { color: var(--on-dark-soft); max-width: 44ch; }
.blvd__words .h2 { color: var(--on-dark); }
.blvd__smalls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; padding-top: 0.6rem; }
.blvd__smalls img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.7rem; }
.blvd__smalls figcaption { font-size: 0.8rem; display: grid; gap: 0; }

/* ======================================================= THE RADIUS: MAP == */
.rad { position: relative; background: var(--paper); }
.rad__track { height: 300vh; }
.rad__stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(26rem, 0.9fr); grid-template-rows: auto minmax(0, 1fr);
  gap: 1rem clamp(1.5rem, 3vw, 3rem); padding: clamp(5.4rem, 11vh, 7rem) var(--gut) clamp(1.2rem, 3vh, 2rem);
}
.rad__head { grid-column: 1; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.6rem 2rem; }
.rad__head .kicker { width: 100%; margin-bottom: 0; }
.rad__title { font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.8rem); max-width: none; }
.rad__read { display: flex; align-items: baseline; gap: 0.35rem 0.6rem; flex-wrap: wrap; }
.rad__km { font: 400 clamp(2rem, 1.3rem + 1.8vw, 3.2rem)/1 var(--sc-font-display); font-variant-numeric: tabular-nums lining-nums; color: var(--olive-2); min-width: 3.2ch; text-align: right; }
.rad__unit { font-weight: 600; color: var(--olive-2); margin-right: 0.3rem; }
.rad__count { font-size: 0.95rem; color: var(--ink-soft); }
.rad__map { grid-column: 1; grid-row: 2; position: relative; min-height: 0; border-radius: 1.2rem; overflow: hidden; background: #F3ECE8; border: 1px solid var(--hair); }
.rad__plane { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.rad__img, .rad__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rad__svg { overflow: visible; }
.rad__ring { fill: rgb(181 188 52 / 0.12); stroke: #7F8A10; stroke-width: 2.6; vector-effect: non-scaling-stroke; }
.rad__home { fill: var(--forest); stroke: var(--lime); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rad__dot { fill: #fff; stroke: var(--forest); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 280ms var(--sc-ease-out); }
.rad__dot.is-on { opacity: 1; fill: var(--lime); }
.rad__credit { position: absolute; left: 0.8rem; bottom: 0.6rem; right: 0.8rem; font-size: 0.7rem; color: var(--ink-soft); }
.rad__credit::before { content: ""; position: absolute; inset: -0.4rem -0.8rem -0.6rem; z-index: -1; background: linear-gradient(to top, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0)); }
.rad__list { display: grid; gap: 1.1rem; align-content: start; }
.rad__list--stage { grid-column: 2; grid-row: 1 / span 2; overflow: hidden; padding-top: 0.3rem; display: block; columns: 2; column-gap: 1.4rem; }
.rad__list--stage .rad__grp { break-inside: avoid; margin-bottom: 1rem; }
.rad__list--stage .rad__grp li { font-size: 0.8rem; padding: 0.1rem 0 0.1rem 0.95rem; }
.rad__grp h3 { display: flex; align-items: center; gap: 0.5rem; font: 600 0.7rem/1.3 var(--sc-font-text); letter-spacing: 0.18em; text-transform: uppercase; color: var(--olive); padding-bottom: 0.35rem; border-bottom: 1px solid var(--hair); }
.rad__grp ul { display: grid; gap: 0.05rem; margin-top: 0.35rem; }
.rad__grp li { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.86rem; line-height: 1.4; padding: 0.16rem 0; color: var(--ink-soft); transition: color 260ms var(--sc-ease-out), opacity 260ms var(--sc-ease-out); }
.rad__grp li .t { flex: none; font-variant-numeric: tabular-nums; }
.js .rad__list--stage li { opacity: 0.38; }
.js .rad__list--stage li.is-on { opacity: 1; color: var(--ink); }
.js .rad__list--stage li.is-on::before { background: var(--lime); border-color: var(--olive); }
.rad__grp li { position: relative; padding-left: 1rem; }
.rad__grp li::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1.5px solid var(--hair-2); }
.rad__ticker { display: none; }
.rad__after { padding: 0 0 var(--sect); }
.rad__list--flow { display: none; }
.rad__mrt { max-width: 70ch; padding-top: 1.4rem; border-top: 1px solid var(--hair); }

/* ===================================================== BACK AT THE DOOR == */
.homes__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.7rem, 1.6vw, 1.2rem); }
.rooms .zoom { border-radius: 0.9rem; aspect-ratio: 1016 / 1300; }
.rooms .zoom > img { height: 100%; object-fit: cover; }
.rooms__b, .rooms__d { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.layouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 1.8vw, 1.4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.lay { display: grid; gap: 0.8rem; align-content: start; padding: 1.4rem 1.4rem 1.5rem; background: var(--card); border: 1px solid var(--hair); border-radius: 1.2rem; }
.lay__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.lay__type { font: 400 1.65rem/1 var(--sc-font-display); }
.lay__left { font-size: 0.82rem; font-weight: 600; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--lime); color: var(--forest-2); white-space: nowrap; }
.lay__cat { font-weight: 600; }
.lay__size { color: var(--ink-soft); font-size: 0.95rem; }
.lay__units { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.6; }
.lay__btns { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.3rem; }
.lay__btns .btn { min-height: 2.6rem; padding: 0.5rem 1.05rem; font-size: 0.74rem; }

/* ========================================================== FLOOR PLANS == */
.plans__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 1.8vw, 1.4rem); }
.sheet { display: grid; gap: 0.7rem; align-content: start; text-align: left; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.sheet__img { display: block; background: #fff; border-radius: 1rem; border: 1px solid var(--hair); overflow: hidden; aspect-ratio: 700 / 760; }
.sheet__img img { display: block; width: 100%; height: auto; transition: transform 520ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .sheet:hover .sheet__img img { transform: scale(1.02); } }
.sheet__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.sheet__cap b { font: 400 1.25rem/1.1 var(--sc-font-display); font-weight: 400; }
.sheet__cap span { font-size: 0.86rem; color: var(--ink-soft); }
.plans__dl { margin-top: 1.8rem; }

/* ========================================================= AVAILABILITY == */
.avail__head { display: grid; gap: 0.8rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.avail__head .h2 { max-width: none; }
.avail__num { color: var(--olive-2); }
.blocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.7rem, 1.6vw, 1.2rem); }
.blk { padding: 0.9rem 0.9rem 1rem; background: var(--card); border: 1px solid var(--hair); border-radius: 1rem; }
.blk.is-out { background: transparent; }
.blk__top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.65rem; }
.blk__no { font: 400 1.15rem/1 var(--sc-font-display); }
.blk__left { font-size: 0.76rem; font-weight: 600; color: var(--olive-2); }
.blk.is-out .blk__left { color: var(--ink-soft); font-weight: 500; }
.blk__grid { display: grid; gap: 2px; }
.cell { height: 0.62rem; border-radius: 2px; background: rgb(29 51 50 / 0.16); }
.cell--gap { background: none; }
.cell--open {
  height: 0.62rem; padding: 0; border: 0; cursor: pointer; background: var(--lime); box-shadow: 0 0 0 1.5px var(--olive-2);
  position: relative; z-index: 1;
}
@media (hover: hover) and (pointer: fine) { .cell--open:hover { background: var(--olive); } }
.cell--open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cell--open.is-hit { animation: hit 1.4s var(--sc-ease-out) 2; }
@keyframes hit { 50% { box-shadow: 0 0 0 5px rgb(181 188 52 / 0.6); } }
.blk__addr { margin-top: 0.6rem; font-size: 0.74rem; color: var(--ink-soft); }
.blk__list { margin-top: 0.45rem; font-size: 0.8rem; font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; }
.avail__key { display: flex; gap: 1.5rem; margin-top: 1.2rem; }
.avail__key span { display: inline-flex; align-items: center; gap: 0.5rem; }
.k { display: inline-block; width: 0.9rem; height: 0.62rem; border-radius: 2px; }
.k--open { background: var(--lime); box-shadow: 0 0 0 1.5px var(--olive-2); }
.k--sold { background: rgb(29 51 50 / 0.16); }

/* ============================================================ eBROCHURE == */
.ebro { display: grid; grid-template-columns: minmax(10rem, 17rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.ebro__cover { display: block; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 30px 50px -26px rgb(10 25 24 / 0.7); transform: rotate(-2deg); transition: transform 420ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .ebro__cover:hover { transform: rotate(0deg) translateY(-4px); } }
.ebro__cover img { display: block; width: 100%; height: auto; }
.ebro__btns { display: flex; flex-wrap: wrap; gap: 0.6rem; padding-top: 0.5rem; }

/* ============================================================ THE CLOSE == */
/* The rings come home: they draw in around the booking card as you arrive;
   a sent booking closes the last ring round the card. */
.close { position: relative; overflow: hidden; padding-block: var(--sect); background: var(--stripes), var(--forest); color: var(--on-dark); }
.close__rings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.close__rings circle { fill: none; stroke: var(--lime); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0.22; transform-box: view-box; transform-origin: 0 0; }
.book { position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 4.5vw, 5rem); align-items: start; }
.book__pic img { display: block; width: 100%; height: auto; border-radius: 1.2rem; }
.book__pic figcaption { color: var(--on-dark); }
.book__pic .credit { color: var(--on-dark-soft); }
.book__side { display: grid; gap: 2rem; }
.book__title { color: var(--on-dark); }
.book__intro .lede { color: var(--on-dark-soft); margin-top: 0.8rem; }
.book__facts { margin-top: 1.4rem; display: grid; gap: 0; }
.book__facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--hair-d); font-size: 0.97rem; }
.book__facts > div:first-child { border-top: 1px solid var(--hair-d); }
.book__facts dt { color: var(--on-dark-soft); }
.book__facts dd { text-align: right; font-weight: 500; }
.book__facts a { color: var(--on-dark); text-decoration-color: var(--lime); text-underline-offset: 0.25em; }

/* ----------------------------------------------------- the booking card -- */
.card-wrap { position: relative; }
/* the last ring: a lime outline that closes in round the card when the booking is sent */
.card-wrap::after {
  content: ""; position: absolute; inset: -10px; border: 2px solid var(--lime); border-radius: 1.6rem;
  opacity: 0; pointer-events: none; transform: scale(1.12);
}
.card-wrap.is-closed::after { animation: close-ring 1000ms cubic-bezier(.3,.7,.2,1) forwards; }
@keyframes close-ring { to { opacity: 1; transform: none; } }
.card { background: var(--card); color: var(--ink); }
.tb { position: relative; overflow: hidden; border-radius: 1.1rem; box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.65); }
.tb > * { border-top: 1px solid var(--hair-2); }
.tb > :first-child, .tb > input, .tb > .hp { border-top: 0; }
.tb__head { position: relative; padding: 1.4rem 1.5rem 1.2rem; border-top: 0 !important; }
.tb__title { font: 400 1.75rem/1.05 var(--sc-font-display); text-transform: uppercase; color: var(--ink); }
.tb__sub { margin-top: 0.45rem; font-size: 0.93rem; color: var(--ink-soft); }
.tb__interest { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.5rem; background: #EDF2D2; font-size: 0.92rem; }
.tb__interest[hidden] { display: none; }
.tb__interest-x { background: none; border: 0; padding: 0.25rem; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; color: var(--ink-soft); }
.when { border: 0; margin: 0; padding: 1.25rem 1.5rem; min-width: 0; }
.when__legend { padding: 0; margin-bottom: 1rem; float: left; width: 100%; font: 600 0.72rem/1.2 var(--sc-font-text); letter-spacing: 0.18em; text-transform: uppercase; color: var(--olive); }
.when__legend + * { clear: both; }
.when__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1.1rem; }
.when__tabs button {
  display: grid; gap: 0.3rem; text-align: left; padding: 0.65rem 0.9rem; min-height: 3.6rem;
  background: #fff; border: 1px solid var(--hair-2); border-radius: 0.8rem; cursor: pointer; color: var(--ink);
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
.when__n { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.when__v { font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); }
.when__tabs button.is-set .when__v { color: var(--ink); }
.when__tabs [aria-selected="true"] { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest), inset 0 -4px 0 var(--lime); }
@media (hover: hover) and (pointer: fine) { .when__tabs button:hover { border-color: var(--forest); } }
.when__month { font-size: 0.92rem; font-weight: 600; margin-bottom: 0.75rem; }
.when__dow, .when__dates { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; }
.when__dow { font-size: 0.72rem; color: var(--ink-soft); text-align: center; margin-bottom: 0.35rem; }
.when__dates { margin-bottom: 1.1rem; }
.when__dates button, .when__times button {
  position: relative; font: 500 0.92rem/1 var(--sc-font-text); color: var(--ink);
  background: #fff; border: 1px solid var(--hair-2); border-radius: 0.6rem;
  cursor: pointer; min-height: 2.75rem; padding: 0.3rem 0.2rem; font-variant-numeric: tabular-nums;
  transition: background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.when__dates button { display: grid; place-items: center; align-content: center; gap: 0.1rem; }
.when__dates .m { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.when__dates .pad { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .when__dates button:hover, .when__times button:hover { border-color: var(--forest); } }
.when__dates [aria-checked="true"], .when__times [aria-checked="true"] { background: var(--forest); border-color: var(--forest); color: #fff; }
.when__dates [aria-checked="true"] .m { color: rgb(255 255 255 / 0.8); }
.when__dates button[data-other]::after { content: ""; position: absolute; left: 50%; bottom: 0.26rem; width: 0.32rem; height: 0.32rem; margin-left: -0.16rem; border-radius: 50%; background: var(--olive); }
.when__times { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; }
.when__times button:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.when__native label { display: block; margin-top: 0.75rem; font-size: 0.92rem; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { padding: 0.8rem 1.5rem 0.95rem; min-width: 0; }
.field + .field { border-left: 1px solid var(--hair-2); }
.field--wide { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--hair-2); }
.field label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.45rem; }
.field input {
  width: 100%; min-height: 2.9rem; padding: 0.65rem 0.85rem;
  background: #FDFEF9; border: 1px solid rgb(29 51 50 / 0.32); border-radius: 0.6rem;
  font: 400 1rem/1.2 var(--sc-font-text); color: var(--ink);
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.field input::placeholder { color: color-mix(in oklab, var(--ink-soft) 85%, transparent); }
.field input:focus-visible { border-color: var(--forest); background: #fff; outline-offset: 1px; }
.field input[aria-invalid="true"] { border-color: #A3342A; }
.field__error { margin: 0.35rem 0 0; font-size: 0.88rem; color: #A3342A; }
.field__error:empty { display: none; }
.tb__submit { padding: 1.25rem 1.5rem 1rem; }
.tb__fineprint { margin-top: 1rem; font-size: 0.82rem; line-height: 1.55; color: var(--ink-soft); text-align: center; text-wrap: pretty; }
.tb__status { padding: 1rem 1.5rem; font-size: 0.93rem; }
.tb__status.is-wait { background: #EEF2DC; color: var(--ink); }
.tb__status.is-err { background: #F7E2DA; color: #7A2A14; }
.tb__status a { color: inherit; font-weight: 600; }
.tb__status:focus { outline: none; }
.tb.is-sending > :not([data-status]):not(.tb__head), .tb.is-done > :not([data-status]) { display: none; }
.tb.is-sending .tb__status { padding: 2rem 1.75rem; font-size: 1.1rem; line-height: 1.55; }
.tb__status.is-ok { padding: 2.4rem 1.9rem 2.2rem; background: var(--card); color: var(--ink); font-size: 1.06rem; line-height: 1.6; animation: settle 700ms var(--sc-ease-out) both; }
.tb__status.is-ok strong { display: block; margin-bottom: 0.5rem; font: 400 1.75rem/1.1 var(--sc-font-display); text-transform: uppercase; color: var(--ink); }
.tb__status.is-ok .ok-mark { display: block; width: 3.2rem; height: 3.2rem; margin-bottom: 1.1rem; }
.ok-mark circle { fill: none; stroke: var(--olive); stroke-width: 2; }
.ok-mark circle:last-child { fill: var(--olive); stroke: none; }
@keyframes settle { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --------------------------------------------------------------- footer -- */
.foot { position: relative; padding: 2.25rem var(--gut) 2.75rem; font-size: 0.88rem; background: var(--deep); color: var(--on-dark-soft); border-top: 1px solid var(--hair-d); }
.foot__lines { text-align: center; }
.foot__lines p { line-height: 1.7; }
.foot__lines p + p { margin-top: 0.25rem; }
.foot__lines span { white-space: nowrap; }
.foot a { color: var(--on-dark); text-decoration-color: var(--lime); text-underline-offset: 0.25em; }

/* ------------------------------------------------------------- dialogs -- */
dialog { border: 0; padding: 0; color: var(--ink); background: var(--card); box-shadow: var(--sc-e3); border-radius: 1.1rem; }
dialog::backdrop { background: rgb(13 30 29 / 0.7); }
.dlg-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 1rem 0.9rem 1.4rem; border-bottom: 1px solid var(--hair); }
.dlg-title { font: 400 1.25rem/1.2 var(--sc-font-display); text-transform: uppercase; color: var(--ink); }
.dlg-close { min-height: 2.5rem; padding: 0.4rem 1.1rem; cursor: pointer; background: var(--forest); color: #fff; border: 0; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.plan-dlg { width: min(68rem, calc(100vw - 2rem)); height: min(56rem, calc(100svh - 2rem)); }
.plan-dlg[open] { display: grid; grid-template-rows: auto 1fr; }
.plan-dlg__body { display: grid; grid-template-columns: minmax(16rem, 0.75fr) minmax(0, 1.45fr); min-height: 0; }
.plan-dlg__meta { padding: 1.25rem 1.4rem; overflow: auto; border-right: 1px solid var(--hair); }
.plan-dlg__meta .facts { margin-top: 0.75rem; }
.plan-dlg__meta .btn { margin-top: 1.25rem; width: 100%; }
.plan-dlg__meta .link-arrow { display: inline-block; margin-top: 0.9rem; }
.plan-dlg__units { margin-top: 1rem; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.6; }
.plan-dlg__units b { color: var(--ink); }
.plan-dlg__units button { margin: 0.25rem 0.3rem 0 0; padding: 0.32rem 0.7rem; border: 1px solid var(--hair-2); border-radius: 999px; background: #fff; cursor: pointer; font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-dlg__units button[aria-pressed="true"] { background: var(--forest); color: #fff; border-color: var(--forest); }
.plan-dlg__img { overflow: auto; background: #fff; display: grid; place-items: start center; }
.plan-dlg__img img { width: 100%; max-width: 46rem; height: auto; display: block; }
.viewer { width: calc(100vw - 2rem); height: calc(100svh - 2rem); max-width: none; max-height: none; }
.viewer[open] { display: grid; grid-template-rows: auto 1fr; }
.viewer__body { overflow: auto; background: #fff; display: grid; place-items: start center; }
.viewer__body img { display: block; width: auto; max-width: none; height: auto; }
.viewer.is-fit .viewer__body img { width: 100%; max-width: 100%; cursor: zoom-in; }
.viewer:not(.is-fit) .viewer__body img { cursor: zoom-out; }

/* ============================================================== TABLET == */
@media (max-width: 1100px) {
  .addr { grid-template-columns: 1fr; }
  .addr__head, .plate, .tally, .facts { grid-column: 1; grid-row: auto; }
  .devs { grid-template-columns: 1fr; gap: 1rem; }
  .sp { grid-template-columns: 1fr; }
  .blvd { grid-template-columns: 1fr; }
  .book { grid-template-columns: 1fr; }
  .book__pic { max-width: 34rem; }
  .blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rad__stage { grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.9fr); }
  .rad__list--stage .rad__grp li .t { font-size: 0.74rem; }
}

/* =============================================================== PHONE == */
@media (max-width: 860px) {
  :root { --bar-h: 3.6rem; }
  body { font-size: 1rem; }
  .target { top: 0; left: 0; right: 0; }
  .target__btn { width: 100%; border-radius: 0; min-height: var(--bar-h); padding: 0.4rem 7.6rem 0.4rem 0.7rem; border-width: 0 0 1px; box-shadow: none; }
  .target__rings { width: 2.2rem; height: 2.2rem; }
  .target__text { min-width: 0; }
  .target__sec { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .target__ring { font-size: 0.6rem; letter-spacing: 0.14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .index { left: 0.6rem; top: calc(100% + 0.4rem); width: calc(100vw - 1.2rem); }
  .topbook { top: 0.55rem; right: 0.6rem; min-height: 2.5rem; padding: 0.45rem 0.95rem; font-size: 0.7rem; }

  .hero { min-height: 36rem; }
  .hero__copy { top: calc(var(--bar-h) + 2rem); }
  .hero__copy::before { width: 100vw; left: calc(-1 * var(--gut)); }
  .wordmark { width: 11.5rem; }
  .hero__lede { font-size: 1.02rem; margin-top: 1.1rem; }
  .hero__cta { margin-top: 1.3rem; }

  .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.8rem; }
  .twin { grid-template-columns: 1fr; gap: 1.8rem; }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal__a { grid-column: 1 / -1; grid-row: auto; }
  .gal__b, .gal__c, .gal__d, .gal__e, .gal__f { grid-column: auto; }
  .gal__f { display: none; }
  .gal figcaption { font-size: 0.8rem; }

  .cut__copy { top: calc(var(--bar-h) + 0.8rem); left: 0.8rem; right: 0.8rem; width: auto; padding: 1.05rem 1.1rem 1.1rem; border-radius: 1rem; }
  .cut__title { font-size: 1.35rem; }
  .cut__steps { min-height: 7.6rem; margin-top: 0.7rem; }
  .cut__steps > li { font-size: 0.9rem; }
  .cut__amen { gap: 0.3rem; }
  .cut__amen span { font-size: 0.88rem; }

  .rad__stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(var(--bar-h) + 1rem) 0.8rem 1rem; gap: 0.7rem; }
  .rad__head { gap: 0.3rem 1rem; }
  .rad__title { font-size: 1.5rem; }
  .rad__km { font-size: 2rem; min-width: 0; text-align: left; }
  .rad__count { font-size: 0.86rem; width: 100%; }
  .rad__list--stage { display: none; }
  .rad__ticker { display: block; grid-row: 3; min-height: 2.8rem; font-size: 0.92rem; line-height: 1.45; color: var(--ink); }
  .rad__ticker b { font-weight: 600; }
  .rad__list--flow { display: grid; grid-template-columns: 1fr; padding-top: 2rem; }
  .rad__after { padding-bottom: 4rem; }

  .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rooms__b, .rooms__d { margin-top: 1.5rem; }
  .layouts, .sheets { grid-template-columns: 1fr; }
  .sheet__img { aspect-ratio: auto; }
  .blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .blk { padding: 0.75rem 0.7rem 0.85rem; }
  .cell, .cell--open { height: 0.7rem; }
  .ebro { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; }
  .ebro__btns .btn, .plans__dl .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.3; }
  #ebrochure { overflow-x: clip; }

  .fields { grid-template-columns: 1fr; }
  .field + .field { border-left: 0; border-top: 1px solid var(--hair-2); }
  .when, .field, .tb__head, .tb__submit { padding-left: 1.1rem; padding-right: 1.1rem; }
  .plan-dlg { width: 100vw; height: 100svh; max-width: none; max-height: none; border-radius: 0; }
  .plan-dlg__body { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow: auto; }
  .plan-dlg__meta { border-right: 0; border-bottom: 1px solid var(--hair); }
  .viewer { width: 100vw; height: 100svh; border-radius: 0; }
  .facts dd { text-align: right; }
}
@media (max-width: 420px) {
  .when__times { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .counts li { font-size: 0.86rem; padding: 0.42rem 0.8rem 0.46rem; }
}

/* ========================================================= WITHOUT SCRIPT == */
.no-js [data-sc-in], .no-js [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; }
.no-js .hero__frame { display: none; }
.no-js .cut__track, .no-js .rad__track { height: auto; }
.no-js .cut__stage { position: relative; height: auto; display: grid; gap: 1.5rem; padding: 2rem var(--gut) 3rem; }
.no-js .cut__view { position: relative; width: 100%; height: auto; aspect-ratio: 2221 / 930; }
.no-js .cut__earth, .no-js .cut__marks, .no-js .cut__tag { display: none; }
.no-js .cut__copy { position: relative; left: auto; top: auto; width: auto; max-width: 40rem; }
.no-js .rad__stage { position: relative; height: auto; }
.no-js .rad__map { aspect-ratio: 739 / 697; }
.no-js .rad__plane { width: 100%; height: 100%; }
.no-js .rad__ring { display: none; }

/* ====================================================== REDUCED MOTION == */
/* No holds: the cut stands open in full with every level named; the map
   shows its whole extent with every place lit; the rings stand still. */
.is-reduced .cut__track, .is-reduced .rad__track { height: auto; }
.is-reduced .cut__stage { position: relative; height: auto; display: grid; gap: 1.5rem; padding: 6rem var(--gut) 3rem; overflow: visible; }
.is-reduced .cut__view { position: relative; transform-origin: 0 0; }
.is-reduced .cut__earth { display: none; }
.is-reduced .cut__tag, .is-reduced .mk { opacity: 1; }
.is-reduced .cut__copy { position: relative; left: auto; top: auto; width: auto; max-width: 44rem; }
.is-reduced .cut__steps > li { position: static !important; opacity: 1 !important; transform: none !important; margin-top: 0.7rem; }
.is-reduced .cut__amen span { opacity: 1 !important; }
.is-reduced .rad__stage { position: relative; height: auto; min-height: 0; }
.is-reduced .rad__map { aspect-ratio: 739 / 697; }
.is-reduced .rad__list--stage li { opacity: 1 !important; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .mk--mrt.is-on .mk__pulse { animation: none; opacity: 0.6; }
  .card-wrap.is-closed::after { animation: none; opacity: 1; transform: none; }
  .index.is-opening { animation: none; }
}