/* ============================================================
   CELL 2 — TRANSFORMATION PROOF — The Beauty Suite (B-opus lane)
   Winner G4 layout · folds G3 (per-card named micro-quotes) + G2 (BEFORE/AFTER
   corner pills · italic-emphasis Prata pullquote). Porcelain/champagne-DOMINANT
   canvas · ONE contained warm-taupe proof band holds the 3 identical before/after
   cards (dark area < 40% of the section) · HONEY accents only · espresso ink.
   Radius = --radius (6px) everywhere. Alive at t0: ambient honey sheen @keyframes
   drifts the AFTER side of each card, staggered — NO scroll-gated content, NO hard
   streak / lens-flare / sparkle / per-card heart. Shared tokens = the only color
   source (--marble-50 / --marble-100 / --slate-* / --terracotta / --stone-700).
   ============================================================ */

#cell-2 {
  overflow: hidden; /* contain the ambient sheen bloom — never a page scrollbar */
}

.tp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem);
  text-align: center;
}

/* ── section masthead (porcelain breath above the proof band) ──────────── */
.tp__head {
  max-width: 52rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tp__eyebrow {
  color: var(--eyebrow-ink);            /* honey accent */
  margin-bottom: var(--space-s);
}
.tp__title {
  font-size: var(--step-section);      /* H2A */
  color: var(--stone-700);             /* espresso ink on champagne */
  line-height: 1.06;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.tp__title-em {
  font-style: italic;                  /* Prata italic second phrase */
  color: var(--stone-700);
}
.tp__lede {
  margin-top: var(--space-m);
  max-width: 46ch;
  color: var(--text-on-light);         /* espresso body */
  font-size: var(--step-0);
  line-height: var(--leading-body);
  text-wrap: balance;
}
/* honey trust-line under the lede (borrow G3 sub-head vocabulary) */
.tp__trustline {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem clamp(1rem, 0.5rem + 1.6vw, 2rem);
  margin-top: var(--space-m);
}
.tp__trustline li {
  font-family: var(--font-body);
  font-size: var(--step-mini);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--text-on-light-muted);
  display: inline-flex;
  align-items: center;
}
/* honey diamond separator BEFORE items 2+ — an inline glyph, not an absolute tail,
   so a wrap never leaves a dangling diamond at a line end (clean mobile wrap). */
.tp__trustline li + li::before {
  content: "";
  flex: 0 0 auto;
  width: 4px; height: 4px;
  margin-right: clamp(0.6rem, 0.4rem + 0.8vw, 1.4rem);
  transform: rotate(45deg);
  background: var(--terracotta);
}

/* ── the ONE contained warm-taupe proof band ──────────────────────────────
   A bounded band (NOT a full section) that seats the 3 cards. It reads as a warm
   taupe strip on the champagne canvas — a soft same-family darkening, never an
   espresso flood. Height is card-hugging (padding-bounded), so the band's share of
   the section stays well under 40% (masthead + closing + triad are all light). */
.tp__band {
  width: 100%;
  border-radius: calc(var(--radius) * 2);
  padding: clamp(1.6rem, 1rem + 2.2vw, 3.25rem) clamp(1.25rem, 0.7rem + 2vw, 2.75rem);
  /* WARM TAUPE proof seam — intentionally LIGHTER than an espresso slab so it stays
     intimate (TASTE §A1: espresso is ink + a CONTAINED seam, never a dark flood). The
     fill sits in the slate-500 warm-taupe region (~#82694f, lum ~115) with a soft
     honey top-glow — a same-family darkening on the champagne canvas, not a brown wall.
     Porcelain labels/quotes keep >=6:1 on this; muted descriptor uses slate-300. */
  background:
    radial-gradient(130% 95% at 50% -12%, rgba(199, 161, 126, 0.26), transparent 58%),
    linear-gradient(180deg, #8a7159 0%, #6f5945 100%);
  border: 1px solid color-mix(in srgb, var(--terracotta) 28%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 243, 0.09),
    0 30px 64px -48px rgba(75, 56, 47, 0.5);
  position: relative;
  overflow: hidden; /* contain the band's own ambient sheen */
}
/* the band is NOT a flat brown fill (WOW fragility watch) — a very slow, feathered
   champagne sheen drifts across it so the seam is alive at t0, never dead. Low-distance,
   screen-blended, capped opacity; it rides UNDER the cards (z below .tp__grid). */
.tp__band::before {
  content: "";
  position: absolute;
  inset: -20% -30%;
  pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent 40%,
    rgba(255, 249, 240, 0.07) 48%,
    rgba(255, 249, 240, 0.13) 51%,
    rgba(255, 249, 240, 0.07) 54%,
    transparent 62%
  );
  mix-blend-mode: screen;
  animation: tp-band-sheen 13s var(--ease-inout) infinite;
  will-change: transform, opacity;
  z-index: 0;
}
@keyframes tp-band-sheen {
  0%   { transform: translateX(-30%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(30%); opacity: 0; }
}
/* keep the cards above the band sheen */
.tp__grid { position: relative; z-index: 1; }

.tp__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.5rem + 1.6vw, 1.9rem);
}

/* ── one before/after card (repeated units — pixel-identical, T2.2) ──────── */
.tp__card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: left;
  min-width: 0;
}
.tp__card-label {
  font-family: var(--font-body);
  font-size: var(--step-mini);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--marble-50);             /* porcelain label on the taupe band */
  text-align: center;
}

/* the frame — a single pre-composed before|after photo (the split is REAL in the
   file; NO CSS divider fakes a split, NO draggable slider). 6px radius exact. */
.tp__frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;                 /* uniform across all 3 near-square sources */
  background: var(--marble-100);
  border: 1px solid rgba(255, 250, 243, 0.14);
  box-shadow: 0 20px 44px -34px rgba(30, 20, 14, 0.7);
}
.tp__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;            /* favour the hair, trim shirt/wall margin */
  display: block;
  /* exposure harmonisation (T2.9) — one gentle high-key, warm-neutral, daylight-
     biased grade across all 3 sources so no tile blows hot or muddies dark, while
     preserving blonde/bronde tonal separation. Uniform → grids read harmonized. */
  filter: brightness(1.045) contrast(0.98) saturate(0.97);
}

/* feathered BEFORE/AFTER corner pills (borrow G2) — soft, NOT a hard scrim */
.tp__pill {
  position: absolute;
  bottom: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border-radius: 4px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 2;
}
.tp__pill--before {
  left: 0.6rem;
  background: color-mix(in srgb, var(--stone-700) 72%, transparent); /* feathered espresso */
  color: var(--marble-50);
}
.tp__pill--after {
  right: 0.6rem;
  background: color-mix(in srgb, var(--terracotta) 84%, transparent); /* feathered honey */
  color: #3a2b23;
}

/* honey circular arrow — centred on the photo's REAL before→after seam (directional
   cue, not a fabricated divider). A soft honey disc, feathered ring, no hard edge. */
.tp__arrow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2.5rem; height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--terracotta);       /* honey disc */
  color: #3a2b23;                      /* espresso glyph */
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--terracotta) 24%, transparent),
    0 10px 24px -12px rgba(30, 20, 14, 0.7);
  z-index: 2;
}

/* ambient honey sheen — a soft diagonal specular band drifts across the AFTER
   (right) half of the real hair; staggered per card via --tp-i. Feathered bloom,
   screen-blended, NO hard streak. This is the alive-at-t0 motion (content is never
   hidden — the sheen only rides over already-visible imagery). */
.tp__sheen {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; right: -20%;              /* rides the AFTER half + a little past */
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 34%,
    rgba(255, 249, 240, 0.10) 46%,
    rgba(255, 249, 240, 0.20) 50%,
    rgba(255, 249, 240, 0.10) 54%,
    transparent 66%
  );
  mix-blend-mode: screen;
  animation: tp-sheen 6s var(--ease-inout) infinite;
  animation-delay: calc(var(--tp-i, 0) * 1.4s);
  will-change: transform, opacity;
  z-index: 1;
}
@keyframes tp-sheen {
  0%   { transform: translateX(-38%) translateY(3%); opacity: 0; }
  16%  { opacity: 1; }
  50%  { opacity: 0.85; }
  84%  { opacity: 1; }
  100% { transform: translateX(38%) translateY(-3%); opacity: 0; }
}

/* caption block under each card — descriptor + named micro-quote (borrow G3) */
.tp__caption {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}
.tp__descriptor {
  font-family: var(--font-body);
  font-size: var(--step-mini);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--slate-300);             /* honey-lifted muted on the taupe band (>=4.5:1) */
  line-height: 1.4;
  /* reserve two lines so all 3 cards' quote baselines align (repeated-unit law T2.2) */
  min-height: calc(2 * 1.4em);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp__quote {
  font-family: var(--font-display);    /* Prata — Body-A / pullquote */
  font-size: clamp(0.98rem, 0.92rem + 0.22vw, 1.12rem);
  line-height: 1.32;
  color: var(--marble-50);             /* porcelain quote on taupe */
  font-style: italic;
  text-wrap: balance;
  /* reserve two lines so the cite line sits at the same y across all 3 cards (T2.2) */
  min-height: calc(2 * 1.32em);
}
.tp__quote em { color: var(--terracotta); font-style: italic; } /* honey emphasis */
.tp__cite {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--terracotta);            /* honey attribution */
}

/* ── anti-filter reassurance + closing named pullquote (borrow G2) ───────── */
.tp__closing {
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
}
.tp__antifilter {
  font-family: var(--font-body);
  font-size: var(--step-mini);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--text-on-light-muted);
}
.tp__pull {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  padding-top: var(--space-s);
}
/* feathered honey open-quote mark (borrow G2 quote-mark treatment) */
.tp__pull::before {
  content: "\201C";
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 0.6;
  color: var(--terracotta);
  opacity: 0.55;
  margin-bottom: -0.4rem;
}
.tp__pull-quote {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.35rem);
  line-height: 1.16;
  color: var(--stone-700);             /* espresso ink on champagne */
  text-wrap: balance;
  max-width: 22ch;
}
.tp__pull-quote em {
  font-style: italic;
  color: var(--terracotta);            /* the single honey emphasis word */
  position: relative;
}
/* one-time honey underline draw under the emphasis word on entry (cell-2.js) */
.tp__pull-quote em::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--terracotta);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
}
.tp__pull-quote em.is-drawn::after {
  transform: scaleX(1);
  transition: transform 0.5s var(--ease-out);
}
.tp__pull-cite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.tp__pull-stars { display: inline-flex; gap: 3px; color: var(--terracotta); line-height: 0; }
.tp__pull-name {
  font-family: var(--font-body);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--stone-700);
}
.tp__pull-name span { font-weight: 500; letter-spacing: 0.1em; color: var(--text-on-light-muted); }

/* ── trust-icon triad (winner G4) — leaf / chair / heart, honey line-glyphs ─ */
.tp__triad {
  list-style: none;
  width: 100%;
  max-width: 60rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.5rem + 1.6vw, 2.5rem);
  padding-top: var(--space-m);
  border-top: 1px solid var(--hairline);
}
.tp__triad-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  justify-content: center;
  text-align: left;
}
.tp__triad-ico {
  flex: 0 0 auto;
  width: 2.6rem; height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--terracotta);            /* honey glyph */
  background: var(--terracotta-tint);  /* translucent honey wash */
  border: 1px solid color-mix(in srgb, var(--terracotta) 32%, transparent);
}
.tp__triad-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.tp__triad-title {
  font-family: var(--font-body);
  font-size: var(--step-mini);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--stone-700);
}
.tp__triad-sub {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-on-light-muted);
}

/* ── reduced-motion safety: everything alive-at-t0, nothing gated ───────── */
@media (prefers-reduced-motion: reduce) {
  .tp__sheen,
  .tp__band::before { animation: none; opacity: 0; }
  .tp__pull-quote em::after { transform: scaleX(1); transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RECOMPOSITION (≤760px) — per DESIGN mobile plan cell 2:
   3-up proof → single vertical stack; lead with the strongest transformation,
   remove decorative separators; cards recomposed (not squished). Band keeps its
   contained warm-taupe identity but hugs the stacked cards.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .tp { gap: var(--space-l); }
  .tp__band {
    padding: clamp(1.1rem, 0.8rem + 1.5vw, 1.6rem);
    border-radius: calc(var(--radius) * 1.6);
  }
  .tp__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .tp__frame { aspect-ratio: 4 / 3; } /* wider crop reads cleaner in a single column */
  .tp__triad {
    grid-template-columns: 1fr;
    gap: var(--space-m);
    max-width: 26rem;
  }
  .tp__triad-item { justify-content: flex-start; }
  .tp__trustline { gap: 0.5rem 1rem; }
}

/* very narrow (≤390px) — keep the head to ≤3 controlled lines, tighten band */
@media (max-width: 390px) {
  .tp__title { font-size: clamp(1.6rem, 8vw, 2rem); }
  .tp__pull-quote { font-size: clamp(1.35rem, 7vw, 1.7rem); }
  .tp__frame { aspect-ratio: 1 / 1; }
}