/* ============================================================
   02-hero — scoped under .sec-02-hero
   ============================================================ */

.sec-02-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3.5rem));
  padding-bottom: clamp(4rem, 10vw, 7rem);
  overflow: clip;
}

/* --- Layered background --- */
.sec-02-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate; /* contain mix-blend-mode to this layer only */
}

.sec-02-hero__photo {
  position: absolute;
  inset: -10% -5% -20% -5%;
  will-change: transform;
  animation: sec-02-hero-kenburns 28s ease-in-out infinite alternate;
}
.sec-02-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the therapist's face and the patient's hand in frame at desktop and phone widths */
  object-position: 56% 60%;
  /* Duotone grade: strip color from the source photo, then let the tint
     layer below inject the accent hue via mix-blend-mode. */
  filter: grayscale(1) brightness(0.7) contrast(1.05);
}
@keyframes sec-02-hero-kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-1.5%, -1%, 0); }
}
html.reduced-motion .sec-02-hero__photo { animation: none; transform: none; }

/* Charcoal duotone tint — blends with the grayscale photo beneath it */
.sec-02-hero__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    hsl(0 0% 18% / 0.85),
    hsl(0 0% 8% / 0.92)
  );
  mix-blend-mode: color;
}

.sec-02-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, hsl(0 0% 5% / 0.94) 0%, hsl(0 0% 6% / 0.72) 32%, hsl(0 0% 6% / 0.32) 58%, hsl(0 0% 6% / 0.18) 100%),
    linear-gradient(0deg, hsl(0 0% 4% / 0.9) 0%, hsl(0 0% 5% / 0.35) 32%, transparent 62%);
}

.sec-02-hero__glow {
  position: absolute;
  top: 10%;
  left: 55%;
  width: min(60vw, 900px);
  height: min(60vw, 900px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  filter: blur(10px);
  opacity: 0.7;
  animation: sec-02-hero-drift 16s var(--ease-out) infinite alternate;
}
@keyframes sec-02-hero-drift {
  from { transform: translate(-3%, -2%) scale(1); }
  to   { transform: translate(4%, 5%) scale(1.12); }
}
html.reduced-motion .sec-02-hero__glow { animation: none; }

/* --- Content row (left copy column + right figure column) --- */
.sec-02-hero__inner {
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .sec-02-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 58%) minmax(0, 42%);
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4rem);
  }
}

.sec-02-hero__content {
  min-width: 0;
}

.sec-02-hero__eyebrow {
  margin-bottom: 1.4rem;
}

.sec-02-hero__headline {
  margin: 0 0 1.4rem;
  max-width: 18ch;
}

.sec-02-hero__line {
  display: block;
}

.sec-02-hero__line--rotator {
  color: var(--accent-soft);
}

/* Rotating word: sizer establishes intrinsic width from the widest option */
.sec-02-hero__rotator {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  color: hsl(var(--accent-h) 75% 68%);
}
.sec-02-hero__rotator-sizer {
  visibility: hidden;
  display: grid;
}
.sec-02-hero__rotator-sizer span {
  grid-area: 1 / 1;
}
.sec-02-hero__rotator-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  opacity: 1;
  transform: translateY(0);
  will-change: transform, opacity;
}
.sec-02-hero__rotator-word.is-leaving {
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
  opacity: 0;
  transform: translateY(0.35em);
}
.sec-02-hero__rotator-word.is-entering {
  transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1), transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 1;
  transform: translateY(0);
}
html.reduced-motion .sec-02-hero__rotator-word {
  transition: none;
}

.sec-02-hero__line--static {
  color: var(--white);
}

.sec-02-hero__word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* No margin: the line break between the word spans in sections/02-hero.html
     already renders as a normal space, and 0.28em on top of it doubled the gap
     ("Get  your", 2026-10-15 QA). */
}
.sec-02-hero__word {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 700ms var(--ease-out);
}
html.is-loaded .sec-02-hero__word-wrap:nth-of-type(1) .sec-02-hero__word { transition-delay: 260ms; }
html.is-loaded .sec-02-hero__word-wrap:nth-of-type(2) .sec-02-hero__word { transition-delay: 340ms; }
html.is-loaded .sec-02-hero__word { transform: translateY(0); }
html.reduced-motion .sec-02-hero__word { transform: none; transition: none; }

.sec-02-hero__subhead {
  max-width: 46ch;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  color: var(--text-on-ink-dim);
  margin-bottom: clamp(1.8rem, 3vw, 2.4rem);
}

.sec-02-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: clamp(2.2rem, 4vw, 3rem);
}

/* --- Google rating chip --- */
.sec-02-hero__rating {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--white);
  color: var(--text-on-bone);
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.25rem 0.7rem 0.75rem;
  box-shadow: var(--shadow-lift);
  animation: sec-02-hero-float 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes sec-02-hero-float {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
}
html.reduced-motion .sec-02-hero__rating { animation: none; }

.sec-02-hero__rating-badge {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  background: var(--bone);
  border-radius: 50%;
  flex-shrink: 0;
}

.sec-02-hero__rating-text {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}
.sec-02-hero__rating-text strong {
  color: var(--text-on-bone);
  font-family: var(--font-display);
  font-weight: 700;
}
.sec-02-hero__rating-dot {
  margin: 0 0.15rem;
  color: var(--text-on-bone-dim);
}

/* --- Right visual column: duotone portrait in an arch frame --- */
.sec-02-hero__figure {
  display: none; /* desktop-only composition; mobile hero is unchanged */
}

@media (min-width: 1024px) {
  .sec-02-hero__figure {
    /* In-flow grid child: vertically centered against the headline/copy column */
    display: block;
    position: relative;
    align-self: center;
    justify-self: center;
    width: min(340px, 100%);
  }

  .sec-02-hero__figure-glow {
    position: absolute;
    inset: -22% -30%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 72%);
    filter: blur(30px);
    opacity: 0.8;
  }

  .sec-02-hero__figure-ring {
    position: absolute;
    inset: -14px;
    z-index: 1;
    border: 1.5px solid hsl(var(--accent-h) 70% 62% / 0.4);
    border-radius: 999px 999px 32px 32px;
    transform: translate(16px, 20px);
    pointer-events: none;
  }

  .sec-02-hero__figure-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 7 / 9;
    border-radius: 999px 999px 24px 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lift);
  }

  .sec-02-hero__figure-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.78) contrast(1.05);
    transform: scale(1.02);
    transition: filter 550ms var(--ease-out), transform 550ms var(--ease-out);
  }

  .sec-02-hero__figure-tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      165deg,
      hsl(var(--accent-h) 60% 20% / 0.75),
      hsl(var(--accent-h) 35% 10% / 0.85)
    );
    mix-blend-mode: color;
    transition: opacity 550ms var(--ease-out);
  }

  /* Warm slightly on hover — less tinted, a touch of life comes back in */
  .sec-02-hero__figure:hover .sec-02-hero__figure-img,
  .sec-02-hero__figure:focus-within .sec-02-hero__figure-img {
    filter: grayscale(0.5) brightness(0.92) contrast(1.02);
    transform: scale(1.05);
  }
  .sec-02-hero__figure:hover .sec-02-hero__figure-tint,
  .sec-02-hero__figure:focus-within .sec-02-hero__figure-tint {
    opacity: 0.6;
  }

  /* --- Docked chips: rating (lower-left of frame) + openings (upper-right) --- */
  .sec-02-hero__chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--white);
    color: var(--text-on-bone);
    border-radius: var(--radius-pill);
    padding: 0.55rem 0.95rem 0.55rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow-lift);
    will-change: transform;
  }
  .sec-02-hero__chip-icon {
    color: var(--accent-strong);
    flex-shrink: 0;
  }

  .sec-02-hero__chip--openings {
    top: clamp(-0.75rem, -2vw, -0.25rem);
    right: clamp(-1rem, -3vw, -0.4rem);
    animation: sec-02-hero-float-b 7s ease-in-out infinite;
  }
  @keyframes sec-02-hero-float-b {
    0%, 100% { transform: translateY(3px); }
    50% { transform: translateY(-5px); }
  }
  html.reduced-motion .sec-02-hero__chip--openings { animation: none; }

  /* Move the Google rating chip out of the copy column and dock it onto
     the frame's lower-left edge. */
  .sec-02-hero__rating {
    margin-top: clamp(-1.5rem, -3vw, -0.5rem);
    margin-left: clamp(0px, 4vw, 3rem);
    margin-right: clamp(-14rem, -16vw, -10rem);
  }
}

/* --- Curved bottom divider --- */
.sec-02-hero__divider {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(50px, 8vw, 110px);
  z-index: 1;
  pointer-events: none;
}

/* --- Layout: rating chip overlaps photo edge on tablet (figure not shown yet) --- */
@media (min-width: 900px) and (max-width: 1023px) {
  .sec-02-hero__rating {
    margin-left: clamp(0px, 4vw, 3rem);
  }
}

@media (max-width: 640px) {
  .sec-02-hero__headline { max-width: 100%; }
  .sec-02-hero__cta { flex-direction: column; align-items: stretch; }
  .sec-02-hero__cta .btn { width: 100%; }
  .sec-02-hero__rating { margin-top: 0.5rem; }
  /* On a portrait phone the photo box is exactly as tall as the cover-scaled
     image, so object-position's y value does nothing. Lift the whole layer so
     the therapist's grip and the patient's open palm sit in the upper right,
     where the scrim is lightest, instead of behind the paragraph and buttons. */
  .sec-02-hero__photo { inset: -35% -5% -5% -5%; }
  .sec-02-hero__photo img { object-position: 76% 50%; }
}