@import "./site.css";

/* ==========================================================================
   Home
   The one page that does not follow a tier.

   Everything here is scoped to .home — the class sits on the body of / and
   nowhere else — so no rule in this file can reach another page. site.css is
   imported rather than copied, which keeps the chrome, the type scale and
   every shared component common; this file only holds what the home page
   does differently.
   ========================================================================== */

/* ---- 1. The stage -------------------------------------------------------
   Full viewport, edge to edge, with the bar sitting on it rather than above
   it — which is what "full viewport" has to mean, or the video starts 56px
   down the screen behind a white strip.

   svh, not vh: on mobile Safari and Chrome vh is the *largest* viewport, so
   100vh leaves the bottom of the stage under the browser's own chrome until
   you scroll. svh is the smallest state, so the stage fits on arrival.
   ------------------------------------------------------------------------ */

.home .stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--asphalt);
}

.home .stage__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The footage runs bright — white walls, lit screens — so the bottom edge has
   to be brought down for the type to sit on. A gradient only, not a filter on
   the video: darkening the whole frame would flatten the picture, where this
   leaves the top two thirds at full strength and shades only the band the
   words occupy. Stops are weighted low so the transition is invisible.

   Sits above the video and below the content. */
.home .stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(8, 8, 12, 0.92) 0%,
    rgba(8, 8, 12, 0.78) 14%,
    rgba(8, 8, 12, 0.45) 30%,
    rgba(8, 8, 12, 0.12) 48%,
    rgba(8, 8, 12, 0) 62%
  );
}

/* ---- 2. What sits on it ----
   Bottom-anchored and on the shell, so the headline shares its left edge with
   the logo above it and every section below. Add .stage--center to the
   section to centre the whole block instead.
   ------------------------------------------------------------------------ */

.home .stage__in {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 100svh;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--nav-h) var(--pad) clamp(3rem, 7vh, 5.5rem);
  color: #fff;
  text-align: left;
}

.home .stage--center .stage__in { align-items: center; text-align: center; }

.home .stage__eyebrow {
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.74);
}

.home .stage__h {
  margin-top: 0.625rem;
  max-width: 18ch;
  font-family: var(--display);
  font-size: clamp(2.375rem, 5.6vw, 5.5rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.home .stage__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  margin-top: 2.25rem;
}

/* Same shared height as the closing rows. No fill on this one: the stage sits
   over moving footage, and a flat dark pill would punch a hole in it. The
   video itself gives the outline enough to sit on. */
.home .stage__actions .stage__cta,
.home .stage__actions .btn { min-height: var(--cta-h); }

@media (max-width: 639px) {
  .home .stage__actions { width: 100%; }
  .home .stage__actions > * { width: 100%; justify-content: center; }
}

/* ---- 2. Highlights -----------------------------------------------------
   A snap carousel rather than a grid: four claims that each stand alone, read
   one at a time, with the neighbours showing at both edges so the row is
   obviously a row. Still dark — the page hands over to the light theme after
   this, not before.
   ------------------------------------------------------------------------ */

.home .reel { background: var(--asphalt); color: #fff; padding-block: 6rem 4rem; overflow: hidden; }
@media (min-width: 768px) { .home .reel { padding-block: 8rem 5rem; } }

.home .reel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.home .reel__title {
  font-family: var(--display);
  font-size: clamp(2rem, 4.4vw, 3.75rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
}

/* Native snap does the physics — drag, swipe, momentum and keyboard all come
   free, and the script only has to keep the dots in step. The inline padding
   is what makes the neighbours peek: a card is centred in the viewport, so
   whatever is left over either side shows the next and previous. */
.home .reel__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-inline: max(var(--pad), calc((100% - min(72rem, 88vw)) / 2));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.home .reel__track::-webkit-scrollbar { display: none; }
.home .reel__track:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.home .reel__card {
  position: relative;
  flex: 0 0 min(72rem, 88vw);
  scroll-snap-align: center;
  aspect-ratio: 16 / 10;
  max-height: 72vh;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #111;
}
@media (max-width: 767px) { .home .reel__card { aspect-ratio: 4 / 5; } }

.home .reel__card img { width: 100%; height: 100%; object-fit: cover; }

/* Weighted to the left, where the words are, so the right of the picture
   stays open. */
.home .reel__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(8, 8, 12, 0.88) 0%, rgba(8, 8, 12, 0.6) 38%, rgba(8, 8, 12, 0.05) 70%);
}
@media (max-width: 767px) {
  .home .reel__card::after {
    background: linear-gradient(to top, rgba(8, 8, 12, 0.9) 0%, rgba(8, 8, 12, 0.45) 40%, rgba(8, 8, 12, 0) 72%);
  }
}

.home .reel__copy {
  position: absolute;
  z-index: 1;
  left: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 24ch;
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.72);
}
.home .reel__copy b { display: block; font-weight: 700; color: #fff; }

.home .reel__foot { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.25rem; }

.home .reel__dots { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.1); }

/* The active dot stretches rather than changing colour alone, so position in
   the set is readable at a glance and not only by contrast. */
.home .reel__dot {
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.4);
  transition: width 0.4s var(--ease), background-color 0.4s var(--ease);
}
.home .reel__dot.is-on { width: 26px; background: #fff; }
.home .reel__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.home .reel__play {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background-color 0.3s var(--ease);
}
.home .reel__play:hover { background: rgba(255, 255, 255, 0.2); }
.home .reel__play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.home .reel__play svg { width: 15px; height: 15px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .home .reel__track { scroll-behavior: auto; }
}

/* The dark run is a wrapper, not a surface — each section inside paints its
   own ground. It exists so the bar has one element to watch, which is what
   makes the flip land on the cut rather than one section early. */
.home .dark { position: relative; background: var(--asphalt); }

/* ---- 3. The handover ---------------------------------------------------
   A hard edge, not a fade. Dark is the room and light is the information, so
   the change of subject deserves to be visible — a gradient between them
   blurs the one moment on the page that should be sharp, and spends most of
   a screen doing it.
   ------------------------------------------------------------------------ */

/* The reel ends the dark run, so it keeps a normal closing margin. */
.home .reel { padding-bottom: 4.5rem; }
@media (min-width: 768px) { .home .reel { padding-bottom: 6rem; } }

/* ---- 4. Proof ----------------------------------------------------------
   The page has made four claims and offered three routes without proving
   anything. Scale first, then the people who were here.

   No cards. Every section since the stage has been a grid of them, and the
   numbers are the one piece of content that gets louder the plainer it is
   set — a figure in a box is a statistic, a figure at headline scale on
   white is a fact.
   ------------------------------------------------------------------------ */

/* Opens straight onto the figures, so it carries the top space the heading
   used to provide. */
.home .proof { padding-block: clamp(5rem, 10vw, 9rem); }

/* Label above, figure, caption below — the reference's arrangement. It reads
   as a row of small quiet type rather than a fourth grid of cards, which is
   what makes it sit comfortably under the three path cards above instead of
   repeating them. Centred, uncarded, and given a lot of room. */
.home .tally {
  display: grid;
  gap: clamp(3rem, 6vw, 4rem);
  text-align: center;
}
@media (min-width: 768px) { .home .tally { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.home .tally__item { display: flex; flex-direction: column; align-items: center; }

.home .tally__k {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
}

.home .tally__v {
  margin: 0.375rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.5rem, 4.6vw, 3.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  /* Tabular figures so the digits do not jostle while counting up. */
  font-variant-numeric: tabular-nums;
}

.home .tally__l {
  margin: 0.625rem 0 0;
  max-width: 22ch;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink-2);
}

/* ---- The quote ----
   One voice at size, not three in a row. Three would have been a fourth
   three-column grid in a row, and a single review read properly carries
   more than three skimmed. The count after the name is what makes it a
   sample rather than a cherry-pick.
   ------------------------------------------------------------------------ */

.home .says {
  max-width: 52ch;
  margin: clamp(4rem, 8vw, 6.5rem) auto 0;
  text-align: center;
}

.home .says__stars { justify-content: center; }

.home .says__stars { display: flex; gap: 3px; color: var(--accent); margin-bottom: 1.25rem; }
.home .says__stars[data-stars="4"] svg:nth-child(5),
.home .says__stars[data-stars="3"] svg:nth-child(n + 4),
.home .says__stars[data-stars="2"] svg:nth-child(n + 3),
.home .says__stars[data-stars="1"] svg:nth-child(n + 2) { display: none; }
.home .says__stars svg { width: 17px; height: 17px; }

.home .says p {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.home .says footer { margin-top: 1.5rem; font-size: 1rem; color: var(--ink-2); }

/* ---- 6. The reassurance ------------------------------------------------
   Four readers, one answer. Cards rather than an accordion: each of these is
   written for a different person, so putting three behind a click means most
   readers never reach the one meant for them.

   Four columns, not three — the section above it is a three-up, and the page
   had started to settle into one rhythm.
   ------------------------------------------------------------------------ */

.home .belong__head { max-width: none; }
@media (min-width: 1024px) { .home .belong__head { max-width: 75%; } }

.home .belong__grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px)  { .home .belong__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .home .belong__grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }

/* Grey fill on a white ground, so the cards read without a border. The white
   fill the other card sets use would vanish here. */
.home .belong__card {
  background: var(--grey);
  border-radius: 22px;
  padding: 1.75rem;
}

.home .belong__k {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.home .belong__card h3 {
  margin-top: 1rem;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.home .belong__card p:last-child {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ---- The panel's own edge ----
   The shared glass surface is pinned at top: var(--nav-h), so its top edge
   and the bar's bottom edge are the same line. Two things made that line
   visible here but not on the live site.

   Its shadow is 0 26px 60px: a 60px blur against a 26px drop, so roughly
   34px of it falls ABOVE the surface. On the live site the opaque white bar
   covers that. Here the bar is transparent over the stage, so the bleed
   showed as a dark band — and since the surface slides in from -8px, the
   band slid with it. Negative spread keeps the shadow below where it
   belongs.

   The slide goes too. Panel content and bar are both instant now, so an
   8px-travelling surface was the only thing still moving, which is what drew
   the eye to the edge in the first place.
   ------------------------------------------------------------------------ */

.home .mega::after {
  box-shadow: 0 26px 48px -22px rgba(16, 16, 24, 0.22);
  transform: none;
}

.home .mega:hover::after,
.home .mega:focus-within::after { transform: none; transition: opacity 0.18s var(--ease), visibility 0.18s; }

/* ---- 7. The ask --------------------------------------------------------
   Dark again, on a hard edge, bookending the stage. Flat rather than
   photographic: the page has already spent a video, four photo cards and
   three path shots, so the close earns more by being the one quiet surface
   than by adding a ninth image.

   It is also the only ground left where the glow button works — the effect
   needs the fill to be darker than the ring, which no light section can
   give it. Putting it here means the page opens and closes on the same
   gesture, and uses it exactly twice.
   ------------------------------------------------------------------------ */

.home .finish {
  background: var(--asphalt);
  color: #fff;
  padding-block: clamp(6rem, 13vw, 11rem);
  text-align: center;
}

/* The shell caps the measure; everything inside centres within it. */
.home .finish__in { display: flex; flex-direction: column; align-items: center; }

.home .finish__h {
  font-family: var(--display);
  font-size: clamp(2.75rem, 7vw, 6rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.home .finish__p {
  margin: 1.75rem auto 0;
  max-width: 42ch;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.home .finish__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 2.5rem;
}
/* Same pairing as .close__row, same shared height rather than matched padding:
   the outline has a border and the lit pill does not. The outline stays
   transparent — it is an outline. */
.home .finish__actions .stage__cta,
.home .finish__actions .btn { min-height: var(--cta-h); }

/* ---- The practical panel ----
   One pane with internal rules rather than three separate cards: these are
   three facts about one place, not three offers. Hours come from the HOURS
   array the footer renders, so the two can never disagree.
   ------------------------------------------------------------------------ */

.home .facts3 {
  display: grid;
  width: 100%;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
@media (min-width: 768px) { .home .facts3 { grid-template-columns: repeat(3, 1fr); } }

.home .facts3__cell { padding: clamp(1.5rem, 3vw, 2.25rem) 1.5rem; text-align: center; }

/* Hairlines between, never around: a border on every cell would double up at
   the joins and box the outer edge twice. */
.home .facts3__cell + .facts3__cell { border-top: 1px solid rgba(255, 255, 255, 0.14); }
@media (min-width: 768px) {
  .home .facts3__cell + .facts3__cell {
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }
}

.home .facts3 dt {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

.home .facts3 dd {
  display: grid;
  gap: 0.3125rem;
  margin: 0.875rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  font-variant-numeric: tabular-nums;
}

.home .facts3 dd a { color: inherit; }
.home .facts3 dd a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.home .facts3 .is-closed { color: rgba(255, 255, 255, 0.52); }

@media (max-width: 639px) {
  .home .finish__actions { width: 100%; }
  .home .finish__actions > * { width: 100%; justify-content: center; }
}