/* ============================================================
   CELL 1 — HERO — The Beauty Suite (B-opus lane)
   Winner G4 layout · folds in G2 (signed Valla card · client avatar · anti-filter
   caption) + G3 (service ticker). Porcelain-dominant canvas, HONEY accents only,
   espresso ink. Radius = --radius (6px) everywhere. Alive at t0: ambient hair-sheen
   @keyframes (no scroll-gated content). ZERO lens-flare / diagonal streak / sparkle.
   Shared tokens are the only color source (--marble-50 / --terracotta / --stone-700).
   ============================================================ */

#cell-1 {
  /* the hero owns a full viewport so the masthead sits over porcelain, nothing cut */
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* leave room under the fixed masthead so nav never overlaps hero content */
  padding-block: calc(var(--nav-h) + var(--space-l)) var(--space-l);
  overflow: hidden; /* contain the ambient sheen bloom — never a page scrollbar */
}

.hero { width: 100%; }

/* ── editorial entrance breath (bulletproof, alive-at-t0) ─────────
   Content is ALWAYS opacity:1 — the intro is TRANSFORM-ONLY (a low-distance
   translateY drift), so no content can ever be hidden even if the animation
   timeline is stalled/unsupported (the exact failure the no-scroll-reveal law
   guards against). Staggered via --hero-in-i so the eyebrow leads and the
   headline settles just after (editorial breath, WOW-contract). fill:both keeps
   the resting state = the natural visible box. NOT scroll-gated — plays once at
   load. Honoured only where motion is allowed. */
[data-hero-in] { opacity: 1; } /* the guarantee: visible with or without motion */
@media (prefers-reduced-motion: no-preference) {
  [data-hero-in] {
    animation: hero-in 0.72s var(--ease-out) both;
    animation-delay: calc(var(--hero-in-i, 0) * 90ms + 60ms);
  }
}
@keyframes hero-in {
  from { transform: translateY(14px); }
  to   { transform: none; }
}
/* the portrait stage carries its own inner drift; keep the entrance drift subtle
   so it never fights the ambient sheen */
.hero__stage[data-hero-in] { animation-duration: 0.9s; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

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

.hero__eyebrow {
  color: var(--eyebrow-ink);              /* honey accent — names the visitor's situation */
  margin-bottom: var(--space-m);
  position: relative;
  padding-left: 0; /* clean; the honey rule below the headline carries the accent seam */
}

.hero__headline {
  font-size: var(--step-hero);           /* H1A */
  color: var(--stone-700);               /* espresso ink on porcelain */
  line-height: 0.99;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-m);
  text-wrap: balance;
}
.hero__headline-em {
  font-style: italic;                    /* Prata italic second phrase — the thesis turn */
  color: var(--stone-700);
}

/* honey hairline seam between headline and body — the editorial regrip */
.hero__body {
  position: relative;
  color: var(--text-on-light);           /* espresso body */
  font-size: var(--step-0);
  line-height: var(--leading-body);
  max-width: 34ch;
  margin-bottom: var(--space-l);
  padding-top: var(--space-m);
}
.hero__body::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 2.5rem; height: 2px;
  background: var(--terracotta);         /* honey accent rule */
  border-radius: 2px;
}

/* ── inset transformation card + descriptors ──────────────────── */
.hero__proof {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  align-items: center;
  width: 100%;
  margin-bottom: var(--space-l);
}

.hero__inset {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 22px 46px -34px rgba(75, 56, 47, 0.55);
  background: var(--marble-50);
  aspect-ratio: 960 / 950;
}
.hero__inset-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;   /* favour the hair over the torso/shirt in the pre-composed pair */
  display: block;
}
/* feathered corner labels (borrow G2) — soft pills, NOT a hard scrim */
.hero__inset-labels { position: absolute; inset: 0; pointer-events: none; }
.hero__inset-pill {
  position: absolute;
  bottom: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  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);
}
.hero__inset-pill--before {
  left: 0.55rem;
  background: color-mix(in srgb, var(--stone-700) 74%, transparent); /* feathered espresso */
  color: var(--marble-50);
}
.hero__inset-pill--after {
  right: 0.55rem;
  background: color-mix(in srgb, var(--terracotta) 82%, transparent); /* feathered honey */
  color: #3a2b23;
}
/* one-time gloss sweep on load — feathered ambient, never a hard streak */
.hero__inset-gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 250, 244, 0.34) 50%,
    transparent 62%
  );
  background-size: 260% 100%;
  background-position: 180% 0;
  animation: hero-inset-sweep 5.5s var(--ease-inout) 0.5s 1 both;
  mix-blend-mode: screen;
}
@keyframes hero-inset-sweep {
  0%   { background-position: 170% 0; opacity: 0; }
  22%  { opacity: 1; }
  100% { background-position: -70% 0; opacity: 0; }
}

.hero__proof-copy { display: flex; flex-direction: column; gap: var(--space-s); }
.hero__anti-filter {
  font-family: var(--font-display);      /* Prata — a quiet editorial reassurance */
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.24;
  color: var(--stone-700);
  font-style: italic;
  text-wrap: balance;                    /* no orphaned "hair." on its own line */
  max-width: 20ch;
}
.hero__descriptors {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.hero__descriptors li {
  font-family: var(--font-body);
  font-size: var(--step-mini);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--text-on-light-muted);
  padding-left: 1.1rem;
  position: relative;
}
.hero__descriptors li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--terracotta);         /* honey tick */
}

/* ── primary CTA — espresso ground, honey underline-travel + arrow slide ── */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border-radius: var(--radius);
  background: var(--stone-700);          /* espresso ground */
  color: var(--marble-50);               /* porcelain label */
  font-family: var(--font-body);
  font-size: var(--step-mini);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-l);
  position: relative;
  overflow: hidden;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.hero__cta-label {
  position: relative;
}
/* honey underline that travels in under the label (motion.js/css handles hover; base here) */
.hero__cta-label::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1.5px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.hero__cta-arrow { transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) {
  .hero__cta:hover { background: var(--terracotta); color: #3a2b23; transform: translateY(-1px); }
  .hero__cta:hover .hero__cta-label::after { transform: scaleX(1); background: #3a2b23; }
  .hero__cta:hover .hero__cta-arrow { transform: translateX(4px); }
}
.hero__cta:focus-visible .hero__cta-label::after { transform: scaleX(1); }

/* ── named review proof line (real reviewer · real-result thumb) ── */
.hero__review {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--hairline);
  width: 100%;
  max-width: 30rem;
}
.hero__review-thumb {
  width: 3rem; height: 3rem;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 26%;
  border: 1.5px solid var(--stone-200);
}
.hero__review-body { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; }
.hero__review-stars { display: inline-flex; gap: 2px; color: var(--terracotta); line-height: 0; }
.hero__review-quote {
  font-family: var(--font-display);      /* Prata — Body-A / pullquote */
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.16rem);
  line-height: 1.28;
  color: var(--stone-700);
}
.hero__review-quote em { font-style: italic; color: var(--terracotta); }
.hero__review-cite {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--text-on-light-muted);
}
.hero__review-cite span { font-weight: 500; letter-spacing: 0.08em; }

/* ── RIGHT — tall hero portrait + founder card ────────────────── */
.hero__stage { position: relative; }

.hero__portrait {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 503 / 640;               /* crop the tall 503×1000 to a poised portrait */
  box-shadow: 0 40px 80px -50px rgba(75, 56, 47, 0.62);
  background: var(--marble-100);
}
.hero__portrait-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;              /* face + crown + shine, never chair/background */
  /* barely-perceptible ambient drift — hair looks lit and alive at t0 */
  animation: hero-portrait-drift 12s var(--ease-inout) infinite alternate;
}
@keyframes hero-portrait-drift {
  from { transform: scale(1.045) translateY(0); }
  to   { transform: scale(1.045) translateY(-2.4%); }
}

/* ambient shine-pass: a soft specular band drifts slowly along the real wave
   pattern — living light on the blonde ribbons, feathered bloom, NO hard streak */
.hero__portrait-sheen {
  position: absolute;
  inset: -10% -30%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 40%,
    rgba(255, 249, 240, 0.16) 49%,
    rgba(255, 249, 240, 0.26) 52%,
    rgba(255, 249, 240, 0.16) 55%,
    transparent 64%
  );
  mix-blend-mode: screen;
  animation: hero-sheen-travel 9s var(--ease-inout) infinite;
  will-change: transform, opacity;
}
@keyframes hero-sheen-travel {
  0%   { transform: translateX(-42%) translateY(4%); opacity: 0; }
  18%  { opacity: 1; }
  50%  { opacity: 0.85; }
  82%  { opacity: 1; }
  100% { transform: translateX(42%) translateY(-4%); opacity: 0; }
}

/* signed founder-heart card (borrow G2) — warm porcelain glass, honey signature */
.hero__founder {
  position: absolute;
  right: clamp(-1.25rem, -1.6vw, -0.5rem);   /* overhang the portrait's right edge — floating glass panel */
  bottom: clamp(-1.25rem, -1.6vw, -0.5rem);  /* overhang the bottom edge (G2 depth), not tucked inside */
  width: min(19rem, 68%);
  padding: 1.15rem 1.35rem 1.25rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(1.25);
  backdrop-filter: blur(8px) saturate(1.25);
  border: 1px solid color-mix(in srgb, var(--terracotta) 30%, transparent);
  box-shadow: 0 26px 54px -34px rgba(75, 56, 47, 0.6);
  overflow: hidden;
}
.hero__founder-kicker {
  font-family: var(--font-body);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--terracotta);
  margin-bottom: 0.5rem;
}
.hero__founder-line {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.42;
  color: var(--stone-700);
  margin-bottom: 0.55rem;
}
.hero__founder-sign { display: flex; align-items: center; gap: 0.4rem; }
.hero__founder-name {
  font-family: var(--font-display);      /* Prata — reads as a poised signature */
  font-size: 1.6rem;
  font-style: italic;
  line-height: 1;
  color: var(--terracotta);
}
.hero__founder-heart { color: var(--terracotta); }
/* a faint pointer-tracked gloss lives on the card (cell-1.js sets --gx/--gy) */
.hero__founder-gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    16rem 16rem at var(--gx, 78%) var(--gy, 12%),
    rgba(255, 250, 243, 0.5),
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  mix-blend-mode: screen;
}
@media (hover: hover) {
  .hero__founder:hover .hero__founder-gloss,
  .hero__founder.is-lit .hero__founder-gloss { opacity: 1; }
}

/* ── quiet service ticker (borrow G3) ─────────────────────────── */
.hero__ticker {
  margin-top: clamp(1.75rem, 1rem + 2vw, 3rem);
  padding-top: var(--space-m);
  border-top: 1px solid var(--hairline);
}
.hero__ticker-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 0.5rem + 2vw, 2.75rem);
}
.hero__ticker-list li {
  font-family: var(--font-body);
  font-size: var(--step-mini);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--text-on-light-muted);
  position: relative;
}
/* honey diamond separators between ticker items */
.hero__ticker-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(-1 * clamp(0.5rem, 0.25rem + 1vw, 1.4rem));
  top: 50%;
  width: 4px; height: 4px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--terracotta);
}

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

/* ══════════════════════════════════════════════════════════════
   MOBILE RECOMPOSITION (≤760px) — per DESIGN mobile plan cell 1:
   2-col → 1-col; order = headline · body · CTA · review proof · portrait ·
   inset. Keep portrait at 4:5; consultation CTA visible. Recomposed, not squished.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  #cell-1 {
    min-height: auto;
    padding-block: calc(var(--nav-h) + var(--space-m)) var(--space-xl);
    align-items: stretch;
  }
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .hero__lede { max-width: none; display: contents; } /* let children re-order under the grid */

  /* explicit mobile order across the single column */
  .hero__eyebrow   { order: 1; margin-bottom: var(--space-s); }
  .hero__headline  { order: 2; margin-bottom: var(--space-s); }
  .hero__body      { order: 3; max-width: none; margin-bottom: var(--space-m); }
  .hero__cta       { order: 4; margin-bottom: var(--space-l); align-self: flex-start; }
  .hero__stage     { order: 5; margin-bottom: var(--space-l); }
  .hero__proof     { order: 6; margin-bottom: var(--space-l); }
  .hero__review    { order: 7; max-width: none; }
  .hero__ticker    { order: 8; }

  .hero__headline { font-size: clamp(2.6rem, 8vw, 3.4rem); line-height: 1.02; }

  /* portrait becomes a poised 4:5 above the fold-continuation */
  .hero__portrait { aspect-ratio: 4 / 5; }
  .hero__founder {
    position: static;
    width: 100%;
    margin-top: var(--space-s);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--cream);
  }

  /* inset + descriptors stack cleanly on narrow */
  .hero__proof { grid-template-columns: 1fr; gap: var(--space-m); }
  .hero__inset { max-width: 20rem; }

  .hero__ticker-list { justify-content: flex-start; gap: 0.8rem 1.4rem; }
  .hero__ticker-list li:not(:last-child)::after { right: calc(-1 * 0.9rem); }
}

/* very narrow (≤390px) — keep headline to ≤3 controlled lines */
@media (max-width: 390px) {
  .hero__headline { font-size: clamp(2.35rem, 10.5vw, 2.9rem); }
}