/* ============================================================
   Hero
   ============================================================ */

/* On shorter screens the hero caps at the viewport so the search panel stays above the fold. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(1100px, 100vh);
  min-height: min(1100px, 100svh);
  padding-bottom: clamp(48px, 13svh, 215px);
  color: var(--text-inverse);
}

.hero__media,
.hero__scrim {
  position: absolute;
  inset: 0;
}

/* The clip sits on the media, not on .hero. Only the photograph overflows, and a clip on
   .hero also cut off the date picker the search form opens below itself. */
.hero__media {
  overflow: hidden;
  /* Until (or if ever) the photograph arrives, the transparent header's white logo and
     icons sit directly on this surface — on a white one they disappeared on slow phone
     connections. Dark like the photo it stands in for. */
  background: var(--surface-dark-alt);
}

/* The <picture> only picks the file; the img still sizes against the media box. */
.hero__media > picture {
  display: contents;
}

/* A steady camera push like the reference walkthrough: linear, not eased, toward the
   plant behind the sofa's left arm, which is where the push holds still. */
.hero__media img {
  transform-origin: 46% 58%;
  animation: hero-zoom 10s linear both;
}

@keyframes hero-zoom {
  from {
    scale: 1;
  }
  to {
    scale: 1.5;
  }
}

/* base.css only shortens animations under reduced motion, which would snap this
   straight to the zoomed end; leave the photo at its starting crop instead. */
@media (prefers-reduced-motion: reduce) {
  .hero__media img {
    animation: none;
  }
}

/* Left-weighted scrim keeps the headline legible over a bright photograph. */
.hero__scrim {
  background: linear-gradient(
    100deg,
    rgba(12, 16, 22, 0.62) 0%,
    rgba(12, 16, 22, 0.26) 40%,
    rgba(12, 16, 22, 0) 70%
  );
}

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-6), 6svh, var(--space-16));
  width: 100%;
}

/* The design indents the hero 184px at 1920 — a 9.6% share of the viewport
   that scales down with it rather than snapping to the 24px gutter. */
@media (min-width: 901px) {
  .hero .container {
    max-width: 1920px;
    padding-inline: min(9.6vw, 184px);
  }
}

/* Laptop-height screens: tighten the type so headline, sub and search all fit. */
@media (max-height: 880px) and (min-width: 901px) {
  .hero h1 {
    font-size: clamp(44px, 7.4vh, 76px);
    line-height: 1.13;
  }

  .hero__sub {
    margin-top: var(--space-3);
    font-size: clamp(18px, 2.9vh, 28px);
    line-height: 1.45;
  }
}

.hero__copy {
  max-width: 820px;
}

.hero h1 {
  color: var(--text-inverse);
  max-width: 22ch;
}

/* Width-capped so the sub-heading breaks to two lines on its own. A hard <br> would leave
   a missing space on mobile. */
.hero__sub {
  max-width: 691px;
  margin-top: var(--space-5);
  font-size: var(--text-hero-sub);
  line-height: var(--text-hero-sub-lh);
  color: var(--color-white);
}

/* ============================================================
   Stats
   ============================================================ */

.stats {
  padding-block: 72px;
  background: var(--surface-page);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20.6px;
  text-align: center;
}

.stat__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--color-rose);
}

.stat__value {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 40px;
  line-height: 45px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.8px;
  color: var(--color-rose);
  white-space: nowrap;
}

.stat__label {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* ============================================================
   Typical apartment / room switcher
   ============================================================ */

.rooms {
  position: relative;
  /* Dark under the photograph, so the white copy survives a slow or failed load. */
  background: var(--surface-dark-alt);
  /* The band was a flat 1039px at every window, so on anything shorter than that the
     panel and the arrows sat under the fold and the section could not be read without
     scrolling. It gives up height to the window instead, down to the point where the
     composition itself stops fitting. */
  height: clamp(640px, 100vh, 1039px);
  overflow: hidden;
  color: var(--text-inverse);
}

.rooms__media,
.rooms__scrim {
  position: absolute;
  inset: 0;
}

.rooms__scrim {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 71.589%, rgba(0, 0, 0, 0.6) 99.978%),
    rgba(0, 0, 0, 0.2);
}

/* The four boxes used to be placed absolutely on the canvas's own y offsets (91 / 181 /
   479 / 913). Fixed offsets cannot say "below the heading", so a heading that wrapped on
   a narrow window ran straight through the tabs. A column says it, and the auto margin
   on the card holds the design's spacing at any band height. */
.rooms__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The vh figures are the design's own ratios of the 1039px band. Below 1039 the band
     is the window, so a vh is a percent of the band; above it the ceiling takes over. */
  padding-block: clamp(24px, 8.76vh, 91px);
}

.rooms__heading {
  width: min(1552px, calc(100% - var(--gutter) * 2));
  font-size: var(--text-h2);
  line-height: 1.28;
  font-weight: var(--weight-medium);
  text-align: center;
  color: var(--text-inverse);
}

.rooms__sub {
  margin-top: clamp(8px, 1.9vh, 20px);
  max-width: calc(100% - var(--gutter) * 2);
  font-size: 20px;
  line-height: 32px;
  text-align: center;
  color: var(--text-inverse);
}

.rooms__tabs {
  margin-top: clamp(14px, 2.5vh, 26px);
  max-width: calc(100% - var(--gutter) * 2);
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rooms__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 11px var(--space-5);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(9px);
  font-size: 18px;
  line-height: 28px;
  font-weight: var(--weight-regular);
  color: rgba(33, 37, 41, 0.7);
  transition: background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.rooms__tab[aria-selected='true'] {
  background: var(--color-white);
  color: var(--color-grey-dark);
}

/* 671x322 frosted panel on the 184px page margin. It holds that width only while the
   window has room for it — past that it takes a share of the window, so it stops
   swallowing the photograph as the band narrows.
   It reads over the man's shoulder on purpose: the design draws it there, and what keeps
   it off both faces is the crop above, not the side it sits on. The fluid figure is the
   design's own share of its canvas (671/1920) rather than a round 36vw — the crop holds
   the man's jaw at a fixed 54.4% of the band, so a panel even one point wider than drawn
   closes the whole gap to it. */
.rooms__card {
  --card-pad-y: clamp(22px, 2.1vw, 40px);
  --card-pad-x: clamp(26px, 3.1vw, 60px);
  position: relative;
  align-self: flex-end;
  margin: auto 9.53% 0 0;
  width: min(671px, 34.95vw);
  padding: var(--card-pad-y) var(--card-pad-x);
  color: var(--text-primary);
}

/* The bullet rule is a strip punched through the card that the photograph shows through,
   not a colored bar. Same exclude mask as the hero search panel, and on a pseudo-element
   for the same reason: a mask clips descendants. */
.rooms__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-control-lg);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(9px);
  -webkit-mask:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0) left var(--card-pad-x) bottom var(--card-pad-y) / 10px 100px no-repeat;
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0) left var(--card-pad-x) bottom var(--card-pad-y) / 10px 100px no-repeat;
  mask-composite: exclude;
}

/* Over the face, which ::before paints in the same place. */
.rooms__card > * {
  position: relative;
}

.rooms__card h3 {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: clamp(24px, 2.6vw, var(--text-h2));
  line-height: 1.12;
  font-weight: var(--weight-bold);
  color: var(--color-grey-dark);
}

/* The rule beside this list is the cut-out on the card face above. */
.rooms__list {
  margin-top: clamp(14px, 1.3vw, 25px);
  padding-left: clamp(26px, 2.9vw, 55px);
  list-style: disc;
  font-size: clamp(14px, 1.04vw, var(--text-lead));
  line-height: 1.8;
  letter-spacing: -0.4px;
  color: var(--color-grey-secondary);
}

/* The design leaves 112px between the panel and the arrows. Holding that as the only
   fixed gap below the card is what puts the card back on its drawn y offset once the
   auto margin above it has taken the slack. */
.rooms__nav {
  margin-top: clamp(24px, 10.78vh, 112px);
  display: flex;
  gap: 10px;
}

/* ============================================================
   Popular USA locations
   ============================================================ */

.locations .section-head {
  margin-bottom: 60px;
}

.locations .section-head h2 {
  line-height: 64px;
  letter-spacing: -1.12px;
}

/* The sub-head runs on one line here — the shared 720px clamp would break it in two. */
.locations .section-head__sub {
  max-width: none;
}

.locations__mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px 370px;
  grid-template-rows: repeat(3, 1fr);
  height: 650px;
  gap: var(--space-5);
}

.location-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Small tiles push the state badge to the top and the name to the bottom; the
     feature tile stacks both at the bottom instead (see the --feature rule). */
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-5);
  border-radius: var(--radius-control-lg);
  overflow: hidden;
  color: var(--text-inverse);
  isolation: isolate;
}

.location-tile:hover {
  text-decoration: none;
}

.location-tile--feature {
  grid-row: span 3;
  justify-content: flex-end;
  gap: 10px;
}

.location-tile__photo {
  position: absolute;
  inset: 0;
  transition: scale var(--duration-slow) var(--ease-out);
}

.location-tile:hover .location-tile__photo {
  scale: 1.05;
}

.location-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.12) 45%,
    rgba(5, 41, 46, 0.88) 100%
  );
}

/* The state code sits in its own frosted pill rather than the shared .pill sizing.
   position: relative keeps it — and the meta block — painted over the absolute scrim. */
.location-tile__state {
  position: relative;
  padding: 6px 12px;
  color: var(--color-green-secondary);
  background: rgba(255, 255, 255, 0.92);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: normal;
  text-transform: none;
}

.location-tile__meta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 296px;
  max-width: 100%;
}

.location-tile--feature .location-tile__meta {
  width: 192px;
}

.location-tile__city {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 22px;
  line-height: 30px;
  font-weight: var(--weight-medium);
}

.location-tile__count {
  font-size: 13px;
  line-height: 20px;
  font-weight: var(--weight-medium);
  color: #d9edf0;
}

.locations__more {
  margin-top: 60px;
  text-align: center;
}

/* ============================================================
   Amenities showcase
   ============================================================ */

/* The showcase is a fixed 900px band on the 1920 canvas with everything placed
   absolutely; horizontal offsets are kept as percentages of 1920 so the composition
   scales rather than clipping on narrower desktops. */
.amenities {
  position: relative;
  /* Dark under the photograph, as on .rooms. */
  background: var(--surface-dark-alt);
  height: 900px;
  overflow: hidden;
  color: var(--text-inverse);
}

.amenities__stage {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.amenities__media,
.amenities__scrim {
  position: absolute;
  inset: 0;
}

/* The two crossfade layers sit on top of each other; only the front one is opaque.
   `base.css` collapses transition-duration under `prefers-reduced-motion`, so this
   cuts straight to the next photograph for those readers without a second rule here. */
.amenities__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.amenities__layer.is-front {
  opacity: 1;
}

/* The copy changes at the same instant as the photograph, so it re-enters rather than
   snapping. An animation, not a transition: the text is replaced outright, and there is
   no "from" value for a transition to work against. */
@keyframes amenity-copy-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }

  to {
    opacity: 1;
    translate: none;
  }
}

.amenities__card.is-changing h3,
.amenities__card.is-changing .amenities__body {
  animation: amenity-copy-in var(--duration-base) var(--ease-out);
}

.amenities__scrim {
  background: rgba(0, 0, 0, 0.42);
}

.amenities__inner {
  position: absolute;
  inset: 0;
}

/* The drop shadow keeps the intro legible over light photographs. */
.amenities__header {
  position: absolute;
  left: 50%;
  top: 7.53%; /* 67.8px of 900 */
  translate: -50% 0;
  width: min(1552px, calc(100% - var(--gutter) * 2));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  text-align: center;
  color: var(--text-inverse);
}

.amenities__header h2 {
  /* The base h2 rule sets --text-primary, which beats the white inherited from the header. */
  color: inherit;
  font-size: var(--text-h2);
  line-height: 1.28;
  font-weight: var(--weight-medium);
}

.amenities__header p {
  align-self: center;
  width: 942px;
  max-width: 100%;
  font-size: 20px;
  line-height: 32px;
  text-shadow: 1px 1px 6.7px rgba(0, 0, 0, 0.75);
}

/* Vertical offsets are shares of the 900px band, as the horizontal ones already were
   shares of the 1920 canvas. The band is capped to the window, so held as pixels they
   walked off the bottom of a short one. */
.amenities__rail {
  position: absolute;
  left: 6.51%; /* 125px of 1920 — the rail center line */
  top: 24%; /* 216px of 900 */
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 51.78%; /* first dot top 216 → last dot bottom 682 */
}

/* These two are shares of the rail, not of the band — the rail is their containing
   block. 12px above a 466px rail, and 492px of line over it. */
.amenities__rail::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -2.58%;
  width: 1px;
  height: 105.58%;
  background: rgba(255, 255, 255, 0.45);
}

.amenities__rail li {
  position: relative;
  width: 7px;
  height: 7px;
}

.amenities__dot {
  display: grid;
  place-items: center;
  /* The base `button` reset drops the border and the background but keeps the browser's
     default `padding: 1px 6px`, and these discs are smaller than that padding assumes.
     Once the icon is wider than the padded content box, the implicit track grows to the
     icon and starts at the content-box edge, so `place-items` has nothing left to center
     and the glyph sits 6px right of the disc. It survives on the 50px desktop disc, where
     the icon still fits, and fails on the 27.5px mobile one. */
  padding: 0;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.7);
  color: var(--color-green-primary);
}

/* Every dot carries its icon in the server response, so the switcher never builds icon
   markup in JS. A 7px dot has no room to show one. */
.amenities__dot:not(.is-active) > * {
  display: none;
}

/* The active disc is centered on its 7px slot so the rail rhythm never shifts. */
.amenities__dot.is-active {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 50px;
  height: 50px;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

/* The panel held 645px at every window, so by 1024 it ran into the filmstrip that
   starts at 64.58%. It takes a share of the window below the width where the design's
   own figure still fits. */
.amenities__card {
  position: absolute;
  left: 11.67%; /* 224px of 1920 */
  top: 43.22%; /* 389px of 900 */
  width: min(645px, 40vw);
  /* No fixed height: the copy is live and varies by several lines between amenities, so
     the panel is sized by what is in it. A floor only showed as dead space under the
     shorter ones. */
  padding: clamp(22px, 2.1vw, 40px) clamp(26px, 3.1vw, 60px);
  border-radius: var(--radius-control-lg);
  background: var(--surface-glass);
  backdrop-filter: blur(9px);
  color: var(--text-primary);
  box-shadow: var(--shadow-float);
}

.amenities__card h3 {
  width: 525px;
  max-width: 100%;
  font-size: clamp(24px, 2.6vw, var(--text-h2));
  /* Not `normal`: that takes the line box from Bricolage Grotesque's own metrics, roughly
     double the 60px every other h2 uses, and two title lines then ran the body copy out
     through the bottom of the card.
     Held as a ratio rather than the token's 60px, because the size above now steps down
     with the window and a fixed leading would leave the two lines floating apart. */
  line-height: 1.2;
  font-weight: var(--weight-bold);
  letter-spacing: -1px;
  color: var(--color-grey-dark);
}

.amenities__body {
  margin-top: clamp(12px, 1.1vw, 21px);
  padding-left: clamp(20px, 2vw, 38px);
  border-left: 4px solid var(--color-grey-secondary);
  width: 525px;
  max-width: 100%;
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-grey-secondary);
}

/* Deliberately runs off the right edge of the canvas, as it does in the design. */
.amenities__filmstrip {
  position: absolute;
  left: 64.58%; /* 1240px of 1920 */
  top: 55.33%; /* 498px of 900 */
  display: flex;
  gap: clamp(8px, 0.78vw, 15px);
  align-items: center;
}

.amenities__thumb {
  display: block;
  width: clamp(96px, 7.14vw, 137px);
  height: clamp(126px, 9.38vw, 180px);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: width var(--duration-base) var(--ease-out),
    height var(--duration-base) var(--ease-out);
}

.amenities__thumb.is-active {
  width: clamp(113px, 8.39vw, 161px);
  height: clamp(149px, 11.09vw, 213px);
  box-shadow: var(--shadow-float);
}

.amenities__nav {
  position: absolute;
  left: 48.49%; /* 931px of 1920 */
  top: 86.22%; /* 776px of 900 */
  display: flex;
  gap: 10px;
}

/* ============================================================
   How it works
   ============================================================ */

.how {
  background: var(--color-white);
}

.how__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-10);
}

.how__steps::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--border-subtle);
}

.how__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

.how__num {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 2px solid var(--color-green-primary);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 22px;
  line-height: 28px;
  font-weight: var(--weight-semibold);
  color: var(--color-green-primary);
}

.how__step h3 {
  font-size: 24px;
  line-height: 32px;
  font-weight: var(--weight-medium);
}

.how__step p {
  max-width: 338px;
  margin-top: 10px;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-grey-secondary);
}

/* ============================================================
   Trust
   ============================================================ */

.trust {
  position: relative;
  background: linear-gradient(90deg, #025862 0%, #023840 100%);
  color: var(--text-inverse);
  overflow: hidden;
}

/* The "40 Years of Excellence" script watermark, bleeding off the top-left corner.
   Sized by the new art's own aspect so it never stretches. */
.trust::before {
  content: '';
  position: absolute;
  left: -1.56%;
  top: -9.05%;
  width: 53.96%;
  aspect-ratio: 1700 / 1038;
  background: url('../../assets/images/trust/forty-years.png') no-repeat center / contain;
  opacity: 0.14;
  pointer-events: none;
}

/* The watermark is positioned and the content is not, so without this it paints over
   the heading and grays out "Book". */
.trust > .container {
  position: relative;
}

.trust .section-head {
  gap: var(--space-5);
  margin-bottom: 60px;
}

.trust .section-head--inverse .section-head__sub {
  width: 900px;
  max-width: 100%;
  color: #b8d9db;
}

/* 660 / 868 of the 1552 content band, kept as ratios so it survives narrower desktops. */
.trust__grid {
  display: grid;
  grid-template-columns: minmax(0, 660fr) minmax(0, 868fr);
  gap: var(--space-6);
  height: 468px;
}

.trust__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-10);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  text-align: center;
  overflow: hidden;
}

/* The seal takes whatever height the copy leaves and throws a cyan glow behind it.
   This has to be drop-shadow, not box-shadow: the badge is a transparent hexagon, and
   box-shadow would glow around its bounding *rectangle*, which reads as a dark panel
   sitting behind the badge. Stacked because drop-shadow has no spread. */
.trust__badge {
  flex: 1 0 0;
  min-height: 0;
  aspect-ratio: 271 / 225;
  filter:
    drop-shadow(0 0 40px rgba(14, 252, 252, 0.35))
    drop-shadow(0 0 90px rgba(14, 252, 252, 0.25));
}

.trust__feature h3 {
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 32px;
  line-height: 40px;
  font-weight: var(--weight-medium);
}

.trust__feature p {
  font-size: 18px;
  line-height: 26px;
  color: #f8f8f8;
}

.trust__awards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-6);
}

.award {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  /* No left padding — the seal runs flush to the card edge and is clipped by it. */
  padding: var(--space-6) var(--space-6) var(--space-6) 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-inverse);
}

/* 222 of the card's 422 width, and tall enough to bleed past the vertical padding. */
.award__art {
  position: relative;
  flex: 0 0 52.6%;
  align-self: stretch;
  margin-block: calc(var(--space-6) * -1);
}

.award__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.award__copy h3 {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 20px;
  line-height: 24px;
  font-weight: var(--weight-semibold);
  color: #e5e5e5;
}

.award__copy p {
  font-size: var(--text-body);
  line-height: 20px;
  color: #fbfbfb;
}

.award__years {
  font-size: var(--text-xs) !important;
  line-height: 18px !important;
  font-weight: var(--weight-medium);
  color: #00d6f0 !important;
}

.trust__clients {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  text-align: center;
}

.trust__clients-label {
  margin-bottom: 36px;
  font-size: var(--text-h3);
  line-height: 26px;
  font-weight: var(--weight-medium);
  color: #b8d9db;
}

.trust__logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6) var(--space-20);
  flex-wrap: wrap;
}

/* Without this the wide marks squeeze the narrow ones instead of wrapping the row. */
.trust__logo {
  flex: 0 0 auto;
}

/* The exports were trimmed of their transparent margins, so one height reads evenly
   across the row. */
.trust__logo img {
  height: 36px;
  width: auto;
  max-width: 262px;
  object-fit: contain;
}

/* The exports carry opaque white plates, which a screen blend would flatten to solid
   white. So dark or full-color marks are knocked back to white per logo instead, and
   detailed emblems opt out through the data's `invert` flag. */
.trust__logo--invert img {
  filter: brightness(0) invert(1);
}

.trust__logo--text {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   Corporate housing
   ============================================================ */

.corporate {
  background: var(--surface-tint);
}

.corporate__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.corporate-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.corporate-card__media {
  position: relative;
  height: 280px;
  flex: none;
}

.corporate-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

.corporate-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px;
}

.corporate-card__body h3 {
  max-width: 377px;
  font-size: 26px;
  line-height: 34px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.52px;
}

.corporate-card__rule {
  width: 40px;
  height: 3px;
  margin-top: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.corporate-card__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: 27px;
  font-size: 20px;
  line-height: 26px;
  color: var(--color-grey-secondary);
}

.corporate-card__bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bullet-marker {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.bullet-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.corporate__more {
  margin-top: var(--space-12);
  text-align: center;
}

.corporate__more .link-cta {
  font-size: 18px;
}

/* ============================================================
   Testimonials
   ============================================================ */

/* The padding gives back the strip the tour band overlaps, so its upper bite shows
   this mint instead of the page white. */
.testimonials {
  padding-bottom: calc(var(--space-22) + var(--arc-depth));
  background: linear-gradient(180deg, var(--surface-page), var(--surface-mint));
  overflow: hidden;
}

.testimonials__viewport {
  padding-inline: max(var(--gutter), calc((100vw - 800px) / 2));
}

.testimonial {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 59.75% 40.25%;

  /* The copy column sets the height, with min-height as a floor. Taken from the photos,
     the height changed whenever `loading="lazy"` delivered one, so an arrow click
     resized every card in the row. */
  position: relative;
  min-height: 445px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-white);
  scale: 0.9;
  opacity: 0.6;
  outline: 1px solid #ccccdf;
  outline-offset: -1px;
  transition: opacity var(--duration-slow) var(--ease-out),
    scale var(--duration-slow) var(--ease-out);
}

.testimonial.is-current {
  scale: none;
  opacity: 1;
  outline: none;
  box-shadow: 0 3px 25px rgba(0, 144, 146, 0.15);
}

#testimonials-track {
  position: relative;
  gap: 40px;
}

.testimonials__viewport::before,
.testimonials__viewport::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: min(365px, calc((100% - 800px) / 2));
  pointer-events: none;
}

.testimonials__viewport::before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 10.137%, var(--color-white));
}

.testimonials__viewport::after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 10.137%, var(--color-white));
}

.testimonials .carousel__nav .icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.testimonials .carousel__nav .icon-btn:disabled:hover {
  background: transparent;
}

/* Out of the flex row, so the slides keep their positions. It sits one track gap to the
   left of the first slide and moves with the track. */
.testimonial--peek {
  position: absolute;
  top: 0;
  right: calc(100% + 40px);
  bottom: 0;
  width: 100%;
}

.testimonial__copy {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 30px 60px 30px 40px;
}

.testimonial .rating__stars {
  color: var(--color-green-secondary);
}

.testimonial__name {
  margin-top: var(--space-3);
  font-size: 28px;
  line-height: 32px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.15px;
  color: var(--color-black);
}

.testimonial__role {
  margin-top: 5px;
  font-size: var(--text-body);
  line-height: 20px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.2px;
  color: var(--color-rose);
}

.testimonial__quote {
  margin-block: var(--space-3);
  font-size: 20px;
  line-height: 30px;
  color: var(--text-primary);
}

.testimonial__property {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: auto;
}

.testimonial__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
  width: 55px;
  height: 55px;
  border-radius: var(--radius-pill);
  background: var(--color-rose);
  color: var(--text-inverse);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 20px;
  font-weight: var(--weight-bold);
}

.testimonial__details {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.testimonial__property-name {
  font-size: var(--text-body);
  line-height: 20px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.2px;
  color: var(--color-rose);
}

.testimonial__property-address {
  font-size: var(--text-sm);
  line-height: 20px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}

.testimonial__link {
  font-size: var(--text-xs);
  line-height: 20px;
  letter-spacing: -0.2px;
  color: var(--color-green-primary);
  text-decoration: underline;
}

/* Out of the grid flow. `1fr` rows only mean "share the height" when the grid has a height to share. This one
   did not, so each row fell back to its image's own size and the two source photographs
   became the card height. Out of flow with top and bottom pinned, the column has a
   definite height, the rows split it, and `object-fit: cover` crops to fit. The card no
   longer changes size when a lazy photograph arrives.
   The 40.25% column stays reserved: it is declared on .testimonial, not filled by this. */
.testimonial__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40.25%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  padding: 2px 2px 2px 0;
}

.testimonial__media img {
  min-height: 0;
}

.testimonial__media img:first-child {
  border-top-right-radius: 14px;
}

.testimonial__media img:last-child {
  border-bottom-right-radius: 14px;
}

/* ============================================================
   3D tour
   ============================================================ */

/* The band has a shallow arc bitten into its top and bottom edges. The arc is circular,
   not elliptical: an ellipse with half the band's width as its radius dives far too fast
   near the corners. So the bite is the segment of a very large circle, carved by two
   `circle` gradients intersected. The band is full-bleed, so `vw` keeps both radii in one
   unit and the arc stays circular at every width; a percentage radius would resolve
   against a different axis for each and skew back to an ellipse. */
/* Shared by the band, the testimonials above it and the FAQ below it, which the band
   overlaps by the same amount. */
.testimonials,
.tour,
.faq {
  --arc-depth: 3.44vw; /* 66px at 1920 — how far the bite reaches at the center */
  /* R = (half-width² + depth²) / (2 · depth), so the arc closes to nothing exactly at
     the corners. Changing the depth means recomputing this. */
  --arc-radius: 365.1vw;
}

.tour {
  position: relative;
  /* Paints over the testimonials and the FAQ, which sit behind and fill the two bites. */
  z-index: 1;
  margin-top: calc(-1 * var(--arc-depth));
  height: 879px;
  display: grid;
  justify-items: center;
  align-items: start;
  padding-top: 161px;
  overflow: hidden;
  color: var(--text-inverse);
  text-align: center;

  /* The fade runs over the last 1px only. As 99.9% it was a tenth of a 365vw radius,
     a 7px blur along both arcs at 1920. */
  -webkit-mask:
    radial-gradient(circle var(--arc-radius) at 50%
      calc(var(--arc-depth) - var(--arc-radius)), #0000 calc(100% - 1px), #000 100%),
    radial-gradient(circle var(--arc-radius) at 50%
      calc(100% - var(--arc-depth) + var(--arc-radius)), #0000 calc(100% - 1px), #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--arc-radius) at 50%
      calc(var(--arc-depth) - var(--arc-radius)), #0000 calc(100% - 1px), #000 100%),
    radial-gradient(circle var(--arc-radius) at 50%
      calc(100% - var(--arc-depth) + var(--arc-radius)), #0000 calc(100% - 1px), #000 100%);
  mask-composite: intersect;
}

.tour__media,
.tour__scrim {
  position: absolute;
  inset: 0;
}

/* A flat 20% wash over the whole photo, plus a heavier fade across the top third so
   the heading holds against the bright window in the shot. */
.tour__scrim {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 28.411%),
    rgba(0, 0, 0, 0.2);
}

.tour__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 821px;
  max-width: 100%;
}

.tour__content h2 {
  color: var(--text-inverse);
  line-height: 64px;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.tour__content p {
  font-size: var(--text-lead);
  line-height: var(--text-lead-lh);
  color: var(--text-inverse);
}

/* The whole band is the target, so the button fills it; the rose disc is drawn as a
   centered pseudo-element rather than a child so the hit area stays full-bleed. */
.tour__trigger {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.tour__trigger::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  translate: -50% -50%;
  border-radius: var(--radius-pill);
  background: var(--color-rose);
  transition: scale var(--duration-fast) var(--ease-out);
}

/* The play triangle, drawn from borders so it needs no asset. */
.tour__trigger::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -35% -50%;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--color-white);
}

.tour__trigger:hover::before {
  scale: 1.06;
}

/* Same backdrop and stage as the property page's tour popup (details.css .lightbox),
   which this page does not load. */
.tour-popup {
  background: rgba(10, 14, 20, 0.92);
}

.tour-popup__stage {
  height: min(72vh, 750px);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--surface-dark);
}

.tour-popup__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   FAQ
   ============================================================ */

/* Slides up behind the tour band so its mint fills the arc bitten out of the band's
   lower edge; the padding puts the heading back where it belongs. */
.faq {
  margin-top: calc(-1 * var(--arc-depth));
  padding-top: calc(var(--space-22) + var(--arc-depth));
  background: linear-gradient(180deg, var(--surface-mint), var(--surface-page));
}

/* ============================================================
   Booking CTA
   ============================================================ */

.cta-booking {
  padding-block: var(--space-16);
  background: linear-gradient(120deg, var(--color-green-primary) 0%, #016470 60%, #015a66 100%);
  color: var(--text-inverse);
}

.cta-booking__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}

.cta-booking h2 {
  color: var(--text-inverse);
  line-height: 64px;
}

.cta-booking p {
  max-width: 558px;
  font-size: 20px;
  color: var(--color-grey-light);
}

.cta-booking__form {
  width: 100%;
  margin-top: 28px;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1180px) {
  .trust__grid {
    grid-template-columns: 1fr;
  }

  .corporate__grid {
    grid-template-columns: 1fr;
  }

  .amenities__inner {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .amenities__filmstrip {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-bottom: 0;
  }
}

/* ============================================================
   Mobile. Not a reflow of the desktop page: the locations band
   scrolls sideways, the amenity showcase drops its filmstrip,
   and the four steps run down a rail.
   ============================================================ */

@media (max-width: 900px) {
  .section-head h2 {
    font-size: 30px;
    line-height: 34px;
  }

  .section-head__sub {
    font-size: 18px;
    line-height: 28px;
  }

  .how .section-head,
  .trust .section-head,
  .corporate .section-head {
    align-items: flex-start;
    text-align: left;
  }

  .hero {
    align-items: stretch;
    min-height: 678px;
    padding-block: 259px 32px;
  }

  .hero__content {
    justify-content: space-between;
    gap: var(--space-5);
  }

  .hero__scrim {
    background: rgba(0, 0, 0, 0.4);
  }

  /* The same plant, where hero-mobile.webp's tighter crop puts it. */
  .hero__media img {
    transform-origin: 68% 33%;
  }

  .hero__sub {
    display: none;
  }

  .stats {
    padding-block: 40px;
  }

  .stats__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-4);
  }

  /* The desktop nowrap cannot hold here: "Studio, 1BD, 2BD" ran past its column and
     gave the whole page a sideways scroll. */
  .stat__value {
    font-size: 24px;
    line-height: 32px;
    white-space: normal;
  }

  .stat__label {
    font-size: var(--text-sm);
    line-height: 18px;
    padding-inline: 10px;
  }

  .rooms {
    height: 725px;
  }

  .rooms__inner {
    justify-content: space-between;
    padding: 40px 0 16px;
  }

  .rooms__heading,
  .rooms__sub,
  .rooms__nav {
    display: none;
  }

  .rooms__tabs {
    align-self: stretch;
    margin-top: 0;
    max-width: none;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    padding-inline: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .rooms__tabs::-webkit-scrollbar {
    display: none;
  }

  .rooms__tab {
    flex: none;
    height: 38px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-grey-dark);
  }

  .rooms__tab[aria-selected='true'] {
    font-weight: var(--weight-semibold);
  }

  .rooms__card {
    --card-pad-y: 20px;
    --card-pad-x: 20px;
    align-self: stretch;
    width: auto;
    margin: 0 16px;
    padding: 20px;
  }

  .rooms__card::before {
    -webkit-mask:
      linear-gradient(#000 0 0),
      linear-gradient(#000 0 0) left 24px bottom 22px / 8px 108px no-repeat;
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0),
      linear-gradient(#000 0 0) left 24px bottom 22px / 8px 108px no-repeat;
    mask-composite: exclude;
  }

  .rooms__card h3 {
    font-size: 28px;
    line-height: 34px;
  }

  /* 42px keeps the disc markers clear of the card's cut-out notch: the markers draw
     outside the text edge, and at less padding they landed inside the strip. */
  .rooms__list {
    margin: 20px 0 0;
    padding-left: 42px;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.36px;
    color: var(--color-grey-dark);
  }

  /* --- Locations: a 298px card rail that scrolls sideways, bleeding to both
     screen edges rather than the 3-column mosaic the desktop uses. --- */
  .locations {
    padding-bottom: 48px;
  }

  .locations .section-head {
    gap: 10px;
    margin-bottom: 30px;
  }

  /* The desktop tracking leaks through the shared H2 override, so it is reset here. */
  .locations .section-head h2 {
    font-size: 30px;
    line-height: 34px;
    letter-spacing: normal;
  }

  .locations .section-head__sub {
    line-height: 26px;
  }

  .location-tile__city {
    line-height: 28px;
  }

  .location-tile__count {
    line-height: 18px;
  }

  .locations__more .link-cta {
    font-size: 16px;
    text-decoration: underline;
  }

  .locations__mosaic {
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    height: 374px;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .locations__mosaic::-webkit-scrollbar {
    display: none;
  }

  .location-tile,
  .location-tile--feature {
    flex: 0 0 298px;
    scroll-snap-align: start;
    justify-content: space-between;
    gap: 0;
  }

  .location-tile__meta,
  .location-tile--feature .location-tile__meta {
    width: auto;
  }

  .locations__more {
    margin-top: 30px;
  }

  /* --- Amenities: 725px, copy panel pinned near the foot, no filmstrip. --- */
  .amenities {
    height: 725px;
  }

  .amenities__rail {
    left: 29.75px;
    top: 40px;
    height: 270.6px;
  }

  .amenities__rail::before {
    height: 270.6px;
    top: 0;
  }

  .amenities__rail li {
    width: 3.85px;
    height: 3.85px;
  }

  .amenities__dot {
    width: 3.85px;
    height: 3.85px;
  }

  .amenities__dot.is-active {
    width: 27.5px;
    height: 27.5px;
  }

  /* The view renders one icon string for every breakpoint, at 28px — which is wider than
     this disc, so the glyph's corners fall outside the circle. Scaled, not resized:
     SiteIcons.Icon writes file-backed icons' width and height as an inline style, and a
     stylesheet cannot outbid that without `!important`. `scale` has no such conflict, it
     works the same for the inline-SVG icons beside them, and it runs from the center, so
     the grid centering above still decides where the glyph sits.
     0.55 is the desktop ratio kept: 28 in a 50px disc. */
  .amenities__dot.is-active > * {
    scale: 0.55;
  }

  /* Anchored to the foot of the band, not measured from the top. The copy is live and the
     band clips, so a title that wraps to a third line has to grow up into the photograph
     rather than push the card off the bottom. */
  .amenities__card {
    left: 16px;
    top: auto;
    bottom: 16px;
    width: 358px;
    min-height: 240px;
    padding: 20px;
  }

  .amenities__card h3 {
    width: 317px;
    font-size: 28px;
    line-height: 34px;
  }

  .amenities__body {
    width: 295px;
    margin-top: 20px;
    margin-left: 4px;
    padding-left: 11.36px;
    border-left-width: 7.64px;
    font-size: var(--text-body);
    line-height: 28px;
  }

  .amenities__header,
  .amenities__filmstrip {
    display: none;
  }

  /* The arrows stay on the phone (tester request — a swipe alone is easy to miss),
     clear of the bottom-pinned card in the band's top-right corner. */
  .amenities__nav {
    left: auto;
    right: 16px;
    top: 16px;
  }

  /* --- How it works: numbered discs down a rail, copy beside them. --- */
  .how .section-head {
    margin-bottom: 32px;
  }

  .how__steps {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .how__steps::before {
    display: none;
  }

  .how__step {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 16px;
    align-items: start;
    text-align: left;
  }

  /* The track joins each disc to the next step; the last step has nothing to join. */
  .how__step:not(:last-child) .how__num::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    translate: -50% 0;
    width: 2px;
    height: 100%;
    background: var(--border-subtle);
  }

  .how__num {
    position: relative;
    grid-row: 1 / span 2;
  }

  .how__step h3 {
    margin-top: 14px;
    line-height: 28px;
  }

  .how__step p {
    max-width: 278px;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 28px;
  }

  /* --- Trust: the CHPA card sits above a 2-up award grid whose seals move from
     beside the copy to a 100px band on top of it. --- */
  .trust .section-head {
    gap: var(--space-3);
    margin-bottom: 30px;
  }

  .trust__grid {
    grid-template-columns: 1fr;
    gap: 12px;
    height: auto;
  }

  .trust__feature {
    gap: var(--space-4);
    padding: var(--space-6);
  }

  .trust__badge {
    flex: none;
    width: 170px;
    height: 141px;
    aspect-ratio: auto;
    filter:
      drop-shadow(0 0 24px rgba(14, 252, 252, 0.35))
      drop-shadow(0 0 50px rgba(14, 252, 252, 0.22));
  }

  .trust__feature h3 {
    font-size: var(--text-h4);
    line-height: 28px;
  }

  .trust__feature p {
    font-size: var(--text-sm);
    line-height: 23px;
  }

  .trust__awards {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: 12px;
  }

  .award {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0 0 var(--space-4);
  }

  .award__art {
    flex: none;
    width: 100%;
    height: 100px;
    margin-block: 0;
    overflow: hidden;
  }

  .award__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }

  .award__copy {
    align-items: center;
    padding-inline: var(--space-4);
    text-align: center;
  }

  .award__copy h3 {
    font-size: var(--text-body);
    line-height: 20px;
  }

  .award__copy p {
    font-size: 13px;
    line-height: 17px;
  }

  .award__years {
    font-size: 11px !important;
    line-height: 16px !important;
  }

  .trust__clients {
    margin-top: 30px;
    padding-top: 30px;
  }

  .trust__clients-label {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 28px;
  }

  /* Two marks per row where they fit, with the wide ones taking a row of their own. */
  .trust__logos {
    justify-content: center;
    gap: 26px 70px;
  }

  .trust__logo img {
    max-width: 120px;
    max-height: 40px;
    height: auto;
  }

  /* --- Corporate: cards stack full-width with a 180px photo. --- */
  .corporate .section-head {
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .corporate__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .corporate-card__media {
    height: 180px;
  }

  .corporate-card__body {
    padding: var(--space-5);
  }

  .corporate-card__body h3 {
    font-size: var(--text-h4);
    line-height: 28px;
  }

  .corporate-card__rule {
    margin-top: 14px;
  }

  .corporate-card__bullets {
    margin-top: 14px;
    gap: 10px;
    font-size: var(--text-body);
    line-height: 22px;
  }

  .corporate__more {
    margin-top: var(--space-6);
  }

  /* --- Testimonials: one 303x512 portrait card centered in the track. --- */
  .testimonials {
    background: linear-gradient(180deg, var(--surface-page) 55.651%, var(--surface-mint) 100%);
  }

  .testimonials .section-head {
    gap: var(--space-3);
    margin-bottom: 30px;
  }

  .testimonials .carousel__nav .icon-btn {
    width: 36px;
    height: 36px;
  }

  .testimonials__viewport {
    padding-inline: calc((100% - 303px) / 2);
  }

  #testimonials-track {
    z-index: 1;
    gap: calc((100vw - 303px) / 2);
  }

  /* Every card is drawn the same on the phone: hairline border, no shadow, no fade. */
  .testimonial,
  .testimonial.is-current {
    flex: 0 0 303px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    height: auto;
    min-height: 512px;
    scale: none;
    opacity: 1;
    outline: 1px solid #ccccdf;
    box-shadow: none;
  }

  .testimonial--peek,
  .testimonials__viewport::after {
    display: none;
  }


  .testimonials__viewport::before {
    left: 50%;
    top: 15px;
    bottom: 18px;
    z-index: 0;
    width: 328px;
    translate: -50% 0;
    border: 1px solid #ccccdf;
    border-radius: 14px;
    background: var(--color-white);
  }

  /* 104px strip, flush to the card edges: a 140px photo, a 15px white gutter, then the
     148px photo. */
  .testimonial__media {
    /* Back into the grid. The strip states its own height here, so the desktop
       workaround for an indefinite grid has nothing left to solve, and out of flow it
       would only re-draw the band down the right-hand edge. */
    position: static;
    width: auto;
    grid-template-rows: 1fr;
    grid-template-columns: 140fr 148fr;
    gap: 15px;
    height: 104px;
    padding: 0;
  }

  .testimonial__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .testimonial__media img:first-child,
  .testimonial__media img:last-child {
    border-radius: 0;
  }

  /* The spacing below is set per element because the gaps differ between each pair. */
  .testimonial__copy {
    gap: 0;
    padding: 25px 15px 16px;
  }

  .testimonial__name {
    margin-top: 10px;
    font-size: 20px;
    line-height: 22px;
  }

  .testimonial__role {
    margin-top: 3px;
    font-size: var(--text-sm);
  }

  .testimonial__quote {
    margin-block: 25px 15px;
    font-size: var(--text-body);
    line-height: 28px;
  }

  .testimonials .carousel__nav {
    gap: 10px;
    margin-top: 30px;
  }

  /* --- 3D tour: taller than the desktop band, copy starting 94px down. --- */
  .tour {
    height: 725px;
    padding-top: 94px;
  }

  .tour__content {
    width: 358px;
    gap: 15px;
  }

  .tour__content h2 {
    line-height: 40px;
  }

  .faq .section-head {
    margin-bottom: 20px;
  }

  .faq .accordion__body {
    line-height: 28px;
  }

  /* --- Booking CTA: heading block over three stacked 56px controls. --- */
  .cta-booking {
    padding-block: 40px;
  }

  .cta-booking__inner {
    gap: 15px;
  }

  .cta-booking h2 {
    font-size: 30px;
    line-height: 34px;
  }

  .cta-booking p {
    font-size: 18px;
    line-height: 28px;
  }

  .cta-booking__form {
    margin-top: 15px;
  }

  .search-band .search-form__inner {
    flex-direction: column;
    gap: 12px;
  }

  .search-band .search-form__field,
  .search-band .search-form__field + .search-form__field {
    flex: none;
    width: 100%;
  }

  .search-band .field {
    min-height: 56px;
    padding-block: 0;
  }

  .search-band .field__input,
  .search-band .search-form__date {
    font-size: 18px;
  }

  .search-band .search-form__submit {
    width: 100%;
    min-height: 56px;
    font-size: 20px;
    letter-spacing: 1.4px;
  }
}

/* The 390 rules above already cover the narrowest frame the design draws; this block
   only keeps the locations rail from running wider than the viewport on smaller phones. */
@media (max-width: 560px) {
  .locations__mosaic {
    scroll-padding-inline: var(--gutter);
  }
}