/* ============================================================
   CELL 5 — ONE-CHAIR EXPERIENCE — The Beauty Suite (B-opus lane)
   Winner G3 layout · folds in G4 (Valla-attributed pullquote · named 5-step arc ·
   6px framed portrait + calm-corner badge) + G1 (tight step labels). SPARSE-RELIEF:
   one bright daylight portrait on open paper, calm rows, ONE soft taupe reassurance
   card. Dominant mass LIGHT — NO full-width dark band, NO dark rail (dark area is
   only the contained portrait card, well under 40% of the cell). Paper/porcelain
   canvas, HONEY accents only, espresso ink. Radius = --radius (6px) everywhere.
   Alive at t0: masked hair-sheen + low-distance portrait drift @keyframes; content
   is ALWAYS opacity:1 (transform-only intro) — 0 scroll-gated content. ZERO lens-
   flare / diagonal streak / sparkle. Tokens are the only color source.
   ============================================================ */

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

.chair { width: 100%; }

/* ── sparse-relief entrance breath (bulletproof, alive-at-t0) ────────────────
   Content is ALWAYS opacity:1 — the intro is TRANSFORM-ONLY (a small translateY
   settle), so nothing can ever be hidden even if the timeline stalls / is
   unsupported (the exact failure the no-scroll-reveal law guards). Plays once at
   load on ambient timing, never scroll-gated. base.css already animates
   [data-reveal] with ambient-rise; this adds a gentle staggered cadence per block
   so the section settles calmly rather than all at once. */
#cell-5 [data-reveal] { opacity: 1; }              /* the guarantee: visible with or without motion */
@media (prefers-reduced-motion: no-preference) {
  #cell-5 .chair__stage    { animation-delay: 40ms; }
  #cell-5 .chair__lede     { animation-delay: 100ms; }
  #cell-5 .chair__arc      { animation-delay: 150ms; }
  #cell-5 .chair__reassure { animation-delay: 190ms; }
  #cell-5 .chair__founder  { animation-delay: 230ms; }
}

/* ══ TOP GRID — portrait left · editorial copy right ═══════════════════════ */
.chair__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 1rem + 4.5vw, 5.5rem);
  align-items: center;
}

/* ── LEFT — one bright daylight portrait (framed · calm-corner badge) ─────── */
.chair__stage { position: relative; }

.chair__portrait {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;                       /* honest crop favouring hair-shine, not the dark torso */
  box-shadow: 0 44px 90px -54px rgba(75, 56, 47, 0.6);
  background: var(--marble-100);
  /* a fine honey-warm ring so the card reads as intentional glass on paper */
  outline: 1px solid var(--hairline);
  outline-offset: 0;
}
.chair__portrait-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 19%;                  /* crown + face + the shiniest mid-lengths; trim the dark sweater/torso */
  /* HIGH-KEY GRADE: lift the real asset toward the brand's daylight-biased, warm-
     neutral, lifted-shadow treatment so it never reads as a dark-luxury mood shot
     (T2.9 exposure harmony · DESIGN photography treatment). Blonde/bronde tonal
     separation preserved — a gentle lift, not a blowout. */
  filter: brightness(1.11) contrast(0.95) saturate(1.03) sepia(0.05);
  /* barely-perceptible ambient drift — hair looks lit and alive at t0 (low distance) */
  animation: chair-portrait-drift 13s var(--ease-inout) infinite alternate;
}
@keyframes chair-portrait-drift {
  from { transform: scale(1.05) translateY(0); }
  to   { transform: scale(1.05) translateY(-1.9%); }
}
/* a soft porcelain top-wash lifts the frame's upper edge so the portrait sits in
   the light world (feathered, terminates fully transparent — T2.19, no hard line) */
.chair__portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(251, 246, 239, 0.24) 0%,
    rgba(251, 246, 239, 0.06) 22%,
    transparent 46%
  );
}

/* masked ambient shine drifting down the shiniest ribboning — living light on the
   real blonde, feathered bloom, NEVER a hard streak. mix-blend screen so it reads
   as reflected daylight on hair, not a graphic overlay. */
.chair__portrait-sheen {
  position: absolute;
  inset: -12% -28%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    102deg,
    transparent 41%,
    rgba(255, 250, 242, 0.14) 48%,
    rgba(255, 250, 242, 0.24) 52%,
    rgba(255, 250, 242, 0.14) 56%,
    transparent 63%
  );
  mix-blend-mode: screen;
  animation: chair-sheen-travel 9s var(--ease-inout) infinite;
  will-change: transform, opacity;
}
@keyframes chair-sheen-travel {
  0%   { transform: translateX(-40%) translateY(6%); opacity: 0; }
  16%  { opacity: 1; }
  50%  { opacity: 0.82; }
  84%  { opacity: 1; }
  100% { transform: translateX(40%) translateY(-6%); opacity: 0; }
}

/* calm-corner badge — anchored in the open-hair corner (T2.8 one element/corner),
   feathered porcelain glass, honey heart. Honest: no fabricated face/name. */
.chair__badge {
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.7rem 0.42rem 0.5rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--cream) 84%, transparent);
  -webkit-backdrop-filter: blur(7px) saturate(1.2);
  backdrop-filter: blur(7px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--terracotta) 26%, transparent);
  box-shadow: 0 14px 30px -22px rgba(75, 56, 47, 0.55);
}
.chair__badge-mark {
  display: inline-flex;
  color: var(--terracotta);                  /* honey heart */
  line-height: 0;
}
.chair__badge-text {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--stone-700);
  max-width: 8.5rem;
}

/* ── RIGHT — editorial copy column ───────────────────────────────────────── */
.chair__lede {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 40rem;
}

/* eyebrow carries a trailing honey rule (G3) — the accent seam */
.chair__eyebrow {
  color: var(--eyebrow-ink);                  /* honey accent — names the visitor's situation */
  margin-bottom: var(--space-m);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
}
.chair__eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  max-width: 4.5rem;
  background: color-mix(in srgb, var(--terracotta) 55%, transparent);
}

.chair__headline {
  font-size: var(--step-section);            /* H2A — section head */
  color: var(--stone-700);                   /* espresso ink on paper */
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin-bottom: var(--space-m);
  text-wrap: balance;
}
.chair__headline-em {
  font-style: italic;                        /* Prata italic emphasis — the single accent turn */
  color: var(--terracotta);                  /* honey */
}

.chair__body {
  position: relative;
  color: var(--text-on-light);               /* espresso body */
  font-size: var(--step-0);
  line-height: var(--leading-body);
  max-width: 42ch;
  margin-bottom: var(--space-l);
}

/* ── three experience mini-steps (identical units) — medallion + label + text ── */
.chair__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.chair__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(0.9rem, 0.6rem + 0.9vw, 1.35rem);
  align-items: start;
  padding-block: clamp(1rem, 0.75rem + 0.8vw, 1.45rem);
}
/* hairline dividers BETWEEN steps only (G3) — fine espresso rule on paper */
.chair__step + .chair__step { border-top: 1px solid var(--hairline); }

.chair__step-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--terracotta-tint);        /* translucent honey wash medallion */
  border: 1px solid color-mix(in srgb, var(--terracotta) 34%, transparent);
  color: var(--terracotta-deep);             /* honey-espresso lined glyph */
}
.chair__step-copy { min-width: 0; }
.chair__step-label {
  font-family: var(--font-body);             /* H3A / mini — label discipline (G1) */
  font-size: var(--step-mini);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--stone-700);
  margin-bottom: 0.4rem;
}
.chair__step-text {
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 0.88rem + 0.15vw, 1rem);
  line-height: 1.5;
  color: var(--text-on-light-muted);
  max-width: 44ch;
}

/* ══ NAMED EXPERIENCE ARC (borrow G4) — text-only mini-steps, LIGHT ═══════════
   A calm 5-across strip on paper (never G4's dark band). Identical units, taupe-on-
   paper numerals (never metallic gold), honey connector ticks between. ─────────── */
.chair__arc {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-top: var(--space-l);
  border-top: 1px solid var(--hairline);
}
.chair__arc-title {
  font-family: var(--font-body);
  font-size: var(--step-mini);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: 600;
  color: var(--text-on-light-muted);
  margin-bottom: var(--space-m);
}
.chair__arc-track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 0.4rem + 2vw, 2.5rem);
}
.chair__arc-step {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;
}
/* honey diamond connector between arc steps (the "flow", not a heavy rule) */
.chair__arc-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.62rem;
  right: calc(-1 * clamp(0.5rem, 0.2rem + 1vw, 1.25rem));
  width: 5px; height: 5px;
  transform: translateY(-50%) rotate(45deg);
  background: color-mix(in srgb, var(--terracotta) 70%, transparent);
}
.chair__arc-num {
  font-family: var(--font-display);          /* Prata numeral — editorial, taupe-on-paper */
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.85rem);
  line-height: 1;
  color: var(--terracotta);                  /* honey (never gold-metallic) */
  margin-bottom: 0.15rem;
}
.chair__arc-name {
  font-family: var(--font-body);
  font-size: var(--step-mini);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--stone-700);
}
.chair__arc-note {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.42;
  color: var(--text-on-light-muted);
}

/* ══ ONE SOFT TAUPE REASSURANCE CARD (G3) — the cell's only warm-taupe mass ═══
   Bounded card (well under 40% of the section), champagne/taupe ground, Prata
   italic pullquote left · honey-check list right. A faint pointer-tracked gloss
   (lit mirror-glass) lives on it — set by cell-5.js, hover-gated. ─────────────── */
.chair__reassure {
  position: relative;
  overflow: hidden;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
  border-radius: var(--radius);
  /* warm taupe/champagne ground — the ONE soft proof card, NOT a dark slab */
  background: var(--marble-100);
  border: 1px solid var(--stone-200);
  box-shadow: 0 30px 60px -46px rgba(75, 56, 47, 0.5);
}
.chair__reassure-eyebrow {
  font-family: var(--font-body);
  font-size: var(--step-mini);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: 600;
  color: var(--eyebrow-ink);             /* honey-deep on the taupe ground (≥4.5:1) */
  margin-bottom: 0.65rem;
}
.chair__reassure-line {
  font-family: var(--font-display);          /* Prata — Body-A / pullquote */
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
  line-height: 1.22;
  color: var(--stone-700);
  text-wrap: balance;
}
.chair__reassure-line em { font-style: italic; color: var(--terracotta-deep); } /* honey emphasis */

.chair__reassure-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.chair__reassure-list li {
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 0.88rem + 0.15vw, 1.02rem);
  font-weight: 500;
  color: var(--stone-700);
  padding-left: 1.75rem;
  position: relative;
  line-height: 1.3;
}
/* honey check tick — feathered, drawn (no image), one per line */
.chair__reassure-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.05em;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: var(--terracotta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4 10-11'/%3E%3C/svg%3E") center / 0.72rem no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4 10-11'/%3E%3C/svg%3E") center / 0.72rem no-repeat;
}

/* pointer-tracked gloss (lit mirror-glass) — feathered, honey-warm, hover-gated */
.chair__reassure-gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    18rem 18rem at var(--gx, 82%) var(--gy, 10%),
    rgba(255, 250, 243, 0.55),
    transparent 62%
  );
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  mix-blend-mode: screen;
}
@media (hover: hover) and (pointer: fine) {
  .chair__reassure.is-lit .chair__reassure-gloss { opacity: 1; }
}

/* ── Valla-attributed founder line (borrow G4) — one quiet line on open paper ── */
.chair__founder {
  margin-top: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
  max-width: 52rem;
  padding-left: clamp(1rem, 0.5rem + 1.5vw, 1.85rem);
  border-left: 2px solid var(--terracotta);  /* honey quote rule */
}
.chair__founder-quote {
  font-family: var(--font-display);          /* Prata — Body-A / pullquote */
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.55rem);
  font-style: italic;
  line-height: 1.36;
  color: var(--stone-700);
  text-wrap: pretty;
  margin-bottom: var(--space-s);
}
.chair__founder-sign {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.chair__founder-name {
  font-family: var(--font-display);          /* Prata — reads as a poised signature */
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1;
  color: var(--terracotta);                  /* honey */
}
.chair__founder-heart { color: var(--terracotta); line-height: 0; }
.chair__founder-role {
  font-family: var(--font-body);
  font-size: var(--step-mini);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--text-on-light-muted);
  margin-left: 0.35rem;
}

/* ── ambient / reduced-motion safety: everything alive-at-t0, nothing gated ── */
@media (prefers-reduced-motion: reduce) {
  .chair__portrait-img { animation: none; transform: scale(1.05); }
  .chair__portrait-sheen { animation: none; opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE RECOMPOSITION (≤760px) — per DESIGN mobile plan cell 5:
   split narrative → STACKED blocks. Order = founder note first (eyebrow+head+body),
   then consultation/process (steps + arc), then environment reassurance (card +
   founder line). Portrait cropped to hair/quiet detail, never room-wide emptiness.
   Map / secondary utility facts live in cell 7, never here. Recomposed, not squished.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .chair__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  /* order: copy first (the founder note), THEN the portrait — mobile leads with voice */
  .chair__lede  { order: 1; max-width: none; }
  .chair__stage { order: 2; }

  .chair__headline { font-size: clamp(2.1rem, 8.5vw, 2.7rem); line-height: 1.04; }
  .chair__body { max-width: none; }
  .chair__eyebrow::after { max-width: none; }

  /* portrait stays a poised 4:5 hair crop */
  .chair__portrait { aspect-ratio: 4 / 5; }
  .chair__badge-text { max-width: 10rem; }

  /* the named arc re-grids from 5-across into a 2-column stack (recompose, not squish) */
  .chair__arc-track {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m) var(--space-l);
  }
  .chair__arc-step:not(:last-child)::after { display: none; } /* drop connector ticks when wrapped */

  /* reassurance card stacks its two columns */
  .chair__reassure {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }
}

/* very narrow (≤390px) — keep the headline ≤3 controlled lines; arc to single column */
@media (max-width: 390px) {
  .chair__headline { font-size: clamp(1.95rem, 10vw, 2.4rem); }
  .chair__arc-track { grid-template-columns: 1fr; gap: var(--space-m); }
  .chair__step { grid-template-columns: auto 1fr; }
}