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

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

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 1100px;
  padding-bottom: 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;
}

/* 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: var(--space-16);
  width: 100%;
}

.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: var(--space-20);
  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;
  height: 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);
}

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

.rooms__heading {
  position: absolute;
  left: 50%;
  top: 91px;
  translate: -50% 0;
  width: 1552px;
  max-width: calc(100% - var(--gutter) * 2);
  font-size: var(--text-h2);
  line-height: 64px;
  font-weight: var(--weight-medium);
  text-align: center;
  color: var(--text-inverse);
}

.rooms__tabs {
  position: absolute;
  left: 50%;
  top: 181px;
  translate: -50% 0;
  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, right-aligned to the 184px page margin. */
.rooms__card {
  position: absolute;
  right: 9.53%;
  top: 479px;
  width: 671px;
  height: 322px;
  padding: 40px 60px;
  border-radius: var(--radius-control-lg);
  background: var(--surface-glass-strong);
  backdrop-filter: blur(9px);
  color: var(--text-primary);
}

.rooms__card h3 {
  width: 543px;
  max-width: 100%;
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-h2);
  line-height: 55px;
  font-weight: var(--weight-bold);
  color: var(--color-grey-dark);
}

.rooms__list {
  width: 501px;
  max-width: 100%;
  margin-top: 25px;
  padding-left: 55px;
  list-style: disc;
  font-size: var(--text-lead);
  line-height: 36px;
  letter-spacing: -0.4px;
  color: var(--color-grey-secondary);
}

.rooms__nav {
  position: absolute;
  left: 50%;
  top: 913px;
  translate: -50% 0;
  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;
  height: 900px;
  overflow: hidden;
  color: var(--text-inverse);
}

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

.amenities__scrim {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 37.133%,
    rgba(0, 0, 0, 0.6) 69.978%
  );
}

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

/* 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. */
.amenities__rail {
  position: absolute;
  left: 6.51%; /* 125px of 1920 — the rail centre line */
  top: 216px;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 466px; /* first dot top 216 → last dot bottom 682 */
}

.amenities__rail::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -12px;
  width: 1px;
  height: 492px;
  background: rgba(255, 255, 255, 0.45);
}

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

.amenities__dot {
  display: grid;
  place-items: center;
  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 centred 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);
}

.amenities__card {
  position: absolute;
  left: 11.67%; /* 224px of 1920 */
  top: 389px;
  width: 645px;
  /* Changed for the Razor port: was a fixed height. The card holds live copy, so a
     longer amenity title has to push the card down rather than spill out of it. */
  min-height: 322px;
  padding: 40px 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 h2 {
  width: 525px;
  max-width: 100%;
  font-size: 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. */
  line-height: var(--text-h2-lh);
  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: 21px;
  padding-left: 38px;
  border-left: 4px solid var(--color-grey-secondary);
  width: 525px;
  max-width: 100%;
  font-size: var(--text-lead);
  line-height: var(--text-lead-lh);
  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: 498px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.amenities__thumb {
  display: block;
  width: 137px;
  height: 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: 161px;
  height: 213px;
  border: 4px solid var(--color-white);
  box-shadow: var(--shadow-float);
}

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

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

.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: 15px;
  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. */
.trust::before {
  content: '';
  position: absolute;
  left: -5.84%;
  top: -14.27%;
  width: 49.76%;
  height: 62.07%;
  background: url('../../assets/images/trust/forty-years.png') no-repeat center / 100% 100%;
  opacity: 0.2;
  pointer-events: none;
}

.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. */
.trust__badge {
  flex: 1 0 0;
  min-height: 0;
  aspect-ratio: 271 / 225;
  box-shadow: 0 0 150px 50px rgba(14, 252, 252, 0.4);
}

.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-colour 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;
}

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

.testimonials {
  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);
  box-shadow: 0 3px 25px rgba(0, 144, 146, 0.15);
  opacity: 0.45;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.testimonial.is-current {
  opacity: 1;
}

.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 centre 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 and the FAQ below it, which has to slide up by the same amount. */
.tour,
.faq {
  --arc-depth: 3.44vw; /* 66px at 1920 — how far the bite reaches at the centre */
  /* 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 FAQ band, which sits behind and fills the lower bite. */
  z-index: 1;
  height: 879px;
  display: grid;
  justify-items: center;
  align-items: start;
  padding-top: 161px;
  overflow: hidden;
  color: var(--text-inverse);
  text-align: center;

  -webkit-mask:
    radial-gradient(circle var(--arc-radius) at 50%
      calc(var(--arc-depth) - var(--arc-radius)), #0000 99.9%, #000 100%),
    radial-gradient(circle var(--arc-radius) at 50%
      calc(100% - var(--arc-depth) + var(--arc-radius)), #0000 99.9%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--arc-radius) at 50%
      calc(var(--arc-depth) - var(--arc-radius)), #0000 99.9%, #000 100%),
    radial-gradient(circle var(--arc-radius) at 50%
      calc(100% - var(--arc-depth) + var(--arc-radius)), #0000 99.9%, #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
   centred 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;
}

/* ============================================================
   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;
  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) {
  .hero {
    min-height: 750px;
    padding-bottom: var(--space-12);
  }

  .hero__content {
    gap: var(--space-10);
  }

  /* 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);
  }

  .stat__value {
    font-size: 28px;
    line-height: 32px;
  }

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

  /* --- Rooms: the heading and tabs stay over a 320px photo; the panel and its
     arrows drop below it. --- */
  .rooms {
    height: auto;
    padding-bottom: var(--space-22);
  }

  .rooms__media,
  .rooms__scrim {
    position: relative;
    height: 380px;
  }

  .rooms__scrim {
    position: absolute;
    inset: 0 0 auto 0;
  }

  .rooms__inner {
    position: static;
  }

  .rooms__heading {
    top: var(--space-6);
    width: auto;
    line-height: normal;
  }

  /* Clears the four-line heading above it. */
  .rooms__tabs {
    top: 175px;
    width: calc(100% - var(--gutter) * 2);
    max-width: 320px;
  }

  .rooms__card,
  .rooms__nav {
    position: static;
    translate: none;
  }

  .rooms__card {
    width: auto;
    height: auto;
    margin: var(--space-5) var(--gutter) 0;
    padding: var(--space-5);
  }

  .rooms__card h3 {
    width: auto;
    line-height: 34px;
  }

  .rooms__list {
    width: auto;
    margin-top: var(--space-4);
    padding-left: var(--space-6);
    font-size: var(--text-body);
    line-height: 28px;
  }

  .rooms__nav {
    justify-content: center;
    margin-top: var(--space-5);
  }

  .rooms__nav .icon-btn--inverse {
    color: var(--text-primary);
  }

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

  .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;
  }

  .amenities__card {
    left: 16px;
    top: 469px;
    width: 358px;
    min-height: 240px;
    padding: 20px;
  }

  .amenities__card h2 {
    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__filmstrip,
  .amenities__nav {
    display: none;
  }

  /* --- 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;
  }

  /* --- 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;
    box-shadow: 0 0 80px 30px rgba(14, 252, 252, 0.35);
  }

  .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;
  }

  .award__copy {
    padding-inline: var(--space-4);
  }

  .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: var(--text-lead);
    line-height: 28px;
  }

  /* Two marks per row where they fit, with the wide ones taking a row of their own —
     a fixed 2-column grid would push the 262px marks off the viewport. */
  .trust__logos {
    justify-content: center;
    gap: 24px 30px;
  }

  .trust__logo img {
    max-width: 150px;
    max-height: 52px;
    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 centred in the track. --- */
  .testimonials .section-head {
    gap: var(--space-3);
    margin-bottom: 30px;
  }

  .testimonial {
    flex: 0 0 303px;
    grid-template-columns: 1fr;
    grid-template-rows: 306px 1fr;
    height: 512px;
    margin-inline: auto;
  }

  .testimonial__media {
    /* Back into the grid. The stacked card has a fixed height and a fixed 306px media
       row, so the photographs already have a definite box to fill here and the desktop
       workaround would only turn the band into a strip down the right-hand edge. */
    position: static;
    width: auto;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
  }

  .testimonial__copy {
    gap: 10px;
    padding: var(--space-5);
  }

  .testimonial__name {
    margin-top: 0;
    font-size: var(--text-h3);
    line-height: 28px;
  }

  .testimonial__quote {
    font-size: var(--text-body);
    line-height: 24px;
  }

  /* --- 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;
  }

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

  .cta-booking__inner {
    gap: 15px;
  }

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

  .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: 18px;
    letter-spacing: 1.26px;
  }
}

/* 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);
  }
}