/* ============================================================
   WASAMU — HOME 2026 REDESIGN LAYER
   Loaded AFTER styles.css, on the home page only. Keeps the
   warm-paper / terracotta / navy identity and every JS hook,
   but rebuilds the home structure with an exaggerated-editorial
   hero, a category marquee, a sessions-&-pricing grid, a process
   timeline, and a calmer, more choreographed motion system.
   ============================================================ */

:root {
  --accent-ink:  color-mix(in oklab, var(--accent) 82%, black);
  --glass:       color-mix(in oklab, var(--paper) 70%, transparent);
  --hair:        color-mix(in oklab, var(--ink) 14%, transparent);
  --ease-soft:   cubic-bezier(.22, 1, .36, 1);
  --ease-swing:  cubic-bezier(.65, 0, .35, 1);
  --shadow-soft: 0 24px 60px -34px rgba(28, 26, 23, .5);
  --shadow-lift: 0 40px 90px -44px rgba(28, 26, 23, .62);
}

/* keep the page from ever showing a horizontal scrollbar from motion */
body { overflow-x: hidden; }

/* --- Shared: animated section eyebrow with a drawing rule --- */
.kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); text-transform: uppercase;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.28em;
  color: var(--muted); margin: 0 0 22px;
}
.kicker::before {
  content: ''; width: 34px; height: 1px; background: var(--accent);
  transform-origin: left center; transform: scaleX(0);
  transition: transform .9s var(--ease-soft) .1s;
}
.reveal.in .kicker::before,
.split.in .kicker::before,
.kicker.in::before { transform: scaleX(1); }

/* =========================================================
   HERO — exaggerated editorial
   ========================================================= */
.hero {
  position: relative;
  padding-top: clamp(22px, 3.5vh, 52px);
  padding-bottom: clamp(56px, 8vw, 104px);
}
/* faint warm glow behind the hero — pure decoration, cheap */
.hero::before {
  content: ''; position: absolute; z-index: -1;
  top: -12%; right: -8%; width: 52vw; height: 52vw; max-width: 720px; max-height: 720px;
  background: radial-gradient(circle at center,
              color-mix(in oklab, var(--accent) 22%, transparent), transparent 68%);
  filter: blur(8px); opacity: .55; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: hero-glow 14s ease-in-out infinite alternate; }
}
@keyframes hero-glow {
  from { transform: translate3d(0,0,0) scale(1); opacity: .42; }
  to   { transform: translate3d(-3%, 4%, 0) scale(1.12); opacity: .62; }
}

.hero .grid {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: start;          /* photo top lines up with the headline */
  gap: clamp(40px, 6vw, 92px);
}
/* grid/flex children must be allowed to shrink below their content's
   min-content width — otherwise the empty image-slot's long placeholder
   caption forces the column (and the stacked text) past the viewport */
.hero-copy, .hero-figure, .hero .stat { min-width: 0; }

/* top row: locus + live availability pill */
.hero-eyebrow {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.hero-eyebrow .loc {
  font-family: var(--sans); text-transform: uppercase;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.26em; color: var(--ink-soft);
}
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-ink);
  background:
    linear-gradient(180deg, color-mix(in oklab, #fff 58%, transparent), transparent),
    color-mix(in oklab, var(--accent) 10%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: 100px; padding: 7px 16px 7px 13px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    0 8px 22px -14px color-mix(in oklab, var(--accent) 70%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
  backdrop-filter: saturate(1.2) blur(6px);
}
.pill .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--accent) 35%, #fff), var(--accent) 72%);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .pill .dot { animation: pulse 2.4s var(--ease-soft) infinite; }
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in oklab, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent); }
}

/* Oversized display headline */
.hero h1.display {
  font-size: clamp(2.7rem, 1.1rem + 6vw, 5.5rem) !important;
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.hero .lede { max-width: 46ch; margin-bottom: clamp(26px, 3vw, 38px); }
.hero .actions { margin: 0 0 clamp(30px, 4vw, 44px); gap: 26px; }
.hero .meta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.82rem; color: var(--muted); letter-spacing: 0.01em;
}
.hero .meta::before {
  content: ''; width: 22px; height: 1px; background: var(--line);
}

/* Hero figure: taller, cleaner, floats */
.hero-figure.frame {
  border-radius: 6px; box-shadow: var(--shadow-soft);
  /* size the portrait by height so the WHOLE framed photo fits in the first
     screen (no scrolling) and its top aligns with the headline */
  justify-self: end;
  width: auto;
  height: min(70vh, 600px);
  max-height: calc(100svh - 168px);
}

/* Word-split reveal (words wrapped by home.js) */
[data-split] .word {
  display: inline-block; overflow: hidden; vertical-align: top;
  /* clip box follows line-height; padding gives descenders (y, g, p) room
     WITHOUT a negative margin (which would collapse multi-line spacing) */
  line-height: 1.06; padding-bottom: 0.08em;
}
[data-split] .word > span {
  display: inline-block;
  transform: translateY(112%);
  transition: transform .72s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 42ms);
}
[data-split].in .word > span { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-split] .word > span { transform: none !important; transition: none !important; }
}

/* --- Hero stat strip --- */
.hero-stats {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(46px, 6vw, 78px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.stat .num {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 1rem + 3vw, 3.3rem); line-height: 1;
  letter-spacing: -0.02em; color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.stat .num .u { color: var(--accent); }
.stat .lab {
  margin-top: 10px; font-size: 0.86rem; line-height: 1.45;
  color: var(--ink-soft); max-width: 24ch;
}

/* --- Scroll cue --- */
.scroll-cue {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(30px, 4vw, 44px);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.24em;
  color: var(--muted); text-decoration: none;
}
.scroll-cue .line {
  position: relative; width: 46px; height: 1px; background: var(--line); overflow: hidden;
}
.scroll-cue .line::after {
  content: ''; position: absolute; inset: 0; width: 40%;
  background: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue .line::after { animation: cue-slide 2.2s var(--ease-soft) infinite; }
}
@keyframes cue-slide {
  0%   { transform: translateX(-110%); }
  60%  { transform: translateX(260%); }
  100% { transform: translateX(260%); }
}
.scroll-cue:hover { color: var(--ink); }

/* =========================================================
   CATEGORY MARQUEE
   ========================================================= */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-band);
  padding: clamp(16px, 2vw, 22px) 0;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
.marquee__track {
  display: flex; width: max-content; gap: 0;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 34s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item {
  display: inline-flex; align-items: center; gap: clamp(26px, 4vw, 54px);
  padding: 0 clamp(26px, 4vw, 54px);
}
.marquee__item span {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.1rem, 0.7rem + 1.4vw, 1.9rem);
  letter-spacing: -0.01em; color: var(--ink);
  white-space: nowrap;
}
.marquee__item .sep {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none;
}
.marquee[data-reduced] .marquee__track { animation: none; justify-content: center; flex-wrap: wrap; row-gap: 12px; }

/* =========================================================
   PACKAGES / PRICING  — polish on the DB-driven .pk-* cards
   (markup + base styles live in app.js / styles.css; this
   layer refines them to match the redesign)
   ========================================================= */
.packages .pk-head { max-width: none; text-align: center; margin: 0 auto clamp(40px, 5vw, 62px); }
.packages .pk-head .kicker { justify-content: center; }
.packages .pk-head h2 { margin: 0 auto; max-width: 20ch; }
.packages .pk-head .lede { margin: 16px auto 0; max-width: 52ch; }
.packages .pk-head .kicker::before,
.packages .pk-head .kicker::after {
  content: ''; width: 34px; height: 1px; background: var(--accent);
}

.pk-grid { gap: clamp(16px, 2vw, 24px); }

/* card: quieter surface, accent top-bar reveal, tactile lift */
.pk-card {
  border-radius: 12px;
  background: color-mix(in oklab, var(--paper) 45%, #fff);
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), border-color .4s ease;
}
/* accent top-bar: rounded to match the card so it never clips the
   "Popular" badge (the card must NOT use overflow:hidden) */
.pk-card::before {
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 12px 12px 0 0;
  transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-soft);
  z-index: 2;
}
.pk-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lift); }
.pk-card:hover::before { transform: scaleX(1); }
.pk-card .pk-title { letter-spacing: -0.015em; }
.pk-card .pk-list li::after { border-color: #fff; }

/* the featured tier reads as the navy "signature" card */
.pk-card.is-featured {
  background: linear-gradient(165deg, var(--navy), var(--navy-2));
  border-color: transparent; color: var(--on-navy);
  box-shadow: 0 30px 60px -38px rgba(20,24,40,.7);
}
/* no accent top-bar on the featured card — it clashed with the badge */
.pk-card.is-featured::before { display: none; }
.pk-card.is-featured .pk-title { color: #fff; }
.pk-card.is-featured .pk-price .amt,
.pk-card.is-featured .pk-price .amt.soft { color: #fff; }
.pk-card.is-featured .pk-price .dur,
.pk-card.is-featured .pk-desc { color: var(--on-navy-dim); }
.pk-card.is-featured .pk-list { border-top-color: rgba(255,255,255,.16); }
.pk-card.is-featured .pk-list li { color: var(--on-navy-dim); }
.pk-card.is-featured .pk-list li::before { background: color-mix(in oklab, var(--accent) 55%, transparent); }

/* "Popular" badge: sit cleanly on the card's top edge, above everything,
   with a little lift so it reads as a distinct chip (not merged into the top) */
.pk-badge {
  z-index: 6;
  top: -2px;
  padding: 6px 14px;
  line-height: 1;
  border-radius: 100px;
  box-shadow: 0 8px 20px -8px rgba(20, 24, 40, .55);
  border: 1px solid color-mix(in oklab, #fff 22%, transparent);
}
.pk-card.is-featured .pk-badge { background: var(--accent); color: #fff; }
.pk-card.is-featured .btn--primary {
  background: var(--accent) !important;
  box-shadow: 0 12px 26px -14px color-mix(in oklab, var(--accent) 80%, transparent);
}

/* =========================================================
   PROCESS TIMELINE
   ========================================================= */
.process { background: var(--paper-band); }
.process .steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  margin-top: clamp(40px, 5vw, 58px);
  counter-reset: step;
}
.step { position: relative; counter-increment: step; padding-top: 30px; }
.step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--line);
}
.step::after {
  content: ''; position: absolute; top: -3px; left: 0; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent);
  transform: scale(0); transition: transform .5s var(--ease-soft);
}
.process .steps.in .step::after { transform: scale(1); }
.process .steps.in .step:nth-child(2)::after { transition-delay: .12s; }
.process .steps.in .step:nth-child(3)::after { transition-delay: .24s; }
.process .steps.in .step:nth-child(4)::after { transition-delay: .36s; }
.step .n {
  font-family: var(--display); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.2em; color: var(--accent-ink); display: block; margin-bottom: 14px;
}
.step .n::before { content: counter(step, decimal-leading-zero); }
.step h3 {
  font-family: var(--display); font-weight: 700; font-size: 1.28rem;
  line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 10px;
}
.step p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  html.js .process .steps .step { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft); }
  html.js .process .steps.in .step { opacity: 1; transform: none; }
  html.js .process .steps.in .step:nth-child(2) { transition-delay: .1s; }
  html.js .process .steps.in .step:nth-child(3) { transition-delay: .2s; }
  html.js .process .steps.in .step:nth-child(4) { transition-delay: .3s; }
}

/* =========================================================
   PROMISE (navy) — more dramatic
   ========================================================= */
.promise { position: relative; overflow: hidden; }
.promise::before {
  content: ''; position: absolute; z-index: 0; top: -30%; left: -10%;
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 24%, transparent), transparent 66%);
  opacity: .5; pointer-events: none;
}
.promise .inner { position: relative; z-index: 1; max-width: 760px; }
.promise h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); letter-spacing: -0.02em; line-height: 1.04; }
.promise .pull { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem); padding-left: 28px; }

/* =========================================================
   BOOKING CTA — statement close
   ========================================================= */
.booking { position: relative; }
.booking h2.headline { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4rem) !important; letter-spacing: -0.025em; line-height: 1; }
.booking .inner { max-width: 640px; }

/* Magnetic button wrapper (JS-driven translate) */
[data-magnetic] { will-change: transform; }

/* =========================================================
   EDITORIAL ROWS — align each photo with its side text
   Text is vertically centred against the photo, and the photo is
   height-capped so photo + text sit together as one unit and a
   section fits within one screen as you scroll.
   ========================================================= */
/* Photo and text TOP-align so the heading lines up with the top of its photo,
   and each photo is height-capped (with tighter padding) so a whole section —
   text + its photo — stays together within one screen as you scroll. */
.section.editorial .split { align-items: start; }
.section.editorial .col-figure .frame { max-height: 60vh; }
/* keep faces in frame when a tall portrait is height-capped */
.section.editorial image-slot::part(image) { object-position: center 22%; }
.section.editorial:has(.split) {
  padding-top: clamp(52px, 6vh, 92px);
  padding-bottom: clamp(52px, 6vh, 92px);
}
@media (max-width: 900px) {
  /* stacked on mobile — natural height */
  .section.editorial .col-figure .frame { max-height: none; }
}

/* =========================================================
   MOTION SAFETY + RESPONSIVE
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html.js .process .steps .step { opacity: 1 !important; transform: none !important; }
  .hero::before { animation: none; }
}

@media (max-width: 1040px) {
  .process .steps { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
}

@media (max-width: 900px) {
  .hero .grid { grid-template-columns: minmax(0, 1fr); }
  .hero-figure { order: -1; }
  /* stacked: full-width photo, natural height (undo the desktop height cap) */
  .hero-figure.frame { justify-self: stretch; width: auto; height: auto; max-height: none; }
  .hero-stats { grid-column: auto; margin-top: 40px; }
}

@media (max-width: 620px) {
  .hero-stats { grid-template-columns: 1fr; gap: 22px; text-align: left; }
  .hero-stats .stat { display: flex; align-items: baseline; gap: 16px; }
  .hero-stats .stat .lab { margin-top: 0; }
  .process .steps { grid-template-columns: 1fr; }
}