/*
  Sunday — merged additions (Timeline, Portfolio map, Story of Sunday,
  category labels, Weddings & Events banners, Testimonial).

  Every value below is pulled directly from scss/base/_variables.scss and
  scss/component/_home.scss so these new blocks sit flush with the existing
  design: same $black/$white/$light/$dark, same Helvetica/Arial stack, same
  heading scale (%heading-h1: 5rem/bold/capitalize, 3rem under 991px), same
  spacing rhythm and border colour (#C4C4C4). No new colours, no new fonts.
*/

/* Hero photo (first image on the page) loads in monochrome and resolves to
   color on hover — same treatment as Story of Sunday/Portfolio imagery.
   Scoped to real pointers so touch devices just get the photo in color. */
.spotlight .left .hero-still img {
  filter: grayscale(1);
}
@media (hover: hover) and (pointer: fine) {
  .spotlight .left .hero-still img {
    transition: filter 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .spotlight .left .hero-still:hover img {
    filter: grayscale(0);
  }
}

/* ---------- shared focus ring: brand black, not the browser's default blue ---------- */
button:focus,
button:focus-visible,
a:focus,
a:focus-visible {
  outline-color: #222222;
}

/* ---------- Header CTA: keep "CheckIn" brand-cased, not forced uppercase
   like every other .box--btn/.header--btn label on the site. ---------- */
header .inner .right .wrapper .header--btn a {
  text-transform: none;
}

/* ---------- shared ripple: click feedback for buttons/arrows/tabs (see
   js/sunday-merge.js — delegated listener adds the dot, this just paints it) ---------- */
.sm-ripple {
  position: relative;
  overflow: hidden;
}
.sm-ripple-dot {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.25;
  transform: scale(0);
  pointer-events: none;
  animation: sm-ripple 0.6s ease-out;
}
@keyframes sm-ripple {
  to {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* ---------- shared heading/eyebrow helpers ---------- */
.sm-eyebrow {
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6F6F6F;
  margin-bottom: 0.75rem;
  display: block;
}

.sm-heading {
  font-size: 5rem;
  font-weight: bold;
  line-height: 1;
  text-transform: capitalize;
  color: #222222;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 991px) {
  .sm-heading {
    font-size: 3rem;
  }
}

.sm-sub {
  font-size: 1.3rem;
  line-height: 1.6;
  color: #222222;
  max-width: 42rem;
  margin-top: 0.75rem;
}

/* ---------- Navbar: bigger bar, logo scaled to match — main's offset grows with it ---------- */
header {
  padding: 1rem 2rem;
}
header .inner .left .logo svg {
  width: 8rem;
}
main {
  /* padding, not margin: margin-top here would collapse with .spotlight's
     own margin-top (parent/first-child collapsing), silently eating the
     hero's gap from the fixed header. Padding can't collapse. Zero out the
     base rule's margin-top so the offset isn't applied twice. */
  margin-top: 0;
  padding-top: 5.75rem;
  /* Deliberately no background here — body's beige should stay visible
     through the hero, all the way down to Our Properties. Everything from
     Our Properties onward already paints its own white (main.css:
     .property-card.active and .state__slider__heading), so beige only
     ever shows above that point. */
}
@media only screen and (max-width: 767px) {
  header {
    padding: 0.75rem 1rem;
  }
}
@media only screen and (max-width: 563px) {
  header .inner .left .logo svg {
    width: 5.5rem;
  }
  main {
    margin-top: 0;
    padding-top: 4.25rem;
  }
}

/* ---------- Hero: more breathing room at the bottom, panels keep their size ---------- */
/* ---------- Hero: reads as an inset card, like the ones below it ----------
   Margin on all sides so it's not glued to the nav or edge-to-edge; rounded
   corners + shadow match .story-wrap .elem-wrap's card treatment. */
.spotlight {
  width: auto;
  height: clamp(40rem, calc(60vh + 4rem), 46rem);
  margin: 2rem 5rem;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
@media only screen and (max-width: 991px) {
  .spotlight {
    margin: 1.5rem 1.5rem;
    border-radius: 0;
  }
}

/* Same inner padding as .story-wrap .elem-wrap .text (4rem 6rem) — the
   two card types should feel like one consistent system, not two. */
.spotlight .right {
  padding: 4rem 6rem;
}
@media only screen and (max-width: 991px) {
  .spotlight .right {
    padding: 3rem 3rem;
  }
}
/* Same body style as .sm-sub (used site-wide) — the hero's copy shouldn't
   be its own one-off size/weight, and should read at the same weight as
   Story of Sunday's copy right below it. */
.spotlight .right .sub,
.spotlight .right .text {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.6;
}
@media only screen and (max-width: 991px) {
  .spotlight {
    height: auto;
  }
}

/* ---------- category tag: sits above existing breakdown rows ---------- */
.category-tag {
  background: #FFFFFF;
  padding: 2.5rem 5rem 1rem 5rem;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6F6F6F;
  border-top: #C4C4C4 solid 1px;
}
@media only screen and (max-width: 991px) {
  .category-tag {
    padding: 2rem 1.5rem 0.75rem 1.5rem;
  }
}

/* ---------- Story of Sunday (reuses breakdown--wrap markup as-is) ---------- */
.story-wrap {
  background: #F3F1E9;
  padding: 4rem 0;
}
@media only screen and (max-width: 991px) {
  .story-wrap {
    padding: 2.5rem 0;
  }
}
.story-wrap .sm-heading-wrap {
  padding: 0 5rem 1.5rem 5rem;
}
@media only screen and (max-width: 991px) {
  .story-wrap .sm-heading-wrap {
    padding: 0 1.5rem 1.5rem 1.5rem;
  }
}
/* .sm-heading's raw default (5rem) is never actually used bare anywhere
   else on the site — Pillars, Portfolio, Food & Beverage/Events/etc. and
   Collection all override it to 2.25rem. Match that, not the default. */
.story-wrap .sm-heading {
  font-size: 2.25rem;
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  .story-wrap .sm-heading {
    font-size: 1.75rem;
  }
}
/* Cards sit inset from the page edge like every other section, white and
   shadowed so they read as cards on the section's cream background — but
   flush against each other, no gap showing the beige background through. */
.story-wrap .breakdown--wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 5rem;
}
@media only screen and (max-width: 991px) {
  .story-wrap .breakdown--wrap {
    padding: 0 1.5rem;
    gap: 0;
  }
}
.story-wrap .elem-wrap {
  height: 38rem;
  background-color: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
/* Flush against each other (gap:0 above) — round only the outer corners,
   so the shared seam is a clean straight line, not two rounded corners
   meeting in a notch that'd show the beige background through. */
.story-wrap .elem-wrap:first-child {
  border-radius: 0;
}
.story-wrap .elem-wrap:last-child {
  border-radius: 0;
}
@media only screen and (max-width: 991px) {
  .story-wrap .elem-wrap {
    height: auto;
  }
  .story-wrap .elem-wrap:first-child {
    border-radius: 0;
  }
  .story-wrap .elem-wrap:last-child {
    border-radius: 0;
  }
}
/* .elem-wrap now has an explicit height (not min-height), so _home.scss's
   .image{height:100%} resolves normally — every card crops to the exact
   same 38rem box regardless of each photo's own aspect ratio. */
.story-wrap .elem-wrap .image {
  height: 100%;
}
/* Brand-story imagery reads in monochrome at rest and resolves to full
   color on hover — color as a deliberate reveal on the sections that talk
   about the Sunday brand itself, not a default across every image on the
   page. Scoped to real pointers so touch devices (no hover) just get the
   photo in color, rather than being stuck on grayscale forever. */
@media (hover: hover) and (pointer: fine) {
  .story-wrap .elem-wrap .image img {
    filter: grayscale(1);
    transition: filter 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .story-wrap .elem-wrap:hover .image img {
    filter: grayscale(0);
  }
}
.story-wrap .elem-wrap .text {
  text-align: right;
}
.story-wrap .elem-wrap.alternateFlex .text {
  text-align: left;
}
/* Card heading matches the same size used for section headings elsewhere
   on the page (Pillars, Portfolio, Leadership, Collection) — 2.25rem/1.75rem. */
.story-wrap .elem-wrap .text .head {
  font-size: 2.25rem;
  line-height: 1.2;
}
@media only screen and (max-width: 991px) {
  .story-wrap .elem-wrap .text .head {
    font-size: 1.75rem;
    line-height: 1.25;
  }
}
/* .sub's own width:70%/margin:0 auto (from _home.scss) centers a narrow
   column and floats it away from the heading above it. Let it use the
   text column's full width instead, and pin it to the same edge as the
   heading so both read as one aligned block. */
.story-wrap .elem-wrap .text .sub {
  width: 100%;
  margin: 0;
}

/* ---------- Our Properties: heading block gets the same 32px-top /
   24px-to-content rhythm as every other section (overrides main.css's
   5rem/0 top/bottom, left/right untouched) ---------- */
.state__slider__heading {
  padding-top: 64px;
  padding-bottom: 24px;
}
@media only screen and (max-width: 767px) {
  .state__slider__heading {
    padding-top: 40px;
  }
}

/* Tabs sat too far from the "Our Properties" heading above them (main.scss's
   48px is meant as breathing room on both sides of a lone tab bar, not as
   the gap under a heading that already has its own 24px padding-bottom) */
.property-tabs {
  margin-top: 24px;
  /* Base rule's 48px margin-bottom double-dipped with this heading's own
     24px padding-bottom below — tabs sat ~80px from the cards, way more
     than the 24px gap everything else above the tabs uses. */
  margin-bottom: 0;
}
/* All 5 tabs never fit in one row below ~1100px, but main.scss only turns on
   horizontal scrolling at <=767px — between that and 991px (where the arrows
   below also disappear) they had nowhere to go but wrap onto a second messy
   line. Scroll instead of wrap at every width narrower than desktop. */
@media only screen and (max-width: 991px) {
  .property-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .property-tabs::-webkit-scrollbar {
    display: none;
  }
}
/* Buttons are flex items; a flex item's default min-width is its content
   size ONLY while it has default (visible) overflow. The ripple effect
   (js/sunday-merge.js) permanently adds a class that sets overflow:hidden
   on whichever tab was last clicked, which drops that item's floor to 0 —
   so under the squeeze above, that one tab (and only that one) collapsed to
   a literal 0px-wide, invisible button. flex-shrink:0 removes the squeeze
   entirely: tabs keep their natural width and the bar scrolls instead. */
.property-tabs .tab-btn {
  flex-shrink: 0;
}

/* ---------- Property cards: native horizontal scroll + peek, same
   mechanism as every other carousel on the site (Food & Beverage, Rooms,
   Wellness, Design Stories) — no slick. Slick's slide-sizing machinery
   (slidesToShow or variableWidth) fought the CSS peek and left arrows
   mispositioned after paging. ---------- */
.property-card.active .cards-w {
  position: relative;
  overflow: visible;
  padding: 0 0 3.5rem 0;
  font-size: inherit;
  font-weight: normal;
}
@media only screen and (max-width: 991px) {
  .property-card.active .cards-w {
    padding: 0 0 2.5rem 0;
    margin-top: 0;
  }
}
.property-card.active .cards-ul {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* .cards-w carries no horizontal padding of its own (above) — the track
     owns its own edge-to-edge bleed instead, so the scrollable peek isn't
     boxed in by the section gutter. The padding keeps the first/last card
     visually aligned where the old inset used to sit. */
  padding: 0.5rem 5rem 1.25rem 5rem;
  /* scroll-snap-align:start ignores plain padding for its snap area —
     without this the forced initial snap lands at scrollLeft:5rem,
     cancelling the padding and shoving card 1 to the true edge. */
  scroll-padding-left: 5rem;
}
@media only screen and (max-width: 991px) {
  .property-card.active .cards-ul {
    padding: 0.5rem 1.5rem 1.25rem 1.5rem;
    scroll-padding-left: 1.5rem;
  }
}
.property-card.active .cards-ul::-webkit-scrollbar {
  display: none;
}
.property-card.active .cards-ul .cards {
  /* Fixed width, not a percentage of the row — so the last card always
     peeks at the edge instead of a whole-number-of-cards row cutting
     flush with the container. */
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 78vw;
  background: #FFFFFF;
  border: #E2E2E2 solid 1px;
  border-radius: 0;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
@media only screen and (min-width: 564px) {
  .property-card.active .cards-ul .cards {
    width: 19rem;
  }
}
.property-card.active .cards-ul .cards:hover {
  border-color: #222222;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.09);
  transform: translateY(-4px);
}

/* Media with the region set over the image, so the body stays a clean two-line block */
.property-card.active .cards-ul .cards .image {
  position: relative;
  height: 13rem;
  border-radius: 0;
  overflow: hidden;
}
.property-card.active .cards-ul .cards .image img {
  /* _home.scss ships these grayscale by default (filter: grayscale(100%))
     — same color-on-hover reveal as .wf-media/.wp-media elsewhere on the
     site, just never wired up for this card type. */
  transition: transform 0.45s ease, filter 0.5s ease;
  border-radius: 0;
}
.property-card.active .cards-ul .cards:hover .image img {
  transform: scale(1.04);
}
.property-card.active .cards-ul .cards .location {
  margin: 0 0 0.5rem 0;
  order: -1;
}
.property-card.active .cards-ul .cards .location .text-2 {
  font-size: 0.65rem;
  font-weight: bold;
  color: #6F6F6F;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.property-card.active .cards-ul .cards .card-body {
  position: relative;
  height: auto;
  overflow: visible;
  padding: 1.25rem 1.25rem 1.35rem 1.25rem;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.property-card.active .cards-ul .cards .name-w {
  /* Keep the site's original 2-line clamp — some property names are very long,
     and a flex override here silently disabled it. */
  min-height: 2.7rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1.1rem;
  order: 0;
}
.property-card.active .cards-ul .cards .name-w h6 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: #222222;
}
/* The site's dotted divider reads as a row of dashes at this card size */
.property-card.active .cards-ul .cards .divider-c {
  display: none;
}
.property-card.active .cards-ul .cards .hotel-link .top {
  align-items: center;
}
.property-card.active .cards-ul .cards .hotel-link .brand img {
  width: 2.75rem !important;
  opacity: 0.55;
}
.property-card.active .cards-ul .cards .hotel-link .right {
  font-size: 0.8rem;
  font-weight: 600;
}
/* _home.scss's base .right a is #006DDB (blue) with a trailing arrow icon —
   "View property" reads as black text, no icon, per request. */
/* Matches _home.scss's full selector chain (same specificity, later in
   source) — a shorter selector here loses to that rule's #006DDB blue. */
.property-card.active .cards-ul .cards .card-body .hotel-link .inner-w .top .right a {
  color: #222222;
}

.cards-arrow {
  position: absolute;
  /* Center on the full card (~22.5rem tall), not just the image. */
  top: 11.75rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0;
  border: #E2E2E2 solid 1px;
  background: #FFFFFF;
  color: #222222;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  z-index: 5;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.cards-arrow:hover {
  background: #222222;
  border-color: #222222;
  color: #FFFFFF;
}
.cards-arrow--prev {
  /* Centered on the first card's left edge — cards-w's padding is 5rem,
     so 5rem minus half the button's own width (1.5rem) lands the button
     right on that boundary, half over the gutter, half over the card. */
  left: 3.5rem;
}
.cards-arrow--next {
  right: 3.5rem;
}
@media only screen and (max-width: 991px) {
  .cards-arrow {
    display: none;
  }
}

/* ---------- Timeline: full-bleed photo per year, year list switches it ---------- */
.timeline-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: clamp(28rem, 47vw, 42rem);
  background: #F3F1E9;
  /* No margin: margin has no background of its own, so it exposed a gap
     above and below this section — margin was removed for exactly that
     reason. Flush against Properties above and Pillars below, both of
     which are already the same beige. */
  margin: 0;
}
.property-card.active {
  padding-bottom: 64px;
}
@media only screen and (max-width: 991px) {
  .timeline-wrap {
    height: auto;
    display: flex;
    flex-direction: column;
  }
}

/* Absolutely-positioned children measure their insets against the padding
   box, which ignores a parent's own padding — without this wrapper the photo,
   scrim and text all bled to the true screen edge instead of sitting inside
   the same margin every other section uses. */
.tl-frame {
  position: absolute;
  inset: 0 5rem;
}
@media only screen and (max-width: 991px) {
  .tl-frame {
    position: static;
    inset: auto;
    /* .tl-head/.tl-years/.tl-caption drop out of the photo overlay below
       991px and flow as plain white-on-dark text under the photo strip —
       give that flow its own dark backing now that the section itself is
       white, or the text disappears against it. */
    background: #222222;
  }
}

.tl-photos {
  position: absolute;
  inset: 0;
}
.tl-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.tl-photo.is-active {
  opacity: 1;
}
/* Same brand-story reveal as Story of Sunday and the Sunday code: the
   active year's photo sits in monochrome until the banner is hovered,
   then resolves to full color. Filter transitions independently of the
   existing opacity crossfade above, so year-switching still works
   underneath it. Real pointers only; touch devices get the photo in color. */
@media (hover: hover) and (pointer: fine) {
  .tl-photo {
    filter: grayscale(1);
    transition: opacity 0.6s ease, filter 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .timeline-wrap:hover .tl-photo {
    filter: grayscale(0);
  }
}
@media only screen and (max-width: 991px) {
  .tl-photos {
    position: relative;
    height: 20rem;
  }
}

.tl-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.7) 100%);
}
@media only screen and (max-width: 991px) {
  .tl-scrim {
    position: absolute;
    inset: 0;
  }
  .tl-photos ~ .tl-scrim {
    height: 20rem;
  }
}

.tl-side-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(20%, 16rem);
  background: linear-gradient(to left, rgba(20, 20, 20, 0.55) 0%, rgba(20, 20, 20, 0.32) 40%, rgba(20, 20, 20, 0) 100%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, #000 40%, transparent 100%);
}
@media only screen and (max-width: 991px) {
  .tl-side-panel {
    display: none;
  }
}

.tl-head {
  position: absolute;
  top: 2.5rem;
  right: 2.5rem;
  z-index: 3;
  text-align: right;
}
.tl-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.5rem;
}
.tl-heading {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .tl-head {
    top: 1.5rem;
    right: 1.5rem;
  }
  .tl-heading {
    font-size: 1.5rem;
  }
}

.tl-years {
  position: absolute;
  top: 8rem;
  right: 2.5rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.tl-year {
  appearance: none;
  border: rgba(255, 255, 255, 0.4) solid 1px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.6rem 1.1rem;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tl-year:hover {
  color: #FFFFFF;
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
}
.tl-year.is-active {
  color: #222222;
  background: #F3F1E9;
  border-color: #F3F1E9;
}
.tl-year.is-active:hover {
  color: #222222;
  background: #F3F1E9;
}
.tl-year:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}
@media only screen and (max-width: 991px) {
  .tl-years {
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 1.5rem 1.5rem 0 1.5rem;
    overflow-x: auto;
  }
  .tl-year {
    font-size: 0.8rem;
    padding: 0.55rem 1rem;
    flex: none;
  }
}

.tl-caption {
  position: absolute;
  left: 2.5rem;
  bottom: 3rem;
  z-index: 3;
  max-width: 34rem;
  min-height: 8rem;
}
.tl-caption-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.tl-caption-line.is-active {
  position: relative;
  opacity: 1;
}
.tl-caption-title {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
}
.tl-caption-body {
  margin: 0.5rem 0 0 0;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
@media only screen and (max-width: 991px) {
  .tl-caption {
    position: static;
    max-width: none;
    padding: 1.5rem 1.5rem 2.5rem 1.5rem;
    min-height: 0;
  }
  .tl-caption-line {
    position: static;
    display: none;
  }
  .tl-caption-line.is-active {
    display: block;
  }
  .tl-caption-title {
    font-size: 1.5rem;
  }
  .tl-caption-body {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .tl-caption-title {
    font-size: 1.25rem;
  }
  .tl-caption-body {
    font-size: 0.9375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-photo,
  .tl-year,
  .tl-caption-line {
    transition: none;
  }
}

/* ---------- Weddings & Events: editorial feature + pair, no stacked banners ---------- */
.weddings-wrap {
  width: 100%;
  background: #F3F1E9;
  padding: 4rem 5rem;
}
@media only screen and (max-width: 991px) {
  .weddings-wrap {
    padding: 2.5rem 1.5rem;
  }
}
.weddings-intro {
  max-width: 46rem;
  margin-bottom: 1.5rem;
}
.weddings-title {
  font-size: 3.25rem;
  font-weight: bold;
  line-height: 1.05;
  color: #222222;
  margin-bottom: 1.25rem;
}
@media only screen and (max-width: 991px) {
  .weddings-title {
    font-size: 2.25rem;
  }
}
.weddings-lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: #6F6F6F;
  margin: 0;
}
@media only screen and (max-width: 991px) {
  .weddings-lede {
    font-size: 1rem;
  }
}

.wf-index {
  display: block;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.18em;
  color: #6F6F6F;
  margin-bottom: 1rem;
}
.wf-meta {
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6F6F6F;
  border-top: #C4C4C4 solid 1px;
  padding-top: 1rem;
  margin-top: auto;
}

/* Lead feature: large image beside a text panel */
.weddings-feature {
  display: flex;
  align-items: stretch;
  background: #FFFFFF;
  border: #E2E2E2 solid 1px;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 1.75rem;
}
@media only screen and (max-width: 991px) {
  .weddings-feature {
    flex-direction: column;
  }
}
.wf-media {
  width: 58%;
  min-height: 26rem;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 991px) {
  .wf-media {
    width: 100%;
    min-height: 15rem;
  }
}
.wf-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.5s ease, transform 0.6s ease;
}
.weddings-feature:hover .wf-media img {
  filter: grayscale(0%);
  transform: scale(1.03);
}
.wf-body {
  width: 42%;
  display: flex;
  flex-direction: column;
  padding: 3rem;
}
@media only screen and (max-width: 991px) {
  .wf-body {
    width: 100%;
    padding: 2rem 1.5rem;
  }
}
.wf-title {
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 1.1;
  color: #222222;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 991px) {
  .wf-title {
    font-size: 1.75rem;
  }
}
.wf-copy {
  font-size: 1rem;
  line-height: 1.65;
  color: #6F6F6F;
  margin: 0 0 2rem 0;
}

/* Supporting pair: two equal cards side by side */
.weddings-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}
@media only screen and (max-width: 767px) {
  .weddings-pair {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
.wp-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: #E2E2E2 solid 1px;
  border-radius: 0;
  overflow: hidden;
}
.wp-media {
  height: 15rem;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 991px) {
  .wp-media {
    height: 12rem;
  }
}
.wp-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.5s ease, transform 0.6s ease;
}
.wp-card:hover .wp-media img {
  filter: grayscale(0%);
  transform: scale(1.03);
}
.wp-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 2rem;
}
@media only screen and (max-width: 991px) {
  .wp-body {
    padding: 1.5rem;
  }
}
.wp-title {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.15;
  color: #222222;
  margin-bottom: 0.75rem;
}
.wp-copy {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #6F6F6F;
  margin: 0 0 2rem 0;
}

/* ---------- Testimonial ---------- */
.testimonial-wrap {
  background: #222222;
  color: #F3F1E9;
  padding: 4rem 5rem;
  text-align: center;
}
@media only screen and (max-width: 991px) {
  .testimonial-wrap {
    padding: 4rem 2rem;
  }
}
.testimonial-wrap .quote-mark {
  font-size: 4rem;
  font-weight: bold;
  line-height: 1;
  color: #F3F1E9;
  margin-bottom: 1rem;
}
.testimonial-wrap .quote {
  font-size: 1.75rem;
  font-weight: bold;
  line-height: 1.4;
  max-width: 66rem;
  margin: 0 auto 2rem auto;
}
@media only screen and (max-width: 991px) {
  .testimonial-wrap .quote {
    font-size: 1.4rem;
  }
}
.testimonial-wrap .attribution {
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.testimonial-wrap .detail {
  font-size: 1rem;
  color: #C4C4C4;
  margin-top: 0.35rem;
}
.testimonial-wrap .testimonial-slider {
  margin: 0;
  padding: 0;
}
.testimonial-wrap .testimonial-slider .slick-slide li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 12rem;
}
@media only screen and (max-width: 991px) {
  .testimonial-wrap .testimonial-slider .slick-slide li {
    min-height: 10rem;
  }
}
.testimonial-carousel {
  position: relative;
}
@media only screen and (min-width: 768px) {
  /* reserves room so the quote text wraps clear of the arrows instead of
     running underneath them */
  .testimonial-carousel {
    padding: 0 4.5rem;
  }
}
.testimonial-wrap .exp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.testimonial-wrap .exp-arrow--prev {
  left: 0;
}
.testimonial-wrap .exp-arrow--next {
  right: 0;
}
@media only screen and (max-width: 767px) {
  .testimonial-wrap .exp-arrow {
    display: none;
  }
}

/* ---------- Small-screen heading guard ----------
   The site's original .resetalter banner headline wraps to 3 lines on the
   narrowest phones. Nudged down so every heading stays within 2 lines. */
@media only screen and (max-width: 479px) {
  .resetalter .head {
    /* It is absolutely positioned with no width, so it shrink-wraps to a
       narrow column and wraps to 3 lines. Give it the full width instead. */
    font-size: 2.25rem;
    width: 92%;
    left: 4%;
    transform: none;
  }
}

@media only screen and (max-width: 360px) {
  .breakdown--wrap .elem-wrap .text .head {
    font-size: 2.25rem;
  }
  .weddings-title {
    font-size: 1.85rem;
  }
}

/* ---------- Portfolio: every property, one map ---------- */
.portfolio-wrap {
  background: #F3F1E9;
  padding: 4rem 5rem;
}
@media only screen and (max-width: 991px) {
  .portfolio-wrap {
    padding: 2.5rem 1.5rem;
  }
}
.portfolio-wrap .sm-heading-wrap {
  margin-bottom: 1.5rem;
}
.portfolio-wrap .sm-heading {
  font-size: 2.25rem;
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  .portfolio-wrap .sm-heading {
    font-size: 1.75rem;
  }
}
.portfolio-map {
  margin: 0;
}
.portfolio-map-plate {
  position: relative;
  background: #222222;
  padding: 1.5rem;
  overflow: hidden;
}
.portfolio-map-plate .world-map {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 460;
}
.pf-country {
  fill: #D9A94B;
  stroke: #222222;
  stroke-width: 0.5;
  cursor: pointer;
  transition: fill 0.25s ease;
}
.pf-country:hover,
.pf-country.is-active {
  fill: #7A4A12;
}
.pf-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, calc(-100% - 0.75rem));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  background: #FFFFFF;
  color: #222222;
  padding: 0.5rem 0.85rem;
  border-radius: 0;
  font-size: 0.8rem;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 5;
}
.pf-tooltip.is-visible {
  opacity: 1;
}
.pf-tooltip .pf-tooltip__count {
  font-weight: normal;
  color: #6F6F6F;
  margin-left: 0.35rem;
}
.portfolio-map-legend {
  font-size: 0.9rem;
  color: #6F6F6F;
  margin-top: 1rem;
}

/* shared row header used by every exp-* subsection: eyebrow left, controls right */
.exp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.exp-head .sm-heading-wrap {
  max-width: 60rem;
}
.exp-head .sm-heading {
  font-size: 2.25rem;
  margin-bottom: 0;
}
.exp-head .sm-sub {
  max-width: 38rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) {
  .exp-head .sm-heading {
    white-space: nowrap;
  }
}
@media only screen and (max-width: 767px) {
  .exp-head .sm-heading {
    font-size: 1.75rem;
  }
}

/* ---------- Food & Beverage: horizontal scroll-snap track, portrait cards ---------- */
.exp-foodbev {
  background: #F3F1E9;
  padding: 4rem 5rem;
}
@media only screen and (max-width: 991px) {
  .exp-foodbev {
    padding: 2.5rem 1.5rem;
  }
}
.exp-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0;
  border: #C4C4C4 solid 1px;
  background: #FFFFFF;
  color: #222222;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.exp-arrow svg {
  /* icon's own width/height must keep the viewBox's exact aspect ratio
     (6:10) or the chevron stretches unevenly and reads as "distorted" */
  width: 0.5rem;
  height: 0.833rem;
}
.exp-arrow:hover {
  background: #222222;
  border-color: #222222;
  color: #FFFFFF;
}
.exp-foodbev-track {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0 5rem 0.5rem 5rem;
  /* scroll-snap-align:start ignores plain padding for its snap area —
     without this the forced initial snap lands at scrollLeft:5rem,
     cancelling the padding and shoving card 1 to the true edge. */
  scroll-padding-left: 5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
@media only screen and (max-width: 991px) {
  .exp-foodbev-track {
    padding: 0 1.5rem 0.5rem 1.5rem;
    scroll-padding-left: 1.5rem;
  }
}
.exp-foodbev-track::-webkit-scrollbar {
  display: none;
}
.exp-foodbev-card {
  position: relative;
  flex: 0 0 auto;
  width: 82vw;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #F3F1E9;
  scroll-snap-align: start;
}
@media only screen and (min-width: 564px) {
  .exp-foodbev-card {
    width: 28rem;
  }
}
.exp-foodbev-card__img {
  position: absolute;
  inset: 0;
}
.exp-foodbev-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}
.exp-foodbev-card:hover .exp-foodbev-card__img img {
  transform: scale(1.06);
}
.exp-foodbev-card__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  color: #FFFFFF;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 45%, transparent 80%);
}
/* Badge sits on the image, same brand black/white treatment as
   .event-card__chip — keeps the panel down to a plain heading + subtext
   instead of a third line of hierarchy. */
.exp-foodbev-card__tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #222222;
  padding: 0.35rem 0.8rem;
  border-radius: 0;
}
.exp-title {
  font-size: 1.4rem;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}
.exp-property-inline {
  display: block;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.4rem;
}
/* Heading + property (hotel name) always show; only the description
   reveals on hover — image-forward without hiding the identifying text. */
.exp-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0.75rem 0 0 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease;
}
.exp-foodbev-card:hover .exp-desc,
.exp-foodbev-card:focus-within .exp-desc {
  max-height: 8rem;
  opacity: 1;
}


/* ---------- Shared experience card: same design across Wellness, Signature Rooms,
   Design Stories and Local Experiences. Content differs, template does not. ---------- */
.exp-card-section {
  background: #F3F1E9;
  padding: 4rem 5rem;
}
@media only screen and (max-width: 991px) {
  .exp-card-section {
    padding: 2.5rem 1.5rem;
  }
}
.exp-card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
@media only screen and (max-width: 991px) {
  .exp-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}
@media only screen and (max-width: 563px) {
  .exp-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* sections with more than 4 cards scroll as a carousel instead of wrapping.
   .exp-carousel un-does the section's own 5rem/1.5rem side padding (negative
   margin, not the track's) so the cards run flush to the viewport edge —
   the arrows sit as an absolute overlay on top of the row instead of up in
   the header, same idea as .cards-w/.cards-arrow on the property cards. */
.exp-carousel {
  position: relative;
  margin: 0 -5rem;
}
@media only screen and (max-width: 991px) {
  .exp-carousel {
    margin: 0 -1.5rem;
  }
}
.exp-carousel .exp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.exp-carousel .exp-arrow--prev {
  /* Matches .cards-arrow--prev's inset on the property cards above —
     same 3.5rem from the true edge, not this container's own edge. */
  left: 3.5rem;
}
.exp-carousel .exp-arrow--next {
  right: 3.5rem;
}
@media only screen and (max-width: 767px) {
  .exp-carousel .exp-arrow {
    display: none;
  }
}
.exp-card-grid--carousel {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 2rem;
  padding: 0 5rem 0.5rem 5rem;
  /* scroll-snap-align:start ignores plain padding for its snap area —
     without this the forced initial snap lands at scrollLeft:5rem,
     cancelling the padding and shoving card 1 to the true edge. */
  scroll-padding-left: 5rem;
}
@media only screen and (max-width: 991px) {
  .exp-card-grid--carousel {
    padding: 0 1.5rem 0.5rem 1.5rem;
    scroll-padding-left: 1.5rem;
  }
}
.exp-card-grid--carousel::-webkit-scrollbar {
  display: none;
}
@media only screen and (max-width: 991px) {
  .exp-card-grid--carousel {
    gap: 1.5rem;
  }
}
.exp-card-grid--carousel .exp-card,
.exp-card-grid--carousel .wed-card {
  flex: 0 0 auto;
  width: 76vw;
  scroll-snap-align: start;
}
@media only screen and (min-width: 564px) {
  /* Sized to a fraction, not a whole card count (2.5/3.5, not 3/4) — the
     next card peeks in at the edge instead of cutting flush with the
     container, so there's a visible hint that the row scrolls. */
  .exp-card-grid--carousel .exp-card,
  .exp-card-grid--carousel .wed-card {
    width: calc((100% - 2 * 1.5rem) / 2.5);
  }
}
@media only screen and (min-width: 992px) {
  .exp-card-grid--carousel .exp-card,
  .exp-card-grid--carousel .wed-card {
    width: calc((100% - 3 * 2rem) / 3.5);
  }
}
/* ---------- Wellness / Signature Rooms / Design Stories / Local Experiences:
   same text-on-image card + interaction as .wed-card — tag and title/property
   always visible, only the description reveals on hover. ---------- */
.exp-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #222222;
}
.exp-card__media {
  position: absolute;
  inset: 0;
}
.exp-card__media img:not(.exp-thumb img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.exp-card:hover .exp-card__media img:not(.exp-thumb img) {
  transform: scale(1.07);
}
/* Design Stories only (not Wellness/Signature Rooms/Local Experiences,
   which share this same card) — same monochrome-at-rest, color-on-hover
   reveal as Story of Sunday / Pillars of Sunday / Events. */
@media (hover: hover) and (pointer: fine) {
  #design-stories .exp-card__media img:not(.exp-thumb img) {
    filter: grayscale(1);
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), filter 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
  #design-stories .exp-card:hover .exp-card__media img:not(.exp-thumb img) {
    filter: grayscale(0);
  }
}
/* Signature Rooms' photo gallery: small photo swatches, not bare dots —
   bigger cards leave enough room now. Sits in the overlay's normal flow,
   directly above the title, instead of competing with .exp-card__tag for
   the same corner (that's what caused the original collision). */
.exp-card__thumbs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.exp-thumb {
  width: 2.75rem;
  height: 2.1rem;
  padding: 0;
  border: none;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: opacity 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.exp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.exp-thumb:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.exp-thumb.is-active {
  opacity: 1;
  box-shadow: 0 0 0 2px #FFFFFF;
}
.exp-card__main {
  opacity: 1;
  transition: opacity 0.35s ease;
}
.exp-card__main.is-swapping {
  opacity: 0;
}
.exp-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  /* Tag + title/property is 2 short lines at rest (desc only adds one more
     on hover) — doesn't need the shadow reaching halfway up the photo. */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 28%, transparent 50%);
}
/* Design Stories' photos (murals, glass, bright sky) run lighter than the
   other three exp-card sections — the shared overlay above wasn't reaching
   far enough up the card for the title to stay readable. Same gradient
   language as .wed-card/.collection-card (solid at the bottom, fading out
   by the top), just scoped here rather than raised for every exp-card. */
#design-stories .exp-card__overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 35%, transparent 65%);
}
.exp-card__tag {
  align-self: flex-start;
  /* The carousel's own card-width formula narrows sharply right at its
     564px/992px breakpoints before widening again — auto-width alone still
     wraps "The Duplex Difference" onto two lines in that band. These are
     one-line pill labels; force it. */
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #222222;
  border-radius: 0;
  padding: 0.3rem 0.8rem;
  margin-bottom: auto;
}
/* Title + property always show; only the description reveals on hover —
   same rule as .wed-card__content. */
.exp-card__content {
  display: contents;
}
.exp-card__title {
  font-size: 1.15rem;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.25;
  color: #FFFFFF;
  margin: 0 0 0.4rem 0;
}
.exp-card__property-inline {
  display: block;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.6rem;
}
.exp-card__desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease;
}
.exp-card:hover .exp-card__desc,
.exp-card:focus-within .exp-card__desc {
  max-height: 8rem;
  opacity: 1;
}
@media only screen and (max-width: 563px) {
  .exp-card {
    aspect-ratio: 4 / 5;
  }
}

/* ---------- Weddings & Events: text-on-image card, same overlay language as the
   Collections below, tag pinned top-left, description clamped to 2 lines until hover ---------- */
.wed-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #222222;
}
.wed-card__media {
  position: absolute;
  inset: 0;
}
.wed-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.wed-card:hover .wed-card__media img {
  transform: scale(1.07);
}
.wed-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  /* Lighter than the collection-card language below — the wedding photos
     (bright lawns, chandeliers, white venues) were getting buried under
     the same reach/strength that dark Collection shots need. Same 3-stop
     to-top shape, just backed off. */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 60%);
}
.wed-card__tag {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #222222;
  border-radius: 0;
  padding: 0.3rem 0.8rem;
  margin-bottom: auto;
}
/* Heading + property (hotel name) always show; only the description
   reveals on hover — image-forward without hiding the identifying text. */
.wed-card__content {
  display: contents;
}
.wed-card__title {
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 1.25;
  color: #FFFFFF;
  text-transform: uppercase;
  margin: 0 0 0.4rem 0;
}
.wed-card__property {
  display: block;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.6rem;
}
.wed-card__desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease;
}
.wed-card:hover .wed-card__desc,
.wed-card:focus-within .wed-card__desc {
  max-height: 8rem;
  opacity: 1;
}
@media only screen and (max-width: 563px) {
  .wed-card {
    aspect-ratio: 4 / 5;
  }
}

/* ---------- Collections: premium destination browsing, image-forward,
   no description copy — Waterfront & Countryside / City / Transit share this. ---------- */
.collection-wrap {
  background: #F3F1E9;
  padding: 2rem 5rem;
}
@media only screen and (max-width: 991px) {
  .collection-wrap {
    padding: 2rem 1.5rem;
  }
}
.collection-wrap .exp-head--padded {
  padding-left: 0;
  padding-right: 0;
  align-items: flex-end;
}
.collection-wrap .sm-heading-wrap {
  max-width: 60rem;
}
.collection-wrap .sm-heading {
  font-size: 2.25rem;
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) {
  .collection-wrap .sm-heading {
    white-space: nowrap;
  }
}
@media only screen and (max-width: 767px) {
  .collection-wrap .sm-heading {
    font-size: 1.75rem;
  }
}
.collection-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
@media only screen and (max-width: 991px) {
  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 563px) {
  .collection-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.collection-grid--carousel {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}
.collection-grid--carousel::-webkit-scrollbar {
  display: none;
}
.collection-grid--carousel .collection-card {
  flex: 0 0 auto;
  width: 78vw;
  scroll-snap-align: start;
}
@media only screen and (min-width: 564px) {
  /* Fractional count (2.5/3.5, not 3/4) so the next card peeks at the
     edge instead of cutting flush with the container. */
  .collection-grid--carousel .collection-card {
    width: calc((100% - 2 * 1.5rem) / 2.5);
  }
}
@media only screen and (min-width: 992px) {
  .collection-grid--carousel .collection-card {
    width: calc((100% - 3 * 1.5rem) / 3.5);
  }
}
.collection-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #222222;
}
.collection-card__media {
  position: absolute;
  inset: 0;
}
.collection-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.collection-card:hover .collection-card__media img {
  transform: scale(1.07);
}
.collection-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  background: linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 75%);
}
.collection-card__location {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  border: rgba(255, 255, 255, 0.5) solid 1px;
  padding: 0.3rem 0.7rem;
  margin-bottom: auto;
}
.collection-card__title {
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 1.25;
  color: #FFFFFF;
  margin: 0 0 0.5rem 0;
}
.collection-card__tag {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- Story of Sunday: content paragraph matches the site's standard
   body style (same as .sm-sub, used site-wide) — not a one-off size/weight. ---------- */
#story-of-sunday .elem-wrap .sub {
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.6;
  color: #222222;
}

/* ---------- reusable centered CTA pill (dark bg, light bg on dark sections) ---------- */
.box--btn--light a {
  color: #222222;
  background: #F3F1E9;
  border-color: #F3F1E9;
}
.box--btn--light a:hover {
  color: #F3F1E9;
  background: #222222;
  border-color: #F3F1E9;
}

/* ---------- Events: bento grid, text-on-image with bottom blur gradient, colourful accent chips ---------- */
.events-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 15rem;
  gap: 1.5rem;
}
.events-grid .event-card--feature {
  grid-column: span 2;
  grid-row: span 2;
}
@media only screen and (max-width: 991px) {
  .events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 12rem;
    gap: 1.25rem;
  }
}
@media only screen and (max-width: 563px) {
  .events-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 16rem;
  }
  .events-grid .event-card--feature {
    grid-column: span 1;
    grid-row: span 1;
    height: 20rem;
  }
}
.event-card {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: #F3F1E9;
}
.event-card__media {
  position: absolute;
  inset: 0;
}
.event-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}
.event-card:hover .event-card__media img {
  transform: scale(1.06);
}
/* Same monochrome-at-rest, color-on-hover treatment as Story of Sunday /
   Pillars of Sunday. Real pointers only; touch devices get the photo in color. */
@media (hover: hover) and (pointer: fine) {
  .event-card__media img {
    filter: grayscale(1);
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), filter 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .event-card:hover .event-card__media img {
    filter: grayscale(0);
  }
}
.event-card__chip {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #222222;
  padding: 0.35rem 0.8rem;
  border-radius: 0;
}
.event-card__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 2.5rem 1.25rem 1.25rem 1.25rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  mask-image: linear-gradient(to top, #000 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 100%);
}
.event-card__title {
  font-size: 1.15rem;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.25;
  color: #FFFFFF;
  margin: 0;
}
.event-card--feature .event-card__title {
  font-size: 1.6rem;
}

/* ---------- Pet-friendly: 2x2 photo grid + content panel, kept compact ----------
   Beige outer band (matches .story-wrap's $light) sets it apart from the
   white sections on either side; the content itself sits in a white card
   with the same shadow as the Story of Sunday cards, inset from the band's
   edges instead of sitting flush on the beige. */
.pet-wrap {
  padding: 4rem 5rem;
  background: #F3F1E9;
}
@media only screen and (max-width: 991px) {
  .pet-wrap {
    padding: 2.5rem 1.5rem;
  }
}
.pet-wrap .sm-heading {
  font-size: 2.75rem;
}
@media only screen and (max-width: 767px) {
  .pet-wrap .sm-heading {
    font-size: 2rem;
  }
}

.pet-wrap__card {
  display: flex;
  min-height: 36rem;
  background-color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
@media only screen and (max-width: 991px) {
  .pet-wrap__card {
    flex-direction: column;
    min-height: 0;
  }
}

.pet-wrap__media {
  width: 50%;
  display: block;
  overflow: hidden;
}
.pet-wrap__media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  object-fit: cover;
  border-radius: 0;
}
@media only screen and (max-width: 991px) {
  .pet-wrap__media {
    width: 100%;
    height: 22rem;
  }
}
@media only screen and (max-width: 563px) {
  .pet-wrap__media {
    height: 18rem;
  }
}

.pet-wrap__panel {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem;
}
.pet-wrap__panel .sm-sub {
  max-width: 28rem;
  margin-bottom: 2rem;
}
.pet-wrap__panel .box--btn {
  justify-content: flex-start;
  align-self: flex-start;
}
@media only screen and (max-width: 991px) {
  .pet-wrap__panel {
    width: 100%;
    padding: 2rem 1.5rem 2.5rem;
  }
}

/* ---------- Instagram: The Sunday Feed ---------- */
.feed-wrap {
  background: #F3F1E9;
  padding: 4rem 5rem;
}
@media only screen and (max-width: 991px) {
  .feed-wrap {
    padding: 2.5rem 1.5rem;
  }
}
.feed-wrap .exp-head {
  /* Top-aligned to the heading's own line, not the block center or the
     sub line below it. */
  align-items: flex-start;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 767px) {
  .feed-wrap .exp-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .feed-wrap__cta {
    margin-top: 1.5rem;
  }
}
/* Reels-sized carousel, not a static grid — narrow vertical (9:16) tiles,
   scroll-snapped, driven by the same .exp-arrow prev/next pair as
   Food & Beverage/Experience cards (see JS's shared carousel-arrow wiring). */
.feed-grid {
  list-style: none;
  padding: 0 5rem 0.5rem 5rem;
  /* scroll-snap-align:start snaps to the SNAP AREA, which plain padding
     doesn't define — without this, the browser's forced initial snap lands
     on scrollLeft:5rem (the only position where card 1's edge lines up
     with the scrollport's raw edge), silently cancelling the padding and
     shoving card 1 to the true edge instead of the margin. */
  scroll-padding-left: 5rem;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 1.25rem;
}
@media only screen and (max-width: 991px) {
  .feed-grid {
    padding: 0 1.5rem 0.5rem 1.5rem;
    scroll-padding-left: 1.5rem;
  }
}
.feed-grid::-webkit-scrollbar {
  display: none;
}
.feed-grid li {
  position: relative;
  flex: 0 0 auto;
  width: 58vw;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 0;
  background: #F3F1E9;
  scroll-snap-align: start;
}
@media only screen and (min-width: 564px) {
  .feed-grid li {
    width: 16rem;
  }
}
@media only screen and (min-width: 992px) {
  .feed-grid li {
    width: 19rem;
  }
}
.feed-grid li .reel-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.feed-grid li:hover .reel-card__video {
  transform: scale(1.06);
}
@media (hover: hover) and (pointer: fine) {
  .feed-grid li .reel-card__video {
    filter: grayscale(1);
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), filter 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .feed-grid li:hover .reel-card__video {
    filter: grayscale(0);
  }
}

/* Reel card overlay chrome: top-right controls (mute/play/expand), bottom-left
   caption panel (heading + linked IG handle) — same gradient-panel language as
   .exp-foodbev-card__panel elsewhere in this file. */
.reel-card__controls {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  display: flex;
  gap: 0.4rem;
}
@media (hover: hover) and (pointer: fine) {
  .reel-card__controls {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .feed-grid li:hover .reel-card__controls,
  .feed-grid li:focus-within .reel-card__controls {
    opacity: 1;
    pointer-events: auto;
  }
}
.reel-btn {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  border-radius: 0;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}
.reel-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}
.reel-btn svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}
.reel-btn .reel-icon-b {
  display: none;
}
.reel-btn.is-alt .reel-icon-a {
  display: none;
}
.reel-btn.is-alt .reel-icon-b {
  display: block;
}
.reel-card__info {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  color: #FFFFFF;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 40%, transparent 65%);
  pointer-events: none;
}
.reel-card__title {
  font-size: 0.85rem;
  font-weight: bold;
  line-height: 1.3;
  margin: 0 0 0.3rem;
}
.reel-card__handle {
  align-self: flex-start;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  pointer-events: auto;
}
.reel-card__handle:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

/* Expanded reel: fixed-position lightbox living outside .exp-carousel's
   scroll container so its own overflow-x:auto can't clip it — the carousel
   only ever holds the small inline cards. */
.reel-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.reel-lightbox.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.reel-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}
.reel-lightbox__stage {
  position: relative;
  z-index: 1;
  width: 28rem;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 100%;
  background: #000000;
}
.reel-lightbox__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000000;
}
.reel-lightbox__stage .reel-card__controls {
  top: 0.85rem;
  right: 0.85rem;
  opacity: 1;
  pointer-events: auto;
}
.reel-lightbox__stage .reel-card__info {
  padding: 1.5rem;
}
.reel-lightbox__stage .reel-card__title {
  font-size: 1.1rem;
}
.reel-lightbox__stage .reel-card__handle {
  font-size: 0.85rem;
}
body.reel-lightbox-open {
  overflow: hidden;
}

/* ---------- The Sunday Collection: Find Your Sunday ----------
   Same card language as the Reset philosophy block in Story of Sunday —
   white card floating on a beige section backdrop, soft shadow, image
   and copy split side by side. */
.find-sunday-wrap {
  padding: 4rem 5rem;
  background: #F3F1E9;
}
@media only screen and (max-width: 991px) {
  .find-sunday-wrap {
    padding: 2.5rem 1.5rem;
  }
}
.find-sunday-card {
  display: flex;
  min-height: 24rem;
  background-color: #FFFFFF;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
@media only screen and (max-width: 991px) {
  .find-sunday-card {
    flex-direction: column;
    min-height: 0;
    border-radius: 0;
  }
}
.find-sunday-wrap__media {
  width: 50%;
}
.find-sunday-wrap__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 991px) {
  .find-sunday-wrap__media {
    width: 100%;
    height: 18rem;
  }
}
.find-sunday-wrap__panel {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 4rem;
}
.find-sunday-wrap__panel .box--btn {
  justify-content: flex-start;
  align-self: flex-start;
}
@media only screen and (max-width: 991px) {
  .find-sunday-wrap__panel {
    width: 100%;
    padding: 2.5rem 1.5rem;
  }
}
.find-sunday-wrap .sm-heading {
  font-size: 2.75rem;
}
@media only screen and (max-width: 767px) {
  .find-sunday-wrap .sm-heading {
    font-size: 2rem;
  }
}
.find-sunday-wrap .sm-sub {
  max-width: 28rem;
  margin-bottom: 2rem;
}

/* ---------- The Sunday Stories: guest + partner quote grid ---------- */
.stories-wrap {
  background: #F3F1E9;
  padding: 4rem 5rem;
}
@media only screen and (max-width: 991px) {
  .stories-wrap {
    padding: 2.5rem 1.5rem;
  }
}
/* .sm-sub's default max-width:42rem wraps this specific line to 2 —
   this section's copy is short enough to stay on 1 line at full width. */
.stories-wrap .sm-sub,
.feed-wrap .sm-sub,
#events .sm-sub {
  max-width: none;
  white-space: nowrap;
}
/* #events also inherits .exp-head .sm-sub's 2-line webkit-line-clamp +
   overflow:hidden — combined with nowrap above, the clamp can't compute a
   line break and the sentence just gets hard-clipped mid-word instead of
   showing on one line. Cancel the clamp so nowrap actually applies. */
#events .sm-heading-wrap {
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
#events .sm-sub {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  font-size: 1rem;
}
@media only screen and (max-width: 767px) {
  .stories-wrap .sm-sub,
  .feed-wrap .sm-sub,
  #events .sm-sub {
    white-space: normal;
  }
}
.story-card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
@media only screen and (max-width: 991px) {
  .story-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}
@media only screen and (max-width: 563px) {
  .story-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.story-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: #E2E2E2 solid 1px;
  padding: 2rem;
  height: 22rem;
}
@media only screen and (max-width: 991px) {
  .story-card {
    height: 19rem;
  }
}
@media only screen and (max-width: 563px) {
  .story-card {
    height: auto;
    min-height: 15rem;
  }
}
.story-card__tag {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6F6F6F;
  border: #C4C4C4 solid 1px;
  padding: 0.25rem 0.6rem;
  margin-bottom: 1.25rem;
}
.story-card--partner .story-card__tag {
  color: #F3F1E9;
  background: #222222;
  border-color: #222222;
}
.story-card__quote {
  font-size: 1rem;
  line-height: 1.7;
  color: #222222;
  flex-grow: 1;
}
.story-card__attribution {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6F6F6F;
}

/* ---------- Leadership ---------- */
.leadership-wrap {
  background: #F3F1E9;
  padding: 4rem 5rem;
}
@media only screen and (max-width: 991px) {
  .leadership-wrap {
    padding: 2.5rem 1.5rem;
  }
}
.leader-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
}
@media only screen and (max-width: 767px) {
  .leader-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
}
.leader-card {
  display: flex;
  gap: 1.75rem;
  background: #FFFFFF;
  border-radius: 0;
  padding: 2.5rem;
}
@media only screen and (max-width: 563px) {
  .leader-card {
    flex-direction: column;
    gap: 1.25rem;
    padding: 2rem;
  }
}
.leader-card__photo {
  flex: 0 0 6rem;
  width: 6rem;
  height: 6rem;
  border-radius: 0;
  overflow: hidden;
  background: #E2E2E2;
}
.leader-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.leader-card__body {
  flex: 1;
  min-width: 0;
}
.leader-card__mark {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3rem;
  line-height: 1;
  color: #C4C4C4;
  margin-bottom: 0.25rem;
}
.leader-card__quote {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #222222;
  margin: 0 0 1.5rem 0;
}
.leader-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-top: #222222 solid 2px;
  padding-top: 0.9rem;
}
.leader-card__name {
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #222222;
}
.leader-card__title {
  font-size: 0.85rem;
  color: #6F6F6F;
}

/* ---------- Partner enquiry: List Your Property, the last section before
   the footer. Dark intro panel echoes the hero's text panel and hands off
   into the footer's own #222222 without a jarring beige→dark cut. ---------- */
.partner-wrap {
  background: #F3F1E9;
  padding: 4rem 5rem;
}
@media only screen and (max-width: 991px) {
  .partner-wrap {
    padding: 2.5rem 1.5rem;
  }
}
.partner-card {
  display: flex;
  min-height: 420px;
  background-color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
@media only screen and (max-width: 991px) {
  .partner-card {
    flex-direction: column;
    min-height: 0;
  }
}
.partner-card__intro {
  width: 38%;
  padding: 4rem;
  background: #222222;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.partner-card__intro .sm-heading {
  color: #F3F1E9;
  font-size: 2.25rem;
}
.partner-card__intro .sm-sub {
  color: #F3F1E9;
  opacity: 0.85;
  max-width: none;
}
@media only screen and (max-width: 991px) {
  .partner-card__intro {
    width: 100%;
    padding: 2.5rem 1.5rem;
  }
}

.partner-form {
  width: 62%;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media only screen and (max-width: 991px) {
  .partner-form {
    width: 100%;
    padding: 2.5rem 1.5rem;
  }
}

.partner-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
@media only screen and (max-width: 563px) {
  .partner-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.partner-form__field {
  margin-bottom: 1.5rem;
}

.partner-form input,
.partner-form select,
.partner-form textarea {
  width: 100%;
  padding: 1rem;
  border: #C4C4C4 solid 1px;
  border-radius: 0;
  background: #FFFFFF;
  color: #222222;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  transition: border-color 0.2s linear;
}
.partner-form textarea {
  resize: vertical;
  min-height: 6rem;
}
.partner-form input::placeholder,
.partner-form textarea::placeholder {
  color: #6F6F6F;
}
/* Native <select> has no placeholder attribute — the disabled/hidden first
   option plus :invalid stands in for one, styled to match input/textarea
   placeholder color until a real value is chosen. */
.partner-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23222222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.partner-form select:required:invalid {
  color: #6F6F6F;
}
.partner-form select option {
  color: #222222;
}

.partner-form input:hover,
.partner-form select:hover,
.partner-form textarea:hover {
  border-color: #222222;
}
.partner-form input:focus,
.partner-form select:focus,
.partner-form textarea:focus {
  outline: none;
  border-color: #222222;
}
.partner-form input:focus-visible,
.partner-form select:focus-visible,
.partner-form textarea:focus-visible {
  outline: 2px solid #222222;
  outline-offset: 2px;
}
.partner-form.was-validated input:invalid,
.partner-form.was-validated select:invalid,
.partner-form.was-validated textarea:invalid {
  border-color: #B3261E;
}

.partner-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
@media only screen and (max-width: 563px) {
  .partner-form__foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}
.partner-form__note {
  font-size: 0.875rem;
  color: #B3261E;
  margin: 0;
  min-height: 1.2em;
}
.partner-form__submit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  color: #F3F1E9;
  background: #222222;
  border: #222222 solid 1px;
  border-radius: 0;
  text-transform: uppercase;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s linear;
}
.partner-form__submit:hover {
  color: #222222;
  background-color: #F3F1E9;
}
.partner-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.partner-form__success {
  text-align: center;
  padding: 2rem 0;
}
.partner-form__success-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #222222;
  margin-bottom: 0.5rem;
}
.partner-form__success-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #222222;
  max-width: 28rem;
  margin: 0 auto 1.5rem;
}
.partner-form__reset {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: bold;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #222222;
  background: none;
  border: none;
  border-bottom: #222222 solid 1px;
  padding: 0;
  cursor: pointer;
}

/* ---------- From PRISM: brand-family logo strip, same section gutter as
   every other block on the page (Pillars, Portfolio, Collection, Partner). */
.from-prism-wrap {
  background: #F3F1E9;
  padding: 4rem 5rem;
}
@media only screen and (max-width: 991px) {
  .from-prism-wrap {
    padding: 2.5rem 1.5rem;
  }
}
.from-prism {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 61rem;
  margin: 0 auto;
  mix-blend-mode: multiply;
}
.from-prism__eyebrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.from-prism__eyebrow span {
  font-size: 0.875rem;
  font-weight: bold;
  color: #282828;
}
.from-prism__logo {
  display: block;
  height: 2.2rem;
  width: auto;
}
.from-prism__sub {
  font-size: 1rem;
  line-height: 1.5;
  color: #282828;
  text-align: center;
  margin: 0;
}
.from-prism__brands {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 2rem;
  column-gap: 3rem;
}
.from-prism__brands img {
  display: block;
  height: 1.75rem;
  width: auto;
}

/* ---------- Footer: base _footer.scss already sets padding to $space-8
   (64px), matching the site-wide 64px section rhythm — no override needed. ---------- */