/* ============================================================================
   EDITORIAL-WARM SURGEON HERO  —  isolated, self-contained, zero-JS
   ----------------------------------------------------------------------------
   Aesthetic: high-end editorial / luxury private clinic.
   Canvas sand-paper #f8f4ec, ink #2b2622, ONE accent terracotta #bb5a3c.
   Type-led: the surgeon's name is the hero (Source Serif 4). Public Sans body.
   Self-hosted variable fonts, zero third-party requests.

   MOTION CONTRACT (learned the hard way):
   - Every element is FULL-OPACITY and complete AT REST by default.
   - The entrance/parallax only ADD polish; they always END at opacity:1.
   - They live inside @media (prefers-reduced-motion: no-preference), so a
     reduced-motion user, a no-support browser, or a settled screenshot always
     sees everything. Nothing here is EVER made visible by animation.
   - Zero JavaScript. Entrance = CSS animation-delay. Parallax = scroll() timeline.
   ========================================================================== */

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/public-sans-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/source-serif-4-var.woff2) format('woff2');
}

.hero {
  /* Local tokens (mirror renobackpain "Warm & Human"; ink is the spec's #2b2622). */
  --hero-bg:        #f8f4ec;   /* sand paper           */
  --hero-ink:       #2b2622;   /* ink                  */
  --hero-ink-dim:   #5b5344;   /* supporting text      */
  --hero-ink-faint: #8b8070;   /* overline / meta      */
  --hero-accent:    #bb5a3c;   /* terracotta (the ONLY accent) */
  --hero-accent-2:  #9d4227;   /* accent hover         */
  --hero-accent-ink:#fffaf3;   /* text on terracotta   */
  --hero-line:      #e2d8c6;   /* faint border         */

  --hero-font:  "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hero-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* 8px spacing grid — every gap below is a multiple of 8. */
  --hero-gutter: clamp(24px, 6vw, 96px);   /* wide outer margins  */
  --hero-colgap: clamp(32px, 5vw, 72px);   /* column gap          */
  --hero-maxw:   1200px;

  --hero-ease:   cubic-bezier(.2, .7, .2, 1);  /* spring-ish */

  position: relative;
  background: var(--hero-bg);
  color: var(--hero-ink);
  font-family: var(--hero-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: clamp(48px, 8vw, 112px) var(--hero-gutter) clamp(56px, 9vw, 120px);
  overflow: clip;                 /* contain the taller portrait, no page overflow */
}

.hero__inner {
  max-width: var(--hero-maxw);
  margin-inline: auto;
  display: grid;
  /* Asymmetric editorial 2-col: text ~58% (1.38fr), portrait ~42% (1fr). */
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
  grid-template-areas: "text portrait";
  align-items: start;             /* tops aligned to the grid — nothing free-floating */
  column-gap: var(--hero-colgap);
  row-gap: clamp(32px, 6vw, 56px);
}

/* ---- Text column ---------------------------------------------------------- */
.hero__text {
  grid-area: text;
  align-self: center;             /* center the shorter text block against the tall portrait */
  max-width: 34ch;
}

.hero__overline {
  margin: 0 0 24px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hero-ink-faint);
}

.hero__name {
  margin: 0;
  font-family: var(--hero-serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--hero-ink);
}

/* The luxury signature: a 1px rule that draws itself in from the left. */
.hero__rule {
  height: 1px;
  width: 100%;
  margin: 24px 0;
  background: var(--hero-accent);
  transform: scaleX(1);           /* AT REST: full width, always */
  transform-origin: left center;
}

.hero__credential {
  margin: 0;
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--hero-ink-dim);
}

.hero__tagline {
  margin: 16px 0 0;
  font-family: var(--hero-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  line-height: 1.28;
  color: var(--hero-ink);
}

.hero__cta {
  margin: 40px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 10px;
  font-family: var(--hero-font);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--hero-ease), background-color .18s var(--hero-ease), box-shadow .18s var(--hero-ease);
}
.hero__btn--primary {
  background: var(--hero-accent);
  color: var(--hero-accent-ink);
  box-shadow: 0 6px 18px -8px rgba(157, 66, 39, .5);
}
.hero__btn--primary:hover { background: var(--hero-accent-2); transform: translateY(-1px); }
.hero__btn--phone {
  background: transparent;
  color: var(--hero-ink);
  border: 1px solid var(--hero-ink);
}
.hero__btn--phone:hover { background: var(--hero-ink); color: var(--hero-bg); transform: translateY(-1px); }
.hero__btn--phone .hero__phoneglyph { color: var(--hero-accent); font-size: 1.05em; line-height: 1; }
.hero__btn--phone:hover .hero__phoneglyph { color: var(--hero-accent-ink); }
.hero__btn:focus-visible { outline: 2px solid var(--hero-accent); outline-offset: 3px; }

/* ---- Portrait column ------------------------------------------------------ */
.hero__portrait {
  grid-area: portrait;
  align-self: start;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--hero-line);   /* graceful fill before the image paints */
  box-shadow: 0 30px 60px -30px rgba(80, 45, 25, .38);
}
/* hairline frame — quiet editorial detail */
.hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(43, 38, 34, .10);
  border-radius: inherit;
  pointer-events: none;
}
.hero__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 120%;                   /* overscan gives the parallax room; frame stays covered */
  object-fit: cover;
  object-position: 50% 22%;       /* keep the face framed */
  display: block;
  will-change: transform;
}

/* ==========================================================================
   MOTION — only inside no-preference. Reduced motion keeps everything static.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Entrance stagger: name -> rule -> tagline -> CTA, ~60ms apart.
     Each starts hidden but the animation is `both` and ENDS at opacity:1,
     so worst case it simply settles visible. No JS gate involved. */
  .hero__overline,
  .hero__name,
  .hero__credential,
  .hero__tagline,
  .hero__cta,
  .hero__portrait {
    animation: hero-rise .72s var(--hero-ease) both;
  }
  .hero__overline   { animation-delay: .00s; }
  .hero__name       { animation-delay: .06s; }
  /* rule handled by its own draw animation below */
  .hero__credential { animation-delay: .18s; }
  .hero__tagline    { animation-delay: .24s; }
  .hero__cta        { animation-delay: .30s; }
  .hero__portrait   { animation: hero-portrait-in .9s var(--hero-ease) .10s both; }

  .hero__rule {
    animation: hero-draw .7s var(--hero-ease) .12s both;
  }

  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes hero-portrait-in {
    from { opacity: 0; transform: translateY(20px) scale(1.015); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
  }
  @keyframes hero-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* The ONE signature scroll motion: portrait parallax, ~12% translateY delta.
     Runs on the inner <img> so it never fights the frame's entrance transform. */
  @supports (animation-timeline: scroll()) {
    .hero__portrait img {
      animation: hero-parallax linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 120vh;
    }
    @keyframes hero-parallax {
      from { transform: translateY(0); }
      to   { transform: translateY(-12%); }
    }
  }
}

/* ==========================================================================
   RESPONSIVE — single column at narrow widths. Portrait on top (magazine feel),
   text below with the CTA landing where the thumb reaches.
   ========================================================================== */
@media (max-width: 720px) {
  .hero__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "portrait"
      "text";
    row-gap: clamp(28px, 8vw, 44px);
  }
  .hero__text { align-self: start; max-width: none; }
  .hero__portrait { aspect-ratio: 4 / 4.4; }
  .hero__rule { margin: 20px 0; }
  .hero__cta { margin-top: 32px; }
  .hero__btn { flex: 1 1 auto; }   /* full-width, obvious tap targets */
}