/* ==========================================================================
   Home page: "The Combination"

   The argument: the right combination beats the hardest one. Contrast therapy
   is the draw and the combination is the edge, so the hero is a private room
   and the whole middle of the page is the four stacks. No single session prices
   here: they live on the pricing page, so a bundle is never sitting next to the
   components it is made of.

   Written for a 45 to 70 year old first. Dark grounds dominate, the Signal lane
   photography runs full bleed, and the mono carries every number.

   Layout only. Colour, type, spacing and motion all come from tokens.css.
   ========================================================================== */

/* The header, including its dark variant, lives entirely in base.css. */

/* ---------------------------------------------------------------- hero --- */

.dhero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  /* Capped rather than a bare svh: an uncapped viewport-height hero keeps
     growing the page on a tall screen, and breaks full page screenshots. */
  min-height: min(86svh, 46rem);
  padding-block: var(--rw-s-9) var(--rw-s-8);
  background: var(--rw-navy);
  color: var(--rw-cream);
}

.dhero__bg { position: absolute; inset: 0; z-index: 0; }

.dhero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Navy-tinted scrim, never black. The photo is a saturated LED interior, so it
   takes a heavier scrim than a daylight shot before cream type is safe on it. */
.dhero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, var(--rw-scrim-90) 0%, var(--rw-scrim-65) 44%, var(--rw-scrim-15) 82%, var(--rw-scrim-08) 100%),
    linear-gradient(to right, var(--rw-scrim-55) 0%, var(--rw-scrim-08) 62%, var(--rw-scrim-00) 100%);
}

/* .dhero__inner shares its element with .wrap, so constrain the children
   rather than the wrap itself, which would centre the whole column. */
.dhero__inner { position: relative; z-index: 2; }
.dhero__inner > * { max-width: 44rem; }

.dhero .eyebrow { color: var(--rw-blush); }
.dhero__title { margin-top: var(--rw-s-4); }
.dhero__lead { margin-top: var(--rw-s-5); color: var(--rw-cream); }
.dhero__actions { margin-top: var(--rw-s-6); }
.dhero__actions .textlink { color: var(--rw-cream); }

/* Cream fill, navy label: 9.79, AAA, and it holds up over a busy photograph in
   a way an outline does not. Rust is not used here on purpose. There is one
   accent colour in the palette and the header's Try us has it, so a second
   rust button in the same screen would leave neither reading as the action. */
.dhero__actions .btn {
  --btn-bg: var(--rw-cream);
  --btn-fg: var(--rw-navy);
  --btn-bd: var(--rw-cream);
}

@media (max-width: 47.999rem) {
  /* On a narrow screen the type block reaches further up the frame, past where
     the desktop scrim has faded out. */
  .dhero::after {
    background:
      linear-gradient(to top, var(--rw-scrim-90) 0%, var(--rw-scrim-90) 48%, var(--rw-scrim-65) 80%, var(--rw-scrim-15) 100%),
      linear-gradient(to right, var(--rw-scrim-55) 0%, var(--rw-scrim-15) 78%, var(--rw-scrim-08) 100%);
  }
  .dhero .eyebrow { color: var(--rw-cream); }
}

/* ----------------------------------------------------------- proof bar --- */

/* A running strip rather than a static row. Five items wrapped to five lines
   on a phone, which was the whole height of a section for no reason. Now it is
   one line at every width and the content moves through it instead.

   Three identical copies sit in the track and it translates by exactly a
   third, so copy two lands where copy one started and the loop has no seam.
   Three rather than two because the track has to stay wider than the widest
   plausible display. Copies two and three are aria-hidden, so a screen reader
   reads the list once. */

.dproof {
  background: var(--rw-slate-deep);
  color: var(--rw-cream);
  padding-block: var(--rw-s-3);
  overflow: hidden;
}

.dproof__track {
  display: flex;
  width: max-content;
  animation: dproof-run 40s linear infinite;
}

.dproof:hover .dproof__track,
.dproof:focus-within .dproof__track { animation-play-state: paused; }

.dproof__row {
  display: flex;
  align-items: center;
  gap: var(--rw-s-5);
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0 0 var(--rw-s-5);
  list-style: none;
}

.dproof__row li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* The dot belongs to the item, so the join between the two copies gets one
   too. The margin here and the row gap are the same value, which is what puts
   the dot in the middle of the space rather than against the next item. */
.dproof__row li::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-left: var(--rw-s-5);
  border-radius: var(--rw-r-pill);
  background: var(--rw-blush);
}

.dproof strong { font-weight: var(--rw-w-semi); }

@keyframes dproof-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}

/* Motion off: the strip stops and becomes a row you can push sideways
   yourself, and the duplicate goes away so nothing reads twice. */
@media (prefers-reduced-motion: reduce) {
  .dproof { overflow-x: auto; }
  .dproof__track { animation: none; }
  .dproof__row[aria-hidden="true"] { display: none; }
}

/* --------------------------------------------------------- section head --- */

.sec-head { max-width: 46rem; margin-bottom: var(--rw-s-8); }
.sec-head .h-sec { margin-top: var(--rw-s-4); }
.sec-head .lead { margin-top: var(--rw-s-5); }

/* ------------------------------------------------- the featured stack --- */

.stack--featured {
  display: grid;
  gap: var(--rw-s-6);
  grid-template-columns: 1fr;
  align-items: center;
  padding: var(--rw-s-6);
  background: var(--rw-navy);
  color: var(--rw-cream);
  border-radius: var(--rw-r-lg);
  margin-bottom: var(--rw-s-7);
}

@media (min-width: 62rem) {
  .stack--featured {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--rw-s-8);
    padding: var(--rw-s-7);
    /* Stretch, not centre: a 16:9 crop is much shorter than this card, and
       centring it leaves a band of navy above and below. */
    align-items: stretch;
  }
  .stack__media,
  .stack__media picture { height: 100%; }
  .stack__media img { height: 100%; object-fit: cover; }
}

.stack__media img {
  width: 100%;
  border-radius: var(--rw-r-md);
}

.stack__flag { color: var(--rw-blush); }
.stack__name { margin-top: var(--rw-s-3); }

.stack__price {
  margin-top: var(--rw-s-4);
  color: var(--rw-white);
}

.stack__unit {
  font-size: var(--rw-fs-sm);
  font-weight: var(--rw-w-medium);
  letter-spacing: var(--rw-ls-mono);
  color: var(--rw-mist);
  margin-left: 0.5em;
}

.stack--featured .body { margin-top: var(--rw-s-4); }

.stack__parts {
  display: grid;
  gap: var(--rw-s-2);
  margin-block: var(--rw-s-5);
  padding-top: var(--rw-s-4);
  border-top: var(--rw-border-w) solid var(--rw-veil-20);
  color: var(--rw-mist);
}

.stack--featured .btn {
  --btn-bg: var(--rw-cream);
  --btn-fg: var(--rw-navy);
  --btn-bd: var(--rw-cream);
}

/* ------------------------------------------------------ the other three --- */

.stacks {
  display: grid;
  gap: var(--rw-s-6);
  grid-template-columns: 1fr;
}

@media (min-width: 44rem) { .stacks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .stacks { grid-template-columns: repeat(3, 1fr); } }

.stack-sm {
  display: flex;
  flex-direction: column;
  gap: var(--rw-s-3);
}

/* Two square crops butted together: the stack is literally two therapies. */
.stack-sm__thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  border-radius: var(--rw-r-md);
  overflow: hidden;
  margin-bottom: var(--rw-s-2);
}

.stack-sm__thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.stack-sm__price { margin-top: var(--rw-s-1); }
.stack-sm__price .stack__unit { color: var(--rw-text-muted); }
.stack-sm__parts { color: var(--rw-text-muted); }
.stack-sm .body { margin-top: var(--rw-s-2); }
.stack-sm .btn { margin-top: auto; }

.stacks__note { margin-top: var(--rw-s-7); }

.stacks .stack-sm:nth-child(2) { transition-delay: 70ms; }
.stacks .stack-sm:nth-child(3) { transition-delay: 140ms; }

/* ---------------------------------------------------------------- pass --- */

.dpass__inner {
  display: grid;
  gap: var(--rw-s-7);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 56rem) {
  .dpass__inner { grid-template-columns: 1fr 20rem; gap: var(--rw-s-9); }
}

.dpass__copy .h-sec { margin-top: var(--rw-s-4); }
.dpass__copy .lead { margin-top: var(--rw-s-5); }
.dpass__ticks { margin-top: var(--rw-s-6); }

.dpass__card {
  display: grid;
  gap: var(--rw-s-4);
  padding: var(--rw-s-7);
  background: var(--rw-slate-deep);
  border-radius: var(--rw-r-lg);
  text-align: center;
}

/* Blush measures 4.26 on slate deep. Cream is 7.89 and holds at every size. */
.dpass__card > .mono { color: var(--rw-cream); }
.dpass__price { color: var(--rw-white); }
.dpass__terms { color: var(--rw-mist); }
.dpass__card .hairline { background: var(--rw-veil-20); }

/* ----------------------------------------------------------------- trio --- */

.trio {
  display: grid;
  gap: var(--rw-s-7);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .trio { grid-template-columns: repeat(3, 1fr); gap: var(--rw-s-6); }
}

/* The one arch cluster on this page. */
.trio__img { aspect-ratio: 3 / 4; margin-bottom: var(--rw-s-5); }
.trio__meta { color: var(--rw-text-muted); }
.trio__item .h-card { margin-block: var(--rw-s-2) var(--rw-s-3); }

.trio__item:nth-child(2) { transition-delay: 80ms; }
.trio__item:nth-child(3) { transition-delay: 160ms; }

/* --------------------------------------------------------------- rooms --- */

.rooms {
  display: grid;
  gap: var(--rw-s-7);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) { .rooms { grid-template-columns: repeat(2, 1fr); } }

.room img {
  width: 100%;
  border-radius: var(--rw-r-lg);
  margin-bottom: var(--rw-s-5);
}

.room__meta { color: var(--rw-text-muted); }
.room__body .h-card { margin-block: var(--rw-s-2) var(--rw-s-3); }
.room:nth-child(2) { transition-delay: 80ms; }

/* -------------------------------------------------------------- quotes --- */

.quotes {
  display: grid;
  gap: var(--rw-s-6);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  padding-top: var(--rw-s-5);
  border-top: var(--rw-rule-w) solid var(--rw-navy);
}

.quote__text {
  margin: 0;
  font-size: var(--rw-fs-lg);
  line-height: var(--rw-lh-normal);
}

.quote__text::before { content: "\201C"; }
.quote__text::after { content: "\201D"; }

.quote__by { margin-top: var(--rw-s-4); color: var(--rw-text-muted); }
.quote:nth-child(2) { transition-delay: 70ms; }
.quote:nth-child(3) { transition-delay: 140ms; }

/* --------------------------------------------------------- first visit --- */

.dfirst {
  display: grid;
  gap: var(--rw-s-7);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 56rem) {
  .dfirst { grid-template-columns: 1fr 1fr; gap: var(--rw-s-9); }
}

.dfirst__copy .h-sec { margin-top: var(--rw-s-4); }
.dfirst__copy .body { margin-top: var(--rw-s-5); }

/* A real tap target, not an inline prose link. This page is written for someone
   who would rather ring first, so the number has to be easy to hit. */
.dfirst__phone {
  margin-top: var(--rw-s-3);
  font-size: var(--rw-fs-lg);
  font-weight: var(--rw-w-bold);
  font-family: var(--rw-font-mono);
  letter-spacing: var(--rw-ls-mono);
}
.dfirst__art img { width: 100%; border-radius: var(--rw-r-lg); box-shadow: var(--rw-shadow-lg); }

/* ---------------------------------------------------------------- gift --- */

.dgift {
  background: var(--rw-slate-deep);
  color: var(--rw-cream);
}

.dgift__inner {
  display: grid;
  gap: var(--rw-s-7);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 56rem) {
  .dgift__inner { grid-template-columns: 1fr 1fr; gap: var(--rw-s-9); }
}

.dgift .eyebrow { color: var(--rw-cream); }
.dgift__copy .h-sec { margin-top: var(--rw-s-4); }
.dgift__copy .lead { margin-top: var(--rw-s-5); color: var(--rw-cream); }
.dgift__copy .btn {
  margin-top: var(--rw-s-6);
  --btn-bg: var(--rw-cream);
  --btn-fg: var(--rw-navy);
  --btn-bd: var(--rw-cream);
}

.dgift__art img { width: 100%; border-radius: var(--rw-r-lg); }

/* ----------------------------------------------------------------- faq --- */

.faq { display: grid; }

.faq__item {
  border-top: var(--rw-border-w) solid var(--rw-border);
  padding-block: var(--rw-s-5);
}
.faq__item:last-child { border-bottom: var(--rw-border-w) solid var(--rw-border); }

.faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: var(--rw-s-4);
  align-items: baseline;
  justify-content: space-between;
  min-height: 44px;
}
.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "+";
  font-family: var(--rw-font-mono);
  font-size: var(--rw-fs-xl);
  line-height: 1;
  color: var(--rw-navy);
  flex: none;
  transition: transform var(--rw-dur-base) var(--rw-ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { margin-top: var(--rw-s-4); }

/* --------------------------------------------------------------- visit --- */

/* One row of three on a wide screen: what to do, where it is, the details.
   The earlier version stacked a full width map under a two column row, which
   left a dead block of navy the height of the map sitting beside the copy. */

.dvisit__inner {
  display: grid;
  gap: var(--rw-s-6);
  grid-template-columns: 1fr;
  grid-template-areas:
    "copy"
    "map"
    "details";
}

.dvisit__copy    { grid-area: copy; }
.dvisit__mapcol  { grid-area: map; }
.dvisit__details { grid-area: details; }

/* Two columns: the map takes the height the copy does not need, and the
   details card runs the full height beside both. */
@media (min-width: 56rem) {
  .dvisit__inner {
    grid-template-columns: 1fr 18rem;
    grid-template-areas:
      "copy details"
      "map  details";
    gap: var(--rw-s-6) var(--rw-s-7);
    align-items: stretch;
  }
}

@media (min-width: 72rem) {
  .dvisit__inner {
    grid-template-columns: 1fr 1.05fr 19rem;
    grid-template-areas: "copy map details";
    gap: var(--rw-s-7);
  }
}

.dvisit__copy .h-sec { margin-top: var(--rw-s-4); }
.dvisit__copy .lead { margin-top: var(--rw-s-5); }
.dvisit__copy .btn-row { margin-top: var(--rw-s-6); }

/* --- the map --- */

.dvisit__mapcol {
  display: flex;
  flex-direction: column;
  gap: var(--rw-s-3);
  min-height: 0;
}

.dvisit__map-link {
  position: relative;
  display: block;
  overflow: hidden;
  border: var(--rw-border-w) solid var(--rw-veil-20);
  border-radius: var(--rw-r-lg);
  /* In one column there is no height to fill, so the shape is set here. From
     56rem up the link stretches instead and the square asset is cropped. */
  aspect-ratio: 16 / 10;
}

/* In the two column band the card no longer stretches, so there is no column
   height to fill and the shape has to be stated rather than inferred. */
@media (min-width: 56rem) {
  .dvisit__map-link { aspect-ratio: 4 / 3; }
}

/* In the three column row it fills the height the card sets. */
@media (min-width: 72rem) {
  .dvisit__map-link { aspect-ratio: auto; flex: 1 1 auto; min-height: 14rem; }
}

/* The map is graded in build-map.py rather than with a CSS filter, so what
   ships is what was checked. Here it only gets the brand's shape. */
/* <picture> is an inline box of its own, so without this the image sizes to
   the picture rather than to the stretched link and leaves a navy strip. */
.dvisit__map-link picture {
  display: block;
  height: 100%;
}

.dvisit__map-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--rw-dur-slow) var(--rw-ease);
}
.dvisit__map-link:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .dvisit__map-link:hover img { transform: none; }
}

/* The whole tile is the link, so it has to say so without a second control. */
.dvisit__map-cta {
  position: absolute;
  right: var(--rw-s-3);
  bottom: var(--rw-s-3);
  padding: 0.6rem 0.9rem;
  background: var(--rw-navy);
  color: var(--rw-cream);
  border-radius: var(--rw-r-md);
  box-shadow: var(--rw-shadow-md);
}

.dvisit__map-note { color: var(--rw-mist); }

/* --- the details card --- */

.dvisit__details {
  display: grid;
  align-content: start;
  gap: var(--rw-s-5);
  background: var(--rw-slate-deep);
}

.dvisit__details > .mono { color: var(--rw-cream); }
.dvisit__details .hairline { background: var(--rw-veil-20); }
.dvisit__address { font-style: normal; }

.dvisit__list { display: grid; grid-template-columns: 1fr; gap: var(--rw-s-4); }
.dvisit__list dt { color: var(--rw-mist); }
.dvisit__list dd { margin: var(--rw-s-2) 0 0; }

@media (min-width: 34rem) {
  .dvisit__list { grid-template-columns: 5.5rem 1fr; align-items: baseline; }
  .dvisit__list dd { margin-top: 0; }
}

/* A grid item will not shrink below its content by default, which pushed the
   email address out through the right hand side of the card. */
.dvisit__list dd {
  min-width: 0;
  overflow-wrap: anywhere;
}
.dvisit__list dd a[href^="mailto"] { font-size: var(--rw-fs-sm); }

/* The card is 18rem from 56rem up, and a two column list inside it leaves the
   values about 150px, which breaks the email mid word and wraps the hours. So
   from there the label goes above its value instead. Tighter gaps too, or the
   card on its own sets the height of the whole row. */
@media (min-width: 56rem) {
  .dvisit__list { grid-template-columns: 1fr; gap: var(--rw-s-3); }
  .dvisit__list dd { margin-top: var(--rw-s-1); }
  .dvisit__details { gap: var(--rw-s-4); }
}

/* In the two column band the card sits beside a copy block and a map stacked
   together, so stretching it would leave most of a panel empty. */
@media (min-width: 56rem) and (max-width: 71.999rem) {
  .dvisit__details { align-self: start; }
}