/* ==========================================================================
   HOME PREMIUM PASS — 27 Aug 2026 (Aarav's desktop review).
   Loaded LAST on the homepage. The earlier home layers fight with
   `html body[data-page="home"] … !important` nukes, so every load-bearing
   rule here carries the same pattern — last file wins the tie.

   The brief, in his words:
   - the background video is stretched past its quality → cap the hero at the
     film's native width, as a floating island;
   - white / grey / "normal red blue" fields look cheap → one premium palette:
     a green-mist page field, warm-paper islands, deep bottle-green plates
     with champagne and gold;
   - wasted space beside the assistant → the band becomes a full two-side
     lockup on a bottle-green plate;
   - everything touches → every band is an island with real field showing
     between hero ↔ sections ↔ footer;
   - the reviews line gets the Google mark.
   ========================================================================== */

html body[data-page="home"] {
  --hpp-field: #d9e5e0;
  --hpp-field-deep: #cfdfd8;
  --hpp-paper: #f5eddc;
  --hpp-paper-soft: #f8f2e6;
  --hpp-bottle: #123329;
  --hpp-bottle-deep: #0c241d;
  --hpp-cream: #f7f1e4;
  --hpp-champagne: #e9cf9f;
  --hpp-gold: #c5a66a;
  --hpp-ink: #14271f;
  --hpp-radius: 30px;
  --hpp-shadow: 0 34px 90px -52px rgb(10 30 24 / 55%);
  --hpp-island-w: min(1728px, calc(100% - clamp(2rem, 4vw, 5.5rem)));
  --hpp-gap: clamp(2.6rem, 3.5vw, 4.25rem);
  background:
    radial-gradient(120% 90% at 50% -10%, rgb(255 255 255 / 45%) 0%, rgb(255 255 255 / 0%) 55%),
    linear-gradient(180deg, var(--hpp-field) 0%, var(--hpp-field-deep) 100%) !important;
}

/* ------------------------------- the hero ------------------------------- */
/* The films are 1728px plates; full-bleed on a wide monitor upscaled them
   and cost the sharpness Aarav noticed. The hero becomes a capped island. */
html body[data-page="home"] .hxo2--split {
  width: var(--hpp-island-w) !important;
  max-width: none !important;
  margin: clamp(1.4rem, 2vw, 2.2rem) auto var(--hpp-gap) !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}
html body[data-page="home"] .hxo2__plate {
  width: 100% !important;
  border-radius: var(--hpp-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--hpp-shadow) !important;
}

/* ------------------------- every band = an island ------------------------ */
html body[data-page="home"] #assistant.hx-band,
html body[data-page="home"] #routes.hx-band,
html body[data-page="home"] #reviews.band.band--reviews,
html body[data-page="home"] #portals.band.band--creds,
html body[data-page="home"] #contact.band.band--contact {
  width: var(--hpp-island-w) !important;
  max-width: none !important;
  margin-inline: auto !important;
  margin-block: var(--hpp-gap) !important;
  border-radius: var(--hpp-radius) !important;
  box-shadow: var(--hpp-shadow) !important;
  overflow: hidden;
}

/* the footer stands clear of the last island */
html body[data-page="home"] .site-foot { margin-top: var(--hpp-gap) !important; }

/* -------------------- 01 · the assistant, bottle-green ------------------- */
html body[data-page="home"] #assistant.hx-band.hx-band--assistant {
  background:
    radial-gradient(110% 140% at 88% -20%, rgb(233 207 159 / 16%) 0%, rgb(233 207 159 / 0%) 55%),
    linear-gradient(160deg, #17493a 0%, var(--hpp-bottle) 46%, var(--hpp-bottle-deep) 100%) !important;
  padding-block: clamp(3rem, 4vw, 4.25rem) !important;
}
html body[data-page="home"] #assistant.hx-band--assistant::before,
html body[data-page="home"] #assistant.hx-band--assistant::after { content: none !important; }
html body[data-page="home"] #assistant .chapter__index,
html body[data-page="home"] #assistant .chapter__label { color: var(--hpp-champagne) !important; }
html body[data-page="home"] #assistant .chapter__rule { background: rgb(233 207 159 / 45%) !important; }

/* the stage stops centring a lonely pair: title left, action right */
html body[data-page="home"] #assistant .asst-min.asst-min .asst-min__stage {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(1.5rem, 3vw, 3rem) !important;
  flex-wrap: wrap;
  width: 100% !important;
  max-width: none !important;
  margin: clamp(1.2rem, 1.8vw, 1.8rem) 0 0 !important;
}
html body[data-page="home"] #assistant .asst-min__title {
  margin: 0 !important;
  color: var(--hpp-cream) !important;
  text-align: left !important;
}
html body[data-page="home"] #assistant .asst-min__title br { display: none !important; }
html body[data-page="home"] #assistant .asst-min__cta {
  background: linear-gradient(160deg, #f2e3c4, var(--hpp-champagne)) !important;
  color: var(--hpp-ink) !important;
  border: 0 !important;
  box-shadow: 0 18px 44px -22px rgb(5 20 15 / 70%) !important;
}
html body[data-page="home"] #assistant .asst-min__cta:hover {
  background: linear-gradient(160deg, #f7ecd7, #ecd7ae) !important;
  color: var(--hpp-ink) !important;
}

/* ------------------------ 02 · routes on warm paper ---------------------- */
html body[data-page="home"] #routes.hx-band.hx-band--clay {
  background:
    radial-gradient(120% 120% at 10% -20%, rgb(255 255 255 / 55%) 0%, rgb(255 255 255 / 0%) 55%),
    linear-gradient(175deg, var(--hpp-paper-soft) 0%, var(--hpp-paper) 100%) !important;
  padding-block: clamp(3rem, 4vw, 4.25rem) !important;
}
/* one rich plate family instead of navy / red / slate */
html body[data-page="home"] #routes .hx-route.hx-route--forest,
html body[data-page="home"] #routes .hx-route.hx-route--bronze,
html body[data-page="home"] #routes .hx-route.hx-route--slate {
  background: linear-gradient(168deg, #1a4a3b 0%, var(--hpp-bottle) 48%, var(--hpp-bottle-deep) 100%) !important;
}
html body[data-page="home"] #routes .hx-route .hx-route__audience { color: var(--hpp-champagne) !important; }
html body[data-page="home"] #routes .hx-route .hx-chip--gold {
  background: linear-gradient(160deg, #f2e3c4, var(--hpp-champagne)) !important;
  color: var(--hpp-ink) !important;
}

/* ------------------------ 03 · reviews on warm paper --------------------- */
html body[data-page="home"] #reviews.band.band--reviews {
  background: linear-gradient(180deg, var(--hpp-paper-soft) 0%, var(--hpp-paper) 100%) !important;
}
html body[data-page="home"] .rw2__glogo {
  display: inline-grid !important;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 0.15rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px -8px rgb(10 30 24 / 40%);
  vertical-align: middle;
}
html body[data-page="home"] .rw2__glogo svg { width: 18px; height: 18px; }

/* ----------------------- 04 · memberships, green mist -------------------- */
html body[data-page="home"] #portals.band.band--creds {
  background: linear-gradient(180deg, #eaf1ec 0%, #dfeae3 100%) !important;
}

/* -------------------- 05 · contact goes green-ink ------------------------ */
html body[data-page="home"] #contact.band.band--contact {
  background:
    radial-gradient(120% 130% at 85% -15%, rgb(233 207 159 / 10%) 0%, rgb(233 207 159 / 0%) 55%),
    linear-gradient(165deg, #14453c 0%, #0f332a 45%, var(--hpp-bottle-deep) 100%) !important;
}

/* -------------------------------- phones -------------------------------- */
@media (max-width: 47.99em) {
  html body[data-page="home"] {
    --hpp-island-w: calc(100% - 1.4rem);
    --hpp-gap: 1.6rem;
    --hpp-radius: 22px;
  }
  html body[data-page="home"] #assistant .asst-min.asst-min .asst-min__stage { justify-content: center !important; }
  html body[data-page="home"] #assistant .asst-min__title { text-align: center !important; }
}

/* contact inners: the ledger and guide cards were navy tints on what is now
   a green-ink plate - they take the same family. */
html body[data-page="home"] #contact .hx27__ledger,
html body[data-page="home"] #contact .hx27__card,
html body[data-page="home"] #contact .hx27__guide,
html body[data-page="home"] #contact .hx27-row,
html body[data-page="home"] #contact [class*="hx27__panel"] {
  background: rgb(7 26 20 / 42%) !important;
  border-color: rgb(233 207 159 / 14%) !important;
}
html body[data-page="home"] #contact .hx27__kicker { color: var(--hpp-champagne) !important; }
html body[data-page="home"] #contact .action-panel {
  background: rgb(7 26 20 / 42%) !important;
  border-color: rgb(233 207 159 / 14%) !important;
}