/* Home - Framer redo (BRIEF 1218803133929418, ticket 1218802427802298).
   The band layout for site_home.html, measured against the approved renders
   (02_page renders/01 home at 1440/810/390) and the build spec (12_build spec,
   path "/"): fills, vertical padding and gaps per breakpoint. The moving parts
   are the Framer component ports (css/framer/*); this sheet only places them.
   Breakpoints are Framer's: desktop >=1440, tablet 810-1439.98, phone <=809.98.

   Framer's 64px header floats over the hero; shop2's header is solid and sits
   above it (header stays as built), so the 100vh hero loses those 64px. */

/* ---------------------------------------------------------------- hero
   The film only: nothing is laid over it but its own controls (Clark
   2026-09-23 - the film carries its own words). Edge fades X 15%/85% and
   Y 14%/86% to the inverse ground, a vertical scrim, a static light sweep and
   a static scroll cue - the Framer layers, none of them animated. On phones
   the band collapses to the film's own 16:9 (ticket 1218800308808840). */
.jifu-home-film {
  position: relative;
  height: calc(100vh - 64px);
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: var(--jifu-midnight-well, rgb(8, 8, 8));
}
.jifu-home-film .fr-film { position: absolute; inset: 0; aspect-ratio: auto !important; height: 100%; }
.jifu-home-film .fr-film__controls { z-index: 3; }
.jifu-home-film__layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.jifu-home-film__fade-x {
  background: linear-gradient(90deg, var(--jifu-inverse-ground, rgb(15, 15, 15)) 0%, transparent 15%, transparent 85%, var(--jifu-inverse-ground, rgb(15, 15, 15)) 100%);
}
.jifu-home-film__fade-y {
  background: linear-gradient(180deg, var(--jifu-inverse-ground, rgb(15, 15, 15)) 0%, transparent 14%, transparent 86%, var(--jifu-inverse-ground, rgb(15, 15, 15)) 100%);
}
.jifu-home-film__scrim {
  background: linear-gradient(rgba(15, 15, 15, .2) 0%, rgba(15, 15, 15, .18) 55%, rgba(15, 15, 15, .62) 100%);
}
.jifu-home-sweep {
  mix-blend-mode: screen;
  background: linear-gradient(107deg, transparent 0% 38%, rgba(244, 241, 234, .05) 38% 45%, rgba(168, 205, 232, .04) 45% 52%, transparent 52% 100%);
}
.jifu-home-film__cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 2;
  width: 14px;
  height: 24px;
  margin-left: -7px;
  border: 1.5px solid rgba(244, 241, 234, .55);
  border-radius: 999px;
  pointer-events: none;
}
@media (max-width: 809.98px) {
  .jifu-home-film { height: auto; min-height: 0; }
  .jifu-home-film .fr-film { position: relative; inset: auto; aspect-ratio: 16 / 9 !important; height: auto; }
  .jifu-home-film .jifu-home-sweep, .jifu-home-film__cue { display: none; }
}

/* -------------------------------------------------------------- moments
   White ground, as the render has it; the rail is the MomentsRail port. */
.jifu-home-moments { background: var(--jifu-ground, rgb(255, 255, 255)); }
/* The pinned stage clears Framer's 64px floating header by design; shop2's
   sticky header is two rows (~120px) from 810 up, so the heading gets that
   difference back or it slides under the header while pinned. */
@media (min-width: 810px) and (prefers-reduced-motion: no-preference) {
  .jifu-home-moments .fr-momentsrail__stage { padding-top: calc(max(15vh, 8rem) + 64px); }
}
/* ASANA:1218941467048034: the stage is 100vh and lays head + cards from its
   foot, but the cards were a fixed 372 x 496px, so on a short display head +
   cards no longer fit, the overflow went out of the TOP and "Unlock the
   World" slid under the hero film. Two parts:
   1. the cards shrink with the viewport height so the stage fits: the card
      height is 100vh less everything else on the stage (its paddings, the
      head-to-track gap, and 151px of heading + link + track padding,
      measured), floored at 200px wide (the narrowest width whose back face still fits its copy);
   2. below that floor `safe` alignment sends any overflow to the bottom, so
      the heading always keeps its top padding clear of the film. */
@media (min-width: 810px) and (prefers-reduced-motion: no-preference) {
  .jifu-home-moments .fr-momentsrail__card {
    width: clamp(200px, calc((100vh - max(15vh, 8rem) - 64px - clamp(3.25rem, 8vh, 5.5rem) - max(5vh, 2rem) - 151px) * .75), var(--fr-momentsrail-card-w));
  }
}
/* Clark 2026-09-30 (phones): the sticky Join bar (framer/joinbar.css, ~47px)
   sat over the foot of the cards - at 390x844 the card bottom and the bar
   top met at the same pixel, and the centred card's 1.12 sweep scale pushed
   its caption under the bar. The stage keeps the bar's height clear at its
   foot and the head gives up its spare air (stage top padding, head-to-track
   gap, "Learn more" margin, track padding) so the cards still fit at full
   size. The width formula subtracts the same pieces: 114px is heading + link +
   the 28px track paddings, measured. Motion-on only: with reduced motion the
   rail is a plain unpinned scroller (momentsrail.css) and the reserve would
   just be white space under the cards. */
@media (max-width: 809.98px) and (prefers-reduced-motion: no-preference) {
  .jifu-home-moments .fr-momentsrail__stage {
    gap: 1.25rem;
    padding: max(9vh, 5.5rem) 0 calc(max(4vh, 1.5rem) + 50px);
  }
  .jifu-home-moments .fr-momentsrail__headlink { margin-top: 0.9rem; }
  .jifu-home-moments .fr-momentsrail__track { padding: 28px 0; }
}
@media (max-width: 809.98px) and (prefers-reduced-motion: no-preference) {
  .jifu-home-moments .fr-momentsrail__card {
    width: clamp(200px, calc((100vh - max(9vh, 5.5rem) - 1.25rem - max(4vh, 1.5rem) - 50px - 114px) * .75), var(--fr-momentsrail-card-w));
  }
}
.jifu-home-moments .fr-momentsrail__stage { justify-content: safe flex-end; }
@media (max-width: 809.98px) {
  .jifu-home-moments .fr-momentsrail__stage { justify-content: safe center; }
}
/* ASANA:1218997112580954 (prod 390 crawl): on a phone the rail kept the
   desktop 440vh of pinned scroll (~3,700px at 390x844) to sweep a ~1,160px
   track, so the reader thumbed through screen after screen of nearly still
   white between "Unlock the World" and the Lifestyle intro. 220vh keeps the
   full sweep (momentsrail.js reads the section's real height) at about half
   the scroll. !important because the macro writes the height inline. */
@media (max-width: 809.98px) and (prefers-reduced-motion: no-preference) {
  .jifu-home-moments .fr-momentsrail { height: 220vh !important; }
}
/* WCAG AA on the card captions (T3 round 2, photo probe): the port's scrim
   fades from .85 at the foot of the caption block to 0 at its top, and the
   caption line sits where it is already thin - over the bright sky and white
   gym photos "More adventure, less cost." read median 4.14 with 54% of its
   glyph pixels under 4.5. Home holds the scrim at ~.8 under the caption line
   and fades only above it (the chip has its own opaque pill). */
.jifu-home-moments .fr-momentsrail__cap {
  background: linear-gradient(to top, rgba(15, 15, 15, .9) 0%, rgba(15, 15, 15, .8) 55%, rgba(15, 15, 15, 0) 100%);
}

/* ---------------------------------------------------------------- intro
   The page's H1, centred, over the ImageTrail sheet. Build spec: padding
   101 / 88 / 56 (14 at the sides on phones), gap 48 / 48 / 24. */
.jifu-home-intro {
  position: relative;
  overflow: hidden;
  background: var(--jifu-ground, rgb(255, 255, 255));
  padding-block: 101px;
  text-align: center;
}
.jifu-home-intro__shell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.jifu-home-intro__lede { max-width: 52ch; color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
.jifu-home-intro__trail { position: absolute; inset: 0; z-index: 1; }
.jifu-home-accent { color: var(--jifu-accent-text, rgb(139, 109, 85)); }
@media (max-width: 1439.98px) { .jifu-home-intro { padding-block: 88px; } }
@media (max-width: 809.98px) {
  .jifu-home-intro { padding-block: 56px; }
  .jifu-home-intro__shell { gap: 24px; }
}

/* ----------------------------------------------------------- membership
   Inverse ground (rgb 15). Four parchment plates, each a photo with the
   pillar lockup (JIFU / <pillar>) under it; hover lifts the plate. The even
   plates sit higher, as the render staggers them. */
.jifu-home-membership {
  background: var(--jifu-inverse-ground, rgb(15, 15, 15));
  padding-block: 68px;
}
.jifu-home-membership__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 56px; }
.jifu-home-plates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.jifu-home-plate {
  display: block;
  padding: 10px 10px 18px;
  background: var(--jifu-ground-raised, rgb(244, 241, 234));
  color: var(--jifu-ink, rgb(25, 25, 25));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  transition: transform 320ms cubic-bezier(.16, 1, .3, 1);
}
.jifu-home-plate:nth-child(2n) { margin-top: -16px; }
/* ASANA:1218941418355152 (Weston): a thin pillar-accent line along the foot
   of each plate - Travel Meridian Teal, Health Apple Green, Education Blue,
   Community Wild Papaya (the jifu.css pillar tokens). */
.jifu-home-plate { border-bottom: 3px solid var(--jifu-home-plate-accent, transparent); }
.jifu-home-plate--travel { --jifu-home-plate-accent: var(--jifu-accent-travel, rgb(0, 229, 199)); }
.jifu-home-plate--health { --jifu-home-plate-accent: var(--jifu-accent-health, rgb(139, 197, 61)); }
.jifu-home-plate--education { --jifu-home-plate-accent: var(--jifu-accent-education, rgb(74, 144, 226)); }
.jifu-home-plate--community { --jifu-home-plate-accent: var(--jifu-accent-community, rgb(255, 122, 69)); }
.jifu-home-plate__media { aspect-ratio: 4 / 3; overflow: hidden; }
.jifu-home-plate__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 640ms cubic-bezier(.16, 1, .3, 1); }
.jifu-home-plate__jifu { margin-top: 12px; font-size: 7px; font-weight: 700; letter-spacing: .2em; }
.jifu-home-plate__name { font-family: var(--jifu-font-display); font-weight: 700; font-size: 25.2px; line-height: 1; text-transform: uppercase; }
/* SHOP2 review sheet (Xana, 2026-09-30) "JIFU ecosystem": on hover the whole
   card moves slightly up AND to the right while the photo gently zooms in
   (jifu.framer.website is the reference). */
@media (hover: hover) {
  .jifu-home-plate:hover { transform: translate(8px, -8px); }
  .jifu-home-plate:hover .jifu-home-plate__media img { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .jifu-home-plate, .jifu-home-plate__media img { transition: none; }
  .jifu-home-plate:hover { transform: none; }
  .jifu-home-plate:hover .jifu-home-plate__media img { transform: none; }
}
@media (max-width: 1439.98px) { .jifu-home-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809.98px) {
  .jifu-home-membership { padding-block: 56px; }
  .jifu-home-membership__head { margin-bottom: 32px; }
  .jifu-home-plates { gap: 12px; }
  .jifu-home-plate:nth-child(2n) { margin-top: 0; }
  .jifu-home-plate__name { font-size: 18px; }
}

/* ---------------------------------------------------------------- story
   Two light rows: photo left / copy right (Our Mission), then copy left /
   photo right (Our Vision). Padding 158 / 96 / 56, row gap 88 / 56 / 36. */
/* ASANA:1218941418355156 (Weston): the gap between Our Vision and Check Out
   Our Journey is halved - each side of the seam gives up half its padding
   (158+158 -> 79+79; 96+96 -> 48+48; 56+56 -> 28+28). */
.jifu-home-story { background: var(--jifu-ground, rgb(255, 255, 255)); padding-block: 158px 79px; }
.jifu-home-story__rows { display: flex; flex-direction: column; gap: 88px; }
/* SHOP2 review sheet (Xana, 2026-09-30) "Our Mission" / "Our Vision": the
   photo fits the window and fills its full width. Each row is now the photo
   edge to edge (a wide 21:9 fit, height capped) with the copy under it;
   phones keep the photo inside the gutters (the sheet marks mobile "no"). */
.jifu-home-story__row { display: flex; flex-direction: column; gap: 32px; }
.jifu-home-story__media { aspect-ratio: 21 / 9; max-height: 640px; overflow: hidden; }
.jifu-home-story__media img { width: 100%; height: 100%; object-fit: cover; }
.jifu-home-story__copy { display: flex; flex-direction: column; gap: 14px; max-width: 40rem; }
@media (min-width: 810px) {
  .jifu-home-story__media { width: 100vw; margin-inline: calc(50% - 50vw); }
}
.jifu-home-story__lines { color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
.jifu-home-story__lines strong { color: var(--jifu-ink, rgb(25, 25, 25)); font-weight: 700; }
@media (max-width: 1439.98px) {
  .jifu-home-story { padding-block: 96px 48px; }
  .jifu-home-story__rows { gap: 56px; }
  .jifu-home-story__row { gap: 28px; }
}
@media (max-width: 809.98px) {
  .jifu-home-story { padding-block: 56px 28px; }
  .jifu-home-story__rows { gap: 36px; }
  .jifu-home-story__row { gap: 20px; }
}

/* ----------------------------------------------------------- milestones
   The MilestoneRail port under its head. Padding 158 / 96 / 56. */
.jifu-home-milestones { background: var(--jifu-ground, rgb(255, 255, 255)); padding-block: 79px 158px; }
.jifu-home-milestones__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; }
@media (max-width: 1439.98px) { .jifu-home-milestones { padding-block: 48px 96px; } }
@media (max-width: 809.98px) { .jifu-home-milestones { padding-block: 28px 56px; } .jifu-home-milestones__head { margin-bottom: 28px; } }

/* ------------------------------------------------------------- join CTA
   Midnight band over the roadrunner film (a background film: no controls),
   vertical scrim + the static light sweep, copy left and vertically centred. */
.jifu-home-joincta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 900px;
  overflow: hidden;
  isolation: isolate;
  background: var(--jifu-midnight-well, rgb(8, 8, 8));
}
.jifu-home-joincta .fr-film { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto !important; height: 100%; }
.jifu-home-joincta__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* SHOP2 review sheet (Xana, 2026-09-30) "Start your journey": darker.
     Was .78 / .35 / .15; phones (where the copy spans the whole width)
     get a flat, deeper scrim below. */
  background: linear-gradient(90deg, rgba(8, 8, 8, .9) 0%, rgba(8, 8, 8, .62) 60%, rgba(8, 8, 8, .42) 100%);
}
.jifu-home-joincta .jifu-home-sweep { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.jifu-home-joincta__copy { display: flex; flex-direction: column; gap: 22px; max-width: 34rem; }
.jifu-home-joincta__copy .jifu-body-lede { color: var(--jifu-inverse-ink-muted, rgba(244, 241, 234, .66)); }
.jifu-home-joincta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
@media (max-width: 1439.98px) { .jifu-home-joincta { min-height: 720px; } }
@media (max-width: 809.98px) {
  .jifu-home-joincta { min-height: 560px; padding-block: 56px; }
  .jifu-home-joincta__scrim { background: rgba(8, 8, 8, .72); }
  .jifu-home-joincta .jifu-home-sweep { display: none; }
  .jifu-home-joincta__actions .jifu-btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- proof
   Ground-well (rgb 238,234,225). Eight Trustpilot cards in a horizontal
   scroll-snap row (static: it moves only when the visitor scrolls it). */
.jifu-home-proof { background: var(--jifu-ground-well, rgb(238, 234, 225)); padding-block: 48px; }
.jifu-home-proof__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.jifu-home-proof__rail {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0 var(--jifu-gutter) 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.jifu-home-proof__rail::-webkit-scrollbar { display: none; }
/* ASANA:1218941418355160: while home-autoscroll.js glides the rail, snap is
   off (it would pull every sub-pixel step back to a card edge). */
.jifu-home-proof__rail.is-autoscroll { scroll-snap-type: none; }
.jifu-home-proof__card {
  flex: 0 0 clamp(260px, 26vw, 368px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 24px;
  scroll-snap-align: start;
  background: var(--jifu-ground-raised, rgb(244, 241, 234));
  border: 1px solid var(--jifu-rule-soft, rgba(25, 25, 25, .1));
}
.jifu-home-proof__quote { flex: 1; color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
.jifu-home-proof__who { padding-top: 14px; border-top: 1px solid var(--jifu-rule-soft, rgba(25, 25, 25, .1)); }
.jifu-home-proof__name { font-weight: 700; font-size: 13.5px; }
.jifu-home-proof__src { margin-top: 4px; color: var(--jifu-ink-faint, rgba(25, 25, 25, .62)); }
.jifu-home-proof__more { margin-top: 24px; }
.jifu-home-proof__more a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1439.98px) { .jifu-home-proof { padding-block: 96px; } }
@media (max-width: 809.98px) { .jifu-home-proof { padding-block: 56px; } }

/* --------------------------------------------- kept shop2 functionality
   Not in the Framer render, kept because they convert: the live sale banner
   and the recently-viewed strip. Both are light bands on the page ground. */
.jifu-home-promo { background: var(--jifu-ground, rgb(255, 255, 255)); padding-block: 24px 0; }
.jifu-home-promo__link {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  min-height: 44px; padding: 16px 20px;
  background: var(--jifu-ground-well, rgb(238, 234, 225));
  border-left: 3px solid var(--jifu-papaya, rgb(255, 122, 69));
}
.jifu-home-promo__title { font-weight: 700; }
.jifu-home-promo__view { text-decoration: underline; text-underline-offset: 2px; }
.jifu-home-recent { background: var(--jifu-ground, rgb(255, 255, 255)); padding-block: 56px; }
.jifu-home-recent__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
/* Mobile review 2026-09-25: two per row on phones, like the product rail -
   one column of near-square cards turned four items into four screens. */
@media (max-width: 809.98px) {
  .jifu-home-recent .jifu-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ------------------------------------------------------------------ shop
   The live product rail (kept pending Clark's call): a light band after the
   journey, head row with the Shop now pill, four catalog cards. */
.jifu-home-shop { background: var(--jifu-ground, rgb(255, 255, 255)); padding-block: 96px; }
.jifu-home-shop__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.jifu-home-shop__title { display: flex; flex-direction: column; gap: 10px; }
/* SHOP2 review sheet (Xana, 2026-09-30): white tiles, the product photo
   alone (no art frame), Add to cart + Buy now under the price. */
.jifu-home-shop__card { background: var(--jifu-white, rgb(255, 255, 255)); }
.jifu-home-shop__link { display: block; color: inherit; }
.jifu-home-shop__media { background: var(--jifu-white, rgb(255, 255, 255)); }
.jifu-home-shop__media > img { width: 86%; height: 86%; object-fit: contain; }
.jifu-home-shop__actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 0 20px 20px; }
.jifu-home-shop__btn { width: 100%; justify-content: center; padding: 13px 16px; }
@media (max-width: 809.98px) {
  .jifu-home-shop { padding-block: 56px; }
  .jifu-home-shop .jifu-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .jifu-home-shop__actions { padding: 0 12px 14px; }
  .jifu-home-shop__btn { padding: 12px 8px; letter-spacing: 1.2px; }
}

/* ---------------------------------------------------------------- ticker
   KEEP MAKING MOVES closes the page above shop2's footer (Clark 2026-09-23). */
.jifu-home-ticker { background: var(--jifu-midnight-well, rgb(8, 8, 8)); }