/* ============================================================================
   home.css — layouts unique to the homepage.
   Anything shared with another page belongs in base.css.

   The hero is TYPOGRAPHIC on deep sea-teal, with ambient hairline arcs echoing
   the logo flourish. The video contract is still wired underneath — when the
   client's footage arrives it plays under the scrim and the arcs sit over it.
   ============================================================================ */

/* ============================================== 2. HERO ==================== */
.hero{
  position:relative;
  /* The hero owns the ENTIRE first viewport — nothing below it shows until
     the visitor scrolls, on mobile and desktop alike. dvh tracks the mobile
     URL-bar; vh is the fallback. min-height (not height) so short phones with
     large text still fit rather than clipping. */
  min-height:100vh;
  min-height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:calc(var(--nav-h) + 2rem);
  padding-bottom:0;                /* .hero-bar sits flush at the bottom */
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 82% 8%, var(--deep-2) 0%, var(--deep) 58%);
  color:var(--white);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video,
.hero-photo{ width:100%; height:100%; object-fit:cover; }
.hero-media picture{ position:absolute; inset:0; }
/* The still IS frame one of hero.mp4, so its crop must match the video's or
   the fade becomes a jump. Both are pinned to the same object-position —
   change them together, never one alone. */
.hero-media video,
.hero-photo{ object-position:50% 50%; }
.hero-photo{ transition:opacity 700ms var(--ease); }
.hero-video[hidden]{ display:none; }
.hero-scrim{
  position:absolute; inset:0;
  /* Deep-teal wash keeps the type legible and the photo unmistakably Relax. */
  background:linear-gradient(97deg, rgba(15,33,31,.93) 0%, rgba(15,33,31,.72) 48%, rgba(15,33,31,.28) 100%);
}

/* --- ambient arcs: the logo flourish at architectural scale ------------- */
.hero-arcs{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  overflow:visible;
}
.hero-arcs path{
  fill:none;
  stroke:var(--mint);
  stroke-width:1.25;
  vector-effect:non-scaling-stroke;
}
.hero-arcs .arc-1{ opacity:.16; }
.hero-arcs .arc-2{ opacity:.09; }
.hero-arcs .arc-3{ opacity:.05; }
@media (prefers-reduced-motion: no-preference){
  .hero-arcs{ animation:arcDrift 46s linear infinite alternate; }
  @keyframes arcDrift{
    from{ transform:translateY(0); }
    to{ transform:translateY(-2.5%); }
  }
}

.hero-inner{ position:relative; z-index:2; }

/* --- headline: three lines, staggered rise, italic pivot ---------------- */
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(3rem, 8.4vw, 6.75rem);
  font-weight:400; line-height:1.03; letter-spacing:-.022em;
  color:var(--white);
  max-width:14ch;
}
.hero-title .hl{ display:block; }
/* "Stay You." is the brand's whole argument — aesthetics without losing
   yourself. The italic is the emphasis; nothing else in the hero shouts. */
.hero-title .hl--pivot{ font-style:italic; }
.hero-title .hl--pivot .swoosh{
  display:inline-block; vertical-align:baseline;
  width:clamp(90px, 12vw, 170px); height:26px;
  margin:0 0 0 .25em;
}

.hero-sub{
  margin-top:1.75rem; max-width:42ch;
  font-size:clamp(1.0625rem,1.5vw,1.25rem); font-weight:300; line-height:1.6;
  color:rgba(255,255,255,.82);
}

.hero-rating{ margin-top:1.5rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.stars{ display:inline-flex; gap:2px; color:var(--mint); }
.star{ width:14px; height:14px; }
.rating-text{
  font-family:var(--font-ui); font-size:var(--fs-xs);
  letter-spacing:.06em; color:rgba(255,255,255,.75);
}

.hero-cta{ margin-top:2.5rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2rem; }
.hero-link{ color:var(--white); border-color:rgba(255,255,255,.4); }
.hero-link:hover{ border-color:var(--white); }

.hero-controls{ margin-top:2rem; margin-bottom:4rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.hero-ctl{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.625rem 1.125rem; min-height:44px;
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(15,33,31,.4); color:var(--white);
  font-family:var(--font-ui); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.1em;
  backdrop-filter:blur(6px);
}
.hero-ctl:hover{ border-color:rgba(255,255,255,.5); }
.hero-ctl[hidden]{ display:none; }

/* --- load sequence -------------------------------------------------------
   Orchestrated once: lines rise 90ms apart, then sub/rating/CTA, then the
   swoosh draws. Content is VISIBLE by default; body.hero-anim (added by JS
   before first paint on the homepage only) opts in, so no-JS never blanks. */
body.hero-anim .hero-title .hl,
body.hero-anim .hero-sub,
body.hero-anim .hero-rating,
body.hero-anim .hero-cta,
body.hero-anim .hero-bar{
  opacity:0; transform:translateY(26px);
  animation:heroRise 780ms cubic-bezier(.16,.84,.28,1) forwards;
}
body.hero-anim .hero-title .hl:nth-child(1){ animation-delay:80ms; }
body.hero-anim .hero-title .hl:nth-child(2){ animation-delay:170ms; }
body.hero-anim .hero-title .hl:nth-child(3){ animation-delay:260ms; }
body.hero-anim .hero-sub{    animation-delay:420ms; }
body.hero-anim .hero-rating{ animation-delay:500ms; }
body.hero-anim .hero-cta{    animation-delay:560ms; }
body.hero-anim .hero-bar{    animation-delay:640ms; transform:translateY(0); }
@keyframes heroRise{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  body.hero-anim .hero-title .hl,
  body.hero-anim .hero-sub,
  body.hero-anim .hero-rating,
  body.hero-anim .hero-cta,
  body.hero-anim .hero-bar{ opacity:1; transform:none; animation:none; }
}

.hero-bar{
  position:relative; z-index:2; margin-top:auto;
  background:rgba(9,20,19,.55); backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.1);
}
.hero-bar-inner{
  display:flex; flex-wrap:wrap; gap:.75rem 2.5rem;
  justify-content:center; align-items:center;
  padding-block:.625rem;
}
.hero-bar-item{
  font-family:var(--font-ui); font-size:var(--fs-xs);
  letter-spacing:.08em; color:rgba(255,255,255,.8);
  /* The bar's own padding came down to pay for this, so the hero is unchanged. */
  display:inline-flex; align-items:center; min-height:2.75rem;
}
a.hero-bar-item{ transition:color var(--dur) var(--ease); }
a.hero-bar-item:hover{ color:var(--mint); }

@media (max-width:640px){
  .hero{ padding-top:calc(var(--nav-h-mobile) + 3.5rem); }
  .hero-inner{ padding-bottom:2.5rem; }
  .hero-controls{ margin-bottom:0; }
  .hero-bar-inner{ justify-content:flex-start; }
}

/* ============================================== 3. ABOUT =================== */
.about-grid{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){ .about-grid{ grid-template-columns:0.85fr 1fr; } }

.about-stats{ margin-top:2.25rem; display:grid; gap:1.375rem; }
.about-stats li{ display:flex; flex-direction:column; gap:.125rem; padding-left:1.125rem; border-left:2px solid var(--mint); }
.about-stats strong{ font-family:var(--font-display); font-size:1.625rem; font-weight:400; }
.about-stats span{ font-size:var(--fs-sm); color:var(--muted); }
.about-links{ margin-top:2.25rem; display:flex; flex-wrap:wrap; gap:1.5rem 2rem; }
.about-photo{ margin-top:2rem; }
.about-photo img{ width:100%; border-radius:var(--r); aspect-ratio:4/4.6; object-fit:cover; object-position:50% 18%; }

/* ============================================== 4. PILLARS ================= */
/* Each pillar borrows the clinic's own goal-word register: the italic serif
   carries the promise, the sans explains it. No cards, no boxes. */
.pillars{ display:grid; gap:clamp(2rem,4vw,3rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
.pillar{ padding-top:1.375rem; border-top:1px solid var(--line-strong); }
.pillar .goal-word{ font-size:clamp(1.375rem,2.2vw,1.75rem); }
.pillar p{ color:var(--muted); font-size:var(--fs-sm); margin-top:.875rem; }

/* ============================================== 5. TREATMENTS ============== */
/* Editorial index, not a card grid. Each category is a large serif row with
   its treatment names as the sub-line — the page reads like the menu of a
   practice, not a template of products. */
.tx-index{ border-top:1px solid var(--line-strong); }
.tx-row{
  display:grid; align-items:baseline;
  grid-template-columns:1fr auto;
  gap:.25rem 2rem;
  padding:clamp(1.375rem,2.6vw,2rem) .25rem;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:background var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.tx-row:hover{ background:var(--mint-tint); padding-left:1rem; }
.tx-row-name{
  grid-column:1; grid-row:1;   /* explicit: the arrow's definite grid-row would
                                  otherwise be placed FIRST and steal column 1 */
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem,3vw,2.25rem); line-height:1.15; letter-spacing:-.01em;
}
.tx-row-list{
  grid-column:1; grid-row:2; margin-top:.375rem;
  font-size:var(--fs-sm); color:var(--muted); max-width:56ch;
}
.tx-row-arrow{
  grid-column:2; grid-row:1 / span 2; align-self:center;
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tx-row:hover .tx-row-arrow{ background:var(--ink); border-color:var(--ink); color:var(--ink-on-dark); transform:translateX(4px); }
.tx-row-arrow svg{ width:16px; height:16px; }
.section-foot{ margin-top:clamp(2rem,4vw,3rem); }

/* ============================================== 6. FEATURED =============== */
.featured-grid{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:900px){ .featured-grid{ grid-template-columns:1fr 1fr; } }
.featured-media{ position:relative; }
.featured-media img{ width:100%; border-radius:var(--r); }
.featured-media::after{
  /* hairline mint frame, offset — a quiet echo of the arc motif */
  content:""; position:absolute; inset:14px -14px -14px 14px;
  border:1px solid rgba(108,219,214,.35); border-radius:var(--r);
  pointer-events:none;
}
.featured-body .goal-word{ font-size:clamp(1.25rem,2vw,1.625rem); }
.featured-body h2{ margin-block:.375rem 1.25rem; }

/* ============================================== 7. RESULTS ================ */
.ba-open{
  display:block; width:100%; padding:0; text-align:left; border-radius:var(--r);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ba-open:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.ba-open:active{ transform:scale(.985); }
.ba-tx{ text-decoration:underline; text-underline-offset:3px; }
.ba-tx:hover{ color:var(--teal-ink); }
.empty-state{ color:var(--muted); font-size:var(--fs-sm); }

/* ============================================== 8. REVIEWS ================ */
.review-agg{
  display:flex; align-items:center; gap:clamp(1.5rem,3.5vw,3rem);
  flex-wrap:wrap; padding-bottom:2.5rem;
}
.review-agg-num{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(4rem,10vw,7rem); line-height:.9;
}
.review-agg-stars{ font-size:1.25rem; letter-spacing:.14em; color:var(--teal-ink); }
.review-agg-text{ color:var(--muted); font-size:var(--fs-sm); margin-block:.375rem 1rem; }
.review-grid{ padding-top:2.5rem; border-top:1px solid var(--line); }
.review{ padding-top:1.5rem; border-top:1px solid var(--line-strong); }
.review p{ font-family:var(--font-display); font-size:1.1875rem; line-height:1.5; }
.review cite{
  display:block; margin-top:1rem; font-style:normal;
  font-family:var(--font-ui); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:var(--track-ui); color:var(--muted);
}

/* ============================================== 9. SPECIALS =============== */
.special{
  padding:clamp(1.75rem,3vw,2.75rem);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
}
.special h3{ margin-bottom:.75rem; }
.special p{ color:var(--muted); font-size:var(--fs-sm); }
.special-terms{ margin-top:.75rem; font-size:var(--fs-xs); }
.special-actions{ margin-top:1.75rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.special--fallback{
  background:var(--sand); border:0;
  max-width:44rem;
}

/* ============================================== 10. VISIT ================= */
.visit-grid{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr; }
@media (min-width:900px){ .visit-grid{ grid-template-columns:1fr 1fr; } }
.visit-info{ display:grid; gap:2.25rem; align-content:start; }
.visit-block h3{ font-size:var(--fs-h3); margin-bottom:.875rem; }
.visit-block address{ font-style:normal; color:var(--muted); margin-bottom:.875rem; }
.hours-list li{ display:flex; justify-content:space-between; gap:1.5rem; padding:.5625rem 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); }
.hours-list li:last-child{ border-bottom:0; }
.visit-links li{ padding:0; }
/* Phone, WhatsApp, email and directions — the actions most likely to be
   tapped on a phone, and 17px tall until now. */
.visit-links a{ font-size:var(--fs-sm); text-decoration:underline; text-underline-offset:3px; }
.visit-block .btn{ margin-top:1.25rem; }
.visit-map{ min-height:24rem; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
.visit-map iframe{ width:100%; height:100%; min-height:24rem; display:block; filter:grayscale(.4) sepia(.06); }

/* ============================================== 11. FINAL CTA ============= */
.final-cta{ text-align:center; position:relative; overflow:hidden; }
.final-cta .wrap{ position:relative; z-index:1; }
.final-cta .lede{ margin:1.25rem auto 0; }
.final-cta-actions{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.final-cta .btn-ghost{ color:var(--ink-on-dark); border-color:rgba(244,244,241,.4); }
.final-cta .btn-ghost:hover{ background:var(--ink-on-dark); color:var(--ink); }