/* ==========================================================================
   Hospitality — "Technology for every guest moment."
   --------------------------------------------------------------------------
   One continuous story: a guest moment creates activity, activity creates
   information, connected information creates clarity, intelligence helps the
   team act on it, and Medha Cloud brings it together.

   Three signature compositions carry the page -- the stay, the assembly and
   the shapes -- and everything else supports them.

   AUTHORED STILL. Every composition is written first in its finished, still
   form, which is what no-JavaScript and reduced-motion readers see. Two
   classes on <html>, set in the head before first paint, switch the moving
   forms on:
     .hosp-motion    motion is allowed (JavaScript running, no reduced motion)
     .hosp-aperture  the same, at 768px and wider (the stay's sticky stage and
                     the assembly's ring)
   Nothing is ever hidden by CSS alone.

   A required image that is not available leaves its frame blank at the exact
   ratio, radius and position (the reserved area rule).
   ========================================================================== */

:root {
  --bl-midnight: #0B1630;
  --bl-deep-navy: #10264A;
  --bl-royal: #2563EB;
  --bl-electric: #4DA8FF;
  --bl-soft: #93C5FD;
  --bl-teal: #14B8A6;
  --bl-violet: #8B5CF6;
  --bl-off-white: #F8FAFC;
  --bl-slate: #475569;
  --hosp-ease: cubic-bezier(.22, .61, .36, 1);
  --hosp-frame-radius: 28px;
  --hosp-frame-edge: rgba(147, 197, 253, .34);
}

.hosp-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #1D4ED8;
}
.hosp-link:hover { text-decoration: underline; }

/* ============================================================== §1 hero == */
.hosp-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--v2-pad-hero) var(--v2-pad);
  color: #FFFFFF;
  background-color: var(--bl-midnight);
  background-image: linear-gradient(160deg, #0B1630 0%, #10264A 58%, #13305C 100%);
}
.hosp-hero__sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(44% 58% at 78% 20%, rgba(139, 92, 246, .24), transparent 70%),
    radial-gradient(40% 55% at 10% 34%, rgba(37, 99, 235, .26), transparent 72%),
    radial-gradient(34% 38% at 58% 96%, rgba(20, 184, 166, .10), transparent 70%);
}
.hosp-hero__inner { position: relative; z-index: 1; }
.hosp-hero .crumbs { margin-bottom: clamp(16px, 2.4vw, 30px); color: #C4D4EC; }
.hosp-hero .crumbs a { color: #D6E3F6; }
.hosp-hero .crumbs a:hover { color: #FFFFFF; }
.hosp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(32px, 4.4vw, 70px);
}
.hosp-hero__copy { position: relative; z-index: 2; max-width: 600px; }
.hosp-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #FFFFFF;
  text-wrap: balance;
}
.hosp-hero h1 em {
  display: block;
  font-style: normal;
  color: var(--bl-soft);
  background: linear-gradient(95deg, #93C5FD 0%, #BFDBFE 42%, #C4B5FD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* "guest moment." is one thought; it stays on one line at every width */
  white-space: nowrap;
}
.hosp-hero .v2-eyebrow { color: #BFDBFE; }
.hosp-hero .v2-lead { color: #C9D8EE; max-width: 33em; }
.hosp-hero .v2-head > .petal-field { inset: -32% -8% -8%; }
.hosp-hero .btn-row { margin-top: clamp(22px, 2.6vw, 34px); }
/* the hero is dark: its focus ring is Soft Blue, as on every dark section */
.hosp-hero .v2-btn:focus-visible, .hosp-hero a:focus-visible { outline-color: var(--bl-soft); }
.hosp-hero__market {
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(147, 197, 253, .22);
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 2;
  color: #BFDBFE;
}

/* the stage: the guest moment, and the operation it sets moving */
.hosp-stage { position: relative; z-index: 1; }
.hosp-motion .hosp-stage {
  will-change: transform;
  /* the lean follows the pointer softly and returns to rest the same way */
  transition: transform .7s var(--hosp-ease);
}
.hosp-stage__halo {
  position: absolute;
  inset: -12% -10%;
  z-index: -1;
  background:
    radial-gradient(closest-side, rgba(77, 168, 255, .28), transparent),
    radial-gradient(closest-side at 74% 26%, rgba(139, 92, 246, .24), transparent);
}
/* the frame keeps the photograph's own ratio, so the signals stay on their
   places at every width */
.hosp-window {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 1271 / 941;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(147, 197, 253, .38);
  background: linear-gradient(168deg, #0D1B3C, #10264A);
  box-shadow:
    0 0 0 8px rgba(147, 197, 253, .06),
    0 30px 80px -24px rgba(4, 10, 26, .85),
    0 0 60px rgba(77, 168, 255, .18);
}
.hosp-window picture, .hosp-window img { display: block; width: 100%; height: 100%; }
.hosp-window img { object-fit: cover; }
.hosp-window__light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(104deg, rgba(191, 219, 254, 0) 34%,
              rgba(214, 231, 255, .24) 50%, rgba(191, 219, 254, 0) 66%);
  opacity: 0;
}
/* a scrim along the lower edge keeps the signals legible on the photograph */
.hosp-window::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(8, 16, 38, .38) 0%, rgba(8, 16, 38, 0) 46%);
}

/* the four signals: a point on the place, and its name above it */
.hosp-marks { position: absolute; inset: 0; z-index: 2; }
.hosp-mark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
}
.hosp-mark__dot {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F8FAFC;
  /* a point of light in the room, not a pin: a soft bloom, no ring */
  box-shadow: 0 0 10px 3px rgba(191, 219, 254, .75), 0 0 28px 8px rgba(77, 168, 255, .35);
}
/* the name hangs above its point on a hairline, set in the light of the scene:
   a shadow of the room behind it rather than a box */
.hosp-mark__label {
  position: absolute;
  bottom: 12px;
  left: 0;
  transform: translateX(-50%);
  padding: 10px 22px 18px;
  /* a shadow of the room, dense enough behind the letters to hold 4.5:1 on
     the brightest part of the photograph, and gone before its own edge */
  background: radial-gradient(closest-side, rgba(6, 12, 30, .86) 0%, rgba(6, 12, 30, .72) 55%,
              rgba(6, 12, 30, 0) 100%);
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #F8FAFC;
}
.hosp-mark__label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 1px;
  height: 12px;
  background: linear-gradient(180deg, rgba(248, 250, 252, .7), rgba(248, 250, 252, 0));
}
.hosp-mark--end .hosp-mark__label { transform: translateX(-80%); }
.hosp-mark--end .hosp-mark__label::after { left: 80%; }
/* two neighbours on the photograph: one name sits below its point */
.hosp-mark--below .hosp-mark__label { bottom: auto; top: 12px; padding: 18px 22px 10px; }
.hosp-mark--below .hosp-mark__label::after {
  bottom: auto;
  top: 2px;
  background: linear-gradient(0deg, rgba(248, 250, 252, 0), rgba(248, 250, 252, .7));
}

/* the trail under the frame names the same four, in the same order */
.hosp-trail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: clamp(18px, 2vw, 24px);
}
.hosp-trail__lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
}
.hosp-trail__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hosp-trail__step {
  position: relative;
  padding-left: 30px;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #BFDBFE;
}
.hosp-trail__step::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 16px;
  height: 1px;
  background: linear-gradient(90deg, rgba(77, 168, 255, .3), #4DA8FF);
}
.hosp-trail__step:first-child { padding-left: 0; }
.hosp-trail__step:first-child::before { display: none; }

/* the entrance, once: the frame settles, a slow light crosses it, then the
   four signals light in turn and the trail with them */
.hosp-motion .hosp-window img { transform: scale(1.04); }
.hosp-motion .v2.is-in .hosp-window img {
  transform: none;
  transition: transform 2.6s var(--hosp-ease);
}
.hosp-motion .v2.is-in .hosp-window__light {
  animation: hosp-pass 3s cubic-bezier(.4, 0, .2, 1) .4s 1 both;
}
@keyframes hosp-pass {
  0%   { opacity: 0; transform: translate3d(-44%, 6%, 0); }
  38%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(42%, -6%, 0); }
}
.hosp-motion .hosp-mark,
.hosp-motion .hosp-trail__step { opacity: 0; }
.hosp-motion .hosp-mark { transform: translate3d(0, 6px, 0); }
.hosp-motion .v2.is-in .hosp-mark,
.hosp-motion .v2.is-in .hosp-trail__step {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease calc(1.2s + var(--i) * .42s),
              transform .9s var(--hosp-ease) calc(1.2s + var(--i) * .42s);
}
/* the point breathes very slowly once it is lit: the one continuous motion
   in the hero, and it stops whenever the hero is off screen */
.hosp-motion .v2.is-live .hosp-mark__dot {
  animation: hosp-breathe 4.8s ease-in-out calc(2.4s + var(--i) * .42s) infinite;
}
@keyframes hosp-breathe {
  0%, 100% { box-shadow: 0 0 10px 3px rgba(191, 219, 254, .75), 0 0 28px 8px rgba(77, 168, 255, .35); }
  50%      { box-shadow: 0 0 14px 4px rgba(191, 219, 254, .5), 0 0 34px 10px rgba(77, 168, 255, .22); }
}

/* ==================================================== §2 the guest journey */
.hosp-journey {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--v2-pad);
  color: #E8F0FE;
  background-color: #0B1630;
  background-image: linear-gradient(176deg, #0B1630 0%, #101E44 46%, #0E1A3A 100%);
}
.hosp-journey__sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(44% 38% at 74% 16%, rgba(37, 99, 235, .24), transparent 72%),
    radial-gradient(38% 36% at 18% 88%, rgba(139, 92, 246, .16), transparent 72%);
}
.hosp-journey__head { max-width: 40rem; }
.hosp-journey .v2-head h2 { color: #FFFFFF; }
.hosp-journey .v2-eyebrow { color: #BFDBFE; }
.hosp-journey .v2-lead { color: #C9D8EE; }
.hosp-journey__stage { margin-top: clamp(26px, 3vw, 40px); }

/* --- still: five moments, each its frame and its words ------------------- */
.hosp-moments { margin: 0; padding: 0; list-style: none; }
.hosp-moment {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(22px, 3vw, 52px);
  align-items: center;
}
.hosp-moment + .hosp-moment { margin-top: clamp(30px, 4vw, 56px); }
.hosp-frame {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 5 / 6;
  border-radius: var(--hosp-frame-radius);
  overflow: hidden;
  border: 1px solid var(--hosp-frame-edge);
  /* the frame's own ground: a reserved area shows exactly this */
  background: linear-gradient(168deg, #0D1B3C 0%, #122350 58%, #0E1B3E 100%);
  box-shadow: 0 30px 70px -40px rgba(2, 6, 20, .9);
}
.hosp-frame picture, .hosp-frame img { display: block; width: 100%; height: 100%; }
.hosp-frame img { object-fit: cover; }
/* the hour of the day: warm at arrival, deep by departure */
.hosp-frame__light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--hour, .3);
  background:
    linear-gradient(196deg, rgba(255, 240, 214, .26) 0%, rgba(8, 16, 38, 0) 44%),
    linear-gradient(0deg, rgba(6, 12, 30, .5) 0%, rgba(6, 12, 30, 0) 54%);
}
.hosp-rail { display: none; }
.hosp-moment__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-3);
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #BFDBFE;
}
.hosp-moment__kicker span { color: #8FB2E0; }
.hosp-moment h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: #FFFFFF;
}
.hosp-moment__copy p:last-child { margin: 0; color: #C9D8EE; max-width: 34em; }

/* --- moving: one frame, the stay passing through it ---------------------
   Every moment occupies the same place. The scroll position sets each one's
   opacity, scale and drift continuously (hospitality.js), so the frames
   dissolve into each other while the words hand over cleanly, one at a time,
   and scrolling back runs the stay backwards. */
@media (min-width: 768px) {
  .hosp-aperture .hosp-journey__stage {
    /* the pane (frame + rail) plus one step of travel per moment */
    min-height: calc(min(60vh, 520px) + 76px + 4 * clamp(215px, 29vh, 300px));
  }
  .hosp-aperture .hosp-journey__pane {
    position: sticky;
    top: clamp(84px, 13vh, 124px);
  }
  .hosp-aperture .hosp-moments {
    position: relative;
    height: min(60vh, 520px);
  }
  .hosp-aperture .hosp-moment {
    position: absolute;
    inset: 0;
    margin: 0;
  }
  .hosp-aperture .hosp-frame {
    height: 100%;
    width: auto;
    aspect-ratio: 5 / 6;
    margin-inline: auto;
  }
  .hosp-aperture .hosp-frame,
  .hosp-aperture .hosp-moment__copy { opacity: 0; will-change: transform, opacity; }
  .hosp-aperture .hosp-moment[data-moment="0"] .hosp-frame,
  .hosp-aperture .hosp-moment[data-moment="0"] .hosp-moment__copy { opacity: 1; }

  /* the rail: where you are in the stay, a line that fills and five names */
  .hosp-aperture .hosp-rail {
    display: block;
    margin-top: clamp(22px, 2.6vw, 32px);
  }
  .hosp-rail__track {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: rgba(147, 197, 253, .22);
    overflow: hidden;
  }
  .hosp-rail__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #4DA8FF, #8B5CF6);
    transform: scaleX(0);
    transform-origin: left;
  }
  .hosp-rail__names {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(8px, 1.2vw, 18px);
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
  }
  .hosp-rail__name {
    font-family: var(--font-label);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #A8C2E6;
    transition: color .5s ease;
  }
  .hosp-rail__name.is-now { color: #FFFFFF; }
}

/* ============================================ §3 the work behind the welcome
   A section through the property, not a network. The guest experience sits
   on top; beneath it three floors -- front of house, guest services, back of
   house -- each carrying three operations on its deck, and one service core
   running down through all of them to the guest. Still, it is that drawing.
   Moving (768px+), each operation leaves the guest experience and settles
   onto its floor as the floor's deck draws out from the core.
   ========================================================================= */
.hosp-work { padding-block: var(--v2-pad); }
.hosp-work__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}
.hosp-work__head { max-width: 32rem; }
.hosp-work__close {
  margin: var(--space-6) 0 0;
  padding-left: 16px;
  border-left: 2px solid #2563EB;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .96rem + .4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.35;
  color: #0B1630;
}
.hosp-assembly { position: relative; }
.hosp-assembly__core {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 250px;
  margin: 0 auto 38px;
  padding: 15px 20px;
  border-radius: 18px;
  border: 1px solid rgba(37, 99, 235, .26);
  background: linear-gradient(168deg, #FFFFFF 0%, #EEF4FD 100%);
  box-shadow: 0 26px 60px -34px rgba(11, 22, 48, .45);
}
.hosp-assembly__glow {
  position: absolute;
  inset: -60% -30%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(77, 168, 255, .20), transparent 72%);
}
.hosp-assembly__petal { display: block; width: 12px; height: 26px; color: #4DA8FF; }
.hosp-assembly__petal svg { display: block; width: 100%; height: 100%; }
.hosp-assembly__core p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, .94rem + .3vw, 1.16rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: #0B1630;
}
.hosp-floors {
  position: relative;
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* the service core: from the guest experience down to the last deck */
.hosp-core-line {
  position: absolute;
  left: 50%;
  top: -38px;
  bottom: 21px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2563EB 0%, rgba(37, 99, 235, .45) 100%);
  transform-origin: 50% 0;
}
.hosp-floor { position: relative; }
.hosp-floor__name {
  margin: 0 0 8px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #475569;
}
.hosp-floor__deck { position: relative; }
.hosp-floor__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(37, 99, 235, .12), rgba(37, 99, 235, .42) 50%,
              rgba(37, 99, 235, .12));
  transform-origin: 50% 50%;
}
.hosp-plates {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hosp-plate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: #FFFFFF;
  box-shadow: 0 14px 30px -22px rgba(11, 22, 48, .5);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  color: #12306E;
}
.hosp-plate__tick {
  width: 14px;
  height: 1.5px;
  flex: none;
  border-radius: 2px;
  background: linear-gradient(90deg, #4DA8FF, #2563EB);
}

/* --- moving, wide: scroll-driven (hospitality.js) ----------------------- */
.hosp-aperture .hosp-plate { opacity: 0; will-change: transform, opacity; }
.hosp-aperture .hosp-floor__rule { transform: scaleX(0); }
.hosp-aperture .hosp-floor__name { opacity: 0; }
.hosp-aperture .hosp-core-line { transform: scaleY(0); }

/* --- moving, narrow: the floors rise with their section ------------------ */
@media (max-width: 767px) {
  .hosp-motion .hosp-plate { opacity: 0; transform: translate3d(0, 12px, 0); }
  .hosp-motion .v2.is-in .hosp-plate {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease var(--d, 0s), transform .5s var(--hosp-ease) var(--d, 0s);
  }
  .hosp-floor[data-floor="1"] .hosp-plate { --d: .12s; }
  .hosp-floor[data-floor="2"] .hosp-plate { --d: .24s; }
}

/* ============================================= §4 hospitality has no shape
   THE DIAL. Six kinds of property on one ring, and one connected foundation
   in the middle that every one of their lines runs into.

   It is Home's orbit, held still. The same core, the same hairline rings,
   the same chip on a spoke with light running along it -- so the section
   belongs to the site rather than inventing a language for itself. What is
   different is that nothing turns, the middle carries the sentence instead
   of the product, and the emphasis moves as the section is read.

   Every kind stays on the ring. A kind that is not the one being read is
   quieter, never absent, because every kind of property always exists.

   Wide: the ring. Narrow: a ring cannot hold six chips at 375px, so the
   middle becomes a plate and the six stand beneath it in a grid, which is
   what the commerce board on Home does at the same width.
   ========================================================================= */
.hosp-shapes { padding-block: var(--v2-pad-tight); }
.hosp-shapes__grid {
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
  gap: clamp(30px, 4vw, 70px);
  align-items: center;
}
.hosp-dial {
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
}
.hosp-dial__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(147, 197, 253, .22);
}
.hosp-dial__ring--outer { inset: 9%; border-style: dashed; }
.hosp-dial__ring--inner { inset: 31%; border-color: rgba(147, 197, 253, .14); }
/* the foundation: it never moves, never turns and never changes */
.hosp-dial__core {
  position: absolute;
  inset: 33%;
  z-index: 2;
  display: grid;
  place-content: center;
  margin: 0;
  padding: 10px;
  border-radius: 50%;
  text-align: center;
  color: #FFFFFF;
  background-color: #14306A;
  background-image: radial-gradient(circle at 50% 35%, #2B5FD9 0%,
                    #14306A 60%, #0E2350 100%);
  box-shadow: 0 0 0 10px rgba(77, 168, 255, .06), 0 0 62px rgba(77, 168, 255, .38);
}
.hosp-dial__core strong {
  font-family: var(--font-display);
  font-size: clamp(.86rem, .68rem + .62vw, 1.06rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.025em;
}
.hosp-dial__track {
  position: absolute;
  inset: 9%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hosp-kind {
  position: absolute;
  inset: 0;
  transform: rotate(var(--a));
  pointer-events: none;
}
/* the line from a kind of property in to the foundation */
.hosp-kind__spoke {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(147, 197, 253, .55),
              rgba(147, 197, 253, .08));
  transition: background .4s var(--hosp-ease, cubic-bezier(.22, .61, .36, 1));
}
.hosp-kind__spoke i {
  position: absolute;
  left: -2px;
  top: 0;
  width: 5px;
  height: 20px;
  border-radius: 3px;
  background: linear-gradient(180deg, transparent, #BFDBFE);
  animation: hosp-run 3.2s linear infinite;
  animation-delay: calc(var(--a) / 120deg * -1s);
}
@keyframes hosp-run {
  from { transform: translate3d(0, -22px, 0); }
  to   { transform: translate3d(0, 420%, 0); }
}
/* nothing runs while the section is off screen */
.v2:not(.is-live) .hosp-kind__spoke i { animation-play-state: paused; }
.hosp-kind__chip {
  position: absolute;
  left: 50%;
  top: 0;
  pointer-events: auto;
  /* the face turns back against its bearing, so every name reads upright */
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
  display: grid;
  justify-items: center;
  gap: 7px;
  width: 112px;
  padding: 11px 9px;
  border-radius: 16px;
  font: inherit;
  color: #FFFFFF;
  cursor: pointer;
  background: rgba(16, 38, 74, .92);
  border: 1px solid rgba(147, 197, 253, .40);
  box-shadow: 0 12px 26px -12px rgba(4, 10, 26, .9);
  /* ONE transition declaration. There were two, and the second silently
     dropped transform and background-color, so the hover lift never ran. */
  transition: border-color .35s var(--hosp-ease, cubic-bezier(.22, .61, .36, 1)),
              box-shadow .35s var(--hosp-ease, cubic-bezier(.22, .61, .36, 1)),
              background-color .32s ease,
              opacity .35s var(--hosp-ease, cubic-bezier(.22, .61, .36, 1));
}
.hosp-kind__chip > * { pointer-events: none; }
.hosp-kind__rule {
  display: block;
  width: 16px;
  height: 1px;
  background: #BFDBFE;
  opacity: .85;
}
.hosp-kind__label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(.78rem, .72rem + .16vw, .84rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.012em;
}
/* ---- hover: the kind lights up -----------------------------------------
   The old hover only tinted a border. A kind on this ring is a thing you
   point at, so pointing at it should light it: a glow blooms behind the
   chip, the chip lifts and brightens, its label goes white and its spoke
   runs hot back to the core. Transform and opacity only. */
/* ---- hover IS the taken state ------------------------------------------
   No glow halo. Pointing at a kind gives exactly what clicking it gives --
   the chip reads as the one being read -- so the hover teaches the click
   instead of competing with it. Same declarations as [aria-pressed="true"]
   below, which is the state the dial sets when a kind is taken. */
.hosp-kind__chip:hover,
.hosp-kind__chip:focus-visible {
  border-color: rgba(191, 219, 254, .95);
  box-shadow: 0 16px 36px -14px rgba(4, 10, 26, .95), 0 0 30px rgba(77, 168, 255, .40);
}
/* and while a kind is hovered the dial stops dimming it, exactly as when it
   is taken -- otherwise the walking sequence fights the pointer */
.hosp-motion .hosp-dial--walking .hosp-kind:not(.is-now):has(.hosp-kind__chip:hover) .hosp-kind__chip,
.hosp-motion .hosp-dial--walking .hosp-kind:not(.is-now):has(.hosp-kind__chip:focus-visible) .hosp-kind__chip {
  opacity: 1;
  border-color: rgba(191, 219, 254, .95);
  box-shadow: 0 16px 36px -14px rgba(4, 10, 26, .95), 0 0 30px rgba(77, 168, 255, .40);
}
.hosp-motion .hosp-dial--walking .hosp-kind:not(.is-now):has(.hosp-kind__chip:hover) .hosp-kind__rule,
.hosp-motion .hosp-dial--walking .hosp-kind:not(.is-now):has(.hosp-kind__chip:focus-visible) .hosp-kind__rule {
  opacity: 1;
}
/* the kind being read */
.hosp-kind__chip[aria-pressed="true"] {
  border-color: rgba(191, 219, 254, .95);
  box-shadow: 0 16px 36px -14px rgba(4, 10, 26, .95), 0 0 30px rgba(77, 168, 255, .40);
}

/* --- moving: the emphasis walks the ring -------------------------------- */
/* Still, and at the close of the sequence, every kind is lit. Only while the
   reader is inside the sequence is one of them the one being read. */
.hosp-motion .hosp-dial--walking .hosp-kind:not(.is-now) .hosp-kind__chip {
  opacity: .46;
  box-shadow: none;
  border-color: rgba(147, 197, 253, .18);
}
.hosp-motion .hosp-dial--walking .hosp-kind:not(.is-now) .hosp-kind__rule { opacity: .5; }
.hosp-motion .hosp-dial--walking .hosp-kind:not(.is-now) .hosp-kind__spoke {
  background: linear-gradient(180deg, rgba(147, 197, 253, .16), rgba(147, 197, 253, .03));
}
.hosp-motion .hosp-dial--walking .hosp-kind:not(.is-now) .hosp-kind__spoke i { opacity: 0; }

/* --- narrow: the ring cannot hold six chips, so it stands down ---------- */
@media (max-width: 767px) {
  .hosp-dial {
    width: 100%;
    aspect-ratio: auto;
    display: grid;
    gap: 18px;
  }
  .hosp-dial__ring { display: none; }
  .hosp-dial__core {
    position: static;
    inset: auto;
    border-radius: 20px;
    padding: 22px 18px;
    box-shadow: 0 0 0 1px rgba(147, 197, 253, .18), 0 0 48px rgba(77, 168, 255, .28);
  }
  .hosp-dial__core strong { font-size: 1.05rem; }
  .hosp-dial__track {
    position: static;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .hosp-kind { position: static; inset: auto; transform: none; pointer-events: auto; }
  .hosp-kind__spoke { display: none; }
  .hosp-kind__chip {
    position: static;
    transform: none;
    width: 100%;
    min-height: 44px;
    grid-auto-flow: column;
    justify-items: start;
    justify-content: start;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    text-align: left;
  }
  .hosp-kind__label { font-size: .84rem; }
}

/* ================================================= §5 operating foundation
   One connected record is the anchor. The six areas stand either side of it
   and each one's line runs into it, where its entry lights. Restrained: the
   record never moves; the areas settle towards it and their lines arrive.
   ========================================================================= */
.hosp-found { padding-block: var(--v2-pad); }
.hosp-found__head { max-width: 42rem; }
.hosp-ledger {
  --ledger-gap: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px) minmax(0, 1fr);
  gap: 0 var(--ledger-gap);
  align-items: stretch;
  margin-top: clamp(20px, 2.4vw, 30px);
}
.hosp-feeds {
  display: grid;
  gap: 18px;
  align-content: center;
  margin: 0;
  padding: 20px 0;
  list-style: none;
}
.hosp-feeds--left { text-align: right; }
.hosp-module { position: relative; }
.hosp-module__icon { display: inline-flex; margin-bottom: 8px; color: #2563EB; }
.hosp-module h3 {
  margin: 0 0 4px;
  font-size: clamp(1.02rem, .96rem + .28vw, 1.18rem);
  letter-spacing: -.02em;
}
.hosp-module p { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--bl-slate); }
.hosp-feed {
  position: absolute;
  top: 11px;
  width: var(--ledger-gap);
  height: 1px;
  background: linear-gradient(90deg, rgba(37, 99, 235, .25), #2563EB);
}
.hosp-feed--left { right: calc(var(--ledger-gap) * -1); transform-origin: 0 50%; }
.hosp-feed--right {
  left: calc(var(--ledger-gap) * -1);
  transform-origin: 100% 50%;
  background: linear-gradient(90deg, #2563EB, rgba(37, 99, 235, .25));
}
.hosp-feed__node {
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563EB;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
.hosp-feed--left .hosp-feed__node { right: -4px; }
.hosp-feed--right .hosp-feed__node { left: -4px; }
/* the record */
.hosp-record {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 24px 18px;
  border-radius: 22px;
  border: 1px solid rgba(37, 99, 235, .3);
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F6FE 100%);
  box-shadow: 0 34px 80px -44px rgba(11, 22, 48, .5), 0 0 0 7px rgba(37, 99, 235, .05);
}
.hosp-record__petal { display: block; width: 12px; height: 26px; color: #4DA8FF; }
.hosp-record__petal svg { display: block; width: 100%; height: 100%; }
.hosp-record__title {
  margin: 8px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: #0B1630;
}
.hosp-record__entries {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(15, 23, 42, .09);
}
.hosp-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(15, 23, 42, .09);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #12306E;
}
.hosp-entry__tick {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 2px;
  background: linear-gradient(135deg, #4DA8FF, #2563EB);
}

/* --- moving, wide: scroll-driven (hospitality.js) ----------------------- */
.hosp-aperture .hosp-module { opacity: 0; will-change: transform, opacity; }
.hosp-aperture .hosp-feed { transform: scaleX(0); }
.hosp-aperture .hosp-entry { opacity: .32; }
.hosp-aperture .hosp-entry__tick { transform: scale(0); }
/* --- moving, narrow: one column that reveals in reading order ----------- */
@media (max-width: 767px) {
  .hosp-motion .hosp-module { opacity: 0; transform: translate3d(0, 12px, 0); }
  .hosp-motion .v2.is-in .hosp-module {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease var(--d, 0s), transform .5s var(--hosp-ease) var(--d, 0s);
  }
  .hosp-module:nth-child(2) { --d: .08s; }
  .hosp-module:nth-child(3) { --d: .16s; }
}

/* ========================================================= §6 intelligence */
.hosp-ai { padding-block: var(--v2-pad); }
.hosp-ai__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(30px, 4vw, 70px);
  align-items: start;
}
.hosp-ai__principle {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  color: #C9D8EE;
  max-width: 32em;
}
.hosp-ai__copy .hosp-link { color: #BFDBFE; margin-top: var(--space-4); }
.hosp-ai__copy .hosp-link:hover { color: #FFFFFF; }
.hosp-ai__item {
  position: relative;
  padding: var(--space-5) 0 var(--space-5) clamp(34px, 3.4vw, 46px);
  border-top: 1px solid rgba(147, 197, 253, .24);
}
.hosp-ai__item:last-child { border-bottom: 1px solid rgba(147, 197, 253, .24); }
.hosp-ai__petal {
  position: absolute;
  left: 0;
  top: calc(var(--space-5) + 2px);
  width: 14px;
  height: 30px;
  color: #93C5FD;
}
.hosp-ai__petal svg { display: block; width: 100%; height: 100%; }
.hosp-ai__item h3 {
  margin: 0 0 6px;
  font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem);
  letter-spacing: -.02em;
  color: #FFFFFF;
}
.hosp-ai__item p { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: #C9D8EE; }

/* information -> suggestion -> decision: the philosophy, made tangible */
.hosp-flow {
  position: relative;
  margin-top: clamp(30px, 3.4vw, 46px);
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid rgba(147, 197, 253, .18);
}
.hosp-flow__title {
  margin: 0 0 clamp(22px, 2.4vw, 30px);
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #BFDBFE;
}
.hosp-flow__steps {
  --flow-gap: clamp(20px, 3vw, 48px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--flow-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hosp-step { position: relative; }
/* each step's line runs from its mark to the next step's mark */
.hosp-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 21.5px;
  left: 52px;
  right: calc(var(--flow-gap) * -1 + 8px);
  height: 1px;
  background: linear-gradient(90deg, #93C5FD, #4DA8FF);
  transform-origin: left;
}
.hosp-step__mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  border: 1px solid rgba(147, 197, 253, .42);
  background: #16204E;
}
/* information: a small square of record; suggestion: the lily petal;
   decision: a person's ring, the brightest of the three */
.hosp-step--info .hosp-step__mark::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #93C5FD;
}
.hosp-step--idea .hosp-step__mark { color: #4DA8FF; }
.hosp-step--idea .hosp-step__mark svg { width: 12px; height: 26px; }
.hosp-step--person .hosp-step__mark {
  border-color: rgba(255, 255, 255, .7);
  background: #1D2A63;
}
.hosp-step--person .hosp-step__mark::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
}
.hosp-step__kicker {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: #FFFFFF;
}
.hosp-step__text {
  margin: 0;
  max-width: 26em;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: #C9D8EE;
}
/* moving: each step settles as the reader reaches it, and the line to it
   draws from the step before; both follow the scroll position both ways */
.hosp-motion .hosp-step { opacity: .35; transition: opacity .6s ease; }
.hosp-motion .hosp-step.is-lit { opacity: 1; }
.hosp-motion .hosp-step:not(:last-child)::after {
  transform: scaleX(0);
  transition: transform .8s var(--hosp-ease);
}
.hosp-motion .hosp-step.is-linked::after { transform: scaleX(1); }

/* ======================================================= §7 business clarity
   Separate signals become one picture. The nine measures begin scattered
   across the view; each travels to its place in one organised view of the
   property -- stay, revenue, demand, operations -- and only then does the view
   resolve around them: its frame, its title, its rows. No numbers, no
   charts; the clarity is in the arrangement. Still, it is the finished view.
   ========================================================================= */
.hosp-clarity { padding-block: var(--v2-pad); }
.hosp-clarity__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(30px, 4vw, 66px);
  align-items: center;
}
.hosp-picture { position: relative; padding: 24px 26px 14px; }
.hosp-picture__frame {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 1px solid rgba(37, 99, 235, .22);
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(238, 244, 253, .95));
  box-shadow: 0 30px 70px -44px rgba(11, 22, 48, .42), 0 0 0 7px rgba(37, 99, 235, .04);
}
.hosp-picture__title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1rem + .35vw, 1.26rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: #0B1630;
}
.hosp-picture__petal { display: block; width: 11px; height: 24px; color: #4DA8FF; }
.hosp-picture__petal svg { display: block; width: 100%; height: 100%; }
.hosp-prows { position: relative; margin: 0; padding: 0; list-style: none; }
.hosp-prow {
  position: relative;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}
.hosp-prow__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(15, 23, 42, .09);
  transform-origin: 0 50%;
}
.hosp-prow__name {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #475569;
}
.hosp-tokens { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hosp-token {
  position: relative;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, .26);
  background: #FFFFFF;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #1D4ED8;
}
/* --- moving, wide: scroll-driven (hospitality.js) ----------------------- */
.hosp-aperture .hosp-token { will-change: transform, opacity; }
.hosp-aperture .hosp-picture__frame,
.hosp-aperture .hosp-picture__title,
.hosp-aperture .hosp-prow__name { opacity: 0; }
.hosp-aperture .hosp-prow__rule { transform: scaleX(0); }

/* ======================================================= §8 medha cloud == */
/* The guest journey reaches its foundation. The copy holds the left; the
   right is one composition: a soft elliptical foundation, Medha Cloud, with
   a small Blue Lily behind it (the finale bloom's own geometry at half
   scale: petals 60 x 135, rotated about their base at 45deg steps, the same
   petal colours at the same .16 opacity), and the eight capabilities placed
   around it, each joined by a hair-thin curve. Still, it is complete; moving
   (768px+), the scroll brings the foundation, then the lily, then the lines
   and names in turn, and it rests. */
.hosp-cf { padding-block: var(--v2-pad); }
.hosp-cf__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}
.hosp-cf__copy { max-width: 28rem; }
.hosp-cf__cta { margin: var(--space-6) 0 0; }
.hosp-cf__cta .hosp-link { min-height: 44px; }
.hosp-cf__stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 720 / 540;
}
.hosp-cf__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hosp-cf__line {
  fill: none;
  stroke: #2563EB;
  stroke-opacity: .42;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.hosp-cf__dot { fill: #2563EB; }
/* the lily: behind the foundation, never the subject */
.hosp-cf__lily {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 320px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hosp-cf__petal {
  position: absolute;
  left: calc(50% - 30px);
  top: calc(50% - 135px);
  width: 60px;
  height: 135px;
  transform-origin: 50% 100%;
  transform: rotate(var(--r));
  color: var(--petal-electric);
  opacity: .16;
}
.hosp-cf__petal:nth-child(even) { color: var(--petal-violet); }
.hosp-cf__petal svg { display: block; width: 100%; height: 100%; }
/* the foundation */
.hosp-cf__core {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 33.333%;
  height: 22.963%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(37, 99, 235, .3);
  background: radial-gradient(closest-side, #FFFFFF 55%, #EEF4FD 100%);
  box-shadow: 0 30px 60px -36px rgba(11, 22, 48, .45), 0 0 0 10px rgba(37, 99, 235, .05);
}
.hosp-cf__core-name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, .98rem + .5vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: #0B1630;
}
/* the capabilities: words at their points, above or below them */
.hosp-cf__caps { margin: 0; padding: 0; list-style: none; }
.hosp-cf__cap {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #12306E;
}
.hosp-cf__cap--t { transform: translate(-50%, calc(-100% - 12px)); }
.hosp-cf__cap--b { transform: translate(-50%, 12px); }
/* --- moving, wide: scroll-driven (hospitality.js) ---------------------- */
.hosp-aperture .hosp-cf__core { opacity: 0; }
.hosp-aperture .hosp-cf__petal { opacity: 0; }
.hosp-aperture .hosp-cf__line { stroke-dashoffset: 1; }
.hosp-aperture .hosp-cf__dot, .hosp-aperture .hosp-cf__cap { opacity: 0; }

/* ============================================================= responsive */
@media (max-width: 1280px) {
  .hosp-hero__grid { gap: clamp(28px, 4vw, 56px); }
}
@media (max-width: 1024px) {
  .hosp-hero__grid, .hosp-ai__grid, .hosp-clarity__grid,
  .hosp-shapes__grid, .hosp-work__grid { grid-template-columns: minmax(0, 1fr); }
  .hosp-hero__copy { max-width: 640px; }
  .hosp-stage { max-width: 640px; margin-inline: auto; width: 100%; }
  .hosp-work__head { max-width: 40rem; }
  .hosp-assembly { max-width: 680px; margin-inline: auto; width: 100%; }
  .hosp-dial { max-width: 560px; margin-inline: auto; width: 100%; }
  /* two stages: the words, then the composition beneath them */
  .hosp-cf__grid { grid-template-columns: minmax(0, 1fr); }
  .hosp-cf__copy { max-width: 36rem; }
  .hosp-cf__stage { max-width: 640px; margin-inline: auto; }
  .hosp-aperture .hosp-journey__stage {
    min-height: calc(min(52vh, 430px) + 76px + 4 * clamp(190px, 26vh, 260px));
  }
  .hosp-aperture .hosp-moments { height: min(52vh, 430px); }
  .hosp-moment { gap: clamp(18px, 2.6vw, 30px); }
  .hosp-ledger { grid-template-columns: minmax(0, 1fr) minmax(230px, 260px) minmax(0, 1fr); }
}
@media (max-width: 767px) {
  /* the hero's signals give way to the trail beneath the frame, which names
     the same four: at this width their names would crowd the photograph */
  .hosp-marks { display: none; }
  .hosp-window { border-radius: 22px; }
  /* the stay: five frames, five moments, one after another; no sticky stage */
  .hosp-moment { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 4vw, 22px); }
  .hosp-frame { aspect-ratio: 4 / 3; }
  /* the section keeps its three floors; the operations tighten to fit */
  .hosp-assembly__core { width: 220px; margin-bottom: 30px; }
  .hosp-core-line { top: -30px; }
  .hosp-plates { gap: 8px; }
  .hosp-plate {
    justify-content: center;
    width: 100%;
    padding: 8px 6px;
    font-size: 13px;
    white-space: normal;
    text-align: center;
  }
  .hosp-plate__tick { display: none; }
  /* the record between the areas, all in one column */
  .hosp-ledger { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hosp-feeds { padding: 0; gap: 20px; }
  .hosp-feeds--left { text-align: left; margin-bottom: 26px; }
  .hosp-feeds--right { margin-top: 26px; }
  .hosp-feed { display: none; }
  /* the flow runs down the page instead of across it */
  .hosp-flow__steps { grid-template-columns: minmax(0, 1fr); --flow-gap: 26px; }
  .hosp-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .hosp-step__mark { grid-row: span 2; margin: 0; }
  .hosp-step:not(:last-child)::after {
    top: 52px;
    bottom: calc(var(--flow-gap) * -1 + 8px);
    left: 21.5px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, #93C5FD, #4DA8FF);
    transform-origin: top;
  }
  .hosp-motion .hosp-step:not(:last-child)::after { transform: scaleY(0); }
  .hosp-motion .hosp-step.is-linked::after { transform: scaleY(1); }
  .hosp-picture { padding: 20px 18px 10px; }
  .hosp-prow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* the foundation first, then the capabilities as one connected column */
  .hosp-cf__stage { aspect-ratio: auto; padding-top: 4px; }
  .hosp-cf__svg { display: none; }
  /* centred on the foundation: 4px stage padding + half its 110px height */
  .hosp-cf__lily { top: 59px; width: 200px; }
  .hosp-cf__petal { left: calc(50% - 19px); top: calc(50% - 84px); width: 38px; height: 84px; }
  .hosp-cf__core {
    position: relative;
    left: auto;
    top: auto;
    width: 230px;
    height: 110px;
    margin: 0 auto 30px;
    transform: none;
  }
  .hosp-cf__caps {
    position: relative;
    display: grid;
    gap: 14px;
    max-width: 320px;
    margin: 0 auto;
    padding-left: 26px;
  }
  .hosp-cf__caps::before {
    content: "";
    position: absolute;
    left: 4px;
    top: -30px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg, rgba(37, 99, 235, .6), rgba(37, 99, 235, .2));
  }
  .hosp-cf__cap, .hosp-cf__cap--t, .hosp-cf__cap--b {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    font-size: 13px;
  }
  .hosp-cf__cap::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: #2563EB;
  }
  .hosp-motion .hosp-cf__cap { opacity: 0; transform: translate3d(0, 10px, 0); }
  .hosp-motion .v2.is-in .hosp-cf__cap {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease calc(var(--k, 0) * .06s + .2s),
                transform .6s var(--hosp-ease) calc(var(--k, 0) * .06s + .2s);
  }
  .hosp-ai__copy .hosp-link { padding-block: 10px; }
}
@media (max-width: 420px) {
  .hosp-trail { gap: 8px 12px; }
  .hosp-trail__step { padding-left: 24px; letter-spacing: .08em; }
  .hosp-trail__step::before { left: 5px; width: 12px; }
}


/* ========================================================== reduced motion
   Nothing here needs undoing: without .hosp-motion every composition is
   already its finished, still form. Only the CSS entrances need stopping. */
@media (prefers-reduced-motion: reduce) {
  .hosp-window img, .hosp-mark, .hosp-trail__step { transform: none !important; transition: none !important; }
  .hosp-window__light, .hosp-mark__dot { animation: none !important; }
  .hosp-step, .hosp-step::after { transition: none !important; }
  .hosp-stage { transform: none !important; }
}