/* ============================================================
   HULP · 2026 redesign components (Figma frame 2:3)
   Hero, request pill, floating props, photo strip, wave marquee.
   Loaded after styles.css; consumes its tokens.
   ============================================================ */

/* ---------------- HERO ---------------- */
.hero-v2 {
  position: relative;
  padding: 120px 0 72px;
  /* tall enough that the film section only peeks at the fold (Loom 0:40) */
  min-height: calc(100vh - 96px);
  min-height: calc(100svh - 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--canvas);
  overflow: hidden;
}

.hero-v2__inner {
  position: relative;
  max-width: 733px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  z-index: 2;
}

.hero-v2__eyebrow { font-size: 1.125rem; }

.hero-v2__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5.2vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #000;
  margin: 0;
}

.hero-v2__sub {
  font-size: 1.25rem;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.8);
  max-width: 452px;
}

/* soft radial wash behind the pill + social proof, as in the design */
.hero-v2__inner::after {
  content: "";
  position: absolute;
  left: 50%; top: 58%;
  width: 560px; height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(59, 7, 22, 0.05), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* ---------------- REQUEST PILL ---------------- */
/* fixed module per Figma (543x80) — only the text inside changes (Loom 0:20) */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 19px;
  width: min(543px, 92vw);
  height: 80px;
  padding: 12px 28px 12px 14px;
  background: #fff;
  border-radius: var(--r-pill);
  box-shadow:
    0 2px 6px rgba(59, 7, 22, 0.05),
    0 18px 40px -8px rgba(59, 7, 22, 0.16);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-pill:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 10px rgba(59, 7, 22, 0.06),
    0 24px 48px -8px rgba(59, 7, 22, 0.20);
}

/* 56px disc; the 33px smile bowl hangs from the disc's vertical center so the
   gaps around its curve are equal (Figma Ellipse 1/2 geometry, Loom 0:31) */
.hero-pill__icon {
  position: relative;
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(160deg, #E2205B 0%, var(--clay) 55%, var(--clay-pressed) 100%);
  box-shadow: 0 6px 14px -4px rgba(202, 19, 69, 0.55);
}
.hero-pill__smile {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
}

.hero-pill__text {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.hero-pill__text em {
  font-style: normal;
  color: var(--clay);
}

.hero-pill__caret {
  flex-shrink: 0;
  width: 1.5px; height: 26px;
  background: #9a9a9a;
  animation: pill-caret 1.1s steps(1, end) infinite;
}
@keyframes pill-caret { 50% { opacity: 0; } }

/* ---------------- SOCIAL PROOF ----------------
   Figma vertical rhythm: text block --56px-- pill --100px-- avatars --7px-- counter
   (the "more white space" note, Loom 0:48) */
.hero-pill { margin-top: 32px; }
.hero-v2__social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-top: 76px;
}
.hero-v2__avatars { display: flex; justify-content: center; }
.hero-v2__avatars .avatar { width: 40px; height: 40px; border-color: #fff; object-fit: cover; }
.hero-v2__count {
  font-size: 0.94rem;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.hero-v2__count strong { color: var(--ink); font-weight: 700; }

/* ---------------- SQUIGGLES + FLOATING PROPS ---------------- */
/* squiggle + prop geometry matches Figma frame 2024:2 @1440 (Loom 0:07–0:20) */
.hero-v2__squiggles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-v2__squiggle { position: absolute; }
/* EDGE-anchored (not center-anchored): ribbons hug the viewport edges and the
   props bleed outward at any screen width (Loom 0:07 "all the way out") */
.hero-v2__squiggle--left  { left: -63px; top: 201px; width: 327px; height: auto; }
.hero-v2__squiggle--right { right: -25px; top: 6px; width: 360px; height: auto; }
/* the small top squiggle bleeds off the TOP edge (Figma y-38), center-anchored;
   the nav is transparent over the hero so it shows through */
.hero-v2__squiggle--small { left: calc(50% - 450px); top: -38px; }

/* ---------------- NAV MORPH (Square grammar) ----------------
   Over the hero: transparent, full menu. Scrolled: frosted glass, menu recedes,
   only the wordmark + CTA persist. */
.nav { background: transparent; border-bottom-color: transparent; transition: background 0.3s ease, backdrop-filter 0.3s ease; }
.nav--scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(30, 6, 14, 0.06);
}
@media (min-width: 901px) {
  .nav__links, .nav__link--contact { transition: opacity 0.25s ease; }
  .nav--scrolled .nav__links,
  .nav--scrolled .nav__link--contact { opacity: 0; pointer-events: none; }
}

.hero-prop {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
.hero-prop--bag     { left: -8px; top: 146px;  width: clamp(260px, 27.2vw, 392px); height: auto; }
.hero-prop--soap    { right: -10px; top: 87px;  width: clamp(190px, 19.5vw, 280px); height: auto; }
.hero-prop--clothes { right: 17px; top: 346px; width: clamp(230px, 24.3vw, 350px); height: auto; z-index: 2; }

/* gentle bob, one prop out of phase with the next */
@media (prefers-reduced-motion: no-preference) {
  .hero-prop { animation: prop-float 7s ease-in-out infinite; }
  .hero-prop--soap    { animation-duration: 8.5s; animation-delay: -2.4s; }
  .hero-prop--clothes { animation-duration: 9.5s; animation-delay: -4.8s; }
}
@keyframes prop-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-1.2deg); }
}

/* ---------------- PHOTO CARDS ---------------- */
.photo-card {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--tint);
  transition: transform 0.3s ease;
}
.photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-card:hover { transform: translateY(-4px) scale(1.02); }

/* ---------------- REAL PEOPLE STRIP ---------------- */
/* keep overflow off this section and overflow-x:clip (not hidden) on html/body,
   or the film-morph view() timeline breaks */
.people-strip { padding: 64px 0 0; position: relative; z-index: 2; }

/* ---------------- FILM MORPH ----------------
   The brand film opens full-bleed and, as you scroll, shrinks into the middle
   tile of the strip while the sibling photos and serif line fade in around it.
   Sticky stage + scroll-scrubbed transform (scroll-driven animations).
   Fallback (no support / reduced motion): a static strip whose middle tile is
   the looping film. */
.film-card {
  position: relative;
  width: clamp(130px, 13.2vw, 189px);
  aspect-ratio: 1;
  border-radius: 24px;
  overflow: hidden;
  background: var(--tint);
}
.film-card__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) and (min-width: 561px) {
  @supports (animation-timeline: view()) {
    .film-strip {
      height: 240vh;
      padding: 0;
      view-timeline: --film block;
    }
    .film-strip__stage {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
      overflow: clip;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    /* the frame's SIZE morphs (not transform) so object-fit:cover reframes the
       film continuously: full doorway scene at full-bleed, center crop at tile */
    .film-card {
      z-index: 2;
      flex-shrink: 0;
      animation: film-shrink cubic-bezier(0.22, 0.08, 0.18, 1) both;
      animation-timeline: --film;
      animation-range: contain 8% contain 62%;
    }
    @keyframes film-shrink {
      from { width: 100vw; height: 100svh; border-radius: 0; }
      to   { width: clamp(130px, 13.2vw, 189px); height: clamp(130px, 13.2vw, 189px); border-radius: 24px; }
    }
    .film-strip__side,
    .film-strip__line {
      animation: film-fade-in linear both;
      animation-timeline: --film;
      animation-range: contain 42% contain 68%;
    }
    @keyframes film-fade-in { from { opacity: 0; } to { opacity: 1; } }

    /* keep the (initially hidden) serif line out of the stage's centering math
       so the full-bleed frame truly fills the viewport */
    .film-strip__stage .container { position: static; }
    .film-strip__line {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(50% + clamp(65px, 6.6vw, 94.5px) + 52px);
      margin: 0 auto;
    }
  }
}

/* Figma strip metrics: 189px tiles, 195px gaps (Loom 1:13) */
.people-strip__row {
  position: relative;
  display: flex;
  justify-content: center;
  gap: clamp(72px, 13.5vw, 195px);
}
.people-strip__row .photo-card {
  width: clamp(130px, 13.2vw, 189px);
  aspect-ratio: 1;
  flex-shrink: 0;
}

.people-strip__line {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  letter-spacing: -0.01em;
  color: #000;
  text-align: center;
  margin: 72px auto 0;
  max-width: 1166px;
}

/* ---------------- WAVE MARQUEE ---------------- */
.wave-marquee-sec { padding: 0; }

.wave-marquee {
  position: relative;
  margin-top: 64px;
  padding: 40px 0 56px;
  overflow: hidden;
}
/* white fades at both edges (the linear gradients in the Figma frame) */
.wave-marquee::before,
.wave-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.wave-marquee::before { left: 0;  background: linear-gradient(90deg, var(--canvas), transparent); }
.wave-marquee::after  { right: 0; background: linear-gradient(270deg, var(--canvas), transparent); }

.wave-marquee__wave {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  width: 100%;
  min-width: 1440px;
  transform: translateY(-50%);
  pointer-events: none;
}

.wave-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(56px, 8vw, 120px);
  width: max-content;
}
@media (prefers-reduced-motion: no-preference) {
  .wave-marquee__track { animation: wave-marquee-scroll 42s linear infinite; }
  .wave-marquee:hover .wave-marquee__track,
  .wave-marquee__track.is-paused { animation-play-state: paused; }
}
@keyframes wave-marquee-scroll { to { transform: translateX(-50%); } }

.wave-marquee__item {
  width: clamp(130px, 13.2vw, 189px);
  aspect-ratio: 1;
  flex-shrink: 0;
}
.wave-marquee__item--tall { width: clamp(86px, 8.7vw, 124px); aspect-ratio: 137 / 230; }
/* ride the wave: alternate items sit higher / lower */
.wave-marquee__item:nth-child(4n + 1) { transform: translateY(-30px); }
.wave-marquee__item:nth-child(4n + 2) { transform: translateY(26px); }
.wave-marquee__item:nth-child(4n + 3) { transform: translateY(-12px); }
.wave-marquee__item:nth-child(4n + 4) { transform: translateY(30px); }

/* ---------------- WAITLIST v2 (new-language restyle) ---------------- */
.waitlist-v2 { background: linear-gradient(180deg, rgba(255,255,255,0), #FDF7F3 45%, #FBF6F0 100%); }
.waitlist-v2 .section-header { margin-bottom: 40px; }
.waitlist-v2 .section-header p { font-size: 1.15rem; color: #697586; }
.waitlist-v2__cardwrap { max-width: 500px; margin: 0 auto; }
.waitlist-v2 .waitlist-card {
  background: #fff;
  border: none;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.11);
  padding: 32px;
}
.waitlist-v2 .waitlist-input {
  background: #fff;
  border: 1px solid #E2E8F0;
}
.waitlist-v2 .waitlist-input:focus { border-color: var(--clay); }
.waitlist-v2 .waitlist-phone-prefix { background: #F8FAFC; border: 1px solid #E2E8F0; border-right: none; }

/* ---------------- MARQUEE per-tile life (Loom 1:33 "animate each one") ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .wave-marquee__item img { animation: tile-bob 6.5s ease-in-out infinite; }
  .wave-marquee__item:nth-child(3n) img   { animation-duration: 7.5s; animation-delay: -2.2s; }
  .wave-marquee__item:nth-child(3n+1) img { animation-duration: 8.5s; animation-delay: -4.4s; }
  @keyframes tile-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
  }
}

/* ---------------- SCROLL REVEALS ---------------- */
/* quiet grammar: opacity-first, small travel, quick settle */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(7px);
    transition: opacity 0.32s ease-out, transform 0.32s ease-out;
  }
  [data-reveal].revealed { opacity: 1; transform: none; }
}

/* ---------------- IMAGINE YOUR MORNING (phone + notification chips) ---------------- */
.morning-sec { padding: 104px 0 0; overflow: hidden; }
.morning-sec .section-header { margin-bottom: 8px; }

.morning-sec__apps { display: block; margin: 0 auto 22px; width: 219px; height: auto; }

.morning-stage {
  position: relative;
  height: 655px;
  max-width: 1440px;
  margin: 0 auto;
}
/* device wrapper: the phone image + the WhatsApp chat pinned to its screen.
   Phone runs to the section edge — no gap, no fade (Loom 2:06). */
.morning-stage__device {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  width: 1100px;
  pointer-events: none;
}
.morning-stage__phone {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* ---- WhatsApp chat on the phone screen (Figma 2024:161, built at 363px, scaled with the device) ---- */
/* chat bottom lands exactly at the section cut (Figma: chat 2331 / band 2332)
   so the phone's own screen never shows below the conversation */
.wa-chat {
  position: absolute;
  left: 33.6%;
  top: 19.4%;
  width: 363px;
  height: 472px;
  transform-origin: top left;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.35);
  font-family: var(--font-sans);
}
.wa-chat__inner { display: flex; flex-direction: column; width: 100%; height: 100%; }
.wa-chat__header {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 64px;
  padding: 0 10px;
  background: #075E54;
  flex-shrink: 0;
}
.wa-chat__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.wa-chat__id { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.wa-chat__id strong { color: #fff; font-size: 14px; font-weight: 700; }
.wa-chat__id em { color: #85E6C5; font-size: 10px; font-style: normal; font-weight: 500; }
.wa-chat__actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }

.wa-chat__area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 14px 10px;
  background: #ECE5DD;
  overflow: hidden;
}
.wa-msg {
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px 5px;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.06);
  align-self: flex-start;
}
.wa-msg--out { background: #DCF8C6; align-self: flex-end; }
.wa-msg p { margin: 0; font-size: 12.5px; line-height: 16px; color: #111; letter-spacing: 0; }
.wa-msg__link { text-decoration: underline; font-weight: 700; }
.wa-msg__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
  font-size: 9px;
  color: #808080;
}
/* self-typing playback: messages hidden until the sequencer reveals them */
.wa-chat--armed .wa-msg { opacity: 0; transform: translateY(6px); }
.wa-chat .wa-msg { transition: opacity 0.28s ease, transform 0.28s ease; }
.wa-chat--armed .wa-msg.wa-msg--shown { opacity: 1; transform: none; }
.wa-msg--shown .wa-msg__meta img { filter: grayscale(1) opacity(0.55); transition: filter 0.3s ease; }
.wa-msg--shown.wa-msg--read .wa-msg__meta img { filter: none; }

.wa-typing {
  display: none;
  align-self: flex-start;
  background: #fff;
  border-radius: 8px;
  padding: 9px 12px;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.06);
  gap: 4px;
  align-items: center;
}
.wa-typing.is-on { display: inline-flex; }
.wa-typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #9CA3AF;
  animation: wa-dot 1.1s ease-in-out infinite;
}
.wa-typing i:nth-child(2) { animation-delay: 0.18s; }
.wa-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes wa-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.wa-chat__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 8px;
  background: #ECE5DD;
  flex-shrink: 0;
}
.wa-chat__input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  background: #fff;
  border-radius: 19px;
}
.wa-chat__ph { flex: 1; font-size: 13px; color: #9CA3AF; }
.wa-chat__mic {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #075E54;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.morning-stage__bowl {
  position: absolute;
  left: max(16px, calc(50% - 583px));
  top: 80px;
  width: 217px;
  height: auto;
  pointer-events: none;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .morning-stage__bowl { animation: prop-float 8s ease-in-out infinite; animation-delay: -3s; }
}

.notif-chip { position: absolute; display: flex; flex-direction: column; align-items: flex-start; }
.notif-chip__bubble {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #F4F7FA;
  border-radius: 57px;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: #000;
  white-space: nowrap;
}
.notif-chip__bubble em {
  font-style: normal;
  font-weight: 500;
  font-size: 0.875rem;
  opacity: 0.5;
}
.notif-chip__tail { display: block; margin-left: 8px; margin-top: -1px; }

.notif-chip--maid      { left: calc(50% + 230px); top: 223px; }
.notif-chip--breakfast { left: max(16px, calc(50% - 583px)); top: 381px; }
.notif-chip--patel     { left: calc(50% + 230px); top: 400px; }

@media (prefers-reduced-motion: no-preference) {
  .notif-chip { animation: prop-float 9s ease-in-out infinite; }
  .notif-chip--breakfast { animation-delay: -2.5s; }
  .notif-chip--patel { animation-delay: -5s; }
}

@media (max-width: 1000px) {
  .morning-stage { height: 500px; }
  .morning-stage__device { width: 760px; top: -70px; }
  .wa-chat { transform: scale(0.6909); top: 34.9%; height: 441px; }
  .notif-chip--maid      { left: auto; right: 12px; top: 160px; }
  .notif-chip--breakfast { left: 12px; top: 300px; }
  .notif-chip--patel     { left: auto; right: 12px; top: 330px; }
  .morning-stage__bowl   { width: 150px; top: 60px; }
}
@media (max-width: 640px) {
  .morning-stage { height: 460px; }
  .morning-stage__device { width: 560px; top: -30px; }
  .wa-chat { transform: scale(0.509); top: 47.4%; height: 441px; }
  .morning-stage__bowl { display: none; }
  .notif-chip__bubble { font-size: 0.8rem; padding: 7px 11px; gap: 7px; }
  .notif-chip__tail { width: 26px; height: 10px; }
  .notif-chip--maid { top: 60px; right: 8px; }
  .notif-chip--breakfast { top: 250px; left: 8px; }
  .notif-chip--patel { top: 370px; right: 8px; }
}

/* ---------------- CUSTOMER REVIEWS ---------------- */
.reviews {
  background: linear-gradient(180deg, #FBF6F0 0%, #FCF9F5 62%, rgba(255,255,255,0) 100%);
  padding: 96px 0 56px;
}
.reviews__eyebrow { display: flex; justify-content: center; font-size: 1.125rem; }

.reviews__featured {
  max-width: 751px;
  margin: 30px auto 0;
  text-align: center;
  font-style: italic;
}
.reviews__quote {
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #000;
  margin: 0;
}
.reviews__attrib {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 1.1rem;
}
.reviews__attrib strong { font-weight: 700; color: var(--ink); }
.reviews__attrib span { opacity: 0.55; }

.reviews__marquee { margin-top: 30px; padding-top: 48px; }
.reviews__marquee .marquee__track { gap: 32px; align-items: stretch; }

.rcard {
  position: relative;
  width: 405px;
  flex-shrink: 0;
  margin: 35px 0 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.11);
  padding: 52px 28px 30px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.14);
}
.reviews__marquee:hover .marquee__track { animation-play-state: paused; }

/* featured quote rotation */
.reviews__featured { transition: opacity 0.5s ease; }
.reviews__featured.is-fading { opacity: 0; }
.rcard__avatar {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 70px;
  border-radius: 50%;
  background: var(--clay);
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -8px rgba(202, 19, 69, 0.5);
}
.rcard__quote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.875;
  color: #2A2E2F;
}
.rcard__meta {
  margin-top: 22px;
  font-size: 1rem;
  color: #2A2E2F;
  opacity: 0.5;
}
.rcard__meta span { display: block; }

@media (max-width: 560px) {
  .rcard { width: 316px; padding: 46px 20px 24px; }
  .reviews { padding-top: 72px; }
}

/* ---------------- EVERYTHING YOU NEED (pos-landing accordions, Figma 2024:120) ---------------- */
.eyebrow--caps {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  font-weight: 700;
}

.pos-landing { background: #fff; padding: 0; }
.pos-landing__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1600px;
  margin: 0 auto;
}
.pos-landing__content {
  align-self: center;
  justify-self: start;
  width: min(518px, 100%);
  box-sizing: content-box;
  /* gutter proportional to the Figma composition (138/1440 = 9.6%), capped */
  padding: 56px 48px 56px min(9.6vw, 154px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.pos-landing__title {
  font-size: clamp(2rem, 2.8vw, 2.5rem);
  line-height: 1.32;
  letter-spacing: -1px;
  color: #0D121C;
}
.pos-acc-group { display: flex; flex-direction: column; gap: 14px; }
.pos-acc { border-bottom: 1px solid #E2E8F0; padding-bottom: 18px; }
.pos-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1E293B;
  text-align: left;
  cursor: pointer;
}
.pos-acc__icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.pos-acc__icon::before,
.pos-acc__icon::after {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 16px; height: 2px;
  background: #0D121C;
  transition: transform 0.25s ease;
}
.pos-acc__icon::after { transform: rotate(90deg); }
.pos-acc.is-open .pos-acc__icon::after { transform: rotate(0deg); }
/* smooth open/close — no display flicker */
.pos-acc__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  transition: max-height 0.35s ease, opacity 0.28s ease, padding-top 0.35s ease;
}
.pos-acc.is-open .pos-acc__body { max-height: 220px; opacity: 1; padding-top: 14px; }
.pos-acc__body p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: #697586;
  max-width: 436px;
}
.pos-acc__body a {
  font-size: 0.94rem;
  font-weight: 700;
  color: #0D121C;
  text-decoration: underline;
  text-underline-position: from-font;
}
/* keep the visual box near-square as the viewport widens (square sources),
   and bias each image's focal point so subjects survive the cover-crop */
.pos-landing__visual { position: relative; min-height: clamp(480px, 34vw, 640px); overflow: hidden; }
.pos-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.45s ease;
}
.pos-visual:nth-child(4) { object-position: 50% 55%; } /* repair: action low, tools at counter */
/* incoming fades in ABOVE the previous image (which stays opaque beneath) —
   the white background never shows through mid-fade */
.pos-visual.was-active { opacity: 1; z-index: 1; transition: none; }
.pos-visual.is-active { opacity: 1; z-index: 2; }

@media (max-width: 900px) {
  .pos-landing__grid { grid-template-columns: 1fr; }
  .pos-landing__content { justify-self: stretch; width: 100%; padding: 64px var(--gutter); }
  .pos-landing__visual { min-height: 340px; }
}

/* ---------------- FAQ restyle (Figma header-block + faq-list) ---------------- */
.faq .section-header p { font-size: 1.25rem; color: #697586; }
.faq-item { border-bottom: 1px solid #E2E8F0; }
.faq-question {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 700;
  color: #0D121C;
  padding: 32px 8px;
}

/* ---------------- HOW-IT-WORKS retone ----------------
   The step art PNGs are old blue-brand illustrations; hide them and
   let a large serif numeral on a soft raspberry tile carry the step. */
.hiw-step__art { width: 84px; height: 84px; }
.hiw-step__art img { display: none; }
.hiw-step__art .hiw-step__num {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background: var(--tint);
  color: var(--clay);
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 700;
  box-shadow: none;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1180px) {
  .hero-prop--bag     { left: -60px; }
  .hero-prop--soap    { right: -20px; }
  .hero-prop--clothes { right: -40px; }
}

@media (max-width: 900px) {
  .hero-v2 { padding: 120px 0 64px; }
  .hero-prop, .hero-v2__squiggle { display: none; }
  .hero-v2__sub { font-size: 1.08rem; }
}

@media (max-width: 720px) {
  .nav__link--contact { display: none; }
}

@media (max-width: 560px) {
  .people-strip__row .photo-card { flex: 1 1 0; min-width: 0; width: auto; border-radius: 16px; }
  .hero-v2__eyebrow { font-size: 0.95rem; }
  .hero-pill { gap: 10px; padding-right: 18px; }
  .hero-pill__icon { width: 36px; height: 36px; }
  .hero-pill__icon svg { width: 22px; height: 22px; }
  .hero-pill__text { font-size: 0.92rem; }
  .people-strip__row { gap: 20px; }
  .people-strip__line { margin-top: 48px; }
  .wave-marquee { margin-top: 40px; }
}