/* ==== Components: mobile-first, desktop overrides at the end of each block ==== */

/* ---- 1. Nav + menu [figma 214:2280 / 214:2440] ---- */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 60;
  height: calc(var(--nav-h) + (100svh - var(--nav-h)) * var(--menu-p));
  overflow: hidden;
  background: var(--c-accent);
  color: var(--c-ink);
  /* Hidden until motion.js adds .is-live; shows by default without JS */
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.5s var(--ease-menu), opacity 0.5s var(--ease);
}
.nav.is-live { transform: none; opacity: 1; }
.no-js .nav { transform: none; opacity: 1; }

.nav__bar {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  /* Links and mark span the whole box; without this they swallow clicks on Close */
  z-index: 3;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--s-3);
  color: var(--c-ink);
}
/* Open menu sits over dark video, so the bar row turns white */
.menu-open .nav__bar,
.menu-open .nav__mark { color: var(--c-on-media); }
.nav__temp { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-ui); text-transform: uppercase; }
.nav__temp img { width: 20px; height: 20px; }

.nav__toggle { cursor: pointer; }
.nav__toggle-close { display: none; }
.menu-open .nav__toggle-open { display: none; }
.menu-open .nav__toggle-close { display: inline; }

/* [figma 465:8227] Stays bar-sized and follows the bar colour */
.nav__mark {
  position: absolute;
  z-index: 3;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  height: var(--nav-h);
  width: 92px;
  display: flex;
  align-items: center;
  color: currentColor;
}
.nav__mark svg { display: block; width: 100%; height: auto; }

/* ---- The menu: four video panels [figma 465:7814 / 496:17251] ---- */
.nav__menu {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
.menu-open .nav__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.45s var(--ease) 0.2s, visibility 0s;
}
.nav__menu > li { flex: 1 1 0; min-height: 0; display: flex; }

.mpanel {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--c-on-media);
  text-align: center;
}
.mpanel__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Wash so the label reads on any frame */
.mpanel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 0.28);
  transition: background 0.3s var(--ease);
}
.mpanel:hover::before,
.mpanel:focus-visible::before { background: rgb(0 0 0 / 0.12); }

.mpanel__label {
  font-weight: var(--w-xbold);
  font-size: var(--t-title);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

/* [figma 465:5137] Acid underline: shown on current page, drawn in on hover */
.mpanel::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 8px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s var(--ease);
}
.mpanel:hover::after,
.mpanel:focus-visible::after,
.mpanel[aria-current="page"]::after { transform: scaleX(1); }

@media (min-width: 1024px) {
  .nav__mark { width: 104px; }
  .nav__menu { flex-direction: row; }
  /* At 58px the four labels overflow a 1024px row; fluid, capped at 58px */
  .mpanel__label { font-size: clamp(30px, 3.5vw, 58px); }
}

@media (prefers-reduced-motion: reduce) {
  .mpanel::before, .mpanel::after { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  .nav { transition: none; }
}

/* ---- 2. Initial nav [figma 214:2433]: 12px acid band, transparent row over the hero ---- */
.initial-nav {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 40;
  height: var(--nav-init-h);
  color: var(--c-on-media);
}

.initial-nav::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--nav-band);
  background: var(--c-accent);
}

.initial-nav__row {
  position: absolute;
  inset-block-start: var(--nav-band);   /* [figma 465:7789] row sits below the 12px colour band */
  inset-inline: 0;
  height: calc(var(--nav-init-h) - var(--nav-band));   /* 36px row */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 9px var(--s-3) 0;             /* [figma] text 9px below the band, 10px each side */
}
/* UA text-transform:none on <button> beats the inherited uppercase */
.initial-nav__row button { text-transform: uppercase; }

/* ---- 3. Hero [figma 261:8642 / 281:15868] ---- */
/* Scroll distance for the hero->window transition; hero sticks inside it */
.runway { position: relative; z-index: 20; height: 200svh; }

.hero {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  height: 100svh;
  min-height: 560px;
  padding-block-start: var(--nav-band);
  /* Paper, not ink: this shows around the shrinking video */
  background: var(--c-paper);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset-block-start: var(--nav-band);
  inset-inline-start: 0;
  width: 100%;
  height: calc(100% - var(--nav-band));
  z-index: 0;
  overflow: hidden;
}
.hero__media video,
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--s-9);
  padding-inline: var(--s-3);
}

/* [figma 373:26289] 755/1280 = 59vw, capped for wide screens */
.hero__mark { width: min(59vw, 940px); color: var(--c-on-media); transform-origin: 50% 50%; }
.hero__mark svg { width: 100%; height: auto; }

/* [figma 261:8645] Spans the video's inner column, not full width */
.hero__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 772px);
  color: var(--c-on-media);
  font-size: var(--t-ui);
  text-transform: uppercase;
}
.hero__meta .temp { display: flex; align-items: center; gap: var(--s-2); }
.hero__meta img { width: 20px; height: 20px; }

/* ---- 4. The window [figma 261:8672 / 281:15889]: fixed, not sticky, to hold viewport centre ---- */
.window {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  /* --win-park (motion.js) goes negative near the end to park the window before the footer */
  translate: -50% calc(-50% + var(--win-park, 0px));
  /* Above the content rows (20), below the nav (60). */
  z-index: 50;
  width: var(--win-w);
  height: var(--win-h);
  overflow: hidden;
  background: var(--c-ink);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.window.is-live { opacity: 1; }

.window video,
.window img { width: 100%; height: 100%; object-fit: cover; }

/* Stacked crossfade layers; JS pauses hidden ones so only one decodes */
.window__media { position: absolute; inset: 0; }
.window__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--win-fade) var(--ease);
}
.window__video.is-live { opacity: 1; }

.window__word {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  translate: 0 -50%;
  overflow: hidden;
  height: 50px;
  display: flex;
  align-items: center;
  color: var(--c-on-media);
  font-size: var(--t-panel);
}

/* [figma 214:2748] Track duplicated in markup; -50% loops seamlessly */
.window__track {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding-inline-end: var(--s-6);
  animation: window-scroll var(--dur-marquee) linear infinite;
  white-space: nowrap;
}
@keyframes window-scroll { to { transform: translateX(-50%); } }

/* motion.js §2 drives the track on scroll; the animation is the no-JS fallback */
.js .window__track { animation: none; }

/* Intro word holds still and centred; only section words travel */
.window__word.is-intro .window__track {
  animation: none;
  justify-content: center;
  width: 100%;
  padding-inline-end: 0;
}
.window__word.is-intro .window__track span:not(:first-child) { display: none; }

@media (min-width: 1024px) {
  .window__word { height: 60px; }
  .window__track { gap: var(--s-10); padding-inline-end: var(--s-10); }
}

/* ---- 5. Collage [figma 261:8669-8671 / 281:15893] ---- */
.plate {
  position: relative;
  z-index: 10;          /* under the benefit rows (20) and window (50) */
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
}
.plate img { width: 100%; height: 100%; object-fit: cover; }

/* ---- 6. Benefit [figma 214:2630 / 281:15831] ---- */
.benefit {
  position: relative;
  z-index: 20;          /* over the plates, under the window */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-9);
  padding: var(--s-11) var(--gutter);
  background: var(--c-paper);
}

.benefit__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-6); }

/* Mobile: copy passes in front of the window so it stays readable; plates stay behind */
@media (max-width: 1023px) {
  .benefit { z-index: 51; }          /* above .window (50), below the nav (60) */
}

@media (min-width: 1024px) {
  /* [figma] 480px row plus 200px of white above and below */
  .benefit {
    flex-direction: row;
    align-items: stretch;
    gap: clamp(60px, 33vw, 420px);
    padding-block: 200px;
    min-height: calc(480px + 400px);
  }
  .benefit .t-title { flex: 1 0 0; min-width: 0; }
  .benefit__body { flex: 1 0 0; min-width: 0; justify-content: flex-end; }
}

/* ---- 7. Button [figma 214:2637] ---- */
.btn[hidden] { display: none; }   /* honour the hidden attribute despite .btn's display */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4) var(--s-8) 13px;
  border: var(--border-btn) solid currentColor;
  border-radius: var(--radius-btn);
  font-size: var(--t-caps);
  line-height: var(--lh-flat);
  text-transform: uppercase;
  white-space: nowrap;              /* labels never wrap (e.g. brochure btn on mobile) */
  cursor: pointer;
}

/* ---- The roll: motion.js §13 duplicates the label; the pair slides up one cell on hover ---- */
.btn__roll {
  display: block;
  height: 1lh;                      /* exactly one cell: --t-caps at --lh-flat */
  overflow: hidden;
}
.btn__roll-track {
  display: grid;
  grid-template-rows: 1fr 1fr;      /* each row = one cell height */
  place-items: center;
  height: 200%;                     /* two cells tall */
  transition: transform var(--dur-roll) var(--ease-roll);
}
.btn:hover .btn__roll-track,
.btn:focus-visible .btn__roll-track { transform: translateY(-50%); }

.btn--block { display: flex; width: 100%; }

/* [figma 465:7873] Brochure variant; divider + arrow are a mask from download.svg */
.btn--brochure {
  gap: var(--s-8);
  padding: 0 0 0 20px;
  min-height: 52px;
  border-radius: 4px;
  background: var(--c-republic);
  color: var(--c-ink);
  overflow: hidden;
}
/* Download cell: only the arrow rolls, the label stays put */
.btn__dl {
  align-self: stretch;
  flex: 0 0 auto;
  width: 52px;
  margin-inline-start: auto;
  border-inline-start: 2px solid currentColor;
  overflow: hidden;
  position: relative;
}
.btn__dl-track {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 200%;                    /* two arrow cells tall */
  display: grid;
  grid-template-rows: 1fr 1fr;     /* each row = one cell height */
  transition: transform var(--dur-roll) var(--ease-roll);
}
.btn--brochure:hover .btn__dl-track,
.btn--brochure:focus-visible .btn__dl-track { transform: translateY(-50%); }
.btn__arrow {
  background-color: currentColor;
  -webkit-mask: url("../assets/republic/download-arrow.svg") center / 54px 52px no-repeat;
          mask: url("../assets/republic/download-arrow.svg") center / 54px 52px no-repeat;
}
/* Reduced motion: swap without travel */
@media (prefers-reduced-motion: reduce) {
  .btn__dl-track,
  .btn__roll-track,
  .dest__icon::before,
  .dest__icon::after { transition: none; }
}

/* ---- 8. Instagram [figma 230:3831 / 281:15356] ---- */
.insta {
  position: relative;
  /* Above the window (50); the closing blocks cover it */
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: var(--s-9);
  padding-block: var(--s-9);
  background: var(--c-accent);
  color: var(--c-ink);
}

.insta__text { display: flex; flex-direction: column; gap: var(--s-6); padding-inline: var(--gutter); }
.insta__head { display: flex; flex-direction: column; gap: var(--s-4); text-transform: uppercase; }
.insta__lens { font-weight: var(--w-xbold); font-size: var(--t-lens); line-height: var(--lh-flat); letter-spacing: var(--ls-title); }

.insta__grid {
  display: flex;
  gap: var(--s-1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Snapping ignores padding-inline; without this the last tile sits flush */
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.insta__grid::-webkit-scrollbar { display: none; }

.insta__grid > a {
  flex: 0 0 160px;
  width: 160px;
  height: 199px;
  scroll-snap-align: start;
  transition: opacity 200ms var(--ease);
}
.insta__grid > a:hover { opacity: 0.85; }
.insta__grid img { display: block; width: 100%; height: 100%; object-fit: cover; }

.insta__cta { padding-inline: var(--gutter); }

@media (min-width: 1024px) {
  .insta { padding: var(--s-9); gap: var(--s-9); }
  .insta__text {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding-inline: 0;
  }
  .insta__head { flex: 1 0 0; min-width: 0; }
  .insta__blurb { width: 354px; font-size: var(--t-caps); }
  .insta__grid { padding-inline: 0; overflow: visible; }
  .insta__grid > a { flex: 1 1 0; width: auto; height: 248px; min-width: 0; }
  .insta__cta { padding-inline: 0; }
}

/* ---- 9. Footer [figma 261:8674 / 281:15918] ---- */
/* Above the window (50) so the video slides behind the closing blocks */
.foot { position: relative; z-index: 55; background: var(--c-paper); overflow: hidden; }

.foot__top { position: relative; display: flex; gap: var(--s-6); padding: var(--s-9) var(--s-5) var(--s-11); }

.foot__links {
  display: flex;
  flex-direction: column;
  gap: var(--s-9);
  flex: 1 1 auto;
}
.foot__col { display: flex; flex-direction: column; gap: var(--s-6); }

/* [figma 281:15784] Two lines rotated to read bottom-up, big one outermost */
.foot__stamp {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  /* Shared bottom edge so the pair reads as one block */
  align-items: flex-end;
  gap: var(--s-2);
  font-weight: var(--w-xbold);
  line-height: var(--lh-crush);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
}
.foot__stamp span {
  writing-mode: vertical-rl;
  /* `mixed` leaves the © upright; `sideways` rotates everything */
  text-orientation: sideways;
  rotate: 180deg;
  white-space: nowrap;
}
.foot__stamp-a { font-size: var(--t-stamp); }
.foot__stamp-b { font-size: calc(var(--t-stamp) * 0.46); }
/* One line when rotated on mobile */
.foot__stamp-b br { display: none; }

.foot__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-7);
  padding: var(--s-5) var(--s-3);
  background: var(--c-accent);
}
.foot__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px var(--s-6); }
.foot__logos img { height: auto; }

/* Masks filled with --c-ink so logos flip at night; an <img> can't be recoloured */
.foot__logo {
  display: block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-position: center;    mask-position: center;
  -webkit-mask-size: contain;       mask-size: contain;
}
.foot__logo--mcc {
  width: 133px; height: 25px;
  -webkit-mask-image: url("../assets/icons/logo-mcc.svg");
          mask-image: url("../assets/icons/logo-mcc.svg");
}
.foot__logo--tfgm {
  width: 127px; height: 31px;
  -webkit-mask-image: url("../assets/icons/logo-tfgm.svg");
          mask-image: url("../assets/icons/logo-tfgm.svg");
}
.foot__logo--landsec {
  width: 43px; height: 51px;
  -webkit-mask-image: url("../assets/icons/logo-landsec.svg");
          mask-image: url("../assets/icons/logo-landsec.svg");
}
.foot__logo--platform4 {
  width: 62px; height: 51px;
  -webkit-mask-image: url("../assets/icons/logo-platform-4.svg");
          mask-image: url("../assets/icons/logo-platform-4.svg");
}
.foot__legal { display: flex; justify-content: space-between; gap: var(--s-6); width: 100%; }

/* Mobile only: stamp moves right of the links; DOM order keeps it first */
@media (max-width: 1023px) {
  .foot__stamp { order: 2; }
}
.foot__legal a { text-decoration: underline; }

@media (min-width: 1024px) {
  .foot__top { padding: 64px var(--s-8) var(--s-11); flex-direction: column; gap: var(--s-11); }
  /* [figma 261:8674] 100px only fits 1280; fluid below that, strapline at 0.3x */
  .foot__stamp { align-items: baseline; gap: var(--s-6); flex-wrap: wrap; }
  .foot__stamp span { writing-mode: horizontal-tb; rotate: none; }
  /* Explicit break; wrapping only broke after overflowing */
  .foot__stamp-b {
    font-size: calc(var(--t-stamp) * 0.3);
    white-space: normal;
  }
  .foot__stamp-b br { display: inline; }
  .foot__links { flex-direction: row; gap: var(--s-6); }
  .foot__col { flex: 1 0 0; min-width: 0; }
  .foot__base { flex-direction: row-reverse; justify-content: space-between; padding: var(--s-5) var(--s-8) var(--s-5) var(--s-6); }
  .foot__legal { width: auto; flex-direction: column; gap: 0; }
}

/* ---- 11. Hero -> window on animation-timeline: scroll(); motion.js has the JS fallback ---- */
@supports (animation-timeline: scroll()) {
  .js .hero__media,
  .js .hero__mark,
  .js .hero,
  .js .window,
  .js .window__word,
  .js .nav {
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root block);
  }

  .js .hero__media {
    animation-name: hero-shrink;
    animation-range: 0 100svh;
  }
  @keyframes hero-shrink {
    from {
      width: 100%;
      height: calc(100% - var(--nav-band));
      left: 0;
      top: var(--nav-band);
    }
    to {
      width: var(--win-w);
      height: var(--win-h);
      left: calc(50% - (var(--win-w) / 2));
      top: calc(50% - (var(--win-h) / 2));
    }
  }

  /* 0.26 = panel wordmark / hero wordmark in Figma */
  .js .hero__mark { animation-name: mark-shrink; animation-range: 0 100svh; }
  @keyframes mark-shrink { from { scale: 1; } to { scale: 0.26; } }

  /* Hero fades out as the window fades in over the last 8% of the runway */
  .js .hero   { animation-name: hero-out;   animation-range: 92svh 100svh; }
  .js .window { animation-name: window-in;  animation-range: 92svh 100svh; }

  /* Starts after the hero leaves; crossfading two different wordmarks ghosted */
  .js .window__word.is-intro { animation-name: introword-in; animation-range: 100svh 103svh; }
  @keyframes introword-in { from { opacity: 0; } to { opacity: 1; } }

  /* 55svh runway + ease-out; a short range snapped on a single wheel flick */
  .js .nav {
    animation-name: nav-in;
    animation-range: 45svh 100svh;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes hero-out   { from { opacity: 1; } to { opacity: 0; } }
  @keyframes window-in  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes nav-in {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__media, .js .hero__mark, .js .hero, .js .window, .js .nav {
    animation: none;
  }
  .window { opacity: 1; }
  .nav { transform: none; }
}

/* nav-in fill-mode holds the bar off-screen at the top; must follow the @supports block */
.menu-open .nav { animation: none; transform: none; opacity: 1; }

/* ---- 12. Link hover: rule enters from the pointer side, leaves by the opposite ---- */

/* fit-content: block links would otherwise fire across the whole column */
.js-underline .u-link {
  position: relative;
  width: fit-content;
  text-decoration: none;
}

.u {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.18em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: var(--u-from, left) center;
  transition: transform 0.34s var(--ease);
  pointer-events: none;
}
.u-link.is-on .u { transform: scaleX(1); }

.u-link .lbl { display: inline-block; }

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

/* Conditions without a glyph show the word instead */
.wx-word { text-transform: uppercase; white-space: nowrap; }

/* Mask, not <img>, so the glyph follows currentColor */
.wx-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--wx, url("../assets/icons/weather-cloudy.svg")) center / contain no-repeat;
  mask: var(--wx, url("../assets/icons/weather-cloudy.svg")) center / contain no-repeat;
}

/* ---- Weather readouts hidden until the API resolves (JS only) ---- */
.js .hero__meta,
.js .nav__temp {
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.js.wx-ready .hero__meta,
.js.wx-ready .nav__temp { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .hero__meta, .js .nav__temp { transition: none; }
}

/* ---- 13. The power of Mayfield ---- */
.power {
  position: relative;
  /* With insta + footer, above the window */
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-9);
  padding: var(--s-11) var(--gutter);
  background: var(--c-accent);
  color: var(--c-ink);
  text-align: center;
}

.power__rating {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  /* Hidden until the real score loads */
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.js .power.is-rated .power__rating,
.no-js .power__rating { opacity: 1; }

.power__google { font-size: 26px; font-weight: var(--w-medium); letter-spacing: -0.02em; }
.power__score  { font-size: 20px; font-weight: var(--w-medium); }
/* Size on the span: base.css svg max-width:100% collapses the SVG to 0 */
.power__stars { flex: 0 0 auto; width: 108px; height: 20px; }
.power__stars svg { width: 100%; height: 100%; max-width: none; display: block; }

.power__title { max-width: 18ch; }

/* All quotes share one grid cell so the tallest sets the height */
.power__deck { display: grid; width: min(100%, 940px); }
.power__quote {
  grid-area: 1 / 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}
.power__quote.is-on { opacity: 1; visibility: visible; transition: opacity 0.35s var(--ease), visibility 0s; }

.power__quote blockquote { margin: 0; font-size: var(--t-body); line-height: var(--lh-body); }
.power__quote figcaption { font-weight: var(--w-xbold); font-size: var(--t-body); }

.power__nav { display: flex; align-items: center; gap: var(--s-6); }
.power__nav button { cursor: pointer; }
.power__count { min-width: 4ch; }

@media (min-width: 1024px) {
  .power { gap: var(--s-10); padding-block: 120px; }
  .power__title { font-size: 76px; max-width: none; }
  .power__quote blockquote { font-size: 28px; }
  .power__quote figcaption { font-size: 22px; }
  .power__google { font-size: 34px; }
  .power__score { font-size: 26px; }
  .power__stars { width: 130px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .power__rating, .power__quote { transition: none; }
}

/* ---- 14. Interior pages: nav present from the top [figma 465:8206] ---- */
.nav--static { transform: none; opacity: 1; }
/* Overrides the @supports nav-in on .js .nav (same specificity, later) */
.js .nav--static { animation: none; }

.page {
  position: relative;
  padding-block-start: var(--nav-h);
  background: var(--c-paper);
}

/* ---- 15. Page head [figma 465:8192] ---- */
.page-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-10) var(--gutter) var(--s-11);
  background: var(--c-accent);
  color: var(--c-ink);
  text-align: center;
}
.page-head__sub { width: min(100%, 600px); }

@media (min-width: 1024px) {
  /* [figma] 80 over the title, 120 under the copy, 40 between. */
  .page-head { gap: var(--s-9); padding: var(--s-11) var(--gutter) 120px; }
}

/* ---- 16. Form + field [figma 465:8182 / 255:4767] ---- */
.contact-form {
  display: flex;
  justify-content: center;
  padding: var(--s-11) var(--gutter);
  background: var(--c-paper);
}

.form { width: min(100%, 600px); display: flex; flex-direction: column; gap: var(--s-9); }
.form__intro { text-align: center; }
/* Mobile [figma 465:11856]: intro hidden */
@media (max-width: 1023px) {
  .form__intro { display: none; }
}
/* [figma 465:8185] 8px is off-scale on purpose */
.form__fields { display: flex; flex-direction: column; gap: 8px; }

.field {
  display: flex;
  gap: var(--s-4);
  align-items: stretch;
  padding: var(--s-6);
  background: var(--c-field);
  border-radius: var(--radius-field);
}
.field__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.field__label { color: var(--c-ink); }

/* Transparent control; the grey box is the input. Select appearance stripped for the chevron well */
.field__control {
  width: 100%;
  font: inherit;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: none;
  border: 0;
  padding: 0;
  appearance: none;
  border-radius: 0;
}
.field__control:focus { outline: none; }
.field:focus-within { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.field__control::placeholder { color: var(--c-ink); opacity: 0.45; }
select.field__control { cursor: pointer; }

.field--area { align-items: flex-start; }
/* [figma 465:8190] 270 tall incl. 20px padding */
.field--area .field__control { min-height: 230px; resize: vertical; }

/* [figma 255:4790] 52px chevron well, full field height */
.field__arrow {
  flex: 0 0 auto;
  align-self: stretch;
  display: grid;
  place-items: center;
  width: 52px;
  background: var(--c-paper);
  border-radius: var(--radius-arrow);
  pointer-events: none;
}
.field__arrow::before {
  content: "";
  width: 20px;
  height: 10px;
  /* Mask so the chevron follows --c-ink at night */
  background: var(--c-ink);
  -webkit-mask: url("../assets/icons/chevron-down.svg") center / contain no-repeat;
          mask: url("../assets/icons/chevron-down.svg") center / contain no-repeat;
}

/* Enquiry addresses [figma 465:8196] */
.enquiries {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-9);
  padding: var(--s-10) var(--gutter) var(--s-11);
  background: var(--c-paper);
  color: var(--c-ink);
  text-align: center;
}
.enquiry { display: flex; flex-direction: column; gap: var(--s-4); }
/* Figma says Bold 700; only Medium/ExtraBold are shipped */
.enquiry__type {
  font-weight: var(--w-xbold);
  font-size: 26px;
  line-height: var(--lh-flat);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* Shown by the JS submit; no-JS posts get the message server-side */
.form__status { text-align: center; }
.form__status[hidden] { display: none; }
.form__status--err { color: inherit; font-weight: var(--w-xbold); }

@media (min-width: 1024px) {
  .enquiry__type { font-size: 32px; }
}

/* ---- 17. Flag loop [figma 534:21157], desktop only ---- */
.flag { display: none; }

@media (min-width: 1024px) {
  /* Sticky bottom-left; sits before .insta so it parks above it, not over the footer */
  .flag {
    display: block;
    position: sticky;
    inset-block-start: auto;
    inset-block-end: var(--s-6);       /* ~20px from the viewport bottom */
    z-index: 55;                       /* above content + window, below the nav (60) */
    height: 0;
    pointer-events: none;
  }
  /* .flag stays pointer-events:none so its empty box never blocks the page */
  .flag__link {
    position: absolute;
    inset-block-end: 0;                 /* hang the flag up from the sticky line */
    inset-inline-start: var(--s-3);
    width: 120px;
    height: 120px;
    display: block;
    pointer-events: auto;
    cursor: pointer;
  }
  .flag__link img { width: 100%; height: 100%; object-fit: contain; display: block; }
}

/* ---- 18. Interior hero [figma 465:8175] ---- */
.phero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 72svh;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: calc(var(--nav-init-h) + var(--s-9)) var(--gutter) var(--s-11);
  background: var(--c-ink);
  color: var(--c-on-media);
  text-align: center;
}
.phero__media { position: absolute; inset: 0; z-index: -2; }
.phero__media video,
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Wash keeps the white title legible */
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(0 0 0 / 0.32); }

.phero__inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); width: min(100%, 880px); }
.phero__sub { text-transform: uppercase; }

/* aspect-ratio matches the SVG's 200x46 viewBox */
.phero__mark {
  width: min(86vw, 660px);
  aspect-ratio: 200 / 46;
  background-color: currentColor;
  -webkit-mask: url("../assets/logos/mayfield-park.svg") center / contain no-repeat;
          mask: url("../assets/logos/mayfield-park.svg") center / contain no-repeat;
}

@media (min-width: 1024px) {
  .phero { min-height: 808px; }
}

/* ---- 19. Intro [figma 465:8157]: title holds at 40, not 58 ---- */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-11) var(--gutter);
  background: var(--c-paper);
  color: var(--c-ink);
  text-align: center;
}
.intro__title {
  font-weight: var(--w-xbold);
  font-size: 28px;
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  max-width: 22ch;
}
.intro__body { display: flex; flex-direction: column; gap: var(--s-5); width: min(100%, 60ch); }

@media (min-width: 1024px) {
  .intro { gap: var(--s-9); padding: 120px var(--gutter); }
  .intro__title { font-size: 40px; }
}

/* ---- 20. Destinations [figma 465:8163 / 274:11766] ---- */
.dests {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-9);
  padding: 0 var(--gutter) var(--s-11);
  background: var(--c-paper);
  color: var(--c-ink);
}

.dest { display: flex; flex-direction: column; }

.dest__img {
  position: relative;
  height: 440px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--c-ink);
}
.dest__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Wash so the white logo reads */
.dest__img::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.15); }
.dest__logo { position: relative; z-index: 1; display: grid; place-items: center; width: 200px; height: 200px; }
.dest__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.dest__body { display: flex; flex-direction: column; gap: var(--s-6); padding-block-start: var(--s-6); }
.dest__blurb { font-size: var(--t-caps); line-height: var(--lh-body); }
/* Links are undecorated site-wide, so mark inline ones */
.dest__blurb a { text-decoration: underline; text-underline-offset: 0.15em; }
.dest__blurb a:hover { text-decoration-thickness: 2px; }
.dest__actions { display: flex; gap: var(--s-3); align-items: stretch; }

/* Square arrow button; the arrow is a mask so it follows the theme */
.dest__icon {
  flex: 0 0 auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  /* No padding-inline: it narrows the mask box and squashes the arrow */
  border: var(--border-btn) solid currentColor;
  border-radius: var(--radius-btn);
  color: var(--c-ink);
  overflow: hidden;                 /* clips the roll */
}
/* Roll cells are the pseudo-elements, sharing one grid cell */
.dest__icon::before,
.dest__icon::after {
  content: "";
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: url("../assets/icons/arrow.svg") center / 24px 24px no-repeat;
          mask: url("../assets/icons/arrow.svg") center / 24px 24px no-repeat;
  transition: transform var(--dur-roll) var(--ease-roll);
}
/* 44px = .btn height; keeps the lone icon from collapsing */
.dest__icon:only-child { block-size: calc(var(--s-4) + 13px + var(--t-caps) * var(--lh-flat) + 2 * var(--border-btn)); }
.dest__icon::after { transform: translateY(100%); }   /* waiting below */
.dest__icon:hover::before,
.dest__icon:focus-visible::before { transform: translateY(-100%); }
.dest__icon:hover::after,
.dest__icon:focus-visible::after { transform: translateY(0); }

@media (min-width: 1024px) {
  .dests { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px var(--s-9); }
}

/* ---- 21. Park weather strip + ratings on white [figma 465:7964] ---- */
.power--plain { background: var(--c-paper); }

.phero--park h1 { font-size: clamp(44px, 8vw, 80px); }

.wxstrip {
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--s-9);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-6) var(--s-8);
  margin: 0;
  padding-inline: var(--gutter);
  list-style: none;
  color: var(--c-on-media);
}
.wxday { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-ui); text-transform: uppercase; }
.wxday__icon {
  width: 20px; height: 20px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--wx) center / contain no-repeat;
          mask: var(--wx) center / contain no-repeat;
}

/* ---- 22. Gallery: receding depth stack [figma 496:18061 / 499:18094] ---- */
/* Clips the dropped card; top padding leaves room for the peeking cards */
.gallery { position: relative; overflow: hidden; padding: 120px var(--gutter) var(--s-11); background: var(--c-paper); color: var(--c-ink); }

/* Cards recede on Z via perspective, no scale; JS sets --d, z-index, dim, opacity */
.gallery__stage {
  position: relative;
  height: min(86vw, 335px);       /* [figma mobile] front card is a 335px square */
  perspective: 1600px;
  perspective-origin: 50% 42%;
  --rise: 84px;
  --recede: 440px;
}
.gallery__slide {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  margin: 0;
  width: min(86vw, 335px);
  height: min(86vw, 335px);
  transform-style: preserve-3d;
  --d: 0;
  transform:
    translate(-50%, -50%)
    translateY(calc(var(--d) * var(--rise) * -1))
    translateZ(calc(var(--d) * var(--recede) * -1));
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
  opacity: 0;
  z-index: 0;
  will-change: transform, opacity;
}
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
/* Darken as they recede */
.gallery__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / var(--dim, 0));
  transition: background 0.6s var(--ease);
}
/* No-JS fallback: the first image, front and centre. */
.gallery__slide:first-child { opacity: 1; z-index: 3; }
/* JS positions every card, so drop the no-JS front card */
.gallery.is-live .gallery__slide:first-child { opacity: 0; }
.gallery.is-live .gallery__slide { opacity: 0; }
.gallery.is-live .gallery__slide.is-shown { opacity: 1; }
.gallery.is-live .gallery__slide.is-front { cursor: grab; }
.gallery.is-live.is-dragging .gallery__slide.is-front { cursor: grabbing; }

/* Next: front card falls and fades; motion.js snaps it to the back unseen */
.gallery.is-live .gallery__slide.is-dropping {
  transform: translate(-50%, -50%) translateY(230%);
  opacity: 0;
  z-index: 2000;
  transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.85, 0.4), opacity 0.44s ease 0.14s;
}

/* Paper gradient well the card fades into as it drops; top half transparent */
.gallery::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 42%;
  background: linear-gradient(to bottom, transparent 0%, transparent 58%, var(--c-paper) 96%);
  pointer-events: none;
  z-index: 2100;
}

/* Mobile [figma 517:20074-76]: controls below; desktop flanks the stack, pointer-events off */
.gallery__nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  margin-block-start: var(--s-9);
  font-size: var(--t-caps);
  text-transform: uppercase;
}
.gallery__nav > * { pointer-events: auto; }
.gallery__nav button { cursor: pointer; }
.gallery__count { order: -1; margin-inline-end: auto; min-width: 4ch; }
/* Republic: tighter gap from the paragraph above; peeking cards need ~50px */
#repGallery { padding-block-start: 90px; }

@media (min-width: 1024px) {
  /* 624px card = 480 x 1.3; stage, --rise, --recede and top room scale together */
  .gallery { padding-block-start: 156px; }
  #repGallery { padding-block-start: 60px; }
  .rpara:has(+ #repGallery) { padding-block-end: 60px; }
  .gallery__stage { height: 676px; --rise: 156px; --recede: 728px; }
  .gallery__slide { width: 624px; height: 624px; }
  .gallery__nav {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: var(--gutter);
    transform: translateY(-50%);
    margin-block-start: 0;
    z-index: 5;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__slide, .gallery__slide::after { transition: none; }
}

/* ---- 23. Press [figma 517:20584 / 517:20880] ---- */
.press { display: grid; grid-template-columns: 1fr; gap: var(--s-9); padding: 0 var(--gutter) var(--s-9); background: var(--c-paper); color: var(--c-ink); }
.press__card { display: flex; flex-direction: column; gap: var(--s-4); }
.press__img { aspect-ratio: 1; overflow: hidden; }
.press__img img { width: 100%; height: 100%; object-fit: cover; }
.press__pub { text-align: center; font-size: var(--t-caps-l); text-transform: uppercase; }
.press__body { display: flex; flex: 1 0 auto; flex-direction: column; justify-content: space-between; gap: var(--s-6); }
.press__title { font-weight: var(--w-xbold); font-size: 26px; line-height: var(--lh-flat); letter-spacing: -0.03em; text-transform: uppercase; }
.press__cta { grid-column: 1 / -1; padding-block-start: var(--s-6); }

@media (min-width: 1024px) {
  .press { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 60px var(--s-9); }
}

/* ---- 24. Park info + FAQ [figma 465:7935 / 261:10184] ---- */
.parkinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-9);
  padding: var(--s-11) var(--gutter);
  background: var(--c-paper);
  color: var(--c-ink);
  text-align: center;
}
/* ---- Park page: weather colour on body, scoped by [data-page] as .intro/.gallery are shared ---- */
[data-page="park"] body { background: var(--c-accent); }
[data-page="park"] .intro,
[data-page="park"] .gallery,
[data-page="park"] .power--plain,
[data-page="park"] .press { background: transparent; }

/* Drop-well must fade to the page colour, not paper */
[data-page="park"] .gallery::after {
  background: linear-gradient(to bottom, transparent 0%, transparent 58%, var(--c-accent) 96%);
}

/* 60% white scrim so the tint follows the weather colour */
[data-page="park"] .parkinfo { background: rgb(255 255 255 / 0.6); }
/* Night: 60% white over navy goes grey; 10% lifts it without bleaching */
[data-mode="night"][data-page="park"] .parkinfo { background: rgb(255 255 255 / 0.1); }

/* Night on Park: content rows restore day tokens; nav/footer stay dark */
[data-mode="night"][data-page="park"] .intro,
[data-mode="night"][data-page="park"] .gallery,
[data-mode="night"][data-page="park"] .power--plain,
[data-mode="night"][data-page="park"] .press {
  --c-paper: #ffffff;
  --c-ink:   #000000;
  background: var(--c-paper);
  color: var(--c-ink);
}
/* Row is white again, so the well fades to paper */
[data-mode="night"][data-page="park"] .gallery::after {
  background: linear-gradient(to bottom, transparent 0%, transparent 58%, var(--c-paper) 96%);
}

/* ---- Night, except Park/Republic: <main> back to day tokens, footer (inside main) back to night ---- */
[data-mode="night"]:not([data-page="park"]):not([data-brand="republic"]) main {
  --c-paper: #ffffff;
  --c-ink:   #000000;
  background: var(--c-paper);
  color: var(--c-ink);
}
[data-mode="night"]:not([data-page="park"]):not([data-brand="republic"]) .foot {
  --c-paper: var(--c-night);
  --c-ink:   #ffffff;
  color: var(--c-ink);
}
/* Accent bands stay navy at night, so they keep night ink */
[data-mode="night"]:not([data-page="park"]):not([data-brand="republic"]) .insta,
[data-mode="night"]:not([data-page="park"]):not([data-brand="republic"]) .power,
[data-mode="night"]:not([data-page="park"]):not([data-brand="republic"]) .page-head {
  --c-ink: #ffffff;
  color: var(--c-ink);
}

.parkinfo__head { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); }
.parkinfo__title { font-weight: var(--w-xbold); font-size: clamp(44px, 9vw, 80px); line-height: var(--lh-crush); letter-spacing: -0.02em; text-transform: uppercase; }
.parkinfo__map { width: min(100%, 816px); height: auto; border-radius: var(--radius-field); }

.faq { width: min(100%, 640px); display: flex; flex-direction: column; gap: 60px; padding-block-start: var(--s-9); text-align: left; }
/* Question, answer panel, then the toggle at the bottom */
.faq__item { display: flex; flex-direction: column; }
.faq__q { margin: 0; font-weight: var(--w-xbold); font-size: 26px; line-height: var(--lh-crush); letter-spacing: -0.02em; text-transform: uppercase; }

/* 0fr -> 1fr grid height trick; open by default for no-JS */
.faq__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.45s var(--ease); }
.faq__panel-inner { overflow: hidden; min-height: 0; }
.js .faq__item:not(.is-open) .faq__panel { grid-template-rows: 0fr; }
.faq__a { margin-block: var(--s-6) 0; font-size: var(--t-body); max-width: 60ch; transition: opacity 0.4s var(--ease); }
/* base.css strips ul bullets */
.faq__list { list-style: disc; padding-inline-start: 1.5em; }
.faq__list li { margin-block-start: var(--s-2); }
.js .faq__item:not(.is-open) .faq__a { opacity: 0; }

/* + is two bars so it morphs to a −; no toggle without JS */
.faq__toggle {
  order: 3;
  align-self: flex-start;
  margin-block-start: var(--s-6);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  font-size: var(--t-caps);
  text-transform: uppercase;
}
.no-js .faq__toggle { display: none; }
.faq__plus { position: relative; width: 11px; height: 11px; flex: 0 0 auto; transition: transform 0.3s var(--ease); }
.faq__plus::before, .faq__plus::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  background-color: currentColor;
}
.faq__plus::before { width: 100%; height: 1.5px; }   /* horizontal bar (stays — the −) */
.faq__plus::after  { width: 1.5px; height: 100%; transition: scale 0.3s var(--ease), opacity 0.3s var(--ease); }  /* vertical bar */

/* Hover (closed only): the + spins a smooth quarter-turn. */
.faq__item:not(.is-open) .faq__toggle:hover .faq__plus,
.faq__item:not(.is-open) .faq__toggle:focus-visible .faq__plus { transform: rotate(90deg); }

/* Open: vertical bar retracts to a − */
.faq__item.is-open .faq__plus::after { scale: 0 1; opacity: 0; }
.faq__label--hide { display: none; }
.faq__item.is-open .faq__label--read { display: none; }
.faq__item.is-open .faq__label--hide { display: inline; }

@media (prefers-reduced-motion: reduce) {
  .faq__panel { transition: none; }
  .faq__plus, .faq__plus::after, .faq__a { transition: none; }
}
.faq__legal { font-size: var(--t-legal); line-height: var(--lh-body); opacity: 0.5; }

@media (min-width: 1024px) {
  .faq__q { font-size: 36px; }
}

/* ==== REPUBLIC [figma 465:7870]: own yellow (--c-republic) and serif (--f-serif) ==== */

/* ---- 25. Republic hero [figma 465:7922] ---- */
.rhero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Height comes from .phero; an extra svh min-height ballooned it */
  display: grid;
  place-items: center;
  padding: calc(var(--nav-init-h) + var(--s-10)) var(--gutter) var(--s-11);
  background: var(--c-ink);
  color: var(--c-on-media);
}
.rhero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.rhero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(0 0 0 / 0.28); }
/* Mask: the SVG is shared with Spaces, so its fill is left alone */
.rhero__logo {
  position: absolute;
  inset-block-start: calc(var(--nav-init-h) + var(--s-5));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 138px; height: 47px;
  z-index: 1;
  background-color: var(--c-republic);
  -webkit-mask: url("../assets/logos/republic.svg") center / contain no-repeat;
          mask: url("../assets/logos/republic.svg") center / contain no-repeat;
}
.rhero__portrait { width: min(74vw, 420px); aspect-ratio: 517 / 591; }
.rhero__portrait img { width: 100%; height: 100%; object-fit: cover; }

/* ---- 26. Republic display serif + centred bands [figma Title 80] ---- */
.r-title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(44px, 9vw, 80px);
  line-height: 1;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}
.r-title em { font-style: italic; }

/* Centred band: intro, between-section copy, CTA, application lead-in */
.rband {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-9);              /* [figma] 40px between lead, button, logo */
  padding: 200px var(--gutter);  /* [figma mobile] 200px block padding */
  background: var(--c-paper);
  color: var(--c-ink);
  text-align: center;
}
@media (min-width: 1024px) { .rband { padding-block: 140px; } }
.rband__logo { width: 138px; height: auto; }
/* [figma Hero 48] Garamond 48px, lh 1.0, tracking -4%. */
.rband__lead { max-width: 30ch; font-family: var(--f-serif); font-weight: 400; font-size: clamp(40px, 4vw, 48px); line-height: 1; letter-spacing: -0.04em; }   /* [figma] Hero 40 mobile → 48 desktop */
.rband__text { max-width: 60ch; }

/* ---- 27. Location list [figma 465:7886] ---- */
.rlocations { background: var(--c-paper); color: var(--c-ink); }
/* Mobile [figma 330:16898]: 110px map thumb on the left; desktop hover map below */
.rloc {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 10px;
  padding: 10px;
  border-block-start: 2px solid currentColor;
  transition: background 0.2s var(--ease);
}
.rlocations > .rloc:last-child { border-block-end: 2px solid currentColor; }
.rloc__map { grid-column: 1; grid-row: 1 / 4; align-self: center; width: 110px; height: 110px; overflow: hidden; background: var(--c-republic); }
.rloc__map img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.rloc__name { grid-column: 2; grid-row: 1; font-family: var(--f-serif); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -0.08em; text-transform: uppercase; }
.rloc__time { grid-column: 2; grid-row: 3; align-self: end; font-size: 12px; line-height: 1.1; white-space: nowrap; }   /* [figma Body 12] */

/* ---- 28. Benefit stats [figma 505:19992] ---- */
.rstats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-9) var(--s-7);
  padding: var(--s-11) var(--gutter);
  background: var(--c-paper);
  color: var(--c-ink);
  text-align: center;
}
.rstat { display: flex; flex-direction: column; gap: var(--s-3); align-items: center; }
.rstat__num { font-family: var(--f-serif); font-weight: 400; font-size: clamp(40px, 7vw, 64px); line-height: 1; letter-spacing: -0.04em; }
.rstat__label { font-size: var(--t-caps); text-transform: uppercase; }
@media (min-width: 1024px) { .rstats { grid-template-columns: repeat(4, 1fr); } }

/* ---- 29. Benefit panels: pinned stacking deck [figma 214:2088], driven by motion.js §11 ---- */
.bpanels { background: var(--c-paper); }
/* Fallback (no JS / reduced motion): the cards just stack in normal flow. */
.bpanels__pin { display: flex; flex-direction: column; align-items: center; gap: var(--s-9); padding: var(--s-10) var(--gutter); }

/* Mobile card [figma 281:16286]: image top, text bottom */
.bpanel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 4px solid var(--c-paper);
  border-radius: 30px;
  background: var(--c-republic);
  color: var(--c-ink);
  width: min(calc(100vw - 2 * var(--gutter)), 500px);
  min-height: 571px;
}
.bpanel__img { height: 270px; flex: 0 0 auto; }
.bpanel__img img { width: 100%; height: 100%; object-fit: cover; }
.bpanel__text { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); padding: var(--s-6) var(--s-6) var(--s-8); }
.bpanel__text > div { display: flex; flex-direction: column; gap: var(--s-4); }
.bpanel__title { font-family: var(--f-serif); font-weight: 400; font-size: 42px; line-height: 1; letter-spacing: -0.08em; text-transform: uppercase; }
.bpanel__title em { font-style: italic; }
.bpanel__tags { display: flex; flex-wrap: wrap; gap: 4px var(--s-7); font-size: 12px; text-transform: uppercase; }
.bpanel__text .t-body { font-size: 15px; }

/* Pin: runway + sticky wrapper + stacked cards (JS-driven) */
.js .bpanels { position: relative; height: 300vh; }
.js .bpanels__pin { position: sticky; top: 0; height: 100svh; display: block; padding: 0; overflow: hidden; }
.js .bpanel { position: absolute; top: 0; left: 0; right: 0; margin-inline: auto; transform-origin: center top; will-change: transform; }

@media (min-width: 1024px) {
  /* Desktop card [figma 465:7895]: image left, text right */
  .bpanel {
    flex-direction: row;
    align-items: stretch;
    width: min(calc(100vw - 2 * var(--gutter)), 1120px);
    height: 560px;
    min-height: 0;
    border-width: 8px;
    border-radius: 50px;
  }
  .bpanel > * { flex: 1 1 0; min-width: 0; }
  .bpanel__img { height: auto; }
  .bpanel__text { padding: var(--s-9); gap: var(--s-9); }
  .bpanel__text > div { gap: var(--s-6); }
  .bpanel__title { font-size: clamp(44px, 9vw, 80px); }   /* [figma Title 80] */
  .bpanel__tags { gap: var(--s-7); font-size: var(--t-caps); }   /* [figma Caps 15] */
  .bpanel__text .t-body { font-size: var(--t-body); }             /* [figma Body 22] */
}

@media (prefers-reduced-motion: reduce) {
  /* No pin: normal flow */
  .js .bpanels { height: auto; }
  .js .bpanels__pin { position: static; height: auto; display: flex; flex-direction: column; align-items: center; gap: var(--s-9); padding: var(--s-10) var(--gutter); overflow: visible; }
  .js .bpanel { position: static; transform: none; }
}

/* ---- 30. Floors [figma 465:7910] ---- */
.floors { display: flex; flex-direction: column; background: var(--c-paper); color: var(--c-ink); }
/* Background + building sprite; edge to edge and pinned under the nav on phones */
.floors__img {
  position: sticky; inset-block-start: var(--nav-h); z-index: 1;
  overflow: hidden; aspect-ratio: 4 / 3; container-type: size;
}
.floors__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Building frames from one 4x4 sprite (833x822 cells): Ground, 1st-11th, then the unlit default */
.floors__frame {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  width: min(88cqw, 88cqh * 833 / 822); aspect-ratio: 833 / 822;
  translate: -50% -50%;
  background: url("../assets/republic/floors-sprite.webp") 0% 100% / 400% 400% no-repeat;
}
.floors__table { padding: var(--s-9) var(--gutter); }
.floors__head, .floor {
  display: grid;
  grid-template-columns: 4rem 1fr 118px;   /* rem + px: head and rows are separate grids at different font sizes */
  gap: var(--s-4);
  align-items: center;
}
.floors__head { padding-block-end: var(--s-4); font-size: var(--t-caps); text-transform: uppercase; }
/* Ratio wraps under on phones; unstacked on desktop */
.floors__ratio { display: block; }
.floor { padding-block: var(--s-4); border-block-start: 1px solid rgb(0 0 0 / 0.25); font-size: var(--t-body); }
.floors__list > .floor:last-child { border-block-end: 1px solid rgb(0 0 0 / 0.25); }
.floor__cap { display: inline-flex; align-items: center; gap: var(--s-2); }
.floor__cap::before {
  content: ""; width: 20px; height: 20px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("../assets/icons/person.svg") center / contain no-repeat;
          mask: url("../assets/icons/person.svg") center / contain no-repeat;
}
/* Republic is exempt from night (tokens.css) */
[data-mode="night"]:not([data-brand="republic"]) .floor,
[data-mode="night"]:not([data-brand="republic"]) .floors__list > .floor:last-child { border-color: rgb(255 255 255 / 0.3); }
@media (min-width: 1024px) {
  .floors { flex-direction: row; }
  .floors__img { position: relative; inset-block-start: auto; flex: 1 1 0; aspect-ratio: auto; }
  .floors__table { flex: 1 1 0; align-self: center; }
  /* Capacity fixed at 160 so head and rows align and (1:10) fits one line */
  .floors__head, .floor { grid-template-columns: minmax(5rem, 1fr) 2fr 160px; }
  .floors__ratio { display: inline; }
}

/* ---- 31. Republic display type + hover interactions ---- */

/* The inline logo inside the intro sentence: "The [Republic] is a place…". */
.rband__inline { display: inline-block; height: 0.6em; width: auto; margin-inline: 0.14em; transform: translateY(0.04em); }

/* Title block: three lines, differing alignment, one italic word */
.rtitle-sec { padding: var(--s-11) var(--gutter); background: var(--c-paper); color: var(--c-ink); }
.rtitle {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 50px;             /* [figma mobile Title 50] */
  line-height: 0.8;            /* 40px steps → 3 tight lines in a 120px block */
  letter-spacing: -0.08em;     /* [figma] Garamond titles track -8% */
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
}
.rtitle em { font-style: italic; }
/* [figma mobile 465:11833] Zig-zag: first line left, last right, middles centred */
.rtitle > span { text-align: center; }
.rtitle > span:first-child { text-align: left; }
.rtitle > span:last-child { text-align: right; }
.rtitle > span:only-child { text-align: left; }

/* Desktop staircase [figma 465:7900] */
@media (min-width: 1024px) {
  .rtitle { font-size: clamp(46px, 11vw, 100px); line-height: 1; align-items: flex-start; }
  .rtitle > span { width: fit-content; text-align: left; }
  .rtitle > span:nth-child(1) { margin-inline-start: 11%; }
  .rtitle > span:nth-child(2) { margin-inline-start: 34%; }
  .rtitle > span:nth-child(3) { margin-inline-start: 45%; }
}

/* Mobile [figma 465:11828]: 10px gutter as a border so the img keeps inset:0 cover sizing */
.rtitle-sec--image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  min-height: 520px;
  padding-inline: var(--s-3);        /* title sits ~20px in: 10 border + 10 padding */
  border: 10px solid var(--c-paper);
  border-block-end-width: 0;
  color: var(--c-republic);
}
.rtitle-sec__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.rtitle-sec--image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(0 0 0 / 0.12); }
@media (min-width: 1024px) {
  .rtitle-sec--image { min-height: 640px; padding-inline: var(--gutter); border-width: 0; }
}

/* [figma 465:7892] Left-aligned 600px block, not centred */
.rpara { padding: var(--s-9) var(--gutter) var(--s-10); background: var(--c-paper); color: var(--c-ink); }
.rpara p { width: min(100%, 600px); text-align: left; font-size: var(--t-body); line-height: var(--lh-body); }
@media (min-width: 1024px) { .rpara { padding: 100px 100px 150px; } }

/* ---- Location list map: photo multiplied over yellow; cursor-follow on desktop ---- */
.rlocations { position: relative; isolation: isolate; }
.rloc { position: static; }
@media (min-width: 1024px) {
  /* Desktop row: name left, walk-time right, no thumbnail */
  .rloc {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-6);
    padding: var(--s-8) var(--s-8) var(--s-7);   /* [figma] rows inset 30px */
  }
  .rloc:hover { background: transparent; }   /* the reveal is the image, not a row wash */
  .rloc__name { font-size: clamp(28px, 5vw, 42px); }
  .rloc__time { font-size: var(--t-caps-l); }   /* [figma Body 18] */
  /* Follows the cursor (motion.js §10); top transform-origin makes it swing */
  .rloc__map {
    display: block;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 240px;
    height: 320px;
    background: var(--c-republic);
    isolation: isolate;
    transform-origin: 50% 50%;   /* rotate around the cursor so it stays centred */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease);   /* JS owns the transform */
    z-index: 3;
    will-change: transform;
  }
  .rloc__map img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
  .rloc__map.is-on { opacity: 1; }
}

/* ---- Floors ---- */
/* Instant on hover, 300ms fade out: the base rule times the return */
.floor { transition: background 300ms ease-out; }
.floor:hover { background: var(--c-republic); transition-duration: 0ms; }
/* Touch: the tapped row stays lit to match the building */
.floor { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: none) { .floor.is-active { background: var(--c-republic); transition-duration: 0ms; } }

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

/* ---- 32. Republic yellow bands, benefits row, brochure card ---- */
.rband--brand { background: var(--c-republic); color: var(--c-ink); }
.rtitle-sec--brand { background: var(--c-republic); color: var(--c-ink); }

/* Four captioned photos [figma 505:20004] */
.rbenefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-9) var(--s-7);
  padding: var(--s-10) var(--gutter) var(--s-11);
  background: var(--c-paper);
  color: var(--c-ink);
}
.rbenefit { display: flex; flex-direction: column; gap: var(--s-5); align-items: center; text-align: center; }
.rbenefit img { width: 100%; aspect-ratio: 1; object-fit: cover; }
a.rbenefit img { transition: transform 300ms var(--ease); }
a.rbenefit:hover img, a.rbenefit:focus-visible img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { a.rbenefit img { transition: none; } }
/* Use --f-serif, not "Garamond Premier Pro": the kit registers it by slug */
.rbenefit h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 24px;             /* [figma Title 24] */
  line-height: 1;
  letter-spacing: -0.08em;     /* [figma] -1.92px at 24px — Garamond tracks -8% */
  text-transform: uppercase;
  color: #061202;              /* near-black green, as the caption below */
}
/* [figma 55:3789] Halyard Text 15/1.4, same Adobe kit */
.rbenefit p { font-family: "halyard-text", var(--f-sans, sans-serif); font-weight: 400; font-size: var(--t-caps); line-height: 1.4; color: #061202; max-width: 24ch; }
@media (min-width: 1024px) { .rbenefits { grid-template-columns: repeat(4, 1fr); gap: var(--s-7) 48px; } }   /* [figma] 24px row / 48px col */

/* Building spec: icon, title, optional note; benefit-card type on the yellow */
.rspecs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-10) var(--s-6);
  padding: var(--s-11) var(--gutter);
  background: var(--c-republic);
  color: #061202;
}
.rspec { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center; }
.rspec img { width: 56px; height: 56px; margin-bottom: var(--s-3); }
.rspec h3 { max-width: 16ch; font-family: var(--f-serif); font-weight: 400; font-size: 24px; line-height: 1; letter-spacing: -0.04em; }
.rspec p { max-width: 34ch; font-family: "halyard-text", var(--f-sans, sans-serif); font-weight: 400; font-size: var(--t-caps); line-height: 1.4; }
@media (min-width: 1024px) {
  .rspecs { grid-template-columns: repeat(4, 1fr); gap: var(--s-11) 48px; padding-block: 140px; }
  .rspec img { width: 72px; height: 72px; }
  .rspec h3 { font-size: 32px; }
}

/* Leasing agents: benefit-card type, logo first */
.ragents {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-10);
  padding: 0 var(--gutter) var(--s-11);
  background: var(--c-paper);
  color: #061202;
}
.ragent { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); text-align: center; }
/* Masks take the text colour, like the footer logos */
.ragent__logo {
  height: 56px;
  background-color: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
}
.ragent__logo--landsec { width: 47px;  --logo: url("../assets/icons/logo-landsec.svg"); }
.ragent__logo--obi     { width: 56px;  --logo: url("../assets/logos/obi.svg"); }
.ragent__logo--savills { width: 166px; --logo: url("../assets/logos/savills.png"); }
.ragent__person { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.ragent__person h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}
.ragent__person p { font-family: "halyard-text", var(--f-sans, sans-serif); font-size: var(--t-caps); line-height: 1.4; }
@media (min-width: 1024px) { .ragents { grid-template-columns: repeat(3, 1fr); gap: 48px; align-items: start; } }

/* Brochure CTA card [figma 465:7915] */
.rcta { padding: var(--s-10) var(--gutter); background: var(--c-paper); }
.rcta__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-7);
  padding: var(--s-10) var(--gutter);
  background: var(--c-republic);
  color: var(--c-ink);
  border-radius: 40px;
  text-align: center;
}
/* [figma 465:7917] the CTA lead is Garamond 48, not body copy. */
.rcta__card .rband__text {
  max-width: 46ch;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.04em;
}
@media (min-width: 1024px) { .rcta__card { border-radius: 80px; padding: var(--s-11); } }

/* ---- Character reveal on scroll: motion.js splits text into .reveal-char; no JS = plain text ---- */
.reveal-word { display: inline-block; white-space: nowrap; }   /* keep words whole; wrap only between them */
.reveal-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: var(--d, 0s);
}
.is-revealed .reveal-char { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-char { opacity: 1; transform: none; transition: none; }
}