/* ==========================================================================
   M60 Office Park — override sheet.
   Printed at wp_head PHP_INT_MAX so it lands AFTER Elementor base and
   Global-Classes sheets, which is what lets these bare class selectors win.

   Header and footer render from EMCP Themer as plain markup OUTSIDE any
   `.elementor` wrapper, so selectors here are deliberately unprefixed. If a
   rule later has to beat an Elementor global class (which emits as
   `.elementor .<label>`, 0,2,0), that specific rule needs an `.elementor`
   prefix or an ID scope — a bare class loses that tie.

   JS hooks are CLASSES, not data-attributes: atomic tools cannot set data-*
   attributes, but a global class label becomes a literal DOM class.
   ========================================================================== */

/* --- Base ---------------------------------------------------------------- */

body {
  background: var(--m60-off-white);
  color: var(--m60-slate);
  font-family: var(--m60-font);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* TODO — once the Typekit kit lands, measure Myriad Pro against the fallback
   and set size-adjust/ascent-override here so the swap costs no CLS. Faking
   metrics before the real font is available would be worse than omitting them. */

a { color: inherit; text-decoration: none; }
a:hover { color: var(--m60-hover); }
::selection { background: var(--m60-yellow); color: var(--m60-ink); }
:focus-visible { outline: 2px solid var(--m60-yellow); outline-offset: 2px; }

/* --- Shared bits --------------------------------------------------------- */

.m60-eyebrow {
  font-family: var(--m60-font);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-grey);
}

.m60-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--m60-yellow);
  color: var(--m60-ink);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  will-change: transform;
}
.m60-pill:hover { color: var(--m60-ink); }

/* Magnetic + ripple are JS-driven; this only declares the transition. */
.m60-magnetic { transition: transform 0.35s var(--m60-ease); }

/* --- Header -------------------------------------------------------------- */

.m60-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  padding: 0;
  opacity: 0;
  transition:
    transform 0.6s var(--m60-ease),
    background 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.4s ease,
    padding 0.4s ease,
    border-radius 0.4s ease,
    margin 0.4s ease;
}
.m60-nav.is-ready { opacity: 1; }

.m60-nav__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 26px var(--m60-gutter);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: inherit;
}

/* Scrolled state (past 8px) — the inline-style branch from the bundle, as CSS. */
.m60-nav.is-scrolled { padding: 14px var(--m60-gutter); }
.m60-nav.is-scrolled .m60-nav__inner {
  padding: 12px 14px 12px 24px;
  background: rgba(250,250,248,0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(20,21,22,0.10);
  border-radius: 999px;
  box-shadow: 0 20px 50px -30px rgba(20,21,22,0.5);
}

/* Logo / tel / burger invert against whatever is behind them, until the bar
   goes solid — then they render normally over the light pill. */
.m60-blend { mix-blend-mode: difference; }
.m60-nav.is-scrolled .m60-blend { mix-blend-mode: normal; }

/* --- hello-elementor reset guard ----------------------------------------- */
/* The parent theme's `assets/css/reset.css` paints EVERY bare <button> on
   both :hover AND :focus:

     [type="button"]:focus, [type="button"]:hover,
     [type="submit"]:focus, [type="submit"]:hover,
     button:focus, button:hover {
       background-color: #CC3366; color: #fff; text-decoration: none;
     }

   That is (0,1,1), so a single class on our side loses to it. All of this
   site's button chrome is a bare <button> — the nav's Buildings toggle, the
   burger, the menu close, the Elm Court tour tabs — so every one of them
   flashed magenta on hover, and still would on keyboard focus even where a
   two-class :hover rule happened to win.

   These restate the resting background at (0,2,0) and let each component's own
   :hover rule supply the real state. `text-decoration` is restated too, since
   the reset clears it. Anything new that renders as a <button> must be added
   here — check before assuming a hover "just works". */
.m60-navlink:hover,
.m60-navlink:focus,
.m60-burger:hover,
.m60-burger:focus,
.m60-menu__close:hover,
.m60-menu__close:focus,
.m60-tab:hover,
.m60-tab:focus {
  background-color: transparent;
}

/* The reset forces color:#fff alongside the magenta. The nav's own colour
   rules already outrank it, but the menu close and the tabs do not. */
.m60-menu__close:hover,
.m60-menu__close:focus { color: #fff; }
.m60-tab:focus { color: var(--m60-grey); }
.m60-tab.is-active:focus { color: var(--m60-yellow); }


.m60-nav__brand { display: flex; align-items: center; gap: 14px; flex: none; }
.m60-logo-img { height: 39px; width: auto; display: block; }

.m60-nav__links {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  padding: 0;
  width: auto;
}

.m60-navlink {
  position: relative;
  padding: 4px 0;
  font-size: 1.02rem;
  font-weight: 500;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}
.m60-nav.is-scrolled .m60-navlink { color: var(--m60-slate); }

/* Underline is a pseudo-element, not a nested span: atomic widgets cannot
   emit a decorative empty <span>, and this is one fewer node either way. */
.m60-navlink::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--m60-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--m60-ease);
}
.m60-navlink:hover::after,
.m60-navlink:focus-visible::after { transform: scaleX(1); }

/* Buildings dropdown */
.m60-dd { position: relative; }
.m60-dd__toggle { display: flex; align-items: center; gap: 8px; }

/* Pinging availability dot — pseudo-element on the toggle itself. */
.m60-dd__toggle::before {
  content: "";
  position: relative; display: block;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--m60-yellow); flex: none;
  order: 2; /* sits after the label, as in the design */
  box-shadow: 0 0 0 0 var(--m60-yellow);
  animation: m60-ping-shadow 2.6s ease-out infinite;
}
@keyframes m60-ping-shadow {
  0%   { box-shadow: 0 0 0 0 rgba(220,220,0,0.55); }
  100% { box-shadow: 0 0 0 8px rgba(220,220,0,0); }
}
/* Explicit order so the pseudo-element dot lands between label and chevron. */
.m60-dd__toggle > .m60-dd__label { order: 1; }
.m60-dd__toggle > .m60-dd__chevron { order: 3; }

.m60-dd__panel {
  position: absolute;
  top: 100%; left: -14px;
  padding-top: 16px;
  min-width: 200px;
  display: none;
}
.m60-dd.is-open .m60-dd__panel { display: block; }
.m60-dd__list {
  display: flex; flex-direction: column;
  background: var(--m60-ink);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 24px 50px -28px rgba(20,21,22,0.7);
}
.m60-dd__list a {
  padding: 13px 18px;
  font-size: 0.88rem;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.m60-dd__list a:last-child { border-bottom: 0; }
.m60-dd__list a:hover { background: var(--m60-yellow); color: var(--m60-ink); }

.m60-badge {
  flex: none;
  background: var(--m60-yellow);
  color: var(--m60-ink);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 7px;
}

.m60-nav__tel {
  display: none;
  align-items: center;
  gap: 9px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
.m60-nav.is-scrolled .m60-nav__tel { color: var(--m60-grey); }

.m60-nav__actions {
  display: flex; flex-direction: row;
  align-items: center; gap: 20px; flex: none;
  padding: 0; width: auto;
}

/* Two rules, both pseudo-elements — nothing for Elementor to have to emit. */
.m60-burger {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  gap: 5px; width: 44px; height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 0; /* the accessible label lives in aria-label */
}
.m60-burger::before,
.m60-burger::after {
  content: ""; display: block; height: 1px; background: #fff;
  transition: background 0.4s ease;
}
.m60-burger::before { width: 22px; }
.m60-burger::after  { width: 14px; }
.m60-nav.is-scrolled .m60-burger::before,
.m60-nav.is-scrolled .m60-burger::after { background: var(--m60-ink); }

/* --- Full-screen menu ---------------------------------------------------- */

.m60-menu {
  position: fixed; inset: 0; z-index: 900;
  background: var(--m60-ink);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px,8vw,90px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.5s var(--m60-ease);
}
.m60-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.m60-menu__close {
  position: absolute; top: 26px; right: var(--m60-gutter);
  width: 44px; height: 44px;
  background: none; border: 0; color: #fff;
  font-size: 0.72rem; letter-spacing: 0.14em; cursor: pointer;
}

.m60-menu__lines { display: flex; flex-direction: column; gap: 6px; }
.m60-menu__row { overflow: hidden; }

/* Reveal is separated from typography so the small court links can slide up
   too without inheriting the display size. */
.m60-reveal {
  transform: translateY(110%);
  transition: transform 0.7s var(--m60-ease);
}
.m60-menu.is-open .m60-reveal { transform: translateY(0); }

.m60-menuline {
  display: block;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(2rem,8vw,3.8rem);
  color: #fff;
}

/* Staggered reveal — the bundle used i * 0.06s. */
.m60-menu.is-open .m60-menu__row:nth-child(1) .m60-reveal { transition-delay: 0s; }
.m60-menu.is-open .m60-menu__row:nth-child(2) .m60-reveal { transition-delay: 0.06s; }
.m60-menu.is-open .m60-menu__row:nth-child(3) .m60-reveal { transition-delay: 0.12s; }
.m60-menu.is-open .m60-menu__row:nth-child(4) .m60-reveal { transition-delay: 0.18s; }
.m60-menu.is-open .m60-menu__row:nth-child(5) .m60-reveal { transition-delay: 0.24s; }

.m60-menu__courts {
  display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 8px 0 14px;
}
.m60-menu__courts a {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--m60-grey);
}
.m60-menu__courts a.is-available {
  display: inline-flex; align-items: center; gap: 8px; color: var(--m60-yellow);
}

.m60-menu__meta {
  margin-top: 48px;
  display: flex; flex-wrap: wrap; gap: 14px 32px;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--m60-grey);
}
.m60-menu__meta a { color: #fff; }

/* --- Footer -------------------------------------------------------------- */

.m60-footer {
  background: var(--m60-ink);
  color: #fff;
  padding: clamp(70px,9vw,120px) var(--m60-gutter) clamp(40px,5vw,64px);
  overflow: hidden;
}
.m60-footer__wrap { max-width: 1440px; margin: 0 auto; width: 100%; padding: 0; }

.m60-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px,4vw,60px);
  padding: 0 0 clamp(50px,6vw,80px);
  border-bottom: 1px solid var(--m60-rule);
}

.m60-footer__logo { height: 44px; width: auto; display: block; margin-bottom: 26px; }
.m60-footer address { font-style: normal; color: var(--m60-body-dim); line-height: 1.7; }
.m60-footer__satnav {
  margin-top: 18px;
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--m60-yellow);
}
.m60-footer__col-head {
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--m60-grey); margin-bottom: 18px;
}
.m60-footer__list { display: flex; flex-direction: column; gap: 10px; padding: 0; }
.m60-footer__list a { color: var(--m60-body-dim); }
.m60-footer__list--strong a { color: #fff; }
.m60-footer__list a:hover { color: var(--m60-yellow); }

.m60-footer__bar {
  display: flex; flex-direction: row; flex-wrap: wrap;
  gap: 14px 32px; justify-content: space-between;
  padding: 26px 0;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--m60-grey);
}
.m60-footer__legal { display: flex; gap: 24px; }

/* --- Breakpoints --------------------------------------------------------- */
/* The bundle applied these in JS on resize; as CSS they cost nothing and
   work before JS runs. Values are the thresholds the bundle used. */

@media (min-width: 640px) {
  .m60-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .m60-nav__links { display: flex; }
  .m60-burger { display: none; }
  .m60-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 0.8fr; }
}
@media (min-width: 1200px) {
  .m60-nav__tel { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Hero ---------------------------------------------------------------- */
/* Scoped by ID. Atomic v4 stores class REFERENCES, not literal class strings,
   so `css_id` is the reliable hook from the EMCP add-* tools. IDs also double
   as the anchor targets the nav links to. Every rule here also has to beat
   Elementor base styles (.e-flexbox-base padding:10px / width:100% /
   direction:column, and .e-button-base blue background). */

/* Scoped to `section` deliberately. The homepage hero is <section id="top">,
   but page-latest-news.php uses <main id="top"> for the same nav/skip anchor.
   Unscoped, `#top` handed that <main> the hero height:100vh, display:flex,
   overflow:hidden, dark background and both gradient pseudo-elements - which
   crushed the entire News page into a single viewport. Keep the qualifier. */
section#top {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--m60-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}

/* Gradient wash — the animated backdrop behind the video. */
section#top::before {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(60% 55% at 22% 28%, #3A3B33 0%, rgba(20,21,22,0) 62%),
    radial-gradient(48% 44% at 78% 66%, rgba(220,220,0,0.20) 0%, rgba(20,21,22,0) 60%),
    linear-gradient(148deg, #141516 0%, #2B2C2E 46%, #141516 100%);
  animation: m60-wash 26s ease-in-out infinite alternate;
}

/* Scrim, so the copy holds contrast over any backdrop. */
section#top::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,21,22,0.68) 0%, rgba(20,21,22,0.46) 45%, rgba(20,21,22,0.90) 100%);
}

@keyframes m60-wash {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1.18); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.32); }
}

#hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: clamp(70px,11vh,140px) var(--m60-gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 34px;
}

#hero-title {
  margin: 0;
  max-width: 24ch; /* approximates the three explicit lines in the design */
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-size: clamp(2rem,5.4vw,5.6rem);
  color: #fff;
  text-transform: none;
}

#hero-lead {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1.05rem,1.4vw,1.3rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  text-wrap: pretty;
}

#hero-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  width: auto;
  padding: 0;
}

#hero-cta-primary,
#hero-cta-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  will-change: transform;
}
#hero-cta-primary {
  background: var(--m60-yellow);
  border: 0;
  color: var(--m60-ink);
}
#hero-cta-primary:hover { color: var(--m60-ink); }
#hero-cta-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
}
#hero-cta-ghost:hover { border-color: var(--m60-yellow); color: var(--m60-yellow); }

/* Ticker. JS clones the text into a two-copy track so the loop is seamless. */
#hero-ticker {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  height: 42px;
  width: 100%;
  padding: 0;
  background: var(--m60-yellow);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.m60-ticker__track {
  display: flex;
  flex: none;
  white-space: nowrap;
  animation: m60-marquee 32s linear infinite;
  will-change: transform;
}
#hero-ticker:hover .m60-ticker__track { animation-play-state: paused; }
#hero-ticker-text,
.m60-ticker__track > p {
  margin: 0;
  display: flex;
  flex: none;
  padding: 0 1.2em 0 0;
  white-space: nowrap;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-ink);
}
@keyframes m60-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Buildings ----------------------------------------------------------- */

#buildings {
  position: relative;
  overflow: hidden;
  background: var(--m60-off-white);
  padding: clamp(70px,9vw,130px) var(--m60-gutter) clamp(80px,12vw,180px);
  display: flex;
  flex-direction: column;
  gap: clamp(34px,4vw,56px);
}

/* Paper texture. URL comes from an attachment id via --m60-texture. */
#buildings::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--m60-texture);
  background-size: cover;
  background-position: center;
  opacity: 0.05;
  pointer-events: none;
}

#buildings > * { position: relative; z-index: 1; }

#buildings-title {
  margin: 0;
  max-width: 16ch;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  font-size: clamp(1.9rem,4vw,3.6rem);
  color: var(--m60-ink);
}

#buildings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px,2vw,28px);
  width: 100%;
  padding: 0;
}

#buildings-grid > article {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(20,21,22,0.10);
  overflow: hidden;
  padding: 0;
  gap: 0;
  transition:
    transform 0.6s var(--m60-ease),
    box-shadow 0.6s var(--m60-ease);
}
#buildings-grid > article:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -40px rgba(20,21,22,0.55);
}

/* Yellow perimeter that draws in on hover — the design used a clip-path box. */
#buildings-grid > article::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid var(--m60-yellow);
  clip-path: inset(0 100% 100% 0);
  transition: clip-path 0.5s cubic-bezier(0.65,0,0.35,1);
}
#buildings-grid > article:hover::before { clip-path: inset(0 0 0 0); }

#buildings-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s var(--m60-ease);
}
#buildings-grid > article:hover img { transform: scale(1.05); }

#buildings-grid h3 {
  margin: 0;
  padding: 20px 22px 0;
  font-size: clamp(1.05rem,1.5vw,1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--m60-ink);
}

#buildings-grid > article > p {
  margin: 0;
  padding: 6px 22px 20px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-grey);
  transition: color 0.4s ease;
}
#buildings-grid > article:hover > p { color: var(--m60-ink); }

/* Elm Court availability sash — rotated ribbon across the top-right corner. */
#card-elm, #card-oak, #card-beech { position: relative; }
/* The design wrapped this in a 62% square with overflow:hidden. There is no
   wrapper element here, so it is positioned as a corner ribbon instead and
   clipped by the card, which already has overflow:hidden. */
#card-elm-sash, #card-oak-sash, #card-beech-sash {
  position: absolute;
  top: 26px;
  right: -62px;
  z-index: 5;
  width: 210px;
  margin: 0;
  padding: 7px 0;
  transform: rotate(45deg);
  transform-origin: center;
  background: var(--m60-yellow);
  color: var(--m60-ink);
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
  animation: m60-sash 6s ease-in-out infinite;
}
@keyframes m60-sash {
  0%, 62%, 100% { background: var(--m60-yellow); box-shadow: 0 8px 22px -12px rgba(20,21,22,0.6); }
  74%, 88%      { background: var(--m60-yellow-lt); box-shadow: 0 0 26px 2px rgba(242,242,122,0.75); }
}

/* --- Stats band ---------------------------------------------------------- */

#stats {
  background: var(--m60-slate);
  color: #fff;
  padding: clamp(60px,7vw,96px) var(--m60-gutter);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px,3vw,40px);
  width: 100%;
}

#stats > div {
  position: relative;
  padding: 0 0 0 22px;
  gap: 6px;
  width: auto;
}

/* Yellow rule to the left of each figure. */
#stats > div::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--m60-yellow);
}

#stats p:first-of-type {
  margin: 0;
  font-size: clamp(2.2rem,4.4vw,3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
#stats p:last-of-type {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.66);
}

@media (min-width: 640px) {
  #buildings-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  #buildings-grid { grid-template-columns: repeat(4, 1fr); }
  #stats { grid-template-columns: repeat(4, 1fr); }
}

/* --- Amenities ----------------------------------------------------------- */

#amenities {
  position: relative;
  overflow: hidden;
  background: var(--m60-off-white);
  padding: clamp(80px,12vw,180px) var(--m60-gutter);
  display: flex;
  flex-direction: column;
}

#amenities::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--m60-texture);
  background-size: cover;
  opacity: 0.05;
  pointer-events: none;
}
#amenities > * { position: relative; z-index: 1; }

#amenities-title {
  margin: 0 0 clamp(44px,6vw,80px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-size: clamp(1.9rem,4vw,3.6rem);
  color: var(--m60-ink);
}

/* 1px gaps over a dark ground give the hairline grid the design uses. */
#amenities-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  width: 100%;
  padding: 0;
  background: rgba(20,21,22,0.10);
  border: 1px solid rgba(20,21,22,0.10);
}

#amenities-grid > article {
  position: relative;
  overflow: hidden;
  min-height: clamp(330px,30vw,430px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--m60-ink);
  padding: 0;
  gap: 0;
}

#amenities-grid img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--m60-ease);
}
#amenities-grid > article:hover img { transform: scale(1.06); }

/* Scrim, so the label stays legible over any photo. */
#amenities-grid > article::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,21,22,0.15) 0%, rgba(20,21,22,0.55) 55%, rgba(20,21,22,0.88) 100%);
  transition: background 0.6s ease;
}
#amenities-grid > article:hover::after {
  background: linear-gradient(180deg, rgba(20,21,22,0.35) 0%, rgba(20,21,22,0.75) 55%, rgba(20,21,22,0.94) 100%);
}

#amenities-grid h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0 26px;
  font-size: clamp(1.1rem,1.6vw,1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

/* The reveal: collapsed to 0fr on desktop, opened on hover. Mobile shows it
   permanently (the design did the same, via JS on resize). */
#amenities-grid > article > p {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0 26px 26px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-width: 46ch;
}

/* The design collapsed this with grid-template-rows: 0fr, which needs a
   clippable child. Here the <p> holds bare text — an anonymous grid item that
   cannot be clipped, so 0fr never collapses. max-height does, and animates. */
@media (min-width: 900px) {
  #amenities-grid > article > p {
    max-height: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height 0.6s cubic-bezier(0.65,0,0.35,1),
      opacity 0.5s ease,
      padding-bottom 0.6s cubic-bezier(0.65,0,0.35,1);
  }
  #amenities-grid > article:hover > p,
  #amenities-grid > article:focus-within > p {
    max-height: 14em;
    opacity: 1;
    padding-bottom: 26px;
  }
}

/* --- Manifesto ----------------------------------------------------------- */

#park {
  position: relative;
  overflow: hidden;
  background: var(--m60-ink);
  color: #fff;
  padding: clamp(80px,12vw,180px) var(--m60-gutter);
  display: flex;
  flex-direction: column;
}

#park-bg {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  animation: m60-wash 40s ease-in-out infinite alternate;
  will-change: transform;
}

#park::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,21,22,0.86) 0%, rgba(20,21,22,0.78) 50%, rgba(20,21,22,0.92) 100%);
}

#park-quote {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  width: 100%;
  max-width: 1440px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-size: clamp(2.2rem,5.5vw,5rem);
  color: #fff;
  text-wrap: balance;
}

@media (min-width: 640px) {
  #amenities-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  #amenities-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Spec ---------------------------------------------------------------- */

#spec {
  position: relative;
  overflow: hidden;
  background: var(--m60-off-white);
  padding: clamp(80px,12vw,180px) var(--m60-gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#spec::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--m60-texture);
  background-size: cover;
  opacity: 0.05;
  pointer-events: none;
}
#spec > * { position: relative; z-index: 1; }

#spec-title {
  margin: 0 0 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: clamp(1.9rem,4vw,3.6rem);
  color: var(--m60-ink);
}
#spec-intro {
  margin: 0 auto clamp(44px,6vw,72px);
  max-width: 62ch;
  font-size: clamp(1rem,1.25vw,1.2rem);
  line-height: 1.6;
  color: var(--m60-slate);
}

#spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  width: 100%;
  padding: 0;
  background: rgba(20,21,22,0.10);
  border: 1px solid rgba(20,21,22,0.10);
}
#spec-grid > p {
  margin: 0;
  padding: clamp(26px,3vw,38px) 22px;
  background: #FFFFFF;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--m60-slate);
  transition: background 0.4s ease, color 0.4s ease;
}
#spec-grid > p:hover { background: var(--m60-ink); color: #fff; }

/* --- Location ------------------------------------------------------------ */

#location {
  background: var(--m60-slate);
  color: #fff;
  padding: clamp(80px,12vw,180px) var(--m60-gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px,5vw,64px);
}

#location-title {
  margin: 0;
  max-width: 18ch;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-size: clamp(1.9rem,4.4vw,3.8rem);
  color: #fff;
}

/* No border on the container: in the design the rules belong to the rows, so
   the first line sits under the DESTINATION / DRIVE TIME label rather than
   above it. A border-top here drew a stray rule across the top of the board. */
#location-board {
  width: 100%;
  max-width: 900px;
  padding: 0;
  gap: 0;
  text-align: left;
  border-top: 0;
}
#location-board > div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  transition: background 0.35s ease;
}
#location-board > div:not(#board-head):hover { background: rgba(255,255,255,0.04); }

#location-board p { margin: 0; }
#location-board > div > p:first-child {
  font-size: 1rem;
  color: rgba(255,255,255,0.86);
}
#location-board > div > p:last-child {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--m60-yellow);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Header row reads as a label, not as data. */
#board-head > p {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-grey);
}

#location-notes {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px,3vw,40px);
  width: 100%;
  max-width: 1100px;
  padding: 0;
  text-align: left;
}
#location-notes > div { padding: 0; gap: 8px; }
#location-notes h3 {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-yellow);
  font-weight: 700;
}
#location-notes p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
}

/* --- News ---------------------------------------------------------------- */

#news {
  position: relative;
  overflow: hidden;
  background: var(--m60-off-white);
  padding: clamp(80px,12vw,180px) var(--m60-gutter);
  display: flex;
  flex-direction: column;
}
#news::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--m60-texture);
  background-size: cover;
  opacity: 0.05;
  pointer-events: none;
}
#news > * { position: relative; z-index: 1; }

#news-title {
  margin: 0 0 clamp(40px,5vw,64px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: clamp(1.9rem,4vw,3.6rem);
  color: var(--m60-ink);
}

#news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px,3vw,40px);
  width: 100%;
  padding: 0;
}
#news-grid > article {
  background: #FFFFFF;
  border: 1px solid rgba(20,21,22,0.10);
  overflow: hidden;
  padding: 0;
  gap: 0;
  transition: transform 0.6s var(--m60-ease), box-shadow 0.6s var(--m60-ease);
}
#news-grid > article:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -40px rgba(20,21,22,0.55);
}
#news-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.8s var(--m60-ease);
}
#news-grid > article:hover img { transform: scale(1.05); }
#news-grid > article > p:first-of-type {
  margin: 0;
  padding: 20px 22px 0;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-grey);
}
#news-grid h3 {
  margin: 0;
  padding: 10px 22px 0;
  font-size: clamp(1.05rem,1.4vw,1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--m60-ink);
}
#news-grid > article > p:last-of-type {
  margin: 0;
  padding: 16px 22px 22px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-ink);
  transition: color 0.35s ease;
}
#news-grid > article:hover > p:last-of-type { color: var(--m60-hover); }

/* --- Contact ------------------------------------------------------------- */

#contact {
  position: relative;
  overflow: hidden;
  background: var(--m60-yellow);
  color: var(--m60-ink);
  padding: clamp(58px,7vw,100px) var(--m60-gutter);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* A photo washed over the yellow with multiply at low opacity. */
#contact::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--m60-contact-bg);
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0.22;
  animation: m60-wash 34s ease-in-out infinite alternate;
  pointer-events: none;
}
#contact > * { position: relative; z-index: 1; }

#contact-title {
  margin: 0;
  max-width: 20ch;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-size: clamp(1.9rem,4.4vw,3.8rem);
  color: var(--m60-ink);
}
#contact-lead {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(1rem,1.25vw,1.15rem);
  line-height: 1.55;
  color: rgba(20,21,22,0.78);
}
#contact-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  width: auto;
  padding: 4px 0 0;
}
#contact-cta-call,
#contact-cta-info {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  will-change: transform;
}
#contact-cta-call {
  background: var(--m60-ink);
  border: 0;
  color: var(--m60-yellow);
}
/* The design gives these buttons NO colour or background hover — the magnetic
   drift IS the hover (see m60.js). These :hover rules therefore restate the
   resting colours rather than being deleted: without them the global
   `a:hover { color: var(--m60-hover) }` (0,1,1) would leak in and tint the
   label olive. An id + :hover scores (1,1,0) and shuts that out. */
#contact-cta-call:hover,
#contact-cta-call:focus-visible {
  background: var(--m60-ink);
  color: var(--m60-yellow);
}
#contact-cta-info {
  background: transparent;
  border: 1px solid var(--m60-ink);
  color: var(--m60-ink);
}
/* Was inverting to a black fill with yellow text on hover. That was mine, not
   the design's — reverted to the resting state for the reason above. */
#contact-cta-info:hover,
#contact-cta-info:focus-visible {
  background: transparent;
  color: var(--m60-ink);
}

/* --- Partners marquee ---------------------------------------------------- */

#partners {
  background: #FFFFFF;
  padding: clamp(38px,4.5vw,60px) 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
#partners-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: none;
  gap: clamp(40px,5vw,72px);
  padding: 0 clamp(20px,2.5vw,36px);
  width: auto;
  animation: m60-marquee 42s linear infinite;
  will-change: transform;
}
#partners:hover #partners-row { animation-play-state: paused; }
#partners-row img {
  display: block;
  flex: none;
  height: clamp(34px,3.4vw,48px);
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.4s ease, opacity 0.4s ease;
}
#partners-row img:hover { filter: grayscale(0); opacity: 1; }

/* --- Scroll reveal ------------------------------------------------------- */
/* Added by JS via IntersectionObserver, so nothing is hidden when JS is off. */

.m60-inview { opacity: 0; transform: translateY(24px); }
/* Animation rather than a transition, for the same cascade reason as
   .m60-row.is-in: `#buildings-grid > article` and `#news-grid > article`
   (1,0,1) each declare `transition: transform .6s, box-shadow .6s` for their
   hover lift, which outranked the (0,2,0) transition here. opacity was left
   untransitioned on all seven cards, so they popped in instead of rising.
   m60.js removes both classes on animationend, restoring the cards to their
   natural state so the hover lift still transitions normally. */
.m60-inview.is-in {
  animation: m60-rise 0.7s var(--m60-ease) both;
}
@keyframes m60-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The design breaks these at different widths: news at 620, spec at 640. */
@media (min-width: 620px) {
  #news-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 640px) {
  #spec-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 700px) {
  #location-notes { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  #news-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  #spec-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- Icons --------------------------------------------------------------- */
/* The e-svg widget renders the SVG inline, so the keyframes embedded in each
   file run in the DOM. Each file also pins fill:none on its shapes, because
   the widget rewrites the root to fill="currentColor". */

.elementor .e-svg-base {
  display: block;
  width: 40px;
  height: 40px;
  flex: none;
}
.elementor .e-svg-base svg { display: block; width: 100%; height: 100%; }

/* Amenity icons sit above the title, and lift in with the reveal on desktop. */
#amenities-grid .e-svg-base {
  position: relative;
  z-index: 2;
  margin: 0 26px 14px;
}

@media (min-width: 900px) {
  #amenities-grid .e-svg-base {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.6s var(--m60-ease);
  }
  #amenities-grid > article:hover .e-svg-base,
  #amenities-grid > article:focus-within .e-svg-base {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Spec cells: icon above the line of copy. */
#spec-grid > article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: clamp(26px,3vw,38px) 22px;
  background: #FFFFFF;
  transition: background 0.4s ease, color 0.4s ease;
}
#spec-grid > article > p {
  margin: 0;
  padding: 0;
  background: none;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--m60-slate);
  transition: color 0.4s ease;
}
#spec-grid > article:hover { background: var(--m60-ink); }
#spec-grid > article:hover > p { color: #fff; }

/* --- Hero heading line reveal -------------------------------------------- */
/* JS splits the h1 into per-line spans; the stagger is CSS. Without JS the
   heading is simply the plain text, already correct. */

#hero-title .m60-line { display: block; overflow: hidden; }
#hero-title .m60-line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s var(--m60-ease);
}
#hero-title.is-in .m60-line > span { transform: translateY(0); }
#hero-title.is-in .m60-line:nth-child(1) > span { transition-delay: 0.05s; }
#hero-title.is-in .m60-line:nth-child(2) > span { transition-delay: 0.14s; }
#hero-title.is-in .m60-line:nth-child(3) > span { transition-delay: 0.23s; }
#hero-title.is-in .m60-line:nth-child(4) > span { transition-delay: 0.32s; }

/* Hero lead + actions fade up behind the heading. */
#hero-lead.m60-fade, #hero-actions.m60-fade { opacity: 0; transform: translateY(14px); }
#hero-lead.m60-fade.is-in, #hero-actions.m60-fade.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease 0.45s, transform 0.8s var(--m60-ease) 0.45s;
}

/* --- Parallax ------------------------------------------------------------ */
/* JS sets --m60-shift on the section; the texture layer consumes it. */

#buildings::before,
#amenities::before,
#spec::before,
#news::before {
  transform: translate3d(0, var(--m60-shift, 0px), 0) scale(1.08);
  will-change: transform;
}

/* --- Hover flourishes ---------------------------------------------------- */

/* Building card "View →" arrow slides on hover. */
#buildings-grid > article > p,
#news-grid > article > p:last-of-type { transition: color 0.35s ease, letter-spacing 0.35s ease; }
#buildings-grid > article:hover > p,
#news-grid > article:hover > p:last-of-type { letter-spacing: 0.19em; }

/* Location board: yellow bar wipes in from the left on hover. */
#location-board > div:not(#board-head) { position: relative; }
#location-board > div:not(#board-head)::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--m60-yellow);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--m60-ease);
}
#location-board > div:not(#board-head):hover::before { transform: scaleY(1); }

/* Stats: the divider grows when the band scrolls in. */
#stats > div::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.7s var(--m60-ease);
}
#stats.is-counted > div::before { transform: scaleY(1); }
#stats.is-counted > div:nth-child(2)::before { transition-delay: 0.08s; }
#stats.is-counted > div:nth-child(3)::before { transition-delay: 0.16s; }
#stats.is-counted > div:nth-child(4)::before { transition-delay: 0.24s; }

/* --- Hero video ---------------------------------------------------------- */
/* Sits over the gradient wash and under the scrim, fading in once it can
   actually play. If it never loads, the gradient remains — which is the
   fallback the design itself used. */

/* Explicit stacking for the whole hero, so the video lands between the
   gradient wash and the scrim. A pseudo-element paints as the last child of
   its host, so without these the ::after scrim would cover the video AND the
   copy would need to outrank it — pin all five layers instead of relying on
   paint order. */
section#top::before   { z-index: 0; }
#hero-video    { z-index: 1; }
section#top::after    { z-index: 2; }
#hero-copy     { z-index: 3; }
#hero-ticker   { z-index: 4; }

#hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  transform-origin: center;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.65,0,0.35,1);
  pointer-events: none;
}
#hero-video.is-playing { opacity: 1; }

/* #hero-copy uses align-items:flex-start, so the h1 shrink-to-fits its
   content. Splitting the heading into per-word spans changed that intrinsic
   width and collapsed 3 lines into 6. Stretch it so the width is decided by
   the container and the max-width cap, never by the children. */
#hero-title { align-self: stretch; }

/* ==========================================================================
   Buildings section — corrected against the design.

   Four things were wrong:
   1. The corner-band graphic was rendered at opacity 0.05, which made it
      invisible. The design uses 0.75 with the layer bleeding -18% vertically.
      (It is a diagonal-band graphic, not a subtle paper texture.)
   2. The content had no max-width, so the grid ran the full section width.
      The design centres it in 1440px.
   3. The card name and the VIEW link belong on ONE baseline-aligned row,
      space-between — not stacked.
   4. The availability sash needs the design's 62% square clip box.
   ========================================================================== */

/* 1. Corner bands, at their real opacity, in all four sections that use them. */
#buildings::before,
#amenities::before,
#spec::before,
#news::before {
  inset: -18% 0;
  opacity: 0.75;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* 2. Centred content column. */
#buildings > *,
#amenities > *,
#spec > *,
#news > * {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

/* 3. Card footer: name left, VIEW right, on one baseline. The card holds
   [sash-clip, img, h3, p] with no footer wrapper, so the row is composed
   with grid placement rather than an extra element. */
#buildings-grid > article {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
}
#buildings-grid img {
  grid-column: 1 / -1;
}
#buildings-grid h3 {
  grid-column: 1;
  margin: 0;
  padding: 22px 10px 22px 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(1.4rem,2.2vw,2rem);
  color: var(--m60-ink);
  transition: transform 0.5s var(--m60-ease);
}
#buildings-grid > article > p {
  grid-column: 2;
  margin: 0;
  padding: 22px 22px 22px 0;
  text-align: right;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A8A800;
  white-space: nowrap;
  transition: transform 0.5s var(--m60-ease);
}
/* The arrow nudges rather than the tracking stretching. */
#buildings-grid > article:hover > p {
  letter-spacing: 0.14em;
  transform: translateX(6px);
}
#buildings-grid > article:hover h3 {
  transform: translateX(3px);
}

/* 4. Availability sash — the design's clip box, transcribed. */
#card-elm-sash-clip, #card-oak-sash-clip, #card-beech-sash-clip {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  width: 62%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  pointer-events: none;
  padding: 0;
  gap: 0;
  max-width: none;
  margin: 0;
}
#card-elm-sash, #card-oak-sash, #card-beech-sash {
  position: absolute;
  top: 27%;
  left: -50%;
  right: auto;
  width: 200%;
  margin: 0;
  padding: 8px 0;
  transform: rotate(45deg);
  transform-origin: center;
  background: var(--m60-yellow);
  color: var(--m60-ink);
  text-align: center;
  font-size: clamp(0.58rem,0.82vw,0.82rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: m60-sash 4.5s cubic-bezier(0.65,0,0.35,1) infinite;
}

/* The building images were added with a link, so the grid child is the <a>
   wrapper — not the <img>. Without this the image sits in column 1 only and
   leaves a gap beside it. Span the anchor across both footer columns. */
#buildings-grid > article > a {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  line-height: 0;
}
#buildings-grid > article > a img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- Corner bands -------------------------------------------------------- */
/* Transcribed from the design: a layer bleeding -18% vertically, the graphic
   at object-fit/background cover, opacity 0.75.
   Two earlier attempts were wrong and are recorded so they are not repeated:
     - opacity 0.05 made the bands invisible (I had mistaken this asset for a
       paper texture; it is the diagonal band graphic).
     - background-size:100% 100% stretched a 0.91-aspect source across a ~2.0
       aspect section, which turned the bands into huge shallow sweeps.
   cover keeps their true 45 degrees and their intended weight. It does crop
   the vertical extremes on a wide viewport, which is what the design does too.
   No scale() here — the 1.08 from the first pass cropped further. */
#buildings::before,
#amenities::before,
#spec::before,
#news::before {
  inset: -18% 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.75;
  transform: translate3d(0, var(--m60-shift, 0px), 0);
}

/* ==========================================================================
   Section headings — corrected against the design.

   Every section h2 in the bundle is clamp(2.2rem,5.5vw,5rem); I had built
   them all at clamp(1.9rem,4vw,3.6rem), roughly 27% too small at 1440px
   (57.6px against the design's 79.2px). The contact heading and the manifesto
   quote were wrong on their own terms too.

   Where a section of mine uses flex `gap` for its rhythm, the design's
   margin-bottom is folded into that gap rather than added on top.
   ========================================================================== */

#buildings-title {
  font-size: clamp(2.2rem,5.5vw,5rem);
  max-width: 18ch;
  margin: 0 0 clamp(44px,6vw,80px);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

#amenities-title {
  font-size: clamp(2.2rem,5.5vw,5rem);
  max-width: none;
  margin: 0 0 clamp(44px,6vw,80px);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

#spec-title {
  font-size: clamp(2.2rem,5.5vw,5rem);
  max-width: none;
  margin: 0 auto 18px;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

/* #location is a flex column with gap clamp(40px,5vw,64px), so the design's
   margin-bottom would double the spacing — the gap carries it. */
#location-title {
  font-size: clamp(2.2rem,5.5vw,5rem);
  max-width: 18ch;
  margin: 0 auto;
  line-height: 0.92;
  letter-spacing: -0.03em;
}

#news-title {
  font-size: clamp(2.2rem,5.5vw,5rem);
  max-width: none;
  margin: 0 0 clamp(36px,4.5vw,60px);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

/* The quote had max-width:1440px from the centring rule — the design caps the
   measure at 20ch so it reads as a pull-quote, not a full-width line. */
#park-quote {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2.2rem,5.5vw,5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

/* Contact runs larger than the other headings, and looser. */
#contact-title {
  font-size: clamp(2.4rem,6.5vw,6rem);
  max-width: 16ch;
  margin: 0;
  line-height: 1.14;
  letter-spacing: -0.03em;
}

/* --- Two spacing/tone fixes in the band sections -------------------------- */

/* 1. #buildings is a flex column with a 56px gap, and the heading now also
   carries the design's 80px margin-bottom — flex gap does not collapse with
   margins, so the two added up to 112px. The heading margin owns the rhythm. */
#buildings { gap: 0; }

/* 2. The band graphic has an OPAQUE WHITE background (sampled: its empty
   areas are rgba(255,255,255,1), only the diagonals carry colour). Painted at
   opacity 0.75 it washed each section toward white, so the section read
   brighter than the page ground and its bottom padding looked like a separate
   empty block with a visible seam at the section edge.
   multiply makes white a no-op, so only the diagonals render and the section
   keeps the real #FAFAF8 ground. The design used a plain img with no blend and
   therefore carried the same wash; this is a deliberate improvement on it. */
#buildings::before,
#amenities::before,
#spec::before,
#news::before {
  mix-blend-mode: multiply;
}

/* --- Corner bands, final: CSS diagonals instead of the raster ------------- */
/* The supplied band graphic is a set of FINITE diagonal strokes with squared
   ends on a 1500x1650 canvas. With background-size:cover in a wide section the
   image is scaled up enough that the visible window lands on the middle of the
   canvas, where those squared ends sit — so a band appears to stop dead inside
   the section. At 2560px wide the image is scaled 1.7x and the effect is
   unmissable. No object-fit/position value fixes that: the artwork simply does
   not compose at wide aspect ratios.
   Reproducing the motif as a repeating gradient makes the diagonals infinite,
   so they always run off the section edges, at any width, with no blunt ends.
   Colour is sampled from the asset (rgb(233,234,145)); the two-corner
   placement comes from a mask along the anti-diagonal, opaque at the
   bottom-left and top-right ends and clear through the middle. */
#buildings::before,
#amenities::before,
#spec::before,
#news::before {
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgb(233,234,145) 0 6vw,
    transparent 6vw 8.7vw
  );
  background-size: auto;
  background-position: 0 0;
  background-repeat: repeat;
  mix-blend-mode: normal;
  opacity: 0.75;
  -webkit-mask-image: linear-gradient(45deg, #000 0 14%, transparent 33%, transparent 67%, #000 86% 100%);
  mask-image: linear-gradient(45deg, #000 0 14%, transparent 33%, transparent 67%, #000 86% 100%);
}

/* --- Corner bands, final: two cropped corner assets ---------------------- */
/* Supersedes every earlier attempt on this layer. The supplied graphic put
   BOTH band groups on one 1500x1650 canvas, each group bleeding off two edges
   and blunt at its inner end. A single cover-scaled copy can never sit both
   groups in the right corners of a wide section, which is why bands kept
   getting cut mid-run; and the repeating-gradient version striped the whole
   section. The asset is now cropped into its two groups (attachments resolved
   to --m60-band-tr / --m60-band-bl, white knocked out to alpha so there is no
   section-wide wash), and each is anchored to the corner it belongs to. Each
   group then leaves the frame on the two edges it already bled off, at any
   viewport size. */
#buildings::before,
#amenities::before,
#spec::before,
#news::before {
  inset: 0;
  background-image: var(--m60-band-tr), var(--m60-band-bl);
  background-position: top right, bottom left;
  background-size: clamp(130px, 12%, 290px) auto, clamp(140px, 13%, 310px) auto;
  background-repeat: no-repeat, no-repeat;
  mix-blend-mode: normal;
  opacity: 0.75;
  -webkit-mask-image: none;
  mask-image: none;
}

/* --- Content column: put it on the section, not each child --------------- */
/* The 1440px column was applied per-child as `max-width + margin-inline:auto`.
   That breaks as soon as a child has its own narrower max-width: the heading
   is capped at 18ch, so auto margins CENTRED it instead of aligning it to the
   column, and my heading fix (margin: 0 0 80px) then knocked the auto margins
   out entirely — leaving the title at the section gutter while the grid stayed
   centred. Deriving the column from the section's inline padding fixes both:
   every child starts at the same left edge, and each is still free to cap its
   own text measure. */
#buildings,
#amenities,
#news,
#park {
  padding-inline: max(var(--m60-gutter), calc((100% - 1440px) / 2));
}
#buildings > *,
#amenities > *,
#news > *,
#park > * {
  max-width: none;
  margin-inline: 0;
  width: 100%;
}
/* Restore each text block's own measure, now that it no longer sets position. */
#buildings-title { max-width: 18ch; }
#park-quote      { max-width: 20ch; }

/* --- Stats band, corrected against the design ---------------------------- */
/* Six things were wrong here:
     figure size   clamp(2.2rem,4.4vw,3.6rem)  ->  clamp(3rem,7vw,6.5rem)
     divider       2px yellow, inset 4px       ->  1px rgba(255,255,255,.16), full height
     grid gap      clamp(28px,3vw,40px)        ->  0 (cells are separated by the rules)
     cell padding  0 0 0 22px                  ->  26px clamp(14px,2vw,34px)
     label colour  rgba(255,255,255,.66)       ->  #8A8C8E
     content       full-bleed                  ->  the same 1440px column as the rest
   The divider still grows on scroll via .is-counted, which is our addition. */

#stats {
  padding-inline: max(var(--m60-gutter), calc((100% - 1440px) / 2));
  gap: 0;
}

#stats > div {
  position: relative;
  padding: 26px clamp(14px,2vw,34px);
  gap: 0;
  width: auto;
  transition: transform 0.5s var(--m60-ease);
}

#stats > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.16);
  transform-origin: top;
}

#stats p:first-of-type {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-size: clamp(3rem,7vw,6.5rem);
  font-variant-numeric: tabular-nums;
  color: #fff;
  transition: color 0.4s ease;
}

#stats p:last-of-type {
  margin: 14px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-grey);
}

/* --- Stats hover --------------------------------------------------------- */
/* From the bundle: on mouseenter the cell lifts translateY(-8px) and the
   figure goes yellow; on mouseleave both return. The design guarded only the
   lift behind reduced motion (`if (this.reduced) return`), so the colour
   change stays unconditional here and the lift is gated to match.
   focus-within is added so keyboard users get the same affordance. */
#stats > div:hover p:first-of-type,
#stats > div:focus-within p:first-of-type {
  color: var(--m60-yellow);
}

@media (prefers-reduced-motion: no-preference) {
  #stats > div:hover,
  #stats > div:focus-within {
    transform: translateY(-8px);
  }
}

/* --- Amenities, corrected against the design ----------------------------- */
/* Drift found by comparing against the bundle rather than the screenshot:
     card padding   h3/p padded individually  ->  one padded box, gap 18px
     card heading   clamp(1.1rem,1.6vw,1.4rem)->  clamp(1.4rem,2.2vw,2rem)
     body copy      0.95rem / 46ch / .78 alpha->  1rem / 36ch / .82 alpha
     scrim rest     .15 / .55 / .88           ->  .10 / .45 / .86
     scrim hover    .35 / .75 / .94 (invented)->  .55 / .78 / .94 (from the JS)
     icon           40px, no shadow           ->  44px + drop-shadow
     title          wraps                     ->  white-space: nowrap
   The design kept the title on one line and released it below 900px via JS
   (data-oneline); that is a media query here. */

#amenities-title {
  white-space: nowrap;
}
@media (max-width: 899px) {
  #amenities-title { white-space: normal; }
}

/* One padded content box per card, as the design has, instead of padding on
   each text node. The image is absolutely positioned so it sits outside this
   flow. */
#amenities-grid > article {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  padding: clamp(24px,2.8vw,38px);
}

#amenities-grid .e-svg-base {
  width: 44px;
  height: 44px;
  margin: 0;
  display: grid;
  place-items: start;
  flex: none;
  filter: drop-shadow(0 2px 10px rgba(20,21,22,0.65));
}

#amenities-grid h3 {
  margin: 0;
  padding: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(1.4rem,2.2vw,2rem);
  color: #fff;
}

#amenities-grid > article > p {
  margin: 0;
  padding: 0;
  max-width: 36ch;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  text-wrap: pretty;
}

/* Scrim, at the design's actual stops. */
#amenities-grid > article::after {
  background: linear-gradient(
    180deg,
    rgba(20,21,22,0.10) 0%,
    rgba(20,21,22,0.45) 55%,
    rgba(20,21,22,0.86) 100%
  );
  transition: background 0.6s cubic-bezier(0.65,0,0.35,1);
}
#amenities-grid > article:hover::after,
#amenities-grid > article:focus-within::after {
  background: linear-gradient(
    180deg,
    rgba(20,21,22,0.55) 0%,
    rgba(20,21,22,0.78) 55%,
    rgba(20,21,22,0.94) 100%
  );
}

/* Copy reveal: collapsed on desktop, always open below 900px. The card gap
   supplies the spacing, so no padding animation is needed. */
@media (min-width: 900px) {
  #amenities-grid > article > p {
    max-height: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height 0.6s cubic-bezier(0.65,0,0.35,1),
      opacity 0.5s ease;
  }
  #amenities-grid > article:hover > p,
  #amenities-grid > article:focus-within > p {
    max-height: 14em;
    padding-bottom: 0;
    opacity: 1;
  }
}

/* --- Amenities hover: smoother ------------------------------------------- */
/* A deliberate improvement on the design, not a transcription of it.
   The reveal animated max-height to 14em while the copy is only ~72-96px
   tall, so the motion visibly finished early and the rest of the duration was
   dead time — which is what read as abrupt. Three changes:
     - cap the travel at 10em, close to the real content height, so the whole
       duration is spent moving
     - give the copy a small translateY so it rises in rather than unfolding
     - let the icon lead by 60ms, so the card resolves in sequence instead of
       everything arriving at once
   Easing is the project ease (0.16,1,0.3,1): a soft settle rather than the
   design's ease-in-out, which is what makes a reveal feel mechanical. */

#amenities-grid > article img {
  will-change: transform;
}

#amenities-grid .e-svg-base {
  transition:
    opacity 0.5s var(--m60-ease) 0.06s,
    transform 0.5s var(--m60-ease) 0.06s;
  will-change: opacity, transform;
}

@media (min-width: 900px) {
  #amenities-grid > article > p {
    transform: translateY(10px);
    transition:
      max-height 0.55s var(--m60-ease),
      opacity 0.4s ease,
      transform 0.55s var(--m60-ease);
    will-change: max-height, opacity, transform;
  }
  #amenities-grid > article:hover > p,
  #amenities-grid > article:focus-within > p {
    max-height: 10em;
    opacity: 1;
    transform: translateY(0);
  }
}

/* Leaving is quicker than arriving — a slow retract feels sticky. */
@media (min-width: 900px) {
  #amenities-grid > article:not(:hover):not(:focus-within) > p {
    transition:
      max-height 0.4s var(--m60-ease),
      opacity 0.25s ease,
      transform 0.4s var(--m60-ease);
  }
  #amenities-grid > article:not(:hover):not(:focus-within) .e-svg-base {
    transition:
      opacity 0.3s ease,
      transform 0.35s var(--m60-ease);
  }
}

/* Tighter fallback: the longest card copy is 3 lines (72px), so 7em leaves
   headroom without much dead travel. */
@media (min-width: 900px) {
  #amenities-grid > article:hover > p,
  #amenities-grid > article:focus-within > p {
    max-height: 7em;
  }
}

/* Where supported, animate to the exact content height so there is no
   overshoot at all and the whole duration is spent moving. Browsers without
   it keep the 7em fallback above. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  @media (min-width: 900px) {
    #amenities-grid > article:hover > p,
    #amenities-grid > article:focus-within > p {
      max-height: max-content;
    }
  }
}

/* --- Manifesto: pinned stage --------------------------------------------- */
/* The design pinned this section for 170% of the viewport while the words lit
   up. `position: sticky` on a stage wrapper does the same without GSAP; the
   section carries the extra scroll height (100vh in view + 170vh of travel).
   Only applied once JS has built the stage (.is-kinetic), so the section is a
   normal single-screen block if JS never runs. */

#park.is-kinetic {
  min-height: 270vh;
  padding-block: 0;
  padding-inline: 0;
  display: block;
  overflow: visible; /* sticky cannot stick inside an overflow:hidden ancestor */
}
#park.is-kinetic.is-static {
  min-height: 0;
  padding-block: clamp(80px,12vw,180px);
}

.m60-park__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-inline: max(var(--m60-gutter), calc((100% - 1440px) / 2));
}
#park.is-static .m60-park__stage {
  position: static;
  height: auto;
}

/* The scrim moves onto the stage; over a 270vh section it would otherwise
   gradient across the whole scroll instead of the visible frame. */
#park.is-kinetic::after { content: none; }
.m60-park__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20,21,22,0.86) 0%,
    rgba(20,21,22,0.78) 50%,
    rgba(20,21,22,0.92) 100%
  );
  pointer-events: none;
}

#park.is-kinetic #park-quote {
  position: relative;
  z-index: 2;
  margin: 0;
}

/* Words are lit by JS; the trailing space is a margin so wrapping is unchanged. */
.m60-word {
  display: inline-block;
  margin-right: 0.24em;
  opacity: 0.15;
}

/* --- Manifesto type: respond to viewport height -------------------------- */
/* The design sizes this on width only (clamp(2.2rem,5.5vw,5rem)), so the quote
   is a fixed ~392px block centred in a 100vh pin — the taller the window, the
   more dead space. Measured void per side: 204px at 800px tall, 254px at 900,
   344px at 1080, 457px at 1305 (70% of the frame).
   Adding a vh term ties the type to the short axis, so on a tall screen the
   quote grows instead of the void. The measure stays 20ch, which scales with
   the font size, so the line count holds at ~5 and the block simply gets
   bigger rather than reflowing. */
#park-quote {
  font-size: clamp(2.2rem, min(5.5vw, 11vh), 6.5rem);
}

/* --- Spec, corrected against the design ---------------------------------- */
/* I had built this as a hairline grid of white tiles (copied from the
   amenities treatment). The design is nothing like that: borderless cells on
   the section ground, each with the icon in a 76px outlined circle and the
   label centred beneath.
     grid        gap 1px + bg + border  ->  gap clamp(30px,3.4vw,52px), no bg
     cell        white tile, ink on hover -> transparent, lifts 6px on hover
     icon        bare 40px svg          ->  76px circle, 1px rgba(20,21,22,.14)
     label       0.95rem, no measure    ->  1.02rem / 26ch / lh 1.45
     intro       1rem / lh 1.6          ->  clamp(1.05rem,1.4vw,1.3rem) / 1.5
   Spec icons already carry stroke="#2B2C2E" from the source, which is why
   they read slate here and yellow in amenities. */

#spec-title {
  margin: 0 auto;
  line-height: 0.98;
  white-space: nowrap;
}
@media (max-width: 899px) {
  #spec-title { white-space: normal; }
}

#spec-intro {
  margin: clamp(22px,2.6vw,34px) auto 0;
  max-width: 62ch;
  font-size: clamp(1.05rem,1.4vw,1.3rem);
  line-height: 1.5;
  color: var(--m60-slate);
  text-wrap: pretty;
}

#spec-grid {
  gap: clamp(30px,3.4vw,52px);
  margin-top: clamp(46px,6vw,80px);
  background: none;
  border: 0;
  text-align: center;
}

#spec-grid > article {
  position: relative;
  background: transparent;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  transition: transform 0.5s var(--m60-ease);
}

/* The e-svg widget already wraps the svg in a div, so that wrapper becomes
   the outlined circle — no extra element needed. */
#spec-grid .e-svg-base {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgba(20,21,22,0.14);
  filter: none;
  transition:
    border-color 0.5s cubic-bezier(0.65,0,0.35,1),
    background 0.5s cubic-bezier(0.65,0,0.35,1),
    transform 0.5s var(--m60-ease);
}
#spec-grid .e-svg-base svg {
  width: 40px;
  height: 40px;
}

#spec-grid > article > p {
  margin: 0;
  padding: 0;
  max-width: 26ch;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--m60-slate);
  background: none;
  text-wrap: pretty;
}

/* Hover, from the bundle's handler: the circle fills yellow, the strokes
   invert to ink, and the cell lifts 6px. */
#spec-grid > article:hover,
#spec-grid > article:focus-within {
  background: transparent;
}
#spec-grid > article:hover > p,
#spec-grid > article:focus-within > p {
  color: var(--m60-slate);
}
#spec-grid > article:hover .e-svg-base,
#spec-grid > article:focus-within .e-svg-base {
  border-color: var(--m60-yellow);
  background: var(--m60-yellow);
  transform: scale(1.06);
}
/* A CSS stroke beats the presentation attribute on the paths. */
#spec-grid > article:hover .e-svg-base svg [stroke],
#spec-grid > article:focus-within .e-svg-base svg [stroke] {
  stroke: var(--m60-ink);
}

@media (prefers-reduced-motion: no-preference) {
  #spec-grid > article:hover,
  #spec-grid > article:focus-within {
    transform: translateY(-6px);
  }
}

/* The e-svg widget writes style="width:100%;height:100%" inline on the <svg>,
   which no selector can beat. Rather than reach for !important, shrink the
   content box: 76px circle - 2px border - 34px padding = a 40px svg, which is
   the size the design draws these at. */
#spec-grid .e-svg-base {
  padding: 17px;
}
#spec-grid .e-svg-base svg {
  width: auto;
  height: auto;
}

/* --- Location, corrected against the design ------------------------------ */
/* Drift found against the bundle:
     destination  1rem, rgba(255,255,255,.86)  ->  clamp(1.3rem,2.2vw,2rem), 700, #fff
     drive time   0.82rem, ALWAYS yellow       ->  clamp(1rem,1.6vw,1.4rem), #fff,
                                                   yellow only on row hover
     row rule     border-bottom                ->  border-top (header carries none)
     hover bar    transform-origin: top        ->  center
     distance     baked into the destination   ->  its own 0.66rem grey element
   The design turns the time yellow on mouseenter and back to #fff on leave;
   mine had it permanently yellow, which killed the hover signal. */

#location-board { max-width: 900px; margin: 0 auto; text-align: left; }

#board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 14px;
  border: 0;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-grey);
}
#board-head > p { margin: 0; font-size: inherit; letter-spacing: inherit; color: inherit; }

#location-board > div:not(#board-head) {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0 22px 16px;
  border-top: 1px solid rgba(255,255,255,0.14);
  border-bottom: 0;
  transition: background 0.4s ease;
}
#location-board > div:not(#board-head):hover { background: rgba(255,255,255,0.04); }

/* Destination name */
#location-board > div:not(#board-head) > p:first-of-type {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(1.3rem,2.2vw,2rem);
  color: #fff;
}

/* Drive time — white at rest, yellow on hover (the design's signal). */
#location-board > div:not(#board-head) > p:last-of-type {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1rem,1.6vw,1.4rem);
  letter-spacing: 0.1em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 0.35s ease;
}
#location-board > div:not(#board-head):hover > p:last-of-type { color: var(--m60-yellow); }

/* The distance sits beside the destination, small and grey. */
#board-manchester-km {
  margin: 0;
  margin-right: auto;
  padding-left: 14px;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--m60-grey);
  white-space: nowrap;
  align-self: baseline;
}

/* Yellow bar wipes in from the row's centre. */
#location-board > div:not(#board-head)::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--m60-yellow);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.4s var(--m60-ease);
}
#location-board > div:not(#board-head):hover::before { transform: scaleY(1); }

/* Notes */
/* Spacing is set per element here, not by the section's flex gap.
   #location is a flex column, so its gap was ADDING to the notes'
   margin-top: 64px + 48px gave a 112px chasm under the board where the
   design has 48px. The design's rows and notes are plain siblings whose
   spacing comes only from the h2's margin-bottom and the notes' margin-top,
   so mirror that and let those two values be the whole story. */
#location { gap: 0; }
#location-title { margin: 0 auto clamp(44px,6vw,80px); }

#location-notes {
  gap: 26px;
  margin-top: 48px;
  text-align: center;
  max-width: 900px;
}
/* Only the label's own margin separates it from the copy — the 8px flex gap
   the note columns carried stacked on top of it for 18px against the
   design's 10px. */
#location-notes > div { gap: 0; }
#location-notes h3 { margin: 0 0 10px; }
#location-notes p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.72);
  text-wrap: pretty;
}

/* The design groups the destination and its distance in one flex child, with
   the drive time as the second. Here all three are siblings, so
   justify-content:space-between pushed "8 KM" into the middle of the row.
   Auto margin on the last child reproduces the grouping for both the 2-child
   rows and the 3-child Manchester row. */
#location-board > div:not(#board-head) {
  justify-content: flex-start;
  gap: 14px;
}
#location-board > div:not(#board-head) > p:last-of-type {
  margin-left: auto;
}
#board-manchester-km {
  margin: 0;
  padding-left: 0;
}

/* The first-pass rule `#location-board > div > p:last-child` (1,1,2) also
   matched the header row and left "DRIVE TIME" yellow. Two ids outrank it. */
#location-board > #board-head > p,
#location-board > #board-head > p:last-of-type {
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-grey);
}

/* The design gives only the LAST row a border-bottom as well as its
   border-top, which is what closes the board off above the notes. Every other
   row has the top rule alone. */
#location-board > div:last-child {
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

/* Specificity note: `:not(#board-head)` inherits the ID's weight, so the row
   rule above scores (2,0,1) and beat both `#location-board > div:last-child`
   (1,1,1) and `#board-head` (1,0,0). Hence the closing rule never appeared and
   the header kept a bottom border from the first pass. Match the weight. */
#location-board > div:not(#board-head):last-child {
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
/* Two ids (2,0,0) so this also beats the first-pass `#location-board > div`
   (1,0,1), whose `padding: 16px 8px` shorthand was still winning here and
   putting 16px above the label. The design gives the header bottom padding
   only, and no horizontal padding — the rows' 16px left inset (which clears
   the hover bar) is deliberately not applied to the header. */
#location-board > #board-head {
  border: 0;
  padding: 0 0 14px;
}

/* --- Location board: row entrance ---------------------------------------- */
/* The design slides each row in from the right (x:50 -> 0) over 0.9s with a
   0.09s per-row stagger, rather than fading the board as one block. The
   hidden state is added by JS (.m60-row), so with JS off the rows are simply
   visible. transform + opacity only, so it composites on the GPU. */
.m60-row {
  opacity: 0;
  transform: translateX(50px);
  will-change: opacity, transform;
}
/* Driven by a keyframe animation, NOT a transition. `#location-board >
   div:not(#board-head)` scores (2,0,1) — :not() carries the id's weight — and
   its `transition: background 0.4s` therefore outranked the (0,2,0) transition
   that used to live here. The winning declaration named only `background`, so
   opacity and transform changed with no transition at all and the rows snapped
   into place: correct content, zero animation. Animations sit above normal
   declarations in the cascade, so they cannot be outranked by a stray id rule.
   m60.js strips both classes on animationend so nothing lingers over the
   row's own hover styles. */
.m60-row.is-in {
  animation: m60-slide-in 0.9s cubic-bezier(0.16,1,0.3,1) var(--m60-row-delay, 0ms) both;
}
@keyframes m60-slide-in {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Tabular figures keep the count-up from reflowing the row as digits change. */
.m60-min { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .m60-row,
  .m60-inview { opacity: 1; transform: none; animation: none; }
  .m60-lines--armed .m60-heroline,
  .m60-elmstat--armed .m60-elmstat__rule { transform: none; animation: none; }
}

/* ==========================================================================
   News, corrected against the design.
   Drift found against the bundle:
     child order   image, date, headline  ->  image, headline, date, read more
     grid gap      40px                   ->  clamp(18px,2vw,28px)
     image ratio   16/10                  ->  16/9
     headline      20px, 1.25, -0.02em    ->  clamp(1.15rem,1.6vw,1.5rem),
                                              1.12, -0.03em
     read more     0.72rem, ink           ->  0.66rem, #A8A800, pinned to the
                                              card foot
     body inset    22px                   ->  clamp(22px,2.4vw,30px)
     hover         lift + drop shadow     ->  border #DCDC00, image 1.06, arrow
                                              slides 6px. The design does NOT
                                              lift these cards.
   The design wraps the copy in its own padded flex child with gap:16px. The
   atomic build emits the image and the three text nodes as siblings inside the
   article, so the inset is carried per element instead — same result.
   ========================================================================== */

#news-grid { gap: clamp(18px,2vw,28px); }

/* Design order — the markup emits the date before the headline. */
#news-grid > article > img             { order: 0; }
#news-grid > article > h3              { order: 1; }
#news-grid > article > p:first-of-type { order: 2; }
#news-grid > article > p:last-of-type  { order: 3; }

#news-grid img { aspect-ratio: 16 / 9; }

#news-grid h3 {
  padding: clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px) 0;
  font-size: clamp(1.15rem,1.6vw,1.5rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}
#news-grid > article > p:first-of-type {
  padding: 16px clamp(22px,2.4vw,30px) 0;
}
/* margin-top:auto pins the label to the card foot, which is what flex:1 on the
   design's body wrapper plus margin-top:auto achieves there. */
#news-grid > article > p:last-of-type {
  margin-top: auto;
  padding: 16px clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--m60-hover);
  transition: color 0.35s ease;
}

#news-grid > article {
  transition:
    border-color 0.5s cubic-bezier(0.65,0,0.35,1),
    transform 0.6s var(--m60-ease);
}
#news-grid > article:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--m60-yellow);
}
#news-grid > article:hover img { transform: scale(1.06); }
/* The label holds still — the arrow is what moves. */
#news-grid > article:hover > p:last-of-type { letter-spacing: 0.14em; }

/* Arrow split out of "Read more →" by m60.js so it can slide on its own. */
.m60-news-arrow {
  display: inline-block;
  margin-left: 10px;
  transition: transform 0.5s var(--m60-ease);
}
#news-grid > article:hover .m60-news-arrow { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .m60-news-arrow { transition: none; }
}

/* ==========================================================================
   Contact / closing CTA, corrected against the design.
   Drift found against the bundle:
     radial glow   missing            ->  radial-gradient(70% 90% at 18% 30%,
                                          rgba(220,220,0,0.55), transparent 70%)
     photo layer   inset 0            ->  inset -8% (the wash scales to 1.32,
                                          so a flush layer can expose an edge)
     lead copy     54ch, 1rem, .78    ->  52ch, clamp(1.05rem,1.4vw,1.3rem), .72
     lead spacing  section gap 22px   ->  margin-top 30px
     actions       section gap + 4px  ->  margin-top 40px
     entrance      generic rise on 3  ->  the whole section wipes up
     children
   As in #location, the section's flex gap was compounding with the margins
   below, so the gap goes to 0 and the two margins are the whole story.
   ========================================================================== */

#contact { gap: 0; }

/* The photo layer sits proud of the box because m60-wash scales it to 1.32 and
   translates it 4% — flush at inset:0 that can drag an edge into view. */
#contact::before { inset: -8%; }

/* The yellow bloom over the photo: bright top-left, clearing to nothing by 70%
   so the building reads through on the right. Paints after ::before, which is
   the design's layer order. */
#contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    70% 90% at 18% 30%,
    rgba(220,220,0,0.55) 0%,
    rgba(220,220,0,0) 70%
  );
  pointer-events: none;
}

#contact-lead {
  margin: 30px 0 0;
  max-width: 52ch;
  font-size: clamp(1.05rem,1.4vw,1.3rem);
  color: rgba(20,21,22,0.72);
}
#contact-actions {
  margin-top: 40px;
  padding: 0;
}

/* Entrance: the design wipes the whole section up rather than rising its
   children individually, so #contact joins the reveal list in place of its
   three children. Scoped by id so it overrides .m60-inview's opacity/translate
   with a clip-path wipe, and it inherits that system's scroll fallback and
   6s failsafe — a clip-path of inset(100%) hides everything, so it must never
   be left un-triggered. */
#contact.m60-inview {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
}
#contact.m60-inview.is-in {
  animation: m60-cta-wipe 1s var(--m60-ease) both;
}
@keyframes m60-cta-wipe {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  #contact.m60-inview,
  #contact.m60-inview.is-in { clip-path: none; animation: none; }
}

/* --- Contact: the 1440px content column ---------------------------------- */
/* The design wraps this section's content in `max-width:1440px; margin:0 auto`
   and left-aligns inside it. Mine took its left edge from the section gutter,
   so on a wide viewport the heading sat hard against the left edge instead of
   the column — measured 60px where buildings, news and stats all start at 553.
   Derived from the section's inline padding, the same way as those sections, so
   every child shares one left edge and can still cap its own text measure.
   This only matters where content is left-aligned: #spec and #location centre
   theirs, so the column and the full padded width share a centre line and they
   need no change. */
#contact {
  padding-inline: max(var(--m60-gutter), calc((100% - 1440px) / 2));
}
#contact > * {
  max-width: none;
  margin-inline: 0;
  width: 100%;
}
/* Restore each block's own measure, now that it no longer sets the column. */
#contact-title { max-width: 16ch; }
#contact-lead  { max-width: 52ch; }

/* ==========================================================================
   Partners marquee, corrected against the design.
   Drift found against the bundle:
     logo sizing   height:clamp(34px,3.4vw,48px), width:auto
                   ->  an equal cell per logo, the artwork contained inside it
     gap           clamp(40px,5vw,72px)  ->  clamp(14px,1.4vw,22px)
     duration      42s                   ->  46s
     track padding 0 clamp(20px,2.5vw,36px)  ->  0
     edge fade     none                  ->  a mask that clears both ends

   The sizing was the visible fault. Forcing a common HEIGHT makes the
   footprint depend on each logo's aspect: measured live, the rendered widths
   ran from 48px (EnerSys) to 171px (In The Style) at a fixed 48px tall — a
   3.6x spread, so square marks read as tiny and wordmarks dominated. The
   design instead gives every logo an identical box and fits the artwork
   inside it, which is what evens out their visual weight.

   The design uses a wrapper div per logo (fixed cell, grid place-items:center,
   22px padding) with the img capped at max-height:64px. The atomic build has
   the images as direct children of the track, so the cell geometry goes on the
   img itself: 28px block padding inside a 120px box leaves exactly the same
   64px-tall content area, and object-fit:contain centres the artwork in it.

   Track padding must stay 0 — the loop translates by -50% of the track, so any
   padding on it would offset the seam.
   ========================================================================== */

#partners {
  /* Clears both ends so logos fade rather than being chopped at the edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

#partners-row {
  gap: clamp(14px,1.4vw,22px);
  padding: 0;
  width: max-content;
  animation: m60-marquee 46s linear infinite;
}

#partners-row img {
  flex: none;
  width: clamp(180px,15vw,230px);
  height: 120px;
  padding: 28px 22px;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
}

@media (prefers-reduced-motion: reduce) {
  #partners-row { animation: none; }
}

/* ==========================================================================
   Latest News page (template: page-latest-news.php)
   Built from the design export `Latest News.dc.html`. Values below are that
   file's inline styles, not approximations.

   Note the cards here DO lift on hover (translateY(-8px) + shadow), unlike the
   homepage news cards which deliberately do not. The two are different designs;
   do not "harmonise" them.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

#news-hero {
  position: relative;
  overflow: hidden;
  /* The design's inline style says min-height:clamp(440px,62vh,640px), but its
     mountResponsive() then sets height:82vh (82dvh under 900px), which is what
     actually renders. The clamp stays as the floor. */
  min-height: clamp(440px,62vh,640px);
  height: 82vh;
  background: var(--m60-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(120px,14vh,180px) 0 clamp(60px,7vh,90px);
}
.m60-news-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.m60-news-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  animation: m60-wash 40s ease-in-out infinite alternate;
}
.m60-news-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20,21,22,0.80) 0%,
    rgba(20,21,22,0.62) 46%,
    rgba(20,21,22,0.92) 100%
  );
}
.m60-news-hero__copy {
  position: relative;
  z-index: 6;
  width: 100%;
  /* The hero column is 1680px here, wider than the 1440px body sections. */
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 clamp(20px,6vw,60px);
}
#news-hero-title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-size: clamp(2rem,5.4vw,5.6rem);
  color: #fff;
}
#news-hero-title > span { display: block; overflow: hidden; }
#news-hero-title .m60-heroline { display: block; }

.m60-news-hero__below {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  margin-top: 30px;
}
#news-hero-lead {
  margin: 0;
  max-width: 50ch;
  font-size: clamp(1.05rem,1.4vw,1.34rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
}
.m60-news-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* --- Buttons ------------------------------------------------------------- */

.m60-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 16px 34px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  will-change: transform;
}
.m60-btn--solid { background: var(--m60-yellow); color: var(--m60-ink); border: 0; }
.m60-btn--ghost { border: 1px solid rgba(255,255,255,0.42); color: #fff; background: transparent; }
.m60-btn--dark  { background: var(--m60-ink); color: #fff; border: 0; gap: 12px; min-height: 54px; padding: 17px 36px; }

/* The design's only ghost hover: fill white. The solid and dark buttons have
   no colour hover at all — the magnetic drift is their hover. These :hover
   rules restate the resting colours so the global `a:hover` cannot tint them
   (an id/class + :hover outranks it). */
.m60-btn--ghost:hover,
.m60-btn--ghost:focus-visible {
  background: #fff;
  color: var(--m60-ink);
  border-color: #fff;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.m60-btn--solid:hover,
.m60-btn--solid:focus-visible { background: var(--m60-yellow); color: var(--m60-ink); }
.m60-btn--dark:hover,
.m60-btn--dark:focus-visible  { background: var(--m60-ink); color: #fff; }

/* --- Post index ---------------------------------------------------------- */

#news-index {
  position: relative;
  overflow: hidden;
  background: var(--m60-off-white);
  padding: clamp(70px,10vw,140px) clamp(20px,6vw,60px);
}
.m60-news-index__parallax {
  position: absolute;
  inset: -18% 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.m60-news-index__parallax img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  will-change: transform;
  transform: translate3d(0, var(--m60-shift, 0px), 0);
}
.m60-news-index__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
}
#news-index-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px,2.4vw,34px);
}
@media (min-width: 660px)  { #news-index-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px) { #news-index-grid { grid-template-columns: repeat(3,1fr); } }

/* --- Card ---------------------------------------------------------------- */

.m60-newscard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid rgba(20,21,22,0.10);
  overflow: hidden;
  transition:
    transform 0.6s var(--m60-ease),
    box-shadow 0.6s var(--m60-ease);
}
.m60-newscard:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 70px -46px rgba(20,21,22,0.55);
}
.m60-newscard__link { position: absolute; inset: 0; z-index: 3; }

.m60-newscard__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #E9E9E4;
}
.m60-newscard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--m60-ease);
}
.m60-newscard:hover .m60-newscard__img { transform: scale(1.06); }

.m60-newscard__badge {
  position: absolute;
  left: 0;
  top: 0;
  padding: 8px 14px;
  background: var(--m60-yellow);
  color: var(--m60-ink);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.m60-newscard__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px,2.4vw,30px);
  flex: 1;
}
.m60-newscard__date {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-grey);
}
.m60-newscard__title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.14;
  font-size: clamp(1.15rem,1.6vw,1.45rem);
  color: var(--m60-ink);
  text-wrap: pretty;
}
.m60-newscard__excerpt {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--m60-slate);
}
.m60-newscard__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-ink);
}
.m60-newscard__arrow {
  display: block;
  transition: transform 0.4s var(--m60-ease);
}
.m60-newscard:hover .m60-newscard__arrow,
.m60-btn:hover .m60-newscard__arrow { transform: translateX(8px); }

/* --- Enquire band -------------------------------------------------------- */

#enquire {
  background: var(--m60-yellow);
  color: var(--m60-ink);
  padding: clamp(58px,7vw,100px) clamp(20px,6vw,60px);
}
.m60-enquire__grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px,3.4vw,56px);
  align-items: center;
}
@media (min-width: 900px) {
  .m60-enquire__grid { grid-template-columns: 1.4fr auto; }
}
#enquire-title {
  margin: 0 0 14px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-size: clamp(2rem,4.2vw,3.4rem);
}
#enquire-lead {
  margin: 0;
  max-width: 50ch;
  font-size: clamp(1.02rem,1.2vw,1.2rem);
  line-height: 1.55;
  color: rgba(20,21,22,0.78);
}
#enquire-lead a { color: var(--m60-ink); text-decoration: underline; }
#enquire-cta { justify-self: start; }

/* The design switches the news hero to dynamic viewport units below 900px so
   mobile browser chrome does not clip it. */
@media (max-width: 899px) {
  #news-hero { height: 82dvh; }
}

/* --- Film grain ---------------------------------------------------------- */
/* The design puts a fixed noise layer over every page (z-index 9000, opacity
   0.035). It was never implemented in this build — missing site-wide, not just
   on one page — so it goes on body::after rather than in markup, which covers
   every template at once without touching the Themer header.
   pointer-events:none so it never intercepts a click. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.035;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='4'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

/* --- Hard guard on <main id="top"> --------------------------------------- */
/* Templates other than the homepage use <main id="top"> as the design's nav and
   skip anchor, while the homepage hero is <section id="top">. Scoping the hero
   rules to `section#top` already keeps them apart, but that is a single point of
   failure: if a stale stylesheet, a reordered rule or a future edit drops the
   qualifier, <main> silently becomes a 100vh flex hero with overflow:hidden and
   a dark gradient, and every section below it collapses and overlaps.
   State the safe values outright so that cannot happen again. */
main#top {
  display: block;
  height: auto;
  min-height: 0;
  overflow: visible;
  background: none;
  padding: 0;
  justify-content: normal;
}
main#top::before,
main#top::after {
  content: none;
  display: none;
}

/* ==========================================================================
   Contact Us page (template: page-contact-us.php)
   Built from the design export `Contact Us.dc.html`.
   The hero reuses the Latest News hero classes; only the id differs.
   ========================================================================== */

#contact-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(440px,62vh,640px);
  height: 82vh;
  background: var(--m60-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(120px,14vh,180px) 0 clamp(60px,7vh,90px);
}
@media (max-width: 899px) { #contact-hero { height: 82dvh; } }

#contact-hero-title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-size: clamp(2rem,5.4vw,5.6rem);
  color: #fff;
}
#contact-hero-title > span { display: block; overflow: hidden; }
#contact-hero-title .m60-heroline { display: block; }
#contact-hero-lead {
  margin: 0;
  max-width: 50ch;
  font-size: clamp(1.05rem,1.4vw,1.34rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
}

/* --- Details + form ------------------------------------------------------ */

#details {
  position: relative;
  overflow: hidden;
  background: var(--m60-off-white);
  padding: clamp(70px,10vw,140px) clamp(20px,6vw,60px);
}
.m60-contact__grid {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px,5vw,80px);
  align-items: start;
}
@media (min-width: 1000px) {
  .m60-contact__grid { grid-template-columns: 1fr 1fr; }
}

.m60-contact__col {
  display: flex;
  flex-direction: column;
  gap: clamp(28px,3.4vw,44px);
}
.m60-contact__label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-grey);
  margin-bottom: 16px;
}
.m60-contact__name {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(1.8rem,3.2vw,2.6rem);
  color: var(--m60-ink);
}
.m60-contact__role {
  margin-top: 12px;
  font-size: 1.02rem;
  color: var(--m60-grey);
}
.m60-contact__links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}
.m60-contact__tel {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 1.24rem;
  color: var(--m60-ink);
}
.m60-contact__tel svg { display: block; flex: none; }
.m60-contact__email {
  font-size: 1.08rem;
  color: var(--m60-slate);
  border-bottom: 1px solid rgba(20,21,22,0.2);
  align-self: flex-start;
}
.m60-contact__block {
  padding-top: clamp(24px,3vw,34px);
  border-top: 1px solid rgba(20,21,22,0.14);
}
#contact-address {
  font-style: normal;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--m60-slate);
}
#contact-getting-here,
#contact-tenants {
  margin: 0;
  max-width: 46ch;
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--m60-slate);
}
#contact-getting-here strong,
#contact-tenants strong { font-weight: 700; }

/* --- The form card ------------------------------------------------------- */

.m60-contact__form {
  background: #FFFFFF;
  border: 1px solid rgba(20,21,22,0.10);
  padding: clamp(26px,3.2vw,44px);
  box-shadow: 0 30px 70px -50px rgba(20,21,22,0.45);
}
#contact-form-title {
  margin: 0 0 4px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(1.5rem,2.4vw,2rem);
  color: var(--m60-ink);
}
.m60-contact__formnote,
.m60-contact__formfallback {
  margin: 20px 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--m60-grey);
}
.m60-contact__formfallback a { color: var(--m60-ink); text-decoration: underline; }

/* --- Gravity Forms (Orbital theme) --------------------------------------- */
/* Orbital ships scoped stylesheets that beat ordinary selectors, so the parts
   it exposes are set through its own custom properties and the rest needs
   !important. Column widths are NOT set here - they come from
   layoutGridColumnSpan on the form definition, which is the only thing Orbital
   reliably honours (see tools/create-gf-form-enquiry.php). */

.m60-contact__form .gform_wrapper {
  --gf-ctrl-bg-color: var(--m60-off-white);
  --gf-ctrl-border-color: rgba(20,21,22,0.16);
  --gf-ctrl-border-color-focus: var(--m60-yellow);
  --gf-ctrl-border-radius: 0;
  --gf-ctrl-color: var(--m60-slate);
  --gf-ctrl-size-height: 48px;
  --gf-color-primary: var(--m60-yellow);
  --gf-label-color-primary: var(--m60-grey);
  --gf-ctrl-label-color-primary: var(--m60-grey);
  --gf-ctrl-btn-bg-color-primary: var(--m60-yellow);
  --gf-ctrl-btn-color-primary: var(--m60-ink);
  --gf-ctrl-btn-border-color-primary: var(--m60-yellow);
  --gf-ctrl-btn-size-height: 54px;
  --gf-form-gap-y: 20px;
}

/* Labels: the design's small uppercase grey caption. */
.m60-contact__form .gform_wrapper .gfield_label {
  font-size: 0.64rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--m60-grey) !important;
  margin-bottom: 9px !important;
}
.m60-contact__form .gform_wrapper .gform_required_legend { display: none !important; }

/* Inputs: square, off-white, 1px rule - not Orbital's rounded default. */
.m60-contact__form .gform_wrapper input[type="text"],
.m60-contact__form .gform_wrapper input[type="email"],
.m60-contact__form .gform_wrapper input[type="tel"],
.m60-contact__form .gform_wrapper select,
.m60-contact__form .gform_wrapper textarea {
  min-height: 48px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(20,21,22,0.16) !important;
  border-radius: 0 !important;
  background: var(--m60-off-white) !important;
  font-size: 1rem !important;
  color: var(--m60-slate) !important;
  box-shadow: none !important;
}
.m60-contact__form .gform_wrapper textarea {
  min-height: 0 !important;
  resize: vertical !important;
}
/* The design lifts a focused field to white with a yellow rule. */
.m60-contact__form .gform_wrapper input:focus,
.m60-contact__form .gform_wrapper select:focus,
.m60-contact__form .gform_wrapper textarea:focus {
  border-color: var(--m60-yellow) !important;
  background: #fff !important;
  outline: none !important;
}

/* Submit: the design's full-width yellow bar, square not pill. */
.m60-contact__form .gform_wrapper .gform_footer { padding: 0 !important; margin: 4px 0 0 !important; }
.m60-contact__form .gform_wrapper .gform_button {
  width: 100% !important;
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--m60-yellow) !important;
  color: var(--m60-ink) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.35s ease, color 0.35s ease !important;
}
.m60-contact__form .gform_wrapper .gform_button:hover {
  background: var(--m60-ink) !important;
  color: var(--m60-yellow) !important;
}
.m60-contact__form .gform_confirmation_message {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--m60-slate);
}

/* --- Map ----------------------------------------------------------------- */

#map {
  background: var(--m60-ink);
  color: #fff;
  padding: clamp(56px,7vw,100px) clamp(20px,6vw,60px);
}
.m60-map__inner { max-width: 1440px; margin: 0 auto; }
.m60-map__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: clamp(24px,3vw,38px);
}
#map-title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.94;
  font-size: clamp(1.9rem,4.2vw,3.4rem);
}
@media (min-width: 900px) { #map-title { white-space: nowrap; } }
#map-directions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-yellow);
  padding: 8px 0;
}
#map-directions:hover,
#map-directions:focus-visible { color: var(--m60-yellow); }
#map-directions:hover .m60-newscard__arrow { transform: translateX(8px); }

.m60-map__frame {
  position: relative;
  aspect-ratio: 21 / 9;
  min-height: 300px;
  background: var(--m60-slate);
  border: 1px solid rgba(255,255,255,0.14);
  overflow: hidden;
}
.m60-map__frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.05) brightness(0.92);
}

/* --- Gravity Forms: field width and required marker ---------------------- */
/* Gravity Forms sizes inputs with a `small|medium|large` class, independent of
   the field's own width. Every control was rendering at half its column (287px
   inside a 590px field, 136px inside 287px) while only the textarea filled it.
   The column widths come from layoutGridColumnSpan; the control should always
   fill whatever column it is in. */
.m60-contact__form .gform_wrapper input[type="text"],
.m60-contact__form .gform_wrapper input[type="email"],
.m60-contact__form .gform_wrapper input[type="tel"],
.m60-contact__form .gform_wrapper select,
.m60-contact__form .gform_wrapper textarea {
  width: 100% !important;
  max-width: 100% !important;
}

/* The design shows no required marker at all. Keeping one is the right call —
   removing it would strip a real accessibility affordance for pixel fidelity —
   but Gravity Forms' red (#C02B0A) shouts against this palette, so it is toned
   down to the same quiet caption the label uses. */
.m60-contact__form .gform_wrapper .gfield_required {
  color: var(--m60-grey) !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  letter-spacing: inherit !important;
}

/* --- Masked hero lines: stop the mask clipping descenders ---------------- */
/* The hero h1 wraps each line in an overflow:hidden span so the line can wipe
   up from below. With line-height 0.92 the line box is shorter than the glyphs
   (measured: an 89.6px font gives a 82px box against a 119px glyph box), so
   that mask cut 18px off the bottom — the "g" in "Book a viewing" and the "p"
   in "News from the park" both lost their tails.
   These are the design's own values: it solves the same problem on the
   homepage CTA lines with padding that makes room for the overhang, cancelled
   by an equal negative margin so nothing moves in the layout. */
#contact-hero-title > span,
#news-hero-title > span {
  padding: 0.10em 0.05em 0.26em;
  margin: -0.10em -0.05em -0.26em;
}

/* --- Gravity Forms: control line-height and outer spacing ---------------- */

/* Gravity Forms gives its controls a 38px line-height, but the control's own
   content box is only 24px (48px height minus 12px padding top and bottom), so
   the text overflowed its box and the select's "Book a viewing" was clipped
   along the bottom. 1.4 on a 16px font is 22.4px, which fits inside 24px. */
.m60-contact__form .gform_wrapper input[type="text"],
.m60-contact__form .gform_wrapper input[type="email"],
.m60-contact__form .gform_wrapper input[type="tel"],
.m60-contact__form .gform_wrapper select,
.m60-contact__form .gform_wrapper textarea {
  line-height: 1.4 !important;
}

/* The design lays the form card out as a flex column with gap:20px, and gives
   the heading margin:0 0 4px — so the heading clears the first field by 24px
   and the submit button clears the last field by 20px. Gravity Forms brings
   its own wrapper, which sat flush, leaving both gaps at 4px. Restore them.
   The 20px between fields already comes from .gform_fields' row-gap. */
.m60-contact__form .gform_wrapper {
  margin-top: 20px !important;
}
.m60-contact__form .gform_wrapper .gform_footer {
  margin: 20px 0 0 !important;
  padding: 0 !important;
}

/* Validation messages, so a failed submit does not look cramped either. */
.m60-contact__form .gform_wrapper .gform_validation_errors {
  margin: 0 0 20px !important;
  border-radius: 0 !important;
}
.m60-contact__form .gform_wrapper .gfield_validation_message,
.m60-contact__form .gform_wrapper .validation_message {
  margin-top: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 0.86rem !important;
}

/* The design lays the form card out as a flex column with gap:20px, with the
   heading carrying margin:0 0 4px — so the heading clears the first field by
   24px, not 20px. Reproducing that with a margin on the Gravity Forms wrapper
   did not work: adjacent margins collapse, so 4px and 20px resolved to 20px,
   not 24px. Use the design's own mechanism — flex gap does not collapse. */
.m60-contact__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.m60-contact__form .gform_wrapper { margin-top: 0 !important; }
.m60-contact__form .m60-contact__formnote,
.m60-contact__form .m60-contact__formfallback { margin: 0 !important; }

/* ==========================================================================
   Elm Court page (template: page-elm-court.php)
   Built from the design export `Elm Court.dc.html`.
   ========================================================================== */

.m60-elm__inner { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; }

/* --- Hero ---------------------------------------------------------------- */

#elm-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(440px,62vh,640px);
  height: 82vh;
  background: var(--m60-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(120px,14vh,180px) 0 clamp(60px,7vh,90px);
}
@media (max-width: 899px) { #elm-hero { height: 82dvh; } }

/* This hero's scrim is lighter than the news one — the design lets more of the
   building through. */
.m60-news-hero__scrim--elm {
  background: linear-gradient(
    180deg,
    rgba(20,21,22,0.72) 0%,
    rgba(20,21,22,0.44) 44%,
    rgba(20,21,22,0.88) 100%
  );
}

#elm-hero-title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-size: clamp(2rem,5.4vw,5.6rem);
  color: #fff;
}
/* Same descender guard as the other masked heroes. */
#elm-hero-title > span,
#pos-title > span,
#enq-title > span {
  display: block;
  overflow: hidden;
  padding: 0.10em 0.05em 0.26em;
  margin: -0.10em -0.05em -0.26em;
}
#elm-hero-title .m60-heroline { display: block; }
#elm-hero-lead {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(1.05rem,1.4vw,1.34rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
}
#elm-hero-lead strong { font-weight: 700; color: #fff; }

/* "Currently Available" pill, with the same pinging dot as the nav. */
.m60-elm__badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--m60-yellow);
  color: var(--m60-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.m60-elm__dot {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--m60-ink);
  flex: none;
}
.m60-elm__dot::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 999px;
  background: var(--m60-ink);
  animation: m60-ping 2.6s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .m60-elm__dot::after { animation: none; }
}

/* --- Availability strip -------------------------------------------------- */

#availability {
  background: var(--m60-ink);
  color: #fff;
  padding: clamp(40px,5vw,64px) clamp(20px,6vw,60px);
}
.m60-avail__grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px,3vw,40px);
  align-items: center;
}
@media (min-width: 1000px) { .m60-avail__grid { grid-template-columns: 1.1fr 1fr; } }

#avail-title {
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(1.6rem,2.8vw,2.3rem);
}
#avail-lead { margin: 0; max-width: 46ch; color: rgba(255,255,255,0.72); line-height: 1.55; }

.m60-avail__chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.m60-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* --- Shared arrow link --------------------------------------------------- */

.m60-arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-ink);
  padding: 8px 0;
}
.m60-arrowlink:hover .m60-newscard__arrow,
.m60-arrowlink:focus-visible .m60-newscard__arrow { transform: translateX(8px); }
#availability .m60-arrowlink,
.m60-arrowlink--light { color: var(--m60-yellow); }
#availability .m60-arrowlink:hover,
.m60-arrowlink--light:hover { color: var(--m60-yellow); }
.m60-arrowlink--outline {
  padding: 14px 24px;
  border: 1px solid var(--m60-ink);
  border-radius: 999px;
  transition: background 0.4s ease, color 0.4s ease;
}
.m60-arrowlink--outline:hover,
.m60-arrowlink--outline:focus-visible { background: var(--m60-ink); color: #fff; }

/* --- About --------------------------------------------------------------- */

#about {
  position: relative;
  overflow: hidden;
  background: var(--m60-off-white);
  padding: clamp(70px,10vw,140px) clamp(20px,6vw,60px);
}
#about-title {
  margin: 0 0 clamp(30px,4vw,52px);
  max-width: 22ch;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  font-size: clamp(1.9rem,4.2vw,3.4rem);
  color: var(--m60-ink);
  text-wrap: pretty;
}
.m60-about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px,4vw,64px);
  align-items: start;
}
@media (min-width: 1000px) { .m60-about__grid { grid-template-columns: 1.25fr 1fr; } }
.m60-about__copy { display: flex; flex-direction: column; gap: 24px; max-width: 62ch; }
.m60-about__copy p { margin: 0; font-size: 1.04rem; line-height: 1.66; color: var(--m60-slate); }
.m60-about__actions { display: flex; flex-wrap: wrap; gap: 14px; align-self: flex-start; align-items: center; }
.m60-about__media { overflow: hidden; aspect-ratio: 4 / 5; background: #E9E9E4; }
.m60-about__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Tours --------------------------------------------------------------- */

#tours {
  background: var(--m60-slate);
  color: #fff;
  padding: clamp(70px,10vw,140px) clamp(20px,6vw,60px);
}
#tours-title {
  margin: 0 0 clamp(26px,3vw,40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(1.9rem,4.2vw,3.4rem);
}
.m60-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(20px,2.4vw,30px);
}
.m60-tab {
  padding: 12px 20px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  background: none;
  color: rgba(255,255,255,0.72);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.m60-tab:hover { border-color: var(--m60-yellow); color: #fff; }
.m60-tab.is-active {
  background: var(--m60-yellow);
  border-color: var(--m60-yellow);
  color: var(--m60-ink);
}
.m60-tabs__panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px,3vw,40px);
  align-items: start;
}
@media (min-width: 1000px) { .m60-tabs__panels { grid-template-columns: 1.7fr 1fr; } }
.m60-tabs__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #1A1B1C;
  border: 1px solid rgba(255,255,255,0.14);
  overflow: hidden;
}
.m60-tabs__frame iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.m60-tabs__side { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.m60-tabs__caplabel {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-yellow);
  margin-bottom: 10px;
}
.m60-tabs__cap p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,0.78); }
#tours .m60-arrowlink { color: var(--m60-yellow); }

/* --- Floor areas --------------------------------------------------------- */

#floors {
  position: relative;
  overflow: hidden;
  background: var(--m60-off-white);
  padding: clamp(70px,10vw,140px) clamp(20px,6vw,60px);
}
.m60-floors__inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }
#floors-title {
  margin: 0 0 14px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(1.9rem,4.2vw,3.4rem);
  color: var(--m60-ink);
}
@media (min-width: 900px) { #floors-title { white-space: nowrap; } }
#floors-lead { margin: 0 0 clamp(28px,3.4vw,44px); max-width: 52ch; font-size: 1.04rem; line-height: 1.6; color: var(--m60-slate); }

.m60-floors__table { border-top: 1px solid rgba(20,21,22,0.14); }
.m60-floor {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: center;
  gap: clamp(14px,2vw,28px);
  padding: 20px 0;
  border-bottom: 1px solid rgba(20,21,22,0.14);
}
.m60-floor__name {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-grey);
}
.m60-floor__track {
  position: relative;
  height: 10px;
  background: rgba(20,21,22,0.08);
  overflow: hidden;
}
.m60-floor__bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--m60-floor-pct, 100%);
  background: var(--m60-yellow);
  transform-origin: left center;
}
.m60-floor__bar--full { width: 100%; }
.m60-floor__area {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.2rem,2vw,1.7rem);
  color: var(--m60-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.m60-floor__area span { font-size: 0.5em; font-weight: 400; color: var(--m60-grey); }
.m60-floor--total .m60-floor__name { color: var(--m60-ink); font-weight: 700; }

/* The bar grows from the left. Driven by a keyframe rather than a transition,
   for the same cascade reason as every other reveal here. */
.m60-floor--armed .m60-floor__bar { transform: scaleX(0); }
.m60-floor--armed.is-in .m60-floor__bar {
  animation: m60-floor-grow 0.9s var(--m60-ease) var(--m60-floor-delay, 0ms) both;
}
@keyframes m60-floor-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .m60-floor--armed .m60-floor__bar { transform: none; animation: none; }
}

/* --- Facilities ---------------------------------------------------------- */

#facilities {
  background: var(--m60-ink);
  color: #fff;
  padding: clamp(70px,10vw,140px) clamp(20px,6vw,60px);
}
.m60-fac__grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px,4.4vw,72px);
  align-items: start;
}
@media (min-width: 1000px) { .m60-fac__grid { grid-template-columns: 1fr 1fr; } }
#fac-onsite-title,
#fac-doorstep-title {
  margin: 0 0 clamp(20px,2.4vw,30px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(1.6rem,2.8vw,2.3rem);
}
.m60-fac__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.m60-fac__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
}
.m60-fac__list strong { color: #fff; font-weight: 700; }
.m60-fac__tick {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.55em;
  background: var(--m60-yellow);
}

/* --- Brochure ------------------------------------------------------------ */

#brochure {
  background: var(--m60-yellow);
  color: var(--m60-ink);
  padding: clamp(58px,7vw,100px) clamp(20px,6vw,60px);
}
.m60-broch__grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px,3.4vw,56px);
  align-items: center;
}
@media (min-width: 900px) { .m60-broch__grid { grid-template-columns: 1.2fr 1fr; } }
#broch-title {
  margin: 0 0 14px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  font-size: clamp(1.8rem,3.6vw,3rem);
}
#broch-lead { margin: 0 0 22px; max-width: 46ch; font-size: clamp(1rem,1.2vw,1.15rem); line-height: 1.55; color: rgba(20,21,22,0.78); }
.m60-broch__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.m60-broch__list li {
  padding-left: 20px;
  position: relative;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(20,21,22,0.82);
}
.m60-broch__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 1px;
  background: var(--m60-ink);
}

/* --- Gallery ------------------------------------------------------------- */

#gallery {
  position: relative;
  overflow: hidden;
  background: var(--m60-off-white);
  padding: clamp(70px,10vw,150px) clamp(20px,6vw,60px);
}
#gallery-title {
  margin: 0 0 clamp(30px,4vw,54px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.94;
  font-size: clamp(2rem,4.6vw,4rem);
  color: var(--m60-ink);
}
/* The design's breakpoints are 640 and 1000, set from JS on .gal__grid. */
.m60-gal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px,1.8vw,26px);
}
@media (min-width: 640px)  { .m60-gal__grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .m60-gal__grid { grid-template-columns: repeat(4,1fr); } }
.m60-gal__fig {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #E9E9E4;
  aspect-ratio: 4 / 3;
}
/* The lead image spans the row above the others. It keeps 16/9 at every width
   — the 21/9 in the first build was mine, not the design's. */
.m60-gal__fig--wide { aspect-ratio: 16 / 9; }
@media (min-width: 640px)  { .m60-gal__fig--wide { grid-column: span 2; } }
@media (min-width: 1000px) { .m60-gal__fig--wide { grid-column: span 4; } }
.m60-gal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--m60-ease);
}
.m60-gal__fig:hover .m60-gal__img { transform: scale(1.05); }
/* A solid ink block hugging the bottom-left corner, sized by its own text.
   The first build ran a gradient the full width of the figure, which left the
   caption floating on the photo with no edge to read against. */
.m60-gal__fig figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 12px 18px;
  background: var(--m60-ink);
  color: #fff;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Centred pill, not a left-aligned text link. */
.m60-gal__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(34px,4vw,56px);
}

/* --- Positioning --------------------------------------------------------- */

#positioning {
  position: relative;
  overflow: hidden;
  background: var(--m60-ink);
  color: #fff;
  padding: clamp(80px,11vw,170px) clamp(20px,6vw,60px);
}
.m60-pos__media { position: absolute; top: -10%; right: -10%; bottom: -10%; left: -10%; overflow: hidden; }
.m60-pos__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: m60-wash 40s ease-in-out infinite alternate;
}
.m60-pos__scrim {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(20,21,22,0.88) 0%, rgba(20,21,22,0.80) 50%, rgba(20,21,22,0.93) 100%);
}
/* The design narrows this one to 1240px and centres it — it is a statement,
   not a content column, so it does not take the shared 1440px measure. */
.m60-pos__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}
#pos-title {
  margin: 0 auto;
  max-width: 24ch;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  font-size: clamp(1.9rem,4.6vw,4rem);
  text-wrap: pretty;
}
#pos-title .m60-heroline { display: block; }
.m60-pos__accent { color: var(--m60-yellow); }
#pos-lead {
  margin: clamp(28px,3.4vw,46px) auto 0;
  max-width: 56ch;
  font-size: clamp(1.05rem,1.3vw,1.26rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.76);
}
#pos-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(30px,3.4vw,46px);
}

/* Masked heading lines wipe up out of their own masks, staggered 0.09s apart,
   when the section arrives -- used by #pos-title and #enq-title. m60.js arms the
   hidden state (`m60-lines--armed`) so the heading is never invisible without
   JS, and strips both classes afterwards so the `backwards` fill cannot pin
   anything.

   The offset is 110% PLUS 0.3em, not a bare 110%. These masks carry the
   descender guard (#pos-title > span: padding 0.10em 0.05em 0.26em against an
   equal negative margin), so the mask box is taller than the line inside it by
   that padding. Translating the line by its own height therefore parks it in
   the guard's bottom padding, still inside the visible box — the top ~6px of
   every glyph stayed on screen until the reveal fired. The extra 0.3em clears
   the 0.26em guard with a little to spare. Any other masked line that takes
   the guard needs the same allowance. */
.m60-lines--armed .m60-heroline { transform: translateY(calc(110% + 0.3em)); }
.m60-lines--armed.is-in .m60-heroline {
  transform: translateY(0);
  animation: m60-line-up 1s var(--m60-ease) backwards;
}
.m60-lines--armed.is-in > span:nth-child(2) .m60-heroline { animation-delay: 0.09s; }
.m60-lines--armed.is-in > span:nth-child(3) .m60-heroline { animation-delay: 0.18s; }
@keyframes m60-line-up {
  from { transform: translateY(calc(110% + 0.3em)); }
  to   { transform: translateY(0); }
}

/* --- Stats band ---------------------------------------------------------- */
/* Not the same band as the homepage #stats: that one hangs a 1px white
   divider down the left of each figure, this one rules a 2px yellow line
   across the top. Both are their own design's; do not unify them. */

#elm-stats {
  position: relative;
  overflow: hidden;
  background: var(--m60-slate);
  color: #fff;
  padding: clamp(56px,7vw,96px) clamp(20px,6vw,60px);
}
.m60-elmstats__grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: clamp(28px,3.4vw,48px);
}
@media (min-width: 900px) { .m60-elmstats__grid { grid-template-columns: repeat(4,1fr); } }
.m60-elmstat {
  position: relative;
  padding: 0;
  transition: transform 0.5s var(--m60-ease);
}
/* Hover lifts the figure and turns it yellow. The client asked for this on
   the homepage band; the design has it here too. */
.m60-elmstat:hover { transform: translateY(-8px); }
.m60-elmstat:hover .m60-elmstat__num { color: var(--m60-yellow); }
.m60-elmstat__rule {
  height: 2px;
  margin-bottom: 20px;
  background: var(--m60-yellow);
  transform-origin: left center;
}
.m60-elmstat__num {
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-size: clamp(2.2rem,4.4vw,3.9rem);
  color: #fff;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s ease;
}
/* Only the unit carries the small grey treatment — the "%" is full size,
   which is how the design sets it. */
.m60-elmstat__unit { font-size: 0.4em; font-weight: 400; color: var(--m60-grey); }
.m60-elmstat__label {
  margin-top: 12px;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-grey);
  line-height: 1.5;
}
/* Rules draw in, staggered 0.1s. `backwards` only: the resting state is
   already scaleY(1), so once m60.js strips the classes nothing is pinned and
   the hover keeps working. */
.m60-elmstat--armed .m60-elmstat__rule { transform: scaleY(0); }
.m60-elmstat--armed.is-in .m60-elmstat__rule {
  transform: scaleY(1);
  animation: m60-rule-grow 0.8s var(--m60-ease) backwards;
  animation-delay: var(--m60-stat-delay, 0ms);
}
@keyframes m60-rule-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* --- Enquire / brochure form --------------------------------------------- */

/* Scoped `#enquire.m60-enq`, not bare `#enquire`. The Latest News template has
   its own <section id="enquire"> -- a yellow band at clamp(58px,7vw,100px) -- and
   an unqualified rule here, sitting later in the sheet, was repainting it
   off-white at 144px. Same trap as section#top. */
#enquire.m60-enq {
  position: relative;
  overflow: hidden;
  background: var(--m60-off-white);
  padding: clamp(70px,10vw,150px) clamp(20px,6vw,60px);
}
.m60-enq__grid {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px,5vw,80px);
  align-items: start;
}
@media (min-width: 1000px) { .m60-enq__grid { grid-template-columns: 1fr 1fr; } }
#enq-title {
  margin: 0 0 20px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.94;
  font-size: clamp(2.1rem,4.6vw,3.9rem);
  color: var(--m60-ink);
}
#enq-title .m60-heroline { display: block; }
#enq-lead {
  margin: 0 0 clamp(28px,3.4vw,44px);
  max-width: 44ch;
  font-size: clamp(1.05rem,1.25vw,1.22rem);
  line-height: 1.55;
  color: var(--m60-slate);
}

/* The agent block is a footnote under the invitation, NOT the Contact page's
   contact card. It reuses .m60-contact__* for markup convenience, and those
   classes carry the Contact page's much larger scale — "Imran Younus" was
   rendering at 28.8px against the design's 17.6px. Every size below is the
   design's own; keep them scoped to #enquire so the Contact page is untouched.
   The design also spaces the block with a flex `gap`, so the inherited
   per-child margins are cleared rather than left to compound with it. */
.m60-enq__agent {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: clamp(24px,3vw,36px);
  border-top: 1px solid rgba(20,21,22,0.14);
}
#enquire.m60-enq .m60-contact__label { margin-bottom: 0; }
#enquire.m60-enq .m60-contact__name {
  font-size: 1.1rem;
  line-height: normal;
  letter-spacing: normal;
}
#enquire.m60-enq .m60-contact__role {
  margin-top: 0;
  font-size: 0.98rem;
}
#enquire.m60-enq .m60-contact__tel {
  gap: 10px;
  font-size: 1.05rem;
}
#enquire.m60-enq .m60-contact__email { font-size: 1.02rem; }
.m60-enq__agentlinks { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-top: 4px; align-items: center; }

/* --- Availability strip, corrected against the design -------------------- */
/* I had built this dark on #141516 with outlined white chips. The design has
   it YELLOW with dark type — it is the loud "there is space here" band, not a
   quiet one. Drift found against `Elm Court.dc.html`:
     background   #141516, white type   ->  #DCDC00, #141516 type
     padding      clamp(40px,5vw,64px)  ->  clamp(44px,5.5vw,74px)
     h2           clamp(1.6,2.8vw,2.3)  ->  clamp(2.2rem,4.4vw,3.6rem), lh 0.95
     lead         46ch                  ->  52ch, clamp(1rem,1.2vw,1.16rem)
     chips        pill, white outline   ->  square, 1px rgba(20,21,22,0.28)
     rent chip    same as the others    ->  solid #141516 with #DCDC00 type
     "walk a floor"  plain text link    ->  solid #141516 pill, white type
   Chip order is fixed in the template, not here. */

#availability {
  background: var(--m60-yellow);
  color: var(--m60-ink);
  padding: clamp(44px,5.5vw,74px) clamp(20px,6vw,60px);
}

#avail-title {
  margin: 0 0 14px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: clamp(2.2rem,4.4vw,3.6rem);
  color: var(--m60-ink);
}
#avail-lead {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1rem,1.2vw,1.16rem);
  line-height: 1.55;
  color: rgba(20,21,22,0.78);
}

/* Square, not pill — the pill shape is reserved for actions on this page. */
#availability .m60-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid rgba(20,21,22,0.28);
  border-radius: 0;
  background: none;
  color: var(--m60-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* "Rent on application" inverts, so the commercial term reads as a statement
   rather than as another floor. */
#availability .m60-chip--solid {
  border-color: var(--m60-ink);
  background: var(--m60-ink);
  color: var(--m60-yellow);
}

/* The one action in the band keeps the site's pill shape. */
.m60-avail__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--m60-ink);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  will-change: transform;
}
.m60-avail__cta:hover,
.m60-avail__cta:focus-visible { background: var(--m60-ink); color: #fff; }
.m60-avail__cta:hover .m60-newscard__arrow,
.m60-avail__cta:focus-visible .m60-newscard__arrow { transform: translateX(8px); }

/* --- Elm Court: the two section-closing pills ---------------------------- */
/* "Pick a floor, pick a time" (#floors) and "Come and stand in it"
   (#facilities). Both were missing from the first build — I truncated my read
   of those two sections and lost their trailing CTAs. Same geometry as the
   hero buttons; only the colour differs per section. */
.m60-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  will-change: transform;
}
/* Two of the design's pills run a touch wider and larger (#positioning,
   #brochure) — its own values, not a rounding of the shared geometry. */
.m60-pill--wide { padding: 16px 34px; font-size: 0.76rem; }
.m60-pill--dark   { background: var(--m60-ink);    color: #fff; }
.m60-pill--yellow { background: var(--m60-yellow); color: var(--m60-ink); }
/* The design gives these no colour hover — the magnetic drift and the arrow
   are the hover. These rules restate the resting colours so the global
   `a:hover` cannot tint them. */
.m60-pill--dark:hover,
.m60-pill--dark:focus-visible   { background: var(--m60-ink);    color: #fff; }
.m60-pill--yellow:hover,
.m60-pill--yellow:focus-visible { background: var(--m60-yellow); color: var(--m60-ink); }
.m60-pill:hover .m60-newscard__arrow,
.m60-pill:focus-visible .m60-newscard__arrow { transform: translateX(8px); }

.m60-floors__foot { margin-top: clamp(28px,3.4vw,44px); }
.m60-fac__foot {
  max-width: 1440px;
  margin: clamp(32px,4vw,56px) auto 0;
}

/* --- Elm Court #about, corrected against the design ---------------------- */
/* Drift found against `Elm Court.dc.html`:
     h2 size      clamp(1.9rem,4.2vw,3.4rem)  ->  clamp(2.1rem,5vw,4.4rem)
     h2 leading   1.02                        ->  0.94
     h2 tracking  -0.03em                     ->  -0.035em
     h2 measure   22ch                        ->  26ch
     h2 margin    clamp(30px,4vw,52px)        ->  clamp(34px,4.5vw,64px)
     "See it for yourself"  plain text link   ->  solid #141516 pill
     "Download the brochure" outline, 14/24px ->  outline, 52px min-height,
                                                  16px 32px, rgba(20,21,22,0.28)
   The heading was reading a full size step small against the design, which on
   this page matters: it is the argument the whole building is sold on. */

#about-title {
  margin: 0 0 clamp(34px,4.5vw,64px);
  max-width: 26ch;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.94;
  font-size: clamp(2.1rem,5vw,4.4rem);
  color: var(--m60-ink);
  text-wrap: pretty;
}

/* Outlined pill — same geometry as the solid ones, so the pair sit level.
   This one DOES take a colour hover; the design gives it
   style-hover="background:#141516;color:#fff;border-color:#141516". */
.m60-pill--outline {
  border: 1px solid rgba(20,21,22,0.28);
  background: none;
  color: var(--m60-ink);
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.m60-pill--outline:hover,
.m60-pill--outline:focus-visible {
  background: var(--m60-ink);
  color: #fff;
  border-color: var(--m60-ink);
}

/* --- Elm Court #tours, corrected against the design ---------------------- */
/* I had built the tabs as outlined pills with a yellow fill on the active one.
   The design uses underline tabs: no chrome, a 2px yellow rule under the
   active label, and a hairline under the whole row that the active tab's rule
   sits on. Drift found against `Elm Court.dc.html`:
     background   #2B2C2E (slate)          ->  #141516 (ink)
     padding      clamp(70px,10vw,140px)   ->  clamp(70px,10vw,150px)
     h2           clamp(1.9rem,4.2vw,3.4)  ->  clamp(2rem,4.6vw,4rem), lh 0.94,
                                               ls -0.035em
     tab row      gap 8px, no rule         ->  gap 0, 1px bottom rule
     tab          pill + border + radius   ->  no chrome, 2px bottom border,
                                               padding 16px 24px 14px
     inactive     rgba(255,255,255,0.72)   ->  #8A8C8E
     active       yellow fill, ink text    ->  yellow text, yellow underline
     CTA          plain yellow text link   ->  yellow pill
   ========================================================================== */

#tours {
  background: var(--m60-ink);
  padding: clamp(70px,10vw,150px) clamp(20px,6vw,60px);
}
#tours-title {
  margin: 0 0 clamp(30px,4vw,52px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.94;
  font-size: clamp(2rem,4.6vw,4rem);
}

/* The row's hairline is what the active tab's 2px rule reads against, so the
   tabs butt together with no gap and sit directly on it. */
.m60-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  margin-bottom: clamp(24px,3vw,40px);
}
.m60-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 16px 24px 14px;
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--m60-grey);
  transition: color 0.35s ease, border-color 0.35s ease;
}
.m60-tab:hover {
  background: none;
  border-bottom-color: rgba(255,255,255,0.3);
  color: #fff;
}
.m60-tab.is-active {
  background: none;
  border-bottom-color: var(--m60-yellow);
  color: var(--m60-yellow);
}

.m60-tabs__caplabel { margin-bottom: 14px; }
.m60-tabs__cta { margin-top: clamp(26px,3vw,38px); }

/* --- Elm Court #floors, corrected against the design --------------------- */
/* Missing from the first build: the row hover, the black total row, and the
   phone line beside the CTA. Drift found against `Elm Court.dc.html`:
     row hover      none                    ->  rgba(20,21,22,0.035) + bar
                                                scaleX(1.02)
     total row      a normal row            ->  #141516, white type, yellow
                                                label, inset 16-26px, 2px gap
     total track    rgba(20,21,22,0.08)     ->  rgba(255,255,255,0.12)
     label column   fixed 7rem              ->  auto, min-width 8ch
     foot           CTA only                ->  CTA + "Or call Imran on ..."
   ========================================================================== */

/* The design sizes the label column by content with a floor on it, rather than
   pinning it — "Whole building" is longer than the floor names. */
.m60-floor {
  grid-template-columns: auto 1fr auto;
  padding: clamp(20px,2.4vw,30px) 0;
  transition: background 0.4s ease;
}
.m60-floor__name { min-width: 8ch; }

.m60-floor__bar {
  transform-origin: left center;
  transition: transform 0.5s var(--m60-ease);
}

/* Hover: the row tints and its bar overshoots slightly, which reads as the
   floor lifting toward you. Only the real floors — the total is not a choice
   you can make. */
.m60-floor:not(.m60-floor--total):hover { background: rgba(20,21,22,0.035); }
.m60-floor:not(.m60-floor--total):hover .m60-floor__bar { transform: scaleX(1.02); }

/* Total row: a solid black bar that closes the table. */
.m60-floor--total {
  margin-top: 2px;
  padding: clamp(22px,2.6vw,34px) clamp(16px,2vw,26px);
  background: var(--m60-ink);
  color: #fff;
  border-bottom: 0;
}
.m60-floor--total .m60-floor__name {
  color: var(--m60-yellow);
  font-weight: 700;
}
.m60-floor--total .m60-floor__track { background: rgba(255,255,255,0.12); }
.m60-floor--total .m60-floor__area { color: #fff; }
.m60-floor--total .m60-floor__area span { color: rgba(255,255,255,0.6); }

/* Foot: the CTA sits beside a plain-language phone fallback, so someone who
   does not want a form still has a way through. */
.m60-floors__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  margin-top: clamp(28px,3.4vw,44px);
}
.m60-floors__call {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--m60-grey);
}
.m60-floors__call a {
  color: var(--m60-ink);
  font-weight: 700;
  border-bottom: 1px solid rgba(20,21,22,0.24);
}
.m60-floors__call a:hover,
.m60-floors__call a:focus-visible { color: var(--m60-ink); }

/* --- Elm Court #brochure, corrected against the design ------------------- */
/* Drift found against `Elm Court.dc.html`:
     padding    clamp(58px,7vw,100px)      ->  clamp(70px,10vw,140px)
     grid gap   clamp(28px,3.4vw,56px)     ->  clamp(36px,5vw,80px)
     h2         clamp(1.8rem,3.6vw,3rem)   ->  clamp(2.1rem,4.6vw,3.9rem), lh 0.94
     h2 margin  14px                       ->  20px
     lead       clamp(1rem,1.2vw,1.15rem)  ->  clamp(1.05rem,1.25vw,1.22rem),
                                                margin clamp(26px,3vw,40px)
     CTA        plain text link            ->  solid #141516 pill
     list       dash markers, 12px gap     ->  ruled rows: gap 0, 16px padding,
                                                1px top rule each
   The list is the substantive difference: the design reads it as a contents
   table for the brochure, not as a bulleted aside. */

#brochure { padding: clamp(70px,10vw,140px) clamp(20px,6vw,60px); }
.m60-broch__grid { gap: clamp(36px,5vw,80px); }

#broch-title {
  margin: 0 0 20px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.94;
  font-size: clamp(2.1rem,4.6vw,3.9rem);
}
#broch-lead {
  margin: 0 0 clamp(26px,3vw,40px);
  max-width: 46ch;
  font-size: clamp(1.05rem,1.25vw,1.22rem);
  line-height: 1.55;
  color: rgba(20,21,22,0.78);
}

/* This one CTA is 34px/0.76rem where the other pills are 32px/0.74rem — the
   design's own values, kept rather than rounded to the shared geometry. */
.m60-broch__cta {
  padding: 16px 34px;
  font-size: 0.76rem;
}

/* Ruled rows, not bullets. */
.m60-broch__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.m60-broch__list li {
  padding: 16px 0;
  border-top: 1px solid rgba(20,21,22,0.22);
  font-size: clamp(1rem,1.15vw,1.12rem);
  color: rgba(20,21,22,0.82);
}
/* The dash marker from the first build has no place in a ruled list. */
.m60-broch__list li::before { content: none; }

/* ==========================================================================
   Oak / Beech / Maple Court — the three "fully let" pages.
   One design, three content sets; see inc/building.php. Every value below is
   from `Oak Court.dc.html`, which is byte-identical to the other two but for
   the copy. Ids carry a `bld-` prefix because #about, #status and #occupiers
   would otherwise collide with Elm Court's — see _dev/CLAUDE.md.
   ========================================================================== */

/* Hero. Same furniture as the Elm Court hero; only the scrim and the badge
   differ — the design lets a little less of the building through here, and
   the badge is outlined with a grey dot rather than the yellow "Currently
   Available" pill. */
#bld-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(440px,62vh,640px);
  height: 82vh;
  background: var(--m60-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(120px,14vh,180px) 0 clamp(60px,7vh,90px);
}
@media (max-width: 899px) { #bld-hero { height: 82dvh; } }
.m60-news-hero__scrim--bld {
  background: linear-gradient(
    180deg,
    rgba(20,21,22,0.74) 0%,
    rgba(20,21,22,0.48) 44%,
    rgba(20,21,22,0.90) 100%
  );
}
.m60-bld__badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.34);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* A plain grey dot: this building is not available, so it does not ping. */
.m60-bld__dot {
  display: block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--m60-grey);
}
#bld-hero-title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-size: clamp(2rem,5.4vw,5.6rem);
  color: #fff;
}
/* Descender guard, as on every masked heading. The wipe offset in
   .m60-lines--armed allows for it. */
#bld-hero-title > span {
  display: block;
  overflow: hidden;
  padding: 0.10em 0.05em 0.26em;
  margin: -0.10em -0.05em -0.26em;
}
#bld-hero-title .m60-heroline { display: block; }
#bld-hero-lead {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(1.05rem,1.4vw,1.34rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
}

/* Status band. */
#bld-status {
  background: var(--m60-ink);
  color: #fff;
  padding: clamp(52px,6.5vw,88px) clamp(20px,6vw,60px);
}
.m60-bldstatus__grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px,3.6vw,60px);
  align-items: center;
}
@media (min-width: 1000px) { .m60-bldstatus__grid { grid-template-columns: 1.3fr 1fr; } }
#bld-status-title {
  margin: 0 0 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: clamp(2.1rem,4.4vw,3.6rem);
}
#bld-status-lead {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(1rem,1.2vw,1.16rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.76);
}
.m60-bldstatus__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
/* The design's second action is a yellow text link, not a second pill --
   that is .m60-arrowlink--light, which already carries the right size and
   colour. Only the gap differs here: 12px against the shared 10px. */
#bld-status .m60-arrowlink,
#bld-occupiers .m60-arrowlink { gap: 12px; }

/* About. */
#bld-about {
  position: relative;
  overflow: hidden;
  background: var(--m60-off-white);
  padding: clamp(70px,10vw,150px) clamp(20px,6vw,60px);
}
.m60-bld__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
}
#bld-about-title {
  margin: 0 0 clamp(30px,4vw,54px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.94;
  font-size: clamp(2rem,4.6vw,4rem);
  color: var(--m60-ink);
}
.m60-bldabout__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px,4vw,64px);
  align-items: start;
}
@media (min-width: 1000px) { .m60-bldabout__grid { grid-template-columns: 1.25fr 1fr; } }
.m60-bldabout__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 62ch;
}
.m60-bldabout__copy p {
  margin: 0;
  font-size: clamp(1.02rem,1.25vw,1.2rem);
  line-height: 1.62;
  color: var(--m60-slate);
}
.m60-bldabout__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #E9E9E4;
}
.m60-bldabout__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Spec list: ruled rows with a small square marker, not bullets. */
.m60-bldspec {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.m60-bldspec li {
  display: flex;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid rgba(20,21,22,0.14);
  font-size: 1.02rem;
  line-height: 1.5;
}
.m60-bldspec li:last-child { border-bottom: 1px solid rgba(20,21,22,0.14); }
.m60-bldspec__tick {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  background: var(--m60-yellow);
}

/* Occupiers. */
#bld-occupiers {
  background: var(--m60-slate);
  color: #fff;
  padding: clamp(70px,9vw,130px) clamp(20px,6vw,60px);
}
.m60-bldocc__grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px,4.5vw,72px);
  align-items: start;
}
@media (min-width: 1000px) { .m60-bldocc__grid { grid-template-columns: 1fr 1fr; } }
#bld-occ-title {
  margin: 0 0 22px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.94;
  font-size: clamp(1.9rem,4.2vw,3.4rem);
}
#bld-occ-lead {
  margin: 0 0 26px;
  max-width: 50ch;
  font-size: clamp(1.02rem,1.2vw,1.16rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.76);
}
.m60-bldquote {
  margin: 0;
  padding: clamp(26px,3vw,42px);
  background: var(--m60-ink);
  border-left: 3px solid var(--m60-yellow);
}
.m60-bldquote p {
  margin: 0 0 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  font-size: clamp(1.2rem,2vw,1.7rem);
  color: #fff;
}
.m60-bldquote footer {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-grey);
}

/* Elm Court cross-sell. */
#bld-elm-cta {
  background: var(--m60-yellow);
  color: var(--m60-ink);
  padding: clamp(58px,7vw,100px) clamp(20px,6vw,60px);
}
.m60-bldcta__grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px,3.4vw,56px);
  align-items: center;
}
@media (min-width: 900px) { .m60-bldcta__grid { grid-template-columns: 1.4fr auto; } }
#bld-cta-title {
  margin: 0 0 14px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-size: clamp(2rem,4.2vw,3.4rem);
}
#bld-cta-lead {
  margin: 0;
  max-width: 50ch;
  font-size: clamp(1.02rem,1.2vw,1.2rem);
  line-height: 1.55;
  color: rgba(20,21,22,0.78);
}
/* This pill runs 54px/17px 36px against the shared 52px/16px 32px. */
#bld-cta-link {
  justify-self: start;
  min-height: 54px;
  padding: 17px 36px;
}

/* The design opens the hero on a timeline: line wipe, then badge, lead and
   buttons 0.08s apart. mountMaskLines fires the wipe on the first frame and
   these three ride the shared m60-rise with matching delays. `both` fill
   holds them hidden until their turn. */
#bld-badge.is-in        { animation-delay: 0.32s; }
#bld-hero-lead.is-in    { animation-delay: 0.40s; }
#bld-hero-actions.is-in { animation-delay: 0.48s; }

/* ==========================================================================
   22 Sep 2026 review round (Zach Roberts, Media Town)
   ========================================================================== */

/* --- Building pages: availability chips in the status band ------------- */
/* Oak and Beech now have space. The floor list reuses .m60-chip (white on
   the ink band); a let floor stays in the list but drops back. */
.m60-bldstatus__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.m60-chip--off {
  color: rgba(255,255,255,0.42);
  border-color: rgba(255,255,255,0.14);
}

/* --- Elm Court: "available of whole building" on the total row ---------- */
.m60-floor__of {
  font-size: 0.72em;
  font-weight: 400;
  color: var(--m60-grey);
  margin-left: 6px;
}

/* --- Contact page: phone and email now lead the column ------------------ */
/* The named agent and role were removed, so the links step up to carry the
   block. Same weight the name had, one size down. */
.m60-contact__links--lead { margin-top: 0; gap: 16px; }
.m60-contact__links--lead .m60-contact__tel {
  font-size: clamp(1.4rem,2.4vw,2rem);
  letter-spacing: -0.02em;
}
.m60-contact__links--lead .m60-contact__tel svg { width: 24px; height: 24px; }

/* --- Contact page: colour satellite map --------------------------------- */
/* The client asked for a satellite view in colour, so the grayscale filter
   the street map wore is off for this frame. */
.m60-map__frame--satellite iframe { filter: none; }

/* --- Homepage: Amenity Hub film ----------------------------------------- */
/* Sits between #amenities (off-white) and #park (ink). White, so the three
   read as three. The frame is an atomic e-image; m60.js puts the play button
   over it and swaps in the Vimeo iframe on press. */
#hub-film {
  position: relative;
  background: #FFFFFF;
  padding: clamp(80px,12vw,180px) var(--m60-gutter);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
#hub-film-title {
  margin: 0 0 clamp(14px,1.6vw,22px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-size: clamp(1.9rem,4vw,3.6rem);
  color: var(--m60-ink);
}
#hub-film-lead {
  margin: 0 0 clamp(28px,4vw,52px);
  max-width: 52ch;
  font-size: clamp(1.02rem,1.25vw,1.2rem);
  line-height: 1.6;
  color: var(--m60-slate);
}
#hub-film-frame {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--m60-ink);
  padding: 0;
  gap: 0;
}
#hub-film-frame > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
#hub-film-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--m60-ease), opacity 0.4s ease;
}
#hub-film-frame:hover img { transform: scale(1.03); }
#hub-film-frame.is-playing img { opacity: 0; }
#hub-film-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,21,22,0.05) 0%, rgba(20,21,22,0.35) 100%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#hub-film-frame.is-playing::after { opacity: 0; }
.m60-film__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.m60-film__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(68px,7vw,96px);
  height: clamp(68px,7vw,96px);
  border-radius: 999px;
  background: var(--m60-yellow);
  color: var(--m60-ink);
  transition: transform 0.6s var(--m60-ease);
}
.m60-film__disc svg { margin-left: 3px; }
.m60-film__play:hover .m60-film__disc,
.m60-film__play:focus-visible .m60-film__disc { transform: scale(1.08); }
.m60-film__play:hover,
.m60-film__play:focus,
.m60-film__play:focus-visible { background: transparent; color: #fff; }
.m60-film__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#hub-film-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 3;
}

/* --- Hero ticker: separator between cloned copies ------------------------ */
/* Each copy ends "On-site gym" and the next begins "J16 M60"; the dot keeps
   the rhythm of the dots inside the text where the copies meet. */
.m60-ticker__track > p::after {
  content: "\00B7";
  padding-left: 1.2em;
}

/* --- Buildings grid: full-card link ----------------------------------------- */
#buildings-grid > article { position: relative; }
.m60-card__link {
  position: absolute;
  inset: 0;
  z-index: 4; /* under the sash (5), over everything else */
  display: block;
  text-indent: -9999px;
  overflow: hidden;
}
#buildings-grid > article { cursor: pointer; }

/* ==========================================================================
   Legal pages (page-legal.php): Privacy Policy, Terms of Use
   Not in the design export. Same ink hero and masked title as every page,
   then a contents rail and one measured column. Everything reads; nothing
   performs.
   ========================================================================== */

#legal-hero {
  background: var(--m60-ink);
  color: #fff;
  padding: clamp(120px,16vh,190px) clamp(20px,6vw,60px) clamp(48px,6vw,80px);
}
.m60-legal__inner { max-width: 1440px; margin: 0 auto; }
.m60-legal__eyebrow {
  margin: 0 0 18px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-yellow);
}
#legal-title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-size: clamp(2.2rem,6vw,5.6rem);
  color: #fff;
  max-width: 14ch;
}
#legal-title > span {
  display: block;
  overflow: hidden;
  padding: 0.10em 0.05em 0.26em;
  margin: -0.10em -0.05em -0.26em;
}
#legal-title .m60-heroline { display: block; }
.m60-legal__meta {
  margin: 26px 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.62);
}

#legal {
  position: relative;
  overflow: hidden;
  background: var(--m60-off-white);
  padding: clamp(56px,7vw,110px) clamp(20px,6vw,60px) clamp(80px,10vw,150px);
}
.m60-legal__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px,5vw,80px);
  align-items: start;
}
@media (min-width: 1000px) {
  .m60-legal__grid { grid-template-columns: 260px minmax(0, 68ch); }
}

/* Contents rail: sticks beside the text on wide screens, sits above it below. */
.m60-legal__rail { position: sticky; top: 110px; }
@media (max-width: 999px) { .m60-legal__rail { position: static; } }
.m60-legal__raillabel {
  margin: 0 0 14px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m60-grey);
}
.m60-legal__toc {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid rgba(20,21,22,0.14);
}
.m60-legal__toc li { margin: 0; }
.m60-legal__toc a {
  display: block;
  position: relative;
  padding: 8px 0 8px 18px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--m60-slate);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.m60-legal__toc a:hover,
.m60-legal__toc a:focus-visible { color: var(--m60-ink); }
.m60-legal__toc a.is-active {
  color: var(--m60-ink);
  font-weight: 700;
  border-left-color: var(--m60-yellow);
}
@media (max-width: 999px) {
  .m60-legal__toc { display: flex; flex-wrap: wrap; gap: 6px 14px; border: 0; }
  .m60-legal__toc a { padding: 6px 0; margin: 0; border-left: 0; border-bottom: 2px solid transparent; }
  .m60-legal__toc a.is-active { border-bottom-color: var(--m60-yellow); }
}

/* The text itself. Block-editor output, so element selectors scoped to the body. */
.m60-legal__body {
  font-size: clamp(1.02rem,1.2vw,1.14rem);
  line-height: 1.68;
  color: var(--m60-slate);
}
.m60-legal__body > p:first-child {
  font-size: clamp(1.15rem,1.5vw,1.36rem);
  line-height: 1.5;
  color: var(--m60-ink);
}
.m60-legal__body h2 {
  position: relative;
  margin: clamp(44px,5vw,64px) 0 18px;
  padding-top: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(1.5rem,2.4vw,2.1rem);
  color: var(--m60-ink);
  scroll-margin-top: 110px;
}
/* The brand's small yellow square, stretched into a rule: one per section. */
.m60-legal__body h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 4px;
  background: var(--m60-yellow);
}
.m60-legal__body h2:first-child { margin-top: 0; }
.m60-legal__body h3 {
  margin: 30px 0 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.1rem,1.4vw,1.28rem);
  color: var(--m60-ink);
}
.m60-legal__body p { margin: 0 0 1.1em; }
.m60-legal__body ul,
.m60-legal__body ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.m60-legal__body li { margin: 0 0 0.45em; padding-left: 0.2em; }
.m60-legal__body li::marker { color: var(--m60-ink); }
.m60-legal__body a {
  color: var(--m60-ink);
  text-decoration: underline;
  text-decoration-color: rgba(20,21,22,0.3);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.3s ease;
}
.m60-legal__body a:hover,
.m60-legal__body a:focus-visible { text-decoration-color: var(--m60-ink); }
.m60-legal__body strong { color: var(--m60-ink); }
.m60-legal__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
  font-size: 0.94em;
}
.m60-legal__body th,
.m60-legal__body td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px 12px 0;
  border-top: 1px solid rgba(20,21,22,0.14);
}
.m60-legal__body th { color: var(--m60-ink); font-weight: 700; }
.m60-legal__body tr:last-child td { border-bottom: 1px solid rgba(20,21,22,0.14); }
.m60-legal__body address { font-style: normal; }
.m60-legal__foot {
  margin-top: clamp(48px,6vw,80px);
  padding-top: 26px;
  border-top: 1px solid rgba(20,21,22,0.14);
}
.m60-legal__foot p { margin: 0; color: var(--m60-ink); }
.m60-legal__foot .m60-arrowlink { margin-left: 10px; }

/* --- 24 Sep 2026: manifesto in the flow, news cards fully clickable, footer socials --- */

/* Manifesto never pins now (see m60.js). Give the un-pinned section the
   design's original padding and a frame tall enough to read as a moment. */
#park.is-kinetic.is-static {
  min-height: 0;
  padding-block: clamp(110px,16vw,240px);
}
#park.is-static .m60-park__stage {
  position: relative;
  height: auto;
  min-height: 0;
  overflow: hidden;
  padding-block: 0;
}
#park.is-static #park-bg { position: absolute; }

/* News cards: same full-card link as the buildings grid. */
#news-grid > article { position: relative; cursor: pointer; }
#news-grid > article .m60-card__link { z-index: 4; }

/* Footer socials: read as links, open elsewhere. */
.m60-footer__list a[target="_blank"]::after {
  content: "\2197";
  display: inline-block;
  margin-left: 6px;
  font-size: 0.8em;
  opacity: 0.55;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.m60-footer__list a[target="_blank"]:hover::after { opacity: 1; transform: translate(2px,-2px); }
.m60-footer__list a:hover,
.m60-footer__list a:focus-visible { color: var(--m60-yellow); }

/* --- Single post (single.php) --------------------------------------------- */
#post-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(380px,52vh,560px);
  background: var(--m60-ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(140px,18vh,200px) 0 clamp(48px,6vh,72px);
}
#post-hero .m60-news-hero__copy { max-width: 1440px; }
#post-hero #legal-title { max-width: 18ch; }
#post {
  position: relative;
  overflow: hidden;
  background: var(--m60-off-white);
  padding: clamp(56px,7vw,110px) clamp(20px,6vw,60px) clamp(80px,10vw,150px);
}
.m60-post__wrap { position: relative; z-index: 1; max-width: 68ch; }
.m60-legal__body h2:first-child { margin-top: 0; }
.m60-legal__body blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 24px;
  border-left: 4px solid var(--m60-yellow);
  font-size: clamp(1.15rem,1.5vw,1.36rem);
  line-height: 1.45;
  color: var(--m60-ink);
}
.m60-legal__body blockquote p { margin: 0 0 0.6em; }
.m60-legal__body blockquote cite { font-style: normal; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m60-grey); }
.m60-post__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.m60-newscard__arrow--back { margin-right: 10px; }
.m60-post__foot .m60-arrowlink:hover .m60-newscard__arrow--back { transform: translateX(-8px); }