/**
 * Home page layout — one block per section of Figma frame `175:18865`,
 * in the same order they appear on the page.
 */

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

/* Figma draws the hero 1100px tall at 1920x1080; on shorter screens it 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;
}

/* Changed for the Razor port: the clip used to sit on .hero. Only the photograph
   overflows, and the clip also cut off the date picker that the search form opens
   below itself. Clipping the media alone leaves the popover free. */
.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 the frame's 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;
}

/* Capped at the Figma measure so the sub-heading breaks to two lines on its own,
   rather than relying on a hard <br> that 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
   ============================================================ */

/* Figma `175:18886`: a full-bleed 1039px photo band — the same composition as the
   amenity showcase, not a white section with a photo beside the copy. Horizontal
   offsets are percentages of the 1920 canvas so the composition scales. */
.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;
}

/* Frosted pills: 40% white when idle, solid white for the selected room. */
.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 card face. The bullet rule is a boolean Subtract in the design (`175:18900`):
   a 10x100 strip punched through the card that the photograph shows through, not a
   coloured bar. Same two-layer 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
   ============================================================ */

/* This heading runs looser than the shared H2 — 50/64 with -1.12px tracking — and the
   head-to-mosaic gap is 60px, not the 80px the shared .section-head uses. */
.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;
}

/* Figma: 650px band — a 772px feature tile beside two columns of 370px tiles,
   three rows deep, everything on a 20px gutter. */
.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);
}

/* The containing block for the absolutely placed composition inside it. */
.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;
}

/* Section header over the photograph — centered on the content band at the design's
   67.8px offset, with the drop shadow that keeps the intro legible on light frames. */
.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 dot rail down the left edge — 7px markers on a hairline, with the active
   step swapped for a 50px white disc carrying that amenity's icon. */
/* 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);
}

/* Added for the Razor port. Every dot carries its icon in the server response, so the
   switcher never has to build 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);
  /* Changed for the Razor port: was the design's fixed 322px. The copy is live and
     varies by several lines between amenities, so the panel is sized by what is in it.
     A floor only reappeared 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));
  /* Changed for the Razor port: was `normal`. This was the only heading in the theme
     that opted out of the type scale, so its line box came from Bricolage Grotesque's
     own metrics — roughly double the 60px every other h2 uses. 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);
}

/* Left rule on the body copy, matching the design's quote-bar treatment. */
.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);
}

/* Connecting track drawn behind the numbered circles. */
.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);
}

/* The step copy is capped at 338px in the design, inside a 358px column. */
.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 greys 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 a single height reads
   evenly across the row. Figma sets the marks at 28-40px; 36 splits the difference and
   keeps all seven on one line. */
.trust__logo img {
  height: 36px;
  width: auto;
  max-width: 262px;
  object-fit: contain;
}

/* Figma screen-blends the whole row so the dark plates drop out against the teal. These
   exports carry opaque white plates, which screen would flatten to solid white, so dark
   or full-color wordmarks are knocked back to white per-logo instead — same result on
   this ground. Detailed emblems opt out via 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;
}

/* Bottom-weighted scrim over the card photograph. */
.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;
}

/* 24px halo at 10% of the card accent, holding a 6px dot. */
.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));
}

/* Figma `175:19136`: 800x445 card, copy column 59.75% wide, photo column the rest
   split into two frames with a 12px white gutter. */
.testimonial {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 59.75% 40.25%;

  /* Added for the Razor port. The card had no height of its own, so it took one from
     the photographs, and `loading="lazy"` delivers those only once the slide is on
     screen. Clicking an arrow therefore resized the card, and flex items share one line
     height, so every card resized with it. The copy column now sets the height, with the
     Figma card as the floor. A longer live quote still wins over the floor. */
  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;
}

/* Figma tints the testimonial rating teal rather than the gold used on property cards. */
.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;
}

/* 55px rose disc holding a pin glyph and the state code. */
.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;
}

/* Changed for the Razor port: taken 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
   ============================================================ */

/* Figma bites a shallow arc *into* the band from both the top and the bottom, deepest at
   the center and tapering to nothing at either corner — 60px at the 1920 frame.
   Tracing the edge shows a circular arc, not an elliptical one: an ellipse with its
   radius set to half the band's width dives far too fast near the corners (15px in at
   6% across, where the design is only 6px in). So the carve is the segment of a circle
   whose radius is 401.6% of the band width, sitting just outside each edge.
   Two `circle` gradients — transparent inside, opaque outside — intersected to leave the
   band opaque everywhere except the two bites. The band is full-bleed, so `vw` keeps
   both radii in the same 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);
}

/* 60px between the heading block and the search row. */
.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 390 — measured off the `179:18383` frame, section by section.
   The mobile design is not a reflow of the desktop one: the locations band
   becomes a horizontal scroller, the amenity showcase drops its filmstrip,
   and the four steps run vertically down a rail.
   ============================================================ */

@media (max-width: 900px) {
  /* The frame's section heads run 30/34 over an 18/28 sub (`347:19644`, `188:18462`,
     `353:19777`), with how/trust/corporate set left and the rest keeping the shared
     centered treatment. */
  .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;
  }

  /* The current frame is 678px tall: the headline starts 259px down and the card
     sits 32px off the bottom, with the space between them left to auto. */
  .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%;
  }

  /* The mobile frame runs the headline straight into the search card. */
  .hero__sub {
    display: none;
  }

  /* 2x2 at a 16/24 gutter inside a 40px band. */
  .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. The mobile frame draws these at 24/32. */
  .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;
  }

  /* The mobile frame's notch (`346:19537`): 8x108, 4px in from the padding edge. */
  .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. The
     mobile frame puts the bullet text 62px in, with the notch ending at 32. */
  .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 50/64 with -1.12px tracking leaks through the shared H2 override;
     the frame (`281:22753`) draws this one 30/34 with no tracking. */
  .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 centring 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 rather than 469px down it. For the Figma copy those
     are the same place — 469 + 240 leaves exactly the 16px inset the left edge uses — but
     the copy is live and the band clips. Measured from the top, a title that wraps to a
     third line pushes the card off the bottom; measured from the bottom, it grows upwards
     into the photograph instead. The longest amenity we ship clears the old ceiling by
     about 10px, so there was no room left to spend. */
  .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;
  }

  /* The step copy runs 16/28 in the frame's 278px column (`188:18473`). */
  .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%;
  }

  /* The mobile frame centres the award titles and text. */
  .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 —
     the frame draws them smaller and further apart than the desktop band. */
  .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. --- */
  /* The frame's card band sits on a page-to-mint wash (`346:19606`), with 36px
     arrows under it. */
  .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;
  }

  /* 15px card padding plus the 10px the frame pads the star row with. The spacing below
     is set per element, because the frame's 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;
  }

  /* The frame's answers run on a 28px leading (`282:23514`). */
  .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;
  }

  /* Band head per `346:20514`: 30/34 over an 18/28 sub. */
  .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;
  }

  /* The band's button keeps the full 20px tracked caps on the phone (`346:20520`). */
  .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);
  }
}