/* odNOVA V2 hero title contract
   One rendered title scale for pages 2.1-2.7.
   HOME V3/V6 provides the visual authority; this is deliberately 2-8% quieter.
   Loaded last so page-local legacy overrides cannot fragment the family. */

/* Historic page sheets contain route-specific two-ID cascade locks. The
   repeated #top and never-matching :not() ID deliberately give this shared
   contract three-ID specificity, avoiding seven inline/page-local fixes. */
body.nt-hero-page[data-lang-page] #top#top h1.hs-h1:not(#v2-title-contract-sentinel){
  font-family:var(--font-serif,var(--serif,"Newsreader",Georgia,serif))!important;
  font-weight:300!important;
  line-height:.9!important;
  letter-spacing:-.045em!important;
}

body.nt-hero-page[data-lang-page] #top#top h1.hs-h1:not(#v2-title-contract-sentinel) .big{
  font-weight:300!important;
}

body.nt-hero-page[data-lang-page] #top#top h1.hs-h1:not(#v2-title-contract-sentinel) .txv2-title-break{
  display:none!important;
}

body.nt-hero-page[data-lang-page] #top#top h1.hs-h1:not(#v2-title-contract-sentinel) .sub{
  display:block!important;
  width:auto!important;
  max-width:calc(100% - clamp(16px,3vw,44px))!important;
  margin:clamp(2px,.035em,4px) 0 0 clamp(16px,3vw,44px)!important;
  font-size:.9em!important;
  font-style:italic!important;
  font-weight:300!important;
  line-height:.9!important;
  letter-spacing:inherit!important;
  white-space:normal!important;
}

/* The family entrance animation used inset(0) as its final mask. Newsreader's
   capitals rise a few pixels above a .9 line box, so that mask visibly shaved
   the top serifs from J, M, P and similar letters. Keep the same reveal, but
   give the title an optical bleed on every edge. */
@keyframes v2-title-copy-in-safe{
  0%{opacity:0;clip-path:inset(-.16em -.1em calc(100% + .16em) -.1em);transform:translate3d(0,24px,0)}
  100%{opacity:1;clip-path:inset(-.16em -.1em);transform:none}
}

@media (prefers-reduced-motion:no-preference){
  html.txv2-intro body.treatments-v2-page #top#top .txv2-hero-copy>h1.hs-h1:not(#v2-title-contract-sentinel),
  html.cv2-intro body.consultation-v2-page #top#top .cv2-hero-copy>h1.hs-h1:not(#v2-title-contract-sentinel),
  html.ntv2-intro body.nt-v2-page #top#top .ntv2-hero-copy>h1.hs-h1:not(#v2-title-contract-sentinel){
    animation-name:v2-title-copy-in-safe!important;
  }
}

/* The founder portrait is the one deliberate mobile geometry exception.
   Move the complete copy stack (eyebrow, title, lede and action) below the
   face; the six non-photographic V2 heroes retain the shared position. */
@media (max-width:600px){
  body.nt-hero-page[data-lang-page="meet-piotr"] #top#top .ntv2-hero-copy{
    padding-top:236px!important;
    padding-bottom:24px!important;
  }
}

/* Consultation, Fees, Journal and Treatments keep their direction directly
   below the lede on desktop. Tablet and phone already use this reading order
   and are intentionally untouched here. */
@media (min-width:861px){
  body.nt-hero-page:is(
    [data-lang-page="fees"],
    [data-lang-page="journal"]
  ) #top#top .ntv2-hero-copy{
    grid-template-rows:auto auto auto auto!important;
  }
  body.nt-hero-page:is(
    [data-lang-page="fees"],
    [data-lang-page="journal"]
  ) #top#top .ntv2-hero-action{
    grid-column:1!important;
    grid-row:4!important;
    justify-self:start!important;
    width:min(400px,100%)!important;
    margin:24px 0 0!important;
  }

  body.nt-hero-page[data-lang-page="consultation"] #top#top .cv2-hero-copy,
  body.nt-hero-page[data-lang-page="treatments"] #top#top .txv2-hero-copy{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(350px,400px)!important;
    grid-template-rows:auto auto auto auto!important;
  }
  body.nt-hero-page[data-lang-page="consultation"] #top#top .cv2-hero-copy>.hs-eyebrow,
  body.nt-hero-page[data-lang-page="treatments"] #top#top .txv2-hero-copy>.hs-eyebrow{
    grid-column:1/-1!important;
    grid-row:1!important;
  }
  body.nt-hero-page[data-lang-page="consultation"] #top#top .cv2-hero-copy>h1,
  body.nt-hero-page[data-lang-page="treatments"] #top#top .txv2-hero-copy>h1{
    grid-column:1/-1!important;
    grid-row:2!important;
  }
  body.nt-hero-page[data-lang-page="consultation"] #top#top .cv2-hero-copy>.hs-lede,
  body.nt-hero-page[data-lang-page="treatments"] #top#top .txv2-hero-copy>.hs-lede{
    grid-column:1!important;
    grid-row:3!important;
  }
  body.nt-hero-page[data-lang-page="consultation"] #top#top .cv2-hero-copy>.txv2-hero-action,
  body.nt-hero-page[data-lang-page="treatments"] #top#top .txv2-hero-copy>.txv2-hero-action{
    grid-column:1!important;
    grid-row:4!important;
    justify-self:start!important;
    width:min(400px,100%)!important;
    margin:24px 0 0!important;
  }

  /* Meet Piotr, Contact and Appointments already use the correct one-column
     reading order. Give their action one additional text line of breathing
     room without inserting presentational markup. */
  body.nt-hero-page:is(
    [data-lang-page="meet-piotr"],
    [data-lang-page="contact"],
    [data-lang-page="booking"]
  ) #top#top .ntv2-hero-copy{
    grid-template-rows:auto auto auto auto!important;
  }
  body.nt-hero-page:is(
    [data-lang-page="meet-piotr"],
    [data-lang-page="contact"],
    [data-lang-page="booking"]
  ) #top#top .ntv2-hero-action{
    grid-column:1!important;
    grid-row:4!important;
    justify-self:start!important;
    width:min(400px,100%)!important;
    margin:42px 0 0!important;
  }
}

@media (min-width:601px) and (max-width:860px){
  body.nt-hero-page[data-lang-page="meet-piotr"] #top#top .ntv2-hero-copy{
    padding-top:clamp(420px,39svh,470px)!important;
  }
}

@media (max-width:600px){
  body.nt-hero-page[data-lang-page] #top#top h1.hs-h1:not(#v2-title-contract-sentinel){
    font-size:clamp(53px,14.1vw,56px)!important;
  }
}

@media (min-width:601px) and (max-width:1120px){
  body.nt-hero-page[data-lang-page] #top#top h1.hs-h1:not(#v2-title-contract-sentinel){
    font-size:clamp(58px,7.34vw,62px)!important;
  }
}

@media (min-width:1121px){
  body.nt-hero-page[data-lang-page] #top#top h1.hs-h1:not(#v2-title-contract-sentinel){
    font-size:clamp(76px,6.82vw,100px)!important;
  }
}